UX: hide ids + human turn gating + save flash

backend/api/conversation_service.py

@@ -407,6 +407,24 @@ class ConversationService:
             except Exception as e:
                 logger.error(f"Failed to generate human-chat greeting: {e}")
                 # It's OK to proceed without a greeting.
+        else:
+            # If the AI is the patient, inject a short deterministic start so "Start" feels responsive
+            # without spending an LLM call on a trivial greeting.
+            try:
+                await self._append_and_broadcast_transcript(
+                    conversation_id=conversation_id,
+                    role="system",
+                    persona="System",
+                    content="You call the patient, and they picked up the phone.",
+                )
+                await self._append_and_broadcast_transcript(
+                    conversation_id=conversation_id,
+                    role="patient",
+                    persona=patient_persona.get("name", "Patient"),
+                    content="Hello?",
+                )
+            except Exception as e:
+                logger.error(f"Failed to inject human-chat AI-patient starter messages: {e}")
 
         return True
 

frontend/pages/config_view.py

@@ -32,11 +32,12 @@ def get_config_view_js() -> str:
 		                }
 		                return [];
 		            });
-	            const [patientPromptAddition, setPatientPromptAddition] = React.useState(() => {
-	                const data = getPatientPersonaData(existing || {}, initialEditorPatientId) || {};
-	                return (typeof data.prompt_addition === 'string') ? data.prompt_addition : '';
-	            });
-	            const [savedAt, setSavedAt] = React.useState(existing?.saved_at || null);
+		            const [patientPromptAddition, setPatientPromptAddition] = React.useState(() => {
+		                const data = getPatientPersonaData(existing || {}, initialEditorPatientId) || {};
+		                return (typeof data.prompt_addition === 'string') ? data.prompt_addition : '';
+		            });
+		            const [savedAt, setSavedAt] = React.useState(existing?.saved_at || null);
+		            const [saveFlash, setSaveFlash] = React.useState(false);
 
             const surveyorQuestionBankText = React.useMemo(() => {
                 const lines = (surveyorQuestionItems || [])
@@ -136,6 +137,8 @@ def get_config_view_js() -> str:
 		                });
 		                saveConfig(cfg);
 		                setSavedAt(cfg.saved_at);
+		                setSaveFlash(true);
+		                setTimeout(() => setSaveFlash(false), 1000);
 		            };
 
             const TabNav = () => {
@@ -177,9 +180,9 @@ def get_config_view_js() -> str:
 	                                    value={selectedSurveyorId}
 	                                    onChange={(e) => setSelectedSurveyorId(e.target.value)}
 	                                >
-	                                    {(personas.surveyors.length ? personas.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
-	                                        <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
-	                                    ))}
+		                                    {(personas.surveyors.length ? personas.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
+		                                        <option key={p.id} value={p.id}>{p.name}</option>
+		                                    ))}
 	                                </select>
 	                            </div>
 
@@ -272,9 +275,9 @@ def get_config_view_js() -> str:
                                     value={selectedPatientId}
                                     onChange={(e) => setSelectedPatientId(e.target.value)}
                                 >
-                                    {(personas.patients.length ? personas.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
-                                        <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
-                                    ))}
+	                                    {(personas.patients.length ? personas.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
+	                                        <option key={p.id} value={p.id}>{p.name}</option>
+	                                    ))}
                                 </select>
 
 	                                <label className="block text-sm font-semibold text-slate-700 mt-4 mb-2">Patient prompt addition (optional)</label>
@@ -299,17 +302,18 @@ def get_config_view_js() -> str:
                         </div>
                     )}
 
-                    <div className="mt-6 flex items-center justify-between gap-4">
-                        <div className="text-xs text-slate-500">
-                            {savedAt ? `Saved: ${new Date(savedAt).toLocaleString()}` : 'Not saved yet.'}
-                        </div>
-                        <button
-                            onClick={onSave}
-                            className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-semibold transition-all shadow"
-                        >
-                            Save Configuration
-                        </button>
-                    </div>
+	                    <div className="mt-6 flex items-center justify-between gap-4">
+	                        <div className="text-xs text-slate-500">
+	                            {savedAt ? `Saved: ${new Date(savedAt).toLocaleString()}` : 'Not saved yet.'}
+	                        </div>
+	                        <button
+	                            onClick={onSave}
+	                            disabled={saveFlash}
+	                            className={`${saveFlash ? 'bg-emerald-600 text-white' : 'bg-blue-600 hover:bg-blue-700 text-white'} disabled:opacity-90 px-5 py-2.5 rounded-lg font-semibold transition-all shadow`}
+	                        >
+	                            {saveFlash ? 'Saved successfully' : 'Save Configuration'}
+	                        </button>
+	                    </div>
                 </div>
             );
         }

frontend/pages/shared_views.py

