From d77c3cdaea9f1f05501bce37d3fa15f2502fd3c9 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:02:29 +0800
Subject: [PATCH 01/10] feat(frontend): streamline review annotation UX for
 nursing workflow

Rework dashboard/history annotation surfaces to use a clinical-first layout, consistent shared label/badge mappings, and clearer unannotated state handling so nursing review decisions are faster and less ambiguous.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../history-upload-annotation-modal.tsx       | 235 +++++++++++-------
 .../history-upload-review-helpers.ts          |  13 +-
 .../patient-day-upload-review-modal.tsx       |  13 +-
 .../admin/_components/today-patient-row.tsx   |  10 +-
 .../app/admin/history-overview/page.tsx       |  13 +-
 apps/frontend/app/admin/review-fast/page.tsx  |  45 ++--
 apps/frontend/app/admin/review/page.tsx       |  32 ++-
 .../lib/i18n/staff-review-label-mapping.ts    | 111 +++++++++
 8 files changed, 332 insertions(+), 140 deletions(-)
 create mode 100644 apps/frontend/lib/i18n/staff-review-label-mapping.ts

diff --git a/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx b/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx
index b1ecb04..69dc712 100644
--- a/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx
+++ b/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx
@@ -1,12 +1,23 @@
 "use client";
 
 import Image from "next/image";
-import Link from "next/link";
 import { X } from "lucide-react";
 
 import type { StaffAnnotationItem, StaffHistoryOverviewUploadItem } from "@/lib/api/staff";
+import {
+  STAFF_ANNOTATION_LABEL_OPTIONS_WITH_UNMARKED,
+  STAFF_REVIEW_COPY,
+  STAFF_REVIEW_FIELD_LABELS,
+  annotationBadgeClass,
+  annotationLabelTextOrUnmarked,
+  screeningResultBadgeClass,
+  screeningResultText,
+  symptomAwarePriorityBadgeClass,
+  symptomAwarePriorityText,
+} from "@/lib/i18n/staff-review-label-mapping";
+import { activeSymptomLabels, symptomsFromApiFields } from "@/lib/symptoms";
 
-import { historyUploadRiskLabel, type HistoryUploadDraftVerdict } from "./history-upload-review-helpers";
+import { type HistoryUploadDraftVerdict } from "./history-upload-review-helpers";
 
 type HistoryUploadAnnotationModalProps = {
   upload: StaffHistoryOverviewUploadItem;
@@ -27,6 +38,14 @@ export function HistoryUploadAnnotationModal({
   onSave,
   onClose,
 }: HistoryUploadAnnotationModalProps) {
+  const symptomFlags = symptomsFromApiFields({
+    symptom_pain: upload.symptom_pain,
+    symptom_discharge: upload.symptom_discharge,
+    symptom_pus: upload.symptom_pus,
+    symptom_cloudy_dialysate: upload.symptom_cloudy_dialysate,
+  });
+  const symptomLabels = activeSymptomLabels(symptomFlags);
+
   return (
     <div className="fixed inset-0 z-[60] flex items-end justify-center bg-zinc-900/60 p-0 sm:items-center sm:p-4">
       <div className="h-[90vh] w-full overflow-auto rounded-t-2xl bg-white shadow-xl sm:h-auto sm:max-w-3xl sm:rounded-2xl">
@@ -45,96 +64,138 @@ export function HistoryUploadAnnotationModal({
           </button>
         </div>
         <div className="grid gap-4 p-4 md:grid-cols-[minmax(0,1fr)_22rem]">
-          <div className="relative h-80 overflow-hidden rounded-xl bg-zinc-100">
-            {imageUrl ? (
-              <Image
-                src={imageUrl}
-                alt={`history-preview-${upload.upload_id}`}
-                fill
-                unoptimized
-                className="object-contain"
-              />
-            ) : (
-              <div className="flex h-full items-center justify-center text-sm text-zinc-400">載入影像中...</div>
-            )}
+          <div className="md:self-start">
+            <div className="relative h-72 overflow-hidden rounded-xl bg-zinc-100 md:h-[26rem]">
+              {imageUrl ? (
+                <Image
+                  src={imageUrl}
+                  alt={`history-preview-${upload.upload_id}`}
+                  fill
+                  unoptimized
+                  className="object-contain"
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center text-sm text-zinc-400">{STAFF_REVIEW_COPY.loadingImage}</div>
+              )}
+            </div>
           </div>
-          <div className="flex flex-col gap-3">
-            <dl className="space-y-2 text-sm">
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">年齡</dt>
-                <dd className="text-right text-zinc-900">{upload.age ?? "-"}</dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">上傳時間</dt>
-                <dd className="text-right text-zinc-900">{new Date(upload.created_at).toLocaleString("zh-TW")}</dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">臨床風險</dt>
-                <dd className="text-right text-zinc-900">{historyUploadRiskLabel(upload)}</dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">影像判讀</dt>
-                <dd className="text-right text-zinc-900">{upload.screening_result}</dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">症狀綜合</dt>
-                <dd className="text-right text-zinc-900">{upload.symptom_aware_priority}</dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">機率</dt>
-                <dd className="text-right text-zinc-900">
-                  {upload.probability !== null ? `${(upload.probability * 100).toFixed(1)}%` : "-"}
-                </dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">Threshold</dt>
-                <dd className="text-right text-zinc-900">
-                  {upload.threshold !== null ? upload.threshold.toFixed(2) : "-"}
-                </dd>
-              </div>
-              <div className="flex items-start justify-between gap-4">
-                <dt className="text-zinc-400">Model</dt>
-                <dd className="text-right text-zinc-900">{upload.model_version ?? "-"}</dd>
+
+          <div className="flex flex-col">
+            <section className="pb-3">
+              <dl className="space-y-2 text-sm">
+                <div className="flex items-start justify-between gap-4">
+                  <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.uploadedAt}</dt>
+                  <dd className="text-right text-zinc-900">{new Date(upload.created_at).toLocaleString("zh-TW")}</dd>
+                </div>
+                <div className="flex items-start justify-between gap-4">
+                  <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.symptomRisk}</dt>
+                  <dd className="text-right text-zinc-900">
+                    {upload.has_high_risk_symptoms ? STAFF_REVIEW_COPY.highRisk : STAFF_REVIEW_COPY.regularRisk}
+                  </dd>
+                </div>
+              </dl>
+              <div className="mt-3">
+                <p className="text-xs font-medium text-zinc-500">{STAFF_REVIEW_FIELD_LABELS.symptomReported}</p>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {symptomLabels.length > 0 ? (
+                    symptomLabels.map((label) => (
+                      <span
+                        key={label}
+                        className="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-medium text-amber-800"
+                      >
+                        {label}
+                      </span>
+                    ))
+                  ) : (
+                    <span className="inline-flex rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600">
+                      {STAFF_REVIEW_COPY.noSymptomsReported}
+                    </span>
+                  )}
+                </div>
               </div>
-            </dl>
-            <div>
-              <Link href={`/admin/patients/${upload.patient_id}`} className="text-xs text-zinc-500 hover:text-zinc-800">
-                開啟病患完整頁
-              </Link>
-            </div>
-            <label className="flex flex-col gap-1 text-xs text-zinc-500">
-              標註標籤
-              <select
-                value={draft.label}
-                onChange={(event) =>
-                  onDraftChange({
-                    ...draft,
-                    label: event.target.value as StaffAnnotationItem["label"],
-                  })
-                }
-                className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900"
-              >
-                <option value="normal">normal</option>
-                <option value="suspected">suspected</option>
-                <option value="confirmed_infection">confirmed_infection</option>
-                <option value="rejected">rejected</option>
-              </select>
-            </label>
-            <label className="flex flex-col gap-1 text-xs text-zinc-500">
-              備註
-              <textarea
-                value={draft.comment}
-                onChange={(event) => onDraftChange({ ...draft, comment: event.target.value })}
-                rows={6}
-                className="resize-none rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400"
-                placeholder="comment..."
-              />
-            </label>
+            </section>
+
+            <section className="border-t border-zinc-200 py-3">
+              <dl className="space-y-2 text-sm">
+                <div className="flex items-start justify-between gap-4">
+                  <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.aiResult}</dt>
+                  <dd className="text-right">
+                    <span
+                      className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${screeningResultBadgeClass(upload.screening_result)}`}
+                    >
+                      {screeningResultText(upload.screening_result)}
+                    </span>
+                  </dd>
+                </div>
+                <div className="flex items-start justify-between gap-4">
+                  <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.symptomPriority}</dt>
+                  <dd className="text-right">
+                    <span
+                      className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${symptomAwarePriorityBadgeClass(upload.symptom_aware_priority)}`}
+                    >
+                      {symptomAwarePriorityText(upload.symptom_aware_priority)}
+                    </span>
+                  </dd>
+                </div>
+                <div className="flex items-start justify-between gap-4">
+                  <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.infectionProbability}</dt>
+                  <dd className="text-right text-zinc-900">
+                    {upload.probability !== null ? `${(upload.probability * 100).toFixed(1)}%` : "-"}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+
+            <section className="border-t border-zinc-200 pt-3">
+              <dl className="mb-3 text-sm">
+                <div className="flex items-start justify-between gap-4">
+                  <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.currentNurseMark}</dt>
+                  <dd className="text-right">
+                    <span
+                      className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${annotationBadgeClass(upload.annotation_label)}`}
+                    >
+                      {annotationLabelTextOrUnmarked(upload.annotation_label)}
+                    </span>
+                  </dd>
+                </div>
+              </dl>
+
+              <label className="flex flex-col gap-1 text-xs text-zinc-500">
+                {STAFF_REVIEW_FIELD_LABELS.annotationLabel}
+                <select
+                  value={draft.label}
+                  onChange={(event) =>
+                    onDraftChange({
+                      ...draft,
+                      label: event.target.value as StaffAnnotationItem["label"] | "",
+                    })
+                  }
+                  className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900"
+                >
+                  {STAFF_ANNOTATION_LABEL_OPTIONS_WITH_UNMARKED.map((option) => (
+                    <option key={option.value || "unmarked"} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="mt-3 flex flex-col gap-1 text-xs text-zinc-500">
+                {STAFF_REVIEW_FIELD_LABELS.annotationComment}
+                <textarea
+                  value={draft.comment}
+                  onChange={(event) => onDraftChange({ ...draft, comment: event.target.value })}
+                  rows={6}
+                  className="resize-none rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400"
+                  placeholder={STAFF_REVIEW_COPY.commentPlaceholder}
+                />
+              </label>
+            </section>
+
             <button
               type="button"
               onClick={onSave}
-              disabled={saving}
-              className="mt-auto rounded-xl bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-zinc-300"
+              disabled={saving || draft.label === ""}
+              className="mt-4 rounded-xl bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-zinc-300"
             >
               {saving ? "儲存中..." : "儲存"}
             </button>
diff --git a/apps/frontend/app/admin/_components/history-upload-review-helpers.ts b/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
index 1b0d7e9..2aba6c8 100644
--- a/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
+++ b/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
@@ -1,7 +1,8 @@
 import type { StaffAnnotationItem, StaffHistoryOverviewUploadItem } from "@/lib/api/staff";
+import { annotationLabelText, screeningResultText } from "@/lib/i18n/staff-review-label-mapping";
 
 export type HistoryUploadDraftVerdict = {
-  label: StaffAnnotationItem["label"];
+  label: StaffAnnotationItem["label"] | "";
   comment: string;
 };
 
@@ -33,21 +34,21 @@ export function historyUploadRiskBadgeClass(upload: StaffHistoryOverviewUploadIt
 
 export function historyUploadRiskLabel(upload: StaffHistoryOverviewUploadItem): string {
   if (upload.annotation_label === "confirmed_infection") {
-    return "confirmed_infection";
+    return annotationLabelText("confirmed_infection");
   }
   if (upload.annotation_label === "suspected") {
-    return "suspected";
+    return annotationLabelText("suspected");
   }
   if (upload.annotation_label === "normal") {
-    return "normal";
+    return annotationLabelText("normal");
   }
   if (upload.annotation_label === "rejected") {
-    return "rejected";
+    return annotationLabelText("rejected");
   }
   if (upload.risk_rank === 2) {
     return "症狀高風險";
   }
-  return upload.screening_result;
+  return screeningResultText(upload.screening_result);
 }
 
 export function suggestedHistoryUploadLabel(
diff --git a/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx b/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx
index 7244075..e281758 100644
--- a/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx
+++ b/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx
@@ -15,10 +15,7 @@ import {
 } from "@/lib/api/staff";
 
 import { HistoryUploadAnnotationModal } from "./history-upload-annotation-modal";
-import {
-  suggestedHistoryUploadLabel,
-  type HistoryUploadDraftVerdict,
-} from "./history-upload-review-helpers";
+import { type HistoryUploadDraftVerdict } from "./history-upload-review-helpers";
 import { HistoryUploadThumbnailGrid } from "./history-upload-thumbnail-grid";
 import { useUploadImageUrls } from "./use-upload-image-urls";
 
@@ -51,7 +48,7 @@ export function PatientDayUploadReviewModal({
   const [group, setGroup] = useState<StaffHistoryOverviewUserGroupItem | null>(null);
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE);
   const [selectedUploadId, setSelectedUploadId] = useState<number | null>(null);
-  const [draft, setDraft] = useState<HistoryUploadDraftVerdict>({ label: "suspected", comment: "" });
+  const [draft, setDraft] = useState<HistoryUploadDraftVerdict>({ label: "", comment: "" });
   const [saving, setSaving] = useState(false);
 
   const loadGroup = useCallback(async () => {
@@ -114,7 +111,7 @@ export function PatientDayUploadReviewModal({
     }
     const timer = window.setTimeout(() => {
       setDraft({
-        label: suggestedHistoryUploadLabel(selectedUpload),
+        label: selectedUpload.annotation_label ?? "",
         comment: selectedUpload.annotation_comment ?? "",
       });
     }, 0);
@@ -127,6 +124,10 @@ export function PatientDayUploadReviewModal({
     if (!selectedUpload) {
       return;
     }
+    if (draft.label === "") {
+      toast.error("請先選擇護理審核標籤");
+      return;
+    }
     setSaving(true);
     try {
       await upsertUploadAnnotation(selectedUpload.upload_id, {
diff --git a/apps/frontend/app/admin/_components/today-patient-row.tsx b/apps/frontend/app/admin/_components/today-patient-row.tsx
index 0a63251..126d526 100644
--- a/apps/frontend/app/admin/_components/today-patient-row.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-row.tsx
@@ -3,6 +3,7 @@
 import { PersonAvatar } from "@/app/admin/patient-assignment/person-avatar";
 import { UploadThumb } from "@/app/admin/_components/upload-thumb";
 import type { StaffTodayAttentionPatientItem, StaffTodayAttentionRiskHighlight } from "@/lib/api/staff";
+import { STAFF_REVIEW_COPY, annotationStatusBadgeClass } from "@/lib/i18n/staff-review-label-mapping";
 import { activeSymptomLabels } from "@/lib/symptoms";
 import { cn } from "@/lib/utils";
 
@@ -88,7 +89,14 @@ export function TodayPatientRow({
       <div className="flex items-start gap-2.5">
         <PersonAvatar name={name} pictureUrl={item.picture_url} size="lg" />
         <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-semibold text-zinc-900">{name}</p>
+          <div className="flex items-center gap-2">
+            <p className="truncate text-sm font-semibold text-zinc-900">{name}</p>
+            {item.has_annotation ? (
+              <span className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${annotationStatusBadgeClass(true)}`}>
+                {STAFF_REVIEW_COPY.annotated}
+              </span>
+            ) : null}
+          </div>
           <p className="mt-0.5 truncate text-xs text-zinc-500">
             當日 {item.day_upload_count} 張上傳
             <span className="mx-1 text-zinc-300">·</span>
