feat(iwooos): codify full security framework

apps/web/src/components/iwooos/security-asset-control-plane-cockpit.tsx

@@ -34,6 +34,7 @@ type Copy = {
   aiLoop: string;
   verified: string;
   functions: string;
+  framework: string;
   siemFlow: string;
   aiFlow: string;
   scope: string;
@@ -57,6 +58,7 @@ const COPY: Record<"zh" | "en", Copy> = {
     aiLoop: "AI 閉環",
     verified: "24h 已驗證",
     functions: "治理六功能",
+    framework: "完整資安框架",
     siemFlow: "SIEM 八段",
     aiFlow: "AI Agent 七段",
     scope: "全資產範圍",
@@ -78,6 +80,7 @@ const COPY: Record<"zh" | "en", Copy> = {
     aiLoop: "AI closure",
     verified: "Verified 24h",
     functions: "Six functions",
+    framework: "Security framework",
     siemFlow: "SIEM pipeline",
     aiFlow: "AI Agent loop",
     scope: "Asset scope",
@@ -309,6 +312,44 @@ export function SecurityAssetControlPlaneCockpit({
               </div>
             </div>
 
+            <div>
+              <div className="mb-2 flex items-center justify-between gap-3 text-[11px] font-semibold text-[#4f4d47]">
+                <span>{copy.framework}</span>
+                <span className="font-mono text-[#77736a]">
+                  {payload.summary.security_program_controlled_domain_count}/
+                  {payload.summary.security_program_domain_count}
+                </span>
+              </div>
+              <div className="grid grid-cols-2 gap-1 sm:grid-cols-4">
+                {payload.security_program_domains.map((domain) => (
+                  <div
+                    key={domain.domain_id}
+                    className="min-w-0 border border-[#d8d3c7] bg-white px-2 py-1.5"
+                    title={`${domain.label}: ${domain.controlled_percent}%${domain.gap_code ? ` · ${domain.gap_code}` : ""}`}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <span
+                        className={cn(
+                          "h-2 w-2 shrink-0",
+                          domain.status === "controlled"
+                            ? "bg-[#2f8a50]"
+                            : domain.status === "partial"
+                              ? "bg-[#c58a2e]"
+                              : "bg-[#c9584d]"
+                        )}
+                      />
+                      <span className="min-w-0 flex-1 truncate text-[9px] text-[#4f4d47]">
+                        {domain.label}
+                      </span>
+                      <span className="font-mono text-[9px] font-semibold text-[#141413]">
+                        {domain.controlled_percent}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
             <div>
               <div className="mb-2 flex items-center justify-between gap-3 text-[11px] font-semibold text-[#4f4d47]">
                 <span>{copy.scope}</span>