@@ -44,7 +44,7 @@ def get_shared_views_js() -> str:
 	                                    onChange={(e) => setSurveyorId(e.target.value)}
 	                                >
 	                                    {(personaCatalog?.surveyors?.length ? personaCatalog.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
-	                                        <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
+	                                        <option key={p.id} value={p.id}>{p.name}</option>
 	                                    ))}
 	                                </select>
 	                            </div>
@@ -57,7 +57,7 @@ def get_shared_views_js() -> str:
 	                                    onChange={(e) => setPatientId(e.target.value)}
 	                                >
 	                                    {(personaCatalog?.patients?.length ? personaCatalog.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
-	                                        <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
+	                                        <option key={p.id} value={p.id}>{p.name}</option>
 	                                    ))}
 	                                </select>
 	                            </div>
@@ -99,7 +99,7 @@ def get_shared_views_js() -> str:
                         </div>
                     )}
 
-                    <div ref={transcriptContainerRef} onScroll={onTranscriptScroll} className="space-y-3 h-96 overflow-y-auto bg-slate-50 p-4 rounded-lg">
+	                    <div ref={transcriptContainerRef} onScroll={onTranscriptScroll} className="space-y-3 h-96 overflow-y-auto bg-slate-50 p-4 rounded-lg">
                         {activeMessages.length === 0 && (
                             <div className="text-center text-slate-400 py-20">
                                 {activePage === 'main'
@@ -107,24 +107,31 @@ def get_shared_views_js() -> str:
                                     : 'Paste or upload text above, then click “Run analysis”.'}
                             </div>
                         )}
-                        {activeMessages.map((msg, idx) => (
-                            <div
-                                key={idx}
-                                id={`msg-${idx}`}
-                                className={`p-4 rounded-lg shadow-sm ${msg.role === 'surveyor' ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-l-4 border-green-500'} ${highlightedEvidence?.message_index === idx ? 'ring-2 ring-yellow-400' : ''}`}
-                            >
-                                <div className="flex items-center gap-2 mb-1">
-                                    <span className="font-semibold text-sm">
-                                        {msg.role === 'surveyor' ? '🔵' : '🟢'} {msg.persona}
-                                    </span>
-                                    <span className="text-xs text-slate-500">{msg.time}</span>
-                                </div>
-                                <p className="text-slate-700 whitespace-pre-wrap">
-                                    {renderHighlightedText(msg.text, highlightedEvidence?.message_index === idx ? highlightedEvidence.sentence : null)}
-                                </p>
-                            </div>
-                        ))}
-                    </div>
+	                        {activeMessages.map((msg, idx) => {
+	                            const isSystem = msg.role === 'system';
+	                            const isSurveyor = msg.role === 'surveyor';
+	                            const tone = isSystem
+	                                ? 'bg-slate-100 border-l-4 border-slate-400'
+	                                : (isSurveyor ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-l-4 border-green-500');
+	                            const icon = isSystem ? '⚙️' : (isSurveyor ? '🔵' : '🟢');
+	                            return (
+	                            <div
+	                                key={idx}
+	                                id={`msg-${idx}`}
+	                                className={`p-4 rounded-lg shadow-sm ${tone} ${highlightedEvidence?.message_index === idx ? 'ring-2 ring-yellow-400' : ''}`}
+	                            >
+	                                <div className="flex items-center gap-2 mb-1">
+	                                    <span className="font-semibold text-sm">
+	                                        {icon} {msg.persona}
+	                                    </span>
+	                                    <span className="text-xs text-slate-500">{msg.time}</span>
+	                                </div>
+	                                <p className="text-slate-700 whitespace-pre-wrap">
+	                                    {renderHighlightedText(msg.text, highlightedEvidence?.message_index === idx ? highlightedEvidence.sentence : null)}
+	                                </p>
+	                            </div>
+	                        )})}
+	                    </div>
                 </div>
             );
         }
