Fix SSE route dependency and align architecture docs

frontend/src/pages/Status/StatusPage.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { useTheme } from '../../contexts/ThemeContext';
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../../contexts';
 import { Content } from '../../components/layout/Content';
 import { TPattern } from '../../components/common/TPattern';
 import { getSystemStats, getSystemConfig, type SystemStats, type SystemConfig } from '../../api/status';
@@ -38,17 +38,16 @@ const StatsCard = ({ label, value, accent = false }: {
 
 export const StatusPage: React.FC = () => {
   const { theme, isDark } = useTheme();
-  const [stats, setStats] = useState<SystemStats>({ docs: 0, chunks: 0, vectors: 0, segments: 0 });
+  const [stats, setStats] = useState<SystemStats>({
+    documents_total: 0,
+    documents_indexed: 0,
+    documents_failed: 0,
+    chunks_total: 0,
+  });
   const [config, setConfig] = useState<SystemConfig | null>(null);
   const [docs, setDocs] = useState<DocInfo[]>([]);
-  const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    loadData();
-  }, []);
-
-  const loadData = async () => {
-    setLoading(true);
+  async function loadData() {
     try {
       const [statsRes, configRes, docsRes] = await Promise.all([
         getSystemStats(),
@@ -61,30 +60,31 @@ export const StatusPage: React.FC = () => {
     } catch (error) {
       console.error('Failed to load status data:', error);
     }
-    setLoading(false);
-  };
+  }
 
-  // 计算总chunks
-  const totalChunks = docs.reduce((sum, d) => sum + d.chunks, 0);
+  useEffect(() => {
+    const timerId = window.setTimeout(() => {
+      void loadData();
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, []);
 
   return (
     <Content>
       <TPattern />
-      {/* System Stats */}
       <section style={{ marginBottom: 48 }}>
         <div style={{
           display: 'grid',
           gridTemplateColumns: 'repeat(4, 1fr)',
           gap: 16,
         }}>
-          <StatsCard label="DOCUMENTS" value={stats.docs} />
-          <StatsCard label="CHUNKS" value={stats.chunks} />
-          <StatsCard label="DIMENSIONS" value={config?.embedding.dimension || 1536} />
-          <StatsCard label="CLAUSES" value={stats.vectors} accent />
+          <StatsCard label="DOCUMENTS" value={stats.documents_total} />
+          <StatsCard label="INDEXED" value={stats.documents_indexed} />
+          <StatsCard label="FAILED" value={stats.documents_failed} />
+          <StatsCard label="CHUNKS" value={stats.chunks_total} accent />
         </div>
       </section>
 
-      {/* Configuration */}
       <section style={{ marginBottom: 48 }}>
         <h2 style={{
           fontSize: 14,
@@ -94,49 +94,18 @@ export const StatusPage: React.FC = () => {
           letterSpacing: '1px',
         }}>SYSTEM CONFIGURATION</h2>
 
-        {/* ChromaDB Config */}
         <div style={{ marginBottom: 20 }}>
-          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>VECTOR DATABASE</div>
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr 1fr',
-            gap: 12,
-          }}>
-            {[
-              ['Vector DB', 'Milvus'],
-              ['Host', config?.milvus.host || 'localhost'],
-              ['Port', String(config?.milvus.port || 19530)],
-            ].map(([k, v]) => (
-              <div key={k} style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                padding: 16,
-                background: theme.bgCard,
-                borderRadius: 10,
-                border: `1px solid ${theme.border}`,
-                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
-              }}>
-                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
-                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* LLM Config */}
-        <div style={{ marginBottom: 20 }}>
-          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>LLM CONFIGURATION</div>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>MODELS</div>
           <div style={{
             display: 'grid',
             gridTemplateColumns: '1fr 1fr',
             gap: 12,
           }}>
             {[
-              ['LLM Model', config?.llm.model || 'qwen-max'],
-              ['Embedding Model', config?.embedding.model || 'text-embedding-v3'],
-              ['Embedding Dim', String(config?.embedding.dimension || 1536)],
-              ['Temperature', '0.1'],
+              ['LLM Provider', config?.llm_provider || '-'],
+              ['LLM Model', config?.llm_model || '-'],
+              ['Embedding Model', config?.embedding_model || '-'],
+              ['Embedding Dim', String(config?.embedding_dim || 0)],
             ].map(([k, v]) => (
               <div key={k} style={{
                 display: 'flex',
@@ -155,47 +124,17 @@ export const StatusPage: React.FC = () => {
           </div>
         </div>
 
-        {/* Retrieval Config */}
         <div style={{ marginBottom: 20 }}>
-          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>RETRIEVAL CONFIGURATION (HYBRID)</div>
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr 1fr',
-            gap: 12,
-          }}>
-            {[
-              ['Vector Top-K', String(config?.retrieval.vector_top_k || 10)],
-              ['BM25 Top-K', '10'],
-              ['Final Top-K', String(config?.retrieval.final_top_k || 5)],
-            ].map(([k, v]) => (
-              <div key={k} style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                padding: 16,
-                background: theme.bgCard,
-                borderRadius: 10,
-                border: `1px solid ${theme.border}`,
-                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
-              }}>
-                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
-                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Chunk Config */}
-        <div>
-          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>CHUNK CONFIGURATION</div>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>STORAGE AND PATHS</div>
           <div style={{
             display: 'grid',
             gridTemplateColumns: '1fr 1fr',
             gap: 12,
           }}>
             {[
-              ['Chunk Size', '800'],
-              ['Chunk Overlap', '100'],
+              ['Milvus Collection', config?.milvus_collection || '-'],
+              ['Metadata Path', config?.document_metadata_path || '-'],
+              ['Embedding Base URL', config?.embedding_base_url || '-'],
             ].map(([k, v]) => (
               <div key={k} style={{
                 display: 'flex',
@@ -215,7 +154,6 @@ export const StatusPage: React.FC = () => {
         </div>
       </section>
 
-      {/* Indexed Docs Overview */}
       <section>
         <h2 style={{
           fontSize: 14,
@@ -237,16 +175,20 @@ export const StatusPage: React.FC = () => {
           }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
               <span style={{ fontSize: 14 }}>{d.name}</span>
-              <span className="mono" style={{ fontSize: 11, color: theme.text3 }}>{(d.chunks * 8 / 1024).toFixed(1)}MB</span>
+              <span className="mono" style={{ fontSize: 11, color: theme.text3 }}>
+                {d.updated_at ? new Date(d.updated_at).toLocaleString() : d.status}
+              </span>
             </div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
               <span className="mono" style={{ fontSize: 12, color: theme.text2 }}>{d.chunks} chunks</span>
               <div style={{
                 padding: '4px 12px',
-                background: theme.green,
+                background: d.status === 'failed' ? '#d64545' : theme.green,
                 borderRadius: 6,
               }}>
-                <span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>INDEXED</span>
+                <span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>
+                  {d.status.toUpperCase()}
+                </span>
               </div>
             </div>
           </div>
@@ -254,4 +196,4 @@ export const StatusPage: React.FC = () => {
       </section>
     </Content>
   );
-};
+};