Expose evaluation agents in the web console

frontend/src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import {
   Activity,
   BarChart3,
+  Bot,
   Boxes,
   ClipboardCheck,
   Cpu,
@@ -231,6 +232,26 @@ type CapabilityPayload = {
   domains: CapabilityDomain[];
 };
 
+type AgentCheck = {
+  name: string;
+  passed: boolean;
+  detail?: unknown;
+  details?: unknown;
+};
+
+type EvaluationAgentPayload = {
+  agent: string;
+  score: number;
+  checks: AgentCheck[];
+  suggestions: string[];
+};
+
+type ValidationAgentPayload = {
+  agent: string;
+  passed: boolean;
+  checks: AgentCheck[];
+};
+
 async function api<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${API_BASE}${path}`, {
     headers: { "Content-Type": "application/json" },
@@ -305,11 +326,12 @@ function useData() {
   const [deepAcceptance, setDeepAcceptance] = useState<DeepAcceptancePayload | null>(null);
   const [runtimeReadiness, setRuntimeReadiness] = useState<RuntimeReadinessPayload | null>(null);
   const [capabilities, setCapabilities] = useState<CapabilityPayload | null>(null);
+  const [agentEvaluation, setAgentEvaluation] = useState<EvaluationAgentPayload | null>(null);
   const [error, setError] = useState<string>("");
 
   async function refresh() {
     try {
-      const [catalogNext, gpusNext, readinessNext, capabilitiesNext, jobsNext, resultsNext, curvesNext, datasetsNext, coverageNext, acceptanceNext, deepAcceptanceNext] = await Promise.all([
+      const [catalogNext, gpusNext, readinessNext, capabilitiesNext, jobsNext, resultsNext, curvesNext, datasetsNext, coverageNext, acceptanceNext, deepAcceptanceNext, agentEvaluationNext] = await Promise.all([
         api<Catalog>("/api/catalog"),
         api<GpuPayload>("/api/system/gpus"),
         api<RuntimeReadinessPayload>("/api/system/readiness"),
@@ -320,7 +342,8 @@ function useData() {
         api<UploadedDataset[]>("/api/datasets"),
         api<CoveragePayload>("/api/coverage"),
         api<AcceptancePayload>("/api/acceptance/latest"),
-        api<DeepAcceptancePayload>("/api/acceptance/deep/latest")
+        api<DeepAcceptancePayload>("/api/acceptance/deep/latest"),
+        api<EvaluationAgentPayload>("/api/agents/evaluate")
       ]);
       setCatalog(catalogNext);
       setGpus(gpusNext);
@@ -345,6 +368,7 @@ function useData() {
       setCoverage(coverageNext);
       setAcceptance(acceptanceNext);
       setDeepAcceptance(deepAcceptanceNext);
+      setAgentEvaluation(agentEvaluationNext);
       setError("");
     } catch (err) {
       setError(String(err));
@@ -357,7 +381,7 @@ function useData() {
     return () => window.clearInterval(timer);
   }, []);
 
-  return { catalog, gpus, runtimeReadiness, capabilities, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh };
+  return { catalog, gpus, runtimeReadiness, capabilities, agentEvaluation, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh };
 }
 
 function StatusPill({ status }: { status: string }) {
@@ -380,7 +404,7 @@ function JobProgressBar({ progress }: { progress?: JobProgress }) {
 }
 
 function App() {
-  const { catalog, gpus, runtimeReadiness, capabilities, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh } = useData();
+  const { catalog, gpus, runtimeReadiness, capabilities, agentEvaluation, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh } = useData();
   const [taskType, setTaskType] = useState("mock.echo");
   const [params, setParams] = useState(JSON.stringify(defaultParams["mock.echo"], null, 2));
   const [selectedJob, setSelectedJob] = useState<Job | null>(null);
@@ -392,6 +416,8 @@ function App() {
   const [selectedCurvePath, setSelectedCurvePath] = useState("");
   const [uploadKind, setUploadKind] = useState<"images" | "labels" | "masks">("images");
   const [uploadFiles, setUploadFiles] = useState<FileList | null>(null);
+  const [agentValidation, setAgentValidation] = useState<ValidationAgentPayload | null>(null);
+  const [agentBusy, setAgentBusy] = useState(false);
 
   const runningCount = jobs.filter((job) => job.status === "running").length;
   const successCount = jobs.filter((job) => job.status === "success").length;
@@ -491,6 +517,16 @@ function App() {
     }
   }
 
+  async function runAgentValidation() {
+    setAgentBusy(true);
+    try {
+      const result = await api<ValidationAgentPayload>("/api/agents/validate?run_build=false&run_acceptance=false&run_deep=false");
+      setAgentValidation(result);
+    } finally {
+      setAgentBusy(false);
+    }
+  }
+
   async function createDataset() {
     setBusy(true);
     try {
@@ -575,6 +611,7 @@ function App() {
           <a href="#gpu"><Cpu size={18} />GPU</a>
           <a href="#runtime"><ShieldCheck size={18} />环境</a>
           <a href="#coverage"><ClipboardCheck size={18} />覆盖</a>
+          <a href="#agents"><Bot size={18} />Agent</a>
           <a href="#weights"><HardDrive size={18} />权重</a>
           <a href="#results"><BarChart3 size={18} />结果</a>
         </nav>
@@ -892,6 +929,45 @@ function App() {
           </div>
         </section>
 
+        <section className="grid two" id="agents">
+          <div className="panel agentPanel">
+            <div className="panelHead">
+              <div>
+                <p className="eyebrow">Evaluation Agent</p>
+                <h2>评价建议</h2>
+              </div>
+              <StatusPill status={(agentEvaluation?.score ?? 0) >= 1 ? "success" : "queued"} />
+            </div>
+            <div className="agentScore">
+              <strong>{Math.round((agentEvaluation?.score ?? 0) * 100)}%</strong>
+              <span>{agentEvaluation?.checks.filter((item) => item.passed).length ?? 0}/{agentEvaluation?.checks.length ?? 0} checks passed</span>
+            </div>
+            <div className="suggestionList">
+              {(agentEvaluation?.suggestions ?? ["等待评价 agent 返回建议。"]).slice(0, 6).map((item, index) => (
+                <div key={`${index}-${item}`}>{item}</div>
+              ))}
+            </div>
+            <AgentCheckList checks={agentEvaluation?.checks ?? []} limit={14} />
+          </div>
+
+          <div className="panel agentPanel">
+            <div className="panelHead">
+              <div>
+                <p className="eyebrow">Validation Agent</p>
+                <h2>运行验证</h2>
+              </div>
+              <button className="primary" disabled={agentBusy} onClick={runAgentValidation}>
+                <ClipboardCheck size={17} />验证
+              </button>
+            </div>
+            <div className="agentScore">
+              <strong>{agentValidation ? (agentValidation.passed ? "OK" : "Check") : "Ready"}</strong>
+              <span>{agentValidation ? `${agentValidation.checks.filter((item) => item.passed).length}/${agentValidation.checks.length} checks passed` : "轻量验证不会触发深度训练"}</span>
+            </div>
+            <AgentCheckList checks={agentValidation?.checks ?? []} limit={18} />
+          </div>
+        </section>
+
         <section className="grid four">
           <div className="panel" id="gpu">
             <div className="panelHead">
@@ -1047,6 +1123,22 @@ function App() {
   );
 }
 
+function AgentCheckList({ checks, limit }: { checks: AgentCheck[]; limit: number }) {
+  if (!checks.length) {
+    return <p className="muted">尚未运行验证。</p>;
+  }
+  return (
+    <div className="agentCheckList">
+      {checks.slice(0, limit).map((check) => (
+        <div key={check.name} className={check.passed ? "ok" : "bad"} title={check.name}>
+          <span>{check.name}</span>
+          <small>{check.passed ? "passed" : "needs attention"}</small>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function ResultPreview({ results }: { results: ResultItem[] }) {
   if (!results.length) {
     return <p className="muted">暂无结果</p>;