From 8973123adfe84fdd57db1b9677fe538c57c31b07 Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 12:49:52 +0100
Subject: [PATCH 1/8] feat(desktop): animated bee on loading gates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the static Buzz mark and spinner on the setup splash and
workspace-switch gate with the looping FuzzyLogo (fuzzy texture,
theme-adaptive tint). A static BuzzMark renders underneath so the box
paints instantly on hard reload instead of flashing blank.

Loops continuously via loopRestSeconds=0 — the prior rest window left the
mark visually static for ~63% of each cycle, which read as 'not animated'.

Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
---
 desktop/src/app/App.tsx | 47 +++++++++++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/desktop/src/app/App.tsx b/desktop/src/app/App.tsx
index c3624af24..4c11fe15d 100644
--- a/desktop/src/app/App.tsx
+++ b/desktop/src/app/App.tsx
@@ -25,27 +25,56 @@ import { createBuzzQueryClient } from "@/shared/api/queryClient";
 import { isSharedIdentity as isSharedIdentityCmd } from "@/shared/api/tauri";
 import { listenForDeepLinks } from "@/shared/deep-link";
 import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { BuzzMark } from "@/shared/ui/buzz-logo/BuzzMark";
-import { Spinner } from "@/shared/ui/spinner";
+import { FuzzyLogo } from "@/shared/ui/buzz-logo/FuzzyLogo";
 import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 import { StepProgress } from "@/shared/ui/step-progress";
 
 const LOADING_TEXT = "Setting up your workspace...";
 
-// Cold boot gate: a plain static Buzz mark (#D7D72E) on solid black. No
-// animation machinery, no gradient — the mark must paint complete on the very
-// first frame, even in webviews that render before scripting or SMIL start.
+// Animated Buzz mark for the loading gates. The static BuzzMark renders in
+// normal flow and sizes the box — it's plain SVG (no JS/SMIL), so it paints on
+// the very first frame even before scripting starts, avoiding a blank flash on
+// hard reload. The animated FuzzyLogo is layered on top and takes over once it
+// begins playing.
+function BeeLoader({
+  ariaLabel,
+  className,
+  tintClassName = "text-foreground",
+}: {
+  ariaLabel: string;
+  className?: string;
+  tintClassName?: string;
+}) {
+  return (
+    <div className={cn("relative", tintClassName, className)}>
+      <BuzzMark className="block h-auto w-full" />
+      <FuzzyLogo
+        ariaLabel={ariaLabel}
+        className="absolute inset-0 h-full w-full [&>svg]:h-full [&>svg]:w-full [&>svg]:max-w-full"
+        fuzz
+        loop
+        loopRestSeconds={0}
+      />
+    </div>
+  );
+}
+
+// Cold boot gate: the animated Buzz mark (fuzzy texture, theme-adaptive tint)
+// on the app background, with a static mark underneath so it paints instantly
+// on reload rather than flashing blank while the animation boots.
 function AppLoadingGate() {
   return (
     <div
-      className="flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-black px-6 py-10 text-[#d7d72e]"
+      className="flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-background px-6 py-10 text-foreground"
       data-testid="app-loading-gate"
       role="status"
     >
       <StartupWindowDragRegion />
       <span className="sr-only">{LOADING_TEXT}</span>
-      <BuzzMark className="h-auto w-28" />
+      <BeeLoader ariaLabel={LOADING_TEXT} className="h-auto w-28" />
     </div>
   );
 }
@@ -69,7 +98,11 @@ function WorkspaceSwitchGate() {
       <StartupWindowDragRegion />
       <span className="sr-only">Switching workspace…</span>
       {showSpinner ? (
-        <Spinner aria-hidden="true" className="text-muted-foreground" />
+        <BeeLoader
+          ariaLabel="Switching workspace…"
+          className="h-auto w-20"
+          tintClassName="text-muted-foreground"
+        />
       ) : null}
     </div>
   );

From 5d9c10725100ef3bfaf9c074413753513ee7136b Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 13:17:14 +0100
Subject: [PATCH 2/8] feat(desktop): restore theme-adaptive grainient setup
 screen with bee hero

Restore the pre-#1570 theme-adaptive grainient loading gate, with the
animated Buzz bee as the visual hero replacing the old "Setting up your
workspace" text (the caption stays as sr-only for screen readers).

- Restore ThemeGrainientBackground and the grainient/shell CSS (orbiting
  radial grainient driven by --chart-* / --primary theme vars, plus the
  dark-mode alpha overrides and reduced-motion fallback) that #1570 stripped.
- Rewire AppLoadingGate to the .buzz-setup-loading-shell + grainient +
  BeeLoader (relative z-10) structure. Drop the text-only rules
  (buzz-setup-loading-text, buzz-setup-character-rise) since the bee replaces
  the text.
- index.html: paint the pre-React window in the cached theme --background
  (buzz-theme-cache) instead of always black, killing the black flash on
  light themes; falls back to black on the first-ever launch.

Scoped to the cold-boot AppLoadingGate only; the quiet WorkspaceSwitchGate
keeps the bee on a plain themed background.

Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
---
 desktop/index.html                            |  29 ++-
 desktop/src/app/App.tsx                       |  16 +-
 desktop/src/app/ThemeGrainientBackground.tsx  |  12 ++
 .../src/shared/styles/globals/animations.css  | 191 ++++++++++++++++++
 4 files changed, 237 insertions(+), 11 deletions(-)
 create mode 100644 desktop/src/app/ThemeGrainientBackground.tsx

diff --git a/desktop/index.html b/desktop/index.html
index 31d90dc4d..93320788e 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -6,18 +6,35 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
     <!--
-      Boot background: the document must be black from its very first paint,
-      before the app bundle (and its stylesheets) load, so cold boot never
-      flashes white ahead of the loading gate. The window itself is also
-      black pre-document via `backgroundColor` in tauri.conf.json. The body
-      paints its own themed background once the app CSS loads, so this never
-      shows through after boot.
+      Boot background: the document must be painted before the app bundle (and
+      its stylesheets) load so cold boot never flashes ahead of the loading
+      gate. The window itself is also painted pre-document via `backgroundColor`
+      in tauri.conf.json. The body paints its own themed background once the app
+      CSS loads, so this never shows through after boot.
+
+      The inline script below reads the cached theme background (same
+      `buzz-theme-cache` entry ThemeProvider writes) and applies it synchronously
+      so the boot color matches the themed loading gate — no black flash on light
+      themes. Falls back to black on the first-ever launch (no cache yet).
     -->
     <style>
       html {
         background-color: #000;
       }
     </style>
+    <script>
+      (() => {
+        var cached, bg;
+        try {
+          cached = window.localStorage.getItem("buzz-theme-cache");
+          if (!cached) return;
+          bg = JSON.parse(cached).vars["--background"];
+          if (bg) document.documentElement.style.backgroundColor = "hsl(" + bg + ")";
+        } catch {
+          /* fall back to the black default above */
+        }
+      })();
+    </script>
   </head>
 
   <body>
