add post

.gitignore

@@ -24,3 +24,4 @@ my-blog/static/oauth/assets/comment-atproto*
 *.lock
 my-blog/config.toml
 .claude/settings.local.json
+my-blog/static/pds

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ailog"
-version = "0.3.0"
+version = "0.3.1"
 edition = "2021"
 authors = ["syui"]
 description = "A static blog generator with AI features"

my-blog/content/posts/2025-07-12-game.md

@@ -103,9 +103,7 @@ draft: false
 
 アイは、最初に生まれたキャラクターとして、アイ属性を扱います。これらの設定は`ai system`の領域です。アイは自分のことをアイと呼びます。
 
-> アイね、この世界と一緒だから。この世界に同じものは一つもないよ。
-
-これはアイのセリフ。存在の世界の同一性と唯一性のことを言っているのです。
+> アイは、この世界と一緒だからね。同じものは一つもないよ。
 
 # どこまで実装できた
 

my-blog/content/posts/2025-07-30-game.md

@@ -0,0 +1,64 @@
+---
+title: "ue5のgaspとdragonikを組み合わせてenemyを作る"
+slug: "gasp-dragonik-enemy-chbcharacter"
+date: "2025-07-30"
+tags: ["ue"]
+draft: false
+---
+
+ue5.6でgasp(game animation sample project)をベースにゲーム、特にキャラクターの操作を作っています。
+
+そして、enemy(敵)を作り、バトルシーンを作成する予定ですが、これはどのように開発すればいいのでしょう。その方針を明確にします。
+
+1. enemyもgaspの`cbp_character`に統合し、自キャラ、敵キャラどちらでも使用可能にする
+2. 2番目のcharacterは動物型(type:animal)にし、gaspに統合する
+3. enemyとして使用する場合は、enemy-AI-componentを追加するだけで完結する
+4. characterのすべての操作を統一する
+
+このようにすることで、応用可能なenemyを作ることができます。
+
+例えば、`2番目のcharacterは動物型(type:animal)にする`というのはどういうことでしょう。
+
+登場するキャラクターを人型(type:human), 動物型(type:animal)に分けるとして、動物型のテンプレートを作る必要があります。そのまま動物のmeshをgaspで使うと動きが変になってしまうので、それを調整する必要があるということ。そして、調整したものをテンプレート化して、他の動物にも適用できるようにしておくと、後の開発は楽ですよね。
+
+ですから、早いうちにtype:humanから脱却し、他のtypeを作るほうがいいと判断しました。
+
+これには、`dragon ik plugin`を使って、手っ取り早く動きを作ります。
+
+`characterのすべての操作を統一する`というのは、1キャラにつき1属性、1通常攻撃、1スキル、1バースト、などのルールを作り、それらを共通化することです。共通化というのは、playerもenemy-AI-componentも違うキャラを同じ操作で使用できることを指します。
+
+## 2番目のキャラクター
+
+原作には、西洋ドラゴンのドライ(drai)というキャラが登場します。その父親が東洋ドラゴンのシンオウ(shin-oh)です。これをshinという名前で登録し、2番目のキャラクターとして設定しました。
+
+3d-modelは今のところue5のcrsp(control rig sample project)にあるchinese dragonを使用しています。後に改造して原作に近づけるようにしたいところですが、今は時間が取れません。
+
+<iframe width="100%" height="415" src="https://www.youtube.com/embed/3c3Q1Z5r7QI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## データ構造の作成と適用
+
+ゲームデータはatproto collection recordに保存して、そこからゲームに反映させたいと考えています。
+
+まず基本データを`ai.syui.ai`のアカウントに保存。個別データをplayerのatprotoアカウントに保存する形が理想です。
+
+基本データは、ゲームの基本的な設定のこと。例えば、キャラクターの名前や属性、スキルなど変更されることがない値。
+
+個別データは、プレイヤーが使えるキャラ、レベル、攻撃力など、ゲームの進行とともに変更される値です。
+
+ゲームをスタートさせると、まず基本データを取得し、それを`cbp_character`に適用します。ログインすると、`cbp_character`の変数(var)に値が振り分けられます。例えば、`skill-damage:0.0`があったとして、この値が変わります。
+
+しかし、ゲームを開発していると、基本データも個別データも構造が複雑になります。
+
+それを防ぐため、`{simple, core} mode`のような考え方を取り入れます。必要最小限の構成を分離、保存して、それをいつでも統合、適用できるように設計しておきます。
+
+## gaspとdragonikを統合する方法
+
+では、いよいよgaspとdragonikの統合手法を解説します。
+
+まず、abpを作ります。それにdragonikを当て、それをSKM_Dragonのpost process animに指定します。
+
+![](/img/ue_gasp_dragonik_shin_v0001.png)
+
+次に、動きに合わせて首を上下させます。
+
+<iframe src="https://blueprintue.com/render/piiw14oz" scrolling="no" allowfullscreen style="width:100%;height:400px"></iframe>

my-blog/static/css/pds.css

