diff --git a/.Jules/palette.md b/.Jules/palette.md index 2802bd6..29246f5 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -15,3 +15,7 @@ ## 2026-10-24 - Form Success State Feedback **Learning:** Temporarily disabling the submit button and changing its state to a success message without wiping the form inputs asynchronously prevents data loss while maintaining clear feedback for the user on successful submissions. **Action:** For successful form submissions, temporarily (e.g., 2s) disable the submit button, change its text to a success message, and reset the form inputs immediately rather than inside the timeout. + +## 2026-10-25 - Smart Confirm Safety +**Learning:** Replacing native `window.confirm()` dialogs with state-based soft confirmations requires explicitly preserving and rendering any secondary contextual information or warnings dynamically with `role="status"` to maintain accessibility and screen reader support. +**Action:** When extracting native confirm dialogs, ensure both a 'Cancel' button is provided and the original warning text is rendered dynamically with `role="status"`. diff --git a/src/components/facilitator/SessionConsole.tsx b/src/components/facilitator/SessionConsole.tsx index 252dde2..b5694ed 100644 --- a/src/components/facilitator/SessionConsole.tsx +++ b/src/components/facilitator/SessionConsole.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useState } from 'react'; import { Socket } from 'socket.io-client'; import type { SessionStatePayload } from '@/types/websocket'; @@ -24,13 +25,18 @@ export function SessionConsole({ sessionId, sessionState, socket }: SessionConso }); }; + const [isConfirmingEnd, setIsConfirmingEnd] = useState(false); + const handleEndSession = () => { - if (confirm('Are you sure you want to end this session? This will generate the session summary.')) { - socket.emit('facilitator', { - type: 'endSession', - payload: { sessionId }, - }); + if (!isConfirmingEnd) { + setIsConfirmingEnd(true); + return; } + socket.emit('facilitator', { + type: 'endSession', + payload: { sessionId }, + }); + setIsConfirmingEnd(false); }; if (!sessionState) { @@ -84,12 +90,36 @@ export function SessionConsole({ sessionId, sessionState, socket }: SessionConso ) : null} {sessionState.status !== 'ENDED' && ( - +
+ Are you sure you want to end this session? This will generate the session summary. +
+ )} +