fix: improve guestbook singleton behavior and particle animations

- populate global signatures cache from existing visit records on page load
- make guestbook truly global - shows all visitors regardless of page
- check page owner signature status without authentication
- refine particle animations: slower speed, gentler easing, fade in/out
- make PDS pulse more subtle with proper centering transform
- fix pdsls.dev links to include at:// prefix and /app.at-me.visit path
- update justfile to watch static directory for template changes
- remove tangled.org logo from info modal

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

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

justfile

···
 
 # run the app with hot reloading
 dev:
-	cargo watch -w src -x 'run'
+	cargo watch -w src -w static -x 'run'
 
 # run on specific port with hot reloading
 dev-port PORT='3000':
-	PORT={{PORT}} cargo watch -w src -x 'run'
+	PORT={{PORT}} cargo watch -w src -w static -x 'run'
 
 # build the project
 build:

src/routes.rs

···
     // 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);
     let repo_response = match reqwest::get(&repo_url).await {

src/templates/app.html

···
             }
         }
 
-        .footer {
-            position: fixed;
-            bottom: clamp(0.75rem, 2vmin, 1rem);
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: clamp(0.6rem, 1.2vmin, 0.7rem);
-            color: var(--text);
-            z-index: 100;
-            background: var(--surface);
-            padding: clamp(0.4rem, 1vmin, 0.5rem) clamp(0.75rem, 2vmin, 1rem);
-            border-radius: 4px;
-            border: 1px solid var(--border);
-        }
-
-        .footer a {
-            color: var(--text);
-            text-decoration: none;
-            border-bottom: 1px solid transparent;
-            transition: all 0.2s ease;
-        }
-
-        .footer a:hover {
-            border-bottom-color: var(--text);
-        }
 
         #field.loading {
             position: fixed;
···
             color: var(--text-light);
             border: 1px solid var(--border);
             background: var(--bg);
-            padding: clamp(0.4rem, 1vmin, 0.5rem) clamp(0.8rem, 2vmin, 1rem);
+            padding: clamp(0.4rem, 1vmin, 0.5rem) clamp(0.6rem, 1.5vmin, 0.8rem);
             transition: all 0.2s ease;
             cursor: pointer;
             border-radius: 2px;
···
             align-items: center;
             gap: clamp(0.3rem, 0.8vmin, 0.5rem);
             height: clamp(32px, 7vmin, 40px);
+            white-space: nowrap;
         }
 
         .sign-guestbook-btn:hover, .sign-guestbook-btn:active {
···
             bottom: clamp(0.75rem, 2vmin, 1rem);
             right: clamp(0.75rem, 2vmin, 1rem);
             display: flex;
+            flex-direction: row;
             align-items: center;
             gap: clamp(0.5rem, 1.5vmin, 0.75rem);
             z-index: 100;
···
             border-color: var(--text-light);
         }
 
-        @media (max-width: 768px) {
-            .guestbook-buttons-container {
-                flex-direction: column-reverse;
-                gap: clamp(0.5rem, 1.5vmin, 0.75rem);
-            }
-        }
 