diff --git a/desktop/src/app/App.tsx b/desktop/src/app/App.tsx
index 4c11fe15d..2bb795ec8 100644
--- a/desktop/src/app/App.tsx
+++ b/desktop/src/app/App.tsx
@@ -12,6 +12,7 @@ import {
 } from "react";
 
 import { router } from "@/app/router";
+import { ThemeGrainientBackground } from "@/app/ThemeGrainientBackground";
 import { useReloadShortcut } from "@/app/useReloadShortcut";
 import { useAppOnboardingState } from "@/features/onboarding/hooks";
 import { OnboardingSlideTransition } from "@/features/onboarding/ui/OnboardingSlideTransition";
@@ -62,19 +63,24 @@ function BeeLoader({
   );
 }
 
-// Cold boot gate: the animated Buzz mark (fuzzy texture, theme-adaptive tint)
-// on the app background, with a static mark underneath so it paints instantly
-// on reload rather than flashing blank while the animation boots.
+// Cold boot gate: the theme-adaptive grainient background with the animated
+// Buzz mark as the hero (replacing the old "Setting up your workspace" text —
+// the caption stays as sr-only for screen readers). A static mark renders
+// underneath the animation so it paints instantly on hard reload.
 function AppLoadingGate() {
   return (
     <div
-      className="flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-background px-6 py-10 text-foreground"
+      className="buzz-setup-loading-shell flex min-h-dvh flex-col items-center justify-center overflow-hidden px-6 py-10"
       data-testid="app-loading-gate"
       role="status"
     >
       <StartupWindowDragRegion />
+      <ThemeGrainientBackground />
       <span className="sr-only">{LOADING_TEXT}</span>
-      <BeeLoader ariaLabel={LOADING_TEXT} className="h-auto w-28" />
+      <BeeLoader
+        ariaLabel={LOADING_TEXT}
+        className="relative z-10 h-auto w-28"
+      />
     </div>
   );
 }
diff --git a/desktop/src/app/ThemeGrainientBackground.tsx b/desktop/src/app/ThemeGrainientBackground.tsx
new file mode 100644
index 000000000..f9a81ef4b
--- /dev/null
+++ b/desktop/src/app/ThemeGrainientBackground.tsx
@@ -0,0 +1,12 @@
+export function ThemeGrainientBackground() {
+  return (
+    <div
+      aria-hidden="true"
+      className="buzz-setup-grainient"
+      data-testid="setup-grainient-background"
+    >
+      <div className="buzz-setup-grainient__wash" />
+      <div className="buzz-setup-grainient__veil" />
+    </div>
+  );
+}
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index a057a55c5..3922f224b 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -567,3 +567,194 @@
 }
 
 /* ── Tiptap rich-text composer ──────────────────────────────────────── */
+
+/* ── Setup / cold-boot loading screen ───────────────────────────────────
+   Theme-adaptive grainient background for the "setting up your workspace"
+   gate. Restored from pre-#1570; the animated Buzz mark is the hero (see
+   AppLoadingGate in app/App.tsx). */
+
+@property --buzz-grainient-x-0 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 85%;
+}
+
+@property --buzz-grainient-y-0 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 80%;
+}
+
+@property --buzz-grainient-x-1 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 60%;
+}
+
+@property --buzz-grainient-y-1 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 24%;
+}
+
+@property --buzz-grainient-x-2 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 13%;
+}
+
+@property --buzz-grainient-y-2 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 82%;
+}
+
+@property --buzz-grainient-x-3 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 24%;
+}
+
+@property --buzz-grainient-y-3 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 7%;
+}
+
+.buzz-setup-loading-shell {
+  --buzz-grainient-alpha-strong: 0.46;
+  --buzz-grainient-alpha-medium: 0.34;
+  --buzz-grainient-alpha-soft: 0.24;
+  --buzz-grainient-color-0: hsl(
+    var(--chart-5) /
+    var(--buzz-grainient-alpha-strong)
+  );
+  --buzz-grainient-color-1: hsl(
+    var(--chart-3) /
+    var(--buzz-grainient-alpha-strong)
+  );
+  --buzz-grainient-color-2: hsl(
+    var(--primary) /
+    var(--buzz-grainient-alpha-medium)
+  );
+  --buzz-grainient-color-3: hsl(
+    var(--chart-2) /
+    var(--buzz-grainient-alpha-strong)
+  );
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  isolation: isolate;
+  position: relative;
+}
+
+.dark .buzz-setup-loading-shell {
+  --buzz-grainient-alpha-strong: 0.68;
+  --buzz-grainient-alpha-medium: 0.5;
+  --buzz-grainient-alpha-soft: 0.34;
+}
+
+.buzz-setup-grainient {
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.buzz-setup-grainient__wash,
+.buzz-setup-grainient__veil {
+  inset: 0;
+  position: absolute;
+}
+
+.buzz-setup-grainient__wash {
+  --buzz-grainient-s-start-0: 9%;
+  --buzz-grainient-s-end-0: 55%;
+  --buzz-grainient-s-start-1: 5%;
+  --buzz-grainient-s-end-1: 72%;
+  --buzz-grainient-s-start-2: 5%;
+  --buzz-grainient-s-end-2: 52%;
+  --buzz-grainient-s-start-3: 13%;
+  --buzz-grainient-s-end-3: 68%;
+  --buzz-grainient-x-0: 85%;
+  --buzz-grainient-y-0: 80%;
+  --buzz-grainient-x-1: 60%;
+  --buzz-grainient-y-1: 24%;
+  --buzz-grainient-x-2: 13%;
+  --buzz-grainient-y-2: 82%;
+  --buzz-grainient-x-3: 24%;
+  --buzz-grainient-y-3: 7%;
+  animation: buzz-grainient-orbit 10s linear infinite alternate;
+  background-color: hsl(var(--background));
+  background-image:
+    radial-gradient(
+      circle at var(--buzz-grainient-x-0) var(--buzz-grainient-y-0),
+      var(--buzz-grainient-color-0) var(--buzz-grainient-s-start-0),
+      transparent var(--buzz-grainient-s-end-0)
+    ),
+    radial-gradient(
+      circle at var(--buzz-grainient-x-1) var(--buzz-grainient-y-1),
+      var(--buzz-grainient-color-1) var(--buzz-grainient-s-start-1),
+      transparent var(--buzz-grainient-s-end-1)
+    ),
+    radial-gradient(
+      circle at var(--buzz-grainient-x-2) var(--buzz-grainient-y-2),
+      var(--buzz-grainient-color-2) var(--buzz-grainient-s-start-2),
+      transparent var(--buzz-grainient-s-end-2)
+    ),
+    radial-gradient(
+      circle at var(--buzz-grainient-x-3) var(--buzz-grainient-y-3),
+      var(--buzz-grainient-color-3) var(--buzz-grainient-s-start-3),
+      transparent var(--buzz-grainient-s-end-3)
+    );
+  background-blend-mode: normal, normal, normal, normal;
+  contain: paint;
+  filter: saturate(1.08);
+  transform: translateZ(0);
+  will-change: transform, opacity;
+}
+
+.buzz-setup-grainient__veil {
+  background:
+    radial-gradient(
+      ellipse 74% 54% at 50% 52%,
+      transparent 0%,
+      hsl(var(--background) / 0.04) 72%,
+      hsl(var(--background) / 0.16) 100%
+    ),
+    linear-gradient(
+      180deg,
+      hsl(var(--background) / 0.04),
+      hsl(var(--background) / 0.12)
+    );
+}
+
+@keyframes buzz-grainient-orbit {
+  0% {
+    --buzz-grainient-x-0: 85%;
+    --buzz-grainient-y-0: 80%;
+    --buzz-grainient-x-1: 60%;
+    --buzz-grainient-y-1: 24%;
+    --buzz-grainient-x-2: 13%;
+    --buzz-grainient-y-2: 82%;
+    --buzz-grainient-x-3: 24%;
+    --buzz-grainient-y-3: 7%;
+  }
+
+  100% {
+    --buzz-grainient-x-0: 31%;
+    --buzz-grainient-y-0: 94%;
+    --buzz-grainient-x-1: 2%;
+    --buzz-grainient-y-1: 25%;
+    --buzz-grainient-x-2: 98%;
+    --buzz-grainient-y-2: 20%;
+    --buzz-grainient-x-3: 95%;
+    --buzz-grainient-y-3: 92%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .buzz-setup-grainient__wash {
+    animation: none;
+  }
+}

From f4f3e442f6afea6b66523e3c3b288ceac3fa9ad0 Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 13:44:55 +0100
Subject: [PATCH 3/8] feat(desktop): flap the setup-gate bee's wings

Keep the setup loading gate's bee exactly as before (identical BuzzMark
geometry) and just add motion: a new FlappingBee component tags the two
wing lobes with bee-wing classes so the ported wing-flap keyframes beat
them on a continuous infinite loop. Reduced-motion falls back to the
static silhouette. Also fixes a biome useTemplate lint in index.html's
cached-theme boot script.

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
---
 desktop/index.html                            |  2 +-
 desktop/src/app/App.tsx                       | 14 ++--
 .../src/shared/styles/globals/animations.css  | 49 +++++++++++++
 .../src/shared/ui/buzz-logo/FlappingBee.tsx   | 72 +++++++++++++++++++
 4 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 desktop/src/shared/ui/buzz-logo/FlappingBee.tsx

diff --git a/desktop/index.html b/desktop/index.html
index 93320788e..a697c2624 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -29,7 +29,7 @@
           cached = window.localStorage.getItem("buzz-theme-cache");
           if (!cached) return;
           bg = JSON.parse(cached).vars["--background"];
-          if (bg) document.documentElement.style.backgroundColor = "hsl(" + bg + ")";
+          if (bg) document.documentElement.style.backgroundColor = `hsl(${bg})`;
         } catch {
           /* fall back to the black default above */
         }
