feat: expose safety plan from chat header (#38)

index.html

@@ -80,6 +80,64 @@ html, body {
   gap: 4px;
 }
 
+#chat-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  background: #10161d;
+  border-bottom: 1px solid #21262d;
+}
+
+.chat-header-copy {
+  min-width: 0;
+}
+
+#chat-header-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #e6edf3;
+}
+
+#chat-header-subtitle {
+  font-size: 0.75rem;
+  color: #8b949e;
+  margin-top: 2px;
+}
+
+.safety-link-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  min-height: 40px;
+  border-radius: 999px;
+  border: 1px solid #30363d;
+  background: transparent;
+  color: #8b949e;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
+}
+
+.safety-link-btn:hover,
+.safety-link-btn:focus {
+  color: #e6edf3;
+  border-color: #58a6ff;
+  background: rgba(88, 166, 255, 0.08);
+  outline: 2px solid rgba(88, 166, 255, 0.35);
+  outline-offset: 2px;
+}
+
+.safety-link-btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
 .status-dot {
   width: 6px;
   height: 6px;
@@ -579,6 +637,19 @@ html, body {
   #chat-area { padding: 20px 24px 8px; }
   #input-area { padding: 10px 24px; }
   #banner-988 a { font-size: 0.95rem; }
+  #chat-header { padding: 12px 24px; }
+}
+
+@media (max-width: 480px) {
+  #chat-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .safety-link-btn {
+    width: 100%;
+    justify-content: center;
+  }
 }
 
 @media (min-width: 900px) {
@@ -642,13 +713,24 @@ html, body {
       <a href="sms:741741&body=HOME" class="crisis-btn" aria-label="Text HOME to 741741 for Crisis Text Line">
         Text HOME to 741741
       </a>
-      <button class="crisis-btn" id="crisis-safety-plan-btn" aria-label="Open my safety plan" style="background:#3d3d3d;">
+      <button class="crisis-btn" id="crisis-safety-plan-btn" type="button" aria-label="Open my safety plan" aria-controls="safety-plan-modal" aria-haspopup="dialog" style="background:#3d3d3d;">
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
         My Safety Plan
       </button>
     </div>
   </div>
 
+  <div id="chat-header" role="region" aria-label="Chat tools">
+    <div class="chat-header-copy">
+      <p id="chat-header-title">Talk to Timmy</p>
+      <p id="chat-header-subtitle">No login. No tracking. Just someone to listen.</p>
+    </div>
+    <button id="chat-safety-plan-btn" class="safety-link-btn" type="button" aria-label="Open my safety plan" aria-controls="safety-plan-modal" aria-haspopup="dialog">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+      <span>Safety plan</span>
+    </button>
+  </div>
+
   <!-- Chat messages -->
   <div id="chat-area" role="log" aria-label="Chat messages" aria-live="polite" tabindex="0">
     <!-- Messages inserted here -->
@@ -681,7 +763,7 @@ html, body {
   <!-- Footer -->
   <footer id="footer">
     <a href="/about" aria-label="About The Door">about</a>
-    <button id="safety-plan-btn" aria-label="Open My Safety Plan">my safety plan</button>
+    <button id="safety-plan-btn" type="button" aria-label="Open My Safety Plan" aria-controls="safety-plan-modal" aria-haspopup="dialog">my safety plan</button>
     <button id="clear-chat-btn" aria-label="Clear chat history">clear chat</button>
   </footer>
 </div>
@@ -701,16 +783,16 @@ html, body {
 </div>
 
 <!-- Safety Plan Modal -->
-<div id="safety-plan-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="safety-plan-title">
+<div id="safety-plan-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="safety-plan-title" aria-hidden="true">
   <div class="modal-content">
     <div class="modal-header">
       <h2 id="safety-plan-title">My Safety Plan</h2>
-      <button class="close-modal" id="close-safety-plan" aria-label="Close modal">
+      <button class="close-modal" id="close-safety-plan" type="button" aria-label="Close modal">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
       </button>
     </div>
     <div class="modal-body">
-      <p style="font-size: 0.85rem; color: #8b949e; margin-bottom: 16px;">This plan is saved only on your device. No one else can see it.</p>
+      <p id="safety-plan-description" style="font-size: 0.85rem; color: #8b949e; margin-bottom: 16px;">This plan is saved only on your device. No one else can see it.</p>
       
       <div class="form-group">
         <label for="sp-warning-signs">1. Warning signs (thoughts, moods, behaviors)</label>
@@ -738,8 +820,8 @@ html, body {
       </div>
     </div>
     <div class="modal-footer">
-      <button class="btn btn-secondary" id="cancel-safety-plan">Cancel</button>
-      <button class="btn btn-primary" id="save-safety-plan">Save Plan</button>
+      <button class="btn btn-secondary" id="cancel-safety-plan" type="button">Cancel</button>
+      <button class="btn btn-primary" id="save-safety-plan" type="button">Save Plan</button>
     </div>
   </div>
 </div>
@@ -812,7 +894,8 @@ Sovereignty and service always.`;
   var statusText = document.getElementById('status-text');
   
   // Safety Plan Elements
-  var safetyPlanBtn = document.getElementById('safety-plan-btn');
+  var chatSafetyPlanBtn = document.getElementById('chat-safety-plan-btn');
+  var footerSafetyPlanBtn = document.getElementById('safety-plan-btn');
   var crisisSafetyPlanBtn = document.getElementById('crisis-safety-plan-btn');
   var safetyPlanModal = document.getElementById('safety-plan-modal');
   var closeSafetyPlan = document.getElementById('close-safety-plan');
@@ -825,6 +908,7 @@ Sovereignty and service always.`;
   var isStreaming = false;
   var overlayTimer = null;
   var crisisPanelShown = false;
+  var lastSafetyPlanTrigger = null;
 
   // ===== SERVICE WORKER =====
   if ('serviceWorker' in navigator) {
@@ -1117,25 +1201,50 @@ Sovereignty and service always.`;
     } catch (e) {}
   }
 
-  safetyPlanBtn.addEventListener('click', function() {
+  function openSafetyPlanModal(trigger) {
+    lastSafetyPlanTrigger = trigger || document.activeElement;
     loadSafetyPlan();
     safetyPlanModal.classList.add('active');
+    safetyPlanModal.setAttribute('aria-hidden', 'false');
+    document.getElementById('sp-warning-signs').focus();
+  }
+
+  function closeSafetyPlanModal() {
+    safetyPlanModal.classList.remove('active');
+    safetyPlanModal.setAttribute('aria-hidden', 'true');
+    if (lastSafetyPlanTrigger && typeof lastSafetyPlanTrigger.focus === 'function') {
+      lastSafetyPlanTrigger.focus();
+    }
+  }
+
+  chatSafetyPlanBtn.addEventListener('click', function() {
+    openSafetyPlanModal(chatSafetyPlanBtn);
+  });
+
+  footerSafetyPlanBtn.addEventListener('click', function() {
+    openSafetyPlanModal(footerSafetyPlanBtn);
   });
 
   // Crisis panel safety plan button (if crisis panel is visible)
   if (crisisSafetyPlanBtn) {
     crisisSafetyPlanBtn.addEventListener('click', function() {
-      loadSafetyPlan();
-      safetyPlanModal.classList.add('active');
+      openSafetyPlanModal(crisisSafetyPlanBtn);
     });
   }
 
   closeSafetyPlan.addEventListener('click', function() {
-    safetyPlanModal.classList.remove('active');
+    closeSafetyPlanModal();
   });
 
   cancelSafetyPlan.addEventListener('click', function() {
-    safetyPlanModal.classList.remove('active');
+    closeSafetyPlanModal();
+  });
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && safetyPlanModal.classList.contains('active')) {
+      e.preventDefault();
+      closeSafetyPlanModal();
+    }
   });
 
   saveSafetyPlan.addEventListener('click', function() {
@@ -1148,7 +1257,7 @@ Sovereignty and service always.`;
     };
     try {
       localStorage.setItem('timmy_safety_plan', JSON.stringify(plan));
-      safetyPlanModal.classList.remove('active');
+      closeSafetyPlanModal();
       alert('Safety plan saved locally.');
     } catch (e) {
       alert('Error saving plan.');
@@ -1298,8 +1407,7 @@ Sovereignty and service always.`;
     // Check for URL params (e.g., ?safetyplan=true for PWA shortcut)
     var urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('safetyplan') === 'true') {
-      loadSafetyPlan();
-      safetyPlanModal.classList.add('active');
+      openSafetyPlanModal(chatSafetyPlanBtn);
       // Clean up URL
       window.history.replaceState({}, document.title, window.location.pathname);
     }

tests/test_safety_plan_chat_header.py

@@ -0,0 +1,42 @@
+from pathlib import Path
+
+INDEX_HTML = Path(__file__).resolve().parents[1] / 'index.html'
+HTML = INDEX_HTML.read_text()
+
+
+def _between(start_marker: str, end_marker: str) -> str:
+    start = HTML.index(start_marker)
+    end = HTML.index(end_marker)
+    return HTML[start:end]
+
+
+def test_persistent_safety_plan_button_lives_in_chat_header():
+    assert 'id="chat-header"' in HTML, 'expected a dedicated chat header area'
+
+    header_html = _between('<div id="chat-header"', '<div id="chat-area"')
+
+    assert 'id="chat-safety-plan-btn"' in header_html
+    assert 'aria-label="Open my safety plan"' in header_html
+    assert 'aria-controls="safety-plan-modal"' in header_html
+    assert 'aria-haspopup="dialog"' in header_html
+
+
+def test_chat_header_entry_point_reuses_same_modal_open_flow():
+    assert "var chatSafetyPlanBtn = document.getElementById('chat-safety-plan-btn');" in HTML
+    assert 'function openSafetyPlanModal(trigger) {' in HTML
+    assert 'loadSafetyPlan();' in HTML
+    assert "safetyPlanModal.classList.add('active');" in HTML
+    assert "safetyPlanModal.setAttribute('aria-hidden', 'false');" in HTML
+    assert 'openSafetyPlanModal(chatSafetyPlanBtn);' in HTML
+    assert 'openSafetyPlanModal(footerSafetyPlanBtn);' in HTML
+    assert 'openSafetyPlanModal(crisisSafetyPlanBtn);' in HTML
+
+
+def test_modal_returns_focus_and_supports_escape_to_close():
+    assert 'var lastSafetyPlanTrigger = null;' in HTML
+    assert 'lastSafetyPlanTrigger = trigger || document.activeElement;' in HTML
+    assert 'document.getElementById(\'sp-warning-signs\').focus();' in HTML
+    assert 'closeSafetyPlanModal();' in HTML
+    assert "safetyPlanModal.setAttribute('aria-hidden', 'true');" in HTML
+    assert 'lastSafetyPlanTrigger.focus();' in HTML
+    assert "if (e.key === 'Escape' && safetyPlanModal.classList.contains('active'))" in HTML