feat: improve app ui and project metadata

apps/web/components/review/PacePanel.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { AlertTriangle, CheckCircle2, CircleDashed } from "lucide-react";
+
+import { Badge } from "@/components/ui/Badge";
 import type { PaceReport } from "@/lib/review/sse";
 import { BeatMap } from "./BeatMap";
 
@@ -16,7 +19,10 @@ export function PacePanel({ pace, incomplete }: PacePanelProps) {
         节奏 (pace-checker)
       </h2>
       {incomplete ? (
-        <p className="mt-1 text-xs text-overdue">◌ 未完成</p>
+        <Badge variant="warning" className="mt-1">
+          <CircleDashed className="h-3 w-3" aria-hidden="true" />
+          未完成
+        </Badge>
       ) : pace === null ? (
         <p className="mt-1 text-xs text-ink-soft">无节奏报告。</p>
       ) : (
@@ -29,15 +35,24 @@ export function PacePanel({ pace, incomplete }: PacePanelProps) {
           <p>
             章末钩子：
             {pace.hook ? (
-              <span className="text-pass">✓ 有</span>
+              <Badge variant="success">
+                <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
+                有
+              </Badge>
             ) : (
-              <span className="text-overdue">⚠ 无（建议补悬念）</span>
+              <Badge variant="warning">
+                <AlertTriangle className="h-3 w-3" aria-hidden="true" />
+                无（建议补悬念）
+              </Badge>
             )}
           </p>
 
           {pace.water.length > 0 ? (
             <div>
-              <p className="text-overdue">⚠ 注水段</p>
+              <Badge variant="warning">
+                <AlertTriangle className="h-3 w-3" aria-hidden="true" />
+                注水段
+              </Badge>
               <ul className="mt-1 space-y-1">
                 {pace.water.map((w, i) => (
                   <li key={i} className="text-ink-soft">
@@ -47,7 +62,10 @@ export function PacePanel({ pace, incomplete }: PacePanelProps) {
               </ul>
             </div>
           ) : (
-            <p className="text-pass">✓ 无明显注水</p>
+            <Badge variant="success">
+              <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
+              无明显注水
+            </Badge>
           )}
         </div>
       )}