-        @media (max-width: 768px) {
-            .home-btn {
-                width: clamp(36px, 8vmin, 44px);
-                height: clamp(36px, 8vmin, 44px);
-            }
-
-            .firehose-toast {
-                top: clamp(4.5rem, 9vmin, 5.5rem);
-            }
-        }
 
         .guestbook-modal {
             position: fixed;
···
         .guestbook-paper {
             max-width: 700px;
             margin: 0 auto;
-            background: linear-gradient(to bottom, #f9f7f1 0%, #f5f1e8 100%);
+            background:
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 31px,
+                    rgba(212, 197, 168, 0.15) 31px,
+                    rgba(212, 197, 168, 0.15) 32px
+                ),
+                linear-gradient(to bottom, #fdfcf8 0%, #f9f7f1 100%);
             border: 1px solid #d4c5a8;
             box-shadow:
-                0 2px 4px rgba(0, 0, 0, 0.1),
-                inset 0 0 60px rgba(255, 248, 240, 0.5);
+                0 4px 6px rgba(0, 0, 0, 0.1),
+                0 2px 4px rgba(0, 0, 0, 0.06),
+                inset 0 0 80px rgba(255, 248, 240, 0.6);
             padding: clamp(2.5rem, 6vmin, 4rem) clamp(2rem, 5vmin, 3rem);
             position: relative;
         }
 
         @media (prefers-color-scheme: dark) {
             .guestbook-paper {
-                background: linear-gradient(to bottom, #2a2520 0%, #1f1b17 100%);
+                background:
+                    repeating-linear-gradient(
+                        0deg,
+                        transparent,
+                        transparent 31px,
+                        rgba(90, 80, 70, 0.2) 31px,
+                        rgba(90, 80, 70, 0.2) 32px
+                    ),
+                    linear-gradient(to bottom, #2a2520 0%, #1f1b17 100%);
                 border-color: #3a3530;
                 box-shadow:
-                    0 2px 4px rgba(0, 0, 0, 0.5),
-                    inset 0 0 60px rgba(60, 50, 40, 0.3);
+                    0 4px 6px rgba(0, 0, 0, 0.5),
+                    0 2px 4px rgba(0, 0, 0, 0.3),
+                    inset 0 0 80px rgba(60, 50, 40, 0.4);
             }
         }
 
···
             text-align: center;
             margin-bottom: clamp(0.5rem, 1.5vmin, 1rem);
             font-weight: 400;
-            letter-spacing: 0.05em;
+            letter-spacing: 0.02em;
         }
 
         @media (prefers-color-scheme: dark) {
···
         /* Retro neon guestbook sign */
         .guestbook-sign {
             position: fixed;
-            bottom: clamp(3.5rem, 8vmin, 5rem);
+            bottom: clamp(3.5rem, 8.5vmin, 5.5rem);
             right: clamp(0.75rem, 2vmin, 1rem);
             font-family: ui-monospace, 'SF Mono', Monaco, monospace;
             font-size: clamp(0.6rem, 1.3vmin, 0.7rem);
···
             animation: neon-flicker 8s infinite;
             pointer-events: none;
             user-select: none;
+            white-space: nowrap;
         }
 
         @media (prefers-color-scheme: dark) {
···
             }
         }
 
-        /* POV indicator */
+        /* POV indicator - subtle top banner */
         .pov-indicator {
             position: fixed;
-            left: clamp(0.75rem, 2vmin, 1rem);
-            top: 50%;
-            transform: translateY(-50%);
+            left: 50%;
+            top: clamp(1rem, 2vmin, 1.5rem);
+            transform: translateX(-50%);
             font-family: ui-monospace, 'SF Mono', Monaco, monospace;
-            font-size: clamp(0.6rem, 1.3vmin, 0.7rem);
+            font-size: clamp(0.65rem, 1.4vmin, 0.75rem);
             color: var(--text-light);
             text-transform: lowercase;
-            letter-spacing: 0.1em;
+            letter-spacing: 0.12em;
             z-index: 50;
-            opacity: 0.6;
-            text-shadow: 0 0 4px currentColor;
-            animation: neon-flicker 8s infinite;
+            opacity: 0.4;
+            text-shadow: 0 0 3px currentColor;
+            animation: pov-subtle-flicker 37s infinite;
             pointer-events: none;
             user-select: none;
-            text-align: left;
-            max-width: clamp(120px, 25vw, 180px);
-            line-height: 1.6;
+            text-align: center;
+            line-height: 1.4;
         }
 
         .pov-handle {
-            display: block;
-            margin-top: 0.25rem;
-            font-size: clamp(0.65rem, 1.4vmin, 0.75rem);
-            opacity: 0.8;
+            display: inline;
+            margin-left: 0.3rem;
+            font-size: inherit;
+            opacity: 0.9;
         }
 
         @media (prefers-color-scheme: dark) {
             .pov-indicator {
-                color: #6b9dff;
-                opacity: 0.5;
-                text-shadow: 0 0 6px currentColor, 0 0 12px rgba(107, 157, 255, 0.3);
-            }
-        }
-
-        @media (max-width: 768px) {
-            .pov-indicator {
-                top: auto;
-                bottom: clamp(3.5rem, 8vmin, 5rem);
-                left: clamp(0.75rem, 2vmin, 1rem);
-                right: auto;
-                transform: none;
-                text-align: left;
-                max-width: 60vw;
+                color: #8ab4f8;
+                opacity: 0.35;
+                text-shadow: 0 0 4px currentColor, 0 0 8px rgba(138, 180, 248, 0.2);
             }
         }
 
+        /* Guestbook sign flicker - 13 second loop */
         @keyframes neon-flicker {
             0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                 opacity: 0.6;
···
             }
         }
 
+        /* POV indicator flicker - subtle 37 second loop, flickers TO brightness */
+        @keyframes pov-subtle-flicker {
+            0%, 98% {
+                opacity: 0.4;
+                text-shadow: 0 0 3px currentColor;
+            }
+            17%, 17.3%, 17.6% {
+                opacity: 0.75;
+                text-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
+            }
+            17.15%, 17.45% {
+                opacity: 0.5;
+                text-shadow: 0 0 4px currentColor;
+            }
+            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% {
···
                     text-shadow: 0 0 2px currentColor;
                 }
             }
-        }
 
-        @media (max-width: 768px) {
-            .guestbook-sign {
-                bottom: auto;
-                top: clamp(1rem, 2vmin, 1.5rem);
-                right: auto;
-                left: 50%;
-                transform: translateX(-50%);
-                font-size: clamp(0.55rem, 1.2vmin, 0.65rem);
+            @keyframes pov-subtle-flicker {
+                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% {
+                    opacity: 0.75;
+                    text-shadow: 0 0 12px currentColor, 0 0 20px rgba(138, 180, 248, 0.6);
+                }
+                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% {
+                    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>
···
         <span class="watch-indicator"></span>
         <span class="watch-label">watch live</span>
     </button>
-    <div class="pov-indicator">
-        point of view:
-        <span class="pov-handle" id="povHandle"></span>
-    </div>
+    <div class="pov-indicator">point of view:<span class="pov-handle" id="povHandle"></span></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">
···
         <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 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 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>
+        </p>
     </div>
 
     <div class="onboarding-overlay" id="onboardingOverlay">
···
     </div>
     <div id="detail" class="detail-panel"></div>
 
-    <div class="footer">
-        <a href="https://tangled.org/@zzstoatzz.io/at-me" target="_blank" rel="noopener noreferrer">view source</a>
-    </div>
     <script>
         window.DID = '{DID}';
     </script>

static/app.js

···
 let globalPds = null;
 let globalHandle = null;
 let globalApps = null; // Store apps for repositioning on resize
+let pageOwnerHasSigned = false; // Track if the page owner (did) has signed the guestbook
 
 // Adaptive handle text sizing
 function adaptHandleTextSize(handleEl) {
···
         this.color = color;
         this.metadata = metadata; // {action, collection, namespace}
         this.progress = 0;
-        this.speed = 0.012; // Slower for visibility
-        this.size = 5;
-        this.glowSize = 10;
+        this.speed = 0.008; // Slower, more graceful
+        this.size = 6; // Slightly larger core
+        this.glowSize = 14; // Softer, wider glow
     }
 
     update() {
         if (this.progress < 1) {
             this.progress += this.speed;
-            // Cubic ease-in-out
-            const eased = this.progress < 0.5
-                ? 4 * this.progress * this.progress * this.progress
-                : 1 - Math.pow(-2 * this.progress + 2, 3) / 2;
-            
+            // Gentle ease-out for organic feel
+            const eased = 1 - Math.pow(1 - this.progress, 3);
+
             this.x = this.startX + (this.endX - this.startX) * eased;
             this.y = this.startY + (this.endY - this.startY) * eased;
         }
···
     }
 
     draw(ctx) {
-        // Outer glow
+        // Calculate fade based on progress for elegant entry/exit
+        const fadeIn = Math.min(this.progress * 4, 1); // Fade in over first 25%
+        const fadeOut = this.progress > 0.8 ? 1 - ((this.progress - 0.8) / 0.2) : 1; // Fade out in last 20%
+        const opacity = Math.min(fadeIn, fadeOut);
+
+        // Outer glow - softer and more diffuse
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.glowSize, 0, Math.PI * 2);
         const gradient = ctx.createRadialGradient(
             this.x, this.y, 0,
             this.x, this.y, this.glowSize
         );
-        gradient.addColorStop(0, this.color + '80');
+        // Use lower opacity for subtlety
+        gradient.addColorStop(0, this.color + Math.floor(opacity * 60).toString(16).padStart(2, '0'));
+        gradient.addColorStop(0.5, this.color + Math.floor(opacity * 30).toString(16).padStart(2, '0'));
         gradient.addColorStop(1, this.color + '00');
         ctx.fillStyle = gradient;
         ctx.fill();
 
-        // Inner particle
+        // Inner particle - subtle core
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-        ctx.fillStyle = this.color;
+        ctx.fillStyle = this.color + Math.floor(opacity * 180).toString(16).padStart(2, '0');
         ctx.fill();
     }
 }
···
 function pulseIdentity() {
     const identity = document.querySelector('.identity');
     if (identity) {
-        identity.style.transition = 'all 0.3s ease';
-        identity.style.transform = 'scale(1.15)';
-        identity.style.boxShadow = '0 0 25px rgba(255, 255, 255, 0.6)';
+        // Subtle but visible pulse with contextual glow
+        const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text').trim();
+        identity.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
+        // Maintain centering transform while applying gentle scale
+        identity.style.transform = 'translate(-50%, -50%) scale(1.03)';
+        identity.style.boxShadow = `0 0 25px ${textColor}50, 0 0 45px ${textColor}25`;
 
         setTimeout(() => {
-            identity.style.transform = '';
+            identity.style.transition = 'all 0.7s cubic-bezier(0.4, 0, 0.2, 1)';
+            identity.style.transform = 'translate(-50%, -50%)';
             identity.style.boxShadow = '';
-        }, 300);
+        }, 400);
     }
 }
 
···
     }, 4000); // Slightly longer to read details
 }
 