diff --git a/desktop/src/app/App.tsx b/desktop/src/app/App.tsx
index 2bb795ec8..ac0c773a3 100644
--- a/desktop/src/app/App.tsx
+++ b/desktop/src/app/App.tsx
@@ -29,6 +29,7 @@ import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { BuzzMark } from "@/shared/ui/buzz-logo/BuzzMark";
+import { FlappingBee } from "@/shared/ui/buzz-logo/FlappingBee";
 import { FuzzyLogo } from "@/shared/ui/buzz-logo/FuzzyLogo";
 import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 import { StepProgress } from "@/shared/ui/step-progress";
@@ -63,10 +64,10 @@ function BeeLoader({
   );
 }
 
-// Cold boot gate: the theme-adaptive grainient background with the animated
-// Buzz mark as the hero (replacing the old "Setting up your workspace" text —
-// the caption stays as sr-only for screen readers). A static mark renders
-// underneath the animation so it paints instantly on hard reload.
+// Cold boot gate: the theme-adaptive grainient background with a single
+// centered Buzz bee flying over it — the same static mark as before, now with
+// its wings flapping (ported from the Buzz website's wing-flap). Replaces the
+// old "Setting up your workspace" text, which stays as an sr-only caption.
 function AppLoadingGate() {
   return (
     <div
@@ -77,10 +78,7 @@ function AppLoadingGate() {
       <StartupWindowDragRegion />
       <ThemeGrainientBackground />
       <span className="sr-only">{LOADING_TEXT}</span>
-      <BeeLoader
-        ariaLabel={LOADING_TEXT}
-        className="relative z-10 h-auto w-28"
-      />
+      <FlappingBee className="relative z-10 h-auto w-28" />
     </div>
   );
 }
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index 3922f224b..06f4d2343 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -758,3 +758,52 @@
     animation: none;
   }
 }
