fix: add distinct error state for AI Models card load failure (Task 9 review)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/pages/Status/StatusPage.tsx

@@ -83,6 +83,7 @@ export function StatusPage() {
   const [config, setConfig] = useState<Config | null>(null);
   const [loading, setLoading] = useState(true);
   const [healthLoading, setHealthLoading] = useState(true);
+  const [modelsLoading, setModelsLoading] = useState(true);
   const [configOpen, setConfigOpen] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   const [showUpload, setShowUpload] = useState(false);
@@ -93,6 +94,7 @@ export function StatusPage() {
   useEffect(() => {
     setLoading(true);
     setHealthLoading(true);
+    setModelsLoading(true);
 
     // Fetch all endpoints in parallel. The first three use raw fetch() (legacy
     // pattern already established in this file); model usage uses the typed
@@ -113,6 +115,7 @@ export function StatusPage() {
 
       setLoading(false);
       setHealthLoading(false);
+      setModelsLoading(false);
       setLastRefresh(new Date());
     });
   }, [refreshKey]);
@@ -304,13 +307,13 @@ export function StatusPage() {
                 </button>
               </div>
 
-              {!modelUsage ? (
+              {modelsLoading ? (
                 <div style={{ padding: '12px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                   {[1, 2, 3, 4].map(i => (
                     <div key={i} className="loading-shimmer" style={{ height: 28, borderRadius: 6 }} />
                   ))}
                 </div>
-              ) : (
+              ) : modelUsage ? (
                 modelUsage.map(entry => {
                   const roleLabel = entry.role === 'main_llm' ? t.status.roleMainLlm
                     : entry.role === 'hyde_llm' ? t.status.roleHydeLlm
@@ -336,6 +339,8 @@ export function StatusPage() {
                     </div>
                   );
                 })
+              ) : (
+                <div style={{ padding: '12px 0', color: 'var(--muted)', fontSize: 13 }}>{t.status.configLoadError}</div>
               )}
             </div>