diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx index 7024b9ef..8ac12fed 100644 --- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx +++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx @@ -183,7 +183,7 @@ const OnboardingV3Root: React.FC = () => { style={{ width: '100%', height: '100%' }} > {beat === 'welcome' && setBeat('newos')} />} - {beat === 'newos' && setBeat('connect')} />} + {beat === 'newos' && setBeat('connect')} />} {beat === 'connect' && ( 0 ? 'Continue' : 'Skip for now'} + body="I'll shape your starting canvas around them." + nextLabel={picks.length > 0 ? 'Next' : 'Skip for now'} onNext={onNext} onBack={onBack} > diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx index 219547d5..df405342 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx @@ -39,7 +39,7 @@ const BeatCard: React.FC<{ onFinish(name.trim() || null)} onBack={onBack} diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx index d64d2489..6efa91e5 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx @@ -1,6 +1,5 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { motion } from 'framer-motion'; -import { Check } from 'lucide-react'; import { useAppDispatch, useAppSelector } from '@/shared/hooks'; import { API_BASE } from '@/shared/config'; import { fetchModels } from '@/shared/state/modelsSlice'; @@ -13,7 +12,7 @@ import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; import type { ProviderIdentity } from '../onboardingV3Api'; import BeatShell from './BeatShell'; -// The single ask of the whole flow. Reuses the proven Settings connect flow verbatim; the scan disclosure lives here as one honest line with an opt-out, and the scan runs during the OAuth wait. +// The single ask of the whole flow, staged as Arc's import list: radio rows, no filler copy. Reuses the proven Settings connect flow verbatim; the scan disclosure is one quiet line, and the scan runs during the OAuth wait. const BeatConnect: React.FC<{ c: ClaudeTokens; identity: ProviderIdentity[]; @@ -82,61 +81,64 @@ const BeatConnect: React.FC<{ -
- {SUBSCRIPTION_PROVIDERS.map((p, i) => ( - !connected && handleConnect(p.id)} - initial={{ opacity: 0, y: 14 }} - animate={{ opacity: 1, y: 0 }} - transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }} - style={{ - display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px', textAlign: 'left', - borderRadius: c.radius.md, border: `1px solid ${c.border.medium}`, background: c.bg.surface, - cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit', - boxShadow: c.shadow.sm, - }} - > - - - {p.name} - {p.desc} - - {connecting === p.id && !connected && waiting for sign-in...} - {connected && connecting === p.id && } - - ))} +
+ {SUBSCRIPTION_PROVIDERS.map((p, i) => { + const isThis = connecting === p.id; + const filled = connected && isThis; + return ( + !connected && handleConnect(p.id)} + initial={{ opacity: 0, y: 14 }} + animate={{ opacity: 1, y: 0 }} + transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }} + style={{ + display: 'flex', alignItems: 'center', gap: 14, padding: '13px 14px 13px 16px', textAlign: 'left', + borderRadius: c.radius.md, border: `1px solid ${filled ? c.accent.primary : c.border.medium}`, + background: c.bg.surface, cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit', + boxShadow: c.shadow.sm, + }} + > + + + {p.name} + {isThis && !connected && waiting for sign-in...} + + + + + + ); + })} {userCode && !connected && ( -
+
Your code: {userCode}
)} {connected && ( - + Connected{connectedIdentity?.email ? ` as ${connectedIdentity.email}` : ''} {connectedIdentity?.plan ? ` ยท ${connectedIdentity.label} ${connectedIdentity.plan}` : ''} )} -