fix: prevent Gitea token corruption from masked config values, add real connection test

web/frontend/src/views/Sync.vue

@@ -10,16 +10,24 @@
       <!-- Enabled state -->
       <div v-if="syncStatus.enabled" class="sync-enabled">
         <!-- Connection info -->
-        <div class="connection-card">
+        <div class="connection-card" :class="{ 'connection-error': !syncStatus.connected }">
           <div class="connection-icon">
-            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="1.5">
+            <svg v-if="syncStatus.connected" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="1.5">
               <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
               <polyline points="22 4 12 14.01 9 11.01"/>
             </svg>
+            <svg v-else width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="1.5">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="15" y1="9" x2="9" y2="15"/>
+              <line x1="9" y1="9" x2="15" y2="15"/>
+            </svg>
           </div>
           <div class="connection-info">
-            <span class="connection-status">已连接</span>
+            <span class="connection-status" :class="{ 'status-error': !syncStatus.connected }">
+              {{ syncStatus.connected ? '已连接' : '连接失败' }}
+            </span>
             <span class="connection-url">{{ syncStatus.repo_url }}</span>
+            <span v-if="syncStatus.error" class="connection-error-msg">{{ syncStatus.error }}</span>
           </div>
         </div>
 
@@ -96,7 +104,7 @@ import api from '../api'
 const processingStore = useProcessingStore()
 
 const syncing = ref(false)
-const syncStatus = ref({ enabled: false, repo_url: '' })
+const syncStatus = ref({ enabled: false, connected: false, repo_url: '', error: '' })
 
 const currentTask = computed(() => {
   if (processingStore.taskSource === 'sync') return processingStore.currentTask
@@ -214,6 +222,10 @@ onMounted(checkStatus)
   color: var(--success);
 }
 
+.connection-status.status-error {
+  color: var(--danger);
+}
+
 .connection-url {
   display: block;
   font-size: 13px;
@@ -222,6 +234,18 @@ onMounted(checkStatus)
   margin-top: 2px;
 }
 
+.connection-error {
+  background: rgba(239,68,68,0.05);
+  border-color: rgba(239,68,68,0.15);
+}
+
+.connection-error-msg {
+  display: block;
+  font-size: 12px;
+  color: var(--danger);
+  margin-top: 4px;
+}
+
 /* ── Sync actions ── */
 .sync-actions {
   display: grid;