Display evaluation errors and loading state

Client/Shared/CodeCell.razor

@@ -11,22 +11,49 @@
     </div>
     <CodeEditor @bind-Code="cell.Content" OnCompletionsRequested="GetCompletionsAsync" />
     <div class="break" />
-    <div class="output">
-        @result.Output
-    </div>
+
+    @* TODO: Create a cleaner system for formatting different kinds of output/status *@
+    @if (isEvaluating)
+    {
+        <div class="output">...</div>
+    }
+    else if (result != null)
+    {
+        if (!string.IsNullOrEmpty(result.CommandFailedMessage))
+        {
+            <div class="output command-failed">@result.CommandFailedMessage</div>
+        }
+        else if (result.Output != null)
+        {
+            <div class="output">@result.Output</div>
+        }
+        else
+        {
+            <div class="output">(No output)</div>
+        }
+    }
 </div>
 
 @code {
     [Parameter]
     public Cell cell { get; set; }
 
-    private ExecuteResult result = new ExecuteResult();
+    private ExecuteResult result;
+    private bool isEvaluating;
 
     private async Task RunCell()
     {
-        var request = new ExecuteRequest(cell.Content);
-        var response = await Http.PostAsJsonAsync("run/evaluatecell", request);
-        result = await response.Content.ReadFromJsonAsync<ExecuteResult>();
+        try
+        {
+            isEvaluating = true;
+            var request = new ExecuteRequest(cell.Content);
+            var response = await Http.PostAsJsonAsync("run/evaluatecell", request);
+            result = await response.Content.ReadFromJsonAsync<ExecuteResult>();
+        }
+        finally
+        {
+            isEvaluating = false;
+        }
     }
 
     private async Task<Suggestion[]> GetCompletionsAsync(string value, Position position)

Client/Shared/CodeCell.razor.css

@@ -26,26 +26,29 @@ input {
     min-height: 150px;
 }
 
-::deep .editor .margin, ::deep .editor .editor-scrollable {
-    margin-top: 10px;
-} 
-
 .output {
     width: 100%;
     padding: 10px;
     background-color: #eee;
 }
 
+    .output.command-failed {
+        background-color: red;
+        color: white;
+        white-space: pre;
+        font-family: monospace;
+    }
+
 .toolbar {
     flex-grow: 0;
-    padding: 10px;
+    padding: 0 10px;
 }
 
 button {
     border: none;
     background: white;
 }
 
-button:hover {
-    color: #19b5fe;
-}
+    button:hover {
+        color: #19b5fe;
+    }

Server/Controllers/RunController.cs

@@ -35,10 +35,14 @@ public async Task<ExecuteResult> EvaluateCellAsync([FromBody] ExecuteRequest cel
             request.KernelEvents.Subscribe(x =>
             {
                 Console.WriteLine($"Received event: {x}");
-                if (x is DisplayEvent)
+                switch (x)
                 {
-
-                    result.Output = ((DisplayEvent)x).Value;
+                    case DisplayEvent displayEvent:
+                        result.Output = displayEvent.Value;
+                        break;
+                    case CommandFailed commandFailed:
+                        result.CommandFailedMessage = commandFailed.Message;
+                        break;
                 }
             });
             return result;

Shared/ExecuteResult.cs

@@ -1,15 +1,9 @@
-using System;
-
-namespace blazoract.Shared
+namespace blazoract.Shared
 {
     public class ExecuteResult
     {
-        public ExecuteResult() { }
-        public ExecuteResult(object output)
-        {
-            Output = output;
-        }
-
         public object Output { get; set; }
+
+        public string CommandFailedMessage { get; set; }
     }
 }