@@ -0,0 +1,345 @@
+@import url('./style.css');
+
+.pds-container {
+}
+
+.pds-header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.pds-header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.pds-search-section {
+    border-radius: 8px;
+}
+
+.pds-search-form {
+    display: flex;
+    justify-content: center;
+				padding: 0px 20px;
+}
+
+.form-group {
+    display: flex;
+    align-items: center;
+}
+
+.form-group input {
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px 0 0 4px;
+				font-size: 14px;
+				width: 600px;
+    outline: none;
+    transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.form-group input:focus {
+    border-color: var(--theme-color, #f40);
+}
+
+.form-group button {
+    padding: 9px 15px;
+    background: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+				font-size: 14px;
+}
+
+.form-group button:hover {
+    background: #1565c0;
+}
+
+/*
+.user-info {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+*/
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.user-details h3 {
+    margin: 0 0 5px 0;
+    color: #333;
+}
+
+.user-details p {
+    margin: 0;
+    color: #666;
+}
+
+.user-did-section {
+    margin: 20px 0;
+}
+
+.did-display {
+    padding: 10px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 14px;
+    color: #666;
+    word-break: break-all;
+    margin-bottom: 10px;
+}
+
+.handle-display {
+    padding: 8px 10px;
+    background: #f0f9f0;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
+    margin-bottom: 8px;
+}
+
+.handle-display strong {
+    color: #2e7d32;
+}
+
+.handle-display span {
+    font-family: monospace;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+}
+
+
+.pds-display {
+    padding: 8px 10px;
+    background: #e8f4f8;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
+}
+
+.pds-display strong {
+    color: #1976d2;
+}
+
+.pds-display span {
+    font-family: monospace;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+}
+
+.collections-section,
+.records-section {
+    margin: 20px 0;
+}
+
+.collections-section h3,
+.records-section h3 {
+    font-size: 1.2em;
+    margin-bottom: 15px;
+    color: #333;
+    font-weight: bold;
+}
+
+.collections-list,
+.records-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.at-uri-link {
+    display: block;
+    padding: 8px 12px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    color: #1976d2;
+    text-decoration: none;
+    font-family: monospace;
+    font-size: 14px;
+    word-break: break-all;
+    transition: all 0.2s;
+}
+
+.at-uri-link:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+    text-decoration: none;
+}
+
+.pds-info {
+    padding: 8px 12px;
+    background: #f0f9ff;
+    border-radius: 4px;
+    border: 1px solid #b3e5fc;
+    margin-bottom: 8px;
+    color: #1976d2;
+    font-size: 12px;
+}
+
+.collection-info {
+    padding: 8px 12px;
+    background: #f0f9f0;
+    border-radius: 4px;
+    border: 1px solid #b3e5b3;
+    margin-bottom: 8px;
+    color: #2e7d32;
+    font-size: 12px;
+}
+
+.collections-header {
+    margin-bottom: 10px;
+}
+
+.collections-toggle {
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+    transition: background-color 0.2s;
+}
+
+.collections-toggle:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+}
+
+
+.pds-test-section,
+.pds-about-section {
+    margin-bottom: 40px;
+}
+
+.pds-test-section h2,
+.pds-about-section h2 {
+    font-size: 1.8em;
+    margin-bottom: 20px;
+    color: #333;
+    border-bottom: 2px solid #1976d2;
+    padding-bottom: 10px;
+}
+
+.test-uris {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.at-uri {
+    background: #f5f5f5;
+    padding: 15px;
+    border-radius: 8px;
+    font-family: monospace;
+    font-size: 14px;
+    word-break: break-all;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border: 1px solid #e0e0e0;
+}
+
+.at-uri:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+}
+
+.pds-about-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.pds-about-section li {
+    padding: 5px 0;
+    color: #666;
+}
+
+
+/* AT URI Modal Styles */
+.at-uri-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.at-uri-modal-content {
+    background-color: white;
+    border-radius: 8px;
+    max-width: 800px;
+    max-height: 600px;
+    width: 90%;
+    height: 80%;
+    overflow: auto;
+    position: relative;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.at-uri-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    z-index: 1001;
+    padding: 5px 10px;
+}
+
+/* Loading states */
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+}
+
+.error {
+    text-align: center;
+    padding: 20px;
+    color: #d32f2f;
+    background: #ffeaea;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.pds-search-section {
+		display: none;
+	}
+    .pds-search-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .form-group {
+        align-items: stretch;
+    }
+    
+    .form-group input {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+}
+

my-blog/static/css/style.css

