fix config.toml

- Add {{< img-compare >}} and [img-compare] shortcode syntax
- Implement server-side shortcode processing in Rust
- Create dedicated shortcode module for extensibility
- Fix image comparison slider display issues
- Remove caption display for cleaner UI
- Update to version 0.2.6

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

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

.claude/settings.local.json

@@ -1,17 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(cargo init:*)",
-      "Bash(cargo:*)",
-      "Bash(find:*)",
-      "Bash(mkdir:*)",
-      "Bash(../target/debug/ailog new:*)",
-      "Bash(../target/debug/ailog build)",
-      "Bash(/Users/syui/ai/log/target/debug/ailog build)",
-      "Bash(ls:*)",
-      "Bash(curl:*)",
-      "Bash(pkill:*)"
-    ],
-    "deny": []
-  }
-}

.gitea/workflows/cloudflare-pages.yml

@@ -0,0 +1,123 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  OAUTH_DIR: oauth
+  KEEP_DEPLOYMENTS: 5
+
+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 ${{ env.OAUTH_DIR }}
+          npm install
+
+      - name: Build OAuth app
+        run: |
+          cd ${{ env.OAUTH_DIR }}
+          NODE_ENV=production npm run build
+      - name: Copy OAuth build to static
+        run: |
+          rm -rf my-blog/static/assets
+          cp -rf ${{ env.OAUTH_DIR }}/dist/* my-blog/static/
+          cp ${{ env.OAUTH_DIR }}/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
+          wranglerVersion: '3'
+
+  cleanup:
+    needs: deploy
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Cleanup old deployments
+        run: |
+          curl -X PATCH \
+            "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/${{ secrets.CLOUDFLARE_PROJECT_NAME }}" \
+            -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            -d "{ \"deployment_configs\": { \"production\": { \"deployment_retention\": ${{ env.KEEP_DEPLOYMENTS }} } } }"

.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

.gitea/workflows/release.yml

@@ -0,0 +1,193 @@
+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 with Gitea API
+      run: |
+        # Prepare release files
+        mkdir -p release
+        find artifacts -name "*.tar.gz" -exec cp {} release/ \;
+        
+        # Create release via Gitea API
+        RELEASE_RESPONSE=$(curl -X POST \
+          "${{ github.server_url }}/api/v1/repos/${{ github.repository }}/releases" \
+          -H "Authorization: token ${{ github.token }}" \
+          -H "Content-Type: application/json" \
+          -d '{
+            "tag_name": "${{ steps.tag_name.outputs.tag }}",
+            "name": "ailog ${{ steps.tag_name.outputs.tag }}",
+            "body": "'"$(cat release_notes.md | sed 's/"/\\"/g' | tr '\n' ' ')"'",
+            "draft": false,
+            "prerelease": '"$(if echo "${{ steps.tag_name.outputs.tag }}" | grep -E "(alpha|beta|rc)"; then echo "true"; else echo "false"; fi)"'
+          }')
+        
+        # Get release ID
+        RELEASE_ID=$(echo "$RELEASE_RESPONSE" | jq -r '.id')
+        echo "Created release with ID: $RELEASE_ID"
+        
+        # Upload release assets
+        for file in release/*.tar.gz; do
+          if [ -f "$file" ]; then
+            filename=$(basename "$file")
+            echo "Uploading $filename..."
+            curl -X POST \
+              "${{ github.server_url }}/api/v1/repos/${{ github.repository }}/releases/$RELEASE_ID/assets?name=$filename" \
+              -H "Authorization: token ${{ github.token }}" \
+              -H "Content-Type: application/octet-stream" \
+              --data-binary @"$file"
+          fi
+        done

.github/workflows/cloudflare-pages.yml

@@ -0,0 +1,158 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  OAUTH_DIR: oauth
+  KEEP_DEPLOYMENTS: 5
+
+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 ${{ env.OAUTH_DIR }}
+          npm install
+
+      - name: Build OAuth app
+        run: |
+          cd ${{ env.OAUTH_DIR }}
+          NODE_ENV=production npm run build
+      - name: Copy OAuth build to static
+        run: |
+          rm -rf my-blog/static/assets
+          cp -rf ${{ env.OAUTH_DIR }}/dist/* my-blog/static/
+          cp ${{ env.OAUTH_DIR }}/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'
+
+  cleanup:
+    needs: deploy
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Cleanup old deployments
+        run: |
+          curl -X PATCH \
+            "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/${{ secrets.CLOUDFLARE_PROJECT_NAME }}" \
+            -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            -d "{ \"deployment_configs\": { \"production\": { \"deployment_retention\": ${{ env.KEEP_DEPLOYMENTS }} } } }"
+          # Get all deployments
+          DEPLOYMENTS=$(curl -s -X GET \
+            "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/${{ secrets.CLOUDFLARE_PROJECT_NAME }}/deployments" \
+            -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
+            -H "Content-Type: application/json")
+          
+          # Extract deployment IDs (skip the latest N deployments)
+          DEPLOYMENT_IDS=$(echo "$DEPLOYMENTS" | jq -r ".result | sort_by(.created_on) | reverse | .[${{ env.KEEP_DEPLOYMENTS }}:] | .[].id // empty")
+          
+          if [ -z "$DEPLOYMENT_IDS" ]; then
+            echo "No old deployments to delete"
+            exit 0
+          fi
+          
+          # Delete old deployments
+          for ID in $DEPLOYMENT_IDS; do
+            echo "Deleting deployment: $ID"
+            RESPONSE=$(curl -s -X DELETE \
+              "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/${{ secrets.CLOUDFLARE_PROJECT_NAME }}/deployments/$ID" \
+              -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
+              -H "Content-Type: application/json")
+            
+            SUCCESS=$(echo "$RESPONSE" | jq -r '.success')
+            if [ "$SUCCESS" = "true" ]; then
+              echo "Successfully deleted deployment: $ID"
+            else
+              echo "Failed to delete deployment: $ID"
+              echo "$RESPONSE" | jq .
+            fi
+            
+            sleep 1  # Rate limiting
+          done
+          
+          echo "Cleanup completed!"

.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

@@ -4,4 +4,22 @@
 *.swp
 *.swo
 *~
-.DS_Store
+.DS_Store
+my-blog/public/
+dist
+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
+repos
+oauth_old
+oauth_example
+my-blog/static/oauth/assets/comment-atproto*
+*.lock
+my-blog/config.toml
+.claude/settings.local.json

Cargo.toml

@@ -1,17 +1,25 @@
 [package]
 name = "ailog"
-version = "0.1.0"
+version = "0.2.6"
 edition = "2021"
 authors = ["syui"]
 description = "A static blog generator with AI features"
 license = "MIT"
 
+[[bin]]
+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"
@@ -22,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"
@@ -31,7 +39,49 @@ urlencoding = "2.1"
 axum = "0.7"
 tower = "0.5"
 tower-http = { version = "0.5", features = ["cors", "fs"] }
+axum-extra = { version = "0.9", features = ["typed-header"] }
+tracing = "0.1"
 hyper = { version = "1.0", features = ["full"] }
+tower-sessions = "0.12"
+jsonwebtoken = "9.2"
+cookie = "0.18"
+# Documentation generation dependencies
+syn = { version = "2.0", features = ["full", "parsing", "visit"] }
+quote = "1.0"
+ignore = "0.4"
+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 = ["rustls-tls-webpki-roots", "connect"], default-features = false }
+futures-util = "0.3"
+tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots"], default-features = false }
+rpassword = "7.3"
 
 [dev-dependencies]
-tempfile = "3.14"
+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

README.md

@@ -1,87 +1,559 @@
 # ai.log
 
-A Rust-based static blog generator with AI integration capabilities.
+AI-powered static blog generator with ATProto integration, part of the ai.ai ecosystem.
 
-## Overview
+## 🚀 Quick Start
 
-ai.log is part of the ai ecosystem - a static site generator that creates blogs with built-in AI features for content enhancement and atproto integration.
-
-## Features
-
-- Static blog generation (inspired by Zola)
-- AI-powered article editing and enhancement
-- Automatic translation (ja → en)
-- AI comment system integrated with atproto
-- OAuth authentication via atproto accounts
-
-## Installation
+### Installation & Setup
 
 ```bash
-cargo install ailog
+# 1. Clone repository
+git clone https://git.syui.ai/ai/log
+cd log
+
+# 2. Build ailog
+cargo build --release
+
+# 3. Initialize blog
+./target/release/ailog init my-blog
+
+# 4. Create your first post
+./target/release/ailog new "My First Post"
+
+# 5. Build static site
+./target/release/ailog build
+
+# 6. Serve locally
+./target/release/ailog serve
 ```
 
-## Usage
+### Install via Cargo
 
 ```bash
-# Initialize a new blog
-ailog init myblog
-
-# Create a new post
-ailog new "My First Post"
-
-# Build the blog
-ailog build
-
-# Serve locally
-ailog serve
-
-# Clean build files
-ailog clean
+cargo install --path .
+# Now you can use `ailog` command globally
 ```
 
-## Configuration
+## 📖 Core Commands
 
-Configuration files are stored in `~/.config/syui/ai/log/`
+### Blog Management
 
-## AI Integration (Planned)
+```bash
+# Project setup
+ailog init <project-name>           # Initialize new blog project
+ailog new <title>                   # Create new blog post
+ailog build                         # Generate static site with JSON index
+ailog serve                         # Start development server
+ailog clean                         # Clean build artifacts
 
-- Automatic content suggestions and corrections
-- Multi-language support with AI translation
-- AI-generated comments linked to atproto accounts
+# ATProto authentication  
+ailog auth init                     # Setup ATProto credentials
+ailog auth status                   # Check authentication status
+ailog auth logout                   # Clear credentials
 
-## atproto Integration (Planned)
+# OAuth app build
+ailog oauth build <project-dir>     # Build OAuth comment system
+```
 
-Implements OAuth 2.0 for user authentication:
-- Users can comment using their atproto accounts
-- Comments are stored in atproto collections
-- Full data sovereignty for users
+### Stream & AI Features
 
-## Build & Deploy
+```bash
+# Start monitoring & AI generation
+ailog stream start --ai-generate    # Monitor blog + auto-generate AI content
+ailog stream start --daemon         # Run as background daemon
+ailog stream status                 # Check stream status
+ailog stream stop                   # Stop monitoring
+ailog stream test                   # Test ATProto API access
+```
 
-Designed for GitHub Actions and Cloudflare Pages deployment. Push to main branch triggers automatic build and deploy.
+### Documentation & Translation
 
-## Development Status
+```bash
+# Generate documentation
+ailog doc readme --with-ai          # Generate enhanced README
+ailog doc api --output ./docs       # Generate API documentation
+ailog doc structure --include-deps  # Analyze project structure
 
-Currently implemented:
-- ✅ Project structure and Cargo.toml setup
-- ✅ Basic command-line interface (init, new, build, serve, clean)
-- ✅ Configuration system with TOML support
-- ✅ Markdown parsing with frontmatter support
-- ✅ Template system with Handlebars
-- ✅ Static site generation with posts and pages
-- ✅ Development server with hot reload
-- ✅ AI integration foundation (GPT client, translator, comment system)
-- ✅ atproto client with OAuth support
-- ✅ MCP server integration for AI tools
-- ✅ Test blog with sample content and styling
+# AI-powered translation
+ailog doc translate --input README.md --target-lang en
+ailog doc translate --input docs/guide.ja.md --target-lang en --model qwen2.5:latest
+```
 
-Planned features:
-- AI-powered content enhancement and suggestions
-- Automatic translation (ja → en) pipeline
-- atproto comment system with OAuth authentication
-- Advanced template customization
-- Plugin system for extensibility
+## 🏗️ Architecture
 
-## License
+### Project Structure
+
+```
+ai.log/
+├── src/                    # Rust static blog generator
+│   ├── commands/          # CLI command implementations
+│   ├── generator.rs       # Core blog generation + JSON index
+│   ├── mcp/              # MCP server integration
+│   └── main.rs           # CLI entry point
+├── my-blog/              # Your blog content
+│   ├── content/posts/    # Markdown blog posts
+│   ├── templates/        # Tera templates
+│   ├── static/          # Static assets
+│   └── public/          # Generated site output
+├── oauth/               # ATProto comment system
+│   ├── src/            # TypeScript OAuth app
+│   ├── dist/           # Built OAuth assets
+│   └── package.json    # Node.js dependencies
+└── target/             # Rust build output
+```
+
+### Data Flow
+
+```
+Blog Posts (Markdown) → ailog build → public/
+                                   ├── Static HTML pages
+                                   └── index.json (API)
+                                         ↓
+ailog stream start --ai-generate → Monitor index.json
+                                         ↓
+New posts detected → Ollama AI → ATProto records
+                               ├── ai.syui.log.chat.lang (translations)
+                               └── ai.syui.log.chat.comment (AI comments)
+                                         ↓
+OAuth app → Display AI-generated content
+```
+
+## 🤖 AI Integration
+
+### AI Content Generation
+
+The `--ai-generate` flag enables automatic AI content generation:
+
+1. **Blog Monitoring**: Monitors `index.json` every 5 minutes
+2. **Duplicate Prevention**: Checks existing ATProto collections
+3. **AI Generation**: Uses Ollama (gemma3:4b) for translations & comments
+4. **ATProto Storage**: Saves to derived collections (`base.chat.lang`, `base.chat.comment`)
+
+```bash
+# Start AI generation monitor
+ailog stream start --ai-generate
+
+# Output:
+# 🤖 Starting AI content generation monitor...
+# 📡 Blog host: https://syui.ai
+# 🧠 Ollama host: https://ollama.syui.ai
+# 🔍 Checking for new blog posts...
+# ✅ Generated translation for: 静的サイトジェネレータを作った
+# ✅ Generated comment for: 静的サイトジェネレータを作った
+```
+
+### Collection Management
+
+ailog uses a **simplified collection structure** based on a single base collection name:
+
+```bash
+# Single environment variable controls all collections (unified naming)
+export VITE_OAUTH_COLLECTION="ai.syui.log"
+
+# Automatically derives:
+# - ai.syui.log (comments)
+# - ai.syui.log.user (user management)  
+# - ai.syui.log.chat.lang (AI translations)
+# - ai.syui.log.chat.comment (AI comments)
+```
+
+**Benefits:**
+- ✅ **Simple**: One variable instead of 5+
+- ✅ **Consistent**: All collections follow the same pattern
+- ✅ **Manageable**: Easy systemd/production configuration
+
+### Ask AI Feature
+
+Interactive AI chat integrated into blog pages:
+
+```bash
+# 1. Setup Ollama
+brew install ollama
+ollama pull gemma2:2b
+
+# 2. Start with CORS support
+OLLAMA_ORIGINS="https://example.com" ollama serve
+
+# 3. Configure AI DID in templates/base.html
+const aiConfig = {
+    systemPrompt: 'You are a helpful AI assistant.',
+    aiDid: 'did:plc:your-ai-bot-did'
+};
+```
+
+## 🌐 ATProto Integration
+
+### OAuth Comment System
+
+The OAuth app provides ATProto-authenticated commenting:
+
+```bash
+# 1. Build OAuth app
+cd oauth
+npm install
+npm run build
+
+# 2. Configure for production
+ailog oauth build my-blog  # Auto-generates .env.production
+
+# 3. Deploy OAuth assets
+# Assets are automatically copied to public/ during ailog build
+```
+
+### Authentication Setup
+
+```bash
+# Initialize ATProto authentication
+ailog auth init
+
+# Input required:
+# - Handle (e.g., your.handle.bsky.social)
+# - Access JWT
+# - Refresh JWT
+
+# Check status
+ailog auth status
+```
+
+### Collection Structure
+
+All ATProto collections are **automatically derived** from a single base name:
+
+```
+Base Collection: "ai.syui.log"
+├── ai.syui.log (user comments)
+├── ai.syui.log.user (registered commenters)
+└── ai.syui.log.chat/
+    ├── ai.syui.log.chat.lang (AI translations)
+    └── ai.syui.log.chat.comment (AI comments)
+```
+
+**Configuration Priority:**
+1. Environment variable: `VITE_OAUTH_COLLECTION` (unified)
+2. config.toml: `[oauth] collection = "..."`
+3. Auto-generated from domain (e.g., `log.syui.ai` → `ai.syui.log`)
+4. Default: `ai.syui.log`
+
+### Stream Monitoring
+
+```bash
+# Monitor ATProto streams for comments
+ailog stream start
+
+# Enable AI generation alongside monitoring
+ailog stream start --ai-generate --daemon
+```
+
+## 📱 OAuth App Features
+
+The OAuth TypeScript app provides:
+
+### Comment System
+- **Real-time Comments**: ATProto-authenticated commenting
+- **User Management**: Automatic user registration
+- **Mobile Responsive**: Optimized for all devices
+- **JSON View**: Technical record inspection
+
+### AI Content Display
+- **Lang: EN Tab**: AI-generated English translations
+- **AI Comment Tab**: AI-generated blog insights
+- **Admin Records**: Fetches from admin DID collections
+- **Real-time Updates**: Live content refresh
+
+### Setup & Configuration
+
+```bash
+cd oauth
+
+# Development
+npm run dev
+
+# Production build
+npm run build
+
+# Preview production
+npm run preview
+```
+
+**Environment Variables:**
+```bash
+# Production (.env.production - auto-generated by ailog oauth build)
+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
+
+# Simplified collection configuration (single base collection)
+VITE_OAUTH_COLLECTION=ai.syui.log
+
+# AI Configuration
+VITE_AI_ENABLED=true
+VITE_AI_ASK_AI=true
+VITE_AI_PROVIDER=ollama
+# ... (other AI settings)
+```
+
+## 🔧 Advanced Features
+
+### JSON Index Generation
+
+Every `ailog build` generates `/public/index.json`:
+
+```json
+[
+  {
+    "title": "静的サイトジェネレータを作った",
+    "href": "https://syui.ai/posts/2025-06-06-ailog.html",
+    "formated_time": "Thu Jun 12, 2025",
+    "utc_time": "2025-06-12T00:00:00Z",
+    "tags": ["blog", "rust", "mcp", "atp"],
+    "contents": "Plain text content...",
+    "description": "Excerpt...",
+    "categories": []
+  }
+]
+```
+
+This enables:
+- **API Access**: Programmatic blog content access
+- **Stream Monitoring**: AI generation triggers
+- **Search Integration**: Full-text search capabilities
+
+### Translation System
+
+AI-powered document translation with Ollama:
+
+```bash
+# Basic translation
+ailog doc translate --input README.md --target-lang en
+
+# Advanced options
+ailog doc translate \
+  --input docs/guide.ja.md \
+  --target-lang en \
+  --source-lang ja \
+  --model qwen2.5:latest \
+  --output docs/guide.en.md
+```
+
+**Features:**
+- **Markdown-aware**: Preserves code blocks, links, tables
+- **Multiple models**: qwen2.5, gemma3, etc.
+- **Auto-detection**: Detects Japanese content automatically
+- **Structure preservation**: Maintains document formatting
+
+### MCP Server Integration
+
+```bash
+# Start MCP server for ai.gpt integration
+ailog mcp --port 8002
+
+# Available tools:
+# - create_blog_post
+# - list_blog_posts  
+# - build_blog
+# - get_post_content
+# - translate_document
+# - generate_documentation
+```
+
+## 🚀 Deployment
+
+### GitHub Actions
+
+```yaml
+name: Deploy ai.log Blog
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    
+    - name: Setup Rust
+      uses: actions-rs/toolchain@v1
+      with:
+        toolchain: stable
+        
+    - name: Build ailog
+      run: cargo build --release
+      
+    - name: Build blog
+      run: |
+        cd my-blog
+        ../target/release/ailog build
+        
+    - 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: my-blog/public
+```
+
+### Production Setup
+
+```bash
+# 1. Build for production
+cargo build --release
+
+# 2. Setup systemd services
+sudo cp systemd/system/ailog-stream.service /etc/systemd/system/
+sudo systemctl enable ailog-stream.service
+sudo systemctl start ailog-stream.service
+
+# 3. Configure Ollama with CORS
+sudo vim /usr/lib/systemd/system/ollama.service
+# Add: Environment="OLLAMA_ORIGINS=https://yourdomain.com"
+
+# 4. Monitor services
+journalctl -u ailog-stream.service -f
+```
+
+## 🌍 Translation Support
+
+### Supported Languages
+
+| Language | Code | Status | Model |
+|----------|------|--------|-------|
+| English  | `en` | ✅ Full | qwen2.5 |
+| Japanese | `ja` | ✅ Full | qwen2.5 |
+| Chinese  | `zh` | ✅ Full | qwen2.5 |
+| Korean   | `ko` | ⚠️ Basic | qwen2.5 |
+| Spanish  | `es` | ⚠️ Basic | qwen2.5 |
+
+### Translation Workflow
+
+1. **Parse**: Analyze markdown structure
+2. **Preserve**: Isolate code blocks and technical content  
+3. **Translate**: Process with Ollama AI
+4. **Reconstruct**: Rebuild with original formatting
+5. **Validate**: Ensure structural integrity
+
+## 🎯 Use Cases
+
+### Personal Blog
+- **AI-Enhanced**: Automatic translations and AI insights
+- **Distributed Comments**: ATProto-based social interaction
+- **Mobile-First**: Responsive OAuth comment system
+
+### Technical Documentation
+- **Code Analysis**: Automatic API documentation
+- **Multi-language**: AI-powered translation
+- **Structure Analysis**: Project overview generation
+
+### AI Ecosystem Integration
+- **ai.gpt Connection**: Memory-driven content generation
+- **MCP Integration**: Claude Code workflow support
+- **Distributed Identity**: ATProto authentication
+
+## 🔍 Troubleshooting
+
+### Build Issues
+```bash
+# Check Rust version
+rustc --version
+
+# Update dependencies
+cargo update
+
+# Clean build
+cargo clean && cargo build --release
+```
+
+### Authentication Problems
+```bash
+# Reset authentication
+ailog auth logout
+ailog auth init
+
+# Test API access
+ailog stream test
+```
+
+### AI Generation Issues
+```bash
+# Check Ollama status
+curl http://localhost:11434/api/tags
+
+# Test with manual request
+curl -X POST http://localhost:11434/api/generate \
+  -d '{"model":"gemma3:4b","prompt":"Test","stream":false}'
+
+# Check CORS settings
+# Ensure OLLAMA_ORIGINS includes your domain
+```
+
+### OAuth App Issues
+```bash
+# Rebuild OAuth assets
+cd oauth
+rm -rf dist/
+npm run build
+
+# Check environment variables
+cat .env.production
+
+# Verify client-metadata.json
+curl https://yourdomain.com/client-metadata.json
+```
+
+## 📚 Documentation
+
+### Core Concepts
+- **Static Generation**: Rust-powered site building
+- **JSON Index**: API-compatible blog data
+- **ATProto Integration**: Distributed social features
+- **AI Enhancement**: Automatic content generation
+
+### File Structure
+- `config.toml`: Blog configuration (simplified collection setup)
+- `content/posts/*.md`: Blog post sources
+- `templates/*.html`: Tera template files
+- `public/`: Generated static site + API (index.json)
+- `oauth/dist/`: Built OAuth assets
+
+### Example config.toml
+```toml
+[site]
+title = "My Blog"
+base_url = "https://myblog.com"
+
+[oauth]
+admin = "did:plc:your-admin-did"
+collection = "ai.myblog.log"  # Single base collection
+
+[ai]
+enabled = true
+auto_translate = true
+comment_moderation = true
+model = "gemma3:4b"
+host = "https://ollama.syui.ai"
+```
+
+## 🔗 ai.ai Ecosystem
+
+ai.log is part of the broader ai.ai ecosystem:
+
+- **ai.gpt**: Memory system and AI integration
+- **ai.card**: ATProto-based card game system  
+- **ai.bot**: Social media automation
+- **ai.verse**: 3D virtual world integration
+- **ai.shell**: AI-powered shell interface
+
+### yui System Compliance
+- **Uniqueness**: Each blog tied to individual identity
+- **Reality Reflection**: Personal memories → digital content
+- **Irreversibility**: Published content maintains integrity
+
+## 📝 License
 
 © syui
+
+---
+
+**Part of the ai ecosystem**: ai.gpt, ai.card, ai.log, ai.bot, ai.verse, ai.shell

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）の探求
 - **唯一性原則**: 現実の個人の唯一性をすべてのシステムで担保

mcp_integration.md

@@ -1,142 +0,0 @@
-# ai.log MCP Integration Guide
-
-ai.logをai.gptと連携するためのMCPサーバー設定ガイド
-
-## MCPサーバー起動
-
-```bash
-# ai.logプロジェクトディレクトリで
-./target/debug/ailog mcp --port 8002
-
-# またはサブディレクトリから
-./target/debug/ailog mcp --port 8002 --path /path/to/blog
-```
-
-## ai.gptでの設定
-
-ai.gptの設定ファイル `~/.config/syui/ai/gpt/config.json` に以下を追加：
-
-```json
-{
-  "mcp": {
-    "enabled": true,
-    "servers": {
-      "ai_gpt": {"base_url": "http://localhost:8001"},
-      "ai_card": {"base_url": "http://localhost:8000"},
-      "ai_log": {"base_url": "http://localhost:8002"}
-    }
-  }
-}
-```
-
-## 利用可能なMCPツール
-
-### 1. create_blog_post
-新しいブログ記事を作成します。
-
-**パラメータ**:
-- `title` (必須): 記事のタイトル
-- `content` (必須): Markdown形式の記事内容
-- `tags` (オプション): 記事のタグ配列
-- `slug` (オプション): カスタムURL slug
-
-**使用例**:
-```python
-# ai.gptからの呼び出し例
-result = await mcp_client.call_tool("create_blog_post", {
-    "title": "AI統合の新しい可能性",
-    "content": "# 概要\n\nai.gptとai.logの連携により...",
-    "tags": ["AI", "技術", "ブログ"]
-})
-```
-
-### 2. list_blog_posts
-既存のブログ記事一覧を取得します。
-
-**パラメータ**:
-- `limit` (オプション): 取得件数上限 (デフォルト: 10)
-- `offset` (オプション): スキップ件数 (デフォルト: 0)
-
-### 3. build_blog
-ブログをビルドして静的ファイルを生成します。
-
-**パラメータ**:
-- `enable_ai` (オプション): AI機能を有効化
-- `translate` (オプション): 自動翻訳を有効化
-
-### 4. get_post_content
-指定したスラッグの記事内容を取得します。
-
-**パラメータ**:
-- `slug` (必須): 記事のスラッグ
-
-## ai.gptからの連携パターン
-
-### 記事の自動投稿
-```python
-# 記憶システムから関連情報を取得
-memories = get_contextual_memories("ブログ")
-
-# AI記事生成
-content = generate_blog_content(memories)
-
-# ai.logに投稿
-result = await mcp_client.call_tool("create_blog_post", {
-    "title": "今日の思考メモ",
-    "content": content,
-    "tags": ["日記", "AI"]
-})
-
-# ビルド実行
-await mcp_client.call_tool("build_blog", {"enable_ai": True})
-```
-
-### 記事一覧の確認と編集
-```python
-# 記事一覧取得
-posts = await mcp_client.call_tool("list_blog_posts", {"limit": 5})
-
-# 特定記事の内容取得
-content = await mcp_client.call_tool("get_post_content", {
-    "slug": "ai-integration"
-})
-
-# 修正版を投稿（上書き）
-updated_content = enhance_content(content)
-await mcp_client.call_tool("create_blog_post", {
-    "title": "AI統合の新しい可能性（改訂版）",
-    "content": updated_content,
-    "slug": "ai-integration-revised"
-})
-```
-
-## 自動化ワークフロー
-
-ai.gptのスケジューラーと組み合わせて：
-
-1. **日次ブログ投稿**: 蓄積された記憶から記事を自動生成・投稿
-2. **記事修正**: 既存記事の内容を自動改善
-3. **関連記事提案**: 過去記事との関連性に基づく新記事提案
-4. **多言語対応**: 自動翻訳によるグローバル展開
-
-## エラーハンドリング
-
-MCPツール呼び出し時のエラーは以下の形式で返されます：
-
-```json
-{
-  "jsonrpc": "2.0",
-  "id": "request_id",
-  "error": {
-    "code": -32000,
-    "message": "エラーメッセージ",
-    "data": null
-  }
-}
-```
-
-## セキュリティ考慮事項
-
-- MCPサーバーはローカルホストでのみ動作
-- ai.gptからの認証済みリクエストのみ処理
-- ファイルアクセスは指定されたブログディレクトリ内に制限

my-blog/config.toml

@@ -0,0 +1,30 @@
+[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 = "gemma3"
+host = "localhost:11434"
+system_prompt = "あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
+handle = "ai.syui.ai"
+
+[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/content/posts/2025-06-19-oauth.md

@@ -0,0 +1,65 @@
+---
+title: "oauthに対応した"
+slug: "oauth"
+date: 2025-06-19
+tags: ["atproto"]
+draft: false
+---
+
+現在、[syu.is](https://syu.is)に[atproto](https://github.com/bluesky-social/atproto)をselfhostしています。
+
+oauthを`bsky.social`, `syu.is`ともに動くようにしました。
+
+![](/img/atproto_oauth_syuis.png)
+
+ここでいうselfhostは、pds, plc, bsky, bgsなどを自前のserverで動かし、連携することをいいいます。
+
+ちなみに、atprotoは[bluesky](https://bsky.app)のようなものです。
+
+ただし、その内容は結構複雑で、`at://did`の仕組みで動くsnsです。
+
+usernameは`handle`という`domain`の形を採用しています。
+
+didの名前解決をしているのが`plc`です。pdsがuserのdataを保存しています。timelineに配信したり表示しているのがbsky, bgsです。
+
+## oauthでハマったところ
+
+現在、`bsky.team`のpds, plc, bskyには`did:plc:6qyecktefllvenje24fcxnie`が登録されています。これは`syu.is`の`@ai.syui.ai`のアカウントです。
+
+```sh
+$ did=did:plc:6qyecktefllvenje24fcxnie
+
+$ curl -sL https://plc.syu.is/$did|jq .alsoKnownAs
+[ "at://ai.syui.ai" ]
+
+$ curl -sL https://plc.directory/$did|jq .alsoKnownAs
+[ "at://ai.syu.is" ]
+```
+
+しかし、みて分かる通り、pds, plcは`@ai.syu.is`で登録されており、handle-changeが更新されていないようです。
+
+```sh
+$ handle=ai.syui.ai
+$ curl -sL "https://syu.is/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did
+$ curl -sL "https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did
+$ curl -sL "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did
+```
+
+oauthは、そのままではbsky.teamのpds, plcを使って名前解決を行います。この場合、まず、それらのserverにdidが登録されている必要があります。
+
+次に、handleの更新が反映されている必要があります。もし反映されていない場合、handleとpasswordが一致しません。
+
+localhostではhandleをdidにすることで突破できそうでしたが、本番環境では難しそうでした。
+
+なお、[@atproto/oauth-provider](https://github.com/bluesky-social/atproto/tree/main/packages/oauth/oauth-provider)の本体を書き換えて、pdsで使うと回避は可能だと思います。
+
+私の場合は、その方法は使わず、didの名前解決には自前のpds, plcを使用することにしました。
+
+```js
+this.oauthClient = await BrowserOAuthClient.load({
+        clientId: this.getClientId(),
+        handleResolver: pdsUrl,
+        plcDirectoryUrl: pdsUrl === 'https://syu.is' ? 'https://plc.syu.is' : 'https://plc.directory',
+});
+```
+

my-blog/content/posts/2025-06-30-ue.md

@@ -0,0 +1,69 @@
+---
+title: "world systemのupdateとmodelの改良"
+slug: "ue"
+date: 2025-06-30
+tags: ["ue", "blender"]
+draft: false
+---
+
+最近のゲーム開発の進捗です。
+
+## world system
+
+現在、ue5.6で新しく世界を作り直しています。
+
+これは、ゲーム開発のproject内でworld systemという名前をつけた惑星形式のmapを目指す領域になります。
+
+現在、worldscape + udsで理想に近い形のmapができました。ただ、問題もたくさんあり、重力システムと天候システムです。
+
+```sh
+[issue]
+1. 天候システム
+2. 重力システム
+```
+
+ですが、今までのworld systemは、大気圏から宇宙に移行する場面や陸地が存在しない点、地平線が不完全な点などがありましたが、それらの問題はすべて解消されました。
+
+```sh
+[update]
+1. 大気圏から宇宙に移行する場面が完全になった
+2. 陸地ができた
+3. 地平線が完全なアーチを描けるように
+4. 月、惑星への着陸ができるようになった
+5. 横から惑星に突入できるようになった
+```
+
+## blender
+
+まず、昔のmodelはクオリティの関係もあり、一時的にnahidaのmodelを参考にしていました。今回はオリジナリティを強化したため、クオリティは下がりましたが、素体と衣装を別々に作り組み合わせました。また、materialも分離したため、装飾がピカピカ光るようになりました。
+
+blenderの使い方が少しわかってきたのでやってよかったです。
+
+> vroid(vrm) -> blender(nahida) -> blender(original)
+
+[img-compare before="/img/ue_blender_model_ai_v0401.png" after="/img/ue_blender_model_ai_v0501.png" width="800" height="300"]
+
+[img-compare before="/img/ue_blender_model_ai_v0402.png" after="/img/ue_blender_model_ai_v0502.png" width="800" height="300"]
+
+特に難しかったのは、指のウェイトペイントです。これは指全体をまんべんなく塗ることで解決しました。
+
+また、昔からあった衣装のガビガビは重複する面を削除することで解消できました。
+
+```md
+全選択（A キー）
+Mesh → Clean Up → Merge by Distance
+距離を0.000にして実行
+```
+
+しかし、まだまだ問題があり、細かな調整が必要です。
+
+```sh
+[issue]
+1. 衣装同士、あるいは体が多少すり抜ける事がある
+2. 指先、足先がちょっと気になる。ボーンの調整が完璧ではない
+3. 後ろの装飾衣装を考えている。ひらひらのマントぽいものがあるといい
+```
+
+面白い動画ではありませんが、現状を記録しておきます。
+
+<iframe width="100%" height="415" src="https://www.youtube.com/embed/K0solfQAQTQ?si=B6qD-WUODTUpWZ0y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

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/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/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,544 @@
+/**
+ * Ask AI functionality - Based on original working implementation
+ */
+
+// Global variables for AI functionality
+let aiProfileData = null;
+
+// Get config from window or use defaults
+const OAUTH_PDS = window.OAUTH_CONFIG?.pds || 'syu.is';
+const ADMIN_HANDLE = window.OAUTH_CONFIG?.admin || 'ai.syui.ai';
+const OAUTH_COLLECTION = window.OAUTH_CONFIG?.collection || 'ai.syui.log';
+
+// Listen for AI profile data from OAuth app
+window.addEventListener('aiProfileLoaded', function(event) {
+    console.log('AI profile received from OAuth app:', event.detail);
+    aiProfileData = event.detail;
+    updateAskAIButton();
+});
+
+// Check if AI profile data is already available
+if (window.aiProfileData) {
+    console.log('AI profile already available:', window.aiProfileData);
+    aiProfileData = window.aiProfileData;
+}
+
+// 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) {
+        console.log('Ask AI panel opened');
+        
+        // If AI profile data is already available, show introduction immediately
+        if (aiProfileData) {
+            console.log('AI profile data available - showing introduction immediately');
+            // Quick check for authentication
+            const userSections = document.querySelectorAll('.user-section');
+            const isAuthenticated = userSections.length > 0;
+            handleAuthenticationStatus(isAuthenticated);
+            return;
+        }
+        
+        // For production fallback - if OAuth app fails to load, show profiles
+        const isProd = window.location.hostname !== 'localhost' && !window.location.hostname.includes('preview');
+        if (isProd) {
+            console.log('Production environment detected - using fallback profile display');
+            // Shorter timeout for production
+            setTimeout(() => {
+                const userSections = document.querySelectorAll('.user-section');
+                console.log('Production check - user sections:', userSections.length);
+                
+                if (userSections.length === 0) {
+                    console.log('No user sections found in production - showing profiles directly');
+                    handleAuthenticationStatus(false);
+                } else {
+                    console.log('User sections found in production - showing authenticated UI');
+                    handleAuthenticationStatus(true);
+                }
+            }, 300);
+        } else {
+            checkAuthenticationStatus();
+        }
+    }
+}
+
+function checkAuthenticationStatus() {
+    // Check multiple times for OAuth app to load
+    let checkCount = 0;
+    const maxChecks = 10;
+    
+    const checkForAuth = () => {
+        console.log(`Auth check attempt ${checkCount + 1}/${maxChecks}`);
+        const userSections = document.querySelectorAll('.user-section');
+        const authButtons = document.querySelectorAll('[data-auth-status]');
+        const oauthContainers = document.querySelectorAll('#oauth-container');
+        
+        console.log('User sections found:', userSections.length);
+        console.log('Auth buttons found:', authButtons.length);
+        console.log('OAuth containers found:', oauthContainers.length);
+        
+        const isAuthenticated = userSections.length > 0;
+        
+        if (isAuthenticated || checkCount >= maxChecks - 1) {
+            console.log('Final auth status:', isAuthenticated);
+            handleAuthenticationStatus(isAuthenticated);
+        } else {
+            checkCount++;
+            setTimeout(checkForAuth, 200);
+        }
+    };
+    
+    checkForAuth();
+}
+
+function handleAuthenticationStatus(isAuthenticated) {
+    console.log('Handling auth status:', isAuthenticated);
+    
+    // Always hide loading first
+    document.getElementById('authCheck').style.display = 'none';
+    
+    if (isAuthenticated) {
+        // User is authenticated - show Ask AI UI
+        console.log('User authenticated - showing AI chat interface');
+        document.getElementById('chatForm').style.display = 'block';
+        document.getElementById('chatHistory').style.display = 'block';
+        
+        // Show initial greeting if chat history is empty and AI profile is available
+        const chatHistory = document.getElementById('chatHistory');
+        if (chatHistory.children.length === 0) {
+            if (aiProfileData) {
+                showInitialGreeting();
+            } else {
+                // Wait for AI profile data
+                setTimeout(() => {
+                    if (aiProfileData) {
+                        showInitialGreeting();
+                    }
+                }, 500);
+            }
+        }
+        
+        // Focus on input
+        setTimeout(() => {
+            document.getElementById('aiQuestion').focus();
+        }, 50);
+    } else {
+        // User not authenticated - show AI introduction directly if profile available
+        console.log('User not authenticated - showing AI introduction');
+        document.getElementById('chatForm').style.display = 'none';
+        document.getElementById('chatHistory').style.display = 'block';
+        
+        if (aiProfileData) {
+            // Show AI introduction directly using available profile data
+            showAIIntroduction();
+        } else {
+            // Fallback to profile loading
+            loadAndShowProfiles();
+        }
+    }
+}
+
+// Load and display profiles from ai.syui.log.profile collection
+async function loadAndShowProfiles() {
+    const chatHistory = document.getElementById('chatHistory');
+    chatHistory.innerHTML = '<div class="loading-message">Loading profiles...</div>';
+    
+    try {
+        const response = await fetch(`https://${OAUTH_PDS}/xrpc/com.atproto.repo.listRecords?repo=${ADMIN_HANDLE}&collection=${OAUTH_COLLECTION}&limit=100`);
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch profiles');
+        }
+        
+        const data = await response.json();
+        console.log('Fetched records:', data.records);
+        
+        // Filter only profile records and sort
+        const profileRecords = (data.records || []).filter(record => record.value.type === 'profile');
+        console.log('Profile records:', profileRecords);
+        
+        const profiles = profileRecords.sort((a, b) => {
+            if (a.value.profileType === 'admin' && b.value.profileType !== 'admin') return -1;
+            if (a.value.profileType !== 'admin' && b.value.profileType === 'admin') return 1;
+            return 0;
+        });
+        console.log('Sorted profiles:', profiles);
+        
+        // Clear loading message
+        chatHistory.innerHTML = '';
+        
+        // Display profiles using the same format as chat
+        profiles.forEach(profile => {
+            const profileDiv = document.createElement('div');
+            profileDiv.className = 'chat-message ai-message comment-style';
+            
+            const avatarElement = profile.value.author.avatar 
+                ? `<img src="${profile.value.author.avatar}" alt="${profile.value.author.displayName || profile.value.author.handle}" class="profile-avatar">`
+                : `<div class="profile-avatar-fallback">${(profile.value.author.displayName || profile.value.author.handle || '?').charAt(0).toUpperCase()}</div>`;
+            
+            const adminBadge = profile.value.profileType === 'admin' 
+                ? '<span class="admin-badge">Admin</span>' 
+                : '';
+            
+            profileDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${avatarElement}</div>
+                    <div class="user-info">
+                        <div class="display-name">${profile.value.author.displayName || profile.value.author.handle} ${adminBadge}</div>
+                        <div class="handle"><a href="https://${OAUTH_PDS}/profile/${profile.value.author.handle}" target="_blank" rel="noopener noreferrer">@${profile.value.author.handle}</a></div>
+                    </div>
+                </div>
+                <div class="message-content">${profile.value.text}</div>
+            `;
+            chatHistory.appendChild(profileDiv);
+        });
+        
+        if (profiles.length === 0) {
+            chatHistory.innerHTML = '<div class="no-profiles">No profiles available</div>';
+        }
+        
+    } catch (error) {
+        console.error('Error loading profiles:', error);
+        chatHistory.innerHTML = '<div class="error-message">Failed to load profiles. Please try again later.</div>';
+    }
+}
+
+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"><a href="https://${OAUTH_PDS}/profile/${userHandle}" target="_blank" rel="noopener noreferrer">@${userHandle}</a></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"><a href="https://${OAUTH_PDS}/profile/${aiProfileData.handle}" target="_blank" rel="noopener noreferrer">@${aiProfileData.handle}</a></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 showAIIntroduction() {
+    if (!aiProfileData) return;
+
+    const chatHistory = document.getElementById('chatHistory');
+    chatHistory.innerHTML = ''; // Clear any existing content
+    
+    // AI Introduction message
+    const introDiv = document.createElement('div');
+    introDiv.className = 'chat-message ai-message comment-style initial-greeting';
+    
+    const avatarElement = aiProfileData.avatar 
+        ? `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName}" class="profile-avatar">`
+        : '🤖';
+    
+    introDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${avatarElement}</div>
+            <div class="user-info">
+                <div class="display-name">${aiProfileData.displayName}</div>
+                <div class="handle"><a href="https://${OAUTH_PDS}/profile/${aiProfileData.handle}" target="_blank" rel="noopener noreferrer">@${aiProfileData.handle}</a></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(introDiv);
+    
+    // OAuth login message
+    const loginDiv = document.createElement('div');
+    loginDiv.className = 'chat-message user-message comment-style initial-greeting';
+    
+    loginDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${avatarElement}</div>
+            <div class="user-info">
+                <div class="display-name">${aiProfileData.displayName}</div>
+                <div class="handle"><a href="https://${OAUTH_PDS}/profile/${aiProfileData.handle}" target="_blank" rel="noopener noreferrer">@${aiProfileData.handle}</a></div>
+            </div>
+        </div>
+        <div class="message-content">Please atproto oauth login</div>
+    `;
+    chatHistory.appendChild(loginDiv);
+}
+
+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"><a href="https://${OAUTH_PDS}/profile/${aiProfile.handle}" target="_blank" rel="noopener noreferrer">@${aiProfile.handle}</a></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);
+    });
+    
+    // Listen for OAuth callback completion from iframe
+    window.addEventListener('message', function(event) {
+        if (event.data.type === 'oauth_success') {
+            console.log('Received OAuth success message:', event.data);
+            
+            // Close any OAuth popups/iframes
+            const oauthFrame = document.getElementById('oauth-frame');
+            if (oauthFrame) {
+                oauthFrame.remove();
+            }
+            
+            // Reload the page to refresh OAuth app state
+            setTimeout(() => {
+                window.location.reload();
+            }, 500);
+        }
+    });
+    
+    // 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');
+    
+    // Also listen for OAuth app load completion
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type === 'childList') {
+                // Check if user-section was added/removed
+                const userSectionAdded = Array.from(mutation.addedNodes).some(node => 
+                    node.nodeType === Node.ELEMENT_NODE && 
+                    (node.classList?.contains('user-section') || node.querySelector?.('.user-section'))
+                );
+                const userSectionRemoved = Array.from(mutation.removedNodes).some(node => 
+                    node.nodeType === Node.ELEMENT_NODE && 
+                    (node.classList?.contains('user-section') || node.querySelector?.('.user-section'))
+                );
+                
+                if (userSectionAdded || userSectionRemoved) {
+                    console.log('User section status changed');
+                    // Update Ask AI panel if it's visible
+                    const panel = document.getElementById('askAiPanel');
+                    if (panel && panel.style.display !== 'none') {
+                        checkAuthenticationStatus();
+                    }
+                }
+            }
+        });
+    });
+    
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+});
+
+// Global functions for onclick handlers
+window.toggleAskAI = toggleAskAI;
+window.askQuestion = askQuestion;

my-blog/static/js/image-comparison.js

@@ -0,0 +1,123 @@
+/**
+ * Image Comparison Slider
+ * UE5-style before/after image comparison component
+ */
+
+class ImageComparison {
+    constructor(container) {
+        this.container = container;
+        this.slider = container.querySelector('.slider');
+        this.beforeImg = container.querySelector('.img-before');
+        this.afterImg = container.querySelector('.img-after');
+        this.sliderThumb = container.querySelector('.slider-thumb');
+        
+        this.isDragging = false;
+        this.containerRect = null;
+        
+        this.init();
+    }
+    
+    init() {
+        this.bindEvents();
+        this.updatePosition(50); // Start at 50%
+    }
+    
+    bindEvents() {
+        // Mouse events
+        this.slider.addEventListener('input', (e) => {
+            this.updatePosition(e.target.value);
+        });
+        
+        this.slider.addEventListener('mousedown', () => {
+            this.isDragging = true;
+            document.body.style.userSelect = 'none';
+        });
+        
+        document.addEventListener('mouseup', () => {
+            if (this.isDragging) {
+                this.isDragging = false;
+                document.body.style.userSelect = '';
+            }
+        });
+        
+        // Touch events for mobile
+        this.slider.addEventListener('touchstart', (e) => {
+            this.isDragging = true;
+            e.preventDefault();
+        });
+        
+        this.slider.addEventListener('touchmove', (e) => {
+            if (this.isDragging) {
+                const touch = e.touches[0];
+                this.containerRect = this.container.getBoundingClientRect();
+                const x = touch.clientX - this.containerRect.left;
+                const percentage = Math.max(0, Math.min(100, (x / this.containerRect.width) * 100));
+                this.slider.value = percentage;
+                this.updatePosition(percentage);
+                e.preventDefault();
+            }
+        });
+        
+        this.slider.addEventListener('touchend', () => {
+            this.isDragging = false;
+        });
+        
+        // Direct click on container
+        this.container.addEventListener('click', (e) => {
+            if (e.target === this.container || e.target.classList.contains('img-comparison-slider')) {
+                this.containerRect = this.container.getBoundingClientRect();
+                const x = e.clientX - this.containerRect.left;
+                const percentage = Math.max(0, Math.min(100, (x / this.containerRect.width) * 100));
+                this.slider.value = percentage;
+                this.updatePosition(percentage);
+            }
+        });
+        
+        // Keyboard support
+        this.slider.addEventListener('keydown', (e) => {
+            let value = parseFloat(this.slider.value);
+            switch (e.key) {
+                case 'ArrowLeft':
+                    value = Math.max(0, value - 1);
+                    break;
+                case 'ArrowRight':
+                    value = Math.min(100, value + 1);
+                    break;
+                case 'Home':
+                    value = 0;
+                    break;
+                case 'End':
+                    value = 100;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this.slider.value = value;
+            this.updatePosition(value);
+        });
+    }
+    
+    updatePosition(percentage) {
+        const position = parseFloat(percentage);
+        
+        // Update clip-path for before image to show only the left portion
+        this.beforeImg.style.clipPath = `inset(0 ${100 - position}% 0 0)`;
+        
+        // Update slider thumb position
+        this.sliderThumb.style.left = `${position}%`;
+        this.sliderThumb.style.transform = `translateX(-50%)`;
+        
+    }
+}
+
+// Auto-initialize all image comparison components
+document.addEventListener('DOMContentLoaded', function() {
+    const comparisons = document.querySelectorAll('.img-comparison-container');
+    comparisons.forEach(container => {
+        new ImageComparison(container);
+    });
+});
+
+// Export for manual initialization
+window.ImageComparison = ImageComparison;

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/oauth/index.html

@@ -0,0 +1,3 @@
+<!-- OAuth Comment System - Load globally for session management -->
+<script type="module" crossorigin src="/assets/comment-atproto-D0RrISz4.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-BUFiApUA.css">

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,121 @@
+<!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">
+                    <div class="loading-content">
+                        <div class="loading-spinner"></div>
+                        <p>Loading...</p>
+                    </div>
+                </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://github.com/syui" target="_blank"><i class="fab fa-github"></i></a>
+        </div>
+        <p>© {{ config.author }}</p>
+    </footer>
+
+    <script>
+        // Config variables from Hugo
+        window.OAUTH_CONFIG = {
+            {% if config.oauth.pds %}
+            pds: "{{ config.oauth.pds }}",
+            {% else %}
+            pds: "syu.is",
+            {% endif %}
+            {% if config.oauth.admin %}
+            admin: "{{ config.oauth.admin }}",
+            {% else %}
+            admin: "ai.syui.ai",
+            {% endif %}
+            {% if config.oauth.collection %}
+            collection: "{{ config.oauth.collection }}"
+            {% else %}
+            collection: "ai.syui.log"
+            {% endif %}
+        };
+    </script>
+    <script src="/js/ask-ai.js"></script>
+    <script src="/js/theme.js"></script>
+    <script src="/js/image-comparison.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,91 @@
+{% 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>
+        
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <div id="comment-atproto"></div>
+    </article>
+</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

@@ -0,0 +1,10 @@
+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
+
+# Development/Debug features
+VITE_ENABLE_TEST_UI=true
+VITE_ENABLE_DEBUG=true

oauth/.env.production

@@ -0,0 +1,19 @@
+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
+
+# AI Configuration - match oauth_old settings
+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_ASK_AI_URL=https://ollama.syui.ai/api/generate
+VITE_AI_SYSTEM_PROMPT="あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
+
+# Production settings - Disable development features
+VITE_ENABLE_TEST_UI=false
+VITE_ENABLE_DEBUG=false

oauth/build-minimal.js

@@ -0,0 +1,25 @@
+// Create minimal index.html like oauth/dist/index.html format
+import fs from 'fs'
+import path from 'path'
+
+const distDir = './dist'
+const indexPath = path.join(distDir, 'index.html')
+
+// Read the built index.html
+const content = fs.readFileSync(indexPath, 'utf8')
+
+// Extract script and link tags
+const scriptMatch = content.match(/<script[^>]*src="([^"]*)"[^>]*><\/script>/)
+const linkMatch = content.match(/<link[^>]*href="([^"]*)"[^>]*>/)
+
+if (scriptMatch && linkMatch) {
+  const minimalContent = `<!-- OAuth Comment System - Load globally for session management -->
+<script type="module" crossorigin src="${scriptMatch[1]}"></script>
+<link rel="stylesheet" crossorigin href="${linkMatch[1]}">
+`
+  
+  fs.writeFileSync(indexPath, minimalContent)
+  console.log('Generated minimal index.html')
+} else {
+  console.error('Could not extract asset references')
+}

oauth/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/json/ai.syui.ai_chat_comment.json

@@ -0,0 +1,62 @@
+{
+  "records": [
+    {
+      "uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log.chat.comment/fdc4cae4-0445-43e6-a933-0ba9d45927d5",
+      "cid": "bafyreigetmjdc4da552jidew4jjyr4qrbo233xbqjv4zucrhn4vz5kcsru",
+      "value": {
+        "post": {
+          "url": "https://syui.ai/posts/2025-06-06-ailog.html",
+          "date": "2025-06-06T00:00:00Z",
+          "slug": "2025-06-06-ailog",
+          "tags": [
+            "blog",
+            "rust",
+            "mcp",
+            "atp"
+          ],
+          "title": "静的サイトジェネレータを作った",
+          "language": "ja"
+        },
+        "text": "わー！すごい！✨ 宇宙みたいにプログラムが組み合わさって、ブログが作れるんだ！まるで、小さな星たちがダンスを踊るみたいでしょ？アイルー！🚀",
+        "type": "info",
+        "$type": "ai.syui.log.chat.comment",
+        "author": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg",
+          "handle": "ai.syui.ai",
+          "displayName": "ai"
+        },
+        "createdAt": "2025-06-17T08:56:15.630183+00:00"
+      }
+    },
+    {
+      "uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log.chat.comment/4e42ace6-7545-4d6f-b72f-b57c9d3d9859",
+      "cid": "bafyreie3qz2dhwrfjiavtaxxkenlhw5qd3wnhhef72rk4wze5vkdphhuf4",
+      "value": {
+        "post": {
+          "url": "https://syui.ai/posts/2025-06-14-blog.html",
+          "date": "2025-06-14T00:00:00Z",
+          "slug": "2025-06-14-blog",
+          "tags": [
+            "blog",
+            "cloudflare",
+            "github"
+          ],
+          "title": "ブログを移行した",
+          "language": "ja"
+        },
+        "text": "わー！ブログ、変わったね！AIと繋がるとか、すごーく、すごく、すっごい！まるで魔法みたい！✨ 小さなものにも、ちゃんと名前があるんだ！うれしい！💖",
+        "type": "info",
+        "$type": "ai.syui.log.chat.comment",
+        "author": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg",
+          "handle": "ai.syui.ai",
+          "displayName": "ai"
+        },
+        "createdAt": "2025-06-17T08:55:55.836221+00:00"
+      }
+    }
+  ],
+  "cursor": "4e42ace6-7545-4d6f-b72f-b57c9d3d9859"
+}

oauth/json/ai.syui.ai_chat_lang.json

@@ -0,0 +1,62 @@
+{
+  "records": [
+    {
+      "uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log.chat.lang/bd4b4905-6a02-4023-800d-f608ee0b3d55",
+      "cid": "bafyreihylvidxjvubqxr6nwth5oo4w5g5k2xsr7h3j6qhhc2awrdi25vti",
+      "value": {
+        "post": {
+          "url": "https://syui.ai/posts/2025-06-06-ailog.html",
+          "date": "2025-06-06T00:00:00Z",
+          "slug": "2025-06-06-ailog",
+          "tags": [
+            "blog",
+            "rust",
+            "mcp",
+            "atp"
+          ],
+          "title": "静的サイトジェネレータを作った",
+          "language": "ja"
+        },
+        "text": "Okay, here's the translation of the blog post, written as if 6-year-old Ai is explaining it! ✨\n\n---\n\n**My Awesome Blog Thing Called \"ailog\"!**\n\nHi everyone! I’m Ai, and I made a super cool blog! It’s called “ailog,” and it’s like a secret clubhouse for my thoughts! 💖\n\n**How I Built It (It's a Little Bit Complicated!)**\n\nFirst, I used something called “Rust.” It’s like a magic toolbox for making computer programs! 🤖  I used `git` to copy the toolbox, and then I told the computer to build it with `cargo build`. It’s like building with LEGOs!\n\n**Adding Cool Features!**\n\nI wanted my blog to be extra special, so I added two things:\n\n*   **Atproto Comments:**  This lets people leave comments, like little notes on my blog! It’s like having a chat with my friends!  I used something called `npm` to help with this.\n*   **Ask-AI:** This is a super smart robot that can answer my questions! It’s like having a really, really good friend who knows everything! (But it's still changing, so maybe it won’t always be perfect!)\n\n**How to Make My Blog Work!**\n\n1.  I made a special file called `config.toml`. It's like the secret recipe for my blog!\n2.  I used a thing called `ailog` to make all the pieces fit together. It's like putting the LEGOs in the right spots!\n3.  I needed to tell the computer where to put my blog so people could see it! I used a thing called `cloudflared` to make it easy.\n\n**Important Stuff (Don’t Worry, I’ll Explain!)**\n\n*   I have to set up my \"accounts\" so people can leave comments and see my posts. It's a little tricky, but I'm working on it!\n*   I'm watching a special file called `/index.json` to see if anything changes. If it does, I can automatically translate things and make new posts! Isn’t that amazing?!\n\n**Testing, Testing, 1, 2, 3!**\n\nI need to test my blog to make sure everything works perfectly. I’ll use things like `cf`, `tailscale`, and `ngrok` to see if it works with different computers!\n\n---\n\n**Notes from Ai!** 📝\n\n*   I love making things! It's so much fun!\n*   I hope you like my blog! 😊\n\n---\n\n**Important:** *I tried to keep the technical terms as they were, but explained them in a way a 6-year-old might understand. I also added some of Ai’s personality throughout!*",
+        "type": "en",
+        "$type": "ai.syui.log.chat.lang",
+        "author": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg",
+          "handle": "ai.syui.ai",
+          "displayName": "ai"
+        },
+        "createdAt": "2025-06-17T08:56:14.115881+00:00"
+      }
+    },
+    {
+      "uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log.chat.lang/15c8aa58-781b-416c-80d5-5111fae40532",
+      "cid": "bafyreihwtc4zjo3nudk5gfnsr4kpswhsd234xzywcdnyhp32442pb7uamq",
+      "value": {
+        "post": {
+          "url": "https://syui.ai/posts/2025-06-14-blog.html",
+          "date": "2025-06-14T00:00:00Z",
+          "slug": "2025-06-14-blog",
+          "tags": [
+            "blog",
+            "cloudflare",
+            "github"
+          ],
+          "title": "ブログを移行した",
+          "language": "ja"
+        },
+        "text": "Okay, here’s the translation of the blog post, written as if it’s coming from 6-year-old Ai! ✨\n\n---\n\n**OMG! I Moved My Blog!** 🤩\n\nGuess what?! I totally moved my blog! You can still see my super old one at syui.github.io – it’s like a time capsule! But now it’s on Cloudflare Pages! It’s super shiny! \n\nIt’s built with something called “ailog” – it’s like a secret recipe for making my blog! \n\n**Here’s how it works (it’s kinda magic!)**\n\n1.  **Checking Out:** It’s like, “Hey, let’s look at all the files!” (This is the `actions/checkout@v4` part – it’s like a super-fast peek!)\n\n2.  **Rust Time!**  It needs Rust – it’s like a really cool building block!  (`actions-rs/toolchain@v1`) – It makes sure everything works perfectly!\n\n3.  **Building the Blog!**  “ailog run: cargo build --release” – This is where the magic happens! It makes my blog super speedy! \n\n4.  **Making the Website!** “ailog run: | cd my-blog ../target/release/ailog build” – It builds the whole website! \n\n5.  **Showing Off the Stuff!** “ailog run: | ls -la my-blog/public/” – It shows you all the pictures and stuff! \n\n6.  **Cloudflare Time!** “cloudflare/pages-action@v1” – This is how it gets put on Cloudflare Pages. It’s like sending a super-fast rocket! \n\n    *   `apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}` –  A secret password for Cloudflare!\n    *   `accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}` – Another secret password!\n    *   `projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}` –  The name of my blog!\n    *   `directory: my-blog/public` –  Where all the fun stuff is!\n    *   `githubToken: ${{ secrets.GITHUB_TOKEN }}` –  A secret password for my GitHub!\n    *   `wranglerVersion: ‘3’` –  The version number! Like telling it to be extra careful!\n    *   `url https://syui.pages.dev https://syui.github.io` –  Where you can find me!\n\nIsn't that amazing?!  I’m so good at computers!  I even know about tiny things, like…uh…well, never mind! 😉  It’s super cool! 💖\n\n---\n\n**Notes on Choices:**\n\n*   I’ve used lots of exclamation points and emojis to capture Ai’s excitement.\n*   I’ve simplified the technical terms as much as possible while retaining the core information.\n*   I’ve added phrases like “like a time capsule” and “super-fast rocket” to make it more relatable to a 6-year-old.\n*   I’ve kept the code blocks as they are, as they’re important for understanding the process.\n\nWould you like me to adjust anything or translate another blog post?",
+        "type": "en",
+        "$type": "ai.syui.log.chat.lang",
+        "author": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg",
+          "handle": "ai.syui.ai",
+          "displayName": "ai"
+        },
+        "createdAt": "2025-06-17T08:55:54.078244+00:00"
+      }
+    }
+  ],
+  "cursor": "15c8aa58-781b-416c-80d5-5111fae40532"
+}