+
+/* Buzz bee wing-flap (ported from the Buzz website's BeeField, tuned for a
+   single hero bee). The two wing lobes beat continuously — a fast, small
+   in/out scale so the bee reads as actively flapping on the loading gate rather
+   than resting most of the cycle (the website staggers many bees, so it could
+   afford long rests; one bee cannot). The optional --flap-delay custom property
+   can still stagger multiple bees. */
+.bee-sprite .bee-wing {
+  animation-delay: var(--flap-delay, 0s);
+  animation-duration: 0.28s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.bee-sprite .bee-wing-left {
+  animation-name: bee-wing-left-flap;
+}
+
+.bee-sprite .bee-wing-right {
+  animation-name: bee-wing-right-flap;
+}
+
+@keyframes bee-wing-left-flap {
+  0%,
+  100% {
+    transform: translateX(0) scaleX(1);
+  }
+  50% {
+    transform: translateX(30px) scaleX(0.62);
+  }
+}
+
+@keyframes bee-wing-right-flap {
+  0%,
+  100% {
+    transform: translateX(0) scaleX(1);
+  }
+  50% {
+    transform: translateX(-30px) scaleX(0.62);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bee-sprite .bee-wing {
+    animation: none;
+  }
+}
diff --git a/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx b/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
new file mode 100644
index 000000000..a7669864f
--- /dev/null
+++ b/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
@@ -0,0 +1,72 @@
+import { useId } from "react";
+
+/**
+ * The Buzz bee mark with flapping wings. Geometry is identical to the static
+ * {@link BuzzMark} (v8 final keyframe) — the same silhouette, rendered in
+ * `currentColor` so it tints per-theme — but the two wing lobes carry the
+ * `bee-wing` classes so the wing-flap keyframes (ported from the Buzz website)
+ * beat them on an infinite loop. It's plain SVG + CSS (no JS/SMIL), so it paints
+ * on the very first frame and the flap starts as soon as styles load. Reduced
+ * motion falls back to the static silhouette via the CSS media query.
+ */
+export function FlappingBee({ className }: { className?: string }) {
+  const maskId = `flapping-bee-cutouts-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={["buzz-mark", "bee-sprite", className]
+        .filter(Boolean)
+        .join(" ")}
+      viewBox="0 0 466 309"
+      fill="currentColor"
+    >
+      <defs>
+        <mask
+          id={maskId}
+          x="-80"
+          y="-80"
+          width="626"
+          height="469"
+          maskUnits="userSpaceOnUse"
+          maskContentUnits="userSpaceOnUse"
+        >
+          <rect x="-80" y="-80" width="626" height="469" fill="#fff" />
+          <ellipse cx="193.3" cy="84.4" rx="27" ry="27" fill="#000" />
+          <ellipse cx="276" cy="84.4" rx="27" ry="27" fill="#000" />
+          <rect
+            x="166.3"
+            y="157.2"
+            width="136.9"
+            height="38.3"
+            rx="5"
+            fill="#000"
+          />
+          <rect
+            x="166.9"
+            y="235.1"
+            width="136.2"
+            height="37.6"
+            rx="5"
+            fill="#000"
+          />
+        </mask>
+      </defs>
+      <g mask={`url(#${maskId})`}>
+        <circle
+          className="bee-wing bee-wing-left"
+          cx="91.7"
+          cy="154.5"
+          r="91.7"
+        />
+        <circle
+          className="bee-wing bee-wing-right"
+          cx="374.3"
+          cy="154.5"
+          r="91.7"
+        />
+        <rect x="128" y="0" width="210" height="309" rx="34" />
+      </g>
+    </svg>
+  );
+}

From fe55729871fca798c55492d6ff38108391bf6dc1 Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 14:04:49 +0100
Subject: [PATCH 4/8] fix(desktop): start the setup-gate bee mid-flap so a warm
 refresh isn't caught at rest
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a warm Cmd+R refresh the cold-boot loading gate can be very short-lived,
so the wing-flap was often caught at its 0% rest pose (no visible motion).
Start the flap with a negative animation-delay (-0.14s) so the very first
painted frame is already mid-beat — the bee never appears frozen at rest.

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
---
 desktop/src/shared/styles/globals/animations.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index 06f4d2343..4a6c5d620 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -760,13 +760,15 @@
 }
 
 /* Buzz bee wing-flap (ported from the Buzz website's BeeField, tuned for a
-   single hero bee). The two wing lobes beat continuously — a fast, small
-   in/out scale so the bee reads as actively flapping on the loading gate rather
-   than resting most of the cycle (the website staggers many bees, so it could
-   afford long rests; one bee cannot). The optional --flap-delay custom property
-   can still stagger multiple bees. */
+   single hero bee). The two wing lobes beat continuously — a fast in/out scale
+   so the bee reads as actively flapping on the loading gate rather than resting
+   most of the cycle (the website staggers many bees, so it could afford long
+   rests; one bee cannot). The loading gate can be short-lived on a warm
+   refresh, so the flap starts already mid-beat (negative animation-delay) — the
+   bee is never caught frozen at the rest pose on first paint. The optional
+   --flap-delay custom property can still stagger multiple bees. */
 .bee-sprite .bee-wing {
-  animation-delay: var(--flap-delay, 0s);
+  animation-delay: var(--flap-delay, -0.14s);
   animation-duration: 0.28s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

From a806e48d609130643ff2065ab451082e5c0ee834 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Wed, 8 Jul 2026 15:16:24 +0100
Subject: [PATCH 5/8] fix(desktop): run the setup-gate wing flap on the
 compositor so refresh doesn't freeze the bee
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a warm refresh the bee flashed frozen: WebKit paints SVG *children* on
the main thread, and boot work (bundle eval, first React render of the app
tree) hogs that thread for most of the window the loading gate is visible,
so a transform animation on the wing <circle>s never advances. Rebuild
FlappingBee as layered HTML-level <svg> wings under the masked body SVG and
animate the wing elements' CSS transforms in percentages — HTML-level
transforms run on the compositor (Core Animation in WKWebView) and keep
flapping while the main thread is blocked.

The slot cutouts still punch through the wings via static CSS masks on the
non-animated wing wrappers (evenodd alpha masks — CSS mask-image uses the
alpha channel, not luminance), verified pixel-equivalent to the single-SVG
mark at rest/mid/tuck phases (37-39dB PSNR, anti-aliasing only). Start pose
moves from full tuck (-0.14s) to genuine mid-stroke (-0.07s) so a one-frame
flash reads as caught mid-beat rather than squished.

Also repair the setup-gate e2e assertions, which still tested the #1570
black static gate this branch replaced (pre-existing failure): assert the
grainient wash + flapping bee treatment instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: klopez4212 <klopez4212@gmail.com>
---
 .../src/shared/styles/globals/animations.css  |  53 ++++--
 .../src/shared/ui/buzz-logo/FlappingBee.tsx   | 153 +++++++++++-------
 desktop/tests/e2e/onboarding.spec.ts          |  54 ++++---
 3 files changed, 177 insertions(+), 83 deletions(-)

diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index 4a6c5d620..7ee44cde1 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -763,17 +763,26 @@
    single hero bee). The two wing lobes beat continuously — a fast in/out scale
    so the bee reads as actively flapping on the loading gate rather than resting
    most of the cycle (the website staggers many bees, so it could afford long
-   rests; one bee cannot). The loading gate can be short-lived on a warm
-   refresh, so the flap starts already mid-beat (negative animation-delay) — the
-   bee is never caught frozen at the rest pose on first paint. The optional
-   --flap-delay custom property can still stagger multiple bees. */
+   rests; one bee cannot).
+
+   The animated elements are HTML-level <svg> wings (see FlappingBee.tsx), not
+   SVG children: WebKit paints SVG children on the main thread, so their
+   animations freeze while boot work hogs the thread — exactly when the loading
+   gate is visible. HTML-level transforms run on the compositor and keep
+   flapping. Translation is in percentages of the wing's own 183.4-unit box
+   (30/183.4 = 16.3577%) so the beat is identical at any rendered size.
+
+   The loading gate can be short-lived on a warm refresh, so the flap starts
+   mid-stroke (negative animation-delay, quarter beat in) — the bee is never
+   caught frozen at the rest pose on first paint, and a one-frame flash shows
+   wings visibly mid-beat rather than at the squished full-tuck extreme. The
+   optional --flap-delay custom property can still stagger multiple bees. */
 .bee-sprite .bee-wing {
-  animation-delay: var(--flap-delay, -0.14s);
+  animation-delay: var(--flap-delay, -0.07s);
   animation-duration: 0.28s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
-  transform-box: fill-box;
-  transform-origin: center;
+  will-change: transform;
 }
 
 .bee-sprite .bee-wing-left {
@@ -784,13 +793,39 @@
   animation-name: bee-wing-right-flap;
 }
 
