live view loading: replace logo pulse with slide bar (#248)

Replaces the zoom/pulse animation on the kernel logo shown while the
live view client is connecting. The animation triggered on every live
view session (not just kiosk mode). Now shows the stacked logo (white
variant) above a thin sliding loading bar — matches the loading style
used in the mcp-server select-org page.

Affects `connect.vue` (initial connection splash) and `about.vue` (about
modal loading state).

## Preview


https://htmlpreview.github.io/?https://gist.githubusercontent.com/masnwilliams/2f7e13b3327344b4219f293225c35539/raw/preview.html
(toggle button in top-right flips between old and new)

## Test plan

- [ ] Build client, open live view, verify logo no longer pulses and bar
slides smoothly
- [ ] Open about modal during load, verify same treatment

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk visual-only change to the loading/connecting UI; no
behavioral, auth, or data-flow changes.
> 
> **Overview**
> Updates the live-view connection splash (`connect.vue`) and about
modal loading state (`about.vue`) to show a stacked logo with a thin
animated *sliding* loading bar instead of the prior pulsing/zoom logo
animation.
> 
> Also changes the bundled `logo.svg` fill color from green to white to
match the new loading treatment.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
8e699ca. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: masnwilliams

images/chromium-headful/client/src/assets/images/logo.svg

@@ -4,6 +4,9 @@
       <div class="loading" v-if="loading">
         <div class="loader">
           <img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
+          <div class="loading-bar">
+            <div class="loading-bar-fill"></div>
+          </div>
         </div>
       </div>
 
@@ -73,18 +76,31 @@
         }
 
         .loader {
-          width: 90px;
-          height: 90px;
           position: relative;
           margin: 0 auto 20px auto;
           display: flex;
+          flex-direction: column;
           justify-content: center;
           align-items: center;
+          gap: 20px;
 
           .kernel-logo {
-            width: 100%;
+            width: 90px;
+            height: 90px;
+          }
+
+          .loading-bar {
+            width: 128px;
+            height: 1px;
+            background: rgba(255, 255, 255, 0.12);
+            overflow: hidden;
+          }
+
+          .loading-bar-fill {
+            width: 40%;
             height: 100%;
-            animation: kernel-logo-pulse 1.5s ease-in-out infinite;
+            background: rgba(255, 255, 255, 0.85);
+            animation: kernel-bar-slide 1.2s ease-in-out infinite;
           }
         }
       }
@@ -95,15 +111,12 @@
     }
   }
 
-  @keyframes kernel-logo-pulse {
-    0%,
-    100% {
-      transform: scale(0.85);
-      opacity: 0.7;
+  @keyframes kernel-bar-slide {
+    0% {
+      transform: translateX(-100%);
     }
-    50% {
-      transform: scale(1);
-      opacity: 1;
+    100% {
+      transform: translateX(350%);
     }
   }
 </style>

images/chromium-headful/client/src/components/about.vue

@@ -3,6 +3,9 @@
     <div class="window">
       <div class="loader" v-if="connecting">
         <img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
+        <div class="loading-bar">
+          <div class="loading-bar-fill"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -46,32 +49,42 @@
       }
 
       .loader {
-        width: 90px;
-        height: 90px;
         position: relative;
         margin: 0 auto;
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
+        gap: 20px;
 
         .kernel-logo {
-          width: 100%;
+          width: 90px;
+          height: 90px;
+        }
+
+        .loading-bar {
+          width: 128px;
+          height: 1px;
+          background: rgba(255, 255, 255, 0.12);
+          overflow: hidden;
+        }
+
+        .loading-bar-fill {
+          width: 40%;
           height: 100%;
-          animation: kernel-logo-pulse 1.5s ease-in-out infinite;
+          background: rgba(255, 255, 255, 0.85);
+          animation: kernel-bar-slide 1.2s ease-in-out infinite;
         }
       }
     }
   }
 
-  @keyframes kernel-logo-pulse {
-    0%,
-    100% {
-      transform: scale(0.85);
-      opacity: 0.7;
+  @keyframes kernel-bar-slide {
+    0% {
+      transform: translateX(-100%);
     }
-    50% {
-      transform: scale(1);
-      opacity: 1;
+    100% {
+      transform: translateX(350%);
     }
   }
 </style>