From 7577b256b3add3b84576c1c9088bcd8753dfefe5 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 3 Jul 2026 00:53:31 +0800
Subject: [PATCH] fix(awooop): condense active p0 cockpit

---
 apps/web/messages/en.json                     |  2 +
 apps/web/messages/zh-TW.json                  |  2 +
 .../app/[locale]/awooop/work-items/page.tsx   | 98 ++++++++++++++++---
 3 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index 877b1e9a3..fa513536d 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -9219,7 +9219,9 @@
         },
         "subtitle": "The active P0, blocker, impact, and next action are pinned to the first screen.",
         "loading": "Reading production readback.",
+        "workplan": "Workplan",
         "head": "Readiness / deployed",
+        "blockers": "Blockers",
         "decision": "Decision",
         "decisionValue": "Fix P0, no side lane",
         "decisionParallel": "P0 waits for data; advance {id}",
diff --git a/apps/web/messages/zh-TW.json b/apps/web/messages/zh-TW.json
index c99903c22..ecca5cda1 100644
--- a/apps/web/messages/zh-TW.json
+++ b/apps/web/messages/zh-TW.json
@@ -9219,7 +9219,9 @@
         },
         "subtitle": "目前 P0、卡點、影響、下一步先放第一屏。",
         "loading": "正在讀取正式 readback。",
+        "workplan": "工作計畫",
         "head": "Readiness / 部署",
+        "blockers": "阻擋數",
         "decision": "決策",
         "decisionValue": "先修 P0，不開支線",
         "decisionParallel": "P0 等資料；並行推進 {id}",
diff --git a/apps/web/src/app/[locale]/awooop/work-items/page.tsx b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
index 12587ca04..2ee3e2048 100644
--- a/apps/web/src/app/[locale]/awooop/work-items/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
@@ -8886,6 +8886,31 @@ function shortSha(value: string | null | undefined) {
   return value ? value.slice(0, 10) : "--";
 }
 