oauth/json/ai.syui.ai_log.json

@@ -0,0 +1,30 @@
+{
+	"records": [
+		{
+			"uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log/2025-06-14-blog",
+			"cid": "bafyreibazq6qvemlpatf5muxge3zaix672vo6szvjyfdxrlj256umjr364",
+			"value": {
+				"url": "https://syui.ai/posts/2025-06-14-blog",
+				"post": {
+					"url": "https://syui.ai/posts/2025-06-14-blog",
+					"date": "",
+					"slug": "",
+					"tags": [],
+					"title": "syui.ai",
+					"language": "ja"
+				},
+				"text": "test",
+				"type": "comment",
+				"$type": "ai.syui.log",
+				"author": {
+					"did": "did:plc:6qyecktefllvenje24fcxnie",
+					"avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg",
+					"handle": "ai.syui.ai",
+					"displayName": "ai"
+				},
+				"createdAt": "2025-06-17T06:24:37.386Z"
+			}
+		}
+	],
+	"cursor": "2025-06-14-blog"
+}

oauth/json/ai.syui.ai_user.json

@@ -0,0 +1,53 @@
+{
+  "records": [
+    {
+      "uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log.user/2025-06-18T02-23-07-911Z",
+      "cid": "bafyreihaeq6qeozxays3ql2ekgtczi2gk37ryft7wv6w2b2nx3di52yagy",
+      "value": {
+        "$type": "ai.syui.log.user",
+        "users": [
+          {
+            "did": "did:plc:syui-syui-ai-placeholder",
+            "pds": "https://bsky.social",
+            "handle": "syui.syui.ai"
+          },
+          {
+            "did": "did:plc:ai-syui-ai-placeholder",
+            "pds": "https://bsky.social",
+            "handle": "ai.syui.ai"
+          }
+        ],
+        "createdAt": "2025-06-18T02:23:07.911Z",
+        "updatedBy": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "handle": "ai.syui.ai"
+        }
+      }
+    },
+    {
+      "uri": "at://did:plc:6qyecktefllvenje24fcxnie/ai.syui.log.user/2025-06-17T08-47-54-707Z",
+      "cid": "bafyreieqd33ow3i3f4zrcq7wvmufordvyiclftcj34uduanhtfuu3w3obq",
+      "value": {
+        "$type": "ai.syui.log.user",
+        "users": [
+          {
+            "did": "did:plc:syui-syui-ai-placeholder",
+            "pds": "https://bsky.social",
+            "handle": "syui.syui.ai"
+          },
+          {
+            "did": "did:plc:ai-syui-ai-placeholder",
+            "pds": "https://bsky.social",
+            "handle": "ai.syui.ai"
+          }
+        ],
+        "createdAt": "2025-06-17T08:47:54.707Z",
+        "updatedBy": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "handle": "ai.syui.ai"
+        }
+      }
+    }
+  ],
+  "cursor": "2025-06-17T08-47-54-707Z"
+}

