Add oauth_new: Complete OAuth authentication and comment system

- Created new oauth_new directory with clean OAuth implementation
- Added 4-tab interface: Lang, Comment, Collection, User Comments
- Implemented OAuth authentication with @atproto/oauth-client-browser
- Added comment posting functionality with putRecord
- Added proper PDS detection and error handling
- Skipped placeholder users to prevent errors
- Built comprehensive documentation (README.md, DEVELOPMENT.md)

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

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -34,7 +34,25 @@
       "Bash(./run.zsh:*)",
       "Bash(npm run dev:*)",
       "Bash(./target/release/ailog:*)",
-      "Bash(rg:*)"
+      "Bash(rg:*)",
+      "Bash(../target/release/ailog build)",
+      "Bash(zsh run.zsh:*)",
+      "Bash(hugo:*)",
+      "WebFetch(domain:docs.bsky.app)",
+      "WebFetch(domain:syui.ai)",
+      "Bash(rustup target list:*)",
+      "Bash(rustup target:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(git tag:*)",
+      "Bash(../bin/ailog:*)",
+      "Bash(../target/release/ailog oauth build:*)",
+      "Bash(ailog:*)",
+      "WebFetch(domain:plc.directory)",
+      "WebFetch(domain:atproto.com)",
+      "WebFetch(domain:syu.is)",
+      "Bash(sed:*)"
     ],
     "deny": []
   }

.gitea/workflows/deploy.yml

@@ -0,0 +1,53 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+      
+    - name: Setup Rust
+      uses: actions-rs/toolchain@v1
+      with:
+        toolchain: stable
+        override: true
+        
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        
+    - name: Build ailog
+      run: |
+        cargo build --release
+        
+    - name: Build OAuth app
+      run: |
+        cd oauth
+        npm install
+        npm run build
+        
+    - name: Copy OAuth assets
+      run: |
+        cp -r oauth/dist/* my-blog/static/
+        
+    - name: Generate site with ailog
+      run: |
+        ./target/release/ailog generate --input content --output my-blog/public
+        
+    - name: Deploy to Cloudflare Pages
+      uses: cloudflare/pages-action@v1
+      with:
+        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        projectName: syui-ai
+        directory: my-blog/public
+        gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.gitea/workflows/example-usage.yml

@@ -0,0 +1,28 @@
+name: Example ailog usage
+
+on:
+  workflow_dispatch:  # Manual trigger for testing
+
+jobs:
+  build-with-ailog-action:
+    runs-on: ubuntu-latest
+    
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+      
+    - name: Build with ailog action
+      uses: ai/log@v1  # This will reference this repository
+      with:
+        content-dir: 'content'
+        output-dir: 'public'
+        ai-integration: true
+        atproto-integration: true
+        
+    - name: Deploy to Cloudflare Pages
+      uses: cloudflare/pages-action@v1
+      with:
+        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        projectName: my-blog
+        directory: public

.github/workflows/cloudflare-pages.yml

@@ -0,0 +1,111 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21'
+
+      - name: Install dependencies
+        run: |
+          cd oauth
+          npm install
+
+      - name: Build OAuth app
+        run: |
+          cd oauth
+          npm run build
+          
+      - name: Copy OAuth build to static
+        run: |
+          # Remove old assets (following run.zsh pattern)
+          rm -rf my-blog/static/assets
+          # Copy all dist files to static
+          cp -rf oauth/dist/* my-blog/static/
+          # Copy index.html to oauth-assets.html template
+          cp oauth/dist/index.html my-blog/templates/oauth-assets.html
+          
+      - name: Cache ailog binary
+        uses: actions/cache@v4
+        with:
+          path: ./bin
+          key: ailog-bin-${{ runner.os }}
+          restore-keys: |
+            ailog-bin-${{ runner.os }}
+            
+      - name: Setup ailog binary
+        run: |
+          # Get expected version from Cargo.toml
+          EXPECTED_VERSION=$(grep '^version' Cargo.toml | cut -d'"' -f2)
+          echo "Expected version from Cargo.toml: $EXPECTED_VERSION"
+          
+          # Check current binary version if exists
+          if [ -f "./bin/ailog" ]; then
+            CURRENT_VERSION=$(./bin/ailog --version 2>/dev/null || echo "unknown")
+            echo "Current binary version: $CURRENT_VERSION"
+          else
+            CURRENT_VERSION="none"
+            echo "No binary found"
+          fi
+          
+          # Check OS
+          OS="${{ runner.os }}"
+          echo "Runner OS: $OS"
+          
+          # Use pre-packaged binary if version matches or extract from tar.gz
+          if [ "$CURRENT_VERSION" = "$EXPECTED_VERSION" ]; then
+            echo "Binary is up to date"
+            chmod +x ./bin/ailog
+          elif [ "$OS" = "Linux" ] && [ -f "./bin/ailog-linux-x86_64.tar.gz" ]; then
+            echo "Extracting ailog from pre-packaged tar.gz..."
+            cd bin
+            tar -xzf ailog-linux-x86_64.tar.gz
+            chmod +x ailog
+            cd ..
+            
+            # Verify extracted version
+            EXTRACTED_VERSION=$(./bin/ailog --version 2>/dev/null || echo "unknown")
+            echo "Extracted binary version: $EXTRACTED_VERSION"
+            
+            if [ "$EXTRACTED_VERSION" != "$EXPECTED_VERSION" ]; then
+              echo "Warning: Binary version mismatch. Expected $EXPECTED_VERSION but got $EXTRACTED_VERSION"
+            fi
+          else
+            echo "Error: No suitable binary found for OS: $OS"
+            exit 1
+          fi
+
+      - name: Build site with ailog
+        run: |
+          cd my-blog
+          ../bin/ailog build
+
+      - name: List public directory
+        run: |
+          ls -la my-blog/public/
+          
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+          directory: my-blog/public
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          wranglerVersion: '3'

.github/workflows/deploy.yml

@@ -1,62 +0,0 @@
-name: Deploy ailog
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Install Rust
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: stable
-        profile: minimal
-        override: true
-    
-    - name: Cache cargo registry
-      uses: actions/cache@v3
-      with:
-        path: ~/.cargo/registry
-        key: ${{ runner.os }}-cargo-registry-${{ hashFiles('**/Cargo.lock') }}
-    
-    - name: Cache cargo index
-      uses: actions/cache@v3
-      with:
-        path: ~/.cargo/git
-        key: ${{ runner.os }}-cargo-index-${{ hashFiles('**/Cargo.lock') }}
-    
-    - name: Cache cargo build
-      uses: actions/cache@v3
-      with:
-        path: target
-        key: ${{ runner.os }}-cargo-build-target-${{ hashFiles('**/Cargo.lock') }}
-    
-    - name: Build ailog
-      run: cargo build --release
-    
-    - name: Generate static site
-      run: |
-        ./target/release/ailog build my-blog
-        touch my-blog/public/.nojekyll
-        
-    - name: Setup Cloudflare Pages
-      run: |
-        # Cloudflare Pages用の設定
-        echo '/*    /index.html   200' > my-blog/public/_redirects
-        echo 'X-Frame-Options: DENY' > my-blog/public/_headers
-        echo 'X-Content-Type-Options: nosniff' >> my-blog/public/_headers
-    
-    - name: Deploy to GitHub Pages
-      uses: peaceiris/actions-gh-pages@v3
-      if: github.ref == 'refs/heads/main'
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./my-blog/public
-        publish_branch: gh-pages

.github/workflows/disabled/gh-pages-fast.yml

@@ -0,0 +1,92 @@
+name: github pages (fast)
+
+on:
+  push:
+    branches:
+    - main
+    paths-ignore:
+      - 'src/**'
+      - 'Cargo.toml'
+      - 'Cargo.lock'
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pages: write
+      id-token: write
+    steps:
+    - uses: actions/checkout@v4
+    
+    - name: Cache ailog binary
+      uses: actions/cache@v4
+      with:
+        path: ./bin
+        key: ailog-bin-${{ runner.os }}
+        restore-keys: |
+          ailog-bin-${{ runner.os }}
+    
+    - name: Setup ailog binary
+      run: |
+        # Get expected version from Cargo.toml
+        EXPECTED_VERSION=$(grep '^version' Cargo.toml | cut -d'"' -f2)
+        echo "Expected version from Cargo.toml: $EXPECTED_VERSION"
+        
+        # Check current binary version if exists
+        if [ -f "./bin/ailog" ]; then
+          CURRENT_VERSION=$(./bin/ailog --version 2>/dev/null || echo "unknown")
+          echo "Current binary version: $CURRENT_VERSION"
+        else
+          CURRENT_VERSION="none"
+          echo "No binary found"
+        fi
+        
+        # Check OS
+        OS="${{ runner.os }}"
+        echo "Runner OS: $OS"
+        
+        # Use pre-packaged binary if version matches or extract from tar.gz
+        if [ "$CURRENT_VERSION" = "$EXPECTED_VERSION" ]; then
+          echo "Binary is up to date"
+          chmod +x ./bin/ailog
+        elif [ "$OS" = "Linux" ] && [ -f "./bin/ailog-linux-x86_64.tar.gz" ]; then
+          echo "Extracting ailog from pre-packaged tar.gz..."
+          cd bin
+          tar -xzf ailog-linux-x86_64.tar.gz
+          chmod +x ailog
+          cd ..
+          
+          # Verify extracted version
+          EXTRACTED_VERSION=$(./bin/ailog --version 2>/dev/null || echo "unknown")
+          echo "Extracted binary version: $EXTRACTED_VERSION"
+          
+          if [ "$EXTRACTED_VERSION" != "$EXPECTED_VERSION" ]; then
+            echo "Warning: Binary version mismatch. Expected $EXPECTED_VERSION but got $EXTRACTED_VERSION"
+          fi
+        else
+          echo "Error: No suitable binary found for OS: $OS"
+          exit 1
+        fi
+      
+    - name: Setup Hugo
+      uses: peaceiris/actions-hugo@v3
+      with:
+        hugo-version: "0.139.2"
+        extended: true
+        
+    - name: Build with ailog
+      env: 
+        TZ: "Asia/Tokyo"
+      run: |
+          # Use pre-built ailog binary instead of cargo build
+          cd my-blog
+          ../bin/ailog build
+          touch ./public/.nojekyll
+          
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./my-blog/public
+        publish_branch: gh-pages

.github/workflows/release.yml

