Rework caller buttons and info panel for slim backgrounds

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.

backend/main.py

@@ -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):
+        if isinstance(bg, dict):
-            caller_info["energy_level"] = bg.energy_level
+            details = bg.get("specific_details") or []
-            caller_info["emotional_state"] = bg.emotional_state
+            caller_info["identity"] = bg.get("identity", "")
-            caller_info["communication_style"] = _normalize_style_key(bg.communication_style)
+            caller_info["situation"] = bg.get("situation", "")
-            caller_info["signature_detail"] = bg.signature_detail
+            caller_info["signature"] = details[0] if details else ""
-            caller_info["situation_summary"] = bg.situation_summary
+            caller_info["secret_want"] = bg.get("secret_want", "")
-            caller_info["pool_name"] = bg.pool_name
+            caller_info["voice"] = bg.get("voice", "")
-        caller_info["call_shape"] = session.caller_shapes.get(k, "standard")
-        caller_info["avatar_url"] = f"/api/avatar/{v['name']}"
         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,
+            "identity": bg.get("identity", ""),
-            "energy_level": bg.energy_level,
+            "situation": bg.get("situation", ""),
-            "signature_detail": bg.signature_detail,
+            "signature": details[0] if details else "",
-            "situation_summary": bg.situation_summary,
+            "secret_want": bg.get("secret_want", ""),
-            "call_shape": caller.get("shape", "standard"),
-            "communication_style": bg.communication_style,
         }
 
     # Start intern monitoring if enabled

frontend/css/style.css

@@ -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 {
+.caller-identity {
-    background: rgba(232, 121, 29, 0.2);
+    font-size: 0.85rem;
-    color: var(--accent);
+    color: var(--text);
+    font-weight: 600;
+    margin-bottom: 4px;
+    line-height: 1.3;
 }
 
-.info-badge.energy {
+.caller-situation {
-    color: white;
+    font-size: 0.8rem;
-    font-size: 0.7rem;
-}
-
-.info-badge.emotion {
-    background: rgba(154, 139, 120, 0.2);
     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 {
+.caller-secret-want {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
-    color: var(--text-muted);
+    color: #d4a030;
+    font-style: italic;
     line-height: 1.3;
 }
 

frontend/index.html

@@ -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

@@ -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 identity = document.getElementById('caller-identity');
-        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 situation = document.getElementById('caller-situation');
-        if (shapeBadge) shapeBadge.textContent = (ci.call_shape || 'standard').replace(/_/g, ' ');
+        const signature = document.getElementById('caller-signature');
-        if (energyBadge) { energyBadge.textContent = (ci.energy_level || '').replace('_', ' '); energyBadge.style.background = energyColors[ci.energy_level] || '#9a8b78'; }
+        const secretWant = document.getElementById('caller-secret-want');
-        if (emotionBadge) emotionBadge.textContent = ci.emotional_state || '';
+        if (identity) identity.textContent = ci.identity || '';
-        if (signature) signature.textContent = ci.signature_detail ? `"${ci.signature_detail}"` : '';
+        if (situation) situation.textContent = ci.situation || '';
-        if (situation) situation.textContent = ci.situation_summary || '';
+        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 {