feat(notifications): expose canonical Telegram routing

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

@@ -14,9 +14,12 @@ import {
   Bell,
   BellOff,
   CheckCircle2,
+  LockKeyhole,
   MessageSquare,
   RefreshCw,
+  Route,
   Send,
+  ShieldCheck,
   Slack,
   XCircle,
 } from 'lucide-react'
@@ -30,6 +33,59 @@ interface Channel {
   status: string
 }
 
+interface TelegramRouteProduct {
+  product_id: string
+  display_name: string
+  owner: string
+  source_audit_status: string
+  egress_status: string
+}
+
+interface TelegramRouteItem {
+  route_id: string
+  product_id: string
+  signal_family: string
+  severity: string[]
+  bot_alias: string
+  chat_alias: string
+  receipt_backend: string
+  egress_status: string
+  decision: 'allow' | 'block'
+  decision_reason: string
+}
+
+interface TelegramDestinationRole {
+  visible_label: string
+  chat_alias: string
+  bot_alias: string
+  bot_owner: string
+  monitoring_owner: boolean
+  role: string
+  monitoring_egress_policy: string
+}
+
+interface TelegramRoutingReadback {
+  status: string
+  source_status: string
+  source_generated_at: string
+  runtime_generated_at: string
+  runtime_enforcement: {
+    canonical_resolver_active: boolean
+    gateway_pre_send_gate_active: boolean
+    unknown_route_decision: string
+    all_product_delivery_receipts_ready: boolean
+  }
+  rollups: {
+    product_count: number
+    route_count: number
+    runtime_allowed_route_count: number
+    runtime_blocked_route_count: number
+  }
+  destination_roles: TelegramDestinationRole[]
+  products: TelegramRouteProduct[]
+  routes: TelegramRouteItem[]
+}
+
 const STATUS_CFG: Record<string, { badge: string; dot: string; dotPulse?: string; icon: typeof CheckCircle2; label: string }> = {
   active:   { badge: 'bg-[#f0faf2] border-[#8fc29a] text-[#17602a]', dot: 'bg-[#22C55E]', dotPulse: 'animate-pulse', icon: CheckCircle2, label: 'Active' },
   enabled:  { badge: 'bg-[#f0faf2] border-[#8fc29a] text-[#17602a]', dot: 'bg-[#22C55E]', icon: CheckCircle2, label: 'Enabled' },
@@ -51,17 +107,33 @@ export default function NotificationsPage({ params }: { params: { locale: string
   const tc = useTranslations('common')
   const [channels, setChannels] = useState<Channel[]>([])
   const [loading, setLoading] = useState(true)
+  const [routing, setRouting] = useState<TelegramRoutingReadback | null>(null)
+  const [routingLoading, setRoutingLoading] = useState(true)
+  const [routingError, setRoutingError] = useState(false)
 
   const fetchData = () => {
     setLoading(true)
-    fetch(`${API_BASE}/api/v1/notifications/channels`)
-      .then(r => {
-        if (!r.ok) throw new Error('not found')
-        return r.json()
-      })
-      .then(data => { setChannels(Array.isArray(data) ? data : (data?.channels ?? [])) })
-      .catch(() => { setChannels([]) })
-      .finally(() => setLoading(false))
+    setRoutingLoading(true)
+    setRoutingError(false)
+    void Promise.allSettled([
+      fetch(`${API_BASE}/api/v1/notifications/channels`).then(async response => {
+        if (!response.ok) throw new Error('channels unavailable')
+        const data = await response.json()
+        setChannels(Array.isArray(data) ? data : (data?.channels ?? []))
+      }),
+      fetch(`${API_BASE}/api/v1/agents/telegram-canonical-routing-runtime-readback`).then(async response => {
+        if (!response.ok) throw new Error('routing unavailable')
+        setRouting(await response.json() as TelegramRoutingReadback)
+      }),
+    ]).then(results => {
+      if (results[0].status === 'rejected') setChannels([])
+      if (results[1].status === 'rejected') {
+        setRouting(null)
+        setRoutingError(true)
+      }
+      setLoading(false)
+      setRoutingLoading(false)
+    })
   }
 
   useEffect(() => { fetchData() }, []) // eslint-disable-line react-hooks/exhaustive-deps
@@ -72,13 +144,13 @@ export default function NotificationsPage({ params }: { params: { locale: string
   return (
     <AppLayout locale={params.locale}>
       <main className="min-h-[calc(100vh-68px)] bg-[#f5f4ed] p-5 lg:p-6">
-        <div className="mx-auto max-w-3xl">
+        <div className="mx-auto max-w-6xl">
 
           {/* Header */}
           <div className="mb-6 flex items-start justify-between gap-3">
             <div>
               <p className="text-[11px] font-semibold uppercase tracking-wider text-[#77736a]">
-                Alerting
+                {t('eyebrow')}
               </p>
               <h1 className="mt-1 text-2xl font-bold text-[#141413]">{t('title')}</h1>
               <p className="mt-1 text-sm text-[#77736a]">{t('subtitle')}</p>
@@ -93,12 +165,167 @@ export default function NotificationsPage({ params }: { params: { locale: string
             </button>
           </div>
 
+          {/* Canonical Telegram routing cockpit */}
+          <section
+            data-testid="telegram-routing-cockpit"
+            className="mb-5 overflow-hidden rounded-2xl border border-[#e0ddd4] bg-white"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#e0ddd4] bg-[#faf9f3] px-5 py-4">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <Route className="h-4 w-4 shrink-0 text-[#d97757]" aria-hidden="true" />
+                  <h2 className="font-semibold text-[#141413]">{t('routing.title')}</h2>
+                </div>
+                <p className="mt-1 text-xs text-[#77736a]">
+                  {t('routing.subtitle')}
+                </p>
+              </div>
+              {routing?.runtime_enforcement.gateway_pre_send_gate_active && (
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-[#8fc29a] bg-[#f0faf2] px-3 py-1 text-[10px] font-bold uppercase text-[#17602a]">
+                  <ShieldCheck className="h-3 w-3" aria-hidden="true" />
+                  {t('routing.gateActive')}
+                </span>
+              )}
+            </div>
+
+            {routingLoading && (
+              <div className="grid animate-pulse grid-cols-2 gap-3 p-5 lg:grid-cols-4">
+                {[0, 1, 2, 3].map(item => <div key={item} className="h-20 rounded-xl bg-[#f5f4ed]" />)}
+              </div>
+            )}
+
+            {!routingLoading && routingError && (
+              <div className="flex items-start gap-3 bg-[#fff7e8] px-5 py-4 text-sm text-[#8a5a08]">
+                <LockKeyhole className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                <p>{t('routing.unavailable')}</p>
+              </div>
+            )}
+
+            {!routingLoading && routing && (
+              <div className="space-y-5 p-5">
+                <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+                  {[
+                    { key: 'products', label: t('routing.metrics.products'), value: routing.rollups.product_count, tone: 'text-[#141413]' },
+                    { key: 'routes', label: t('routing.metrics.routes'), value: routing.rollups.route_count, tone: 'text-[#141413]' },
+                    { key: 'allowed', label: t('routing.metrics.allowed'), value: routing.rollups.runtime_allowed_route_count, tone: 'text-[#17602a]' },
+                    { key: 'blocked', label: t('routing.metrics.blocked'), value: routing.rollups.runtime_blocked_route_count, tone: 'text-[#9f2f25]' },
+                  ].map(({ key, label, value, tone }) => (
+                    <div key={key} className="min-w-0 rounded-xl border border-[#e0ddd4] bg-[#faf9f3] p-4">
+                      <p className="text-xs text-[#77736a]">{label}</p>
+                      <p className={cn('mt-1 font-mono text-2xl font-bold', tone)}>{value}</p>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="rounded-xl border border-[#8fc29a] bg-[#f0faf2] p-4 text-sm text-[#17602a]">
+                  <p className="font-semibold">{t('routing.sharedTitle')}</p>
+                  <p className="mt-1 text-xs leading-5">
+                    {t('routing.sharedDetail')}
+                  </p>
+                </div>
+
+                <details className="rounded-xl border border-[#e0ddd4] bg-white">
+                  <summary className="cursor-pointer list-none px-4 py-3 font-semibold text-[#141413]">
+                    {t('routing.rolesSummary', { count: routing.destination_roles.length })}
+                  </summary>
+                  <div className="grid gap-3 border-t border-[#e0ddd4] p-4 md:grid-cols-2">
+                    {routing.destination_roles.map(role => (
+                      <div key={`${role.visible_label}-${role.bot_alias}`} className="min-w-0 rounded-xl bg-[#faf9f3] p-3">
+                        <div className="flex items-center justify-between gap-2">
+                          <p className="truncate font-semibold text-[#141413]">{role.visible_label}</p>
+                          <span className={cn(
+                            'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-bold',
+                            role.monitoring_owner
+                              ? 'border-[#8fc29a] bg-[#f0faf2] text-[#17602a]'
+                              : 'border-[#e0ddd4] bg-white text-[#77736a]',
+                          )}>
+                            {role.monitoring_owner ? t('routing.monitoringOwner') : t('routing.nonMonitoringOwner')}
+                          </span>
+                        </div>
+                        <p className="mt-1 break-words font-mono text-[11px] text-[#77736a]">
+                          {role.bot_alias} → {role.chat_alias}
+                        </p>
+                        <p className="mt-2 text-xs leading-5 text-[#4f4d47]">{role.role}</p>
+                      </div>
+                    ))}
+                  </div>
+                </details>
+
+                <details className="rounded-xl border border-[#e0ddd4] bg-white">
+                  <summary className="cursor-pointer list-none px-4 py-3 font-semibold text-[#141413]">
+                    {t('routing.routesSummary', {
+                      products: routing.products.length,
+                      routes: routing.routes.length,
+                    })}
+                  </summary>
+                  <div className="grid gap-3 border-t border-[#e0ddd4] p-4 lg:grid-cols-2">
+                    {routing.products.map(product => {
+                      const productRoutes = routing.routes.filter(route => route.product_id === product.product_id)
+                      return (
+                        <article key={product.product_id} className="min-w-0 rounded-xl border border-[#e0ddd4] p-4">
+                          <div className="flex flex-wrap items-start justify-between gap-2">
+                            <div className="min-w-0">
+                              <p className="font-semibold text-[#141413]">{product.display_name}</p>
+                              <p className="mt-0.5 break-words font-mono text-[11px] text-[#77736a]">{product.product_id}</p>
+                            </div>
+                            <span className={cn(
+                              'rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase',
+                              product.egress_status === 'allowed'
+                                ? 'border-[#8fc29a] bg-[#f0faf2] text-[#17602a]'
+                                : 'border-[#f5b8b8] bg-[#fff0ed] text-[#9f2f25]',
+                            )}>
+                              {product.egress_status}
+                            </span>
+                          </div>
+                          <div className="mt-3 space-y-2">
+                            {productRoutes.map(route => (
+                              <div key={route.route_id} className="rounded-lg bg-[#faf9f3] p-3">
+                                <div className="flex flex-wrap items-center justify-between gap-2">
+                                  <p className="break-words text-xs font-semibold text-[#141413]">{route.signal_family}</p>
+                                  <span className={cn(
+                                    'rounded-full px-2 py-0.5 text-[10px] font-bold',
+                                    route.decision === 'allow'
+                                      ? 'bg-[#f0faf2] text-[#17602a]'
+                                      : 'bg-[#fff0ed] text-[#9f2f25]',
+                                  )}>
+                                    {route.decision === 'allow' ? t('routing.allow') : t('routing.noSend')}
+                                  </span>
+                                </div>
+                                <p className="mt-1 break-words font-mono text-[10px] text-[#77736a]">
+                                  {route.severity.join('/')} · {route.bot_alias} → {route.chat_alias}
+                                </p>
+                                <p className="mt-1 break-words text-[11px] leading-4 text-[#77736a]">{route.decision_reason}</p>
+                              </div>
+                            ))}
+                          </div>
+                        </article>
+                      )
+                    })}
+                  </div>
+                </details>
+
+                <p className="break-words font-mono text-[10px] text-[#77736a]">
+                  {t('routing.footer', { runtime: routing.status, source: routing.source_status })}
+                </p>
+                <p className="text-[10px] text-[#77736a]">
+                  {t('routing.generatedAt', {
+                    time: new Intl.DateTimeFormat(params.locale, {
+                      dateStyle: 'medium',
+                      timeStyle: 'medium',
+                      timeZone: 'Asia/Taipei',
+                    }).format(new Date(routing.runtime_generated_at)),
+                  })}
+                </p>
+              </div>
+            )}
+          </section>
+
           {/* Summary */}
           {!loading && channels.length > 0 && (
             <div className="mb-4 grid grid-cols-2 gap-3">
               <div className="flex flex-col items-center rounded-xl border border-[#8fc29a] bg-[#f0faf2] p-4">
                 <span className="font-mono text-3xl font-bold text-[#17602a]">{activeCount}</span>
-                <span className="mt-1 text-xs text-[#77736a]">Active Channels</span>
+                <span className="mt-1 text-xs text-[#77736a]">{t('activeChannels')}</span>
               </div>
               <div className={cn(
                 'flex flex-col items-center rounded-xl border p-4',
@@ -107,7 +334,7 @@ export default function NotificationsPage({ params }: { params: { locale: string
                 <span className={cn('font-mono text-3xl font-bold', errorCount > 0 ? 'text-[#9f2f25]' : 'text-[#77736a]')}>
                   {errorCount}
                 </span>
-                <span className="mt-1 text-xs text-[#77736a]">Errors</span>
+                <span className="mt-1 text-xs text-[#77736a]">{t('errors')}</span>
               </div>
             </div>
           )}