feat(web): add IwoooS coverage matrix

apps/web/src/app/[locale]/iwooos/page.tsx

@@ -48,6 +48,19 @@ type SecuritySurface = {
   tone: 'steady' | 'warn' | 'locked'
 }
 
+type CoverageGroup = {
+  key: string
+  count: string
+  icon: typeof ShieldCheck
+  tone: 'steady' | 'warn' | 'locked'
+  surfaces: string
+}
+
+type ConflictControl = {
+  key: string
+  tone: 'steady' | 'warn' | 'locked'
+}
+
 const postureMetrics: PostureMetric[] = [
   { key: 'overall', value: '58%', tone: 'warn' },
   { key: 'framework', value: '80-85%', tone: 'steady' },
@@ -86,6 +99,45 @@ const existingSecuritySurfaces: SecuritySurface[] = [
   { key: 'codeReview', href: '/code-review', icon: SearchCheck, tone: 'warn' },
 ]
 
+const coverageGroups: CoverageGroup[] = [
+  {
+    key: 'signals',
+    count: '5',
+    icon: Radar,
+    tone: 'warn',
+    surfaces: '/security-compliance, /security, /compliance, /alerts, /errors',
+  },
+  {
+    key: 'humanControl',
+    count: '2',
+    icon: Lock,
+    tone: 'locked',
+    surfaces: '/authorizations, /awooop/approvals',
+  },
+  {
+    key: 'governanceAudit',
+    count: '2',
+    icon: ListChecks,
+    tone: 'steady',
+    surfaces: '/governance, /alert-operation-logs',
+  },
+  {
+    key: 'engineeringReview',
+    count: '1',
+    icon: SearchCheck,
+    tone: 'warn',
+    surfaces: '/code-review',
+  },
+]
+
+const conflictControls: ConflictControl[] = [
+  { key: 'preserveOwnership', tone: 'steady' },
+  { key: 'noRuntimeLift', tone: 'locked' },
+  { key: 'codeReviewNotDeployGate', tone: 'warn' },
+  { key: 'awooopNotSecurityApproval', tone: 'locked' },
+  { key: 'kaliNotCalled', tone: 'locked' },
+]
+
 const evidenceItems = [
   'iwooos-posture-projection.snapshot.json',
   'security-rollout-policy.snapshot.json',
@@ -239,6 +291,48 @@ function SurfaceCard({ item, locale }: { item: SecuritySurface; locale: string }
   )
 }
 
+function CoverageCard({ item }: { item: CoverageGroup }) {
+  const t = useTranslations('iwooos.coverage')
+  const Icon = item.icon
+  return (
+    <div style={{ ...band, minHeight: 154, padding: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+        <Icon size={18} color={toneColors[item.tone]} />
+        <span style={{ fontSize: 24, fontWeight: 700, color: toneColors[item.tone] }}>{item.count}</span>
+      </div>
+      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>{t(`groups.${item.key}.title` as never)}</h2>
+      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
+        {t(`groups.${item.key}.body` as never)}
+      </p>
+      <div style={{ fontSize: 11, color: '#87867f', marginTop: 10, lineHeight: 1.45 }}>{item.surfaces}</div>
+    </div>
+  )
+}
+
+function ConflictRow({ item, index }: { item: ConflictControl; index: number }) {
+  const t = useTranslations('iwooos.coverage.conflicts')
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '34px minmax(0, 1fr)',
+        gap: 10,
+        alignItems: 'start',
+        padding: '10px 0',
+        borderBottom: index === conflictControls.length - 1 ? 'none' : '0.5px solid #eee9dd',
+      }}
+    >
+      <ToneDot tone={item.tone} />
+      <div>
+        <div style={{ fontSize: 13, fontWeight: 700, color: '#141413' }}>{t(`${item.key}.title` as never)}</div>
+        <div style={{ fontSize: 11, color: '#6f6d66', marginTop: 3, lineHeight: 1.45 }}>
+          {t(`${item.key}.body` as never)}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function IwoooSPage({ params }: { params: { locale: string } }) {
   const t = useTranslations('iwooos')
 
@@ -273,6 +367,41 @@ export default function IwoooSPage({ params }: { params: { locale: string } }) {
           </div>
         </section>
 
+        <section
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+            gap: 14,
+            marginBottom: 14,
+          }}
+        >
+          <div>
+            <div style={{ marginBottom: 14 }}>
+              <h2 style={{ fontSize: 16, margin: 0 }}>{t('coverage.title')}</h2>
+              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
+                {t('coverage.subtitle')}
+              </p>
+            </div>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
+                gap: 12,
+              }}
+            >
+              {coverageGroups.map(item => <CoverageCard key={item.key} item={item} />)}
+            </div>
+          </div>
+
+          <div style={{ ...band, padding: 16 }}>
+            <h2 style={{ fontSize: 15, margin: 0 }}>{t('coverage.conflicts.title')}</h2>
+            <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 8px', lineHeight: 1.55 }}>
+              {t('coverage.conflicts.subtitle')}
+            </p>
+            {conflictControls.map((item, index) => <ConflictRow key={item.key} item={item} index={index} />)}
+          </div>
+        </section>
+
         <section
           style={{
             display: 'grid',