feat(bigmind): add tiered AI-generated achievement badges with image rendering

mcp/bigmind/bigmind/web_render.py

@@ -29,18 +29,24 @@ def _render_achievements(achievements: list) -> str:
         def _esc(s):
             return (s or "").replace('"', """).replace("'", "'")
 
-        lock_overlay = "" if a["unlocked"] else '<span class="ach-lock">🔒</span>'
+        lock_overlay = '<span class="ach-lock">🔒</span>' if not a["unlocked"] else ''
+
+        if a.get("image"):
+            tier = a["id"].rsplit("_", 1)[-1]
+            visual_html = f'<div class="ach-image tier-{tier}">{lock_overlay}</div>'
+        else:
+            visual_html = f'<div class="ach-icon">{a["icon"]}{lock_overlay}</div>'
 
         return (
-            f'<div class="ach-card{locked_cls} ach-trigger"'
-            f' data-icon="{_esc(a["icon"])}"'
+            f'<div class="ach-card{locked_cls} ach-trigger" data-image="{_esc(a.get("image") or "")}"'
+            f' data-icon="{_esc(a["icon"] or "")}"'
             f' data-name="{_esc(a["name"])}"'
             f' data-desc="{_esc(a["description"])}"'
             f' data-unlocked="{1 if a["unlocked"] else 0}"'
             f' data-date="{_esc(a.get("unlocked_at") or "")}"'
             f' data-condition="{_esc(a.get("condition") or "")}"'
             f' data-extra="{_esc(a.get("extra") or "")}">'
-            f'<div class="ach-icon">{a["icon"]}{lock_overlay}</div>'
+            f'{visual_html}'
             f'<div class="ach-name">{a["name"]}</div>'
             f'{date_html}'
             f'{countdown_html}'
@@ -283,11 +289,65 @@ def _render_html(data: dict) -> str:
   .ach-card:not(.locked):hover {{ border-color: var(--accent); transform: translateY(-2px); }}
   .ach-card.locked {{ opacity: 0.35; filter: grayscale(0.6); }}
   .ach-card.locked:hover {{ opacity: 0.55; border-color: var(--muted); }}
+
+  .ach-image {{
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    margin: 0 auto 8px;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+  }}
+
+  .tier-bronze {{
+    box-shadow: 0 0 8px rgba(205, 127, 50, 0.7);
+    border: 3px solid #cd7f32;
+  }}
+
+  .tier-silver {{
+    box-shadow: 0 0 8px rgba(170, 169, 173, 0.7);
+    border: 3px solid #aaa9ad;
+  }}
+
+  .tier-gold {{
+    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
+    border: 3px solid #ffd700;
+  }}
+
+  .tier-platinum {{
+    box-shadow: 0 0 12px rgba(229, 228, 226, 0.8);
+    border: 3px solid #e5e4e2;
+  }}
+
+  .ach-card.locked::after {{
+    content: '🔒';
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 20px;
+    opacity: 0.8;
+    z-index: 1;
+  }}
+
+  .ach-card.locked .ach-icon,
+  .ach-card.locked .ach-image {{
+    opacity: 0.5;
+  }}
   .ach-icon {{ font-size: 28px; line-height: 1; margin-bottom: 6px; position: relative; display: inline-block; }}
   .ach-lock {{ position: absolute; bottom: -4px; right: -6px; font-size: 12px; }}
   .ach-name {{ font-size: 10px; font-weight: 600; color: var(--text); line-height: 1.3; word-break: break-word; }}
   .ach-date {{ font-size: 9px; color: var(--muted); margin-top: 3px; }}
   .ach-countdown {{ font-size: 9px; color: var(--yellow); margin-top: 3px; font-weight: 500; }}
+  .ap-image {{
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+    margin: 0 auto 8px;
+  }}
+
   /* Achievement popup panel */
   #ach-popup {{
     display: none; position: fixed; z-index: 200;
@@ -299,6 +359,15 @@ def _render_html(data: dict) -> str:
   #ach-popup.pinned {{ pointer-events: auto; }}
   #ach-popup.visible {{ display: block; }}
   .ap-icon  {{ font-size: 40px; text-align: center; margin-bottom: 8px; }}
+
+  .ap-image {{
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+    margin: 0 auto 8px;
+  }}
   .ap-name  {{ font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 6px; }}
   .ap-badge {{
     display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
@@ -557,7 +626,12 @@ def _render_html(data: dict) -> str:
 
     function showPopup(card, pin) {{
       var d = card.dataset;
-      document.getElementById('ap-icon').textContent = d.icon;
+      var tier = d.id.split('_').pop();
+      if (d.image) {{
+        document.getElementById('ap-icon').innerHTML = "<img class=\"ap-image tier-\" + tier + \" src=\" + d.image + \" alt=\" + d.name + \">";
+      }} else {{
+        document.getElementById('ap-icon').textContent = d.icon;
+      }}
       document.getElementById('ap-name').textContent = d.name;
       var badge = document.getElementById('ap-badge');
       if (d.unlocked === '1') {{