@@ -0,0 +1,169 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Release tag (e.g., v1.0.0)'
+        required: true
+        default: 'v0.1.0'
+
+permissions:
+  contents: write
+  actions: read
+
+env:
+  CARGO_TERM_COLOR: always
+  OPENSSL_STATIC: true
+  OPENSSL_VENDOR: true
+
+jobs:
+  build:
+    name: Build ${{ matrix.target }}
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
+    strategy:
+      matrix:
+        include:
+          - target: x86_64-unknown-linux-gnu
+            os: ubuntu-latest
+            artifact_name: ailog
+            asset_name: ailog-linux-x86_64
+          - target: aarch64-unknown-linux-gnu
+            os: ubuntu-latest
+            artifact_name: ailog
+            asset_name: ailog-linux-aarch64
+          - target: x86_64-apple-darwin
+            os: macos-latest
+            artifact_name: ailog
+            asset_name: ailog-macos-x86_64
+          - target: aarch64-apple-darwin
+            os: macos-latest
+            artifact_name: ailog
+            asset_name: ailog-macos-aarch64
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Setup Rust
+      uses: dtolnay/rust-toolchain@stable
+      with:
+        targets: ${{ matrix.target }}
+
+    - name: Install cross-compilation tools (Linux)
+      if: matrix.os == 'ubuntu-latest' && matrix.target == 'aarch64-unknown-linux-gnu'
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y gcc-aarch64-linux-gnu binutils-aarch64-linux-gnu
+
+    - name: Configure cross-compilation (Linux ARM64)
+      if: matrix.target == 'aarch64-unknown-linux-gnu'
+      run: |
+        echo '[target.aarch64-unknown-linux-gnu]' >> ~/.cargo/config.toml
+        echo 'linker = "aarch64-linux-gnu-gcc"' >> ~/.cargo/config.toml
+
+    - name: Cache cargo registry
+      uses: actions/cache@v4
+      with:
+        path: |
+          ~/.cargo/registry
+          ~/.cargo/git
+        key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+    - name: Cache target directory
+      uses: actions/cache@v4
+      with:
+        path: target
+        key: ${{ runner.os }}-${{ matrix.target }}-target-${{ hashFiles('**/Cargo.lock') }}
+
+    - name: Build
+      run: cargo build --release --target ${{ matrix.target }}
+
+    - name: Prepare binary
+      shell: bash
+      run: |
+        cd target/${{ matrix.target }}/release
+        
+        # Use appropriate strip command for cross-compilation
+        if [[ "${{ matrix.target }}" == "aarch64-unknown-linux-gnu" ]]; then
+          aarch64-linux-gnu-strip ${{ matrix.artifact_name }} || echo "Strip failed, continuing..."
+        elif [[ "${{ matrix.os }}" == "windows-latest" ]]; then
+          strip ${{ matrix.artifact_name }} || echo "Strip failed, continuing..."
+        else
+          strip ${{ matrix.artifact_name }} || echo "Strip failed, continuing..."
+        fi
+        
+        # Create archive
+        if [[ "${{ matrix.target }}" == *"windows"* ]]; then
+          7z a ../../../${{ matrix.asset_name }}.zip ${{ matrix.artifact_name }}
+        else
+          tar czvf ../../../${{ matrix.asset_name }}.tar.gz ${{ matrix.artifact_name }}
+        fi
+
+    - name: Upload binary
+      uses: actions/upload-artifact@v4
+      with:
+        name: ${{ matrix.asset_name }}
+        path: ${{ matrix.asset_name }}.tar.gz
+
+  release:
+    name: Create Release
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      actions: read
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Download all artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: artifacts
+
+    - name: Generate release notes
+      run: |
+        echo "## What's Changed" > release_notes.md
+        echo "" >> release_notes.md
+        echo "### Features" >> release_notes.md
+        echo "- AI-powered static blog generator" >> release_notes.md
+        echo "- AtProto OAuth integration" >> release_notes.md
+        echo "- Automatic translation support" >> release_notes.md
+        echo "- AI comment system" >> release_notes.md
+        echo "" >> release_notes.md
+        echo "### Platforms" >> release_notes.md
+        echo "- Linux (x86_64, aarch64)" >> release_notes.md
+        echo "- macOS (Intel, Apple Silicon)" >> release_notes.md
+        echo "" >> release_notes.md
+        echo "### Installation" >> release_notes.md
+        echo "\`\`\`bash" >> release_notes.md
+        echo "# Linux/macOS" >> release_notes.md
+        echo "tar -xzf ailog-linux-x86_64.tar.gz" >> release_notes.md
+        echo "chmod +x ailog" >> release_notes.md
+        echo "sudo mv ailog /usr/local/bin/" >> release_notes.md
+        echo "" >> release_notes.md
+        echo "\`\`\`" >> release_notes.md
+
+    - name: Get tag name
+      id: tag_name
+      run: |
+        if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
+          echo "tag=${{ github.event.inputs.tag }}" >> $GITHUB_OUTPUT
+        else
+          echo "tag=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+        fi
+
+    - name: Create Release
+      uses: softprops/action-gh-release@v1
+      with:
+        tag_name: ${{ steps.tag_name.outputs.tag }}
+        name: ailog ${{ steps.tag_name.outputs.tag }}
+        body_path: release_notes.md
+        draft: false
+        prerelease: ${{ contains(steps.tag_name.outputs.tag, 'alpha') || contains(steps.tag_name.outputs.tag, 'beta') || contains(steps.tag_name.outputs.tag, 'rc') }}
+        files: artifacts/*/ailog-*.tar.gz
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -5,8 +5,16 @@
 *.swo
 *~
 .DS_Store
-cloudflare*
-my-blog
+my-blog/public/
 dist
-package-lock.json
 node_modules
+package-lock.json 
+my-blog/static/assets/comment-atproto-*
+bin/ailog
+docs
+my-blog/static/index.html
+my-blog/templates/oauth-assets.html
+cloudflared-config.yml
+.config
+oauth-server-example
+atproto

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ailog"
-version = "0.1.0"
+version = "0.2.1"
 edition = "2021"
 authors = ["syui"]
 description = "A static blog generator with AI features"
@@ -10,12 +10,16 @@ license = "MIT"
 name = "ailog"
 path = "src/main.rs"
 
+[lib]
+name = "ailog"
+path = "src/lib.rs"
+
 [dependencies]
 clap = { version = "4.5", features = ["derive"] }
 pulldown-cmark = "0.11"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tokio = { version = "1.40", features = ["full"] }
+tokio = { version = "1.40", features = ["rt-multi-thread", "macros", "fs", "net", "io-util", "sync", "time", "process", "signal"] }
 anyhow = "1.0"
 toml = "0.8"
 chrono = "0.4"
@@ -26,7 +30,7 @@ fs_extra = "1.3"
 colored = "2.1"
 serde_yaml = "0.9"
 syntect = "5.2"
-reqwest = { version = "0.12", features = ["json"] }
+reqwest = { version = "0.12", features = ["json", "rustls-tls"], default-features = false }
 rand = "0.8"
 sha2 = "0.10"
 base64 = "0.22"
@@ -43,12 +47,39 @@ cookie = "0.18"
 syn = { version = "2.0", features = ["full", "parsing", "visit"] }
 quote = "1.0"
 ignore = "0.4"
-git2 = "0.18"
+git2 = { version = "0.18", features = ["vendored-openssl", "vendored-libgit2", "ssh"], default-features = false }
 regex = "1.0"
 # ATProto and stream monitoring dependencies
-tokio-tungstenite = { version = "0.21", features = ["native-tls"] }
+tokio-tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots", "connect"], default-features = false }
 futures-util = "0.3"
-tungstenite = { version = "0.21", features = ["native-tls"] }
+tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots"], default-features = false }
+rpassword = "7.3"
 
 [dev-dependencies]
 tempfile = "3.14"
+
+[profile.dev]
+# Speed up development builds
+opt-level = 0
+debug = true
+debug-assertions = true
+overflow-checks = true
+lto = false
+panic = 'unwind'
+incremental = true
+codegen-units = 256
+
+[profile.release]
+# Optimize release builds for speed and size
+opt-level = 3
+debug = false
+debug-assertions = false
+overflow-checks = false
+lto = true
+panic = 'abort'
+incremental = false
+codegen-units = 1
+
+[profile.dev.package."*"]
+# Optimize dependencies in dev builds
+opt-level = 3

DEPLOYMENT.md

@@ -1,150 +0,0 @@
-# ai.log Deployment Guide
-
-## 🌐 Cloudflare Tunnel Setup
-
-ATProto OAuth requires HTTPS for proper CORS handling. Use Cloudflare Tunnel for secure deployment.
-
-### Prerequisites
-
-1. **Install cloudflared**:
-   ```bash
-   brew install cloudflared
-   ```
-
-2. **Login and create tunnel** (if not already done):
-   ```bash
-   cloudflared tunnel login
-   cloudflared tunnel create ailog
-   ```
-
-3. **Configure DNS**:
-   - Add a CNAME record: `log.syui.ai` → `[tunnel-id].cfargotunnel.com`
-
-### Configuration Files
-
-#### `cloudflared-config.yml`
-```yaml
-tunnel: a6813327-f880-485d-a9d1-376e6e3df8ad
-credentials-file: /Users/syui/.cloudflared/a6813327-f880-485d-a9d1-376e6e3df8ad.json
-
-ingress:
-  - hostname: log.syui.ai
-    service: http://localhost:8080
-    originRequest:
-      noHappyEyeballs: true
-  - service: http_status:404
-```
-
-#### Production Client Metadata
-`static/client-metadata-prod.json`:
-```json
-{
-  "client_id": "https://log.syui.ai/client-metadata.json",
-  "client_name": "ai.log Blog Comment System",
-  "client_uri": "https://log.syui.ai",
-  "redirect_uris": ["https://log.syui.ai/"],
-  "grant_types": ["authorization_code"],
-  "response_types": ["code"],
-  "token_endpoint_auth_method": "none",
-  "application_type": "web"
-}
-```
-
-### Deployment Commands
-
-#### Quick Start
-```bash
-# All-in-one deployment
-./scripts/tunnel.sh
-```
-
-#### Manual Steps
-```bash
-# 1. Build for production
-PRODUCTION=true cargo run -- build
-
-# 2. Start local server
-cargo run -- serve --port 8080 &
-
-# 3. Start tunnel
-cloudflared tunnel --config cloudflared-config.yml run
-```
-
-### Environment Detection
-
-The system automatically detects environment:
-
-- **Development** (`localhost:8080`): Uses local client-metadata.json
-- **Production** (`log.syui.ai`): Uses HTTPS client-metadata.json
-
-### CORS Resolution
-
-✅ **With Cloudflare Tunnel**:
-- HTTPS domain: `https://log.syui.ai`
-- Valid SSL certificate
-- Proper CORS headers
-- ATProto OAuth works correctly
-
-❌ **With localhost**:
-- HTTP only: `http://localhost:8080`
-- CORS restrictions
-- ATProto OAuth may fail
-
-### Troubleshooting
-
-#### ATProto OAuth Errors
-```javascript
-// Check client metadata URL in browser console
-console.log('Environment:', window.location.hostname);
-console.log('Client ID:', clientId);
-```
-
-#### Tunnel Connection Issues
-```bash
-# Check tunnel status
-cloudflared tunnel info ailog
-
-# Test local server
-curl http://localhost:8080/client-metadata.json
-```
-
-#### DNS Propagation
-```bash
-# Check DNS resolution
-dig log.syui.ai
-nslookup log.syui.ai
-```
-
-### Security Notes
-
-- **Client metadata** is publicly accessible (required by ATProto)
-- **Credentials file** contains tunnel secrets (keep secure)
-- **HTTPS only** for production OAuth
-- **Domain validation** by ATProto servers
-
-### Integration with ai.ai Ecosystem
-
-This deployment enables:
-- **ai.log**: Comment system with ATProto authentication
-- **ai.card**: Shared OAuth widget
-- **ai.gpt**: Memory synchronization via ATProto
-- **ai.verse**: Future 3D world integration
-
-### Monitoring
-
-```bash
-# Monitor tunnel logs
-cloudflared tunnel --config cloudflared-config.yml run --loglevel debug
-
-# Monitor blog server
-tail -f /path/to/blog/logs
-
-# Check ATProto connectivity
-curl -I https://log.syui.ai/client-metadata.json
-```
-
----
-
-**🔗 Live URL**: https://log.syui.ai  
-**📊 Status**: Production Ready  
-**🌐 ATProto**: OAuth Enabled

Dockerfile

@@ -1,32 +0,0 @@
-# Multi-stage build for ailog
-FROM rust:1.75 as builder
-
-WORKDIR /usr/src/app
-COPY Cargo.toml Cargo.lock ./
-COPY src ./src
-
-RUN cargo build --release
-
-FROM debian:bookworm-slim
-
-# Install runtime dependencies
-RUN apt-get update && apt-get install -y \
-    ca-certificates \
-    && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /app
-
-# Copy the binary
-COPY --from=builder /usr/src/app/target/release/ailog /usr/local/bin/ailog
-
-# Copy blog content
-COPY my-blog ./blog
-
-# Build static site
-RUN ailog build blog
-
-# Expose port
-EXPOSE 8080
-
-# Run server
-CMD ["ailog", "serve", "blog"]

OAUTH_INTEGRATION_CHANGES.md

@@ -1,205 +0,0 @@
-# OAuth Integration Changes for ai.log
-
-## 概要
-ailogブログシステムにATProto/Bluesky OAuth認証を使用したコメントシステムを統合しました。
-
-## 実装された機能
-
-### 1. OAuth認証システム
-- **ATProto BrowserOAuthClient** を使用した完全なOAuth 2.1フロー
-- Blueskyアカウントでのワンクリック認証
-- セッション永続化とリフレッシュトークン対応
-
-### 2. コメントシステム
-- 認証済みユーザーによるコメント投稿
-- ATProto collection (`ai.syui.log`) への直接保存
-- リアルタイムコメント表示と削除機能
-- 複数PDS対応のコメント取得
-
-### 3. 管理機能
-- 管理者用ユーザーリスト管理
-- DID解決とプロフィール情報の自動取得
-- JSON形式でのレコード表示・編集
-
-## 技術的変更点
-
-### aicard-web-oauth (React OAuth App)
-
-#### 新規ファイル
-```
-aicard-web-oauth/
-├── src/
-│   ├── services/
-│   │   ├── atproto-oauth.ts     # BrowserOAuthClient wrapper
-│   │   └── auth.ts              # Legacy auth service
-│   ├── components/
-│   │   ├── OAuthCallback.tsx    # OAuth callback handler
-│   │   └── OAuthCallbackPage.tsx
-│   └── utils/
-│       ├── oauth-endpoints.ts   # OAuth endpoint utilities
-│       └── oauth-keys.ts        # OAuth configuration
-```
-
-#### 主要な変更
-- **App.tsx**: URL parameter/hash detection, 詳細デバッグログ追加
-- **vite.config.ts**: 固定ファイル名出力 (`comment-atproto.js/css`)
-- **main.tsx**: React mount点を `comment-atproto` に変更
-
-#### OAuthCallback.tsx の機能
-- Query parameters と hash parameters の両方を検出
-- 認証完了後の自動URL cleanup (`window.history.replaceState`)
-- Popup/direct navigation 両対応
-- Fallback認証とエラーハンドリング
-
-### ailog (Rust Static Site Generator)
-
-#### OAuth Callback Route
-**src/commands/serve.rs**:
-```rust
-} else if path.starts_with("/oauth/callback") {
-    // Handle OAuth callback - serve the callback HTML page
-    match serve_oauth_callback().await {
-        Ok((ct, data, cc)) => ("200 OK", ct, data, cc),
-        Err(e) => // Error handling
-    }
-}
-```
-
-#### OAuth Callback HTML
-- ATProto認証パラメータの検出・処理
-- Hash parameters でのリダイレクト (`#code=...&state=...`)
-- Popup/window間通信対応
-- localStorage を使った一時的なデータ保存
-
-### Template Integration
-
-#### base.html (ailog templates)
-```html
-<!-- OAuth Comment System - Load in head for early initialization -->
-<script type="module" crossorigin src="/assets/comment-atproto.js"></script>
-<link rel="stylesheet" crossorigin href="/assets/comment-atproto.css">
-```
-
-#### index.html / post.html
-```html
-<!-- OAuth Comment System -->
-<div id="comment-atproto"></div>
-```
-
-### OAuth Configuration
-
-#### client-metadata.json
-```json
-{
-  "client_id": "https://log.syui.ai/client-metadata.json",
-  "redirect_uris": [
-    "https://log.syui.ai/oauth/callback",
-    "https://log.syui.ai/"
-  ],
-  "scope": "atproto transition:generic",
-  "dpop_bound_access_tokens": true
-}
-```
-
-## インフラストラクチャ
-
-### Cloudflare Tunnel
-```yaml
-# cloudflared-config.yml
-ingress:
-  - hostname: log.syui.ai
-    service: http://localhost:4173  # ailog serve
-```
-
-### Build Process
-1. **aicard-web-oauth**: `npm run build` → `dist/assets/`
-2. **Asset copy**: `dist/assets/*` → `my-blog/public/assets/`
-3. **ailog build**: Template processing + static file serving
-
-## データフロー
-
-### OAuth認証フロー
-```
-1. User clicks "atproto" button
-2. BrowserOAuthClient initiates OAuth flow
-3. Redirect to Bluesky authorization server
-4. Callback to https://log.syui.ai/oauth/callback
-5. ailog serves OAuth callback HTML
-6. JavaScript processes parameters and redirects with hash
-7. React app detects hash parameters and completes authentication
-8. URL cleanup removes OAuth parameters
-```
-
-### コメント投稿フロー
-```
-1. Authenticated user writes comment
-2. React app calls ATProto API
-3. Record saved to ai.syui.log collection
-4. Comments reloaded from all configured PDS endpoints
-5. Real-time display update
-```
-
-## 設定ファイル
-
-### 必須ファイル
-- `my-blog/static/client-metadata.json` - OAuth client configuration
-- `aicard-web-oauth/.env.production` - Production environment variables
-- `cloudflared-config.yml` - Tunnel routing configuration
-
-### 開発用ファイル
-- `aicard-web-oauth/.env.development` - Development settings
-- `aicard-web-oauth/public/client-metadata.json` - Local OAuth metadata
-
-## 主要な修正点
-
-### 1. Build System
-- Vite output ファイル名を固定 (`comment-atproto.js/css`)
-- Build時のclient-metadata.json更新自動化
-
-### 2. OAuth Callback処理
-- Hash parameters 対応でSPA architectureに最適化
-- URL cleanup でクリーンなユーザー体験
-- Popup/direct navigation 両対応
-
-### 3. Error Handling
-- Network エラー時のfallback認証
-- セッション期限切れ時の再認証
-- OAuth parameter不足時の適切なエラー表示
-
-### 4. Session Management
-- localStorage + sessionStorage 併用
-- OAuth state/code verifier の適切な管理
-- Cross-tab session sharing
-
-## テスト済み機能
-
-✅ **動作確認済み**
-- OAuth認証 (Bluesky)
-- コメント投稿・削除
-- セッション永続化
-- URL parameter cleanup
-- 複数PDS対応
-- 管理者機能
-
-⏳ **今後のテスト項目**
-- Incognito/private mode での動作
-- 複数タブでの同時使用
-- Long-term session の動作確認
-
-## 運用メモ
-
-### デプロイ手順
-1. `cd aicard-web-oauth && npm run build`
-2. `cp -r dist/assets/* ../my-blog/public/assets/`
-3. `cd my-blog && cargo build --release`
-4. ailog serve でテスト確認
-
-### トラブルシューティング
-- OAuth エラー: client-metadata.json のredirect_uris確認
-- コメント表示されない: Network tab でAPI response確認
-- Build エラー: Node.js/npm version, dependencies確認
-
-## 関連リンク
-- [ATProto OAuth Specification](https://atproto.com/specs/oauth)
-- [Bluesky OAuth Documentation](https://github.com/bluesky-social/atproto/blob/main/packages/api/OAUTH.md)
-- [BrowserOAuthClient API](https://github.com/bluesky-social/atproto/tree/main/packages/oauth-client-browser)

claude.md

@@ -1,5 +1,227 @@
 # エコシステム統合設計書
 
+## 注意事項
+
+`console.log`は絶対に書かないようにしてください。
+
+ハードコードしないようにしてください。必ず、`./my-blog/config.toml`や`./oauth/.env.production`を使用するように。または`~/.config/syui/ai/log/config.json`を使用するように。
+
+重複する名前のenvを作らないようにしてください。新しい環境変数を作る際は必ず検討してください。
+
+```sh
+# ダメな例
+VITE_OAUTH_COLLECTION_USER=ai.syui.log.user
+VITE_OAUTH_COLLECTION_CHAT=ai.syui.log.chat
+```
+
+## oauth appの設計
+
+> ./oauth/.env.production
+
+```sh
+VITE_ATPROTO_PDS=syu.is
+VITE_ADMIN_HANDLE=ai.syui.ai
+VITE_AI_HANDLE=ai.syui.ai
+VITE_OAUTH_COLLECTION=ai.syui.log
+```
+
+これらは非常にシンプルな流れになっており、すべての項目は、共通します。短縮できる場合があります。handleは変わる可能性があるので、できる限りdidを使いましょう。
+
+1. handleからpds, didを取得できる ... com.atproto.repo.describeRepo
+2. pdsが分かれば、pdsApi, bskyApi, plcApiを割り当てられる
+3. bskyApiが分かれば、getProfileでavatar-uriを取得できる ... app.bsky.actor.getProfile
+4. pdsAPiからアカウントにあるcollectionのrecordの情報を取得できる ... com.atproto.repo.listRecords
+
+### コメントを表示する
+
+1. VITE_ADMIN_HANDLEから管理者のhandleを取得する。
+2. VITE_ATPROTO_PDSから管理者のアカウントのpdsを取得する。
+3. pdsからpdsApi, bskApi, plcApiを割り当てる。
+
+```rust
+    match pds {
+        "bsky.social" | "bsky.app" => NetworkConfig {
+            pds_api: format!("https://{}", pds),
+            plc_api: "https://plc.directory".to_string(),
+            bsky_api: "https://public.api.bsky.app".to_string(),
+            web_url: "https://bsky.app".to_string(),
+        },
+        "syu.is" => NetworkConfig {
+            pds_api: "https://syu.is".to_string(),
+            plc_api: "https://plc.syu.is".to_string(),
+            bsky_api: "https://bsky.syu.is".to_string(),
+            web_url: "https://web.syu.is".to_string(),
+        },
+        _ => {
+            // Default to Bluesky network for unknown PDS
+            NetworkConfig {
+                pds_api: format!("https://{}", pds),
+                plc_api: "https://plc.directory".to_string(),
+                bsky_api: "https://public.api.bsky.app".to_string(),
+                web_url: "https://bsky.app".to_string(),
+            }
+        }
+    }
+```
+
+4. 管理者アカウントであるVITE_ADMIN_HANDLEとVITE_ATPROTO_PDSから`ai.syui.log.user`というuserlistを取得する。
+
+```sh
+curl -sL "https://${VITE_ATPROTO_PDS}/xrpc/com.atproto.repo.listRecords?repo=${VITE_ADMIN_HANDLE}&collection=ai.syui.log.user" 
+---
+syui.ai
+```
+
+5. ユーザーがわかったら、そのユーザーのpdsを判定する。
+
+```sh
+curl -sL "https://bsky.social/xrpc/com.atproto.repo.describeRepo?repo=syui.ai" |jq -r ".didDoc.service.[].serviceEndpoint"
+---
+https://shiitake.us-east.host.bsky.network
+
+curl -sL "https://bsky.social/xrpc/com.atproto.repo.describeRepo?repo=syui.ai" |jq -r ".did"
+---
+did:plc:uqzpqmrjnptsxezjx4xuh2mn
+```
+
+6. pdsからpdsApi, bskApi, plcApiを割り当てる。
+
+```rust
+    match pds {
+        "bsky.social" | "bsky.app" => NetworkConfig {
+            pds_api: format!("https://{}", pds),
+            plc_api: "https://plc.directory".to_string(),
+            bsky_api: "https://public.api.bsky.app".to_string(),
+            web_url: "https://bsky.app".to_string(),
+        },
+        "syu.is" => NetworkConfig {
+            pds_api: "https://syu.is".to_string(),
+            plc_api: "https://plc.syu.is".to_string(),
+            bsky_api: "https://bsky.syu.is".to_string(),
+            web_url: "https://web.syu.is".to_string(),
+        },
+        _ => {
+            // Default to Bluesky network for unknown PDS
+            NetworkConfig {
+                pds_api: format!("https://{}", pds),
+                plc_api: "https://plc.directory".to_string(),
+                bsky_api: "https://public.api.bsky.app".to_string(),
+                web_url: "https://bsky.app".to_string(),
+            }
+        }
+    }
+```
+
+7. ユーザーの情報を取得、表示する
+
+```sh
+bsky_api=https://public.api.bsky.app
+user_did=did:plc:uqzpqmrjnptsxezjx4xuh2mn
+curl -sL "$bsky_api/xrpc/app.bsky.actor.getProfile?actor=$user_did"|jq -r .avatar
+---
+https://cdn.bsky.app/img/avatar/plain/did:plc:uqzpqmrjnptsxezjx4xuh2mn/bafkreid6kcc5pnn4b3ar7mj6vi3eiawhxgkcrw3edgbqeacyrlnlcoetea@jpeg
+```
+
+### AIの情報を表示する
+
+AIが持つ`ai.syui.log.chat.lang`, `ai.syui.log.chat.comment`を表示します。
+
+なお、これは通常、`VITE_ADMIN_HANDLE`にputRecordされます。そこから情報を読み込みます。`VITE_AI_HANDLE`はそのrecordの`author`のところに入ります。
+
+```json
+"author": {
+  "did": "did:plc:4hqjfn7m6n5hno3doamuhgef",
+  "avatar": "https://cdn.bsky.app/img/avatar/plain/did:plc:4hqjfn7m6n5hno3doamuhgef/bafkreiaxkv624mffw3cfyi67ufxtwuwsy2mjw2ygezsvtd44ycbgkfdo2a@jpeg",
+  "handle": "yui.syui.ai",
+  "displayName": "ai"
+}
+```
+
+1. VITE_ADMIN_HANDLEから管理者のhandleを取得する。
+2. VITE_ATPROTO_PDSから管理者のアカウントのpdsを取得する。
+3. pdsからpdsApi, bskApi, plcApiを割り当てる。
+
+```rust
+    match pds {
+        "bsky.social" | "bsky.app" => NetworkConfig {
+            pds_api: format!("https://{}", pds),
+            plc_api: "https://plc.directory".to_string(),
+            bsky_api: "https://public.api.bsky.app".to_string(),
+            web_url: "https://bsky.app".to_string(),
+        },
+        "syu.is" => NetworkConfig {
+            pds_api: "https://syu.is".to_string(),
+            plc_api: "https://plc.syu.is".to_string(),
+            bsky_api: "https://bsky.syu.is".to_string(),
+            web_url: "https://web.syu.is".to_string(),
+        },
+        _ => {
+            // Default to Bluesky network for unknown PDS
+            NetworkConfig {
+                pds_api: format!("https://{}", pds),
+                plc_api: "https://plc.directory".to_string(),
+                bsky_api: "https://public.api.bsky.app".to_string(),
+                web_url: "https://bsky.app".to_string(),
+            }
+        }
+    }
+```
+
+4. 管理者アカウントであるVITE_ADMIN_HANDLEとVITE_ATPROTO_PDSから`ai.syui.log.chat.lang`, `ai.syui.log.chat.comment`を取得する。
+
+```sh
+curl -sL "https://${VITE_ATPROTO_PDS}/xrpc/com.atproto.repo.listRecords?repo=${VITE_ADMIN_HANDLE}&collection=ai.syui.log.chat.comment" 
+```
+
+5. AIのprofileを取得する。
+
+```sh
+curl -sL "https://${VITE_ATPROTO_PDS}/xrpc/com.atproto.repo.describeRepo?repo=$VITE_AI_HANDLE" |jq -r ".didDoc.service.[].serviceEndpoint"
+---
+https://syu.is
+
+curl -sL "https://${VITE_ATPROTO_PDS}/xrpc/com.atproto.repo.describeRepo?repo=$VITE_AI_HANDLE" |jq -r ".did"
+did:plc:6qyecktefllvenje24fcxnie
+```
+
+6. pdsからpdsApi, bskApi, plcApiを割り当てる。
+
+```rust
+    match pds {
+        "bsky.social" | "bsky.app" => NetworkConfig {
+            pds_api: format!("https://{}", pds),
+            plc_api: "https://plc.directory".to_string(),
+            bsky_api: "https://public.api.bsky.app".to_string(),
+            web_url: "https://bsky.app".to_string(),
+        },
+        "syu.is" => NetworkConfig {
+            pds_api: "https://syu.is".to_string(),
+            plc_api: "https://plc.syu.is".to_string(),
+            bsky_api: "https://bsky.syu.is".to_string(),
+            web_url: "https://web.syu.is".to_string(),
+        },
+        _ => {
+            // Default to Bluesky network for unknown PDS
+            NetworkConfig {
+                pds_api: format!("https://{}", pds),
+                plc_api: "https://plc.directory".to_string(),
+                bsky_api: "https://public.api.bsky.app".to_string(),
+                web_url: "https://bsky.app".to_string(),
+            }
+        }
+    }
+```
+
+7. AIの情報を取得、表示する
+
+```sh
+bsky_api=https://bsky.syu.is
+user_did=did:plc:6qyecktefllvenje24fcxnie
+curl -sL "$bsky_api/xrpc/app.bsky.actor.getProfile?actor=$user_did"|jq -r .avatar
+---
+https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg
+```
+
 ## 中核思想
 - **存在子理論**: この世界で最も小さいもの（存在子/ai）の探求
 - **唯一性原則**: 現実の個人の唯一性をすべてのシステムで担保

my-blog/config.toml

@@ -0,0 +1,33 @@
+[site]
+title = "syui.ai"
+description = "a blog powered by ailog"
+base_url = "https://syui.ai"
+language = "ja"
+author = "syui"
+
+[build]
+highlight_code = true
+highlight_theme = "Monokai"
+minify = false
+
+[ai]
+enabled = true
+auto_translate = false
+comment_moderation = false
+ask_ai = true
+provider = "ollama"
+model = "qwen3"
+model_translation = "llama3.2:1b"
+model_technical = "phi3:mini"
+host = "http://localhost:11434"
+system_prompt = "あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
+handle = "ai.syui.ai"
+#num_predict = 200
+
+[oauth]
+json = "client-metadata.json"
+redirect = "oauth/callback"
+admin = "ai.syui.ai"
+collection = "ai.syui.log"
+pds = "syu.is"
+handle_list = ["syui.syui.ai", "ai.syui.ai", "ai.ai"]

my-blog/content/posts/2025-06-06-ailog.md

@@ -0,0 +1,157 @@
+---
+title: "静的サイトジェネレータを作った"
+slug: "ailog"
+date: "2025-06-12"
+tags: ["blog", "rust", "mcp", "atp"]
+language: ["ja", "en"]
+---
+
+rustで静的サイトジェネレータを作りました。[ailog](https://git.syui.ai/ai/log)といいます。`hugo`からの移行になります。
+
+`ailog`は、最初にatproto-comment-system(oauth)とask-AIという機能をつけました。
+
+## quick start
+
+```sh
+$ git clone https://git.syui.ai/ai/log
+$ cd log
+$ cargo build
+$ ./target/debug/ailog init my-blog
+$ ./target/debug/ailog serve my-blog
+```
+
+## install
+
+```sh
+$ cargo install --path .
+---
+$ export CARGO_HOME="$HOME/.cargo"
+$ export RUSTUP_HOME="$HOME/.rustup"
+$ export PATH="$HOME/.cargo/bin:$PATH"
+---
+$ which ailog
+$ ailog -h
+```
+
+## build deploy
+
+```sh
+$ cd my-blog
+$ vim config.toml
+$ ailog new test
+$ vim content/posts/`date +"%Y-%m-%d"`.md
+$ ailog build
+
+# publicの中身をweb-serverにdeploy
+$ cp -rf ./public/* ./web-server/root/
+```
+
+## atproto-comment-system
+
+### example
+
+```sh
+$ cd ./oauth
+$ npm i
+$ npm run build
+$ npm run preview
+```
+
+```sh:ouath/.env.production
+# Production environment variables
+VITE_APP_HOST=https://syui.ai
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
+VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn
+
+# Base collection (all others are derived via getCollectionNames)
+VITE_OAUTH_COLLECTION=ai.syui.log
+
+# AI Configuration
+VITE_AI_ENABLED=true
+VITE_AI_ASK_AI=true
+VITE_AI_PROVIDER=ollama
+VITE_AI_MODEL=gemma3:4b
+VITE_AI_HOST=https://ollama.syui.ai
+VITE_AI_SYSTEM_PROMPT="ai"
+VITE_AI_DID=did:plc:4hqjfn7m6n5hno3doamuhgef
+
+# API Configuration
+VITE_BSKY_PUBLIC_API=https://public.api.bsky.app
+VITE_ATPROTO_API=https://bsky.social
+```
+
+これは`ailog oauth build my-blog`で`./my-blog/config.toml`から`./oauth/.env.production`が生成されます。
+
+```sh
+$ ailog oauth build my-blog
+```
+
+### use
+
+簡単に説明すると、`./oauth`で生成するのが`atproto-comment-system`です。
+
+```html
+<script type="module" crossorigin src="/assets/comment-atproto-${hash}}.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-${hash}.css">
+<section class="comment-section"> <div id="comment-atproto"></div> </section>
+```
+
+ただし、oauthであるため、色々と大変です。本番環境(もしくは近い形)でテストを行いましょう。cf, tailscale, ngrokなど。
+
+```yml:cloudflared-config.yml
+tunnel: ${hash}
+credentials-file: ${path}.json
+
+ingress:
+  - hostname: example.com
+    service: http://localhost:4173
+    originRequest:
+      noHappyEyeballs: true
+      
+  - service: http_status:404
+```
+
+```sh
+# tunnel list, dnsに登録が必要です
+$ cloudflared tunnel list
+$ cloudflared tunnel --config cloudflared-config.yml run
+$ cloudflared tunnel route dns ${uuid} example.com
+```
+
+```sh
+$ ailog auth init
+$ ailog stream server
+```
+
+このコマンドで`ai.syui.log`を`jetstream`から監視して、書き込みがあれば、管理者の`ai.syui.log.user`に記録され、そのuser-listに基づいて、コメント一覧を取得します。
+
+つまり、コメント表示のアカウントを手動で設定するか、自動化するか。自動化するならserverで`ailog stream server`を動かさなければいけません。
+
+## ask-AI
+
+`ask-AI`の仕組みは割愛します。後に変更される可能性が高いと思います。
+
+`llm`, `mcp`, `atproto`などの組み合わせです。
+
+現在、`/index.json`を監視して、更新があれば、翻訳などを行い自動ポストする機能があります。
+
+## code syntax
+
+```zsh:/path/to/test.zsh
+# comment
+d=${0:a:h}
+```
+
+```rust:/path/to/test.rs
+// This is a comment
+fn main() {
+    println!("Hello, world!");
+}
+```
+
+```js:/path/to/test.js
+// This is a comment
+console.log("Hello, world!");
+```
+

my-blog/content/posts/2025-06-14-blog.md

@@ -0,0 +1,66 @@
+---
+title: "ブログを移行した"
+slug: "blog"
+date: 2025-06-14
+tags: ["blog", "cloudflare", "github"]
+draft: false
+---
+
+ブログを移行しました。過去のブログは[syui.github.io](https://syui.github.io)にありあます。
+
+1. `gh-pages`から`cf-pages`への移行になります。
+2. 自作の`ailog`でbuildしています。
+3. 特徴としては、`atproto`, `AI`との連携です。
+
+```yml:.github/workflows/cloudflare-pages.yml 
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+          
+      - name: Setup Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+
+      - name: Build ailog
+        run: cargo build --release
+
+      - name: Build site with ailog
+        run: |
+          cd my-blog
+          ../target/release/ailog build
+
+      - name: List public directory
+        run: |
+          ls -la my-blog/public/
+          
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+          directory: my-blog/public
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          wranglerVersion: '3'
+```
+
+## url
+
+- [https://syui.pages.dev](https://syui.pages.dev)
+- [https://syui.github.io](https://syui.github.io)

my-blog/layouts/_default/index.json

@@ -0,0 +1,7 @@
+{{ $dateFormat := default "Mon Jan 2, 2006" (index .Site.Params "date_format") }}
+{{ $utcFormat := "2006-01-02T15:04:05Z07:00" }}
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+    {{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "description" .Description "categories" .Params.categories "contents" .Plain "href" .Permalink "utc_time" (.Date.Format $utcFormat) "formated_time" (.Date.Format $dateFormat)) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}

my-blog/oauth/.env.production

@@ -0,0 +1,20 @@
+# Production environment variables
+VITE_APP_HOST=https://syui.ai
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
+
+# Handle-based Configuration (DIDs resolved at runtime)
+VITE_ATPROTO_PDS=syu.is
+VITE_ADMIN_HANDLE=ai.syui.ai
+VITE_AI_HANDLE=ai.syui.ai
+VITE_OAUTH_COLLECTION=ai.syui.log
+VITE_ATPROTO_WEB_URL=https://bsky.app
+VITE_ATPROTO_HANDLE_LIST=["syui.syui.ai", "ai.syui.ai", "ai.ai"]
+
+# AI Configuration
+VITE_AI_ENABLED=true
+VITE_AI_ASK_AI=true
+VITE_AI_PROVIDER=ollama
+VITE_AI_MODEL=gemma3:4b
+VITE_AI_HOST=http://localhost:11434
+VITE_AI_SYSTEM_PROMPT="あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"

my-blog/static/.well-known/jwks.json

@@ -0,0 +1,14 @@
+{
+  "keys": [
+    {
+      "kty": "EC",
+      "crv": "P-256",
+      "x": "mock_x_coordinate_base64url",
+      "y": "mock_y_coordinate_base64url",
+      "d": "mock_private_key_base64url",
+      "use": "sig",
+      "kid": "ai-card-oauth-key-1",
+      "alg": "ES256"
+    }
+  ]
+}

my-blog/static/_headers

@@ -0,0 +1,51 @@
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  X-XSS-Protection: 1; mode=block
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+
+# OAuth specific headers
+/oauth/*
+  Access-Control-Allow-Origin: https://bsky.social
+  Access-Control-Allow-Methods: GET, POST, OPTIONS
+  Access-Control-Allow-Headers: Content-Type, Authorization
+
+# Static assets caching
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/css/*
+  Content-Type: text/css
+  Cache-Control: no-cache
+
+/*.js
+  Content-Type: application/javascript
+  Cache-Control: public, max-age=31536000, immutable
+
+/assets/*.js
+  Content-Type: application/javascript
+  Cache-Control: public, max-age=31536000, immutable
+
+# Ensure ES6 modules are served correctly
+/assets/comment-atproto-*.js
+  Content-Type: text/javascript; charset=utf-8
+  Cache-Control: public, max-age=31536000, immutable
+
+# All JS assets
+/assets/*-*.js
+  Content-Type: text/javascript; charset=utf-8
+  Cache-Control: public, max-age=31536000, immutable
+
+# CSS assets
+/assets/*.css
+  Content-Type: text/css
+  Cache-Control: public, max-age=60
+
+/posts/*
+  Cache-Control: public, max-age=3600
+
+# Client metadata for OAuth
+/client-metadata.json
+  Content-Type: application/json
+  Cache-Control: public, max-age=3600

my-blog/static/_redirects

@@ -0,0 +1,5 @@
+# OAuth routes
+/oauth/* /oauth/index.html 200
+
+# SPA routing support
+/*    /index.html   200

my-blog/static/client-metadata.json

@@ -0,0 +1,24 @@
+{
+  "client_id": "https://syui.ai/client-metadata.json",
+  "client_name": "ai.log",
+  "client_uri": "https://syui.ai",
+  "logo_uri": "https://syui.ai/favicon.ico",
+  "tos_uri": "https://syui.ai/terms",
+  "policy_uri": "https://syui.ai/privacy",
+  "redirect_uris": [
+    "https://syui.ai/oauth/callback",
+    "https://syui.ai/"
+  ],
+  "response_types": [
+    "code"
+  ],
+  "grant_types": [
+    "authorization_code",
+    "refresh_token"
+  ],
+  "token_endpoint_auth_method": "none",
+  "scope": "atproto transition:generic",
+  "subject_type": "public",
+  "application_type": "web",
+  "dpop_bound_access_tokens": true
+}

my-blog/static/css/style.css

@@ -0,0 +1,963 @@
+/* Theme Colors */
+:root {
+    --theme-color: #f40;
+    --ai-color: #ff7;
+    --white: #fff;
+    --light-white: #f5f5f5;
+    --dark-white: #d1d9e0;
+    --light-gray: #f6f8fa;
+    --dark-gray: #666;
+    --background: #fff;
+}
+
+/* Base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    line-height: 1.6;
+    color: #1f2328;
+    background-color: #ffffff;
+    font-size: 16px;
+}
+
+/* Buttons */
+button {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+/* Links */
+a:any-link {
+    color: var(--theme-color);
+    text-decoration-line: unset;
+    cursor: pointer;
+}
+
+a:hover {
+    color: var(--theme-color);
+    opacity: 0.8;
+}
+
+/* Override link color for specific buttons */
+a.view-markdown,
+a.view-markdown:any-link {
+    color: #ffffff !important;
+    text-decoration: none !important;
+}
+
+/* Layout */
+.container {
+    min-height: 100vh;
+    display: grid;
+    grid-template-rows: auto 0fr 1fr auto;
+    grid-template-areas: 
+        "header"
+        "ask-ai"
+        "main"
+        "footer";
+}
+
+/* Header */
+.main-header {
+    grid-area: header;
+    background: #ffffff;
+    border-bottom: 1px solid #d1d9e0;
+    padding: 16px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-content {
+    max-width: 1000px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    position: relative;
+}
+
+.site-title {
+    color: var(--theme-color);
+    text-decoration: none;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.logo {
+    grid-column: 2;
+    padding: 20px;
+}
+
+.logo .likeButton {
+    height: 60px;
+    width: auto;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+}
+
+.header-actions {
+    grid-column: 3;
+    justify-self: end;
+    display: flex;
+    align-items: center;
+}
+
+/* Ask AI Button */
+.ask-ai-btn {
+    background: var(--theme-color);
+    color: var(--white);
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: background-color 0.2s;
+    margin: 0;
+}
+
+.ask-ai-btn:hover {
+    filter: brightness(1.1);
+}
+
+.ai-icon {
+    font-size: 16px;
+    width: 20px;
+    height: 20px;
+    color: var(--ai-color);
+    display: inline-block;
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+
+/* Ask AI Panel */
+.ask-ai-panel {
+    grid-area: ask-ai;
+    background: #f6f8fa;
+    border-bottom: 1px solid #d1d9e0;
+    padding: 24px;
+    overflow: hidden;
+}
+
+.ask-ai-panel[style*="block"] {
+    display: block !important;
+}
+
+.container:has(.ask-ai-panel[style*="block"]) {
+    grid-template-rows: auto auto 1fr auto;
+}
+
+.ask-ai-content {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.ask-ai-form {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.ask-ai-form input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid #d1d9e0;
+    border-radius: 6px;
+    font-size: 14px;
+}
+
+.auth-check {
+    background: #f6f8fa;
+    border: 1px solid #d1d9e0;
+    border-radius: 6px;
+    padding: 16px;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+/* Main Content */
+.main-content {
+    grid-area: main;
+    max-width: 1000px;
+    margin: 0 auto;
+    /* padding: 24px; */
+    padding-top: 80px;
+    width: 100%;
+}
+
+@media (max-width: 1000px) {
+    .main-content {
+        /* padding: 20px; */
+        padding: 0px;
+        max-width: 100%;
+    }
+}
+
+/* Timeline */
+.timeline-container {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.timeline-header h2 {
+    color: #1f2328;
+    font-size: 24px;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.timeline-feed {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.timeline-post {
+    background: #ffffff;
+    border: 1px solid #d1d9e0;
+    border-radius: 8px;
+    padding: 20px;
+    transition: box-shadow 0.2s;
+}
+
+.timeline-post:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.post-title a {
+    color: var(--theme-color);
+    text-decoration: none;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.post-title a:hover {
+    color: var(--theme-color);
+}
+
+.post-date {
+    color: #656d76;
+    font-size: 14px;
+}
+
+.post-excerpt {
+    color: #656d76;
+    margin: 16px 0;
+    line-height: 1.5;
+}
+
+.post-actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.read-more {
+    color: var(--theme-color);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.read-more:hover {
+    text-decoration: underline;
+}
+
+.view-markdown, .view-translation {
+    color: #656d76;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.view-markdown {
+    background: var(--theme-color) !important;
+    color: #ffffff !important;
+    border: 1px solid var(--theme-color);
+}
+
+.view-markdown:hover {
+    filter: brightness(1.1);
+    color: #ffffff !important;
+    background: var(--theme-color) !important;
+}
+
+.view-translation:hover {
+    background: #f6f8fa;
+}
+
+.post-meta {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.post-lang {
+    background: #f6f8fa;
+    color: #656d76;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+/* Article */
+.article-container {
+    display: grid;
+    grid-template-columns: 1fr 240px;
+    gap: 40px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+article.article-content {
+    padding: 10px;
+}
+
+.article-meta {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.article-date {
+    color: #656d76;
+    font-size: 14px;
+}
+
+.article-lang {
+    background: #f6f8fa;
+    color: #656d76;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.article-actions {
+    display: flex;
+    gap: 12px;
+    padding: 15px 0;
+}
+
+.action-btn {
+    color: var(--theme-color);
+    text-decoration: none;
+    font-size: 14px;
+    padding: 6px 12px;
+    border: 1px solid #d1d9e0;
+    border-radius: 6px;
+    transition: all 0.2s;
+}
+
+.action-btn:hover {
+    background: #f6f8fa;
+    border-color: var(--theme-color);
+}
+
+.markdown-btn {
+    background: var(--dark-white);
+    color: var(--white);
+    border-color: var(--white);
+}
+
+.markdown-btn:link,
+.markdown-btn:visited {
+    color: var(--white) !important;
+}
+
+.markdown-btn:hover {
+    filter: brightness(0.9);
+    color: var(--theme-color) !important;
+    border-color: var(--white);
+}
+
+/* Sidebar styles */
+.article-sidebar {
+    position: sticky;
+    top: 100px;
+    height: fit-content;
+}
+
+.toc {
+    background: #f6f8fa;
+    border: 1px solid #d1d9e0;
+    border-radius: 8px;
+    padding: 16px;
+}
+
+.toc h3 {
+    color: #1f2328;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.toc-list {
+    list-style: none;
+    padding: 0;
+}
+
+.toc-item {
+    margin-bottom: 8px;
+}
+
+/* Hierarchy indentation for TOC */
+.toc-item.toc-h1 .toc-link {
+    padding-left: 0;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.toc-item.toc-h2 .toc-link {
+    padding-left: 0;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.toc-item.toc-h3 .toc-link {
+    padding-left: 16px;
+    font-weight: 400;
+    font-size: 13px;
+}
+
+.toc-item.toc-h4 .toc-link {
+    padding-left: 32px;
+    font-weight: 400;
+    font-size: 12px;
+    opacity: 0.9;
+}
+
+.toc-item.toc-h5 .toc-link {
+    padding-left: 48px;
+    font-weight: 400;
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+.toc-item.toc-h6 .toc-link {
+    padding-left: 64px;
+    font-weight: 400;
+    font-size: 11px;
+    opacity: 0.7;
+}
+
+.toc-link {
+    color: #656d76;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 1.4;
+    display: block;
+    padding: 4px 0;
+    transition: color 0.2s;
+}
+
+.toc-link:hover {
+    color: var(--theme-color);
+}
+
+.article-title {
+    color: #1f2328;
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    line-height: 1.25;
+}
+
+.article-body {
+    color: #1f2328;
+    line-height: 1.6;
+}
+
+.article-body h1, .article-body h2, .article-body h3 {
+    color: #1f2328;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+}
+
+.article-body p {
+    margin-bottom: 16px;
+}
+
+.article-body ol, .article-body ul {
+    margin: 16px 0;
+    padding-left: 24px;
+}
+
+.article-body li {
+    margin-bottom: 8px;
+    line-height: 1.6;
+}
+
+.article-body ol li {
+    list-style-type: decimal;
+}
+
+.article-body ul li {
+    list-style-type: disc;
+}
+
+.article-body pre {
+    background: #1B1D1E !important;
+    border: 1px solid #3E3D32;
+    border-radius: 8px;
+    padding: 0;
+    overflow: hidden;
+    margin: 16px 0;
+    font-size: 14px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* File name display for code blocks - top bar style */
+.article-body pre[data-filename]::before {
+    content: attr(data-filename);
+    display: block;
+    background: #2D2D30;
+    color: #AE81FF;
+    padding: 8px 16px;
+    font-size: 12px;
+    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+    border-bottom: 1px solid #3E3D32;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.article-body pre code {
+    display: block;
+    background: none !important;
+    padding: 30px 16px;
+    color: #F8F8F2 !important;
+    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+    overflow-x: auto;
+    line-height: 1.4;
+}
+
+/* Adjust padding when filename is present */
+.article-body pre[data-filename] code {
+    padding: 16px;
+}
+
+/* Inline code (not in pre blocks) */
+.article-body code {
+    background: var(--light-white);
+    color: var(--dark-gray);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+    font-size: 13px;
+}
+
+/* Molokai syntax highlighting */
+.article-body pre code .hljs-keyword { color: #F92672; }
+.article-body pre code .hljs-string { color: #E6DB74; }
+.article-body pre code .hljs-comment { color: #88846F; font-style: italic; }
+.article-body pre code .hljs-number { color: #AE81FF; }
+.article-body pre code .hljs-variable { color: #FD971F; }
+.article-body pre code .hljs-function { color: #A6E22E; }
+.article-body pre code .hljs-tag { color: #F92672; }
+.article-body pre code .hljs-attr { color: #A6E22E; }
+.article-body pre code .hljs-value { color: #E6DB74; }
+
+/* Fix inline span colors in code blocks */
+.article-body pre code span[style*="color:#8fa1b3"] { color: #AE81FF !important; } /* $ prompt */
+.article-body pre code span[style*="color:#c0c5ce"] { color: #F8F8F2 !important; } /* commands */
+.article-body pre code span[style*="color:#75715E"] { color: #88846F !important; } /* real comments */
+
+/* Shell/Bash specific fixes */
+.article-body pre code span[style*="color:#65737e"] { 
+    color: #F8F8F2 !important; /* Default to white for variables and code */
+}
+
+/* Comments in shell scripts - lines that contain # followed by text */
+.article-body pre code span[style*="color:#65737e"]:has-text("#") {
+    color: #88846F !important;
+}
+
+/* Alternative approach - check content */
+.article-body pre code {
+    /* Reset all gray colored text to white by default */
+}
+
+.article-body pre code span[style*="color:#65737e"] {
+    /* Check if the content starts with # */
+    color: #F8F8F2 !important;
+}
+
+/* Override for actual comments - this is a workaround */
+.article-body pre code span[style*="color:#65737e"]:first-child:before {
+    content: attr(data-comment);
+}
+
+/* Detect comments by position and content pattern */
+.article-body pre code span[style*="color:#65737e"] {
+    color: #F8F8F2 !important; /* Environment variables = white */
+}
+
+/* Only style as comment if the line actually starts with # */
+.article-body pre code > span:first-child[style*="color:#65737e"] {
+    color: #88846F !important; /* Real comments = gray */
+}
+
+/* Footer */
+.main-footer {
+    grid-area: footer;
+    background: var(--light-white);
+    border-top: 1px solid #d1d9e0;
+    padding: 32px 24px;
+    text-align: center;
+}
+
+.footer-social {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    margin: 40px;
+}
+
+.footer-social a {
+    color: var(--dark-gray) !important;
+    text-decoration: none !important;
+    font-size: 16px;
+    transition: all 0.2s ease;
+}
+
+.footer-social a:hover {
+    color: var(--theme-color) !important;
+    opacity: 0.8;
+}
+
+.main-footer p {
+    color: #656d76;
+    font-size: 14px;
+    margin: 0;
+}
+
+/* Chat Messages */
+.chat-message.comment-style {
+    background: #ffffff;
+    border: 1px solid #d1d9e0;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 12px;
+}
+
+.chat-message.ai-message.comment-style {
+    border-left: 4px solid var(--ai-color);
+    background: #faf8ff;
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.message-header .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #f6f8fa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    border: 1px solid #d1d9e0;
+}
+
+.display-name {
+    font-weight: 600;
+    color: #1f2328;
+    font-size: 14px;
+}
+
+.handle {
+    color: #656d76;
+    font-size: 13px;
+}
+
+.timestamp {
+    color: #656d76;
+    font-size: 12px;
+}
+
+.message-content {
+    color: #1f2328;
+    line-height: 1.5;
+    white-space: pre-wrap;
+}
+
+.profile-avatar {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+/* Loading Animation */
+.ai-loading-simple {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 15px;
+    background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
+    border-radius: 20px;
+    margin: 8px 0;
+    font-size: 14px;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Comment System Styles */
+.comment-section {
+    max-width: 800px;
+    margin: 0 auto;
+    margin-top: 48px;
+    padding-top: 32px;
+}
+
+.comment-container {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.comment-section h3 {
+    color: #1f2328;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 32px;
+    text-align: center;
+}
+
+/* OAuth Comment System - Hide on homepage by default, show on post pages */
+.timeline-container .comment-section {
+    display: block; /* Show on homepage */
+}
+
+.timeline-container .comment-section .comments-list > :nth-child(n+6) {
+    display: none; /* Hide comments after the 5th one */
+}
+
+.article-container .comment-section,
+.article-content + .comment-section {
+    display: block; /* Show all comments on post pages */
+}
+
+/* Responsive */
+@media (max-width: 1000px) {
+    .article-container {
+        grid-template-columns: 1fr;
+        gap: 24px;
+        max-width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+@media (max-width: 1000px) {
+    .main-header {
+        padding: 0px;
+    }
+    
+    .header-content {
+        max-width: 100%;
+        padding: 0 20px;
+        grid-template-columns: auto 1fr auto;
+        gap: 0;
+    }
+    
+    /* OAuth app mobile fixes */
+    .comment-item {
+        padding: 0px !important;
+        margin: 0px !important;
+    }
+    
+    .auth-section {
+        padding: 0px !important;
+    }
+    
+    .comments-list {
+        padding: 0px !important;
+    }
+    
+    .comment-section {
+        max-width: 100% !important;
+        padding: 0px !important;
+        margin: 0px !important;
+    }
+    
+    .comment-container {
+        max-width: 100% !important;
+        padding: 0px !important;
+        margin: 0px !important;
+    }
+    
+    .comment-content {
+        padding: 10px !important;
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
+    }
+    
+    .comment-header {
+        padding: 10px !important;
+    }
+    
+    /* Fix comment-meta URI overflow */
+    .comment-meta {
+        word-break: break-all !important;
+        overflow-wrap: break-word !important;
+    }
+    
+    /* Hide site title text on mobile */
+    .site-title {
+        display: none;
+    }
+    
+    /* Left align logo on mobile */
+    .logo {
+        grid-column: 1;
+        justify-self: left;
+        padding: 5px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+    
+    /* Reduce logo size on mobile */
+    .logo .likeButton {
+        width: 40pt;
+        height: 40pt;
+    }
+    
+    /* Position AI button on the right */
+    .header-actions {
+        grid-column: 3;
+        justify-self: end;
+    }
+    
+    /* Ask AI button mobile style - icon only */
+    .ask-ai-btn {
+        padding: 8px;
+        min-width: 40px;
+        justify-content: center;
+        gap: 0;
+        font-size: 0; /* Hide all text content */
+    }
+    
+    .ask-ai-btn .ai-icon {
+        margin: 0;
+        font-size: 16px;
+    }
+    
+    .ask-ai-panel {
+        padding: 16px;
+    }
+    
+    /* Article content mobile optimization */
+    .article-body {
+        overflow-x: hidden;
+    }
+    
+    .article-body pre {
+        margin: 16px 0;
+        border-radius: 4px;
+        max-width: 100%;
+        overflow-x: auto;
+    }
+    
+    .article-body pre code {
+        padding: 20px 12px;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+    }
+    
+    /* Mobile filename display */
+    .article-body pre[data-filename]::before {
+        padding: 6px 12px;
+        font-size: 11px;
+    }
+    
+    .article-body pre[data-filename] code {
+        padding: 12px;
+    }
+    
+    .article-body code {
+        word-break: break-all;
+    }
+    
+    .ask-ai-form {
+        flex-direction: column;
+    }
+    
+    .timeline-container {
+        max-width: 100%;
+        padding: 0;
+    }
+    
+    .timeline-post {
+        padding: 16px;
+    }
+    
+				.article-title {
+					   font-size: 24px;
+					   padding: 30px 0px;
+				}
+
+    .message-header .avatar {
+        width: 32px;
+        height: 32px;
+        font-size: 16px;
+    }
+    
+    /* Center content on mobile */
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    
+    .container {
+        width: 100%;
+        padding: 0;
+    }
+}

my-blog/static/css/svg-animation-package.css

@@ -0,0 +1,342 @@
+/* SVG Animation Package - Dependency-free standalone package
+ * Based on svg-animation-particle-circle.css
+ * Theme color integration with CSS variables
+ */
+
+/* Theme-based color variables for particles */
+:root {
+    --particle-color-1: #f40;     /* theme-color base */
+    --particle-color-2: #f50;     /* theme-color +0.1 brightness */
+    --particle-color-3: #f60;     /* theme-color +0.2 brightness */
+    --particle-color-4: #f70;     /* theme-color +0.3 brightness */
+    --particle-color-5: #f80;     /* theme-color +0.4 brightness */
+    --explosion-color: #f30;      /* theme-color -0.1 brightness */
+    --syui-color: #f40;           /* main theme color */
+}
+
+/* Core SVG button setup */
+.likeButton {
+    cursor: pointer;
+    display: inline-block;
+}
+
+/* Remove debug animation and restore hover functionality */
+
+.likeButton .border {
+    fill: white;
+}
+
+/* Explosion circle - initially hidden */
+.likeButton .explosion {
+    transform-origin: center center;
+    transform: scale(1);
+    stroke: var(--explosion-color);
+    fill: none;
+    opacity: 0;
+    stroke-width: 1;
+}
+
+/* Particle layer - initially hidden */
+.likeButton .particleLayer {
+    opacity: 0;
+    transform: scale(0); /* Ensure particles start hidden */
+}
+
+.likeButton .particleLayer circle {
+    opacity: 0;
+    transform-origin: center center; /* Fixed from 250px 250px */
+    transform: scale(0);
+}
+
+/* Syui logo - main animation target */
+.likeButton .syui {
+    fill: var(--syui-color);
+    transform: scale(1);
+    transform-origin: center center;
+}
+
+/* Hover trigger - replaces jQuery */
+.likeButton:hover .explosion {
+    animation: explosionAnime 800ms forwards;
+}
+
+.likeButton:hover .particleLayer {
+    animation: particleLayerAnime 800ms forwards;
+}
+
+.likeButton:hover .syui,
+.likeButton:hover path.syui {
+    animation: syuiDeluxeAnime 400ms forwards;
+}
+
+/* Individual particle animations */
+.likeButton:hover .particleLayer circle:nth-child(1) {
+    animation: particleAnimate1 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(2) {
+    animation: particleAnimate2 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(3) {
+    animation: particleAnimate3 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(4) {
+    animation: particleAnimate4 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(5) {
+    animation: particleAnimate5 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(6) {
+    animation: particleAnimate6 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(7) {
+    animation: particleAnimate7 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(8) {
+    animation: particleAnimate8 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(9) {
+    animation: particleAnimate9 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(10) {
+    animation: particleAnimate10 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(11) {
+    animation: particleAnimate11 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(12) {
+    animation: particleAnimate12 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(13) {
+    animation: particleAnimate13 800ms;
+    animation-fill-mode: forwards;
+}
+
+.likeButton:hover .particleLayer circle:nth-child(14) {
+    animation: particleAnimate14 800ms;
+    animation-fill-mode: forwards;
+}
+
+/* Keyframe animations */
+@keyframes explosionAnime {
+    0% {
+        opacity: 0;
+        transform: scale(0.01);
+    }
+    1% {
+        opacity: 1;
+        transform: scale(0.01);
+    }
+    5% {
+        stroke-width: 200;
+    }
+    20% {
+        stroke-width: 300;
+    }
+    50% {
+        stroke: var(--particle-color-3);
+        transform: scale(1.1);
+        stroke-width: 1;
+    }
+    50.1% {
+        stroke-width: 0;
+    }
+    100% {
+        stroke: var(--particle-color-3);
+        transform: scale(1.1);
+        stroke-width: 0;
+    }
+}
+
+@keyframes particleLayerAnime {
+    0% {
+        transform: translate(0, 0);
+        opacity: 0;
+    }
+    30% {
+        opacity: 0;
+    }
+    31% {
+        opacity: 1;
+    }
+    60% {
+        transform: translate(0, 0);
+    }
+    70% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        transform: translate(0, -20px);
+    }
+}
+
+/* Syui Deluxe Animation - Based on 2019 blog post */
+@keyframes syuiDeluxeAnime {
+    0% {
+        fill: var(--syui-color);
+        transform: scale(1) translate(0%, 0%);
+    }
+    40% {
+        fill: color-mix(in srgb, var(--syui-color) 40%, transparent);
+        transform: scale(1, 0.9) translate(-9%, 9%);
+    }
+    50% {
+        fill: color-mix(in srgb, var(--syui-color) 70%, transparent);
+        transform: scale(1, 0.9) translate(-7%, 7%);
+    }
+    60% {
+        transform: scale(1) translate(-7%, 7%);
+    }
+    70% {
+        transform: scale(1.04) translate(-5%, 5%);
+    }
+    80% {
+        fill: color-mix(in srgb, var(--syui-color) 60%, transparent);
+        transform: scale(1.04) translate(-5%, 5%);
+    }
+    90% {
+        fill: var(--particle-color-5); /* 爆発の閃光 */
+        transform: scale(1) translate(0%);
+    }
+    100% {
+        fill: var(--syui-color);
+        transform: scale(1, 1) translate(0%, 0%);
+    }
+}
+
+/* Individual particle animations */
+@keyframes particleAnimate1 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-16px, -59px); }
+    90% { transform: translate(-16px, -59px); }
+    100% { opacity: 1; transform: translate(-16px, -59px); }
+}
+
+@keyframes particleAnimate2 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(41px, 43px); }
+    90% { transform: translate(41px, 43px); }
+    100% { opacity: 1; transform: translate(41px, 43px); }
+}
+
+@keyframes particleAnimate3 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(50px, -48px); }
+    90% { transform: translate(50px, -48px); }
+    100% { opacity: 1; transform: translate(50px, -48px); }
+}
+
+@keyframes particleAnimate4 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-39px, 36px); }
+    90% { transform: translate(-39px, 36px); }
+    100% { opacity: 1; transform: translate(-39px, 36px); }
+}
+
+@keyframes particleAnimate5 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-39px, 32px); }
+    90% { transform: translate(-39px, 32px); }
+    100% { opacity: 1; transform: translate(-39px, 32px); }
+}
+
+@keyframes particleAnimate6 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(48px, 6px); }
+    90% { transform: translate(48px, 6px); }
+    100% { opacity: 1; transform: translate(48px, 6px); }
+}
+
+@keyframes particleAnimate7 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-69px, -36px); }
+    90% { transform: translate(-69px, -36px); }
+    100% { opacity: 1; transform: translate(-69px, -36px); }
+}
+
+@keyframes particleAnimate8 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-12px, -52px); }
+    90% { transform: translate(-12px, -52px); }
+    100% { opacity: 1; transform: translate(-12px, -52px); }
+}
+
+@keyframes particleAnimate9 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-43px, -21px); }
+    90% { transform: translate(-43px, -21px); }
+    100% { opacity: 1; transform: translate(-43px, -21px); }
+}
+
+@keyframes particleAnimate10 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-10px, 47px); }
+    90% { transform: translate(-10px, 47px); }
+    100% { opacity: 1; transform: translate(-10px, 47px); }
+}
+
+@keyframes particleAnimate11 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(66px, -9px); }
+    90% { transform: translate(66px, -9px); }
+    100% { opacity: 1; transform: translate(66px, -9px); }
+}
+
+@keyframes particleAnimate12 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(40px, -45px); }
+    90% { transform: translate(40px, -45px); }
+    100% { opacity: 1; transform: translate(40px, -45px); }
+}
+
+@keyframes particleAnimate13 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(29px, 24px); }
+    90% { transform: translate(29px, 24px); }
+    100% { opacity: 1; transform: translate(29px, 24px); }
+}
+
+@keyframes particleAnimate14 {
+    0% { transform: translate(0, 0); }
+    30% { opacity: 1; transform: translate(0, 0); }
+    80% { transform: translate(-10px, 50px); }
+    90% { transform: translate(-10px, 50px); }
+    100% { opacity: 1; transform: translate(-10px, 50px); }
+}

my-blog/static/favicon.svg

@@ -0,0 +1,22 @@
+<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
+  <circle class="explosion" r="150" cx="250" cy="250"></circle>
+  <g class="particleLayer">
+    <circle fill="#ef454aba" cx="130" cy="126.5" r="12.5"/>
+    <circle fill="#ef454acc" cx="411" cy="313.5" r="12.5"/>
+    <circle fill="#ef454aba" cx="279" cy="86.5" r="12.5"/>
+    <circle fill="#ef454aba" cx="155" cy="390.5" r="12.5"/>
+    <circle fill="#ef454aba" cx="89" cy="292.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="414" cy="282.5" r="10.5"/>
+    <circle fill="#ef454a91" cx="115" cy="149.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="250" cy="80.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="78" cy="261.5" r="10.5"/>
+    <circle fill="#ef454a91" cx="182" cy="402.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="401.5" cy="166" r="13"/>
+    <circle fill="#ef454aba" cx="379" cy="141.5" r="10.5"/>
+    <circle fill="#ef454a91" cx="327" cy="397.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="296" cy="392.5" r="10.5"/>
+  </g>
+<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
+<path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
+</g>
+</svg>

my-blog/static/index.json

@@ -0,0 +1,31 @@
+[
+  {
+    "categories": [],
+    "contents": "ブログを移行しました。過去のブログはsyui.github.ioにありあます。 gh-pagesからcf-pagesへの移行になります。 自作のailogでbuildしています。 特徴としては、atproto, AIとの連携です。 name: Deploy to Cloudflare Pages on: push: branches: - main workflow_dispatch: jobs: deploy: runs-on: ubuntu-latest permissions: contents: read deployments: write steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Rust uses: actions-rs/toolchain@v1 with: toolchain: stable - name: Build ailog run: cargo build --release - name: Build site with ailog run: | cd my-blog ../target/release/ailog build - name: List public directory run: | ls -la my-blog/public/ - name: Deploy to Cloudflare Pages uses: cloudflare/pages-action@v1 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }} directory: my-blog/public gitHubToken: ${{ secrets.GITHUB_TOKEN }} wranglerVersion: '3' url https://syui.pages.dev https://syui.github.io",
+    "description": "ブログを移行しました。過去のブログはsyui.github.ioにありあます。 \n\ngh-pagesからcf-pagesへの移行になります。\n自作のailogでbuildしています。\n特徴としては、atproto, AIとの連携です。\n\nname: Deploy to Cloudflare Pages\n\non:\n  push:\n    branches:\n      - main\n  workfl...",
+    "formated_time": "Sat Jun 14, 2025",
+    "href": "https://syui.ai/posts/2025-06-14-blog.html",
+    "tags": [
+      "blog",
+      "cloudflare",
+      "github"
+    ],
+    "title": "ブログを移行した",
+    "utc_time": "2025-06-14T00:00:00Z"
+  },
+  {
+    "categories": [],
+    "contents": "rustで静的サイトジェネレータを作りました。ailogといいます。hugoからの移行になります。 ailogは、最初にatproto-comment-system(oauth)とask-AIという機能をつけました。 quick start $ git clone https://git.syui.ai/ai/log $ cd log $ cargo build $ ./target/debug/ailog init my-blog $ ./target/debug/ailog serve my-blog install $ cargo install --path . --- $ export CARGO_HOME="$HOME/.cargo" $ export RUSTUP_HOME="$HOME/.rustup" $ export PATH="$HOME/.cargo/bin:$PATH" --- $ which ailog $ ailog -h build deploy $ cd my-blog $ vim config.toml $ ailog new test $ vim content/posts/`date +"%Y-%m-%d"`.md $ ailog build # publicの中身をweb-serverにdeploy $ cp -rf ./public/* ./web-server/root/ atproto-comment-system example $ cd ./oauth $ npm i $ npm run build $ npm run preview # Production environment variables VITE_APP_HOST=https://example.com VITE_OAUTH_CLIENT_ID=https://example.com/client-metadata.json VITE_OAUTH_REDIRECT_URI=https://example.com/oauth/callback VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn # Collection names for OAuth app VITE_COLLECTION_COMMENT=ai.syui.log VITE_COLLECTION_USER=ai.syui.log.user VITE_COLLECTION_CHAT=ai.syui.log.chat # Collection names for ailog (backward compatibility) AILOG_COLLECTION_COMMENT=ai.syui.log AILOG_COLLECTION_USER=ai.syui.log.user # API Configuration VITE_BSKY_PUBLIC_API=https://public.api.bsky.app これはailog oauth build my-blogで./my-blog/config.tomlから./oauth/.env.productionが生成されます。 $ ailog oauth build my-blog use 簡単に説明すると、./oauthで生成するのがatproto-comment-systemです。 <script type="module" crossorigin src="/assets/comment-atproto-${hash}}.js"></script> <link rel="stylesheet" crossorigin href="/assets/comment-atproto-${hash}.css"> <section class="comment-section"> <div id="comment-atproto"></div> </section> ただし、oauthであるため、色々と大変です。本番環境(もしくは近い形)でテストを行いましょう。cf, tailscale, ngrokなど。 tunnel: ${hash} credentials-file: ${path}.json ingress: - hostname: example.com service: http://localhost:4173 originRequest: noHappyEyeballs: true - service: http_status:404 # tunnel list, dnsに登録が必要です $ cloudflared tunnel list $ cloudflared tunnel --config cloudflared-config.yml run $ cloudflared tunnel route dns ${uuid} example.com 以下の2つのcollection recordを生成します。ユーザーにはai.syui.logが生成され、ここにコメントが記録されます。それを取得して表示しています。ai.syui.log.userは管理者であるVITE_ADMIN_DID用です。 VITE_COLLECTION_COMMENT=ai.syui.log VITE_COLLECTION_USER=ai.syui.log.user $ ailog auth login $ ailog stream server このコマンドでai.syui.logをjetstreamから監視して、書き込みがあれば、管理者のai.syui.log.userに記録され、そのuser-listに基づいて、コメント一覧を取得します。 つまり、コメント表示のアカウントを手動で設定するか、自動化するか。自動化するならserverでailog stream serverを動かさなければいけません。 ask-AI ask-AIの仕組みは割愛します。後に変更される可能性が高いと思います。 local llm, mcp, atprotoと組み合わせです。 code syntax # comment d=${0:a:h} // This is a comment fn main() { println!("Hello, world!"); } // This is a comment console.log("Hello, world!");",
+    "description": "rustで静的サイトジェネレータを作りました。ailogといいます。hugoからの移行になります。 \nailogは、最初にatproto-comment-system(oauth)とask-AIという機能をつけました。 \nquick start\n$ git clone https://git.syui.ai/ai/log\n$ cd log\n$ cargo build\n$ ./target/debu...",
+    "formated_time": "Thu Jun 12, 2025",
+    "href": "https://syui.ai/posts/2025-06-06-ailog.html",
+    "tags": [
+      "blog",
+      "rust",
+      "mcp",
+      "atp"
+    ],
+    "title": "静的サイトジェネレータを作った",
+    "utc_time": "2025-06-12T00:00:00Z"
+  }
+]

my-blog/static/js/ask-ai.js

@@ -0,0 +1,295 @@
+/**
+ * Ask AI functionality - Based on original working implementation
+ */
+
+// Global variables for AI functionality
+let aiProfileData = null;
+
+// Original functions from working implementation
+function toggleAskAI() {
+    const panel = document.getElementById('askAiPanel');
+    const isVisible = panel.style.display !== 'none';
+    panel.style.display = isVisible ? 'none' : 'block';
+    
+    if (!isVisible) {
+        checkAuthenticationStatus();
+    }
+}
+
+function checkAuthenticationStatus() {
+    const userSections = document.querySelectorAll('.user-section');
+    const isAuthenticated = userSections.length > 0;
+    
+    if (isAuthenticated) {
+        // User is authenticated - show Ask AI UI
+        document.getElementById('authCheck').style.display = 'none';
+        document.getElementById('chatForm').style.display = 'block';
+        document.getElementById('chatHistory').style.display = 'block';
+        
+        // Show initial greeting if chat history is empty
+        const chatHistory = document.getElementById('chatHistory');
+        if (chatHistory.children.length === 0) {
+            showInitialGreeting();
+        }
+        
+        // Focus on input
+        setTimeout(() => {
+            document.getElementById('aiQuestion').focus();
+        }, 50);
+    } else {
+        // User not authenticated - show auth message
+        document.getElementById('authCheck').style.display = 'block';
+        document.getElementById('chatForm').style.display = 'none';
+        document.getElementById('chatHistory').style.display = 'none';
+    }
+}
+
+function askQuestion() {
+    const question = document.getElementById('aiQuestion').value;
+    if (!question.trim()) return;
+    
+    const askButton = document.getElementById('askButton');
+    askButton.disabled = true;
+    askButton.textContent = 'Posting...';
+    
+    try {
+        // Add user message to chat
+        addUserMessage(question);
+        
+        // Clear input
+        document.getElementById('aiQuestion').value = '';
+        
+        // Show loading
+        showLoadingMessage();
+        
+        // Post question via OAuth app
+        window.dispatchEvent(new CustomEvent('postAIQuestion', {
+            detail: { question: question }
+        }));
+        
+    } catch (error) {
+        console.error('Failed to ask question:', error);
+        showErrorMessage('Sorry, I encountered an error. Please try again.');
+    } finally {
+        askButton.disabled = false;
+        askButton.textContent = 'Ask';
+    }
+}
+
+function addUserMessage(question) {
+    const chatHistory = document.getElementById('chatHistory');
+    const userSection = document.querySelector('.user-section');
+    
+    let userAvatar = '👤';
+    let userDisplay = 'You';
+    let userHandle = 'user';
+    
+    if (userSection) {
+        const avatarImg = userSection.querySelector('.user-avatar');
+        const displayName = userSection.querySelector('.user-display-name');
+        const handle = userSection.querySelector('.user-handle');
+        
+        if (avatarImg && avatarImg.src) {
+            userAvatar = `<img src="${avatarImg.src}" alt="${displayName?.textContent || 'User'}" class="profile-avatar">`;
+        }
+        if (displayName?.textContent) {
+            userDisplay = displayName.textContent;
+        }
+        if (handle?.textContent) {
+            userHandle = handle.textContent.replace('@', '');
+        }
+    }
+    
+    const questionDiv = document.createElement('div');
+    questionDiv.className = 'chat-message user-message comment-style';
+    questionDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${userAvatar}</div>
+            <div class="user-info">
+                <div class="display-name">${userDisplay}</div>
+                <div class="handle">@${userHandle}</div>
+                <div class="timestamp">${new Date().toLocaleString()}</div>
+            </div>
+        </div>
+        <div class="message-content">${question}</div>
+    `;
+    chatHistory.appendChild(questionDiv);
+}
+
+function showLoadingMessage() {
+    const chatHistory = document.getElementById('chatHistory');
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'ai-loading-simple';
+    loadingDiv.innerHTML = `
+        <i class="fas fa-robot"></i>
+        <span>考えています</span>
+        <i class="fas fa-spinner fa-spin"></i>
+    `;
+    chatHistory.appendChild(loadingDiv);
+}
+
+function showErrorMessage(message) {
+    const chatHistory = document.getElementById('chatHistory');
+    removeLoadingMessage();
+    
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'chat-message error-message comment-style';
+    errorDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">⚠️</div>
+            <div class="user-info">
+                <div class="display-name">System</div>
+                <div class="handle">@system</div>
+                <div class="timestamp">${new Date().toLocaleString()}</div>
+            </div>
+        </div>
+        <div class="message-content">${message}</div>
+    `;
+    chatHistory.appendChild(errorDiv);
+}
+
+function removeLoadingMessage() {
+    const loadingMsg = document.querySelector('.ai-loading-simple');
+    if (loadingMsg) {
+        loadingMsg.remove();
+    }
+}
+
+function showInitialGreeting() {
+    if (!aiProfileData) return;
+
+    const chatHistory = document.getElementById('chatHistory');
+    const greetingDiv = document.createElement('div');
+    greetingDiv.className = 'chat-message ai-message comment-style initial-greeting';
+    
+    const avatarElement = aiProfileData.avatar 
+        ? `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName}" class="profile-avatar">`
+        : '🤖';
+    
+    greetingDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${avatarElement}</div>
+            <div class="user-info">
+                <div class="display-name">${aiProfileData.displayName}</div>
+                <div class="handle">@${aiProfileData.handle}</div>
+                <div class="timestamp">${new Date().toLocaleString()}</div>
+            </div>
+        </div>
+        <div class="message-content">
+            Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
+        </div>
+    `;
+    chatHistory.appendChild(greetingDiv);
+}
+
+function updateAskAIButton() {
+    const button = document.getElementById('askAiButton');
+    if (!button) return;
+    
+    // Only update text, never modify the icon
+    if (aiProfileData && aiProfileData.displayName) {
+        const textNode = button.childNodes[2] || button.lastChild;
+        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+            textNode.textContent = aiProfileData.displayName;
+        }
+    }
+}
+
+function handleAIResponse(responseData) {
+    const chatHistory = document.getElementById('chatHistory');
+    removeLoadingMessage();
+    
+    const aiProfile = responseData.aiProfile;
+    if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
+        console.error('AI profile data is missing');
+        return;
+    }
+    
+    const timestamp = new Date(responseData.timestamp || Date.now());
+    const avatarElement = aiProfile.avatar 
+        ? `<img src="${aiProfile.avatar}" alt="${aiProfile.displayName}" class="profile-avatar">`
+        : '🤖';
+    
+    const answerDiv = document.createElement('div');
+    answerDiv.className = 'chat-message ai-message comment-style';
+    answerDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${avatarElement}</div>
+            <div class="user-info">
+                <div class="display-name">${aiProfile.displayName}</div>
+                <div class="handle">@${aiProfile.handle}</div>
+                <div class="timestamp">${timestamp.toLocaleString()}</div>
+            </div>
+        </div>
+        <div class="message-content">${responseData.answer}</div>
+    `;
+    chatHistory.appendChild(answerDiv);
+    
+    // Limit chat history
+    limitChatHistory();
+}
+
+function limitChatHistory() {
+    const chatHistory = document.getElementById('chatHistory');
+    if (chatHistory.children.length > 10) {
+        chatHistory.removeChild(chatHistory.children[0]);
+        if (chatHistory.children.length > 0) {
+            chatHistory.removeChild(chatHistory.children[0]);
+        }
+    }
+}
+
+// Event listeners setup
+function setupAskAIEventListeners() {
+    // Listen for AI profile updates from OAuth app
+    window.addEventListener('aiProfileLoaded', function(event) {
+        aiProfileData = event.detail;
+        console.log('AI profile loaded:', aiProfileData);
+        updateAskAIButton();
+    });
+    
+    // Listen for AI responses
+    window.addEventListener('aiResponseReceived', function(event) {
+        handleAIResponse(event.detail);
+    });
+    
+    // Track IME composition state
+    let isComposing = false;
+    const aiQuestionInput = document.getElementById('aiQuestion');
+    
+    if (aiQuestionInput) {
+        aiQuestionInput.addEventListener('compositionstart', function() {
+            isComposing = true;
+        });
+        
+        aiQuestionInput.addEventListener('compositionend', function() {
+            isComposing = false;
+        });
+    }
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            const panel = document.getElementById('askAiPanel');
+            if (panel) {
+                panel.style.display = 'none';
+            }
+        }
+        
+        // Enter key to send message (only when not composing Japanese input)
+        if (e.key === 'Enter' && e.target.id === 'aiQuestion' && !e.shiftKey && !isComposing) {
+            e.preventDefault();
+            askQuestion();
+        }
+    });
+}
+
+// Initialize Ask AI when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    setupAskAIEventListeners();
+    console.log('Ask AI initialized successfully');
+});
+
+// Global functions for onclick handlers
+window.toggleAskAI = toggleAskAI;
+window.askQuestion = askQuestion;

my-blog/static/js/theme.js

@@ -0,0 +1,94 @@
+/**
+ * Theme and visual effects - Pure CSS animations, no jQuery
+ */
+class Theme {
+    constructor() {
+        this.init();
+    }
+
+    init() {
+        this.setupParticleColors();
+        this.setupLogoAnimations();
+    }
+
+    setupParticleColors() {
+        // Dynamic particle colors based on theme
+        const style = document.createElement('style');
+        style.textContent = `
+            /* Dynamic particle colors based on theme */
+            .likeButton .particleLayer circle:nth-child(1),
+            .likeButton .particleLayer circle:nth-child(2) {
+                fill: var(--particle-color-1) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(3),
+            .likeButton .particleLayer circle:nth-child(4) {
+                fill: var(--particle-color-2) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(5),
+            .likeButton .particleLayer circle:nth-child(6),
+            .likeButton .particleLayer circle:nth-child(7) {
+                fill: var(--particle-color-3) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(8),
+            .likeButton .particleLayer circle:nth-child(9),
+            .likeButton .particleLayer circle:nth-child(10) {
+                fill: var(--particle-color-4) !important;
+            }
+            
+            .likeButton .particleLayer circle:nth-child(11),
+            .likeButton .particleLayer circle:nth-child(12),
+            .likeButton .particleLayer circle:nth-child(13),
+            .likeButton .particleLayer circle:nth-child(14) {
+                fill: var(--particle-color-5) !important;
+            }
+            
+            /* Reset initial animations but allow hover */
+            .likeButton .syui {
+                animation: none;
+            }
+            
+            .likeButton .particleLayer {
+                animation: none; 
+            }
+            
+            .likeButton .explosion {
+                animation: none;
+            }
+            
+            /* Enable hover animations from package */
+            .likeButton:hover .syui,
+            .likeButton:hover path.syui {
+                animation: syuiDeluxeAnime 400ms forwards !important;
+            }
+            
+            .likeButton:hover .particleLayer {
+                animation: particleLayerAnime 800ms forwards !important;
+            }
+            
+            .likeButton:hover .explosion {
+                animation: explosionAnime 800ms forwards !important;
+            }
+            
+            /* Logo positioning */
+            .logo .likeButton {
+                background: transparent !important;
+                display: block;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    setupLogoAnimations() {
+        // Pure CSS animations are handled by the svg-animation-package.css
+        // This method is reserved for any future JavaScript-based enhancements
+        console.log('Logo animations initialized (CSS-based)');
+    }
+}
+
+// Initialize theme when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new Theme();
+});

my-blog/static/pkg/font-awesome/LICENSE.txt

@@ -0,0 +1,165 @@
+Fonticons, Inc. (https://fontawesome.com)
+
+--------------------------------------------------------------------------------
+
+Font Awesome Free License
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+--------------------------------------------------------------------------------
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+
+The Font Awesome Free download is licensed under a Creative Commons
+Attribution 4.0 International License and applies to all icons packaged
+as SVG and JS file types.
+
+--------------------------------------------------------------------------------
+
+# Fonts: SIL OFL 1.1 License
+
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
+with Reserved Font Name: "Font Awesome".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+Copyright 2024 Fonticons, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Attribution
+
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

my-blog/static/pkg/font-awesome/css/regular.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}

my-blog/static/pkg/font-awesome/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

my-blog/static/pkg/icomoon/style.css

@@ -0,0 +1,99 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?mxezzh');
+  src:  url('fonts/icomoon.eot?mxezzh#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?mxezzh') format('truetype'),
+    url('fonts/icomoon.woff?mxezzh') format('woff'),
+    url('fonts/icomoon.svg?mxezzh#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-git:before {
+  content: "\e901";
+}
+.icon-cube:before {
+  content: "\e900";
+}
+.icon-game:before {
+  content: "\e9d5";
+}
+.icon-card:before {
+  content: "\e9d6";
+}
+.icon-book:before {
+  content: "\e9d7";
+}
+.icon-git1:before {
+  content: "\e9d3";
+}
+.icon-moji_a:before {
+  content: "\e9c3";
+}
+.icon-archlinux:before {
+  content: "\e9c4";
+}
+.icon-archlinuxjp:before {
+  content: "\e9c5";
+}
+.icon-syui:before {
+  content: "\e9c6";
+}
+.icon-phoenix-power:before {
+  content: "\e9c7";
+}
+.icon-phoenix-world:before {
+  content: "\e9c8";
+}
+.icon-power:before {
+  content: "\e9c9";
+}
+.icon-phoenix:before {
+  content: "\e9ca";
+}
+.icon-honeycomb:before {
+  content: "\e9cb";
+}
+.icon-ai:before {
+  content: "\e9cc";
+}
+.icon-robot:before {
+  content: "\e9cd";
+}
+.icon-sandar:before {
+  content: "\e9ce";
+}
+.icon-moon:before {
+  content: "\e9cf";
+}
+.icon-home:before {
+  content: "\e9d0";
+}
+.icon-cloud:before {
+  content: "\e9d1";
+}
+.icon-api:before {
+  content: "\e9d2";
+}
+.icon-aibadge:before {
+  content: "\ebf8";
+}
+.icon-aiterm:before {
+  content: "\ebf7";
+}

my-blog/static/syui.svg

@@ -0,0 +1,24 @@
+<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
+  <circle class="explosion" r="150" cx="250" cy="250"></circle>
+  <g class="particleLayer">
+    <circle fill="#ef454aba" cx="130" cy="126.5" r="12.5"/>
+    <circle fill="#ef454acc" cx="411" cy="313.5" r="12.5"/>
+    <circle fill="#ef454aba" cx="279" cy="86.5" r="12.5"/>
+    <circle fill="#ef454aba" cx="155" cy="390.5" r="12.5"/>
+    <circle fill="#ef454aba" cx="89" cy="292.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="414" cy="282.5" r="10.5"/>
+    <circle fill="#ef454a91" cx="115" cy="149.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="250" cy="80.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="78" cy="261.5" r="10.5"/>
+    <circle fill="#ef454a91" cx="182" cy="402.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="401.5" cy="166" r="13"/>
+    <circle fill="#ef454aba" cx="379" cy="141.5" r="10.5"/>
+    <circle fill="#ef454a91" cx="327" cy="397.5" r="10.5"/>
+    <circle fill="#ef454aba" cx="296" cy="392.5" r="10.5"/>
+  </g>
+<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
+
+<path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
+</g>
+
+</svg>

my-blog/templates/base.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="{{ config.language }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{{ config.title }}{% endblock %}</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/svg-animation-package.css">
+    <link rel="stylesheet" href="/pkg/icomoon/style.css">
+    <link rel="stylesheet" href="/pkg/font-awesome/css/all.min.css">
+    
+    {% block head %}{% endblock %}
+</head>
+<body>
+    <div class="container">
+        <header class="main-header">
+            <div class="header-content">
+                <h1><a href="/" class="site-title">{{ config.title }}</a></h1>
+                <div class="logo">
+                    <a href="/">
+                        <svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton">
+                            <circle class="explosion" r="150" cx="250" cy="250"></circle>
+                            <g class="particleLayer">
+                                <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"></circle>
+                                <circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"></circle>
+                                <circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"></circle>
+                                <circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"></circle>
+                                <circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"></circle>
+                                <circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"></circle>
+                                <circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"></circle>
+                                <circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"></circle>
+                                <circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"></circle>
+                                <circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"></circle>
+                                <circle fill="#CC8EF5" cx="401.5" cy="166" r="13"></circle>
+                                <circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"></circle>
+                                <circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"></circle>
+                                <circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"></circle>
+                            </g>
+                            <g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
+                                <path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"></path>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <div class="header-actions">
+                    <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
+                        <span class="ai-icon icon-ai"></span>
+                        ai
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Ask AI Panel -->
+        <div class="ask-ai-panel" id="askAiPanel" style="display: none;">
+            <div class="ask-ai-content">
+                <div id="authCheck" class="auth-check">
+                    <p>🔒 Please login with ATProto to use Ask AI feature</p>
+                </div>
+                
+                <div id="chatForm" class="ask-ai-form" style="display: none;">
+                    <input type="text" id="aiQuestion" placeholder="What would you like to know?" />
+                    <button onclick="askQuestion()" id="askButton">Ask</button>
+                </div>
+                
+                <div id="chatHistory" class="chat-history" style="display: none;"></div>
+            </div>
+        </div>
+        
+        <main class="main-content">
+            {% block content %}{% endblock %}
+        </main>
+
+        {% block sidebar %}{% endblock %}
+    </div>
+    
+    <footer class="main-footer">
+        <div class="footer-social">
+            <a href="https://syu.is/syui" target="_blank"><i class="fab fa-bluesky"></i></a>
+            <a href="https://git.syui.ai/ai" target="_blank"><span class="icon-ai"></span></a>
+            <a href="https://git.syui.ai/syui" target="_blank"><span class="icon-git"></span></a>
+        </div>
+        <p>© {{ config.author }}</p>
+    </footer>
+
+    <script src="/js/ask-ai.js"></script>
+    <script src="/js/theme.js"></script>
+    
+    {% include "oauth-assets.html" %}
+</body>
+</html>

my-blog/templates/index.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="timeline-container">
+    
+    <div class="timeline-feed">
+        {% for post in posts %}
+        <article class="timeline-post">
+            <div class="post-header">
+                <div class="post-meta">
+                    <time class="post-date">{{ post.date }}</time>
+                    {% if post.language %}
+                    <span class="post-lang">{{ post.language }}</span>
+                    {% endif %}
+                </div>
+            </div>
+            
+            <div class="post-content">
+                <h3 class="post-title">
+                    <a href="{{ post.url }}">{{ post.title }}</a>
+                </h3>
+                
+            </div>
+        </article>
+        {% endfor %}
+    </div>
+
+    <!-- OAuth Comment System -->
+    <section class="comment-section">
+        <div id="comment-atproto"></div>
+    </section>
+    
+    {% if posts|length == 0 %}
+    <div class="empty-state">
+        <p>No posts yet. Start writing!</p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}

my-blog/templates/partials/oauth-widget.html

@@ -0,0 +1,71 @@
+<!-- OAuth authentication widget for ailog -->
+<div id="oauth-widget">
+  <div id="status" class="status">
+    Login with your Bluesky account
+  </div>
+  
+  <!-- Login form -->
+  <div id="login-form">
+    <input type="text" id="handle-input" placeholder="Enter your handle (e.g., user.bsky.social)" style="width: 300px; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;">
+    <br>
+    <button id="login-btn">🦋 Login with Bluesky</button>
+  </div>
+  
+  <!-- Authenticated state -->
+  <div id="authenticated-state" style="display: none;">
+    <div id="user-info"></div>
+    <button id="logout-btn">Logout</button>
+    <button id="test-profile-btn">Get Profile</button>
+  </div>
+  
+  <div id="console-log" class="log"></div>
+</div>
+
+<script src="/oauth-widget-simple.js"></script>
+
+<style>
+.status {
+  margin: 20px 0;
+  padding: 15px;
+  border-radius: 8px;
+  background: #f5f5f5;
+}
+.user-info {
+  background: #e8f5e8;
+  border: 1px solid #4caf50;
+}
+.error {
+  background: #ffeaea;
+  border: 1px solid #f44336;
+  color: #d32f2f;
+}
+#oauth-widget button {
+  background: #1185fe;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  margin: 10px;
+}
+#oauth-widget button:hover {
+  background: #0d6efd;
+}
+#oauth-widget button:disabled {
+  background: #6c757d;
+  cursor: not-allowed;
+}
+.log {
+  text-align: left;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  padding: 15px;
+  margin: 20px 0;
+  max-height: 300px;
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: 14px;
+}
+</style>

my-blog/templates/post-complex.html

@@ -0,0 +1,373 @@
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="article-container">
+    <article class="article-content">
+        <header class="article-header">
+            <h1 class="article-title">{{ post.title }}</h1>
+            <div class="article-meta">
+                <time class="article-date">{{ post.date }}</time>
+                {% if post.language %}
+                <span class="article-lang">{{ post.language }}</span>
+                {% endif %}
+            </div>
+            <div class="article-actions">
+                {% if post.markdown_url %}
+                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
+                    .md
+                </a>
+                {% endif %}
+                {% if post.translation_url %}
+                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
+                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
+                </a>
+                {% endif %}
+            </div>
+        </header>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <!-- Comment Section -->
+        <section class="comment-section">
+            <div class="comment-container">
+                <h3>Comments</h3>
+                
+                <!-- ATProto Auth Widget Container -->
+                <div id="atproto-auth-widget" class="comment-auth"></div>
+                
+                <div id="commentForm" class="comment-form" style="display: none;">
+                    <textarea id="commentText" placeholder="Share your thoughts..." rows="4"></textarea>
+                    <button onclick="submitComment()" class="submit-btn">Post Comment</button>
+                </div>
+                
+                <div id="commentsList" class="comments-list">
+                    <!-- Comments will be loaded here -->
+                </div>
+            </div>
+        </section>
+    </article>
+    
+    <aside class="article-sidebar">
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+    </aside>
+</div>
+{% endblock %}
+
+{% block sidebar %}
+<!-- Include ATProto Libraries via script tags (more reliable than dynamic imports) -->
+<script src="https://cdn.jsdelivr.net/npm/@atproto/oauth-client-browser@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@atproto/api@latest/dist/index.js"></script>
+
+<!-- Fallback: Try multiple CDNs -->
+<script>
+console.log('Checking ATProto library availability...');
+
+// Check if libraries loaded successfully
+if (typeof ATProto === 'undefined' && typeof window.ATProto === 'undefined') {
+    console.log('Primary CDN failed, trying fallback...');
+    
+    // Create fallback script elements
+    const fallbackScripts = [
+        'https://unpkg.com/@atproto/oauth-client-browser@latest/dist/index.js',
+        'https://esm.sh/@atproto/oauth-client-browser',
+        'https://cdn.skypack.dev/@atproto/oauth-client-browser'
+    ];
+    
+    // Load fallback scripts sequentially
+    let scriptIndex = 0;
+    function loadNextScript() {
+        if (scriptIndex < fallbackScripts.length) {
+            const script = document.createElement('script');
+            script.src = fallbackScripts[scriptIndex];
+            script.onload = () => {
+                console.log(`Loaded from fallback CDN: ${fallbackScripts[scriptIndex]}`);
+                window.atprotoLibrariesReady = true;
+            };
+            script.onerror = () => {
+                console.log(`Failed to load from: ${fallbackScripts[scriptIndex]}`);
+                scriptIndex++;
+                loadNextScript();
+            };
+            document.head.appendChild(script);
+        } else {
+            console.error('All CDN fallbacks failed');
+            window.atprotoLibrariesReady = false;
+        }
+    }
+    
+    loadNextScript();
+} else {
+    console.log('✅ ATProto libraries loaded from primary CDN');
+    window.atprotoLibrariesReady = true;
+}
+</script>
+
+<!-- Simple ATProto Widget (no external dependency) -->
+<link rel="stylesheet" href="/atproto-auth-widget/dist/atproto-auth.min.css">
+
+<script>
+// Initialize auth widget
+let authWidget = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    generateTableOfContents();
+    initializeAuthWidget();
+    loadComments();
+});
+
+function generateTableOfContents() {
+    const tocContainer = document.getElementById('toc-content');
+    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
+    
+    if (headings.length === 0) {
+        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
+        return;
+    }
+    
+    const tocList = document.createElement('ul');
+    tocList.className = 'toc-list';
+    
+    headings.forEach((heading, index) => {
+        const id = `heading-${index}`;
+        heading.id = id;
+        
+        const listItem = document.createElement('li');
+        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${id}`;
+        link.textContent = heading.textContent;
+        link.className = 'toc-link';
+        
+        // Smooth scroll behavior
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            heading.scrollIntoView({ behavior: 'smooth' });
+        });
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocContainer.appendChild(tocList);
+}
+
+// Initialize ATProto Auth Widget
+async function initializeAuthWidget() {
+    try {
+        // Check WebCrypto API availability
+        console.log('WebCrypto check:', {
+            available: !!window.crypto && !!window.crypto.subtle,
+            secureContext: window.isSecureContext,
+            protocol: window.location.protocol,
+            hostname: window.location.hostname
+        });
+        
+        if (!window.crypto || !window.crypto.subtle) {
+            throw new Error('WebCrypto API is not available. This requires HTTPS or localhost.');
+        }
+        
+        if (!window.isSecureContext) {
+            console.warn('Not in secure context - WebCrypto may not work properly');
+        }
+        
+        // Simplified approach: Show manual OAuth form
+        console.log('Using simplified OAuth approach...');
+        showSimpleOAuthForm();
+            // Fallback to widget initialization
+            authWidget = await window.initATProtoWidget('#atproto-auth-widget', {
+                clientId: clientId,
+            onLogin: (session) => {
+                console.log('User logged in:', session.handle);
+                document.getElementById('commentForm').style.display = 'block';
+            },
+            onLogout: () => {
+                console.log('User logged out');
+                document.getElementById('commentForm').style.display = 'none';
+            },
+            onError: (error) => {
+                console.error('ATProto Auth Error:', error);
+                // Show user-friendly error message
+                const authContainer = document.getElementById('atproto-auth-widget');
+                if (authContainer) {
+                    let errorMessage = 'Authentication service is temporarily unavailable.';
+                    let suggestion = 'Please try refreshing the page.';
+                    
+                    if (error.message && error.message.includes('WebCrypto')) {
+                        errorMessage = 'This feature requires a secure HTTPS connection.';
+                        suggestion = 'Please ensure you are accessing via https://log.syui.ai';
+                    }
+                    
+                    authContainer.innerHTML = `
+                        <div class="atproto-auth__fallback">
+                            <p>${errorMessage}</p>
+                            <p>${suggestion}</p>
+                            <details style="margin-top: 10px; font-size: 0.8em; color: #666;">
+                                <summary>Technical details</summary>
+                                <pre>${error.message || 'Unknown error'}</pre>
+                            </details>
+                        </div>
+                    `;
+                }
+            },
+            theme: 'default'
+            });
+        } else if (typeof window.ATProtoAuthWidget === 'function') {
+            // Fallback to direct widget initialization
+            authWidget = new window.ATProtoAuthWidget({
+                containerSelector: '#atproto-auth-widget',
+                clientId: clientId,
+                onLogin: (session) => {
+                    console.log('User logged in:', session.handle);
+                    document.getElementById('commentForm').style.display = 'block';
+                },
+                onLogout: () => {
+                    console.log('User logged out');
+                    document.getElementById('commentForm').style.display = 'none';
+                },
+                onError: (error) => {
+                    console.error('ATProto Auth Error:', error);
+                    const authContainer = document.getElementById('atproto-auth-widget');
+                    if (authContainer) {
+                        authContainer.innerHTML = `
+                            <div class="atproto-auth__fallback">
+                                <p>Authentication service is temporarily unavailable.</p>
+                                <p>Please try refreshing the page.</p>
+                            </div>
+                        `;
+                    }
+                },
+                theme: 'default'
+            });
+            await authWidget.init();
+        } else {
+            throw new Error('ATProto widget not available');
+        }
+    } catch (error) {
+        console.error('Failed to initialize auth widget:', error);
+        // Show fallback UI
+        const authContainer = document.getElementById('atproto-auth-widget');
+        if (authContainer) {
+            authContainer.innerHTML = `
+                <div class="atproto-auth__fallback">
+                    <p>Authentication widget failed to load.</p>
+                    <p>Please check your internet connection and refresh the page.</p>
+                </div>
+            `;
+        }
+    }
+}
+
+async function submitComment() {
+    const commentText = document.getElementById('commentText').value.trim();
+    if (!commentText || !authWidget.isLoggedIn()) {
+        alert('Please login and enter a comment');
+        return;
+    }
+    
+    try {
+        const postSlug = '{{ post.slug }}';
+        const postUrl = window.location.href;
+        const createdAt = new Date().toISOString();
+        
+        // Create comment record using the auth widget
+        const response = await authWidget.createRecord('ai.log.comment', {
+            $type: 'ai.log.comment',
+            text: commentText,
+            post_slug: postSlug,
+            post_url: postUrl,
+            createdAt: createdAt
+        });
+        
+        console.log('Comment posted:', response);
+        document.getElementById('commentText').value = '';
+        loadComments();
+    } catch (error) {
+        console.error('Comment submission failed:', error);
+        alert('Failed to post comment: ' + error.message);
+    }
+}
+
+function showAuthenticatedState(session) {
+    const authContainer = document.getElementById('atproto-auth-widget');
+    const agent = new window.ATProtoAgent(session);
+    
+    authContainer.innerHTML = `
+        <div class="atproto-auth__authenticated">
+            <p>✅ Authenticated as: <strong>${session.did}</strong></p>
+            <button id="logout-btn" class="atproto-auth__button">Logout</button>
+        </div>
+    `;
+    
+    document.getElementById('logout-btn').onclick = async () => {
+        await session.signOut();
+        window.location.reload();
+    };
+    
+    // Show comment form
+    document.getElementById('commentForm').style.display = 'block';
+    window.currentSession = session;
+    window.currentAgent = agent;
+}
+
+function showLoginForm(oauthClient) {
+    const authContainer = document.getElementById('atproto-auth-widget');
+    
+    authContainer.innerHTML = `
+        <div class="atproto-auth__login">
+            <h4>Login with ATProto</h4>
+            <input type="text" id="handle-input" placeholder="user.bsky.social" />
+            <button id="login-btn" class="atproto-auth__button">Connect</button>
+        </div>
+    `;
+    
+    document.getElementById('login-btn').onclick = async () => {
+        const handle = document.getElementById('handle-input').value.trim();
+        if (!handle) {
+            alert('Please enter your handle');
+            return;
+        }
+        
+        try {
+            const url = await oauthClient.authorize(handle);
+            window.open(url, '_self', 'noopener');
+        } catch (error) {
+            console.error('OAuth authorization failed:', error);
+            alert('Authentication failed: ' + error.message);
+        }
+    };
+    
+    // Enter key support
+    document.getElementById('handle-input').onkeypress = (e) => {
+        if (e.key === 'Enter') {
+            document.getElementById('login-btn').click();
+        }
+    };
+}
+
+async function loadComments() {
+    try {
+        const commentsList = document.getElementById('commentsList');
+        commentsList.innerHTML = '<p class="loading">Loading comments from ATProto network...</p>';
+        
+        // In a real implementation, you would query an aggregation service
+        // For demo, show empty state
+        setTimeout(() => {
+            commentsList.innerHTML = '<p class="no-comments">Comments will appear here when posted via ATProto.</p>';
+        }, 1000);
+    } catch (error) {
+        console.error('Failed to load comments:', error);
+        document.getElementById('commentsList').innerHTML = '<p class="error">Failed to load comments</p>';
+    }
+}
+</script>
+{% endblock %}

my-blog/templates/post-simple.html

@@ -0,0 +1,196 @@
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="article-container">
+    <article class="article-content">
+        <header class="article-header">
+            <h1 class="article-title">{{ post.title }}</h1>
+            <div class="article-meta">
+                <time class="article-date">{{ post.date }}</time>
+                {% if post.language %}
+                <span class="article-lang">{{ post.language }}</span>
+                {% endif %}
+            </div>
+            <div class="article-actions">
+                {% if post.markdown_url %}
+                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
+                    .md
+                </a>
+                {% endif %}
+                {% if post.translation_url %}
+                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
+                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
+                </a>
+                {% endif %}
+            </div>
+        </header>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <!-- Simple Comment Section -->
+        <section class="comment-section">
+            <div class="comment-container">
+                <h3>Comments</h3>
+                
+                <!-- Simple OAuth Button -->
+                <div class="simple-oauth">
+                    <p>📝 To comment, authenticate with Bluesky:</p>
+                    <button id="bluesky-auth" class="oauth-button">
+                        🦋 Login with Bluesky
+                    </button>
+                    <p class="oauth-note">
+                        <small>After authentication, you can post comments that will be stored in your ATProto PDS.</small>
+                    </p>
+                </div>
+                
+                <div id="comments-list" class="comments-list">
+                    <p class="no-comments">Comments will appear here when posted via ATProto.</p>
+                </div>
+            </div>
+        </section>
+    </article>
+    
+    <aside class="article-sidebar">
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+    </aside>
+</div>
+{% endblock %}
+
+{% block sidebar %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    generateTableOfContents();
+    initializeSimpleAuth();
+});
+
+function generateTableOfContents() {
+    const tocContainer = document.getElementById('toc-content');
+    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
+    
+    if (headings.length === 0) {
+        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
+        return;
+    }
+    
+    const tocList = document.createElement('ul');
+    tocList.className = 'toc-list';
+    
+    headings.forEach((heading, index) => {
+        const id = `heading-${index}`;
+        heading.id = id;
+        
+        const listItem = document.createElement('li');
+        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${id}`;
+        link.textContent = heading.textContent;
+        link.className = 'toc-link';
+        
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            heading.scrollIntoView({ behavior: 'smooth' });
+        });
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocContainer.appendChild(tocList);
+}
+
+function initializeSimpleAuth() {
+    const authButton = document.getElementById('bluesky-auth');
+    
+    authButton.addEventListener('click', function() {
+        // Simple approach: Direct redirect to Bluesky OAuth
+        const isProduction = window.location.hostname === 'log.syui.ai';
+        const clientId = isProduction 
+            ? 'https://log.syui.ai/client-metadata.json'
+            : window.location.origin + '/client-metadata.json';
+        
+        const authUrl = `https://bsky.social/oauth/authorize?` +
+            `client_id=${encodeURIComponent(clientId)}&` +
+            `redirect_uri=${encodeURIComponent(window.location.href)}&` +
+            `response_type=code&` +
+            `scope=atproto%20transition:generic&` +
+            `state=demo-state`;
+        
+        console.log('Redirecting to:', authUrl);
+        
+        // Open in new tab for now (safer for testing)
+        window.open(authUrl, '_blank');
+        
+        // Show status message
+        authButton.innerHTML = '✅ Check the new tab for authentication';
+        authButton.disabled = true;
+    });
+    
+    // Check if we're returning from OAuth
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('code')) {
+        console.log('OAuth callback detected:', urlParams.get('code'));
+        document.querySelector('.simple-oauth').innerHTML = `
+            <div class="oauth-success">
+                ✅ OAuth callback received!<br>
+                <small>Code: ${urlParams.get('code')}</small><br>
+                <small>In a full implementation, this would exchange the code for tokens.</small>
+            </div>
+        `;
+    }
+}
+</script>
+
+<style>
+.simple-oauth {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 20px 0;
+    text-align: center;
+}
+
+.oauth-button {
+    background: #1185fe;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 10px 0;
+}
+
+.oauth-button:hover {
+    background: #0d6efd;
+}
+
+.oauth-button:disabled {
+    background: #6c757d;
+    cursor: not-allowed;
+}
+
+.oauth-note {
+    color: #6c757d;
+    font-style: italic;
+}
+
+.oauth-success {
+    background: #d1edff;
+    border: 1px solid #b6d7ff;
+    border-radius: 4px;
+    padding: 15px;
+    color: #0c5460;
+}
+</style>
+{% endblock %}

my-blog/templates/post.html

@@ -0,0 +1,93 @@
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="article-container">
+    <article class="article-content">
+        <header class="article-header">
+            <h1 class="article-title">{{ post.title }}</h1>
+            <div class="article-meta">
+                <time class="article-date">{{ post.date }}</time>
+                {% if post.language %}
+                <span class="article-lang">{{ post.language }}</span>
+                {% endif %}
+            </div>
+            <div class="article-actions">
+                {% if post.markdown_url %}
+                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
+                    .md
+                </a>
+                {% endif %}
+                {% if post.translation_url %}
+                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
+                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
+                </a>
+                {% endif %}
+            </div>
+        </header>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <div id="comment-atproto"></div>
+    </article>
+    
+    <aside class="article-sidebar">
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+    </aside>
+</div>
+
+<script>
+// Generate table of contents
+function generateTableOfContents() {
+    const tocContainer = document.getElementById('toc-content');
+    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
+    
+    if (headings.length === 0) {
+        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
+        return;
+    }
+    
+    const tocList = document.createElement('ul');
+    tocList.className = 'toc-list';
+    
+    headings.forEach((heading, index) => {
+        const id = `heading-${index}`;
+        heading.id = id;
+        
+        const listItem = document.createElement('li');
+        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${id}`;
+        link.textContent = heading.textContent;
+        link.className = 'toc-link';
+        
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            heading.scrollIntoView({ behavior: 'smooth' });
+        });
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocContainer.appendChild(tocList);
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+    generateTableOfContents();
+});
+</script>
+{% endblock %}
+
+{% block sidebar %}
+{% endblock %}

oauth/.env.production

@@ -1,13 +1,21 @@
 # Production environment variables
-VITE_APP_HOST=https://log.syui.ai
-VITE_OAUTH_CLIENT_ID=https://log.syui.ai/client-metadata.json
-VITE_OAUTH_REDIRECT_URI=https://log.syui.ai/oauth/callback
-VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn
+VITE_APP_HOST=https://syui.ai
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
 
-# Collection names for OAuth app
-VITE_COLLECTION_COMMENT=ai.syui.log
-VITE_COLLECTION_USER=ai.syui.log.user
+# Handle-based Configuration (DIDs resolved at runtime)
+VITE_ATPROTO_PDS=syu.is
+VITE_ADMIN_HANDLE=ai.syui.ai
+VITE_AI_HANDLE=ai.syui.ai
+VITE_OAUTH_COLLECTION=ai.syui.log
+VITE_ATPROTO_WEB_URL=https://bsky.app
+VITE_ATPROTO_HANDLE_LIST=["syui.syui.ai","ai.syui.ai","ai.ai"]
+
+# AI Configuration
+VITE_AI_ENABLED=true
+VITE_AI_ASK_AI=true
+VITE_AI_PROVIDER=ollama
+VITE_AI_MODEL=gemma3:1b
+VITE_AI_HOST=https://ollama.syui.ai
+VITE_AI_SYSTEM_PROMPT="あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
 
-# Collection names for ailog (backward compatibility)
-AILOG_COLLECTION_COMMENT=ai.syui.log
-AILOG_COLLECTION_USER=ai.syui.log.user

oauth/package.json

@@ -1,13 +1,15 @@
 {
   "name": "aicard",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "vite --mode development",
     "build": "vite build --mode production",
     "build:dev": "vite build --mode development",
     "build:local": "VITE_APP_HOST=http://localhost:4173 vite build --mode development",
-    "preview": "vite preview"
+    "preview": "npm run test:console && vite preview",
+    "test": "vitest",
+    "test:console": "node -r esbuild-register src/tests/console-test.ts"
   },
   "dependencies": {
     "@atproto/api": "^0.15.12",
@@ -26,6 +28,9 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0",
+    "esbuild": "^0.19.10",
+    "esbuild-register": "^3.5.0"
   }
 }

oauth/public/client-metadata.json

@@ -1,13 +1,13 @@
 {
-  "client_id": "https://log.syui.ai/client-metadata.json",
-  "client_name": "ai.card",
-  "client_uri": "https://log.syui.ai",
-  "logo_uri": "https://log.syui.ai/favicon.ico",
-  "tos_uri": "https://log.syui.ai/terms",
-  "policy_uri": "https://log.syui.ai/privacy",
+  "client_id": "https://syui.ai/client-metadata.json",
+  "client_name": "ai.log",
+  "client_uri": "https://syui.ai",
+  "logo_uri": "https://syui.ai/favicon.ico",
+  "tos_uri": "https://syui.ai/terms",
+  "policy_uri": "https://syui.ai/privacy",
   "redirect_uris": [
-    "https://log.syui.ai/oauth/callback",
-    "https://log.syui.ai/"
+    "https://syui.ai/oauth/callback",
+    "https://syui.ai/"
   ],
   "response_types": [
     "code"

oauth/src/App.css

@@ -1,7 +1,16 @@
+/* Theme Colors */
+:root {
+  --theme-color: #FF4500;
+  --white: #fff;
+  --light-gray: #aaa;
+  --dark-gray: #666;
+  --background: #fff;
+}
+
 .app {
   min-height: 100vh;
-  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
-  color: #333333;
+  background: linear-gradient(180deg, #f8f9fa 0%, var(--background) 100%);
+  color: var(--dark-gray);
 }
 
 .app-header {
@@ -41,15 +50,15 @@
 }
 
 .nav-button.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: 1px solid #667eea;
-  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
+  background: var(--theme-color);
+  color: var(--white);
+  border: 1px solid var(--theme-color);
+  box-shadow: 0 4px 16px rgba(255, 69, 0, 0.4);
 }
 
 .nav-button.active:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+  box-shadow: 0 6px 20px rgba(255, 69, 0, 0.5);
 }
 
 .app-header h1 {
@@ -99,9 +108,9 @@
 }
 
 .login-button {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: 1px solid #667eea;
+  background: var(--theme-color);
+  color: var(--white);
+  border: 1px solid var(--theme-color);
 }
 
 .backup-button {
@@ -124,7 +133,7 @@
 
 .login-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .backup-button:hover {
@@ -153,11 +162,76 @@
 }
 
 .app-main {
-  max-width: 1200px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 40px 20px;
 }
 
+@media (max-width: 1000px) {
+  * {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  
+  .app .app-main {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0px !important;
+  }
+  
+  .comment-item {
+    padding: 0px !important;
+    margin: 0px !important;
+  }
+  
+  .auth-section {
+    padding: 0px !important;
+  }
+  
+  .comments-list {
+    padding: 0px !important;
+  }
+  
+  .comment-section {
+				padding: 30px 0 !important;
+				margin: 0px !important;
+  }
+  
+  .comment-content {
+    padding: 10px !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    white-space: pre-wrap !important;
+  }
+  
+  .comment-header {
+    padding: 10px !important;
+  }
+  
+  /* Fix overflow on article pages */
+  article.article-content {
+    overflow-x: hidden !important;
+  }
+  
+  /* Ensure full width on mobile */
+  .app {
+    max-width: 100vw !important;
+    overflow-x: hidden !important;
+  }
+  
+  /* Fix button overflow */
+  button {
+    max-width: 100%;
+    white-space: normal;
+  }
+  
+  /* Fix comment-meta URI overflow */
+  .comment-meta {
+    word-break: break-all !important;
+    overflow-wrap: break-word !important;
+  }
+}
+
 .gacha-section {
   text-align: center;
   margin-bottom: 60px;
@@ -255,9 +329,18 @@
 .comment-section {
   max-width: 800px;
   margin: 0 auto;
-  padding: 20px;
+  /* padding: 20px; - removed to avoid double padding */
 }
 
+@media (max-width: 768px) {
+  .comment-section {
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+
 .auth-section {
   background: #f8f9fa;
   border: 1px solid #e9ecef;
@@ -267,9 +350,41 @@
   text-align: center;
 }
 
+.auth-section.search-bar-layout {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  gap: 10px;
+}
+
+.auth-section.search-bar-layout .handle-input {
+  flex: 1;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 16px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px 0 0 6px;
+  background: white;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.auth-section.search-bar-layout .handle-input:focus {
+  border-color: var(--theme-color);
+}
+
+.auth-section.search-bar-layout .atproto-button {
+  margin: 0;
+  padding: 10px 20px;
+  border-radius: 0 6px 6px 0;
+  min-width: 50px;
+  font-weight: bold;
+  height: auto;
+}
+
 .atproto-button {
-  background: #1185fe;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 12px 24px;
   border-radius: 6px;
@@ -281,9 +396,9 @@
 }
 
 .atproto-button:hover {
-  background: #0d6efd;
+  filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(17, 133, 254, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .username-input-section {
@@ -300,6 +415,30 @@
   text-align: center;
 }
 
+/* Override for search bar layout */
+.search-bar-layout .handle-input {
+  width: auto;
+  text-align: left;
+}
+
+/* Mobile responsive for search bar */
+@media (max-width: 480px) {
+  .auth-section.search-bar-layout {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .auth-section.search-bar-layout .handle-input {
+    width: 100%;
+    border-radius: 6px;
+  }
+  
+  .auth-section.search-bar-layout .atproto-button {
+    width: 100%;
+    border-radius: 6px;
+  }
+}
+
 .auth-hint {
   color: #6c757d;
   font-size: 14px;
@@ -407,8 +546,8 @@
 }
 
 .post-button {
-  background: #28a745;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 10px 20px;
   border-radius: 6px;
@@ -419,9 +558,9 @@
 }
 
 .post-button:hover:not(:disabled) {
-  background: #218838;
+  filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .post-button:disabled {
@@ -432,9 +571,8 @@
 }
 
 .comments-list {
-  border: 1px solid #ddd;
   border-radius: 8px;
-  padding: 20px;
+  padding: 0px;
 }
 
 .comments-header {
@@ -455,8 +593,8 @@
 }
 
 .comments-toggle-button {
-  background: #1185fe;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
@@ -467,9 +605,9 @@
 }
 
 .comments-toggle-button:hover {
-  background: #0d6efd;
+  filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(17, 133, 254, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .comment-item {
@@ -545,6 +683,8 @@
   line-height: 1.5;
   color: #333;
   margin-bottom: 10px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 .comment-meta {
@@ -714,8 +854,8 @@
 
 /* JSON Display Styles */
 .json-button {
-  background: #4caf50;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 4px 8px;
   border-radius: 4px;
@@ -726,7 +866,7 @@
 }
 
 .json-button:hover {
-  background: #45a049;
+  filter: brightness(1.1);
   transform: scale(1.05);
 }
 
@@ -760,3 +900,89 @@
   max-height: 400px;
   overflow-y: auto;
 }
+
+/* Tab Navigation */
+.tab-navigation {
+  display: flex;
+  border-bottom: 2px solid #e1e5e9;
+  margin-bottom: 20px;
+}
+
+.tab-button {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #656d76;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.tab-button:hover {
+  color: var(--theme-color);
+  background: #f6f8fa;
+}
+
+.tab-button.active {
+  color: var(--theme-color);
+  border-bottom-color: var(--theme-color);
+  background: #f6f8fa;
+}
+
+
+.chat-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chat-type-button {
+  background: var(--theme-color);
+  color: var(--white);
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: default;
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 4px;
+}
+
+.chat-type-text {
+  font-size: 16px;
+  margin-left: 4px;
+}
+
+
+.chat-date {
+  color: #656d76;
+  font-size: 12px;
+}
+
+.chat-content {
+  background: #f6f8fa;
+  padding: 12px;
+  border-radius: 6px;
+  border-left: 4px solid #d1d9e0;
+  margin-bottom: 8px;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.chat-meta {
+  font-size: 11px;
+  color: #656d76;
+}
+
+.no-chat {
+  text-align: center;
+  padding: 40px 20px;
+  color: #656d76;
+  font-style: italic;
+}
+
+.chat-message.comment-style {
+  border-left: 4px solid var(--theme-color);
+}

oauth/src/components/AIChat-access.tsx

@@ -0,0 +1,21 @@
+// Cloudflare Access対応版の例
+const response = await fetch(`${aiConfig.host}/api/generate`, {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    // Cloudflare Access Service Token
+    'CF-Access-Client-Id': import.meta.env.VITE_CF_ACCESS_CLIENT_ID,
+    'CF-Access-Client-Secret': import.meta.env.VITE_CF_ACCESS_CLIENT_SECRET,
+  },
+  body: JSON.stringify({
+    model: aiConfig.model,
+    prompt: prompt,
+    stream: false,
+    options: {
+      temperature: 0.9,
+      top_p: 0.9,
+      num_predict: 200,
+      repeat_penalty: 1.1,
+    }
+  }),
+});

oauth/src/components/AIChat.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react';
+import { User } from '../services/auth';
+import { atprotoOAuthService } from '../services/atproto-oauth';
+import { appConfig, getCollectionNames } from '../config/app';
+
+interface AIChatProps {
+  user: User | null;
+  isEnabled: boolean;
+}
+
+export const AIChat: React.FC<AIChatProps> = ({ user, isEnabled }) => {
+  const [chatHistory, setChatHistory] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [aiProfile, setAiProfile] = useState<any>(null);
+  
+  // Get AI settings from appConfig (unified configuration)
+  const aiConfig = {
+    enabled: appConfig.aiEnabled,
+    askAi: appConfig.aiAskAi,
+    provider: appConfig.aiProvider,
+    model: appConfig.aiModel,
+    host: appConfig.aiHost,
+    systemPrompt: appConfig.aiSystemPrompt,
+    aiDid: appConfig.aiDid,
+    bskyPublicApi: appConfig.bskyPublicApi,
+  };
+
+  // Fetch AI profile on load
+  useEffect(() => {
+    const fetchAIProfile = async () => {
+      if (!aiConfig.aiDid) {
+        return;
+      }
+      
+      try {
+        // Try with agent first
+        const agent = atprotoOAuthService.getAgent();
+        if (agent) {
+          const profile = await agent.getProfile({ actor: aiConfig.aiDid });
+          const profileData = {
+            did: aiConfig.aiDid,
+            handle: profile.data.handle,
+            displayName: profile.data.displayName,
+            avatar: profile.data.avatar,
+            description: profile.data.description
+          };
+          setAiProfile(profileData);
+          
+          // Dispatch event to update Ask AI button
+          window.dispatchEvent(new CustomEvent('aiProfileLoaded', { detail: profileData }));
+          return;
+        }
+        
+        // Fallback to public API
+        const response = await fetch(`${aiConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(aiConfig.aiDid)}`);
+        if (response.ok) {
+          const profileData = await response.json();
+          const profile = {
+            did: aiConfig.aiDid,
+            handle: profileData.handle,
+            displayName: profileData.displayName,
+            avatar: profileData.avatar,
+            description: profileData.description
+          };
+          setAiProfile(profile);
+          
+          // Dispatch event to update Ask AI button
+          window.dispatchEvent(new CustomEvent('aiProfileLoaded', { detail: profile }));
+          return;
+        }
+      } catch (error) {
+        setAiProfile(null);
+      }
+    };
+
+    fetchAIProfile();
+  }, [aiConfig.aiDid]);
+
+  useEffect(() => {
+    if (!isEnabled || !aiConfig.askAi) return;
+
+    // Listen for AI question posts from base.html
+    const handleAIQuestion = async (event: any) => {
+      if (!user || !event.detail || !event.detail.question || isProcessing || !aiProfile) return;
+      
+      setIsProcessing(true);
+      try {
+        await postQuestionAndGenerateResponse(event.detail.question);
+      } finally {
+        setIsProcessing(false);
+      }
+    };
+
+    // Add listener with a small delay to ensure it's ready
+    setTimeout(() => {
+      window.addEventListener('postAIQuestion', handleAIQuestion);
+      
+      // Notify that AI is ready
+      window.dispatchEvent(new CustomEvent('aiChatReady'));
+    }, 100);
+
+    return () => {
+      window.removeEventListener('postAIQuestion', handleAIQuestion);
+    };
+  }, [user, isEnabled, isProcessing, aiProfile]);
+
+  const postQuestionAndGenerateResponse = async (question: string) => {
+    if (!user || !aiConfig.askAi || !aiProfile) return;
+
+    setIsLoading(true);
+    
+    try {
+      const agent = atprotoOAuthService.getAgent();
+      if (!agent) throw new Error('No agent available');
+
+      // Get collection names
+      const collections = getCollectionNames(appConfig.collections.base);
+
+      // 1. Post question to ATProto
+      const now = new Date();
+      const rkey = now.toISOString().replace(/[:.]/g, '-');
+      
+      // Extract post metadata from current page
+      const currentUrl = window.location.href;
+      const postSlug = currentUrl.match(/\/posts\/([^/]+)/)?.[1] || '';
+      const postTitle = document.title.replace(' - syui.ai', '') || '';
+      
+      const questionRecord = {
+        $type: collections.chat,
+        post: {
+          url: currentUrl,
+          slug: postSlug,
+          title: postTitle,
+          date: new Date().toISOString(),
+          tags: [],
+          language: "ja"
+        },
+        type: "question",
+        text: question,
+        author: {
+          did: user.did,
+          handle: user.handle,
+          avatar: user.avatar,
+          displayName: user.displayName || user.handle,
+        },
+        createdAt: now.toISOString(),
+      };
+
+      await agent.api.com.atproto.repo.putRecord({
+        repo: user.did,
+        collection: collections.chat,
+        rkey: rkey,
+        record: questionRecord,
+      });
+
+      // 2. Get chat history
+      const chatRecords = await agent.api.com.atproto.repo.listRecords({
+        repo: user.did,
+        collection: collections.chat,
+        limit: 10,
+      });
+
+      let chatHistoryText = '';
+      if (chatRecords.data.records) {
+        chatHistoryText = chatRecords.data.records
+          .map((r: any) => {
+            if (r.value.type === 'question') {
+              return `User: ${r.value.text}`;
+            } else if (r.value.type === 'answer') {
+              return `AI: ${r.value.text}`;
+            }
+            return '';
+          })
+          .filter(Boolean)
+          .join('\n');
+      }
+
+      // 3. Generate AI response based on provider
+      let aiAnswer = '';
+      
+      // 3. Generate AI response using Ollama via proxy
+      if (aiConfig.provider === 'ollama') {
+        const prompt = `${aiConfig.systemPrompt}
+
+Question: ${question}
+
+Answer:`;
+
+        const response = await fetch(`${aiConfig.host}/api/generate`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Origin': 'https://syui.ai',
+          },
+          body: JSON.stringify({
+            model: aiConfig.model,
+            prompt: prompt,
+            stream: false,
+            options: {
+              temperature: 0.9,
+              top_p: 0.9,
+              num_predict: 200, // Longer responses for better answers
+              repeat_penalty: 1.1,
+            }
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('AI API request failed');
+        }
+
+        const data = await response.json();
+        aiAnswer = data.response;
+      }
+
+      // 4. Immediately dispatch event to update UI
+      window.dispatchEvent(new CustomEvent('aiResponseReceived', {
+        detail: { 
+          answer: aiAnswer,
+          aiProfile: aiProfile,
+          timestamp: now.toISOString()
+        }
+      }));
+
+      // 5. Save AI response in background
+      const answerRkey = now.toISOString().replace(/[:.]/g, '-') + '-answer';
+      
+      const answerRecord = {
+        $type: collections.chat,
+        post: {
+          url: currentUrl,
+          slug: postSlug,
+          title: postTitle,
+          date: new Date().toISOString(),
+          tags: [],
+          language: "ja"
+        },
+        type: "answer",
+        text: aiAnswer,
+        author: {
+          did: aiProfile.did,
+          handle: aiProfile.handle,
+          displayName: aiProfile.displayName,
+          avatar: aiProfile.avatar,
+        },
+        createdAt: now.toISOString(),
+      };
+
+      // Save to ATProto asynchronously (don't wait for it)
+      agent.api.com.atproto.repo.putRecord({
+        repo: user.did,
+        collection: collections.chat,
+        rkey: answerRkey,
+        record: answerRecord,
+      }).catch(err => {
+        // Silent fail for AI response saving
+      });
+
+    } catch (error) {
+      window.dispatchEvent(new CustomEvent('aiResponseError', {
+        detail: { error: 'AI応答の生成に失敗しました' }
+      }));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // This component doesn't render anything - it just handles the logic
+  return null;
+};

oauth/src/components/AIProfile.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import { AtprotoAgent } from '@atproto/api';
+
+interface AIProfile {
+  did: string;
+  handle: string;
+  displayName?: string;
+  avatar?: string;
+  description?: string;
+}
+
+interface AIProfileProps {
+  aiDid: string;
+}
+
+export const AIProfile: React.FC<AIProfileProps> = ({ aiDid }) => {
+  const [profile, setProfile] = useState<AIProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchAIProfile = async () => {
+      try {
+        // Use public API to get profile information
+        const agent = new AtprotoAgent({ service: 'https://bsky.social' });
+        const response = await agent.getProfile({ actor: aiDid });
+        
+        setProfile({
+          did: response.data.did,
+          handle: response.data.handle,
+          displayName: response.data.displayName,
+          avatar: response.data.avatar,
+          description: response.data.description,
+        });
+      } catch (error) {
+        // Failed to fetch AI profile
+        // Fallback to basic info
+        setProfile({
+          did: aiDid,
+          handle: 'ai-assistant',
+          displayName: 'AI Assistant',
+          description: 'AI assistant for this blog',
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (aiDid) {
+      fetchAIProfile();
+    }
+  }, [aiDid]);
+
+  if (loading) {
+    return <div className="ai-profile-loading">Loading AI profile...</div>;
+  }
+
+  if (!profile) {
+    return null;
+  }
+
+  return (
+    <div className="ai-profile">
+      <div className="ai-avatar">
+        {profile.avatar ? (
+          <img src={profile.avatar} alt={profile.displayName || profile.handle} />
+        ) : (
+          <div className="ai-avatar-placeholder">🤖</div>
+        )}
+      </div>
+      <div className="ai-info">
+        <div className="ai-name">{profile.displayName || profile.handle}</div>
+        <div className="ai-handle">@{profile.handle}</div>
+        {profile.description && (
+          <div className="ai-description">{profile.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

oauth/src/components/CardBox.tsx

@@ -26,7 +26,7 @@ export const CardBox: React.FC<CardBoxProps> = ({ userDid }) => {
       const data = await atprotoOAuthService.getCardsFromBox();
       setBoxData(data);
     } catch (err) {
-      console.error('カードボックス読み込みエラー:', err);
+      // Failed to load card box
       setError(err instanceof Error ? err.message : 'カードボックスの読み込みに失敗しました');
     } finally {
       setLoading(false);
@@ -52,7 +52,7 @@ export const CardBox: React.FC<CardBoxProps> = ({ userDid }) => {
       setBoxData({ records: [] });
       alert('カードボックスを削除しました');
     } catch (err) {
-      console.error('カードボックス削除エラー:', err);
+      // Failed to delete card box
       setError(err instanceof Error ? err.message : 'カードボックスの削除に失敗しました');
     } finally {
       setIsDeleting(false);

oauth/src/components/CardList.tsx

@@ -32,7 +32,7 @@ export const CardList: React.FC = () => {
       const data = await response.json();
       setMasterData(data);
     } catch (err) {
-      console.error('Error loading card master data:', err);
+      // Failed to load card master data
       setError(err instanceof Error ? err.message : 'Failed to load card data');
     } finally {
       setLoading(false);

oauth/src/components/CollectionAnalysis.tsx

@@ -29,7 +29,7 @@ export const CollectionAnalysis: React.FC<CollectionAnalysisProps> = ({ userDid
       const result = await aiCardApi.analyzeCollection(userDid);
       setAnalysis(result);
     } catch (err) {
-      console.error('Collection analysis failed:', err);
+      // Collection analysis failed
       setError('AI分析機能を利用するにはai.gptサーバーが必要です。基本機能はai.cardサーバーのみで利用できます。');
     } finally {
       setLoading(false);

oauth/src/components/GachaAnimation.tsx

@@ -48,7 +48,7 @@ export const GachaAnimation: React.FC<GachaAnimationProps> = ({
       await atprotoOAuthService.saveCardToCollection(card);
       alert('カードデータをatprotoコレクションに保存しました！');
     } catch (error) {
-      console.error('保存エラー:', error);
+      // Failed to save card
       alert('保存に失敗しました。認証が必要かもしれません。');
     } finally {
       setIsSharing(false);

oauth/src/components/GachaStats.tsx

@@ -30,7 +30,7 @@ export const GachaStats: React.FC = () => {
         try {
           result = await aiCardApi.getEnhancedStats();
         } catch (aiError) {
-          console.warn('AI統計が利用できません、基本統計に切り替えます:', aiError);
+          // AI stats unavailable, using basic stats
           setUseAI(false);
           result = await cardApi.getGachaStats();
         }
@@ -39,7 +39,7 @@ export const GachaStats: React.FC = () => {
       }
       setStats(result);
     } catch (err) {
-      console.error('Gacha stats failed:', err);
+      // Gacha stats failed
       setError('統計データの取得に失敗しました。ai.cardサーバーが起動していることを確認してください。');
     } finally {
       setLoading(false);

oauth/src/components/Login.tsx

@@ -160,7 +160,7 @@ export const Login: React.FC<LoginProps> = ({ onLogin, onClose, defaultHandle })
               />
               <small>
                 メインパスワードではなく、
-                <a href="https://bsky.app/settings/app-passwords" target="_blank" rel="noopener noreferrer">
+                <a href={`${import.meta.env.VITE_ATPROTO_WEB_URL || 'https://bsky.app'}/settings/app-passwords`} target="_blank" rel="noopener noreferrer">
                   アプリパスワード
                 </a>
                 を使用してください

oauth/src/components/OAuthCallback.tsx

@@ -7,8 +7,6 @@ interface OAuthCallbackProps {
 }
 
 export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError }) => {
-  console.log('=== OAUTH CALLBACK COMPONENT MOUNTED ===');
-  console.log('Current URL:', window.location.href);
   
   const [isProcessing, setIsProcessing] = useState(true);
   const [needsHandle, setNeedsHandle] = useState(false);
@@ -18,12 +16,10 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
   useEffect(() => {
     // Add timeout to prevent infinite loading
     const timeoutId = setTimeout(() => {
-      console.error('OAuth callback timeout');
       onError('OAuth認証がタイムアウトしました');
     }, 10000); // 10 second timeout
 
     const handleCallback = async () => {
-      console.log('=== HANDLE CALLBACK STARTED ===');
       try {
         // Handle both query params (?) and hash params (#)
         const hashParams = new URLSearchParams(window.location.hash.substring(1));
@@ -35,14 +31,6 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
         const error = hashParams.get('error') || queryParams.get('error');
         const iss = hashParams.get('iss') || queryParams.get('iss');
         
-        console.log('OAuth callback parameters:', {
-          code: code ? code.substring(0, 20) + '...' : null,
-          state: state,
-          error: error,
-          iss: iss,
-          hash: window.location.hash,
-          search: window.location.search
-        });
 
         if (error) {
           throw new Error(`OAuth error: ${error}`);
@@ -52,12 +40,10 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
           throw new Error('Missing OAuth parameters');
         }
 
-        console.log('Processing OAuth callback with params:', { code: code?.substring(0, 10) + '...', state, iss });
         
         // Use the official BrowserOAuthClient to handle the callback
         const result = await atprotoOAuthService.handleOAuthCallback();
         if (result) {
-          console.log('OAuth callback completed successfully:', result);
           
           // Success - notify parent component
           onSuccess(result.did, result.handle);
@@ -66,11 +52,7 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
         }
         
       } catch (error) {
-        console.error('OAuth callback error:', error);
-        
         // Even if OAuth fails, try to continue with a fallback approach
-        console.warn('OAuth callback failed, attempting fallback...');
-        
         try {
           // Create a minimal session to allow the user to proceed
           const fallbackSession = {
@@ -82,7 +64,6 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
           onSuccess(fallbackSession.did, fallbackSession.handle);
           
         } catch (fallbackError) {
-          console.error('Fallback also failed:', fallbackError);
           onError(error instanceof Error ? error.message : 'OAuth認証に失敗しました');
         }
       } finally {
@@ -104,17 +85,13 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
     
     const trimmedHandle = handle.trim();
     if (!trimmedHandle) {
-      console.log('Handle is empty');
       return;
     }
-    
-    console.log('Submitting handle:', trimmedHandle);
     setIsProcessing(true);
     
     try {
       // Resolve DID from handle
       const did = await atprotoOAuthService.resolveDIDFromHandle(trimmedHandle);
-      console.log('Resolved DID:', did);
       
       // Update session with resolved DID and handle
       const updatedSession = {
@@ -129,7 +106,6 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
       // Success - notify parent component
       onSuccess(did, trimmedHandle);
     } catch (error) {
-      console.error('Failed to resolve DID:', error);
       setIsProcessing(false);
       onError(error instanceof Error ? error.message : 'ハンドルからDIDの解決に失敗しました');
     }
@@ -149,7 +125,6 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({ onSuccess, onError
               type="text"
               value={handle}
               onChange={(e) => {
-                console.log('Input changed:', e.target.value);
                 setHandle(e.target.value);
               }}
               placeholder="例: syui.ai または user.bsky.social"

oauth/src/components/OAuthCallbackPage.tsx

@@ -6,14 +6,9 @@ export const OAuthCallbackPage: React.FC = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    console.log('=== OAUTH CALLBACK PAGE MOUNTED ===');
-    console.log('Current URL:', window.location.href);
-    console.log('Search params:', window.location.search);
-    console.log('Pathname:', window.location.pathname);
   }, []);
 
   const handleSuccess = (did: string, handle: string) => {
-    console.log('OAuth success, redirecting to home:', { did, handle });
     
     // Add a small delay to ensure state is properly updated
     setTimeout(() => {
@@ -22,7 +17,6 @@ export const OAuthCallbackPage: React.FC = () => {
   };
 
   const handleError = (error: string) => {
-    console.error('OAuth error, redirecting to home:', error);
     
     // Add a small delay before redirect
     setTimeout(() => {

oauth/src/config/app.ts

@@ -1,18 +1,52 @@
 // Application configuration
 export interface AppConfig {
   adminDid: string;
+  adminHandle: string;
+  aiDid: string;
+  aiHandle: string;
+  aiDisplayName: string;
+  aiAvatar: string;
+  aiDescription: string;
   collections: {
-    comment: string;
-    user: string;
+    base: string;  // Base collection like "ai.syui.log"
   };
   host: string;
   rkey?: string; // Current post rkey if on post page
+  aiEnabled: boolean;
+  aiAskAi: boolean;
+  aiProvider: string;
+  aiModel: string;
+  aiHost: string;
+  aiSystemPrompt: string;
+  allowedHandles: string[]; // Handles allowed for OAuth authentication
+  atprotoPds: string; // Configured PDS for admin/ai handles
+  // Legacy - prefer per-user PDS detection
+  bskyPublicApi: string;
+  atprotoApi: string;
+}
+
+// Collection name builders (similar to Rust implementation)
+export function getCollectionNames(base: string) {
+  if (!base) {
+    // Fallback to default
+    base = 'ai.syui.log';
+  }
+  
+  const collections = {
+    comment: base,
+    user: `${base}.user`,
+    chat: `${base}.chat`,
+    chatLang: `${base}.chat.lang`,
+    chatComment: `${base}.chat.comment`,
+  };
+  
+  return collections;
 }
 
 // Generate collection names from host
 // Format: ${reg}.${name}.${sub}
 // Example: log.syui.ai -> ai.syui.log
-function generateCollectionNames(host: string): { comment: string; user: string } {
+function generateBaseCollectionFromHost(host: string): string {
   try {
     // Remove protocol if present
     const cleanHost = host.replace(/^https?:\/\//, '');
@@ -27,56 +61,96 @@ function generateCollectionNames(host: string): { comment: string; user: string
     // Reverse the parts for collection naming
     // log.syui.ai -> ai.syui.log
     const reversedParts = parts.reverse();
-    const collectionBase = reversedParts.join('.');
-    
-    return {
-      comment: collectionBase,
-      user: `${collectionBase}.user`
-    };
+    const result = reversedParts.join('.');
+    return result;
   } catch (error) {
-    console.warn('Failed to generate collection names from host:', host, error);
-    // Fallback to default collections
-    return {
-      comment: 'ai.syui.log',
-      user: 'ai.syui.log.user'
-    };
+    // Fallback to default
+    return 'ai.syui.log';
   }
 }
 
 // Extract rkey from current URL
-// /posts/xxx.html -> xxx
+// /posts/xxx -> xxx (remove .html if present)
 function extractRkeyFromUrl(): string | undefined {
   const pathname = window.location.pathname;
-  const match = pathname.match(/\/posts\/([^/]+)\.html$/);
-  return match ? match[1] : undefined;
+  const match = pathname.match(/\/posts\/([^/]+)\/?$/);
+  if (match) {
+    // Remove .html extension if present
+    return match[1].replace(/\.html$/, '');
+  }
+  return undefined;
 }
 
 // Get application configuration from environment variables
 export function getAppConfig(): AppConfig {
   const host = import.meta.env.VITE_APP_HOST || 'https://log.syui.ai';
+  const adminHandle = import.meta.env.VITE_ADMIN_HANDLE || 'ai.syui.ai';
+  const aiHandle = import.meta.env.VITE_AI_HANDLE || 'ai.syui.ai';
+  
+  // DIDsはハンドルから実行時に解決される（フォールバック用のみ保持）
   const adminDid = import.meta.env.VITE_ADMIN_DID || 'did:plc:uqzpqmrjnptsxezjx4xuh2mn';
+  const aiDid = import.meta.env.VITE_AI_DID || 'did:plc:6qyecktefllvenje24fcxnie';
+  const aiDisplayName = import.meta.env.VITE_AI_DISPLAY_NAME || 'ai';
+  const aiAvatar = import.meta.env.VITE_AI_AVATAR || '';
+  const aiDescription = import.meta.env.VITE_AI_DESCRIPTION || '';
   
   // Priority: Environment variables > Auto-generated from host
-  const autoGeneratedCollections = generateCollectionNames(host);
+  const autoGeneratedBase = generateBaseCollectionFromHost(host);
+  let baseCollection = import.meta.env.VITE_OAUTH_COLLECTION || autoGeneratedBase;
+  
+  // Ensure base collection is never undefined
+  if (!baseCollection) {
+    baseCollection = 'ai.syui.log';
+  }
+  
   const collections = {
-    comment: import.meta.env.VITE_COLLECTION_COMMENT || autoGeneratedCollections.comment,
-    user: import.meta.env.VITE_COLLECTION_USER || autoGeneratedCollections.user,
+    base: baseCollection,
   };
   
   const rkey = extractRkeyFromUrl();
   
-  console.log('App configuration:', {
-    host,
-    adminDid,
-    collections,
-    rkey: rkey || 'none (not on post page)'
-  });
+  // AI configuration
+  const aiEnabled = import.meta.env.VITE_AI_ENABLED === 'true';
+  const aiAskAi = import.meta.env.VITE_AI_ASK_AI === 'true';
+  const aiProvider = import.meta.env.VITE_AI_PROVIDER || 'ollama';
+  const aiModel = import.meta.env.VITE_AI_MODEL || 'gemma3:4b';
+  const aiHost = import.meta.env.VITE_AI_HOST || 'https://ollama.syui.ai';
+  const aiSystemPrompt = import.meta.env.VITE_AI_SYSTEM_PROMPT || 'You are a helpful AI assistant trained on this blog\'s content.';
+  const atprotoPds = import.meta.env.VITE_ATPROTO_PDS || 'syu.is';
+  const bskyPublicApi = import.meta.env.VITE_BSKY_PUBLIC_API || 'https://public.api.bsky.app';
+  const atprotoApi = import.meta.env.VITE_ATPROTO_API || 'https://bsky.social';
+  
+  // Parse allowed handles list
+  const allowedHandlesStr = import.meta.env.VITE_ATPROTO_HANDLE_LIST || '[]';
+  let allowedHandles: string[] = [];
+  try {
+    allowedHandles = JSON.parse(allowedHandlesStr);
+  } catch {
+    // If parsing fails, allow all handles (empty array means no restriction)
+    allowedHandles = [];
+  }
   
   return {
     adminDid,
+    adminHandle,
+    aiDid,
+    aiHandle,
+    aiDisplayName,
+    aiAvatar,
+    aiDescription,
     collections,
     host,
-    rkey
+    rkey,
+    aiEnabled,
+    aiAskAi,
+    aiProvider,
+    aiModel,
+    aiHost,
+    aiSystemPrompt,
+    allowedHandles,
+    atprotoPds,
+    bskyPublicApi,
+    atprotoApi
   };
 }
 

oauth/src/main.tsx

@@ -10,7 +10,11 @@ import { OAuthEndpointHandler } from './utils/oauth-endpoints'
 // DISABLED: This may interfere with BrowserOAuthClient
 // OAuthEndpointHandler.init()
 
-ReactDOM.createRoot(document.getElementById('comment-atproto')!).render(
+// Mount React app to all comment-atproto divs
+const mountPoints = document.querySelectorAll('#comment-atproto');
+
+mountPoints.forEach((mountPoint, index) => {
+  ReactDOM.createRoot(mountPoint as HTMLElement).render(
     <React.StrictMode>
       <BrowserRouter>
         <Routes>
@@ -20,4 +24,5 @@ ReactDOM.createRoot(document.getElementById('comment-atproto')!).render(
         </Routes>
       </BrowserRouter>
     </React.StrictMode>,
-)
+  );
+});

oauth/src/services/api.ts

@@ -73,7 +73,6 @@ export const aiCardApi = {
       });
       return response.data.data;
     } catch (error) {
-      console.warn('ai.gpt AI分析機能が利用できません:', error);
       throw new Error('AI分析機能を利用するにはai.gptサーバーが必要です');
     }
   },
@@ -86,7 +85,6 @@ export const aiCardApi = {
       const response = await aiGptApi.get('/card_get_gacha_stats');
       return response.data.data;
     } catch (error) {
-      console.warn('ai.gpt AI統計機能が利用できません:', error);
       throw new Error('AI統計機能を利用するにはai.gptサーバーが必要です');
     }
   },

oauth/src/services/atproto-oauth.ts

@@ -12,6 +12,7 @@ interface AtprotoSession {
 
 class AtprotoOAuthService {
   private oauthClient: BrowserOAuthClient | null = null;
+  private oauthClientSyuIs: BrowserOAuthClient | null = null;
   private agent: Agent | null = null;
   private initializePromise: Promise<void> | null = null;
 
@@ -31,51 +32,50 @@ class AtprotoOAuthService {
 
   private async _doInitialize(): Promise<void> {
     try {
-      console.log('=== INITIALIZING ATPROTO OAUTH CLIENT ===');
-      
       // Generate client ID based on current origin
       const clientId = this.getClientId();
-      console.log('Client ID:', clientId);
 
-      // Support multiple PDS hosts for OAuth
+      // Initialize both OAuth clients
       this.oauthClient = await BrowserOAuthClient.load({
         clientId: clientId,
-        handleResolver: 'https://bsky.social', // Default resolver
+        handleResolver: 'https://bsky.social',
+        plcDirectoryUrl: 'https://plc.directory',
       });
 
-      console.log('BrowserOAuthClient initialized successfully with multi-PDS support');
+      this.oauthClientSyuIs = await BrowserOAuthClient.load({
+        clientId: clientId,
+        handleResolver: 'https://syu.is',
+        plcDirectoryUrl: 'https://plc.syu.is',
+      });
       
-      // Try to restore existing session
-      const result = await this.oauthClient.init();
+      // Try to restore existing session from either client
+      let result = await this.oauthClient.init();
+      if (!result?.session) {
+        result = await this.oauthClientSyuIs.init();
+      }
       if (result?.session) {
-        console.log('Existing session restored:', {
-          did: result.session.did,
-          handle: result.session.handle || 'unknown',
-          hasAccessJwt: !!result.session.accessJwt,
-          hasRefreshJwt: !!result.session.refreshJwt
-        });
         
         // Create Agent instance with proper configuration
-        console.log('Creating Agent with session:', result.session);
+
         
         // Delete the old agent initialization code - we'll create it properly below
         
         // Set the session after creating the agent
         // The session object from BrowserOAuthClient appears to be a special object
-        console.log('Full session object:', result.session);
-        console.log('Session type:', typeof result.session);
-        console.log('Session constructor:', result.session?.constructor?.name);
+
+
+
         
         // Try to iterate over the session object
         if (result.session) {
-          console.log('Session properties:');
+
           for (const key in result.session) {
-            console.log(`  ${key}:`, result.session[key]);
+
           }
           
           // Check if session has methods
           const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(result.session));
-          console.log('Session methods:', methods);
+
         }
         
         // BrowserOAuthClient might return a Session object that needs to be used with the agent
@@ -83,56 +83,28 @@ class AtprotoOAuthService {
         if (result.session) {
           // Process the session to extract DID and handle
           const sessionData = await this.processSession(result.session);
-          console.log('Session processed during initialization:', sessionData);
+
         }
         
       } else {
-        console.log('No existing session found');
+
       }
       
     } catch (error) {
-      console.error('Failed to initialize OAuth client:', error);
+
       this.initializePromise = null; // Reset on error to allow retry
       throw error;
     }
   }
 
   private async processSession(session: any): Promise<{ did: string; handle: string }> {
-    console.log('Processing session:', session);
-    
-    // Log full session structure
-    console.log('Session structure:');
-    console.log('- sub:', session.sub);
-    console.log('- did:', session.did);
-    console.log('- handle:', session.handle);
-    console.log('- iss:', session.iss);
-    console.log('- aud:', session.aud);
-    
-    // Check if agent has properties we can access
-    if (session.agent) {
-      console.log('- agent:', session.agent);
-      console.log('- agent.did:', session.agent?.did);
-      console.log('- agent.handle:', session.agent?.handle);
-    }
-    
     const did = session.sub || session.did;
     let handle = session.handle || 'unknown';
     
     // Create Agent directly with session (per official docs)
     try {
       this.agent = new Agent(session);
-      console.log('Agent created directly with session');
-      
-      // Check if agent has session info after creation
-      console.log('Agent after creation:');
-      console.log('- agent.did:', this.agent.did);
-      console.log('- agent.session:', this.agent.session);
-      if (this.agent.session) {
-        console.log('- agent.session.did:', this.agent.session.did);
-        console.log('- agent.session.handle:', this.agent.session.handle);
-      }
     } catch (err) {
-      console.log('Failed to create Agent with session directly, trying dpopFetch method');
       // Fallback to dpopFetch method
       this.agent = new Agent({
         service: session.server?.serviceEndpoint || 'https://bsky.social',
@@ -145,7 +117,7 @@ class AtprotoOAuthService {
     
     // If handle is missing, try multiple methods to resolve it
     if (!handle || handle === 'unknown') {
-      console.log('Handle not in session, attempting to resolve...');
+
       
       // Method 1: Try using the agent to get profile
       try {
@@ -154,11 +126,11 @@ class AtprotoOAuthService {
         if (profile.data.handle) {
           handle = profile.data.handle;
           (this as any)._sessionInfo.handle = handle;
-          console.log('Successfully resolved handle via getProfile:', handle);
+
           return { did, handle };
         }
       } catch (err) {
-        console.error('getProfile failed:', err);
+
       }
       
       // Method 2: Try using describeRepo
@@ -169,18 +141,20 @@ class AtprotoOAuthService {
         if (repoDesc.data.handle) {
           handle = repoDesc.data.handle;
           (this as any)._sessionInfo.handle = handle;
-          console.log('Got handle from describeRepo:', handle);
+
           return { did, handle };
         }
       } catch (err) {
-        console.error('describeRepo failed:', err);
+
       }
       
-      // Method 3: Hardcoded fallback for known DIDs
-      if (did === 'did:plc:uqzpqmrjnptsxezjx4xuh2mn') {
-        handle = 'syui.ai';
+      // Method 3: Fallback for admin DID
+      const adminDid = import.meta.env.VITE_ADMIN_DID;
+      if (did === adminDid) {
+        const appHost = import.meta.env.VITE_APP_HOST || 'https://syui.ai';
+        handle = new URL(appHost).hostname;
         (this as any)._sessionInfo.handle = handle;
-        console.log('Using hardcoded handle for known DID');
+
       }
     }
     
@@ -191,7 +165,7 @@ class AtprotoOAuthService {
     // Use environment variable if available
     const envClientId = import.meta.env.VITE_OAUTH_CLIENT_ID;
     if (envClientId) {
-      console.log('Using client ID from environment:', envClientId);
+
       return envClientId;
     }
     
@@ -200,7 +174,7 @@ class AtprotoOAuthService {
     // For localhost development, use undefined for loopback client
     // The BrowserOAuthClient will handle this automatically
     if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
-      console.log('Using loopback client for localhost development');
+
       return undefined as any; // Loopback client
     }
     
@@ -208,39 +182,15 @@ class AtprotoOAuthService {
     return `${origin}/client-metadata.json`;
   }
 
-  private detectPDSFromHandle(handle: string): string {
-    console.log('Detecting PDS for handle:', handle);
-    
-    // Supported PDS hosts and their corresponding handles
-    const pdsMapping = {
-      'syu.is': 'https://syu.is',
-      'bsky.social': 'https://bsky.social',
-    };
-    
-    // Check if handle ends with known PDS domains
-    for (const [domain, pdsUrl] of Object.entries(pdsMapping)) {
-      if (handle.endsWith(`.${domain}`)) {
-        console.log(`Handle ${handle} mapped to PDS: ${pdsUrl}`);
-        return pdsUrl;
-      }
-    }
-    
-    // Default to bsky.social
-    console.log(`Handle ${handle} using default PDS: https://bsky.social`);
-    return 'https://bsky.social';
-  }
 
   async initiateOAuthFlow(handle?: string): Promise<void> {
     try {
-      console.log('=== INITIATING OAUTH FLOW ===');
-      
-      if (!this.oauthClient) {
-        console.log('OAuth client not initialized, initializing now...');
+      if (!this.oauthClient || !this.oauthClientSyuIs) {
         await this.initialize();
       }
 
-      if (!this.oauthClient) {
-        throw new Error('Failed to initialize OAuth client');
+      if (!this.oauthClient || !this.oauthClientSyuIs) {
+        throw new Error('Failed to initialize OAuth clients');
       }
 
       // If handle is not provided, prompt user
@@ -251,75 +201,42 @@ class AtprotoOAuthService {
         }
       }
 
-      console.log('Starting OAuth flow for handle:', handle);
-      
-      // Detect PDS based on handle
-      const pdsUrl = this.detectPDSFromHandle(handle);
-      console.log('Detected PDS for handle:', { handle, pdsUrl });
-      
-      // Re-initialize OAuth client with correct PDS if needed
-      if (pdsUrl !== 'https://bsky.social') {
-        console.log('Re-initializing OAuth client for custom PDS:', pdsUrl);
-        this.oauthClient = await BrowserOAuthClient.load({
-          clientId: this.getClientId(),
-          handleResolver: pdsUrl,
-        });
+      // Determine which OAuth client to use
+      const allowedHandlesStr = import.meta.env.VITE_ATPROTO_HANDLE_LIST || '[]';
+      let allowedHandles: string[] = [];
+      try {
+        allowedHandles = JSON.parse(allowedHandlesStr);
+      } catch {
+        allowedHandles = [];
       }
       
-      // Start OAuth authorization flow
-      console.log('Calling oauthClient.authorize with handle:', handle);
+      const usesSyuIs = handle.endsWith('.syu.is') || allowedHandles.includes(handle);
+      const oauthClient = usesSyuIs ? this.oauthClientSyuIs : this.oauthClient;
 
-      try {
-        const authUrl = await this.oauthClient.authorize(handle, {
+      // Start OAuth authorization flow
+      const authUrl = await oauthClient.authorize(handle, {
         scope: 'atproto transition:generic',
       });
       
-        console.log('Authorization URL generated:', authUrl.toString());
-        console.log('URL breakdown:', {
-          protocol: authUrl.protocol,
-          hostname: authUrl.hostname,
-          pathname: authUrl.pathname,
-          search: authUrl.search
-        });
-        
-        // Store some debug info before redirect
-        sessionStorage.setItem('oauth_debug_pre_redirect', JSON.stringify({
-          timestamp: new Date().toISOString(),
-          handle: handle,
-          authUrl: authUrl.toString(),
-          currentUrl: window.location.href
-        }));
-        
       // Redirect to authorization server
-        console.log('About to redirect to:', authUrl.toString());
       window.location.href = authUrl.toString();
-      } catch (authorizeError) {
-        console.error('oauthClient.authorize failed:', authorizeError);
-        console.error('Error details:', {
-          name: authorizeError.name,
-          message: authorizeError.message,
-          stack: authorizeError.stack
-        });
-        throw authorizeError;
-      }
       
     } catch (error) {
-      console.error('Failed to initiate OAuth flow:', error);
       throw new Error(`OAuth認証の開始に失敗しました: ${error}`);
     }
   }
 
   async handleOAuthCallback(): Promise<{ did: string; handle: string } | null> {
     try {
-      console.log('=== HANDLING OAUTH CALLBACK ===');
-      console.log('Current URL:', window.location.href);
-      console.log('URL hash:', window.location.hash);
-      console.log('URL search:', window.location.search);
+
+
+
+
       
       // BrowserOAuthClient should automatically handle the callback
       // We just need to initialize it and it will process the current URL
       if (!this.oauthClient) {
-        console.log('OAuth client not initialized, initializing now...');
+
         await this.initialize();
       }
 
@@ -327,11 +244,11 @@ class AtprotoOAuthService {
         throw new Error('Failed to initialize OAuth client');
       }
 
-      console.log('OAuth client ready, initializing to process callback...');
+
       
       // Call init() again to process the callback URL
       const result = await this.oauthClient.init();
-      console.log('OAuth callback processing result:', result);
+
       
       if (result?.session) {
         // Process the session
@@ -339,47 +256,36 @@ class AtprotoOAuthService {
       }
       
       // If no session yet, wait a bit and try again
-      console.log('No session found immediately, waiting...');
+
       await new Promise(resolve => setTimeout(resolve, 1000));
       
       // Try to check session again
       const sessionCheck = await this.checkSession();
       if (sessionCheck) {
-        console.log('Session found after delay:', sessionCheck);
+
         return sessionCheck;
       }
       
-      console.warn('OAuth callback completed but no session was created');
+
       return null;
       
     } catch (error) {
-      console.error('OAuth callback handling failed:', error);
-      console.error('Error details:', {
-        name: error.name,
-        message: error.message,
-        stack: error.stack
-      });
+
       throw new Error(`OAuth認証の完了に失敗しました: ${error.message}`);
     }
   }
 
   async checkSession(): Promise<{ did: string; handle: string } | null> {
     try {
-      console.log('=== CHECK SESSION CALLED ===');
-      
       if (!this.oauthClient) {
-        console.log('No OAuth client, initializing...');
         await this.initialize();
       }
 
       if (!this.oauthClient) {
-        console.log('OAuth client initialization failed');
         return null;
       }
 
-      console.log('Running oauthClient.init() to check session...');
       const result = await this.oauthClient.init();
-      console.log('oauthClient.init() result:', result);
       
       if (result?.session) {
         // Use the common session processing method
@@ -388,7 +294,7 @@ class AtprotoOAuthService {
       
       return null;
     } catch (error) {
-      console.error('Session check failed:', error);
+
       return null;
     }
   }
@@ -398,13 +304,7 @@ class AtprotoOAuthService {
   }
 
   getSession(): AtprotoSession | null {
-    console.log('getSession called');
-    console.log('Current state:', {
-      hasAgent: !!this.agent,
-      hasAgentSession: !!this.agent?.session,
-      hasOAuthClient: !!this.oauthClient,
-      hasSessionInfo: !!(this as any)._sessionInfo
-    });
+
     
     // First check if we have an agent with session
     if (this.agent?.session) {
@@ -414,7 +314,7 @@ class AtprotoOAuthService {
         accessJwt: this.agent.session.accessJwt || '',
         refreshJwt: this.agent.session.refreshJwt || '',
       };
-      console.log('Returning agent session:', session);
+
       return session;
     }
     
@@ -426,11 +326,11 @@ class AtprotoOAuthService {
         accessJwt: 'dpop-protected',  // Indicate that tokens are handled by dpopFetch
         refreshJwt: 'dpop-protected',
       };
-      console.log('Returning stored session info:', session);
+
       return session;
     }
     
-    console.log('No session available');
+
     return null;
   }
 
@@ -450,28 +350,20 @@ class AtprotoOAuthService {
 
   async logout(): Promise<void> {
     try {
-      console.log('=== LOGGING OUT ===');
-      
       // Clear Agent
       this.agent = null;
-      console.log('Agent cleared');
       
       // Clear BrowserOAuthClient session
       if (this.oauthClient) {
-        console.log('Clearing OAuth client session...');
         try {
           // BrowserOAuthClient may have a revoke or signOut method
           if (typeof (this.oauthClient as any).signOut === 'function') {
             await (this.oauthClient as any).signOut();
-            console.log('OAuth client signed out');
           } else if (typeof (this.oauthClient as any).revoke === 'function') {
             await (this.oauthClient as any).revoke();
-            console.log('OAuth client revoked');
-          } else {
-            console.log('No explicit signOut method found on OAuth client');
           }
         } catch (oauthError) {
-          console.error('OAuth client logout error:', oauthError);
+          // Ignore logout errors
         }
         
         // Reset the OAuth client to force re-initialization
@@ -483,20 +375,18 @@ class AtprotoOAuthService {
       localStorage.removeItem('atproto_session');
       sessionStorage.clear();
       
-      // Clear all localStorage items that might be related to OAuth
-      const keysToRemove: string[] = [];
+      // Clear all OAuth-related storage
       for (let i = 0; i < localStorage.length; i++) {
         const key = localStorage.key(i);
         if (key && (key.includes('oauth') || key.includes('atproto') || key.includes('session'))) {
-          keysToRemove.push(key);
-        }
-      }
-      keysToRemove.forEach(key => {
-        console.log('Removing localStorage key:', key);
           localStorage.removeItem(key);
-      });
+        }
+      }
+      
+      // Clear internal session info
+      (this as any)._sessionInfo = null;
+      
 
-      console.log('=== LOGOUT COMPLETED ===');
       
       // Force page reload to ensure clean state
       setTimeout(() => {
@@ -504,7 +394,7 @@ class AtprotoOAuthService {
       }, 100);
       
     } catch (error) {
-      console.error('Logout failed:', error);
+
     }
   }
 
@@ -519,8 +409,8 @@ class AtprotoOAuthService {
     const did = sessionInfo.did;
 
     try {
-      console.log('Saving cards to atproto collection...');
-      console.log('Using DID:', did);
+
+
       
       // Ensure we have a fresh agent
       if (!this.agent) {
@@ -550,13 +440,6 @@ class AtprotoOAuthService {
         createdAt: createdAt
       };
 
-      console.log('PutRecord request:', {
-        repo: did,
-        collection: collection,
-        rkey: rkey,
-        record: record
-      });
-
 
       // Use Agent's com.atproto.repo.putRecord method
       const response = await this.agent.com.atproto.repo.putRecord({
@@ -566,9 +449,9 @@ class AtprotoOAuthService {
         record: record
       });
 
-      console.log('カードデータをai.card.boxに保存しました:', response);
+
     } catch (error) {
-      console.error('カードボックス保存エラー:', error);
+
       throw error;
     }
   }
@@ -584,8 +467,8 @@ class AtprotoOAuthService {
     const did = sessionInfo.did;
 
     try {
-      console.log('Fetching cards from atproto collection...');
-      console.log('Using DID:', did);
+
+
       
       // Ensure we have a fresh agent
       if (!this.agent) {
@@ -598,7 +481,7 @@ class AtprotoOAuthService {
         rkey: 'self'
       });
 
-      console.log('Cards from box response:', response);
+
       
       // Convert to expected format
       const result = {
@@ -611,7 +494,7 @@ class AtprotoOAuthService {
       
       return result;
     } catch (error) {
-      console.error('カードボックス取得エラー:', error);
+
       
       // If record doesn't exist, return empty
       if (error.toString().includes('RecordNotFound')) {
@@ -633,8 +516,8 @@ class AtprotoOAuthService {
     const did = sessionInfo.did;
 
     try {
-      console.log('Deleting card box collection...');
-      console.log('Using DID:', did);
+
+
       
       // Ensure we have a fresh agent
       if (!this.agent) {
@@ -647,33 +530,35 @@ class AtprotoOAuthService {
         rkey: 'self'
       });
 
-      console.log('Card box deleted successfully:', response);
+
     } catch (error) {
-      console.error('カードボックス削除エラー:', error);
+
       throw error;
     }
   }
 
   // 手動でトークンを設定（開発・デバッグ用）
   setManualTokens(accessJwt: string, refreshJwt: string): void {
-    console.warn('Manual token setting is not supported with official BrowserOAuthClient');
-    console.warn('Please use the proper OAuth flow instead');
+
+
     
     // For backward compatibility, store in localStorage
+    const adminDid = import.meta.env.VITE_ADMIN_DID || 'did:plc:unknown';
+    const appHost = import.meta.env.VITE_APP_HOST || 'https://example.com';
     const session: AtprotoSession = {
-      did: 'did:plc:uqzpqmrjnptsxezjx4xuh2mn',
-      handle: 'syui.ai',
+      did: adminDid,
+      handle: new URL(appHost).hostname,
       accessJwt: accessJwt,
       refreshJwt: refreshJwt
     };
     
     localStorage.setItem('atproto_session', JSON.stringify(session));
-    console.log('Manual tokens stored in localStorage for backward compatibility');
+
   }
 
   // 後方互換性のための従来関数
   saveSessionToStorage(session: AtprotoSession): void {
-    console.warn('saveSessionToStorage is deprecated with BrowserOAuthClient');
+
     localStorage.setItem('atproto_session', JSON.stringify(session));
   }
 

oauth/src/tests/console-test.ts

@@ -0,0 +1,135 @@
+// Simple console test for OAuth app
+// This runs before 'npm run preview' to display test results
+
+// Mock import.meta.env for Node.js environment
+(global as any).import = {
+  meta: {
+    env: {
+      VITE_ATPROTO_PDS: process.env.VITE_ATPROTO_PDS || 'syu.is',
+      VITE_ADMIN_HANDLE: process.env.VITE_ADMIN_HANDLE || 'ai.syui.ai',
+      VITE_AI_HANDLE: process.env.VITE_AI_HANDLE || 'ai.syui.ai',
+      VITE_OAUTH_COLLECTION: process.env.VITE_OAUTH_COLLECTION || 'ai.syui.log',
+      VITE_ATPROTO_HANDLE_LIST: process.env.VITE_ATPROTO_HANDLE_LIST || '["syui.ai", "ai.syui.ai", "yui.syui.ai"]',
+      VITE_APP_HOST: process.env.VITE_APP_HOST || 'https://log.syui.ai'
+    }
+  }
+};
+
+// Simple implementation of functions for testing
+function detectPdsFromHandle(handle: string): string {
+  if (handle.endsWith('.syu.is') || handle.endsWith('.syui.ai')) {
+    return 'syu.is';
+  }
+  if (handle.endsWith('.bsky.social')) {
+    return 'bsky.social';
+  }
+  // Default case - check if it's in the allowed list
+  const allowedHandles = JSON.parse((global as any).import.meta.env.VITE_ATPROTO_HANDLE_LIST || '[]');
+  if (allowedHandles.includes(handle)) {
+    return (global as any).import.meta.env.VITE_ATPROTO_PDS || 'syu.is';
+  }
+  return 'bsky.social';
+}
+
+function getNetworkConfig(pds: string) {
+  switch (pds) {
+    case 'bsky.social':
+    case 'bsky.app':
+      return {
+        pdsApi: `https://${pds}`,
+        plcApi: 'https://plc.directory',
+        bskyApi: 'https://public.api.bsky.app',
+        webUrl: 'https://bsky.app'
+      };
+    case 'syu.is':
+      return {
+        pdsApi: 'https://syu.is',
+        plcApi: 'https://plc.syu.is',
+        bskyApi: 'https://bsky.syu.is',
+        webUrl: 'https://web.syu.is'
+      };
+    default:
+      return {
+        pdsApi: `https://${pds}`,
+        plcApi: 'https://plc.directory',
+        bskyApi: 'https://public.api.bsky.app',
+        webUrl: 'https://bsky.app'
+      };
+  }
+}
+
+// Main test execution
+console.log('\n=== OAuth App Configuration Tests ===\n');
+
+// Test 1: Handle input behavior
+console.log('1. Handle Input → PDS Detection:');
+const testHandles = [
+  'syui.ai',
+  'syui.syu.is', 
+  'syui.syui.ai',
+  'test.bsky.social',
+  'unknown.handle'
+];
+
+testHandles.forEach(handle => {
+  const pds = detectPdsFromHandle(handle);
+  const config = getNetworkConfig(pds);
+  console.log(`   ${handle.padEnd(20)} → PDS: ${pds.padEnd(12)} → API: ${config.pdsApi}`);
+});
+
+// Test 2: Environment variable impact
+console.log('\n2. Current Environment Configuration:');
+const env = (global as any).import.meta.env;
+console.log(`   VITE_ATPROTO_PDS:      ${env.VITE_ATPROTO_PDS}`);
+console.log(`   VITE_ADMIN_HANDLE:     ${env.VITE_ADMIN_HANDLE}`);
+console.log(`   VITE_AI_HANDLE:        ${env.VITE_AI_HANDLE}`);
+console.log(`   VITE_OAUTH_COLLECTION: ${env.VITE_OAUTH_COLLECTION}`);
+console.log(`   VITE_ATPROTO_HANDLE_LIST: ${env.VITE_ATPROTO_HANDLE_LIST}`);
+
+// Test 3: API endpoint generation
+console.log('\n3. Generated API Endpoints:');
+const adminPds = detectPdsFromHandle(env.VITE_ADMIN_HANDLE);
+const adminConfig = getNetworkConfig(adminPds);
+console.log(`   Admin PDS detection: ${env.VITE_ADMIN_HANDLE} → ${adminPds}`);
+console.log(`   Admin API endpoints:`);
+console.log(`     - PDS API:  ${adminConfig.pdsApi}`);
+console.log(`     - Bsky API: ${adminConfig.bskyApi}`);
+console.log(`     - Web URL:  ${adminConfig.webUrl}`);
+
+// Test 4: Collection URLs
+console.log('\n4. Collection API URLs:');
+const baseCollection = env.VITE_OAUTH_COLLECTION;
+console.log(`   User list: ${adminConfig.pdsApi}/xrpc/com.atproto.repo.listRecords?repo=${env.VITE_ADMIN_HANDLE}&collection=${baseCollection}.user`);
+console.log(`   Chat:      ${adminConfig.pdsApi}/xrpc/com.atproto.repo.listRecords?repo=${env.VITE_ADMIN_HANDLE}&collection=${baseCollection}.chat`);
+console.log(`   Lang:      ${adminConfig.pdsApi}/xrpc/com.atproto.repo.listRecords?repo=${env.VITE_ADMIN_HANDLE}&collection=${baseCollection}.chat.lang`);
+console.log(`   Comment:   ${adminConfig.pdsApi}/xrpc/com.atproto.repo.listRecords?repo=${env.VITE_ADMIN_HANDLE}&collection=${baseCollection}.chat.comment`);
+
+// Test 5: OAuth routing logic
+console.log('\n5. OAuth Authorization Logic:');
+const allowedHandles = JSON.parse(env.VITE_ATPROTO_HANDLE_LIST || '[]');
+console.log(`   Allowed handles: ${JSON.stringify(allowedHandles)}`);
+console.log(`   OAuth scenarios:`);
+
+const oauthTestCases = [
+  'syui.ai',         // Should use syu.is (in allowed list)
+  'test.syu.is',     // Should use syu.is (*.syu.is pattern)
+  'user.bsky.social' // Should use bsky.social (default)
+];
+
+oauthTestCases.forEach(handle => {
+  const pds = detectPdsFromHandle(handle);
+  const isAllowed = allowedHandles.includes(handle);
+  const reason = handle.endsWith('.syu.is') ? '*.syu.is pattern' : 
+                 isAllowed ? 'in allowed list' : 
+                 'default';
+  console.log(`     ${handle.padEnd(20)} → https://${pds}/oauth/authorize (${reason})`);
+});
+
+// Test 6: AI Profile Resolution
+console.log('\n6. AI Profile Resolution:');
+const aiPds = detectPdsFromHandle(env.VITE_AI_HANDLE);
+const aiConfig = getNetworkConfig(aiPds);
+console.log(`   AI Handle: ${env.VITE_AI_HANDLE} → PDS: ${aiPds}`);
+console.log(`   AI Profile API: ${aiConfig.bskyApi}/xrpc/app.bsky.actor.getProfile?actor=${env.VITE_AI_HANDLE}`);
+
+console.log('\n=== Tests Complete ===\n');

oauth/src/tests/oauth.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { getAppConfig } from '../config/app';
+import { detectPdsFromHandle, getNetworkConfig } from '../App';
+
+// Test helper to mock environment variables
+const mockEnv = (vars: Record<string, string>) => {
+  Object.keys(vars).forEach(key => {
+    (import.meta.env as any)[key] = vars[key];
+  });
+};
+
+describe('OAuth App Tests', () => {
+  describe('Handle Input Behavior', () => {
+    it('should detect PDS for syui.ai (Bluesky)', () => {
+      const pds = detectPdsFromHandle('syui.ai');
+      expect(pds).toBe('bsky.social');
+    });
+
+    it('should detect PDS for syui.syu.is (syu.is)', () => {
+      const pds = detectPdsFromHandle('syui.syu.is');
+      expect(pds).toBe('syu.is');
+    });
+
+    it('should detect PDS for syui.syui.ai (syu.is)', () => {
+      const pds = detectPdsFromHandle('syui.syui.ai');
+      expect(pds).toBe('syu.is');
+    });
+
+    it('should use network config for different PDS', () => {
+      const bskyConfig = getNetworkConfig('bsky.social');
+      expect(bskyConfig.pdsApi).toBe('https://bsky.social');
+      expect(bskyConfig.bskyApi).toBe('https://public.api.bsky.app');
+      expect(bskyConfig.webUrl).toBe('https://bsky.app');
+
+      const syuisConfig = getNetworkConfig('syu.is');
+      expect(syuisConfig.pdsApi).toBe('https://syu.is');
+      expect(syuisConfig.bskyApi).toBe('https://bsky.syu.is');
+      expect(syuisConfig.webUrl).toBe('https://web.syu.is');
+    });
+  });
+
+  describe('Environment Variable Changes', () => {
+    beforeEach(() => {
+      // Reset environment variables
+      delete (import.meta.env as any).VITE_ATPROTO_PDS;
+      delete (import.meta.env as any).VITE_ADMIN_HANDLE;
+      delete (import.meta.env as any).VITE_AI_HANDLE;
+    });
+
+    it('should use correct PDS for AI profile', () => {
+      mockEnv({
+        VITE_ATPROTO_PDS: 'syu.is',
+        VITE_ADMIN_HANDLE: 'ai.syui.ai',
+        VITE_AI_HANDLE: 'ai.syui.ai'
+      });
+
+      const config = getAppConfig();
+      expect(config.atprotoPds).toBe('syu.is');
+      expect(config.adminHandle).toBe('ai.syui.ai');
+      expect(config.aiHandle).toBe('ai.syui.ai');
+
+      // Network config should use syu.is endpoints
+      const networkConfig = getNetworkConfig(config.atprotoPds);
+      expect(networkConfig.bskyApi).toBe('https://bsky.syu.is');
+    });
+
+    it('should construct correct API requests for admin userlist', () => {
+      mockEnv({
+        VITE_ATPROTO_PDS: 'syu.is',
+        VITE_ADMIN_HANDLE: 'ai.syui.ai',
+        VITE_OAUTH_COLLECTION: 'ai.syui.log'
+      });
+
+      const config = getAppConfig();
+      const networkConfig = getNetworkConfig(config.atprotoPds);
+      const userListUrl = `${networkConfig.pdsApi}/xrpc/com.atproto.repo.listRecords?repo=${config.adminHandle}&collection=${config.collections.base}.user`;
+      
+      expect(userListUrl).toBe('https://syu.is/xrpc/com.atproto.repo.listRecords?repo=ai.syui.ai&collection=ai.syui.log.user');
+    });
+  });
+
+  describe('OAuth Login Flow', () => {
+    it('should use syu.is OAuth for handles in VITE_ATPROTO_HANDLE_LIST', () => {
+      mockEnv({
+        VITE_ATPROTO_HANDLE_LIST: '["syui.ai", "ai.syui.ai", "yui.syui.ai"]',
+        VITE_ATPROTO_PDS: 'syu.is'
+      });
+
+      const config = getAppConfig();
+      const handle = 'syui.ai';
+      
+      // Check if handle is in allowed list
+      expect(config.allowedHandles).toContain(handle);
+      
+      // Should use configured PDS for OAuth
+      const expectedAuthUrl = `https://${config.atprotoPds}/oauth/authorize`;
+      expect(expectedAuthUrl).toContain('syu.is');
+    });
+
+    it('should use syu.is OAuth for *.syu.is handles', () => {
+      const handle = 'test.syu.is';
+      const pds = detectPdsFromHandle(handle);
+      expect(pds).toBe('syu.is');
+    });
+  });
+});
+
+// Terminal display test output
+export function runTerminalTests() {
+  console.log('\n=== OAuth App Tests ===\n');
+  
+  // Test 1: Handle input behavior
+  console.log('1. Handle Input Detection:');
+  const handles = ['syui.ai', 'syui.syu.is', 'syui.syui.ai'];
+  handles.forEach(handle => {
+    const pds = detectPdsFromHandle(handle);
+    console.log(`   ${handle} → PDS: ${pds}`);
+  });
+  
+  // Test 2: Environment variable impact
+  console.log('\n2. Environment Variables:');
+  const config = getAppConfig();
+  console.log(`   VITE_ATPROTO_PDS: ${config.atprotoPds}`);
+  console.log(`   VITE_ADMIN_HANDLE: ${config.adminHandle}`);
+  console.log(`   VITE_AI_HANDLE: ${config.aiHandle}`);
+  console.log(`   VITE_OAUTH_COLLECTION: ${config.collections.base}`);
+  
+  // Test 3: API endpoints
+  console.log('\n3. API Endpoints:');
+  const networkConfig = getNetworkConfig(config.atprotoPds);
+  console.log(`   Admin PDS API: ${networkConfig.pdsApi}`);
+  console.log(`   Admin Bsky API: ${networkConfig.bskyApi}`);
+  console.log(`   User list URL: ${networkConfig.pdsApi}/xrpc/com.atproto.repo.listRecords?repo=${config.adminHandle}&collection=${config.collections.base}.user`);
+  
+  // Test 4: OAuth routing
+  console.log('\n4. OAuth Routing:');
+  console.log(`   Allowed handles: ${JSON.stringify(config.allowedHandles)}`);
+  console.log(`   OAuth endpoint: https://${config.atprotoPds}/oauth/authorize`);
+  
+  console.log('\n=== End Tests ===\n');
+}

oauth/src/utils/oauth-endpoints.ts

@@ -53,7 +53,6 @@ export class OAuthEndpointHandler {
               }
             });
           } catch (error) {
-            console.error('Failed to generate JWKS:', error);
             return new Response(JSON.stringify({ error: 'Failed to generate JWKS' }), {
               status: 500,
               headers: { 'Content-Type': 'application/json' }
@@ -62,7 +61,6 @@ export class OAuthEndpointHandler {
         }
       } catch (e) {
         // If URL parsing fails, pass through to original fetch
-        console.debug('URL parsing failed, passing through:', e);
       }
       
       // Pass through all other requests
@@ -136,6 +134,5 @@ export function registerOAuthServiceWorker() {
     const blob = new Blob([swCode], { type: 'application/javascript' });
     const swUrl = URL.createObjectURL(blob);
     
-    navigator.serviceWorker.register(swUrl).catch(console.error);
   }
 }

oauth/src/utils/oauth-keys.ts

@@ -37,7 +37,6 @@ export class OAuthKeyManager {
         this.keyPair = await this.importKeyPair(keyData);
         return this.keyPair;
       } catch (error) {
-        console.warn('Failed to load stored key, generating new one:', error);
         localStorage.removeItem('oauth_private_key');
       }
     }
@@ -115,7 +114,6 @@ export class OAuthKeyManager {
       const privateKey = await window.crypto.subtle.exportKey('jwk', keyPair.privateKey);
       localStorage.setItem('oauth_private_key', JSON.stringify(privateKey));
     } catch (error) {
-      console.error('Failed to store private key:', error);
     }
   }
 

oauth/src/utils/pds-detection.ts

@@ -0,0 +1,348 @@
+// PDS Detection and API URL mapping utilities
+
+import { isValidDid, isValidHandle } from './validation';
+
+export interface NetworkConfig {
+  pdsApi: string;
+  plcApi: string;
+  bskyApi: string;
+  webUrl: string;
+}
+
+// Detect PDS from handle
+export function detectPdsFromHandle(handle: string): string {
+  // Get allowed handles from environment
+  const allowedHandlesStr = import.meta.env.VITE_ATPROTO_HANDLE_LIST || '[]';
+  let allowedHandles: string[] = [];
+  try {
+    allowedHandles = JSON.parse(allowedHandlesStr);
+  } catch {
+    allowedHandles = [];
+  }
+  
+  // Get configured PDS from environment
+  const configuredPds = import.meta.env.VITE_ATPROTO_PDS || 'syu.is';
+  
+  // Check if handle is in allowed list
+  if (allowedHandles.includes(handle)) {
+    return configuredPds;
+  }
+  
+  // Check if handle ends with .syu.is or .syui.ai
+  if (handle.endsWith('.syu.is') || handle.endsWith('.syui.ai')) {
+    return 'syu.is';
+  }
+  
+  // Check if handle ends with .bsky.social or .bsky.app
+  if (handle.endsWith('.bsky.social') || handle.endsWith('.bsky.app')) {
+    return 'bsky.social';
+  }
+  
+  // Default to Bluesky for unknown domains
+  return 'bsky.social';
+}
+
+// Map PDS endpoint to network configuration
+export function getNetworkConfigFromPdsEndpoint(pdsEndpoint: string): NetworkConfig {
+  try {
+    const url = new URL(pdsEndpoint);
+    const hostname = url.hostname;
+    
+    // Map based on actual PDS endpoint
+    if (hostname === 'syu.is') {
+      return {
+        pdsApi: 'https://syu.is',           // PDS API (repo operations)
+        plcApi: 'https://plc.syu.is',       // PLC directory
+        bskyApi: 'https://bsky.syu.is',     // Bluesky API (getProfile, etc.)
+        webUrl: 'https://web.syu.is'        // Web interface
+      };
+    } else if (hostname.includes('bsky.network') || hostname === 'bsky.social' || hostname.includes('host.bsky.network')) {
+      // All Bluesky infrastructure (including *.host.bsky.network)
+      return {
+        pdsApi: pdsEndpoint,                      // Use actual PDS endpoint (e.g., shiitake.us-east.host.bsky.network)
+        plcApi: 'https://plc.directory',          // Standard PLC directory
+        bskyApi: 'https://public.api.bsky.app',   // Bluesky public API (NOT PDS)
+        webUrl: 'https://bsky.app'                // Bluesky web interface
+      };
+    } else {
+      // Unknown PDS, assume Bluesky-compatible but use PDS for repo operations
+      return {
+        pdsApi: pdsEndpoint,                      // Use actual PDS for repo ops
+        plcApi: 'https://plc.directory',          // Default PLC
+        bskyApi: 'https://public.api.bsky.app',   // Default to Bluesky API
+        webUrl: 'https://bsky.app'                // Default web interface
+      };
+    }
+  } catch (error) {
+    // Fallback for invalid URLs
+    return {
+      pdsApi: 'https://bsky.social',
+      plcApi: 'https://plc.directory',
+      bskyApi: 'https://public.api.bsky.app',
+      webUrl: 'https://bsky.app'
+    };
+  }
+}
+
+// Legacy function for backwards compatibility
+export function getNetworkConfig(pds: string): NetworkConfig {
+  // This now assumes pds is a hostname
+  return getNetworkConfigFromPdsEndpoint(`https://${pds}`);
+}
+
+// Get appropriate API URL for a user based on their handle
+export function getApiUrlForUser(handle: string): string {
+  const pds = detectPdsFromHandle(handle);
+  const config = getNetworkConfig(pds);
+  return config.bskyApi;
+}
+
+// Resolve handle/DID to actual PDS endpoint using PLC API first
+export async function resolvePdsFromRepo(handleOrDid: string): Promise<{ pds: string; did: string; handle: string }> {
+  // Validate input
+  if (!handleOrDid || (!isValidDid(handleOrDid) && !isValidHandle(handleOrDid))) {
+    throw new Error(`Invalid identifier: ${handleOrDid}`);
+  }
+  
+  let targetDid = handleOrDid;
+  let targetHandle = handleOrDid;
+  
+  // If handle provided, resolve to DID first using identity.resolveHandle
+  if (!handleOrDid.startsWith('did:')) {
+    try {
+      // Try multiple endpoints for handle resolution
+      const resolveEndpoints = ['https://public.api.bsky.app', 'https://bsky.syu.is', 'https://syu.is'];
+      let resolved = false;
+      
+      for (const endpoint of resolveEndpoints) {
+        try {
+          const resolveResponse = await fetch(`${endpoint}/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handleOrDid)}`);
+          if (resolveResponse.ok) {
+            const resolveData = await resolveResponse.json();
+            targetDid = resolveData.did;
+            resolved = true;
+            break;
+          }
+        } catch (error) {
+          continue;
+        }
+      }
+      
+      if (!resolved) {
+        throw new Error('Handle resolution failed from all endpoints');
+      }
+    } catch (error) {
+      throw new Error(`Failed to resolve handle ${handleOrDid} to DID: ${error}`);
+    }
+  }
+  
+  // First, try PLC API to get the authoritative DID document
+  const plcApis = ['https://plc.directory', 'https://plc.syu.is'];
+  
+  for (const plcApi of plcApis) {
+    try {
+      const plcResponse = await fetch(`${plcApi}/${targetDid}`);
+      if (plcResponse.ok) {
+        const didDocument = await plcResponse.json();
+        
+        // Find PDS service in DID document
+        const pdsService = didDocument.service?.find((s: any) => 
+          s.id === '#atproto_pds' || s.type === 'AtprotoPersonalDataServer'
+        );
+        
+        if (pdsService && pdsService.serviceEndpoint) {
+          return {
+            pds: pdsService.serviceEndpoint,
+            did: targetDid,
+            handle: targetHandle
+          };
+        }
+      }
+    } catch (error) {
+      continue;
+    }
+  }
+  
+  // Fallback: use com.atproto.repo.describeRepo to get PDS from known PDS endpoints
+  const pdsEndpoints = ['https://bsky.social', 'https://syu.is'];
+  
+  for (const pdsEndpoint of pdsEndpoints) {
+    try {
+      const response = await fetch(`${pdsEndpoint}/xrpc/com.atproto.repo.describeRepo?repo=${encodeURIComponent(targetDid)}`);
+      
+      if (response.ok) {
+        const data = await response.json();
+        
+        // Extract PDS from didDoc.service
+        const services = data.didDoc?.service || [];
+        const pdsService = services.find((s: any) => 
+          s.id === '#atproto_pds' || s.type === 'AtprotoPersonalDataServer'
+        );
+        
+        if (pdsService) {
+          return {
+            pds: pdsService.serviceEndpoint,
+            did: data.did || targetDid,
+            handle: data.handle || targetHandle
+          };
+        }
+      }
+    } catch (error) {
+      continue;
+    }
+  }
+  
+  throw new Error(`Failed to resolve PDS for ${handleOrDid} from any endpoint`);
+}
+
+// Resolve DID to actual PDS endpoint using com.atproto.repo.describeRepo
+export async function resolvePdsFromDid(did: string): Promise<string> {
+  const resolved = await resolvePdsFromRepo(did);
+  return resolved.pds;
+}
+
+// Enhanced resolve handle to DID with proper PDS detection
+export async function resolveHandleToDid(handle: string): Promise<{ did: string; pds: string }> {
+  try {
+    // First, try to resolve the handle to DID using multiple methods
+    const apiUrl = getApiUrlForUser(handle);
+    const response = await fetch(`${apiUrl}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to resolve handle: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    const did = data.did;
+    
+    // Now resolve the actual PDS from the DID
+    const actualPds = await resolvePdsFromDid(did);
+    
+    return {
+      did: did,
+      pds: actualPds
+    };
+  } catch (error) {
+    // Failed to resolve handle
+    
+    // Fallback to handle-based detection
+    const fallbackPds = detectPdsFromHandle(handle);
+    throw error;
+  }
+}
+
+// Get profile using appropriate API for the user with accurate PDS resolution
+export async function getProfileForUser(handleOrDid: string, knownPdsEndpoint?: string): Promise<any> {
+  try {
+    let apiUrl: string;
+    
+    if (knownPdsEndpoint) {
+      // If we already know the user's PDS endpoint, use it directly
+      const config = getNetworkConfigFromPdsEndpoint(knownPdsEndpoint);
+      apiUrl = config.bskyApi;
+    } else {
+      // Resolve the user's actual PDS using describeRepo
+      try {
+        const resolved = await resolvePdsFromRepo(handleOrDid);
+        const config = getNetworkConfigFromPdsEndpoint(resolved.pds);
+        apiUrl = config.bskyApi;
+      } catch {
+        // Fallback to handle-based detection
+        apiUrl = getApiUrlForUser(handleOrDid);
+      }
+    }
+    
+    const response = await fetch(`${apiUrl}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handleOrDid)}`);
+    if (!response.ok) {
+      throw new Error(`Failed to get profile: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (error) {
+    // Failed to get profile
+    
+    // Final fallback: try with default Bluesky API
+    try {
+      const response = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handleOrDid)}`);
+      if (response.ok) {
+        return await response.json();
+      }
+    } catch {
+      // Ignore fallback errors
+    }
+    
+    throw error;
+  }
+}
+
+// Test and verify PDS detection methods
+export async function verifyPdsDetection(handleOrDid: string): Promise<void> {
+  try {
+    // Method 1: com.atproto.repo.describeRepo (PRIMARY METHOD)
+    try {
+      const resolved = await resolvePdsFromRepo(handleOrDid);
+      const config = getNetworkConfigFromPdsEndpoint(resolved.pds);
+    } catch (error) {
+      // describeRepo failed
+    }
+    
+    // Method 2: com.atproto.identity.resolveHandle (for comparison)
+    if (!handleOrDid.startsWith('did:')) {
+      try {
+        const resolveResponse = await fetch(`https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handleOrDid)}`);
+        if (resolveResponse.ok) {
+          const resolveData = await resolveResponse.json();
+        }
+      } catch (error) {
+        // Error resolving handle
+      }
+    }
+    
+    // Method 3: PLC Directory lookup (if we have a DID)
+    let targetDid = handleOrDid;
+    if (!handleOrDid.startsWith('did:')) {
+      try {
+        const profile = await getProfileForUser(handleOrDid);
+        targetDid = profile.did;
+      } catch {
+        return;
+      }
+    }
+    
+    try {
+      const plcResponse = await fetch(`https://plc.directory/${targetDid}`);
+      if (plcResponse.ok) {
+        const didDocument = await plcResponse.json();
+        
+        // Find PDS service
+        const pdsService = didDocument.service?.find((s: any) => 
+          s.id === '#atproto_pds' || s.type === 'AtprotoPersonalDataServer'
+        );
+        
+        if (pdsService) {
+          // Try to detect if this is a known network
+          const pdsUrl = pdsService.serviceEndpoint;
+          const hostname = new URL(pdsUrl).hostname;
+          const detectedNetwork = detectPdsFromHandle(`user.${hostname}`);
+          const networkConfig = getNetworkConfig(hostname);
+        }
+      }
+    } catch (error) {
+      // Error fetching from PLC directory
+    }
+    
+    // Method 4: Our enhanced resolution
+    try {
+      if (handleOrDid.startsWith('did:')) {
+        const pdsEndpoint = await resolvePdsFromDid(handleOrDid);
+      } else {
+        const resolved = await resolveHandleToDid(handleOrDid);
+      }
+    } catch (error) {
+      // Enhanced resolution failed
+    }
+    
+  } catch (error) {
+    // Overall verification failed
+  }
+}

oauth/src/utils/validation.ts

@@ -0,0 +1,21 @@
+// Validation utilities for atproto identifiers
+
+export function isValidDid(did: string): boolean {
+  if (!did || typeof did !== 'string') return false;
+  
+  // Basic DID format: did:method:identifier
+  const didRegex = /^did:[a-z]+:[a-zA-Z0-9._%-]+$/;
+  return didRegex.test(did);
+}
+
+export function isValidHandle(handle: string): boolean {
+  if (!handle || typeof handle !== 'string') return false;
+  
+  // Basic handle format: subdomain.domain.tld
+  const handleRegex = /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/;
+  return handleRegex.test(handle);
+}
+
+export function isValidAtprotoIdentifier(identifier: string): boolean {
+  return isValidDid(identifier) || isValidHandle(identifier);
+}

oauth_new/.env

@@ -0,0 +1,6 @@
+VITE_ADMIN=ai.syui.ai
+VITE_PDS=syu.is
+VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai", "ai.ai"]
+VITE_COLLECTION=ai.syui.log
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback

oauth_new/DEVELOPMENT.md

@@ -0,0 +1,334 @@
+# 開発ガイド
+
+## 設計思想
+
+このプロジェクトは以下の原則に基づいて設計されています：
+
+### 1. 環境変数による設定の外部化
+- ハードコードを避け、設定は全て環境変数で管理
+- `src/config/env.js` で一元管理
+
+### 2. PDS（Personal Data Server）の自動判定
+- `VITE_HANDLE_LIST` と `VITE_PDS` による自動判定
+- syu.is系とbsky.social系の自動振り分け
+
+### 3. コンポーネントの責任分離
+- Hooks: ビジネスロジック
+- Components: UI表示のみ
+- Services: 外部API連携
+- Utils: 純粋関数
+
+## アーキテクチャ詳細
+
+### データフロー
+
+```
+User Input
+    ↓
+Hooks (useAuth, useAdminData, usePageContext)
+    ↓
+Services (OAuthService)
+    ↓
+API (atproto.js)
+    ↓
+ATProto Network
+    ↓
+Components (UI Display)
+```
+
+### 状態管理
+
+React Hooksによる状態管理：
+- `useAuth`: OAuth認証状態
+- `useAdminData`: 管理者データ（プロフィール、レコード）
+- `usePageContext`: ページ判定（トップ/個別）
+
+### OAuth認証フロー
+
+```
+1. ユーザーがハンドル入力
+2. PDS判定 (syu.is vs bsky.social)
+3. 適切なOAuthClientを選択
+4. 標準OAuth画面にリダイレクト
+5. 認証完了後コールバック処理
+6. セッション復元・保存
+```
+
+## 重要な実装詳細
+
+### セッション管理
+
+`@atproto/oauth-client-browser`が自動的に以下を処理：
+- IndexedDBへのセッション保存
+- トークンの自動更新
+- DPoP（Demonstration of Proof of Possession）
+
+**注意**: 手動でのセッション管理は複雑なため、公式ライブラリを使用すること。
+
+### PDS判定アルゴリズム
+
+```javascript
+// src/utils/pds.js
+function isSyuIsHandle(handle) {
+  return env.handleList.includes(handle) || handle.endsWith(`.${env.pds}`)
+}
+```
+
+1. `VITE_HANDLE_LIST` に含まれるハンドル → syu.is
+2. `.syu.is` で終わるハンドル → syu.is  
+3. その他 → bsky.social
+
+### レコードフィルタリング
+
+```javascript
+// src/components/RecordTabs.jsx
+const filterRecords = (records) => {
+  if (pageContext.isTopPage) {
+    return records.slice(0, 3) // 最新3件
+  } else {
+    // URL のrkey と record.value.post.url のrkey を照合
+    return records.filter(record => {
+      const recordRkey = new URL(record.value.post.url).pathname.split('/').pop()?.replace(/\.html$/, '')
+      return recordRkey === pageContext.rkey
+    })
+  }
+}
+```
+
+## 開発時の注意点
+
+### 1. 環境変数の命名
+
+- `VITE_` プレフィックス必須（Viteの制約）
+- JSON形式の環境変数は文字列として定義
+
+```bash
+# ❌ 間違い
+VITE_HANDLE_LIST=["ai.syui.ai"]
+
+# ✅ 正しい  
+VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai"]
+```
+
+### 2. API エラーハンドリング
+
+```javascript
+// src/api/atproto.js
+async function request(url) {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`)
+  }
+  return await response.json()
+}
+```
+
+すべてのAPI呼び出しでエラーハンドリングを実装。
+
+### 3. コンポーネント設計
+
+```javascript
+// ❌ Bad: ビジネスロジックがコンポーネント内
+function MyComponent() {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    fetch('/api/data').then(setData)
+  }, [])
+  return <div>{data.map(...)}</div>
+}
+
+// ✅ Good: Hooksでロジック分離
+function MyComponent() {
+  const { data, loading, error } = useMyData()
+  if (loading) return <Loading />
+  if (error) return <Error />
+  return <div>{data.map(...)}</div>
+}
+```
+
+## デバッグ手法
+
+### 1. OAuth デバッグ
+
+```javascript
+// ブラウザの開発者ツールで確認
+localStorage.clear()          // セッションクリア
+sessionStorage.clear()        // 一時データクリア
+
+// IndexedDB確認（Application タブ）
+// ATProtoの認証データが保存される
+```
+
+### 2. PDS判定デバッグ
+
+```javascript
+// src/utils/pds.js にログ追加
+console.log('Handle:', handle)
+console.log('Is syu.is:', isSyuIsHandle(handle))
+console.log('API Config:', getApiConfig(pds))
+```
+
+### 3. レコードフィルタリングデバッグ
+
+```javascript
+// src/components/RecordTabs.jsx
+console.log('Page Context:', pageContext)
+console.log('All Records:', records.length)
+console.log('Filtered Records:', filteredRecords.length)
+```
+
+## パフォーマンス最適化
+
+### 1. 並列データ取得
+
+```javascript
+// src/hooks/useAdminData.js
+const [records, lang, comment] = await Promise.all([
+  collections.getBase(apiConfig.pds, did, env.collection),
+  collections.getLang(apiConfig.pds, did, env.collection),
+  collections.getComment(apiConfig.pds, did, env.collection)
+])
+```
+
+### 2. 不要な再レンダリング防止
+
+```javascript
+// useMemo でフィルタリング結果をキャッシュ
+const filteredRecords = useMemo(() => 
+  filterRecords(records), 
+  [records, pageContext]
+)
+```
+
+## テスト戦略
+
+### 1. 単体テスト推奨対象
+
+- `src/utils/pds.js` - PDS判定ロジック
+- `src/config/env.js` - 環境変数パース
+- フィルタリング関数
+
+### 2. 統合テスト推奨対象
+
+- OAuth認証フロー
+- API呼び出し
+- レコード表示
+
+## デプロイメント
+
+### 1. 必要ファイル
+
+```
+public/
+└── client-metadata.json    # OAuth設定ファイル
+
+dist/                       # ビルド出力
+├── index.html
+└── assets/
+    ├── comment-atproto-[hash].js
+    └── comment-atproto-[hash].css
+```
+
+### 2. デプロイ手順
+
+```bash
+# 1. 環境変数設定
+cp .env.example .env
+# 2. 本番用設定を記入
+# 3. ビルド
+npm run build
+# 4. dist/ フォルダをデプロイ
+```
+
+### 3. 本番環境チェックリスト
+
+- [ ] `.env` ファイルの本番設定
+- [ ] `client-metadata.json` の設置
+- [ ] HTTPS 必須（OAuth要件）
+- [ ] CSP（Content Security Policy）設定
+
+## よくある問題と解決法
+
+### 1. "OAuth initialization failed"
+
+**原因**: client-metadata.json が見つからない、または形式が正しくない
+
+**解決法**: 
+```bash
+# public/client-metadata.json の存在確認
+ls -la public/client-metadata.json
+
+# 形式確認（JSON validation）
+jq . public/client-metadata.json
+```
+
+### 2. "Failed to load admin data"
+
+**原因**: 管理者アカウントのDID解決に失敗
+
+**解決法**:
+```bash
+# 手動でDID解決確認
+curl "https://syu.is/xrpc/com.atproto.repo.describeRepo?repo=ai.syui.ai"
+```
+
+### 3. レコードが表示されない
+
+**原因**: コレクション名の不一致、権限不足
+
+**解決法**:
+```bash
+# コレクション確認
+curl "https://syu.is/xrpc/com.atproto.repo.listRecords?repo=did:plc:xxx&collection=ai.syui.log.chat.lang"
+```
+
+## 機能拡張ガイド
+
+### 1. 新しいコレクション追加
+
+```javascript
+// src/api/atproto.js に追加
+export const collections = {
+  // 既存...
+  async getNewCollection(pds, repo, collection, limit = 10) {
+    return await atproto.getRecords(pds, repo, `${collection}.new`, limit)
+  }
+}
+```
+
+### 2. 新しいPDS対応
+
+```javascript
+// src/utils/pds.js を拡張
+export function getApiConfig(pds) {
+  if (pds.includes('syu.is')) {
+    // 既存の syu.is 設定
+  } else if (pds.includes('newpds.com')) {
+    return {
+      pds: `https://newpds.com`,
+      bsky: `https://bsky.newpds.com`,
+      plc: `https://plc.newpds.com`,
+      web: `https://web.newpds.com`
+    }
+  }
+  // デフォルト設定
+}
+```
+
+### 3. リアルタイム更新追加
+
+```javascript
+// src/hooks/useRealtimeUpdates.js
+export function useRealtimeUpdates(collection) {
+  useEffect(() => {
+    const ws = new WebSocket('wss://jetstream2.us-east.bsky.network/subscribe')
+    ws.onmessage = (event) => {
+      const data = JSON.parse(event.data)
+      if (data.collection === collection) {
+        // 新しいレコードを追加
+      }
+    }
+    return () => ws.close()
+  }, [collection])
+}
+```

oauth_new/README.md

@@ -0,0 +1,222 @@
+# ATProto OAuth Comment System
+
+ATProtocol（Bluesky）のOAuth認証を使用したコメントシステムです。
+
+## プロジェクト概要
+
+このプロジェクトは、ATProtocolネットワーク上のコメントとlangレコードを表示するWebアプリケーションです。
+- 標準的なOAuth認証画面を使用
+- タブ切り替えでレコード表示
+- ページコンテキストに応じたフィルタリング
+
+## ファイル構成
+
+```
+src/
+├── config/
+│   └── env.js              # 環境変数の一元管理
+├── utils/
+│   └── pds.js              # PDS判定・API設定ユーティリティ
+├── api/
+│   └── atproto.js          # ATProto API クライアント
+├── hooks/
+│   ├── useAuth.js          # OAuth認証フック
+│   ├── useAdminData.js     # 管理者データ取得フック
+│   └── usePageContext.js   # ページ判定フック
+├── services/
+│   └── oauth.js            # OAuth認証サービス
+├── components/
+│   ├── AuthButton.jsx      # ログイン/ログアウトボタン
+│   ├── RecordTabs.jsx      # Lang/Commentタブ切り替え
+│   ├── RecordList.jsx      # レコード表示リスト
+│   ├── UserLookup.jsx      # ユーザー検索（未使用）
+│   └── OAuthCallback.jsx   # OAuth コールバック処理
+└── App.jsx                 # メインアプリケーション
+```
+
+## 環境設定
+
+### .env ファイル
+
+```bash
+VITE_ADMIN=ai.syui.ai                                    # 管理者ハンドル
+VITE_PDS=syu.is                                         # デフォルトPDS
+VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai", "ai.ai"] # syu.is系ハンドルリスト
+VITE_COLLECTION=ai.syui.log                             # ベースコレクション
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json # OAuth クライアントID
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback   # OAuth リダイレクトURI
+```
+
+### 必要な依存関係
+
+```json
+{
+  "dependencies": {
+    "@atproto/api": "^0.15.12",
+    "@atproto/oauth-client-browser": "^0.3.19",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
+```
+
+## 主要機能
+
+### 1. OAuth認証システム
+
+**実装場所**: `src/services/oauth.js`
+
+- `@atproto/oauth-client-browser`を使用した標準OAuth実装
+- bsky.social と syu.is 両方のPDSに対応
+- セッション自動復元機能
+
+**重要**: ATProtoのセッション管理は複雑なため、公式ライブラリの使用が必須です。
+
+### 2. PDS判定システム
+
+**実装場所**: `src/utils/pds.js`
+
+```javascript
+// ハンドル判定ロジック
+isSyuIsHandle(handle) → boolean
+// PDS設定取得
+getApiConfig(pds) → { pds, bsky, plc, web }
+```
+
+環境変数`VITE_HANDLE_LIST`と`VITE_PDS`を基に自動判定します。
+
+### 3. コレクション取得システム
+
+**実装場所**: `src/api/atproto.js`
+
+```javascript
+// 基本コレクション
+collections.getBase(pds, repo, collection)
+// lang コレクション（翻訳系）
+collections.getLang(pds, repo, collection) // → {collection}.chat.lang
+// comment コレクション（コメント系）
+collections.getComment(pds, repo, collection) // → {collection}.chat.comment
+```
+
+### 4. ページコンテキスト判定
+
+**実装場所**: `src/hooks/usePageContext.js`
+
+```javascript
+// URL解析結果
+{
+  isTopPage: boolean,     // トップページかどうか
+  rkey: string | null,    // 個別ページのrkey（/posts/xxx → xxx）
+  url: string             // 現在のURL
+}
+```
+
+## 表示ロジック
+
+### フィルタリング
+
+1. **トップページ**: 最新3件を表示
+2. **個別ページ**: `record.value.post.url`の rkey が現在ページと一致するもののみ表示
+
+### タブ切り替え
+
+- Lang Records: `{collection}.chat.lang`
+- Comment Records: `{collection}.chat.comment`
+
+## 開発・デバッグ
+
+### 起動コマンド
+
+```bash
+npm install
+npm run dev    # 開発サーバー
+npm run build  # プロダクションビルド
+```
+
+### OAuth デバッグ
+
+1. **ローカル開発**: 自動的にloopback clientが使用される
+2. **本番環境**: `client-metadata.json`が必要
+
+```json
+// public/client-metadata.json
+{
+  "client_id": "https://syui.ai/client-metadata.json",
+  "client_name": "ATProto Comment System",
+  "redirect_uris": ["https://syui.ai/oauth/callback"],
+  "scope": "atproto",
+  "grant_types": ["authorization_code", "refresh_token"],
+  "response_types": ["code"],
+  "token_endpoint_auth_method": "none",
+  "application_type": "web",
+  "dpop_bound_access_tokens": true
+}
+```
+
+### よくある問題
+
+1. **セッションが保存されない**
+   - `@atproto/oauth-client-browser`のバージョン確認
+   - IndexedDBの確認（ブラウザの開発者ツール）
+
+2. **PDS判定が正しく動作しない**
+   - `VITE_HANDLE_LIST`の JSON 形式を確認
+   - 環境変数の読み込み確認
+
+3. **レコードが表示されない**
+   - 管理者アカウントの DID 解決確認
+   - コレクション名の確認（`{base}.chat.lang`, `{base}.chat.comment`）
+
+## API エンドポイント
+
+### 使用しているATProto API
+
+1. **com.atproto.repo.describeRepo**
+   - ハンドル → DID, PDS解決
+
+2. **app.bsky.actor.getProfile**
+   - プロフィール情報取得
+
+3. **com.atproto.repo.listRecords**
+   - コレクションレコード取得
+
+## セキュリティ
+
+- OAuth 2.1 + PKCE による認証
+- DPoP (Demonstration of Proof of Possession) 対応
+- セッション情報はブラウザのIndexedDBに暗号化保存
+
+## 今後の拡張可能性
+
+1. **コメント投稿機能**
+   - 認証済みユーザーによるコメント作成
+   - `com.atproto.repo.putRecord` API使用
+
+2. **リアルタイム更新**
+   - Jetstream WebSocket 接続
+   - 新しいレコードの自動表示
+
+3. **マルチPDS対応**
+   - より多くのPDSへの対応
+   - 動的PDS判定の改善
+
+## トラブルシューティング
+
+### ログ確認
+ブラウザの開発者ツールでコンソールログを確認してください。主要なエラーは以下の通りです：
+
+- `OAuth initialization failed`: OAuth設定の問題
+- `Failed to load admin data`: API アクセスエラー
+- `Auth check failed`: セッション復元エラー
+
+### 環境変数確認
+```javascript
+// 開発者ツールのコンソールで確認
+console.log(import.meta.env)
+```
+
+## 参考資料
+
+- [ATProto OAuth Guide](https://github.com/bluesky-social/atproto/blob/main/packages/api/OAUTH.md)
+- [BrowserOAuthClient Documentation](https://github.com/bluesky-social/atproto/tree/main/packages/oauth-client-browser)
+- [ATProto API Reference](https://docs.bsky.app/docs/advanced-guides/atproto-api)

oauth_new/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Comments Test</title>
+</head>
+<body>
+  <div id="comment-atproto"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

oauth_new/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "oauth-simple",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@atproto/api": "^0.15.12",
+    "@atproto/oauth-client-browser": "^0.3.19"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^5.0.0"
+  }
+}

oauth_new/src/App.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { useAuth } from './hooks/useAuth.js'
+import { useAdminData } from './hooks/useAdminData.js'
+import { useUserData } from './hooks/useUserData.js'
+import { usePageContext } from './hooks/usePageContext.js'
+import AuthButton from './components/AuthButton.jsx'
+import RecordTabs from './components/RecordTabs.jsx'
+import CommentForm from './components/CommentForm.jsx'
+import OAuthCallback from './components/OAuthCallback.jsx'
+
+export default function App() {
+  const { user, agent, loading: authLoading, login, logout } = useAuth()
+  const { adminData, langRecords, commentRecords, loading: dataLoading, error, refresh: refreshAdminData } = useAdminData()
+  const { userComments, chatRecords, loading: userLoading, refresh: refreshUserData } = useUserData(adminData)
+  const pageContext = usePageContext()
+
+  // Handle OAuth callback
+  if (window.location.search.includes('code=')) {
+    return <OAuthCallback />
+  }
+
+  const isLoading = authLoading || dataLoading || userLoading
+
+  if (isLoading) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <h1>ATProto OAuth Demo</h1>
+        <p>読み込み中...</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <h1>ATProto OAuth Demo</h1>
+        <p style={{ color: 'red' }}>エラー: {error}</p>
+        <button onClick={() => window.location.reload()}>
+          再読み込み
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+      <header style={{ marginBottom: '20px' }}>
+        <h1>ATProto OAuth Demo</h1>
+        <AuthButton 
+          user={user} 
+          onLogin={login} 
+          onLogout={logout} 
+          loading={authLoading}
+        />
+      </header>
+
+      <CommentForm
+        user={user}
+        agent={agent}
+        onCommentPosted={() => {
+          refreshAdminData?.()
+          refreshUserData?.()
+        }}
+      />
+
+      <RecordTabs 
+        langRecords={langRecords}
+        commentRecords={commentRecords}
+        userComments={userComments}
+        chatRecords={chatRecords}
+        apiConfig={adminData.apiConfig}
+        pageContext={pageContext}
+      />
+    </div>
+  )
+}

oauth_new/src/api/atproto.js

@@ -0,0 +1,80 @@
+// ATProto API client
+const ENDPOINTS = {
+  describeRepo: 'com.atproto.repo.describeRepo',
+  getProfile: 'app.bsky.actor.getProfile',
+  listRecords: 'com.atproto.repo.listRecords',
+  putRecord: 'com.atproto.repo.putRecord'
+}
+
+async function request(url, options = {}) {
+  const response = await fetch(url, options)
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`)
+  }
+  return await response.json()
+}
+
+export const atproto = {
+  async getDid(pds, handle) {
+    const res = await request(`https://${pds}/xrpc/${ENDPOINTS.describeRepo}?repo=${handle}`)
+    return res.did
+  },
+
+  async getProfile(bsky, actor) {
+    return await request(`${bsky}/xrpc/${ENDPOINTS.getProfile}?actor=${actor}`)
+  },
+
+  async getRecords(pds, repo, collection, limit = 10) {
+    const res = await request(`${pds}/xrpc/${ENDPOINTS.listRecords}?repo=${repo}&collection=${collection}&limit=${limit}`)
+    return res.records || []
+  },
+
+  async searchPlc(plc, did) {
+    try {
+      const data = await request(`${plc}/${did}`)
+      return {
+        success: true,
+        endpoint: data?.service?.[0]?.serviceEndpoint || null,
+        handle: data?.alsoKnownAs?.[0]?.replace('at://', '') || null
+      }
+    } catch {
+      return { success: false, endpoint: null, handle: null }
+    }
+  },
+
+  async putRecord(pds, record, agent) {
+    if (!agent) {
+      throw new Error('Agent required for putRecord')
+    }
+    
+    // Use Agent's putRecord method instead of direct fetch
+    return await agent.com.atproto.repo.putRecord(record)
+  }
+}
+
+// Collection specific methods
+export const collections = {
+  async getBase(pds, repo, collection, limit = 10) {
+    return await atproto.getRecords(pds, repo, collection, limit)
+  },
+
+  async getLang(pds, repo, collection, limit = 10) {
+    return await atproto.getRecords(pds, repo, `${collection}.chat.lang`, limit)
+  },
+
+  async getComment(pds, repo, collection, limit = 10) {
+    return await atproto.getRecords(pds, repo, `${collection}.chat.comment`, limit)
+  },
+
+  async getChat(pds, repo, collection, limit = 10) {
+    return await atproto.getRecords(pds, repo, `${collection}.chat`, limit)
+  },
+
+  async getUserList(pds, repo, collection, limit = 100) {
+    return await atproto.getRecords(pds, repo, `${collection}.user`, limit)
+  },
+
+  async getUserComments(pds, repo, collection, limit = 10) {
+    return await atproto.getRecords(pds, repo, collection, limit)
+  }
+}

oauth_new/src/components/AuthButton.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+
+export default function AuthButton({ user, onLogin, onLogout, loading }) {
+  const [handleInput, setHandleInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!handleInput.trim() || isLoading) return
+
+    setIsLoading(true)
+    try {
+      await onLogin(handleInput.trim())
+    } catch (error) {
+      console.error('Login failed:', error)
+      alert('ログインに失敗しました: ' + error.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div>認証状態を確認中...</div>
+  }
+
+  if (user) {
+    return (
+      <div className="auth-status">
+        <div>ログイン中: <strong>{user.handle}</strong></div>
+        <button onClick={onLogout} className="logout-btn">
+          ログアウト
+        </button>
+        <style jsx>{`
+          .auth-status {
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background: #f9f9f9;
+          }
+          .logout-btn {
+            margin-top: 5px;
+            padding: 5px 10px;
+            background: #dc3545;
+            color: white;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  return (
+    <div className="auth-form">
+      <h3>OAuth認証</h3>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={handleInput}
+          onChange={(e) => setHandleInput(e.target.value)}
+          placeholder="Handle (e.g. your.handle.com)"
+          disabled={isLoading}
+          className="handle-input"
+        />
+        <button 
+          type="submit" 
+          disabled={isLoading || !handleInput.trim()}
+          className="login-btn"
+        >
+          {isLoading ? 'ログイン中...' : 'ログイン'}
+        </button>
+      </form>
+      <style jsx>{`
+        .auth-form {
+          padding: 10px;
+          border: 1px solid #ddd;
+          border-radius: 5px;
+        }
+        .handle-input {
+          width: 200px;
+          margin-right: 10px;
+          padding: 5px;
+          border: 1px solid #ccc;
+          border-radius: 3px;
+        }
+        .login-btn {
+          padding: 5px 10px;
+          background: #007bff;
+          color: white;
+          border: none;
+          border-radius: 3px;
+          cursor: pointer;
+        }
+        .login-btn:disabled {
+          background: #ccc;
+          cursor: not-allowed;
+        }
+      `}</style>
+    </div>
+  )
+}

oauth_new/src/components/CommentForm.jsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react'
+import { atproto } from '../api/atproto.js'
+import { env } from '../config/env.js'
+
+export default function CommentForm({ user, agent, onCommentPosted }) {
+  const [text, setText] = useState('')
+  const [url, setUrl] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!text.trim() || !url.trim()) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      // Create ai.syui.log record structure
+      const record = {
+        repo: user.did,
+        collection: env.collection,
+        rkey: `comment-${Date.now()}`,
+        record: {
+          $type: env.collection,
+          url: url.trim(),
+          comments: [
+            {
+              url: url.trim(),
+              text: text.trim(),
+              author: {
+                did: user.did,
+                handle: user.handle,
+                displayName: user.displayName,
+                avatar: user.avatar
+              },
+              createdAt: new Date().toISOString()
+            }
+          ],
+          createdAt: new Date().toISOString()
+        }
+      }
+
+      // Post the record
+      await atproto.putRecord(null, record, agent)
+
+      // Clear form
+      setText('')
+      setUrl('')
+
+      // Notify parent component
+      if (onCommentPosted) {
+        onCommentPosted()
+      }
+
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!user) {
+    return (
+      <div className="comment-form-placeholder">
+        <p>ログインしてコメントを投稿</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="comment-form">
+      <h3>コメントを投稿</h3>
+      
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="comment-url">ページURL:</label>
+          <input
+            id="comment-url"
+            type="url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://syui.ai/posts/example"
+            required
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="comment-text">コメント:</label>
+          <textarea
+            id="comment-text"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="コメントを入力してください..."
+            rows={4}
+            required
+            disabled={loading}
+          />
+        </div>
+
+        {error && (
+          <div className="error-message">
+            エラー: {error}
+          </div>
+        )}
+
+        <div className="form-actions">
+          <button 
+            type="submit" 
+            disabled={loading || !text.trim() || !url.trim()}
+            className="submit-btn"
+          >
+            {loading ? '投稿中...' : 'コメントを投稿'}
+          </button>
+        </div>
+      </form>
+
+      <style jsx>{`
+        .comment-form {
+          border: 2px solid #007bff;
+          border-radius: 8px;
+          padding: 20px;
+          margin: 20px 0;
+          background: #f8f9fa;
+        }
+        .comment-form-placeholder {
+          border: 2px dashed #ddd;
+          border-radius: 8px;
+          padding: 20px;
+          margin: 20px 0;
+          text-align: center;
+          color: #666;
+          background: #f8f9fa;
+        }
+        .comment-form h3 {
+          margin-top: 0;
+          color: #007bff;
+        }
+        .form-group {
+          margin-bottom: 15px;
+        }
+        .form-group label {
+          display: block;
+          margin-bottom: 5px;
+          font-weight: bold;
+          color: #333;
+        }
+        .form-group input,
+        .form-group textarea {
+          width: 100%;
+          padding: 8px 12px;
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+        .form-group input:focus,
+        .form-group textarea:focus {
+          outline: none;
+          border-color: #007bff;
+          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }
+        .form-group input:disabled,
+        .form-group textarea:disabled {
+          background: #e9ecef;
+          cursor: not-allowed;
+        }
+        .error-message {
+          background: #f8d7da;
+          color: #721c24;
+          padding: 10px;
+          border-radius: 4px;
+          margin-bottom: 15px;
+          border: 1px solid #f5c6cb;
+        }
+        .form-actions {
+          margin-top: 20px;
+        }
+        .submit-btn {
+          background: #007bff;
+          color: white;
+          border: none;
+          padding: 10px 20px;
+          border-radius: 4px;
+          font-size: 16px;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        .submit-btn:hover:not(:disabled) {
+          background: #0056b3;
+        }
+        .submit-btn:disabled {
+          background: #6c757d;
+          cursor: not-allowed;
+        }
+      `}</style>
+    </div>
+  )
+}

oauth_new/src/components/OAuthCallback.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react'
+
+export default function OAuthCallback({ onAuthSuccess }) {
+  const [status, setStatus] = useState('OAuth認証処理中...')
+
+  useEffect(() => {
+    handleCallback()
+  }, [])
+
+  const handleCallback = async () => {
+    try {
+      // BrowserOAuthClientが自動的にコールバックを処理します
+      // URLのパラメータを確認して成功を通知
+      const urlParams = new URLSearchParams(window.location.search)
+      const code = urlParams.get('code')
+      const error = urlParams.get('error')
+
+      if (error) {
+        throw new Error(`OAuth error: ${error}`)
+      }
+
+      if (code) {
+        setStatus('認証成功！メインページに戻ります...')
+        
+        // 少し待ってからメインページにリダイレクト
+        setTimeout(() => {
+          window.location.href = '/'
+        }, 1500)
+      } else {
+        setStatus('認証情報が見つかりません')
+      }
+
+    } catch (error) {
+      console.error('Callback error:', error)
+      setStatus('認証エラー: ' + error.message)
+    }
+  }
+
+  return (
+    <div style={{ padding: '20px', textAlign: 'center' }}>
+      <h2>OAuth認証</h2>
+      <p>{status}</p>
+      {status.includes('エラー') && (
+        <button onClick={() => window.location.href = '/'}>
+          メインページに戻る
+        </button>
+      )}
+    </div>
+  )
+}

oauth_new/src/components/RecordList.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+export default function RecordList({ title, records, apiConfig, showTitle = true }) {
+  if (!records || records.length === 0) {
+    return (
+      <section>
+        {showTitle && <h3>{title} (0)</h3>}
+        <p>レコードがありません</p>
+      </section>
+    )
+  }
+
+  return (
+    <section>
+      {showTitle && <h3>{title} ({records.length})</h3>}
+      {records.map((record, i) => (
+        <div key={i} style={{ border: '1px solid #ddd', margin: '10px 0', padding: '10px' }}>
+          {record.value.author?.avatar && (
+            <img 
+              src={record.value.author.avatar} 
+              alt="avatar" 
+              style={{ width: '32px', height: '32px', borderRadius: '50%', marginRight: '10px' }} 
+            />
+          )}
+          <div><strong>{record.value.author?.displayName || record.value.author?.handle}</strong></div>
+          <div>
+            Handle: 
+            <a 
+              href={`${apiConfig?.web}/profile/${record.value.author?.did}`} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              style={{ marginLeft: '5px' }}
+            >
+              {record.value.author?.handle}
+            </a>
+          </div>
+          <div style={{ margin: '10px 0' }}>{record.value.text || record.value.content}</div>
+          {record.value.post?.url && (
+            <div>
+              URL: 
+              <a 
+                href={record.value.post.url} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                style={{ marginLeft: '5px' }}
+              >
+                {record.value.post.url}
+              </a>
+            </div>
+          )}
+          <div style={{ fontSize: '12px', color: '#666', marginTop: '10px' }}>
+            {new Date(record.value.createdAt).toLocaleString()}
+          </div>
+        </div>
+      ))}
+    </section>
+  )
+}

oauth_new/src/components/RecordTabs.jsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react'
+import RecordList from './RecordList.jsx'
+
+export default function RecordTabs({ langRecords, commentRecords, userComments, chatRecords, apiConfig, pageContext }) {
+  const [activeTab, setActiveTab] = useState('lang')
+
+  // Filter records based on page context
+  const filterRecords = (records) => {
+    if (pageContext.isTopPage) {
+      // Top page: show latest 3 records
+      return records.slice(0, 3)
+    } else {
+      // Individual page: show records matching the URL
+      return records.filter(record => {
+        const recordUrl = record.value.post?.url
+        if (!recordUrl) return false
+        
+        try {
+          const recordRkey = new URL(recordUrl).pathname.split('/').pop()?.replace(/\.html$/, '')
+          return recordRkey === pageContext.rkey
+        } catch {
+          return false
+        }
+      })
+    }
+  }
+
+  const filteredLangRecords = filterRecords(langRecords)
+  const filteredCommentRecords = filterRecords(commentRecords)
+  const filteredUserComments = filterRecords(userComments || [])
+  const filteredChatRecords = filterRecords(chatRecords || [])
+
+  return (
+    <div className="record-tabs">
+      <div className="tab-header">
+        <button 
+          className={`tab-btn ${activeTab === 'lang' ? 'active' : ''}`}
+          onClick={() => setActiveTab('lang')}
+        >
+          Lang Records ({filteredLangRecords.length})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'comment' ? 'active' : ''}`}
+          onClick={() => setActiveTab('comment')}
+        >
+          Comment Records ({filteredCommentRecords.length})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'collection' ? 'active' : ''}`}
+          onClick={() => setActiveTab('collection')}
+        >
+          Collection ({filteredChatRecords.length})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`}
+          onClick={() => setActiveTab('users')}
+        >
+          User Comments ({filteredUserComments.length})
+        </button>
+      </div>
+
+      <div className="tab-content">
+        {activeTab === 'lang' && (
+          <RecordList 
+            title={pageContext.isTopPage ? "Latest Lang Records" : "Lang Records for this page"}
+            records={filteredLangRecords} 
+            apiConfig={apiConfig} 
+          />
+        )}
+        {activeTab === 'comment' && (
+          <RecordList 
+            title={pageContext.isTopPage ? "Latest Comment Records" : "Comment Records for this page"}
+            records={filteredCommentRecords} 
+            apiConfig={apiConfig} 
+          />
+        )}
+        {activeTab === 'collection' && (
+          <RecordList 
+            title={pageContext.isTopPage ? "Latest Collection Records" : "Collection Records for this page"}
+            records={filteredChatRecords} 
+            apiConfig={apiConfig} 
+          />
+        )}
+        {activeTab === 'users' && (
+          <RecordList 
+            title={pageContext.isTopPage ? "Latest User Comments" : "User Comments for this page"}
+            records={filteredUserComments} 
+            apiConfig={apiConfig} 
+          />
+        )}
+      </div>
+
+      <div className="page-info">
+        <small>
+          {pageContext.isTopPage 
+            ? "トップページ: 最新3件を表示" 
+            : `個別ページ: ${pageContext.rkey} に関連するレコードを表示`
+          }
+        </small>
+      </div>
+
+      <style jsx>{`
+        .record-tabs {
+          margin: 20px 0;
+        }
+        .tab-header {
+          display: flex;
+          border-bottom: 2px solid #ddd;
+          margin-bottom: 10px;
+        }
+        .tab-btn {
+          padding: 10px 20px;
+          border: none;
+          background: #f8f9fa;
+          border-top: 2px solid transparent;
+          border-left: 1px solid #ddd;
+          border-right: 1px solid #ddd;
+          cursor: pointer;
+          font-size: 14px;
+          transition: all 0.2s;
+        }
+        .tab-btn:first-child {
+          border-left: none;
+        }
+        .tab-btn:last-child {
+          border-right: none;
+        }
+        .tab-btn.active {
+          background: white;
+          border-top-color: #007bff;
+          border-bottom: 2px solid white;
+          margin-bottom: -2px;
+          font-weight: bold;
+        }
+        .tab-btn:hover:not(.active) {
+          background: #e9ecef;
+        }
+        .tab-content {
+          min-height: 200px;
+        }
+        .page-info {
+          margin-top: 10px;
+          padding: 5px 10px;
+          background: #f8f9fa;
+          border-radius: 3px;
+          color: #666;
+        }
+      `}</style>
+    </div>
+  )
+}

oauth_new/src/components/UserLookup.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import { atproto } from '../api/atproto.js'
+import { getPdsFromHandle, getApiConfig } from '../utils/pds.js'
+
+export default function UserLookup() {
+  const [handleInput, setHandleInput] = useState('')
+  const [userInfo, setUserInfo] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!handleInput.trim() || loading) return
+
+    setLoading(true)
+    try {
+      const userPds = await getPdsFromHandle(handleInput)
+      const apiConfig = getApiConfig(userPds)
+      const did = await atproto.getDid(userPds.replace('https://', ''), handleInput)
+      const profile = await atproto.getProfile(apiConfig.bsky, did)
+
+      setUserInfo({
+        handle: handleInput,
+        pds: userPds,
+        did,
+        profile,
+        config: apiConfig
+      })
+    } catch (error) {
+      console.error('User lookup failed:', error)
+      setUserInfo({ error: error.message })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <section className="user-lookup">
+      <h3>ユーザー検索</h3>
+      <form onSubmit={handleSubmit}>
+        <input 
+          type="text" 
+          value={handleInput}
+          onChange={(e) => setHandleInput(e.target.value)}
+          placeholder="Enter handle (e.g. syui.syui.ai)"
+          disabled={loading}
+          className="search-input"
+        />
+        <button 
+          type="submit" 
+          disabled={loading || !handleInput.trim()}
+          className="search-btn"
+        >
+          {loading ? '検索中...' : '検索'}
+        </button>
+      </form>
+      
+      {userInfo && (
+        <div className="user-result">
+          <h4>ユーザー情報:</h4>
+          {userInfo.error ? (
+            <div className="error">エラー: {userInfo.error}</div>
+          ) : (
+            <div className="user-details">
+              <div>Handle: {userInfo.handle}</div>
+              <div>PDS: {userInfo.pds}</div>
+              <div>DID: {userInfo.did}</div>
+              <div>Display Name: {userInfo.profile?.displayName}</div>
+              <div>PDS API: {userInfo.config?.pds}</div>
+              <div>Bsky API: {userInfo.config?.bsky}</div>
+              <div>Web: {userInfo.config?.web}</div>
+            </div>
+          )}
+        </div>
+      )}
+
+      <style jsx>{`
+        .user-lookup {
+          margin: 20px 0;
+        }
+        .search-input {
+          width: 200px;
+          margin-right: 10px;
+          padding: 5px;
+          border: 1px solid #ccc;
+          border-radius: 3px;
+        }
+        .search-btn {
+          padding: 5px 10px;
+          background: #28a745;
+          color: white;
+          border: none;
+          border-radius: 3px;
+          cursor: pointer;
+        }
+        .search-btn:disabled {
+          background: #ccc;
+          cursor: not-allowed;
+        }
+        .user-result {
+          margin-top: 15px;
+          padding: 10px;
+          border: 1px solid #ddd;
+          border-radius: 5px;
+          background: #f9f9f9;
+        }
+        .error {
+          color: #dc3545;
+        }
+        .user-details div {
+          margin: 5px 0;
+        }
+      `}</style>
+    </section>
+  )
+}

oauth_new/src/config/env.js

@@ -0,0 +1,17 @@
+// Environment configuration
+export const env = {
+  admin: import.meta.env.VITE_ADMIN,
+  pds: import.meta.env.VITE_PDS,
+  collection: import.meta.env.VITE_COLLECTION,
+  handleList: (() => {
+    try {
+      return JSON.parse(import.meta.env.VITE_HANDLE_LIST || '[]')
+    } catch {
+      return []
+    }
+  })(),
+  oauth: {
+    clientId: import.meta.env.VITE_OAUTH_CLIENT_ID,
+    redirectUri: import.meta.env.VITE_OAUTH_REDIRECT_URI
+  }
+}

oauth_new/src/hooks/useAdminData.js

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react'
+import { atproto, collections } from '../api/atproto.js'
+import { getApiConfig } from '../utils/pds.js'
+import { env } from '../config/env.js'
+
+export function useAdminData() {
+  const [adminData, setAdminData] = useState({ 
+    did: '', 
+    profile: null, 
+    records: [], 
+    apiConfig: null 
+  })
+  const [langRecords, setLangRecords] = useState([])
+  const [commentRecords, setCommentRecords] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    loadAdminData()
+  }, [])
+
+  const loadAdminData = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const apiConfig = getApiConfig(`https://${env.pds}`)
+      const did = await atproto.getDid(env.pds, env.admin)
+      const profile = await atproto.getProfile(apiConfig.bsky, did)
+      
+      // Load all data in parallel
+      const [records, lang, comment] = await Promise.all([
+        collections.getBase(apiConfig.pds, did, env.collection),
+        collections.getLang(apiConfig.pds, did, env.collection),
+        collections.getComment(apiConfig.pds, did, env.collection)
+      ])
+
+      setAdminData({ did, profile, records, apiConfig })
+      setLangRecords(lang)
+      setCommentRecords(comment)
+    } catch (err) {
+      console.error('Failed to load admin data:', err)
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return {
+    adminData,
+    langRecords,
+    commentRecords,
+    loading,
+    error,
+    refresh: loadAdminData
+  }
+}