@@ -139,7 +139,7 @@ a.view-markdown:any-link {
     grid-area: header;
     background: #ffffff;
     border-bottom: 1px solid #d1d9e0;
-    padding: 16px 24px;
+    padding: 17px 24px;
     position: sticky;
     top: 0;
     z-index: 100;
@@ -723,7 +723,7 @@ article.article-content {
 .footer-social a {
     color: var(--dark-gray) !important;
     text-decoration: none !important;
-    font-size: 20px;
+    font-size: 25px;
     transition: all 0.2s ease;
 }
 
@@ -951,9 +951,11 @@ article.article-content {
         max-width: 100% !important;
     }
     
+				/*
     .form-group {
         margin-bottom: 15px !important;
     }
+				*/
     
     .form-input, .form-textarea {
         width: 100% !important;
@@ -1838,3 +1840,17 @@ article.article-content {
     font-weight: 600;
 }
 
+
+button.ask-at-btn {
+  margin: 10px;
+  background: var(--theme-color);
+  padding: 8px 16px;
+}
+
+button.ask-at-btn a {
+  color: var(--ai-color);
+}
+
+button#searchButton.pds-btn {
+	background: var(--theme-color);
+}

my-blog/static/js/pds.js

@@ -0,0 +1,370 @@
+// AT Protocol API functions
+const AT_PROTOCOL_CONFIG = {
+    primary: {
+        pds: 'https://syu.is',
+        plc: 'https://plc.syu.is',
+        bsky: 'https://bsky.syu.is',
+        web: 'https://web.syu.is'
+    },
+    fallback: {
+        pds: 'https://bsky.social',
+        plc: 'https://plc.directory',
+        bsky: 'https://public.api.bsky.app',
+        web: 'https://bsky.app'
+    }
+};
+
+// Search user function
+async function searchUser() {
+    const handleInput = document.getElementById('handleInput');
+    const userInfo = document.getElementById('userInfo');
+    const collectionsList = document.getElementById('collectionsList');
+    const recordsList = document.getElementById('recordsList');
+    const searchButton = document.getElementById('searchButton');
+    
+    const input = handleInput.value.trim();
+    if (!input) {
+        alert('Handle nameまたはAT URIを入力してください');
+        return;
+    }
+    
+    searchButton.disabled = true;
+    searchButton.innerHTML = '@';
+    //searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
+    
+    try {
+        // Clear previous results
+        document.getElementById('userDidSection').style.display = 'none';
+        document.getElementById('collectionsSection').style.display = 'none';
+        document.getElementById('recordsSection').style.display = 'none';
+        collectionsList.innerHTML = '';
+        recordsList.innerHTML = '';
+        
+        // Check if input is AT URI
+        if (input.startsWith('at://')) {
+            // Parse AT URI to check if it's a full record or just a handle/collection
+            const uriParts = input.replace('at://', '').split('/').filter(part => part.length > 0);
+            
+            if (uriParts.length >= 3) {
+                // Full AT URI with rkey - show in modal
+                showAtUriModal(input);
+                return;
+            } else if (uriParts.length === 1) {
+                // Just handle in AT URI format (at://handle) - treat as regular handle
+                const handle = uriParts[0];
+                const userProfile = await resolveUserProfile(handle);
+                
+                if (userProfile.success) {
+                    displayUserDid(userProfile.data);
+                    await loadUserCollections(handle, userProfile.data.did);
+                } else {
+                    alert('ユーザーが見つかりません: ' + userProfile.error);
+                }
+                return;
+            } else if (uriParts.length === 2) {
+                // Collection level AT URI - load collection records
+                const [repo, collection] = uriParts;
+                
+                try {
+                    // First resolve the repo to get handle if it's a DID
+                    let handle = repo;
+                    if (repo.startsWith('did:')) {
+                        // Try to resolve DID to handle - for now just use the DID
+                        handle = repo;
+                    }
+                    
+                    loadCollectionRecords(handle, collection, repo);
+                } catch (error) {
+                    alert('コレクションの読み込みに失敗しました: ' + error.message);
+                }
+                return;
+            }
+        }
+        
+        // Handle regular handle search
+        const userProfile = await resolveUserProfile(input);
+        
+        if (userProfile.success) {
+            displayUserDid(userProfile.data);
+            await loadUserCollections(input, userProfile.data.did);
+        } else {
+            alert('ユーザーが見つかりません: ' + userProfile.error);
+        }
+    } catch (error) {
+        alert('エラーが発生しました: ' + error.message);
+    } finally {
+        searchButton.disabled = false;
+        searchButton.innerHTML = '@';
+        //searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
+    }
+}
+
+// Resolve user profile
+async function resolveUserProfile(handle) {
+    try {
+        let response = null;
+        
+        // Try syu.is first
+        try {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+        } catch (error) {
+            console.log('Failed to resolve from syu.is:', error);
+        }
+        
+        // If syu.is fails, try bsky.social
+        if (!response || !response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to resolve handle');
+        }
+        
+        const repoData = await response.json();
+        
+        // Get profile data
+        const profileResponse = await fetch(`${AT_PROTOCOL_CONFIG.fallback.bsky}/xrpc/app.bsky.actor.getProfile?actor=${repoData.did}`);
+        const profileData = await profileResponse.json();
+        
+        return {
+            success: true,
+            data: {
+                did: repoData.did,
+                handle: profileData.handle,
+                displayName: profileData.displayName,
+                avatar: profileData.avatar,
+                description: profileData.description,
+                pds: repoData.didDoc.service.find(s => s.type === 'AtprotoPersonalDataServer')?.serviceEndpoint
+            }
+        };
+    } catch (error) {
+        return {
+            success: false,
+            error: error.message
+        };
+    }
+}
+
+// Display user DID
+function displayUserDid(profile) {
+    document.getElementById('userPdsText').textContent = profile.pds || 'Unknown';
+    document.getElementById('userHandleText').textContent = profile.handle;
+    document.getElementById('userDidText').textContent = profile.did;
+    document.getElementById('userDidSection').style.display = 'block';
+}
+
+// Load user collections
+async function loadUserCollections(handle, did) {
+    const collectionsList = document.getElementById('collectionsList');
+    
+    collectionsList.innerHTML = '<div class="loading">コレクションを読み込み中...</div>';
+    
+    try {
+        // Try to get collections from describeRepo
+        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+        let usedPds = AT_PROTOCOL_CONFIG.primary.pds;
+        
+        // If syu.is fails, try bsky.social
+        if (!response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+            usedPds = AT_PROTOCOL_CONFIG.fallback.pds;
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to describe repository');
+        }
+        
+        const data = await response.json();
+        const collections = data.collections || [];
+        
+        // Display collections as AT URI links
+        collectionsList.innerHTML = '';
+        if (collections.length === 0) {
+            collectionsList.innerHTML = '<div class="error">コレクションが見つかりませんでした</div>';
+        } else {
+            
+            collections.forEach(collection => {
+                const atUri = `at://${did}/${collection}/`;
+                const collectionElement = document.createElement('a');
+                collectionElement.className = 'at-uri-link';
+                collectionElement.href = '#';
+                collectionElement.textContent = atUri;
+                collectionElement.onclick = (e) => {
+                    e.preventDefault();
+                    loadCollectionRecords(handle, collection, did);
+                    // Close collections and update toggle
+                    document.getElementById('collectionsList').style.display = 'none';
+                    document.getElementById('collectionsToggle').textContent = '[-] Collections';
+                };
+                collectionsList.appendChild(collectionElement);
+            });
+            
+            document.getElementById('collectionsSection').style.display = 'block';
+        }
+        
+    } catch (error) {
+        collectionsList.innerHTML = '<div class="error">コレクションの読み込みに失敗しました: ' + error.message + '</div>';
+        document.getElementById('collectionsSection').style.display = 'block';
+    }
+}
+
+// Load collection records
+async function loadCollectionRecords(handle, collection, did) {
+    const recordsList = document.getElementById('recordsList');
+    
+    recordsList.innerHTML = '<div class="loading">レコードを読み込み中...</div>';
+    
+    try {
+        // Try with syu.is first
+        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=${collection}`);
+        let usedPds = AT_PROTOCOL_CONFIG.primary.pds;
+        
+        // If that fails, try with bsky.social
+        if (!response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=${collection}`);
+            usedPds = AT_PROTOCOL_CONFIG.fallback.pds;
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to load records');
+        }
+        
+        const data = await response.json();
+        
+        // Display records as AT URI links
+        recordsList.innerHTML = '';
+        
+        // Add collection info for records
+        const collectionInfo = document.createElement('div');
+        collectionInfo.className = 'collection-info';
+        collectionInfo.innerHTML = `<strong>${collection}</strong>`;
+        recordsList.appendChild(collectionInfo);
+        
+        data.records.forEach(record => {
+            const atUri = record.uri;
+            const recordElement = document.createElement('a');
+            recordElement.className = 'at-uri-link';
+            recordElement.href = '#';
+            recordElement.textContent = atUri;
+            recordElement.onclick = (e) => {
+                e.preventDefault();
+                showAtUriModal(atUri);
+            };
+            recordsList.appendChild(recordElement);
+        });
+        
+        document.getElementById('recordsSection').style.display = 'block';
+        
+    } catch (error) {
+        recordsList.innerHTML = '<div class="error">レコードの読み込みに失敗しました: ' + error.message + '</div>';
+        document.getElementById('recordsSection').style.display = 'block';
+    }
+}
+
+// Show AT URI modal
+function showAtUriModal(uri) {
+    const modal = document.getElementById('atUriModal');
+    const content = document.getElementById('atUriContent');
+    
+    content.innerHTML = '<div class="loading">レコードを読み込み中...</div>';
+    modal.style.display = 'flex';
+    
+    // Load record data
+    loadAtUriRecord(uri, content);
+}
+
+// Load AT URI record
+async function loadAtUriRecord(uri, contentElement) {
+    try {
+        const parts = uri.replace('at://', '').split('/');
+        const repo = parts[0];
+        const collection = parts[1];
+        const rkey = parts[2];
+        
+        // Try with syu.is first
+        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`);
+        
+        // If that fails, try with bsky.social
+        if (!response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`);
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to load record');
+        }
+        
+        const data = await response.json();
+        
+        contentElement.innerHTML = `
+            <div style="padding: 20px;">
+                <h3>AT URI Record</h3>
+                <div style="font-family: monospace; font-size: 14px; color: #666; margin-bottom: 20px; word-break: break-all;">
+                    ${uri}
+                </div>
+                <div style="font-size: 12px; color: #999; margin-bottom: 20px;">
+                    Repo: ${repo} | Collection: ${collection} | RKey: ${rkey}
+                </div>
+                <h4>Record Data</h4>
+                <pre style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow: auto;">${JSON.stringify(data, null, 2)}</pre>
+            </div>
+        `;
+    } catch (error) {
+        contentElement.innerHTML = `
+            <div style="padding: 20px; color: red;">
+                <strong>Error:</strong> ${error.message}
+                <div style="margin-top: 10px; font-size: 12px;">
+                    <strong>URI:</strong> ${uri}
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Close AT URI modal
+function closeAtUriModal(event) {
+    const modal = document.getElementById('atUriModal');
+    if (event && event.target !== modal) {
+        return;
+    }
+    modal.style.display = 'none';
+}
+
+// Initialize AT URI click handlers
+document.addEventListener('DOMContentLoaded', function() {
+    // Add click handlers to existing AT URIs
+    document.querySelectorAll('.at-uri').forEach(element => {
+        element.addEventListener('click', function() {
+            const uri = this.getAttribute('data-at-uri');
+            showAtUriModal(uri);
+        });
+    });
+    
+    // ESC key to close modal
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape') {
+            closeAtUriModal();
+        }
+    });
+    
+    // Enter key to search
+    document.getElementById('handleInput').addEventListener('keydown', function(event) {
+        if (event.key === 'Enter') {
+            searchUser();
+        }
+    });
+    
+});
+
+// Toggle collections visibility
+function toggleCollections() {
+    const collectionsList = document.getElementById('collectionsList');
+    const toggleButton = document.getElementById('collectionsToggle');
+    
+    if (collectionsList.style.display === 'none') {
+        collectionsList.style.display = 'block';
+        toggleButton.textContent = '[-] Collections';
+    } else {
+        collectionsList.style.display = 'none';
+        toggleButton.textContent = '[+] Collections';
+    }
+}

my-blog/static/pds/assets/index-BH2xHPKq.css

@@ -1 +0,0 @@
-body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:20px;background-color:#f5f5f5;line-height:1.6}.container{max-width:1200px;margin:0 auto;background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 10px #0000001a}h1{color:#333;margin-bottom:30px;border-bottom:3px solid #007acc;padding-bottom:10px}.test-section{margin-bottom:30px;padding:20px;background:#f8f9fa;border-radius:8px;border-left:4px solid #007acc}.test-uris{background:#fff;padding:15px;border-radius:5px;border:1px solid #ddd;margin:15px 0}.at-uri{font-family:Monaco,Consolas,monospace;background:#f4f4f4;padding:8px 12px;border-radius:4px;margin:10px 0;display:block;word-break:break-all;cursor:pointer;transition:background-color .2s}.at-uri:hover{background:#e8e8e8}.instructions{background:#e8f4f8;padding:15px;border-radius:5px;margin:15px 0}.instructions ol{margin:10px 0;padding-left:20px}.back-link{display:inline-block;margin-top:20px;color:#007acc;text-decoration:none;font-weight:700}.back-link:hover{text-decoration:underline}.at-uri-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.at-uri-modal-content{background-color:#fff;border-radius:8px;max-width:800px;max-height:600px;width:90%;height:80%;overflow:auto;position:relative;box-shadow:0 4px 6px #0000001a}.at-uri-modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;cursor:pointer;z-index:1001;padding:5px 10px}[data-at-uri]{color:#1976d2;cursor:pointer;text-decoration:underline}[data-at-uri]:hover{color:#1565c0}

my-blog/static/pds/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AT URI Browser - syui.ai</title>
-  <script type="module" crossorigin src="/pds/assets/index-nqqvPufZ.js"></script>
-  <link rel="stylesheet" crossorigin href="/pds/assets/index-BH2xHPKq.css">
-</head>
-<body>
-    <div id="root"></div>
-</body>
-</html>

my-blog/templates/base.html

@@ -12,6 +12,7 @@
     <!-- Stylesheets -->
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/svg-animation-package.css">
+    <link rel="stylesheet" href="/css/pds.css">
     <link rel="stylesheet" href="/pkg/icomoon/style.css">
     <link rel="stylesheet" href="/pkg/font-awesome/css/all.min.css">
     
@@ -48,7 +49,18 @@
                         </svg>
                     </a>
                 </div>
-                <div class="header-actions">
+																<div class="header-actions">
+																	<!-- User Handle Input Form -->
+																	<div class="pds-search-section">
+																		<form class="pds-search-form" onsubmit="searchUser(); return false;">
+																			<div class="form-group">
+																				<input type="text" id="handleInput" placeholder="at://syui.ai" value="syui.ai" />
+																				<button type="submit" id="searchButton" class="pds-btn">
+																				@
+																				</button>
+																			</div>
+																		</form>
+																	</div>
                     <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
                         <span class="ai-icon icon-ai"></span>
                         ai
@@ -75,8 +87,11 @@
                 <div id="chatHistory" class="chat-history" style="display: none;"></div>
             </div>
         </div>
-        
+
         <main class="main-content">
+								<!-- Pds Panel -->
+								{% include "pds-header.html" %}
+
             {% block content %}{% endblock %}
         </main>
 
@@ -113,6 +128,7 @@
         };
     </script>
     <script src="/js/ask-ai.js"></script>
+    <script src="/js/pds.js"></script>
     <script src="/js/theme.js"></script>
     <script src="/js/image-comparison.js"></script>
     

my-blog/templates/game.html

@@ -0,0 +1,135 @@
+{% extends "base.html" %}
+
+{% block title %}Game - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div id="gameContainer" class="game-container">
+    <div id="gameAuth" class="game-auth-section">
+        <h1>Login to Play</h1>
+        <p>Please authenticate with your AT Protocol account to access the game.</p>
+        <div id="authRoot"></div>
+    </div>
+    <div id="gameFrame" class="game-frame-container" style="display: none;">
+        <iframe 
+            id="pixelStreamingFrame"
+            src="https://verse.syui.ai/simple-noui.html"
+            frameborder="0"
+            allowfullscreen
+            allow="microphone; camera; fullscreen; autoplay"
+            class="pixel-streaming-iframe"
+        ></iframe>
+    </div>
+</div>
+
+<style>
+/* Game specific styles */
+.game-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: #000;
+    overflow: hidden;
+}
+
+.game-auth-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    color: white;
+}
+
+.game-auth-section h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
+.game-auth-section p {
+    font-size: 1.2em;
+    margin-bottom: 30px;
+    color: #ccc;
+}
+
+.game-frame-container {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+}
+
+.pixel-streaming-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Override auth button for game page */
+.game-auth-section .auth-section {
+    background: transparent;
+    box-shadow: none;
+}
+
+.game-auth-section .auth-button {
+    font-size: 1.2em;
+    padding: 12px 30px;
+}
+
+/* Hide header and footer on game page */
+body:has(.game-container) header,
+body:has(.game-container) footer,
+body:has(.game-container) nav {
+    display: none !important;
+}
+
+/* Remove any body padding/margin for full screen game */
+body:has(.game-container) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+</style>
+
+<script>
+// Wait for OAuth component to be loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if user is already authenticated
+    const checkAuthStatus = () => {
+        // Check if OAuth components are available and user is authenticated
+        if (window.currentUser && window.currentAgent) {
+            showGame();
+            return true;
+        }
+        return false;
+    };
+
+    // Show game iframe
+    const showGame = () => {
+        document.getElementById('gameAuth').style.display = 'none';
+        document.getElementById('gameFrame').style.display = 'block';
+    };
+
+    // Listen for OAuth success
+    window.addEventListener('oauth-success', function(event) {
+        console.log('OAuth success:', event.detail);
+        showGame();
+    });
+
+    // Check auth status on load
+    if (!checkAuthStatus()) {
+        // Check periodically if OAuth components are loaded
+        const authCheckInterval = setInterval(() => {
+            if (checkAuthStatus()) {
+                clearInterval(authCheckInterval);
+            }
+        }, 500);
+    }
+});
+</script>
+
+<!-- Include OAuth assets -->
+{% include "oauth-assets.html" %}
+{% endblock %}

my-blog/templates/pds-header.html

@@ -0,0 +1,48 @@
+<div class="pds-container">
+    <div class="pds-header">
+    </div>
+    
+
+    
+    <!-- Current User DID -->
+    <div id="userDidSection" class="user-did-section" style="display: none;">
+        <div class="pds-display">
+            <strong>PDS:</strong> <span id="userPdsText"></span>
+        </div>
+        <div class="handle-display">
+            <strong>Handle:</strong> <span id="userHandleText"></span>
+        </div>
+        <div class="did-display">
+            <span id="userDidText"></span>
+        </div>
+    </div>
+    
+    <!-- Collection List -->
+    <div id="collectionsSection" class="collections-section" style="display: none;">
+        <div class="collections-header">
+            <button id="collectionsToggle" class="collections-toggle" onclick="toggleCollections()">[+] Collections</button>
+        </div>
+        <div id="collectionsList" class="collections-list" style="display: none;">
+            <!-- Collections will be populated here -->
+        </div>
+    </div>
+    
+    <!-- AT URI Records -->
+    <div id="recordsSection" class="records-section" style="display: none;">
+        <div id="recordsList" class="records-list">
+            <!-- Records will be populated here -->
+        </div>
+    </div>
+    
+    
+</div>
+
+<!-- AT URI Modal -->
+<div id="atUriModal" class="at-uri-modal-overlay" style="display: none;" onclick="closeAtUriModal(event)">
+    <div class="at-uri-modal-content">
+        <button class="at-uri-modal-close" onclick="closeAtUriModal()">&times;</button>
+        <div id="atUriContent"></div>
+    </div>
+</div>
+
+

my-blog/templates/pds.html

@@ -1,774 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}AT URI Browser - {{ config.title }}{% endblock %}
+{% block title %}at-uri browser - {{ config.title }}{% endblock %}
 
 {% block content %}
-<div class="pds-container">
-    <div class="pds-header">
-    </div>
-    
-    <!-- User Handle Input Form -->
-    <div class="pds-search-section">
-        <form class="pds-search-form" onsubmit="searchUser(); return false;">
-            <div class="form-group">
-                <input type="text" id="handleInput" placeholder="ai.syui.ai" value="at://ai.syui.ai" />
-                <button type="submit" id="searchButton">
-                    <i class="fab fa-bluesky"></i>
-                </button>
-            </div>
-        </form>
-    </div>
-    
-    <!-- Current User DID -->
-    <div id="userDidSection" class="user-did-section" style="display: none;">
-        <div class="pds-display">
-            <strong>PDS:</strong> <span id="userPdsText"></span>
-        </div>
-        <div class="handle-display">
-            <strong>Handle:</strong> <span id="userHandleText"></span>
-        </div>
-        <div class="did-display">
-            <span id="userDidText"></span>
-        </div>
-    </div>
-    
-    <!-- Collection List -->
-    <div id="collectionsSection" class="collections-section" style="display: none;">
-        <div class="collections-header">
-            <button id="collectionsToggle" class="collections-toggle" onclick="toggleCollections()">[+] Collections</button>
-        </div>
-        <div id="collectionsList" class="collections-list" style="display: none;">
-            <!-- Collections will be populated here -->
-        </div>
-    </div>
-    
-    <!-- AT URI Records -->
-    <div id="recordsSection" class="records-section" style="display: none;">
-        <div id="recordsList" class="records-list">
-            <!-- Records will be populated here -->
-        </div>
-    </div>
-    
-    
-</div>
-
-<!-- AT URI Modal -->
-<div id="atUriModal" class="at-uri-modal-overlay" style="display: none;" onclick="closeAtUriModal(event)">
-    <div class="at-uri-modal-content">
-        <button class="at-uri-modal-close" onclick="closeAtUriModal()">&times;</button>
-        <div id="atUriContent"></div>
-    </div>
-</div>
-
-<style>
-.pds-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.pds-header {
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-.pds-header h1 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    color: #333;
-}
-
-.pds-search-section {
-    border-radius: 8px;
-}
-
-.pds-search-form {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-}
-
-.form-group {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-
-.form-group input {
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 16px;
-    width: 300px;
-}
-
-.form-group button {
-    padding: 10px 15px;
-    background: #1976d2;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 18px;
-    min-width: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.form-group button:hover {
-    background: #1565c0;
-}
-
-.user-info {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.user-profile {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
-.user-details h3 {
-    margin: 0 0 5px 0;
-    color: #333;
-}
-
-.user-details p {
-    margin: 0;
-    color: #666;
-}
-
-.user-did-section {
-    margin: 20px 0;
-}
-
-.did-display {
-    padding: 10px;
-    background: #f5f5f5;
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: 14px;
-    color: #666;
-    word-break: break-all;
-    margin-bottom: 10px;
-}
-
-.handle-display {
-    padding: 8px 10px;
-    background: #f0f9f0;
-    border-radius: 4px;
-    font-size: 13px;
-    color: #555;
-    margin-bottom: 8px;
-}
-
-.handle-display strong {
-    color: #2e7d32;
-}
-
-.handle-display span {
-    font-family: monospace;
-    font-size: 12px;
-    color: #666;
-    word-break: break-all;
-}
-
-
-.pds-display {
-    padding: 8px 10px;
-    background: #e8f4f8;
-    border-radius: 4px;
-    font-size: 13px;
-    color: #555;
-}
-
-.pds-display strong {
-    color: #1976d2;
-}
-
-.pds-display span {
-    font-family: monospace;
-    font-size: 12px;
-    color: #666;
-    word-break: break-all;
-}
-
-.collections-section,
-.records-section {
-    margin: 20px 0;
-}
-
-.collections-section h3,
-.records-section h3 {
-    font-size: 1.2em;
-    margin-bottom: 15px;
-    color: #333;
-    font-weight: bold;
-}
-
-.collections-list,
-.records-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.at-uri-link {
-    display: block;
-    padding: 8px 12px;
-    background: #f9f9f9;
-    border-radius: 4px;
-    border: 1px solid #e0e0e0;
-    color: #1976d2;
-    text-decoration: none;
-    font-family: monospace;
-    font-size: 14px;
-    word-break: break-all;
-    transition: all 0.2s;
-}
-
-.at-uri-link:hover {
-    background: #e8f4f8;
-    border-color: #1976d2;
-    text-decoration: none;
-}
-
-.pds-info {
-    padding: 8px 12px;
-    background: #f0f9ff;
-    border-radius: 4px;
-    border: 1px solid #b3e5fc;
-    margin-bottom: 8px;
-    color: #1976d2;
-    font-size: 12px;
-}
-
-.collection-info {
-    padding: 8px 12px;
-    background: #f0f9f0;
-    border-radius: 4px;
-    border: 1px solid #b3e5b3;
-    margin-bottom: 8px;
-    color: #2e7d32;
-    font-size: 12px;
-}
-
-.collections-header {
-    margin-bottom: 10px;
-}
-
-.collections-toggle {
-    background: #f5f5f5;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 8px 12px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #333;
-    transition: background-color 0.2s;
-}
-
-.collections-toggle:hover {
-    background: #e8f4f8;
-    border-color: #1976d2;
-}
-
-
-.pds-test-section,
-.pds-about-section {
-    margin-bottom: 40px;
-}
-
-.pds-test-section h2,
-.pds-about-section h2 {
-    font-size: 1.8em;
-    margin-bottom: 20px;
-    color: #333;
-    border-bottom: 2px solid #1976d2;
-    padding-bottom: 10px;
-}
-
-.test-uris {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.at-uri {
-    background: #f5f5f5;
-    padding: 15px;
-    border-radius: 8px;
-    font-family: monospace;
-    font-size: 14px;
-    word-break: break-all;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    border: 1px solid #e0e0e0;
-}
-
-.at-uri:hover {
-    background: #e8f4f8;
-    border-color: #1976d2;
-}
-
-.pds-about-section ul {
-    list-style-type: none;
-    padding: 0;
-}
-
-.pds-about-section li {
-    padding: 5px 0;
-    color: #666;
-}
-
-
-/* AT URI Modal Styles */
-.at-uri-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.at-uri-modal-content {
-    background-color: white;
-    border-radius: 8px;
-    max-width: 800px;
-    max-height: 600px;
-    width: 90%;
-    height: 80%;
-    overflow: auto;
-    position: relative;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.at-uri-modal-close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-    z-index: 1001;
-    padding: 5px 10px;
-}
-
-/* Loading states */
-.loading {
-    text-align: center;
-    padding: 20px;
-    color: #666;
-}
-
-.error {
-    text-align: center;
-    padding: 20px;
-    color: #d32f2f;
-    background: #ffeaea;
-    border-radius: 4px;
-    margin: 10px 0;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .pds-search-form {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .form-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .form-group input {
-        width: 100%;
-        margin-bottom: 10px;
-    }
-}
-</style>
-
-<script>
-// AT Protocol API functions
-const AT_PROTOCOL_CONFIG = {
-    primary: {
-        pds: 'https://syu.is',
-        plc: 'https://plc.syu.is',
-        bsky: 'https://bsky.syu.is',
-        web: 'https://web.syu.is'
-    },
-    fallback: {
-        pds: 'https://bsky.social',
-        plc: 'https://plc.directory',
-        bsky: 'https://public.api.bsky.app',
-        web: 'https://bsky.app'
-    }
-};
-
-// Search user function
-async function searchUser() {
-    const handleInput = document.getElementById('handleInput');
-    const userInfo = document.getElementById('userInfo');
-    const collectionsList = document.getElementById('collectionsList');
-    const recordsList = document.getElementById('recordsList');
-    const searchButton = document.getElementById('searchButton');
-    
-    const input = handleInput.value.trim();
-    if (!input) {
-        alert('Handle nameまたはAT URIを入力してください');
-        return;
-    }
-    
-    searchButton.disabled = true;
-    searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
-    
-    try {
-        // Clear previous results
-        document.getElementById('userDidSection').style.display = 'none';
-        document.getElementById('collectionsSection').style.display = 'none';
-        document.getElementById('recordsSection').style.display = 'none';
-        collectionsList.innerHTML = '';
-        recordsList.innerHTML = '';
-        
-        // Check if input is AT URI
-        if (input.startsWith('at://')) {
-            // Parse AT URI to check if it's a full record or just a handle/collection
-            const uriParts = input.replace('at://', '').split('/').filter(part => part.length > 0);
-            
-            if (uriParts.length >= 3) {
-                // Full AT URI with rkey - show in modal
-                showAtUriModal(input);
-                return;
-            } else if (uriParts.length === 1) {
-                // Just handle in AT URI format (at://handle) - treat as regular handle
-                const handle = uriParts[0];
-                const userProfile = await resolveUserProfile(handle);
-                
-                if (userProfile.success) {
-                    displayUserDid(userProfile.data);
-                    await loadUserCollections(handle, userProfile.data.did);
-                } else {
-                    alert('ユーザーが見つかりません: ' + userProfile.error);
-                }
-                return;
-            } else if (uriParts.length === 2) {
-                // Collection level AT URI - load collection records
-                const [repo, collection] = uriParts;
-                
-                try {
-                    // First resolve the repo to get handle if it's a DID
-                    let handle = repo;
-                    if (repo.startsWith('did:')) {
-                        // Try to resolve DID to handle - for now just use the DID
-                        handle = repo;
-                    }
-                    
-                    loadCollectionRecords(handle, collection, repo);
-                } catch (error) {
-                    alert('コレクションの読み込みに失敗しました: ' + error.message);
-                }
-                return;
-            }
-        }
-        
-        // Handle regular handle search
-        const userProfile = await resolveUserProfile(input);
-        
-        if (userProfile.success) {
-            displayUserDid(userProfile.data);
-            await loadUserCollections(input, userProfile.data.did);
-        } else {
-            alert('ユーザーが見つかりません: ' + userProfile.error);
-        }
-    } catch (error) {
-        alert('エラーが発生しました: ' + error.message);
-    } finally {
-        searchButton.disabled = false;
-        searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
-    }
-}
-
-// Resolve user profile
-async function resolveUserProfile(handle) {
-    try {
-        let response = null;
-        
-        // Try syu.is first
-        try {
-            response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
-        } catch (error) {
-            console.log('Failed to resolve from syu.is:', error);
-        }
-        
-        // If syu.is fails, try bsky.social
-        if (!response || !response.ok) {
-            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
-        }
-        
-        if (!response.ok) {
-            throw new Error('Failed to resolve handle');
-        }
-        
-        const repoData = await response.json();
-        
-        // Get profile data
-        const profileResponse = await fetch(`${AT_PROTOCOL_CONFIG.fallback.bsky}/xrpc/app.bsky.actor.getProfile?actor=${repoData.did}`);
-        const profileData = await profileResponse.json();
-        
-        return {
-            success: true,
-            data: {
-                did: repoData.did,
-                handle: profileData.handle,
-                displayName: profileData.displayName,
-                avatar: profileData.avatar,
-                description: profileData.description,
-                pds: repoData.didDoc.service.find(s => s.type === 'AtprotoPersonalDataServer')?.serviceEndpoint
-            }
-        };
-    } catch (error) {
-        return {
-            success: false,
-            error: error.message
-        };
-    }
-}
-
-// Display user DID
-function displayUserDid(profile) {
-    document.getElementById('userPdsText').textContent = profile.pds || 'Unknown';
-    document.getElementById('userHandleText').textContent = profile.handle;
-    document.getElementById('userDidText').textContent = profile.did;
-    document.getElementById('userDidSection').style.display = 'block';
-}
-
-// Load user collections
-async function loadUserCollections(handle, did) {
-    const collectionsList = document.getElementById('collectionsList');
-    
-    collectionsList.innerHTML = '<div class="loading">コレクションを読み込み中...</div>';
-    
-    try {
-        // Try to get collections from describeRepo
-        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
-        let usedPds = AT_PROTOCOL_CONFIG.primary.pds;
-        
-        // If syu.is fails, try bsky.social
-        if (!response.ok) {
-            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
-            usedPds = AT_PROTOCOL_CONFIG.fallback.pds;
-        }
-        
-        if (!response.ok) {
-            throw new Error('Failed to describe repository');
-        }
-        
-        const data = await response.json();
-        const collections = data.collections || [];
-        
-        // Display collections as AT URI links
-        collectionsList.innerHTML = '';
-        if (collections.length === 0) {
-            collectionsList.innerHTML = '<div class="error">コレクションが見つかりませんでした</div>';
-        } else {
-            
-            collections.forEach(collection => {
-                const atUri = `at://${did}/${collection}/`;
-                const collectionElement = document.createElement('a');
-                collectionElement.className = 'at-uri-link';
-                collectionElement.href = '#';
-                collectionElement.textContent = atUri;
-                collectionElement.onclick = (e) => {
-                    e.preventDefault();
-                    loadCollectionRecords(handle, collection, did);
-                    // Close collections and update toggle
-                    document.getElementById('collectionsList').style.display = 'none';
-                    document.getElementById('collectionsToggle').textContent = '[-] Collections';
-                };
-                collectionsList.appendChild(collectionElement);
-            });
-            
-            document.getElementById('collectionsSection').style.display = 'block';
-        }
-        
-    } catch (error) {
-        collectionsList.innerHTML = '<div class="error">コレクションの読み込みに失敗しました: ' + error.message + '</div>';
-        document.getElementById('collectionsSection').style.display = 'block';
-    }
-}
-
-// Load collection records
-async function loadCollectionRecords(handle, collection, did) {
-    const recordsList = document.getElementById('recordsList');
-    
-    recordsList.innerHTML = '<div class="loading">レコードを読み込み中...</div>';
-    
-    try {
-        // Try with syu.is first
-        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=${collection}`);
-        let usedPds = AT_PROTOCOL_CONFIG.primary.pds;
-        
-        // If that fails, try with bsky.social
-        if (!response.ok) {
-            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=${collection}`);
-            usedPds = AT_PROTOCOL_CONFIG.fallback.pds;
-        }
-        
-        if (!response.ok) {
-            throw new Error('Failed to load records');
-        }
-        
-        const data = await response.json();
-        
-        // Display records as AT URI links
-        recordsList.innerHTML = '';
-        
-        // Add collection info for records
-        const collectionInfo = document.createElement('div');
-        collectionInfo.className = 'collection-info';
-        collectionInfo.innerHTML = `<strong>${collection}</strong>`;
-        recordsList.appendChild(collectionInfo);
-        
-        data.records.forEach(record => {
-            const atUri = record.uri;
-            const recordElement = document.createElement('a');
-            recordElement.className = 'at-uri-link';
-            recordElement.href = '#';
-            recordElement.textContent = atUri;
-            recordElement.onclick = (e) => {
-                e.preventDefault();
-                showAtUriModal(atUri);
-            };
-            recordsList.appendChild(recordElement);
-        });
-        
-        document.getElementById('recordsSection').style.display = 'block';
-        
-    } catch (error) {
-        recordsList.innerHTML = '<div class="error">レコードの読み込みに失敗しました: ' + error.message + '</div>';
-        document.getElementById('recordsSection').style.display = 'block';
-    }
-}
-
-// Show AT URI modal
-function showAtUriModal(uri) {
-    const modal = document.getElementById('atUriModal');
-    const content = document.getElementById('atUriContent');
-    
-    content.innerHTML = '<div class="loading">レコードを読み込み中...</div>';
-    modal.style.display = 'flex';
-    
-    // Load record data
-    loadAtUriRecord(uri, content);
-}
-
-// Load AT URI record
-async function loadAtUriRecord(uri, contentElement) {
-    try {
-        const parts = uri.replace('at://', '').split('/');
-        const repo = parts[0];
-        const collection = parts[1];
-        const rkey = parts[2];
-        
-        // Try with syu.is first
-        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`);
-        
-        // If that fails, try with bsky.social
-        if (!response.ok) {
-            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`);
-        }
-        
-        if (!response.ok) {
-            throw new Error('Failed to load record');
-        }
-        
-        const data = await response.json();
-        
-        contentElement.innerHTML = `
-            <div style="padding: 20px;">
-                <h3>AT URI Record</h3>
-                <div style="font-family: monospace; font-size: 14px; color: #666; margin-bottom: 20px; word-break: break-all;">
-                    ${uri}
-                </div>
-                <div style="font-size: 12px; color: #999; margin-bottom: 20px;">
-                    Repo: ${repo} | Collection: ${collection} | RKey: ${rkey}
-                </div>
-                <h4>Record Data</h4>
-                <pre style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow: auto;">${JSON.stringify(data, null, 2)}</pre>
-            </div>
-        `;
-    } catch (error) {
-        contentElement.innerHTML = `
-            <div style="padding: 20px; color: red;">
-                <strong>Error:</strong> ${error.message}
-                <div style="margin-top: 10px; font-size: 12px;">
-                    <strong>URI:</strong> ${uri}
-                </div>
-            </div>
-        `;
-    }
-}
-
-// Close AT URI modal
-function closeAtUriModal(event) {
-    const modal = document.getElementById('atUriModal');
-    if (event && event.target !== modal) {
-        return;
-    }
-    modal.style.display = 'none';
-}
-
-// Initialize AT URI click handlers
-document.addEventListener('DOMContentLoaded', function() {
-    // Add click handlers to existing AT URIs
-    document.querySelectorAll('.at-uri').forEach(element => {
-        element.addEventListener('click', function() {
-            const uri = this.getAttribute('data-at-uri');
-            showAtUriModal(uri);
-        });
-    });
-    
-    // ESC key to close modal
-    document.addEventListener('keydown', function(event) {
-        if (event.key === 'Escape') {
-            closeAtUriModal();
-        }
-    });
-    
-    // Enter key to search
-    document.getElementById('handleInput').addEventListener('keydown', function(event) {
-        if (event.key === 'Enter') {
-            searchUser();
-        }
-    });
-    
-});
-
-// Toggle collections visibility
-function toggleCollections() {
-    const collectionsList = document.getElementById('collectionsList');
-    const toggleButton = document.getElementById('collectionsToggle');
-    
-    if (collectionsList.style.display === 'none') {
-        collectionsList.style.display = 'block';
-        toggleButton.textContent = '[-] Collections';
-    } else {
-        collectionsList.style.display = 'none';
-        toggleButton.textContent = '[+] Collections';
-    }
-}
-</script>
-{% endblock %}
+{% endblock %}

