From f48acaff1ceacd58c727fc491faaf148da339ad6 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 3 Jul 2026 15:07:11 +0800
Subject: [PATCH] fix(awooop): reduce runs text density

---
 .../web/src/app/[locale]/awooop/runs/page.tsx | 103 ++++--------------
 1 file changed, 20 insertions(+), 83 deletions(-)

diff --git a/apps/web/src/app/[locale]/awooop/runs/page.tsx b/apps/web/src/app/[locale]/awooop/runs/page.tsx
index 5f61e55c4..e68fb4e6e 100644
--- a/apps/web/src/app/[locale]/awooop/runs/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/runs/page.tsx
@@ -1295,7 +1295,7 @@ function SecurityRunStateCandidatePanel() {
             <ShieldCheck className="mt-0.5 h-4 w-4 text-[#d97757]" aria-hidden="true" />
             <div>
               <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-              <p className="mt-1 max-w-3xl text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
+
             </div>
           </div>
           <span className="inline-flex border border-[#9bb6d9] bg-[#eef5ff] px-2 py-0.5 text-xs font-semibold text-[#1f5b9b]">
@@ -1308,7 +1308,7 @@ function SecurityRunStateCandidatePanel() {
             <div key={item.label} className="bg-white px-4 py-3">
               <p className="text-xs font-semibold text-[#77736a]">{item.label}</p>
               <p className="mt-2 break-words font-mono text-2xl font-semibold text-[#141413]">{item.value}</p>
-              <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+
             </div>
           ))}
         </div>
@@ -1322,7 +1322,7 @@ function SecurityRunStateCandidatePanel() {
               {runRefs.map((item) => (
                 <div key={item.name} className="px-4 py-3">
                   <p className="break-words text-xs font-semibold text-[#141413]">{publicContractText(item.name)}</p>
-                  <p className="mt-1 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+
                 </div>
               ))}
             </div>
@@ -1362,7 +1362,7 @@ function GitHubRunReadinessBoundaryPanel() {
           <GitBranch className="mt-0.5 h-4 w-4 shrink-0 text-[#d97757]" aria-hidden="true" />
           <div className="min-w-0">
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="mt-1 max-w-3xl text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <div className="flex flex-wrap items-center gap-2">
@@ -1403,9 +1403,6 @@ function GitHubRunReadinessBoundaryPanel() {
                   <Icon className="h-4 w-4" aria-hidden="true" />
                 </span>
               </div>
-              <p className="mt-3 text-xs leading-5 text-[#5f5b52]">
-                {t(`metrics.${metric.key}.detail` as never)}
-              </p>
             </div>
           );
         })}
@@ -1499,7 +1496,7 @@ function OwnerResponseValidationRunBoundaryPanel() {
           <ListChecks className="mt-0.5 h-4 w-4 shrink-0 text-[#6f5ca8]" aria-hidden="true" />
           <div className="min-w-0">
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="mt-1 max-w-3xl text-xs leading-5 text-[#5f5a70]">{t("subtitle")}</p>
+
           </div>
         </div>
         <div className="flex flex-wrap items-center gap-2">
@@ -1521,7 +1518,7 @@ function OwnerResponseValidationRunBoundaryPanel() {
           <div key={item.label} className="min-h-[122px] bg-white px-4 py-3">
             <p className="text-xs font-semibold text-[#5f5a70]">{item.label}</p>
             <p className="mt-2 break-words font-mono text-2xl font-semibold text-[#141413]">{item.value}</p>
-            <p className="mt-2 text-xs leading-5 text-[#4f4a60]">{item.detail}</p>
+
           </div>
         ))}
       </div>
