Add Resos connection status card to Settings — read-only, sourced from central Settings

Replaces the removed API key form with a status card showing whether the
Resos key is configured in the central Settings app, plus a Test Connection
button. Adds back the GET /settings/resos and POST /settings/resos/test
endpoints (now reading from central_settings rather than system_config).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/api/config.py

@@ -137,6 +137,25 @@ async def test_newbook_settings(
     return await _test_newbook(db)
 
 
+# ============================================
+# RESOS SETTINGS ENDPOINTS
+# ============================================
+
+@router.get("/settings/resos")
+async def get_resos_settings(current_user: dict = Depends(get_current_user)):
+    """Check whether a Resos API key is configured in the central Settings service"""
+    from services.central_settings import get_resos_credentials
+    creds = await get_resos_credentials()
+    return {"configured": bool(creds and creds.get("api_key"))}
+
+
+@router.post("/settings/resos/test")
+async def test_resos_settings(
+    db: AsyncSession = Depends(get_db),
+    current_user: dict = Depends(get_current_user)
+):
+    """Test Resos connection using credentials from the central Settings service"""
+    return await _test_resos(db)
 
 
 # ============================================

frontend/src/pages/Settings.tsx

@@ -2151,7 +2151,11 @@ const ResosPage: React.FC = () => {
   return (
     <div style={styles.section}>
       <h2 style={styles.sectionTitle}>Resos Settings</h2>
-      <p style={styles.hint}>Configure Resos sync settings for restaurant reservation management. The Resos API key is managed centrally in the <strong>Settings</strong> app.</p>
+      <p style={styles.hint}>Configure Resos sync settings for restaurant reservation management.</p>
+
+      <ResosConnectionStatus />
+
+      <div style={styles.divider} />
 
       <ResosCustomFieldMappingSection />
 
@@ -2174,6 +2178,83 @@ const ResosPage: React.FC = () => {
   )
 }
 
+// ============================================
+// RESOS CONNECTION STATUS SECTION
+// ============================================
+
+const ResosConnectionStatus: React.FC = () => {
+  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
+  const [testMessage, setTestMessage] = useState('')
+
+  const { data } = useQuery({
+    queryKey: ['resos-status'],
+    queryFn: async () => {
+      const response = await fetch('/forecasting/api/config/settings/resos')
+      if (!response.ok) throw new Error('Failed to fetch')
+      return response.json() as Promise<{ configured: boolean }>
+    },
+    staleTime: 60000,
+  })
+
+  const handleTest = async () => {
+    setTestStatus('testing')
+    setTestMessage('')
+    try {
+      const response = await fetch('/forecasting/api/config/settings/resos/test', { method: 'POST' })
+      const result = await response.json()
+      if (response.ok) {
+        setTestStatus('success')
+        setTestMessage(result.message || 'Connected successfully')
+      } else {
+        setTestStatus('error')
+        setTestMessage(result.detail || 'Connection failed')
+      }
+    } catch {
+      setTestStatus('error')
+      setTestMessage('Connection failed')
+    }
+    setTimeout(() => { setTestStatus('idle'); setTestMessage('') }, 5000)
+  }
+
+  return (
+    <div style={styles.apiConfigRow}>
+      <div style={styles.apiConfigLeft}>
+        <h3 style={styles.subsectionTitle}>API Connection</h3>
+        <p style={styles.hint}>Resos API credentials are managed in the central <strong>Settings</strong> app.</p>
+        <div style={styles.buttonRow}>
+          <button
+            onClick={handleTest}
+            disabled={testStatus === 'testing' || !data?.configured}
+            style={buttonStyle('outline')}
+          >
+            {testStatus === 'testing' ? 'Testing...' : 'Test Connection'}
+          </button>
+        </div>
+        {testMessage && (
+          <div style={{
+            ...styles.statusMessage,
+            background: testStatus === 'success' ? colors.successBg : colors.errorBg,
+            color: testStatus === 'success' ? colors.success : colors.error,
+          }}>
+            {testMessage}
+          </div>
+        )}
+      </div>
+      <div style={styles.apiConfigRight}>
+        <h3 style={styles.subsectionTitle}>Connection Status</h3>
+        <div style={styles.statusGridVertical}>
+          <div style={styles.statusItem}>
+            <span style={styles.statusLabel}>API Key</span>
+            <span style={data?.configured ? styles.statusOk : styles.statusPending}>
+              {data?.configured ? 'Configured' : 'Not set'}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // ============================================
 // RESOS CUSTOM FIELD MAPPING SECTION
 // ============================================