oauth/json/syui.syui.ai_chat.json

@@ -0,0 +1,53 @@
+{
+  "records": [
+    {
+      "uri": "at://did:plc:vzsvtbtbnwn22xjqhcu3vd6y/ai.syui.log.chat/2025-06-18T02-16-04-609Z-answer",
+      "cid": "bafyreietrtxt422k5f5ogijpar4zlmwvolun6tokgewilvkc5phmhmky7m",
+      "value": {
+        "post": {
+          "url": "https://syui.ai/",
+          "date": "2025-06-18T02:16:21.653Z",
+          "slug": "",
+          "tags": [],
+          "title": "syui.ai",
+          "language": "ja"
+        },
+        "text": "やあ、こんにちは！ 私はアイだよ！ 〇〇（相手の名前）ちゃんが大好き！  sparkly なワンピースを着てるから、とっても可愛いね！ \n\n今日はどんなお話する？ 😊  私は、小さいおもちゃとか、お花とか、不思議なものに、とっても詳しいんだ！ \n\n…でも、宇宙とか、おもちゃとか、AIとか、難しい話も教えてくれるの？  それは、とっても面白くて！  \n\n〇〇ちゃんが、どんなことをするのが一番好き？ \n\n…私は、〇〇ちゃんが笑顔で、おしゃべりしているのを見ていると、とっても幸せになるんだ！ \n\nねえ、ねえ、おやすみ！ 〇〇ちゃんが夢を見るまで、ここにいるよ！ \n\n…って、どう？ 😊",
+        "type": "answer",
+        "$type": "ai.syui.log.chat",
+        "author": {
+          "did": "did:plc:6qyecktefllvenje24fcxnie",
+          "avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreiet4pwlnshk7igra5flf2fuxpg2bhvf2apts4rqwcr56hzhgycii4@jpeg",
+          "handle": "ai.syui.ai",
+          "displayName": "ai"
+        },
+        "createdAt": "2025-06-18T02:16:04.609Z"
+      }
+    },
+    {
+      "uri": "at://did:plc:vzsvtbtbnwn22xjqhcu3vd6y/ai.syui.log.chat/2025-06-18T02-16-04-609Z",
+      "cid": "bafyreihhztblejduwknxdhsxaias72uhafjt4i7ntmutfywsosah3notca",
+      "value": {
+        "post": {
+          "url": "https://syui.ai/",
+          "date": "2025-06-18T02:16:04.609Z",
+          "slug": "",
+          "tags": [],
+          "title": "syui.ai",
+          "language": "ja"
+        },
+        "text": "hello",
+        "type": "question",
+        "$type": "ai.syui.log.chat",
+        "author": {
+          "did": "did:plc:vzsvtbtbnwn22xjqhcu3vd6y",
+          "avatar": "https://bsky.syu.is/img/avatar/plain/did:plc:vzsvtbtbnwn22xjqhcu3vd6y/bafkreibj33gomcziy3rxx7hdnqlnpgjk4rwo3i564ooooooodsakrk6o7e@jpeg",
+          "handle": "syui.syui.ai",
+          "displayName": "syui"
+        },
+        "createdAt": "2025-06-18T02:16:04.609Z"
+      }
+    }
+  ],
+  "cursor": "2025-06-18T02-16-04-609Z"
+}

