feat: add avatar caching and improve identity panel UX

performance improvements:
- implement server-side avatar caching with 1-hour TTL
- add concurrent avatar fetching on backend and frontend
- reduce avatar load time from N×300ms to ~300ms total

identity panel improvements:
- change handle label to "You" for clarity
- move bluesky profile link out of technical details
- add bluesky logo for visual recognition
- prevent JavaScript from overwriting static handle text

technical details:
- add once_cell dependency for in-memory cache
- use futures_util::future::join_all for concurrent resolution
- use Promise.all for parallel frontend avatar fetching

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

Cargo.lock

···
  "futures-util",
  "hickory-resolver",
  "log",
+ "once_cell",
  "reqwest",
  "rocketman",
  "serde",

Cargo.toml

···
 anyhow = "1.0"
 async-stream = "0.3"
 async-trait = "0.1"
+once_cell = "1.20"

src/routes.rs

···
 use actix_web::{get, web, HttpResponse, Responder};
 use serde::Deserialize;
+use once_cell::sync::Lazy;
+use std::collections::HashMap;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+use futures_util::future;
 
 use crate::firehose::FirehoseManager;
 use crate::mst;
 use crate::templates;
+
+// Avatar cache with 1 hour TTL
+struct CachedAvatar {
+    url: Option<String>,
+    timestamp: Instant,
+}
+
+static AVATAR_CACHE: Lazy<Mutex<HashMap<String, CachedAvatar>>> =
+    Lazy::new(|| Mutex::new(HashMap::new()));
+
+const CACHE_TTL: Duration = Duration::from_secs(3600);
 
 const FAVICON_SVG: &str = include_str!("../static/favicon.svg");
 
···
 pub async fn get_avatar(query: web::Query<AvatarQuery>) -> HttpResponse {
     let namespace = &query.namespace;
 
+    // Check cache first
+    {
+        let cache = AVATAR_CACHE.lock().unwrap();
+        if let Some(cached) = cache.get(namespace) {
+            if cached.timestamp.elapsed() < CACHE_TTL {
+                return HttpResponse::Ok()
+                    .insert_header(("Cache-Control", "public, max-age=3600"))
+                    .json(serde_json::json!({
+                        "avatarUrl": cached.url
+                    }));
+            }
+        }
+    }
+
+    // Cache miss or expired - fetch avatar
+    let avatar_url = fetch_avatar_for_namespace(namespace).await;
+
+    // Cache the result
+    {
+        let mut cache = AVATAR_CACHE.lock().unwrap();
+        cache.insert(namespace.clone(), CachedAvatar {
+            url: avatar_url.clone(),
+            timestamp: Instant::now(),
+        });
+    }
+
+    HttpResponse::Ok()
+        .insert_header(("Cache-Control", "public, max-age=3600"))
+        .json(serde_json::json!({
+            "avatarUrl": avatar_url
+        }))
+}
+
+async fn fetch_avatar_for_namespace(namespace: &str) -> Option<String> {
     // Reverse namespace to get domain (e.g., io.zzstoatzz -> zzstoatzz.io)
     let reversed: String = namespace.split('.').rev().collect::<Vec<&str>>().join(".");
     let handles = vec![
···
         format!("{}.bsky.social", reversed),
     ];
 
-    for handle in handles {
-        // Try to resolve handle to DID
-        let resolve_url = format!("https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle={}", handle);
-        if let Ok(response) = reqwest::get(&resolve_url).await {
-            if let Ok(data) = response.json::<serde_json::Value>().await {
-                if let Some(did) = data["did"].as_str() {
-                    // Try to get profile
-                    let profile_url = format!("https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor={}", did);
-                    if let Ok(profile_response) = reqwest::get(&profile_url).await {
-                        if let Ok(profile) = profile_response.json::<serde_json::Value>().await {
-                            if let Some(avatar) = profile["avatar"].as_str() {
-                                return HttpResponse::Ok().json(serde_json::json!({
-                                    "avatarUrl": avatar
-                                }));
-                            }
-                        }
-                    }
-                }
-            }
+    // Try all handles concurrently
+    let futures: Vec<_> = handles.iter()
+        .map(|handle| try_fetch_avatar_for_handle(handle))
+        .collect();
+
+    // Wait for all futures and return first successful result
+    let results = future::join_all(futures).await;
+
+    for result in results {
+        if let Some(avatar) = result {
+            return Some(avatar);
         }
     }
 
-    HttpResponse::Ok().json(serde_json::json!({
-        "avatarUrl": null
-    }))
+    None
+}
+
+async fn try_fetch_avatar_for_handle(handle: &str) -> Option<String> {
+    // Try to resolve handle to DID
+    let resolve_url = format!(
+        "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle={}",
+        handle
+    );
+
+    let did = match reqwest::get(&resolve_url).await {
+        Ok(response) => match response.json::<serde_json::Value>().await {
+            Ok(data) => data["did"].as_str()?.to_string(),
+            Err(_) => return None,
+        },
+        Err(_) => return None,
+    };
+
+    // Try to get profile
+    let profile_url = format!(
+        "https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor={}",
+        did
+    );
+
+    match reqwest::get(&profile_url).await {
+        Ok(response) => match response.json::<serde_json::Value>().await {
+            Ok(profile) => profile["avatar"].as_str().map(String::from),
+            Err(_) => None,
+        },
+        Err(_) => None,
+    }
 }
 
 #[derive(Deserialize)]

src/templates.rs

···
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: clamp(0.2rem, 1vmin, 0.3rem);
-            padding: clamp(0.4rem, 1vmin, 0.6rem);
             z-index: 10;
             cursor: pointer;
             transition: all 0.2s ease;
···
         }}
 
         .identity-value {{
-            font-size: clamp(0.6rem, 1.2vmin, 0.7rem);
+            font-size: 0.7rem;
             color: var(--text-lighter);
             text-align: center;
-            word-break: break-word;
-            max-width: 90%;
+            white-space: nowrap;
             font-weight: 400;
             line-height: 1.2;
+        }}
+
+        .identity-value:hover {{
+            opacity: 0.7;
         }}
 
 