@@ -158,16 +165,39 @@ def get_shared_views_js() -> str:
 
 	            return (
 	                <div className="bg-white rounded-lg shadow-lg p-6">
-	                    <div className="flex items-center gap-2 mb-4">
-	                        <span className="text-2xl">🧑‍💬</span>
-	                        <h2 className="text-xl font-bold text-slate-800">Human-to-AI</h2>
-	                        {humanChatActive && <span className="ml-auto text-green-600 font-medium animate-pulse">● LIVE</span>}
-	                    </div>
+		                    <div className="flex items-center gap-2 mb-4">
+		                        <span className="text-2xl">🧑‍💬</span>
+		                        <h2 className="text-xl font-bold text-slate-800">Human-to-AI</h2>
+		                        {humanChatActive && <span className="ml-auto text-green-600 font-medium animate-pulse">● LIVE</span>}
+		                    </div>
+
+		                    {(() => {
+		                        const lastRole = (activeMessages && activeMessages.length) ? activeMessages[activeMessages.length - 1].role : null;
+		                        const humanRole = (aiRole === 'patient') ? 'surveyor' : 'patient';
+		                        const humanTurn = humanChatActive && lastRole === (aiRole === 'patient' ? 'patient' : 'surveyor');
+		                        const label = !humanChatActive
+		                            ? null
+		                            : (humanTurn ? 'Your turn' : 'AI turn');
+		                        const cls = humanTurn
+		                            ? 'bg-emerald-100 text-emerald-800 border-emerald-200'
+		                            : 'bg-slate-100 text-slate-800 border-slate-200';
+		                        const note = !humanChatActive
+		                            ? null
+		                            : (humanTurn ? `You are the ${humanRole}.` : `AI is the ${aiRole}.`);
+		                        return label ? (
+		                            <div className="mb-4 flex items-center justify-between gap-3">
+		                                <div className={`inline-flex items-center gap-2 border px-3 py-1.5 rounded-full text-sm font-semibold ${cls}`}>
+		                                    {label}
+		                                </div>
+		                                <div className="text-xs text-slate-500">{note}</div>
+		                            </div>
+		                        ) : null;
+		                    })()}
 	
-	                    <div className="mb-4 grid grid-cols-2 gap-3">
-	                        <div>
-	                            <div className="text-xs font-semibold text-slate-600 mb-1">AI role</div>
-	                            <div className="flex gap-2">
+		                    <div className="mb-4 grid grid-cols-2 gap-3">
+		                        <div>
+		                            <div className="text-xs font-semibold text-slate-600 mb-1">AI role</div>
+		                            <div className="flex gap-2">
 	                                <button
 	                                    type="button"
 	                                    disabled={humanChatActive}
@@ -185,62 +215,73 @@ def get_shared_views_js() -> str:
 	                                    Patient
 	                                </button>
 	                            </div>
-	                        </div>
-	                        <div className="grid grid-cols-2 gap-2">
-	                            <div>
-	                                <div className="text-xs font-semibold text-slate-600 mb-1">Surveyor</div>
-	                                <select
-	                                    className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
-	                                    value={surveyorId}
-	                                    disabled={humanChatActive}
-	                                    onChange={(e) => setSurveyorId(e.target.value)}
-	                                >
-	                                    {(personaCatalog?.surveyors?.length ? personaCatalog.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
-	                                        <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
-	                                    ))}
-	                                </select>
-	                            </div>
-	                            <div>
-	                                <div className="text-xs font-semibold text-slate-600 mb-1">Patient</div>
-	                                <select
-	                                    className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
-	                                    value={patientId}
-	                                    disabled={humanChatActive}
-	                                    onChange={(e) => setPatientId(e.target.value)}
-	                                >
-	                                    {(personaCatalog?.patients?.length ? personaCatalog.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
-	                                        <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
-	                                    ))}
-	                                </select>
-	                            </div>
-	                        </div>
-	                    </div>
+		                        </div>
+		                        <div>
+		                            {aiRole === 'patient' ? (
+		                                <div>
+		                                    <div className="text-xs font-semibold text-slate-600 mb-1">AI patient</div>
+		                                    <select
+		                                        className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+		                                        value={patientId}
+		                                        disabled={humanChatActive}
+		                                        onChange={(e) => setPatientId(e.target.value)}
+		                                    >
+		                                        {(personaCatalog?.patients?.length ? personaCatalog.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
+		                                            <option key={p.id} value={p.id}>{p.name}</option>
+		                                        ))}
+		                                    </select>
+		                                </div>
+		                            ) : (
+		                                <div>
+		                                    <div className="text-xs font-semibold text-slate-600 mb-1">AI surveyor</div>
+		                                    <select
+		                                        className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+		                                        value={surveyorId}
+		                                        disabled={humanChatActive}
+		                                        onChange={(e) => setSurveyorId(e.target.value)}
+		                                    >
+		                                        {(personaCatalog?.surveyors?.length ? personaCatalog.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
+		                                            <option key={p.id} value={p.id}>{p.name}</option>
+		                                        ))}
+		                                    </select>
+		                                </div>
+		                            )}
+		                        </div>
+		                    </div>
 
