feat(web): clarify sealed slo observation state

apps/web/src/app/[locale]/governance/tabs/slo-tab.tsx

@@ -281,6 +281,7 @@ function closureStatusKey(value?: string | null): string {
 function diagnosticTone(status?: string | null, openGroups = 0): string {
   if (openGroups > 0 || status === 'needs_investigation') return '#FF3300'
   if (status === 'green') return '#22C55E'
+  if (status === 'sealed_waiting_window' && openGroups === 0) return '#0EA5E9'
   if (status === 'diagnostics_unavailable') return '#87867f'
   return '#F59E0B'
 }
@@ -451,6 +452,7 @@ function AutoExecuteDiagnosticsPanel({ diagnostics }: { diagnostics?: AutoExecut
   const projectedAt = formatShortDate(diagnostics?.projected_green_at)
   const rateLabel = rate == null ? '--' : `${(rate * 100).toFixed(1)}%`
   const thresholdLabel = `${(threshold * 100).toFixed(0)}%`
+  const observationOnly = diagnostics?.status === 'sealed_waiting_window' && openGroups === 0
 
   const statItems = [
     { key: 'successRate', icon: CheckCircle2, value: rateLabel, detail: t('stat.successRateDetail', { success, total }) },
@@ -498,6 +500,29 @@ function AutoExecuteDiagnosticsPanel({ diagnostics }: { diagnostics?: AutoExecut
           </div>
         </div>
 
+        {observationOnly && (
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            gap: 10,
+            alignItems: 'center',
+            padding: '10px 11px',
+            borderRadius: 6,
+            border: `0.5px solid ${tone}40`,
+            background: `${tone}10`,
+          }}>
+            <ShieldCheck size={16} style={{ color: tone, flexShrink: 0 }} />
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 12, fontWeight: 700, color: '#141413' }}>
+                {t('observation.title')}
+              </div>
+              <div style={{ marginTop: 3, fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#4b5563', lineHeight: 1.45 }}>
+                {t('observation.detail', { greenAt: projectedAt || t('observation.greenAtFallback') })}
+              </div>
+            </div>
+          </div>
+        )}
+
         <div style={{ display: 'grid', gridTemplateColumns: 'minmax(220px, 1.1fr) minmax(260px, 1.8fr)', gap: 14 }} className="slo-auto-diagnostics-grid">
           <div style={{ minWidth: 0 }}>
             <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, marginBottom: 8 }}>