@@ -1539,9 +1536,6 @@ function OwnerResponseValidationRunBoundaryPanel() {
                   <p className="text-sm font-semibold text-[#141413]">
                     {t(`runRefs.${item.key}.title` as never)}
                   </p>
-                  <p className="mt-1 text-xs leading-5 text-[#4f4a60]">
-                    {t(`runRefs.${item.key}.detail` as never)}
-                  </p>
                   <p className="mt-2 text-[11px] font-semibold text-[#5f5a70]">
                     {publicContractText(item.contract)}
                   </p>
@@ -2178,7 +2172,7 @@ function SourceDossierCoveragePanel({
           <ListChecks className="h-4 w-4 text-[#1f5b9b]" aria-hidden="true" />
           <div>
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="text-xs text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <span className="border border-[#9bb6d9] bg-[#eef5ff] px-2 py-0.5 text-xs font-semibold text-[#1f5b9b]">
@@ -2211,7 +2205,7 @@ function SourceDossierCoveragePanel({
                     <SearchCheck className="h-4 w-4" aria-hidden="true" />
                   </span>
                 </div>
-                <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+
               </div>
             ))}
           </div>
@@ -2385,7 +2379,7 @@ function EventRecurrencePanel({
           <Activity className="h-4 w-4 text-[#8a5a08]" aria-hidden="true" />
           <div>
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="text-xs text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <span className="border border-[#d9b36f] bg-[#fff7e8] px-2 py-0.5 text-xs font-semibold text-[#8a5a08]">
@@ -2418,7 +2412,7 @@ function EventRecurrencePanel({
                     <Activity className="h-4 w-4" aria-hidden="true" />
                   </span>
                 </div>
-                <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+
               </div>
             ))}
           </div>
@@ -2974,17 +2968,6 @@ function CallbackReplyAuditSummaryPanel({
         <p className="text-xs font-semibold text-[#1f5b9b]">
           {t("operatorVerdictTitle")}
         </p>
-        <p className="mt-1 text-xs leading-5 text-[#354052]">
-          {t("operatorVerdictDetail", {
-            inboundStatus: inboundStatusLabel,
-            inboundTotal: summary.inbound_callback_total ?? 0,
-            inboundRecent24h: summary.inbound_callback_recent_24h_total ?? 0,
-            snapshotStatus: snapshotStatusLabel,
-            snapshotCoverage,
-            traceRecoveryStatus: traceRecoveryStatusLabel,
-            nextAction: nextActionLabel,
-          })}
-        </p>
       </div>
       <div className="grid gap-px bg-[#e0ddd4] md:grid-cols-2 xl:grid-cols-5">
       <div className="bg-white px-4 py-3">
@@ -2992,26 +2975,6 @@ function CallbackReplyAuditSummaryPanel({
         <p className="mt-2 font-mono text-xl font-semibold text-[#141413]">
           {outboundTotal}
         </p>
-        <p className="mt-1 text-xs leading-5 text-[#5f5b52]">
-          {t("outboundDetail", {
-            sourceRefs: summary.outbound_source_refs_total ?? 0,
-            traceRefs:
-              summary.outbound_trace_ref_total ??
-              summary.outbound_incident_ref_total ??
-              0,
-            incidentRefs: summary.outbound_incident_ref_total ?? 0,
-            coverage: sourceRefCoverage,
-          })}
-        </p>
-        <p className="mt-1 text-xs leading-5 text-[#5f5b52]">
-          {t("outboundReplyMarkupDetail", {
-            replyMarkup: summary.outbound_reply_markup_total ?? 0,
-            missingIncidentRefs:
-              summary.outbound_reply_markup_missing_incident_ref_total ?? 0,
-            missingTraceRefs:
-              summary.outbound_reply_markup_missing_trace_ref_total ?? 0,
-          })}
-        </p>
         <p className="mt-1 text-xs leading-5 text-[#5f5b52]">
           {t("outboundReplyMarkupTraceFreshness", {
             recent1h:
@@ -3068,22 +3031,6 @@ function CallbackReplyAuditSummaryPanel({
         <p className="mt-2 font-mono text-xl font-semibold text-[#141413]">
           {callbackTotal}
         </p>
-        <p className="mt-1 text-xs leading-5 text-[#5f5b52]">
-          {t("callbackDetail", {
-            detail: summary.callback_detail_total ?? 0,
-            history: summary.callback_history_total ?? 0,
-            incidents: summary.callback_incident_total ?? 0,
-          })}
-        </p>
-        <p className="mt-1 text-xs font-semibold leading-5 text-[#1f5b9b]">
-          {t("inboundCallbackDetail", {
-            total: summary.inbound_callback_total ?? 0,
-            recent24h: summary.inbound_callback_recent_24h_total ?? 0,
-            latest: latestInboundCallback,
-            status: inboundStatusLabel,
-            action: inboundNextActionLabel,
-          })}
-        </p>
       </div>
       <div className="bg-white px-4 py-3">
         <p className="text-xs font-semibold text-[#77736a]">{t("snapshots")}</p>
@@ -3095,14 +3042,6 @@ function CallbackReplyAuditSummaryPanel({
         >
           {snapshotStatusLabel}
         </span>
-        <p className="mt-2 text-xs leading-5 text-[#5f5b52]">
-          {t("snapshotDetail", {
-            captured: summary.callback_snapshot_captured_total ?? 0,
-            partial: summary.callback_snapshot_partial_total ?? 0,
-            missing: summary.callback_snapshot_missing_total ?? 0,
-            coverage: snapshotCoverage,
-          })}
-        </p>
       </div>
       <div className="bg-white px-4 py-3">
         <p className="text-xs font-semibold text-[#77736a]">{t("delivery")}</p>
@@ -3277,7 +3216,7 @@ function AutomationFlowGatePanel({
           <Waypoints className="h-4 w-4 text-[#1f5b9b]" aria-hidden="true" />
           <div>
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="text-xs text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <div className="flex flex-wrap items-center gap-2">
@@ -3585,7 +3524,7 @@ function CallbackReplyEvidencePanel({
           <Send className="h-4 w-4 text-[#1f5b9b]" aria-hidden="true" />
           <div>
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="text-xs text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <div className="flex flex-wrap items-center gap-2">
@@ -3809,7 +3748,7 @@ function AiAlertCardDeliveryPanel({
           <div key={metric.label} className="bg-white px-4 py-3">
             <p className="text-xs font-semibold text-[#77736a]">{metric.label}</p>
             <p className="mt-1 font-mono text-2xl font-semibold text-[#141413]">{metric.value}</p>
-            <p className="mt-1 text-xs text-[#5f5b52]">{metric.detail}</p>
+
           </div>
         ))}
       </div>
@@ -4089,7 +4028,7 @@ function AiRouteStatusPanel({
           <Cpu className="h-4 w-4 text-[#1f5b9b]" aria-hidden="true" />
           <div>
             <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="text-xs text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <span
@@ -4669,9 +4608,7 @@ function AiLoopAgentActionChainPanel({
               {t(`statuses.${overallStatus}` as never)}
             </span>
           </div>
-          <p className="mt-1 max-w-4xl text-xs leading-5 text-[#5f5b52]">
-            {t("subtitle")}
-          </p>
+
         </div>
         <div className="flex flex-wrap items-center gap-2 text-xs">
           <span className="border border-[#c8dfcb] bg-[#f4fbf5] px-2 py-1 font-semibold text-[#17602a]">
@@ -4716,8 +4653,8 @@ function AiLoopAgentActionChainPanel({
                   {t(`statuses.${node.status}` as never)}
                 </span>
               </div>
-              <p className="mt-3 text-xs leading-5 text-[#5f5b52]">{node.detail}</p>
-              <p className="mt-1 text-[11px] leading-4 text-[#77736a]">{node.subdetail}</p>
+
+
             </div>
           );
         })}
@@ -4735,7 +4672,7 @@ function AiLoopAgentActionChainPanel({
             <div className="mt-2 font-mono text-xl font-semibold text-[#141413]">
               {asset.value}
             </div>
-            <p className="mt-1 text-[11px] leading-4 text-[#5f5b52]">{asset.detail}</p>
+
           </div>
         ))}
       </div>
@@ -5173,7 +5110,7 @@ export default function RunsPage() {
               <div className="flex items-start justify-between gap-3">
                 <div>
                   <p className="text-xs font-semibold text-[#77736a]">{config.label}</p>
-                  <p className="mt-1 text-xs leading-5 text-[#5f5b52]">{config.detail}</p>
+
                 </div>
                 <Icon className="h-4 w-4 text-[#87867f]" aria-hidden="true" />
               </div>
@@ -5270,7 +5207,7 @@ export default function RunsPage() {
                   <Icon className="h-4 w-4" aria-hidden="true" />
                 </span>
               </div>
-              <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{item.detail}</p>
+
             </div>
           );
         })}