-function getParticleColor(action) {
-    const colors = {
-        'create': '#4ade80', // green
-        'update': '#60a5fa', // blue
-        'delete': '#f87171'  // red
-    };
-    return colors[action] || '#a0a0a0';
+function getParticleColor() {
+    // Use theme-aware color that represents data flow
+    // Get the text color from CSS variables and use it with reduced opacity
+    const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text').trim();
+
+    // If we can parse it as rgb, use it; otherwise fall back to a neutral color
+    if (textColor.startsWith('rgb')) {
+        // Extract RGB values and return hex
+        const match = textColor.match(/(\d+),\s*(\d+),\s*(\d+)/);
+        if (match) {
+            const r = parseInt(match[1]);
+            const g = parseInt(match[2]);
+            const b = parseInt(match[3]);
+            return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        }
+    }
+
+    // Fallback: soft blue-gray that works in both themes and represents "information flow"
+    return '#8ba4b8';
 }
 
 function createFirehoseParticle(event) {
···
     }
 
     // Create particle (flows from app TO PDS, or pulses at PDS if no app circle)
+    // Color represents data flow, not specific to action type
     const particle = new FirehoseParticle(
         startX, startY,
         endX, endY,
-        getParticleColor(event.action),
+        getParticleColor(),
         {
             action: event.action,
             collection: event.collection,
···
     }, 5000);
 }
 