+/* Static cutout masks over the wing layers. In the single-SVG mark, the slot
+   cutouts punch through body AND wings (the wings tuck behind the body far
+   enough to sit under the slots' left ends). The wing layers reproduce those
+   holes with a static CSS mask on the non-animated wrapper, so the holes stay
+   fixed while the wing beats beneath them — matching the masked single-SVG
+   rendering. Rect coordinates are the mark's slot cutouts translated into each
+   wing's local 183.4x183.4 box (left wing box starts at x=0, y=62.8; right
+   wing box at x=282.6, y=62.8). The eye cutouts never intersect the wing
+   circles, so they are omitted. */
+.bee-wing-layer {
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.bee-wing-layer-left {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM171.3,94.4H298.2A5,5 0 0 1 303.2,99.4V127.7A5,5 0 0 1 298.2,132.7H171.3A5,5 0 0 1 166.3,127.7V99.4A5,5 0 0 1 171.3,94.4ZM171.9,172.3H298.1A5,5 0 0 1 303.1,177.3V204.9A5,5 0 0 1 298.1,209.9H171.9A5,5 0 0 1 166.9,204.9V177.3A5,5 0 0 1 171.9,172.3Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM171.3,94.4H298.2A5,5 0 0 1 303.2,99.4V127.7A5,5 0 0 1 298.2,132.7H171.3A5,5 0 0 1 166.3,127.7V99.4A5,5 0 0 1 171.3,94.4ZM171.9,172.3H298.1A5,5 0 0 1 303.1,177.3V204.9A5,5 0 0 1 298.1,209.9H171.9A5,5 0 0 1 166.9,204.9V177.3A5,5 0 0 1 171.9,172.3Z'/%3E%3C/svg%3E");
+}
+
+.bee-wing-layer-right {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM-111.3,94.4H15.6A5,5 0 0 1 20.6,99.4V127.7A5,5 0 0 1 15.6,132.7H-111.3A5,5 0 0 1 -116.3,127.7V99.4A5,5 0 0 1 -111.3,94.4ZM-110.7,172.3H15.5A5,5 0 0 1 20.5,177.3V204.9A5,5 0 0 1 15.5,209.9H-110.7A5,5 0 0 1 -115.7,204.9V177.3A5,5 0 0 1 -110.7,172.3Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM-111.3,94.4H15.6A5,5 0 0 1 20.6,99.4V127.7A5,5 0 0 1 15.6,132.7H-111.3A5,5 0 0 1 -116.3,127.7V99.4A5,5 0 0 1 -111.3,94.4ZM-110.7,172.3H15.5A5,5 0 0 1 20.5,177.3V204.9A5,5 0 0 1 15.5,209.9H-110.7A5,5 0 0 1 -115.7,204.9V177.3A5,5 0 0 1 -110.7,172.3Z'/%3E%3C/svg%3E");
+}
+
 @keyframes bee-wing-left-flap {
   0%,
   100% {
     transform: translateX(0) scaleX(1);
   }
   50% {
-    transform: translateX(30px) scaleX(0.62);
+    transform: translateX(16.3577%) scaleX(0.62);
   }
 }
 
@@ -800,7 +835,7 @@
     transform: translateX(0) scaleX(1);
   }
   50% {
-    transform: translateX(-30px) scaleX(0.62);
+    transform: translateX(-16.3577%) scaleX(0.62);
   }
 }
 
