feat(web): bridge security control pages to IwoooS

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

@@ -13,6 +13,7 @@ import { AppLayout } from '@/components/layout'
 import { useTranslations } from 'next-intl'
 import { useIncidents } from '@/hooks/useIncidents'
 import { IncidentCard } from '@/components/incident'
+import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
 import { cn } from '@/lib/utils'
 import { Bell, BellOff, RefreshCw, AlertTriangle, AlertCircle, Info } from 'lucide-react'
 
@@ -119,6 +120,8 @@ export default function AlertsPage({ params }: { params: { locale: string } }) {
         </button>
       </div>
 
+      <IwoooSReadOnlyBridge />
+
       {/* Severity Stats */}
       <div className="grid grid-cols-4 gap-3 mb-6">
         <StatPill label={t('incident.severity.P0')} value={p0Count} highlight />

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

@@ -11,6 +11,7 @@
 
 import { AppLayout } from '@/components/layout'
 import { LiveApprovalPanel } from '@/components/approval/live-approval-panel'
+import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
 
 export default function AuthorizationsPage({
   params,
@@ -19,7 +20,10 @@ export default function AuthorizationsPage({
 }) {
   return (
     <AppLayout locale={params.locale}>
-      <LiveApprovalPanel />
+      <div className="space-y-4">
+        <IwoooSReadOnlyBridge />
+        <LiveApprovalPanel />
+      </div>
     </AppLayout>
   )
 }

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

@@ -17,6 +17,7 @@ import { useTranslations } from 'next-intl'
 import { ShieldCheck } from 'lucide-react'
 import { AppLayout } from '@/components/layout'
 import { PageTabs, type TabConfig } from '@/components/layout/page-tabs'
+import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
 import { GlassCard } from '@/components/ui/glass-card'
 import { SloTab } from './tabs/slo-tab'
 import { EventsTab } from './tabs/events-tab'
@@ -43,6 +44,8 @@ export default function GovernancePage({ params }: { params: { locale: string }
         </div>
       </GlassCard>
 
+      <IwoooSReadOnlyBridge />
+
       <PageTabs tabs={tabs} defaultTab="slo" syncWithUrl={true} />
     </AppLayout>
   )

apps/web/src/components/layout/page-tabs.tsx

@@ -134,6 +134,9 @@ export function PageTabs({ tabs, defaultTab, syncWithUrl = true }: PageTabsProps
           background: '#fff',
           flexShrink: 0,
           padding: '0 20px',
+          maxWidth: '100%',
+          overflowX: 'auto',
+          WebkitOverflowScrolling: 'touch',
         }}
       >
         {tabs.map(tab => {

apps/web/src/components/panels/ErrorsPanel.tsx

@@ -8,6 +8,7 @@
 import { useTranslations } from 'next-intl'
 import { useErrors } from '@/hooks/useErrors'
 import { useUXAudit } from '@/hooks/useUXAudit'
+import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'
 import {
   ErrorOverviewCard,
   RecentIssuesList,
@@ -28,7 +29,7 @@ export function ErrorsPanel() {
 
   return (
     <div style={{ padding: 24, maxWidth: 1280, margin: '0 auto' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 24 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
           <Bug style={{ width: 24, height: 24, color: '#555550' }} />
           <div>
@@ -41,6 +42,7 @@ export function ErrorsPanel() {
           {loading ? t('loading') : t('refresh')}
         </button>
       </div>
+      <IwoooSReadOnlyBridge />
       {error && <div style={{ marginBottom: 24, padding: 16, background: 'rgba(204,34,0,0.05)', border: '0.5px solid rgba(204,34,0,0.2)', borderRadius: 8 }}><p style={{ fontSize: 13, color: '#cc2200' }}>{error}</p></div>}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-1 space-y-6">