diff --git a/apps/frontend/app/admin/history-overview/page.tsx b/apps/frontend/app/admin/history-overview/page.tsx
index b330a90..d078606 100644
--- a/apps/frontend/app/admin/history-overview/page.tsx
+++ b/apps/frontend/app/admin/history-overview/page.tsx
@@ -18,10 +18,7 @@ import {
 import { parseTaipeiDateKey } from "@/lib/utils/upload-calendar";
 
 import { HistoryUploadAnnotationModal } from "@/app/admin/_components/history-upload-annotation-modal";
-import {
-  suggestedHistoryUploadLabel,
-  type HistoryUploadDraftVerdict,
-} from "@/app/admin/_components/history-upload-review-helpers";
+import { type HistoryUploadDraftVerdict } from "@/app/admin/_components/history-upload-review-helpers";
 import { HistoryUploadThumbnailGrid } from "@/app/admin/_components/history-upload-thumbnail-grid";
 import { useUploadImageUrls } from "@/app/admin/_components/use-upload-image-urls";
 import { ClinicalPeriodPanel } from "./clinical-period-panel";
@@ -91,7 +88,7 @@ function AdminHistoryOverviewPageInner() {
   const [ungroupedVisibleCount, setUngroupedVisibleCount] = useState(INITIAL_UNGROUPED_VISIBLE);
   const [groupVisibleCountByPatient, setGroupVisibleCountByPatient] = useState<Record<number, number>>({});
   const [selectedUploadId, setSelectedUploadId] = useState<number | null>(null);
-  const [draft, setDraft] = useState<HistoryUploadDraftVerdict>({ label: "suspected", comment: "" });
+  const [draft, setDraft] = useState<HistoryUploadDraftVerdict>({ label: "", comment: "" });
   const [saving, setSaving] = useState(false);
 
   const sentinelRef = useRef<HTMLDivElement | null>(null);
@@ -224,7 +221,7 @@ function AdminHistoryOverviewPageInner() {
     }
     const timer = window.setTimeout(() => {
       setDraft({
-        label: suggestedHistoryUploadLabel(selectedUpload),
+        label: selectedUpload.annotation_label ?? "",
         comment: selectedUpload.annotation_comment ?? "",
       });
     }, 0);
@@ -292,6 +289,10 @@ function AdminHistoryOverviewPageInner() {
     if (!selectedUpload) {
       return;
     }
+    if (draft.label === "") {
+      toast.error("請先選擇護理審核標籤");
+      return;
+    }
     setSaving(true);
     try {
       await upsertUploadAnnotation(selectedUpload.upload_id, {
diff --git a/apps/frontend/app/admin/review-fast/page.tsx b/apps/frontend/app/admin/review-fast/page.tsx
index ac5085b..4aa27c0 100644
--- a/apps/frontend/app/admin/review-fast/page.tsx
+++ b/apps/frontend/app/admin/review-fast/page.tsx
@@ -7,6 +7,13 @@ import { toast } from "sonner";
 
 import { useRapidReviewGridState } from "@/app/admin/_components/rapid-review-grid-state";
 import { StaffAnnotationItem, StaffRapidReviewQueueItem } from "@/lib/api/staff";
+import {
+  STAFF_ANNOTATION_LABEL_OPTIONS,
+  STAFF_REVIEW_COPY,
+  STAFF_REVIEW_FIELD_LABELS,
+  screeningResultText,
+  symptomAwarePriorityText,
+} from "@/lib/i18n/staff-review-label-mapping";
 import {
   activeSymptomLabels,
   symptomAwarePriority,
@@ -20,16 +27,7 @@ type DraftVerdict = {
 };
 
 function imageVerdictText(item: StaffRapidReviewQueueItem): string {
-  if (item.screening_result === "normal") {
-    return "normal";
-  }
-  if (item.screening_result === "suspected") {
-    return "suspected";
-  }
-  if (item.screening_result === "rejected") {
-    return "rejected";
-  }
-  return "technical_error";
+  return screeningResultText(item.screening_result);
 }
 
 function imageVerdictBadgeClass(item: StaffRapidReviewQueueItem): string {
@@ -191,7 +189,7 @@ export default function AdminFastReviewPage() {
                   <span
                     className={`inline-flex rounded-full px-1.5 py-0.5 text-[9px] font-medium backdrop-blur ${clinicalBadgeClass(priority)}`}
                   >
-                    症狀 {priority}
+                    症狀 {symptomAwarePriorityText(priority)}
                   </span>
                 </div>
               </button>
@@ -240,24 +238,26 @@ export default function AdminFastReviewPage() {
                     className="object-contain"
                   />
                 ) : (
-                  <div className="flex h-full items-center justify-center text-sm text-zinc-400">載入影像中...</div>
+                  <div className="flex h-full items-center justify-center text-sm text-zinc-400">
+                    {STAFF_REVIEW_COPY.loadingImage}
+                  </div>
                 )}
               </div>
 
               <div className="flex flex-col gap-3">
                 <div className="flex flex-col gap-2 text-xs text-zinc-500">
                   <div className="flex items-center justify-between gap-2">
-                    <span>影像判讀</span>
+                    <span>{STAFF_REVIEW_FIELD_LABELS.aiResult}</span>
                     <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${imageVerdictBadgeClass(selectedItem)}`}>
                       {imageVerdictText(selectedItem)}
                     </span>
                   </div>
                   <div className="flex items-center justify-between gap-2">
-                    <span>症狀綜合</span>
+                    <span>{STAFF_REVIEW_FIELD_LABELS.symptomPriority}</span>
                     <span
                       className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${clinicalBadgeClass(clinicalPriority(selectedItem))}`}
                     >
-                      {clinicalPriority(selectedItem)}
+                      {symptomAwarePriorityText(clinicalPriority(selectedItem))}
                     </span>
                   </div>
                 </div>
@@ -279,7 +279,7 @@ export default function AdminFastReviewPage() {
                   </div>
                 </div>
                 <label className="flex flex-col gap-1 text-xs text-zinc-500">
-                  標註標籤
+                  {STAFF_REVIEW_FIELD_LABELS.annotationLabel}
                   <select
                     value={draft.label}
                     onChange={(event) =>
@@ -287,19 +287,20 @@ export default function AdminFastReviewPage() {
                     }
                     className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900"
                   >
-                    <option value="normal">normal</option>
-                    <option value="suspected">suspected</option>
-                    <option value="confirmed_infection">confirmed_infection</option>
-                    <option value="rejected">rejected</option>
+                    {STAFF_ANNOTATION_LABEL_OPTIONS.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
                   </select>
                 </label>
                 <label className="flex flex-col gap-1 text-xs text-zinc-500">
-                  備註
+                  {STAFF_REVIEW_FIELD_LABELS.annotationComment}
                   <textarea
                     value={draft.comment}
                     onChange={(event) => setDraft((current) => ({ ...current, comment: event.target.value }))}
                     rows={5}
-                    placeholder="comment..."
+                    placeholder={STAFF_REVIEW_COPY.commentPlaceholder}
                     className="resize-none rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400"
                   />
                 </label>
diff --git a/apps/frontend/app/admin/review/page.tsx b/apps/frontend/app/admin/review/page.tsx
index 379d213..8ff3ff6 100644
--- a/apps/frontend/app/admin/review/page.tsx
+++ b/apps/frontend/app/admin/review/page.tsx
@@ -8,6 +8,13 @@ import clsx from "clsx";
 
 import { useRapidReviewState } from "@/app/admin/_components/rapid-review-state";
 import { StaffAnnotationItem } from "@/lib/api/staff";
+import {
+  STAFF_ANNOTATION_LABEL_OPTIONS,
+  STAFF_REVIEW_COPY,
+  STAFF_REVIEW_FIELD_LABELS,
+  screeningResultText,
+  symptomAwarePriorityText,
+} from "@/lib/i18n/staff-review-label-mapping";
 
 type DraftVerdict = {
   label: StaffAnnotationItem["label"];
@@ -149,21 +156,21 @@ export default function AdminRapidReviewPage() {
             <dd className="text-right text-zinc-900">{new Date(currentItem.created_at).toLocaleString("zh-TW")}</dd>
           </div>
           <div className="flex items-start justify-between gap-4">
-            <dt className="text-zinc-400">影像判讀</dt>
-            <dd className="text-right text-zinc-900">{currentItem.screening_result}</dd>
+            <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.aiResult}</dt>
+            <dd className="text-right text-zinc-900">{screeningResultText(currentItem.screening_result)}</dd>
           </div>
           <div className="flex items-start justify-between gap-4">
-            <dt className="text-zinc-400">症狀綜合</dt>
-            <dd className="text-right text-zinc-900">{currentItem.symptom_aware_priority}</dd>
+            <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.symptomPriority}</dt>
+            <dd className="text-right text-zinc-900">{symptomAwarePriorityText(currentItem.symptom_aware_priority)}</dd>
           </div>
           <div className="flex items-start justify-between gap-4">
-            <dt className="text-zinc-400">機率</dt>
+            <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.infectionProbability}</dt>
             <dd className="text-right text-zinc-900">
               {currentItem.probability !== null ? `${(currentItem.probability * 100).toFixed(1)}%` : "-"}
             </dd>
           </div>
           <div className="flex items-start justify-between gap-4">
-            <dt className="text-zinc-400">Threshold</dt>
+            <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.decisionThreshold}</dt>
             <dd className="text-right text-zinc-900">
               {currentItem?.threshold !== null && currentItem?.threshold !== undefined
                 ? currentItem.threshold.toFixed(2)
@@ -171,7 +178,7 @@ export default function AdminRapidReviewPage() {
             </dd>
           </div>
           <div className="flex items-start justify-between gap-4">
-            <dt className="text-zinc-400">Model</dt>
+            <dt className="text-zinc-400">{STAFF_REVIEW_FIELD_LABELS.modelVersion}</dt>
             <dd className="text-right text-zinc-900">{currentItem?.model_version ?? "-"}</dd>
           </div>
         </dl>
@@ -205,15 +212,16 @@ export default function AdminRapidReviewPage() {
               onChange={(event) => onChangeDraft({ label: event.target.value as DraftVerdict["label"] })}
               className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100"
             >
-              <option value="normal">normal</option>
-              <option value="suspected">suspected</option>
-              <option value="confirmed_infection">confirmed_infection</option>
-              <option value="rejected">rejected</option>
+              {STAFF_ANNOTATION_LABEL_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
             </select>
             <input
               value={draft?.comment ?? ""}
               onChange={(event) => onChangeDraft({ comment: event.target.value })}
-              placeholder="comment..."
+              placeholder={STAFF_REVIEW_COPY.commentPlaceholder}
               className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-500"
             />
             <button
diff --git a/apps/frontend/lib/i18n/staff-review-label-mapping.ts b/apps/frontend/lib/i18n/staff-review-label-mapping.ts
new file mode 100644
index 0000000..cf796c6
--- /dev/null
+++ b/apps/frontend/lib/i18n/staff-review-label-mapping.ts
@@ -0,0 +1,111 @@
+import type { StaffAnnotationItem, StaffHistoryOverviewUploadItem } from "@/lib/api/staff";
+
+export const STAFF_REVIEW_FIELD_LABELS = {
+  age: "年齡",
+  uploadedAt: "上傳時間",
+  symptomReported: "症狀回報",
+  symptomRisk: "症狀風險",
+  symptomPriority: "症狀綜合判定",
+  currentNurseMark: "目前護理標記",
+  aiResult: "AI 判讀結果",
+  infectionProbability: "分類信心",
+  decisionThreshold: "判讀門檻",
+  modelVersion: "模型版本",
+  annotationLabel: "護理審核標籤",
+  annotationComment: "護理備註",
+} as const;
+
+export const STAFF_REVIEW_COPY = {
+  noSymptomsReported: "未回報症狀",
+  highRisk: "高風險",
+  regularRisk: "一般風險",
+  unmarked: "未標註",
+  annotated: "已標註",
+  commentPlaceholder: "請輸入護理審核備註（選填）",
+  loadingImage: "載入影像中...",
+} as const;
+
+export const STAFF_ANNOTATION_LABEL_TEXT: Record<StaffAnnotationItem["label"], string> = {
+  normal: "正常",
+  suspected: "疑似感染",
+  confirmed_infection: "確認感染",
+  rejected: "上傳不採用",
+};
+
+export const STAFF_ANNOTATION_BADGE_CLASS: Record<StaffAnnotationItem["label"], string> = {
+  normal: "bg-emerald-50 text-emerald-700",
+  suspected: "bg-red-50 text-red-700",
+  confirmed_infection: "bg-rose-100 text-rose-700",
+  rejected: "bg-zinc-100 text-zinc-700",
+};
+
+export const STAFF_ANNOTATION_LABEL_OPTIONS = [
+  { value: "normal", label: STAFF_ANNOTATION_LABEL_TEXT.normal },
+  { value: "suspected", label: STAFF_ANNOTATION_LABEL_TEXT.suspected },
+  { value: "confirmed_infection", label: STAFF_ANNOTATION_LABEL_TEXT.confirmed_infection },
+  { value: "rejected", label: STAFF_ANNOTATION_LABEL_TEXT.rejected },
+] as const satisfies ReadonlyArray<{
+  value: StaffAnnotationItem["label"];
+  label: string;
+}>;
+
+export const STAFF_ANNOTATION_LABEL_OPTIONS_WITH_UNMARKED = [
+  { value: "", label: STAFF_REVIEW_COPY.unmarked },
+  ...STAFF_ANNOTATION_LABEL_OPTIONS,
+] as const satisfies ReadonlyArray<{
+  value: StaffAnnotationItem["label"] | "";
+  label: string;
+}>;
+
+export function screeningResultText(value: StaffHistoryOverviewUploadItem["screening_result"]): string {
+  if (value === "normal") {
+    return "正常";
+  }
+  if (value === "suspected") {
+    return "疑似感染";
+  }
+  if (value === "rejected") {
+    return "影像不採用";
+  }
+  return "判讀失敗";
+}
+
+export function screeningResultBadgeClass(value: StaffHistoryOverviewUploadItem["screening_result"]): string {
+  if (value === "normal") {
+    return "bg-emerald-50 text-emerald-700";
+  }
+  if (value === "suspected") {
+    return "bg-red-50 text-red-700";
+  }
+  if (value === "rejected") {
+    return "bg-zinc-100 text-zinc-700";
+  }
+  return "bg-amber-50 text-amber-700";
+}
+
+export function symptomAwarePriorityText(value: StaffHistoryOverviewUploadItem["symptom_aware_priority"]): string {
+  return value === "suspected" ? "疑似感染" : "一般";
+}
+
+export function symptomAwarePriorityBadgeClass(value: StaffHistoryOverviewUploadItem["symptom_aware_priority"]): string {
+  return value === "suspected" ? "bg-red-50 text-red-700" : "bg-emerald-50 text-emerald-700";
+}
+
+export function annotationLabelText(value: StaffAnnotationItem["label"]): string {
+  return STAFF_ANNOTATION_LABEL_TEXT[value];
+}
+
+export function annotationLabelTextOrUnmarked(value: StaffAnnotationItem["label"] | null): string {
+  return value ? STAFF_ANNOTATION_LABEL_TEXT[value] : STAFF_REVIEW_COPY.unmarked;
+}
+
+export function annotationBadgeClass(value: StaffAnnotationItem["label"] | null): string {
+  if (!value) {
+    return "bg-zinc-100 text-zinc-700";
+  }
+  return STAFF_ANNOTATION_BADGE_CLASS[value];
+}
+
+export function annotationStatusBadgeClass(hasAnnotation: boolean): string {
+  return hasAnnotation ? "bg-emerald-50 text-emerald-700" : "bg-zinc-100 text-zinc-700";
+}

From 06964d96f53b673d633358c8c2d2ae08339ae9b0 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:02:46 +0800
Subject: [PATCH 02/10] fix(backend): migrate legacy annotation table to
 identity-based reviewer

Repair local SQLite installations where annotations still require staff_user_id so staff annotation saves no longer fail with 500 after moving to reviewer_identity_id.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 ...260809_06_fix_legacy_annotations_schema.py | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py

diff --git a/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py b/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py
new file mode 100644
index 0000000..bfddb9f
--- /dev/null
+++ b/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py
@@ -0,0 +1,121 @@
+"""fix legacy annotations schema that still requires staff_user_id
+
+Revision ID: 20260809_06
+Revises: 20260717_05
+Create Date: 2026-08-09 13:55:00
+"""
+
+# allow-destructive-migration: legacy local SQLite compatibility repair
+
+from __future__ import annotations
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy import inspect
+
+# revision identifiers, used by Alembic.
+revision = "20260809_06"
+down_revision = "20260717_05"
+branch_labels = None
+depends_on = None
+
+
+def _column_names(table_name: str) -> set[str]:
+    bind = op.get_bind()
+    inspector = inspect(bind)
+    try:
+        return {column["name"] for column in inspector.get_columns(table_name)}
+    except Exception:
+        return set()
+
+
+def upgrade() -> None:
+    # Legacy local SQLite snapshots may keep annotations.staff_user_id (NOT NULL),
+    # which breaks current write path that uses reviewer_identity_id.
+    table_names = set(inspect(op.get_bind()).get_table_names())
+    if "annotations" not in table_names:
+        return
+    columns = _column_names("annotations")
+    if "staff_user_id" not in columns:
+        return
+
+    bind = op.get_bind()
+
+    fallback_reviewer_identity_id = bind.execute(
+        sa.text(
+            """
+            SELECT id
+            FROM liff_identities
+            WHERE role IN ('staff', 'admin')
+            ORDER BY id
+            LIMIT 1
+            """
+        )
+    ).scalar()
+    if fallback_reviewer_identity_id is None:
+        fallback_reviewer_identity_id = bind.execute(
+            sa.text(
+                """
+                SELECT id
+                FROM liff_identities
+                ORDER BY id
+                LIMIT 1
+                """
+            )
+        ).scalar()
+
+    op.create_table(
+        "annotations_v2",
+        sa.Column("id", sa.Integer(), primary_key=True, autoincrement=True),
+        sa.Column("patient_id", sa.Integer(), sa.ForeignKey("patients.id", ondelete="CASCADE"), nullable=False),
+        sa.Column("upload_id", sa.Integer(), sa.ForeignKey("uploads.id", ondelete="CASCADE"), nullable=False),
+        sa.Column("reviewer_identity_id", sa.Integer(), sa.ForeignKey("liff_identities.id", ondelete="CASCADE"), nullable=True),
+        sa.Column("label", sa.String(length=64), nullable=False),
+        sa.Column("comment", sa.Text(), nullable=True),
+        sa.Column("patient_read_at", sa.DateTime(timezone=True), nullable=True),
+        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.func.now()),
+    )
+
+    if fallback_reviewer_identity_id is None:
+        op.execute(
+            sa.text(
+                """
+                INSERT INTO annotations_v2 (
+                    id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
+                )
+                SELECT
+                    id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
+                FROM annotations
+                """
+            )
+        )
+    else:
+        op.execute(
+            sa.text(
+                """
+                INSERT INTO annotations_v2 (
+                    id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
+                )
+                SELECT
+                    id,
+                    patient_id,
+                    upload_id,
+                    COALESCE(reviewer_identity_id, :fallback_reviewer_identity_id),
+                    label,
+                    comment,
+                    patient_read_at,
+                    created_at
+                FROM annotations
+                """
+            ).bindparams(fallback_reviewer_identity_id=int(fallback_reviewer_identity_id))
+        )
+
+    op.drop_table("annotations")
+    op.rename_table("annotations_v2", "annotations")
+    op.create_index("ix_annotations_patient_id", "annotations", ["patient_id"])
+    op.create_index("ix_annotations_upload_id", "annotations", ["upload_id"])
+
+
+def downgrade() -> None:
+    # Non-destructive policy: no automatic rollback for compatibility migration.
+    pass

From ecf6beb348a3088a7f3791e9f6985a5a6a3a61f5 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:09:14 +0800
Subject: [PATCH 03/10] feat(staff-review): surface annotation labels in
 patient lists

Expose the latest annotation label in today-attention API responses and render the actual nursing verdict badge beside patient names so staff see actionable status at a glance. Update impacted unit tests to match the revised review modal copy and structure.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/backend/app/api/routes/staff.py               |  1 +
 apps/backend/app/schemas/staff_dashboard.py        |  1 +
 apps/backend/app/services/staff_dashboard.py       | 14 +++++++++++++-
 .../app/admin/_components/today-patient-row.tsx    |  8 +++++---
 .../admin/history-overview/__tests__/page.test.tsx |  3 +--
 .../app/admin/review-fast/__tests__/page.test.tsx  |  4 ++--
 apps/frontend/lib/api/staff.ts                     |  1 +
 7 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/backend/app/api/routes/staff.py b/apps/backend/app/api/routes/staff.py
index 14384f4..d125a3e 100644
--- a/apps/backend/app/api/routes/staff.py
+++ b/apps/backend/app/api/routes/staff.py
@@ -133,6 +133,7 @@ def _serialize_today_attention(
                 representative_upload_id=row.representative_upload_id,
                 sort_upload_at=row.sort_upload_at,
                 has_annotation=row.has_annotation,
+                annotation_label=row.annotation_label,
                 picture_url=row.picture_url,
                 day_upload_count=row.day_upload_count,
                 preview_upload_ids=row.preview_upload_ids,
diff --git a/apps/backend/app/schemas/staff_dashboard.py b/apps/backend/app/schemas/staff_dashboard.py
index 84aa082..476cdd2 100644
--- a/apps/backend/app/schemas/staff_dashboard.py
+++ b/apps/backend/app/schemas/staff_dashboard.py
@@ -123,6 +123,7 @@ class StaffTodayAttentionPatientItem(BaseModel):
     representative_upload_id: int
     sort_upload_at: datetime
     has_annotation: bool
+    annotation_label: Literal["normal", "suspected", "confirmed_infection", "rejected"] | None = None
     picture_url: str | None = None
     day_upload_count: int = 0
     preview_upload_ids: list[int] = Field(default_factory=list)
diff --git a/apps/backend/app/services/staff_dashboard.py b/apps/backend/app/services/staff_dashboard.py
index 3d54dc2..8c8515c 100644
--- a/apps/backend/app/services/staff_dashboard.py
+++ b/apps/backend/app/services/staff_dashboard.py
@@ -3,7 +3,7 @@
 from collections import defaultdict
 from dataclasses import dataclass
 from datetime import date, datetime, time, timedelta, timezone
-from typing import Literal
+from typing import Literal, cast
 
 from sqlalchemy.exc import IntegrityError
 from sqlalchemy import Select, and_, case, delete, func, select
@@ -1021,6 +1021,7 @@ class TodayAttentionPatientRow:
     representative_upload_id: int
     sort_upload_at: datetime
     has_annotation: bool
+    annotation_label: Literal["normal", "suspected", "confirmed_infection", "rejected"] | None
     picture_url: str | None
     day_upload_count: int
     preview_upload_ids: list[int]
@@ -1199,6 +1200,11 @@ def list_today_attention_patients(
                 latest_annotation_by_upload=latest_annotation_by_upload,
             )
             has_annotation = risk_representative.has_annotation
+            annotation_label = (
+                cast(Literal["normal", "suspected", "confirmed_infection", "rejected"], latest_annotation_by_upload.get(representative.id).label)
+                if representative.id in latest_annotation_by_upload
+                else None
+            )
         else:
             patient_tier = "other"
             representative = max(
@@ -1215,6 +1221,11 @@ def list_today_attention_patients(
             limit = day_upload_count if day_upload_count <= 4 else 3
             preview_upload_ids = [upload.id for upload in ordered[:limit]]
             has_annotation = representative.id in latest_annotation_by_upload
+            annotation_label = (
+                cast(Literal["normal", "suspected", "confirmed_infection", "rejected"], latest_annotation_by_upload.get(representative.id).label)
+                if representative.id in latest_annotation_by_upload
+                else None
+            )
 
         attention_rows.append(
             TodayAttentionPatientRow(
@@ -1223,6 +1234,7 @@ def list_today_attention_patients(
                 representative_upload_id=representative.id,
                 sort_upload_at=sort_upload_at,
                 has_annotation=has_annotation,
+                annotation_label=annotation_label,
                 picture_url=picture_by_patient.get(patient_id),
                 day_upload_count=day_upload_count,
                 preview_upload_ids=preview_upload_ids,
diff --git a/apps/frontend/app/admin/_components/today-patient-row.tsx b/apps/frontend/app/admin/_components/today-patient-row.tsx
index 126d526..b499aaf 100644
--- a/apps/frontend/app/admin/_components/today-patient-row.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-row.tsx
@@ -3,7 +3,7 @@
 import { PersonAvatar } from "@/app/admin/patient-assignment/person-avatar";
 import { UploadThumb } from "@/app/admin/_components/upload-thumb";
 import type { StaffTodayAttentionPatientItem, StaffTodayAttentionRiskHighlight } from "@/lib/api/staff";
-import { STAFF_REVIEW_COPY, annotationStatusBadgeClass } from "@/lib/i18n/staff-review-label-mapping";
+import { annotationBadgeClass, annotationLabelTextOrUnmarked } from "@/lib/i18n/staff-review-label-mapping";
 import { activeSymptomLabels } from "@/lib/symptoms";
 import { cn } from "@/lib/utils";
 
@@ -92,8 +92,10 @@ export function TodayPatientRow({
           <div className="flex items-center gap-2">
             <p className="truncate text-sm font-semibold text-zinc-900">{name}</p>
             {item.has_annotation ? (
-              <span className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${annotationStatusBadgeClass(true)}`}>
-                {STAFF_REVIEW_COPY.annotated}
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${annotationBadgeClass(item.annotation_label)}`}
+              >
+                {annotationLabelTextOrUnmarked(item.annotation_label)}
               </span>
             ) : null}
           </div>
diff --git a/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx b/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
index 4643b13..7215da3 100644
--- a/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
+++ b/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
@@ -244,8 +244,7 @@ describe("AdminHistoryOverviewPage grouped patient navigation", () => {
     const uploadButton = within(groupArticle as HTMLElement).getByRole("button", { name: /16:00:00/ });
     fireEvent.click(uploadButton);
 
-    expect(await screen.findByText("開啟病患完整頁")).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "開啟病患完整頁" })).toHaveAttribute("href", "/admin/patients/42");
+    expect(await screen.findByText("護理審核標籤")).toBeInTheDocument();
     expect(screen.getByText("Full Name Patient")).toBeInTheDocument();
   });
 
diff --git a/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx b/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx
index ab41552..56d50db 100644
--- a/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx
+++ b/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx
@@ -100,8 +100,8 @@ describe("AdminFastReviewPage symptom modal", () => {
     expect(screen.getByText("膿")).toBeInTheDocument();
     expect(screen.queryByText("分泌物")).not.toBeInTheDocument();
     expect(screen.queryByText("無症狀")).not.toBeInTheDocument();
-    expect(screen.getByText("影像判讀")).toBeInTheDocument();
-    expect(screen.getByText("症狀綜合")).toBeInTheDocument();
+    expect(screen.getByText("AI 判讀結果")).toBeInTheDocument();
+    expect(screen.getByText("症狀綜合判定")).toBeInTheDocument();
   });
 
   test("shows 無症狀 when no symptoms are positive", async () => {
diff --git a/apps/frontend/lib/api/staff.ts b/apps/frontend/lib/api/staff.ts
index 6a05829..306167e 100644
--- a/apps/frontend/lib/api/staff.ts
+++ b/apps/frontend/lib/api/staff.ts
@@ -138,6 +138,7 @@ export type StaffTodayAttentionPatientItem = {
   representative_upload_id: number;
   sort_upload_at: string;
   has_annotation: boolean;
+  annotation_label: "normal" | "suspected" | "confirmed_infection" | "rejected" | null;
   picture_url: string | null;
   day_upload_count: number;
   preview_upload_ids: number[];

From 3b660d58f4be5a2a73dbdd1633e2b1335ec2b72d Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:09:30 +0800
Subject: [PATCH 04/10] feat(e2e): add report-with-demo skill and local
 playwright harness

Establish a contract-first workflow for browser feature demos and add a deterministic Playwright setup for local persona-based scenarios. Separate unit and e2e lanes so CI unit runs stay stable while keeping recorded demo artifacts local-only.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .cursor/skills/report-with-demo/SKILL.md      | 101 ++++++
 .../report-with-demo/contract-template.md     |  38 +++
 apps/frontend/.gitignore                      |   3 +
 apps/frontend/e2e/example-contract.spec.ts    |   9 +
 apps/frontend/e2e/support/dev-persona.ts      |  11 +
 apps/frontend/eslint.config.mjs               |   3 +
 apps/frontend/jest.config.js                  |   2 +-
 apps/frontend/package-lock.json               |  63 ++++
 apps/frontend/package.json                    |   5 +-
 apps/frontend/playwright.config.ts            |  22 ++
 docs/e2e-contracts/README.md                  |   7 +
 ...6-08-08-report-with-demo-implementation.md | 289 ++++++++++++++++++
 .../2026-08-08-report-with-demo-design.md     | 115 +++++++
 13 files changed, 666 insertions(+), 2 deletions(-)
 create mode 100644 .cursor/skills/report-with-demo/SKILL.md
 create mode 100644 .cursor/skills/report-with-demo/contract-template.md
 create mode 100644 apps/frontend/e2e/example-contract.spec.ts
 create mode 100644 apps/frontend/e2e/support/dev-persona.ts
 create mode 100644 apps/frontend/playwright.config.ts
 create mode 100644 docs/e2e-contracts/README.md
 create mode 100644 docs/superpowers/plans/2026-08-08-report-with-demo-implementation.md
 create mode 100644 docs/superpowers/specs/2026-08-08-report-with-demo-design.md

diff --git a/.cursor/skills/report-with-demo/SKILL.md b/.cursor/skills/report-with-demo/SKILL.md
new file mode 100644
index 0000000..e49a7b1
--- /dev/null
+++ b/.cursor/skills/report-with-demo/SKILL.md
@@ -0,0 +1,101 @@
+---
+name: report-with-demo
+description: Defines a durable E2E acceptance contract before implementing a browser feature, then runs a deterministic Playwright scenario and records demo video, trace, and failure evidence. Use only when explicitly invoked as /report-with-demo.
+disable-model-invocation: true
+---
+
+# Report With Demo
+
+Use this skill only when the user explicitly invokes `/report-with-demo <feature request>`.
+
+## Purpose
+
+Turn a browser-facing feature request into:
+
+1. a durable E2E acceptance contract written before feature implementation; and
+2. reproducible evidence (video, trace, and diagnostics) generated from a deterministic Playwright scenario.
+
+## Hard Rules
+
+- Never use production data, real patient identities, real LINE accounts, or secrets.
+- Never record or test against production hosts.
+- Never widen scope beyond the requested feature and written acceptance contract.
+- Never auto-commit, auto-push, or auto-deploy.
+- Never run an unbounded retry loop. The maximum is **at most three** repair attempts.
+
+## Required Workflow
+
+### 1) Inspect and constrain before coding
+
+Read the relevant frontend routes, backend endpoints, auth mode, existing tests, and available development personas.
+
+If there is a material acceptance ambiguity, ask one focused question before implementation.
+
+### 2) Write the acceptance contract first
+
+Create and save:
+
+`docs/e2e-contracts/<feature-slug>.md`
+
+Use `.cursor/skills/report-with-demo/contract-template.md`.
+
+The contract must include:
+
+- outcome and explicit non-goals;
+- environment and safety constraints;
+- deterministic persona + seed/reset setup;
+- Given/When/Then scenario steps;
+- visible assertion per important step;
+- required demo evidence outputs;
+- known limitations.
+
+### 3) Implement only contract-defined scope
+
+Implement the requested feature according to the contract.
+
+Add semantic selectors or `data-testid` only where needed for stable E2E interaction. Do not use fragile CSS selectors, layout classes, `nth-child`, or text concatenation as primary locators.
+
+### 4) Write deterministic Playwright scenario
+
+Create or update a feature-specific Playwright test that:
+
+- uses development personas and deterministic setup;
+- mirrors the contract steps exactly;
+- asserts every contract-visible outcome;
+- records video and trace through Playwright config.
+
+Browser MCP can be used for exploration or smoke verification, but it is not completion evidence because it does not produce the required demo video artifact.
+
+### 5) Execute, diagnose, and bounded retry
+
+Run the scenario and classify failures before changing code:
+
+| Failure class | Action |
+| --- | --- |
+| Contract assertion fails | Repair implementation or contract-derived setup and rerun. |
+| Test harness or fixture failure | Repair deterministic harness/setup and rerun. |
+| Environment/service unavailable | Retry only if transient recovery is plausible; otherwise report blocker. |
+| Ambiguous product behavior | Stop and ask the user. |
+
+Run at most three diagnose/fix/rerun attempts.
+
+A video file alone is not success. Success requires scenario assertions to pass.
+
+### 6) Report and wait for feedback
+
+On success, report:
+
+- acceptance contract path;
+- changed files summary;
+- executed E2E command and pass result;
+- video, trace, and screenshot paths;
+- limitations/deviations.
+
+Then explicitly **wait for user feedback**.
+
+On failure after max attempts, report:
+
+- failed acceptance step;
+- attempt history and diagnosis;
+- artifact paths;
+- smallest concrete blocker or decision needed from user.
diff --git a/.cursor/skills/report-with-demo/contract-template.md b/.cursor/skills/report-with-demo/contract-template.md
new file mode 100644
index 0000000..5c4db2e
--- /dev/null
+++ b/.cursor/skills/report-with-demo/contract-template.md
@@ -0,0 +1,38 @@
+# <Feature> E2E acceptance contract
+
+## Outcome
+
+- Primary user:
+- Target outcome:
+- Business reason:
+
+## Non-goals
+
+- Out of scope item 1:
+- Out of scope item 2:
+
+## Environment and safety
+
+- Persona:
+- Seed/reset command or fixture:
+- Browser viewport:
+- Prohibited data/services:
+- Notes about auth mode:
+
+## Scenario
+
+| Step | Given / When / Then | Visible assertion |
+| --- | --- | --- |
+| 1 | Given ... When ... Then ... | Assert ... |
+| 2 | Given ... When ... Then ... | Assert ... |
+
+## Demo evidence
+
+- Video:
+- Trace:
+- Failure screenshots:
+- Test command:
+
+## Known limitations
+
+- Limitation 1:
diff --git a/apps/frontend/.gitignore b/apps/frontend/.gitignore
index b721bff..401416b 100644
--- a/apps/frontend/.gitignore
+++ b/apps/frontend/.gitignore
@@ -12,6 +12,9 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
+/e2e-artifacts/
 
 # next.js
 /.next/
diff --git a/apps/frontend/e2e/example-contract.spec.ts b/apps/frontend/e2e/example-contract.spec.ts
new file mode 100644
index 0000000..5a8ba64
--- /dev/null
+++ b/apps/frontend/e2e/example-contract.spec.ts
@@ -0,0 +1,9 @@
+import { expect, test } from "@playwright/test";
+
+import { assertDevPersonaVisible, openDevPersonasPage } from "./support/dev-persona";
+
+test("development personas page is reachable and includes seeded patient persona", async ({ page }) => {
+  await openDevPersonasPage(page);
+  await assertDevPersonaVisible(page, "U_DEV_PAT_MATCH");
+  await expect(page.getByRole("button", { name: "以此身分進入" }).first()).toBeVisible();
+});
diff --git a/apps/frontend/e2e/support/dev-persona.ts b/apps/frontend/e2e/support/dev-persona.ts
new file mode 100644
index 0000000..866d4e8
--- /dev/null
+++ b/apps/frontend/e2e/support/dev-persona.ts
@@ -0,0 +1,11 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function openDevPersonasPage(page: Page): Promise<void> {
+  await page.goto("/dev/personas");
+  await page.waitForURL(/\/dev\/personas(?:\?.*)?$/);
+  await expect(page.getByRole("heading", { name: "本機測試身分" })).toBeVisible();
+}
+
+export async function assertDevPersonaVisible(page: Page, personaId: string): Promise<void> {
+  await expect(page.getByText(personaId)).toBeVisible();
+}
diff --git a/apps/frontend/eslint.config.mjs b/apps/frontend/eslint.config.mjs
index 43f553a..886372b 100644
--- a/apps/frontend/eslint.config.mjs
+++ b/apps/frontend/eslint.config.mjs
@@ -12,6 +12,9 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "coverage/**",
+    "test-results/**",
+    "playwright-report/**",
+    "e2e-artifacts/**",
     "next-env.d.ts",
   ]),
 ]);
diff --git a/apps/frontend/jest.config.js b/apps/frontend/jest.config.js
index 63346be..beca95c 100644
--- a/apps/frontend/jest.config.js
+++ b/apps/frontend/jest.config.js
@@ -14,7 +14,7 @@ const config = {
   },
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   testEnvironment: "jsdom",
-  testPathIgnorePatterns: ["/node_modules/", "/.next/"],
+  testPathIgnorePatterns: ["/node_modules/", "/.next/", "/e2e/"],
 };
 
 module.exports = createJestConfig(config);
diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
index ea73dbd..757243d 100644
--- a/apps/frontend/package-lock.json
+++ b/apps/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "sonner": "^2.0.7"
       },
       "devDependencies": {
+        "@playwright/test": "^1.62.1",
         "@tailwindcss/postcss": "^4",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
@@ -2168,6 +2169,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+      "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -8776,6 +8793,52 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 9b599fd..bf94814 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -8,7 +8,9 @@
     "start": "next start",
     "lint": "eslint",
     "test:unit": "jest",
-    "test:unit:watch": "jest --watch"
+    "test:unit:watch": "jest --watch",
+    "test:e2e": "playwright test",
+    "test:e2e:demo": "playwright test --project=chromium"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -26,6 +28,7 @@
     "sonner": "^2.0.7"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@tailwindcss/postcss": "^4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
diff --git a/apps/frontend/playwright.config.ts b/apps/frontend/playwright.config.ts
new file mode 100644
index 0000000..2f05de7
--- /dev/null
+++ b/apps/frontend/playwright.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  outputDir: "./test-results",
+  fullyParallel: false,
+  reporter: [["list"], ["html", { outputFolder: "playwright-report", open: "never" }]],
+  webServer: {
+    command: "npm run dev -- --hostname 127.0.0.1 --port 3000",
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: true,
+  },
+  use: {
+    baseURL: process.env.E2E_BASE_URL ?? "http://127.0.0.1:3000",
+    trace: "on",
+    video: "on",
+    screenshot: "only-on-failure",
+    viewport: { width: 390, height: 844 },
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+});
diff --git a/docs/e2e-contracts/README.md b/docs/e2e-contracts/README.md
new file mode 100644
index 0000000..b229842
--- /dev/null
+++ b/docs/e2e-contracts/README.md
@@ -0,0 +1,7 @@
+# E2E acceptance contracts
+
+Create one contract per `/report-with-demo` invocation at `docs/e2e-contracts/<feature-slug>.md`.
+
+Contracts and feature test source are committed with the feature. Generated videos, traces, screenshots, Playwright reports, and test results are local artifacts and must not be committed.
+
+Use only local development personas and synthetic seed data. Never record a production host, a real LINE account, a patient record, a secret, or a token.
diff --git a/docs/superpowers/plans/2026-08-08-report-with-demo-implementation.md b/docs/superpowers/plans/2026-08-08-report-with-demo-implementation.md
new file mode 100644
index 0000000..dd464a4
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-08-report-with-demo-implementation.md
@@ -0,0 +1,289 @@
+# Report With Demo Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an explicit `/report-with-demo` project skill and the minimal Playwright harness needed to create deterministic, recorded E2E acceptance evidence for future browser features.
+
+**Architecture:** The project skill writes a durable E2E contract before modifying feature code, then derives a feature-specific Playwright scenario from that contract. A generic frontend Playwright configuration records video, traces, and failure screenshots into ignored local artifact directories. The skill owns the workflow; individual feature tests own their personas, seed/reset calls, and assertions.
+
+**Tech Stack:** Cursor Agent Skills, Next.js development server, Playwright Chromium, existing development personas, FastAPI local development environment.
+
+## Global Constraints
+
+- The skill is invoked explicitly as `/report-with-demo`; it must not run automatically.
+- Never use production, real patient data, real LINE accounts, secrets, or external production services.
+- Use deterministic development personas and data; tests must not use CSS classes, `nth-child`, or fragile text concatenation as selectors.
+- Record a `.webm` video and Playwright trace only after the contract's assertions pass.
+- Limit diagnose/fix/rerun loops to three attempts; stop for product ambiguity or non-transient environmental blockers.
+- Do not add E2E execution to CI in this change.
+- Do not commit, push, or deploy as part of the skill workflow.
+
+---
+
+## File Structure
+
+| File | Responsibility |
+| --- | --- |
+| `.cursor/skills/report-with-demo/SKILL.md` | Explicit slash-command workflow from contract through bounded recorded verification and handoff. |
+| `.cursor/skills/report-with-demo/contract-template.md` | Required durable contract structure for every invocation. |
+| `apps/frontend/playwright.config.ts` | Local Chromium project, base URL, video/trace/screenshot artifact policy, and test discovery. |
+| `apps/frontend/e2e/support/dev-persona.ts` | Reusable helper that opens a deterministic existing dev persona without real LIFF. |
+| `apps/frontend/e2e/example-contract.spec.ts` | Non-production example that proves the test harness can record a simple dev-persona navigation; future feature scenarios replace it with contract-specific assertions. |
+| `apps/frontend/package.json` | Explicit Playwright dependency and `test:e2e` / `test:e2e:demo` scripts. |
+| `apps/frontend/.gitignore` | Ignore Playwright reports, traces, videos, screenshots, and test results. |
+| `docs/e2e-contracts/README.md` | Explains contract naming, data-safety requirements, and artifact linking. |
+
+### Task 1: Add the explicit acceptance-and-demo skill
+
+**Files:**
+- Create: `.cursor/skills/report-with-demo/SKILL.md`
+- Create: `.cursor/skills/report-with-demo/contract-template.md`
+- Create: `docs/e2e-contracts/README.md`
+- Test: `.cursor/skills/report-with-demo/SKILL.md`
+
+**Interfaces:**
+- Consumes: an explicit user invocation in the form `/report-with-demo <feature request>`.
+- Produces: `docs/e2e-contracts/<feature-slug>.md`, a feature-local Playwright scenario, and local artifact paths.
+
+- [ ] **Step 1: Write the contract template**
+
+Create `.cursor/skills/report-with-demo/contract-template.md` with these required sections:
+
+```markdown
+# <Feature> E2E acceptance contract
+
+## Outcome
+## Non-goals
+## Environment and safety
+- Persona:
+- Seed/reset command or fixture:
+- Browser viewport:
+- Prohibited data/services:
+
+## Scenario
+| Step | Given / When / Then | Visible assertion |
+| --- | --- | --- |
+
+## Demo evidence
+- Video:
+- Trace:
+- Failure screenshots:
+
+## Known limitations
+```
+
+- [ ] **Step 2: Write the skill workflow**
+
+Create `.cursor/skills/report-with-demo/SKILL.md` with frontmatter:
+
+```markdown
+---
+name: report-with-demo
+description: Defines a durable E2E acceptance contract before implementing a browser feature, then runs a deterministic Playwright scenario and records demo video, trace, and failure evidence. Use only when explicitly invoked as /report-with-demo.
+disable-model-invocation: true
+---
+```
+
+Require this exact execution order:
+
+1. Inspect relevant routes, APIs, auth mode, tests, and development personas.
+2. Save the completed contract under `docs/e2e-contracts/`.
+3. Ask one question only if a material acceptance decision is ambiguous; otherwise state the contract and begin implementation.
+4. Implement the requested scope and add only the semantic or `data-testid` selectors required by the contract.
+5. Write a feature-specific Playwright scenario that uses deterministic development data and the contract's exact assertions.
+6. Run the scenario with video and trace enabled.
+7. On failure, inspect artifacts, classify the failure, apply the smallest repair, and retry at most three total attempts.
+8. On success, report contract, command, video, trace, screenshots, limitations, and wait for user feedback.
+9. On final failure, report the failed step, diagnosis, attempt history, artifacts, and smallest blocker; do not claim success.
+
+Include a failure-class table matching the design specification: contract assertion failure, fixture/harness failure, transient/unavailable service, and ambiguous product behavior.
+
+- [ ] **Step 3: Document durable contract conventions**
+
+Create `docs/e2e-contracts/README.md`:
+
+```markdown
+# E2E acceptance contracts
+
+Create one contract per `/report-with-demo` invocation at `<feature-slug>.md`.
+Contracts and feature test source are committed with the feature. Generated videos,
+traces, screenshots, Playwright reports, and test results are local artifacts and
+must not be committed.
+
+Use only local development personas and synthetic seed data. Never record a
+production host, a real LINE account, a patient record, a secret, or a token.
+```
+
+- [ ] **Step 4: Verify skill structure**
+
+Run:
+
+```bash
+test -s .cursor/skills/report-with-demo/SKILL.md
+test -s .cursor/skills/report-with-demo/contract-template.md
+test -s docs/e2e-contracts/README.md
+```
+
+Expected: all commands exit `0`.
+
+### Task 2: Add the local Playwright recording harness
+
+**Files:**
+- Modify: `apps/frontend/package.json`
+- Create: `apps/frontend/playwright.config.ts`
+- Modify: `apps/frontend/.gitignore`
+- Create: `apps/frontend/e2e/support/dev-persona.ts`
+- Create: `apps/frontend/e2e/example-contract.spec.ts`
+- Test: `apps/frontend/e2e/example-contract.spec.ts`
+
+**Interfaces:**
+- Consumes: `NEXT_PUBLIC_LIFF_ID` unset, local frontend at `http://127.0.0.1:3000`, and seeded development personas.
+- Produces: `apps/frontend/test-results/`, `apps/frontend/playwright-report/`, and `apps/frontend/e2e-artifacts/` local-only evidence.
+- Exports: `openDevPersona(page: Page, personaId: string, expectedPath: string): Promise<void>`.
+
+- [ ] **Step 1: Add Playwright and scripts**
+
+From `apps/frontend`, add the current `@playwright/test` development dependency with `npx`, then add:
+
+```json
+"test:e2e": "playwright test",
+"test:e2e:demo": "playwright test --project=chromium"
+```
+
+Run:
+
+```bash
+npx playwright install chromium
+```
+
+Expected: Chromium browser installation completes successfully.
+
+- [ ] **Step 2: Write the deterministic Playwright configuration**
+
+Create `apps/frontend/playwright.config.ts`:
+
+```ts
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  outputDir: "./test-results",
+  fullyParallel: false,
+  reporter: [["list"], ["html", { outputFolder: "playwright-report", open: "never" }]],
+  use: {
+    baseURL: process.env.E2E_BASE_URL ?? "http://127.0.0.1:3000",
+    trace: "on",
+    video: "on",
+    screenshot: "only-on-failure",
+    viewport: { width: 390, height: 844 },
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+});
+```
+
+- [ ] **Step 3: Write a reusable development-persona helper**
+
+Create `apps/frontend/e2e/support/dev-persona.ts`:
+
+```ts
+import { expect, type Page } from "@playwright/test";
+
+export async function openDevPersona(page: Page, personaId: string, expectedPath: string): Promise<void> {
+  await page.goto(`/login?next=${encodeURIComponent(expectedPath)}&dev_line_user_id=${encodeURIComponent(personaId)}`);
+  await page.waitForURL(new RegExp(`${expectedPath.replace("/", "\\/")}(?:\\?.*)?$`));
+  await expect(page).toHaveURL(new RegExp(`${expectedPath.replace("/", "\\/")}(?:\\?.*)?$`));
+}
+```
+
+- [ ] **Step 4: Write a recording smoke scenario**
+
+Create `apps/frontend/e2e/example-contract.spec.ts`:
+
+```ts
+import { expect, test } from "@playwright/test";
+import { openDevPersona } from "./support/dev-persona";
+
+test("development patient persona reaches the patient dashboard", async ({ page }) => {
+  await openDevPersona(page, "U_DEV_PAT_MATCH", "/patient");
+  await expect(page.getByRole("main")).toBeVisible();
+});
+```
+
+- [ ] **Step 5: Ignore generated evidence**
+
+Append to `apps/frontend/.gitignore`:
+
+```gitignore
+# Playwright local evidence
+/test-results/
+/playwright-report/
+/e2e-artifacts/
+```
+
+- [ ] **Step 6: Start deterministic local dependencies**
+
+Run in separate terminals:
+
+```bash
+npm run dev:infra
+npm run seed:dev-personas
+npm run dev
+```
+
+Expected: frontend is reachable on `http://127.0.0.1:3000`, backend is reachable on `http://127.0.0.1:8000`, and the seeded `U_DEV_PAT_MATCH` persona exists.
+
+- [ ] **Step 7: Run the recorded scenario**
+
+Run:
+
+```bash
+npm --prefix apps/frontend run test:e2e:demo
+```
+
+Expected: Playwright reports one passed test, and `apps/frontend/test-results/` contains a `.webm` video and `trace.zip`.
+
+### Task 3: Verify documentation, lint, and feature handoff behavior
+
+**Files:**
+- Modify: `.cursor/skills/report-with-demo/SKILL.md`
+- Test: `apps/frontend/e2e/example-contract.spec.ts`
+
+**Interfaces:**
+- Consumes: the Task 1 skill and Task 2 Playwright configuration.
+- Produces: a verified documented workflow that does not overstate success when only an artifact exists.
+
+- [ ] **Step 1: Run focused frontend lint**
+
+Run:
+
+```bash
+npm --prefix apps/frontend run lint
+```
+
+Expected: exit `0` with no errors in `playwright.config.ts` or `e2e/`.
+
+- [ ] **Step 2: Verify recorded artifact policy**
+
+Run:
+
+```bash
+git check-ignore apps/frontend/test-results/example-contract-development-patient-persona-reaches-the-patient-dashboard-chromium/video.webm
+git check-ignore apps/frontend/playwright-report/index.html
+```
+
+Expected: both paths are reported as ignored.
+
+- [ ] **Step 3: Perform the skill dry-run review**
+
+Read `.cursor/skills/report-with-demo/SKILL.md` and confirm it contains all of:
+
+```text
+docs/e2e-contracts/
+at most three
+video
+trace
+real LINE
+wait for user feedback
+```
+
+Expected: every required phrase is present and the skill never authorizes automatic commit, push, deployment, production access, or unbounded retries.
diff --git a/docs/superpowers/specs/2026-08-08-report-with-demo-design.md b/docs/superpowers/specs/2026-08-08-report-with-demo-design.md
new file mode 100644
index 0000000..13a08e8
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-08-report-with-demo-design.md
@@ -0,0 +1,115 @@
+# `/report-with-demo` skill design
+
+## Goal
+
+Create a PD Care project skill invoked as `/report-with-demo <feature request>`. It turns the requested feature into a recorded, testable E2E acceptance contract before implementation, then delivers a reproducible demo video and diagnostic artifacts after implementation.
+
+## Scope
+
+- Project skill location: `.cursor/skills/report-with-demo/`.
+- The skill is explicit-invocation only; it does not run for every feature automatically.
+- It applies to feature work that has a user-observable browser flow.
+- It uses development-only personas and synthetic data. It must never record production, real patient data, real LINE accounts, secrets, or external production services.
+- It does not commit, push, deploy, or widen the requested feature scope.
+
+## Workflow
+
+### 1. Define the acceptance contract before editing application code
+
+The skill inspects the relevant route, API, auth mode, existing tests, and available development personas. It saves an acceptance contract at:
+
+`docs/e2e-contracts/<feature-slug>.md`
+
+The contract records:
+
+- user outcome and explicit non-goals;
+- persona, seed data, and test environment;
+- Given/When/Then steps;
+- a visible assertion after every important action;
+- the required successful final state for the demo;
+- intended viewport(s);
+- expected video, trace, and screenshot artifact names;
+- known limitations and dependencies.
+
+If a material product decision is ambiguous, the skill asks one focused question before implementation. Otherwise it states the contract and continues.
+
+### 2. Implement only the contract
+
+The implementation must include stable semantic selectors or `data-testid` attributes only where the E2E flow needs them. It must not use CSS layout classes or text concatenation as test selectors.
+
+The E2E scenario uses deterministic development fixtures:
+
+- existing dev personas or a documented equivalent;
+- isolated seed/reset data;
+- no real LINE login;
+- predictable inference, storage, and notification behavior where required.
+
+### 3. Verify and record
+
+The skill uses Playwright as the primary E2E runner. The scenario records:
+
+- a `.webm` video of the full successful flow;
+- a Playwright trace;
+- screenshots on failure;
+- console and network evidence when a failure needs diagnosis.
+
+Browser MCP may be used for interactive discovery, accessibility snapshots, screenshots, and smoke verification. It is not evidence of a completed demo because it cannot produce the required video artifact.
+
+### 4. Bounded repair loop
+
+The skill runs the scenario, diagnoses failures from artifacts, applies the smallest correct repair, and reruns it at most three times.
+
+It classifies every failure before changing code:
+
+| Failure class | Response |
+| --- | --- |
+| Contract assertion fails | Repair implementation or contract-derived test setup, then rerun. |
+| Test harness/fixture failure | Repair deterministic development setup, then rerun. |
+| Environment/service unavailable | Retry only when a transient recovery is plausible; otherwise stop and report the blocker. |
+| Ambiguous product behavior | Stop and ask the user; do not guess. |
+
+The skill must not treat a video file alone as success. Success requires the recorded scenario's assertions to pass.
+
+### 5. Handoff
+
+On success, the final response contains:
+
+- acceptance contract path;
+- changed files summary;
+- E2E command and pass result;
+- video, trace, and screenshot artifact paths;
+- any intentional deviations or limitations;
+- an explicit request for user feedback.
+
+On failure after three attempts, the final response contains:
+
+- the acceptance step that failed;
+- diagnosis and attempt history;
+- artifact paths;
+- the smallest concrete blocker or user decision needed.
+
+## Playwright bootstrap
+
+This repository does not currently have a first-class Playwright configuration or E2E script. The first use of the skill must add the minimal local Playwright harness:
+
+- explicit Playwright development dependency under `apps/frontend`;
+- a Playwright configuration that stores artifacts outside source directories;
+- an E2E script;
+- a deterministic dev server launch strategy;
+- one initial golden journey for the feature invoked with the skill.
+
+The bootstrap is part of feature delivery only when the requested feature has a browser flow. It must not enable E2E in CI until a follow-up decision defines runtime, service fixtures, artifact retention, and cost.
+
+## Non-goals
+
+- Full visual-regression coverage.
+- Recording a demo from a live or production deployment.
+- Testing every invalid input in a browser; unit and API tests remain responsible for most branch coverage.
+- Automatic product decisions, database destruction, data mutations outside development fixtures, or unbounded retry loops.
+
+## Success criteria
+
+1. A new `/report-with-demo` invocation writes a durable, reviewable contract before feature implementation.
+2. A successful browser feature delivery includes a passed Playwright scenario, a video, and a trace tied to that contract.
+3. Failures are diagnosed with artifacts and stop after three repair attempts rather than silently passing or looping indefinitely.
+4. The workflow does not expose patient data or rely on real LINE authentication.

From 9dad204b09e236e831a139141bada2112d864489 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:09:40 +0800
Subject: [PATCH 05/10] feat(ops): add minikube reboot recovery automation
 runbook

Document and ship a systemd-driven recovery path that brings minikube, ingress bridge, and dependent workloads back in order after host reboot incidents. This reduces manual recovery steps and gives operators a repeatable health-gated startup sequence.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/deploy/k8s-minikube.md                   |  42 +++-
 ...-minikube-volume-migration-and-recovery.md |  20 ++
 ops/deploy/recover-minikube-and-bridge.sh     | 228 ++++++++++++++++++
 .../pd-care-minikube-recover.service.example  |  18 ++
 4 files changed, 307 insertions(+), 1 deletion(-)
 create mode 100755 ops/deploy/recover-minikube-and-bridge.sh
 create mode 100644 ops/systemd/pd-care-minikube-recover.service.example

diff --git a/docs/deploy/k8s-minikube.md b/docs/deploy/k8s-minikube.md
index 4c7ffbd..f658196 100644
--- a/docs/deploy/k8s-minikube.md
+++ b/docs/deploy/k8s-minikube.md
@@ -427,7 +427,47 @@ Deferred work: [`backlog/`](../backlog/README.md) (K8s cutover →
 [`k8s-infrastructure.md`](../backlog/k8s-infrastructure.md); platform →
 [`platform-gitops.md`](../backlog/platform-gitops.md)).
 
-## 10) Troubleshooting
+## 10) Optional host reboot auto-recovery (systemd)
+
+Use this if you want Minikube and ingress bridge to recover automatically after host reboot.
+
+1. Install the service unit:
+
+   ```bash
+   sudo cp ops/systemd/pd-care-minikube-recover.service.example /etc/systemd/system/pd-care-minikube-recover.service
+   sudo systemctl daemon-reload
+   ```
+
+2. Enable and start:
+
+   ```bash
+   sudo systemctl enable --now pd-care-minikube-recover.service
+   ```
+
+3. Verify:
+
+   ```bash
+   sudo systemctl status pd-care-minikube-recover.service --no-pager
+   journalctl -u pd-care-minikube-recover.service -b --no-pager
+   minikube status -p minikube
+   kubectl get nodes
+   docker compose -f docker-compose.ingress-bridge.yml ps
+   ```
+
+Service behavior:
+
+- Runs [`ops/deploy/recover-minikube-and-bridge.sh`](../../ops/deploy/recover-minikube-and-bridge.sh)
+- Starts `minikube` profile, waits for API/node readiness, refreshes ingress bridge NodePort/IP mapping
+- Tries to recover `pd-care-dev` and `pd-care-prod` workloads in dependency order (`postgres` → SeaweedFS deployments → `backend`/`frontend`)
+- Fails fast on health probe errors (`/api/healthz`, `/api/readyz`) so systemd logs show a clear incident
+
+Disable if needed:
+
+```bash
+sudo systemctl disable --now pd-care-minikube-recover.service
+```
+
+## 11) Troubleshooting
 
 Host reboot, disk-full `minikube start`, bind-mount moves of the `minikube` volume, or a wiped `/etc/kubernetes` after `docker rm minikube`: see [`../ops/k8s-minikube-volume-migration-and-recovery.md`](../ops/k8s-minikube-volume-migration-and-recovery.md) and the [k8s-minikube-recovery](../../.cursor/skills/k8s-minikube-recovery/SKILL.md) skill.
 
diff --git a/docs/ops/k8s-minikube-volume-migration-and-recovery.md b/docs/ops/k8s-minikube-volume-migration-and-recovery.md
index 8d2a294..537c6cb 100644
--- a/docs/ops/k8s-minikube-volume-migration-and-recovery.md
+++ b/docs/ops/k8s-minikube-volume-migration-and-recovery.md
@@ -52,6 +52,26 @@ Canonical day-to-day deploy flow remains [`../deploy/k8s-minikube.md`](../deploy
 
 If start fails on disk space, free reclaimable Docker build cache / unused images **without** pruning volumes that hold pd-care or `minikube` data, or proceed to section B.
 
+### Optional automation for section A
+
+If host reboot recovery should be automatic, use the systemd unit template in the repo:
+
+```bash
+sudo cp ops/systemd/pd-care-minikube-recover.service.example /etc/systemd/system/pd-care-minikube-recover.service
+sudo systemctl daemon-reload
+sudo systemctl enable --now pd-care-minikube-recover.service
+```
+
+The unit runs [`ops/deploy/recover-minikube-and-bridge.sh`](../../ops/deploy/recover-minikube-and-bridge.sh), which starts Minikube, refreshes ingress bridge NodePorts/IP, recovers workloads in dependency order (`postgres` → SeaweedFS → app deployments), and checks public health endpoints.
+
+For incidents, inspect:
+
+```bash
+journalctl -u pd-care-minikube-recover.service -b --no-pager
+minikube status -p minikube
+docker compose -f docker-compose.ingress-bridge.yml ps
+```
+
 ## B) Move pd-care volumes to a larger filesystem (bind mounts)
 
 Goal: keep the **system** Docker `data-root` unchanged; relocate only pd-care-related named volumes onto a large mount.
diff --git a/ops/deploy/recover-minikube-and-bridge.sh b/ops/deploy/recover-minikube-and-bridge.sh
new file mode 100755
index 0000000..21b78d4
--- /dev/null
+++ b/ops/deploy/recover-minikube-and-bridge.sh
@@ -0,0 +1,228 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+cd "${ROOT_DIR}"
+
+PROFILE="${MINIKUBE_PROFILE:-minikube}"
+KUBE_CONTEXT="${KUBE_CONTEXT:-${PROFILE}}"
+NODE_NAME="${MINIKUBE_NODE_NAME:-minikube}"
+BRIDGE_COMPOSE_FILE="${BRIDGE_COMPOSE_FILE:-docker-compose.ingress-bridge.yml}"
+INGRESS_NAMESPACE="${INGRESS_NAMESPACE:-ingress-nginx}"
+INGRESS_SERVICE="${INGRESS_SERVICE:-ingress-nginx-controller}"
+
+DEV_HEALTH_URL="${DEV_HEALTH_URL:-https://test.pd.lu.im.ntu.edu.tw/api/healthz}"
+PROD_READY_URL="${PROD_READY_URL:-https://pd.lu.im.ntu.edu.tw/api/readyz}"
+
+log() {
+  printf '[%s] %s\n' "$(date -Iseconds)" "$*"
+}
+
+deployment_replicas() {
+  local namespace="$1"
+  local deploy="$2"
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get deploy "${deploy}" -o jsonpath='{.spec.replicas}' 2>/dev/null || echo "0"
+}
+
+deployment_ready_replicas() {
+  local namespace="$1"
+  local deploy="$2"
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get deploy "${deploy}" -o jsonpath='{.status.readyReplicas}' 2>/dev/null || echo "0"
+}
+
+statefulset_replicas() {
+  local namespace="$1"
+  local statefulset="$2"
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get statefulset "${statefulset}" -o jsonpath='{.spec.replicas}' 2>/dev/null || echo "0"
+}
+
+statefulset_ready_replicas() {
+  local namespace="$1"
+  local statefulset="$2"
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get statefulset "${statefulset}" -o jsonpath='{.status.readyReplicas}' 2>/dev/null || echo "0"
+}
+
+require_cmd() {
+  command -v "$1" >/dev/null 2>&1 || {
+    log "missing required command: $1"
+    exit 1
+  }
+}
+
+probe_url() {
+  local label="$1"
+  local url="$2"
+  local host="$3"
+  local ingress_ip="$4"
+  local attempts="${HEALTH_RETRIES:-5}"
+  local sleep_seconds="${HEALTH_RETRY_SLEEP_SECONDS:-5}"
+
+  for _ in $(seq 1 "${attempts}"); do
+    if curl -fsS --max-time 10 "${url}" >/dev/null 2>&1; then
+      log "${label}: ok"
+      return 0
+    fi
+
+    if curl -fsSk --max-time 10 --resolve "${host}:443:${ingress_ip}" "${url}" >/dev/null 2>&1; then
+      log "${label}: ok (resolved via ${ingress_ip})"
+      return 0
+    fi
+
+    sleep "${sleep_seconds}"
+  done
+
+  log "${label}: failed after ${attempts} attempts"
+  return 1
+}
+
+delete_stale_pods() {
+  local namespace="$1"
+  local stale_pods
+
+  stale_pods="$(kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get pods --no-headers 2>/dev/null | awk '$3 == "Error" || $3 == "Completed" || $3 == "CrashLoopBackOff" {print $1}')"
+  if [[ -z "${stale_pods}" ]]; then
+    return 0
+  fi
+
+  log "${namespace}: deleting stale pods"
+  while IFS= read -r pod; do
+    [[ -z "${pod}" ]] && continue
+    kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" delete pod "${pod}" --ignore-not-found --wait=false >/dev/null 2>&1 || true
+  done <<< "${stale_pods}"
+}
+
+ensure_statefulset_ready() {
+  local namespace="$1"
+  local statefulset="$2"
+  local timeout="${3:-600s}"
+  local desired ready
+
+  if ! kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get statefulset "${statefulset}" >/dev/null 2>&1; then
+    log "${namespace}/${statefulset}: statefulset not found, skipping"
+    return 0
+  fi
+
+  desired="$(statefulset_replicas "${namespace}" "${statefulset}")"
+  ready="$(statefulset_ready_replicas "${namespace}" "${statefulset}")"
+  if [[ "${ready}" == "${desired}" && "${desired}" != "0" ]]; then
+    log "${namespace}/${statefulset}: already ready (${ready}/${desired})"
+    return 0
+  fi
+
+  log "${namespace}/${statefulset}: not ready (${ready}/${desired}), restarting statefulset"
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" rollout restart "statefulset/${statefulset}" >/dev/null
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" rollout status "statefulset/${statefulset}" --timeout="${timeout}" >/dev/null
+  log "${namespace}/${statefulset}: ready"
+}
+
+ensure_deployment_ready() {
+  local namespace="$1"
+  local deploy="$2"
+  local timeout="${3:-600s}"
+  local desired ready
+
+  if ! kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" get deploy "${deploy}" >/dev/null 2>&1; then
+    log "${namespace}/${deploy}: deployment not found, skipping"
+    return 0
+  fi
+
+  desired="$(deployment_replicas "${namespace}" "${deploy}")"
+  ready="$(deployment_ready_replicas "${namespace}" "${deploy}")"
+  if [[ "${ready}" == "${desired}" && "${desired}" != "0" ]]; then
+    log "${namespace}/${deploy}: already ready (${ready}/${desired})"
+    return 0
+  fi
+
+  log "${namespace}/${deploy}: not ready (${ready}/${desired}), restarting deployment"
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" rollout restart "deploy/${deploy}" >/dev/null
+  kubectl --context "${KUBE_CONTEXT}" -n "${namespace}" rollout status "deploy/${deploy}" --timeout="${timeout}" >/dev/null
+  log "${namespace}/${deploy}: ready"
+}
+
+recover_namespace() {
+  local namespace="$1"
+
+  if ! kubectl --context "${KUBE_CONTEXT}" get namespace "${namespace}" >/dev/null 2>&1; then
+    log "${namespace}: namespace not found, skipping"
+    return 0
+  fi
+
+  log "${namespace}: beginning workload recovery"
+  delete_stale_pods "${namespace}"
+
+  # Stateful dependency first: backend depends on Postgres availability.
+  ensure_statefulset_ready "${namespace}" "postgres" "${POSTGRES_READY_TIMEOUT:-600s}"
+
+  for deploy in seaweedfs-master seaweedfs-volume seaweedfs-filer seaweedfs-s3; do
+    ensure_deployment_ready "${namespace}" "${deploy}" "${STORAGE_READY_TIMEOUT:-600s}"
+  done
+
+  for deploy in backend frontend; do
+    ensure_deployment_ready "${namespace}" "${deploy}" "${APP_READY_TIMEOUT:-600s}"
+  done
+
+  log "${namespace}: workload recovery completed"
+}
+
+require_cmd minikube
+require_cmd kubectl
+require_cmd docker
+require_cmd curl
+
+log "starting minikube profile '${PROFILE}'"
+minikube start -p "${PROFILE}"
+
+log "waiting for kubernetes api access on context '${KUBE_CONTEXT}'"
+api_attempts="${API_RETRIES:-60}"
+api_sleep="${API_RETRY_SLEEP_SECONDS:-5}"
+for _ in $(seq 1 "${api_attempts}"); do
+  if kubectl --context "${KUBE_CONTEXT}" get nodes >/dev/null 2>&1; then
+    break
+  fi
+  sleep "${api_sleep}"
+done
+
+if ! kubectl --context "${KUBE_CONTEXT}" get nodes >/dev/null 2>&1; then
+  log "kubernetes api did not become available in time"
+  exit 1
+fi
+
+log "waiting for node readiness"
+if ! kubectl --context "${KUBE_CONTEXT}" wait --for=condition=Ready "node/${NODE_NAME}" --timeout=300s >/dev/null 2>&1; then
+  ready_nodes="$(kubectl --context "${KUBE_CONTEXT}" get nodes --no-headers 2>/dev/null | awk '$2 == "Ready" {count++} END {print count+0}')"
+  if [[ "${ready_nodes}" -lt 1 ]]; then
+    log "no ready nodes found"
+    exit 1
+  fi
+fi
+
+log "reading ingress nodeports"
+http_nodeport="$(kubectl --context "${KUBE_CONTEXT}" -n "${INGRESS_NAMESPACE}" get svc "${INGRESS_SERVICE}" -o jsonpath='{.spec.ports[?(@.port==80)].nodePort}')"
+https_nodeport="$(kubectl --context "${KUBE_CONTEXT}" -n "${INGRESS_NAMESPACE}" get svc "${INGRESS_SERVICE}" -o jsonpath='{.spec.ports[?(@.port==443)].nodePort}')"
+
+if [[ -z "${http_nodeport}" || -z "${https_nodeport}" ]]; then
+  log "failed to read ingress nodeports from ${INGRESS_NAMESPACE}/${INGRESS_SERVICE}"
+  exit 1
+fi
+
+ingress_ip="$(minikube ip -p "${PROFILE}")"
+if [[ -z "${ingress_ip}" ]]; then
+  log "failed to read minikube ip"
+  exit 1
+fi
+
+log "restarting ingress bridge with MINIKUBE_IP=${ingress_ip}, http=${http_nodeport}, https=${https_nodeport}"
+MINIKUBE_IP="${ingress_ip}" \
+INGRESS_HTTP_NODEPORT="${http_nodeport}" \
+INGRESS_HTTPS_NODEPORT="${https_nodeport}" \
+docker compose -f "${BRIDGE_COMPOSE_FILE}" up -d
+
+log "recovering application workloads in namespaces"
+recover_namespace "pd-care-dev"
+recover_namespace "pd-care-prod"
+
+log "running post-start health probes"
+probe_url "dev healthz" "${DEV_HEALTH_URL}" "test.pd.lu.im.ntu.edu.tw" "${ingress_ip}"
+probe_url "prod readyz" "${PROD_READY_URL}" "pd.lu.im.ntu.edu.tw" "${ingress_ip}"
+
+log "minikube and ingress bridge recovery completed"
diff --git a/ops/systemd/pd-care-minikube-recover.service.example b/ops/systemd/pd-care-minikube-recover.service.example
new file mode 100644
index 0000000..81ea46e
--- /dev/null
+++ b/ops/systemd/pd-care-minikube-recover.service.example
@@ -0,0 +1,18 @@
+[Unit]
+Description=PD Care Minikube and ingress bridge recovery
+Wants=network-online.target docker.service
+After=network-online.target docker.service
+StartLimitIntervalSec=300
+StartLimitBurst=3
+
+[Service]
+Type=oneshot
+WorkingDirectory=/home/ruby0322/pd-care
+Environment=MINIKUBE_PROFILE=minikube
+ExecStart=/home/ruby0322/pd-care/ops/deploy/recover-minikube-and-bridge.sh
+TimeoutStartSec=900
+Restart=on-failure
+RestartSec=30
+
+[Install]
+WantedBy=multi-user.target

From 4723b26f23530512fdb8a44157090bc15f6289e8 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:39:43 +0800
Subject: [PATCH 06/10] fix(migrations): preserve legacy annotation reviewer
 identity

Require migrated annotations to retain a valid reviewer identity instead of assigning an arbitrary account. This keeps the schema aligned with the non-null model contract and prevents audit attribution from being fabricated.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 ...260809_06_fix_legacy_annotations_schema.py | 81 ++++++++-----------
 1 file changed, 32 insertions(+), 49 deletions(-)

diff --git a/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py b/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py
index bfddb9f..7efff04 100644
--- a/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py
+++ b/apps/backend/migrations/versions/20260809_06_fix_legacy_annotations_schema.py
@@ -41,74 +41,57 @@ def upgrade() -> None:
 
     bind = op.get_bind()
 
-    fallback_reviewer_identity_id = bind.execute(
+    unresolved_rows = bind.execute(
         sa.text(
             """
-            SELECT id
-            FROM liff_identities
-            WHERE role IN ('staff', 'admin')
-            ORDER BY id
-            LIMIT 1
+            SELECT COUNT(*)
+            FROM annotations
+            WHERE reviewer_identity_id IS NULL
+              AND NOT EXISTS (
+                SELECT 1
+                FROM liff_identities
+                WHERE liff_identities.id = annotations.staff_user_id
+              )
             """
         )
     ).scalar()
-    if fallback_reviewer_identity_id is None:
-        fallback_reviewer_identity_id = bind.execute(
-            sa.text(
-                """
-                SELECT id
-                FROM liff_identities
-                ORDER BY id
-                LIMIT 1
-                """
-            )
-        ).scalar()
+    if unresolved_rows and int(unresolved_rows) > 0:
+        raise RuntimeError(
+            "Cannot migrate annotations rows with NULL reviewer_identity_id "
+            "and unmatched staff_user_id in liff_identities."
+        )
 
     op.create_table(
         "annotations_v2",
         sa.Column("id", sa.Integer(), primary_key=True, autoincrement=True),
         sa.Column("patient_id", sa.Integer(), sa.ForeignKey("patients.id", ondelete="CASCADE"), nullable=False),
         sa.Column("upload_id", sa.Integer(), sa.ForeignKey("uploads.id", ondelete="CASCADE"), nullable=False),
-        sa.Column("reviewer_identity_id", sa.Integer(), sa.ForeignKey("liff_identities.id", ondelete="CASCADE"), nullable=True),
+        sa.Column("reviewer_identity_id", sa.Integer(), sa.ForeignKey("liff_identities.id", ondelete="CASCADE"), nullable=False),
         sa.Column("label", sa.String(length=64), nullable=False),
         sa.Column("comment", sa.Text(), nullable=True),
         sa.Column("patient_read_at", sa.DateTime(timezone=True), nullable=True),
         sa.Column("created_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.func.now()),
     )
 
-    if fallback_reviewer_identity_id is None:
-        op.execute(
-            sa.text(
-                """
-                INSERT INTO annotations_v2 (
-                    id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
-                )
-                SELECT
-                    id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
-                FROM annotations
-                """
+    op.execute(
+        sa.text(
+            """
+            INSERT INTO annotations_v2 (
+                id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
             )
+            SELECT
+                id,
+                patient_id,
+                upload_id,
+                COALESCE(reviewer_identity_id, staff_user_id),
+                label,
+                comment,
+                patient_read_at,
+                created_at
+            FROM annotations
+            """
         )
-    else:
-        op.execute(
-            sa.text(
-                """
-                INSERT INTO annotations_v2 (
-                    id, patient_id, upload_id, reviewer_identity_id, label, comment, patient_read_at, created_at
-                )
-                SELECT
-                    id,
-                    patient_id,
-                    upload_id,
-                    COALESCE(reviewer_identity_id, :fallback_reviewer_identity_id),
-                    label,
-                    comment,
-                    patient_read_at,
-                    created_at
-                FROM annotations
-                """
-            ).bindparams(fallback_reviewer_identity_id=int(fallback_reviewer_identity_id))
-        )
+    )
 
     op.drop_table("annotations")
     op.rename_table("annotations_v2", "annotations")

From 191602311cd6fb67d47d62e218a329ed0d4d3249 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:39:56 +0800
Subject: [PATCH 07/10] fix(staff-review): align rejected and symptom copy

Use one nursing-facing vocabulary for rejected images and absent symptom reports, while removing an obsolete suggested-verdict helper that no longer matches review draft behavior.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../history-upload-review-helpers.ts           | 18 ------------------
 .../admin/review-fast/__tests__/page.test.tsx  |  6 +++---
 apps/frontend/app/admin/review-fast/page.tsx   |  4 +++-
 .../lib/i18n/staff-review-label-mapping.ts     |  2 +-
 4 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/apps/frontend/app/admin/_components/history-upload-review-helpers.ts b/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
index 2aba6c8..ffdb1c2 100644
--- a/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
+++ b/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
@@ -50,21 +50,3 @@ export function historyUploadRiskLabel(upload: StaffHistoryOverviewUploadItem):
   }
   return screeningResultText(upload.screening_result);
 }
-
-export function suggestedHistoryUploadLabel(
-  upload: StaffHistoryOverviewUploadItem
-): StaffAnnotationItem["label"] {
-  if (upload.annotation_label) {
-    return upload.annotation_label;
-  }
-  if (upload.screening_result === "rejected" || upload.screening_result === "technical_error") {
-    return "rejected";
-  }
-  if (upload.symptom_aware_priority === "suspected" || upload.screening_result === "suspected") {
-    return "suspected";
-  }
-  if (upload.screening_result === "normal") {
-    return "normal";
-  }
-  return "rejected";
-}
diff --git a/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx b/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx
index 56d50db..75e7488 100644
--- a/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx
+++ b/apps/frontend/app/admin/review-fast/__tests__/page.test.tsx
@@ -99,12 +99,12 @@ describe("AdminFastReviewPage symptom modal", () => {
     expect(screen.getByText("疼痛")).toBeInTheDocument();
     expect(screen.getByText("膿")).toBeInTheDocument();
     expect(screen.queryByText("分泌物")).not.toBeInTheDocument();
-    expect(screen.queryByText("無症狀")).not.toBeInTheDocument();
+    expect(screen.queryByText("未回報症狀")).not.toBeInTheDocument();
     expect(screen.getByText("AI 判讀結果")).toBeInTheDocument();
     expect(screen.getByText("症狀綜合判定")).toBeInTheDocument();
   });
 
-  test("shows 無症狀 when no symptoms are positive", async () => {
+  test("shows 未回報症狀 when no symptoms are positive", async () => {
     const selectedItem = makeQueueItem({
       screening_result: "normal",
       symptom_pain: false,
@@ -133,7 +133,7 @@ describe("AdminFastReviewPage symptom modal", () => {
     render(<AdminFastReviewPage />);
 
     expect(await screen.findByText("症狀")).toBeInTheDocument();
-    expect(screen.getByText("無症狀")).toBeInTheDocument();
+    expect(screen.getByText("未回報症狀")).toBeInTheDocument();
     expect(screen.queryByText("疼痛")).not.toBeInTheDocument();
     expect(screen.queryByText("分泌物")).not.toBeInTheDocument();
     expect(screen.queryByText("膿")).not.toBeInTheDocument();
diff --git a/apps/frontend/app/admin/review-fast/page.tsx b/apps/frontend/app/admin/review-fast/page.tsx
index 4aa27c0..e453105 100644
--- a/apps/frontend/app/admin/review-fast/page.tsx
+++ b/apps/frontend/app/admin/review-fast/page.tsx
@@ -274,7 +274,9 @@ export default function AdminFastReviewPage() {
                         </span>
                       ))
                     ) : (
-                      <span className="inline-flex rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600">無症狀</span>
+                      <span className="inline-flex rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600">
+                        {STAFF_REVIEW_COPY.noSymptomsReported}
+                      </span>
                     )}
                   </div>
                 </div>
diff --git a/apps/frontend/lib/i18n/staff-review-label-mapping.ts b/apps/frontend/lib/i18n/staff-review-label-mapping.ts
index cf796c6..de46fef 100644
--- a/apps/frontend/lib/i18n/staff-review-label-mapping.ts
+++ b/apps/frontend/lib/i18n/staff-review-label-mapping.ts
@@ -29,7 +29,7 @@ export const STAFF_ANNOTATION_LABEL_TEXT: Record<StaffAnnotationItem["label"], s
   normal: "正常",
   suspected: "疑似感染",
   confirmed_infection: "確認感染",
-  rejected: "上傳不採用",
+  rejected: "影像不採用",
 };
 
 export const STAFF_ANNOTATION_BADGE_CLASS: Record<StaffAnnotationItem["label"], string> = {

From 514dc022c0f9c2b4ff2bd405151c6e161f83f98d Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:40:07 +0800
Subject: [PATCH 08/10] feat(dashboard): clarify review and risk states on
 patient cards

Show every patient card's manual annotation status prominently and separate clinical risk badges from AI confidence. Keep symptom detail out of elevated-risk list cards so the dashboard remains scannable while preserving it in the selected patient preview and review flow.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../today-patient-detail-panel.tsx            |  46 +++++---
 .../admin/_components/today-patient-pool.tsx  |   1 -
 .../_components/today-patient-row.test.tsx    | 105 ++++++++++++++++++
 .../admin/_components/today-patient-row.tsx   |  79 +++++++------
 apps/frontend/app/admin/page.tsx              |   3 +-
 5 files changed, 175 insertions(+), 59 deletions(-)
 create mode 100644 apps/frontend/app/admin/_components/today-patient-row.test.tsx

diff --git a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
index 4eca418..0c58946 100644
--- a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
@@ -8,6 +8,7 @@ import { PersonAvatar } from "@/app/admin/patient-assignment/person-avatar";
 import { PatientDayUploadReviewModal } from "@/app/admin/_components/patient-day-upload-review-modal";
 import { UploadThumb } from "@/app/admin/_components/upload-thumb";
 import type { StaffTodayAttentionPatientItem } from "@/lib/api/staff";
+import { STAFF_REVIEW_COPY, annotationBadgeClass, annotationLabelTextOrUnmarked } from "@/lib/i18n/staff-review-label-mapping";
 import { activeSymptomLabels } from "@/lib/symptoms";
 import { cn } from "@/lib/utils";
 
@@ -15,7 +16,6 @@ type TodayPatientDetailPanelProps = {
   item: StaffTodayAttentionPatientItem | null;
   selectedDate: string;
   dayScopeLabel: string;
-  isTodaySelected: boolean;
   className?: string;
   onReviewSaved?: () => void;
   imageUrlByUploadId?: Record<number, string>;
@@ -32,13 +32,16 @@ function tierLabel(tier: StaffTodayAttentionPatientItem["tier"]): { text: string
   return { text: "一般", className: "bg-zinc-100 text-zinc-600" };
 }
 
-function statusLabel(item: StaffTodayAttentionPatientItem, isTodaySelected: boolean): {
+function statusLabel(item: StaffTodayAttentionPatientItem): {
   text: string;
   className: string;
 } {
   if (item.tier === "other") {
+    if (item.has_annotation) {
+      return { text: STAFF_REVIEW_COPY.annotated, className: "text-emerald-600" };
+    }
     return {
-      text: isTodaySelected ? "今日已上傳" : "當日已上傳",
+      text: STAFF_REVIEW_COPY.unmarked,
       className: "text-zinc-500",
     };
   }
@@ -83,7 +86,6 @@ export function TodayPatientDetailPanel({
   item,
   selectedDate,
   dayScopeLabel,
-  isTodaySelected,
   className,
   onReviewSaved,
   imageUrlByUploadId = {},
@@ -107,7 +109,7 @@ export function TodayPatientDetailPanel({
 
   const name = item.full_name || item.case_number;
   const tier = tierLabel(item.tier);
-  const status = statusLabel(item, isTodaySelected);
+  const status = statusLabel(item);
   const highlight = item.risk_highlight;
   const uploadIds = collectUploadIds(item);
   const overflow = Math.max(0, item.day_upload_count - uploadIds.length);
@@ -131,7 +133,15 @@ export function TodayPatientDetailPanel({
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
             <h2 className="truncate text-sm font-semibold text-zinc-900">{name}</h2>
-            <span className={cn("rounded-full px-2 py-0.5 text-[10px] font-medium", tier.className)}>
+            <span
+              className={cn(
+                "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium leading-none",
+                annotationBadgeClass(item.annotation_label)
+              )}
+            >
+              {annotationLabelTextOrUnmarked(item.annotation_label)}
+            </span>
+            <span className={cn("inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium leading-none", tier.className)}>
               {tier.text}
             </span>
           </div>
@@ -147,15 +157,21 @@ export function TodayPatientDetailPanel({
       {highlight ? (
         <div className="mt-3 rounded-lg bg-zinc-50 p-3 ring-1 ring-zinc-200">
           <p className="text-[10px] font-medium uppercase tracking-wide text-zinc-400">最高風險上傳</p>
-          <p className="mt-1 text-xs text-zinc-700">
-            {highlight.screening_result === "suspected"
-              ? `疑似感染${
-                  highlight.probability != null ? ` · AI ${Math.round(highlight.probability * 100)}%` : ""
-                }`
-              : "症狀高風險"}
-            <span className="mx-1 text-zinc-300">·</span>
-            {formatTime(highlight.created_at)}
-          </p>
+          <div className="mt-1 flex items-center gap-1.5">
+            <span
+              className={cn(
+                "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium leading-none",
+                highlight.screening_result === "suspected" ? "bg-red-50 text-red-700" : "bg-amber-50 text-amber-800"
+              )}
+            >
+              {highlight.screening_result === "suspected" ? "疑似感染" : "症狀高風險"}
+            </span>
+            {highlight.screening_result === "suspected" && highlight.probability != null ? (
+              <span className="text-xs font-medium text-zinc-700">AI {Math.round(highlight.probability * 100)}%</span>
+            ) : null}
+            <span className="text-zinc-300">·</span>
+            <span className="text-xs text-zinc-700">{formatTime(highlight.created_at)}</span>
+          </div>
           {symptomLine ? <p className="mt-1 text-[11px] text-zinc-500">{symptomLine}</p> : null}
         </div>
       ) : null}
diff --git a/apps/frontend/app/admin/_components/today-patient-pool.tsx b/apps/frontend/app/admin/_components/today-patient-pool.tsx
index 33f9d5f..0562b1e 100644
--- a/apps/frontend/app/admin/_components/today-patient-pool.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-pool.tsx
@@ -99,7 +99,6 @@ export function TodayPatientPool({
               <TodayPatientRow
                 key={item.patient_id}
                 item={item}
-                isTodaySelected={isTodaySelected}
                 selected={item.patient_id === selectedPatientId}
                 onSelect={onSelectPatient}
                 imageUrlByUploadId={imageUrlByUploadId}
diff --git a/apps/frontend/app/admin/_components/today-patient-row.test.tsx b/apps/frontend/app/admin/_components/today-patient-row.test.tsx
new file mode 100644
index 0000000..0bfaa64
--- /dev/null
+++ b/apps/frontend/app/admin/_components/today-patient-row.test.tsx
@@ -0,0 +1,105 @@
+import { render, screen } from "@testing-library/react";
+
+import { TodayPatientRow } from "@/app/admin/_components/today-patient-row";
+import type { StaffTodayAttentionPatientItem } from "@/lib/api/staff";
+
+function makePatient(overrides?: Partial<StaffTodayAttentionPatientItem>): StaffTodayAttentionPatientItem {
+  return {
+    patient_id: 1,
+    case_number: "P000001",
+    full_name: "測試病患",
+    tier: "other",
+    representative_upload_id: 101,
+    sort_upload_at: "2026-08-09T00:00:00Z",
+    has_annotation: false,
+    annotation_label: null,
+    picture_url: null,
+    day_upload_count: 2,
+    preview_upload_ids: [],
+    risk_highlight: null,
+    ...overrides,
+  };
+}
+
+test("shows the upload count as 上傳 x 張", () => {
+  render(
+    <TodayPatientRow
+      item={makePatient()}
+      selected={false}
+      onSelect={jest.fn()}
+      imageUrlByUploadId={{}}
+      imageErrorByUploadId={{}}
+    />
+  );
+
+  expect(screen.getByText("上傳 2 張")).toBeInTheDocument();
+  expect(screen.queryByText("當日 2 張上傳")).not.toBeInTheDocument();
+  expect(screen.getByText("未標註")).toBeInTheDocument();
+  expect(screen.queryByText("未註解")).not.toBeInTheDocument();
+  expect(screen.queryByText("未處理")).not.toBeInTheDocument();
+  expect(screen.queryByText("已註解")).not.toBeInTheDocument();
+});
+
+test("shows a risk badge and AI percent for suspected highlights", () => {
+  render(
+    <TodayPatientRow
+      item={makePatient({
+        tier: "suspected",
+        has_annotation: false,
+        risk_highlight: {
+          upload_id: 101,
+          screening_result: "suspected",
+          probability: 0.82,
+          threshold: 0.5,
+          symptom_pain: true,
+          symptom_discharge: false,
+          symptom_pus: false,
+          symptom_cloudy_dialysate: false,
+          has_high_risk_symptoms: true,
+          symptom_aware_priority: "suspected",
+          created_at: "2026-08-09T00:00:00Z",
+        },
+      })}
+      selected={false}
+      onSelect={jest.fn()}
+      imageUrlByUploadId={{}}
+      imageErrorByUploadId={{}}
+    />
+  );
+
+  expect(screen.getByText("疑似感染")).toBeInTheDocument();
+  expect(screen.getByText("AI 82%")).toBeInTheDocument();
+  expect(screen.getByText("未標註")).toBeInTheDocument();
+});
+
+test("hides symptom chips in list card for elevated risk", () => {
+  render(
+    <TodayPatientRow
+      item={makePatient({
+        tier: "elevated",
+        has_annotation: false,
+        risk_highlight: {
+          upload_id: 101,
+          screening_result: "normal",
+          probability: null,
+          threshold: 0.5,
+          symptom_pain: true,
+          symptom_discharge: false,
+          symptom_pus: true,
+          symptom_cloudy_dialysate: false,
+          has_high_risk_symptoms: true,
+          symptom_aware_priority: "suspected",
+          created_at: "2026-08-09T00:00:00Z",
+        },
+      })}
+      selected={false}
+      onSelect={jest.fn()}
+      imageUrlByUploadId={{}}
+      imageErrorByUploadId={{}}
+    />
+  );
+
+  expect(screen.getByText("症狀高風險")).toBeInTheDocument();
+  expect(screen.queryByText("疼痛")).not.toBeInTheDocument();
+  expect(screen.queryByText("膿")).not.toBeInTheDocument();
+});
diff --git a/apps/frontend/app/admin/_components/today-patient-row.tsx b/apps/frontend/app/admin/_components/today-patient-row.tsx
index b499aaf..c559c0e 100644
--- a/apps/frontend/app/admin/_components/today-patient-row.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-row.tsx
@@ -16,34 +16,29 @@ function formatTime(raw: string): string {
   }).format(new Date(raw));
 }
 
-function statusLabel(item: StaffTodayAttentionPatientItem, isTodaySelected: boolean): {
-  text: string;
-  className: string;
-} {
-  if (item.tier === "other") {
-    return {
-      text: isTodaySelected ? "今日已上傳" : "當日已上傳",
-      className: "text-zinc-500",
-    };
-  }
-  if (item.has_annotation) {
-    return { text: "已註解", className: "text-green-600" };
+function riskBadge(highlight: StaffTodayAttentionRiskHighlight): { text: string; className: string } {
+  if (highlight.screening_result === "suspected") {
+    return { text: "疑似感染", className: "bg-red-50 text-red-700" };
   }
-  return { text: "未處理", className: "text-red-600" };
+  return { text: "症狀高風險", className: "bg-amber-50 text-amber-800" };
 }
 
-function riskMainLine(highlight: StaffTodayAttentionRiskHighlight): string {
-  if (highlight.screening_result === "suspected") {
-    const pct =
-      highlight.probability != null ? ` · AI ${Math.round(highlight.probability * 100)}%` : "";
-    return `疑似感染${pct}`;
+function rowAnnotationBadge(item: StaffTodayAttentionPatientItem): {
+  className: string;
+  showRiskDot: boolean;
+} {
+  if (item.has_annotation) {
+    return { className: annotationBadgeClass(item.annotation_label), showRiskDot: false };
   }
-  return "症狀高風險";
+  const isRiskTier = item.tier === "suspected" || item.tier === "elevated";
+  return {
+    className: "bg-zinc-100 text-zinc-700",
+    showRiskDot: isRiskTier,
+  };
 }
 
 type TodayPatientRowProps = {
   item: StaffTodayAttentionPatientItem;
-  isTodaySelected: boolean;
   selected: boolean;
   onSelect: (patientId: number) => void;
   imageUrlByUploadId: Record<number, string>;
@@ -52,16 +47,15 @@ type TodayPatientRowProps = {
 
 export function TodayPatientRow({
   item,
-  isTodaySelected,
   selected,
   onSelect,
   imageUrlByUploadId,
   imageErrorByUploadId,
 }: TodayPatientRowProps) {
   const name = item.full_name || item.case_number;
-  const status = statusLabel(item, isTodaySelected);
   const highlight = item.risk_highlight;
   const isRiskTier = item.tier === "suspected" || item.tier === "elevated";
+  const annotationBadge = rowAnnotationBadge(item);
 
   const symptomLine =
     highlight != null
@@ -82,28 +76,22 @@ export function TodayPatientRow({
       type="button"
       onClick={() => onSelect(item.patient_id)}
       className={cn(
-        "flex w-full flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 text-left transition hover:border-zinc-400",
+        "relative flex w-full flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 text-left transition hover:border-zinc-400",
         selected && "ring-2 ring-zinc-900"
       )}
     >
+      <span
+        className={`absolute right-3 top-3 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${annotationBadge.className}`}
+      >
+        {annotationBadge.showRiskDot ? <span className="h-1.5 w-1.5 rounded-full bg-red-500" aria-hidden /> : null}
+        {annotationLabelTextOrUnmarked(item.annotation_label)}
+      </span>
+
       <div className="flex items-start gap-2.5">
         <PersonAvatar name={name} pictureUrl={item.picture_url} size="lg" />
         <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <p className="truncate text-sm font-semibold text-zinc-900">{name}</p>
-            {item.has_annotation ? (
-              <span
-                className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${annotationBadgeClass(item.annotation_label)}`}
-              >
-                {annotationLabelTextOrUnmarked(item.annotation_label)}
-              </span>
-            ) : null}
-          </div>
-          <p className="mt-0.5 truncate text-xs text-zinc-500">
-            當日 {item.day_upload_count} 張上傳
-            <span className="mx-1 text-zinc-300">·</span>
-            <span className={cn(status.className)}>{status.text}</span>
-          </p>
+          <p className="truncate text-sm font-semibold text-zinc-900">{name}</p>
+          <p className="mt-0.5 truncate text-xs text-zinc-500">上傳 {item.day_upload_count} 張</p>
         </div>
       </div>
 
@@ -116,10 +104,19 @@ export function TodayPatientRow({
               imageError={imageErrorByUploadId[highlight.upload_id]}
             />
           </div>
-          <div className="min-w-0 flex-1 px-2.5 py-1.5">
+          <div className="min-w-0 flex h-full flex-col justify-center px-2.5 py-1.5">
             <p className="text-[10px] text-zinc-400">最高風險 · {formatTime(highlight.created_at)}</p>
-            <p className="truncate text-xs font-medium text-zinc-700">{riskMainLine(highlight)}</p>
-            {symptomLine ? <p className="truncate text-[11px] text-zinc-500">{symptomLine}</p> : null}
+            <div className="mt-0.5 flex items-center gap-1.5">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium leading-none ${riskBadge(highlight).className}`}
+              >
+                {riskBadge(highlight).text}
+              </span>
+              {highlight.screening_result === "suspected" && highlight.probability != null ? (
+                <span className="text-xs font-medium text-zinc-700">AI {Math.round(highlight.probability * 100)}%</span>
+              ) : null}
+            </div>
+            {item.tier !== "elevated" && symptomLine ? <p className="truncate text-[11px] text-zinc-500">{symptomLine}</p> : null}
           </div>
         </div>
       ) : null}
diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
index 02b5232..ae046cb 100644
--- a/apps/frontend/app/admin/page.tsx
+++ b/apps/frontend/app/admin/page.tsx
@@ -31,7 +31,7 @@ function metricsFromWeekDays(weekDays: StaffWorkbenchWeekDayItem[]): Record<stri
 }
 
 function AdminDashboardInner() {
-  const { selectedDate, setSelectedDate, isTodaySelected, dayScopeLabel } = useAdminSelectedDate();
+  const { selectedDate, setSelectedDate, dayScopeLabel } = useAdminSelectedDate();
 
   const [attention, setAttention] = useState<StaffTodayAttentionResponse | null>(null);
   const [loading, setLoading] = useState(true);
@@ -141,7 +141,6 @@ function AdminDashboardInner() {
         otherPatients={attention?.other_patients ?? 0}
         items={attention?.items ?? []}
         dayScopeLabel={dayScopeLabel}
-        isTodaySelected={isTodaySelected}
         selectedDate={selectedDate}
         selectedPatientId={resolvedPatientId}
         onSelectPatient={setSelectedPatientId}

From d18a26fe89529679d70521a5372663cb0ea438b5 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:44:04 +0800
Subject: [PATCH 09/10] fix(dashboard): remove stale detail panel prop

Drop the obsolete isTodaySelected prop from TodayPatientPool now that the detail panel no longer accepts it. This unblocks production builds by keeping the pool and panel interfaces aligned.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/frontend/app/admin/_components/today-patient-pool.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/frontend/app/admin/_components/today-patient-pool.tsx b/apps/frontend/app/admin/_components/today-patient-pool.tsx
index 0562b1e..b1e16d6 100644
--- a/apps/frontend/app/admin/_components/today-patient-pool.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-pool.tsx
@@ -16,7 +16,6 @@ type TodayPatientPoolProps = {
   otherPatients: number;
   items: StaffTodayAttentionPatientItem[];
   dayScopeLabel: string;
-  isTodaySelected: boolean;
   selectedDate: string;
   selectedPatientId: number | null;
   onSelectPatient: (patientId: number) => void;
@@ -53,7 +52,6 @@ export function TodayPatientPool({
   otherPatients,
   items,
   dayScopeLabel,
-  isTodaySelected,
   selectedDate,
   selectedPatientId,
   onSelectPatient,
@@ -113,7 +111,6 @@ export function TodayPatientPool({
         item={selectedItem}
         selectedDate={selectedDate}
         dayScopeLabel={dayScopeLabel}
-        isTodaySelected={isTodaySelected}
         className="w-full shrink-0 lg:sticky lg:top-4 lg:w-[320px] xl:w-[360px]"
         onReviewSaved={onReviewSaved}
         imageUrlByUploadId={imageUrlByUploadId}

From 596eb3b381e10703cb57eab036e3a15c80d0af56 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Sun, 9 Aug 2026 15:50:06 +0800
Subject: [PATCH 10/10] fix(dashboard): align detail annotation status copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use the shared 已標註 and 未標註 labels for every patient tier in the detail subtitle. This prevents high-risk patients from showing a conflicting review-workflow status beside the annotation badge.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../_components/today-patient-detail-panel.tsx      | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
index 0c58946..90bbb72 100644
--- a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
@@ -36,19 +36,10 @@ function statusLabel(item: StaffTodayAttentionPatientItem): {
   text: string;
   className: string;
 } {
-  if (item.tier === "other") {
-    if (item.has_annotation) {
-      return { text: STAFF_REVIEW_COPY.annotated, className: "text-emerald-600" };
-    }
-    return {
-      text: STAFF_REVIEW_COPY.unmarked,
-      className: "text-zinc-500",
-    };
-  }
   if (item.has_annotation) {
-    return { text: "已註解", className: "text-green-600" };
+    return { text: STAFF_REVIEW_COPY.annotated, className: "text-emerald-600" };
   }
-  return { text: "未處理", className: "text-red-600" };
+  return { text: STAFF_REVIEW_COPY.unmarked, className: "text-zinc-500" };
 }
 
 function formatTime(raw: string): string {