fix(web): clarify alert operator handoff

2026-06-01 00:14:43 +08:00
parent 2860bd2b4b
commit 607fc291e9
3 changed files with 172 additions and 4 deletions
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -1237,6 +1237,36 @@
        "sourceDetail": "direct {direct} / candidate {candidate} / applied {applied}；原因 {reason}",
        "needsHumanYes": "需要",
        "needsHumanNo": "不需要",
+        "stateLabels": {
+          "verificationDegradedManualRequired": "驗證退化，需人工確認"
+        },
+        "nextActionLabels": {
+          "manualVerifyOrRepair": "人工確認修復狀態；需要時重新送審修復"
+        },
+        "reasonLabels": {
+          "incidentOpenAfterSuccessfulExecution": "自動執行已完成，但 Incident 仍開啟"
+        },
+        "sourceReasonLabels": {
+          "providerHeartbeatPresentButNoIncidentMatch": "Sentry / SigNoz 有新鮮心跳，但沒有匹配到此 Incident"
+        },
+        "handoff": {
+          "eyebrow": "現在要做",
+          "titleManual": "需要人工接手確認",
+          "titleAutomated": "自動鏈路已完成，持續觀察",
+          "titleUnknown": "等待 truth-chain 資料",
+          "actionManualVerifyOrRepair": "到 AwoooP Work Items / Approvals 確認執行證據；若服務仍異常，再重新送審修復，不要直接重啟或靜默關閉。",
+          "actionNoManual": "目前不需要人工介入；保留真相鏈與 Run history 供稽核追蹤。",
+          "actionUnknown": "尚未拿到完整狀態，先等 status-chain 載入完成。",
+          "ownerLabel": "主責",
+          "ownerSre": "SRE owner / AwoooP operator",
+          "ownerAutomation": "AI 自動化鏈路",
+          "entryLabel": "處理入口",
+          "entryManual": "Work Items / Approvals / Runs",
+          "entryReadOnly": "Runs / History",
+          "reasonLabel": "原因",
+          "boundaryLabel": "邊界",
+          "boundary": "只讀追蹤，不觸發修復"
+        },
        "repeatStates": {
          "duplicate": "最新入站重複",
          "related": "同指紋重複",
--- a/apps/web/messages/zh-TW.json
+++ b/apps/web/messages/zh-TW.json
@@ -1237,6 +1237,36 @@
        "sourceDetail": "direct {direct} / candidate {candidate} / applied {applied}；原因 {reason}",
        "needsHumanYes": "需要",
        "needsHumanNo": "不需要",
+        "stateLabels": {
+          "verificationDegradedManualRequired": "驗證退化，需人工確認"
+        },
+        "nextActionLabels": {
+          "manualVerifyOrRepair": "人工確認修復狀態；需要時重新送審修復"
+        },
+        "reasonLabels": {
+          "incidentOpenAfterSuccessfulExecution": "自動執行已完成，但 Incident 仍開啟"
+        },
+        "sourceReasonLabels": {
+          "providerHeartbeatPresentButNoIncidentMatch": "Sentry / SigNoz 有新鮮心跳，但沒有匹配到此 Incident"
+        },
+        "handoff": {
+          "eyebrow": "現在要做",
+          "titleManual": "需要人工接手確認",
+          "titleAutomated": "自動鏈路已完成，持續觀察",
+          "titleUnknown": "等待 truth-chain 資料",
+          "actionManualVerifyOrRepair": "到 AwoooP Work Items / Approvals 確認執行證據；若服務仍異常，再重新送審修復，不要直接重啟或靜默關閉。",
+          "actionNoManual": "目前不需要人工介入；保留真相鏈與 Run history 供稽核追蹤。",
+          "actionUnknown": "尚未拿到完整狀態，先等 status-chain 載入完成。",
+          "ownerLabel": "主責",
+          "ownerSre": "SRE owner / AwoooP operator",
+          "ownerAutomation": "AI 自動化鏈路",
+          "entryLabel": "處理入口",
+          "entryManual": "Work Items / Approvals / Runs",
+          "entryReadOnly": "Runs / History",
+          "reasonLabel": "原因",
+          "boundaryLabel": "邊界",
+          "boundary": "只讀追蹤，不觸發修復"
+        },
        "repeatStates": {
          "duplicate": "最新入站重複",
          "related": "同指紋重複",
--- a/apps/web/src/app/[locale]/alerts/page.tsx
+++ b/apps/web/src/app/[locale]/alerts/page.tsx
@@ -200,6 +200,26 @@ function FocusIncidentEvidencePanel({
  const sourceStatusLabel = statusLabels[sourceStatus] ?? valueOrEmpty(sourceStatus, emptyLabel)
  const mcpGateway = chain?.mcp?.gateway
  const ansible = chain?.execution?.ansible
+  const outcomeState = String(chain?.operator_outcome?.state ?? '')
+  const nextAction = String(chain?.operator_outcome?.next_action ?? chain?.next_step ?? '')
+  const humanReason = String(chain?.operator_outcome?.human_action_reason ?? '')
+  const sourceReasonCode = String(sourceCorrelation?.missing_reason ?? '')
+  const outcomeStateLabels: Record<string, string> = {
+    verification_degraded_manual_required: t('operatorFlow.stateLabels.verificationDegradedManualRequired'),
+  }
+  const nextActionLabels: Record<string, string> = {
+    manual_verify_or_repair: t('operatorFlow.nextActionLabels.manualVerifyOrRepair'),
+  }
+  const humanReasonLabels: Record<string, string> = {
+    incident_open_after_successful_execution: t('operatorFlow.reasonLabels.incidentOpenAfterSuccessfulExecution'),
+  }
+  const sourceReasonLabels: Record<string, string> = {
+    provider_heartbeat_present_but_no_incident_match: t('operatorFlow.sourceReasonLabels.providerHeartbeatPresentButNoIncidentMatch'),
+  }
+  const outcomeStateLabel = outcomeStateLabels[outcomeState] ?? valueOrEmpty(outcomeState, emptyLabel)
+  const nextActionLabel = nextActionLabels[nextAction] ?? valueOrEmpty(nextAction, emptyLabel)
+  const humanReasonLabel = humanReasonLabels[humanReason] ?? valueOrEmpty(humanReason, emptyLabel)
+  const sourceReasonLabel = sourceReasonLabels[sourceReasonCode] ?? valueOrEmpty(sourceReasonCode, emptyLabel)
  const relatedIncidentIds = chain?.source_refs?.refs?.incident_ids ?? []
  const fingerprint = chain?.source_refs?.refs?.fingerprints?.[0] ?? emptyLabel
  const latestInbound = chain?.source_refs?.latest_inbound
@@ -219,8 +239,49 @@ function FocusIncidentEvidencePanel({
  const latestOutboundLabel = latestOutbound?.sent_at
    ? formatTimestamp(latestOutbound.sent_at, locale, emptyLabel)
    : emptyLabel
-  const sourceReason = valueOrEmpty(sourceCorrelation?.missing_reason, emptyLabel)
  const needsHumanLabel = chain?.needs_human ? t('operatorFlow.needsHumanYes') : t('operatorFlow.needsHumanNo')
+  const handoffTone = !chain ? 'gray' : chain.needs_human ? 'red' : 'green'
+  const handoffTitle = chain?.needs_human
+    ? t('operatorFlow.handoff.titleManual')
+    : chain
+      ? t('operatorFlow.handoff.titleAutomated')
+      : t('operatorFlow.handoff.titleUnknown')
+  const handoffAction = !chain
+    ? t('operatorFlow.handoff.actionUnknown')
+    : chain.needs_human
+      ? t('operatorFlow.handoff.actionManualVerifyOrRepair')
+      : t('operatorFlow.handoff.actionNoManual')
+  const handoffOwner = chain?.needs_human
+    ? t('operatorFlow.handoff.ownerSre')
+    : chain
+      ? t('operatorFlow.handoff.ownerAutomation')
+      : emptyLabel
+  const handoffEntry = chain?.needs_human
+    ? t('operatorFlow.handoff.entryManual')
+    : chain
+      ? t('operatorFlow.handoff.entryReadOnly')
+      : emptyLabel
+  const handoffReason = chain?.needs_human ? humanReasonLabel : valueOrEmpty(chain?.verdict, emptyLabel)
+  const handoffLinks = [
+    {
+      key: 'workItems',
+      label: t('links.workItems'),
+      href: `/awooop/work-items?project_id=${encodedProjectId}&incident_id=${encodedIncidentId}` as never,
+      Icon: ListChecks,
+    },
+    {
+      key: 'approvals',
+      label: t('links.approvals'),
+      href: `/awooop/approvals?project_id=${encodedProjectId}&incident_id=${encodedIncidentId}` as never,
+      Icon: ShieldCheck,
+    },
+    {
+      key: 'runs',
+      label: t('links.runs'),
+      href: `/awooop/runs?project_id=${encodedProjectId}&incident_id=${encodedIncidentId}` as never,
+      Icon: Activity,
+    },
+  ]
  const operatorCards = [
    {
      key: 'repeat',
@@ -259,8 +320,8 @@ function FocusIncidentEvidencePanel({
      title: t('operatorFlow.aiTitle'),
      value: valueOrEmpty(chain?.operator_outcome?.summary_zh ?? chain?.verdict, emptyLabel),
      detail: t('operatorFlow.aiDetail', {
-        state: valueOrEmpty(chain?.operator_outcome?.state, emptyLabel),
-        nextStep: valueOrEmpty(chain?.operator_outcome?.next_action ?? chain?.next_step, emptyLabel),
+        state: outcomeStateLabel,
+        nextStep: nextActionLabel,
        needsHuman: needsHumanLabel,
      }),
      tone: chain?.needs_human ? 'red' : chain ? 'green' : 'gray',
@@ -275,7 +336,7 @@ function FocusIncidentEvidencePanel({
        direct: sourceCorrelation?.direct_ref_total ?? 0,
        candidate: sourceCorrelation?.candidate_total ?? 0,
        applied: sourceCorrelation?.applied_link_total ?? 0,
-        reason: sourceReason,
+        reason: sourceReasonLabel,
      }),
      tone: sourceStatus === 'linked' ? 'green' : sourceStatus === 'missing' ? 'red' : 'amber',
      testId: 'alerts-source-state',
@@ -395,6 +456,53 @@ function FocusIncidentEvidencePanel({
          <p className="text-sm font-semibold text-[#141413]">{t('operatorFlow.title')}</p>
          <p className="mt-1 text-xs leading-5 text-[#77736a]">{t('operatorFlow.subtitle')}</p>
        </div>
+        <div
+          data-testid="alerts-operator-handoff"
+          className={cn(
+            'mb-3 border px-3 py-3',
+            handoffTone === 'green' && 'border-[#9bc7a4] bg-[#f0faf2]',
+            handoffTone === 'red' && 'border-[#e2a29b] bg-[#fff0ef]',
+            handoffTone === 'gray' && 'border-[#d8d3c7] bg-[#faf9f3]',
+          )}
+        >
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0">
+              <p className="text-xs font-semibold text-[#5f5b52]">{t('operatorFlow.handoff.eyebrow')}</p>
+              <p className="mt-1 text-sm font-semibold text-[#141413]">{handoffTitle}</p>
+              <p className="mt-1 text-xs leading-5 text-[#77736a]">{handoffAction}</p>
+            </div>
+            <div className="flex shrink-0 flex-wrap gap-2">
+              {handoffLinks.map(({ key, label, href, Icon }) => (
+                <Link
+                  key={key}
+                  href={href}
+                  className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white/80 px-2.5 py-1.5 text-xs font-semibold text-[#3f3a32] hover:bg-white"
+                >
+                  <Icon className="h-3.5 w-3.5" aria-hidden="true" />
+                  {label}
+                </Link>
+              ))}
+            </div>
+          </div>
+          <div className="mt-3 grid gap-2 md:grid-cols-4">
+            <div className="min-w-0 border border-current/10 bg-white/60 px-2.5 py-2">
+              <p className="text-[11px] font-semibold uppercase text-[#77736a]">{t('operatorFlow.handoff.ownerLabel')}</p>
+              <p className="mt-1 truncate text-xs font-semibold text-[#141413]" title={handoffOwner}>{handoffOwner}</p>
+            </div>
+            <div className="min-w-0 border border-current/10 bg-white/60 px-2.5 py-2">
+              <p className="text-[11px] font-semibold uppercase text-[#77736a]">{t('operatorFlow.handoff.entryLabel')}</p>
+              <p className="mt-1 truncate text-xs font-semibold text-[#141413]" title={handoffEntry}>{handoffEntry}</p>
+            </div>
+            <div className="min-w-0 border border-current/10 bg-white/60 px-2.5 py-2">
+              <p className="text-[11px] font-semibold uppercase text-[#77736a]">{t('operatorFlow.handoff.reasonLabel')}</p>
+              <p className="mt-1 truncate text-xs font-semibold text-[#141413]" title={handoffReason}>{handoffReason}</p>
+            </div>
+            <div className="min-w-0 border border-current/10 bg-white/60 px-2.5 py-2">
+              <p className="text-[11px] font-semibold uppercase text-[#77736a]">{t('operatorFlow.handoff.boundaryLabel')}</p>
+              <p className="mt-1 truncate text-xs font-semibold text-[#141413]" title={t('operatorFlow.handoff.boundary')}>{t('operatorFlow.handoff.boundary')}</p>
+            </div>
+          </div>
+        </div>
        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
          {operatorCards.map(({ key, Icon, title, value, detail, tone, testId }) => (
            <div