feat(phase-6.4g-6.5b): API Synaptic Integration + Dual-State WarRoom UI

Phase 6.4g (API 突觸對接):
- lewooogo-brain dependency binding in apps/api/pyproject.toml
- POST /api/v1/incidents/{id}/propose route (proposals.py)
- Guardrails integration (8/8 tests passed)

Phase 6.5a (視覺皮層建置):
- DualStateIncidentCard.tsx with Nothing.tech visual compliance
- Ping radar animation for alert state
- Tier-based decision layer UI (AI 執行中 / 等待親核)

Phase 6.5b (神經網路串接):
- Main warroom page integration (page.tsx)
- IncidentResponse → DualState mapper function
- Empty state: "系統穩定。0 活躍異常。"

Tests:
- test_guardrails.py (8/8)
- test_incident_engine.py (6/6)
- test_skill_loader.py (6/6)
- Frontend build: 0 errors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -25,8 +25,58 @@ import { OpenClawStateMachine } from '@/components/ai/openclaw-state-machine'
 import { GlobalPulseChart } from '@/components/charts/global-pulse-chart'
 import { useGlobalPulseMetrics } from '@/hooks/useGlobalPulseMetrics'
 import { useIncidents } from '@/hooks/useIncidents'
-import { IncidentCard, IncidentCardGrid, IncidentEmptyState, ThinkingTerminal, DEMO_DECISION_CHAIN } from '@/components/incident'
-import { Activity, AlertTriangle } from 'lucide-react'
+import {
+  IncidentCard,
+  IncidentCardGrid,
+  IncidentEmptyState,
+  ThinkingTerminal,
+  DEMO_DECISION_CHAIN,
+  DualStateIncidentCard,
+} from '@/components/incident'
+import { AlertTriangle } from 'lucide-react'
+import type { IncidentResponse } from '@/lib/api-client'
+
+// =============================================================================
+// Utility: Map IncidentResponse to DualStateIncidentCard props
+// =============================================================================
+
+function mapToDualState(incident: IncidentResponse): {
+  id: string
+  serviceName: string
+  status: 'normal' | 'alert'
+  tier?: 1 | 2 | 3
+  message: string
+  timestamp: string
+} {
+  // P0/P1 視為異常 (alert)，P2/P3 視為正常 (normal)
+  const isAlert = incident.severity === 'P0' || incident.severity === 'P1'
+
+  // Tier 判定: proposal_count > 0 且為 P0 = Tier 3, P1 = Tier 2, else Tier 1
+  let tier: 1 | 2 | 3 | undefined = undefined
+  if (isAlert && incident.proposal_count > 0) {
+    tier = incident.severity === 'P0' ? 3 : 2
+  } else if (isAlert) {
+    tier = 1
+  }
+
+  // 格式化時間
+  const date = new Date(incident.created_at)
+  const timestamp = date.toLocaleString('zh-TW', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  return {
+    id: incident.incident_id,
+    serviceName: incident.affected_services[0] || 'unknown',
+    status: isAlert ? 'alert' : 'normal',
+    tier,
+    message: `${incident.signal_count} 筆告警 | ${incident.status}`,
+    timestamp,
+  }
+}
 
 // =============================================================================
 // Main Page
@@ -103,7 +153,7 @@ export default function Home({ params }: { params: { locale: string } }) {
             <LiveDashboard locale={locale} />
           </DataPincerPanel>
 
-          {/* Active Incidents Section (Phase 7: 真實血脈) */}
+          {/* Active Incidents Section (Phase 7: 真實血脈 + Phase 6.5b 雙態卡片) */}
           <DataPincerPanel
             title={t('incident.activeIncidents')}
             status={incidents.length > 0 ? 'critical' : 'healthy'}
@@ -121,16 +171,31 @@ export default function Home({ params }: { params: { locale: string } }) {
                 <span className="font-mono text-sm">{incidentsError}</span>
               </div>
             ) : incidents.length === 0 ? (
-              <IncidentEmptyState />
+              /* Nothing.tech 風格平靜態: 系統穩定 */
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <div className="w-3 h-3 rounded-full bg-green-500 mb-4 animate-pulse" />
+                <p className="font-mono text-sm text-neutral-600">
+                  {t('incident.systemStable', { defaultValue: '系統穩定' })}
+                </p>
+                <p className="font-mono text-xs text-neutral-400 mt-1">
+                  0 {t('incident.activeAlerts', { defaultValue: '活躍異常' })}
+                </p>
+              </div>
             ) : (
-              <IncidentCardGrid>
-                {incidents.map((incident) => (
-                  <IncidentCard
-                    key={incident.incident_id}
-                    incident={incident}
-                  />
-                ))}
-              </IncidentCardGrid>
+              <div className="space-y-4">
+                {/* Phase 6.5b: 雙態戰情室卡片 (脈衝雷達 + Tier 決策層) */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {incidents.map((incident) => {
+                    const dualProps = mapToDualState(incident)
+                    return (
+                      <DualStateIncidentCard
+                        key={`dual-${incident.incident_id}`}
+                        {...dualProps}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
             )}
           </DataPincerPanel>