ui(cordn): show setup progress through the join request

src/components/crew/CordnNativePanel.tsx

@@ -875,14 +875,29 @@ export function CordnNativePanel({
             </p>
 
             <ol className="mx-auto max-w-sm space-y-2 text-left">
-              {steps.map((step, index) => (
+              {steps.map((step, index) => {
-                <li key={step} className="flex items-start gap-2 text-xs text-gray-400">
+                // Members see the setup move visibly: device key prepared →
-                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-teal-500/15 text-[10px] font-bold text-teal-300">
+                // request sent → waiting for an admin. Founders start at step 1.
-                    {index + 1}
+                const stepDone = !canCreate && index === 0 && (awaiting || native.keyPackageReady);
+                const stepWaiting = !canCreate && index === 1 && awaiting;
+                return (
+                  <li
+                    key={step}
+                    className={cn(
+                      'flex items-start gap-2 text-xs',
+                      stepDone || stepWaiting ? 'text-teal-200' : 'text-gray-400',
+                    )}
+                  >
+                    <span className={cn(
+                      'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold',
+                      stepDone ? 'bg-teal-500/20 text-teal-300' : 'bg-teal-500/15 text-teal-300',
+                    )}>
+                      {stepDone ? <Check className="h-2.5 w-2.5" /> : stepWaiting ? <Loader2 className="h-2.5 w-2.5 animate-spin" /> : index + 1}
                     </span>
                     <span>{step}</span>
                   </li>
-              ))}
+                );
+              })}
             </ol>
 
             <p className="mx-auto max-w-sm text-[11px] text-gray-500">