···
             color: var(--text-light);
             letter-spacing: 0.05em;
             font-weight: 500;
+            text-decoration: none;
+            white-space: nowrap;
+            transition: opacity 0.2s ease;
+        }}
+
+        .identity-pds-label:hover {{
+            opacity: 0.7;
         }}
 
         .identity-avatar {{
-            width: clamp(30px, 6vmin, 45px);
-            height: clamp(30px, 6vmin, 45px);
+            width: 100%;
+            height: 100%;
             border-radius: 50%;
             object-fit: cover;
-            border: 2px solid var(--text-light);
-            margin-bottom: clamp(0.2rem, 1vmin, 0.3rem);
         }}
 
         .app-view {{
···
         <p>this visualization shows your <a href="https://atproto.com/guides/data-repos" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">Personal Data Server</a> - where your social data actually lives. unlike traditional platforms that lock everything in their database, your posts, likes, and follows are stored here, on infrastructure you control.</p>
         <p>each circle represents an app that writes to your space. <a href="https://bsky.app" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">bluesky</a> for microblogging. <a href="https://whtwnd.com" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">whitewind</a> for long-form posts. <a href="https://tangled.org" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">tangled.org</a> for code hosting. they're all just different views of the same underlying data - <strong>your</strong> data.</p>
         <p>this is what "<a href="https://overreacted.io/open-social/" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">open social</a>" means: your followers, your content, your connections - they all belong to you, not the app. switch apps anytime and take everything with you. no platform can hold your social graph hostage.</p>
-        <p><strong>how to explore:</strong> click your @ in the center to see your account details. click any app to browse the records it's created in your repository.</p>
+        <p><strong>how to explore:</strong> click your avatar in the center to see the details of your identity. click any app to browse the records it's created in your repository.</p>
         <button id="closeInfo">got it</button>
         <button id="restartTour" onclick="window.restartOnboarding()" style="margin-left: 0.5rem; background: var(--surface-hover);">restart tour</button>
     </div>
···
 
     <div class="canvas">
         <div class="identity">
-            <div class="identity-label">@</div>
-            <div class="identity-value" id="handle">loading...</div>
+            <img class="identity-avatar" id="avatar" />
             <div class="identity-pds-label">You</div>
         </div>
         <div id="field" class="loading">loading...</div>

static/app.js

···
         globalPds = initData.pds;
         globalHandle = initData.handle;
 
-        // Update identity display with handle and adapt text size
-        const handleEl = document.getElementById('handle');
-        handleEl.textContent = initData.handle;
-        adaptHandleTextSize(handleEl);
-
         // Display user's avatar if available
-        if (initData.avatar) {
-            const identity = document.querySelector('.identity');
-            const avatarImg = document.createElement('img');
-            avatarImg.src = initData.avatar;
-            avatarImg.className = 'identity-avatar';
-            avatarImg.alt = initData.handle;
-            // Insert avatar before the @ label
-            identity.insertBefore(avatarImg, identity.firstChild);
+        const avatarEl = document.getElementById('avatar');
+        if (initData.avatar && avatarEl) {
+            avatarEl.src = initData.avatar;
+            avatarEl.alt = initData.handle;
         }
 
         // Convert apps array to object for easier access
···
                     <div class="ownership-text">want to see everything stored on your PDS? check out <a href="https://pdsls.dev/${pdsHost}" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">pdsls.dev/${pdsHost}</a> - a tool for browsing all the records in your repository.</div>
                 </div>
 
+                <a href="https://bsky.app/profile/${globalHandle}" target="_blank" rel="noopener noreferrer" class="tree-item" style="text-decoration: none; display: block; margin-top: 1rem;">
+                    <div class="tree-item-header">
+                        <div style="display: flex; align-items: center; gap: 0.5rem;">
+                            <svg width="16" height="16" viewBox="0 0 600 530" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="var(--text)" />
+                            </svg>
+                            <span style="color: var(--text-light);">view profile on bluesky</span>
+                        </div>
+                        <span style="font-size: 0.6rem; color: var(--text);">↗</span>
+                    </div>
+                </a>
+
                 <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);">
                     <div style="font-size: 0.65rem; color: var(--text-light); margin-bottom: 0.5rem;">technical details</div>
                     <div class="tree-item">
···
         // Store circle size for resize handler
         globalApps._circleSize = circleSize;
 
-        appNames.forEach((namespace, i) => {
+        // Create all app divs first
+        const appDivs = appNames.map((namespace, i) => {
             const angle = (i / appNames.length) * 2 * Math.PI - Math.PI / 2; // Start from top
             const circleOffset = circleSize / 2;
             const x = centerX + radius * Math.cos(angle) - circleOffset;
···
                 <a href="${url}" target="_blank" rel="noopener noreferrer" class="app-name" data-url="${url}">${displayName} ↗</a>
             `;
 
-            // Try to fetch and display avatar
-            fetchAppAvatar(namespace).then(avatarUrl => {
-                if (avatarUrl) {
-                    const circle = div.querySelector('.app-circle');
-                    circle.innerHTML = `<img src="${avatarUrl}" class="app-logo" alt="${namespace}" />`;
-                }
+            return { div, namespace };
+        });
+
+        // Fetch all avatars concurrently
+        Promise.all(appNames.map(namespace => fetchAppAvatar(namespace)))
+            .then(avatarUrls => {
+                avatarUrls.forEach((avatarUrl, i) => {
+                    if (avatarUrl) {
+                        const circle = appDivs[i].div.querySelector('.app-circle');
+                        circle.innerHTML = `<img src="${avatarUrl}" class="app-logo" alt="${appDivs[i].namespace}" />`;
+                    }
+                });
             });
+
+        appDivs.forEach(({ div, namespace }, i) => {
+            // Reverse namespace for display and create URL
+            const displayName = namespace.split('.').reverse().join('.');
+            const url = `https://${displayName}`;
 
             // Validate URL
             fetch(`/api/validate-url?url=${encodeURIComponent(url)}`)
···
             clearTimeout(resizeTimeout);
             resizeTimeout = setTimeout(() => {
                 repositionAppCircles();
-                // Re-adapt handle text size on resize
-                const handleEl = document.getElementById('handle');
-                if (handleEl) adaptHandleTextSize(handleEl);
             }, 50); // Faster debounce for smoother updates
         });
     })