feat(governance): 新增 AI 技術雷達日週月報讀回

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

@@ -14,7 +14,7 @@ import { useTranslations } from 'next-intl'
 import { GlassCard } from '@/components/ui/glass-card'
 import { StatusOrb } from '@/components/ui/status-orb'
 import { AgentActivityConstellation } from '@/components/governance/agent-activity-constellation'
-import { apiClient, type AgentMarketGovernanceSnapshot, type AiTechnologyRadarReadback } from '@/lib/api-client'
+import { apiClient, type AgentMarketGovernanceSnapshot, type AiTechnologyRadarReadback, type AiTechnologyReportCadenceReadback } from '@/lib/api-client'
 
 // =============================================================================
 // Helpers
@@ -327,6 +327,109 @@ function ProfessionalAgentRoleCard({ role }: { role: AiTechnologyRadarReadback['
   )
 }
 
+function ReportCadenceCard({ cadence }: { cadence: AiTechnologyReportCadenceReadback['report_cadences'][number] }) {
+  return (
+    <div style={{
+      minWidth: 0,
+      padding: 12,
+      border: '0.5px solid #e0ddd4',
+      borderRadius: 7,
+      background: '#fff',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 9,
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }}>
+        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
+          {cadence.cadence_label}
+        </span>
+        <CandidatePill value={cadence.telegram_delivery_status} muted />
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+        <CandidatePill value={cadence.owner_agent} />
+        <CandidatePill value={cadence.reviewer_agent} muted />
+      </div>
+      <DetailRow label="REPORT PURPOSE">
+        {cadence.report_purpose}
+      </DetailRow>
+      <DetailRow label="AI ANALYSIS">
+        {cadence.ai_analysis_after_reading}
+      </DetailRow>
+    </div>
+  )
+}
+
+function AgentWorkloadCard({ workload }: { workload: AiTechnologyReportCadenceReadback['agent_workload_reports'][number] }) {
+  return (
+    <div style={{
+      minWidth: 0,
+      padding: 12,
+      border: '0.5px solid #e0ddd4',
+      borderRadius: 7,
+      background: '#fff',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 9,
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }}>
+        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
+          {workload.agent}
+        </span>
+        <CandidatePill value={`${workload.work_unit_count} ${workload.work_unit_label}`} />
+      </div>
+      <DetailRow label="RESPONSIBILITY">
+        {workload.professional_responsibility}
+      </DetailRow>
+      <DetailRow label="OUTPUT">
+        {workload.latest_output}
+      </DetailRow>
+      <DetailRow label="NEXT">
+        {workload.next_action}
+      </DetailRow>
+    </div>
+  )
+}
+
+function PostReportAnalysisCard({ packet }: { packet: AiTechnologyReportCadenceReadback['post_report_analysis_packets'][number] }) {
+  const tone = packet.risk_tier === 'high' ? '#F59E0B' : packet.risk_tier === 'medium' ? '#d97757' : '#22C55E'
+  return (
+    <div style={{
+      minWidth: 0,
+      padding: 12,
+      border: '0.5px solid #e0ddd4',
+      borderRadius: 7,
+      background: '#fff',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 9,
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }}>
+        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
+          {packet.report_id}
+        </span>
+        <span style={{
+          fontFamily: "'DM Mono', monospace",
+          fontSize: 10,
+          fontWeight: 700,
+          color: tone,
+          textTransform: 'uppercase',
+        }}>
+          {packet.risk_tier}
+        </span>
+      </div>
+      <DetailRow label="FINDING">
+        {packet.key_finding}
+      </DetailRow>
+      <DetailRow label="SOLUTION">
+        {packet.proposed_solution}
+      </DetailRow>
+      <DetailRow label="BOUNDARY">
+        {packet.execution_boundary}
+      </DetailRow>
+    </div>
+  )
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -335,6 +438,7 @@ export function AgentMarketTab() {
   const t = useTranslations('governance.agentMarket')
   const [snapshot, setSnapshot] = useState<AgentMarketGovernanceSnapshot | null>(null)
   const [technologyRadar, setTechnologyRadar] = useState<AiTechnologyRadarReadback | null>(null)
+  const [technologyReportCadence, setTechnologyReportCadence] = useState<AiTechnologyReportCadenceReadback | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
 
@@ -343,10 +447,12 @@ export function AgentMarketTab() {
     Promise.all([
       apiClient.getAgentMarketGovernanceSnapshot(),
       apiClient.getAiTechnologyRadarReadback(),
+      apiClient.getAiTechnologyReportCadenceReadback(),
     ])
-      .then(([marketSnapshot, radarReadback]) => {
+      .then(([marketSnapshot, radarReadback, reportCadenceReadback]) => {
         setSnapshot(marketSnapshot)
         setTechnologyRadar(radarReadback)
+        setTechnologyReportCadence(reportCadenceReadback)
         setError(false)
       })
       .catch(() => setError(true))
@@ -371,7 +477,7 @@ export function AgentMarketTab() {
     )
   }
 
-  if (error || !snapshot || !technologyRadar) {
+  if (error || !snapshot || !technologyRadar || !technologyReportCadence) {
     return (
       <div style={{ padding: 20 }}>
         <GlassCard variant="subtle" padding="lg">
@@ -407,6 +513,7 @@ export function AgentMarketTab() {
 
   const summary = snapshot.summary
   const radarSummary = technologyRadar.summary
+  const reportSummary = technologyReportCadence.summary
   const allApprovals =
     summary.priority_upgrades_approved +
     summary.market_scorecard_updates_approved +
@@ -527,6 +634,115 @@ export function AgentMarketTab() {
         </div>
       </GlassCard>
 
+      <GlassCard variant="subtle" padding="md">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
+              <ListChecks size={15} style={{ color: '#d97757' }} />
+              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 14, fontWeight: 700, color: '#141413' }}>
+                {t('technologyReports.title')}
+              </span>
+            </div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'flex-end' }}>
+              <CandidatePill value={technologyReportCadence.report_contract.api_endpoint} />
+              <CandidatePill value={technologyReportCadence.telegram_report_bridge.integration_status} muted />
+            </div>
+          </div>
+
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+            gap: 10,
+          }} className="agent-market-report-metrics-grid">
+            <RadarStat label={t('technologyReports.metrics.reports')} value={`${reportSummary.report_ready_count}/${reportSummary.report_cadence_count}`} tone="ok" />
+            <RadarStat label={t('technologyReports.metrics.charts')} value={reportSummary.chart_section_count} />
+            <RadarStat label={t('technologyReports.metrics.agentStatus')} value={reportSummary.agent_status_report_count} />
+            <RadarStat label={t('technologyReports.metrics.analysisPackets')} value={reportSummary.post_report_analysis_packet_count} />
+            <RadarStat label={t('technologyReports.metrics.lowMedium')} value={reportSummary.low_medium_auto_action_proposal_count} tone="ok" />
+            <RadarStat label={t('technologyReports.metrics.highRisk')} value={reportSummary.high_risk_owner_review_count} tone="warn" />
+          </div>
+
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+            gap: 10,
+          }} className="agent-market-report-gate-grid">
+            <DetailRow label={t('technologyReports.status')}>
+              <CandidatePill value={reportSummary.status} />
+            </DetailRow>
+            <DetailRow label={t('technologyReports.telegram')}>
+              <CandidatePill value={`send=${technologyReportCadence.policy.telegram_send_enabled}`} muted />
+            </DetailRow>
+            <DetailRow label={t('technologyReports.receipt')}>
+              <CandidatePill value={`receipt=${technologyReportCadence.policy.report_receipt_write_enabled}`} muted />
+            </DetailRow>
+            <DetailRow label={t('technologyReports.autoWrite')}>
+              <CandidatePill value={`runtime=${technologyReportCadence.policy.low_medium_runtime_auto_write_enabled}`} muted />
+            </DetailRow>
+          </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 }}>
+            <CalendarClock size={14} style={{ color: '#d97757' }} />
+            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
+              {t('technologyReports.cadencesTitle')}
+            </span>
+          </div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+            gap: 10,
+          }} className="agent-market-report-cadence-grid">
+            {technologyReportCadence.report_cadences.map(cadence => (
+              <ReportCadenceCard key={cadence.cadence} cadence={cadence} />
+            ))}
+          </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 }}>
+            <ShieldCheck size={14} style={{ color: '#d97757' }} />
+            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
+              {t('technologyReports.workloadTitle')}
+            </span>
+          </div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: 10,
+          }} className="agent-market-report-workload-grid">
+            {technologyReportCadence.agent_workload_reports.map(workload => (
+              <AgentWorkloadCard key={workload.agent} workload={workload} />
+            ))}
+          </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 }}>
+            <AlertTriangle size={14} style={{ color: '#F59E0B' }} />
+            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 13, fontWeight: 700, color: '#141413' }}>
+              {t('technologyReports.analysisTitle')}
+            </span>
+          </div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+            gap: 10,
+          }} className="agent-market-report-analysis-grid">
+            {technologyReportCadence.post_report_analysis_packets.map(packet => (
+              <PostReportAnalysisCard key={packet.report_id} packet={packet} />
+            ))}
+          </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 }}>
@@ -975,6 +1191,11 @@ export function AgentMarketTab() {
           .agent-market-radar-domain-grid,
           .agent-market-radar-rolling-grid,
           .agent-market-radar-role-grid,
+          .agent-market-report-metrics-grid,
+          .agent-market-report-gate-grid,
+          .agent-market-report-cadence-grid,
+          .agent-market-report-workload-grid,
+          .agent-market-report-analysis-grid,
           .agent-market-health-grid,
           .agent-market-cadence-grid,
           .agent-market-decision-grid,