feat(claw): add cycling fun messages to provisioning spinner

Add Sims/RCT-style loading messages that fade-cycle during instance
provisioning to keep users entertained while they wait.

Author: RSO

src/app/(app)/claw/components/ProvisioningStep.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Volume2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
@@ -113,8 +113,36 @@ export function ProvisioningStep({
   return <ProvisioningStepView />;
 }
 
+const PROVISIONING_MESSAGES = [
+  'Reticulating splines...',
+  'Warming up the flux capacitor...',
+  'Convincing the hamsters to run faster...',
+  'Downloading more RAM...',
+  'Generating witty loading messages...',
+  'Consulting the magic 8-ball...',
+  'Untangling the internet tubes...',
+  'Feeding the code monkeys...',
+  'Aligning the bits...',
+  'Compiling the compilers...',
+  'Herding the electrons...',
+  'Calibrating the cloud...',
+];
+
 /** Pure visual shell — extracted so Storybook can render it without wiring up mutations. */
 export function ProvisioningStepView() {
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisible(false);
+      setTimeout(() => {
+        setMessageIndex(i => (i + 1) % PROVISIONING_MESSAGES.length);
+        setVisible(true);
+      }, 300);
+    }, 3500);
+    return () => clearInterval(interval);
+  }, []);
   return (
     <OnboardingStepView
       currentStep={4}
@@ -169,6 +197,14 @@ export function ProvisioningStepView() {
         </p>
       </div>
 
+      {/* Cycling fun message */}
+      <p
+        className="text-muted-foreground h-5 text-sm italic transition-opacity duration-300"
+        style={{ opacity: visible ? 1 : 0 }}
+      >
+        {PROVISIONING_MESSAGES[messageIndex]}
+      </p>
+
       {/* Sound banner */}
       <div className="border-border flex w-full items-center gap-3 rounded-lg border p-4">
         <Volume2 className="text-muted-foreground h-5 w-5 shrink-0" />