Skip to content

Commit 927f60b

Browse files
Archithclaude
Archith
and
claude
committed
Simplify and improve session details modal
- Removed non-functional Code tab (was showing empty editor) - Removed broken Security tab (device tracking not implemented) - Simplified to 3 tabs: Notes, Session Info, Candidate Behavior - Improved Activity tab with clearer metrics: - Shows Engagement Level (High/Medium/Low) instead of confusing percentage - Added explanations for each metric - Shows idle time as minutes and percentage of session - Added help section explaining what metrics mean - Renamed 'Suspicious Patterns' to 'Notable Behaviors' (less accusatory) - Updated Session Info tab with cleaner layout - Added warning that activity data requires candidate consent 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ee78205 commit 927f60b

File tree

2 files changed

+75
-74
lines changed

2 files changed

+75
-74
lines changed

‎index.html‎

Lines changed: 15 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -399,10 +399,8 @@ <h3>Session: <span id="detail-session-code"></span></h3>
399399

400400
<div class="session-detail-tabs">
401401
<button class="detail-tab active" data-tab="notes">📝 Notes</button>
402-
<button class="detail-tab" data-tab="code">💻 Code</button>
403-
<button class="detail-tab" data-tab="info">ℹ️ Info</button>
404-
<button class="detail-tab" data-tab="security">🔒 Security</button>
405-
<button class="detail-tab" data-tab="activity">📊 Activity</button>
402+
<button class="detail-tab" data-tab="info">ℹ️ Session Info</button>
403+
<button class="detail-tab" data-tab="activity">📊 Candidate Behavior</button>
406404
</div>
407405

408406
<div class="tab-content" id="notes-tab" style="display: block;">
@@ -423,62 +421,27 @@ <h3>Session: <span id="detail-session-code"></span></h3>
423421
</div>
424422
</div>
425423

426-
<div class="tab-content" id="code-tab" style="display: none;">
427-
<div id="session-code-viewer" style="height: 400px; border: 1px solid #444;"></div>
428-
</div>
429424

430425
<div class="tab-content" id="info-tab" style="display: none;">
431-
<div class="session-info-display">
432-
<p><strong>Created:</strong> <span id="display-created"></span></p>
433-
<p><strong>Duration:</strong> <span id="display-duration"></span></p>
434-
<p><strong>Participants:</strong> <span id="display-participants"></span></p>
435-
<p><strong>Status:</strong> <span id="display-status"></span></p>
436-
</div>
437-
</div>
438-
439-
<div class="tab-content" id="security-tab" style="display: none;">
440-
<div class="security-info-display">
441-
<h4>🔍 Session Security & Tracking</h4>
442-
<div id="security-tracking-data">
443-
<p class="loading-message">Loading security data...</p>
444-
</div>
445-
446-
<h4>👥 Participant Activity</h4>
447-
<div id="participant-activity">
448-
<table class="security-table">
449-
<thead>
450-
<tr>
451-
<th>User</th>
452-
<th>Type</th>
453-
<th>Location</th>
454-
<th>Device</th>
455-
<th>IP Hash</th>
456-
<th>Flags</th>
457-
</tr>
458-
</thead>
459-
<tbody id="participant-activity-body">
460-
<!-- Will be populated dynamically -->
461-
</tbody>
462-
</table>
463-
</div>
464-
465-
<h4>📋 Tracking Notes & Suspicious Activity</h4>
466-
<div id="security-alerts">
467-
<ul id="security-alerts-list">
468-
<!-- Will be populated dynamically with tracking notes -->
469-
</ul>
470-
</div>
471-
472-
<h4>🔍 Detailed Login & Device Information</h4>
473-
<div id="detailed-tracking-info">
474-
<!-- Will be populated with fun detailed view -->
426+
<div class="session-info-display" style="padding: 20px;">
427+
<h4>📅 Session Details</h4>
428+
<div style="display: grid; grid-template-columns: 150px 1fr; gap: 15px; margin-top: 15px;">
429+
<strong>Session Code:</strong> <span id="detail-session-code" style="font-family: monospace; color: #42a5f5;"></span>
430+
<strong>Status:</strong> <span id="display-status"></span>
431+
<strong>Started:</strong> <span id="display-created"></span>
432+
<strong>Duration:</strong> <span id="display-duration"></span>
433+
<strong>Participants:</strong> <span id="display-participants"></span>
475434
</div>
476435
</div>
477436
</div>
478437