+async function checkPageOwnerSignature() {
+    // Check if the page owner (did) has signed the guestbook
+    try {
+        const response = await fetch('/api/guestbook/signatures');
+        if (!response.ok) return false;
+
+        const signatures = await response.json();
+        pageOwnerHasSigned = signatures.some(sig => sig.did === did || sig.did === `at://${did}`);
+        console.log('[Guestbook] Page owner signed?', pageOwnerHasSigned);
+        return pageOwnerHasSigned;
+    } catch (error) {
+        console.error('[Guestbook] Error checking page owner signature:', error);
+        return false;
+    }
+}
+
 function updateGuestbookButton() {
     const signGuestbookBtn = document.getElementById('signGuestbookBtn');
     if (!signGuestbookBtn) return;
···
         authenticatedDid,
         pageDid: did,
         viewingOwnPage,
-        hasRecords
+        pageOwnerHasSigned
     });
 
-    if (viewingOwnPage && hasRecords) {
-        // Viewing own page and already signed - show checkmark
+    // If page owner has already signed, show "signed" state (regardless of who's viewing)
+    if (pageOwnerHasSigned) {
         if (avatarImg) avatarImg.style.display = 'none';
         iconSpan.innerHTML = '<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"><polyline points="20 6 9 17 4 12"/></svg>';
         iconSpan.style.display = 'flex';
         textSpan.textContent = 'signed';
         signGuestbookBtn.classList.add('signed');
-        signGuestbookBtn.setAttribute('title', 'you\'ve signed the guestbook');
-        signGuestbookBtn.disabled = false;
+        signGuestbookBtn.setAttribute('title', viewingOwnPage ? 'you\'ve signed the guestbook' : 'this user has signed the guestbook');
+        signGuestbookBtn.disabled = false; // Allow clicking to view/unsign if own page
     } else if (isAuthenticated) {
         // Authenticated user - show THEIR avatar (not the page owner's)
         if (authenticatedAvatar && avatarImg) {
···
 
         textSpan.textContent = 'sign as';
 
-        if (viewingOwnPage && !hasRecords) {
+        if (viewingOwnPage) {
             // Viewing own page, authenticated, ready to sign
             signGuestbookBtn.style.background = 'var(--surface)';
             signGuestbookBtn.style.color = 'var(--text)';
···
 
     modal.innerHTML = `
         <h2>watch it happen</h2>
-        <p style="margin-bottom: 1rem;">want to see your guestbook signature flow into your PDS in real-time?</p>
-        <p style="margin-bottom: 1.5rem; color: var(--text-lighter);">turn on "watch live" to see the record creation visualized as it happens.</p>
+        <p style="margin-bottom: 1rem;">want to see your app activity in real-time?</p>
+        <p style="margin-bottom: 1.5rem; color: var(--text-lighter);">turn on "watch live" to see your data flowing into your PDS as it happens.</p>
         <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
             <button id="skipBtn" style="background: var(--bg);">skip</button>
             <button id="watchBtn" style="background: var(--surface-hover);">enable watch live</button>
···
     overlay.addEventListener('click', closeModal);
 
     confirmBtn.addEventListener('click', async () => {
-        confirmBtn.disabled = true;
-        confirmBtn.textContent = 'deleting...';
+        // Close unsign modal first
+        closeModal();
 
-        try {
-            const response = await fetch('/api/sign-guestbook', {
-                method: 'DELETE'
-            });
+        // Show watch prompt before deleting
+        showWatchPrompt(async () => {
+            // Perform deletion
+            try {
+                const response = await fetch('/api/sign-guestbook', {
+                    method: 'DELETE'
+                });
 
-            const data = await response.json();
+                const data = await response.json();
 
-            if (data.success) {
-                closeModal();
-                // Refresh auth status to update button
-                await checkAuthStatus();
-            } else {
-                throw new Error(data.error || 'Unknown error');
+                if (data.success) {
+                    // Refresh page owner signature status and auth status to update button
+                    await checkPageOwnerSignature();
+                    await checkAuthStatus();
+                } else {
+                    throw new Error(data.error || 'Unknown error');
+                }
+            } catch (error) {
+                console.error('[Guestbook] Error unsigning:', error);
             }
-        } catch (error) {
-            console.error('[Guestbook] Error unsigning:', error);
-            confirmBtn.textContent = 'error';
-            setTimeout(() => {
-                confirmBtn.textContent = 'delete record';
-                confirmBtn.disabled = false;
-            }, 2000);
-        }
+        });
     });
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
     const signGuestbookBtn = document.getElementById('signGuestbookBtn');
     if (!signGuestbookBtn) {
         console.error('[Guestbook] Sign guestbook button not found!');
         return;
     }
 
+    // Check if page owner has signed (no auth required)
+    await checkPageOwnerSignature();
+
     // Check auth status on load
     checkAuthStatus();
 
···
             return;
         }
 
-        // If user already has records, show unsign modal
-        if (hasRecords && viewingOwnPage) {
+        // If page owner already signed, show unsign modal (only if viewing own page)
+        if (pageOwnerHasSigned && viewingOwnPage) {
             showUnsignModal();
             return;
         }
···
                     if (data.success) {
                         iconSpan.innerHTML = '<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"><polyline points="20 6 9 17 4 12"/></svg>';
                         textSpan.textContent = 'signed!';
-                        // Refresh auth status to update button
+                        // Refresh page owner signature status and auth status to update button
+                        await checkPageOwnerSignature();
                         await checkAuthStatus();
                         setTimeout(() => {
                             signGuestbookBtn.disabled = false;
···
         guestbookClose.addEventListener('click', () => {
             guestbookModal.classList.remove('visible');
         });
+
+        // Add Escape key handler for closing guest list modal
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && guestbookModal.classList.contains('visible')) {
+                guestbookModal.classList.remove('visible');
+            }
+        });
     }
 });
 
···
         if (signatures.length === 0) {
             guestbookContent.innerHTML = `
                 <div class="guestbook-paper">
-                    <h1 class="guestbook-paper-title">Guestbook</h1>
-                    <p class="guestbook-paper-subtitle">Visitors to this Personal Data Server</p>
+                    <h1 class="guestbook-paper-title">the @me guest list</h1>
+                    <p class="guestbook-paper-subtitle">visitors to this application</p>
                     <div class="guestbook-empty">
-                        <div class="guestbook-empty-text">No signatures yet. Be the first to sign!</div>
+                        <div class="guestbook-empty-text">no signatures yet. be the first to sign!</div>
                     </div>
                 </div>
             `;
             return;
         }
 
+        // Helper function to format timestamp
+        const formatDate = (isoString) => {
+            if (!isoString) return '';
+            const date = new Date(isoString);
+            if (isNaN(date)) return '';
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${month}/${day}/${year}`;
+        };
+
         // Render signatures with paper aesthetic
         let html = `
             <div class="guestbook-paper">
-                <h1 class="guestbook-paper-title">Guestbook</h1>
-                <p class="guestbook-paper-subtitle">Visitors to this application</p>
+                <h1 class="guestbook-paper-title">the @me guest list</h1>
+                <p class="guestbook-paper-subtitle">visitors to this application</p>
                 <div class="guestbook-signatures-list">
         `;
 
         signatures.forEach((sig, index) => {
             const handle = sig.handle || 'unknown';
             const did = sig.did || 'did:unknown';
+            // Add at:// prefix if not present for pdsls.dev URL
+            const atUri = did.startsWith('at://') ? did : `at://${did}`;
+            const formattedDate = formatDate(sig.timestamp);
+            const pdsHost = 'pdsls.dev';  // Use pdsls.dev for looking up DIDs
 
             html += `
                 <div class="guestbook-paper-signature">
···
                             <span class="guestbook-metadata-label">handle:</span>
                             <span class="guestbook-metadata-value">@${handle}</span>
                         </div>
+                        ${formattedDate ? `
+                        <div class="guestbook-metadata-item">
+                            <span class="guestbook-metadata-label">signed:</span>
+                            <span class="guestbook-metadata-value">${formattedDate}</span>
+                        </div>
+                        ` : ''}
                         <div class="guestbook-metadata-item">
                             <span class="guestbook-metadata-label">bluesky:</span>
                             <a href="https://bsky.app/profile/${handle}" target="_blank" rel="noopener noreferrer" class="guestbook-metadata-link">view profile ↗</a>
+                        </div>
+                        <div class="guestbook-metadata-item">
+                            <span class="guestbook-metadata-label">pdsls.dev:</span>
+                            <a href="https://${pdsHost}/${atUri}/app.at-me.visit" target="_blank" rel="noopener noreferrer" class="guestbook-metadata-link">view on pdsls.dev ↗</a>
                         </div>
                     </div>
                 </div>