luke/ai-podcast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework caller buttons and info panel for slim backgrounds

Browse Source 
Backend:
- /api/callers now returns slim fields: identity, situation, signature,
  secret_want, voice (was: energy_level, emotional_state,
  communication_style, signature_detail, situation_summary, pool_name,
  call_shape).
- /api/call/{caller_key} caller_info swapped to slim fields too.

Frontend:
- Caller buttons stripped to name + shortcut + returning star. No more
  energy-dots or shape-badges — those systems are being deleted.
- Caller info panel shows identity (title) / situation / signature
  (quoted detail) / secret_want (amber italic, host-only).
- Removed .energy-dot, .shape-badge, .info-badge.shape/energy/emotion
  CSS rules. Added .caller-identity and .caller-secret-want.
This commit is contained in:
luke
2026-04-05 04:26:04 -06:00
parent effd52a95c
commit 13d613df5f
4 changed files with 40 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/main.py
+15 -17
View File
@@ -8350,17 +8350,16 @@ async def get_callers():
"key": k,
"name": v["name"],
"returning": v.get("returning", False),
"avatar_url": f"/api/avatar/{v['name']}",
}
bg = session.caller_backgrounds.get(k)
if isinstance(bg, CallerBackground):
caller_info["energy_level"] = bg.energy_level
caller_info["emotional_state"] = bg.emotional_state
caller_info["communication_style"] = _normalize_style_key(bg.communication_style)
caller_info["signature_detail"] = bg.signature_detail
caller_info["situation_summary"] = bg.situation_summary
caller_info["pool_name"] = bg.pool_name
caller_info["call_shape"] = session.caller_shapes.get(k, "standard")
caller_info["avatar_url"] = f"/api/avatar/{v['name']}"
if isinstance(bg, dict):
details = bg.get("specific_details") or []
caller_info["identity"] = bg.get("identity", "")
caller_info["situation"] = bg.get("situation", "")
caller_info["signature"] = details[0] if details else ""
caller_info["secret_want"] = bg.get("secret_want", "")
caller_info["voice"] = bg.get("voice", "")
callers.append(caller_info)
return {
"callers": callers,
@@ -8454,17 +8453,16 @@ async def start_call(caller_key: str):
if caller_key in session.caller_backgrounds:
asyncio.create_task(_enrich_background_async(caller_key))
# Extract CallerBackground structured data if available
# Extract slim background for UI info panel
bg = session.caller_backgrounds.get(caller_key)
caller_info = {}
if isinstance(bg, CallerBackground):
if isinstance(bg, dict):
details = bg.get("specific_details") or []
caller_info = {
"emotional_state": bg.emotional_state,
"energy_level": bg.energy_level,
"signature_detail": bg.signature_detail,
"situation_summary": bg.situation_summary,
"call_shape": caller.get("shape", "standard"),
"communication_style": bg.communication_style,
"identity": bg.get("identity", ""),
"situation": bg.get("situation", ""),
"signature": details[0] if details else "",
"secret_want": bg.get("secret_want", ""),
}
# Start intern monitoring if enabled
frontend/css/style.css
+14 -33
View File
@@ -322,25 +322,6 @@ section h2 {
position: relative;
}
.energy-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.shape-badge {
font-size: 0.6rem;
background: rgba(232, 121, 29, 0.25);
color: var(--accent);
padding: 1px 4px;
border-radius: 3px;
font-weight: bold;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.caller-btn:hover {
border-color: var(--accent);
background: #2a1e10;
@@ -439,20 +420,19 @@ section h2 {
font-weight: 600;
}
.info-badge.shape {
background: rgba(232, 121, 29, 0.2);
color: var(--accent);
.caller-identity {
font-size: 0.85rem;
color: var(--text);
font-weight: 600;
margin-bottom: 4px;
line-height: 1.3;
}
.info-badge.energy {
color: white;
font-size: 0.7rem;
}
.info-badge.emotion {
background: rgba(154, 139, 120, 0.2);
.caller-situation {
font-size: 0.8rem;
color: var(--text-muted);
font-style: italic;
margin-bottom: 4px;
line-height: 1.3;
}
.caller-signature {
@@ -462,9 +442,10 @@ section h2 {
font-style: italic;
}
.caller-situation {
font-size: 0.8rem;
color: var(--text-muted);
.caller-secret-want {
font-size: 0.75rem;
color: #d4a030;
font-style: italic;
line-height: 1.3;
}
frontend/index.html
+3 -4
View File
@@ -73,14 +73,13 @@
<div id="call-status" class="call-status">No active call</div>
<div id="caller-info-panel" class="caller-info-panel hidden">
<div class="caller-info-row">
<span id="caller-shape-badge" class="info-badge shape"></span>
<span id="caller-energy-badge" class="info-badge energy"></span>
<span id="caller-emotion" class="info-badge emotion"></span>
<span id="caller-model-badge" class="info-badge model"></span>
<select id="caller-model-override" class="caller-model-override hidden"></select>
</div>
<div id="caller-signature" class="caller-signature"></div>
<div id="caller-identity" class="caller-identity"></div>
<div id="caller-situation" class="caller-situation"></div>
<div id="caller-signature" class="caller-signature"></div>
<div id="caller-secret-want" class="caller-secret-want"></div>
<details id="caller-background-details" class="caller-background-full">
<summary>Full Background</summary>
<div id="caller-background"></div>
frontend/js/app.js
+8 -25
View File
@@ -637,21 +637,7 @@ async function loadCallers() {
btn.dataset.key = caller.key;
let html = '';
if (caller.energy_level) {
const energyColors = { low: '#4a7ab5', medium: '#5a8a3c', high: '#e8791d', very_high: '#cc2222' };
const color = energyColors[caller.energy_level] || '#9a8b78';
html += `<span class="energy-dot" style="background:${color}" title="${caller.energy_level} energy"></span>`;
}
html += caller.returning ? `<span class="caller-name">\u2605 ${caller.name}</span>` : `<span class="caller-name">${caller.name}</span>`;
if (caller.call_shape && caller.call_shape !== 'standard') {
const shapeLabels = {
escalating_reveal: 'ER', am_i_the_asshole: 'AITA', confrontation: 'VS',
celebration: '\u{1F389}', quick_hit: 'QH', bait_and_switch: 'B&S',
the_hangup: 'HU', reactive: 'RE'
};
const label = shapeLabels[caller.call_shape] || caller.call_shape.substring(0, 2).toUpperCase();
html += `<span class="shape-badge" title="${caller.call_shape.replace(/_/g, ' ')}">${label}</span>`;
}
// Shortcut label: 1-9 for first 9, 0 for 10th
if (idx < 10) {
const shortcutKey = idx === 9 ? '0' : String(idx + 1);
@@ -742,21 +728,18 @@ async function startCall(key, name) {
if (aiInfo) aiInfo.classList.remove('hidden');
if (aiName) aiName.textContent = name;
// Show caller info panel with structured data
// Show caller info panel with slim background data
const infoPanel = document.getElementById('caller-info-panel');
if (infoPanel && data.caller_info) {
const ci = data.caller_info;
const energyColors = { low: '#4a7ab5', medium: '#5a8a3c', high: '#e8791d', very_high: '#cc2222' };
const shapeBadge = document.getElementById('caller-shape-badge');
const energyBadge = document.getElementById('caller-energy-badge');
const emotionBadge = document.getElementById('caller-emotion');
const signature = document.getElementById('caller-signature');
const identity = document.getElementById('caller-identity');
const situation = document.getElementById('caller-situation');
if (shapeBadge) shapeBadge.textContent = (ci.call_shape || 'standard').replace(/_/g, ' ');
if (energyBadge) { energyBadge.textContent = (ci.energy_level || '').replace('_', ' '); energyBadge.style.background = energyColors[ci.energy_level] || '#9a8b78'; }
if (emotionBadge) emotionBadge.textContent = ci.emotional_state || '';
if (signature) signature.textContent = ci.signature_detail ? `"${ci.signature_detail}"` : '';
if (situation) situation.textContent = ci.situation_summary || '';
const signature = document.getElementById('caller-signature');
const secretWant = document.getElementById('caller-secret-want');
if (identity) identity.textContent = ci.identity || '';
if (situation) situation.textContent = ci.situation || '';
if (signature) signature.textContent = ci.signature ? `"${ci.signature}"` : '';
if (secretWant) secretWant.textContent = ci.secret_want ? `secretly wants: ${ci.secret_want}` : '';
infoPanel.classList.remove('hidden');
}
try {