438+
479439
<div class="tab-content" id="activity-tab" style="display: none;">
480440
<div class="activity-info-display" style="padding: 20px;">
481-
<h4>📊 Candidate Activity Analysis</h4>
441+
<h4>📊 Candidate Behavior Monitoring</h4>
442+
<div style="background: rgba(255, 193, 7, 0.1); padding: 10px; border-radius: 5px; margin-bottom: 15px;">
443+
<small style="color: #ffc107;">⚠️ This data is collected only when candidates consent to activity monitoring</small>
444+
</div>
482445
<div id="activity-tracking-data">
483446
<p class="loading-message">Loading activity data...</p>
484447
</div>

‎scripts/app.js‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1256,65 +1256,103 @@
12561256
const scoreColor = activityData.activityScore > 80 ? '#4caf50' :
12571257
activityData.activityScore > 60 ? '#ff9800' : '#ff4444';
12581258

1259+
// Calculate engagement level
1260+
let engagementLevel = 'High';
1261+
let engagementColor = '#4caf50';
1262+
if (activityData.activityScore < 60) {
1263+
engagementLevel = 'Low';
1264+
engagementColor = '#ff4444';
1265+
} else if (activityData.activityScore < 80) {
1266+
engagementLevel = 'Medium';
1267+
engagementColor = '#ff9800';
1268+
}
1269+
12591270
container.innerHTML = `
12601271
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; color: white; margin-bottom: 20px;">
12611272
<div style="display: flex; justify-content: space-between; align-items: center;">
12621273
<div>
1263-
<h3 style="margin: 0; font-size: 24px;">Activity Score</h3>
1264-
<div style="font-size: 48px; font-weight: bold; color: ${scoreColor}; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
1265-
${activityData.activityScore || 0}%
1274+
<h3 style="margin: 0; font-size: 20px; opacity: 0.9;">Engagement Level</h3>
1275+
<div style="font-size: 36px; font-weight: bold; color: ${engagementColor}; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
1276+
${engagementLevel}
1277+
</div>
1278+
<div style="font-size: 14px; opacity: 0.7; margin-top: 5px;">
1279+
Based on activity patterns
12661280
</div>
12671281
</div>
12681282
<div style="text-align: right;">
12691283
<div style="font-size: 14px; opacity: 0.9;">Session Duration</div>
12701284
<div style="font-size: 20px; font-weight: bold;">${activityData.sessionDurationMinutes || 0} min</div>
1285+
<div style="font-size: 12px; opacity: 0.7; margin-top: 5px;">
1286+
Score: ${activityData.activityScore || 0}/100
1287+
</div>
12711288
</div>
12721289
</div>
12731290
</div>
12741291
1292+
<h4 style="margin-bottom: 15px; color: #666;">📊 Behavior Metrics</h4>
1293+
12751294
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
1276-
<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #42a5f5;">
1277-
<div style="color: #666; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Tab Switches</div>
1295+
<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid ${activityData.tabSwitches > 10 ? '#ff9800' : '#42a5f5'};">
1296+
<div style="color: #666; font-size: 12px; margin-bottom: 5px;">🔄 TAB SWITCHES</div>
12781297
<div style="font-size: 24px; font-weight: bold; color: ${activityData.tabSwitches > 10 ? '#ff9800' : '#333'};">
12791298
${activityData.tabSwitches || 0}
12801299
</div>
1300+
<div style="font-size: 11px; color: #999; margin-top: 5px;">
1301+
${activityData.tabSwitches > 10 ? 'High (may indicate looking up answers)' :
1302+
activityData.tabSwitches > 5 ? 'Moderate' : 'Normal'}
1303+
</div>
12811304
</div>
12821305
1283-
<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #66bb6a;">
1284-
<div style="color: #666; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Idle Periods</div>
1306+
<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid ${activityData.idlePeriods > 5 ? '#ff9800' : '#66bb6a'};">
1307+
<div style="color: #666; font-size: 12px; margin-bottom: 5px;">⏸️ IDLE PERIODS</div>
12851308
<div style="font-size: 24px; font-weight: bold; color: #333;">
12861309
${activityData.idlePeriods || 0}
12871310
</div>
1311+
<div style="font-size: 11px; color: #999; margin-top: 5px;">
1312+
Times inactive for >1 minute
1313+
</div>
12881314
</div>
12891315
12901316
<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #ffa726;">
1291-
<div style="color: #666; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Total Idle Time</div>
1317+
<div style="color: #666; font-size: 12px; margin-bottom: 5px;">⏱️ TOTAL IDLE TIME</div>
12921318
<div style="font-size: 24px; font-weight: bold; color: #333;">
1293-
${activityData.totalIdleSeconds || 0}s
1319+
${Math.round((activityData.totalIdleSeconds || 0) / 60)} min
1320+
</div>
1321+
<div style="font-size: 11px; color: #999; margin-top: 5px;">
1322+
${Math.round(((activityData.totalIdleSeconds || 0) / ((activityData.sessionDurationMinutes || 1) * 60)) * 100)}% of session
12941323
</div>
12951324
</div>
12961325
</div>
12971326
12981327
${activityData.suspiciousPatterns && activityData.suspiciousPatterns.length > 0 ? `
12991328
<div style="background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.3); border-radius: 8px; padding: 15px; margin-top: 20px;">
1300-
<h4 style="color: #ff9800; margin-top: 0;">⚠️ Suspicious Patterns Detected</h4>
1329+
<h4 style="color: #ff9800; margin-top: 0;">⚠️ Notable Behaviors</h4>
13011330
<ul style="margin: 10px 0;">
1302-
${activityData.suspiciousPatterns.map(p => `
1303-
<li style="color: #666; margin: 5px 0;">
1304-
${p.type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
1305-
${p.duration ? `(${Math.round(p.duration/1000)}s)` : ''}
1306-
${p.size ? `(${p.size} chars)` : ''}
1307-
</li>
1308-
`).join('')}
1331+
${activityData.suspiciousPatterns.map(p => {
1332+
let description = '';
1333+
if (p.type === 'quick_tab_switch') {
1334+
description = '• Quick tab switch (returned in < 5 seconds)';
1335+
} else if (p.type === 'switch_and_paste') {
1336+
description = `• Pasted content after switching tabs ${p.size ? `(${p.size} characters)` : ''}`;
1337+
} else {
1338+
description = `• ${p.type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}`;
1339+
}
1340+
return `<li style="color: #666; margin: 5px 0; list-style: none;">${description}</li>`;
1341+
}).join('')}
13091342
</ul>
13101343
</div>
13111344
` : ''}
13121345
1313-
${activityData.finalReport ? `
1314-
<div style="margin-top: 20px; padding: 10px; background: #e8f5e9; border-radius: 4px; text-align: center; color: #2e7d32;">
1315-
✅ Final activity report saved at session end
1316-
</div>
1317-
` : ''}
1346+
<div style="background: #e3f2fd; border-radius: 8px; padding: 15px; margin-top: 20px;">
1347+
<h5 style="margin-top: 0; color: #1976d2;">ℹ️ Understanding the Metrics</h5>
1348+
<ul style="font-size: 12px; color: #666; margin: 10px 0; padding-left: 20px;">
1349+
<li><strong>Engagement Level:</strong> Overall assessment based on activity patterns (High/Medium/Low)</li>
1350+
<li><strong>Tab Switches:</strong> Number of times candidate switched away from the interview tab</li>
1351+
<li><strong>Idle Periods:</strong> Number of times candidate was inactive for more than 1 minute</li>
1352+
<li><strong>Score:</strong> 0-100 score calculated from behavior patterns (100 = perfect engagement)</li>
1353+
</ul>
1354+
<small style="color: #999;">Note: These metrics are indicators only and should be considered alongside interview performance.</small>
1355+
</div>
13181356
`;
13191357
})
13201358
.catch(error => {

0 commit comments

Comments
 (0)