'use client'

/**
 * AutomationInventoryTab — AI Agent 自動化盤點 Tab
 * =================================================
 * 消費：GET /api/v1/agents/automation-inventory-snapshot
 *
 * 只讀最新 committed snapshot；不提供批准、執行、回滾或 provider 切換操作。
 */

import { useEffect, useMemo, useState, type ReactNode } from 'react'
import {
  AlertTriangle,
  Archive,
  BellOff,
  BellRing,
  Boxes,
  Database,
  FileText,
  GitBranch,
  Gauge,
  HardDrive,
  Layers3,
  Lock,
  PackageCheck,
  RefreshCw,
  Route,
  Server,
  ShieldAlert,
  ShieldCheck,
  Target,
} from 'lucide-react'
import { useTranslations } from 'next-intl'
import { GlassCard } from '@/components/ui/glass-card'
import { StatusOrb } from '@/components/ui/status-orb'
import {
  apiClient,
  type AiAgentDeploymentLayoutSnapshot,
  type AiAgentHostStatefulVersionInventorySnapshot,
  type AiAgentInteractionLearningProofSnapshot,
  type AiAgentLearningWritebackApprovalPackageSnapshot,
  type AiAgentLiveReadModelGateSnapshot,
  type AiAgentOwnerApprovedFixtureDryRunSnapshot,
  type AiAgentOwnerApprovedLearningDryRunSnapshot,
  type AiAgentPostWriteVerifierPackageSnapshot,
  type AiAgentProactiveOperationsContractSnapshot,
  type AiAgentRedisDryRunGateSnapshot,
  type AiAgentReportAutomationReviewSnapshot,
  type AiAgentReportRuntimeReadinessSnapshot,
  type AiAgentReportTruthActionabilityReviewSnapshot,
  type AiAgentRuntimeVerifierEvidenceReviewSnapshot,
  type AiAgentRuntimeWriteGateReviewSnapshot,
  type AiAgentTelegramReceiptApprovalPackageSnapshot,
  type AiProviderRouteMatrixSnapshot,
  type AiAgentAutomationBacklogSnapshot,
  type AiAgentAutomationInventorySnapshot,
  type BackupDrReadinessMatrixSnapshot,
  type BackupDrTargetInventorySnapshot,
  type BackupNotificationPolicySnapshot,
  type GiteaWorkflowRunnerHealthSnapshot,
  type ObservabilityContractMatrixSnapshot,
  type OffsiteEscrowReadinessStatusSnapshot,
  type RuntimeSurfaceInventorySnapshot,
  type ServiceHealthFailureNotificationPolicySnapshot,
  type ServiceHealthGapMatrixSnapshot,
} from '@/lib/api-client'

function formatDateTime(value: string): string {
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '--'
  return date.toLocaleString('zh-TW', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function toneColor(tone: 'ok' | 'warn' | 'danger' | 'neutral') {
  if (tone === 'ok') return '#22C55E'
  if (tone === 'warn') return '#F59E0B'
  if (tone === 'danger') return '#EF4444'
  return '#141413'
}

function SmallLabel({ children }: { children: ReactNode }) {
  return (
    <span style={{
      fontFamily: "'DM Mono', monospace",
      fontSize: 10,
      color: '#87867f',
      textTransform: 'uppercase',
      letterSpacing: '0.5px',
      lineHeight: 1.25,
      minWidth: 0,
      overflowWrap: 'anywhere',
    }}>
      {children}
    </span>
  )
}

function Chip({ value, muted = false }: { value: string; muted?: boolean }) {
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      minHeight: 22,
      padding: '3px 7px',
      borderRadius: 5,
      border: `0.5px solid ${muted ? '#e0ddd4' : '#d9775740'}`,
      background: muted ? '#faf9f3' : 'rgba(217,119,87,0.06)',
      color: muted ? '#87867f' : '#141413',
      fontFamily: "'DM Mono', monospace",
      fontSize: 10,
      lineHeight: 1.3,
      maxWidth: '100%',
      minWidth: 0,
      overflowWrap: 'anywhere',
      wordBreak: 'break-word',
      whiteSpace: 'normal',
    }}>
      {value}
    </span>
  )
}

function evidenceTone(value: string): 'ok' | 'warn' | 'danger' | 'neutral' {
  if (value === 'ready' || value === 'verified' || value === 'active') return 'ok'
  if (value === 'action_required' || value === 'approval_required' || value === 'needs_metric_binding') return 'warn'
  if (value === 'blocked' || value === 'failed') return 'danger'
  return 'neutral'
}

function MetricCard({
  label,
  value,
  tone = 'neutral',
  icon,
}: {
  label: string
  value: number | string
  tone?: 'ok' | 'warn' | 'danger' | 'neutral'
  icon: ReactNode
}) {
  const color = toneColor(tone)
  return (
    <GlassCard variant="subtle" padding="md" className="min-w-0">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
        <div style={{
          width: 34,
          height: 34,
          borderRadius: 8,
          border: `0.5px solid ${color}40`,
          background: `${color}12`,
          color,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}>
          {icon}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5, minWidth: 0 }}>
          <SmallLabel>{label}</SmallLabel>
          <span style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 25,
            fontWeight: 700,
            color,
            lineHeight: 1,
            minWidth: 0,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}>
            {value}
          </span>
        </div>
      </div>
    </GlassCard>
  )
}

function ProgressRow({ label, percent, nextTask }: { label: string; percent: number; nextTask: string }) {
  const color = percent >= 70 ? '#22C55E' : percent >= 35 ? '#F59E0B' : '#d97757'
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1fr) 48px',
      gap: 10,
      alignItems: 'center',
      minWidth: 0,
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
          <span style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 12,
            fontWeight: 700,
            color: '#141413',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}>
            {label}
          </span>
          <span style={{
            fontFamily: "'DM Mono', monospace",
            fontSize: 10,
            color: '#87867f',
            whiteSpace: 'nowrap',
          }}>
            {nextTask}
          </span>
        </div>
        <div style={{ height: 6, borderRadius: 999, background: '#e0ddd4', overflow: 'hidden' }}>
          <div style={{ width: `${percent}%`, height: '100%', borderRadius: 999, background: color }} />
        </div>
      </div>
      <span style={{
        fontFamily: "'DM Mono', monospace",
        fontSize: 11,
        fontWeight: 700,
        color,
        textAlign: 'right',
      }}>
        {percent}%
      </span>
    </div>
  )
}

function MiniBar({
  label,
  value,
  detail,
  tone = 'neutral',
}: {
  label: string
  value: number
  detail: string
  tone?: 'ok' | 'warn' | 'danger' | 'neutral'
}) {
  const color = toneColor(tone)
  const width = Math.max(0, Math.min(100, value))
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
          {label}
        </span>
        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color }}>
          {value}%
        </span>
      </div>
      <div style={{ height: 7, borderRadius: 999, background: '#e7e3d8', overflow: 'hidden' }}>
        <div style={{ width: `${width}%`, height: '100%', borderRadius: 999, background: color }} />
      </div>
      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45 }}>
        {detail}
      </span>
    </div>
  )
}

function SummaryTile({
  label,
  value,
  detail,
  icon,
  tone = 'neutral',
}: {
  label: string
  value: string
  detail: string
  icon: ReactNode
  tone?: 'ok' | 'warn' | 'danger' | 'neutral'
}) {
  const color = toneColor(tone)
  return (
    <div style={{
      padding: 13,
      border: '0.5px solid #e0ddd4',
      borderRadius: 7,
      background: '#fff',
      display: 'grid',
      gridTemplateColumns: '34px minmax(0, 1fr)',
      gap: 10,
      alignItems: 'start',
      minWidth: 0,
    }}>
      <div style={{
        width: 34,
        height: 34,
        borderRadius: 8,
        border: `0.5px solid ${color}40`,
        background: `${color}12`,
        color,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        {icon}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 5, minWidth: 0 }}>
        <SmallLabel>{label}</SmallLabel>
        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 24, fontWeight: 700, color, lineHeight: 1 }}>
          {value}
        </span>
        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45 }}>
          {detail}
        </span>
      </div>
    </div>
  )
}

