feat(frontend): add report summary view

Author: tranhoangpich

apps/frontend/src/app/globals.css

@@ -335,6 +335,66 @@ body {
   box-shadow: var(--ios-shadow);
 }
 
+.report-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.report-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 16px;
+  padding: 12px;
+  border: 1px solid var(--ios-outline);
+}
+
+.summary-label {
+  font-size: 11px;
+  color: rgba(11, 11, 22, 0.55);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.summary-value {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.finding-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.finding-list li {
+  display: grid;
+  gap: 4px;
+  padding: 10px;
+  border-radius: 12px;
+  background: rgba(140, 82, 255, 0.08);
+}
+
+.finding-list li span {
+  font-size: 12px;
+  color: rgba(11, 11, 22, 0.65);
+}
+
+.finding-empty {
+  text-align: center;
+  font-size: 12px;
+  color: rgba(11, 11, 22, 0.6);
+}
+
+.report-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
 .result-card pre {
   margin: 0;
   max-height: 220px;

apps/frontend/src/app/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 
 export default function Home() {
   const fileRef = useRef<HTMLInputElement>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [status, setStatus] = useState<string | null>(null);
-  const [result, setResult] = useState<string | null>(null);
+  const [result, setResult] = useState<Record<string, unknown> | null>(null);
+  const [rawResult, setRawResult] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState(false);
 
   const handleChooseFile = () => {
@@ -18,6 +19,7 @@ export default function Home() {
     setSelectedFile(file);
     setStatus(file ? `Selected ${file.name}` : "No file selected");
     setResult(null);
+    setRawResult(null);
   };
 
   const handleUpload = async () => {
@@ -55,24 +57,53 @@ export default function Home() {
             ? String((payload as { error?: string }).error)
             : `Scan failed (${response.status})`;
         setStatus(message);
-        setResult(rawText || null);
+        setResult(null);
+        setRawResult(rawText || null);
         return;
       }
 
       setStatus("Scan complete");
       if (payload && typeof payload === "object") {
-        setResult(JSON.stringify(payload, null, 2));
+        setResult(payload as Record<string, unknown>);
+        setRawResult(JSON.stringify(payload, null, 2));
       } else {
-        setResult(rawText || null);
+        setResult(null);
+        setRawResult(rawText || null);
       }
     } catch (error) {
       setStatus("Failed to reach backend. Is it running on :7070?");
       setResult(null);
+      setRawResult(null);
     } finally {
       setIsUploading(false);
     }
   };
 
+  const summary = useMemo(() => {
+    const report = result?.report as
+      | { results?: Array<Record<string, unknown>>; total_duration_ms?: number }
+      | undefined;
+    const results = report?.results ?? [];
+    const failures = results.filter((item) => {
+      const status = item.status as string | undefined;
+      return status === "Fail" || status === "Error";
+    });
+    const errorCount = failures.filter((item) => item.severity === "Error").length;
+    const warningCount = failures.filter((item) => item.severity === "Warning").length;
+    const duration =
+      typeof report?.total_duration_ms === "number"
+        ? `${report.total_duration_ms}ms`
+        : null;
+
+    return {
+      results,
+      failures,
+      errorCount,
+      warningCount,
+      duration,
+    };
+  }, [result]);
+
   return (
     <div className="page">
       <div className="page-glow page-glow--left" />
@@ -177,10 +208,81 @@ export default function Home() {
             </div>
             {status ? <div className="status-pill">{status}</div> : null}
             {result ? (
-              <details className="result-card" open>
-                <summary className="result-header">Latest report</summary>
-                <pre>{result}</pre>
-              </details>
+              <div className="report-stack">
+                <div className="report-summary">
+                  <div>
+                    <div className="summary-label">Errors</div>
+                    <div className="summary-value">{summary.errorCount}</div>
+                  </div>
+                  <div>
+                    <div className="summary-label">Warnings</div>
+                    <div className="summary-value">{summary.warningCount}</div>
+                  </div>
+                  <div>
+                    <div className="summary-label">Findings</div>
+                    <div className="summary-value">{summary.failures.length}</div>
+                  </div>
+                  <div>
+                    <div className="summary-label">Duration</div>
+                    <div className="summary-value">{summary.duration ?? "—"}</div>
+                  </div>
+                </div>
+
+                <div className="result-card">
+                  <div className="result-header">Top findings</div>
+                  <ul className="finding-list">
+                    {summary.failures.slice(0, 5).map((item, index) => (
+                      <li key={`${item.rule_id ?? "rule"}-${index}`}>
+                        <strong>{String(item.rule_name ?? "Untitled rule")}</strong>
+                        <span>{String(item.recommendation ?? "Review this rule")}</span>
+                      </li>
+                    ))}
+                    {summary.failures.length === 0 ? (
+                      <li className="finding-empty">No failing rules detected.</li>
+                    ) : null}
+                  </ul>
+                </div>
+
+                <div className="result-card">
+                  <div className="result-header">Report actions</div>
+                  <div className="report-actions">
+                    <button
+                      className="secondary-button"
+                      type="button"
+                      onClick={() => {
+                        if (!rawResult) return;
+                        const blob = new Blob([rawResult], { type: "application/json" });
+                        const url = URL.createObjectURL(blob);
+                        const link = document.createElement("a");
+                        link.href = url;
+                        link.download = "verifyos-report.json";
+                        link.click();
+                        URL.revokeObjectURL(url);
+                      }}
+                    >
+                      Download JSON
+                    </button>
+                    <button
+                      className="ghost-button"
+                      type="button"
+                      onClick={() => {
+                        if (!rawResult) return;
+                        void navigator.clipboard?.writeText(rawResult);
+                        setStatus("Report copied to clipboard");
+                      }}
+                    >
+                      Copy JSON
+                    </button>
+                  </div>
+                </div>
+
+                {rawResult ? (
+                  <details className="result-card">
+                    <summary className="result-header">Raw report</summary>
+                    <pre>{rawResult}</pre>
+                  </details>
+                ) : null}
+              </div>
             ) : null}
             <div className="card-footer">
               <div>