fix(onboarding): use brand mark in recovery cards (#115)

## Summary
- replace the generic Sparkles icon in both onboarding recovery states
with the Cheatcode brand mark
- generalize the shared recovery-card visual slot so branded visuals and
Lucide icons use one accessible API
- preserve the existing card dimensions, icon sizing, action behavior,
and Lucide stroke weight

## Context
Direct user-reported onboarding UI defect; no Linear issue or plan
document was created for this focused fix.

## Decisions Made
| Decision | Choice | Alternatives considered | Reasoning |
|---|---|---|---|
| Recovery visual API | Accept a component slot with `className` and
`aria-hidden` | Duplicate a card, add a brand-specific boolean, or wrap
the mark as a fake Lucide icon | Keeps one recovery surface and lets the
caller choose the correct visual without vendor coupling |
| Lucide stroke styling | Apply stroke width through the shared class |
Keep a Lucide-only `strokeWidth` prop | Preserves existing icon
appearance while allowing non-SVG brand components |

## How to Review
1. Review `recovery-card.tsx` for the generalized visual contract.
2. Review `onboarding-flow.tsx` for both branded recovery-state call
sites.

## Verification
- [x] `pnpm lint`
- [x] `pnpm typecheck`
- [x] `pnpm turbo build --force`
- [x] `pnpm deadcode`
- [x] `pnpm architecture:check`
- [x] `pnpm turbo skills:build`
- [x] local stack started through the documented Compose flow
- [x] direct authenticated browser flow reached `Setup needs one more
step`
- [x] DOM confirmed `CheatcodeMark` present, `lucide-sparkles` absent,
and `Finish setup` enabled
- [x] visual screenshot confirmed the 18px mark remains centered in the
existing 44px recovery visual

Author: iamjr15

apps/web/src/components/onboarding/onboarding-flow.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Sparkles as SparklesIcon } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
+import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
 import { RecoveryCard } from "@/components/ui/recovery-card";
 import { createOnboardingStepProps, renderOnboardingStep } from "./onboarding-step-router";
 import { STEP_ORDER, useOnboardingFlow } from "./use-onboarding-flow";
@@ -52,7 +52,7 @@ function RetryCard({ isPending, onRetry }: { isPending: boolean; onRetry: () =>
         pendingLabel: "Finishing setup…",
       }}
       description="Your progress is saved. Try again to finish setting up your session."
-      icon={SparklesIcon}
+      icon={CheatcodeMark}
       title="Setup needs one more step"
     />
   );
@@ -69,7 +69,7 @@ function LoadErrorCard({ isPending, onRetry }: { isPending: boolean; onRetry: ()
       }}
       announce="assertive"
       description="Cheatcode couldn't reach your profile. Check your connection and try again."
-      icon={SparklesIcon}
+      icon={CheatcodeMark}
       title="Setup couldn't load"
     />
   );

apps/web/src/components/ui/recovery-card.tsx

@@ -1,8 +1,11 @@
 import Link from "next/link";
+import type { ReactNode } from "react";
 import type { LucideIcon } from "@/components/ui";
 import { Loader2, RefreshCw } from "@/components/ui";
 import { cn } from "@/lib/ui/cn";
 
+type RecoveryVisual = (props: { "aria-hidden": true; className: string }) => ReactNode;
+
 type RecoveryActionBase = {
   icon?: LucideIcon | undefined;
   label: string;
@@ -31,7 +34,7 @@ type RecoveryCardProps = {
   description: string;
   detail?: string | undefined;
   headingLevel?: 1 | 2 | 3 | undefined;
-  icon: LucideIcon;
+  icon: RecoveryVisual;
   size?: "compact" | "default" | undefined;
   title: string;
   variant?: "inline" | "stacked" | undefined;
@@ -42,7 +45,7 @@ type RecoveryContentProps = Pick<
   "action" | "description" | "detail" | "size" | "title"
 > & {
   headingTag: "h1" | "h2" | "h3";
-  icon: LucideIcon;
+  icon: RecoveryVisual;
 };
 
 /** Recovery surface for blocking failures and compact section-level failures. */
@@ -107,7 +110,7 @@ function InlineRecoveryContent({
     <div className="flex flex-col gap-3 px-4 py-3.5 min-[540px]:flex-row min-[540px]:items-center">
       <div className="flex min-w-0 flex-1 items-center gap-3.5">
         <span className="flex size-10 shrink-0 items-center justify-center rounded-[12px] bg-secondary text-fg-secondary ring-1 ring-border/50">
-          <Icon aria-hidden="true" className="size-[17px]" strokeWidth={1.7} />
+          <Icon aria-hidden className="size-[17px] [stroke-width:1.7]" />
         </span>
         <div className="min-w-0">
           <Heading className="font-semibold text-[13px] text-foreground leading-5">{title}</Heading>
@@ -141,7 +144,7 @@ function StackedRecoveryContent({
       )}
     >
       <span className="flex size-11 items-center justify-center rounded-[14px] bg-bg-secondary text-fg-secondary ring-1 ring-border/70">
-        <Icon aria-hidden="true" className="size-[18px]" strokeWidth={1.7} />
+        <Icon aria-hidden className="size-[18px] [stroke-width:1.7]" />
       </span>
       <Heading className="mt-4 font-semibold text-[14px] text-foreground leading-5">
         {title}