export function AutomationInventoryTab() {
  const t = useTranslations('governance.automationInventory')
  const [snapshot, setSnapshot] = useState<AiAgentAutomationInventorySnapshot | null>(null)
  const [backlog, setBacklog] = useState<AiAgentAutomationBacklogSnapshot | null>(null)
  const [backupTargets, setBackupTargets] = useState<BackupDrTargetInventorySnapshot | null>(null)
  const [backupReadiness, setBackupReadiness] = useState<BackupDrReadinessMatrixSnapshot | null>(null)
  const [backupPolicy, setBackupPolicy] = useState<BackupNotificationPolicySnapshot | null>(null)
  const [offsiteEscrow, setOffsiteEscrow] = useState<OffsiteEscrowReadinessStatusSnapshot | null>(null)
  const [runtimeSurface, setRuntimeSurface] = useState<RuntimeSurfaceInventorySnapshot | null>(null)
  const [giteaHealth, setGiteaHealth] = useState<GiteaWorkflowRunnerHealthSnapshot | null>(null)
  const [observabilityMatrix, setObservabilityMatrix] = useState<ObservabilityContractMatrixSnapshot | null>(null)
  const [providerRouteMatrix, setProviderRouteMatrix] = useState<AiProviderRouteMatrixSnapshot | null>(null)
  const [deploymentLayout, setDeploymentLayout] = useState<AiAgentDeploymentLayoutSnapshot | null>(null)
  const [proactiveOperations, setProactiveOperations] = useState<AiAgentProactiveOperationsContractSnapshot | null>(null)
  const [interactionLearningProof, setInteractionLearningProof] = useState<AiAgentInteractionLearningProofSnapshot | null>(null)
  const [liveReadModelGate, setLiveReadModelGate] = useState<AiAgentLiveReadModelGateSnapshot | null>(null)
  const [redisDryRunGate, setRedisDryRunGate] = useState<AiAgentRedisDryRunGateSnapshot | null>(null)
  const [learningWritebackPackage, setLearningWritebackPackage] = useState<AiAgentLearningWritebackApprovalPackageSnapshot | null>(null)
  const [telegramReceiptPackage, setTelegramReceiptPackage] = useState<AiAgentTelegramReceiptApprovalPackageSnapshot | null>(null)
  const [ownerApprovedLearningDryRun, setOwnerApprovedLearningDryRun] = useState<AiAgentOwnerApprovedLearningDryRunSnapshot | null>(null)
  const [runtimeWriteGateReview, setRuntimeWriteGateReview] = useState<AiAgentRuntimeWriteGateReviewSnapshot | null>(null)
  const [postWriteVerifierPackage, setPostWriteVerifierPackage] = useState<AiAgentPostWriteVerifierPackageSnapshot | null>(null)
  const [runtimeVerifierEvidenceReview, setRuntimeVerifierEvidenceReview] = useState<AiAgentRuntimeVerifierEvidenceReviewSnapshot | null>(null)
  const [reportAutomationReview, setReportAutomationReview] = useState<AiAgentReportAutomationReviewSnapshot | null>(null)
  const [reportRuntimeReadiness, setReportRuntimeReadiness] = useState<AiAgentReportRuntimeReadinessSnapshot | null>(null)
  const [reportTruthActionabilityReview, setReportTruthActionabilityReview] = useState<AiAgentReportTruthActionabilityReviewSnapshot | null>(null)
  const [ownerDryRunPackage, setOwnerDryRunPackage] = useState<AiAgentOwnerApprovedFixtureDryRunSnapshot | null>(null)
  const [hostStatefulInventory, setHostStatefulInventory] = useState<AiAgentHostStatefulVersionInventorySnapshot | null>(null)
  const [serviceHealthGapMatrix, setServiceHealthGapMatrix] = useState<ServiceHealthGapMatrixSnapshot | null>(null)
  const [serviceHealthNotificationPolicy, setServiceHealthNotificationPolicy] = useState<ServiceHealthFailureNotificationPolicySnapshot | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  const fetchSnapshot = () => {
    setLoading(true)
    const requests = [
      apiClient.getAiAgentAutomationInventorySnapshot(),
      apiClient.getAiAgentAutomationBacklogSnapshot(),
      apiClient.getBackupDrTargetInventory(),
      apiClient.getBackupDrReadinessMatrix(),
      apiClient.getBackupNotificationPolicy(),
      apiClient.getOffsiteEscrowReadinessStatus(),
      apiClient.getRuntimeSurfaceInventory(),
      apiClient.getGiteaWorkflowRunnerHealth(),
      apiClient.getObservabilityContractMatrix(),
      apiClient.getAiProviderRouteMatrix(),
      apiClient.getAiAgentDeploymentLayout(),
      apiClient.getAiAgentProactiveOperationsContract(),
      apiClient.getAiAgentInteractionLearningProof(),
      apiClient.getAiAgentLiveReadModelGate(),
      apiClient.getAiAgentRedisDryRunGate(),
      apiClient.getAiAgentLearningWritebackApprovalPackage(),
      apiClient.getAiAgentTelegramReceiptApprovalPackage(),
      apiClient.getAiAgentOwnerApprovedLearningDryRun(),
      apiClient.getAiAgentRuntimeWriteGateReview(),
      apiClient.getAiAgentPostWriteVerifierPackage(),
      apiClient.getAiAgentRuntimeVerifierEvidenceReview(),
      apiClient.getAiAgentReportAutomationReview(),
      apiClient.getAiAgentReportRuntimeReadiness(),
      apiClient.getAiAgentReportTruthActionabilityReview(),
      apiClient.getAiAgentOwnerApprovedFixtureDryRun(),
      apiClient.getAiAgentHostStatefulVersionInventory(),
      apiClient.getServiceHealthGapMatrix(),
      apiClient.getServiceHealthFailureNotificationPolicy(),
    ] as const

    Promise.allSettled(requests)
      .then((results) => {
        const [
          inventoryResult,
          backlogResult,
          targetResult,
          readinessResult,
          policyResult,
          offsiteEscrowResult,
          runtimeSurfaceResult,
          giteaHealthResult,
          observabilityMatrixResult,
          providerRouteMatrixResult,
          deploymentLayoutResult,
          proactiveOperationsResult,
          interactionLearningProofResult,
          liveReadModelGateResult,
          redisDryRunGateResult,
          learningWritebackPackageResult,
          telegramReceiptPackageResult,
          ownerApprovedLearningDryRunResult,
          runtimeWriteGateReviewResult,
          postWriteVerifierPackageResult,
          runtimeVerifierEvidenceReviewResult,
          reportAutomationReviewResult,
          reportRuntimeReadinessResult,
          reportTruthActionabilityReviewResult,
          ownerDryRunPackageResult,
          hostStatefulInventoryResult,
          serviceHealthGapMatrixResult,
          serviceHealthNotificationPolicyResult,
        ] = results

        setSnapshot(inventoryResult.status === 'fulfilled' ? inventoryResult.value : null)
        setBacklog(backlogResult.status === 'fulfilled' ? backlogResult.value : null)
        setBackupTargets(targetResult.status === 'fulfilled' ? targetResult.value : null)
        setBackupReadiness(readinessResult.status === 'fulfilled' ? readinessResult.value : null)
        setBackupPolicy(policyResult.status === 'fulfilled' ? policyResult.value : null)
        setOffsiteEscrow(offsiteEscrowResult.status === 'fulfilled' ? offsiteEscrowResult.value : null)
        setRuntimeSurface(runtimeSurfaceResult.status === 'fulfilled' ? runtimeSurfaceResult.value : null)
        setGiteaHealth(giteaHealthResult.status === 'fulfilled' ? giteaHealthResult.value : null)
        setObservabilityMatrix(observabilityMatrixResult.status === 'fulfilled' ? observabilityMatrixResult.value : null)
        setProviderRouteMatrix(providerRouteMatrixResult.status === 'fulfilled' ? providerRouteMatrixResult.value : null)
        setDeploymentLayout(deploymentLayoutResult.status === 'fulfilled' ? deploymentLayoutResult.value : null)
        setProactiveOperations(proactiveOperationsResult.status === 'fulfilled' ? proactiveOperationsResult.value : null)
        setInteractionLearningProof(interactionLearningProofResult.status === 'fulfilled' ? interactionLearningProofResult.value : null)
        setLiveReadModelGate(liveReadModelGateResult.status === 'fulfilled' ? liveReadModelGateResult.value : null)
        setRedisDryRunGate(redisDryRunGateResult.status === 'fulfilled' ? redisDryRunGateResult.value : null)
        setLearningWritebackPackage(learningWritebackPackageResult.status === 'fulfilled' ? learningWritebackPackageResult.value : null)
        setTelegramReceiptPackage(telegramReceiptPackageResult.status === 'fulfilled' ? telegramReceiptPackageResult.value : null)
        setOwnerApprovedLearningDryRun(ownerApprovedLearningDryRunResult.status === 'fulfilled' ? ownerApprovedLearningDryRunResult.value : null)
        setRuntimeWriteGateReview(runtimeWriteGateReviewResult.status === 'fulfilled' ? runtimeWriteGateReviewResult.value : null)
        setPostWriteVerifierPackage(postWriteVerifierPackageResult.status === 'fulfilled' ? postWriteVerifierPackageResult.value : null)
        setRuntimeVerifierEvidenceReview(runtimeVerifierEvidenceReviewResult.status === 'fulfilled' ? runtimeVerifierEvidenceReviewResult.value : null)
        setReportAutomationReview(reportAutomationReviewResult.status === 'fulfilled' ? reportAutomationReviewResult.value : null)
        setReportRuntimeReadiness(reportRuntimeReadinessResult.status === 'fulfilled' ? reportRuntimeReadinessResult.value : null)
        setReportTruthActionabilityReview(reportTruthActionabilityReviewResult.status === 'fulfilled' ? reportTruthActionabilityReviewResult.value : null)
        setOwnerDryRunPackage(ownerDryRunPackageResult.status === 'fulfilled' ? ownerDryRunPackageResult.value : null)
        setHostStatefulInventory(hostStatefulInventoryResult.status === 'fulfilled' ? hostStatefulInventoryResult.value : null)
        setServiceHealthGapMatrix(serviceHealthGapMatrixResult.status === 'fulfilled' ? serviceHealthGapMatrixResult.value : null)
        setServiceHealthNotificationPolicy(serviceHealthNotificationPolicyResult.status === 'fulfilled' ? serviceHealthNotificationPolicyResult.value : null)
        setError([
          inventoryResult,
          backlogResult,
          targetResult,
          readinessResult,
          policyResult,
          offsiteEscrowResult,
          giteaHealthResult,
          observabilityMatrixResult,
          providerRouteMatrixResult,
          deploymentLayoutResult,
          proactiveOperationsResult,
          interactionLearningProofResult,
          liveReadModelGateResult,
          redisDryRunGateResult,
          learningWritebackPackageResult,
          telegramReceiptPackageResult,
          ownerApprovedLearningDryRunResult,
          runtimeWriteGateReviewResult,
          postWriteVerifierPackageResult,
          runtimeVerifierEvidenceReviewResult,
          reportAutomationReviewResult,
          reportRuntimeReadinessResult,
          reportTruthActionabilityReviewResult,
          ownerDryRunPackageResult,
          hostStatefulInventoryResult,
          serviceHealthGapMatrixResult,
          serviceHealthNotificationPolicyResult,
        ].some(result => result.status === 'rejected'))
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false))
  }

  useEffect(() => {
    fetchSnapshot()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const groupedAssets = useMemo(() => {
    const groups = new Map<string, AiAgentAutomationInventorySnapshot['assets']>()
    if (!snapshot) return []
    for (const asset of snapshot.assets) {
      const current = groups.get(asset.domain_id) ?? []
      current.push(asset)
      groups.set(asset.domain_id, current)
    }
    return snapshot.asset_domains.map(domain => ({
      ...domain,
      assets: groups.get(domain.domain_id) ?? [],
    })).filter(group => group.assets.length > 0)
  }, [snapshot])

  const groupedBacklog = useMemo(() => {
    if (!backlog) return []
    return (['P1', 'P2', 'P3', 'P0'] as const)
      .map(priority => ({
        priority,
        items: backlog.backlog_items.filter(item => item.priority === priority),
      }))
      .filter(group => group.items.length > 0)
  }, [backlog])

  const visibleDeploymentTargets = useMemo(() => {
    if (!deploymentLayout) return []
    const statePriority = {
      blocked_by_gate: 0,
      active_governed: 1,
      read_only_layout: 2,
      planned: 3,
      candidate_only: 4,
    } as Record<string, number>
    const telegramPriority = {
      approval_required: 0,
      action_required: 1,
      failure_only: 2,
      daily_summary_only: 3,
      no_direct_notify: 4,
    } as Record<string, number>
    return [...deploymentLayout.deployment_targets]
      .sort((a, b) => {
        const stateLeft = statePriority[a.deployment_state] ?? 5
        const stateRight = statePriority[b.deployment_state] ?? 5
        if (stateLeft !== stateRight) return stateLeft - stateRight
        const telegramLeft = telegramPriority[a.telegram_policy] ?? 5
        const telegramRight = telegramPriority[b.telegram_policy] ?? 5
        if (telegramLeft !== telegramRight) return telegramLeft - telegramRight
        return a.target_id.localeCompare(b.target_id)
      })
      .slice(0, 12)
  }, [deploymentLayout])

  const visibleDelegableCapabilities = useMemo(() => {
    if (!proactiveOperations) return []
    const riskPriority = { critical: 0, high: 1, medium: 2, low: 3 } as Record<string, number>
    return [...proactiveOperations.delegable_capabilities]
      .sort((a, b) => {
        const riskLeft = riskPriority[a.risk_tier] ?? 4
        const riskRight = riskPriority[b.risk_tier] ?? 4
        if (riskLeft !== riskRight) return riskLeft - riskRight
        return a.capability_id.localeCompare(b.capability_id)
      })
      .slice(0, 8)
  }, [proactiveOperations])

  const visibleVersionDomains = useMemo(() => {
    if (!proactiveOperations) return []
    const ownerPriority = { openclaw: 0, hermes: 1, nemotron: 2 } as Record<string, number>
    return [...proactiveOperations.version_lifecycle_domains]
      .sort((a, b) => {
        const ownerLeft = ownerPriority[a.primary_owner] ?? 3
        const ownerRight = ownerPriority[b.primary_owner] ?? 3
        if (ownerLeft !== ownerRight) return ownerLeft - ownerRight
        return a.domain_id.localeCompare(b.domain_id)
      })
      .slice(0, 8)
  }, [proactiveOperations])

  const visibleHostInventory = useMemo(() => {
    if (!hostStatefulInventory) return []
    return [...hostStatefulInventory.host_inventory]
      .sort((a, b) => {
        if (a.maintenance_window_required !== b.maintenance_window_required) {
          return a.maintenance_window_required ? -1 : 1
        }
        return a.host_id.localeCompare(b.host_id)
      })
      .slice(0, 5)
  }, [hostStatefulInventory])

  const visibleStatefulServices = useMemo(() => {
    if (!hostStatefulInventory) return []
    return [...hostStatefulInventory.stateful_services]
      .sort((a, b) => {
        if (a.backup_required_before_change !== b.backup_required_before_change) {
          return a.backup_required_before_change ? -1 : 1
        }
        return a.service_id.localeCompare(b.service_id)
      })
      .slice(0, 8)
  }, [hostStatefulInventory])

  const visibleProofLevels = useMemo(() => {
    if (!interactionLearningProof) return []
    const priority = {
      blocked_by_gate: 0,
      live_pending: 1,
      proof_surface_ready: 2,
      contract_ready: 3,
    } as Record<string, number>
    return [...interactionLearningProof.proof_ladder]
      .sort((a, b) => {
        const left = priority[a.status] ?? 4
        const right = priority[b.status] ?? 4
        if (left !== right) return left - right
        return a.level_id.localeCompare(b.level_id)
      })
  }, [interactionLearningProof])

  const visibleProofSignals = useMemo(() => {
    if (!interactionLearningProof) return []
    const priority = {
      live_verified: 0,
      live_pending: 1,
      contract_defined: 2,
      blocked_by_gate: 3,
    } as Record<string, number>
    return [...interactionLearningProof.proof_signals]
      .sort((a, b) => {
        const left = priority[a.current_state] ?? 4
        const right = priority[b.current_state] ?? 4
        if (left !== right) return left - right
        return a.signal_id.localeCompare(b.signal_id)
      })
      .slice(0, 6)
  }, [interactionLearningProof])

  const visibleRuntimeGates = useMemo(() => {
    if (!interactionLearningProof) return []
    const priority = { blocked: 0, approval_required: 1, planned: 2, ready: 3 } as Record<string, number>
    return [...interactionLearningProof.runtime_gates]
      .sort((a, b) => {
        const left = priority[a.status] ?? 4
        const right = priority[b.status] ?? 4
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
      .slice(0, 5)
  }, [interactionLearningProof])

  const visibleLiveReadModelCards = useMemo(() => {
    if (!liveReadModelGate) return []
    const priority = {
      blocked_by_writeback_gate: 0,
      approval_required: 1,
      query_contract_ready: 2,
    } as Record<string, number>
    return [...liveReadModelGate.read_model_cards]
      .sort((a, b) => {
        const left = priority[a.readiness_status] ?? 3
        const right = priority[b.readiness_status] ?? 3
        if (left !== right) return left - right
        return a.card_id.localeCompare(b.card_id)
      })
  }, [liveReadModelGate])

  const visibleLiveReadModelGates = useMemo(() => {
    if (!liveReadModelGate) return []
    const priority = { blocked: 0, approval_required: 1, ready: 2 } as Record<string, number>
    return [...liveReadModelGate.worker_gate_plan]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
  }, [liveReadModelGate])

  const visibleRedisDryRunSteps = useMemo(() => {
    if (!redisDryRunGate) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...redisDryRunGate.dry_run_steps]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.step_id.localeCompare(b.step_id)
      })
  }, [redisDryRunGate])

  const visibleRedisHandoffLanes = useMemo(() => {
    if (!redisDryRunGate) return []
    const priority = { blocked_by_runtime_gate: 0, approval_required: 1, contract_ready: 2 } as Record<string, number>
    return [...redisDryRunGate.handoff_lanes]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.lane_id.localeCompare(b.lane_id)
      })
  }, [redisDryRunGate])

  const visibleLearningWritebackGates = useMemo(() => {
    if (!learningWritebackPackage) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...learningWritebackPackage.review_gates]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
  }, [learningWritebackPackage])

  const visibleLearningWritebackLanes = useMemo(() => {
    if (!learningWritebackPackage) return []
    const priority = { blocked_by_runtime_gate: 0, approval_required: 1, contract_ready: 2 } as Record<string, number>
    return [...learningWritebackPackage.learning_lanes]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.lane_id.localeCompare(b.lane_id)
      })
  }, [learningWritebackPackage])

  const visibleTelegramReceiptGates = useMemo(() => {
    if (!telegramReceiptPackage) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...telegramReceiptPackage.receipt_gates]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
  }, [telegramReceiptPackage])

  const visibleTelegramReceiptLanes = useMemo(() => {
    if (!telegramReceiptPackage) return []
    const priority = { blocked_by_runtime_gate: 0, approval_required: 1, contract_ready: 2 } as Record<string, number>
    return [...telegramReceiptPackage.receipt_lanes]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.lane_id.localeCompare(b.lane_id)
      })
  }, [telegramReceiptPackage])

  const visibleOwnerApprovedLearningActions = useMemo(() => {
    if (!ownerApprovedLearningDryRun) return []
    const priority = { approval_required: 0, ready_for_owner: 1, blocked_by_runtime_gate: 2 } as Record<string, number>
    return [...ownerApprovedLearningDryRun.operator_actions]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.action_id.localeCompare(b.action_id)
      })
  }, [ownerApprovedLearningDryRun])

  const visibleOwnerApprovedLearningGates = useMemo(() => {
    if (!ownerApprovedLearningDryRun) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...ownerApprovedLearningDryRun.dry_run_gates]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
  }, [ownerApprovedLearningDryRun])

  const visibleRuntimeWriteTargets = useMemo(() => {
    if (!runtimeWriteGateReview) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...runtimeWriteGateReview.write_targets]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.target_id.localeCompare(b.target_id)
      })
  }, [runtimeWriteGateReview])

  const visibleRuntimeWriteGates = useMemo(() => {
    if (!runtimeWriteGateReview) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...runtimeWriteGateReview.approval_gates]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
  }, [runtimeWriteGateReview])

  const visiblePostWriteVerifierTargets = useMemo(() => {
    if (!postWriteVerifierPackage) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...postWriteVerifierPackage.verification_targets]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.target_id.localeCompare(b.target_id)
      })
  }, [postWriteVerifierPackage])

  const visiblePostWriteVerifierLanes = useMemo(() => {
    if (!postWriteVerifierPackage) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2 } as Record<string, number>
    return [...postWriteVerifierPackage.failure_lanes]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.lane_id.localeCompare(b.lane_id)
      })
  }, [postWriteVerifierPackage])

  const visiblePostWriteVerifierActions = useMemo(() => {
    if (!postWriteVerifierPackage) return []
    const priority = { approval_required: 0, ready_for_owner: 1, blocked_by_runtime_gate: 2 } as Record<string, number>
    return [...postWriteVerifierPackage.operator_actions]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.action_id.localeCompare(b.action_id)
      })
  }, [postWriteVerifierPackage])

  const visibleRuntimeVerifierEvidenceChecks = useMemo(() => {
    if (!runtimeVerifierEvidenceReview) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2, ready_for_owner: 3 } as Record<string, number>
    return [...runtimeVerifierEvidenceReview.evidence_checks]
      .sort((a, b) => {
        const left = priority[a.status] ?? 4
        const right = priority[b.status] ?? 4
        if (left !== right) return left - right
        return a.check_id.localeCompare(b.check_id)
      })
  }, [runtimeVerifierEvidenceReview])

  const visibleRuntimeVerifierReviewLanes = useMemo(() => {
    if (!runtimeVerifierEvidenceReview) return []
    const priority = { approval_required: 0, blocked_by_runtime_gate: 1, contract_ready: 2, ready_for_owner: 3 } as Record<string, number>
    return [...runtimeVerifierEvidenceReview.implementation_review_lanes]
      .sort((a, b) => {
        const left = priority[a.status] ?? 4
        const right = priority[b.status] ?? 4
        if (left !== right) return left - right
        return a.lane_id.localeCompare(b.lane_id)
      })
  }, [runtimeVerifierEvidenceReview])

  const visibleRuntimeVerifierActions = useMemo(() => {
    if (!runtimeVerifierEvidenceReview) return []
    const priority = { approval_required: 0, ready_for_owner: 1, blocked_by_runtime_gate: 2 } as Record<string, number>
    return [...runtimeVerifierEvidenceReview.operator_actions]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.action_id.localeCompare(b.action_id)
      })
  }, [runtimeVerifierEvidenceReview])

  const visibleReportCharts = useMemo(() => {
    if (!reportAutomationReview) return []
    return reportAutomationReview.report_charts.slice(0, 4)
  }, [reportAutomationReview])

  const visibleReportRecommendations = useMemo(() => {
    if (!reportAutomationReview) return []
    const priority = { critical: 0, high: 0, medium: 1, low: 2 } as Record<string, number>
    return [...reportAutomationReview.analysis_recommendations]
      .sort((a, b) => {
        const left = priority[a.risk_tier] ?? 3
        const right = priority[b.risk_tier] ?? 3
        if (left !== right) return left - right
        return Number(b.approval_required) - Number(a.approval_required)
      })
      .slice(0, 5)
  }, [reportAutomationReview])

  const visibleReportRuntimeLanes = useMemo(() => {
    if (!reportRuntimeReadiness) return []
    const priority = { blocked_by_runtime_gate: 0, ready_for_owner_review: 1 } as Record<string, number>
    return [...reportRuntimeReadiness.runtime_lanes]
      .sort((a, b) => {
        const left = priority[a.contract_status] ?? 2
        const right = priority[b.contract_status] ?? 2
        if (left !== right) return left - right
        return a.lane_id.localeCompare(b.lane_id)
      })
      .slice(0, 7)
  }, [reportRuntimeReadiness])

  const visibleReportRuntimeDecisions = useMemo(() => {
    if (!reportRuntimeReadiness) return []
    const statusPriority = { approval_required: 0, blocked_by_runtime_gate: 1, ready_for_review: 2 } as Record<string, number>
    const riskPriority = { critical: 0, high: 1, medium: 2, low: 3 } as Record<string, number>
    return [...reportRuntimeReadiness.operator_decisions]
      .sort((a, b) => {
        const left = statusPriority[a.status] ?? 3
        const right = statusPriority[b.status] ?? 3
        if (left !== right) return left - right
        const leftRisk = riskPriority[a.risk_tier] ?? 4
        const rightRisk = riskPriority[b.risk_tier] ?? 4
        if (leftRisk !== rightRisk) return leftRisk - rightRisk
        return a.decision_id.localeCompare(b.decision_id)
      })
      .slice(0, 7)
  }, [reportRuntimeReadiness])

  const visibleReportTruthFindings = useMemo(() => {
    if (!reportTruthActionabilityReview) return []
    const priority = { critical: 0, high: 1, medium: 2, low: 3 } as Record<string, number>
    return [...reportTruthActionabilityReview.zero_signal_findings]
      .sort((a, b) => {
        const left = priority[a.severity] ?? 4
        const right = priority[b.severity] ?? 4
        if (left !== right) return left - right
        return a.finding_id.localeCompare(b.finding_id)
      })
  }, [reportTruthActionabilityReview])

  const visibleTelegramRouteFindings = useMemo(() => {
    if (!reportTruthActionabilityReview) return []
    const priority = {
      direct_send_path_present: 0,
      legacy_chat_env_referenced: 1,
      multiple_bot_tokens_present: 2,
    } as Record<string, number>
    return [...reportTruthActionabilityReview.telegram_route_findings]
      .sort((a, b) => {
        const left = priority[a.current_state] ?? 3
        const right = priority[b.current_state] ?? 3
        if (left !== right) return left - right
        return a.route_id.localeCompare(b.route_id)
      })
  }, [reportTruthActionabilityReview])

  const visibleReportTruthActions = useMemo(() => {
    if (!reportTruthActionabilityReview) return []
    const priority = { approval_required: 0, ready_for_owner: 1, blocked_by_runtime_gate: 2 } as Record<string, number>
    return [...reportTruthActionabilityReview.operator_actions]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.action_id.localeCompare(b.action_id)
      })
  }, [reportTruthActionabilityReview])

  const visibleOwnerDryRunGates = useMemo(() => {
    if (!ownerDryRunPackage) return []
    const priority = { approval_required: 0, approved_for_fixture_only: 1, fixture_only: 2, ready: 3 } as Record<string, number>
    return [...ownerDryRunPackage.dry_run_gates]
      .sort((a, b) => {
        const left = priority[a.status] ?? 4
        const right = priority[b.status] ?? 4
        if (left !== right) return left - right
        return a.gate_id.localeCompare(b.gate_id)
      })
  }, [ownerDryRunPackage])

  const visibleOwnerDryRunFixtures = useMemo(() => {
    if (!ownerDryRunPackage) return []
    const priority = { approved_for_fixture_only: 0, approval_required: 1, blocked_by_scope: 2 } as Record<string, number>
    return [...ownerDryRunPackage.fixture_sets]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.fixture_id.localeCompare(b.fixture_id)
      })
  }, [ownerDryRunPackage])

  const visibleOwnerDryRunSteps = useMemo(() => {
    if (!ownerDryRunPackage) return []
    const priority = { fixture_only: 0, ready: 1, blocked: 2 } as Record<string, number>
    return [...ownerDryRunPackage.simulation_steps]
      .sort((a, b) => {
        const left = priority[a.status] ?? 3
        const right = priority[b.status] ?? 3
        if (left !== right) return left - right
        return a.step_id.localeCompare(b.step_id)
      })
  }, [ownerDryRunPackage])

  const visibleReadinessRows = useMemo(() => {
    if (!backupReadiness) return []
    const priority = { blocked: 0, action_required: 1, deferred: 2, ready: 3 } as Record<string, number>
    return [...backupReadiness.readiness_rows]
      .sort((a, b) => {
        const left = priority[a.overall_readiness] ?? 4
        const right = priority[b.overall_readiness] ?? 4
        if (left !== right) return left - right
        return a.target_id.localeCompare(b.target_id)
      })
      .slice(0, 8)
  }, [backupReadiness])

  const visibleBackupTargets = useMemo(() => {
    if (!backupTargets) return []
    const priority = { critical: 0, high: 1, medium: 2, low: 3 } as Record<string, number>
    return [...backupTargets.backup_targets]
      .sort((a, b) => {
        const left = priority[a.risk_level] ?? 4
        const right = priority[b.risk_level] ?? 4
        if (left !== right) return left - right
        return a.target_id.localeCompare(b.target_id)
      })
      .slice(0, 6)
  }, [backupTargets])

  const visibleOffsiteEscrowCards = useMemo(() => {
    if (!offsiteEscrow) return []
    const priority = { blocked: 0, action_required: 1, verified: 2 } as Record<string, number>
    return [...offsiteEscrow.readiness_cards].sort((a, b) => {
      const left = priority[a.readiness] ?? 3
      const right = priority[b.readiness] ?? 3
      if (left !== right) return left - right
      return a.card_id.localeCompare(b.card_id)
    })
  }, [offsiteEscrow])

  const visibleRuntimeSurfaces = useMemo(() => {
    if (!runtimeSurface) return []
    const priority = { missing: 0, action_required: 1, blocked: 2, manifest_mapped: 3 } as Record<string, number>
    return [...runtimeSurface.runtime_surfaces]
      .sort((a, b) => {
        const left = priority[a.status] ?? 4
        const right = priority[b.status] ?? 4
        if (left !== right) return left - right
        return a.surface_id.localeCompare(b.surface_id)
      })
      .slice(0, 8)
  }, [runtimeSurface])

  const visibleGiteaWorkflows = useMemo(() => {
    if (!giteaHealth) return []
    const priority = { comment_ambiguous: 0, owner_attestation_required: 1, host_runner_mapped: 2 } as Record<string, number>
    return [...giteaHealth.workflow_records]
      .sort((a, b) => {
        const left = priority[a.runner_evidence_status] ?? 3
        const right = priority[b.runner_evidence_status] ?? 3
        if (left !== right) return left - right
        return a.workflow_id.localeCompare(b.workflow_id)
      })
  }, [giteaHealth])

  const visibleRunnerContracts = useMemo(() => {
    if (!giteaHealth) return []
    const priority = {
      action_required: 0,
      dry_run_only: 1,
      prepared_not_applied_by_snapshot: 2,
      manifest_mapped: 3,
    } as Record<string, number>
    return [...giteaHealth.runner_contracts].sort((a, b) => {
      const left = priority[a.status] ?? 4
      const right = priority[b.status] ?? 4
      if (left !== right) return left - right
      return a.contract_id.localeCompare(b.contract_id)
    })
  }, [giteaHealth])

  const visibleObservabilitySurfaces = useMemo(() => {
    if (!observabilityMatrix) return []
    const priority = { action_required: 0, blocked: 1, verified: 2 } as Record<string, number>
    return [...observabilityMatrix.observability_surfaces].sort((a, b) => {
      const left = priority[a.status] ?? 3
      const right = priority[b.status] ?? 3
      if (left !== right) return left - right
      return a.surface_id.localeCompare(b.surface_id)
    })
  }, [observabilityMatrix])

  const visibleNoiseOpportunities = useMemo(() => {
    if (!observabilityMatrix) return []
    const priority = { approval_required: 0, ready_for_proposal: 1, preserved: 2, deferred: 3 } as Record<string, number>
    return [...observabilityMatrix.noise_reduction_opportunities].sort((a, b) => {
      const left = priority[a.status] ?? 3
      const right = priority[b.status] ?? 3
      if (left !== right) return left - right
      return a.opportunity_id.localeCompare(b.opportunity_id)
    })
  }, [observabilityMatrix])

  const visibleProviderRoutes = useMemo(() => {
    if (!providerRouteMatrix) return []
    const priority = { action_required: 0, blocked: 1, verified: 2 } as Record<string, number>
    return [...providerRouteMatrix.provider_routes].sort((a, b) => {
      const left = priority[a.status] ?? 3
      const right = priority[b.status] ?? 3
      if (left !== right) return left - right
      return a.route_id.localeCompare(b.route_id)
    })
  }, [providerRouteMatrix])

  const visibleServiceHealthTargets = useMemo(() => {
    if (!serviceHealthGapMatrix) return []
    const priority = { action_required: 0, blocked: 1, verified: 2 } as Record<string, number>
    return [...serviceHealthGapMatrix.service_health_targets].sort((a, b) => {
      const left = priority[a.status] ?? 3
      const right = priority[b.status] ?? 3
      if (left !== right) return left - right
      return a.target_id.localeCompare(b.target_id)
    })
  }, [serviceHealthGapMatrix])

  const visibleServiceHealthEvidenceCards = useMemo(() => {
    return visibleServiceHealthTargets.map(target => ({
      target,
      primaryEvidence: target.evidence_refs[0] ?? null,
      extraEvidenceCount: Math.max(0, target.evidence_refs.length - 1),
    }))
  }, [visibleServiceHealthTargets])

  if (loading) {
    return (
      <div style={{ padding: 20, display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-kpi-grid">
        {[0, 1, 2, 3].map(i => (
          <GlassCard key={i} variant="subtle" padding="md">
            <div style={{ width: 90, height: 10, borderRadius: 4, background: '#e0ddd4', animation: 'pulse 1.5s infinite', marginBottom: 10, animationDelay: `${i * 0.08}s` }} />
            <div style={{ width: 54, height: 26, borderRadius: 4, background: '#e0ddd4', animation: 'pulse 1.5s infinite' }} />
          </GlassCard>
        ))}
      </div>
    )
  }

  if (error || !snapshot || !backlog || !backupTargets || !backupReadiness || !backupPolicy || !offsiteEscrow || !giteaHealth || !observabilityMatrix || !providerRouteMatrix || !deploymentLayout || !proactiveOperations || !interactionLearningProof || !liveReadModelGate || !redisDryRunGate || !learningWritebackPackage || !telegramReceiptPackage || !ownerApprovedLearningDryRun || !runtimeWriteGateReview || !postWriteVerifierPackage || !runtimeVerifierEvidenceReview || !reportAutomationReview || !reportRuntimeReadiness || !reportTruthActionabilityReview || !ownerDryRunPackage || !hostStatefulInventory || !serviceHealthGapMatrix || !serviceHealthNotificationPolicy) {
    return (
      <div style={{ padding: 20 }}>
        <GlassCard variant="subtle" padding="lg">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: '24px 0' }}>
            <AlertTriangle size={24} style={{ color: '#F59E0B' }} />
            <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 12, color: '#87867f' }}>
              {t('error')}
            </span>
            <button
              onClick={fetchSnapshot}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
                padding: '6px 14px',
                border: '0.5px solid #d97757',
                borderRadius: 6,
                background: 'transparent',
                color: '#d97757',
                cursor: 'pointer',
                fontFamily: "'DM Mono', monospace",
                fontSize: 11,
              }}
            >
              <RefreshCw size={12} />
              {t('retry')}
            </button>
          </div>
        </GlassCard>
      </div>
    )
  }

  const blockedAssets = snapshot.assets.filter(asset => asset.status === 'blocked').length
  const criticalAssets = snapshot.assets.filter(asset => asset.risk_level === 'critical').length
  const completedTasks = snapshot.tasks.filter(task => task.status === 'done').length
  const p1BacklogCount = backlog.rollups.by_priority.P1 ?? 0
  const readyBackupRows = backupReadiness.rollups.by_overall_readiness.ready ?? 0
  const actionRequiredBackupRows = backupReadiness.rollups.by_overall_readiness.action_required ?? 0
  const blockedBackupRows = backupReadiness.rollups.by_overall_readiness.blocked ?? 0
  const suppressedSuccessRules = backupPolicy.rollups.by_decision.suppress_immediate_success ?? 0
  const immediateEscalationRules = backupPolicy.rollups.by_decision.escalate_immediate ?? 0
  const verifiedOffsiteCards = offsiteEscrow.rollups.by_readiness.verified ?? 0
  const actionRequiredOffsiteCards = offsiteEscrow.rollups.by_readiness.action_required ?? 0
  const blockedEscrowCards = offsiteEscrow.rollups.by_readiness.blocked ?? 0
  const executionBlockedCards = offsiteEscrow.rollups.execution_blocked_card_ids.length
  const runtimeActionRequired = runtimeSurface?.rollups.action_required_surface_ids.length ?? 0
  const runtimeSecrets = runtimeSurface?.rollups.secret_surface_ids.length ?? 0
  const runtimeLiveMissing = runtimeSurface?.rollups.live_check_missing_surface_ids.length ?? 0
  const runtimeBoundComponents = runtimeSurface?.rollups.source_components_with_runtime_binding ?? 0
  const giteaRunnerActions = giteaHealth.rollups.workflow_ids_requiring_runner_attestation.length
  const giteaQuietPolicies = giteaHealth.rollups.notification_contracts_quiet_success_count
  const observabilityActions = observabilityMatrix.rollups.surface_ids_requiring_action.length
  const observabilityProposalCount = observabilityMatrix.rollups.noise_reduction_opportunities_total
  const observabilityClassificationGaps = observabilityMatrix.rollups.classification_gap_ids.length
  const observabilityApprovalRequired = observabilityMatrix.rollups.approval_required_opportunity_ids.length
  const providerRouteActions = providerRouteMatrix.rollups.route_ids_requiring_action.length
  const providerRouteGateApprovals = providerRouteMatrix.rollups.candidate_gate_ids_requiring_approval.length
  const providerSourceGaps = providerRouteMatrix.rollups.source_gap_ids.length
  const providerBlockedRoutes = providerRouteMatrix.rollups.by_status.blocked ?? 0
  const providerRouteDeniedCount = (
    providerRouteMatrix.rollups.provider_switch_allowed_count
    + providerRouteMatrix.rollups.paid_api_call_allowed_count
    + providerRouteMatrix.rollups.shadow_or_canary_allowed_count
    + providerRouteMatrix.rollups.runtime_route_change_allowed_count
  )
  const deploymentLayoutTargets = deploymentLayout.rollups.total_targets
  const deploymentLayoutOpenClawTargets = deploymentLayout.rollups.by_primary_agent.openclaw ?? 0
  const deploymentLayoutHermesTargets = deploymentLayout.rollups.by_primary_agent.hermes ?? 0
  const deploymentLayoutNemotronTargets = deploymentLayout.rollups.by_primary_agent.nemotron ?? 0
  const deploymentLayoutBlockedTargets = deploymentLayout.rollups.blocked_target_ids.length
  const deploymentLayoutApprovalTargets = deploymentLayout.rollups.approval_required_target_ids.length
  const proactiveOverall = proactiveOperations.program_status.overall_completion_percent
  const proactiveDelegableCapabilities = proactiveOperations.rollups.delegable_capability_count
  const proactiveApprovalCapabilities = proactiveOperations.rollups.approval_required_capability_count
  const proactiveBlockedVersionDomains = proactiveOperations.rollups.blocked_update_domain_ids.length
  const proactiveTelegramActionRequired = proactiveOperations.rollups.telegram_action_required_capability_ids.length
  const proactiveAutoExecuteAllowed = proactiveOperations.rollups.auto_execute_allowed_count
  const proofOverall = interactionLearningProof.program_status.overall_completion_percent
  const proofContractReadyLevels = interactionLearningProof.rollups.contract_ready_level_count
  const proofLivePendingLevels = interactionLearningProof.rollups.live_pending_level_ids.length
  const proofLiveSessions = interactionLearningProof.rollups.active_live_agent_sessions
  const proofLearningWrites = interactionLearningProof.rollups.live_learning_writes_24h
  const proofTelegramReceipts = interactionLearningProof.rollups.telegram_digest_receipts_24h
  const proofVisibleSurfaces = interactionLearningProof.rollups.operator_surface_count
  const proofSignalCount = interactionLearningProof.rollups.signal_count
  const proofBlockedGates = interactionLearningProof.rollups.blocked_gate_ids.length
  const liveReadModelOverall = liveReadModelGate.program_status.overall_completion_percent
  const liveReadModelReadyCards = liveReadModelGate.rollups.query_contract_ready_card_ids.length
  const liveReadModelApprovalGates = liveReadModelGate.rollups.approval_required_gate_ids.length
  const liveReadModelNoWriteSmokes = liveReadModelGate.rollups.no_write_smoke_count
  const liveReadModelLiveTotal = liveReadModelGate.rollups.live_truth_count_total
  const liveReadModelForbiddenContent = liveReadModelGate.rollups.forbidden_frontend_content_count
  const redisDryRunOverall = redisDryRunGate.program_status.overall_completion_percent
  const redisDryRunSteps = redisDryRunGate.rollups.dry_run_step_count
  const redisHandoffLanes = redisDryRunGate.rollups.handoff_lane_count
  const redisApprovalSteps = redisDryRunGate.rollups.approval_required_step_ids.length
  const redisBlockedActions = redisDryRunGate.rollups.blocked_runtime_action_count
  const redisLiveTotal = redisDryRunGate.rollups.live_truth_count_total
  const learningWritebackOverall = learningWritebackPackage.program_status.overall_completion_percent
  const learningWritebackGates = learningWritebackPackage.rollups.review_gate_count
  const learningWritebackLanes = learningWritebackPackage.rollups.learning_lane_count
  const learningWritebackApprovals = learningWritebackPackage.rollups.approval_required_gate_ids.length
  const learningWritebackBlockedWrites = learningWritebackPackage.rollups.blocked_write_action_count
  const learningWritebackLiveWrites = learningWritebackPackage.rollups.live_write_count_total
  const telegramReceiptOverall = telegramReceiptPackage.program_status.overall_completion_percent
  const telegramReceiptGates = telegramReceiptPackage.rollups.receipt_gate_count
  const telegramReceiptLanes = telegramReceiptPackage.rollups.receipt_lane_count
  const telegramReceiptApprovals = telegramReceiptPackage.rollups.approval_required_gate_ids.length
  const telegramReceiptBlockedActions = telegramReceiptPackage.rollups.blocked_runtime_action_count
  const telegramReceiptLiveTotal = telegramReceiptPackage.rollups.live_receipt_count_total
  const ownerApprovedLearningOverall = ownerApprovedLearningDryRun.program_status.overall_completion_percent
  const ownerApprovedLearningActions = ownerApprovedLearningDryRun.rollups.operator_action_count
  const ownerApprovedLearningGates = ownerApprovedLearningDryRun.rollups.dry_run_gate_count
  const ownerApprovedLearningApprovals = ownerApprovedLearningDryRun.rollups.approval_required_gate_ids.length
  const ownerApprovedLearningBlockedWrites = ownerApprovedLearningDryRun.rollups.blocked_write_action_count
  const ownerApprovedLearningPreviewOutputs = ownerApprovedLearningDryRun.rollups.preview_output_count
  const ownerApprovedLearningGenerated = ownerApprovedLearningDryRun.rollups.dry_run_preview_generated_count
  const runtimeWriteGateOverall = runtimeWriteGateReview.program_status.overall_completion_percent
  const runtimeWriteTargets = runtimeWriteGateReview.rollups.write_target_count
  const runtimeWriteGates = runtimeWriteGateReview.rollups.approval_gate_count
  const runtimeWriteApprovals = runtimeWriteGateReview.rollups.approval_required_gate_ids.length
  const runtimeWriteBlockedActions = runtimeWriteGateReview.rollups.blocked_runtime_action_count
  const runtimeWriteLiveTotal = runtimeWriteGateReview.rollups.live_write_count_total
  const postWriteVerifierOverall = postWriteVerifierPackage.program_status.overall_completion_percent
  const postWriteVerifierTargets = postWriteVerifierPackage.rollups.verification_target_count
  const postWriteVerifierFailureLanes = postWriteVerifierPackage.rollups.failure_lane_count
  const postWriteVerifierActions = postWriteVerifierPackage.rollups.operator_action_count
  const postWriteVerifierApprovals = postWriteVerifierPackage.rollups.approval_required_action_ids.length
  const postWriteVerifierBlockedActions = postWriteVerifierPackage.rollups.blocked_runtime_action_count
  const postWriteVerifierLiveTotal = postWriteVerifierPackage.rollups.live_verifier_execution_count
  const runtimeVerifierReviewOverall = runtimeVerifierEvidenceReview.program_status.overall_completion_percent
  const runtimeVerifierEvidenceChecks = runtimeVerifierEvidenceReview.rollups.evidence_check_count
  const runtimeVerifierReviewLanes = runtimeVerifierEvidenceReview.rollups.implementation_review_lane_count
  const runtimeVerifierActions = runtimeVerifierEvidenceReview.rollups.operator_action_count
  const runtimeVerifierApprovals = runtimeVerifierEvidenceReview.rollups.approval_required_action_ids.length
  const runtimeVerifierBlockedActions = runtimeVerifierEvidenceReview.rollups.blocked_runtime_action_count
  const runtimeVerifierLiveTotal = runtimeVerifierEvidenceReview.rollups.live_verifier_execution_count
  const reportAutomationOverall = reportAutomationReview.program_status.overall_completion_percent
  const reportCadenceCount = reportAutomationReview.rollups.report_cadence_count
  const reportAgentCount = reportAutomationReview.rollups.agent_count
  const reportWorkloadTotal = reportAutomationReview.rollups.workload_unit_total
  const reportWorkloadDone = reportAutomationReview.rollups.workload_done_total
  const reportRecommendations = reportAutomationReview.rollups.recommendation_count
  const reportApprovalRecommendations = reportAutomationReview.rollups.approval_required_recommendation_ids.length
  const reportAutoEnabled = reportAutomationReview.rollups.current_auto_execution_enabled_count
  const reportLiveDelivery = reportAutomationReview.rollups.live_report_delivery_count
  const reportLiveOptimization = reportAutomationReview.rollups.live_auto_optimization_count
  const reportRuntimeOverall = reportRuntimeReadiness.program_status.overall_completion_percent
  const reportRuntimeLanes = reportRuntimeReadiness.rollups.runtime_lane_count
  const reportRuntimeReady = reportRuntimeReadiness.rollups.ready_contract_count
  const reportRuntimeBlocked = reportRuntimeReadiness.rollups.blocked_contract_count
  const reportRuntimeApprovals = reportRuntimeReadiness.rollups.approval_required_decision_ids.length
  const reportRuntimeEnabled = reportRuntimeReadiness.rollups.current_enabled_count
  const reportRuntimeLiveDelivery = reportRuntimeReadiness.rollups.live_report_delivery_count
  const reportRuntimeQueueWrites = reportRuntimeReadiness.rollups.telegram_gateway_queue_write_count
  const reportRuntimeAiRuns = reportRuntimeReadiness.rollups.live_ai_analysis_count
  const reportRuntimeMediumLowRuns = reportRuntimeReadiness.rollups.live_medium_low_auto_execution_count
  const reportTruthOverall = reportTruthActionabilityReview.program_status.overall_completion_percent
  const reportTruthFindings = reportTruthActionabilityReview.rollups.zero_signal_finding_count
  const reportTruthCritical = reportTruthActionabilityReview.rollups.critical_finding_count
  const reportTruthCadences = reportTruthActionabilityReview.rollups.cadence_contract_count
  const reportTruthMissingCadence = reportTruthActionabilityReview.rollups.missing_cadence_contract_count
  const reportTruthRouteFindings = reportTruthActionabilityReview.rollups.telegram_route_finding_count
  const reportTruthLegacyRoutes = reportTruthActionabilityReview.rollups.legacy_or_direct_route_count
  const reportTruthActions = reportTruthActionabilityReview.rollups.operator_action_count
  const reportTruthApprovals = reportTruthActionabilityReview.rollups.approval_required_action_ids.length
  const reportTruthBlockedActions = reportTruthActionabilityReview.rollups.blocked_runtime_action_count
  const ownerDryRunOverall = ownerDryRunPackage.program_status.overall_completion_percent
  const ownerDryRunFixtures = ownerDryRunPackage.rollups.fixture_set_count
  const ownerDryRunGates = ownerDryRunPackage.rollups.dry_run_gate_count
  const ownerDryRunApprovals = ownerDryRunPackage.rollups.approval_required_gate_ids.length
  const ownerDryRunBlockedActions = ownerDryRunPackage.rollups.blocked_runtime_action_count
  const ownerDryRunLiveTotal = (
    ownerDryRunPackage.rollups.live_write_count_total
    + ownerDryRunPackage.rollups.live_send_count_total
    + ownerDryRunPackage.rollups.live_receipt_count_total
  )
  const hostReadonlyDeniedCount = (
    hostStatefulInventory.rollups.ssh_login_allowed_count
    + hostStatefulInventory.rollups.kubectl_command_execution_allowed_count
    + hostStatefulInventory.rollups.apt_upgrade_allowed_count
    + hostStatefulInventory.rollups.k3s_upgrade_allowed_count
    + hostStatefulInventory.rollups.node_drain_allowed_count
    + hostStatefulInventory.rollups.reboot_allowed_count
    + hostStatefulInventory.rollups.stateful_service_restart_allowed_count
    + hostStatefulInventory.rollups.telegram_direct_send_allowed_count
    + hostStatefulInventory.rollups.conversation_transcript_allowed_count
  )
  const hostRedactionLocked = (
    hostStatefulInventory.display_redaction_contract.conversation_transcript_display_allowed === false
    && hostStatefulInventory.display_redaction_contract.redaction_required === true
  )
  const hostTelegramDirectSendAllowed = hostStatefulInventory.telegram_policy.direct_send_allowed ? 1 : 0
  const hostTelegramGatewayWriteAllowed = hostStatefulInventory.telegram_policy.gateway_queue_write_allowed ? 1 : 0
  const serviceHealthActions = serviceHealthGapMatrix.rollups.target_ids_requiring_action.length
  const serviceHealthStaleGaps = serviceHealthGapMatrix.rollups.stale_endpoint_ids.length
  const serviceHealthOperatorReviews = serviceHealthGapMatrix.rollups.health_gap_ids.length
  const serviceHealthDeniedCount = (
    serviceHealthGapMatrix.rollups.active_probe_allowed_count
    + serviceHealthGapMatrix.rollups.service_restart_allowed_count
    + serviceHealthGapMatrix.rollups.endpoint_change_allowed_count
    + serviceHealthGapMatrix.rollups.notification_send_allowed_count
    + serviceHealthGapMatrix.rollups.runtime_execution_allowed_count
  )
  const serviceHealthImmediateEscalations = serviceHealthNotificationPolicy.rollups.immediate_escalation_rule_ids.length
  const serviceHealthSuppressedSuccess = serviceHealthNotificationPolicy.rollups.suppressed_success_rule_ids.length
  const serviceHealthActionRequiredRules = serviceHealthNotificationPolicy.rollups.action_required_rule_ids.length
  const serviceHealthNotificationAllowedCount = serviceHealthNotificationPolicy.rollups.notification_send_allowed_count
  const serviceHealthRedactionCategoryCount = serviceHealthNotificationPolicy.display_redaction_contract.forbidden_frontend_content.length
  const serviceHealthForbiddenFieldCount = serviceHealthNotificationPolicy.message_template_contract.forbidden_fields.length
  const serviceHealthRedactionLocked = (
    serviceHealthNotificationPolicy.display_redaction_contract.conversation_transcript_display_allowed === false
    && serviceHealthNotificationPolicy.display_redaction_contract.redaction_required === true
  )
  const backlogProgressPercent = backlog.progress_summary.overall_percent
  const explicitApprovalItemCount = backlog.item_approval_boundary_rollup.items_requiring_explicit_approval.length
  const taskBoundaryCount = snapshot.task_approval_boundary_rollup.total_tasks
  const explicitApprovalTaskCount = snapshot.task_approval_boundary_rollup.tasks_requiring_explicit_approval.length
  const totalTasks = Math.max(1, snapshot.tasks.length)
  const readOnlyTasks = snapshot.task_approval_boundary_rollup.by_mode.read_only_allowed ?? 0
  const completedTaskCoverage = Math.round((completedTasks / totalTasks) * 100)
  const readOnlyEvidenceCoverage = Math.round((readOnlyTasks / Math.max(1, taskBoundaryCount)) * 100)
  const boundaryClarityCoverage = Math.round(((taskBoundaryCount - explicitApprovalTaskCount) / Math.max(1, taskBoundaryCount)) * 100)
  const runtimeBindingCoverage = runtimeSurface
    ? Math.round((runtimeBoundComponents / Math.max(1, runtimeSurface.rollups.total_source_components)) * 100)
    : 0
  const runnerAttestationCoverage = Math.round(((giteaHealth.rollups.total_workflows - giteaRunnerActions) / Math.max(1, giteaHealth.rollups.total_workflows)) * 100)
  const quietPolicyCoverage = Math.round((giteaQuietPolicies / Math.max(1, giteaHealth.rollups.notification_contracts_total)) * 100)
  const decisionSupportCoverage = Math.round(
    completedTaskCoverage * 0.25
    + readOnlyEvidenceCoverage * 0.25
    + boundaryClarityCoverage * 0.2
    + runtimeBindingCoverage * 0.15
    + runnerAttestationCoverage * 0.1
    + quietPolicyCoverage * 0.05,
  )
  const decisionFactors = [
    {
      key: 'taskCompletion',
      value: completedTaskCoverage,
      tone: completedTaskCoverage >= 70 ? 'ok' : completedTaskCoverage >= 45 ? 'warn' : 'danger',
      detail: t('decisionSupport.details.taskCompletion', { done: completedTasks, total: snapshot.tasks.length }),
    },
    {
      key: 'readOnlyEvidence',
      value: readOnlyEvidenceCoverage,
      tone: readOnlyEvidenceCoverage >= 80 ? 'ok' : readOnlyEvidenceCoverage >= 50 ? 'warn' : 'danger',
      detail: t('decisionSupport.details.readOnlyEvidence', { readOnly: readOnlyTasks, total: taskBoundaryCount }),
    },
    {
      key: 'boundaryClarity',
      value: boundaryClarityCoverage,
      tone: boundaryClarityCoverage >= 80 ? 'ok' : boundaryClarityCoverage >= 50 ? 'warn' : 'danger',
      detail: t('decisionSupport.details.boundaryClarity', { blocked: explicitApprovalTaskCount, total: taskBoundaryCount }),
    },
    {
      key: 'runtimeBinding',
      value: runtimeBindingCoverage,
      tone: runtimeBindingCoverage >= 80 ? 'ok' : runtimeBindingCoverage >= 50 ? 'warn' : 'danger',
      detail: t('decisionSupport.details.runtimeBinding', {
        bound: runtimeBoundComponents,
        total: runtimeSurface?.rollups.total_source_components ?? 0,
      }),
    },
    {
      key: 'runnerAttestation',
      value: runnerAttestationCoverage,
      tone: runnerAttestationCoverage >= 80 ? 'ok' : runnerAttestationCoverage >= 50 ? 'warn' : 'danger',
      detail: t('decisionSupport.details.runnerAttestation', { gaps: giteaRunnerActions, total: giteaHealth.rollups.total_workflows }),
    },
    {
      key: 'quietPolicy',
      value: quietPolicyCoverage,
      tone: quietPolicyCoverage >= 80 ? 'ok' : quietPolicyCoverage >= 50 ? 'warn' : 'danger',
      detail: t('decisionSupport.details.quietPolicy', { quiet: giteaQuietPolicies, total: giteaHealth.rollups.notification_contracts_total }),
    },
  ] as const
  const decisionCoverageTone = decisionSupportCoverage >= 75 ? 'ok' : decisionSupportCoverage >= 55 ? 'warn' : 'danger'
  const blockedApprovals = Object.entries(snapshot.approval_boundaries)
    .filter(([, allowed]) => allowed === false)
    .map(([key]) => key)

  const statusLabel = (value: string) => {
    try {
      return t(`backupEvidence.statuses.${value}` as never)
    } catch {
      return value
    }
  }

  const kindLabel = (value: string) => {
    try {
      return t(`offsiteEscrow.kinds.${value}` as never)
    } catch {
      return value
    }
  }

  const boundaryActionLabel = (value: string) => {
    try {
      return t(`tasks.boundaryActions.${value}` as never)
    } catch {
      return value
    }
  }

  const runtimeKindLabel = (value: string) => {
    try {
      return t(`runtimeSurface.kinds.${value}` as never)
    } catch {
      return value
    }
  }

  const runtimeValueLabel = (value: string) => {
    try {
      return t(`runtimeSurface.values.${value}` as never)
    } catch {
      return value
    }
  }

  const giteaValueLabel = (value: string) => {
    try {
      return t(`giteaHealth.values.${value}` as never)
    } catch {
      return value
    }
  }

  const observabilityValueLabel = (value: string) => {
    try {
      return t(`observability.values.${value}` as never)
    } catch {
      return value
    }
  }

  const providerRouteValueLabel = (value: string) => {
    try {
      return t(`providerRoute.values.${value}` as never)
    } catch {
      return value
    }
  }

  const deploymentLayoutValueLabel = (group: string, value: string) => {
    try {
      return t(`deploymentLayout.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const proactiveValueLabel = (group: string, value: string) => {
    try {
      return t(`proactiveOperations.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const proactiveApprovalGateLabel = (value: string) => {
    try {
      return t(`proactiveOperations.approvalGates.${value}` as never)
    } catch {
      return value
    }
  }

  const proofValueLabel = (group: string, value: string) => {
    try {
      return t(`interactionProof.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const liveReadModelValueLabel = (group: string, value: string) => {
    try {
      return t(`liveReadModelGate.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const redisDryRunValueLabel = (group: string, value?: string) => {
    if (!value) return t('redisDryRunGate.labels.unassigned')

    try {
      return t(`redisDryRunGate.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const ownerDryRunValueLabel = (group: string, value: string) => {
    try {
      return t(`ownerDryRunPackage.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const hostStatefulValueLabel = (group: string, value: string) => {
    try {
      return t(`hostStateful.${group}.${value}` as never)
    } catch {
      return value
    }
  }

  const serviceHealthValueLabel = (value: string) => {
    try {
      return t(`serviceHealth.values.${value}` as never)
    } catch {
      return value
    }
  }

  const serviceHealthNotificationDecisionLabel = (value: string) => {
    try {
      return t(`serviceHealthNotification.decisions.${value}` as never)
    } catch {
      return value
    }
  }

  return (
    <div className="automation-inventory-tab-root" style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16, minWidth: 0 }}>
      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
            <div style={{
              width: 34,
              height: 34,
              borderRadius: 8,
              border: '0.5px solid #22C55E40',
              background: 'rgba(34,197,94,0.08)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}>
              <ShieldCheck size={17} style={{ color: '#22C55E' }} />
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 3 }}>
                <StatusOrb status="healthy" size="sm" glow />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 15, fontWeight: 700, color: '#141413' }}>
                  {t('title')}
                </span>
              </div>
              <div style={{
                fontFamily: "'DM Mono', monospace",
                fontSize: 11,
                color: '#87867f',
                maxWidth: '100%',
                overflowX: 'auto',
                overflowY: 'hidden',
                whiteSpace: 'nowrap',
              }}>
                {t('readOnly')} · {snapshot.program_status.current_task_id} → {snapshot.program_status.next_task_id}
              </div>
            </div>
          </div>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
            {t('generatedAt')} {formatDateTime(snapshot.generated_at)}
          </div>
        </div>
      </GlassCard>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)', gap: 12 }} className="automation-inventory-command-grid">
        <GlassCard variant="subtle" padding="md">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <Gauge size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('overview.title')}
                </span>
              </div>
              <Chip value={t('overview.mode')} muted />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-summary-grid">
              <SummaryTile
                label={t('overview.tiles.automation')}
                value={`${backlogProgressPercent}%`}
                detail={t('overview.details.automation', { done: backlog.progress_summary.done_items, total: backlog.progress_summary.total_items })}
                tone="ok"
                icon={<PackageCheck size={16} />}
              />
              <SummaryTile
                label={t('overview.tiles.decisionSupport')}
                value={`${decisionSupportCoverage}%`}
                detail={t('overview.details.decisionSupport', { gaps: giteaRunnerActions, live: runtimeLiveMissing })}
                tone={decisionCoverageTone}
                icon={<Target size={16} />}
              />
              <SummaryTile
                label={t('overview.tiles.runner')}
                value={`${giteaRunnerActions}/${giteaHealth.rollups.total_workflows}`}
                detail={t('overview.details.runner', { quiet: giteaQuietPolicies, notifications: giteaHealth.rollups.notification_contracts_total })}
                tone={giteaRunnerActions > 0 ? 'warn' : 'ok'}
                icon={<GitBranch size={16} />}
              />
              <SummaryTile
                label={t('overview.tiles.boundary')}
                value={`${explicitApprovalTaskCount}/${taskBoundaryCount}`}
                detail={t('overview.details.boundary', { blocked: blockedApprovals.length })}
                tone={explicitApprovalTaskCount > 0 ? 'warn' : 'ok'}
                icon={<Lock size={16} />}
              />
            </div>
          </div>
        </GlassCard>

        <GlassCard variant="subtle" padding="md">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <Target size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('decisionSupport.title')}
                </span>
              </div>
              <Chip value={t('decisionSupport.weightedScore')} muted />
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '82px minmax(0, 1fr)',
              gap: 13,
              alignItems: 'center',
              minWidth: 0,
            }} className="automation-inventory-decision-grid">
              <div style={{
                width: 82,
                height: 82,
                borderRadius: 999,
                border: `8px solid ${toneColor(decisionCoverageTone)}33`,
                color: toneColor(decisionCoverageTone),
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontFamily: "'DM Mono', monospace",
                fontSize: 18,
                fontWeight: 800,
              }}>
                {decisionSupportCoverage}%
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 11 }} className="automation-inventory-decision-factor-grid">
                {decisionFactors.map(factor => (
                  <MiniBar
                    key={factor.key}
                    label={t(`decisionSupport.factors.${factor.key}`)}
                    value={factor.value}
                    detail={factor.detail}
                    tone={factor.tone}
                  />
                ))}
              </div>
            </div>
          </div>
        </GlassCard>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
        gap: 12,
      }} className="automation-inventory-kpi-grid">
        <MetricCard label={t('metrics.progress')} value={`${snapshot.program_status.overall_completion_percent}%`} tone="ok" icon={<ShieldCheck size={16} />} />
        <MetricCard label={t('metrics.backlogProgress')} value={`${backlogProgressPercent}%`} tone="warn" icon={<PackageCheck size={16} />} />
        <MetricCard label={t('metrics.assets')} value={snapshot.assets.length} icon={<Boxes size={16} />} />
        <MetricCard label={t('metrics.backlog')} value={backlog.rollups.total_items} tone="warn" icon={<PackageCheck size={16} />} />
        <MetricCard label={t('metrics.p1Backlog')} value={p1BacklogCount} icon={<Boxes size={16} />} />
        <MetricCard label={t('metrics.blocked')} value={blockedAssets} tone={blockedAssets > 0 ? 'warn' : 'ok'} icon={<AlertTriangle size={16} />} />
        <MetricCard label={t('metrics.critical')} value={criticalAssets} tone="danger" icon={<Lock size={16} />} />
        <MetricCard label={t('metrics.taskBoundaries')} value={taskBoundaryCount} icon={<Lock size={16} />} />
        <MetricCard label={t('metrics.explicitApprovalTasks')} value={explicitApprovalTaskCount} tone={explicitApprovalTaskCount > 0 ? 'warn' : 'ok'} icon={<ShieldCheck size={16} />} />
      </div>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Route size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('deploymentLayout.title')}
              </span>
            </div>
            <Chip
              value={t('deploymentLayout.source', {
                generated: formatDateTime(deploymentLayout.generated_at),
                current: deploymentLayout.program_status.current_task_id,
                next: deploymentLayout.program_status.next_task_id,
              })}
              muted
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 12 }} className="automation-inventory-deployment-layout-kpi-grid">
            <MetricCard label={t('deploymentLayout.metrics.targets')} value={deploymentLayoutTargets} icon={<Boxes size={16} />} />
            <MetricCard label={t('deploymentLayout.metrics.openclaw')} value={deploymentLayoutOpenClawTargets} icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('deploymentLayout.metrics.hermes')} value={deploymentLayoutHermesTargets} icon={<FileText size={16} />} />
            <MetricCard label={t('deploymentLayout.metrics.nemotron')} value={deploymentLayoutNemotronTargets} tone="warn" icon={<Target size={16} />} />
            <MetricCard label={t('deploymentLayout.metrics.approval')} value={deploymentLayoutApprovalTargets} tone={deploymentLayoutApprovalTargets > 0 ? 'warn' : 'ok'} icon={<Lock size={16} />} />
            <MetricCard label={t('deploymentLayout.metrics.blocked')} value={deploymentLayoutBlockedTargets} tone={deploymentLayoutBlockedTargets > 0 ? 'danger' : 'ok'} icon={<AlertTriangle size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.25fr) minmax(0, 0.75fr)', gap: 12 }} className="automation-inventory-deployment-layout-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('deploymentLayout.targetsTitle')}
                </span>
                <Chip value={t('deploymentLayout.targetsShown', { count: visibleDeploymentTargets.length, total: deploymentLayoutTargets })} muted />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-deployment-layout-target-grid">
                {visibleDeploymentTargets.map(target => (
                  <div key={target.target_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413' }}>
                        {target.target_id}
                      </span>
                      <Chip value={deploymentLayoutValueLabel('deploymentStates', target.deployment_state)} muted={target.deployment_state === 'active_governed'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={`${t('deploymentLayout.labels.domain')}: ${deploymentLayoutValueLabel('domains', target.domain_id)}`} muted />
                      <Chip value={`${t('deploymentLayout.labels.primary')}: ${deploymentLayoutValueLabel('agents', target.primary_agent)}`} />
                      <Chip value={`${t('deploymentLayout.labels.telegram')}: ${deploymentLayoutValueLabel('telegramPolicies', target.telegram_policy)}`} muted={target.telegram_policy !== 'approval_required'} />
                      <Chip value={`${t('deploymentLayout.labels.automation')}: ${deploymentLayoutValueLabel('automationLevels', target.automation_level)}`} muted={target.automation_level === 'observe_only'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                      {target.next_action}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      {target.supporting_agents.length > 0 ? (
                        <Chip value={`${t('deploymentLayout.labels.support')}: ${target.supporting_agents.map(agent => deploymentLayoutValueLabel('agents', agent)).join(' / ')}`} muted />
                      ) : null}
                      <Chip value={`${t('deploymentLayout.labels.evidence')}: ${target.evidence_refs.length}`} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 9, minWidth: 0 }}>
                <SmallLabel>{t('deploymentLayout.agentContractTitle')}</SmallLabel>
                {deploymentLayout.agent_contracts.map(contract => (
                  <div key={contract.agent_id} style={{ display: 'flex', flexDirection: 'column', gap: 5, paddingBottom: 7, borderBottom: '0.5px solid #eee9dd' }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                      {deploymentLayoutValueLabel('agents', contract.agent_id)}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45 }}>
                      {contract.primary_specialty}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {contract.allowed_autonomy.slice(0, 2).map(item => (
                        <Chip key={`${contract.agent_id}-${item}`} value={item} muted />
                      ))}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('deploymentLayout.telegramTitle')}</SmallLabel>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {t('deploymentLayout.telegramDetail', {
                    gateway: deploymentLayout.telegram_contract.primary_gateway,
                    classes: deploymentLayout.telegram_contract.notification_classes.length,
                  })}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={t('deploymentLayout.redactionLocked')} />
                  <Chip value={t('deploymentLayout.directSendBlocked')} muted />
                </div>
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('deploymentLayout.learningTitle')}</SmallLabel>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {t('deploymentLayout.learningDetail', {
                    sources: deploymentLayout.learning_contract.event_sources.length,
                    loops: deploymentLayout.learning_contract.feedback_loops.length,
                    metrics: deploymentLayout.learning_contract.growth_metrics.length,
                  })}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={`${t('deploymentLayout.labels.bus')}: ${deploymentLayout.collaboration_contract.message_bus}`} muted />
                  <Chip value={t('deploymentLayout.frontendSafe')} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Layers3 size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('interactionProof.title')}
              </span>
            </div>
            <Chip
              value={t('interactionProof.source', {
                generated: formatDateTime(interactionLearningProof.generated_at),
                current: interactionLearningProof.program_status.current_task_id,
                next: interactionLearningProof.program_status.next_task_id,
              })}
              muted
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 12 }} className="automation-inventory-proof-kpi-grid">
            <MetricCard label={t('interactionProof.metrics.overall')} value={`${proofOverall}%`} tone="warn" icon={<Gauge size={16} />} />
            <MetricCard label={t('interactionProof.metrics.contractReady')} value={proofContractReadyLevels} tone="ok" icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('interactionProof.metrics.liveSessions')} value={proofLiveSessions} tone={proofLiveSessions > 0 ? 'ok' : 'warn'} icon={<Route size={16} />} />
            <MetricCard label={t('interactionProof.metrics.learningWrites')} value={proofLearningWrites} tone={proofLearningWrites > 0 ? 'ok' : 'warn'} icon={<Database size={16} />} />
            <MetricCard label={t('interactionProof.metrics.telegramReceipts')} value={proofTelegramReceipts} tone={proofTelegramReceipts > 0 ? 'ok' : 'warn'} icon={<BellRing size={16} />} />
            <MetricCard label={t('interactionProof.metrics.blockedGates')} value={proofBlockedGates} tone={proofBlockedGates > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
          </div>

          <div style={{
            padding: 12,
            border: '0.5px solid #f0c58d',
            borderRadius: 7,
            background: 'rgba(245,158,11,0.08)',
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) auto',
            gap: 12,
            alignItems: 'center',
          }} className="automation-inventory-proof-truth-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
              <SmallLabel>{t('interactionProof.truthTitle')}</SmallLabel>
              <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#5f5a4f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                {interactionLearningProof.live_truth.truth_note}
              </span>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: 6, minWidth: 0 }}>
              <Chip value={t('interactionProof.truthFlags.runtime', { value: String(interactionLearningProof.live_truth.runtime_loop_enabled) })} />
              <Chip value={t('interactionProof.truthFlags.readback', { value: String(interactionLearningProof.live_truth.live_agent_session_readback_enabled) })} />
              <Chip value={t('interactionProof.truthFlags.telegram', { value: String(interactionLearningProof.live_truth.telegram_send_enabled) })} />
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #cdd9c4', borderRadius: 7, background: '#fbfdf8', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <FileText size={14} style={{ color: '#16a34a' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('reportAutomationReview.title')}
                </span>
              </div>
              <Chip
                value={t('reportAutomationReview.source', {
                  generated: formatDateTime(reportAutomationReview.generated_at),
                  current: reportAutomationReview.program_status.current_task_id,
                  next: reportAutomationReview.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('reportAutomationReview.metrics.overall')} value={`${reportAutomationOverall}%`} tone="ok" icon={<Gauge size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.cadences')} value={reportCadenceCount} tone="ok" icon={<RefreshCw size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.agents')} value={reportAgentCount} tone="ok" icon={<Boxes size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.workload')} value={reportWorkloadTotal} tone="warn" icon={<Layers3 size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.done')} value={reportWorkloadDone} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.recommendations')} value={reportRecommendations} tone="warn" icon={<Target size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.approval')} value={reportApprovalRecommendations} tone={reportApprovalRecommendations > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('reportAutomationReview.metrics.autoEnabled')} value={reportAutoEnabled} tone={reportAutoEnabled === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #e4eadf', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('reportAutomationReview.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {reportAutomationReview.report_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('reportAutomationReview.flags.daily', { value: String(reportAutomationReview.report_truth.daily_report_ready) })} />
                    <Chip value={t('reportAutomationReview.flags.weekly', { value: String(reportAutomationReview.report_truth.weekly_report_ready) })} />
                    <Chip value={t('reportAutomationReview.flags.monthly', { value: String(reportAutomationReview.report_truth.monthly_report_ready) })} />
                    <Chip value={t('reportAutomationReview.flags.delivery', { value: reportLiveDelivery })} muted />
                    <Chip value={t('reportAutomationReview.flags.optimization', { value: reportLiveOptimization })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #e4eadf', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('reportAutomationReview.policyTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {reportAutomationReview.risk_tier_policy.policy_summary}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('reportAutomationReview.flags.highApproval', { value: String(reportAutomationReview.report_truth.high_risk_requires_approval) })} />
                    <Chip value={t('reportAutomationReview.flags.mediumLowPolicy', { value: String(reportAutomationReview.report_truth.medium_low_auto_policy_defined) })} muted />
                    <Chip value={t('reportAutomationReview.flags.mediumLowExecution', { value: String(reportAutomationReview.report_truth.medium_low_auto_execution_enabled) })} muted />
                  </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 10 }}>
                  {reportAutomationReview.report_cadences.map(cadence => (
                    <div key={cadence.cadence_id} style={{ padding: 10, border: '0.5px solid #e4eadf', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center' }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                          {cadence.display_name}
                        </span>
                        <Chip value={redisDryRunValueLabel('agents', cadence.owner_agent)} muted />
                      </div>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {cadence.schedule}
                      </span>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={t('reportAutomationReview.labels.sections', { count: cadence.sections.length })} />
                        <Chip value={t('reportAutomationReview.labels.liveDelivery', { count: cadence.live_delivery_count })} muted />
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <SmallLabel>{t('reportAutomationReview.workloadTitle')}</SmallLabel>
                {reportAutomationReview.agent_workload_metrics.map(agent => {
                  const progress = agent.work_units_total > 0 ? Math.round((agent.work_units_done / agent.work_units_total) * 100) : 0
                  return (
                    <div key={agent.agent_id} style={{ padding: 10, border: '0.5px solid #e4eadf', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                          {agent.display_name}
                        </span>
                        <Chip value={t('reportAutomationReview.labels.workUnits', { count: agent.work_units_total })} />
                      </div>
                      <MiniBar
                        label={t('reportAutomationReview.labels.doneRatio')}
                        value={progress}
                        detail={t('reportAutomationReview.labels.doneDetail', {
                          done: agent.work_units_done,
                          total: agent.work_units_total,
                          approval: agent.work_units_waiting_approval,
                        })}
                        tone={progress >= 85 ? 'ok' : 'warn'}
                      />
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={t('reportAutomationReview.labels.targets', { count: agent.deployment_targets })} muted />
                        <Chip value={t('reportAutomationReview.labels.capabilities', { count: agent.delegable_capabilities })} muted />
                        <Chip value={t('reportAutomationReview.labels.liveRuntime', { count: agent.live_runtime_work_units_24h })} muted />
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleReportCharts.map(chart => {
                const maxValue = Math.max(...chart.series.map(item => item.value), 1)
                return (
                  <div key={chart.chart_id} style={{ padding: 10, border: '0.5px solid #e4eadf', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center' }}>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                        {chart.display_name}
                      </span>
                      <Chip value={chart.chart_type} muted />
                    </div>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {chart.operator_question}
                    </span>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                      {chart.series.map(item => (
                        <div key={`${chart.chart_id}-${item.label}`} style={{ display: 'grid', gridTemplateColumns: '88px minmax(0, 1fr) 36px', gap: 8, alignItems: 'center', minWidth: 0 }}>
                          <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#605f59', overflowWrap: 'anywhere' }}>
                            {item.label}
                          </span>
                          <div style={{ height: 7, borderRadius: 999, background: '#e7e3d8', overflow: 'hidden' }}>
                            <div style={{ height: '100%', width: `${Math.max(4, Math.round((item.value / maxValue) * 100))}%`, borderRadius: 999, background: toneColor(item.tone) }} />
                          </div>
                          <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, fontWeight: 700, color: toneColor(item.tone), textAlign: 'right' }}>
                            {item.value}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                )
              })}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleReportRecommendations.map(recommendation => {
                const tone = recommendation.risk_tier === 'high' || recommendation.risk_tier === 'critical' ? 'danger' : recommendation.risk_tier === 'medium' ? 'warn' : 'ok'
                return (
                  <div key={recommendation.recommendation_id} style={{ padding: 10, border: '0.5px solid #e4eadf', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {recommendation.display_name}
                      </span>
                      <Chip value={redisDryRunValueLabel('agents', recommendation.owner_agent)} muted />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={t(`reportAutomationReview.riskTiers.${recommendation.risk_tier}` as never)} muted={tone !== 'danger'} />
                      <Chip value={t('reportAutomationReview.labels.approvalRequired', { value: String(recommendation.approval_required) })} muted={!recommendation.approval_required} />
                    </div>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {recommendation.proposed_solution}
                    </span>
                    <Chip value={recommendation.blocked_runtime_action} muted />
                  </div>
                )
              })}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #b9d0dd', borderRadius: 7, background: '#f8fcff', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <Route size={14} style={{ color: '#0284c7' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('reportRuntimeReadiness.title')}
                </span>
              </div>
              <Chip
                value={t('reportRuntimeReadiness.source', {
                  generated: formatDateTime(reportRuntimeReadiness.generated_at),
                  current: reportRuntimeReadiness.program_status.current_task_id,
                  next: reportRuntimeReadiness.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('reportRuntimeReadiness.metrics.overall')} value={`${reportRuntimeOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.lanes')} value={reportRuntimeLanes} tone="warn" icon={<Route size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.ready')} value={reportRuntimeReady} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.blocked')} value={reportRuntimeBlocked} tone={reportRuntimeBlocked > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.approvals')} value={reportRuntimeApprovals} tone={reportRuntimeApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.enabled')} value={reportRuntimeEnabled} tone={reportRuntimeEnabled === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.delivery')} value={reportRuntimeLiveDelivery} tone={reportRuntimeLiveDelivery === 0 ? 'warn' : 'ok'} icon={<BellRing size={16} />} />
              <MetricCard label={t('reportRuntimeReadiness.metrics.mediumLow')} value={reportRuntimeMediumLowRuns} tone={reportRuntimeMediumLowRuns === 0 ? 'warn' : 'ok'} icon={<Target size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ padding: 11, border: '0.5px solid #d8e8f1', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('reportRuntimeReadiness.truthTitle')}</SmallLabel>
                <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#64727a', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {reportRuntimeReadiness.activation_truth.truth_note}
                </span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={t('reportRuntimeReadiness.flags.scheduler', { value: String(reportRuntimeReadiness.activation_truth.report_scheduler_contract_ready) })} />
                  <Chip value={t('reportRuntimeReadiness.flags.queue', { value: reportRuntimeQueueWrites })} muted />
                  <Chip value={t('reportRuntimeReadiness.flags.aiRuns', { value: reportRuntimeAiRuns })} muted />
                  <Chip value={t('reportRuntimeReadiness.flags.mediumLow', { value: reportRuntimeMediumLowRuns })} muted />
                </div>
              </div>

              <div style={{ padding: 11, border: '0.5px solid #d8e8f1', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('reportRuntimeReadiness.telegramTitle')}</SmallLabel>
                <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#64727a', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {t('reportRuntimeReadiness.telegramSummary', {
                    room: reportRuntimeReadiness.telegram_route_readiness.canonical_room,
                    secret: reportRuntimeReadiness.telegram_route_readiness.secret_ref,
                    blocked: reportRuntimeReadiness.telegram_route_readiness.blocked_route_count,
                  })}
                </span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={t('reportRuntimeReadiness.flags.gateway', { value: String(reportRuntimeReadiness.telegram_route_readiness.gateway_required) })} />
                  <Chip value={t('reportRuntimeReadiness.flags.directApi', { value: String(reportRuntimeReadiness.telegram_route_readiness.direct_bot_api_allowed) })} muted />
                  <Chip value={t('reportRuntimeReadiness.flags.deliveryVerified', { value: String(reportRuntimeReadiness.telegram_route_readiness.e2e_delivery_verified) })} muted />
                </div>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleReportRuntimeLanes.map(lane => {
                const tone = lane.contract_status === 'blocked_by_runtime_gate' ? 'danger' : lane.risk_tier === 'high' || lane.risk_tier === 'critical' ? 'warn' : 'ok'
                return (
                  <div key={lane.lane_id} style={{ padding: 10, border: '0.5px solid #d8e8f1', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {lane.display_name}
                      </span>
                      <Chip value={redisDryRunValueLabel('agents', lane.owner_agent)} muted />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={t(`reportRuntimeReadiness.statuses.${lane.contract_status}` as never)} muted={tone !== 'danger'} />
                      <Chip value={t(`reportRuntimeReadiness.riskTiers.${lane.risk_tier}` as never)} muted={tone === 'ok'} />
                      <Chip value={t('reportRuntimeReadiness.labels.liveCount', { count: lane.current_live_count_24h })} muted />
                    </div>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#64727a', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {lane.enablement_required.slice(0, 2).join(' / ')}
                    </span>
                    <Chip value={lane.target_runtime} muted />
                  </div>
                )
              })}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {reportRuntimeReadiness.automation_policies.map(policy => (
                <div key={policy.risk_id} style={{ padding: 10, border: '0.5px solid #d8e8f1', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center' }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                      {policy.display_name}
                    </span>
                    <Chip value={t('reportRuntimeReadiness.labels.enabled', { value: String(policy.current_execution_enabled) })} muted />
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('reportRuntimeReadiness.labels.autoAfterGuard', { value: String(policy.auto_allowed_after_guard) })} muted={!policy.auto_allowed_after_guard} />
                    <Chip value={t('reportRuntimeReadiness.labels.approvalRequired', { value: String(policy.approval_required) })} muted={!policy.approval_required} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#64727a', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {policy.reporting_rule}
                  </span>
                </div>
              ))}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleReportRuntimeDecisions.map(decision => (
                <div key={decision.decision_id} style={{ padding: 10, border: '0.5px solid #d8e8f1', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {decision.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('agents', decision.owner_agent)} muted />
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t(`reportRuntimeReadiness.statuses.${decision.status}` as never)} />
                    <Chip value={t('reportRuntimeReadiness.labels.approvalRequired', { value: String(decision.approval_required) })} muted={!decision.approval_required} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#64727a', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {decision.next_safe_step}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <BellRing size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('reportTruthActionabilityReview.title')}
                </span>
              </div>
              <Chip
                value={t('reportTruthActionabilityReview.source', {
                  generated: formatDateTime(reportTruthActionabilityReview.generated_at),
                  current: reportTruthActionabilityReview.program_status.current_task_id,
                  next: reportTruthActionabilityReview.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('reportTruthActionabilityReview.metrics.overall')} value={`${reportTruthOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('reportTruthActionabilityReview.metrics.findings')} value={reportTruthFindings} tone="danger" icon={<AlertTriangle size={16} />} />
              <MetricCard label={t('reportTruthActionabilityReview.metrics.critical')} value={reportTruthCritical} tone="danger" icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('reportTruthActionabilityReview.metrics.cadences')} value={reportTruthCadences} tone="warn" icon={<FileText size={16} />} />
              <MetricCard label={t('reportTruthActionabilityReview.metrics.missingCadence')} value={reportTruthMissingCadence} tone="danger" icon={<Lock size={16} />} />
              <MetricCard label={t('reportTruthActionabilityReview.metrics.telegramRoutes')} value={reportTruthRouteFindings} tone="danger" icon={<BellOff size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('reportTruthActionabilityReview.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {reportTruthActionabilityReview.report_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('reportTruthActionabilityReview.flags.allZero', { value: String(reportTruthActionabilityReview.report_truth.all_zero_weekly_report_is_actionable_anomaly) })} />
                    <Chip value={t('reportTruthActionabilityReview.flags.freshness', { value: String(reportTruthActionabilityReview.report_truth.freshness_gate_implemented) })} muted />
                    <Chip value={t('reportTruthActionabilityReview.flags.confidence', { value: String(reportTruthActionabilityReview.report_truth.source_confidence_gate_implemented) })} muted />
                    <Chip value={t('reportTruthActionabilityReview.flags.actionability', { value: String(reportTruthActionabilityReview.report_truth.actionability_score_implemented) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('reportTruthActionabilityReview.telegramTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {reportTruthActionabilityReview.telegram_routing_consolidation.routing_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('reportTruthActionabilityReview.labels.canonicalRoom', { room: reportTruthActionabilityReview.telegram_routing_consolidation.canonical_room_name })} />
                    <Chip value={reportTruthActionabilityReview.telegram_routing_consolidation.canonical_room_env} muted />
                    <Chip value={t('reportTruthActionabilityReview.flags.otherRoutes', { value: String(reportTruthActionabilityReview.telegram_routing_consolidation.other_bot_or_group_alerts_allowed) })} muted />
                    <Chip value={t('reportTruthActionabilityReview.flags.routeChange', { value: String(reportTruthActionabilityReview.telegram_routing_consolidation.route_change_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('reportTruthActionabilityReview.policyTitle')}</SmallLabel>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8 }}>
                    <SummaryTile label={t('reportTruthActionabilityReview.metrics.legacyRoutes')} value={`${reportTruthLegacyRoutes}`} detail={t('reportTruthActionabilityReview.labels.legacyRoutesDetail')} tone="danger" icon={<BellOff size={16} />} />
                    <SummaryTile label={t('reportTruthActionabilityReview.metrics.approval')} value={`${reportTruthApprovals}`} detail={t('reportTruthActionabilityReview.metrics.blocked', { count: reportTruthBlockedActions })} tone="warn" icon={<Lock size={16} />} />
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                  {visibleReportTruthFindings.map(finding => (
                    <div key={finding.finding_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35, overflowWrap: 'anywhere' }}>
                          {finding.display_name}
                        </span>
                        <Chip value={finding.severity} muted={finding.severity !== 'critical'} />
                      </div>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {finding.operator_meaning}
                      </span>
                      <Chip value={finding.blocked_runtime_action} muted />
                    </div>
                  ))}
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                  {visibleTelegramRouteFindings.map(routeFinding => (
                    <div key={routeFinding.route_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35, overflowWrap: 'anywhere' }}>
                          {routeFinding.display_name}
                        </span>
                        <Chip value={routeFinding.current_state} />
                      </div>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {routeFinding.risk}
                      </span>
                      <Chip value={routeFinding.target_state} muted />
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleReportTruthActions.map(action => (
                <div key={action.action_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {action.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', action.status)} muted={action.status !== 'approval_required'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {action.operator_instruction}
                  </span>
                  <Chip value={action.blocked_runtime_action} muted />
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <Lock size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('runtimeWriteGateReview.title')}
                </span>
              </div>
              <Chip
                value={t('runtimeWriteGateReview.source', {
                  generated: formatDateTime(runtimeWriteGateReview.generated_at),
                  current: runtimeWriteGateReview.program_status.current_task_id,
                  next: runtimeWriteGateReview.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('runtimeWriteGateReview.metrics.overall')} value={`${runtimeWriteGateOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('runtimeWriteGateReview.metrics.targets')} value={runtimeWriteTargets} tone="ok" icon={<Target size={16} />} />
              <MetricCard label={t('runtimeWriteGateReview.metrics.gates')} value={runtimeWriteGates} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('runtimeWriteGateReview.metrics.approval')} value={runtimeWriteApprovals} tone={runtimeWriteApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('runtimeWriteGateReview.metrics.blocked')} value={runtimeWriteBlockedActions} tone={runtimeWriteBlockedActions > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('runtimeWriteGateReview.metrics.live')} value={runtimeWriteLiveTotal} tone={runtimeWriteLiveTotal === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('runtimeWriteGateReview.reviewTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {runtimeWriteGateReview.write_gate_review.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('runtimeWriteGateReview.labels.requiredFields', { count: runtimeWriteGateReview.rollups.required_field_count })} />
                    <Chip value={t('runtimeWriteGateReview.labels.forbiddenFields', { count: runtimeWriteGateReview.rollups.forbidden_field_count })} muted />
                    <Chip value={t('runtimeWriteGateReview.labels.reviewOnly')} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('runtimeWriteGateReview.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {runtimeWriteGateReview.runtime_write_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('runtimeWriteGateReview.flags.dualApproval', { value: runtimeWriteGateReview.runtime_write_truth.dual_approval_received_count })} />
                    <Chip value={t('runtimeWriteGateReview.flags.hash', { value: runtimeWriteGateReview.runtime_write_truth.dry_run_hash_verified_count })} muted />
                    <Chip value={t('runtimeWriteGateReview.flags.verifier', { value: runtimeWriteGateReview.runtime_write_truth.post_write_verifier_pass_count })} muted />
                    <Chip value={t('runtimeWriteGateReview.flags.runtime', { value: String(runtimeWriteGateReview.runtime_write_truth.runtime_write_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('runtimeWriteGateReview.verificationTitle')}</SmallLabel>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                    {runtimeWriteGateReview.post_write_verification.verification_steps.slice(0, 5).map(step => (
                      <span key={step} style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {step}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleRuntimeWriteTargets.map(target => (
                  <div key={target.target_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {target.target_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', target.status)} muted={target.status === 'contract_ready'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {target.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {target.required_before_write}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', target.owner_agent)} muted />
                      <Chip value={target.blocked_write_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleRuntimeWriteGates.map(gate => (
                <div key={gate.gate_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {gate.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', gate.status)} muted={gate.status === 'contract_ready'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {gate.required_evidence}
                  </span>
                  <Chip value={gate.blocked_runtime_action} muted />
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <PackageCheck size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('postWriteVerifierPackage.title')}
                </span>
              </div>
              <Chip
                value={t('postWriteVerifierPackage.source', {
                  generated: formatDateTime(postWriteVerifierPackage.generated_at),
                  current: postWriteVerifierPackage.program_status.current_task_id,
                  next: postWriteVerifierPackage.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('postWriteVerifierPackage.metrics.overall')} value={`${postWriteVerifierOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('postWriteVerifierPackage.metrics.targets')} value={postWriteVerifierTargets} tone="ok" icon={<Target size={16} />} />
              <MetricCard label={t('postWriteVerifierPackage.metrics.lanes')} value={postWriteVerifierFailureLanes} tone="warn" icon={<GitBranch size={16} />} />
              <MetricCard label={t('postWriteVerifierPackage.metrics.actions')} value={postWriteVerifierActions} tone="ok" icon={<FileText size={16} />} />
              <MetricCard label={t('postWriteVerifierPackage.metrics.approval')} value={postWriteVerifierApprovals} tone={postWriteVerifierApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('postWriteVerifierPackage.metrics.live')} value={postWriteVerifierLiveTotal} tone={postWriteVerifierLiveTotal === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1.1fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('postWriteVerifierPackage.packageTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {postWriteVerifierPackage.verifier_package.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('postWriteVerifierPackage.labels.requiredInputs', { count: postWriteVerifierPackage.rollups.required_input_count })} />
                    <Chip value={t('postWriteVerifierPackage.labels.forbiddenInputs', { count: postWriteVerifierPackage.rollups.forbidden_input_count })} muted />
                    <Chip value={t('postWriteVerifierPackage.labels.packageMode')} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('postWriteVerifierPackage.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {postWriteVerifierPackage.verifier_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('postWriteVerifierPackage.flags.implemented', { value: String(postWriteVerifierPackage.verifier_truth.post_write_verifier_implemented) })} />
                    <Chip value={t('postWriteVerifierPackage.flags.canonical', { value: String(postWriteVerifierPackage.verifier_truth.canonical_readback_allowed) })} muted />
                    <Chip value={t('postWriteVerifierPackage.flags.rollback', { value: postWriteVerifierPackage.verifier_truth.rollback_work_item_created_count })} muted />
                    <Chip value={t('postWriteVerifierPackage.flags.telegram', { value: postWriteVerifierPackage.verifier_truth.telegram_failure_receipt_sent_count })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('postWriteVerifierPackage.failureTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {postWriteVerifierPackage.verifier_package.failure_policy}
                  </span>
                  <Chip value={t('postWriteVerifierPackage.metrics.blocked', { count: postWriteVerifierBlockedActions })} muted />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visiblePostWriteVerifierTargets.map(target => (
                  <div key={target.target_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {target.target_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', target.status)} muted={target.status === 'contract_ready'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {target.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {target.verifier_check}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', target.owner_agent)} muted />
                      <Chip value={target.blocked_runtime_action} muted />
                      <Chip value={target.failure_escalation} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {[...visiblePostWriteVerifierLanes, ...visiblePostWriteVerifierActions].map(item => (
                <div key={'lane_id' in item ? item.lane_id : item.action_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {item.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', item.status)} muted={item.status !== 'approval_required'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {'trigger' in item ? item.trigger : item.operator_instruction}
                  </span>
                  <Chip value={item.blocked_runtime_action} muted />
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <ShieldCheck size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('runtimeVerifierEvidenceReview.title')}
                </span>
              </div>
              <Chip
                value={t('runtimeVerifierEvidenceReview.source', {
                  generated: formatDateTime(runtimeVerifierEvidenceReview.generated_at),
                  current: runtimeVerifierEvidenceReview.program_status.current_task_id,
                  next: runtimeVerifierEvidenceReview.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('runtimeVerifierEvidenceReview.metrics.overall')} value={`${runtimeVerifierReviewOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('runtimeVerifierEvidenceReview.metrics.checks')} value={runtimeVerifierEvidenceChecks} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('runtimeVerifierEvidenceReview.metrics.lanes')} value={runtimeVerifierReviewLanes} tone="warn" icon={<GitBranch size={16} />} />
              <MetricCard label={t('runtimeVerifierEvidenceReview.metrics.actions')} value={runtimeVerifierActions} tone="ok" icon={<FileText size={16} />} />
              <MetricCard label={t('runtimeVerifierEvidenceReview.metrics.approval')} value={runtimeVerifierApprovals} tone={runtimeVerifierApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('runtimeVerifierEvidenceReview.metrics.live')} value={runtimeVerifierLiveTotal} tone={runtimeVerifierLiveTotal === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1.1fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('runtimeVerifierEvidenceReview.packageTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {runtimeVerifierEvidenceReview.review_package.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('runtimeVerifierEvidenceReview.labels.requiredEvidence', { count: runtimeVerifierEvidenceReview.rollups.required_evidence_count })} />
                    <Chip value={t('runtimeVerifierEvidenceReview.labels.forbiddenEvidence', { count: runtimeVerifierEvidenceReview.rollups.forbidden_evidence_count })} muted />
                    <Chip value={t('runtimeVerifierEvidenceReview.labels.reviewMode')} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('runtimeVerifierEvidenceReview.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {runtimeVerifierEvidenceReview.review_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('runtimeVerifierEvidenceReview.flags.implementation', { value: String(runtimeVerifierEvidenceReview.review_truth.runtime_verifier_implementation_allowed) })} />
                    <Chip value={t('runtimeVerifierEvidenceReview.flags.execution', { value: String(runtimeVerifierEvidenceReview.review_truth.post_write_verifier_execution_allowed) })} muted />
                    <Chip value={t('runtimeVerifierEvidenceReview.flags.rollback', { value: runtimeVerifierEvidenceReview.review_truth.rollback_work_item_created_count })} muted />
                    <Chip value={t('runtimeVerifierEvidenceReview.flags.telegram', { value: runtimeVerifierEvidenceReview.review_truth.telegram_failure_receipt_sent_count })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('runtimeVerifierEvidenceReview.policyTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {runtimeVerifierEvidenceReview.review_package.approval_policy}
                  </span>
                  <Chip value={t('runtimeVerifierEvidenceReview.metrics.blocked', { count: runtimeVerifierBlockedActions })} muted />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleRuntimeVerifierEvidenceChecks.map(check => (
                  <div key={check.check_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {check.check_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', check.status)} muted={check.status === 'contract_ready'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {check.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {check.review_question}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', check.owner_agent)} muted />
                      <Chip value={check.blocked_runtime_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {[...visibleRuntimeVerifierReviewLanes, ...visibleRuntimeVerifierActions].map(item => (
                <div key={'lane_id' in item ? item.lane_id : item.action_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {item.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', item.status)} muted={item.status !== 'approval_required'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {'trigger' in item ? item.trigger : item.operator_instruction}
                  </span>
                  <Chip value={item.blocked_runtime_action} muted />
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <Database size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('liveReadModelGate.title')}
                </span>
              </div>
              <Chip
                value={t('liveReadModelGate.source', {
                  generated: formatDateTime(liveReadModelGate.generated_at),
                  current: liveReadModelGate.program_status.current_task_id,
                  next: liveReadModelGate.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('liveReadModelGate.metrics.overall')} value={`${liveReadModelOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('liveReadModelGate.metrics.readyCards')} value={liveReadModelReadyCards} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('liveReadModelGate.metrics.approvalGates')} value={liveReadModelApprovalGates} tone={liveReadModelApprovalGates > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('liveReadModelGate.metrics.noWriteSmokes')} value={liveReadModelNoWriteSmokes} tone="ok" icon={<FileText size={16} />} />
              <MetricCard label={t('liveReadModelGate.metrics.liveTotal')} value={liveReadModelLiveTotal} tone={liveReadModelLiveTotal === 0 ? 'warn' : 'ok'} icon={<Route size={16} />} />
              <MetricCard label={t('liveReadModelGate.metrics.forbidden')} value={liveReadModelForbiddenContent} tone="warn" icon={<ShieldAlert size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('liveReadModelGate.storageTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {t('liveReadModelGate.storageDetail', {
                      table: liveReadModelGate.existing_storage_contract.db_table,
                      fields: liveReadModelGate.existing_storage_contract.safe_selected_fields.length,
                      indexes: liveReadModelGate.existing_storage_contract.required_indexes.length,
                      limit: liveReadModelGate.existing_storage_contract.query_limits.max_limit,
                    })}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('liveReadModelGate.flags.liveQuery', { value: String(liveReadModelGate.existing_storage_contract.approved_for_live_query) })} />
                    <Chip value={t('liveReadModelGate.flags.migration', { value: String(liveReadModelGate.existing_storage_contract.migration_delta_required) })} muted />
                    <Chip value={t('liveReadModelGate.labels.safeFields', { count: liveReadModelGate.existing_storage_contract.safe_selected_fields.length })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('liveReadModelGate.redisTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {t('liveReadModelGate.redisDetail', {
                      namespace: liveReadModelGate.redis_stream_contract.stream_namespace,
                      streams: liveReadModelGate.redis_stream_contract.candidate_streams.length,
                      fields: liveReadModelGate.redis_stream_contract.event_envelope_required_fields.length,
                    })}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('liveReadModelGate.flags.consumer', { value: String(liveReadModelGate.redis_stream_contract.consumer_group_allowed) })} />
                    <Chip value={t('liveReadModelGate.flags.xadd', { value: String(liveReadModelGate.redis_stream_contract.xadd_allowed) })} muted />
                    <Chip value={t('liveReadModelGate.flags.xreadgroup', { value: String(liveReadModelGate.redis_stream_contract.xreadgroup_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('liveReadModelGate.redactionTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {liveReadModelGate.display_redaction_contract.frontend_display_policy}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('liveReadModelGate.labels.redactionRequired', { value: String(liveReadModelGate.display_redaction_contract.redaction_required) })} />
                    <Chip value={t('liveReadModelGate.labels.forbiddenCount', { count: liveReadModelForbiddenContent })} muted />
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                  {visibleLiveReadModelCards.map(card => (
                    <div key={card.card_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                          {card.card_id}
                        </span>
                        <Chip value={liveReadModelValueLabel('statuses', card.readiness_status)} muted={card.readiness_status === 'query_contract_ready'} />
                      </div>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                        {card.display_name}
                      </span>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {card.operator_signal}
                      </span>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={liveReadModelValueLabel('agents', card.owner_agent)} muted />
                        <Chip value={card.next_gate} muted />
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('liveReadModelGate.gatesTitle')}</SmallLabel>
                  {visibleLiveReadModelGates.map(gate => (
                    <div key={gate.gate_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                          {gate.gate_id}
                        </span>
                        <Chip value={liveReadModelValueLabel('statuses', gate.status)} />
                      </div>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {gate.required_evidence}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <GitBranch size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('redisDryRunGate.title')}
                </span>
              </div>
              <Chip
                value={t('redisDryRunGate.source', {
                  generated: formatDateTime(redisDryRunGate.generated_at),
                  current: redisDryRunGate.program_status.current_task_id,
                  next: redisDryRunGate.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('redisDryRunGate.metrics.overall')} value={`${redisDryRunOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('redisDryRunGate.metrics.steps')} value={redisDryRunSteps} tone="ok" icon={<Route size={16} />} />
              <MetricCard label={t('redisDryRunGate.metrics.lanes')} value={redisHandoffLanes} tone="ok" icon={<GitBranch size={16} />} />
              <MetricCard label={t('redisDryRunGate.metrics.approval')} value={redisApprovalSteps} tone={redisApprovalSteps > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('redisDryRunGate.metrics.blocked')} value={redisBlockedActions} tone={redisBlockedActions > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('redisDryRunGate.metrics.live')} value={redisLiveTotal} tone={redisLiveTotal === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('redisDryRunGate.consumerTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {t('redisDryRunGate.consumerDetail', {
                      group: redisDryRunGate.consumer_group_dry_run_contract.candidate_group_name,
                      namespace: redisDryRunGate.consumer_group_dry_run_contract.stream_namespace,
                      fields: redisDryRunGate.consumer_group_dry_run_contract.required_fixture_fields.length,
                    })}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('redisDryRunGate.flags.fixture', { value: String(redisDryRunGate.consumer_group_dry_run_contract.fixture_only) })} />
                    <Chip value={t('redisDryRunGate.flags.network', { value: String(redisDryRunGate.consumer_group_dry_run_contract.redis_network_call_allowed) })} muted />
                    <Chip value={t('redisDryRunGate.flags.groupCreated', { value: String(redisDryRunGate.dry_run_truth.consumer_group_created) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('redisDryRunGate.envelopeTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {redisDryRunGate.handoff_envelope_contract.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('redisDryRunGate.labels.requiredFields', { count: redisDryRunGate.rollups.required_handoff_field_count })} />
                    <Chip value={t('redisDryRunGate.labels.forbiddenFields', { count: redisDryRunGate.rollups.forbidden_field_count })} muted />
                    <Chip value={t('redisDryRunGate.labels.idempotency', { value: String(redisDryRunGate.handoff_envelope_contract.idempotency_key_required) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('redisDryRunGate.redactionTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {redisDryRunGate.display_redaction_contract.frontend_display_policy}
                  </span>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleRedisDryRunSteps.map(step => (
                  <div key={step.step_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {step.step_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', step.status)} muted={step.status === 'contract_ready'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {step.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {step.operator_signal}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', step.owner_agent)} muted />
                      <Chip value={step.blocked_runtime_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
            {visibleRedisHandoffLanes.map(lane => (
              <div key={lane.lane_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {lane.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', lane.status)} muted={lane.status === 'contract_ready'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {redisDryRunValueLabel('agents', lane.from_agent)} → {redisDryRunValueLabel('agents', lane.to_agent)}
                  </span>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {lane.required_evidence}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <PackageCheck size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('learningWritebackPackage.title')}
                </span>
              </div>
              <Chip
                value={t('learningWritebackPackage.source', {
                  generated: formatDateTime(learningWritebackPackage.generated_at),
                  current: learningWritebackPackage.program_status.current_task_id,
                  next: learningWritebackPackage.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('learningWritebackPackage.metrics.overall')} value={`${learningWritebackOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('learningWritebackPackage.metrics.gates')} value={learningWritebackGates} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('learningWritebackPackage.metrics.lanes')} value={learningWritebackLanes} tone="ok" icon={<Route size={16} />} />
              <MetricCard label={t('learningWritebackPackage.metrics.approval')} value={learningWritebackApprovals} tone={learningWritebackApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('learningWritebackPackage.metrics.blocked')} value={learningWritebackBlockedWrites} tone={learningWritebackBlockedWrites > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('learningWritebackPackage.metrics.live')} value={learningWritebackLiveWrites} tone={learningWritebackLiveWrites === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('learningWritebackPackage.packageTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {learningWritebackPackage.writeback_package.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('learningWritebackPackage.labels.requiredFields', { count: learningWritebackPackage.rollups.required_field_count })} />
                    <Chip value={t('learningWritebackPackage.labels.forbiddenFields', { count: learningWritebackPackage.rollups.forbidden_field_count })} muted />
                    <Chip value={t('learningWritebackPackage.labels.rollback', { value: String(learningWritebackPackage.writeback_package.rollback_required) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('learningWritebackPackage.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {learningWritebackPackage.learning_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('learningWritebackPackage.flags.km', { value: String(learningWritebackPackage.learning_truth.km_write_allowed) })} />
                    <Chip value={t('learningWritebackPackage.flags.playbook', { value: String(learningWritebackPackage.learning_truth.playbook_trust_write_allowed) })} muted />
                    <Chip value={t('learningWritebackPackage.flags.telegram', { value: String(learningWritebackPackage.learning_truth.telegram_send_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('learningWritebackPackage.redactionTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {learningWritebackPackage.display_redaction_contract.frontend_display_policy}
                  </span>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleLearningWritebackGates.map(gate => (
                  <div key={gate.gate_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {gate.gate_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', gate.status)} muted={gate.status === 'contract_ready'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {gate.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gate.required_evidence}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', gate.owner_agent)} muted />
                      <Chip value={gate.blocked_write_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleLearningWritebackLanes.map(lane => (
                <div key={lane.lane_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {lane.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', lane.status)} muted={lane.status === 'contract_ready'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {redisDryRunValueLabel('agents', lane.owner_agent)} · {lane.target_surface} · {lane.review_owner}
                  </span>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {lane.required_review}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <BellRing size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('telegramReceiptPackage.title')}
                </span>
              </div>
              <Chip
                value={t('telegramReceiptPackage.source', {
                  generated: formatDateTime(telegramReceiptPackage.generated_at),
                  current: telegramReceiptPackage.program_status.current_task_id,
                  next: telegramReceiptPackage.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('telegramReceiptPackage.metrics.overall')} value={`${telegramReceiptOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('telegramReceiptPackage.metrics.gates')} value={telegramReceiptGates} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('telegramReceiptPackage.metrics.lanes')} value={telegramReceiptLanes} tone="ok" icon={<Route size={16} />} />
              <MetricCard label={t('telegramReceiptPackage.metrics.approval')} value={telegramReceiptApprovals} tone={telegramReceiptApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('telegramReceiptPackage.metrics.blocked')} value={telegramReceiptBlockedActions} tone={telegramReceiptBlockedActions > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('telegramReceiptPackage.metrics.live')} value={telegramReceiptLiveTotal} tone={telegramReceiptLiveTotal === 0 ? 'warn' : 'ok'} icon={<BellOff size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('telegramReceiptPackage.packageTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {telegramReceiptPackage.receipt_package.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('telegramReceiptPackage.labels.requiredFields', { count: telegramReceiptPackage.rollups.required_field_count })} />
                    <Chip value={t('telegramReceiptPackage.labels.forbiddenFields', { count: telegramReceiptPackage.rollups.forbidden_field_count })} muted />
                    <Chip value={t('telegramReceiptPackage.labels.retry', { value: String(telegramReceiptPackage.receipt_package.retry_policy_required) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('telegramReceiptPackage.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {telegramReceiptPackage.telegram_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('telegramReceiptPackage.flags.send', { value: String(telegramReceiptPackage.telegram_truth.telegram_send_allowed) })} />
                    <Chip value={t('telegramReceiptPackage.flags.queue', { value: String(telegramReceiptPackage.telegram_truth.gateway_queue_write_allowed) })} muted />
                    <Chip value={t('telegramReceiptPackage.flags.direct', { value: String(telegramReceiptPackage.telegram_truth.direct_bot_api_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('telegramReceiptPackage.redactionTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {telegramReceiptPackage.display_redaction_contract.frontend_display_policy}
                  </span>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleTelegramReceiptGates.map(gate => (
                  <div key={gate.gate_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {gate.gate_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', gate.status)} muted={gate.status === 'contract_ready'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {gate.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gate.required_evidence}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', gate.owner_agent)} muted />
                      <Chip value={gate.blocked_runtime_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleTelegramReceiptLanes.map(lane => (
                <div key={lane.lane_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {lane.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', lane.status)} muted={lane.status === 'contract_ready'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {redisDryRunValueLabel('agents', lane.owner_agent)} · {lane.target_surface} · {lane.review_owner}
                  </span>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {lane.required_review}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <FileText size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('ownerApprovedLearningDryRun.title')}
                </span>
              </div>
              <Chip
                value={t('ownerApprovedLearningDryRun.source', {
                  generated: formatDateTime(ownerApprovedLearningDryRun.generated_at),
                  current: ownerApprovedLearningDryRun.program_status.current_task_id,
                  next: ownerApprovedLearningDryRun.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.overall')} value={`${ownerApprovedLearningOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.actions')} value={ownerApprovedLearningActions} tone="ok" icon={<Route size={16} />} />
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.gates')} value={ownerApprovedLearningGates} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.approval')} value={ownerApprovedLearningApprovals} tone={ownerApprovedLearningApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.blocked')} value={ownerApprovedLearningBlockedWrites} tone={ownerApprovedLearningBlockedWrites > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.outputs')} value={ownerApprovedLearningPreviewOutputs} tone="ok" icon={<FileText size={16} />} />
              <MetricCard label={t('ownerApprovedLearningDryRun.metrics.generated')} value={ownerApprovedLearningGenerated} tone={ownerApprovedLearningGenerated === 0 ? 'warn' : 'ok'} icon={<Database size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('ownerApprovedLearningDryRun.previewTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {ownerApprovedLearningDryRun.dry_run_preview.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('ownerApprovedLearningDryRun.labels.requiredInputs', { count: ownerApprovedLearningDryRun.rollups.required_input_count })} />
                    <Chip value={t('ownerApprovedLearningDryRun.labels.forbiddenInputs', { count: ownerApprovedLearningDryRun.rollups.forbidden_input_count })} muted />
                    <Chip value={t('ownerApprovedLearningDryRun.labels.previewAllowed', { value: String(ownerApprovedLearningDryRun.dry_run_truth.dry_run_preview_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('ownerApprovedLearningDryRun.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {ownerApprovedLearningDryRun.dry_run_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('ownerApprovedLearningDryRun.flags.ownerApproval', { value: ownerApprovedLearningDryRun.dry_run_truth.owner_approval_received_count })} />
                    <Chip value={t('ownerApprovedLearningDryRun.flags.km', { value: String(ownerApprovedLearningDryRun.dry_run_truth.km_write_allowed) })} muted />
                    <Chip value={t('ownerApprovedLearningDryRun.flags.telegram', { value: String(ownerApprovedLearningDryRun.dry_run_truth.telegram_send_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('ownerApprovedLearningDryRun.verificationTitle')}</SmallLabel>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                    {ownerApprovedLearningDryRun.verification_contract.verification_steps.slice(0, 5).map(step => (
                      <span key={step} style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {step}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleOwnerApprovedLearningActions.map(action => (
                  <div key={action.action_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {action.action_id}
                      </span>
                      <Chip value={redisDryRunValueLabel('statuses', action.status)} muted={action.status !== 'approval_required'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {action.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {action.operator_instruction}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={redisDryRunValueLabel('agents', action.owner_agent)} muted />
                      <Chip value={action.blocked_runtime_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleOwnerApprovedLearningGates.map(gate => (
                <div key={gate.gate_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {gate.display_name}
                    </span>
                    <Chip value={redisDryRunValueLabel('statuses', gate.status)} muted={gate.status === 'contract_ready'} />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {gate.required_evidence}
                  </span>
                  <Chip value={gate.blocked_write_action} muted />
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 12, border: '0.5px solid #d8c6a6', borderRadius: 7, background: '#fffdf7', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <ShieldCheck size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('ownerDryRunPackage.title')}
                </span>
              </div>
              <Chip
                value={t('ownerDryRunPackage.source', {
                  generated: formatDateTime(ownerDryRunPackage.generated_at),
                  current: ownerDryRunPackage.program_status.current_task_id,
                  next: ownerDryRunPackage.program_status.next_task_id,
                })}
                muted
              />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 10 }} className="automation-inventory-live-read-kpi-grid">
              <MetricCard label={t('ownerDryRunPackage.metrics.overall')} value={`${ownerDryRunOverall}%`} tone="warn" icon={<Gauge size={16} />} />
              <MetricCard label={t('ownerDryRunPackage.metrics.fixtures')} value={ownerDryRunFixtures} tone="ok" icon={<PackageCheck size={16} />} />
              <MetricCard label={t('ownerDryRunPackage.metrics.gates')} value={ownerDryRunGates} tone="ok" icon={<ShieldCheck size={16} />} />
              <MetricCard label={t('ownerDryRunPackage.metrics.approval')} value={ownerDryRunApprovals} tone={ownerDryRunApprovals > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
              <MetricCard label={t('ownerDryRunPackage.metrics.blocked')} value={ownerDryRunBlockedActions} tone={ownerDryRunBlockedActions > 0 ? 'danger' : 'ok'} icon={<ShieldAlert size={16} />} />
              <MetricCard label={t('ownerDryRunPackage.metrics.live')} value={ownerDryRunLiveTotal} tone={ownerDryRunLiveTotal === 0 ? 'warn' : 'ok'} icon={<BellOff size={16} />} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-live-read-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('ownerDryRunPackage.packageTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {ownerDryRunPackage.fixture_package.operator_meaning}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('ownerDryRunPackage.labels.requiredFields', { count: ownerDryRunPackage.rollups.required_field_count })} />
                    <Chip value={t('ownerDryRunPackage.labels.forbiddenFields', { count: ownerDryRunPackage.rollups.forbidden_field_count })} muted />
                    <Chip value={t('ownerDryRunPackage.labels.noWrite', { value: String(ownerDryRunPackage.fixture_package.no_write_proof_required) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('ownerDryRunPackage.truthTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {ownerDryRunPackage.dry_run_truth.truth_note}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('ownerDryRunPackage.flags.fixture', { value: String(ownerDryRunPackage.dry_run_truth.fixture_dry_run_allowed) })} />
                    <Chip value={t('ownerDryRunPackage.flags.write', { value: String(ownerDryRunPackage.dry_run_truth.production_write_approved) })} muted />
                    <Chip value={t('ownerDryRunPackage.flags.send', { value: String(ownerDryRunPackage.dry_run_truth.telegram_send_allowed) })} muted />
                  </div>
                </div>

                <div style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <SmallLabel>{t('ownerDryRunPackage.redactionTitle')}</SmallLabel>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                    {ownerDryRunPackage.display_redaction_contract.frontend_display_policy}
                  </span>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={t('ownerDryRunPackage.flags.actionButton', { value: String(ownerDryRunPackage.display_redaction_contract.action_button_allowed) })} />
                    <Chip value={t('ownerDryRunPackage.flags.secret', { value: String(ownerDryRunPackage.display_redaction_contract.secret_value_display_allowed) })} muted />
                  </div>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
                {visibleOwnerDryRunGates.map(gate => (
                  <div key={gate.gate_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {gate.gate_id}
                      </span>
                      <Chip value={ownerDryRunValueLabel('statuses', gate.status)} muted={gate.status === 'approved_for_fixture_only'} />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {gate.display_name}
                    </span>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gate.required_evidence}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={ownerDryRunValueLabel('agents', gate.owner_agent)} muted />
                      <Chip value={gate.blocked_runtime_action} muted />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleOwnerDryRunFixtures.map(fixture => (
                <div key={fixture.fixture_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {fixture.display_name}
                    </span>
                    <Chip value={ownerDryRunValueLabel('statuses', fixture.status)} muted />
                  </div>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {ownerDryRunValueLabel('agents', fixture.owner_agent)} · {fixture.scenario_type} · {fixture.target_surface}
                  </span>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {fixture.operator_visible_result}
                  </span>
                  <Chip value={fixture.blocked_runtime_action} muted />
                </div>
              ))}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 10 }} className="automation-inventory-live-read-card-grid">
              {visibleOwnerDryRunSteps.map(step => (
                <div key={step.step_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {step.step_id}
                    </span>
                    <Chip value={ownerDryRunValueLabel('statuses', step.status)} muted />
                  </div>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                    {step.display_name}
                  </span>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {step.expected_artifact}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 0.85fr)', gap: 12 }} className="automation-inventory-proof-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                    {t('interactionProof.ladderTitle')}
                  </span>
                  <Chip value={t('interactionProof.ladderSummary', { pending: proofLivePendingLevels, total: interactionLearningProof.rollups.proof_level_count })} muted />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-proof-ladder-grid">
                  {visibleProofLevels.map(level => (
                    <div key={level.level_id} style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                          {level.display_name}
                        </span>
                        <Chip value={proofValueLabel('statuses', level.status)} muted={level.status !== 'blocked_by_gate'} />
                      </div>
                      <ProgressRow label={level.source_of_truth} percent={level.completion_percent} nextTask={level.next_gate} />
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {level.operator_meaning}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                    {t('interactionProof.signalsTitle')}
                  </span>
                  <Chip value={t('interactionProof.signalsSummary', { signals: proofSignalCount, surfaces: proofVisibleSurfaces })} muted />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-proof-signal-grid">
                  {visibleProofSignals.map(signal => (
                    <div key={signal.signal_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                          {signal.signal_id}
                        </span>
                        <Chip value={proofValueLabel('states', signal.current_state)} muted={signal.current_state !== 'live_verified'} />
                      </div>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                        {signal.display_name}
                      </span>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {signal.operator_interpretation}
                      </span>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={signal.category} muted />
                        <Chip value={signal.next_gate} muted />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <SmallLabel>{t('interactionProof.agentLanesTitle')}</SmallLabel>
                {interactionLearningProof.agent_lanes.map(lane => (
                  <div key={lane.agent_id} style={{ paddingBottom: 9, borderBottom: '0.5px solid #eee9dd', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                        {lane.display_name}
                      </span>
                      <Chip value={proofValueLabel('agents', lane.agent_id)} muted />
                    </div>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {lane.what_operator_will_feel}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={proofValueLabel('states', lane.current_visible_state)} />
                      <Chip value={`${t('interactionProof.labels.signals')}: ${lane.visible_signals.length}`} muted />
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <SmallLabel>{t('interactionProof.gatesTitle')}</SmallLabel>
                {visibleRuntimeGates.map(gate => (
                  <div key={gate.gate_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {gate.gate_id}
                      </span>
                      <Chip value={proofValueLabel('statuses', gate.status)} />
                    </div>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gate.required_before_green}
                    </span>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('interactionProof.redactionTitle')}</SmallLabel>
                <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {interactionLearningProof.frontend_redaction.display_policy}
                </span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={t('interactionProof.labels.transcriptBlocked')} />
                  <Chip value={t('interactionProof.labels.privateReasoningBlocked')} muted />
                  <Chip value={t('interactionProof.labels.secretBlocked')} muted />
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <HardDrive size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('proactiveOperations.title')}
              </span>
            </div>
            <Chip
              value={t('proactiveOperations.source', {
                generated: formatDateTime(proactiveOperations.generated_at),
                current: proactiveOperations.program_status.current_task_id,
                next: proactiveOperations.program_status.next_task_id,
              })}
              muted
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 12 }} className="automation-inventory-proactive-kpi-grid">
            <MetricCard label={t('proactiveOperations.metrics.overall')} value={`${proactiveOverall}%`} tone="ok" icon={<Gauge size={16} />} />
            <MetricCard label={t('proactiveOperations.metrics.capabilities')} value={proactiveDelegableCapabilities} icon={<Boxes size={16} />} />
            <MetricCard label={t('proactiveOperations.metrics.approval')} value={proactiveApprovalCapabilities} tone="warn" icon={<Lock size={16} />} />
            <MetricCard label={t('proactiveOperations.metrics.blockedDomains')} value={proactiveBlockedVersionDomains} tone="warn" icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('proactiveOperations.metrics.telegram')} value={proactiveTelegramActionRequired} tone="warn" icon={<BellRing size={16} />} />
            <MetricCard label={t('proactiveOperations.metrics.autoExecute')} value={proactiveAutoExecuteAllowed} tone="ok" icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('hostStateful.metrics.hosts')} value={hostStatefulInventory.rollups.host_count} icon={<Server size={16} />} />
            <MetricCard label={t('hostStateful.metrics.k3sNodes')} value={hostStatefulInventory.rollups.k3s_node_count} icon={<Route size={16} />} />
            <MetricCard label={t('hostStateful.metrics.stateful')} value={hostStatefulInventory.rollups.stateful_service_count} icon={<Database size={16} />} />
            <MetricCard label={t('hostStateful.metrics.probes')} value={hostStatefulInventory.rollups.readonly_probe_step_count} icon={<FileText size={16} />} />
            <MetricCard label={t('hostStateful.metrics.maintenance')} value={hostStatefulInventory.rollups.maintenance_required_field_count} tone="warn" icon={<ShieldAlert size={16} />} />
            <MetricCard label={t('hostStateful.metrics.denied')} value={hostReadonlyDeniedCount} tone="ok" icon={<BellOff size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)', gap: 12 }} className="automation-inventory-proactive-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                    {t('proactiveOperations.capabilitiesTitle')}
                  </span>
                  <Chip value={t('proactiveOperations.capabilitiesShown', { count: visibleDelegableCapabilities.length, total: proactiveDelegableCapabilities })} muted />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-capability-grid">
                  {visibleDelegableCapabilities.map(capability => (
                    <div key={capability.capability_id} style={{ padding: 11, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                          {capability.capability_id}
                        </span>
                        <Chip value={proactiveValueLabel('risks', capability.risk_tier)} muted={capability.risk_tier === 'low'} />
                      </div>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                        {capability.display_name}
                      </span>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                        <Chip value={`${t('proactiveOperations.labels.owner')}: ${proactiveValueLabel('agents', capability.primary_owner)}`} />
                        <Chip value={`${t('proactiveOperations.labels.level')}: ${proactiveValueLabel('autonomyLevels', capability.automation_level)}`} muted />
                        <Chip value={`${t('proactiveOperations.labels.gate')}: ${proactiveApprovalGateLabel(capability.approval_gate)}`} muted={capability.approval_gate === 'read_only_allowed'} />
                        <Chip value={`${t('proactiveOperations.labels.outputs')}: ${capability.outputs.length}`} muted />
                      </div>
                      <SmallLabel>{t('proactiveOperations.labels.telegram')}</SmallLabel>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {capability.telegram_policy}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <SmallLabel>{t('proactiveOperations.domainsTitle')}</SmallLabel>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-domain-grid">
                  {visibleVersionDomains.map(domain => (
                    <div key={domain.domain_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                          {domain.display_name}
                        </span>
                        <Chip value={proactiveValueLabel('agents', domain.primary_owner)} muted />
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={`${t('proactiveOperations.labels.cadence')}: ${domain.cadence}`} muted />
                        <Chip value={`${t('proactiveOperations.labels.level')}: ${proactiveValueLabel('autonomyLevels', domain.current_allowed_autonomy)}`} muted />
                        <Chip value={`${t('proactiveOperations.labels.examples')}: ${domain.tracked_examples.length}`} muted />
                      </div>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {domain.approval_gate}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                    {t('hostStateful.hostListTitle')}
                  </span>
                  <Chip value={t('hostStateful.source', {
                    generated: formatDateTime(hostStatefulInventory.generated_at),
                    current: hostStatefulInventory.program_status.current_task_id,
                    next: hostStatefulInventory.program_status.next_task_id,
                  })} muted />
                </div>
                {visibleHostInventory.map(host => (
                  <div key={host.host_id} style={{ padding: 10, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', minWidth: 0 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                        {host.host_id}
                      </span>
                      <Chip value={hostStatefulValueLabel('values', host.version_observation_status)} muted />
                    </div>
                    <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35 }}>
                      {host.display_name}
                    </span>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={`${t('hostStateful.labels.surfaces')}: ${host.primary_surfaces.length}`} muted />
                      <Chip value={`${t('hostStateful.labels.evidence')}: ${host.next_evidence_needed.length}`} muted />
                      <Chip value={`${t('hostStateful.labels.blocked')}: ${host.blocked_actions.length}`} muted={host.blocked_actions.length === 0} />
                      <Chip value={host.maintenance_window_required ? t('hostStateful.labels.maintenanceRequired') : t('hostStateful.labels.maintenanceNotRequired')} />
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <SmallLabel>{t('hostStateful.serviceListTitle')}</SmallLabel>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8 }} className="automation-inventory-stateful-grid">
                  {visibleStatefulServices.map(service => (
                    <div key={service.service_id} style={{ padding: 9, border: '0.5px solid #eee9dd', borderRadius: 7, background: '#faf9f3', display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                      <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
                        {service.display_name}
                      </span>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={service.service_id} muted />
                        <Chip value={service.backup_required_before_change ? t('hostStateful.labels.backupRequired') : t('hostStateful.labels.backupNotRequired')} />
                        <Chip value={`${t('hostStateful.labels.restart')}: ${String(service.restart_authorized)}`} muted />
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('hostStateful.maintenanceTitle')}</SmallLabel>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={`${t('hostStateful.labels.requiredFields')}: ${hostStatefulInventory.maintenance_window_approval_package.required_fields.length}`} />
                  <Chip value={`${t('hostStateful.labels.smoke')}: ${hostStatefulInventory.maintenance_window_approval_package.minimum_smoke_plan.length}`} muted />
                  <Chip value={`${t('hostStateful.labels.forbiddenFields')}: ${hostStatefulInventory.maintenance_window_approval_package.forbidden_fields.length}`} muted />
                  <Chip value={`${t('hostStateful.labels.probeSteps')}: ${hostStatefulInventory.readonly_probe_plan.length}`} muted />
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={`${t('hostStateful.labels.telegramDirect')}: ${hostTelegramDirectSendAllowed}`} muted />
                  <Chip value={`${t('hostStateful.labels.telegramQueue')}: ${hostTelegramGatewayWriteAllowed}`} muted />
                  <Chip value={hostRedactionLocked ? t('hostStateful.labels.redactionLocked') : t('hostStateful.labels.redactionReview')} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <PackageCheck size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('backlogProgress.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', overflowWrap: 'anywhere' }}>
              {backlog.progress_summary.formula}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-progress-kpi-grid">
            <MetricCard label={t('backlogProgress.metrics.overall')} value={`${backlog.progress_summary.overall_percent}%`} tone="ok" icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('backlogProgress.metrics.done')} value={`${backlog.progress_summary.done_items}/${backlog.progress_summary.total_items}`} icon={<PackageCheck size={16} />} />
            <MetricCard label={t('backlogProgress.metrics.planned')} value={backlog.progress_summary.planned_items} tone={backlog.progress_summary.planned_items > 0 ? 'warn' : 'ok'} icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('backlogProgress.metrics.requiresApproval')} value={explicitApprovalItemCount} tone={explicitApprovalItemCount > 0 ? 'warn' : 'ok'} icon={<Lock size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.8fr) minmax(0, 1.2fr)', gap: 12 }} className="automation-inventory-progress-grid">
            <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('backlogProgress.priorityTitle')}
              </span>
              {backlog.progress_summary.by_priority.map(row => (
                <ProgressRow
                  key={row.priority}
                  label={`${row.priority} · ${row.done_items}/${row.total_items}`}
                  percent={row.completion_percent}
                  nextTask={t('backlogProgress.doneLabel')}
                />
              ))}
            </div>
            <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10, minWidth: 0 }} className="automation-inventory-progress-workstream-grid">
              {backlog.progress_summary.by_workstream.slice(0, 6).map(row => (
                <ProgressRow
                  key={row.workstream_id}
                  label={`${row.display_name} · ${row.done_items}/${row.total_items}`}
                  percent={row.completion_percent}
                  nextTask={row.next_task_id}
                />
              ))}
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <Server size={14} style={{ color: '#d97757' }} />
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('workstreams.title')}
            </span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-workstream-grid">
            {snapshot.workstreams.map(workstream => (
              <div key={workstream.workstream_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                <ProgressRow
                  label={workstream.display_name}
                  percent={workstream.completion_percent}
                  nextTask={workstream.next_task_id}
                />
              </div>
            ))}
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <PackageCheck size={14} style={{ color: '#d97757' }} />
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('backlog.title', { total: backlog.rollups.total_items })}
            </span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-backlog-grid">
            {groupedBacklog.map(group => (
              <div key={group.priority} style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                    {group.priority}
                  </span>
                  <Chip value={String(group.items.length)} />
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 9, minWidth: 0 }}>
                  {group.items.slice(0, 5).map(item => (
                    <div key={item.item_id} style={{ display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                        <span style={{
                          fontFamily: 'Syne, sans-serif',
                          fontSize: 12,
                          fontWeight: 700,
                          color: '#141413',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                        }}>
                          {item.title}
                        </span>
                        <Chip value={item.item_id} muted />
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                        <Chip value={item.owner_agent} />
                        <Chip value={item.gate_status} muted />
                        <Chip value={item.next_review} muted />
                      </div>
                      <div style={{
                        fontFamily: "'DM Mono', monospace",
                        fontSize: 10,
                        color: '#87867f',
                        lineHeight: 1.45,
                        overflowWrap: 'anywhere',
                      }}>
                        {item.acceptance_criteria[0]}
                      </div>
                      <div style={{
                        fontFamily: "'DM Mono', monospace",
                        fontSize: 10,
                        color: '#87867f',
                        lineHeight: 1.45,
                        overflowWrap: 'anywhere',
                      }}>
                        {item.approval_boundary.display_summary}
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                        <Chip value={`${t('tasks.boundaryLabels.mode')}: ${statusLabel(item.approval_boundary.mode)}`} muted />
                        <Chip value={`${t('tasks.boundaryLabels.allowed')}: ${item.approval_boundary.allowed_actions[0]}`} muted />
                        <Chip value={`${t('tasks.boundaryLabels.blocked')}: ${item.approval_boundary.blocked_actions.slice(0, 3).map(boundaryActionLabel).join(' / ')}`} />
                        {item.approval_boundary.requires_operator_approval_for.length > 0 ? (
                          <Chip value={`${t('tasks.boundaryLabels.requiresApproval')}: ${item.approval_boundary.requires_operator_approval_for[0]}`} muted />
                        ) : null}
                      </div>
                    </div>
                  ))}
                  {group.items.length > 5 ? (
                    <Chip value={t('backlog.more', { count: group.items.length - 5 })} muted />
                  ) : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <Database size={14} style={{ color: '#d97757' }} />
            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
              {t('assets.title')}
            </span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-domain-grid">
            {groupedAssets.map(group => (
              <div key={group.domain_id} style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                    {group.display_name}
                  </span>
                  <Chip value={String(group.assets.length)} />
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                  {group.assets.map(asset => (
                    <Chip
                      key={asset.asset_id}
                      value={`${asset.display_name} · ${asset.gate_status}`}
                      muted={asset.status !== 'blocked'}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Archive size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('backupEvidence.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('backupEvidence.source', {
                targets: formatDateTime(backupTargets.generated_at),
                readiness: formatDateTime(backupReadiness.generated_at),
                policy: formatDateTime(backupPolicy.generated_at),
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 12 }} className="automation-inventory-backup-kpi-grid">
            <MetricCard label={t('backupEvidence.metrics.targets')} value={backupTargets.rollups.total_targets} icon={<HardDrive size={16} />} />
            <MetricCard label={t('backupEvidence.metrics.ready')} value={readyBackupRows} tone="ok" icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('backupEvidence.metrics.actionRequired')} value={actionRequiredBackupRows} tone="warn" icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('backupEvidence.metrics.blocked')} value={blockedBackupRows} tone={blockedBackupRows > 0 ? 'danger' : 'ok'} icon={<Lock size={16} />} />
            <MetricCard label={t('backupEvidence.metrics.successSuppressed')} value={suppressedSuccessRules} tone="ok" icon={<BellOff size={16} />} />
            <MetricCard label={t('backupEvidence.metrics.immediateEscalations')} value={immediateEscalationRules} tone="warn" icon={<BellRing size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-backup-evidence-grid">
            <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 11, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('backupEvidence.readinessTitle')}
                </span>
                <Chip value={backupReadiness.program_status.current_task_id} muted />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-backup-readiness-grid">
                {visibleReadinessRows.map(row => (
                  <div key={row.target_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#faf9f3', minWidth: 0 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                        <span style={{
                          fontFamily: 'Syne, sans-serif',
                          fontSize: 12,
                          fontWeight: 700,
                          color: '#141413',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                        }}>
                          {row.display_name}
                        </span>
                        <Chip value={statusLabel(row.overall_readiness)} muted={row.overall_readiness === 'ready'} />
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                        <Chip value={`${t('backupEvidence.labels.freshness')}: ${statusLabel(row.freshness_status)}`} muted={evidenceTone(row.freshness_status) === 'ok'} />
                        <Chip value={`${t('backupEvidence.labels.integrity')}: ${statusLabel(row.integrity_status)}`} muted={evidenceTone(row.integrity_status) === 'ok'} />
                        <Chip value={`${t('backupEvidence.labels.restore')}: ${statusLabel(row.restore_drill_status)}`} muted={evidenceTone(row.restore_drill_status) === 'ok'} />
                        <Chip value={`${t('backupEvidence.labels.offsite')}: ${statusLabel(row.offsite_status)}`} muted={evidenceTone(row.offsite_status) === 'ok'} />
                      </div>
                      <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {row.blocker_summary || t('backupEvidence.noBlocker')}
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                        <Chip value={row.gate_status ? statusLabel(row.gate_status) : '--'} muted />
                        <Chip value={row.evidence_refs[0] ?? t('backupEvidence.noEvidence')} muted />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('backupEvidence.policyTitle')}
                </span>
                {backupPolicy.policy_rules.slice(0, 5).map(rule => (
                  <div key={rule.rule_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {rule.rule_id}
                      </span>
                      <Chip value={statusLabel(rule.decision)} muted={rule.decision === 'suppress_immediate_success'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {rule.message_contract}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('backupEvidence.targetsTitle')}
                </span>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {visibleBackupTargets.map(target => (
                    <div key={target.target_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                          {target.display_name}
                        </span>
                        <Chip value={target.rpo} muted />
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        <Chip value={target.risk_level} />
                        <Chip value={target.owner_host} muted />
                        <Chip value={target.primary_script} muted />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Archive size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('offsiteEscrow.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('offsiteEscrow.source', {
                generated: formatDateTime(offsiteEscrow.generated_at),
                current: offsiteEscrow.program_status.current_task_id,
                next: offsiteEscrow.program_status.next_task_id,
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-offsite-kpi-grid">
            <MetricCard label={t('offsiteEscrow.metrics.total')} value={offsiteEscrow.rollups.total_cards} icon={<HardDrive size={16} />} />
            <MetricCard label={t('offsiteEscrow.metrics.verified')} value={verifiedOffsiteCards} tone="ok" icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('offsiteEscrow.metrics.actionRequired')} value={actionRequiredOffsiteCards} tone="warn" icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('offsiteEscrow.metrics.blocked')} value={blockedEscrowCards} tone="danger" icon={<Lock size={16} />} />
            <MetricCard label={t('offsiteEscrow.metrics.executionBlocked')} value={executionBlockedCards} tone="danger" icon={<Lock size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-offsite-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-offsite-card-grid">
              {visibleOffsiteEscrowCards.map(card => (
                <div key={card.card_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 12,
                        fontWeight: 700,
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {card.display_name}
                      </span>
                      <Chip value={statusLabel(card.readiness)} muted={card.readiness === 'verified'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={kindLabel(card.kind)} />
                      <Chip value={`${t('backupEvidence.labels.offsite')}: ${statusLabel(card.offsite_status)}`} muted={evidenceTone(card.offsite_status) === 'ok'} />
                      <Chip value={`${t('offsiteEscrow.labels.escrow')}: ${statusLabel(card.escrow_status)}`} muted={card.escrow_status === 'not_applicable'} />
                      <Chip value={`${t('backupEvidence.labels.restore')}: ${statusLabel(card.restore_drill_status)}`} muted={card.restore_drill_status === 'not_applicable'} />
                      <Chip value={statusLabel(card.automation_gate_status)} muted />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {card.operator_summary}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {card.next_action}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={`${t('offsiteEscrow.labels.credential')}: ${statusLabel(card.credential_exposure_status)}`} muted />
                      <Chip value={card.evidence_refs[0] ?? t('backupEvidence.noEvidence')} muted />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('offsiteEscrow.contractTitle')}
              </span>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                {offsiteEscrow.operator_contract.credential_display_policy}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                <Chip value={offsiteEscrow.operator_contract.success_notification_policy} muted />
                <Chip value={offsiteEscrow.operator_contract.failure_notification_policy} muted />
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                {offsiteEscrow.operator_contract.must_not_interpret_as.slice(0, 6).map(item => (
                  <Chip key={item} value={item} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      {runtimeSurface && (
      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Server size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('runtimeSurface.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('runtimeSurface.source', {
                generated: formatDateTime(runtimeSurface.generated_at),
                current: runtimeSurface.program_status.current_task_id,
                next: runtimeSurface.program_status.next_task_id,
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-runtime-kpi-grid">
            <MetricCard label={t('runtimeSurface.metrics.total')} value={runtimeSurface.rollups.total_surfaces} icon={<Server size={16} />} />
            <MetricCard label={t('runtimeSurface.metrics.actionRequired')} value={runtimeActionRequired} tone={runtimeActionRequired > 0 ? 'warn' : 'ok'} icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('runtimeSurface.metrics.secrets')} value={runtimeSecrets} tone="danger" icon={<Lock size={16} />} />
            <MetricCard label={t('runtimeSurface.metrics.liveMissing')} value={runtimeLiveMissing} tone={runtimeLiveMissing > 0 ? 'warn' : 'ok'} icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('runtimeSurface.metrics.boundComponents')} value={`${runtimeBoundComponents}/${runtimeSurface.rollups.total_source_components}`} icon={<PackageCheck size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-runtime-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-runtime-surface-grid">
              {visibleRuntimeSurfaces.map(surface => (
                <div key={surface.surface_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 12,
                        fontWeight: 700,
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {surface.display_name}
                      </span>
                      <Chip value={runtimeValueLabel(surface.status)} muted={surface.status === 'manifest_mapped'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={runtimeKindLabel(surface.kind)} />
                      <Chip value={runtimeValueLabel(surface.evidence_level)} muted={surface.evidence_level === 'committed_manifest'} />
                      <Chip value={`${t('runtimeSurface.labels.secret')}: ${runtimeValueLabel(surface.secret_exposure)}`} muted={surface.secret_exposure === 'none'} />
                      <Chip value={`${t('runtimeSurface.labels.live')}: ${runtimeValueLabel(surface.live_check_status)}`} muted={surface.live_check_status === 'not_run'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {surface.runtime_binding}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {surface.health_contract}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={surface.manifest_ref} muted />
                      <Chip value={surface.next_action} />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('runtimeSurface.componentsTitle')}
                </span>
                {runtimeSurface.source_runtime_components.slice(0, 5).map(component => (
                  <div key={component.component_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {component.display_name}
                      </span>
                      <Chip value={runtimeValueLabel(component.status)} muted={component.status === 'bound'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {component.runtime_binding}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('runtimeSurface.contractTitle')}
                </span>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {runtimeSurface.operator_contract.secret_display_policy}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                  {runtimeSurface.operator_contract.must_not_interpret_as.slice(0, 6).map(item => (
                    <Chip key={item} value={item} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>
      )}

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <GitBranch size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('giteaHealth.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('giteaHealth.source', {
                generated: formatDateTime(giteaHealth.generated_at),
                current: giteaHealth.program_status.current_task_id,
                next: giteaHealth.program_status.next_task_id,
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 12 }} className="automation-inventory-gitea-kpi-grid">
            <MetricCard label={t('giteaHealth.metrics.workflows')} value={giteaHealth.rollups.total_workflows} icon={<GitBranch size={16} />} />
            <MetricCard label={t('giteaHealth.metrics.schedules')} value={giteaHealth.rollups.workflows_with_schedule} icon={<RefreshCw size={16} />} />
            <MetricCard label={t('giteaHealth.metrics.dispatch')} value={giteaHealth.rollups.workflows_with_workflow_dispatch} tone="warn" icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('giteaHealth.metrics.notifyBridge')} value={giteaHealth.rollups.workflows_with_notify_bridge} tone="warn" icon={<BellRing size={16} />} />
            <MetricCard label={t('giteaHealth.metrics.quietPolicies')} value={giteaQuietPolicies} tone="ok" icon={<BellOff size={16} />} />
            <MetricCard label={t('giteaHealth.metrics.runnerActions')} value={giteaRunnerActions} tone={giteaRunnerActions > 0 ? 'warn' : 'ok'} icon={<Lock size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-gitea-map-grid">
            <SummaryTile
              label={t('giteaHealth.map.runnerEvidence')}
              value={`${runnerAttestationCoverage}%`}
              detail={t('giteaHealth.map.runnerEvidenceDetail', { gaps: giteaRunnerActions })}
              tone={runnerAttestationCoverage >= 70 ? 'ok' : 'warn'}
              icon={<Layers3 size={16} />}
            />
            <SummaryTile
              label={t('giteaHealth.map.triggerSurface')}
              value={`${giteaHealth.rollups.workflows_with_workflow_dispatch}`}
              detail={t('giteaHealth.map.triggerSurfaceDetail', { schedules: giteaHealth.rollups.workflows_with_schedule })}
              tone="neutral"
              icon={<Route size={16} />}
            />
            <SummaryTile
              label={t('giteaHealth.map.noiseControl')}
              value={`${quietPolicyCoverage}%`}
              detail={t('giteaHealth.map.noiseControlDetail', { quiet: giteaQuietPolicies, total: giteaHealth.rollups.notification_contracts_total })}
              tone={quietPolicyCoverage >= 70 ? 'ok' : 'warn'}
              icon={<BellOff size={16} />}
            />
            <SummaryTile
              label={t('giteaHealth.map.safeBoundary')}
              value="0"
              detail={t('giteaHealth.map.safeBoundaryDetail')}
              tone="ok"
              icon={<ShieldCheck size={16} />}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-gitea-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-gitea-workflow-grid">
              {visibleGiteaWorkflows.map(workflow => (
                <div key={workflow.workflow_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 12,
                        fontWeight: 700,
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {workflow.display_name}
                      </span>
                      <Chip value={giteaValueLabel(workflow.runner_evidence_status)} muted={workflow.runner_evidence_status === 'host_runner_mapped'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={`${t('giteaHealth.labels.status')}: ${giteaValueLabel(workflow.status)}`} muted={workflow.status === 'manifest_mapped'} />
                      <Chip value={`${t('giteaHealth.labels.runner')}: ${workflow.runner_labels.join(' / ')}`} />
                      <Chip value={`${t('giteaHealth.labels.trigger')}: ${workflow.triggers.join(' / ')}`} muted />
                      <Chip value={`${t('giteaHealth.labels.notify')}: ${giteaValueLabel(workflow.notification_policy)}`} muted={workflow.notification_policy === 'read_only_no_notify'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {workflow.scope}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {workflow.next_action}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={`${t('giteaHealth.labels.schedule')}: ${workflow.schedule_cadence}`} muted />
                      <Chip value={`${t('giteaHealth.labels.secret')}: ${workflow.secrets_policy_status}`} />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('giteaHealth.runnersTitle')}
                </span>
                {visibleRunnerContracts.map(runner => (
                  <div key={runner.contract_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {runner.display_name}
                      </span>
                      <Chip value={giteaValueLabel(runner.status)} muted={runner.status === 'manifest_mapped'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {runner.health_contract}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      <Chip value={runner.runner_labels.join(' / ')} muted />
                      <Chip value={runner.next_action} />
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('giteaHealth.notificationsTitle')}
                </span>
                {giteaHealth.notification_contracts.slice(0, 4).map(contract => (
                  <div key={contract.contract_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {contract.display_name}
                      </span>
                      <Chip value={giteaValueLabel(contract.policy_kind)} muted />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {contract.success_noise_policy}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('giteaHealth.contractTitle')}
                </span>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {giteaHealth.operator_contract.secret_display_policy}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                  {giteaHealth.operator_contract.must_not_interpret_as.slice(0, 6).map(item => (
                    <Chip key={item} value={item} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <BellRing size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('observability.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('observability.source', {
                generated: formatDateTime(observabilityMatrix.generated_at),
                current: observabilityMatrix.program_status.current_task_id,
                next: observabilityMatrix.program_status.next_task_id,
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-observability-kpi-grid">
            <MetricCard label={t('observability.metrics.surfaces')} value={observabilityMatrix.rollups.total_surfaces} icon={<Database size={16} />} />
            <MetricCard label={t('observability.metrics.actions')} value={observabilityActions} tone={observabilityActions > 0 ? 'warn' : 'ok'} icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('observability.metrics.proposals')} value={observabilityProposalCount} tone="warn" icon={<BellOff size={16} />} />
            <MetricCard label={t('observability.metrics.classificationGaps')} value={observabilityClassificationGaps} tone="warn" icon={<Target size={16} />} />
            <MetricCard label={t('observability.metrics.approvalRequired')} value={observabilityApprovalRequired} tone={observabilityApprovalRequired > 0 ? 'warn' : 'ok'} icon={<ShieldCheck size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-observability-map-grid">
            <SummaryTile
              label={t('observability.map.coverage')}
              value={`${observabilityMatrix.rollups.total_surfaces}`}
              detail={t('observability.map.coverageDetail')}
              tone="ok"
              icon={<Layers3 size={16} />}
            />
            <SummaryTile
              label={t('observability.map.noise')}
              value={`${observabilityProposalCount}`}
              detail={t('observability.map.noiseDetail')}
              tone="warn"
              icon={<BellOff size={16} />}
            />
            <SummaryTile
              label={t('observability.map.classification')}
              value={`${observabilityApprovalRequired}`}
              detail={t('observability.map.classificationDetail')}
              tone="warn"
              icon={<Target size={16} />}
            />
            <SummaryTile
              label={t('observability.map.safeBoundary')}
              value="0"
              detail={t('observability.map.safeBoundaryDetail')}
              tone="ok"
              icon={<ShieldCheck size={16} />}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-observability-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-observability-surface-grid">
              {visibleObservabilitySurfaces.map(surface => (
                <div key={surface.surface_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 12,
                        fontWeight: 700,
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {surface.display_name}
                      </span>
                      <Chip value={observabilityValueLabel(surface.status)} muted={surface.status === 'verified'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={observabilityValueLabel(surface.kind)} />
                      <Chip value={`${t('observability.labels.evidence')}: ${observabilityValueLabel(surface.evidence_status)}`} muted={surface.evidence_status === 'committed_manifest' || surface.evidence_status === 'production_readback_recorded'} />
                      <Chip value={`${t('observability.labels.noise')}: ${observabilityValueLabel(surface.noise_policy_status)}`} muted />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {surface.coverage_contract}
                    </div>
                    {surface.current_contract ? (
                      <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                        {surface.current_contract}
                      </div>
                    ) : null}
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {surface.next_action}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={surface.evidence_refs[0] ?? t('backupEvidence.noEvidence')} muted />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('observability.noiseTitle')}
                </span>
                {visibleNoiseOpportunities.slice(0, 5).map(opportunity => (
                  <div key={opportunity.opportunity_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {opportunity.display_name}
                      </span>
                      <Chip value={observabilityValueLabel(opportunity.status)} muted />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {opportunity.impact}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('observability.classificationTitle')}
                </span>
                {observabilityMatrix.classification_gaps.map(gap => (
                  <div key={gap.gap_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {gap.display_name}
                      </span>
                      <Chip value={observabilityValueLabel(gap.status)} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gap.summary}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('observability.contractTitle')}
                </span>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {observabilityMatrix.operator_contract.alertmanager_route_policy}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {observabilityMatrix.operator_contract.noise_reduction_policy}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {observabilityMatrix.operator_contract.notification_policy}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                  {observabilityMatrix.operator_contract.must_not_interpret_as.slice(0, 6).map(item => (
                    <Chip key={item} value={item} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Route size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('providerRoute.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('providerRoute.source', {
                generated: formatDateTime(providerRouteMatrix.generated_at),
                current: providerRouteMatrix.program_status.current_task_id,
                next: providerRouteMatrix.program_status.next_task_id,
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-provider-kpi-grid">
            <MetricCard label={t('providerRoute.metrics.routes')} value={providerRouteMatrix.rollups.total_routes} icon={<Route size={16} />} />
            <MetricCard label={t('providerRoute.metrics.actions')} value={providerRouteActions} tone={providerRouteActions > 0 ? 'warn' : 'ok'} icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('providerRoute.metrics.gates')} value={providerRouteGateApprovals} tone="warn" icon={<Lock size={16} />} />
            <MetricCard label={t('providerRoute.metrics.blocked')} value={providerBlockedRoutes} tone={providerBlockedRoutes > 0 ? 'danger' : 'ok'} icon={<ShieldCheck size={16} />} />
            <MetricCard label={t('providerRoute.metrics.denied')} value={providerRouteDeniedCount} tone="ok" icon={<BellOff size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-provider-map-grid">
            <SummaryTile
              label={t('providerRoute.map.ollama')}
              value="3"
              detail={t('providerRoute.map.ollamaDetail')}
              tone="ok"
              icon={<GitBranch size={16} />}
            />
            <SummaryTile
              label={t('providerRoute.map.candidate')}
              value={`${providerBlockedRoutes}`}
              detail={t('providerRoute.map.candidateDetail')}
              tone="danger"
              icon={<Target size={16} />}
            />
            <SummaryTile
              label={t('providerRoute.map.cost')}
              value={`${providerRouteGateApprovals}`}
              detail={t('providerRoute.map.costDetail')}
              tone="warn"
              icon={<Gauge size={16} />}
            />
            <SummaryTile
              label={t('providerRoute.map.safeBoundary')}
              value="0"
              detail={t('providerRoute.map.safeBoundaryDetail')}
              tone="ok"
              icon={<ShieldCheck size={16} />}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-provider-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-provider-route-grid">
              {visibleProviderRoutes.map(routeItem => (
                <div key={routeItem.route_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 12,
                        fontWeight: 700,
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {routeItem.display_name}
                      </span>
                      <Chip value={providerRouteValueLabel(routeItem.status)} muted={routeItem.status === 'verified'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={providerRouteValueLabel(routeItem.kind)} />
                      <Chip value={providerRouteValueLabel(routeItem.route_gate)} muted={routeItem.route_gate === 'route_preserved'} />
                      <Chip value={`${t('providerRoute.labels.evidence')}: ${providerRouteValueLabel(routeItem.evidence_status)}`} muted />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      {routeItem.provider_order.map(provider => (
                        <Chip key={`${routeItem.route_id}-${provider}`} value={providerRouteValueLabel(provider)} />
                      ))}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {routeItem.current_policy}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {routeItem.fallback_policy}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {routeItem.next_action}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={routeItem.evidence_refs[0] ?? t('backupEvidence.noEvidence')} muted />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('providerRoute.gatesTitle')}
                </span>
                {providerRouteMatrix.candidate_gates.map(gate => (
                  <div key={gate.gate_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {gate.display_name}
                      </span>
                      <Chip value={providerRouteValueLabel(gate.status)} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gate.summary}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('providerRoute.gapsTitle', { count: providerSourceGaps })}
                </span>
                {providerRouteMatrix.source_gaps.map(gap => (
                  <div key={gap.gap_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {gap.display_name}
                      </span>
                      <Chip value={providerRouteValueLabel(gap.status)} muted={gap.status === 'proposal_required'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gap.summary}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('providerRoute.contractTitle')}
                </span>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {providerRouteMatrix.operator_contract.provider_switch_policy}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {providerRouteMatrix.operator_contract.cost_policy}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {providerRouteMatrix.operator_contract.runtime_policy}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                  {providerRouteMatrix.operator_contract.must_not_interpret_as.slice(0, 6).map(item => (
                    <Chip key={item} value={item} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
              <Server size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('serviceHealth.title')}
              </span>
            </div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f' }}>
              {t('serviceHealth.source', {
                generated: formatDateTime(serviceHealthGapMatrix.generated_at),
                current: serviceHealthGapMatrix.program_status.current_task_id,
                next: serviceHealthGapMatrix.program_status.next_task_id,
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12 }} className="automation-inventory-service-health-kpi-grid">
            <MetricCard label={t('serviceHealth.metrics.targets')} value={serviceHealthGapMatrix.rollups.total_targets} icon={<Server size={16} />} />
            <MetricCard label={t('serviceHealth.metrics.actions')} value={serviceHealthActions} tone={serviceHealthActions > 0 ? 'warn' : 'ok'} icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('serviceHealth.metrics.stale')} value={serviceHealthStaleGaps} tone={serviceHealthStaleGaps > 0 ? 'warn' : 'ok'} icon={<Target size={16} />} />
            <MetricCard label={t('serviceHealth.metrics.gaps')} value={serviceHealthOperatorReviews} tone={serviceHealthOperatorReviews > 0 ? 'warn' : 'ok'} icon={<Lock size={16} />} />
            <MetricCard label={t('serviceHealth.metrics.denied')} value={serviceHealthDeniedCount} tone="ok" icon={<BellOff size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-service-health-map-grid">
            <SummaryTile
              label={t('serviceHealth.map.coverage')}
              value={`${serviceHealthGapMatrix.rollups.total_targets}`}
              detail={t('serviceHealth.map.coverageDetail')}
              tone="ok"
              icon={<Database size={16} />}
            />
            <SummaryTile
              label={t('serviceHealth.map.stale')}
              value={`${serviceHealthStaleGaps}`}
              detail={t('serviceHealth.map.staleDetail')}
              tone="warn"
              icon={<Target size={16} />}
            />
            <SummaryTile
              label={t('serviceHealth.map.review')}
              value={`${serviceHealthOperatorReviews}`}
              detail={t('serviceHealth.map.reviewDetail')}
              tone="warn"
              icon={<Gauge size={16} />}
            />
            <SummaryTile
              label={t('serviceHealth.map.safeBoundary')}
              value="0"
              detail={t('serviceHealth.map.safeBoundaryDetail')}
              tone="ok"
              icon={<ShieldCheck size={16} />}
            />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                <FileText size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('serviceHealth.evidenceCardsTitle')}
                </span>
              </div>
              <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45 }}>
                {t('serviceHealth.evidenceCardsDetail')}
              </span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-service-health-evidence-grid">
              {visibleServiceHealthEvidenceCards.map(({ target, primaryEvidence, extraEvidenceCount }) => (
                <div key={`${target.target_id}-evidence`} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                    <span style={{
                      fontFamily: 'Syne, sans-serif',
                      fontSize: 12,
                      fontWeight: 700,
                      color: '#141413',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}>
                      {target.display_name}
                    </span>
                    <Chip value={serviceHealthValueLabel(target.status)} muted={target.status === 'verified'} />
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                    <Chip value={serviceHealthValueLabel(target.kind)} muted />
                    <Chip value={serviceHealthValueLabel(target.freshness_status)} muted={target.status === 'verified'} />
                    <Chip value={serviceHealthValueLabel(target.risk_level)} />
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
                    <SmallLabel>{t('serviceHealth.labels.primaryEvidence')}</SmallLabel>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {primaryEvidence ?? t('backupEvidence.noEvidence')}
                    </div>
                    {extraEvidenceCount > 0 ? (
                      <Chip value={t('serviceHealth.labels.extraEvidence', { count: extraEvidenceCount })} muted />
                    ) : null}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
                    <SmallLabel>{t('serviceHealth.labels.nextAction')}</SmallLabel>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {target.next_action}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 0.65fr)', gap: 12 }} className="automation-inventory-service-health-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-service-health-target-grid">
              {visibleServiceHealthTargets.map(targetItem => (
                <div key={targetItem.target_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif',
                        fontSize: 12,
                        fontWeight: 700,
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {targetItem.display_name}
                      </span>
                      <Chip value={serviceHealthValueLabel(targetItem.status)} muted={targetItem.status === 'verified'} />
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={serviceHealthValueLabel(targetItem.kind)} />
                      <Chip value={`${t('serviceHealth.labels.freshness')}: ${serviceHealthValueLabel(targetItem.freshness_status)}`} muted />
                      <Chip value={`${t('serviceHealth.labels.risk')}: ${serviceHealthValueLabel(targetItem.risk_level)}`} muted={targetItem.risk_level !== 'critical'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {targetItem.health_contract}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {targetItem.endpoint_contract}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {targetItem.next_action}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                      <Chip value={targetItem.evidence_refs[0] ?? t('backupEvidence.noEvidence')} muted />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('serviceHealth.staleTitle', { count: serviceHealthStaleGaps })}
                </span>
                {serviceHealthGapMatrix.stale_endpoints.map(endpoint => (
                  <div key={endpoint.endpoint_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {endpoint.display_name}
                      </span>
                      <Chip value={serviceHealthValueLabel(endpoint.status)} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {endpoint.stale_ref}
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#141413', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {endpoint.current_truth}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('serviceHealth.gapsTitle', { count: serviceHealthOperatorReviews })}
                </span>
                {serviceHealthGapMatrix.health_gaps.slice(0, 4).map(gap => (
                  <div key={gap.gap_id} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {gap.display_name}
                      </span>
                      <Chip value={serviceHealthValueLabel(gap.status)} muted={gap.status === 'proposal_required'} />
                    </div>
                    <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                      {gap.summary}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('serviceHealth.contractTitle')}
                </span>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {serviceHealthGapMatrix.operator_contract.restart_policy}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {serviceHealthGapMatrix.operator_contract.endpoint_policy}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {serviceHealthGapMatrix.operator_contract.notification_policy}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                  {serviceHealthGapMatrix.operator_contract.must_not_interpret_as.slice(0, 6).map(item => (
                    <Chip key={item} value={item} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <GlassCard variant="subtle" padding="md">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <BellRing size={14} style={{ color: '#d97757' }} />
                <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                  {t('serviceHealthNotification.title')}
                </span>
              </div>
              <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45 }}>
                {t('serviceHealthNotification.source', {
                  generated: formatDateTime(serviceHealthNotificationPolicy.generated_at),
                  current: serviceHealthNotificationPolicy.program_status.current_task_id,
                  next: serviceHealthNotificationPolicy.program_status.next_task_id,
                })}
              </span>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              <Chip value={t('serviceHealthNotification.quietBadge', { count: serviceHealthSuppressedSuccess })} muted />
              <Chip value={t('serviceHealthNotification.redactionBadge', { count: serviceHealthRedactionCategoryCount })} muted />
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-service-health-notification-kpi-grid">
            <MetricCard label={t('serviceHealthNotification.metrics.rules')} value={serviceHealthNotificationPolicy.rollups.total_rules} icon={<BellRing size={16} />} />
            <MetricCard label={t('serviceHealthNotification.metrics.quiet')} value={serviceHealthSuppressedSuccess} tone="ok" icon={<BellOff size={16} />} />
            <MetricCard label={t('serviceHealthNotification.metrics.actionRequired')} value={serviceHealthActionRequiredRules} tone="warn" icon={<AlertTriangle size={16} />} />
            <MetricCard label={t('serviceHealthNotification.metrics.escalate')} value={serviceHealthImmediateEscalations} tone="warn" icon={<ShieldAlert size={16} />} />
            <MetricCard label={t('serviceHealthNotification.metrics.allowedSend')} value={serviceHealthNotificationAllowedCount} tone="ok" icon={<Lock size={16} />} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-service-health-notification-map-grid">
            <SummaryTile
              label={t('serviceHealthNotification.map.failureOnly')}
              value={`${serviceHealthImmediateEscalations}`}
              detail={t('serviceHealthNotification.map.failureOnlyDetail')}
              tone="warn"
              icon={<ShieldAlert size={16} />}
            />
            <SummaryTile
              label={t('serviceHealthNotification.map.quietSuccess')}
              value={`${serviceHealthSuppressedSuccess}`}
              detail={t('serviceHealthNotification.map.quietSuccessDetail')}
              tone="ok"
              icon={<BellOff size={16} />}
            />
            <SummaryTile
              label={t('serviceHealthNotification.map.blockedOperations')}
              value="0"
              detail={t('serviceHealthNotification.map.blockedOperationsDetail')}
              tone="ok"
              icon={<Lock size={16} />}
            />
            <SummaryTile
              label={t('serviceHealthNotification.map.redaction')}
              value={serviceHealthRedactionLocked ? t('serviceHealthNotification.values.locked') : t('serviceHealthNotification.values.review_required')}
              detail={t('serviceHealthNotification.map.redactionDetail', { count: serviceHealthRedactionCategoryCount })}
              tone={serviceHealthRedactionLocked ? 'ok' : 'warn'}
              icon={<ShieldCheck size={16} />}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)', gap: 12 }} className="automation-inventory-service-health-notification-grid">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-service-health-notification-rule-grid">
              {serviceHealthNotificationPolicy.policy_rules.map(rule => (
                <div key={rule.rule_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                    <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, fontWeight: 700, color: '#141413', overflowWrap: 'anywhere' }}>
                      {rule.rule_id}
                    </span>
                    <Chip value={serviceHealthValueLabel(rule.severity)} muted={rule.severity !== 'critical'} />
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    <Chip value={serviceHealthValueLabel(rule.service_state)} muted={rule.service_state === 'verified'} />
                    <Chip value={serviceHealthNotificationDecisionLabel(rule.decision)} />
                  </div>
                  <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
                    {rule.message_contract}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('serviceHealthNotification.templateTitle')}</SmallLabel>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {serviceHealthNotificationPolicy.message_template_contract.required_fields.map(field => (
                    <Chip key={field} value={field} muted />
                  ))}
                </div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {serviceHealthNotificationPolicy.message_template_contract.success_message_policy}
                </div>
              </div>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('serviceHealthNotification.redactionTitle')}</SmallLabel>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {serviceHealthNotificationPolicy.display_redaction_contract.frontend_display_policy}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={t('serviceHealthNotification.labels.transcriptAllowed', { value: String(serviceHealthNotificationPolicy.display_redaction_contract.conversation_transcript_display_allowed) })} />
                  <Chip value={t('serviceHealthNotification.labels.redactionRequired', { value: String(serviceHealthNotificationPolicy.display_redaction_contract.redaction_required) })} muted />
                </div>
              </div>
              <div style={{ padding: 12, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                <SmallLabel>{t('serviceHealthNotification.boundaryTitle')}</SmallLabel>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#87867f', lineHeight: 1.5, overflowWrap: 'anywhere' }}>
                  {t('serviceHealthNotification.boundaryDetail', {
                    notification: String(serviceHealthNotificationPolicy.operation_boundaries.notification_send_allowed),
                    probe: String(serviceHealthNotificationPolicy.operation_boundaries.live_probe_allowed),
                    restart: String(serviceHealthNotificationPolicy.operation_boundaries.service_restart_allowed),
                    runtime: String(serviceHealthNotificationPolicy.operation_boundaries.runtime_execution_allowed),
                  })}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <Chip value={t('serviceHealthNotification.labels.forbiddenFieldCount', { count: serviceHealthForbiddenFieldCount })} />
                  <Chip value={t('serviceHealthNotification.labels.noRawInternalFields')} muted />
                </div>
              </div>
            </div>
          </div>
        </div>
      </GlassCard>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 0.8fr)', gap: 12 }} className="automation-inventory-bottom-grid">
        <GlassCard variant="subtle" padding="md">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <PackageCheck size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('tasks.title', { done: completedTasks, total: snapshot.tasks.length })}
              </span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-task-grid">
              {snapshot.tasks.map(task => (
                <div key={task.task_id} style={{ padding: 11, border: '0.5px solid #e0ddd4', borderRadius: 7, background: '#fff', minWidth: 0 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, color: '#141413' }}>
                        {task.task_id}
                      </span>
                      <Chip value={t(`tasks.statuses.${task.status}`)} muted={task.status !== 'done'} />
                    </div>
                    <span style={{
                      fontFamily: 'Syne, sans-serif',
                      fontSize: 12,
                      fontWeight: 700,
                      color: '#141413',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}>
                      {task.title}
                    </span>
                    <ProgressRow label={task.owner_agent} percent={task.completion_percent} nextTask={task.gate_status} />
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
                      <div style={{
                        fontFamily: "'DM Mono', monospace",
                        fontSize: 10,
                        color: '#87867f',
                        lineHeight: 1.45,
                        overflowWrap: 'anywhere',
                      }}>
                        {task.approval_boundary.display_summary}
                      </div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
                        <Chip value={`${t('tasks.boundaryLabels.mode')}: ${statusLabel(task.approval_boundary.mode)}`} muted />
                        <Chip value={`${t('tasks.boundaryLabels.allowed')}: ${task.approval_boundary.allowed_actions[0]}`} muted />
                        <Chip value={`${t('tasks.boundaryLabels.blocked')}: ${task.approval_boundary.blocked_actions.slice(0, 3).map(boundaryActionLabel).join(' / ')}`} />
                        {task.approval_boundary.requires_operator_approval_for.length > 0 ? (
                          <Chip value={`${t('tasks.boundaryLabels.requiresApproval')}: ${task.approval_boundary.requires_operator_approval_for[0]}`} muted />
                        ) : null}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </GlassCard>

        <GlassCard variant="subtle" padding="md">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <Lock size={14} style={{ color: '#d97757' }} />
              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
                {t('boundaries.title')}
              </span>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, minWidth: 0 }}>
              {blockedApprovals.map(key => (
                <Chip key={key} value={t(`boundaries.items.${key}`)} />
              ))}
            </div>
          </div>
        </GlassCard>
      </div>

      <style jsx global>{`
        .automation-inventory-tab-root,
        .automation-inventory-tab-root * {
          min-width: 0;
        }

        .automation-inventory-tab-root span,
        .automation-inventory-tab-root div {
          overflow-wrap: anywhere;
        }

        .automation-inventory-tab-root span {
          white-space: normal !important;
        }

        @media (max-width: 900px) {
          .automation-inventory-kpi-grid,
          .automation-inventory-command-grid,
          .automation-inventory-summary-grid,
          .automation-inventory-decision-grid,
          .automation-inventory-decision-factor-grid,
          .automation-inventory-progress-kpi-grid,
          .automation-inventory-progress-grid,
          .automation-inventory-progress-workstream-grid,
          .automation-inventory-workstream-grid,
          .automation-inventory-domain-grid,
          .automation-inventory-backlog-grid,
          .automation-inventory-backup-kpi-grid,
          .automation-inventory-backup-evidence-grid,
          .automation-inventory-backup-readiness-grid,
          .automation-inventory-offsite-kpi-grid,
          .automation-inventory-offsite-grid,
          .automation-inventory-offsite-card-grid,
          .automation-inventory-runtime-kpi-grid,
          .automation-inventory-runtime-grid,
          .automation-inventory-runtime-surface-grid,
          .automation-inventory-gitea-kpi-grid,
          .automation-inventory-gitea-map-grid,
          .automation-inventory-gitea-grid,
          .automation-inventory-gitea-workflow-grid,
          .automation-inventory-observability-kpi-grid,
          .automation-inventory-observability-map-grid,
          .automation-inventory-observability-grid,
          .automation-inventory-observability-surface-grid,
          .automation-inventory-provider-kpi-grid,
          .automation-inventory-provider-map-grid,
          .automation-inventory-provider-grid,
          .automation-inventory-provider-route-grid,
          .automation-inventory-deployment-layout-kpi-grid,
          .automation-inventory-deployment-layout-grid,
          .automation-inventory-deployment-layout-target-grid,
          .automation-inventory-proof-kpi-grid,
          .automation-inventory-proof-truth-grid,
          .automation-inventory-proof-grid,
          .automation-inventory-proof-ladder-grid,
          .automation-inventory-proof-signal-grid,
          .automation-inventory-live-read-kpi-grid,
          .automation-inventory-live-read-grid,
          .automation-inventory-live-read-card-grid,
          .automation-inventory-service-health-kpi-grid,
          .automation-inventory-service-health-map-grid,
          .automation-inventory-service-health-evidence-grid,
          .automation-inventory-service-health-notification-kpi-grid,
          .automation-inventory-service-health-notification-grid,
          .automation-inventory-service-health-notification-rule-grid,
          .automation-inventory-service-health-grid,
          .automation-inventory-service-health-target-grid,
          .automation-inventory-service-health-notification-kpi-grid,
          .automation-inventory-service-health-notification-map-grid,
          .automation-inventory-service-health-notification-grid,
          .automation-inventory-service-health-notification-rule-grid,
          .automation-inventory-bottom-grid,
          .automation-inventory-task-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </div>
  )
}
