fix: show read-only completed screen when opening a finished session

Author: harvenstar

packages/web/src/pages/ApprovalPage.tsx

@@ -30,12 +30,14 @@ export default function ApprovalPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
   const [callbackFailed, setCallbackFailed] = useState(false)
+  const [isCompleted, setIsCompleted] = useState(false)
 
   useEffect(() => {
     fetch(`/api/sessions/${id}`)
       .then(r => r.json())
       .then(data => {
         setPayload(data.payload as ApprovalPayload)
+        if (data.status === 'completed') setIsCompleted(true)
         setLoading(false)
       })
       .catch(() => { setError(true); setLoading(false) })
@@ -79,6 +81,16 @@ export default function ApprovalPage() {
     </div>
   )
 
+  if (isCompleted) return (
+    <div className="min-h-screen bg-gray-50 dark:bg-zinc-950 flex items-center justify-center">
+      <div className="text-center">
+        <p className="text-zinc-700 dark:text-slate-200 font-medium">Session completed.</p>
+        <p className="text-zinc-400 dark:text-slate-500 text-sm mt-1">This approval has already been submitted.</p>
+        <button onClick={() => navigate('/')} className="mt-4 text-sm text-blue-400 hover:text-blue-500 transition-colors">← Back to sessions</button>
+      </div>
+    </div>
+  )
+
   if (submitted) return (
     <div className="min-h-screen bg-gray-50 dark:bg-zinc-950 flex items-center justify-center">
       <div className="text-center">

packages/web/src/pages/CodeReviewPage.tsx

@@ -570,11 +570,16 @@ export default function CodeReviewPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
   const [callbackFailed, setCallbackFailed] = useState(false)
+  const [isCompleted, setIsCompleted] = useState(false)
 
   useEffect(() => {
     fetch(`/api/sessions/${id}`)
       .then(r => r.json())
-      .then(data => { setPayload(data.payload as CodePayload); setLoading(false) })
+      .then(data => {
+        setPayload(data.payload as CodePayload)
+        if (data.status === 'completed') setIsCompleted(true)
+        setLoading(false)
+      })
       .catch(() => { setError(true); setLoading(false) })
   }, [id])
 
@@ -619,6 +624,16 @@ export default function CodeReviewPage() {
       <p className="text-red-400">Session not found.</p>
     </div>
   )
+  if (isCompleted) return (
+    <div className="min-h-screen bg-gray-50 dark:bg-zinc-950 flex items-center justify-center">
+      <div className="text-center">
+        <p className="text-zinc-700 dark:text-slate-200 font-medium">Session completed.</p>
+        <p className="text-zinc-400 dark:text-slate-500 text-sm mt-1">This review has already been submitted.</p>
+        <button onClick={() => navigate('/')} className="mt-4 text-sm text-blue-400 hover:text-blue-500 transition-colors">← Back to sessions</button>
+      </div>
+    </div>
+  )
+
   if (submitted) return (
     <div className="min-h-screen bg-gray-50 dark:bg-zinc-950 flex items-center justify-center">
       <div className="text-center">

packages/web/src/pages/ReviewPage.tsx

@@ -103,6 +103,7 @@ export default function ReviewPage() {
   const [submitting, setSubmitting] = useState(false)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
+  const [isCompleted, setIsCompleted] = useState(false)
   const [callbackFailed, setCallbackFailed] = useState(false)
   const [waitingForRewrite, setWaitingForRewrite] = useState(false)
   const revisionRef = useRef(0)
@@ -133,6 +134,7 @@ export default function ReviewPage() {
       .then(data => {
         setPayload(data.payload as EmailPayload | InboxPayload)
         revisionRef.current = data.revision ?? 0
+        if (data.status === 'completed') setIsCompleted(true)
         setLoading(false)
       })
       .catch(() => { setError(true); setLoading(false) })
@@ -283,6 +285,16 @@ export default function ReviewPage() {
     </div>
   )
 
+  if (isCompleted) return (
+    <div className="min-h-screen bg-gray-50 dark:bg-zinc-950 flex items-center justify-center">
+      <div className="text-center">
+        <p className="text-zinc-700 dark:text-slate-200 font-medium">Session completed.</p>
+        <p className="text-zinc-400 dark:text-slate-500 text-sm mt-1">This review has already been submitted.</p>
+        <button onClick={() => navigate('/')} className="mt-4 text-sm text-blue-400 hover:text-blue-500 transition-colors">← Back to sessions</button>
+      </div>
+    </div>
+  )
+
   if (submitted) return (
     <div className="min-h-screen bg-gray-50 dark:bg-zinc-950 flex items-center justify-center">
       <div className="text-center">