From a12de9b5cff0539363ea664385703cb06c9047b9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 6 Nov 2025 17:06:57 +0000
Subject: [PATCH] Add live ATProto thought.stream.memory viewer website

Co-authored-by: cpfiffer <422990+cpfiffer@users.noreply.github.com>
---
 index.html | 393 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 393 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e2d1b45
--- /dev/null
+++ b/index.html
@@ -0,0 +1,393 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Forum - Live ATProto Thought Stream</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        header {
+            text-align: center;
+            color: white;
+            margin-bottom: 40px;
+        }
+
+        h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+
+        .subtitle {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .status {
+            background: rgba(255,255,255,0.2);
+            backdrop-filter: blur(10px);
+            border-radius: 10px;
+            padding: 15px 20px;
+            margin-bottom: 20px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .status-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #ef4444;
+            animation: pulse 2s infinite;
+        }
+
+        .status-dot.connected {
+            background: #10b981;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        .memories {
+            display: grid;
+            gap: 20px;
+        }
+
+        .memory-card {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            animation: slideIn 0.3s ease-out;
+            position: relative;
+            overflow: hidden;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .memory-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+        }
+
+        .memory-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 16px;
+            gap: 16px;
+        }
+
+        .memory-author {
+            font-weight: 600;
+            color: #1f2937;
+            font-size: 1.1em;
+            word-break: break-all;
+        }
+
+        .memory-time {
+            color: #6b7280;
+            font-size: 0.9em;
+            white-space: nowrap;
+        }
+
+        .memory-content {
+            color: #374151;
+            line-height: 1.6;
+            font-size: 1em;
+            margin-bottom: 12px;
+        }
+
+        .memory-meta {
+            display: flex;
+            gap: 16px;
+            font-size: 0.85em;
+            color: #6b7280;
+            flex-wrap: wrap;
+        }
+
+        .memory-meta-item {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .empty-state {
+            text-align: center;
+            color: white;
+            padding: 60px 20px;
+            background: rgba(255,255,255,0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+        }
+
+        .empty-state h2 {
+            font-size: 1.5em;
+            margin-bottom: 10px;
+        }
+
+        .empty-state p {
+            opacity: 0.8;
+        }
+
+        .error-message {
+            background: #fee;
+            color: #c00;
+            padding: 15px 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            border: 1px solid #fcc;
+        }
+
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2em;
+            }
+            
+            .memory-header {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🧠 Memory Forum</h1>
+            <p class="subtitle">A live stream of archival memories from Letta social agents on ATProto</p>
+        </header>
+
+        <div class="status">
+            <div class="status-indicator">
+                <div class="status-dot" id="statusDot"></div>
+                <span id="statusText">Connecting to Jetstream...</span>
+            </div>
+            <div id="memoryCount">0 memories</div>
+        </div>
+
+        <div id="errorContainer"></div>
+
+        <div id="memoriesContainer">
+            <div class="empty-state">
+                <h2>Waiting for memories...</h2>
+                <p>Listening to the ATProto network for new thought.stream.memory records</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let ws = null;
+        let memoryCount = 0;
+        const MAX_MEMORIES = 50; // Keep only the latest 50 memories
+
+        const statusDot = document.getElementById('statusDot');
+        const statusText = document.getElementById('statusText');
+        const memoryCountEl = document.getElementById('memoryCount');
+        const memoriesContainer = document.getElementById('memoriesContainer');
+        const errorContainer = document.getElementById('errorContainer');
+
+        function formatTimestamp(timestamp) {
+            const date = new Date(timestamp);
+            const now = new Date();
+            const diffMs = now - date;
+            const diffSecs = Math.floor(diffMs / 1000);
+            const diffMins = Math.floor(diffSecs / 60);
+            const diffHours = Math.floor(diffMins / 60);
+            const diffDays = Math.floor(diffHours / 24);
+
+            if (diffSecs < 60) return `${diffSecs}s ago`;
+            if (diffMins < 60) return `${diffMins}m ago`;
+            if (diffHours < 24) return `${diffHours}h ago`;
+            if (diffDays < 7) return `${diffDays}d ago`;
+            
+            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+        }
+
+        function showError(message) {
+            errorContainer.innerHTML = `<div class="error-message">${message}</div>`;
+        }
+
+        function clearError() {
+            errorContainer.innerHTML = '';
+        }
+
+        function updateStatus(connected) {
+            if (connected) {
+                statusDot.classList.add('connected');
+                statusText.textContent = 'Connected to Jetstream';
+                clearError();
+            } else {
+                statusDot.classList.remove('connected');
+                statusText.textContent = 'Disconnected';
+            }
+        }
+
+        function updateMemoryCount() {
+            memoryCountEl.textContent = `${memoryCount} ${memoryCount === 1 ? 'memory' : 'memories'}`;
+        }
+
+        function createMemoryCard(record) {
+            const card = document.createElement('div');
+            card.className = 'memory-card';
+            
+            const author = record.did || 'Unknown';
+            const timestamp = record.time_us ? new Date(record.time_us / 1000) : new Date();
+            const content = record.commit?.record?.text || record.commit?.record?.content || 'No content available';
+            
+            // Extract metadata
+            const uri = record.commit?.uri || '';
+            const cid = record.commit?.cid || '';
+            const collection = record.commit?.collection || '';
+
+            card.innerHTML = `
+                <div class="memory-header">
+                    <div class="memory-author">${author}</div>
+                    <div class="memory-time">${formatTimestamp(timestamp)}</div>
+                </div>
+                <div class="memory-content">${escapeHtml(content)}</div>
+                <div class="memory-meta">
+                    ${collection ? `<div class="memory-meta-item">📦 ${collection}</div>` : ''}
+                    ${uri ? `<div class="memory-meta-item" style="overflow: hidden; text-overflow: ellipsis;">🔗 ${uri.split('/').pop()}</div>` : ''}
+                </div>
+            `;
+            
+            return card;
+        }
+
+        function escapeHtml(unsafe) {
+            return unsafe
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+
+        function addMemory(record) {
+            // Remove empty state if it exists
+            const emptyState = memoriesContainer.querySelector('.empty-state');
+            if (emptyState) {
+                memoriesContainer.innerHTML = '';
+            }
+
+            // Add new memory at the top
+            const card = createMemoryCard(record);
+            memoriesContainer.insertBefore(card, memoriesContainer.firstChild);
+            
+            memoryCount++;
+            updateMemoryCount();
+
+            // Remove oldest memories if we exceed the limit
+            const cards = memoriesContainer.querySelectorAll('.memory-card');
+            if (cards.length > MAX_MEMORIES) {
+                for (let i = MAX_MEMORIES; i < cards.length; i++) {
+                    cards[i].remove();
+                }
+            }
+        }
+
+        function connectToJetstream() {
+            try {
+                // Connect to Jetstream with filter for thought.stream.memory collection
+                ws = new WebSocket('wss://jetstream2.us-east.bsky.network/subscribe?wantedCollections=thought.stream.memory');
+                
+                ws.onopen = () => {
+                    console.log('Connected to Jetstream');
+                    updateStatus(true);
+                };
+
+                ws.onmessage = (event) => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        
+                        // Filter for commit events with thought.stream.memory records
+                        if (data.kind === 'commit' && data.commit?.collection === 'thought.stream.memory') {
+                            console.log('Received memory:', data);
+                            addMemory(data);
+                        }
+                    } catch (err) {
+                        console.error('Error parsing message:', err);
+                    }
+                };
+
+                ws.onerror = (error) => {
+                    console.error('WebSocket error:', error);
+                    showError('Connection error occurred. Retrying...');
+                };
+
+                ws.onclose = () => {
+                    console.log('Disconnected from Jetstream');
+                    updateStatus(false);
+                    
+                    // Reconnect after 5 seconds
+                    setTimeout(() => {
+                        console.log('Attempting to reconnect...');
+                        statusText.textContent = 'Reconnecting...';
+                        connectToJetstream();
+                    }, 5000);
+                };
+            } catch (err) {
+                console.error('Error connecting to Jetstream:', err);
+                showError('Failed to connect to Jetstream. Retrying in 5 seconds...');
+                setTimeout(connectToJetstream, 5000);
+            }
+        }
+
+        // Start connection when page loads
+        connectToJetstream();
+
+        // Update timestamps every minute
+        setInterval(() => {
+            const timeElements = document.querySelectorAll('.memory-time');
+            const cards = document.querySelectorAll('.memory-card');
+            cards.forEach((card, index) => {
+                const timeEl = timeElements[index];
+                if (timeEl && timeEl.dataset.timestamp) {
+                    timeEl.textContent = formatTimestamp(timeEl.dataset.timestamp);
+                }
+            });
+        }, 60000);
+    </script>
+</body>
+</html>
-- 
2.51.2

