From c958e3084b753b478fa0790bb67505a1f8daf643 Mon Sep 17 00:00:00 2001
From: gwdgithubnom <gwd163nom@163.com>
Date: Wed, 27 May 2026 23:19:30 +0800
Subject: [PATCH] fix(ui): resolve connectivity status mismatch after prepend
 insertion

Prepending new API key entries shifted all existing indices, causing useConnectivityTest index-based status tracking to desync.

Fix: keep array operations as append (stable indices) and reverse the rendering order so new entries appear at the top visually. Use realIdx for status lookups, React keys, and all updateField operations.
---
 .../sheets/forms/BaseProviderForm.tsx         | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/features/providers/sheets/forms/BaseProviderForm.tsx b/src/features/providers/sheets/forms/BaseProviderForm.tsx
index 232d937..820bb16 100644
--- a/src/features/providers/sheets/forms/BaseProviderForm.tsx
+++ b/src/features/providers/sheets/forms/BaseProviderForm.tsx
@@ -642,7 +642,7 @@ export function BaseProviderForm({
                 className={styles.addBtn}
                 disabled={mutating}
                 onClick={() =>
-                  updateField('apiKeyEntries', [emptyApiKeyEntry(), ...apiKeyEntries])
+                  updateField('apiKeyEntries', [...apiKeyEntries, emptyApiKeyEntry()])
                 }
               >
                 <IconPlus size={12} />
@@ -663,16 +663,17 @@ export function BaseProviderForm({
                 <span>{t('providersPage.connectivity.testAll')}</span>
               </button>
             </div>
-            {apiKeyEntries.map((entry, idx) => {
-              const status = connectivity.openaiStatuses[idx] ?? {
+            {[...apiKeyEntries].reverse().map((entry, visualIdx) => {
+              const realIdx = apiKeyEntries.length - 1 - visualIdx;
+              const status = connectivity.openaiStatuses[realIdx] ?? {
                 state: 'idle' as ConnectivityState,
                 message: '',
               };
               return (
-                <div key={idx} className={styles.entryCard}>
+                <div key={realIdx} className={styles.entryCard}>
                   <div className={styles.entryCardHeader}>
                     <span>
-                      {t('providersPage.form.apiKeyEntry', { index: idx + 1 })}
+                      {t('providersPage.form.apiKeyEntry', { index: realIdx + 1 })}
                     </span>
                     <div className={styles.entryCardHeaderRight}>
                       <ConnectivityStatusIcon state={status.state} />
@@ -680,7 +681,7 @@ export function BaseProviderForm({
                         type="button"
                         className={styles.connectivityBtnGhost}
                         disabled={mutating || status.state === 'loading'}
-                        onClick={() => void connectivity.runOpenAIKey(idx)}
+                        onClick={() => void connectivity.runOpenAIKey(realIdx)}
                       >
                         {status.state === 'loading' ? (
                           <span className={`${styles.statusIcon} ${styles.statusIconLoading}`}>
@@ -696,7 +697,7 @@ export function BaseProviderForm({
                         onClick={() =>
                           updateField(
                             'apiKeyEntries',
-                            apiKeyEntries.filter((_, i) => i !== idx)
+                            apiKeyEntries.filter((_, i) => i !== realIdx)
                           )
                         }
                       >
@@ -716,7 +717,7 @@ export function BaseProviderForm({
                         updateField(
                           'apiKeyEntries',
                           apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, apiKey: e.target.value } : it
+                            i === realIdx ? { ...it, apiKey: e.target.value } : it
                           )
                         )
                       }
@@ -735,7 +736,7 @@ export function BaseProviderForm({
                         updateField(
                           'apiKeyEntries',
                           apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, proxyUrl: e.target.value } : it
+                            i === realIdx ? { ...it, proxyUrl: e.target.value } : it
                           )
                         )
                       }
@@ -759,7 +760,7 @@ export function BaseProviderForm({
                         updateField(
                           'apiKeyEntries',
                           apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, headersText: e.target.value } : it
+                            i === realIdx ? { ...it, headersText: e.target.value } : it
                           )
                         )
                       }