Page.razor

@page "/"
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@inject WorkerController Worker
@inject LanguageServicesClient LanguageServices
@inject InputOutputCache Cache
@inject TemplateCache TemplateCache
@inject BlazorMonacoInterop BlazorMonacoInterop
@inject ILocalStorageService LocalStorage
@inject CursorSynchronizer.Services CursorSynchronizerServices
@inject IAppHostEnvironment HostEnvironment
@inject IUpdateChecker UpdateChecker
@inject IScreenInfo ScreenInfo
@inject ICompilerOutputPlugin CompilerOutputPlugin
@inject ILogger<Page> Logger
@using BlazorMonaco.Editor

<PageTitle>.NET Lab</PageTitle>

<FluentHeader Class="lab-header" Height="null">
    <div style="flex-grow: 1; justify-content: start">
        @* Logo *@
        @* Need to handle clicks to work around https://github.com/jjonescz/DotNetLab/issues/75. *@
        @* Empty slug is used to go to "initial state + loaded user preferences". *@
        <a href="/#" style="text-decoration: none" @onclick="@(() => OnLocationChanged(""))" @onclick:preventDefault>
            <img style="vertical-align: middle" src="_content/DotNetLab.App/favicon.png" alt="Logo" title=".NET Lab" width="24" height="24" />@*
            *@<span style="margin-left: 0.5em; vertical-align: middle">.NET Lab</span>
        </a>

        @* Input presets (quick-start templates) *@
        <FluentMenuButton Text="Template" Items="WellKnownSlugs.ShorthandToTitle" OnMenuChanged="OnInputPresetSelectedAsync"
                          ButtonStyle="margin-left: 0.5em" />
    </div>

    <div>
        @* Format document button *@
        <FluentButton OnClick="() => FormatCurrentFileAsync()" Title="Format document (Ctrl+I)"
                      IconStart="@(new Icons.Regular.Size20.CodeText())" Disabled="!IsCurrentInputCSharp" />

        @* URL buttons *@
        <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="0" Style="width: initial">
            @* Copy URL button *@
            <FluentButton OnClick="() => CopyUrlToClipboardAsync()" Title="Copy URL to clipboard (Ctrl+;)"
                          Style="border-top-right-radius: 0; border-bottom-right-radius: 0"
                          IconStart="@(urlCopied ? new Icons.Regular.Size20.Checkmark() : new Icons.Regular.Size20.Copy())" />

            @* Load URL button *@
            <FluentButton OnClick="() => LoadUrlFromClipboardAsync()" Title="Load URL from clipboard"
                          Style="border-top-left-radius: 0; border-bottom-left-radius: 0"
                          IconStart="@(new Icons.Regular.Size20.ClipboardPaste())"
                          Disabled="!canPasteUrlFromClipboard" />
        </FluentStack>

        @* Compile button *@
        <FluentButton Appearance="Appearance.Accent" OnClick="() => CompileAsync()" Loading="compilationInProgress"
                      Title="Compile (Ctrl+S)" IconStart="@(new Icons.Regular.Size20.FlashPlay())" Disabled="!initialized">
            Compile
        </FluentButton>

        @* Settings button *@
        <FluentButton OnClick="() => settings.OpenModalAsync()"
                      IconStart="@(new Icons.Regular.Size20.Settings())">
            Settings

            @if (UpdateChecker.UpdateIsAvailable)
            {
                <FluentSpacer Width="4" />
                <FluentBadge Appearance="Appearance.Accent" title="Update is available">1</FluentBadge>
            }
        </FluentButton>
    </div>

    <div style="flex-grow: 1">
        <div style="flex-grow: 1; min-width: 10rem">
            @* Outdated output info *@
            @if (IsOutputOutdated)
            {
                <FluentStack title="Output is outdated, click Compile or press Ctrl+S"
                             Style="font-size: 0.8rem; font-style: normal; width: auto"
                             HorizontalAlignment="HorizontalAlignment.Center">
                    <FluentIcon Value="@(new Icons.Regular.Size20.Save())" Color="Color.Fill" />
                    Ctrl+S to re-compile
                </FluentStack>
            }
            @* Cached info *@
            else if (compiled is { CacheInfo: { } cacheInfo, CachedOutput: null })
            {
                var title = cacheInfo.Timestamp.HasValue
                ? "The currently displayed output has been fetched from a server cache."
                : "The currently displayed output comes from a built-in cache.";
                <FluentStack title="@title" Style="font-size: 0.8rem; font-style: normal; width: auto"
                             HorizontalAlignment="HorizontalAlignment.Center">
                    <FluentIcon Value="@(new Icons.Regular.Size20.CloudCheckmark())" Color="Color.Fill" />
                    Cached
                    @if (cacheInfo.Timestamp is { } cacheTimestamp)
                    {
                        @FormatCacheTimestamp(cacheTimestamp)
                    }
                    else
                    {
                        @:template
                    }
                </FluentStack>
            }
        </div>

        @* Memory usage info *@
        @if (enableMemoryUsageView)
        {
            <MemoryUsageView />
        }

        <div>
            @* Keyboard button *@
            <FluentButton OnClick="ToggleInputVirtualKeyboardAsync"
                          Appearance="@(disableInputVirtualKeyboard ? Appearance.Accent : Appearance.Neutral)"
                          Title="@(disableInputVirtualKeyboard ? "Enable the on-screen keyboard for the input editor" : "Disable the on-screen keyboard for the input editor")">
                <FluentIcon Value="@(new Icons.Regular.Size20.Keyboard())" Color="Color.Neutral" />
            </FluentButton>

            @* Orientation button *@
            @if (orientation == Orientation.Horizontal)
            {
                <FluentButton OnClick="() => orientation = Orientation.Vertical"
                              Title="Display editors in a column">
                    <FluentIcon Value="@(new Icons.Regular.Size20.LayoutRowTwo())" Color="Color.Neutral" />
                </FluentButton>
            }
            else
            {
                <FluentButton OnClick="() => orientation = Orientation.Horizontal"
                              Title="Display editors in a row">
                    <FluentIcon Value="@(new Icons.Regular.Size20.LayoutColumnTwo())" Color="Color.Neutral" />
                </FluentButton>
            }
        </div>
    </div>
</FluentHeader>

<CascadingValue IsFixed="true" Value="this">
    <Settings @ref="settings" InputEditor="inputEditor" OutputEditor="outputEditor" @bind-WordWrap="wordWrap" @bind-UseVim="useVim" @bind-EnableMemoryUsageView="enableMemoryUsageView" />
</CascadingValue>

