From 6b8edd8ffefb9b5002476b8db16d2917e0c51688 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 2 Jul 2026 00:17:01 +0800
Subject: [PATCH] fix(web): keep autonomous cockpit visible during readback
 fallback

---
 .../tabs/automation-inventory-tab.tsx         | 269 +++++++++++++++++-
 1 file changed, 263 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/[locale]/governance/tabs/automation-inventory-tab.tsx b/apps/web/src/app/[locale]/governance/tabs/automation-inventory-tab.tsx
index ac99bd6c..1cd63685 100644
--- a/apps/web/src/app/[locale]/governance/tabs/automation-inventory-tab.tsx
+++ b/apps/web/src/app/[locale]/governance/tabs/automation-inventory-tab.tsx
@@ -1084,6 +1084,263 @@ function AutonomyWorkspaceScene({
   )
 }
 
+function AutonomousRuntimeControlCockpitCard({
+  control,
+  t,
+}: {
+  control: AiAgentAutonomousRuntimeControlSnapshot
+  t: ReturnType<typeof useTranslations>
+}) {
+  const rollups = control.rollups
+  const runtimeReadback = control.runtime_receipt_readback
+  const loopLedger = runtimeReadback?.autonomous_execution_loop_ledger
+  const loopClosed = (rollups.live_autonomous_execution_loop_closed_count ?? 0) > 0 || Boolean(loopLedger?.closed)
+  const stages = loopLedger?.stages ?? []
+  const stageById = new Map(stages.map(stage => [stage.stage_id, stage]))
+  const flowRows = [
+    { key: 'candidate', stage: stageById.get('candidate'), label: t('globalControl.currentAutonomy.flow.candidate'), icon: <Target size={15} /> },
+    { key: 'checkMode', stage: stageById.get('check_mode'), label: t('globalControl.currentAutonomy.flow.checkMode'), icon: <ClipboardCheck size={15} /> },
+    { key: 'apply', stage: stageById.get('controlled_apply'), label: t('globalControl.currentAutonomy.flow.apply'), icon: <Route size={15} /> },
+    { key: 'verifier', stage: stageById.get('post_apply_verifier'), label: t('globalControl.currentAutonomy.flow.verifier'), icon: <ShieldCheck size={15} /> },
+    { key: 'learning', stage: stageById.get('km_learning_writeback'), label: t('globalControl.currentAutonomy.flow.learning'), icon: <BookOpenCheck size={15} /> },
+    { key: 'telegram', stage: stageById.get('telegram_receipt'), label: t('globalControl.currentAutonomy.flow.telegram'), icon: <BellRing size={15} /> },
+  ]
+  const receiptStats = [
+    {
+      key: 'apply',
+      label: t('globalControl.currentAutonomy.cockpit.apply'),
+      value: rollups.live_ansible_apply_executed_count ?? 0,
+      detail: t('globalControl.currentAutonomy.cockpit.receiptDetail'),
+      tone: (rollups.live_ansible_apply_executed_count ?? 0) > 0 ? 'ok' as const : 'warn' as const,
+      icon: <Route size={15} />,
+    },
+    {
+      key: 'verifier',
+      label: t('globalControl.currentAutonomy.cockpit.verifier'),
+      value: rollups.live_post_apply_verifier_count ?? 0,
+      detail: t('globalControl.currentAutonomy.cockpit.verifierDetail'),
+      tone: (rollups.live_post_apply_verifier_count ?? 0) > 0 ? 'ok' as const : 'warn' as const,
+      icon: <ShieldCheck size={15} />,
+    },
+    {
+      key: 'km',
+      label: t('globalControl.currentAutonomy.cockpit.km'),
+      value: rollups.live_km_writeback_count ?? 0,
+      detail: t('globalControl.currentAutonomy.cockpit.kmDetail'),
+      tone: (rollups.live_km_writeback_count ?? 0) > 0 ? 'ok' as const : 'warn' as const,
+      icon: <BookOpenCheck size={15} />,
+    },
+    {
+      key: 'telegram',
+      label: t('globalControl.currentAutonomy.cockpit.telegram'),
+      value: rollups.live_telegram_receipt_count ?? 0,
+      detail: t('globalControl.currentAutonomy.cockpit.telegramDetail'),
+      tone: (rollups.live_telegram_receipt_count ?? 0) > 0 ? 'ok' as const : 'warn' as const,
+      icon: <BellRing size={15} />,
+    },
+  ]
+
+  return (
+    <GlassCard variant="subtle" padding="md">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }} className="automation-inventory-autonomy-cockpit">
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr) auto',
+          gap: 12,
+          alignItems: 'start',
+          padding: 14,
+          border: '0.5px solid #cfe7d7',
+          borderRadius: 8,
+          background: 'linear-gradient(135deg, rgba(248,255,250,0.96), rgba(255,255,255,0.98))',
+          minWidth: 0,
+        }} className="automation-inventory-autonomy-cockpit-header">
+          <div style={{ display: 'grid', gridTemplateColumns: '38px minmax(0, 1fr)', gap: 10, alignItems: 'start', minWidth: 0 }}>
+            <div style={{
+              width: 38,
+              height: 38,
+              borderRadius: 8,
+              border: '0.5px solid #15803d40',
+              background: 'rgba(21,128,61,0.08)',
+              color: '#15803d',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}>
+              <BellRing size={18} />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 5, minWidth: 0 }}>
+              <SmallLabel>{t('globalControl.currentAutonomy.cockpit.liveLabel')}</SmallLabel>
+              <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 22, fontWeight: 780, color: '#141413', lineHeight: 1.05, overflowWrap: 'anywhere' }}>
+                {t('globalControl.currentAutonomy.cockpit.title')}
+              </span>
+              <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: '#4f6156', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
+                {t('globalControl.currentAutonomy.cockpit.subtitle')}
+              </span>
+            </div>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: 6, minWidth: 0, maxWidth: 460 }}>
+            <Chip value={control.program_status.current_task_id} />
+            <Chip value={runtimeReadback?.db_read_status === 'ok' ? t('globalControl.currentAutonomy.cockpit.dbOk') : t('globalControl.currentAutonomy.cockpit.dbReview')} />
+            <Chip value={t('globalControl.currentAutonomy.badges.gateway')} muted={rollups.telegram_gateway_delivery_enabled_count === 0} />
+            <Chip value={t('globalControl.currentAutonomy.badges.deployMarker')} muted />
+          </div>
+        </div>
+
+        <AutonomyWorkspaceScene
+          stations={receiptStats}
+          completion={control.program_status.implementation_completion_percent}
+          status={loopClosed ? t('globalControl.currentAutonomy.cockpit.closed') : t('globalControl.currentAutonomy.cockpit.review')}
+        />
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(260px, 0.85fr) minmax(0, 1.15fr)', gap: 12 }} className="automation-inventory-autonomy-cockpit-hero-grid">
+          <div style={{ padding: 14, border: '0.5px solid #d9eadf', borderRadius: 8, background: '#fff', display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
+              <SmallLabel>{t('globalControl.currentAutonomy.metrics.completion')}</SmallLabel>
+              <Chip value={t('globalControl.currentAutonomy.cockpit.production')} />
+            </div>
+            <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 52, fontWeight: 800, color: '#15803d', lineHeight: 0.95 }}>
+              {control.program_status.implementation_completion_percent}%
+            </span>
+            <div style={{ height: 8, borderRadius: 999, background: '#edf3ea', overflow: 'hidden' }}>
+              <div style={{ width: `${Math.min(100, control.program_status.implementation_completion_percent)}%`, height: '100%', background: '#15803d' }} />
+            </div>
+            <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#5c675d', lineHeight: 1.35, overflowWrap: 'anywhere' }}>
+              {control.program_status.deploy_readback_marker}
+            </span>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }} className="automation-inventory-autonomy-cockpit-metric-grid">
+            {receiptStats.map(stat => (
+              <AutonomyCockpitMetric
+                key={stat.key}
+                label={stat.label}
+                value={stat.value}
+                detail={stat.detail}
+                tone={stat.tone}
+                icon={stat.icon}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div style={{ padding: 12, border: '0.5px solid #d7e5d8', borderRadius: 8, background: '#f9fff9', display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
+            <SmallLabel>{t('globalControl.currentAutonomy.cockpit.loopTitle')}</SmallLabel>
+            <Chip value={loopClosed ? t('globalControl.currentAutonomy.cockpit.closed') : t('globalControl.currentAutonomy.cockpit.review')} />
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, minmax(0, 1fr))', gap: 9 }} className="automation-inventory-autonomy-cockpit-flow-grid">
+            {flowRows.map(row => (
+              <AutonomyFlowStep
+                key={row.key}
+                label={row.label}
+                status={row.stage?.status ?? t('globalControl.currentAutonomy.cockpit.missing')}
+                detail={row.stage?.writes_runtime_state ? t('globalControl.currentAutonomy.cockpit.runtimeWrite') : t('globalControl.currentAutonomy.cockpit.noRuntimeWrite')}
+                tone={autonomyStageTone(row.stage, loopClosed)}
+                icon={row.icon}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <style jsx global suppressHydrationWarning>{`
+        .automation-inventory-autonomy-workspace-rail {
+          position: absolute;
+          inset: 28px;
+          border: 0.5px solid rgba(21, 128, 61, 0.18);
+          border-radius: 8px;
+          background:
+            linear-gradient(90deg, rgba(21, 128, 61, 0.08) 1px, transparent 1px),
+            linear-gradient(0deg, rgba(21, 128, 61, 0.06) 1px, transparent 1px);
+          background-size: 44px 44px;
+          opacity: 0.88;
+        }
+
+        .automation-inventory-autonomy-workspace-packet {
+          position: absolute;
+          z-index: 1;
+          width: 10px;
+          height: 10px;
+          border-radius: 3px;
+          background: #15803d;
+          box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.12), 0 8px 18px rgba(21, 128, 61, 0.22);
+        }
+
+        .automation-inventory-autonomy-workspace-packet-a {
+          top: 48%;
+          left: 10%;
+          animation: autonomy-packet-x 4.8s linear infinite;
+        }
+
+        .automation-inventory-autonomy-workspace-packet-b {
+          top: 22%;
+          left: 48%;
+          animation: autonomy-packet-y 5.4s linear infinite;
+          animation-delay: 0.8s;
+        }
+
+        .automation-inventory-autonomy-workspace-packet-c {
+          top: 72%;
+          left: 16%;
+          animation: autonomy-packet-x 6.2s linear infinite;
+          animation-delay: 1.6s;
+        }
+
+        .automation-inventory-autonomy-workspace-station {
+          animation: autonomy-station-breathe 3.8s ease-in-out infinite;
+        }
+
+        @keyframes autonomy-packet-x {
+          0% { left: 10%; opacity: 0; }
+          12% { opacity: 1; }
+          88% { opacity: 1; }
+          100% { left: 88%; opacity: 0; }
+        }
+
+        @keyframes autonomy-packet-y {
+          0% { top: 18%; opacity: 0; }
+          12% { opacity: 1; }
+          88% { opacity: 1; }
+          100% { top: 78%; opacity: 0; }
+        }
+
+        @keyframes autonomy-station-breathe {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-2px); }
+        }
+
+        @media (max-width: 900px) {
+          .automation-inventory-autonomy-cockpit-header,
+          .automation-inventory-autonomy-cockpit-hero-grid,
+          .automation-inventory-autonomy-cockpit-metric-grid,
+          .automation-inventory-autonomy-cockpit-flow-grid,
+          .automation-inventory-autonomy-workspace-grid {
+            grid-template-columns: 1fr !important;
+          }
+
+          .automation-inventory-autonomy-workspace-scene {
+            min-height: 430px !important;
+          }
+
+          .automation-inventory-autonomy-workspace-console {
+            position: relative !important;
+            inset: auto !important;
+            transform: none !important;
+            width: 100% !important;
+            height: auto !important;
+            min-height: 104px;
+            margin-bottom: 10px;
+          }
+
+          .automation-inventory-autonomy-workspace-rail,
+          .automation-inventory-autonomy-workspace-packet {
+            display: none;
+          }
+        }
+      `}</style>
+    </GlassCard>
+  )
+}
+
 function AutonomousRuntimeControlReadbackGrid({
   control,
   t,
@@ -3370,7 +3627,10 @@ export function AutomationInventoryTab() {
   if (loading) {
     if (reportTruthActionabilityReview) {
       return (
-        <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
+        <div className="automation-inventory-tab-root" style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0, maxWidth: '100%', overflowX: 'hidden' }}>
+          {autonomousRuntimeControl ? (
+            <AutonomousRuntimeControlCockpitCard control={autonomousRuntimeControl} t={t} />
+          ) : null}
           <GlassCard variant="subtle" padding="md">
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
               <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
@@ -3390,9 +3650,6 @@ export function AutomationInventoryTab() {
             t={t}
             pendingReadModelCount={1}
           />
-          {autonomousRuntimeControl ? (
-            <AutonomousRuntimeControlPriorityPanel control={autonomousRuntimeControl} t={t} />
-          ) : null}
           <GlassCard variant="subtle" padding="md">
             <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: '#87867f', lineHeight: 1.55, overflowWrap: 'anywhere' }}>
               {t('readModelPartial.boundary')}
@@ -3416,9 +3673,9 @@ export function AutomationInventoryTab() {
 
   if (error || !snapshot || !backlog || !backupTargets || !backupReadiness || !backupPolicy || !offsiteEscrow || !giteaHealth || !observabilityMatrix || !providerRouteMatrix || !deploymentLayout || !warRoom || !professionalTaskExpansion || !receiptReadbackOwnerReview || !reportNoWriteAnalysisRuntime || !lowMediumRiskWhitelist || !highRiskOwnerReviewQueue || !controlledExecutorHandoff || !actionAuditLedger || !actionOwnerAcceptanceEventBus || !hostRunawayAiops || !proactiveOperations || !versionLifecycleProposal || !interactionLearningProof || !liveReadModelGate || !redisDryRunGate || !learningWritebackPackage || !telegramReceiptPackage || !ownerApprovedLearningDryRun || !runtimeWriteGateReview || !postWriteVerifierPackage || !runtimeVerifierEvidenceReview || !reportAutomationReview || !reportStatusBoard || !reportRuntimeReadiness || !reportRuntimeDryRun || !reportRuntimeFixtureReadback || !runtimeWorkerShadowGate || !operationPermissionModel || !candidateOperationDryRunEvidence || !taskResultAuditTrail || !matchedPlaybookLearningGap || !criticReviewerResultCapture || !ownerApprovedResultCaptureDryRun || !ownerApprovedResultCaptureReadback || !runtimeReadbackApprovalPackage || !runtimeReadbackImplementationReview || !reportLiveDeliveryApprovalPackage || !runtimeReadbackFixtureApproval || !runtimeReadbackPromotionGate || !ownerApprovedFixturePromotionGate || !canonicalRuntimeReadbackOwnerAcceptance || !failureReceiptNoSendReplay || !reviewerQueueNoWriteReadback || !resultCaptureNoWriteReadback || !resultCapturePromotionApprovalGate || !ownerApprovedResultCapturePromotionDryRun || !resultCaptureWriteGateReview || !resultCaptureWriterImplementationReview || !resultCaptureWriterDryRunFixture || !resultCaptureWriterDryRunReadback || !resultCaptureOwnerPromotionReview || !resultCaptureOwnerApprovedExecutionRehearsal || !resultCaptureOwnerAcceptanceMaintenanceGate || !resultCaptureOwnerAcceptanceReadbackPreflightHold || !resultCaptureOwnerApprovedPreflightReleasePackage || !resultCaptureOwnerApprovedReleaseReadinessReadback || !resultCaptureOwnerReleaseApprovalGate || !resultCapturePostReleaseVerifierRollbackGate || !resultCaptureFinalReleaseCandidateReadback || !resultCaptureReleaseAuthorizationHold || !resultCaptureReleaseAuthorizationReadbackGate || !resultCaptureReleaseVerifierPreflightGate || !resultCaptureReleaseVerifierOwnerReviewPacket || !resultCaptureReleaseDecisionHold || !resultCaptureReleaseDecisionReadback || !resultCaptureReleaseDecisionNextHandoff || !resultCaptureReleaseDecisionInputPrep || !resultCaptureReleaseDecisionOwnerResponsePreflight || !resultCaptureReleaseDecisionOwnerResponseReadback || !resultCaptureReleaseDecisionOwnerResponseAcceptanceGate || !reportTruthActionabilityReview || !ownerDryRunPackage || !hostStatefulInventory || !dependencySupplyChainDriftMonitor || !serviceHealthGapMatrix || !serviceHealthNotificationPolicy) {
     return (
-      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
+      <div className="automation-inventory-tab-root" style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0, maxWidth: '100%', overflowX: 'hidden' }}>
         {autonomousRuntimeControl ? (
-          <AutonomousRuntimeControlPriorityPanel control={autonomousRuntimeControl} t={t} />
+          <AutonomousRuntimeControlCockpitCard control={autonomousRuntimeControl} t={t} />
         ) : null}
         <GlassCard variant="subtle" padding="lg">
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: '24px 0' }}>