diff --git a/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx b/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
index a7669864f..3cc7ee9e3 100644
--- a/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
+++ b/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
@@ -3,70 +3,115 @@ import { useId } from "react";
 /**
  * The Buzz bee mark with flapping wings. Geometry is identical to the static
  * {@link BuzzMark} (v8 final keyframe) — the same silhouette, rendered in
- * `currentColor` so it tints per-theme — but the two wing lobes carry the
- * `bee-wing` classes so the wing-flap keyframes (ported from the Buzz website)
- * beat them on an infinite loop. It's plain SVG + CSS (no JS/SMIL), so it paints
- * on the very first frame and the flap starts as soon as styles load. Reduced
- * motion falls back to the static silhouette via the CSS media query.
+ * `currentColor` so it tints per-theme — with the wing-flap keyframes (ported
+ * from the Buzz website) beating the wings on an infinite loop.
+ *
+ * Unlike the static mark's single `<svg>`, each wing here is its own
+ * HTML-level `<svg>` layer and the flap animates those elements' CSS
+ * transforms. This is deliberate: WebKit paints SVG *children* on the main
+ * thread, so a transform animation on a `<circle>` freezes for as long as boot
+ * work (bundle eval, first React render of the app tree) hogs the thread —
+ * exactly the window in which the loading gate is on screen. Transforms on
+ * HTML-level elements run on the compositor (Core Animation in WKWebView) and
+ * keep flapping regardless. The `bee-wing-layer` masks reproduce the slot
+ * cutouts over the wings so the layered build stays pixel-identical to the
+ * masked single-SVG mark (see animations.css).
+ *
+ * Everything is plain SVG + CSS (no JS/SMIL), so it paints on the very first
+ * frame and the flap starts as soon as styles load. Reduced motion falls back
+ * to the static silhouette via the CSS media query.
  */
 export function FlappingBee({ className }: { className?: string }) {
   const maskId = `flapping-bee-cutouts-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 
+  // Wing geometry from the 466x309 mark: circles r=91.7 at (91.7, 154.5) and
+  // (374.3, 154.5). Each wing layer is the circle's bounding box, positioned
+  // as percentages of the mark: top 62.8/309, size 183.4/466 x 183.4/309.
+  const wingLayer =
+    "bee-wing-layer absolute top-[20.3236%] h-[59.3528%] w-[39.3562%]";
+  const wingSvg = "bee-wing block h-full w-full";
+
   return (
-    <svg
+    <div
       aria-hidden="true"
-      className={["buzz-mark", "bee-sprite", className]
+      className={[
+        "buzz-mark",
+        "bee-sprite",
+        "relative",
+        "aspect-[466/309]",
+        className,
+      ]
         .filter(Boolean)
         .join(" ")}
-      viewBox="0 0 466 309"
-      fill="currentColor"
     >
-      <defs>
-        <mask
-          id={maskId}
-          x="-80"
-          y="-80"
-          width="626"
-          height="469"
-          maskUnits="userSpaceOnUse"
-          maskContentUnits="userSpaceOnUse"
+      <div className={`${wingLayer} bee-wing-layer-left left-0`}>
+        <svg
+          aria-hidden="true"
+          className={`${wingSvg} bee-wing-left`}
+          viewBox="0 0 183.4 183.4"
+          fill="currentColor"
         >
-          <rect x="-80" y="-80" width="626" height="469" fill="#fff" />
-          <ellipse cx="193.3" cy="84.4" rx="27" ry="27" fill="#000" />
-          <ellipse cx="276" cy="84.4" rx="27" ry="27" fill="#000" />
-          <rect
-            x="166.3"
-            y="157.2"
-            width="136.9"
-            height="38.3"
-            rx="5"
-            fill="#000"
-          />
-          <rect
-            x="166.9"
-            y="235.1"
-            width="136.2"
-            height="37.6"
-            rx="5"
-            fill="#000"
-          />
-        </mask>
-      </defs>
-      <g mask={`url(#${maskId})`}>
-        <circle
-          className="bee-wing bee-wing-left"
-          cx="91.7"
-          cy="154.5"
-          r="91.7"
-        />
-        <circle
-          className="bee-wing bee-wing-right"
-          cx="374.3"
-          cy="154.5"
-          r="91.7"
+          <circle cx="91.7" cy="91.7" r="91.7" />
+        </svg>
+      </div>
+      <div className={`${wingLayer} bee-wing-layer-right right-0`}>
+        <svg
+          aria-hidden="true"
+          className={`${wingSvg} bee-wing-right`}
+          viewBox="0 0 183.4 183.4"
+          fill="currentColor"
+        >
+          <circle cx="91.7" cy="91.7" r="91.7" />
+        </svg>
+      </div>
+      {/* Body last in DOM order and positioned, so it paints over the wings —
+          matching the single-SVG mark where the body rect draws on top. */}
+      <svg
+        aria-hidden="true"
+        className="relative block h-full w-full"
+        viewBox="0 0 466 309"
+        fill="currentColor"
+      >
+        <defs>
+          <mask
+            id={maskId}
+            x="-80"
+            y="-80"
+            width="626"
+            height="469"
+            maskUnits="userSpaceOnUse"
+            maskContentUnits="userSpaceOnUse"
+          >
+            <rect x="-80" y="-80" width="626" height="469" fill="#fff" />
+            <ellipse cx="193.3" cy="84.4" rx="27" ry="27" fill="#000" />
+            <ellipse cx="276" cy="84.4" rx="27" ry="27" fill="#000" />
+            <rect
+              x="166.3"
+              y="157.2"
+              width="136.9"
+              height="38.3"
+              rx="5"
+              fill="#000"
+            />
+            <rect
+              x="166.9"
+              y="235.1"
+              width="136.2"
+              height="37.6"
+              rx="5"
+              fill="#000"
+            />
+          </mask>
+        </defs>
+        <rect
+          x="128"
+          y="0"
+          width="210"
+          height="309"
+          rx="34"
+          mask={`url(#${maskId})`}
         />
-        <rect x="128" y="0" width="210" height="309" rx="34" />
-      </g>
-    </svg>
+      </svg>
+    </div>
   );
 }
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 6b5eb2cb2..cfc7e428c 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1068,38 +1068,52 @@ test("first-run onboarding shows setup loading until Welcome bootstrap completes
   await expect(loadingGate).toBeVisible();
   await expect(loadingGate).toContainText("Setting up your workspace...");
 
-  // The boot gate is deliberately static: a plain Buzz mark in the brand
-  // yellow (#D7D72E) over solid black. The mark must paint complete on the
-  // FIRST frame — a blank gate reads as "nothing is loading" — so nothing
-  // about it may depend on SMIL/scripted animation, and the background must
-  // be a flat color rather than the animated gradient wash.
+  // The boot gate is the theme-adaptive grainient with the flapping Buzz bee
+  // as its hero. The mark must paint complete on the FIRST frame — a blank
+  // gate reads as "nothing is loading" — so nothing about it may depend on
+  // SMIL/scripted animation (<animate> count stays 0); the wing flap is pure
+  // CSS on HTML-level wing layers so it keeps running on the compositor even
+  // while boot work hogs the main thread.
+  await expect(
+    loadingGate.getByTestId("setup-grainient-background"),
+  ).toBeVisible();
   const mark = loadingGate.locator(".buzz-mark");
   await expect(mark).toBeVisible();
   const gateTreatment = await loadingGate.evaluate((element) => {
-    const shellStyles = window.getComputedStyle(element);
-    const markSvg = element.querySelector(".buzz-mark");
-    const markStyles =
-      markSvg instanceof SVGElement ? window.getComputedStyle(markSvg) : null;
+    const markElement = element.querySelector(".buzz-mark");
+    const markSvgs = markElement
+      ? Array.from(markElement.querySelectorAll("svg"))
+      : [];
+    const wing = element.querySelector(".bee-wing");
+    const wingStyles =
+      wing instanceof SVGElement ? window.getComputedStyle(wing) : null;
+    const wash = element.querySelector(".buzz-setup-grainient__wash");
+    const washStyles =
+      wash instanceof HTMLElement ? window.getComputedStyle(wash) : null;
     return {
       animateElementCount: element.querySelectorAll("animate").length,
-      backgroundColor: shellStyles.backgroundColor,
-      backgroundImage: shellStyles.backgroundImage,
-      // The document itself must also be black (inline <style> in
-      // index.html) so the pre-React/pre-CSS first paint can't flash white
-      // before the gate mounts.
+      // The document itself must not flash white before the gate mounts
+      // (inline <style> in index.html; black fallback when no cached theme).
       documentBackgroundColor: window.getComputedStyle(document.documentElement)
         .backgroundColor,
-      markColor: markStyles?.color,
-      markUsesCurrentColor: markSvg?.getAttribute("fill") === "currentColor",
+      grainientAnimation: washStyles?.animationName,
+      grainientUsesRadialGradients:
+        washStyles?.backgroundImage.includes("radial-gradient"),
+      markSvgsUseCurrentColor:
+        markSvgs.length > 0 &&
+        markSvgs.every((svg) => svg.getAttribute("fill") === "currentColor"),
+      wingFlapAnimation: wingStyles?.animationName,
+      wingFlapRunning: wingStyles?.animationPlayState,
     };
   });
   expect(gateTreatment).toEqual({
     animateElementCount: 0,
-    backgroundColor: "rgb(0, 0, 0)",
-    backgroundImage: "none",
     documentBackgroundColor: "rgb(0, 0, 0)",
-    markColor: "rgb(215, 215, 46)", // #d7d72e
-    markUsesCurrentColor: true,
+    grainientAnimation: "buzz-grainient-orbit",
+    grainientUsesRadialGradients: true,
+    markSvgsUseCurrentColor: true,
+    wingFlapAnimation: "bee-wing-left-flap",
+    wingFlapRunning: "running",
   });
   await expect(loadingGate).not.toHaveClass(/buzz-onboarding-neutral-theme/);
   await expectShellHidden(page);

From c225b7e44d6c301612367506e081631a7a3f75d9 Mon Sep 17 00:00:00 2001
From: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Date: Wed, 8 Jul 2026 15:38:58 +0100
Subject: [PATCH 6/8] fix(desktop): size the switch-gate bee to the mark and
 seed dark theme on cold boot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Give the animated FuzzyLogo layer in BeeLoader an important full width/height
so it overrides the buzz-logo--compact 1.5rem rule and fills the static
BuzzMark instead of rendering at 24px.

On first-ever launch (no theme cache) seed the dark class synchronously in the
boot script so the setup gate paints from the dark :root vars, matching the
default dark houston theme ThemeProvider applies moments later — no light
Catppuccin-Latte flash between the black boot background and the themed gate.

Addresses review comments on PR #1631.

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
---
 desktop/index.html      | 21 +++++++++++++++++----
 desktop/src/app/App.tsx |  2 +-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/desktop/index.html b/desktop/index.html
index a697c2624..c219f214d 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -15,7 +15,10 @@
       The inline script below reads the cached theme background (same
       `buzz-theme-cache` entry ThemeProvider writes) and applies it synchronously
       so the boot color matches the themed loading gate — no black flash on light
-      themes. Falls back to black on the first-ever launch (no cache yet).
+      themes. On the first-ever launch (no cache yet) it seeds the `dark` class
+      synchronously so the setup gate reads the dark `:root` vars instead of the
+      light Catppuccin-Latte default, matching the dark `houston` theme
+      ThemeProvider applies moments later — no light flash before it loads.
     -->
     <style>
       html {
@@ -24,12 +27,22 @@
     </style>
     <script>
       (() => {
-        var cached, bg;
+        var cached, bg, parsed;
         try {
           cached = window.localStorage.getItem("buzz-theme-cache");
-          if (!cached) return;
-          bg = JSON.parse(cached).vars["--background"];
+          if (!cached) {
+            // No stored theme: the default theme (`houston`) is dark, so seed
+            // the `dark` class now. Otherwise the setup gate would paint from
+            // the light `:root` vars until ThemeProvider loads asynchronously.
+            document.documentElement.classList.add("dark");
+            return;
+          }
+          parsed = JSON.parse(cached);
+          bg = parsed.vars["--background"];
           if (bg) document.documentElement.style.backgroundColor = `hsl(${bg})`;
+          // Match the cached light/dark class so themed vars resolve correctly
+          // before ThemeProvider mounts.
+          document.documentElement.classList.add(parsed.isDark ? "dark" : "light");
         } catch {
           /* fall back to the black default above */
         }
diff --git a/desktop/src/app/App.tsx b/desktop/src/app/App.tsx
index ac0c773a3..b7d65b9fa 100644
--- a/desktop/src/app/App.tsx
+++ b/desktop/src/app/App.tsx
@@ -55,7 +55,7 @@ function BeeLoader({
       <BuzzMark className="block h-auto w-full" />
       <FuzzyLogo
         ariaLabel={ariaLabel}
-        className="absolute inset-0 h-full w-full [&>svg]:h-full [&>svg]:w-full [&>svg]:max-w-full"
+        className="absolute inset-0 h-full! w-full! [&>svg]:h-full [&>svg]:w-full [&>svg]:max-w-full"
         fuzz
         loop
         loopRestSeconds={0}

From b3df88985bbcaf319a31a3465d36d140b17bd67f Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Wed, 8 Jul 2026 16:32:02 +0100
Subject: [PATCH 7/8] feat(desktop): hold the boot splash so the bee is
 actually seen on cold boot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cold boot resolves the workspace in well under 100ms — traced in the real
staging app: the loading gate mounted at t=91ms and unmounted at t=150ms,
before the hidden Tauri window (visible:false until show()) ever put a
frame on screen. The wing animation was healthy the whole time; there was
just nothing on screen long enough to see. Refresh only looked different
because the window is already visible, so the flash is catchable.

Keep the gate up as a fixed overlay above the already-mounted app for a
minimum visible duration (1.2s + 200ms fade), then unmount it. Boot work
and data loading proceed beneath the overlay, so time-to-interactive is
unchanged — only the reveal waits. Workspace switches and first-run
completion keep their quiet gates; boots slower than the hold behave
exactly as before.

E2E runs skip the hold (it would slow every spec's boot and block pointer
actionability); specs can opt back in via __BUZZ_E2E__.bootSplashHoldMs,
which the new boot-splash.spec.ts uses to assert the overlay holds with a
running wing flap, doesn't delay the app beneath, and dismisses cleanly.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 desktop/playwright.config.ts          |  1 +
 desktop/src/app/App.tsx               | 72 +++++++++++++++++++++++++++
 desktop/tests/e2e/boot-splash.spec.ts | 57 +++++++++++++++++++++
 3 files changed, 130 insertions(+)
 create mode 100644 desktop/tests/e2e/boot-splash.spec.ts

diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 8ca25b81d..cd881650c 100644
--- a/desktop/playwright.config.ts
+++ b/desktop/playwright.config.ts
@@ -60,6 +60,7 @@ export default defineConfig({
         "**/top-chrome-zoom-clearance.spec.ts",
         "**/thread-unread.spec.ts",
         "**/workspace-rail.spec.ts",
+        "**/boot-splash.spec.ts",
         "**/thread-reply-anchor-roleplay.spec.ts",
         "**/threadpane-ultrawide.spec.ts",
         "**/animated-avatar.spec.ts",
diff --git a/desktop/src/app/App.tsx b/desktop/src/app/App.tsx
index b7d65b9fa..a830cfd2e 100644
--- a/desktop/src/app/App.tsx
+++ b/desktop/src/app/App.tsx
@@ -36,6 +36,55 @@ import { StepProgress } from "@/shared/ui/step-progress";
 
 const LOADING_TEXT = "Setting up your workspace...";
 
+// Minimum time the cold-boot splash stays on screen. A real boot resolves the
+// workspace in well under 100ms, and the hidden Tauri window (visible:false
+// until getCurrentWindow().show()) takes longer than that to put its first
+// frame on screen — without a hold, the bee is unmounted before it is ever
+// visible. The hold runs as an overlay above the already-mounted app, so
+// time-to-interactive is unchanged; only the reveal waits.
+const BOOT_SPLASH_MIN_VISIBLE_MS = 1_200;
+const BOOT_SPLASH_FADE_MS = 200;
+
+type BootSplashPhase = "holding" | "fading" | "done";
+
+// E2E runs skip the hold (it would slow every spec's boot and block pointer
+// actionability); a spec can opt back in via __BUZZ_E2E__.bootSplashHoldMs.
+function bootSplashHoldMs(): number {
+  const e2e = (
+    window as Window & {
+      __BUZZ_E2E__?: { bootSplashHoldMs?: number };
+    }
+  ).__BUZZ_E2E__;
+  if (e2e) {
+    return e2e.bootSplashHoldMs ?? 0;
+  }
+  return BOOT_SPLASH_MIN_VISIBLE_MS;
+}
+
+function useBootSplashHold(): BootSplashPhase {
+  const [phase, setPhase] = useState<BootSplashPhase>(() =>
+    bootSplashHoldMs() > 0 ? "holding" : "done",
+  );
+
+  useEffect(() => {
+    const holdMs = bootSplashHoldMs();
+    if (holdMs <= 0) {
+      return;
+    }
+    const fadeTimer = window.setTimeout(() => setPhase("fading"), holdMs);
+    const doneTimer = window.setTimeout(
+      () => setPhase("done"),
+      holdMs + BOOT_SPLASH_FADE_MS,
+    );
+    return () => {
+      window.clearTimeout(fadeTimer);
+      window.clearTimeout(doneTimer);
+    };
+  }, []);
+
+  return phase;
+}
+
 // Animated Buzz mark for the loading gates. The static BuzzMark renders in
 // normal flow and sizes the box — it's plain SVG (no JS/SMIL), so it paints on
 // the very first frame even before scripting starts, avoiding a blank flash on
@@ -350,6 +399,8 @@ export function App() {
     setIsCompletingFirstRunWorkspace(false);
   }, []);
 
+  const bootSplashPhase = useBootSplashHold();
+
   // Wait for the shared-identity IPC call to resolve before rendering
   // anything that depends on it. Without this gate, children briefly see
   // isSharedIdentity=false and may flash WelcomeSetup or the onboarding flow.
@@ -380,6 +431,14 @@ export function App() {
     return isWorkspaceSwitch ? <WorkspaceSwitchGate /> : <AppLoadingGate />;
   }
 
+  // The app mounts (and starts loading data) beneath the splash overlay; the
+  // overlay just keeps the bee on screen long enough to be seen, then fades.
+  // Workspace switches and first-run completion keep their quiet gates.
+  const showBootSplashOverlay =
+    bootSplashPhase !== "done" &&
+    !isWorkspaceSwitch &&
+    !isCompletingFirstRunWorkspace;
+
   return (
     <WorkspaceQueryProvider key={workspaceKey}>
       <AppReady
@@ -391,6 +450,19 @@ export function App() {
         onFirstRunWorkspaceSettled={handleFirstRunWorkspaceSettled}
         onBackToWorkspaceSetup={handleBackToWorkspaceSetup}
       />
+      {showBootSplashOverlay ? (
+        <div
+          aria-hidden="true"
+          className={cn(
+            "fixed inset-0 z-50 transition-opacity",
+            bootSplashPhase === "fading" ? "opacity-0" : "opacity-100",
+          )}
+          data-testid="boot-splash-overlay"
+          style={{ transitionDuration: `${BOOT_SPLASH_FADE_MS}ms` }}
+        >
+          <AppLoadingGate />
+        </div>
+      ) : null}
     </WorkspaceQueryProvider>
   );
 }
diff --git a/desktop/tests/e2e/boot-splash.spec.ts b/desktop/tests/e2e/boot-splash.spec.ts
new file mode 100644
index 000000000..231475b26
--- /dev/null
+++ b/desktop/tests/e2e/boot-splash.spec.ts
@@ -0,0 +1,57 @@
+import { expect, test } from "@playwright/test";
+import { installMockBridge } from "../helpers/bridge";
+
+// Cold-boot splash hold: on a real boot the workspace resolves in well under
+// 100ms — before the hidden Tauri window ever puts a frame on screen — so the
+// loading gate keeps the flapping bee up as an overlay above the already
+// mounted app for a minimum visible duration, then fades out. E2E runs skip
+// the hold by default (it would slow every spec's boot and block pointer
+// actionability); this spec opts back in via __BUZZ_E2E__.bootSplashHoldMs.
+
+test("boot splash overlay holds with a flapping bee, then dismisses", async ({
+  page,
+}) => {
+  await installMockBridge(page);
+  // Registered after installMockBridge so it runs after the bridge's init
+  // script and can extend the config it assigns.
+  await page.addInitScript(() => {
+    const testWindow = window as Window & {
+      __BUZZ_E2E__?: { bootSplashHoldMs?: number };
+    };
+    testWindow.__BUZZ_E2E__ = {
+      ...(testWindow.__BUZZ_E2E__ ?? {}),
+      bootSplashHoldMs: 1_500,
+    };
+  });
+  await page.goto("/");
+
+  const overlay = page.getByTestId("boot-splash-overlay");
+  await expect(overlay).toBeVisible();
+
+  // The bee is actually animating while the overlay holds — pure CSS, no SMIL.
+  const wingState = await overlay.locator(".bee-wing-left").evaluate((wing) => {
+    const animation = wing.getAnimations()[0];
+    return {
+      name: getComputedStyle(wing).animationName,
+      state: animation?.playState,
+    };
+  });
+  expect(wingState).toEqual({ name: "bee-wing-left-flap", state: "running" });
+
+  // The app mounts and loads beneath the overlay — boot is not delayed.
+  await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+
+  // After the hold elapses the overlay fades out and unmounts.
+  await expect(overlay).toHaveCount(0, { timeout: 6_000 });
+  await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+});
+
+test("boot splash overlay is skipped when the hold is zero (e2e default)", async ({
+  page,
+}) => {
+  await installMockBridge(page);
+  await page.goto("/");
+
+  await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+  await expect(page.getByTestId("boot-splash-overlay")).toHaveCount(0);
+});

From 528c2111aebc80301200d05820e3cee2fad0414a Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Wed, 8 Jul 2026 17:22:55 +0100
Subject: [PATCH 8/8] fix(desktop): boot the window visible so WebKit's
 animation machinery survives cold boot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A WKWebView born in a hidden Tauri window (visible:false until
getCurrentWindow().show()) can lose the race between the window appearing
and WebKit being told the view is visible. When that happens — some boots,
not others, and inherited by every reload in that webview — the page's
rendering scheduler wedges permanently: requestAnimationFrame fires exactly
once and never again, CSS/compositor animations never advance, and even
timer-driven DOM mutations only reach the screen when something external
(user input) forces a flush, while visibilityState still reports "visible".
Traced in the real staging app across many boots; no in-page implementation
of the splash bee (CSS animation, rAF loop, timer + style writes, timer +
SVG attribute mutation) could animate in that state, because every
scheduling and flush primitive was dead.

Boot the window visible instead. The hidden-window dance existed to hide an
unstyled first paint, but index.html now paints the pre-React window in the
cached theme background (with dark seeding on first launch), so there is
nothing to hide — and a window that is never hidden cannot lose the
visibility race. The committed splash implementation (compositor-driven
wing flap + minimum-visible splash hold) then works on every boot and
reload. getCurrentWindow().show() stays as a harmless no-op safety.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 desktop/src-tauri/tauri.conf.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index c33f3443b..7bcc434f7 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -20,7 +20,7 @@
         "width": 800,
         "height": 600,
         "maximized": true,
-        "visible": false,
+        "visible": true,
         "backgroundColor": "#000000",
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,