+function compactBlockerLabel(value: string | null | undefined) {
+  const key = String(value ?? "");
+  const labels: Record<string, string> = {
+    all_required_hosts_not_in_10_minute_reboot_window: "reboot window",
+    backup_core_green_not_1: "backup core",
+    host_boot_observation_older_than_target_window: "boot age",
+    host_unreachable_after_reboot: "host reachability",
+    host_uptime_unknown: "uptime",
+    post_start_blocked_not_zero: "post-start",
+    reboot_event_required_host_unreachable: "reboot host",
+    service_green_not_1: "service green",
+    wazuh_dashboard_degraded: "Wazuh dashboard",
+    windows99_remote_execution_channel_unavailable: "windows99 remote",
+    windows99_vmware_autostart_readback_missing: "VMware autostart",
+    "raw.source_quality_observations.unit_sanity": "unit sanity",
+  };
+  if (labels[key]) return labels[key];
+  return key
+    .replace(/^raw\./, "")
+    .replace(/_/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 28) || "--";
+}
+
 function stockplatformManagerStateKey(value: string | null | undefined) {
   const state = String(value ?? "");
   if (state.includes("reboot")) return "rebootSlo";
@@ -8981,6 +9006,18 @@ function ManagerSituationBoard({
     .map((source) => source.source)
     .filter(Boolean)
     .join(" / ");
+  const visibleBlockers = (
+    isRebootP0
+      ? activeBlockers.map((source) => ({ source }))
+      : blockingSources
+  )
+    .filter((source) => source.source)
+    .slice(0, 5);
+  const hiddenBlockerCount = Math.max(
+    0,
+    (isRebootP0 ? activeBlockers.length : blockingSources.length) -
+      visibleBlockers.length
+  );
   const deployedSha =
     priority?.current_head?.latest_successful_deployed_source_sha ??
     priority?.current_head?.gitea_main_sha;
@@ -9055,10 +9092,15 @@ function ManagerSituationBoard({
           <h3 className="mt-3 text-xl font-semibold tracking-normal">
             {boardTitle}
           </h3>
-          <p className="mt-2 text-sm leading-5 text-[#eee9dd]">
-            {loading ? t("loading") : t("subtitle")}
-          </p>
-          <div className="mt-4 grid gap-2 sm:grid-cols-2">
+          <div className="mt-4 grid gap-2 sm:grid-cols-3">
+            <div className="border border-[#4d4b44] bg-[#1d1c19] px-3 py-2">
+              <div className="text-[11px] font-semibold text-[#b7b4a8]">
+                {t("workplan")}
+              </div>
+              <div className="mt-1 font-mono text-sm font-semibold">
+                {activeWorkplan}
+              </div>
+            </div>
             <div className="border border-[#4d4b44] bg-[#1d1c19] px-3 py-2">
               <div className="text-[11px] font-semibold text-[#b7b4a8]">
                 {t("head")}
@@ -9069,15 +9111,20 @@ function ManagerSituationBoard({
             </div>
             <div className="border border-[#4d4b44] bg-[#1d1c19] px-3 py-2">
               <div className="text-[11px] font-semibold text-[#b7b4a8]">
-                {t("decision")}
+                {t("blockers")}
               </div>
               <div className="mt-1 text-sm font-semibold">
-                {parallelEnabled
-                  ? t("decisionParallel", { id: parallelWorkItem })
-                  : t("decisionValue")}
+                {activeBlockerCount}
               </div>
             </div>
           </div>
+          <div className="mt-3 h-2 overflow-hidden bg-[#34322e]">
+            <div
+              className="h-full bg-[#c9d8ea]"
+              style={{ width: `${Math.min(Math.max(readinessPercent ?? 0, 0), 100)}%` }}
+              aria-hidden="true"
+            />
+          </div>
         </div>
 
         <div className="bg-white p-3">
@@ -9096,7 +9143,7 @@ function ManagerSituationBoard({
                   <div className="mt-2 break-words text-sm font-semibold leading-5 text-[#141413]">
                     {loading ? "--" : card.value}
                   </div>
-                  <div className="mt-1 break-words text-xs leading-4 text-[#5f5b52]">
+                  <div className="mt-1 overflow-hidden break-words text-xs leading-4 text-[#5f5b52] [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2]">
                     {loading ? "--" : card.detail}
                   </div>
                 </div>
@@ -9108,8 +9155,33 @@ function ManagerSituationBoard({
               <div className="text-[11px] font-semibold text-[#77736a]">
                 {t("blockingSources")}
               </div>
-              <div className="mt-1 break-words font-mono text-xs font-semibold text-[#141413]">
-                {loading ? "--" : sourceNames || t("noSourceNames")}
+              <div className="mt-1 flex flex-wrap gap-1.5">
+                {loading ? (
+                  <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#5f5b52]">
+                    --
+                  </span>
+                ) : visibleBlockers.length ? (
+                  <>
+                    {visibleBlockers.map((blocker) => (
+                      <span
+                        key={blocker.source}
+                        title={blocker.source}
+                        className="border border-[#f0c6a8] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#9a4d16]"
+                      >
+                        {compactBlockerLabel(blocker.source)}
+                      </span>
+                    ))}
+                    {hiddenBlockerCount > 0 ? (
+                      <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#5f5b52]">
+                        +{hiddenBlockerCount}
+                      </span>
+                    ) : null}
+                  </>
+                ) : (
+                  <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                    {sourceNames || t("noSourceNames")}
+                  </span>
+                )}
               </div>
             </div>
             <div className="flex flex-wrap items-center gap-1.5 text-[11px] font-semibold">
@@ -9276,7 +9348,7 @@ function StockPlatformP0ReceiptPanel({
               <h3 className="mt-1 text-base font-semibold tracking-normal text-[#141413]">
                 {t("title")}
               </h3>
-              <p className="mt-2 max-w-3xl text-xs leading-5 text-[#77736a]">
+              <p className="sr-only">
                 {t("subtitle")}
               </p>
             </div>
@@ -9303,7 +9375,7 @@ function StockPlatformP0ReceiptPanel({
                 <div className="mt-2 text-sm font-semibold text-[#141413]">
                   {loading ? "--" : metric.value}
                 </div>
-                <div className="mt-1 text-[11px] leading-4 text-[#5f5b52]">
+                <div className="mt-1 hidden text-[11px] leading-4 text-[#5f5b52] sm:block">
                   {metric.detail}
                 </div>
               </div>