feat: Show build info and spinner

Author: mchav

src/Sabela/Session.hs

@@ -76,10 +76,10 @@ newSession :: SessionConfig -> IO Session
 newSession cfg = newSessionStreaming cfg (\_ -> pure ())
 
 newSessionStreaming :: SessionConfig -> (Text -> IO ()) -> IO Session
-newSessionStreaming cfg onStderrLine = do
+newSessionStreaming cfg onStartupLine = do
     (hIn, hOut, hErr, ph) <- createGhciProcess cfg
-    sess <- buildSessionState cfg hIn hOut hErr ph onStderrLine
-    initializeGhci sess
+    sess <- buildSessionState cfg hIn hOut hErr ph onStartupLine
+    initializeGhci sess onStartupLine
     pure sess
 
 createGhciProcess :: SessionConfig -> IO (Handle, Handle, Handle, ProcessHandle)
@@ -141,13 +141,13 @@ buildSessionState cfg hIn hOut hErr ph onStderrLine = do
             , sessErrCallback = cbRef
             }
 
-initializeGhci :: Session -> IO ()
-initializeGhci sess = do
+initializeGhci :: Session -> (Text -> IO ()) -> IO ()
+initializeGhci sess onLine = do
     clearGhciPrompt sess
     sendRaw sess (":cd " ++ scWorkDir (sessConfig sess))
     mk <- getMarker sess
     placeMarker sess mk
-    _ <- drainUntilMarker sess mk
+    _ <- drainUntilMarkerStreaming (sessLines sess) mk onLine
     pure ()
 
 resetSession :: Session -> IO Session

static/index.html

@@ -524,6 +524,14 @@
   .build-modal-title { flex: 1; font-weight: 500; }
   .build-modal-title.ok  { color: var(--green); }
   .build-modal-title.err { color: var(--red); }
+  .build-spinner {
+    width: 12px; height: 12px; border-radius: 50%;
+    border: 2px solid var(--border); border-top-color: var(--accent);
+    animation: build-spin 0.8s linear infinite; flex-shrink: 0;
+  }
+  .build-modal-title.ok ~ .build-spinner,
+  .build-modal-title.err ~ .build-spinner { display: none; }
+  @keyframes build-spin { to { transform: rotate(360deg); } }
   .build-modal-close {
     background: none; border: none; color: var(--fg-dim); cursor: pointer;
     font-size: 18px; line-height: 1; padding: 0 2px;
@@ -554,6 +562,7 @@ <h2>Connect to AI</h2>
 <div id="build-modal" class="build-modal" style="display:none" role="dialog" aria-label="Build log">
   <div class="build-modal-header">
     <span class="build-modal-title" id="build-modal-title">Building…</span>
+    <span class="build-spinner" aria-hidden="true"></span>
     <button class="build-modal-close" onclick="closeBuildModal()" aria-label="Close build log">×</button>
   </div>
   <div class="build-modal-body" id="build-log"></div>