feat(web): add IwoooS security posture entry

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

@@ -0,0 +1,278 @@
+'use client'
+
+/**
+ * IwoooS — Information Security posture 入口
+ * @created 2026-05-19 Codex Asia/Taipei
+ */
+
+import {
+  Activity,
+  AlertTriangle,
+  CheckCircle2,
+  Clock3,
+  GitBranch,
+  Lock,
+  Radar,
+  ShieldCheck,
+} from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { AppLayout } from '@/components/layout'
+
+type PostureMetric = {
+  key: string
+  value: string
+  tone: 'steady' | 'warn' | 'locked'
+}
+
+type Pillar = {
+  key: string
+  icon: typeof ShieldCheck
+  tone: 'steady' | 'warn' | 'locked'
+}
+
+type Lane = {
+  key: string
+  mode: 'observe' | 'warn'
+}
+
+const postureMetrics: PostureMetric[] = [
+  { key: 'overall', value: '58%', tone: 'warn' },
+  { key: 'framework', value: '80-85%', tone: 'steady' },
+  { key: 'runtime', value: '35-40%', tone: 'locked' },
+  { key: 'contracts', value: '35', tone: 'steady' },
+  { key: 'activeGates', value: '0', tone: 'locked' },
+]
+
+const posturePillars: Pillar[] = [
+  { key: 'exposure', icon: Radar, tone: 'warn' },
+  { key: 'sourceControl', icon: GitBranch, tone: 'warn' },
+  { key: 'kali', icon: Activity, tone: 'steady' },
+  { key: 'governance', icon: ShieldCheck, tone: 'locked' },
+]
+
+const nonBlockingLanes: Lane[] = [
+  { key: 'lowMedium', mode: 'warn' },
+  { key: 'ownerMissing', mode: 'observe' },
+  { key: 'mirrorIncomplete', mode: 'warn' },
+  { key: 'sourceDrift', mode: 'warn' },
+  { key: 'kaliObserve', mode: 'warn' },
+  { key: 'workflowGap', mode: 'warn' },
+  { key: 'progressHolding', mode: 'observe' },
+]
+
+const evidenceItems = [
+  'security-rollout-policy.snapshot.json',
+  'security-mirror-status-rollup.snapshot.json',
+  'source-control-owner-response-validation-rollup.snapshot.json',
+  'kali-integration-status.snapshot.json',
+]
+
+const toneColors = {
+  steady: '#1f7a4d',
+  warn: '#b66a2d',
+  locked: '#6f6d66',
+}
+
+const page = {
+  minHeight: 'calc(100vh - 68px)',
+  background: '#f5f4ed',
+  color: '#141413',
+  padding: '22px',
+  fontFamily: 'var(--font-body), monospace',
+}
+
+const band = {
+  background: '#fff',
+  border: '0.5px solid #e0ddd4',
+  borderRadius: 8,
+}
+
+function ToneDot({ tone }: { tone: 'steady' | 'warn' | 'locked' }) {
+  return (
+    <span
+      style={{
+        width: 8,
+        height: 8,
+        borderRadius: 8,
+        background: toneColors[tone],
+        display: 'inline-block',
+      }}
+    />
+  )
+}
+
+function MetricCard({ item }: { item: PostureMetric }) {
+  const t = useTranslations('iwooos.metrics')
+  return (
+    <div style={{ ...band, padding: 14, minHeight: 96 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+        <span style={{ fontSize: 11, color: '#87867f' }}>{t(`${item.key}.label` as never)}</span>
+        <ToneDot tone={item.tone} />
+      </div>
+      <div style={{ fontSize: 30, fontWeight: 700, marginTop: 8, lineHeight: 1 }}>{item.value}</div>
+      <div style={{ fontSize: 11, color: '#6f6d66', marginTop: 8 }}>{t(`${item.key}.detail` as never)}</div>
+    </div>
+  )
+}
+
+function PillarCard({ item }: { item: Pillar }) {
+  const t = useTranslations('iwooos.pillars')
+  const Icon = item.icon
+  return (
+    <div style={{ ...band, padding: 16, minHeight: 154 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+        <Icon size={19} color={toneColors[item.tone]} />
+        <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 700 }}>
+          {t(`${item.key}.state` as never)}
+        </span>
+      </div>
+      <h2 style={{ fontSize: 15, margin: '14px 0 6px', color: '#141413' }}>{t(`${item.key}.title` as never)}</h2>
+      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>{t(`${item.key}.body` as never)}</p>
+    </div>
+  )
+}
+
+function LaneRow({ item, index }: { item: Lane; index: number }) {
+  const t = useTranslations('iwooos.lanes')
+  const tone = item.mode === 'observe' ? 'locked' : 'warn'
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '42px minmax(0, 1fr) 92px',
+        alignItems: 'center',
+        gap: 12,
+        padding: '10px 12px',
+        borderBottom: index === nonBlockingLanes.length - 1 ? 'none' : '0.5px solid #eee9dd',
+      }}
+    >
+      <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
+      <div>
+        <div style={{ fontSize: 13, fontWeight: 700 }}>{t(`${item.key}.title` as never)}</div>
+        <div style={{ fontSize: 11, color: '#6f6d66', marginTop: 3 }}>{t(`${item.key}.body` as never)}</div>
+      </div>
+      <div
+        style={{
+          justifySelf: 'end',
+          border: `0.5px solid ${toneColors[tone]}`,
+          color: toneColors[tone],
+          borderRadius: 8,
+          padding: '4px 8px',
+          fontSize: 11,
+          fontWeight: 700,
+          textTransform: 'uppercase',
+        }}
+      >
+        {item.mode}
+      </div>
+    </div>
+  )
+}
+
+export default function IwoooSPage({ params }: { params: { locale: string } }) {
+  const t = useTranslations('iwooos')
+
+  return (
+    <AppLayout locale={params.locale} fullBleed>
+      <main style={page}>
+        <section
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+            gap: 14,
+            marginBottom: 14,
+          }}
+        >
+          <div style={{ ...band, padding: 20 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+              <ShieldCheck size={22} color="#1f7a4d" />
+              <span style={{ fontSize: 12, color: '#6f6d66' }}>{t('eyebrow')}</span>
+            </div>
+            <h1 style={{ margin: 0, fontSize: 34, lineHeight: 1, color: '#141413' }}>{t('title')}</h1>
+            <p style={{ margin: '10px 0 0', color: '#6f6d66', fontSize: 13, lineHeight: 1.6, maxWidth: 760 }}>
+              {t('subtitle')}
+            </p>
+          </div>
+          <div style={{ ...band, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6f6d66', fontSize: 12 }}>
+              <Lock size={16} />
+              {t('boundary.label')}
+            </div>
+            <div style={{ fontSize: 22, fontWeight: 700, color: '#141413', marginTop: 12 }}>{t('boundary.state')}</div>
+            <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '10px 0 0' }}>{t('boundary.detail')}</p>
+          </div>
+        </section>
+
+        <section
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+            gap: 12,
+            marginBottom: 14,
+          }}
+        >
+          {postureMetrics.map(item => <MetricCard key={item.key} item={item} />)}
+        </section>
+
+        <section
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+            gap: 12,
+            marginBottom: 14,
+          }}
+        >
+          {posturePillars.map(item => <PillarCard key={item.key} item={item} />)}
+        </section>
+
+        <section
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+            gap: 14,
+          }}
+        >
+          <div style={{ ...band, overflow: 'hidden' }}>
+            <div style={{ padding: '14px 16px', borderBottom: '0.5px solid #e0ddd4' }}>
+              <h2 style={{ fontSize: 15, margin: 0 }}>{t('lanes.title')}</h2>
+              <p style={{ fontSize: 12, color: '#6f6d66', margin: '5px 0 0' }}>{t('lanes.subtitle')}</p>
+            </div>
+            {nonBlockingLanes.map((item, index) => <LaneRow key={item.key} item={item} index={index} />)}
+          </div>
+
+          <div style={{ display: 'grid', gap: 14 }}>
+            <div style={{ ...band, padding: 16 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+                <Clock3 size={16} color="#b66a2d" />
+                <h2 style={{ fontSize: 15, margin: 0 }}>{t('nextGate.title')}</h2>
+              </div>
+              <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: 0 }}>{t('nextGate.body')}</p>
+            </div>
+
+            <div style={{ ...band, padding: 16 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+                <CheckCircle2 size={16} color="#1f7a4d" />
+                <h2 style={{ fontSize: 15, margin: 0 }}>{t('evidence.title')}</h2>
+              </div>
+              <div style={{ display: 'grid', gap: 7 }}>
+                {evidenceItems.map(item => (
+                  <div key={item} style={{ fontSize: 11, color: '#6f6d66', wordBreak: 'break-word' }}>
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div style={{ ...band, padding: 16, borderColor: '#e6c8b8', background: '#fffaf7' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+                <AlertTriangle size={16} color="#b66a2d" />
+                <h2 style={{ fontSize: 15, margin: 0 }}>{t('blocked.title')}</h2>
+              </div>
+              <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: 0 }}>{t('blocked.body')}</p>
+            </div>
+          </div>
+        </section>
+      </main>
+    </AppLayout>
+  )
+}

apps/web/src/components/command-palette/CommandPalette.tsx

@@ -17,7 +17,7 @@ import React, { useEffect, useRef, useState, useCallback } from 'react'
 import { useTranslations } from 'next-intl'
 import { useRouter, usePathname } from 'next/navigation'
 import { useLocale } from 'next-intl'
-import { Search, Terminal, Home, Activity, Wrench, Shield, BookOpen, Settings, Zap, GitBranch } from 'lucide-react'
+import { Search, Terminal, Home, Activity, Wrench, Shield, BookOpen, Settings, Zap, GitBranch, Radar } from 'lucide-react'
 import { useTerminalStore } from '@/stores/terminal.store'
 import { Z_INDEX } from '@/lib/constants/z-index'
 
@@ -107,6 +107,14 @@ export function CommandPalette() {
       action: () => nav('/security-compliance'),
       keywords: ['security', '安全', 'compliance', '合規'],
     },
+    {
+      id: 'iwooos',
+      label: t('actionGoIwooos'),
+      group: t('groupNav'),
+      icon: <Radar size={14} />,
+      action: () => nav('/iwooos'),
+      keywords: ['iwooos', 'information security', '資安網', '資安態勢'],
+    },
     {
       id: 'knowledge',
       label: t('actionGoKnowledge'),

apps/web/src/components/layout/sidebar.tsx

@@ -33,7 +33,7 @@ import {
   Wrench, Package, Ticket, DollarSign, Zap, FileText,
   BookOpen, Terminal, AppWindow, Server,
   Users, BellRing, CreditCard, HelpCircle, Settings,
-  ChevronLeft, ChevronRight, Diff, BrainCircuit,
+  ChevronLeft, ChevronRight, Diff, BrainCircuit, Radar,
 } from 'lucide-react'
 // Phase 8.0 #15: 改用 approval store SSE (移除 polling)
 import { useApprovalStore } from '@/stores/approval.store'
@@ -85,6 +85,7 @@ const NAV_SECTIONS: NavSection[] = [
       { id: 'automation',          href: '/automation',             labelKey: 'automation',        Icon: Wrench },
       { id: 'operations',          href: '/operations',             labelKey: 'operations',        Icon: Package },
       { id: 'security-compliance', href: '/security-compliance',    labelKey: 'securityCompliance',Icon: Shield },
+      { id: 'iwooos',              href: '/iwooos',                 labelKey: 'iwooos',            Icon: Radar },
       { id: 'knowledge',           href: '/knowledge',              labelKey: 'knowledge',         Icon: BookOpen },
       { id: 'governance',          href: '/governance',             labelKey: 'governance',        Icon: ShieldCheck },
       { id: 'awooop',              href: '/awooop/work-items',      labelKey: 'awooop',           Icon: BrainCircuit },