Portrait layout, clean background, richer Recurring Themes

- Portrait: text justified full-width, keyword tags in a row below (not side-by-side)
- index.css: remove dot-grid overlay so panel background is clean dark (not grey)
- main.py: normalize coaching area synonyms (Active Listening → Listening, etc.)
and capture the latest suggestion text per area
- ProfileView: Recurring Themes shows "{N} of {total} sessions" count + tip text
so each card explains what to work on, not just a label with a flagged count

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/main.py

@@ -1397,10 +1397,46 @@ def get_profile(user_id: str = Depends(get_current_user)):
 
     # Recurring coaching areas
     from collections import Counter as _Counter
-    coaching_areas = []
+
+    def _normalize_area(area: str) -> str:
+        a = area.lower().strip()
+        _SYNONYMS = {
+            "active listening": "listening",
+            "deep listening": "listening",
+            "listen more": "listening",
+            "talk ratio": "talk balance",
+            "talk ratio balance": "talk balance",
+            "giving space": "talk balance",
+            "space for others": "talk balance",
+            "question quality": "asking questions",
+            "question asking": "asking questions",
+            "probing questions": "asking questions",
+            "follow-up questions": "asking questions",
+            "self awareness": "self-awareness",
+            "self-reflection": "self-awareness",
+            "self reflection": "self-awareness",
+        }
+        return _SYNONYMS.get(a, a)
+
+    coaching_map: dict = {}
     for p in parsed:
-        coaching_areas.extend([c.get("area") for c in p["ins"].get("coaching_suggestions", [])[:2] if c.get("area")])
-    recurring_coaching = [{"area": a, "count": c} for a, c in _Counter(coaching_areas).most_common(3) if c >= 2]
+        for c in p["ins"].get("coaching_suggestions", [])[:2]:
+            area = c.get("area", "")
+            if not area:
+                continue
+            key = _normalize_area(area)
+            coaching_map.setdefault(key, []).append(c.get("suggestion", ""))
+
+    coaching_counter = _Counter({k: len(v) for k, v in coaching_map.items()})
+    recurring_coaching = [
+        {
+            "area": a.title(),
+            "count": c,
+            "tip": coaching_map[a][-1] if coaching_map.get(a) else "",
+        }
+        for a, c in coaching_counter.most_common(3)
+        if c >= 2
+    ]
 
     # Personality synthesis
     _dim_paths = {

frontend/src/components/ProfileView.jsx

@@ -618,27 +618,25 @@ export default function ProfileView({ active, onUpload }) {
             borderLeft: "3px solid rgba(59,130,246,0.65)",
             paddingLeft: 16, marginTop: 10,
           }}>
-            <div style={{ display: "flex", gap: 20, alignItems: "flex-start" }}>
-              <p style={{ flex: 1, fontSize: 14, color: "#c4c2d8",
-                lineHeight: 1.9, margin: 0 }}>
-                {personality.paragraph}
-              </p>
-              {keywords.length > 0 && (
-                <div style={{ display: "flex", flexDirection: "column", gap: 6, flexShrink: 0 }}>
-                  {keywords.map((kw, i) => (
-                    <span key={i} style={{
-                      fontSize: 12, fontWeight: 600, padding: "5px 14px",
-                      borderRadius: 6, letterSpacing: 0.2,
-                      background: "linear-gradient(#151922, #151922) padding-box, linear-gradient(135deg, rgba(59,130,246,0.5), rgba(34,211,238,0.5)) border-box",
-                      border: "1px solid transparent",
-                      color: "#60a5fa", whiteSpace: "nowrap",
-                    }}>
-                      {kw}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
+            <p style={{ fontSize: 14, color: "#c4c2d8",
+              lineHeight: 1.9, margin: 0, textAlign: "justify" }}>
+              {personality.paragraph}
+            </p>
+            {keywords.length > 0 && (
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
+                {keywords.map((kw, i) => (
+                  <span key={i} style={{
+                    fontSize: 12, fontWeight: 600, padding: "5px 14px",
+                    borderRadius: 6, letterSpacing: 0.2,
+                    background: "linear-gradient(#151922, #151922) padding-box, linear-gradient(135deg, rgba(59,130,246,0.5), rgba(34,211,238,0.5)) border-box",
+                    border: "1px solid transparent",
+                    color: "#60a5fa", whiteSpace: "nowrap",
+                  }}>
+                    {kw}
+                  </span>
+                ))}
+              </div>
+            )}
           </div>
         </div>
         </Reveal>
@@ -675,20 +673,26 @@ export default function ProfileView({ active, onUpload }) {
               const accent = ["#f87171", "#fb923c", "#818cf8"][i] || "#8b89aa"
               return (
                 <div key={item.area} style={{
-                  display: "flex", alignItems: "center", justifyContent: "space-between",
-                  padding: "12px 16px", borderRadius: 10,
+                  padding: "14px 16px", borderRadius: 10,
                   background: "#151922", border: `1px solid #1e2438`,
                   borderLeft: `3px solid ${accent}`,
                 }}>
-                  <span style={{ fontSize: 13, fontWeight: 600, color: "#f0eeff",
-                    textTransform: "capitalize" }}>
-                    {item.area}
-                  </span>
-                  <span style={{ fontSize: 11, color: accent, fontWeight: 700,
-                    background: `${accent}15`, border: `1px solid ${accent}30`,
-                    borderRadius: 20, padding: "3px 10px", whiteSpace: "nowrap" }}>
-                    flagged {item.count}× across sessions
-                  </span>
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: item.tip ? 8 : 0 }}>
+                    <span style={{ fontSize: 13, fontWeight: 700, color: "#f0eeff",
+                      textTransform: "capitalize" }}>
+                      {item.area}
+                    </span>
+                    <span style={{ fontSize: 11, color: accent, fontWeight: 600,
+                      background: `${accent}15`, border: `1px solid ${accent}30`,
+                      borderRadius: 20, padding: "3px 10px", whiteSpace: "nowrap", marginLeft: 12 }}>
+                      {item.count} of {session_count} sessions
+                    </span>
+                  </div>
+                  {item.tip && (
+                    <p style={{ margin: 0, fontSize: 12, color: "#8b89aa", lineHeight: 1.65 }}>
+                      {item.tip}
+                    </p>
+                  )}
                 </div>
               )
             })}

frontend/src/index.css

@@ -7,8 +7,6 @@
 body {
   width: 100%;
   background: #0f1117;
-  background-image: radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1px);
-  background-size: 28px 28px;
   color: #f0eeff;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;