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

## Summary

Add Sims/RCT-style fun loading messages to the KiloClaw provisioning
step that fade-cycle every 3.5s while users wait for their instance to
spin up. The messages array is placeholder text meant to be swapped out
later. The cycling message is rendered as its own block (separate from
the heading/subtitle) so the parent's `gap-8` spacing keeps all sections
visually distinct.

## Verification

- [x] `pnpm typecheck` — passes
- [x] `pnpm format` — passes (auto-fixed one arrow-fn parens difference)
- [x] Lint + format pre-push hook — passes
- [x] Storybook visual check — confirmed fade cycling and spacing

## Visual Changes


https://github.com/user-attachments/assets/f7020eb8-2dae-4b4e-8a9f-58758324899c

## Reviewer Notes

The `PROVISIONING_MESSAGES` strings are intentional placeholders —
they'll be replaced with final copy in a follow-up.

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" />