fix(awooop): reduce home text density

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

@@ -392,7 +392,7 @@ function MetricCell({
   tone?: "neutral" | "good" | "warn";
 }) {
   return (
-    <div className="min-h-[116px] border border-[#e0ddd4] bg-white px-4 py-3">
+    <div className="min-h-[116px] border border-[#e0ddd4] bg-white px-4 py-3" title={detail}>
       <div className="flex items-start justify-between gap-3">
         <div>
           <p className="text-xs font-semibold text-[#77736a]">{label}</p>
@@ -411,7 +411,7 @@ function MetricCell({
           <Icon className="h-4 w-4" aria-hidden="true" />
         </span>
       </div>
-      <p className="mt-3 text-xs leading-5 text-[#5f5b52]">{detail}</p>
+
     </div>
   );
 }
@@ -459,7 +459,7 @@ function DispositionCell({
   signal: string;
   owner: string;
   route: string;
-  tone: "diagnosis" | "approval" | "execute" | "manual";
+  tone: "diagnosis" | "approval" | "execute" | "controlled";
   icon: typeof SearchCheck;
 }) {
   return (
@@ -477,7 +477,7 @@ function DispositionCell({
             tone === "diagnosis" && "border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]",
             tone === "approval" && "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]",
             tone === "execute" && "border-[#9bc7a4] bg-[#f0faf2] text-[#17602a]",
-            tone === "manual" && "border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]"
+            tone === "controlled" && "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]"
           )}
         >
           <Icon className="h-4 w-4" aria-hidden="true" />
@@ -564,12 +564,12 @@ function QualityMetric({
   detail: string;
 }) {
   return (
-    <div className="min-h-[96px] border border-[#e0ddd4] bg-white px-4 py-3">
+    <div className="min-h-[96px] border border-[#e0ddd4] bg-white px-4 py-3" title={detail}>
       <p className="text-xs font-semibold text-[#77736a]">{label}</p>
       <p className="mt-2 font-mono text-2xl font-semibold leading-none text-[#141413]">
         {value}
       </p>
-      <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{detail}</p>
+
     </div>
   );
 }
@@ -593,11 +593,11 @@ function ProgressRow({
   tone: "good" | "warn" | "neutral";
 }) {
   return (
-    <div className="border border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
+    <div className="border border-[#e0ddd4] bg-[#faf9f3] px-4 py-3" title={detail}>
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
           <p className="text-xs font-semibold text-[#77736a]">{label}</p>
-          <p className="mt-1 text-xs leading-5 text-[#5f5b52]">{detail}</p>
+
         </div>
         <span className="font-mono text-sm font-semibold text-[#141413]">{value}</span>
       </div>
@@ -635,7 +635,7 @@ function VisualFlowNode({
   tone: "good" | "warn" | "neutral";
 }) {
   return (
-    <div className="relative min-h-[132px] min-w-0 border border-[#e0ddd4] bg-white px-4 py-3">
+    <div className="relative min-h-[132px] min-w-0 border border-[#e0ddd4] bg-white px-4 py-3" title={detail}>
       <div className="flex min-w-0 items-start justify-between gap-3">
         <div className="min-w-0">
           <p className="text-xs font-semibold text-[#77736a]">{label}</p>
@@ -673,7 +673,7 @@ function VisualGateCell({
   tone: "good" | "warn" | "neutral";
 }) {
   return (
-    <div className="min-w-0 bg-white px-4 py-3">
+    <div className="min-w-0 bg-white px-4 py-3" title={detail}>
       <div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
         <div className="min-w-0">
           <p className="text-xs font-semibold text-[#77736a]">{label}</p>
@@ -713,7 +713,7 @@ function OperationsDecisionMap({
   const sourceTotal = sourceFlow?.source_event_total ?? 0;
   const linkedRuns = sourceFlow?.linked_run_total ?? 0;
   const openWork = sourceFlow?.open_work_item_group_total ?? 0;
-  const manualGates = sourceFlow?.manual_gate_group_total ?? 0;
+  const controlledGates = sourceFlow?.manual_gate_group_total ?? 0;
   const failedRepairs = sourceFlow?.failed_repair_group_total ?? 0;
   const evaluated = quality?.evaluated_total ?? 0;
   const verified = quality?.verified_auto_repair_total ?? 0;
@@ -730,14 +730,14 @@ function OperationsDecisionMap({
     ? "dataIncomplete"
     : verified < evaluated
       ? "repairVerifierGap"
-      : openWork + manualGates + numberValue(snapshot.approvals) > 0
-        ? "manualGate"
+      : openWork + controlledGates + numberValue(snapshot.approvals) > 0
+        ? "controlledGate"
         : productionClaimReady
           ? "ready"
           : "watch";
   const nextFocusKey = openWork > 0
     ? "workItems"
-    : manualGates + numberValue(snapshot.approvals) > 0
+    : controlledGates + numberValue(snapshot.approvals) > 0
       ? "approvals"
       : verified < evaluated
         ? "runs"
@@ -748,10 +748,10 @@ function OperationsDecisionMap({
         return t("truth.blockers.dataIncomplete");
       case "repairVerifierGap":
         return t("truth.blockers.repairVerifierGap", { verified, evaluated });
-      case "manualGate":
-        return t("truth.blockers.manualGate", {
+      case "controlledGate":
+        return t("truth.blockers.controlledGate", {
           open: openWork,
-          gates: manualGates + numberValue(snapshot.approvals),
+          gates: controlledGates + numberValue(snapshot.approvals),
         });
       case "ready":
         return t("truth.blockers.ready");
@@ -787,8 +787,8 @@ function OperationsDecisionMap({
     {
       key: "approvals",
       href: "/awooop/approvals?project_id=awoooi",
-      value: manualGates + numberValue(snapshot.approvals),
-      tone: manualGates + numberValue(snapshot.approvals) === 0 ? "good" : "warn",
+      value: controlledGates + numberValue(snapshot.approvals),
+      tone: controlledGates + numberValue(snapshot.approvals) === 0 ? "good" : "warn",
     },
   ] as const;
 
@@ -799,7 +799,7 @@ function OperationsDecisionMap({
           <Waypoints 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 text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <span
@@ -848,7 +848,7 @@ function OperationsDecisionMap({
             <div className="border border-[#eee9dd] bg-[#faf9f3] px-2 py-1.5">
               <p className="text-[#77736a]">{t("truth.stats.gates")}</p>
               <p className="font-mono font-semibold text-[#141413]">
-                {manualGates + numberValue(snapshot.approvals)}
+                {controlledGates + numberValue(snapshot.approvals)}
               </p>
             </div>
           </div>
@@ -868,9 +868,6 @@ function OperationsDecisionMap({
                 <p className="mt-2 font-mono text-2xl font-semibold leading-none text-[#141413]">
                   {item.value}
                 </p>
-                <p className="mt-2 text-[11px] leading-4 text-[#5f5b52]">
-                  {t(`truth.links.${item.key}.detail` as never)}
-                </p>
               </div>
               <span
                 className={cn(
@@ -904,10 +901,10 @@ function OperationsDecisionMap({
         />
         <VisualFlowNode
           label={t("flow.gate.label")}
-          value={manualGates + numberValue(snapshot.approvals)}
+          value={controlledGates + numberValue(snapshot.approvals)}
           detail={t("flow.gate.detail", { work: openWork })}
           icon={ShieldCheck}
-          tone={manualGates + numberValue(snapshot.approvals) > 0 ? "warn" : "good"}
+          tone={controlledGates + numberValue(snapshot.approvals) > 0 ? "warn" : "good"}
         />
         <VisualFlowNode
           label={t("flow.verify.label")}
@@ -1019,7 +1016,7 @@ function SourceFlowOverviewPanel({
   const unlinkedEvents = summary?.unlinked_event_total ?? 0;
   const openWork = summary?.open_work_item_group_total ?? 0;
   const automationGaps = summary?.automation_gap_group_total ?? 0;
-  const manualGates = summary?.manual_gate_group_total ?? 0;
+  const controlledGates = summary?.manual_gate_group_total ?? 0;
   const failedRepairs = summary?.failed_repair_group_total ?? 0;
   const sourceReview = summary?.source_correlation_review_group_total ?? 0;
   const sourceReviewRecorded = summary?.source_correlation_decision_recorded_group_total ?? 0;
@@ -1045,7 +1042,7 @@ function SourceFlowOverviewPanel({
           <GitBranch 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 text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <span
@@ -1077,7 +1074,7 @@ function SourceFlowOverviewPanel({
               value={openWork}
               detail={t("metrics.openWorkDetail", {
                 gap: automationGaps,
-                manual: manualGates,
+                manual: controlledGates,
                 failed: failedRepairs,
               })}
             />
@@ -1141,10 +1138,10 @@ function SourceFlowOverviewPanel({
             <SourceFlowActionLink
               href="/awooop/approvals"
               label={t("actions.approvals")}
-              value={manualGates}
-              detail={t("actions.approvalsDetail", { count: manualGates })}
+              value={controlledGates}
+              detail={t("actions.approvalsDetail", { count: controlledGates })}
               icon={ShieldCheck}
-              tone={manualGates === 0 ? "good" : "warn"}
+              tone={controlledGates === 0 ? "good" : "warn"}
             />
             <SourceFlowActionLink
               href="/awooop/work-items?project_id=awoooi"
@@ -1171,7 +1168,7 @@ function SecurityMirrorPanel() {
           <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>
         <div className="flex flex-wrap items-center gap-2">
@@ -1213,9 +1210,6 @@ function SecurityMirrorPanel() {
                   <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>
           );
         })}
@@ -1241,9 +1235,6 @@ function SecurityMirrorPanel() {
                     <p className="break-words text-sm font-semibold text-[#141413]">
                       {t(`checkpoints.${checkpoint.key}.title` as never)}
                     </p>
-                    <p className="mt-1 break-words text-xs leading-5 text-[#5f5b52]">
-                      {t(`checkpoints.${checkpoint.key}.detail` as never)}
-                    </p>
                   </div>
                 </div>
               );
@@ -1277,7 +1268,7 @@ function GitHubPrimaryReadinessHomePanel() {
           <GitBranch 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>
         <div className="flex flex-wrap items-center gap-2">
@@ -1319,9 +1310,6 @@ function GitHubPrimaryReadinessHomePanel() {
                   <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>
           );
         })}
@@ -1385,7 +1373,7 @@ function OwnerResponseValidationRollupPanel() {
           <ListChecks 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>
         <div className="flex flex-wrap items-center gap-2">
@@ -1427,9 +1415,6 @@ function OwnerResponseValidationRollupPanel() {
                   <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>
           );
         })}
@@ -1455,9 +1440,6 @@ function OwnerResponseValidationRollupPanel() {
                         {t(`packets.${packet.key}.title` as never)}
                       </p>
                     </div>
-                    <p className="mt-2 text-xs leading-5 text-[#5f5b52]">
-                      {t(`packets.${packet.key}.detail` as never)}
-                    </p>
                   </div>
                   <div className="grid min-w-0 grid-cols-4 gap-px bg-[#e0ddd4] text-center">
                     {[
@@ -1494,9 +1476,6 @@ function OwnerResponseValidationRollupPanel() {
                   <p className="mt-2 font-mono text-2xl font-semibold leading-none text-[#141413]">
                     {check.value}
                   </p>
-                  <p className="mt-2 text-xs leading-5 text-[#5f5b52]">
-                    {t(`checks.${check.key}.detail` as never)}
-                  </p>
                 </div>
               ))}
             </div>
@@ -1531,7 +1510,7 @@ function HighValueConfigOwnerPacketHomePanel() {
           <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>
         <div className="flex flex-wrap items-center gap-2">
@@ -1573,9 +1552,6 @@ function HighValueConfigOwnerPacketHomePanel() {
                   <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>
           );
         })}
@@ -1652,7 +1628,7 @@ function AutomationQualityPanel({
           <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 text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
+
           </div>
         </div>
         <span
@@ -1904,9 +1880,7 @@ export default function AwoooPPage() {
                 <h2 className="mt-3 text-2xl font-semibold tracking-normal text-[#141413]">
                   {t("title")}
                 </h2>
-                <p className="mt-3 max-w-2xl text-sm leading-6 text-[#5f5b52]">
-                  {t("subtitle")}
-                </p>
+
               </div>
               <button
                 type="button"
@@ -2038,11 +2012,11 @@ export default function AwoooPPage() {
             icon={Activity}
           />
           <DispositionCell
-            title={t("disposition.manual.title")}
-            signal={t("disposition.manual.signal")}
-            owner={t("disposition.manual.owner")}
-            route={t("disposition.manual.route")}
-            tone="manual"
+            title={t("disposition.controlled.title")}
+            signal={t("disposition.controlled.signal")}
+            owner={t("disposition.controlled.owner")}
+            route={t("disposition.controlled.route")}
+            tone="controlled"
             icon={TriangleAlert}
           />
         </div>