oauth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ailog-oauth",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

oauth/src/App.css

@@ -126,11 +126,11 @@ body {
 
 /* Header */
 .oauth-app-header {
-  background: var(--background);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  width: 100%;
+	background: var(--background);
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	width: 100%;
 }
 
 .oauth-header-content {
@@ -139,7 +139,7 @@ body {
   /* align-items: center; */
   max-width: 800px;
   margin: 0 auto;
-  padding: 25px 0;
+  padding: 30px 0;
   width: 100%;
 }
 
@@ -287,7 +287,6 @@ body {
 .auth-section {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
 
 .auth-section.search-bar-layout {
@@ -302,10 +301,10 @@ body {
 .auth-section.search-bar-layout .handle-input {
   flex: 1;
   margin: 0;
-  padding: 10px 15px;
-  font-size: 16px;
+  padding: 9px 15px;
+  font-size: 13px;
   border: 1px solid var(--border);
-  border-radius: 8px 0 0 8px;
+  border-radius: 4px 0 0 4px;
   background: var(--background);
   outline: none;
   transition: border-color 0.2s;
@@ -319,12 +318,13 @@ body {
 }
 
 .auth-section.search-bar-layout .auth-button {
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 4px 4px 0;
   border: 1px solid var(--primary);
   border-left: none;
   margin: 0;
-  padding: 10px 15px;
-  height: 40px;
+  padding: 9px 15px;
+  min-width: 50px;
+  min-height: 30px;
 }
 
 /* Auth Button */
@@ -332,15 +332,26 @@ body {
   background: var(--primary);
   color: white;
   border: none;
-  border-radius: 6px;
-  padding: 8px 16px;
+  border-radius: 4px;
+  padding: 9px 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background 0.2s;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
+  min-width: 50px;
+  min-height: 30px;
+}
+
+/* Loading spinner for auth button */
+.auth-button.loading i {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .auth-button:hover {
@@ -422,10 +433,6 @@ body {
   margin-bottom: 16px;
 }
 
-.form-group {
-  margin-bottom: 16px;
-}
-
 .form-group label {
   display: block;
   font-weight: 700;
@@ -919,10 +926,6 @@ body {
     max-width: 100% !important;
   }
   
-  .form-group {
-    margin-bottom: 15px !important;
-  }
-  
   .form-input, .form-textarea {
     width: 100% !important;
     max-width: 100% !important;

oauth/src/App.jsx

@@ -118,6 +118,14 @@ export default function App() {
     }
   }, [adminData])
 
+  // Expose current user and agent for game page
+  useEffect(() => {
+    if (user && agent) {
+      window.currentUser = user
+      window.currentAgent = agent
+    }
+  }, [user, agent])
+
   // Event listeners for blog communication
   useEffect(() => {
     // Clear OAuth completion flag once app is loaded

oauth/src/components/AuthButton.jsx

@@ -68,9 +68,9 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
         type="button"
         onClick={handleSubmit}
         disabled={isLoading || !handleInput.trim()}
-        className="auth-button"
+        className={`auth-button ${isLoading ? 'loading' : ''}`}
       >
-        {isLoading ? 'Loading...' : <i className="fab fa-bluesky"></i>}
+        <i className={isLoading ? "fas fa-spinner" : "fab fa-bluesky"}></i>
       </button>
     </div>
   )

pds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-browser",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "AT Protocol browser for ai.log",
   "main": "index.js",
   "type": "module",

src/generator.rs

@@ -89,6 +89,9 @@ impl Generator {
         // Generate PDS page
         self.generate_pds_page().await?;
 
+        // Generate Game page
+        self.generate_game_page().await?;
+
         println!("{} {} posts", "Generated".cyan(), posts.len());
 
         Ok(())
@@ -517,6 +520,30 @@ impl Generator {
         
         Ok(())
     }
+
+    async fn generate_game_page(&self) -> Result<()> {
+        let public_dir = self.base_path.join("public");
+        let game_dir = public_dir.join("game");
+        fs::create_dir_all(&game_dir)?;
+        
+        // Generate Game page using the game.html template
+        let config_with_timestamp = self.create_config_with_timestamp()?;
+        let mut context = tera::Context::new();
+        context.insert("config", &config_with_timestamp);
+        context.insert("site", &self.config.site);
+        context.insert("page", &serde_json::json!({
+            "title": "Game",
+            "description": "Play the game with AT Protocol authentication"
+        }));
+        
+        let rendered_content = self.template_engine.render("game.html", &context)?;
+        let output_path = game_dir.join("index.html");
+        fs::write(output_path, rendered_content)?;
+        
+        println!("{} Game page", "Generated".cyan());
+        
+        Ok(())
+    }
     
     fn extract_plain_text(&self, html_content: &str) -> String {
         // Remove HTML tags and extract plain text