Auto pair when save a new token

Author: YuWei-CH

frontend/src/pages/ComparePage.tsx

@@ -335,6 +335,7 @@ function App() {
       return
     }
     localStorage.setItem('easyrelocate_workspace_token', t)
+    window.postMessage({ type: 'EASYRELOCATE_PAIR_REQUEST', token: t }, window.location.origin)
     setError(null)
     setWorkspaceNote('Saved.')
     if (targetId) await refresh({ nextTargetId: targetId })

frontend/src/pages/OnboardingTokenPage.tsx

@@ -119,6 +119,11 @@ export default function OnboardingTokenPage() {
     window.postMessage({ type: 'EASYRELOCATE_PAIR_REQUEST', token: t }, window.location.origin)
   }
 
+  const onPairAndContinue = () => {
+    onPairExtension()
+    navigate('/compare')
+  }
+
   useEffect(() => {
     const handler = (event: MessageEvent) => {
       if (event.source !== window) return
@@ -180,6 +185,10 @@ export default function OnboardingTokenPage() {
           <p className="onboardingSubtitle">
             This token is valid for 30 days. Keep it private (like a password).
           </p>
+          <p className="onboardingSubtitle" style={{ marginTop: 6 }}>
+            You can update your token anytime in the Map page (Workspace panel). Saving a new token
+            will auto‑pair your extension.
+          </p>
 
           <div className="onboardingCard" style={{ maxWidth: 720 }}>
             {loading ? (
@@ -222,10 +231,10 @@ export default function OnboardingTokenPage() {
                   <button className="button secondary" onClick={() => void onCopy()}>
                     Copy
                   </button>
-                  <button className="button secondary" onClick={onPairExtension}>
-                    Pair extension
+                  <button className="button" onClick={onPairAndContinue}>
+                    Pair & Continue
                   </button>
-                  <button className="button" onClick={onContinue}>
+                  <button className="button secondary" onClick={onContinue}>
                     Continue to map
                   </button>
                 </div>
@@ -237,10 +246,10 @@ export default function OnboardingTokenPage() {
                 <button className="button secondary" onClick={() => void doIssue()}>
                   Generate token
                 </button>
-                <button className="button secondary" onClick={onPairExtension}>
-                  Pair extension
+                <button className="button" onClick={onPairAndContinue}>
+                  Pair & Continue
                 </button>
-                <button className="button" onClick={onContinue}>
+                <button className="button secondary" onClick={onContinue}>
                   Continue to map
                 </button>
               </div>