Compare commits
1 Commits
fix/96
...
burn/20260
| Author | SHA1 | Date | |
|---|---|---|---|
|
1b7413d3cc |
633
index.html
633
index.html
@@ -500,184 +500,6 @@ html, body {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.safety-plan-status {
|
||||
min-height: 20px;
|
||||
margin: 4px 0 18px;
|
||||
font-size: 0.85rem;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.safety-plan-status.success {
|
||||
color: #3fb950;
|
||||
}
|
||||
|
||||
.safety-plan-status.error {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.safety-plan-versioning {
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #30363d;
|
||||
}
|
||||
|
||||
.safety-plan-versioning-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.safety-plan-history-panel,
|
||||
.safety-plan-diff-panel {
|
||||
background: #0d1117;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.safety-plan-section-header h3 {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.safety-plan-section-header p {
|
||||
font-size: 0.8rem;
|
||||
color: #8b949e;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.safety-plan-history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.safety-plan-history-item {
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background: #161b22;
|
||||
}
|
||||
|
||||
.safety-plan-history-item.active {
|
||||
border-color: #58a6ff;
|
||||
box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.35);
|
||||
}
|
||||
|
||||
.safety-plan-history-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.safety-plan-history-title {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.safety-plan-history-note {
|
||||
font-size: 0.78rem;
|
||||
color: #8b949e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.safety-plan-history-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.safety-plan-history-button,
|
||||
.safety-plan-restore-button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #30363d;
|
||||
background: transparent;
|
||||
color: #e6edf3;
|
||||
padding: 8px 12px;
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.safety-plan-history-button:hover,
|
||||
.safety-plan-restore-button:hover,
|
||||
.safety-plan-history-button:focus,
|
||||
.safety-plan-restore-button:focus {
|
||||
border-color: #58a6ff;
|
||||
color: #58a6ff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.safety-plan-restore-button {
|
||||
background: rgba(35, 134, 54, 0.14);
|
||||
}
|
||||
|
||||
.safety-plan-diff {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.safety-plan-diff-meta {
|
||||
font-size: 0.78rem;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.safety-plan-diff-field {
|
||||
border-top: 1px solid #21262d;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.safety-plan-diff-field:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.safety-plan-diff-field h4 {
|
||||
font-size: 0.84rem;
|
||||
margin-bottom: 8px;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.safety-plan-diff-block {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
font-size: 0.88rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.diff-unchanged {
|
||||
background: #161b22;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.diff-added {
|
||||
background: rgba(46, 160, 67, 0.16);
|
||||
border-left: 3px solid #2ea043;
|
||||
color: #d2f4d3;
|
||||
}
|
||||
|
||||
.diff-removed {
|
||||
background: rgba(248, 81, 73, 0.16);
|
||||
border-left: 3px solid #f85149;
|
||||
color: #ffd8d3;
|
||||
}
|
||||
|
||||
.safety-plan-empty {
|
||||
color: #8b949e;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@media (min-width: 840px) {
|
||||
.safety-plan-versioning-grid {
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -914,28 +736,6 @@ html, body {
|
||||
<label for="sp-environment">5. Making my environment safe</label>
|
||||
<textarea id="sp-environment" placeholder="e.g., Giving my car keys to a friend, locking away meds..."></textarea>
|
||||
</div>
|
||||
|
||||
<div id="safety-plan-status" class="safety-plan-status" role="status" aria-live="polite"></div>
|
||||
|
||||
<section class="safety-plan-versioning" aria-labelledby="safety-plan-history-title">
|
||||
<div class="safety-plan-versioning-grid">
|
||||
<div class="safety-plan-history-panel">
|
||||
<div class="safety-plan-section-header">
|
||||
<h3 id="safety-plan-history-title">Version History</h3>
|
||||
<p>Each save stays on this device so you can review changes and restore an earlier plan.</p>
|
||||
</div>
|
||||
<div id="safety-plan-history" class="safety-plan-history"></div>
|
||||
</div>
|
||||
|
||||
<div class="safety-plan-diff-panel">
|
||||
<div class="safety-plan-section-header">
|
||||
<h3>Diff View</h3>
|
||||
<p>Compare the selected version against the version immediately before it.</p>
|
||||
</div>
|
||||
<div id="safety-plan-diff" class="safety-plan-diff"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" id="cancel-safety-plan">Cancel</button>
|
||||
@@ -1020,26 +820,12 @@ Sovereignty and service always.`;
|
||||
var cancelSafetyPlan = document.getElementById('cancel-safety-plan');
|
||||
var saveSafetyPlan = document.getElementById('save-safety-plan');
|
||||
var clearChatBtn = document.getElementById('clear-chat-btn');
|
||||
var safetyPlanHistory = document.getElementById('safety-plan-history');
|
||||
var safetyPlanDiff = document.getElementById('safety-plan-diff');
|
||||
var safetyPlanStatus = document.getElementById('safety-plan-status');
|
||||
var safetyPlanFields = {
|
||||
warningSigns: document.getElementById('sp-warning-signs'),
|
||||
coping: document.getElementById('sp-coping'),
|
||||
distraction: document.getElementById('sp-distraction'),
|
||||
help: document.getElementById('sp-help'),
|
||||
environment: document.getElementById('sp-environment')
|
||||
};
|
||||
var SAFETY_PLAN_STORAGE_KEY = 'timmy_safety_plan';
|
||||
var SAFETY_PLAN_VERSIONS_KEY = 'timmy_safety_plan_versions';
|
||||
var MAX_SAFETY_PLAN_VERSIONS = 20;
|
||||
|
||||
// ===== STATE =====
|
||||
var messages = [];
|
||||
var isStreaming = false;
|
||||
var overlayTimer = null;
|
||||
var crisisPanelShown = false;
|
||||
var selectedSafetyPlanVersionId = null;
|
||||
|
||||
// ===== SERVICE WORKER =====
|
||||
if ('serviceWorker' in navigator) {
|
||||
@@ -1208,6 +994,26 @@ Sovereignty and service always.`;
|
||||
|
||||
function trapFocusInOverlay(e) {
|
||||
if (!crisisOverlay.classList.contains('active')) return;
|
||||
|
||||
// Escape closes the overlay and restores focus to chat input
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
crisisOverlay.classList.remove('active');
|
||||
if (overlayTimer) {
|
||||
clearInterval(overlayTimer);
|
||||
overlayTimer = null;
|
||||
}
|
||||
var mainApp = document.getElementById('app');
|
||||
if (mainApp) mainApp.removeAttribute('inert');
|
||||
if (_preOverlayFocusElement && typeof _preOverlayFocusElement.focus === 'function') {
|
||||
_preOverlayFocusElement.focus();
|
||||
} else {
|
||||
msgInput.focus();
|
||||
}
|
||||
_preOverlayFocusElement = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key !== 'Tab') return;
|
||||
|
||||
var focusable = getOverlayFocusableElements();
|
||||
@@ -1244,7 +1050,7 @@ Sovereignty and service always.`;
|
||||
overlayDismissBtn.textContent = 'Continue to chat (' + countdown + 's)';
|
||||
|
||||
// Disable background interaction via inert attribute
|
||||
var mainApp = document.querySelector('.app');
|
||||
var mainApp = document.getElementById('app');
|
||||
if (mainApp) mainApp.setAttribute('inert', '');
|
||||
// Also hide from assistive tech
|
||||
var chatSection = document.getElementById('chat');
|
||||
@@ -1281,7 +1087,7 @@ Sovereignty and service always.`;
|
||||
}
|
||||
|
||||
// Re-enable background interaction
|
||||
var mainApp = document.querySelector('.app');
|
||||
var mainApp = document.getElementById('app');
|
||||
if (mainApp) mainApp.removeAttribute('inert');
|
||||
var chatSection = document.getElementById('chat');
|
||||
if (chatSection) chatSection.removeAttribute('aria-hidden');
|
||||
@@ -1385,347 +1191,18 @@ Sovereignty and service always.`;
|
||||
});
|
||||
|
||||
// ===== SAFETY PLAN LOGIC =====
|
||||
function emptySafetyPlan() {
|
||||
return {
|
||||
warningSigns: '',
|
||||
coping: '',
|
||||
distraction: '',
|
||||
help: '',
|
||||
environment: ''
|
||||
};
|
||||
}
|
||||
|
||||
function cloneSafetyPlan(plan) {
|
||||
var normalized = emptySafetyPlan();
|
||||
var source = plan || {};
|
||||
Object.keys(normalized).forEach(function(key) {
|
||||
normalized[key] = typeof source[key] === 'string' ? source[key] : '';
|
||||
});
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function applySafetyPlan(plan) {
|
||||
var nextPlan = cloneSafetyPlan(plan);
|
||||
Object.keys(safetyPlanFields).forEach(function(key) {
|
||||
safetyPlanFields[key].value = nextPlan[key];
|
||||
});
|
||||
}
|
||||
|
||||
function getSafetyPlanFormData() {
|
||||
return {
|
||||
warningSigns: safetyPlanFields.warningSigns.value,
|
||||
coping: safetyPlanFields.coping.value,
|
||||
distraction: safetyPlanFields.distraction.value,
|
||||
help: safetyPlanFields.help.value,
|
||||
environment: safetyPlanFields.environment.value
|
||||
};
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function setSafetyPlanStatus(message, tone) {
|
||||
if (!safetyPlanStatus) return;
|
||||
safetyPlanStatus.textContent = message || '';
|
||||
safetyPlanStatus.className = 'safety-plan-status' + (tone ? ' ' + tone : '');
|
||||
}
|
||||
|
||||
function getSafetyPlanVersions() {
|
||||
try {
|
||||
var saved = localStorage.getItem(SAFETY_PLAN_VERSIONS_KEY);
|
||||
if (!saved) return [];
|
||||
var parsed = JSON.parse(saved);
|
||||
if (!Array.isArray(parsed)) return [];
|
||||
return parsed.filter(function(version) {
|
||||
return version && version.id && version.plan;
|
||||
});
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function setSafetyPlanVersions(versions) {
|
||||
localStorage.setItem(
|
||||
SAFETY_PLAN_VERSIONS_KEY,
|
||||
JSON.stringify((versions || []).slice(0, MAX_SAFETY_PLAN_VERSIONS))
|
||||
);
|
||||
}
|
||||
|
||||
function buildSafetyPlanVersion(plan, meta) {
|
||||
return {
|
||||
id: 'spv_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8),
|
||||
savedAt: new Date().toISOString(),
|
||||
source: (meta && meta.source) || 'save',
|
||||
restoredFrom: meta && meta.restoredFrom ? meta.restoredFrom : null,
|
||||
plan: cloneSafetyPlan(plan)
|
||||
};
|
||||
}
|
||||
|
||||
function ensureSafetyPlanVersionHistory() {
|
||||
var versions = getSafetyPlanVersions();
|
||||
if (versions.length) {
|
||||
return versions;
|
||||
}
|
||||
|
||||
try {
|
||||
var saved = localStorage.getItem(SAFETY_PLAN_STORAGE_KEY);
|
||||
if (!saved) {
|
||||
return [];
|
||||
}
|
||||
var parsed = JSON.parse(saved);
|
||||
var migrated = [buildSafetyPlanVersion(parsed, { source: 'legacy' })];
|
||||
setSafetyPlanVersions(migrated);
|
||||
return migrated;
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function formatSafetyPlanTimestamp(iso) {
|
||||
var date = new Date(iso || '');
|
||||
if (isNaN(date.getTime())) {
|
||||
return 'Saved just now';
|
||||
}
|
||||
return date.toLocaleString([], {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function getSafetyPlanVersionById(versionId) {
|
||||
var versions = getSafetyPlanVersions();
|
||||
for (var i = 0; i < versions.length; i++) {
|
||||
if (versions[i].id === versionId) {
|
||||
return { version: versions[i], index: i, versions: versions };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function calculateSafetyPlanDiff(previousText, currentText) {
|
||||
var previous = String(previousText || '');
|
||||
var current = String(currentText || '');
|
||||
var start = 0;
|
||||
while (start < previous.length && start < current.length && previous.charAt(start) === current.charAt(start)) {
|
||||
start += 1;
|
||||
}
|
||||
|
||||
var previousEnd = previous.length - 1;
|
||||
var currentEnd = current.length - 1;
|
||||
while (previousEnd >= start && currentEnd >= start && previous.charAt(previousEnd) === current.charAt(currentEnd)) {
|
||||
previousEnd -= 1;
|
||||
currentEnd -= 1;
|
||||
}
|
||||
|
||||
return {
|
||||
before: current.slice(0, start),
|
||||
removed: previous.slice(start, previousEnd + 1),
|
||||
added: current.slice(start, currentEnd + 1),
|
||||
after: current.slice(currentEnd + 1)
|
||||
};
|
||||
}
|
||||
|
||||
function renderDiffSegmentHtml(previousText, currentText) {
|
||||
var previous = String(previousText || '');
|
||||
var current = String(currentText || '');
|
||||
|
||||
if (!previous && !current) {
|
||||
return '<p class="safety-plan-empty">No content saved for this section yet.</p>';
|
||||
}
|
||||
|
||||
if (previous === current) {
|
||||
return '<div class="safety-plan-diff-block diff-unchanged">' + escapeHtml(current || 'No changes in this version.') + '</div>';
|
||||
}
|
||||
|
||||
var diff = calculateSafetyPlanDiff(previous, current);
|
||||
var blocks = [];
|
||||
if (diff.before) {
|
||||
blocks.push('<div class="safety-plan-diff-block diff-unchanged">' + escapeHtml(diff.before) + '</div>');
|
||||
}
|
||||
if (diff.removed) {
|
||||
blocks.push('<div class="safety-plan-diff-block diff-removed">Removed<br>' + escapeHtml(diff.removed) + '</div>');
|
||||
}
|
||||
if (diff.added) {
|
||||
blocks.push('<div class="safety-plan-diff-block diff-added">Added<br>' + escapeHtml(diff.added) + '</div>');
|
||||
}
|
||||
if (diff.after) {
|
||||
blocks.push('<div class="safety-plan-diff-block diff-unchanged">' + escapeHtml(diff.after) + '</div>');
|
||||
}
|
||||
return blocks.join('');
|
||||
}
|
||||
|
||||
function renderSafetyPlanDiff(versionId) {
|
||||
if (!safetyPlanDiff) return;
|
||||
|
||||
var versions = getSafetyPlanVersions();
|
||||
if (!versions.length) {
|
||||
safetyPlanDiff.innerHTML = '<p class="safety-plan-empty">Save your plan to start tracking changes.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var selected = getSafetyPlanVersionById(versionId || selectedSafetyPlanVersionId || versions[0].id);
|
||||
if (!selected) {
|
||||
selected = { version: versions[0], index: 0, versions: versions };
|
||||
selectedSafetyPlanVersionId = versions[0].id;
|
||||
}
|
||||
|
||||
var baseline = selected.versions[selected.index + 1]
|
||||
? cloneSafetyPlan(selected.versions[selected.index + 1].plan)
|
||||
: emptySafetyPlan();
|
||||
var currentPlan = cloneSafetyPlan(selected.version.plan);
|
||||
var baselineLabel = selected.versions[selected.index + 1]
|
||||
? formatSafetyPlanTimestamp(selected.versions[selected.index + 1].savedAt)
|
||||
: 'an empty plan';
|
||||
|
||||
var fields = [
|
||||
['Warning signs', 'warningSigns'],
|
||||
['Internal coping strategies', 'coping'],
|
||||
['People/Places for distraction', 'distraction'],
|
||||
['People I can ask for help', 'help'],
|
||||
['Making my environment safe', 'environment']
|
||||
];
|
||||
|
||||
var html = [
|
||||
'<div class="safety-plan-diff-meta">Comparing ' +
|
||||
escapeHtml(formatSafetyPlanTimestamp(selected.version.savedAt)) +
|
||||
' against ' + escapeHtml(baselineLabel) + '.</div>'
|
||||
];
|
||||
|
||||
fields.forEach(function(field) {
|
||||
html.push(
|
||||
'<div class="safety-plan-diff-field">' +
|
||||
'<h4>' + escapeHtml(field[0]) + '</h4>' +
|
||||
renderDiffSegmentHtml(baseline[field[1]], currentPlan[field[1]]) +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
|
||||
safetyPlanDiff.innerHTML = html.join('');
|
||||
}
|
||||
|
||||
function renderSafetyPlanVersionHistory() {
|
||||
if (!safetyPlanHistory) return;
|
||||
|
||||
var versions = getSafetyPlanVersions();
|
||||
if (!versions.length) {
|
||||
safetyPlanHistory.innerHTML = '<p class="safety-plan-empty">No saved versions yet. Each save creates a new local version.</p>';
|
||||
renderSafetyPlanDiff(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedSafetyPlanVersionId || !getSafetyPlanVersionById(selectedSafetyPlanVersionId)) {
|
||||
selectedSafetyPlanVersionId = versions[0].id;
|
||||
}
|
||||
|
||||
var html = [];
|
||||
versions.forEach(function(version, index) {
|
||||
var note = 'Saved locally';
|
||||
if (version.source === 'restore') {
|
||||
note = 'Restored from an earlier version';
|
||||
} else if (version.source === 'legacy') {
|
||||
note = 'Imported from your previous saved plan';
|
||||
}
|
||||
|
||||
html.push(
|
||||
'<div class="safety-plan-history-item' + (selectedSafetyPlanVersionId === version.id ? ' active' : '') + '">' +
|
||||
'<div class="safety-plan-history-meta">' +
|
||||
'<span class="safety-plan-history-title">' + escapeHtml(index === 0 ? 'Current version' : 'Version ' + (versions.length - index)) + '</span>' +
|
||||
'<span class="safety-plan-empty">' + escapeHtml(formatSafetyPlanTimestamp(version.savedAt)) + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="safety-plan-history-note">' + escapeHtml(note) + '</div>' +
|
||||
'<div class="safety-plan-history-actions">' +
|
||||
'<button type="button" class="safety-plan-history-button" data-version-id="' + escapeHtml(version.id) + '">View diff</button>' +
|
||||
'<button type="button" class="safety-plan-restore-button" data-restore-version-id="' + escapeHtml(version.id) + '">Restore this version</button>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
|
||||
safetyPlanHistory.innerHTML = html.join('');
|
||||
renderSafetyPlanDiff(selectedSafetyPlanVersionId);
|
||||
}
|
||||
|
||||
function saveSafetyPlanVersion(plan, meta) {
|
||||
var snapshot = buildSafetyPlanVersion(plan, meta);
|
||||
var versions = getSafetyPlanVersions();
|
||||
versions.unshift(snapshot);
|
||||
setSafetyPlanVersions(versions);
|
||||
localStorage.setItem(SAFETY_PLAN_STORAGE_KEY, JSON.stringify(snapshot.plan));
|
||||
selectedSafetyPlanVersionId = snapshot.id;
|
||||
renderSafetyPlanVersionHistory();
|
||||
return snapshot;
|
||||
}
|
||||
|
||||
function restoreSafetyPlanVersion(versionId) {
|
||||
var selected = getSafetyPlanVersionById(versionId);
|
||||
if (!selected) {
|
||||
setSafetyPlanStatus('That version could not be restored.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
applySafetyPlan(selected.version.plan);
|
||||
var restored = saveSafetyPlanVersion(selected.version.plan, {
|
||||
source: 'restore',
|
||||
restoredFrom: selected.version.id
|
||||
});
|
||||
setSafetyPlanStatus(
|
||||
'Restored version from ' + formatSafetyPlanTimestamp(selected.version.savedAt) + ' as the current plan.',
|
||||
'success'
|
||||
);
|
||||
return restored;
|
||||
}
|
||||
|
||||
function loadSafetyPlan() {
|
||||
var versions = ensureSafetyPlanVersionHistory();
|
||||
var latestPlan = versions.length ? versions[0].plan : null;
|
||||
|
||||
if (!latestPlan) {
|
||||
try {
|
||||
var saved = localStorage.getItem(SAFETY_PLAN_STORAGE_KEY);
|
||||
latestPlan = saved ? JSON.parse(saved) : null;
|
||||
} catch (e) {
|
||||
latestPlan = null;
|
||||
try {
|
||||
var saved = localStorage.getItem('timmy_safety_plan');
|
||||
if (saved) {
|
||||
var plan = JSON.parse(saved);
|
||||
document.getElementById('sp-warning-signs').value = plan.warningSigns || '';
|
||||
document.getElementById('sp-coping').value = plan.coping || '';
|
||||
document.getElementById('sp-distraction').value = plan.distraction || '';
|
||||
document.getElementById('sp-help').value = plan.help || '';
|
||||
document.getElementById('sp-environment').value = plan.environment || '';
|
||||
}
|
||||
}
|
||||
|
||||
applySafetyPlan(latestPlan || emptySafetyPlan());
|
||||
renderSafetyPlanVersionHistory();
|
||||
if (versions.length) {
|
||||
setSafetyPlanStatus('Version history stays on this device only.', '');
|
||||
} else {
|
||||
setSafetyPlanStatus('Every save creates a local version you can diff and restore.', '');
|
||||
}
|
||||
}
|
||||
|
||||
function openSafetyPlanModal(triggerEl) {
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
_activateSafetyPlanFocusTrap(triggerEl);
|
||||
}
|
||||
|
||||
if (safetyPlanHistory) {
|
||||
safetyPlanHistory.addEventListener('click', function(event) {
|
||||
var restoreButton = event.target.closest('[data-restore-version-id]');
|
||||
if (restoreButton) {
|
||||
restoreSafetyPlanVersion(restoreButton.getAttribute('data-restore-version-id'));
|
||||
return;
|
||||
}
|
||||
|
||||
var diffButton = event.target.closest('[data-version-id]');
|
||||
if (diffButton) {
|
||||
selectedSafetyPlanVersionId = diffButton.getAttribute('data-version-id');
|
||||
renderSafetyPlanVersionHistory();
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
closeSafetyPlan.addEventListener('click', function() {
|
||||
@@ -1739,23 +1216,41 @@ Sovereignty and service always.`;
|
||||
});
|
||||
|
||||
saveSafetyPlan.addEventListener('click', function() {
|
||||
var plan = {
|
||||
warningSigns: document.getElementById('sp-warning-signs').value,
|
||||
coping: document.getElementById('sp-coping').value,
|
||||
distraction: document.getElementById('sp-distraction').value,
|
||||
help: document.getElementById('sp-help').value,
|
||||
environment: document.getElementById('sp-environment').value
|
||||
};
|
||||
try {
|
||||
var snapshot = saveSafetyPlanVersion(getSafetyPlanFormData(), { source: 'save' });
|
||||
setSafetyPlanStatus('Saved locally as a new version at ' + formatSafetyPlanTimestamp(snapshot.savedAt) + '.', 'success');
|
||||
localStorage.setItem('timmy_safety_plan', JSON.stringify(plan));
|
||||
safetyPlanModal.classList.remove('active');
|
||||
_restoreSafetyPlanFocus();
|
||||
alert('Safety plan saved locally.');
|
||||
} catch (e) {
|
||||
setSafetyPlanStatus('Error saving plan.', 'error');
|
||||
alert('Error saving plan.');
|
||||
}
|
||||
});
|
||||
|
||||
// ===== SAFETY PLAN FOCUS TRAP (fix #65) =====
|
||||
// Focusable elements inside the modal, in tab order
|
||||
var _spFocusableIds = [
|
||||
'close-safety-plan',
|
||||
'sp-warning-signs',
|
||||
'sp-coping',
|
||||
'sp-distraction',
|
||||
'sp-help',
|
||||
'sp-environment',
|
||||
'cancel-safety-plan',
|
||||
'save-safety-plan'
|
||||
];
|
||||
var _spTriggerEl = null; // element that opened the modal
|
||||
|
||||
function _getSpFocusableEls() {
|
||||
return Array.prototype.slice.call(
|
||||
safetyPlanModal.querySelectorAll('button:not([disabled]), textarea:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')
|
||||
).filter(function(el) {
|
||||
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
|
||||
});
|
||||
return _spFocusableIds
|
||||
.map(function(id) { return document.getElementById(id); })
|
||||
.filter(function(el) { return el && !el.disabled; });
|
||||
}
|
||||
|
||||
function _trapSafetyPlanFocus(e) {
|
||||
@@ -1812,13 +1307,17 @@ Sovereignty and service always.`;
|
||||
|
||||
// Wire open buttons to activate focus trap
|
||||
safetyPlanBtn.addEventListener('click', function() {
|
||||
openSafetyPlanModal(safetyPlanBtn);
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
_activateSafetyPlanFocusTrap(safetyPlanBtn);
|
||||
});
|
||||
|
||||
// Crisis panel safety plan button (if crisis panel is visible)
|
||||
if (crisisSafetyPlanBtn) {
|
||||
crisisSafetyPlanBtn.addEventListener('click', function() {
|
||||
openSafetyPlanModal(crisisSafetyPlanBtn);
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
_activateSafetyPlanFocusTrap(crisisSafetyPlanBtn);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1965,7 +1464,9 @@ 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') {
|
||||
openSafetyPlanModal(safetyPlanBtn);
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
_activateSafetyPlanFocusTrap(safetyPlanBtn);
|
||||
// Clean up URL
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
|
||||
@@ -28,6 +28,27 @@ class TestCrisisOverlayFocusTrap(unittest.TestCase):
|
||||
'Expected overlay focus trap to register on document keydown.',
|
||||
)
|
||||
|
||||
def test_overlay_escape_closes_and_restores_focus(self):
|
||||
"""Escape key must close the overlay and restore focus to the chat input."""
|
||||
trap_start = self.html.find('function trapFocusInOverlay')
|
||||
self.assertGreater(trap_start, -1, "trapFocusInOverlay function not found")
|
||||
trap_section = self.html[trap_start:trap_start + 1500]
|
||||
self.assertIn(
|
||||
"e.key === 'Escape'",
|
||||
trap_section,
|
||||
"Expected trapFocusInOverlay to handle Escape key.",
|
||||
)
|
||||
self.assertIn(
|
||||
'crisisOverlay.classList.remove',
|
||||
trap_section,
|
||||
"Expected Escape to remove 'active' class from crisis overlay.",
|
||||
)
|
||||
self.assertIn(
|
||||
'msgInput.focus()',
|
||||
trap_section,
|
||||
"Expected Escape to restore focus to chat input as fallback.",
|
||||
)
|
||||
|
||||
def test_overlay_disables_background_interaction(self):
|
||||
self.assertRegex(
|
||||
self.html,
|
||||
@@ -54,18 +75,14 @@ class TestCrisisOverlayFocusTrap(unittest.TestCase):
|
||||
|
||||
def test_overlay_initial_focus_targets_enabled_call_link(self):
|
||||
"""Overlay must focus the Call 988 link, not the disabled dismiss button."""
|
||||
# Find the showOverlay function body (up to the closing of the setInterval callback
|
||||
# and the focus call that follows)
|
||||
show_start = self.html.find('function showOverlay()')
|
||||
self.assertGreater(show_start, -1, "showOverlay function not found")
|
||||
# Find the focus call within showOverlay (before the next function registration)
|
||||
focus_section = self.html[show_start:show_start + 2000]
|
||||
self.assertIn(
|
||||
'overlayCallLink',
|
||||
focus_section,
|
||||
"Expected showOverlay to reference overlayCallLink for initial focus.",
|
||||
)
|
||||
# Ensure the old buggy pattern is gone
|
||||
focus_line_region = self.html[show_start + 800:show_start + 1200]
|
||||
self.assertNotIn(
|
||||
'overlayDismissBtn.focus()',
|
||||
@@ -80,6 +97,22 @@ class TestCrisisOverlayFocusTrap(unittest.TestCase):
|
||||
"Expected a JS reference to the .overlay-call link element.",
|
||||
)
|
||||
|
||||
def test_overlay_inert_uses_id_selector(self):
|
||||
"""inert must target #app (getElementById), not .app (querySelector)."""
|
||||
show_start = self.html.find('function showOverlay()')
|
||||
self.assertGreater(show_start, -1, "showOverlay function not found")
|
||||
show_section = self.html[show_start:show_start + 1500]
|
||||
self.assertIn(
|
||||
"getElementById('app')",
|
||||
show_section,
|
||||
"Expected showOverlay to use getElementById('app') for inert.",
|
||||
)
|
||||
self.assertNotIn(
|
||||
"querySelector('.app')",
|
||||
show_section,
|
||||
"showOverlay must not use querySelector('.app') — element is #app.",
|
||||
)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
unittest.main()
|
||||
|
||||
120
tests/test_crisis_overlay_keyboard_navigation.py
Normal file
120
tests/test_crisis_overlay_keyboard_navigation.py
Normal file
@@ -0,0 +1,120 @@
|
||||
"""Playwright regression test: crisis overlay keyboard navigation (issue #95).
|
||||
|
||||
Tests the full Tab / Shift+Tab / Escape flow in a real browser.
|
||||
|
||||
Run: pytest -q tests/test_crisis_overlay_keyboard_navigation.py
|
||||
"""
|
||||
import pathlib
|
||||
import pytest
|
||||
|
||||
ROOT = pathlib.Path(__file__).resolve().parents[1]
|
||||
INDEX_HTML = ROOT / 'index.html'
|
||||
|
||||
# Skip if playwright is not installed
|
||||
pytest.importorskip("playwright.sync_api")
|
||||
from playwright.sync_api import sync_playwright
|
||||
|
||||
|
||||
@pytest.fixture(scope="module")
|
||||
def browser_page():
|
||||
"""Launch a headless browser and load index.html."""
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True)
|
||||
page = browser.new_page()
|
||||
page.goto(f"file://{INDEX_HTML}")
|
||||
page.wait_for_load_state("domcontentloaded")
|
||||
yield page
|
||||
browser.close()
|
||||
|
||||
|
||||
def _open_overlay(page):
|
||||
"""Trigger the crisis overlay via JS (bypasses the 10s countdown)."""
|
||||
page.evaluate("""() => {
|
||||
var overlay = document.getElementById('crisis-overlay');
|
||||
overlay.classList.add('active');
|
||||
var callLink = document.querySelector('.overlay-call');
|
||||
if (callLink) callLink.focus();
|
||||
}""")
|
||||
|
||||
|
||||
def _close_overlay(page):
|
||||
"""Remove overlay active class."""
|
||||
page.evaluate("document.getElementById('crisis-overlay').classList.remove('active')")
|
||||
|
||||
|
||||
class TestCrisisOverlayKeyboard:
|
||||
def test_tab_wraps_from_last_to_first(self, browser_page):
|
||||
"""Tab from last focusable element wraps to first."""
|
||||
page = browser_page
|
||||
_open_overlay(page)
|
||||
|
||||
# Get focusable elements count
|
||||
count = page.evaluate("""() => {
|
||||
var els = document.getElementById('crisis-overlay').querySelectorAll(
|
||||
'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
return els.length;
|
||||
}""")
|
||||
assert count >= 2, f"Expected at least 2 focusable elements, got {count}"
|
||||
|
||||
# Tab through all elements to reach the last
|
||||
for _ in range(count):
|
||||
page.keyboard.press("Tab")
|
||||
|
||||
# One more Tab should wrap back to first element
|
||||
page.keyboard.press("Tab")
|
||||
first_text = page.evaluate("document.activeElement.textContent.trim()")
|
||||
assert "988" in first_text or "Call" in first_text, \
|
||||
f"Tab wrap failed: focused '{first_text}', expected Call 988 link"
|
||||
|
||||
_close_overlay(page)
|
||||
|
||||
def test_shift_tab_wraps_from_first_to_last(self, browser_page):
|
||||
"""Shift+Tab from first focusable element wraps to last."""
|
||||
page = browser_page
|
||||
_open_overlay(page)
|
||||
|
||||
# Focus should be on first (Call 988 link)
|
||||
page.evaluate("document.querySelector('.overlay-call').focus()")
|
||||
|
||||
# Shift+Tab should wrap to last element
|
||||
page.keyboard.press("Shift+Tab")
|
||||
tag = page.evaluate("document.activeElement.tagName.toLowerCase()")
|
||||
assert tag in ("button", "a"), \
|
||||
f"Shift+Tab wrap failed: focused <{tag}>, expected <button> or <a>"
|
||||
|
||||
_close_overlay(page)
|
||||
|
||||
def test_escape_closes_overlay(self, browser_page):
|
||||
"""Escape closes the crisis overlay."""
|
||||
page = browser_page
|
||||
_open_overlay(page)
|
||||
|
||||
assert page.evaluate("document.getElementById('crisis-overlay').classList.contains('active')")
|
||||
page.keyboard.press("Escape")
|
||||
assert not page.evaluate("document.getElementById('crisis-overlay').classList.contains('active')), \
|
||||
"Escape did not close the overlay"
|
||||
|
||||
def test_escape_restores_focus_to_chat_input(self, browser_page):
|
||||
"""Escape restores focus to the chat input."""
|
||||
page = browser_page
|
||||
_open_overlay(page)
|
||||
|
||||
page.keyboard.press("Escape")
|
||||
focused_id = page.evaluate("document.activeElement.id")
|
||||
assert focused_id == "msg-input", \
|
||||
f"Escape focused '{focused_id}', expected 'msg-input'"
|
||||
|
||||
def test_background_not_tabbable_when_overlay_open(self, browser_page):
|
||||
"""Background elements should not be reachable via Tab when overlay is open."""
|
||||
page = browser_page
|
||||
_open_overlay(page)
|
||||
|
||||
# Tab 20 times — should never reach chat input
|
||||
for _ in range(20):
|
||||
page.keyboard.press("Tab")
|
||||
focused_id = page.evaluate("document.activeElement.id")
|
||||
assert focused_id != "msg-input", \
|
||||
"Background chat input was reachable while overlay was open"
|
||||
|
||||
_close_overlay(page)
|
||||
@@ -1,21 +0,0 @@
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
def test_safety_plan_version_history_contract_present() -> None:
|
||||
html = Path("index.html").read_text(encoding="utf-8")
|
||||
|
||||
required_snippets = [
|
||||
'id="safety-plan-history"',
|
||||
'id="safety-plan-diff"',
|
||||
'id="safety-plan-status"',
|
||||
'Version History',
|
||||
'timmy_safety_plan_versions',
|
||||
'function renderSafetyPlanVersionHistory()',
|
||||
'function renderSafetyPlanDiff(',
|
||||
'function restoreSafetyPlanVersion(',
|
||||
'diff-added',
|
||||
'diff-removed',
|
||||
]
|
||||
|
||||
for snippet in required_snippets:
|
||||
assert snippet in html, f"missing safety plan versioning contract: {snippet}"
|
||||
Reference in New Issue
Block a user