feat: improve app ui and project metadata

apps/web/components/chain/ChainAdjudication.tsx

@@ -143,6 +143,7 @@ export function ChainAdjudication({
               <ConflictCard
                 key={i}
                 index={i}
+                total={conflicts.length}
                 conflict={conflict}
                 draft={draft}
                 missing={false}

apps/web/components/chain/ChainStarter.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { useState } from "react";
+import { Play } from "lucide-react";
 
+import { Button } from "@/components/ui/Button";
+import { Field } from "@/components/ui/Field";
+import { SectionHeader } from "@/components/ui/SectionHeader";
+import { TextInput } from "@/components/ui/TextInput";
 import { CHAIN_KINDS, type ChainKind } from "@/lib/chain/chain";
 
 interface ChainStarterProps {
@@ -41,12 +46,10 @@ export function ChainStarter({ onStart, disabled }: ChainStarterProps) {
         if (valid && !disabled) onStart(chainKey, startNo, countNo);
       }}
     >
-      <div>
-        <h2 className="font-serif text-lg text-ink">连续写多章</h2>
-        <p className="mt-1 text-sm text-ink-soft">
-          从指定章起循环「写章 → 四审 → 验收」；遇未决冲突会暂停等你裁决再续跑。
-        </p>
-      </div>
+      <SectionHeader
+        title="连续写多章"
+        description="从指定章起循环「写章 → 四审 → 验收」；遇未决冲突会暂停等你裁决再续跑。"
+      />
       <fieldset className="flex flex-col gap-2">
         <legend className="text-sm text-ink-soft">链类型</legend>
         <div className="flex flex-wrap gap-4">
@@ -75,37 +78,35 @@ export function ChainStarter({ onStart, disabled }: ChainStarterProps) {
         </div>
       </fieldset>
       <div className="flex flex-wrap gap-4">
-        <label className="block text-sm text-ink-soft">
-          起始章号
-          <input
+        <Field label="起始章号" className="w-32">
+          <TextInput
             type="number"
             min={1}
             value={start}
             onChange={(e) => setStart(e.target.value)}
-            className="mt-1 w-32 rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
             aria-label="起始章号"
           />
-        </label>
-        <label className="block text-sm text-ink-soft">
-          连续章数（1..{MAX_COUNT}）
-          <input
+        </Field>
+        <Field label={`连续章数（1..${MAX_COUNT}）`} className="w-40">
+          <TextInput
             type="number"
             min={1}
             max={MAX_COUNT}
             value={count}
             onChange={(e) => setCount(e.target.value)}
-            className="mt-1 w-32 rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
             aria-label="连续章数"
           />
-        </label>
+        </Field>
       </div>
-      <button
+      <Button
         type="submit"
         disabled={disabled || !valid}
-        className="self-start rounded bg-cinnabar px-4 py-2 text-sm text-white disabled:opacity-50"
+        variant="primary"
+        className="self-start"
       >
+        <Play className="h-4 w-4" aria-hidden="true" />
         {disabled ? "运行中…" : "发起多章链"}
-      </button>
+      </Button>
     </form>
   );
 }