@* Input / output panels *@
@* Panels have `overflow: hidden` by default, which would cause Monaco Editor popups to get cropped, hence we reset it to `overflow: initial`. *@
<FluentMultiSplitter Orientation="orientation" Style="flex-grow: 1" Class="@(displayHintSquiggles ? null : "no-squiggly-hint")">
    @* Input panel *@
    <FluentMultiSplitterPane Collapsible Style="overflow: initial">
        <div style="display: flex; flex-direction: column; height: 100%">
            @* Input tabs *@
            <FluentTabs @bind-ActiveTabId="activeInputTabId" @bind-ActiveTabId:after="OnActiveInputTabIdChangedAsync"
                        ShowClose="inputs.Count > 1 || configuration != null" OnTabClose="OnInputTabClosedAsync"
                        Style="padding: 0 0.2em">
                @* Normal files *@
                @foreach (var (index, input) in inputs.Index())
                {
                    var id = IndexToInputTabId(index);
                    @* Clicking on an active tab goes into rename mode and we don't want to interfere with that, hence the condition inside @onclick. *@
                    <FluentTab Id="@id" Label="@(input.FileName)"
                               LabelEditable LabelChanged="(newName) => OnInputTabRenamedAsync(input, newName)"
                               @onclick="activeInputTabId != id ? OnInputTabClickAsync : null!" />
                }

                @* Special configuration file *@
                @if (configuration != null)
                {
                    @* NOTE: Label is shown in the overflow menu, so it needs to be set even though Header is also set. *@
                    <FluentTab Id="@IndexToInputTabId((int)SpecialInput.Configuration)" Label="Configuration">
                        <Header>
                            <FluentIcon Value="@(new Icons.Regular.Size16.DocumentSettings())" />
                            <span style="margin-left: 0.2em">Configuration</span>
                        </Header>
                    </FluentTab>
                }

                @* Add new file button *@
                <div slot="end">
                    <FluentMenuButton IconStart="@(new Icons.Filled.Size20.DocumentAdd())" Text="Add"
                                      ButtonAppearance="Appearance.Neutral" OnMenuChanged="OnAddInputTabAsync">
                        <FluentMenuItem Id="cs">.cs</FluentMenuItem>
                        <FluentMenuItem Id="razor">.razor</FluentMenuItem>
                        <FluentMenuItem Id="cshtml">.cshtml</FluentMenuItem>
                        <FluentDivider />
                        <FluentMenuItem Id="directives" title="Simple configuration using #: directives">Directives</FluentMenuItem>
                        <FluentMenuItem Id="config" title="Complex configuration using Roslyn APIs">
                            <FluentIcon Slot="start" Value="@(new Icons.Regular.Size16.DocumentSettings())" />
                            Configuration
                        </FluentMenuItem>
                    </FluentMenuButton>
                </div>
            </FluentTabs>

            @* VIM status bar *@
            <div id="vim-status" class="vim-status-bar" hidden="@(!useVim)" />

            @* Input editor *@
            <div style="flex-grow: 1">
                <StandaloneCodeEditor @ref="inputEditor" Id="input-editor"
                                      ConstructionOptions="InputConstructionOptions" OnDidInit="EditorInitAsync"
                                      OnDidChangeModel="LanguageServices.OnDidChangeModel"
                                      OnDidChangeModelContent="OnDidChangeModelContentAsync"
                                      OnDidBlurEditorText="() => SaveStateToUrlAsync()" />
            </div>
        </div>
    </FluentMultiSplitterPane>

    @* Output panel *@
    <FluentMultiSplitterPane Collapsible Style="overflow: initial">
        <div style="display: flex; flex-direction: column; height: 100%">
            @* Worker status message *@
            @if (workerError != null)
            {
                <FluentMessageBar Title="Compiler worker failed." Intent="MessageIntent.Error" AllowDismiss="false">
                    <div style="white-space-collapse: preserve">@workerError</div>
                    <FluentButton Appearance="Appearance.Accent" Style="width: 100%; margin-top: 0.5em" OnClick="ReloadWorkerAsync"
                                  IconStart="@(new Icons.Regular.Size16.ArrowClockwise())">Re-create the worker</FluentButton>
                </FluentMessageBar>
            }

            @* Output tabs *@
            @* NOTE: @key is needed - otherwise, when AllOutputs change,
            the FluentTabs might render incorrect selected tab
            even though ActiveTabId is set correctly (probably a bug). *@
            <FluentTabs @bind-ActiveTabId="DisplayOutputType" @bind-ActiveTabId:after="UpdateOutputDisplayAsync" @key="AllOutputsKey"
                        Style="padding: 0 0.2em">
                @foreach (var output in AllOutputs)
                {
                    @* NOTE: Label is shown in the overflow menu, so it needs to be set even though Header is also set. *@
                    <FluentTab Id="@output.Type" Label="@output.Label" @onclick="OnOutputTabClickAsync">
                        <Header>
                            <span title="@output.Label (@output.Type)">@output.ShortLabel</span>

                            @* Error List badge *@
                            @if (output.Type == CompiledAssembly.DiagnosticsOutputType &&
                                compiled?.Output is { } compiledOutput &&
                                compiledOutput is { NumErrors: > 0 } or { NumWarnings: > 0 })
                            {
                                var color = compiledOutput.NumErrors > 0 ? "error" : "warning";
                                <FluentBadge Fill="x" BackgroundColor="@($"var(--{color})")" Color="white" Style="margin-left: 0.4em">
                                    @(compiledOutput.NumErrors > 0 ? compiledOutput.NumErrors : compiledOutput.NumWarnings)
                                </FluentBadge>
                            }
                        </Header>
                    </FluentTab>
                }

                <div slot="end" style="display: flex; flex-direction: row; align-items: center; gap: 0.5em">
                    @* Output loading indicator *@
                    <FluentProgressRing title="Output is loading" Visible="outputLoading" Width="1em" Style="margin-right: 0.2em" />
                </div>
            </FluentTabs>

            @* Output toolbar *@
            @if (OutputHasToolbar && GetOutput(DisplayOutputType) != null)
            {
                <FluentToolbar>
                    @switch (DisplayOutputType)
                    {
                        case "tree":
                            {
                                <FluentSelect @bind-SelectedOption:get="savedState.ShowSymbols"
                                              @bind-SelectedOption:set="(v) => ChangePreferencesAsync((s) => s with { ShowSymbols = v })"
                                              Items="Enum.GetValues<SymbolDisplayKinds>()"
                                              OptionText="getSymbolDisplayKindLabel"
                                              OptionTitle="getSymbolDisplayKindLabel"
                                              Width="max-content"
                                              AriaLabel="Symbols"
                                              AdditionalAttributes="@(new Dictionary<string, object>() { ["title"] = "Displays symbol nodes in the tree - look for `.GetSymbolInfo()` and `.GetDeclaredSymbol()` under syntax nodes" })">
                                </FluentSelect>

                                static string getSymbolDisplayKindLabel(SymbolDisplayKinds kind) => kind switch
                                {
                                    SymbolDisplayKinds.None => "No Symbols",
                                    SymbolDisplayKinds.Public => "Public Symbols",
                                    SymbolDisplayKinds.Internal => "Internal Symbols",
                                    SymbolDisplayKinds.Both => "All Symbols",
                                    _ => kind.ToString(),
                                };

                                <FluentCheckbox @bind-Value:get="savedState.ShowOperations"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { ShowOperations = v })"
                                                Label="Operations"
                                                title="Displays IOperation nodes in the tree - look for `.GetOperation()` under syntax nodes" />
                                <FluentCheckbox @bind-Value:get="savedState.ShowBoundNodes"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { ShowBoundNodes = v })"
                                                Label="Bound nodes"
                                                title="Displays bound nodes in the tree - look for `.GetBoundRoot()` under syntax nodes" />
                                <FluentButton OnClick="FoldAllOutputAsync" Title="Collapse all">@*
                                    *@<FluentIcon Value="@(new Icons.Regular.Size20.ArrowCollapseAll())" Color="Color.Neutral" /></FluentButton>
                            }
                            break;
                        case "html":
                            {
                                <FluentCheckbox @bind-Value="showRenderedHtml" Label="Rendered" Disabled="htmlOutput == null"
                                                title="Displays the HTML code rendered inside an iframe" />
                            }
                            break;
                        case "il":
                            {
                                <FluentCheckbox @bind-Value:get="savedState.DecodeCustomAttributeBlobs"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { DecodeCustomAttributeBlobs = v })"
                                                Label="Decode custom attribute blobs" />
                                <FluentCheckbox @bind-Value:get="savedState.ShowSequencePoints"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { ShowSequencePoints = v })"
                                                Label="Sequence points" />
                                <FluentCheckbox @bind-Value:get="savedState.FullIl"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { FullIl = v })"
                                                Label="Full IL" />
                            }
                            break;
                        case CompiledAssembly.DiagnosticsOutputType:
                            {
                                <FluentCheckbox @bind-Value:get="savedState.ExcludeSingleFileNameInDiagnostics"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { ExcludeSingleFileNameInDiagnostics = v })"
                                                Label="Exclude single file name" />
                                <FluentCheckbox @bind-Value:get="savedState.IncludeHiddenDiagnostics"
                                                @bind-Value:set="(v) => ChangePreferencesAsync((s) => s with { IncludeHiddenDiagnostics = v })"
                                                Label="Include hidden diagnostics" />
                            }
                            break;
                    }
                </FluentToolbar>
            }

            @* Output disclaimer *@
            @if (outputDisclaimer == OutputDisclaimer.JitAsmUnavailableUsingCached)
            {
                <FluentMessageBar Intent="MessageIntent.Info" AllowDismiss="false">
                    JIT disassembler is not available on this platform
                    (it's only available in the <a href="@App.DesktopAppLink" target="_blank" rel="noopener noreferrer">desktop app</a>).<br/>
                    Displaying cached output@(compiled?.CacheInfo?.Timestamp is { } cacheTimestamp ? $" ({FormatCacheTimestamp(cacheTimestamp)})" : "").
                </FluentMessageBar>
            }

            <div style="flex-grow: 1">
                @* Rendered HTML *@
                @{
                    bool actuallyShowRenderedHtml = showRenderedHtml && htmlOutput != null;
                }
                @if (actuallyShowRenderedHtml)
                {
                    <iframe srcdoc="@htmlOutput" style="width: 100%; height: 100%"></iframe>
                }

                @* Output editor *@
                @{
                    string style = actuallyShowRenderedHtml ? "display:none" : "display:contents";
                }
                <div style="@style">
                    <StandaloneCodeEditor @ref="outputEditor" Id="output-editor"
                                          OnDidInit="OutputEditorInitAsync"
                                          ConstructionOptions="OutputConstructionOptions" />
                </div>
            </div>
        </div>
    </FluentMultiSplitterPane>
</FluentMultiSplitter>

@code {
    /// <summary>
    /// Should be used whenever <see cref="inputs"/> are manipulated across <see langword="await"/>.
    /// </summary>
    private readonly AsyncLock inputsLock = new();

    private readonly TaskCompletionSource editorInitialized = new();
    private readonly List<Input> inputs = new();
    private readonly Dictionary<string, EditorState> outputStates = new();
    private CursorSynchronizer? cursorSynchronizer;
    private bool editorInitializationStarted;
    private bool initialized;
    private bool monacoThemeDefined;
    private DotNetObjectReference<Page>? dotNetObjectReference;
    private Action? unregisterEventListeners;
    private IJSObjectReference module = null!;
    private Input? configuration;
    private string activeInputTabId = IndexToInputTabId(0);
    private StandaloneCodeEditor inputEditor = null!;
    private StandaloneCodeEditor outputEditor = null!;
    private Input? currentInput;
    private EditorState? currentOutput;
    private string? userSelectedOutputType;
    private bool temporarilyShowErrorListIfOutputTextEmpty;
    private int urlCopiedToken;
    private bool urlCopied;
    private bool canPasteUrlFromClipboard = true;
    private bool compilationInProgress;
    private DateTimeOffset inputChanged;
    private bool outputLoading;
    private OutputDisclaimer outputDisclaimer;
    private CompiledState? compiled;
    private Settings settings = null!;
    private bool wordWrap;
    private bool useVim;
    private bool enableMemoryUsageView;
    private bool displayHintSquiggles;
    private bool disableInputVirtualKeyboard;
    private bool showRenderedHtml;
    private Orientation orientation;
    private string? workerError;
    private string? htmlOutput;

    private sealed record CompiledState
    {
        public required CompilationInput Input { get; init; }
        public required CompiledAssembly Output { get; init; }
        public CacheInfo? CacheInfo { get; init; }
        public required DateTimeOffset Start { get; init; }
        public required DateTimeOffset End { get; init; }

        public required bool AutoLoadLazyOutputs { get; init; }

        /// <summary>
        /// Only set if this <see cref="CompiledState"/> instance represents compiled (not cached) state
        /// but we also have cached output loaded for it.
        /// </summary>
        public CompiledAssembly? CachedOutput { get; init; }
    }

    private record EditorState(TextModel Model) : IAsyncDisposable
    {
        public MonacoEditorViewState ViewState { get; set; }

        public async ValueTask DisposeAsync()
        {
            await Model.DisposeModel();
            await ViewState.DisposeAsync();
        }
    }

    private sealed record Input(string FileName, TextModel Model) : EditorState(Model)
    {
        public string FileName { get; set; } = FileName;
        public required string? NewContent { get; set; }
    }

    private readonly record struct CacheInfo(DateTimeOffset? Timestamp);

    private enum SpecialInput
    {
        Configuration = -1,
    }

    private enum Layout
    {
        Split,
        InputOnly,
        OutputOnly,
    }

    private Input? CurrentInput
    {
        get
        {
            var i = InputTabIdToIndex(activeInputTabId);

            if (i == (int)SpecialInput.Configuration)
            {
                return configuration;
            }

            if (i < 0 || i >= inputs.Count)
            {
                return null;
            }

            return inputs[i];
        }
    }

    private IEnumerable<(Input Input, bool IsConfiguration)> InputsAndConfiguration
    {
        get
        {
            foreach (var input in inputs)
            {
                yield return (input, false);
            }

            if (configuration is { } config)
            {
                yield return (config, true);
            }
        }
    }

    private IEnumerable<CompiledFileOutput> AllOutputs
    {
        get => (CurrentCompiledFile?.Outputs)
            .TryConcat(compiled?.Output.GlobalOutputs);
    }

    private string AllOutputsKey
    {
        get => AllOutputs.Select(o => o.Type).JoinToString(",");
    }

    private bool TemporarilyShowErrorList
    {
        get
        {
            return temporarilyShowErrorListIfOutputTextEmpty &&
                userSelectedOutputType is { } outputType &&
                GetOutput(outputType) is { } output &&
                HasEmptyText(output) == true;
        }
    }

    private string? DisplayOutputType
    {
        get
        {
            return TemporarilyShowErrorList
                ? CompiledAssembly.DiagnosticsOutputType
                : userSelectedOutputType;
        }
        set
        {
            userSelectedOutputType = value;
            temporarilyShowErrorListIfOutputTextEmpty = false;
        }
    }

    /// <remarks>
    /// We don't check equality of last compiled input and current input
    /// because we might not have current input fully loaded
    /// (parts can live only in the editor until Compile is clicked).
    /// </remarks>
    private bool IsOutputOutdated
        => compiled is not { Start: var compileStart } || compileStart < inputChanged;

    private bool OutputHasToolbar
        => DisplayOutputType is "tree" or "html" or "il" or CompiledAssembly.DiagnosticsOutputType;

    protected override async Task OnInitializedAsync()
    {
        orientation = GetAutoOrientation();

        NavigationManager.LocationChanged += OnLocationChanged;
        UpdateChecker.UpdateStatusChanged += StateHasChanged;
        ScreenInfo.Updated += OnScreenInfoUpdated;
        Worker.Failed += OnWorkerFailed;

        displayHintSquiggles = await LocalStorage.TryLoadOptionAsync(nameof(displayHintSquiggles), defaultValue: false);
        disableInputVirtualKeyboard = await LocalStorage.TryLoadOptionAsync(nameof(disableInputVirtualKeyboard), defaultValue: false);
    }

    private async Task EditorInitAsync()
    {
        // This might get called twice when an editor is hidden and unhidden, or during hot reload,
        // but we don't want to continue initialization in those cases.
        if (editorInitializationStarted)
        {
            return;
        }

        editorInitializationStarted = true;

        await BlazorMonacoInterop.EnableSemanticHighlightingAsync();
        await BlazorMonacoInterop.RegisterLanguageAsync(CompiledAssembly.OutputLanguageId);
        await (await JSRuntime.InvokeAsync<IJSObjectReference>("import", "../_content/DotNetLab.App/js/asm.js")).InvokeVoidAsync("registerX86Language");
        await DefineMonacoThemeAsync();
        await RegisterWordWrapActionAsync();
        await RegisterFormatActionAsync();
        await RegisterSquigglyHintActionAsync();
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/DotNetLab.App/Lab/Page.razor.js");
        dotNetObjectReference = DotNetObjectReference.Create(this);
        unregisterEventListeners = await module.InvokeAsync<Action>("registerEventListeners", dotNetObjectReference);

        cursorSynchronizer = new CursorSynchronizer(CursorSynchronizerServices, inputEditor, outputEditor);
        await cursorSynchronizer.InitAsync();

        await settings.InitializeAsync();

        await LoadStateFromUrlAsync();

        if (disableInputVirtualKeyboard)
        {
            await module.InvokeVoidAsync("setVirtualKeyboardDisabled", inputEditor.Id, true);
        }

        if (await HostEnvironment.HasHardwareKeyboardAsync())
        {
            await inputEditor.Focus();
        }

        if (!editorInitialized.TrySetResult())
        {
            Logger.LogError("Failed to set editor initialized result.");
        }

        initialized = true;
        StateHasChanged();

        if (settings.AutoCompileOnStart && !compilationInProgress)
        {
            // Avoid storing the first auto compilation in cache
            // (the same shared snippet would be stored multiple times unnecessarily and
            // users can always store their snippet separately by compiling manually).
            await CompileAsync(storeInCache: false);
        }
    }

    private async Task OutputEditorInitAsync()
    {
        await editorInitialized.Task;
        await module.InvokeVoidAsync("setVirtualKeyboardDisabled", outputEditor.Id, true);
    }

    private async Task ToggleInputVirtualKeyboardAsync()
    {
        disableInputVirtualKeyboard = !disableInputVirtualKeyboard;
        StateHasChanged();
        await LocalStorage.SetItemAsync(nameof(disableInputVirtualKeyboard), disableInputVirtualKeyboard);
        await module.InvokeVoidAsync("setVirtualKeyboardDisabled", inputEditor.Id, disableInputVirtualKeyboard);
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
        UpdateChecker.UpdateStatusChanged -= StateHasChanged;
        ScreenInfo.Updated -= OnScreenInfoUpdated;
        Worker.Failed -= OnWorkerFailed;

        unregisterEventListeners?.Invoke();

        await cursorSynchronizer?.DisposeAsync();

        foreach (var input in inputs)
        {
            await input.DisposeAsync();
        }

        foreach (var outputModel in outputStates.Values)
        {
            await outputModel.DisposeAsync();
        }

        if (module is not null)
        {
            try
            {
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException) { }
        }

        dotNetObjectReference?.Dispose();

        inputsLock.Dispose();
    }

    private async Task OnLocationChanged(string targetSlug)
    {
        currentSlug = targetSlug;
        await LoadStateFromUrlAsync();
    }

    private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        RefreshCurrentSlug();
        await LoadStateFromUrlAsync();
        StateHasChanged();
    }

    [JSInvokable]
    public async Task CopyUrlToClipboardAsync()
    {
        await SaveStateToUrlAsync();
        await module.InvokeVoidAsync("copyUrlToClipboard", HostEnvironment.LabUrlPrefix);
        urlCopied = true;
        StateHasChanged();
        var token = Interlocked.Increment(ref urlCopiedToken);
        _ = Task.Delay(TimeSpan.FromSeconds(2)).ContinueWith(_ =>
        {
            if (token == urlCopiedToken)
            {
                urlCopied = false;
                StateHasChanged();
            }
        });
    }

    public async Task LoadUrlFromClipboardAsync()
    {
        var text = await module.InvokeAsync<string>("getClipboardText");
        if (NavigateToSlug(GetSlugFromClipboardText(text)))
        {
            await LoadStateFromUrlAsync();
        }
    }

    [JSInvokable]
    public void OnClipboardTextChanged(string? text)
    {
        var slug = GetSlugFromClipboardText(text);
        canPasteUrlFromClipboard = TryGetSavedStateFromSlug(slug, out _);
        StateHasChanged();
    }

    private static string GetSlugFromClipboardText(string? text)
    {
        text ??= "";
        var hashIndex = text.IndexOf('#');
        return hashIndex >= 0 ? text[(hashIndex + 1)..] : text;
    }

    private static bool TryGetSavedStateFromSlug(string slug, out SavedState? state)
    {
        if (WellKnownSlugs.ShorthandToState.TryGetValue(slug, out var wellKnownState))
        {
            state = wellKnownState;
            return true;
        }

        return Compressor.TryUncompress(slug, out state, out _);
    }

    private StandaloneEditorConstructionOptions InputConstructionOptions(StandaloneCodeEditor editor)
    {
        return EditorConstructionOptions(editor, output: false);
    }

    private StandaloneEditorConstructionOptions OutputConstructionOptions(StandaloneCodeEditor editor)
    {
        return EditorConstructionOptions(editor, output: true);
    }

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor, bool output)
    {
        return new()
        {
            AutomaticLayout = true,
            ReadOnly = output,
            // This avoids a virtual keyboard showing up on mobile on the output (readonly) editor.
            DomReadOnly = output,
            WordWrap = wordWrap ? "on" : "off",
            BracketPairColorization = output ? new() { Enabled = false } : null,
            Padding = new() { Top = 10 },
            Scrollbar = new()
            {
                // This allows Ctrl+Wheel on the editor to zoom the whole app
                // (not ideal because it also scrolls if possible, but better than nothing).
                AlwaysConsumeMouseWheel = false,
            },
            StickyScroll = new()
            {
                Enabled = true,
                MaxLineCount = 100,
            },
        };
    }

    public string GetMonacoTheme(bool dark)
    {
        if (monacoThemeDefined)
        {
            return dark ? CustomMonacoTheme.Dark : CustomMonacoTheme.Light;
        }

        return dark ? BuiltInMonacoTheme.Dark : BuiltInMonacoTheme.Light;
    }

    private async Task DefineMonacoThemeAsync()
    {
        Debug.Assert(!monacoThemeDefined);
        await CustomMonacoTheme.DefineAsync(JSRuntime);
        monacoThemeDefined = true;
        bool dark = settings.Theme switch
        {
            DesignThemeModes.Dark => true,
            DesignThemeModes.Light => false,
            _ => await BlazorMonacoInterop.HasDarkThemeAsync(inputEditor.Id),
        };
        await BlazorMonaco.Editor.Global.SetTheme(JSRuntime, GetMonacoTheme(dark: dark));
    }

    private async Task RegisterWordWrapActionAsync()
    {
        var action = new ActionDescriptor
        {
            Id = "word-wrap",
            Label = "Toggle Word Wrap",
            ContextMenuGroupId = "navigation",
            Keybindings = [(int)KeyMod.Alt | (int)BlazorMonaco.KeyCode.KeyZ],
            Run = _ => InvokeAsync(settings.ToggleWordWrapAsync),
        };
        await inputEditor.AddAction(action);
        await outputEditor.AddAction(action);
    }

    private async Task RegisterFormatActionAsync()
    {
        var action = new ActionDescriptor
        {
            Id = "format",
            Label = "Format Document",
            ContextMenuGroupId = "1_modification",
            Keybindings = [(int)KeyMod.CtrlCmd | (int)BlazorMonaco.KeyCode.KeyI],
            Run = _ => InvokeAsync(FormatCurrentFileAsync),
        };
        await inputEditor.AddAction(action);
        await outputEditor.AddAction(action);
    }

    private async Task RegisterSquigglyHintActionAsync()
    {
        var action = new ActionDescriptor
        {
            Id = "squiggly-hint",
            Label = ".NET Lab: Toggle Squiggly Hint (Hidden Diagnostic Decoration)",
            Run = _ => InvokeAsync(ToggleSquigglyHintAsync),
        };
        await inputEditor.AddAction(action);

        async Task ToggleSquigglyHintAsync()
        {
            displayHintSquiggles = !displayHintSquiggles;
            StateHasChanged();
            await LocalStorage.SetItemAsync(nameof(displayHintSquiggles), displayHintSquiggles);
        }
    }

    private async Task OnInputPresetSelectedAsync(MenuChangeEventArgs args)
    {
        if (args.Id is { } slug && NavigateToSlug(slug))
        {
            await LoadStateFromUrlAsync();
        }
    }

    private const string inputTabIdPrefix = "i";

    private static int InputTabIdToIndex(string tabId)
    {
        return TabIdToIndex(inputTabIdPrefix, tabId);
    }

    private static int TabIdToIndex(string prefix, string tabId)
    {
        return int.Parse(tabId.Substring(prefix.Length));
    }

    private static string IndexToInputTabId(int index)
    {
        return IndexToTabId(inputTabIdPrefix, index);
    }

    private static string IndexToTabId(string prefix, int index)
    {
        return $"{prefix}{index}";
    }

    private async Task OnActiveInputTabIdChangedAsync()
    {
        var i = InputTabIdToIndex(activeInputTabId);

        if (i == (int)SpecialInput.Configuration)
        {
            await SelectConfigurationAsync();
        }
        else if (i >= 0 && i < inputs.Count)
        {
            await SelectInputTabAsync(inputs[i], i);
        }
        else
        {
            return;
        }
    }

    private async Task OnInputTabClosedAsync(FluentTab tab)
    {
        await SaveStateToUrlAsync();

        var i = InputTabIdToIndex(tab.Id!);
        var activeInputTabIndex = InputTabIdToIndex(activeInputTabId);

        if (i == (int)SpecialInput.Configuration)
        {
            configuration = null;
        }
        else if (inputs.Count > 1)
        {
            using var _ = await inputsLock.LockAsync();
            var removedInput = inputs[i];
            inputs.RemoveAt(i);
            await removedInput.DisposeAsync();
        }
        else
        {
            return;
        }

        await OnWorkspaceChangedAsync();

        await SaveStateToUrlAsync();
    }

    private async Task OnInputTabRenamedAsync(Input input, string newName)
    {
        await SaveStateToUrlAsync();

        if (input.FileName != newName)
        {
            var oldLanguage = GetLanguageForFileExtension(Path.GetExtension(input.FileName));
            var newLanguage = GetLanguageForFileExtension(Path.GetExtension(newName));

            input.FileName = newName;

            if (oldLanguage != newLanguage)
            {
                await BlazorMonaco.Editor.Global.SetModelLanguage(JSRuntime, input.Model, newLanguage);
            }

            await OnWorkspaceChangedAsync();
        }

        await SaveStateToUrlAsync();
    }

    private async Task OnAddInputTabAsync(MenuChangeEventArgs args)
    {
        await SaveStateToUrlAsync();

        if (args.Id == "config")
        {
            await SelectConfigurationAsync();
        }
        else if (args.Id switch
        {
            "cs" => InitialCode.CSharp,
            "razor" => InitialCode.Razor,
            "cshtml" => InitialCode.Cshtml,
            "directives" => InitialCode.Directives,
            _ => null,
        } is { } initialCode)
        {
            await AddInputAsync(initialCode);
        }
        else
        {
            return;
        }

        await SaveStateToUrlAsync();

        if (await HostEnvironment.HasHardwareKeyboardAsync())
        {
            await inputEditor.Focus();
        }
    }

    internal async Task SelectConfigurationAsync()
    {
        if (configuration is null)
        {
            await SaveStateToUrlAsync();

            var fileName = InitialCode.Configuration.SuggestedFileName;
            var inputCode = InitialCode.Configuration.ToInputCode();
            var model = await CreateModelAsync(inputCode);
            configuration = new(fileName, model) { NewContent = inputCode.Text };
            await OnWorkspaceChangedAsync();

            await SaveStateToUrlAsync();
        }

        await SelectInputTabAsync(configuration, (int)SpecialInput.Configuration);
    }

    private async Task SelectInputTabAsync(Input input, int index)
    {
        if (currentInput is { } previousInput)
        {
            previousInput.ViewState = await inputEditor.SaveViewStateAsync(module);
        }

        currentInput = input;

        // Update the editor.
        await inputEditor.SetModel(input.Model);
        await inputEditor.RestoreViewStateAsync(input.ViewState, module);

        // Update the tabs.
        activeInputTabId = IndexToInputTabId(index);

        // Display output corresponding to the selected input.
        await AutoSelectOutputAsync(
            updateTimestampMode: OutputActionMode.IfLazyTextIsResolved,
            storeInCacheMode: OutputActionMode.IfLazyTextIsResolved);
    }

    private async Task AddInputAsync(InitialCode initialCode, bool selectAsCurrent = true)
    {
        var fileName = FindUniqueName(initialCode);
        var inputCode = initialCode.ToInputCode(fileName);
        var model = await CreateModelAsync(inputCode);
        var input = new Input(fileName, model) { NewContent = inputCode.Text };
        inputs.Add(input);
        await OnWorkspaceChangedAsync();
        if (selectAsCurrent)
        {
            await SelectInputTabAsync(input, inputs.Count - 1);
        }
    }

    private string FindUniqueName(InitialCode initialCode)
    {
        for (var i = 0; ; i++)
        {
            var suffix = i == 0 ? "" : $"{i}";
            var fileName = initialCode.GetFinalFileName(suffix);
            if (!inputs.Any(i => i.FileName == fileName))
            {
                return fileName;
            }
        }
    }

    [JSInvokable]
    public async Task CompileAndRenderAsync()
    {
        await CompileAsync();
        StateHasChanged();
    }

    public async Task FormatCurrentFileAsync()
    {
        if (CurrentInput is not { FileName: var fileName } input)
        {
            return;
        }

        if (!fileName.IsCSharpFileName(out bool isScript))
        {
            if (InputTabIdToIndex(activeInputTabId) == (int)SpecialInput.Configuration)
            {
                isScript = false;
            }
            else
            {
                return;
            }
        }

        await editorInitialized.Task;

        try
        {
            var currentCode = await input.Model.GetValue(EndOfLinePreference.TextDefined, preserveBOM: true);

            var formattedCode = await Worker.FormatCodeAsync(currentCode, isScript);

            if (formattedCode != currentCode)
            {
                var viewState = await inputEditor.SaveViewStateAsync(module);
                await BlazorMonacoInterop.SetModelValueUndoable(inputEditor.Id, input.Model.Uri, formattedCode);
                await inputEditor.RestoreViewStateAsync(viewState, module);

                if (await HostEnvironment.HasHardwareKeyboardAsync())
                {
                    await inputEditor.Focus();
                }
            }
        }
        catch (Exception ex)
        {
            Logger.LogWarning(ex, "Failed to format code for file '{FileName}'.", input.FileName);
        }
    }

    private async Task CompileAsync(bool storeInCache = true)
    {
        compilationInProgress = true;

        await RefreshAsync();

        await editorInitialized.Task;

        var state = await SaveStateToUrlAsync();

        // Compile.
        var startTime = DateTimeOffset.Now;
        var input = state.ToCompilationInput();
        var output = await Worker.CompileAsync(input, languageServicesEnabled: LanguageServices.Enabled);

        // Preserve cached output info for the same input.
        CompiledAssembly? cachedOutput;
        CacheInfo? cacheInfo;
        if (compiled is { Input: var existingInput, CachedOutput: null, CacheInfo: { } existingCacheInfo, Output: var existingOutput } &&
            Equals(existingInput, input))
        {
            cachedOutput = existingOutput;
            cacheInfo = existingCacheInfo;
        }
        else
        {
            cachedOutput = null;
            cacheInfo = null;
        }

        compiled = new()
        {
            Input = input,
            Output = output,
            CachedOutput = cachedOutput,
            CacheInfo = cacheInfo,
            Start = startTime,
            End = DateTimeOffset.Now,
            AutoLoadLazyOutputs = true,
        };

        await DisplaySquigglesAsync();

        compilationInProgress = false;

        var mode = storeInCache
            ? OutputActionMode.Always
            : OutputActionMode.Never;
        await AutoSelectOutputAsync(
            updateTimestampMode: mode,
            storeInCacheMode: mode);

        // Reset workspace state in case incremental updates were applied incorrectly.
        await ResetWorkspaceAsync();
    }

    private void TryStoreInCache(SavedState state, CompiledAssembly output)
    {
        if (!settings.EnableCaching)
        {
            return;
        }

        // No need to cache an input equal to one of those in the built-in cache.
        // Those will never be loaded from the server cache anyway.
        if (TemplateCache.HasInput(state))
        {
            return;
        }

        _ = Cache.StoreAsync(state, output);
    }

    public async Task DisplaySquigglesAsync()
    {
        if (!LanguageServices.Enabled || !await LanguageServices.UpdateDiagnosticsAfterCompilationAsync())
        {
            using var _ = await inputsLock.LockAsync();

            foreach (var input in inputs)
            {
                List<MarkerData> markers = compiled is { } result
                    ? toMarkerData(result.Output.GetDiagnosticsForFile(input.FileName, configuration: false))
                    : [];
                await BlazorMonaco.Editor.Global.SetModelMarkers(JSRuntime, input.Model, MonacoConstants.MarkersOwner, markers);
            }

            if (configuration != null)
            {
                List<MarkerData> markers = compiled is { } result
                    ? toMarkerData(result.Output.GetDiagnosticsForFile(CompiledAssembly.ConfigurationFileName, configuration: true))
                    : [];
                await BlazorMonaco.Editor.Global.SetModelMarkers(JSRuntime, configuration.Model, MonacoConstants.MarkersOwner, markers);
            }
        }

        static List<MarkerData> toMarkerData(IEnumerable<CompilerDiagnosticData> diagnostics)
        {
            return diagnostics
                .Select(static d => d.ToMarkerData())
                .Select(static m => m.WithSeverityIcon())
                .ToList();
        }
    }

    private async Task OnInputTabClickAsync()
    {
        if (await HostEnvironment.HasHardwareKeyboardAsync())
        {
            await inputEditor.Focus();
        }
    }

    private async Task OnOutputTabClickAsync()
    {
        if (await HostEnvironment.HasHardwareKeyboardAsync())
        {
            await outputEditor.Focus();
        }
    }

    private async Task UpdateOutputDisplayAsync()
    {
        await UpdateOutputDisplayAsync(
            updateTimestampMode: OutputActionMode.IfLazyTextIsResolved,
            storeInCacheMode: OutputActionMode.IfLazyTextIsResolved);
    }

    private async Task AutoSelectOutputAsync(
        OutputActionMode updateTimestampMode,
        OutputActionMode storeInCacheMode)
    {
        AutoSelectOutputType();

        await UpdateOutputDisplayAsync(updateTimestampMode, storeInCacheMode);
    }

    private void AutoSelectOutputType()
    {
        // Prefer C# output, or auto-select the first one available.
        if (userSelectedOutputType is null || GetOutput(userSelectedOutputType) is null)
        {
            userSelectedOutputType = AllOutputs.FirstOrDefault(o => o.Type is "cs" or "gcs")?.Type
                ?? AllOutputs.FirstOrDefault()?.Type;
        }

        temporarilyShowErrorListIfOutputTextEmpty = compiled is { Output.NumErrors: > 0 };
    }

    enum OutputActionMode
    {
        Never,
        IfLazyTextIsResolved,
        Always,
    }

    private async Task UpdateOutputDisplayAsync(
        OutputActionMode updateTimestampMode,
        OutputActionMode storeInCacheMode)
    {
        var outputType = DisplayOutputType;
        if (compiled is not { } comp || outputType is null)
        {
            var state = await saveStateAsync(updateTimestamp: shouldPerformOutputAction(updateTimestampMode, resolvedLazyText: false));
            await setModelAsync(null, "", new() { Text = "" });
        }
        else
        {
            var compiledOutput = comp.Output;
            var outputInfo = GetOutput(outputType);
            var (result, resolvedLazyText) = await LoadOutputTextAsync(outputInfo);
            var state = await saveStateAsync(updateTimestamp: shouldPerformOutputAction(updateTimestampMode, resolvedLazyText));
            await setModelAsync(outputInfo, outputType, result);

            if (compiledOutput is not null && shouldPerformOutputAction(storeInCacheMode, resolvedLazyText))
            {
                // If a lazy text has been populated, re-cache.
                TryStoreInCache(state, compiledOutput);
            }
        }

        // If we are temporarily switching to error list after we found out this output is empty, need to refresh that target output text.
        if (TemporarilyShowErrorList && outputType != CompiledAssembly.DiagnosticsOutputType)
        {
            await UpdateOutputDisplayAsync(updateTimestampMode, storeInCacheMode);
        }

        static bool shouldPerformOutputAction(OutputActionMode mode, bool resolvedLazyText)
        {
            return mode switch
            {
                OutputActionMode.Always => true,
                OutputActionMode.IfLazyTextIsResolved => resolvedLazyText,
                _ => false,
            };
        }

        Task<SavedState> saveStateAsync(bool updateTimestamp)
        {
            return SaveStateToUrlAsync((state) => state with
            {
                // After changing the selected input, we call this method anyway to update outputs,
                // so we can save both selected input and output here.
                SelectedInputIndex = activeInputTabId is { } tabId ? InputTabIdToIndex(tabId) : 0,
                SelectedOutputType = userSelectedOutputType,

                // If state is going to be cached, update the timestamp so the cache key is unique
                // (it is not possible to overwrite cache entries
                // to prevent anyone changing already shared snippet outputs).
                Timestamp = updateTimestamp ? DateTime.UtcNow : state.Timestamp,
            });
        }

        async Task setModelAsync(OutputInfo? outputInfo, string outputType, CompiledFileLazyResult result)
        {
            var language = (result.Metadata is { MessageKind: not MessageKind.Normal } ? null : outputInfo?.Output.Language) ?? "plaintext";

            var text = CompilerOutputPlugin.GetText(outputInfo, result, out outputDisclaimer, ref language);

            htmlOutput = outputType == "html" && language == "html" ? text : null;

            string? previousLanguage;

            if (!outputStates.TryGetValue(outputType, out var state))
            {
                state = new(await BlazorMonaco.Editor.Global.CreateModel(
                    JSRuntime,
                    value: text,
                    language: language,
                    uri: CompiledAssembly.GetOutputModelUri(outputInfo?.File, outputType)));
                outputStates[outputType] = state;
                previousLanguage = null;
            }
            else
            {
                await state.Model.SetValue(text);
                previousLanguage = await state.Model.GetLanguageId();
                await BlazorMonaco.Editor.Global.SetModelLanguage(JSRuntime, state.Model, language);
            }

            bool saveViewState = currentOutput != state;

            if (saveViewState && currentOutput is { } previousOutput)
            {
                previousOutput.ViewState = await outputEditor.SaveViewStateAsync(module);
            }

            currentOutput = state;
            LanguageServices.CurrentMetadata = (state.Model.Uri, result.Metadata);

            bool isOutputLanguage = language == CompiledAssembly.OutputLanguageId;

            await outputEditor.SetModel(state.Model);

            if (saveViewState && !state.ViewState.IsEmpty &&
                // Avoid restoring state (and instead perform folding) when state changes drastically
                // (currently we only detect language change - e.g., from error to normal output).
                previousLanguage == language)
            {
                await outputEditor.RestoreViewStateAsync(state.ViewState, module);
            }
            else if (isOutputLanguage)
            {
                await FoldAllOutputAsync();
            }

            if (isOutputLanguage)
            {
                // Underline links.
                if (result.Metadata != null &&
                    LanguageServices.TryGetOutputToOutputMapping(result.Metadata, out var mapping))
                {
                    var offsets = new int[mapping.Values.Count * 2];
                    var i = 0;
                    foreach (var (span, _) in mapping.Values)
                    {
                        offsets[i++] = span.Start;
                        offsets[i++] = span.End;
                    }

                    await BlazorMonacoInterop.UnderlineLinksAsync(outputEditor.Id, offsets);
                }
            }

            cursorSynchronizer?.Enable(result.Metadata);
        }
    }

    private async Task FoldAllOutputAsync()
    {
        // Fold all recursively except the first level.
        await BlazorMonacoInterop.ExecuteActionAsync(outputEditor.Id, "editor.foldAll");
        await BlazorMonacoInterop.ExecuteActionAsync(outputEditor.Id, "editor.unfold");
    }

    private OutputInfo? GetOutput(string? type)
    {
        if (type is null)
        {
            return null;
        }

        if (CurrentCompiledFile is { } currentCompiledFile)
        {
            if (currentCompiledFile.GetOutput(type) is { } output)
            {
                return new()
                {
                    Output = output,
                    CachedOutput = CurrentCachedFile?.GetOutput(type),
                    File = CurrentFileName
                };
            }
        }

        if (compiled?.Output.GetGlobalOutput(type) is { } globalOutput)
        {
            return new()
            {
                Output = globalOutput,
                CachedOutput = compiled?.CachedOutput?.GetGlobalOutput(type),
            };
        }

        return null;
    }

    private bool? HasEmptyText(OutputInfo? outputInfo)
    {
        if (TryLoadEagerOutputText(outputInfo, out _, out _, out var text))
        {
            return string.IsNullOrEmpty(text);
        }

        return null;
    }

    private bool TryLoadEagerOutputText(OutputInfo? outputInfo,
        [NotNullWhen(returnValue: false)] out CompiledFileOutput? output,
        out string? file,
        [NotNullWhen(returnValue: true)] out string? text)
    {
        if (outputInfo is not { } info)
        {
            output = null;
            file = null;
            text = "";
            return true;
        }

        output = info.Output;
        file = info.File;

        if (output.Text is { } eagerText)
        {
            text = eagerText;
            return true;
        }

        text = null;
        return false;
    }

    private async Task<(CompiledFileLazyResult Result, bool ResolvedLazyText)> LoadOutputTextAsync(OutputInfo? outputInfo)
    {
        if (TryLoadEagerOutputText(outputInfo, out var output, out var file, out var eagerText))
        {
            return (new() { Text = eagerText, Metadata = output?.Metadata }, false);
        }

        // If we are currently displaying cached outputs, but this specific output type is not cached,
        // avoid resolving it and hence starting compilation implicitly.
        if (compiled?.AutoLoadLazyOutputs != true)
        {
            return (new() { Text = "(not cached, press Compile to load this)", Metadata = CompiledFileOutputMetadata.SpecialMessage }, false);
        }

        if (!outputLoading)
        {
            return await loadAsync(compiled!.Input, file: file, outputType: output.Type);
        }

        return (new() { Text = "" }, false);

        async Task<(CompiledFileLazyResult Result, bool ResolvedLazyText)> loadAsync(CompilationInput input, string? file, string outputType)
        {
            outputLoading = true;
            await RefreshAsync();

            CompiledFileLazyResult result;
            bool success;
            try
            {
                // The text will be cached and loaded synchronously next time (from `output.Text`).
                result = await output.LoadAsync(new()
                {
                    OutputFactory = async () =>
                    {
                        return await Worker.GetOutputAsync(input, file: file, outputType: outputType);
                    },
                });
                success = true;
            }
            catch (Exception ex)
            {
                string error = ex is WorkerException w ? w.Failure.FullString : ex.ToString();
                result = new() { Text = error, Metadata = CompiledFileOutputMetadata.SpecialMessage };
                success = false;
            }

            outputLoading = false;
            StateHasChanged();
            return (result, success);
        }
    }

    private string CurrentFileName => CurrentInput?.FileName ?? "";

    private bool IsCurrentInputCSharp
        => CurrentInput is { FileName: var fileName } &&
        (fileName.IsCSharpFileName() ||
        InputTabIdToIndex(activeInputTabId) == (int)SpecialInput.Configuration);

    private CompiledFile? CurrentCompiledFile
    {
        get
        {
            return compiled?.Output.Files.TryGetValue(CurrentFileName, out var file) == true
                ? file
                : null;
        }
    }

    private CompiledFile? CurrentCachedFile
    {
        get
        {
            return compiled?.CachedOutput?.Files.TryGetValue(CurrentFileName, out var file) == true
                ? file
                : null;
        }
    }

    private static string FormatCacheTimestamp(DateTimeOffset timestamp)
    {
        return timestamp.ToString("MMM\u00A0d,\u00A0yyyy");
    }

    private async Task<bool> TryLoadFromTemplateCacheAsync(SavedState state, bool updateOutput)
    {
        // Load template with default preferences even if user's preferences differ.
        var preferencesDiffer = state.GetPreferences() != CompilationPreferences.Default;
        var stateWithoutPreferences = state.WithPreferences(CompilationPreferences.Default);

        if (TemplateCache.TryGetOutput(stateWithoutPreferences, out var input, out var output))
        {
            await TrySetCompiledFromCacheAsync(state.GetCompilerConfiguration(), input, output, new(null), updateOutput: updateOutput);

            // Mark as outdated if we loaded with different preferences.
            if (preferencesDiffer)
            {
                inputChanged = DateTimeOffset.Now;
            }

            return true;
        }

        return false;
    }

    private async Task TryLoadFromCacheAsync(SavedState state, bool updateOutput)
    {
        var result = await Cache.LoadAsync(state);
        if (result is var (output, timestamp))
        {
            await TrySetCompiledFromCacheAsync(state.GetCompilerConfiguration(), state.ToCompilationInput(), output, new(timestamp), updateOutput: updateOutput);
            StateHasChanged();
        }
        else if (updateOutput)
        {
            await AutoSelectOutputAsync(
                updateTimestampMode: OutputActionMode.Never,
                storeInCacheMode: OutputActionMode.Never);
        }
    }

    private async Task TrySetCompiledFromCacheAsync(CompilerConfiguration config, CompilationInput input, CompiledAssembly output, CacheInfo info, bool updateOutput)
    {
        // If the local compilation finishes before the cache is loaded, don't overwrite it.
        if (compiled is { Input: var existingInput, CacheInfo: null } && Equals(input, existingInput))
        {
            compiled = compiled with
            {
                CacheInfo = info,
                CachedOutput = output,
            };

            return;
        }

        var timestamp = DateTimeOffset.Now;
        compiled = new()
        {
            Input = input,
            Output = output,
            CacheInfo = info,
            Start = timestamp,
            End = timestamp,
            AutoLoadLazyOutputs = false,
        };

        if (updateOutput)
        {
            await AutoSelectOutputAsync(
                updateTimestampMode: OutputActionMode.Never,
                storeInCacheMode: OutputActionMode.Never);
        }

        StateHasChanged();

        if (!LanguageServices.Enabled || !await LanguageServices.OnCachedCompilationLoadedAsync(config, output))
        {
            await DisplaySquigglesAsync();
        }
    }

    private async Task<TextModel> CreateModelAsync(InputCode inputCode)
    {
        return await BlazorMonaco.Editor.Global.CreateModel(
            JSRuntime,
            value: inputCode.Text,
            language: GetLanguageForFileExtension(inputCode.FileExtension),
            uri: CompiledAssembly.GetInputModelUri(inputCode.FileName));
    }

    private static string? GetLanguageForFileExtension(string extension)
    {
        if (extension.IsRazorFileName())
        {
            return "razor";
        }

        if (extension.IsCSharpFileName())
        {
            return CompiledAssembly.CSharpLanguageId;
        }

        return null;
    }

    /// <summary>
    /// Should be called before SetModel of Monaco editor whenever (after) <see cref="InputsAndConfiguration"/> change.
    /// </summary>
    public Task OnWorkspaceChangedAsync()
    {
        inputChanged = DateTimeOffset.Now;

        if (!LanguageServices.Enabled)
        {
            return Task.CompletedTask;
        }

        var models = InputsAndConfiguration
            .Select(t => new ModelInfo(Uri: t.Input.Model.Uri, FileName: t.Input.FileName)
            {
                NewContent = t.Input.NewContent,
                IsConfiguration = t.IsConfiguration,
            })
            .ToImmutableArray();
        InputsAndConfiguration.ForEach(t => { t.Input.NewContent = null; });
        return LanguageServices.OnDidChangeWorkspaceAsync(models);
    }

    /// <summary>
    /// Sends the current workspace full state to language services.
    /// </summary>
    public async Task ResetWorkspaceAsync()
    {
        if (!LanguageServices.Enabled)
        {
            return;
        }

        var models = await InputsAndConfiguration
            .SelectAsArrayAsync(static async t => new ModelInfo(Uri: t.Input.Model.Uri, FileName: t.Input.FileName)
            {
                NewContent = await t.Input.Model.GetTextAsync(),
                IsConfiguration = t.IsConfiguration,
            });
        await LanguageServices.OnDidChangeWorkspaceAsync(models, refresh: true);
    }

    private async Task OnDidChangeModelContentAsync(ModelContentChangedEvent args)
    {
        inputChanged = DateTimeOffset.Now;
        await LanguageServices.OnDidChangeModelContentAsync(args);
    }

    private void OnScreenInfoUpdated()
    {
        orientation = GetAutoOrientation();
        StateHasChanged();
    }

    private Orientation GetAutoOrientation()
    {
        return ScreenInfo.IsNarrowScreen ? Orientation.Vertical : Orientation.Horizontal;
    }

    private Task ChangePreferencesAsync(Func<SavedState, SavedState> updater)
    {
        inputChanged = DateTimeOffset.Now;
        return SaveStateToUrlAsync(updater, savePreferences: true);
    }

    public void OnSettingsInputChanged()
    {
        inputChanged = DateTimeOffset.Now;
        StateHasChanged();
    }

    private void OnWorkerFailed(string error)
    {
        workerError = error;
        StateHasChanged();
    }

    internal async Task ReloadWorkerAsync()
    {
        await Worker.RecreateWorkerAsync();
        workerError = null;
    }
}