feat(web): show IwoooS security contracts in AwoooP

apps/web/src/app/[locale]/awooop/contracts/page.tsx

@@ -6,12 +6,16 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/routing";
 import {
+  ArrowRight,
   FileText,
   RefreshCw,
   AlertCircle,
   Filter,
   ChevronDown,
+  ShieldCheck,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -136,6 +140,112 @@ function ContractRow({ contract }: { contract: Contract }) {
   );
 }
 
+function SecurityContractCandidatePanel() {
+  const t = useTranslations("awooop.contracts.securityContractCandidate");
+  const metrics = [
+    {
+      label: t("metrics.totalContracts"),
+      value: "36",
+      detail: t("metrics.totalContractsDetail"),
+    },
+    {
+      label: t("metrics.readyForMirror"),
+      value: "33",
+      detail: t("metrics.readyForMirrorDetail"),
+    },
+    {
+      label: t("metrics.partialReady"),
+      value: "2",
+      detail: t("metrics.partialReadyDetail"),
+    },
+    {
+      label: t("metrics.activeRuntimeGates"),
+      value: "0",
+      detail: t("metrics.activeRuntimeGatesDetail"),
+    },
+  ];
+  const contracts = [
+    {
+      name: "security_mirror_status_rollup_v1",
+      detail: t("contractRefs.statusRollup"),
+    },
+    {
+      name: "iwooos_posture_projection_v1",
+      detail: t("contractRefs.postureProjection"),
+    },
+    {
+      name: "source_control_owner_response_validation_rollup_v1",
+      detail: t("contractRefs.ownerValidation"),
+    },
+    {
+      name: "security_rollout_policy_v1",
+      detail: t("contractRefs.rolloutPolicy"),
+    },
+  ];
+
+  return (
+    <section className="overflow-hidden border border-[#e0ddd4] bg-white">
+      <div className="flex flex-wrap items-start justify-between gap-3 border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
+        <div className="flex items-start gap-2">
+          <ShieldCheck className="mt-0.5 h-4 w-4 text-[#d97757]" aria-hidden="true" />
+          <div>
+            <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
+            <p className="mt-1 max-w-3xl text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
+          </div>
+        </div>
+        <span className="inline-flex border border-[#9bb6d9] bg-[#eef5ff] px-2 py-0.5 text-xs font-semibold text-[#1f5b9b]">
+          {t("badge")}
+        </span>
+      </div>
+
+      <div className="grid gap-px bg-[#e0ddd4] md:grid-cols-2 xl:grid-cols-4">
+        {metrics.map((item) => (
+          <div key={item.label} className="bg-white px-4 py-3">
+            <p className="text-xs font-semibold text-[#77736a]">{item.label}</p>
+            <p className="mt-2 font-mono text-2xl font-semibold text-[#141413]">{item.value}</p>
+            <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid min-w-0 gap-4 p-4 xl:grid-cols-[1.1fr_0.9fr]">
+        <div className="min-w-0 border border-[#e0ddd4] bg-white">
+          <div className="border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3 text-xs font-semibold text-[#141413]">
+            {t("contractRefsTitle")}
+          </div>
+          <div className="divide-y divide-[#eee9dd]">
+            {contracts.map((item) => (
+              <div key={item.name} className="px-4 py-3">
+                <p className="break-all font-mono text-xs font-semibold text-[#141413]">{item.name}</p>
+                <p className="mt-1 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="min-w-0 border border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
+          <p className="text-xs font-semibold text-[#77736a]">{t("boundaryLabel")}</p>
+          <p className="mt-2 text-sm font-semibold text-[#141413]">{t("boundaryTitle")}</p>
+          <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{t("boundaryDetail")}</p>
+          <div className="mt-4 grid gap-2 font-mono text-xs text-[#141413]">
+            <span>contract_publish_authorized=false</span>
+            <span>contract_mutation_authorized=false</span>
+            <span>runtime_execution_authorized=false</span>
+            <span>action_buttons_allowed=false</span>
+          </div>
+          <Link
+            href="/iwooos"
+            className="mt-4 inline-flex items-center gap-2 border border-[#d8d3c7] bg-white px-3 py-1.5 text-xs font-semibold text-[#141413] hover:border-[#d97757]"
+          >
+            {t("openIwooos")}
+            <ArrowRight className="h-3.5 w-3.5 text-[#77736a]" aria-hidden="true" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 // =============================================================================
 // Main Component
 // =============================================================================
@@ -206,6 +316,8 @@ export default function ContractsPage() {
         </button>
       </div>
 
+      <SecurityContractCandidatePanel />
+
       {/* Filters */}
       <div className="flex items-center gap-3 border border-[#e0ddd4] bg-white p-4">
         <Filter className="w-4 h-4 text-muted-foreground flex-shrink-0" aria-hidden="true" />