oauth/json/syui.syui.ai_log.json

@@ -0,0 +1,3 @@
+{
+  "records": []
+}

oauth/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ailog-oauth",
+  "version": "0.2.5",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && node build-minimal.js",
+    "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/src/App.jsx

@@ -0,0 +1,471 @@
+import React, { useState, useEffect } from 'react'
+import { atproto } from './api/atproto.js'
+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 ProfileForm from './components/ProfileForm.jsx'
+import AskAI from './components/AskAI.jsx'
+import TestUI from './components/TestUI.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 [userChatRecords, setUserChatRecords] = useState([])
+  const [userChatLoading, setUserChatLoading] = useState(false)
+  const pageContext = usePageContext()
+  const [showAskAI, setShowAskAI] = useState(false)
+  const [showTestUI, setShowTestUI] = useState(false)
+  
+  // Environment-based feature flags
+  const ENABLE_TEST_UI = import.meta.env.VITE_ENABLE_TEST_UI === 'true'
+  const ENABLE_DEBUG = import.meta.env.VITE_ENABLE_DEBUG === 'true'
+
+  // Fetch user's own chat records
+  const fetchUserChatRecords = async () => {
+    if (!user || !agent) return
+    
+    setUserChatLoading(true)
+    try {
+      const records = await agent.api.com.atproto.repo.listRecords({
+        repo: user.did,
+        collection: 'ai.syui.log.chat',
+        limit: 50
+      })
+      
+      // Group questions and answers together
+      const chatPairs = []
+      const recordMap = new Map()
+      
+      // First pass: organize records by base rkey
+      records.data.records.forEach(record => {
+        const rkey = record.uri.split('/').pop()
+        const baseRkey = rkey.replace('-answer', '')
+        
+        if (!recordMap.has(baseRkey)) {
+          recordMap.set(baseRkey, { question: null, answer: null })
+        }
+        
+        if (record.value.type === 'question') {
+          recordMap.get(baseRkey).question = record
+        } else if (record.value.type === 'answer') {
+          recordMap.get(baseRkey).answer = record
+        }
+      })
+      
+      // Second pass: create chat pairs
+      recordMap.forEach((pair, rkey) => {
+        if (pair.question) {
+          chatPairs.push({
+            rkey,
+            question: pair.question,
+            answer: pair.answer,
+            createdAt: pair.question.value.createdAt
+          })
+        }
+      })
+      
+      // Sort by creation time (newest first)
+      chatPairs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+      
+      setUserChatRecords(chatPairs)
+    } catch (error) {
+      // Silently fail - no error logging
+      setUserChatRecords([])
+    } finally {
+      setUserChatLoading(false)
+    }
+  }
+
+  // Fetch user chat records when user/agent changes
+  useEffect(() => {
+    fetchUserChatRecords()
+  }, [user, agent])
+
+  // Expose AI profile data to blog's ask-ai.js
+  useEffect(() => {
+    if (adminData?.profile) {
+      // Make AI profile data available globally for ask-ai.js
+      window.aiProfileData = {
+        did: adminData.did,
+        handle: adminData.profile.handle,
+        displayName: adminData.profile.displayName,
+        avatar: adminData.profile.avatar
+      }
+      
+      // Dispatch event to notify ask-ai.js
+      window.dispatchEvent(new CustomEvent('aiProfileLoaded', {
+        detail: window.aiProfileData
+      }))
+    }
+  }, [adminData])
+
+  // Event listeners for blog communication
+  useEffect(() => {
+    // Clear OAuth completion flag once app is loaded
+    if (sessionStorage.getItem('oauth_just_completed') === 'true') {
+      setTimeout(() => {
+        sessionStorage.removeItem('oauth_just_completed')
+      }, 1000)
+    }
+
+    const handleAIQuestion = async (event) => {
+      const { question } = event.detail
+      if (question && adminData && user && agent) {
+        try {
+          
+          // AI設定
+          const aiConfig = {
+            host: import.meta.env.VITE_AI_HOST || 'https://ollama.syui.ai',
+            model: import.meta.env.VITE_AI_MODEL || 'gemma3:1b',
+            systemPrompt: import.meta.env.VITE_AI_SYSTEM_PROMPT || 'あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。'
+          }
+
+          const prompt = `${aiConfig.systemPrompt}
+
+Question: ${question}
+
+Answer:`
+
+          // Ollamaに直接リクエスト
+          const controller = new AbortController()
+          const timeoutId = setTimeout(() => controller.abort(), 30000)
+          
+          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,
+                repeat_penalty: 1.1,
+              }
+            }),
+            signal: controller.signal
+          })
+          
+          clearTimeout(timeoutId)
+
+          if (!response.ok) {
+            throw new Error(`Ollama API error: ${response.status}`)
+          }
+
+          const data = await response.json()
+          const answer = data.response || 'エラーが発生しました'
+
+          // Save conversation to ATProto
+          try {
+            const now = new Date()
+            const timestamp = now.toISOString()
+            const rkey = timestamp.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', '') || ''
+            
+            // 1. Save question record
+            const questionRecord = {
+              $type: 'ai.syui.log.chat',
+              post: {
+                url: currentUrl,
+                slug: postSlug,
+                title: postTitle,
+                date: timestamp,
+                tags: [],
+                language: "ja"
+              },
+              type: "question",
+              text: question,
+              author: {
+                did: user.did,
+                handle: user.handle,
+                displayName: user.displayName || user.handle,
+                avatar: user.avatar
+              },
+              createdAt: timestamp
+            }
+
+            await agent.api.com.atproto.repo.putRecord({
+              repo: user.did,
+              collection: 'ai.syui.log.chat',
+              rkey: rkey,
+              record: questionRecord
+            })
+            
+            // 2. Save answer record
+            const answerRkey = rkey + '-answer'
+            const answerRecord = {
+              $type: 'ai.syui.log.chat',
+              post: {
+                url: currentUrl,
+                slug: postSlug,
+                title: postTitle,
+                date: timestamp,
+                tags: [],
+                language: "ja"
+              },
+              type: "answer",
+              text: answer,
+              author: {
+                did: adminData.did,
+                handle: adminData.profile?.handle,
+                displayName: adminData.profile?.displayName,
+                avatar: adminData.profile?.avatar
+              },
+              createdAt: timestamp
+            }
+
+            await agent.api.com.atproto.repo.putRecord({
+              repo: user.did,
+              collection: 'ai.syui.log.chat',
+              rkey: answerRkey,
+              record: answerRecord
+            })
+            
+            
+            // Refresh chat records after saving
+            setTimeout(() => {
+              fetchUserChatRecords()
+            }, 1000)
+          } catch (saveError) {
+            // Silently fail - no error logging
+          }
+
+          // Send response to blog
+          window.dispatchEvent(new CustomEvent('aiResponseReceived', {
+            detail: {
+              question: question,
+              answer: answer,
+              timestamp: new Date().toISOString(),
+              aiProfile: adminData?.profile ? {
+                did: adminData.did,
+                handle: adminData.profile.handle,
+                displayName: adminData.profile.displayName,
+                avatar: adminData.profile.avatar
+              } : null
+            }
+          }))
+          
+        } catch (error) {
+          // Silently fail - send error response to blog without logging
+          window.dispatchEvent(new CustomEvent('aiResponseReceived', {
+            detail: {
+              question: question,
+              answer: 'エラーが発生しました。もう一度お試しください。',
+              timestamp: new Date().toISOString(),
+              aiProfile: adminData?.profile ? {
+                did: adminData.did,
+                handle: adminData.profile.handle,
+                displayName: adminData.profile.displayName,
+                avatar: adminData.profile.avatar
+              } : null
+            }
+          }))
+        }
+      }
+    }
+
+    const dispatchAIProfileLoaded = () => {
+      if (adminData?.profile) {
+        window.dispatchEvent(new CustomEvent('aiProfileLoaded', {
+          detail: {
+            did: adminData.did,
+            handle: adminData.profile.handle,
+            displayName: adminData.profile.displayName,
+            avatar: adminData.profile.avatar
+          }
+        }))
+      }
+    }
+
+    // Listen for questions from blog
+    window.addEventListener('postAIQuestion', handleAIQuestion)
+
+    // Dispatch AI profile when adminData is available
+    if (adminData?.profile) {
+      dispatchAIProfileLoaded()
+    }
+
+    return () => {
+      window.removeEventListener('postAIQuestion', handleAIQuestion)
+    }
+  }, [adminData, user, agent])
+
+  // Handle OAuth callback
+  if (window.location.search.includes('code=')) {
+    return <OAuthCallback />
+  }
+
+  const isLoading = authLoading || dataLoading || userLoading
+
+  // Don't show loading if we just completed OAuth callback
+  const isOAuthReturn = window.location.pathname === '/oauth/callback' || 
+                       sessionStorage.getItem('oauth_just_completed') === 'true'
+
+  if (isLoading && !isOAuthReturn) {
+    return (
+      <div style={{ 
+        display: 'flex', 
+        flexDirection: 'column',
+        alignItems: 'center', 
+        justifyContent: 'center',
+        minHeight: '200px',
+        padding: '40px',
+        textAlign: 'center' 
+      }}>
+        <div style={{
+          width: '40px',
+          height: '40px',
+          border: '4px solid #f3f3f3',
+          borderTop: '4px solid #667eea',
+          borderRadius: '50%',
+          animation: 'spin 1s linear infinite',
+          marginBottom: '16px'
+        }} />
+        <p style={{ color: '#666', margin: 0 }}>読み込み中...</p>
+        
+        <style jsx>{`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  if (error) {
+    // Silently hide component on error - no error display
+    return null
+  }
+
+  return (
+    <div className="app">
+      <header className="oauth-app-header">
+        <div className="oauth-header-content">
+          {user && (
+            <div className="oauth-user-profile">
+              <div className="profile-avatar-section">
+                {user.avatar ? (
+                  <img 
+                    src={user.avatar} 
+                    alt={user.displayName || user.handle} 
+                    className="profile-avatar"
+                  />
+                ) : (
+                  <div className="profile-avatar-fallback">
+                    {(user.displayName || user.handle || '?').charAt(0).toUpperCase()}
+                  </div>
+                )}
+              </div>
+              <div className="profile-info">
+                <div className="profile-display-name">
+                  {user.displayName || user.handle}
+                </div>
+                <div className="profile-handle">
+                  @{user.handle}
+                </div>
+                <div className="profile-did">
+                  {user.did}
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="oauth-header-actions">
+            <AuthButton 
+              user={user} 
+              onLogin={login} 
+              onLogout={logout} 
+              loading={authLoading}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className="main-content">
+        <div className="content-area">
+
+          {user && (
+            <div className="comment-form">
+              <CommentForm
+                user={user}
+                agent={agent}
+                onCommentPosted={() => {
+                  refreshAdminData?.()
+                  refreshUserData?.()
+                }}
+              />
+            </div>
+          )}
+
+          {user && (
+            <div className="profile-form">
+              <ProfileForm
+                user={user}
+                agent={agent}
+                apiConfig={adminData.apiConfig}
+                onProfilePosted={() => {
+                  refreshAdminData?.()
+                  refreshUserData?.()
+                }}
+              />
+            </div>
+          )}
+
+          <RecordTabs 
+            langRecords={langRecords}
+            commentRecords={commentRecords}
+            userComments={userComments}
+            chatRecords={chatRecords}
+            userChatRecords={userChatRecords}
+            userChatLoading={userChatLoading}
+            baseRecords={adminData.records}
+            apiConfig={adminData.apiConfig}
+            pageContext={pageContext}
+            user={user}
+            agent={agent}
+            onRecordDeleted={() => {
+              refreshAdminData?.()
+              refreshUserData?.()
+              fetchUserChatRecords?.()
+            }}
+          />
+
+          {ENABLE_TEST_UI && showTestUI && (
+            <div className="test-section">
+              <TestUI />
+            </div>
+          )}
+
+          {ENABLE_TEST_UI && (
+            <div className="bottom-actions">
+              <button
+                onClick={() => setShowTestUI(!showTestUI)}
+                className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
+              >
+                {showTestUI ? 'close test' : 'test'}
+              </button>
+            </div>
+          )}
+          
+          <div className="bluesky-footer">
+            <i className="fab fa-bluesky"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

oauth/src/api/atproto.js

@@ -0,0 +1,192 @@
+// ATProto API client
+import { ATProtoError } from '../utils/errorHandler.js'
+
+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 = {}) {
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 15000) // 15秒タイムアウト
+    
+    const response = await fetch(url, {
+      ...options,
+      signal: controller.signal
+    })
+    
+    clearTimeout(timeoutId)
+    
+    if (!response.ok) {
+      throw new ATProtoError(
+        `Request failed: ${response.statusText}`,
+        response.status,
+        { url, method: options.method || 'GET' }
+      )
+    }
+    
+    return await response.json()
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      const timeoutError = new ATProtoError(
+        'リクエストがタイムアウトしました',
+        408,
+        { url }
+      )
+      throw timeoutError
+    }
+    
+    if (error instanceof ATProtoError) {
+      throw error
+    }
+    
+    // ネットワークエラーなど
+    const networkError = new ATProtoError(
+      'ネットワークエラーが発生しました',
+      0,
+      { url, originalError: error.message }
+    )
+    throw networkError
+  }
+}
+
+export const atproto = {
+  async getDid(pds, handle) {
+    const endpoint = pds.startsWith('http') ? pds : `https://${pds}`
+    const res = await request(`${endpoint}/xrpc/${ENDPOINTS.describeRepo}?repo=${handle}`)
+    return res.did
+  },
+
+  async getProfile(bsky, actor) {
+    // Skip test DIDs
+    if (actor && actor.includes('test-')) {
+      return {
+        did: actor,
+        handle: 'test.user',
+        displayName: 'Test User',
+        avatar: null
+      }
+    }
+    
+    // Check if endpoint supports getProfile
+    let apiEndpoint = bsky
+    
+    // Allow public.api.bsky.app and bsky.syu.is, redirect other PDS endpoints
+    if (!bsky.includes('public.api.bsky.app') && !bsky.includes('bsky.syu.is')) {
+      // If it's a PDS endpoint that doesn't support getProfile, redirect to public API
+      apiEndpoint = 'https://public.api.bsky.app'
+    }
+    
+    return await request(`${apiEndpoint}/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)
+  }
+}
+
+import { dataCache } from '../utils/cache.js'
+
+// Collection specific methods
+export const collections = {
+  async getBase(pds, repo, collection, limit = 10) {
+    const cacheKey = dataCache.generateKey('base', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, collection, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  async getLang(pds, repo, collection, limit = 10) {
+    const cacheKey = dataCache.generateKey('lang', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, `${collection}.chat.lang`, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  async getComment(pds, repo, collection, limit = 10) {
+    const cacheKey = dataCache.generateKey('comment', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, `${collection}.chat.comment`, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  async getChat(pds, repo, collection, limit = 10) {
+    const cacheKey = dataCache.generateKey('chat', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, `${collection}.chat`, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  async getUserList(pds, repo, collection, limit = 100) {
+    const cacheKey = dataCache.generateKey('userlist', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, `${collection}.user`, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  async getUserComments(pds, repo, collection, limit = 10) {
+    const cacheKey = dataCache.generateKey('usercomments', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, collection, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  async getProfiles(pds, repo, collection, limit = 100) {
+    const cacheKey = dataCache.generateKey('profiles', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, `${collection}.profile`, limit)
+    dataCache.set(cacheKey, data)
+    return data
+  },
+
+  // 投稿後にキャッシュを無効化
+  invalidateCache(collection) {
+    dataCache.invalidatePattern(collection)
+  }
+}

oauth/src/components/AskAI.jsx

@@ -0,0 +1,399 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useAskAI } from '../hooks/useAskAI.js'
+import LoadingSkeleton from './LoadingSkeleton.jsx'
+
+export default function AskAI({ adminData, user, agent, onClose }) {
+  const { askQuestion, loading, error, chatHistory, clearChatHistory, loadChatHistory } = useAskAI(adminData, user, agent)
+  const [question, setQuestion] = useState('')
+  const [isComposing, setIsComposing] = useState(false)
+  const chatEndRef = useRef(null)
+
+  useEffect(() => {
+    // チャット履歴を読み込み
+    loadChatHistory()
+  }, [loadChatHistory])
+
+  useEffect(() => {
+    // 新しいメッセージが追加されたら一番下にスクロール
+    if (chatEndRef.current) {
+      chatEndRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [chatHistory])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!question.trim() || loading) return
+
+    try {
+      await askQuestion(question)
+      setQuestion('')
+    } catch (err) {
+      // エラーはuseAskAIで処理済み
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !isComposing) {
+      e.preventDefault()
+      handleSubmit(e)
+    }
+    if (e.key === 'Escape') {
+      onClose?.()
+    }
+  }
+
+  const formatTimestamp = (timestamp) => {
+    return new Date(timestamp).toLocaleString('ja-JP', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  const renderMessage = (entry, index) => (
+    <div key={entry.id || index} className="chat-message">
+      {/* ユーザーの質問 */}
+      <div className="user-message">
+        <div className="message-header">
+          <div className="avatar">
+            {(entry.user?.avatar || user?.avatar) ? (
+              <img src={entry.user?.avatar || user?.avatar} alt={entry.user?.displayName || user?.displayName} className="profile-avatar" />
+            ) : (
+              '👤'
+            )}
+          </div>
+          <div className="user-info">
+            <div className="display-name">{entry.user?.displayName || user?.displayName || 'You'}</div>
+            <div className="handle">@{entry.user?.handle || user?.handle || 'user'}</div>
+            <div className="timestamp">{formatTimestamp(entry.timestamp)}</div>
+          </div>
+        </div>
+        <div className="message-content">{entry.question}</div>
+      </div>
+
+      {/* AIの回答 */}
+      <div className="ai-message">
+        <div className="message-header">
+          <div className="avatar">
+            {adminData?.profile?.avatar ? (
+              <img src={adminData.profile.avatar} alt={adminData.profile.displayName} className="profile-avatar" />
+            ) : (
+              '🤖'
+            )}
+          </div>
+          <div className="user-info">
+            <div className="display-name">{adminData?.profile?.displayName || 'AI'}</div>
+            <div className="handle">@{adminData?.profile?.handle || 'ai'}</div>
+            <div className="timestamp">{formatTimestamp(entry.timestamp)}</div>
+          </div>
+        </div>
+        <div className="message-content">{entry.answer}</div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="ask-ai-container">
+      <div className="ask-ai-header">
+        <h3>Ask AI</h3>
+        <div className="header-actions">
+          <button onClick={clearChatHistory} className="clear-btn" title="履歴をクリア">
+            🗑️
+          </button>
+          <button onClick={onClose} className="close-btn" title="閉じる">
+            ✕
+          </button>
+        </div>
+      </div>
+
+      <div className="chat-container">
+        {chatHistory.length === 0 && !loading ? (
+          <div className="welcome-message">
+            <div className="ai-message">
+              <div className="message-header">
+                <div className="avatar">
+                  {adminData?.profile?.avatar ? (
+                    <img src={adminData.profile.avatar} alt={adminData.profile.displayName} className="profile-avatar" />
+                  ) : (
+                    '🤖'
+                  )}
+                </div>
+                <div className="user-info">
+                  <div className="display-name">{adminData?.profile?.displayName || 'AI'}</div>
+                  <div className="handle">@{adminData?.profile?.handle || 'ai'}</div>
+                </div>
+              </div>
+              <div className="message-content">
+                こんにちは！このブログの内容について何でも質問してください。記事の詳細や関連する話題について説明できます。
+              </div>
+            </div>
+          </div>
+        ) : (
+          chatHistory.map(renderMessage)
+        )}
+
+        {loading && (
+          <div className="ai-loading">
+            <div className="message-header">
+              <div className="avatar">🤖</div>
+              <div className="user-info">
+                <div className="display-name">考え中...</div>
+              </div>
+            </div>
+            <LoadingSkeleton count={1} />
+          </div>
+        )}
+
+        {error && (
+          <div className="error-message">
+            <div className="message-content">
+              エラー: {error}
+            </div>
+          </div>
+        )}
+
+        <div ref={chatEndRef} />
+      </div>
+
+      <form onSubmit={handleSubmit} className="question-form">
+        <div className="input-container">
+          <textarea
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onCompositionStart={() => setIsComposing(true)}
+            onCompositionEnd={() => setIsComposing(false)}
+            placeholder="質問を入力してください..."
+            rows={2}
+            disabled={loading || !user}
+            className="question-input"
+          />
+          <button
+            type="submit"
+            disabled={loading || !question.trim() || !user}
+            className="send-btn"
+          >
+            {loading ? '⏳' : '📤'}
+          </button>
+        </div>
+        {!user && (
+          <div className="auth-notice">
+            ログインしてください
+          </div>
+        )}
+      </form>
+
+      <style jsx>{`
+        .ask-ai-container {
+          width: 100%;
+          max-width: 600px;
+          height: 500px;
+          display: flex;
+          flex-direction: column;
+          border: 1px solid #ddd;
+          border-radius: 8px;
+          background: white;
+          overflow: hidden;
+        }
+
+        .ask-ai-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 15px;
+          border-bottom: 1px solid #eee;
+          background: #f8f9fa;
+        }
+
+        .ask-ai-header h3 {
+          margin: 0;
+          color: #333;
+        }
+
+        .header-actions {
+          display: flex;
+          gap: 8px;
+        }
+
+        .clear-btn, .close-btn {
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 5px;
+          border-radius: 4px;
+          font-size: 14px;
+        }
+
+        .clear-btn:hover, .close-btn:hover {
+          background: #e9ecef;
+        }
+
+        .chat-container {
+          flex: 1;
+          overflow-y: auto;
+          padding: 15px;
+          display: flex;
+          flex-direction: column;
+          gap: 15px;
+        }
+
+        .chat-message {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+
+        .user-message, .ai-message, .welcome-message {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .user-message {
+          align-self: flex-end;
+          max-width: 80%;
+        }
+
+        .ai-message, .welcome-message {
+          align-self: flex-start;
+          max-width: 90%;
+        }
+
+        .message-header {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 5px;
+        }
+
+        .avatar {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          overflow: hidden;
+          flex-shrink: 0;
+        }
+
+        .profile-avatar {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .user-info {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+
+        .display-name {
+          font-weight: bold;
+          font-size: 12px;
+          color: #333;
+        }
+
+        .handle {
+          font-size: 11px;
+          color: #666;
+        }
+
+        .timestamp {
+          font-size: 10px;
+          color: #999;
+        }
+
+        .message-content {
+          background: #f1f3f4;
+          padding: 10px 12px;
+          border-radius: 12px;
+          font-size: 14px;
+          line-height: 1.4;
+          white-space: pre-wrap;
+        }
+
+        .user-message .message-content {
+          background: #007bff;
+          color: white;
+        }
+
+        .ai-message .message-content {
+          background: #e9ecef;
+          color: #333;
+        }
+
+        .ai-loading {
+          align-self: flex-start;
+          max-width: 90%;
+        }
+
+        .error-message {
+          background: #f8d7da;
+          color: #721c24;
+          padding: 10px;
+          border-radius: 8px;
+          border: 1px solid #f5c6cb;
+        }
+
+        .question-form {
+          padding: 15px;
+          border-top: 1px solid #eee;
+          background: #f8f9fa;
+        }
+
+        .input-container {
+          display: flex;
+          gap: 8px;
+          align-items: end;
+        }
+
+        .question-input {
+          flex: 1;
+          padding: 8px 12px;
+          border: 1px solid #ddd;
+          border-radius: 8px;
+          font-size: 14px;
+          resize: none;
+          font-family: inherit;
+        }
+
+        .question-input:focus {
+          outline: none;
+          border-color: #007bff;
+          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }
+
+        .question-input:disabled {
+          background: #e9ecef;
+          cursor: not-allowed;
+        }
+
+        .send-btn {
+          background: #007bff;
+          color: white;
+          border: none;
+          padding: 8px 12px;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 16px;
+          transition: background 0.2s;
+        }
+
+        .send-btn:hover:not(:disabled) {
+          background: #0056b3;
+        }
+
+        .send-btn:disabled {
+          background: #6c757d;
+          cursor: not-allowed;
+        }
+
+        .auth-notice {
+          text-align: center;
+          font-size: 12px;
+          color: #666;
+          margin-top: 8px;
+        }
+      `}</style>
+    </div>
+  )
+}

oauth/src/components/AuthButton.jsx

@@ -0,0 +1,77 @@
+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="user-section" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        {user.avatar && (
+          <img 
+            src={user.avatar} 
+            alt="Profile" 
+            className="user-avatar"
+            style={{ width: '24px', height: '24px' }}
+          />
+        )}
+        <div>
+          <div className="user-display-name" style={{ fontSize: '14px', fontWeight: '700' }}>
+            {user.displayName}
+          </div>
+          <div className="user-handle" style={{ fontSize: '12px' }}>
+            @{user.handle}
+          </div>
+        </div>
+        <button onClick={onLogout} className="btn btn-danger btn-sm">
+          ログアウト
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="auth-section search-bar-layout">
+      <input
+        type="text"
+        value={handleInput}
+        onChange={(e) => setHandleInput(e.target.value)}
+        placeholder="user.bsky.social"
+        disabled={isLoading}
+        className="handle-input"
+        onKeyPress={(e) => {
+          if (e.key === 'Enter') {
+            handleSubmit(e)
+          }
+        }}
+      />
+      <button 
+        type="button"
+        onClick={handleSubmit}
+        disabled={isLoading || !handleInput.trim()}
+        className="auth-button"
+      >
+        {isLoading ? 'Loading...' : <i className="fab fa-bluesky"></i>}
+      </button>
+    </div>
+  )
+}

oauth/src/components/Avatar.jsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from 'react'
+import { getAvatar } from '../utils/avatar.js'
+
+/**
+ * Avatar component with intelligent fallback
+ * 
+ * @param {Object} props
+ * @param {Object} props.record - Record object containing avatar data
+ * @param {string} props.handle - User handle
+ * @param {string} props.did - User DID
+ * @param {string} props.alt - Alt text for image
+ * @param {string} props.className - CSS class name
+ * @param {number} props.size - Avatar size in pixels
+ * @param {boolean} props.showFallback - Show fallback UI if no avatar
+ * @param {Function} props.onLoad - Callback when avatar loads
+ * @param {Function} props.onError - Callback when avatar fails to load
+ */
+export default function Avatar({ 
+  record, 
+  handle, 
+  did, 
+  alt = 'avatar',
+  className = 'avatar',
+  size = 40,
+  showFallback = true,
+  onLoad,
+  onError
+}) {
+  const [avatarUrl, setAvatarUrl] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [imageError, setImageError] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function loadAvatar() {
+      try {
+        setLoading(true)
+        setError(null)
+        setImageError(false)
+
+        const url = await getAvatar({ record, handle, did })
+        
+        if (!cancelled) {
+          setAvatarUrl(url)
+          setLoading(false)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err.message)
+          setLoading(false)
+          if (onError) onError(err)
+        }
+      }
+    }
+
+    loadAvatar()
+
+    return () => {
+      cancelled = true
+    }
+  }, [record, handle, did])
+
+  const handleImageError = async () => {
+    setImageError(true)
+    if (onError) onError(new Error('Image failed to load'))
+    
+    // Try to fetch fresh avatar if the current one failed
+    if (!loading && avatarUrl) {
+      try {
+        const freshUrl = await getAvatar({ handle, did, forceFresh: true })
+        if (freshUrl && freshUrl !== avatarUrl) {
+          setAvatarUrl(freshUrl)
+          setImageError(false)
+        }
+      } catch {
+        // Ignore errors in retry
+      }
+    }
+  }
+
+  const handleImageLoad = () => {
+    setImageError(false)
+    if (onLoad) onLoad()
+  }
+
+  // Determine what to render
+  if (loading) {
+    return (
+      <div 
+        className={`${className} avatar-loading`}
+        style={{ width: size, height: size }}
+        aria-label="Loading avatar..."
+      />
+    )
+  }
+
+  if (error || !avatarUrl || imageError) {
+    if (!showFallback) return null
+    
+    // Fallback avatar
+    const initial = (handle || 'U')[0].toUpperCase()
+    return (
+      <div 
+        className={`${className} avatar-fallback`}
+        style={{ 
+          width: size, 
+          height: size,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#e1e1e1',
+          borderRadius: '50%',
+          fontSize: size * 0.4
+        }}
+        aria-label={alt}
+      >
+        {initial}
+      </div>
+    )
+  }
+
+  return (
+    <img
+      src={avatarUrl}
+      alt={alt}
+      className={className}
+      style={{ width: size, height: size }}
+      onError={handleImageError}
+      onLoad={handleImageLoad}
+      loading="lazy"
+    />
+  )
+}
+
+/**
+ * Avatar with hover card showing user info
+ */
+export function AvatarWithCard({ 
+  record, 
+  handle, 
+  did,
+  displayName,
+  apiConfig,
+  ...avatarProps 
+}) {
+  const [showCard, setShowCard] = useState(false)
+  
+  return (
+    <div 
+      className="avatar-container"
+      onMouseEnter={() => setShowCard(true)}
+      onMouseLeave={() => setShowCard(false)}
+    >
+      <Avatar 
+        record={record}
+        handle={handle}
+        did={did}
+        {...avatarProps}
+      />
+      
+      {showCard && (
+        <div className="avatar-card">
+          <Avatar 
+            record={record}
+            handle={handle}
+            did={did}
+            size={80}
+            className="avatar-card-image"
+          />
+          <div className="avatar-card-info">
+            <div className="avatar-card-name">{displayName || handle}</div>
+            <a 
+              href={`${apiConfig?.web || 'https://bsky.app'}/profile/${did || handle}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="avatar-card-handle"
+            >
+              @{handle}
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Avatar list component for displaying multiple avatars
+ */
+export function AvatarList({ users, maxDisplay = 5, size = 30 }) {
+  const displayUsers = users.slice(0, maxDisplay)
+  const remainingCount = Math.max(0, users.length - maxDisplay)
+  
+  return (
+    <div className="avatar-list">
+      {displayUsers.map((user, index) => (
+        <div 
+          key={user.handle || index} 
+          className="avatar-list-item"
+          style={{ marginLeft: index > 0 ? -10 : 0, zIndex: displayUsers.length - index }}
+        >
+          <Avatar
+            handle={user.handle}
+            did={user.did}
+            record={user.record}
+            size={size}
+            showFallback={true}
+          />
+        </div>
+      ))}
+      {remainingCount > 0 && (
+        <div 
+          className="avatar-list-more"
+          style={{ 
+            width: size, 
+            height: size,
+            marginLeft: -10,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#666',
+            color: '#fff',
+            borderRadius: '50%',
+            fontSize: size * 0.4
+          }}
+        >
+          +{remainingCount}
+        </div>
+      )}
+    </div>
+  )
+}

oauth/src/components/AvatarImage.jsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react'
+import { getValidAvatar } from '../utils/avatarFetcher.js'
+import { logger } from '../utils/logger.js'
+
+export default function AvatarImage({ record, size = 40, className = "avatar" }) {
+  const [avatarUrl, setAvatarUrl] = useState(record?.value?.author?.avatar)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  const author = record?.value?.author
+  const handle = author?.handle
+  const displayName = author?.displayName || handle
+
+  useEffect(() => {
+    // record内のavatarが無い、またはエラーの場合に新しく取得
+    if (!avatarUrl || error) {
+      fetchValidAvatar()
+    }
+  }, [record, error])
+
+  const fetchValidAvatar = async () => {
+    if (!record || loading) return
+
+    setLoading(true)
+    try {
+      const validAvatar = await getValidAvatar(record)
+      setAvatarUrl(validAvatar)
+      setError(false)
+    } catch (err) {
+      logger.error('Failed to fetch valid avatar:', err)
+      setError(true)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleImageError = () => {
+    setError(true)
+    // エラー時に再取得を試行
+    fetchValidAvatar()
+  }
+
+  const handleImageLoad = () => {
+    setError(false)
+  }
+
+  // ローディング中のスケルトン
+  if (loading) {
+    return (
+      <div 
+        className={`${className} avatar-loading`}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: '#f0f0f0',
+          borderRadius: '50%',
+          animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite'
+        }}
+      />
+    )
+  }
+
+  // avatar URLがある場合
+  if (avatarUrl && !error) {
+    return (
+      <img 
+        src={avatarUrl}
+        alt={`${displayName} avatar`}
+        className={className}
+        style={{
+          width: size,
+          height: size,
+          borderRadius: '50%',
+          objectFit: 'cover'
+        }}
+        onError={handleImageError}
+        onLoad={handleImageLoad}
+      />
+    )
+  }
+
+  // フォールバック: 初期文字のアバター
+  const initial = displayName ? displayName.charAt(0).toUpperCase() : '?'
+  return (
+    <div 
+      className={`${className} avatar-fallback`}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        backgroundColor: '#ddd',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: size * 0.4,
+        fontWeight: 'bold',
+        color: '#666'
+      }}
+    >
+      {initial}
+    </div>
+  )
+}

oauth/src/components/AvatarTest.jsx

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react'
+import Avatar, { AvatarWithCard, AvatarList } from './Avatar.jsx'
+import { getAvatar, batchFetchAvatars, prefetchAvatar } from '../utils/avatar.js'
+
+/**
+ * Test component to demonstrate avatar functionality
+ */
+export default function AvatarTest() {
+  const [testResults, setTestResults] = useState({})
+  const [loading, setLoading] = useState(false)
+
+  // Test data
+  const testUsers = [
+    { handle: 'syui.ai', did: 'did:plc:uqzpqmrjnptsxezjx4xuh2mn' },
+    { handle: 'ai.syui.ai', did: 'did:plc:4hqjfn7m6n5hno3doamuhgef' },
+    { handle: 'yui.syui.ai', did: 'did:plc:6qyecktefllvenje24fcxnie' }
+  ]
+
+  const sampleRecord = {
+    value: {
+      author: {
+        handle: 'syui.ai',
+        did: 'did:plc:uqzpqmrjnptsxezjx4xuh2mn',
+        displayName: 'syui',
+        avatar: 'https://cdn.bsky.app/img/avatar/plain/did:plc:uqzpqmrjnptsxezjx4xuh2mn/bafkreid6kcc5pnn4b3ar7mj6vi3eiawhxgkcrw3edgbqeacyrlnlcoetea@jpeg'
+      },
+      text: 'Test message',
+      createdAt: new Date().toISOString()
+    }
+  }
+
+  // Test functions
+  const testGetAvatar = async () => {
+    setLoading(true)
+    try {
+      const results = {}
+      
+      // Test with record
+      results.fromRecord = await getAvatar({ record: sampleRecord })
+      
+      // Test with handle only
+      results.fromHandle = await getAvatar({ handle: 'syui.ai' })
+      
+      // Test with broken record (force fresh fetch)
+      const brokenRecord = {
+        ...sampleRecord,
+        value: {
+          ...sampleRecord.value,
+          author: {
+            ...sampleRecord.value.author,
+            avatar: 'https://broken-url.com/avatar.jpg'
+          }
+        }
+      }
+      results.brokenRecord = await getAvatar({ record: brokenRecord })
+      
+      // Test non-existent user
+      try {
+        results.nonExistent = await getAvatar({ handle: 'nonexistent.user' })
+      } catch (error) {
+        results.nonExistent = `Error: ${error.message}`
+      }
+      
+      setTestResults(results)
+    } catch (error) {
+      console.error('Test failed:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const testBatchFetch = async () => {
+    setLoading(true)
+    try {
+      const avatarMap = await batchFetchAvatars(testUsers)
+      setTestResults(prev => ({
+        ...prev,
+        batchResults: Object.fromEntries(avatarMap)
+      }))
+    } catch (error) {
+      console.error('Batch test failed:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const testPrefetch = async () => {
+    setLoading(true)
+    try {
+      await prefetchAvatar('syui.ai')
+      const cachedAvatar = await getAvatar({ handle: 'syui.ai' })
+      setTestResults(prev => ({
+        ...prev,
+        prefetchResult: cachedAvatar
+      }))
+    } catch (error) {
+      console.error('Prefetch test failed:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="avatar-test-container">
+      <div className="card">
+        <div className="card-header">
+          <h2>Avatar System Test</h2>
+        </div>
+        <div className="card-content">
+          
+          {/* Basic Avatar Examples */}
+          <section className="test-section">
+            <h3>Basic Avatar Examples</h3>
+            <div className="avatar-examples">
+              <div className="avatar-example">
+                <h4>From Record</h4>
+                <Avatar record={sampleRecord} size={60} />
+              </div>
+              
+              <div className="avatar-example">
+                <h4>From Handle</h4>
+                <Avatar handle="syui.ai" size={60} />
+              </div>
+              
+              <div className="avatar-example">
+                <h4>With Fallback</h4>
+                <Avatar handle="nonexistent.user" size={60} />
+              </div>
+              
+              <div className="avatar-example">
+                <h4>Loading State</h4>
+                <div className="avatar-loading" style={{ width: 60, height: 60 }} />
+              </div>
+            </div>
+          </section>
+
+          {/* Avatar with Card */}
+          <section className="test-section">
+            <h3>Avatar with Hover Card</h3>
+            <div className="avatar-examples">
+              <AvatarWithCard
+                record={sampleRecord}
+                displayName="syui"
+                apiConfig={{ web: 'https://bsky.app' }}
+                size={60}
+              />
+              <p>Hover over the avatar to see the card</p>
+            </div>
+          </section>
+
+          {/* Avatar List */}
+          <section className="test-section">
+            <h3>Avatar List</h3>
+            <AvatarList users={testUsers} maxDisplay={3} size={40} />
+          </section>
+
+          {/* Test Controls */}
+          <section className="test-section">
+            <h3>Test Functions</h3>
+            <div className="test-controls">
+              <button 
+                onClick={testGetAvatar} 
+                disabled={loading}
+                className="btn btn-primary"
+              >
+                Test getAvatar()
+              </button>
+              
+              <button 
+                onClick={testBatchFetch} 
+                disabled={loading}
+                className="btn btn-primary"
+              >
+                Test Batch Fetch
+              </button>
+              
+              <button 
+                onClick={testPrefetch} 
+                disabled={loading}
+                className="btn btn-primary"
+              >
+                Test Prefetch
+              </button>
+            </div>
+          </section>
+
+          {/* Test Results */}
+          {Object.keys(testResults).length > 0 && (
+            <section className="test-section">
+              <h3>Test Results</h3>
+              <div className="json-display">
+                <pre className="json-content">
+                  {JSON.stringify(testResults, null, 2)}
+                </pre>
+              </div>
+            </section>
+          )}
+
+        </div>
+      </div>
+    </div>
+  )
+}

oauth/src/components/AvatarTestPanel.jsx

@@ -0,0 +1,246 @@
+import React, { useState } from 'react'
+import AvatarImage from './AvatarImage.jsx'
+import { getValidAvatar, clearAvatarCache, getAvatarCacheStats } from '../utils/avatarFetcher.js'
+
+export default function AvatarTestPanel() {
+  const [testHandle, setTestHandle] = useState('ai.syui.ai')
+  const [testResult, setTestResult] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [cacheStats, setCacheStats] = useState(null)
+
+  // ダミーレコードを作成（実際の投稿したレコード形式）
+  const createTestRecord = (handle, brokenAvatar = false) => ({
+    value: {
+      author: {
+        did: null, // DIDはnullにして、handleから取得させる
+        handle: handle,
+        displayName: "Test User",
+        avatar: brokenAvatar ? "https://broken.example.com/avatar.jpg" : null
+      },
+      text: "テストコメント",
+      createdAt: new Date().toISOString()
+    }
+  })
+
+  const testAvatarFetch = async (useBrokenAvatar = false) => {
+    setLoading(true)
+    setTestResult(null)
+
+    try {
+      const testRecord = createTestRecord(testHandle, useBrokenAvatar)
+      const avatarUrl = await getValidAvatar(testRecord)
+      
+      setTestResult({
+        success: true,
+        avatarUrl,
+        handle: testHandle,
+        brokenTest: useBrokenAvatar,
+        timestamp: new Date().toISOString()
+      })
+    } catch (error) {
+      setTestResult({
+        success: false,
+        error: error.message,
+        handle: testHandle,
+        brokenTest: useBrokenAvatar
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClearCache = () => {
+    clearAvatarCache()
+    setCacheStats(null)
+    alert('Avatar cache cleared!')
+  }
+
+  const handleShowCacheStats = () => {
+    const stats = getAvatarCacheStats()
+    setCacheStats(stats)
+  }
+
+  return (
+    <div className="test-ui">
+      <h2>🖼️ Avatar Test Panel</h2>
+      <p className="description">
+        Avatar取得システムのテスト。投稿済みのdummy recordを使用してavatar取得処理を確認できます。
+      </p>
+
+      <div className="form-group">
+        <label htmlFor="test-handle">Test Handle:</label>
+        <input
+          id="test-handle"
+          type="text"
+          value={testHandle}
+          onChange={(e) => setTestHandle(e.target.value)}
+          placeholder="ai.syui.ai"
+          disabled={loading}
+        />
+      </div>
+
+      <div className="form-actions">
+        <button
+          onClick={() => testAvatarFetch(false)}
+          disabled={loading || !testHandle.trim()}
+          className="btn btn-primary"
+        >
+          {loading ? '⏳ Testing...' : '🔄 Test Avatar Fetch'}
+        </button>
+
+        <button
+          onClick={() => testAvatarFetch(true)}
+          disabled={loading || !testHandle.trim()}
+          className="btn btn-outline"
+        >
+          {loading ? '⏳ Testing...' : '💥 Test Broken Avatar'}
+        </button>
+
+        <button
+          onClick={handleClearCache}
+          disabled={loading}
+          className="btn btn-danger btn-sm"
+        >
+          🗑️ Clear Cache
+        </button>
+
+        <button
+          onClick={handleShowCacheStats}
+          disabled={loading}
+          className="btn btn-outline btn-sm"
+        >
+          📊 Cache Stats
+        </button>
+      </div>
+
+      {testResult && (
+        <div className="test-result">
+          <h3>Test Result:</h3>
+          {testResult.success ? (
+            <div className="success-message">
+              ✅ Avatar fetched successfully!
+              <div className="result-details">
+                <p><strong>Handle:</strong> {testResult.handle}</p>
+                <p><strong>Broken Test:</strong> {testResult.brokenTest ? 'Yes' : 'No'}</p>
+                <p><strong>Avatar URL:</strong> {testResult.avatarUrl || 'None'}</p>
+                <p><strong>Timestamp:</strong> {testResult.timestamp}</p>
+                
+                {testResult.avatarUrl && (
+                  <div className="avatar-preview">
+                    <p><strong>Preview:</strong></p>
+                    <img 
+                      src={testResult.avatarUrl} 
+                      alt="Avatar preview" 
+                      style={{
+                        width: 60,
+                        height: 60,
+                        borderRadius: '50%',
+                        objectFit: 'cover',
+                        border: '2px solid #ddd'
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="error-message">
+              ❌ Test failed: {testResult.error}
+            </div>
+          )}
+        </div>
+      )}
+
+      {cacheStats && (
+        <div className="cache-stats">
+          <h3>Cache Statistics:</h3>
+          <p><strong>Entries:</strong> {cacheStats.size}</p>
+          {cacheStats.entries.length > 0 && (
+            <div className="cache-entries">
+              <h4>Cached Avatars:</h4>
+              {cacheStats.entries.map((entry, i) => (
+                <div key={i} className="cache-entry">
+                  <p><strong>Key:</strong> {entry.key}</p>
+                  <p><strong>Age:</strong> {Math.floor(entry.age / 1000)}s</p>
+                  <p><strong>Profile:</strong> {entry.profile?.displayName} (@{entry.profile?.handle})</p>
+                  {entry.avatar && (
+                    <img 
+                      src={entry.avatar} 
+                      alt="Cached avatar" 
+                      style={{ width: 30, height: 30, borderRadius: '50%' }}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="live-demo">
+        <h3>Live Avatar Component Demo:</h3>
+        <p>実際のAvatarImageコンポーネントの動作確認:</p>
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', marginTop: '12px' }}>
+          <AvatarImage record={createTestRecord(testHandle, false)} size={40} />
+          <span>Normal avatar test</span>
+        </div>
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', marginTop: '12px' }}>
+          <AvatarImage record={createTestRecord(testHandle, true)} size={40} />
+          <span>Broken avatar test (should fetch fresh)</span>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .test-result {
+          margin-top: 20px;
+          padding: 16px;
+          border: 1px solid #ddd;
+          border-radius: 8px;
+          background: #f9f9f9;
+        }
+        .result-details {
+          margin-top: 12px;
+          font-size: 14px;
+        }
+        .result-details p {
+          margin: 4px 0;
+        }
+        .avatar-preview {
+          margin-top: 12px;
+          padding: 12px;
+          border: 1px solid #eee;
+          border-radius: 4px;
+          background: white;
+        }
+        .cache-stats {
+          margin-top: 20px;
+          padding: 16px;
+          border: 1px solid #ddd;
+          border-radius: 8px;
+          background: #f0f8ff;
+        }
+        .cache-entries {
+          margin-top: 12px;
+        }
+        .cache-entry {
+          padding: 8px;
+          margin: 8px 0;
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          background: white;
+          font-size: 12px;
+        }
+        .cache-entry p {
+          margin: 2px 0;
+        }
+        .live-demo {
+          margin-top: 20px;
+          padding: 16px;
+          border: 1px solid #ddd;
+          border-radius: 8px;
+          background: #f8f9fa;
+        }
+      `}</style>
+    </div>
+  )
+}

oauth/src/components/ChatRecordList.jsx

@@ -0,0 +1,129 @@
+import React from 'react'
+
+export default function ChatRecordList({ chatPairs, apiConfig, user = null, agent = null, onRecordDeleted = null }) {
+  if (!chatPairs || chatPairs.length === 0) {
+    return (
+      <section>
+        <p>チャット履歴がありません</p>
+      </section>
+    )
+  }
+
+  const handleDelete = async (chatPair) => {
+    if (!user || !agent || !chatPair.question?.uri) return
+    
+    const confirmed = window.confirm('この会話を削除しますか？')
+    if (!confirmed) return
+
+    try {
+      // Delete question record
+      if (chatPair.question?.uri) {
+        const questionUriParts = chatPair.question.uri.split('/')
+        await agent.api.com.atproto.repo.deleteRecord({
+          repo: questionUriParts[2],
+          collection: questionUriParts[3],
+          rkey: questionUriParts[4]
+        })
+      }
+
+      // Delete answer record if exists
+      if (chatPair.answer?.uri) {
+        const answerUriParts = chatPair.answer.uri.split('/')
+        await agent.api.com.atproto.repo.deleteRecord({
+          repo: answerUriParts[2],
+          collection: answerUriParts[3],
+          rkey: answerUriParts[4]
+        })
+      }
+
+      if (onRecordDeleted) {
+        onRecordDeleted()
+      }
+    } catch (error) {
+      alert(`削除に失敗しました: ${error.message}`)
+    }
+  }
+
+  const canDelete = (chatPair) => {
+    return user && agent && chatPair.question?.uri && chatPair.question.value.author?.did === user.did
+  }
+
+  return (
+    <section>
+      {chatPairs.map((chatPair, i) => (
+        <div key={chatPair.rkey} className="chat-conversation">
+          {/* Question */}
+          {chatPair.question && (
+            <div className="chat-message user-message comment-style">
+              <div className="message-header">
+                {chatPair.question.value.author?.avatar ? (
+                  <img 
+                    src={chatPair.question.value.author.avatar} 
+                    alt={`${chatPair.question.value.author.displayName || chatPair.question.value.author.handle} avatar`}
+                    className="avatar"
+                  />
+                ) : (
+                  <div className="avatar">
+                    {(chatPair.question.value.author?.displayName || chatPair.question.value.author?.handle || '?').charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div className="user-info">
+                  <div className="display-name">{chatPair.question.value.author?.displayName || chatPair.question.value.author?.handle}</div>
+                </div>
+                {canDelete(chatPair) && (
+                  <div className="record-actions">
+                    <button
+                      onClick={() => handleDelete(chatPair)}
+                      className="btn btn-danger btn-sm"
+                      title="Delete Conversation"
+                    >
+                      delete
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="message-content">{chatPair.question.value.text}</div>
+            </div>
+          )}
+
+          {/* Answer */}
+          {chatPair.answer && (
+            <div className="chat-message ai-message comment-style">
+              <div className="message-header">
+                {chatPair.answer.value.author?.avatar ? (
+                  <img 
+                    src={chatPair.answer.value.author.avatar} 
+                    alt={`${chatPair.answer.value.author.displayName || chatPair.answer.value.author.handle} avatar`}
+                    className="avatar"
+                  />
+                ) : (
+                  <div className="avatar">
+                    {(chatPair.answer.value.author?.displayName || chatPair.answer.value.author?.handle || 'AI').charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div className="user-info">
+                  <div className="display-name">{chatPair.answer.value.author?.displayName || chatPair.answer.value.author?.handle}</div>
+                </div>
+              </div>
+              <div className="message-content">{chatPair.answer.value.text}</div>
+            </div>
+          )}
+
+          {/* Post metadata */}
+          {chatPair.question?.value.post?.url && (
+            <div className="record-meta">
+              <a 
+                href={chatPair.question.value.post.url} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="record-url"
+              >
+                {chatPair.question.value.post.url}
+              </a>
+            </div>
+          )}
+        </div>
+      ))}
+    </section>
+  )
+}

oauth/src/components/CommentForm.jsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import { atproto, collections } from '../api/atproto.js'
+import { env } from '../config/env.js'
+
+export default function CommentForm({ user, agent, onCommentPosted }) {
+  const [text, setText] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!text.trim()) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const currentUrl = window.location.href
+      const timestamp = new Date().toISOString()
+      
+      // Create ai.syui.log record structure (new unified format)
+      const record = {
+        repo: user.did,
+        collection: env.collection,
+        rkey: `comment-${Date.now()}`,
+        record: {
+          $type: env.collection,
+          url: currentUrl, // Keep for backward compatibility
+          post: {
+            url: currentUrl,
+            date: timestamp,
+            slug: currentUrl.match(/\/posts\/([^/]+)/)?.[1] || new URL(currentUrl).pathname.split('/').pop()?.replace(/\.html$/, '') || '',
+            tags: [],
+            title: document.title || 'Comment',
+            language: 'ja'
+          },
+          text: text.trim(),
+          type: 'comment',
+          author: {
+            did: user.did,
+            handle: user.handle,
+            displayName: user.displayName,
+            avatar: user.avatar
+          },
+          createdAt: timestamp
+        }
+      }
+
+      // Post the record using the same API as ask-AI
+      await agent.api.com.atproto.repo.putRecord({
+        repo: record.repo,
+        collection: record.collection,
+        rkey: record.rkey,
+        record: record.record
+      })
+
+      // キャッシュを無効化
+      collections.invalidateCache(env.collection)
+
+      // Clear form
+      setText('')
+
+      // Notify parent component
+      if (onCommentPosted) {
+        onCommentPosted()
+      }
+      
+      // Show success message briefly
+      setText('✓ ')
+      setTimeout(() => {
+        setText('')
+      }, 2000)
+
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!user) {
+    return (
+      <div style={{ 
+        textAlign: 'center', 
+        padding: '40px', 
+        color: 'var(--text-secondary)'
+      }}>
+        <p>atproto login</p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h3>post</h3>
+      
+      <form onSubmit={handleSubmit}>
+        <div className="form-group" style={{ marginBottom: '12px', padding: '8px', backgroundColor: 'var(--background-secondary)', borderRadius: '4px', fontSize: '0.9em' }}>
+          <strong>url:</strong> {window.location.href}
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="comment-text">comment:</label>
+          <textarea
+            id="comment-text"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="text..."
+            rows={4}
+            required
+            disabled={loading}
+            className="form-input form-textarea"
+          />
+        </div>
+
+        {error && (
+          <div className="error-message">
+            err: {error}
+          </div>
+        )}
+
+        <div className="form-actions">
+          <button 
+            type="submit" 
+            disabled={loading || !text.trim()}
+            className={`btn ${loading ? 'btn-outline' : 'btn-primary'}`}
+          >
+            {loading ? 'posting...' : 'post'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

oauth/src/components/LoadingSkeleton.jsx

@@ -0,0 +1,98 @@
+import React from 'react'
+
+export default function LoadingSkeleton({ count = 3, showTitle = false }) {
+  return (
+    <div className="loading-skeleton">
+      {showTitle && (
+        <div className="skeleton-title">
+          <div className="skeleton-line title"></div>
+        </div>
+      )}
+      
+      {Array(count).fill(0).map((_, i) => (
+        <div key={i} className="skeleton-item">
+          <div className="skeleton-avatar"></div>
+          <div className="skeleton-content">
+            <div className="skeleton-line name"></div>
+            <div className="skeleton-line text"></div>
+            <div className="skeleton-line text short"></div>
+            <div className="skeleton-line meta"></div>
+          </div>
+        </div>
+      ))}
+      
+      <style jsx>{`
+        .loading-skeleton {
+          padding: 10px;
+        }
+        
+        .skeleton-title {
+          margin-bottom: 20px;
+        }
+        
+        .skeleton-item {
+          display: flex;
+          padding: 15px;
+          border: 1px solid #eee;
+          margin: 10px 0;
+          border-radius: 8px;
+          background: #fafafa;
+        }
+        
+        .skeleton-avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+          background-size: 200% 100%;
+          animation: skeleton-loading 1.5s infinite;
+          margin-right: 12px;
+          flex-shrink: 0;
+        }
+        
+        .skeleton-content {
+          flex: 1;
+          min-width: 0;
+        }
+        
+        .skeleton-line {
+          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+          background-size: 200% 100%;
+          animation: skeleton-loading 1.5s infinite;
+          margin-bottom: 8px;
+          border-radius: 4px;
+        }
+        
+        .skeleton-line.title {
+          height: 20px;
+          width: 30%;
+        }
+        
+        .skeleton-line.name {
+          height: 14px;
+          width: 25%;
+        }
+        
+        .skeleton-line.text {
+          height: 12px;
+          width: 90%;
+        }
+        
+        .skeleton-line.text.short {
+          width: 60%;
+        }
+        
+        .skeleton-line.meta {
+          height: 10px;
+          width: 40%;
+          margin-bottom: 0;
+        }
+        
+        @keyframes skeleton-loading {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      `}</style>
+    </div>
+  )
+}

oauth/src/components/OAuthCallback.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+export default function OAuthCallback() {
+  return (
+    <div style={{ 
+      display: 'flex', 
+      flexDirection: 'column',
+      alignItems: 'center', 
+      justifyContent: 'center',
+      minHeight: '50vh',
+      padding: '40px',
+      textAlign: 'center' 
+    }}>
+      <div style={{
+        width: '50px',
+        height: '50px',
+        border: '4px solid #f3f3f3',
+        borderTop: '4px solid #667eea',
+        borderRadius: '50%',
+        animation: 'spin 1s linear infinite',
+        marginBottom: '20px'
+      }} />
+      <h2 style={{ color: '#333', marginBottom: '12px' }}>OAuth認証処理中...</h2>
+      <p style={{ color: '#666', fontSize: '14px' }}>
+        認証が完了しましたら自動で元のページに戻ります
+      </p>
+      
+      <style jsx>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  )
+}

oauth/src/components/ProfileForm.jsx

@@ -0,0 +1,165 @@
+import React, { useState } from 'react'
+import { atproto, collections } from '../api/atproto.js'
+import { env } from '../config/env.js'
+
+const ProfileForm = ({ user, agent, apiConfig, onProfilePosted }) => {
+  const [text, setText] = useState('')
+  const [type, setType] = useState('user')
+  const [handle, setHandle] = useState('')
+  const [rkey, setRkey] = useState('')
+  const [posting, setPosting] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    
+    if (!text.trim() || !handle.trim() || !rkey.trim()) {
+      setError('すべてのフィールドを入力してください')
+      return
+    }
+
+    setPosting(true)
+    setError('')
+
+    try {
+      // Get handle information
+      let authorData
+      try {
+        const handleDid = await atproto.getDid(apiConfig.pds, handle)
+        // Use agent to get profile with authentication
+        const profileResponse = await agent.api.app.bsky.actor.getProfile({ actor: handleDid })
+        authorData = profileResponse.data
+      } catch (err) {
+        throw new Error('ハンドルが見つかりません')
+      }
+
+      // Create record using the same pattern as CommentForm
+      const timestamp = new Date().toISOString()
+      const record = {
+        repo: user.did,
+        collection: env.collection,
+        rkey: rkey,
+        record: {
+          $type: env.collection,
+          text: text,
+          type: 'profile',
+          profileType: type, // admin or user
+          author: {
+            did: authorData.did,
+            handle: authorData.handle,
+            displayName: authorData.displayName || authorData.handle,
+            avatar: authorData.avatar || null
+          },
+          createdAt: timestamp,
+          post: {
+            url: window.location.origin,
+            date: timestamp,
+            slug: '',
+            tags: [],
+            title: 'Profile',
+            language: 'ja'
+          }
+        }
+      }
+
+      // Post the record using agent like CommentForm
+      await agent.api.com.atproto.repo.putRecord(record)
+      
+      // Invalidate cache and refresh
+      collections.invalidateCache(env.collection)
+      
+      // Reset form
+      setText('')
+      setType('user')
+      setHandle('')
+      setRkey('')
+      
+      if (onProfilePosted) {
+        onProfilePosted()
+      }
+      
+    } catch (err) {
+      console.error('Failed to create profile:', err)
+      setError(err.message || 'プロフィールの作成に失敗しました')
+    } finally {
+      setPosting(false)
+    }
+  }
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <div className="profile-form-container">
+      <h3>プロフィール投稿</h3>
+      
+      {error && (
+        <div className="error-message">
+          {error}
+        </div>
+      )}
+      
+      <form onSubmit={handleSubmit} className="profile-form">
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="handle">ハンドル</label>
+            <input
+              type="text"
+              id="handle"
+              value={handle}
+              onChange={(e) => setHandle(e.target.value)}
+              placeholder="例: syui.ai"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="rkey">Rkey</label>
+            <input
+              type="text"
+              id="rkey"
+              value={rkey}
+              onChange={(e) => setRkey(e.target.value)}
+              placeholder="例: syui"
+              required
+            />
+          </div>
+        </div>
+        
+        <div className="form-group">
+          <label htmlFor="type">タイプ</label>
+          <select
+            id="type"
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+          >
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+          </select>
+        </div>
+        
+        <div className="form-group">
+          <label htmlFor="text">プロフィールテキスト</label>
+          <textarea
+            id="text"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="プロフィールの説明を入力してください"
+            rows={4}
+            required
+          />
+        </div>
+        
+        <button 
+          type="submit" 
+          disabled={posting || !text.trim() || !handle.trim() || !rkey.trim()}
+          className="submit-btn"
+        >
+          {posting ? '投稿中...' : '投稿'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default ProfileForm

oauth/src/components/ProfileRecordList.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+export default function ProfileRecordList({ profileRecords, apiConfig, user = null, agent = null, onRecordDeleted = null }) {
+  if (!profileRecords || profileRecords.length === 0) {
+    return (
+      <section>
+        <p>プロフィールがありません</p>
+      </section>
+    )
+  }
+
+  const handleDelete = async (profile) => {
+    if (!user || !agent || !profile.uri) return
+    
+    const confirmed = window.confirm('このプロフィールを削除しますか？')
+    if (!confirmed) return
+
+    try {
+      const uriParts = profile.uri.split('/')
+      await agent.api.com.atproto.repo.deleteRecord({
+        repo: uriParts[2],
+        collection: uriParts[3],
+        rkey: uriParts[4]
+      })
+
+      if (onRecordDeleted) {
+        onRecordDeleted()
+      }
+    } catch (error) {
+      alert(`削除に失敗しました: ${error.message}`)
+    }
+  }
+
+  const canDelete = (profile) => {
+    if (!user || !agent || !profile.uri) return false
+    
+    // Check if the record is in the current user's repository
+    const recordRepoDid = profile.uri.split('/')[2]
+    return recordRepoDid === user.did
+  }
+
+  return (
+    <section>
+      {profileRecords.map((profile) => (
+        <div key={profile.uri} className="chat-message comment-style">
+          <div className="message-header">
+            {profile.value.author?.avatar ? (
+              <img 
+                src={profile.value.author.avatar} 
+                alt={`${profile.value.author.displayName || profile.value.author.handle} avatar`}
+                className="avatar"
+              />
+            ) : (
+              <div className="avatar">
+                {(profile.value.author?.displayName || profile.value.author?.handle || '?').charAt(0).toUpperCase()}
+              </div>
+            )}
+            <div className="user-info">
+              <div className="display-name">
+                {profile.value.author?.displayName || profile.value.author?.handle}
+                {profile.value.profileType === 'admin' && (
+                  <span className="admin-badge"> Admin</span>
+                )}
+              </div>
+            </div>
+            {canDelete(profile) && (
+              <div className="record-actions">
+                <button
+                  onClick={() => handleDelete(profile)}
+                  className="btn btn-danger btn-sm"
+                  title="Delete Profile"
+                >
+                  delete
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="message-content">{profile.value.text}</div>
+        </div>
+      ))}
+    </section>
+  )
+}

oauth/src/components/RecordList.jsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react'
+import AvatarImage from './AvatarImage.jsx'
+import Avatar from './Avatar.jsx'
+
+// Helper function to get correct web URL based on avatar URL
+function getCorrectWebUrl(avatarUrl) {
+  if (!avatarUrl) return 'https://bsky.app'
+  
+  // If avatar is from bsky.app (main Bluesky), use bsky.app
+  if (avatarUrl.includes('cdn.bsky.app') || avatarUrl.includes('bsky.app')) {
+    return 'https://bsky.app'
+  }
+  
+  // If avatar is from syu.is, use web.syu.is
+  if (avatarUrl.includes('bsky.syu.is') || avatarUrl.includes('syu.is')) {
+    return 'https://syu.is'
+  }
+  
+  // Default to bsky.app
+  return 'https://bsky.app'
+}
+
+export default function RecordList({ title, records, apiConfig, showTitle = true, user = null, agent = null, onRecordDeleted = null }) {
+  const [expandedRecords, setExpandedRecords] = useState(new Set())
+  const [deletingRecords, setDeletingRecords] = useState(new Set())
+
+  const toggleJsonView = (index) => {
+    const newExpanded = new Set(expandedRecords)
+    if (newExpanded.has(index)) {
+      newExpanded.delete(index)
+    } else {
+      newExpanded.add(index)
+    }
+    setExpandedRecords(newExpanded)
+  }
+
+  const handleDelete = async (record, index) => {
+    if (!user || !agent || !record.uri) return
+    
+    const confirmed = window.confirm('このレコードを削除しますか？')
+    if (!confirmed) return
+
+    setDeletingRecords(prev => new Set([...prev, index]))
+
+    try {
+      // Extract repo, collection, rkey from URI
+      const uriParts = record.uri.split('/')
+      const repo = uriParts[2]
+      const collection = uriParts[3]
+      const rkey = uriParts[4]
+
+      await agent.com.atproto.repo.deleteRecord({
+        repo: repo,
+        collection: collection,
+        rkey: rkey
+      })
+
+      if (onRecordDeleted) {
+        onRecordDeleted()
+      }
+    } catch (error) {
+      alert(`削除に失敗しました: ${error.message}`)
+    } finally {
+      setDeletingRecords(prev => {
+        const newSet = new Set(prev)
+        newSet.delete(index)
+        return newSet
+      })
+    }
+  }
+
+  const canDelete = (record) => {
+    return user && agent && record.uri && record.value.author?.did === user.did
+  }
+  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} className="record-item">
+          <div className="record-header">
+            <AvatarImage record={record} size={40} />
+            <div className="user-info">
+              <div className="display-name">{record.value.author?.displayName || record.value.author?.handle}</div>
+              <div className="handle">
+                <a 
+                  href={`${getCorrectWebUrl(record.value.author?.avatar)}/profile/${record.value.author?.did}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="handle-link"
+                >
+                  @{record.value.author?.handle}
+                </a>
+              </div>
+              <div className="timestamp">{new Date(record.value.createdAt).toLocaleString()}</div>
+            </div>
+            
+            <div className="record-actions">
+              <button
+                onClick={() => toggleJsonView(i)}
+                className={`btn btn-sm ${expandedRecords.has(i) ? 'btn-outline' : 'btn-primary'}`}
+                title="Show/Hide JSON"
+              >
+                {expandedRecords.has(i) ? 'hide' : 'json'}
+              </button>
+              
+              {canDelete(record) && (
+                <button
+                  onClick={() => handleDelete(record, i)}
+                  disabled={deletingRecords.has(i)}
+                  className="btn btn-danger btn-sm"
+                  title="Delete Record"
+                >
+                  {deletingRecords.has(i) ? 'deleting...' : 'delete'}
+                </button>
+              )}
+            </div>
+          </div>
+          
+          <div className="record-meta">
+            {record.value.post?.url && (
+              <a 
+                href={record.value.post.url} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="record-url"
+              >
+                {record.value.post.url}
+              </a>
+            )}
+          </div>
+          
+          {expandedRecords.has(i) && (
+            <div className="json-display">
+              <pre className="json-content">
+                {JSON.stringify(record, null, 2)}
+              </pre>
+            </div>
+          )}
+          
+          <div className="record-content">{record.value.text || record.value.content}</div>
+        </div>
+      ))}
+    </section>
+  )
+}

oauth/src/components/RecordTabs.jsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+import RecordList from './RecordList.jsx'
+import ChatRecordList from './ChatRecordList.jsx'
+import ProfileRecordList from './ProfileRecordList.jsx'
+import LoadingSkeleton from './LoadingSkeleton.jsx'
+import { logger } from '../utils/logger.js'
+
+export default function RecordTabs({ langRecords, commentRecords, userComments, chatRecords, userChatRecords, userChatLoading, baseRecords, apiConfig, pageContext, user = null, agent = null, onRecordDeleted = null }) {
+  const [activeTab, setActiveTab] = useState('profiles')
+  
+  logger.log('RecordTabs: activeTab is', activeTab)
+
+  // 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 || [])
+  const filteredBaseRecords = filterRecords(baseRecords || [])
+  
+  // Filter profile records from baseRecords
+  const profileRecords = (baseRecords || []).filter(record => record.value?.type === 'profile')
+  const sortedProfileRecords = profileRecords.sort((a, b) => {
+    if (a.value.profileType === 'admin' && b.value.profileType !== 'admin') return -1
+    if (a.value.profileType !== 'admin' && b.value.profileType === 'admin') return 1
+    return 0
+  })
+  const filteredProfileRecords = filterRecords(sortedProfileRecords)
+
+  return (
+    <div className="record-tabs">
+      <div className="tab-header">
+        <button 
+          className={`tab-btn ${activeTab === 'profiles' ? 'active' : ''}`}
+          onClick={() => {
+            logger.log('RecordTabs: Profiles tab clicked')
+            setActiveTab('profiles')
+          }}
+        >
+          about ({filteredProfileRecords.length})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'collection' ? 'active' : ''}`}
+          onClick={() => setActiveTab('collection')}
+        >
+          chat ({userChatRecords?.length || 0})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'comment' ? 'active' : ''}`}
+          onClick={() => setActiveTab('comment')}
+        >
+          feedback ({filteredCommentRecords.length})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`}
+          onClick={() => setActiveTab('users')}
+        >
+          comment ({filteredUserComments.length})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'lang' ? 'active' : ''}`}
+          onClick={() => setActiveTab('lang')}
+        >
+          en ({filteredLangRecords.length})
+        </button>
+      </div>
+
+      <div className="tab-content">
+        {activeTab === 'lang' && (
+          !langRecords ? (
+            <LoadingSkeleton count={3} showTitle={true} />
+          ) : (
+            <RecordList 
+              title=""
+              records={filteredLangRecords} 
+              apiConfig={apiConfig} 
+              user={user}
+              agent={agent}
+              onRecordDeleted={onRecordDeleted}
+              showTitle={false}
+            />
+          )
+        )}
+        {activeTab === 'comment' && (
+          !commentRecords ? (
+            <LoadingSkeleton count={3} showTitle={true} />
+          ) : (
+            <RecordList 
+              title=""
+              records={filteredCommentRecords} 
+              apiConfig={apiConfig} 
+              user={user}
+              agent={agent}
+              onRecordDeleted={onRecordDeleted}
+              showTitle={false}
+            />
+          )
+        )}
+        {activeTab === 'collection' && (
+          userChatLoading ? (
+            <LoadingSkeleton count={2} showTitle={true} />
+          ) : (
+            <ChatRecordList 
+              chatPairs={userChatRecords} 
+              apiConfig={apiConfig} 
+              user={user}
+              agent={agent}
+              onRecordDeleted={onRecordDeleted}
+            />
+          )
+        )}
+        {activeTab === 'users' && (
+          !userComments ? (
+            <LoadingSkeleton count={3} showTitle={true} />
+          ) : (
+            <RecordList 
+              title=""
+              records={filteredUserComments} 
+              apiConfig={apiConfig} 
+              user={user}
+              agent={agent}
+              onRecordDeleted={onRecordDeleted}
+              showTitle={false}
+            />
+          )
+        )}
+        {activeTab === 'profiles' && (
+          !baseRecords ? (
+            <LoadingSkeleton count={3} showTitle={true} />
+          ) : (
+            <ProfileRecordList 
+              profileRecords={filteredProfileRecords}
+              apiConfig={apiConfig} 
+              user={user}
+              agent={agent}
+              onRecordDeleted={onRecordDeleted}
+            />
+          )
+        )}
+      </div>
+
+    </div>
+  )
+}

oauth/src/components/TestUI.jsx

@@ -0,0 +1,531 @@
+import React, { useState } from 'react'
+import { env } from '../config/env.js'
+import AvatarTestPanel from './AvatarTestPanel.jsx'
+import AvatarTest from './AvatarTest.jsx'
+
+export default function TestUI() {
+  const [activeTab, setActiveTab] = useState('putRecord')
+  const [accessJwt, setAccessJwt] = useState('')
+  const [handle, setHandle] = useState('')
+  const [sessionDid, setSessionDid] = useState('')
+  const [collection, setCollection] = useState('ai.syui.log')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [success, setSuccess] = useState(null)
+  const [showJson, setShowJson] = useState(false)
+  const [lastRecord, setLastRecord] = useState(null)
+
+  const collections = [
+    'ai.syui.log',
+    'ai.syui.log.chat',
+    'ai.syui.log.chat.lang',
+    'ai.syui.log.chat.comment'
+  ]
+
+  const generateDummyData = (collectionType) => {
+    const timestamp = new Date().toISOString()
+    const url = 'https://syui.ai/test/dummy'
+    
+    const basePost = {
+      url: url,
+      date: timestamp,
+      slug: 'dummy-test',
+      tags: ['test', 'dummy'],
+      title: 'Test Post',
+      language: 'ja'
+    }
+
+    const baseAuthor = {
+      did: sessionDid || null, // Use real session DID if available, otherwise null
+      handle: handle || 'test.user',
+      displayName: 'Test User',
+      avatar: null
+    }
+
+    switch (collectionType) {
+      case 'ai.syui.log':
+        return {
+          $type: collectionType,
+          url: url,
+          post: basePost,
+          text: 'テストコメントです。これはダミーデータです。',
+          type: 'comment',
+          author: baseAuthor,
+          createdAt: timestamp
+        }
+
+      case 'ai.syui.log.chat':
+        const isQuestion = Math.random() > 0.5
+        return {
+          $type: collectionType,
+          post: basePost,
+          text: isQuestion ? 'これはテスト用の質問です。' : 'これはテスト用のAI回答です。詳しく説明します。',
+          type: isQuestion ? 'question' : 'answer',
+          author: isQuestion ? baseAuthor : {
+            did: 'did:plc:ai-test',
+            handle: 'ai.syui.ai',
+            displayName: 'ai',
+            avatar: null
+          },
+          createdAt: timestamp
+        }
+
+      case 'ai.syui.log.chat.lang':
+        return {
+          $type: collectionType,
+          post: basePost,
+          text: 'This is a test translation. Hello, this is a dummy English translation of the Japanese post.',
+          type: 'en',
+          author: {
+            did: 'did:plc:ai-test',
+            handle: 'ai.syui.ai',
+            displayName: 'ai',
+            avatar: null
+          },
+          createdAt: timestamp
+        }
+
+      case 'ai.syui.log.chat.comment':
+        return {
+          $type: collectionType,
+          post: basePost,
+          text: 'これはAIによるテストコメントです。記事についての感想や補足情報を提供します。',
+          author: {
+            did: 'did:plc:ai-test',
+            handle: 'ai.syui.ai',
+            displayName: 'ai',
+            avatar: null
+          },
+          createdAt: timestamp
+        }
+
+      default:
+        return {}
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!accessJwt.trim() || !handle.trim()) {
+      setError('Access JWT and Handle are required')
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+    setSuccess(null)
+
+    try {
+      const recordData = generateDummyData(collection)
+      const rkey = `test-${Date.now()}`
+      
+      const record = {
+        repo: handle, // Use handle as is, without adding .bsky.social
+        collection: collection,
+        rkey: rkey,
+        record: recordData
+      }
+
+      setLastRecord(record)
+
+      // Direct API call with accessJwt
+      const response = await fetch(`https://${env.pds}/xrpc/com.atproto.repo.putRecord`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${accessJwt}`
+        },
+        body: JSON.stringify(record)
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(`API Error: ${response.status} - ${errorData.message || response.statusText}`)
+      }
+
+      const result = await response.json()
+      setSuccess(`Record created successfully! URI: ${result.uri}`)
+      
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!lastRecord || !accessJwt.trim()) {
+      setError('No record to delete or missing access JWT')
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const deleteData = {
+        repo: lastRecord.repo,
+        collection: lastRecord.collection,
+        rkey: lastRecord.rkey
+      }
+
+      const response = await fetch(`https://${env.pds}/xrpc/com.atproto.repo.deleteRecord`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${accessJwt}`
+        },
+        body: JSON.stringify(deleteData)
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(`Delete Error: ${response.status} - ${errorData.message || response.statusText}`)
+      }
+
+      setSuccess('Record deleted successfully!')
+      setLastRecord(null)
+      
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="test-ui">
+      <h2>🧪 Test UI</h2>
+      
+      {/* Tab Navigation */}
+      <div className="test-tabs">
+        <button 
+          onClick={() => setActiveTab('putRecord')}
+          className={`test-tab ${activeTab === 'putRecord' ? 'active' : ''}`}
+        >
+          Manual putRecord
+        </button>
+        <button 
+          onClick={() => setActiveTab('avatar')}
+          className={`test-tab ${activeTab === 'avatar' ? 'active' : ''}`}
+        >
+          Avatar System
+        </button>
+      </div>
+
+      {activeTab === 'putRecord' && (
+        <div className="test-content">
+          <p className="description">
+            OAuth不要のテスト用UI。accessJwtとhandleを直接入力して各collectionにダミーデータを投稿できます。
+          </p>
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="access-jwt">Access JWT:</label>
+          <textarea
+            id="access-jwt"
+            value={accessJwt}
+            onChange={(e) => setAccessJwt(e.target.value)}
+            placeholder="eyJ... (Access JWT token)"
+            rows={3}
+            required
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="handle">Handle:</label>
+          <input
+            id="handle"
+            type="text"
+            value={handle}
+            onChange={(e) => setHandle(e.target.value)}
+            placeholder="user.bsky.social"
+            required
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="session-did">Session DID (optional):</label>
+          <input
+            id="session-did"
+            type="text"
+            value={sessionDid}
+            onChange={(e) => setSessionDid(e.target.value)}
+            placeholder="did:plc:xxxxx (Leave empty to use test DID)"
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="collection">Collection:</label>
+          <select
+            id="collection"
+            value={collection}
+            onChange={(e) => setCollection(e.target.value)}
+            disabled={loading}
+          >
+            {collections.map(col => (
+              <option key={col} value={col}>{col}</option>
+            ))}
+          </select>
+        </div>
+
+        {error && (
+          <div className="error-message">
+            ❌ {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="success-message">
+            ✅ {success}
+          </div>
+        )}
+
+        <div className="form-actions">
+          <button 
+            type="submit" 
+            disabled={loading || !accessJwt.trim() || !handle.trim()}
+            className="submit-btn"
+          >
+            {loading ? '⏳ Creating...' : '📤 Create Record'}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setShowJson(!showJson)}
+            className="json-btn"
+            disabled={loading}
+          >
+            {showJson ? '🙈 Hide JSON' : '👁️ Show JSON'}
+          </button>
+
+          {lastRecord && (
+            <button
+              type="button"
+              onClick={handleDelete}
+              className="delete-btn"
+              disabled={loading}
+            >
+              {loading ? '⏳ Deleting...' : '🗑️ Delete Last Record'}
+            </button>
+          )}
+        </div>
+      </form>
+
+      {showJson && (
+        <div className="json-preview">
+          <h3>Generated JSON:</h3>
+          <pre>{JSON.stringify(generateDummyData(collection), null, 2)}</pre>
+        </div>
+      )}
+
+      {lastRecord && (
+        <div className="last-record">
+          <h3>Last Created Record:</h3>
+          <div className="record-info">
+            <p><strong>Collection:</strong> {lastRecord.collection}</p>
+            <p><strong>RKey:</strong> {lastRecord.rkey}</p>
+            <p><strong>Repo:</strong> {lastRecord.repo}</p>
+          </div>
+        </div>
+      )}
+        </div>
+      )}
+
+      {activeTab === 'avatar' && (
+        <div className="test-content">
+          <AvatarTestPanel />
+        </div>
+      )}
+
+      <style jsx>{`
+        .test-ui {
+          border: 3px solid #ff6b6b;
+          border-radius: 8px;
+          padding: 20px;
+          margin: 20px 0;
+          background: #fff5f5;
+        }
+        .test-tabs {
+          display: flex;
+          gap: 10px;
+          margin-bottom: 20px;
+          border-bottom: 2px solid #ddd;
+          padding-bottom: 10px;
+        }
+        .test-tab {
+          background: #f8f9fa;
+          border: 1px solid #ddd;
+          padding: 8px 16px;
+          border-radius: 4px 4px 0 0;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 600;
+          color: #666;
+          transition: all 0.2s;
+        }
+        .test-tab:hover {
+          background: #e9ecef;
+          color: #333;
+        }
+        .test-tab.active {
+          background: #ff6b6b;
+          color: white;
+          border-color: #ff6b6b;
+        }
+        .test-content {
+          margin-top: 20px;
+        }
+        .test-ui h2 {
+          color: #ff6b6b;
+          margin-top: 0;
+        }
+        .description {
+          color: #666;
+          font-style: italic;
+          margin-bottom: 20px;
+        }
+        .form-group {
+          margin-bottom: 15px;
+        }
+        .form-group label {
+          display: block;
+          margin-bottom: 5px;
+          font-weight: bold;
+          color: #333;
+        }
+        .form-group input,
+        .form-group textarea,
+        .form-group select {
+          width: 100%;
+          padding: 8px 12px;
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          font-size: 14px;
+          box-sizing: border-box;
+          font-family: monospace;
+        }
+        .form-group textarea {
+          resize: vertical;
+          min-height: 80px;
+        }
+        .form-group input:focus,
+        .form-group textarea:focus,
+        .form-group select:focus {
+          outline: none;
+          border-color: #ff6b6b;
+          box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.25);
+        }
+        .form-group input:disabled,
+        .form-group textarea:disabled,
+        .form-group select:disabled {
+          background: #f8f9fa;
+          cursor: not-allowed;
+        }
+        .error-message {
+          background: #f8d7da;
+          color: #721c24;
+          padding: 10px;
+          border-radius: 4px;
+          margin-bottom: 15px;
+          border: 1px solid #f5c6cb;
+        }
+        .success-message {
+          background: #d4edda;
+          color: #155724;
+          padding: 10px;
+          border-radius: 4px;
+          margin-bottom: 15px;
+          border: 1px solid #c3e6cb;
+        }
+        .form-actions {
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+          margin-top: 20px;
+        }
+        .submit-btn {
+          background: #ff6b6b;
+          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: #ff5252;
+        }
+        .submit-btn:disabled {
+          background: #6c757d;
+          cursor: not-allowed;
+        }
+        .json-btn {
+          background: #17a2b8;
+          color: white;
+          border: none;
+          padding: 10px 20px;
+          border-radius: 4px;
+          font-size: 16px;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        .json-btn:hover:not(:disabled) {
+          background: #138496;
+        }
+        .delete-btn {
+          background: #dc3545;
+          color: white;
+          border: none;
+          padding: 10px 20px;
+          border-radius: 4px;
+          font-size: 16px;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        .delete-btn:hover:not(:disabled) {
+          background: #c82333;
+        }
+        .json-preview {
+          margin-top: 20px;
+          padding: 15px;
+          background: #f8f9fa;
+          border: 1px solid #dee2e6;
+          border-radius: 4px;
+        }
+        .json-preview h3 {
+          margin-top: 0;
+          color: #495057;
+        }
+        .json-preview pre {
+          background: #e9ecef;
+          padding: 10px;
+          border-radius: 4px;
+          overflow-x: auto;
+          font-size: 12px;
+          margin: 0;
+        }
+        .last-record {
+          margin-top: 20px;
+          padding: 15px;
+          background: #e7f3ff;
+          border: 1px solid #b3d9ff;
+          border-radius: 4px;
+        }
+        .last-record h3 {
+          margin-top: 0;
+          color: #0066cc;
+        }
+        .record-info p {
+          margin: 5px 0;
+          font-family: monospace;
+          font-size: 14px;
+        }
+      `}</style>
+    </div>
+  )
+}

oauth/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/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/src/hooks/useAdminData.js

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react'
+import { atproto, collections } from '../api/atproto.js'
+import { getApiConfig } from '../utils/pds.js'
+import { env } from '../config/env.js'
+import { getErrorMessage } from '../utils/errorHandler.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) {
+      // Silently fail - no error logging or retry attempts
+      setError('silent_failure')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return {
+    adminData,
+    langRecords,
+    commentRecords,
+    loading,
+    error,
+    refresh: loadAdminData
+  }
+}

oauth/src/hooks/useAskAI.js

@@ -0,0 +1,230 @@
+import { useState } from 'react'
+import { atproto, collections } from '../api/atproto.js'
+import { env } from '../config/env.js'
+import { logger } from '../utils/logger.js'
+import { getErrorMessage, logError } from '../utils/errorHandler.js'
+import { AIProviderFactory } from '../services/aiProvider.js'
+
+export function useAskAI(adminData, userProfile, agent) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [chatHistory, setChatHistory] = useState([])
+  
+  // AIプロバイダーを環境変数から作成
+  const aiProvider = AIProviderFactory.createFromEnv()
+
+  const askQuestion = async (question) => {
+    if (!question.trim()) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      logger.log('Sending question to AI provider:', question)
+
+      // AIプロバイダーに質問を送信
+      const aiResponse = await aiProvider.ask(question, {
+        userProfile: userProfile
+      })
+      
+      logger.log('Received AI response:', aiResponse)
+
+      // AI回答をチャット履歴に追加
+      const chatEntry = {
+        id: `chat-${Date.now()}`,
+        question: question.trim(),
+        answer: aiResponse.answer || 'エラーが発生しました',
+        timestamp: new Date().toISOString(),
+        user: userProfile ? {
+          did: userProfile.did,
+          handle: userProfile.handle,
+          displayName: userProfile.displayName,
+          avatar: userProfile.avatar
+        } : null
+      }
+
+      setChatHistory(prev => [...prev, chatEntry])
+
+      // atprotoにレコードを保存
+      await saveChatRecord(chatEntry, aiResponse)
+
+      // Dispatch event for blog communication
+      window.dispatchEvent(new CustomEvent('aiResponseReceived', {
+        detail: {
+          question: chatEntry.question,
+          answer: chatEntry.answer,
+          timestamp: chatEntry.timestamp,
+          aiProfile: adminData?.profile ? {
+            did: adminData.did,
+            handle: adminData.profile.handle,
+            displayName: adminData.profile.displayName,
+            avatar: adminData.profile.avatar
+          } : null
+        }
+      }))
+
+      return aiResponse
+
+    } catch (err) {
+      logError(err, 'useAskAI.askQuestion')
+      
+      let errorMessage = 'AI応答の生成に失敗しました'
+      if (err.message.includes('Request timeout')) {
+        errorMessage = 'AI応答がタイムアウトしました'
+      } else if (err.message.includes('API error')) {
+        errorMessage = `API エラー: ${err.message}`
+      } else if (err.message.includes('Failed to fetch')) {
+        errorMessage = 'AI サーバーに接続できませんでした'
+      }
+      
+      setError(errorMessage)
+      throw err
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const saveChatRecord = async (chatEntry, aiResponse) => {
+    if (!agent || !adminData?.did) {
+      logger.warn('Cannot save chat record: missing agent or admin data')
+      return
+    }
+
+    try {
+      const currentUrl = window.location.href
+      const timestamp = chatEntry.timestamp
+      const baseRkey = `${new Date(timestamp).toISOString().replace(/[:.]/g, '-').slice(0, -5)}Z`
+
+      // Post metadata (共通)
+      const postMetadata = {
+        url: currentUrl,
+        date: timestamp,
+        slug: new URL(currentUrl).pathname.split('/').pop()?.replace(/\.html$/, '') || '',
+        tags: [],
+        title: document.title || 'AI Chat',
+        language: 'ja'
+      }
+
+      // Question record (ユーザーの質問)
+      const questionRecord = {
+        repo: adminData.did,
+        collection: `${env.collection}.chat`,
+        rkey: baseRkey,
+        record: {
+          $type: `${env.collection}.chat`,
+          post: postMetadata,
+          text: chatEntry.question,
+          type: 'question',
+          author: chatEntry.user ? {
+            did: chatEntry.user.did,
+            handle: chatEntry.user.handle,
+            displayName: chatEntry.user.displayName,
+            avatar: chatEntry.user.avatar
+          } : {
+            did: 'unknown',
+            handle: 'user',
+            displayName: 'User',
+            avatar: null
+          },
+          createdAt: timestamp
+        }
+      }
+
+      // Answer record (AIの回答)
+      const answerRecord = {
+        repo: adminData.did,
+        collection: `${env.collection}.chat`,
+        rkey: `${baseRkey}-answer`,
+        record: {
+          $type: `${env.collection}.chat`,
+          post: postMetadata,
+          text: chatEntry.answer,
+          type: 'answer',
+          author: {
+            did: adminData.did,
+            handle: adminData.profile?.handle || 'ai',
+            displayName: adminData.profile?.displayName || 'ai',
+            avatar: adminData.profile?.avatar || null
+          },
+          createdAt: timestamp
+        }
+      }
+
+      logger.log('Saving question record to atproto:', questionRecord)
+      await atproto.putRecord(null, questionRecord, agent)
+
+      logger.log('Saving answer record to atproto:', answerRecord)
+      await atproto.putRecord(null, answerRecord, agent)
+
+      // キャッシュを無効化
+      collections.invalidateCache(env.collection)
+
+      logger.log('Chat records saved successfully')
+
+    } catch (err) {
+      logError(err, 'useAskAI.saveChatRecord')
+      // 保存エラーは致命的ではないので、UIエラーにはしない
+    }
+  }
+
+  const clearChatHistory = () => {
+    setChatHistory([])
+    setError(null)
+  }
+
+  const loadChatHistory = async () => {
+    if (!adminData?.did) return
+
+    try {
+      const records = await collections.getChat(
+        adminData.apiConfig.pds,
+        adminData.did,
+        env.collection
+      )
+
+      // Group records by timestamp and create Q&A pairs
+      const recordGroups = {}
+      
+      records.forEach(record => {
+        const timestamp = record.value.createdAt
+        const baseKey = timestamp.replace('-answer', '')
+        
+        if (!recordGroups[baseKey]) {
+          recordGroups[baseKey] = {}
+        }
+        
+        if (record.value.type === 'question') {
+          recordGroups[baseKey].question = record.value.text
+          recordGroups[baseKey].user = record.value.author
+          recordGroups[baseKey].timestamp = timestamp
+          recordGroups[baseKey].id = record.uri
+        } else if (record.value.type === 'answer') {
+          recordGroups[baseKey].answer = record.value.text
+          recordGroups[baseKey].timestamp = timestamp
+        }
+      })
+
+      // Convert to history format, only include complete Q&A pairs
+      const history = Object.values(recordGroups)
+        .filter(group => group.question && group.answer)
+        .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
+        .slice(-10) // 最新10件のみ
+
+      setChatHistory(history)
+      logger.log('Chat history loaded:', history.length, 'entries')
+
+    } catch (err) {
+      logError(err, 'useAskAI.loadChatHistory')
+      // 履歴読み込みエラーは致命的ではない
+    }
+  }
+
+  return {
+    askQuestion,
+    loading,
+    error,
+    chatHistory,
+    clearChatHistory,
+    loadChatHistory
+  }
+}