-	                    <div className="mb-4">
-	                        {!humanChatActive ? (
-	                            <div className="text-sm text-slate-500">
-	                                Click “Start” to begin. {aiRole === 'patient' ? 'Type as the surveyor.' : 'Type as the patient.'} Use “End session” to run analysis.
-	                            </div>
-	                        ) : (
-	                            <div className="flex items-end gap-3">
-	                                <textarea
-	                                    className="flex-1 border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white h-20"
-	                                    placeholder={aiRole === 'patient' ? "Type your message as the surveyor… (Ctrl/⌘+Enter to send)" : "Type your message as the patient… (Ctrl/⌘+Enter to send)"}
-	                                    value={humanDraft}
-	                                    onChange={(e) => setHumanDraft(e.target.value)}
-	                                    onKeyDown={onKeyDown}
-	                                />
-                                <button
-                                    type="button"
-                                    onClick={sendHumanChatMessage}
-                                    disabled={!humanDraft.trim()}
-                                    className="bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-300 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow"
-                                >
-                                    Send
-                                </button>
-                            </div>
-                        )}
-                    </div>
+		                    <div className="mb-4">
+		                        {!humanChatActive ? (
+		                            <div className="text-sm text-slate-500">
+		                                Click “Start” to begin. {aiRole === 'patient' ? 'Type as the surveyor.' : 'Type as the patient.'} Use “End session” to run analysis.
+		                            </div>
+		                        ) : (
+		                            (() => {
+		                                const lastRole = (activeMessages && activeMessages.length) ? activeMessages[activeMessages.length - 1].role : null;
+		                                const humanTurn = humanChatActive && lastRole === (aiRole === 'patient' ? 'patient' : 'surveyor');
+		                                const disabled = !humanTurn;
+		                                return (
+		                            <div className="flex items-end gap-3">
+		                                <textarea
+		                                    className="flex-1 border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white h-20 disabled:bg-slate-100"
+		                                    placeholder={aiRole === 'patient' ? "Type your message as the surveyor… (Ctrl/⌘+Enter to send)" : "Type your message as the patient… (Ctrl/⌘+Enter to send)"}
+		                                    value={humanDraft}
+		                                    onChange={(e) => setHumanDraft(e.target.value)}
+		                                    onKeyDown={(e) => { if (disabled) return; onKeyDown(e); }}
+		                                    disabled={disabled}
+		                                />
+		                                <button
+		                                    type="button"
+		                                    onClick={sendHumanChatMessage}
+		                                    disabled={disabled || !humanDraft.trim()}
+		                                    className="bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-300 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow"
+		                                >
+		                                    Send
+		                                </button>
+		                            </div>
+		                                );
+		                            })()
+	                        )}
+	                    </div>
 
                     <div ref={transcriptContainerRef} onScroll={onTranscriptScroll} className="space-y-3 h-96 overflow-y-auto bg-slate-50 p-4 rounded-lg">
                         {activeMessages.length === 0 && (
@@ -248,24 +289,31 @@ def get_shared_views_js() -> str:
                                 {humanChatActive ? '🔄 Waiting for the first messages...' : '👋 Start the session to begin.'}
                             </div>
                         )}
-                        {activeMessages.map((msg, idx) => (
-                            <div
-                                key={idx}
-                                id={`msg-${idx}`}
-                                className={`p-4 rounded-lg shadow-sm ${msg.role === 'surveyor' ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-l-4 border-green-500'} ${highlightedEvidence?.message_index === idx ? 'ring-2 ring-yellow-400' : ''}`}
-                            >
-                                <div className="flex items-center gap-2 mb-1">
-                                    <span className="font-semibold text-sm">
-                                        {msg.role === 'surveyor' ? '🔵' : '🟢'} {msg.persona}
-                                    </span>
-                                    <span className="text-xs text-slate-500">{msg.time}</span>
-                                </div>
-                                <p className="text-slate-700 whitespace-pre-wrap">
-                                    {renderHighlightedText(msg.text, highlightedEvidence?.message_index === idx ? highlightedEvidence.sentence : null)}
-                                </p>
-                            </div>
-                        ))}
-                    </div>
+	                        {activeMessages.map((msg, idx) => {
+	                            const isSystem = msg.role === 'system';
+	                            const isSurveyor = msg.role === 'surveyor';
+	                            const tone = isSystem
+	                                ? 'bg-slate-100 border-l-4 border-slate-400'
+	                                : (isSurveyor ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-l-4 border-green-500');
+	                            const icon = isSystem ? '⚙️' : (isSurveyor ? '🔵' : '🟢');
+	                            return (
+	                            <div
+	                                key={idx}
+	                                id={`msg-${idx}`}
+	                                className={`p-4 rounded-lg shadow-sm ${tone} ${highlightedEvidence?.message_index === idx ? 'ring-2 ring-yellow-400' : ''}`}
+	                            >
+	                                <div className="flex items-center gap-2 mb-1">
+	                                    <span className="font-semibold text-sm">
+	                                        {icon} {msg.persona}
+	                                    </span>
+	                                    <span className="text-xs text-slate-500">{msg.time}</span>
+	                                </div>
+	                                <p className="text-slate-700 whitespace-pre-wrap">
+	                                    {renderHighlightedText(msg.text, highlightedEvidence?.message_index === idx ? highlightedEvidence.sentence : null)}
+	                                </p>
+	                            </div>
+	                        )})}
+	                    </div>
                 </div>
             );
         }