feat: improve guestbook architecture and UX

- Replace in-memory cache with UFOs API for persistent global state
- Split architecture: query page owner's PDS for button state, use UFOs for global list
- Fix unauthenticated user flow to trigger identity confirmation on button click
- Add signature count display to guestbook modal
- Fix font consistency across all guestbook text (unified monospace)
- Implement optimistic cache updates for sign/unsign actions

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

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

CLAUDE.md

···
 
 ## Critical reminders
 
-- Use `just dev` for local development (see justfile)
+- Use `just dev` for local development - cargo watch provides hot reloading for src/ and static/ changes, no need to manually restart
 - Python: use `uv` or `uvx`, NEVER pip ([uv docs](https://docs.astral.sh/uv/))
 - ATProto client: always pass PDS URL at initialization to avoid JWT issues
 - Never deploy without explicit user request

src/main.rs

···
             .service(routes::sign_guestbook)
             .service(routes::unsign_guestbook)
             .service(routes::get_guestbook_signatures)
+            .service(routes::check_page_owner_signature)
             .service(routes::firehose_watch)
             .service(routes::favicon)
             .service(Files::new("/static", "./static"))

src/routes.rs

···
     pub timestamp: String,
 }
 
-// Global guestbook signatures - tracks all signatures made via this app instance
-// Key is the signer's DID
-static GLOBAL_SIGNATURES: Lazy<DashMap<String, GuestbookSignature>> =
-    Lazy::new(|| DashMap::new());
+// UFOs API response structure
+#[derive(Deserialize)]
+struct UfosRecord {
+    did: String,
+    record: serde_json::Value,
+}
+
+// Cache for UFOs API guestbook signatures
+struct CachedGuestbookSignatures {
+    signatures: Vec<GuestbookSignature>,
+}
+
+static GUESTBOOK_CACHE: Lazy<Mutex<Option<CachedGuestbookSignatures>>> =
+    Lazy::new(|| Mutex::new(None));
 
 // OAuth session type matching our OAuth client configuration
 type OAuthSessionType = OAuthSession<
···
 
     // Fetch user avatar from Bluesky
     let avatar = fetch_user_avatar(did).await;
-
-    // Check if this user has guestbook visit records and add to global cache if not already there
-    if !GLOBAL_SIGNATURES.contains_key(did) {
-        let list_records_url = format!(
-            "{}/xrpc/com.atproto.repo.listRecords?repo={}&collection={}",
-            pds, did, constants::GUESTBOOK_COLLECTION
-        );
-
-        if let Ok(response) = reqwest::get(&list_records_url).await {
-            if let Ok(data) = response.json::<serde_json::Value>().await {
-                if let Some(records) = data["records"].as_array() {
-                    if !records.is_empty() {
-                        // User has visit records - add to global cache
-                        let (handle_opt, avatar_opt) = fetch_profile_info(did).await;
-                        if let Some(first_record) = records.first() {
-                            let timestamp = first_record["value"]["createdAt"]
-                                .as_str()
-                                .unwrap_or("")
-                                .to_string();
-
-                            GLOBAL_SIGNATURES.insert(did.to_string(), GuestbookSignature {
-                                did: did.to_string(),
-                                handle: handle_opt,
-                                avatar: avatar_opt.clone(),
-                                timestamp,
-                            });
-                            log::info!("Populated global cache with existing visit record for DID: {}", did);
-                        }
-                    }
-                }
-            }
-        }
-    }
 
     // Fetch collections from PDS
     let repo_url = format!("{}/xrpc/com.atproto.repo.describeRepo?repo={}", pds, did);
···
         .await
     {
         Ok(output) => {
-            // Add to global signatures cache
-            let (handle, avatar) = fetch_profile_info(&did).await;
-            GLOBAL_SIGNATURES.insert(did.clone(), GuestbookSignature {
-                did: did.clone(),
-                handle,
-                avatar,
-                timestamp: chrono::Utc::now().to_rfc3339(),
-            });
-            log::info!("Added signature to global cache for DID: {}", did);
+            // Fetch fresh data from UFOs and add this signature
+            match fetch_signatures_from_ufos().await {
+                Ok(mut signatures) => {
+                    // Add the user's signature to the cache
+                    let (handle, avatar) = fetch_profile_info(&did).await;
+                    let new_signature = GuestbookSignature {
+                        did: did.clone(),
+                        handle,
+                        avatar,
+                        timestamp: chrono::Utc::now().to_rfc3339(),
+                    };
+
+                    // Add at the beginning (most recent)
+                    signatures.insert(0, new_signature);
+
+                    // Update cache
+                    {
+                        let mut cache = GUESTBOOK_CACHE.lock().unwrap();
+                        *cache = Some(CachedGuestbookSignatures {
+                            signatures,
+                        });
+                    }
+
+                    log::info!("Added signature to cache for DID: {}", did);
+                }
+                Err(e) => {
+                    log::warn!("Failed to update cache after signing, invalidating instead: {}", e);
+                    invalidate_guestbook_cache();
+                }
+            }
 
             HttpResponse::Ok().json(serde_json::json!({
                 "success": true,
···
         }
     }
 
-    // Remove from global signatures cache
-    GLOBAL_SIGNATURES.remove(&did);
-    log::info!("Removed signature from global cache for DID: {}", did);
+    // Fetch fresh data from UFOs and remove this DID
+    match fetch_signatures_from_ufos().await {
+        Ok(mut signatures) => {
+            // Remove the user's signature from the cache
+            signatures.retain(|sig| sig.did != did);
+
+            // Update cache
+            {
+                let mut cache = GUESTBOOK_CACHE.lock().unwrap();
+                *cache = Some(CachedGuestbookSignatures {
+                    signatures: signatures.clone(),
+                });
+            }
+        }
+        Err(e) => {
+            log::warn!("Failed to update cache after unsigning, invalidating instead: {}", e);
+            invalidate_guestbook_cache();
+        }
+    }
 
     HttpResponse::Ok().json(serde_json::json!({
         "success": true,
···
 
 #[get("/api/guestbook/signatures")]
 pub async fn get_guestbook_signatures() -> HttpResponse {
-    // Return all signatures from global cache
-    let mut signatures: Vec<GuestbookSignature> = GLOBAL_SIGNATURES
-        .iter()
-        .map(|entry| entry.value().clone())
-        .collect();
+    // Check cache first
+    {
+        let cache = GUESTBOOK_CACHE.lock().unwrap();
+        if let Some(cached) = cache.as_ref() {
+            // Cache is valid - return cached signatures
+            log::info!("Returning {} signatures from cache", cached.signatures.len());
+            log::info!("Cached signature DIDs: {:?}", cached.signatures.iter().map(|s| &s.did).collect::<Vec<_>>());
+            return HttpResponse::Ok()
+                .insert_header(("Cache-Control", "public, max-age=10"))
+                .json(&cached.signatures);
+        }
+    }
 
-    // Sort by timestamp (most recent first)
-    signatures.sort_by(|a, b| b.timestamp.cmp(&a.timestamp));
-
-    log::info!("Returning {} signatures from global cache", signatures.len());
+    // Cache miss or invalidated - fetch from UFOs API
+    log::info!("Cache miss - fetching from UFOs API");
+    match fetch_signatures_from_ufos().await {
+        Ok(signatures) => {
+            // Update cache
+            {
+                let mut cache = GUESTBOOK_CACHE.lock().unwrap();
+                *cache = Some(CachedGuestbookSignatures {
+                    signatures: signatures.clone(),
+                });
+            }
 
-    HttpResponse::Ok()
-        .insert_header(("Cache-Control", "public, max-age=10"))
-        .json(signatures)
+            log::info!("Returning {} signatures from UFOs API", signatures.len());
+            HttpResponse::Ok()
+                .insert_header(("Cache-Control", "public, max-age=10"))
+                .json(signatures)
+        }
+        Err(e) => {
+            log::error!("Failed to fetch signatures from UFOs: {}", e);
+            HttpResponse::InternalServerError().json(serde_json::json!({
+                "error": e
+            }))
+        }
+    }
 }
 
 async fn fetch_profile_info(did: &str) -> (Option<String>, Option<String>) {
···
     let avatar = fetch_user_avatar(did).await;
 
     (handle, avatar)
+}
+
+async fn fetch_signatures_from_ufos() -> Result<Vec<GuestbookSignature>, String> {
+    // Fetch all guestbook records from UFOs API
+    let ufos_url = format!(
+        "https://ufos-api.microcosm.blue/records?collection={}",
+        constants::GUESTBOOK_COLLECTION
+    );
+
+    log::info!("Fetching guestbook signatures from UFOs API");
+
+    let response = reqwest::get(&ufos_url)
+        .await
+        .map_err(|e| format!("failed to fetch from UFOs API: {}", e))?;
+
+    let records: Vec<UfosRecord> = response.json()
+        .await
+        .map_err(|e| format!("failed to parse UFOs response: {}", e))?;
+
+    log::info!("Fetched {} records from UFOs API", records.len());
+
+    // Fetch profile info for each DID in parallel
+    let profile_futures: Vec<_> = records.iter()
+        .map(|record| {
+            let did = record.did.clone();
+            let timestamp = record.record["createdAt"]
+                .as_str()
+                .unwrap_or("")
+                .to_string();
+            async move {
+                let (handle, avatar) = fetch_profile_info(&did).await;
+                GuestbookSignature {
+                    did,
+                    handle,
+                    avatar,
+                    timestamp,
+                }
+            }
+        })
+        .collect();
+
+    let mut signatures = future::join_all(profile_futures).await;
+
+    // Sort by timestamp (most recent first)
+    signatures.sort_by(|a, b| b.timestamp.cmp(&a.timestamp));
+
+    log::info!("Processed {} signatures with profile info", signatures.len());
+
+    Ok(signatures)
+}
+
+fn invalidate_guestbook_cache() {
+    let mut cache = GUESTBOOK_CACHE.lock().unwrap();
+    *cache = None;
+    log::info!("Invalidated guestbook cache");
+}
+
+#[derive(Deserialize)]
+pub struct CheckSignatureQuery {
+    did: String,
+}
+
+#[get("/api/guestbook/check-signature")]
+pub async fn check_page_owner_signature(query: web::Query<CheckSignatureQuery>) -> HttpResponse {
+    let did = &query.did;
+
+    log::info!("Checking if DID has signed guestbook by querying their PDS: {}", did);
+
+    // Fetch DID document to get PDS URL
+    let did_doc_url = format!("{}/{}", constants::PLC_DIRECTORY, did);
+    let pds = match reqwest::get(&did_doc_url).await {
+        Ok(response) => match response.json::<serde_json::Value>().await {
+            Ok(doc) => {
+                doc["service"]
+                    .as_array()
+                    .and_then(|services| {
+                        services.iter().find(|s| {
+                            s["type"].as_str() == Some("AtprotoPersonalDataServer")
+                        })
+                    })
+                    .and_then(|s| s["serviceEndpoint"].as_str())
+                    .unwrap_or("")
+                    .to_string()
+            }
+            Err(e) => {
+                log::error!("Failed to parse DID document: {}", e);
+                return HttpResponse::InternalServerError().json(serde_json::json!({
+                    "error": "failed to fetch DID document"
+                }));
+            }
+        },
+        Err(e) => {
+            log::error!("Failed to fetch DID document: {}", e);
+            return HttpResponse::InternalServerError().json(serde_json::json!({
+                "error": "failed to fetch DID document"
+            }));
+        }
+    };
+
+    // Query the PDS for guestbook records
+    let records_url = format!(
+        "{}/xrpc/com.atproto.repo.listRecords?repo={}&collection={}&limit=1",
+        pds, did, constants::GUESTBOOK_COLLECTION
+    );
+
+    match reqwest::get(&records_url).await {
+        Ok(response) => {
+            if !response.status().is_success() {
+                // No records found or collection doesn't exist
+                log::info!("No guestbook records found for DID: {}", did);
+                return HttpResponse::Ok().json(serde_json::json!({
+                    "hasSigned": false
+                }));
+            }
+
+            match response.json::<serde_json::Value>().await {
+                Ok(data) => {
+                    let has_records = data["records"]
+                        .as_array()
+                        .map(|arr| !arr.is_empty())
+                        .unwrap_or(false);
+
+                    log::info!("DID {} has signed: {}", did, has_records);
+
+                    HttpResponse::Ok().json(serde_json::json!({
+                        "hasSigned": has_records
+                    }))
+                }
+                Err(e) => {
+                    log::error!("Failed to parse records response: {}", e);
+                    HttpResponse::InternalServerError().json(serde_json::json!({
+                        "error": "failed to parse records"
+                    }))
+                }
+            }
+        }
+        Err(e) => {
+            log::error!("Failed to fetch records from PDS: {}", e);
+            HttpResponse::InternalServerError().json(serde_json::json!({
+                "error": "failed to fetch records"
+            }))
+        }
+    }
 }
 
 #[get("/api/firehose/watch")]

src/templates/app.html

···
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
···
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://at-me.fly.dev/">
     <meta property="og:title" content="@me - explore your atproto identity">
-    <meta property="og:description" content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
+    <meta property="og:description"
+        content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
     <meta property="og:image" content="https://at-me.fly.dev/static/og-image.png">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="https://at-me.fly.dev/">
     <meta property="twitter:title" content="@me - explore your atproto identity">
-    <meta property="twitter:description" content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
+    <meta property="twitter:description"
+        content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
     <meta property="twitter:image" content="https://at-me.fly.dev/static/og-image.png">
 
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 
         :root {
             --bg: #f5f1e8;
···
             -webkit-tap-highlight-color: transparent;
         }
 
-        .info:hover, .info:active {
+        .info:hover,
+        .info:active {
             color: var(--text);
         }
 
···
             border-radius: 2px;
         }
 
-        .info-modal button:hover, .info-modal button:active {
+        .info-modal button:hover,
+        .info-modal button:active {
             background: var(--surface-hover);
             border-color: var(--text-light);
         }
···
             -webkit-tap-highlight-color: transparent;
         }
 
-        .identity:hover, .identity:active {
+        .identity:hover,
+        .identity:active {
             transform: translate(-50%, -50%) scale(1.05);
             border-color: var(--text);
             box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
···
             -webkit-tap-highlight-color: transparent;
         }
 
-        .detail-close:hover, .detail-close:active {
+        .detail-close:hover,
+        .detail-close:active {
             background: var(--surface-hover);
             border-color: var(--text-light);
             color: var(--text);
···
             -webkit-tap-highlight-color: transparent;
         }
 
-        .tree-item:hover, .tree-item:active {
+        .tree-item:hover,
+        .tree-item:active {
             background: var(--surface-hover);
             border-color: var(--text-light);
         }
···
             -webkit-tap-highlight-color: transparent;
         }
 
-        .copy-btn:hover, .copy-btn:active {
+        .copy-btn:hover,
+        .copy-btn:active {
             background: var(--surface-hover);
             border-color: var(--text-light);
             color: var(--text);
···
             border-radius: 2px;
         }
 
-        .load-more:hover, .load-more:active {
+        .load-more:hover,
+        .load-more:active {
             background: var(--surface-hover);
             border-color: var(--text-light);
         }
···
             background: var(--bg);
         }
 
-        #field.loading ~ .identity {
+        #field.loading~.identity {
             display: none;
         }
 
···
         }
 
         @keyframes spin {
-            to { transform: rotate(360deg); }
+            to {
+                transform: rotate(360deg);
+            }
         }
 
         .loading-text {
···
             height: clamp(32px, 7vmin, 40px);
         }
 
-        .home-btn:hover, .home-btn:active {
+        .home-btn:hover,
+        .home-btn:active {
             background: var(--surface);
             color: var(--text);
             border-color: var(--text-light);
···
             gap: clamp(0.3rem, 0.8vmin, 0.5rem);
         }
 
-        .watch-live-btn:hover, .watch-live-btn:active {
+        .watch-live-btn:hover,
+        .watch-live-btn:active {
             background: var(--surface);
             color: var(--text);
             border-color: var(--text-light);
···
         }
 
         @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.3; }
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.3;
+            }
         }
 
         @keyframes pulse-glow {
-            0%, 100% {
+
+            0%,
+            100% {
                 transform: scale(1);
                 box-shadow: 0 0 0 rgba(255, 255, 255, 0);
             }
+
             50% {
                 transform: scale(1.05);
                 box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
···
         }
 
         @keyframes gentle-pulse {
-            0%, 100% {
+
+            0%,
+            100% {
                 transform: scale(1);
                 box-shadow: 0 0 0 0 var(--text-light);
             }
+
             50% {
                 transform: scale(1.02);
                 box-shadow: 0 0 0 3px rgba(160, 160, 160, 0.2);
···
             white-space: nowrap;
         }
 
-        .sign-guestbook-btn:hover, .sign-guestbook-btn:active {
+        .sign-guestbook-btn:hover,
+        .sign-guestbook-btn:active {
             background: var(--surface);
             color: var(--text);
             border-color: var(--text-light);
···
             justify-content: center;
         }
 
-        .view-guestbook-btn:hover, .view-guestbook-btn:active {
+        .view-guestbook-btn:hover,
+        .view-guestbook-btn:active {
             background: var(--surface);
             color: var(--text);
             border-color: var(--text-light);
···
             max-width: 700px;
             margin: 0 auto;
             background:
-                repeating-linear-gradient(
-                    0deg,
+                repeating-linear-gradient(0deg,
                     transparent,
                     transparent 31px,
                     rgba(212, 197, 168, 0.15) 31px,
-                    rgba(212, 197, 168, 0.15) 32px
-                ),
+                    rgba(212, 197, 168, 0.15) 32px),
                 linear-gradient(to bottom, #fdfcf8 0%, #f9f7f1 100%);
             border: 1px solid #d4c5a8;
             box-shadow:
···
         @media (prefers-color-scheme: dark) {
             .guestbook-paper {
                 background:
-                    repeating-linear-gradient(
-                        0deg,
+                    repeating-linear-gradient(0deg,
                         transparent,
                         transparent 31px,
                         rgba(90, 80, 70, 0.2) 31px,
-                        rgba(90, 80, 70, 0.2) 32px
-                    ),
+                        rgba(90, 80, 70, 0.2) 32px),
                     linear-gradient(to bottom, #2a2520 0%, #1f1b17 100%);
                 border-color: #3a3530;
                 box-shadow:
···
             width: 2px;
             height: 100%;
             background: linear-gradient(to bottom,
-                transparent 0%,
-                rgba(212, 100, 100, 0.2) 5%,
-                rgba(212, 100, 100, 0.2) 95%,
-                transparent 100%
-            );
+                    transparent 0%,
+                    rgba(212, 100, 100, 0.2) 5%,
+                    rgba(212, 100, 100, 0.2) 95%,
+                    transparent 100%);
         }
 
         @media (prefers-color-scheme: dark) {
             .guestbook-paper::before {
                 background: linear-gradient(to bottom,
-                    transparent 0%,
-                    rgba(180, 80, 80, 0.15) 5%,
-                    rgba(180, 80, 80, 0.15) 95%,
-                    transparent 100%
-                );
+                        transparent 0%,
+                        rgba(180, 80, 80, 0.15) 5%,
+                        rgba(180, 80, 80, 0.15) 95%,
+                        transparent 100%);
             }
         }
 
         .guestbook-paper-title {
-            font-family: 'Georgia', 'Times New Roman', serif;
+            font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace;
             font-size: clamp(1.8rem, 4.5vmin, 2.5rem);
             color: #3a2f25;
             text-align: center;
             margin-bottom: clamp(0.5rem, 1.5vmin, 1rem);
-            font-weight: 400;
+            font-weight: 500;
             letter-spacing: 0.02em;
         }
 
···
         }
 
         .guestbook-paper-subtitle {
-            font-family: 'Georgia', 'Times New Roman', serif;
+            font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace;
             font-size: clamp(0.75rem, 1.6vmin, 0.9rem);
             color: #6b5d4f;
             text-align: center;
             margin-bottom: clamp(2rem, 5vmin, 3rem);
-            font-style: italic;
+            font-style: normal;
         }
 
         @media (prefers-color-scheme: dark) {
···
             }
         }
 
+        .guestbook-tally {
+            font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace;
+            text-align: center;
+            font-size: clamp(0.7rem, 1.8vmin, 0.85rem);
+            color: #6b5d4f;
+            margin: clamp(1rem, 2.5vmin, 1.5rem) 0 0;
+            font-weight: 500;
+            letter-spacing: 0.03em;
+            text-transform: lowercase;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .guestbook-tally {
+                color: #8a7a6a;
+            }
+        }
+
         .guestbook-signatures-list {
             margin-top: clamp(1.5rem, 4vmin, 2.5rem);
         }
···
             z-index: 2001;
         }
 
-        .guestbook-close:hover, .guestbook-close:active {
+        .guestbook-close:hover,
+        .guestbook-close:active {
             background: var(--surface-hover);
             border-color: var(--text-light);
             color: var(--text);
···
 
         /* Guestbook sign flicker - 13 second loop */
         @keyframes neon-flicker {
-            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+
+            0%,
+            19%,
+            21%,
+            23%,
+            25%,
+            54%,
+            56%,
+            100% {
                 opacity: 0.6;
                 text-shadow: 0 0 4px currentColor;
             }
-            20%, 24%, 55% {
+
+            20%,
+            24%,
+            55% {
                 opacity: 0.2;
                 text-shadow: none;
             }
···
 
         /* POV indicator flicker - subtle 37 second loop, flickers TO brightness */
         @keyframes pov-subtle-flicker {
-            0%, 98% {
+
+            0%,
+            98% {
                 opacity: 0.4;
                 text-shadow: 0 0 3px currentColor;
             }
-            17%, 17.3%, 17.6% {
+
+            17%,
+            17.3%,
+            17.6% {
                 opacity: 0.75;
                 text-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
             }
-            17.15%, 17.45% {
+
+            17.15%,
+            17.45% {
                 opacity: 0.5;
                 text-shadow: 0 0 4px currentColor;
             }
-            71%, 71.2% {
+
+            71%,
+            71.2% {
                 opacity: 0.8;
                 text-shadow: 0 0 10px currentColor, 0 0 15px currentColor;
             }
+
             71.1% {
                 opacity: 0.45;
                 text-shadow: 0 0 3px currentColor;
···
 
         @media (prefers-color-scheme: dark) {
             @keyframes neon-flicker {
-                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+
+                0%,
+                19%,
+                21%,
+                23%,
+                25%,
+                54%,
+                56%,
+                100% {
                     opacity: 0.5;
                     text-shadow: 0 0 6px currentColor, 0 0 12px rgba(255, 107, 157, 0.3);
                 }
-                20%, 24%, 55% {
+
+                20%,
+                24%,
+                55% {
                     opacity: 0.15;
                     text-shadow: 0 0 2px currentColor;
                 }
             }
 
             @keyframes pov-subtle-flicker {
-                0%, 98% {
+
+                0%,
+                98% {
                     opacity: 0.35;
                     text-shadow: 0 0 4px currentColor, 0 0 8px rgba(138, 180, 248, 0.2);
                 }
-                17%, 17.3%, 17.6% {
+
+                17%,
+                17.3%,
+                17.6% {
                     opacity: 0.75;
                     text-shadow: 0 0 12px currentColor, 0 0 20px rgba(138, 180, 248, 0.6);
                 }
-                17.15%, 17.45% {
+
+                17.15%,
+                17.45% {
                     opacity: 0.45;
                     text-shadow: 0 0 6px currentColor, 0 0 10px rgba(138, 180, 248, 0.3);
                 }
-                71%, 71.2% {
+
+                71%,
+                71.2% {
                     opacity: 0.8;
                     text-shadow: 0 0 15px currentColor, 0 0 25px rgba(138, 180, 248, 0.7);
                 }
+
                 71.1% {
                     opacity: 0.4;
                     text-shadow: 0 0 5px currentColor, 0 0 9px rgba(138, 180, 248, 0.25);
                 }
             }
         }
-
     </style>
 </head>
+
 <body>
     <a href="/" class="home-btn" title="back to landing">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+            <polyline points="9 22 9 12 15 12 15 22" />
+        </svg>
     </a>
     <div class="info" id="infoBtn" title="learn about your data">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+            <path d="M12 17h.01" />
+        </svg>
     </div>
     <button class="watch-live-btn" id="watchLiveBtn">
         <span class="watch-indicator"></span>
         <span class="watch-label">watch live</span>
     </button>
-    <div class="pov-indicator">point of view of <a class="pov-handle" id="povHandle" href="#" target="_blank" rel="noopener noreferrer"></a></div>
+    <div class="pov-indicator">point of view of <a class="pov-handle" id="povHandle" href="#" target="_blank"
+            rel="noopener noreferrer"></a></div>
     <div class="guestbook-sign">sign the guest list</div>
     <div class="guestbook-buttons-container">
         <button class="view-guestbook-btn" id="viewGuestbookBtn" title="view all signatures">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="8" x2="21" y1="6" y2="6" />
+                <line x1="8" x2="21" y1="12" y2="12" />
+                <line x1="8" x2="21" y1="18" y2="18" />
+                <line x1="3" x2="3.01" y1="6" y2="6" />
+                <line x1="3" x2="3.01" y1="12" y2="12" />
+                <line x1="3" x2="3.01" y1="18" y2="18" />
+            </svg>
         </button>
         <button class="sign-guestbook-btn" id="signGuestbookBtn" title="sign the guestbook">
             <span class="guestbook-icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+                </svg>
             </span>
             <span class="guestbook-text">sign guestbook</span>
             <img class="guestbook-avatar" id="guestbookAvatar" style="display: none;" />
···
     <div class="firehose-toast" id="firehoseToast">
         <div class="firehose-toast-action"></div>
         <div class="firehose-toast-collection"></div>
-        <a class='firehose-toast-link' id='firehoseToastLink' href='#' target='_blank' rel='noopener noreferrer'>view record</a>
+        <a class='firehose-toast-link' id='firehoseToastLink' href='#' target='_blank' rel='noopener noreferrer'>view
+            record</a>
     </div>
 
     <div class="overlay" id="overlay"></div>
     <div class="info-modal" id="infoModal">
         <h2>this is your data</h2>
-        <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 style="margin-bottom: 1rem;"><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>
+        <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 style="margin-bottom: 1rem;"><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>
-        <p style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.7rem; color: var(--text-light); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;">
-            <span>view <a href="https://tangled.org/@zzstoatzz.io/at-me" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">the source code for this project</a> on</span>
-            <a href="https://tangled.org" target="_blank" rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">tangled.org</a>
+        <button id="restartTour" onclick="window.restartOnboarding()"
+            style="margin-left: 0.5rem; background: var(--surface-hover);">restart tour</button>
+        <p
+            style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.7rem; color: var(--text-light); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;">
+            <span>view <a href="https://tangled.org/@zzstoatzz.io/at-me" target="_blank" rel="noopener noreferrer"
+                    style="color: var(--text); text-decoration: underline;">the source code</a> on</span>
+            <a href="https://tangled.org" target="_blank" rel="noopener noreferrer"
+                style="color: var(--text); text-decoration: underline;">tangled.org</a>
         </p>
     </div>
 
···
     <script src="/static/app.js"></script>
     <script src="/static/onboarding.js"></script>
 </body>
-</html>
+
+</html>

static/app.js

···
 }
 
 async function checkPageOwnerSignature() {
-    // Check if the page owner (did) has signed the guestbook
+    // Check if the page owner (did) has signed the guestbook by querying their PDS directly
     try {
-        const response = await fetch('/api/guestbook/signatures');
+        const response = await fetch(`/api/guestbook/check-signature?did=${encodeURIComponent(did)}`);
         if (!response.ok) return false;
 
-        const signatures = await response.json();
-        pageOwnerHasSigned = signatures.some(sig => sig.did === did || sig.did === `at://${did}`);
+        const data = await response.json();
+        pageOwnerHasSigned = data.hasSigned;
+
         updateGuestbookSign();
         return pageOwnerHasSigned;
     } catch (error) {
···
             return;
         }
 
-        // If page owner already signed, show unsign modal (only if viewing own page)
-        if (pageOwnerHasSigned && viewingOwnPage) {
-            showUnsignModal();
-            return;
+        // If page owner already signed, handle unsigning or identity confirmation
+        if (pageOwnerHasSigned) {
+            if (!isAuthenticated) {
+                // Unauthenticated user - show identity confirmation to sign in and then unsign
+                if (viewedHandle) {
+                    showHandleConfirmation(viewedHandle);
+                }
+                return;
+            } else if (viewingOwnPage) {
+                // Authenticated as page owner - show unsign modal
+                showUnsignModal();
+                return;
+            }
+            // If authenticated as someone else, the button is disabled, so this shouldn't be reached
         }
 
-        // If not authenticated, show confirmation with the viewed handle
+        // If not authenticated and page owner hasn't signed, show confirmation to sign in and then sign
         if (!isAuthenticated) {
             if (viewedHandle) {
                 showHandleConfirmation(viewedHandle);
···
             <div class="guestbook-paper">
                 <h1 class="guestbook-paper-title">the @me guest list</h1>
                 <p class="guestbook-paper-subtitle">visitors to this application</p>
+                <div class="guestbook-tally">${signatures.length} signature${signatures.length !== 1 ? 's' : ''}</div>
                 <div class="guestbook-signatures-list">
         `;