add github

.claude/settings.local.json

@@ -34,7 +34,10 @@
       "Bash(./run.zsh:*)",
       "Bash(npm run dev:*)",
       "Bash(./target/release/ailog:*)",
-      "Bash(rg:*)"
+      "Bash(rg:*)",
+      "Bash(../target/release/ailog build)",
+      "Bash(zsh run.zsh:*)",
+      "Bash(hugo:*)"
     ],
     "deny": []
   }

.github/workflows/cloudflare-pages.yml

@@ -0,0 +1,66 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21'
+
+      - name: Install dependencies
+        run: |
+          cd oauth
+          npm install
+
+      - name: Build OAuth app
+        run: |
+          cd oauth
+          npm run build
+          
+      - name: Copy OAuth build to static
+        run: |
+          mkdir -p my-blog/static/assets
+          cp -r oauth/dist/assets/* my-blog/static/assets/
+          cp oauth/dist/index.html my-blog/static/oauth/index.html || true
+          
+      - 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'

.github/workflows/deploy.yml

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

.gitignore

@@ -5,8 +5,8 @@
 *.swo
 *~
 .DS_Store
-cloudflare*
-my-blog
+cloudflare-config.yml
+my-blog/public/
 dist
-package-lock.json
 node_modules
+package-lock.json 

DEPLOYMENT.md

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

OAUTH_INTEGRATION_CHANGES.md

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

README.md

@@ -4,54 +4,62 @@ AI-powered static blog generator with ATProto integration, part of the ai.ai eco
 
 ## 🚀 Quick Start
 
-### Basic Blog Setup
+### Development Setup
 
 ```bash
-# 1. Initialize a new blog
-ailog init my-blog
+# 1. Clone and setup
+git clone https://git.syui.ai/ai/log
+cd log
 
-# 2. Configure your blog (edit my-blog/config.toml)
-[site]
-title = "My Blog"
-description = "A blog powered by ailog"
-base_url = "https://yourdomain.com"
-language = "ja"
+# 2. Start development services
+./run.zsh serve    # Blog development server
+./run.zsh c        # Cloudflare tunnel (log.syui.ai)
+./run.zsh o        # OAuth web server  
+./run.zsh co       # Comment system monitor
 
-[build]
-highlight_code = true
-minify = false
-
-[ai]
-enabled = false
-auto_translate = false
-comment_moderation = false
-
-# 3. Build your blog
-ailog build
-
-# 4. Serve locally
-ailog serve
+# 3. Start Ollama (for Ask AI)
+brew install ollama
+ollama pull gemma2:2b
+OLLAMA_ORIGINS="https://log.syui.ai" ollama serve
 ```
 
-### ATProto Comment System
+### Production Deployment
 
 ```bash
-# 1. Add OAuth configuration to my-blog/config.toml
-[oauth]
-json = "client-metadata.json"
-redirect = "oauth/callback"
-admin = "your-did-here"
-collection_comment = "ai.syui.log"
-collection_user = "ai.syui.log.user"
+# 1. Build static site
+hugo
 
-# 2. Build OAuth app
-ailog oauth build my-blog
+# 2. Deploy to GitHub Pages
+git add .
+git commit -m "Update blog"
+git push origin main
 
-# 3. Authenticate with ATProto
-ailog auth init
+# 3. Automatic deployment via GitHub Actions
+# Site available at: https://yourusername.github.io/repo-name
+```
 
-# 4. Start stream monitoring
-ailog stream start my-blog
+### ATProto Integration
+
+```bash
+# 1. OAuth Client Setup (oauth/client-metadata.json)
+{
+  "client_id": "https://log.syui.ai/client-metadata.json",
+  "client_name": "ai.log Blog System",
+  "redirect_uris": ["https://log.syui.ai/oauth/callback"],
+  "scope": "atproto",
+  "grant_types": ["authorization_code", "refresh_token"],
+  "response_types": ["code"],
+  "application_type": "web",
+  "dpop_bound_access_tokens": true
+}
+
+# 2. Comment System Configuration
+# Collection: ai.syui.log (comments)
+# User Management: ai.syui.log.user (registered users)
+
+# 3. Services
+./run.zsh o     # OAuth authentication server
+./run.zsh co    # ATProto Jetstream comment monitor
 ```
 
 ### Development with run.zsh
@@ -124,11 +132,30 @@ ai.logは、[Anthropic Docs](https://docs.anthropic.com/)にインスパイア
 - **自動TOC**: 右サイドバーに目次を自動生成
 - **レスポンシブ**: モバイル・デスクトップ対応
 
-### 🤖 AI統合機能
-- **Ask AI**: ローカルLLM(Ollama)による質問応答
-- **自動翻訳**: 日本語↔英語の自動生成
-- **AI記事強化**: コンテンツの自動改善
-- **AIコメント**: 記事への一言コメント生成
+### 🤖 Ask AI機能 ✅
+- **ローカルAI**: Ollama(gemma2:2b)による質問応答
+- **認証必須**: ATProto OAuth認証でアクセス制御
+- **トップページ限定**: ブログコンテンツに特化した回答
+- **CORS解決済み**: OLLAMA_ORIGINS設定でクロスオリジン問題解消
+- **プロフィール連携**: AIアバターとしてATProtoプロフィール画像表示
+- **レスポンス最適化**: 80文字制限+高いtemperatureで多様な回答
+- **ローディング表示**: Font Awesomeアイコンによる一行ローディング
+
+### 🔧 Ask AI設定方法
+```bash
+# 1. Ollama設定
+brew install ollama
+ollama pull gemma2:2b
+
+# 2. CORS設定で起動
+OLLAMA_ORIGINS="https://log.syui.ai" ollama serve
+
+# 3. AI DID設定 (my-blog/templates/base.html)
+const aiConfig = {
+    systemPrompt: 'You are a helpful AI assistant.',
+    aiDid: 'did:plc:your-ai-bot-did'
+};
+```
 
 ### 🌐 分散SNS連携
 - **atproto OAuth**: Blueskyアカウントでログイン
@@ -341,6 +368,10 @@ Generate comprehensive documentation and translate content:
 - **💬 ATProto comment system with Jetstream monitoring**
 - **🔄 Real-time comment collection and user management**
 - **🔐 OAuth 2.1 integration with Cloudflare tunnel**
+- **🤖 Ask AI feature with Ollama integration**
+- **⚡ CORS resolution via OLLAMA_ORIGINS**
+- **🔒 Authentication-gated AI chat**
+- **📱 Top-page-only AI access pattern**
 - Test blog with sample content and styling
 
 ### 🚧 In Progress

cloudflared-config.yml

@@ -0,0 +1,18 @@
+tunnel: ec5a422d-7678-4e73-bf38-6105ffd4766a
+credentials-file: /Users/syui/.cloudflared/ec5a422d-7678-4e73-bf38-6105ffd4766a.json
+
+ingress:
+  - hostname: log.syui.ai
+    service: http://localhost:4173
+    originRequest:
+      noHappyEyeballs: true
+ 
+  - hostname: ollama.syui.ai
+    service: http://localhost:11434
+    originRequest:
+      noHappyEyeballs: true
+      httpHostHeader: "localhost:11434"
+      # Cloudflare Accessを無効化する場合は以下をコメントアウト
+      # accessPolicy: bypass
+      
+  - service: http_status:404

my-blog/config.toml

@@ -0,0 +1,29 @@
+[site]
+title = "syui.ai"
+description = "a blog powered by ailog"
+base_url = "https://syui.ai"
+language = "ja"
+author = "syui"
+
+[build]
+highlight_code = true
+minify = false
+
+[ai]
+enabled = true
+auto_translate = false
+comment_moderation = false
+ask_ai = true
+provider = "ollama"
+model = "gemma3:2b"
+host = "https://ollama.syui.ai"
+system_prompt = "you are a helpful ai assistant trained on this blog's content. you can answer questions about the articles, provide insights, and help users understand the topics discussed."
+ai_did = "did:plc:4hqjfn7m6n5hno3doamuhgef"
+
+[oauth]
+json = "client-metadata.json"
+redirect = "oauth/callback"
+admin = "did:plc:uqzpqmrjnptsxezjx4xuh2mn"
+collection_comment = "ai.syui.log"
+collection_user = "ai.syui.log.user"
+collection_chat = "ai.syui.log.chat"

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

@@ -0,0 +1,137 @@
+---
+title: "静的サイトジェネレータを作った"
+slug: "ailog-system-introduction"
+date: "2025-06-12"
+tags: ["blog", "rust", "mcp", "atp"]
+language: ["ja", "en"]
+---
+
+rustで静的サイトジェネレータを作ることにしました。[ailog](https://git.syui.ai/ai/log)といいます。`hugo`からの移行になります。
+
+ブログを書く環境もこれから変わってくると思っていて、例えば、`docs`, `readme`, `blog`などはAIが生成、または支援することになるだろうと予測しています。langの自動生成もAIが担当することになるでしょう。
+
+これは、音声に限らず、プログラミング言語から、osなど、様々なtranslateがAIの自動生成になるかもしれません。
+
+`ailog`は、最初にatproto-comment-system(oauth)とask-AIという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 server 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
+```
+
+## 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
+# 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
+```
+
+### 解説
+
+簡単に説明すると、`./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
+```
+
+以下の2つのcollection recordを生成します。ユーザーには`ai.syui.log`が生成され、ここにコメントが記録されます。それを取得して表示しています。`ai.syui.log.user`は管理者である`VITE_ADMIN_DID`用です。
+
+```sh
+VITE_COLLECTION_COMMENT=ai.syui.log
+VITE_COLLECTION_USER=ai.syui.log.user
+```
+
+```sh
+$ 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と組み合わせです。
+

my-blog/content/posts/welcome.md

@@ -0,0 +1,34 @@
+---
+title: "Welcome to ailog"
+slug: welcome-to-ailog
+date: 2025-01-06
+tags: ["welcome", "ailog"]
+language: en
+---
+
+# Welcome to ailog
+
+This is your first post powered by **ailog** - a static blog generator with AI features.
+
+## Features
+
+- Fast static site generation
+- Markdown support with frontmatter
+- AI-powered features (coming soon)
+- atproto integration for comments
+
+## Getting Started
+
+Create new posts with:
+
+```bash
+ailog new "My New Post"
+```
+
+Build your blog with:
+
+```bash
+ailog build
+```
+
+Happy blogging!

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,30 @@
+/*
+  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/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+/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,11 @@
+# AI機能をai.gpt MCP serverにリダイレクト
+/api/ask https://ai-gpt-mcp.syui.ai/ask 200
+
+# Ollama API proxy (Cloudflare Workers)
+/api/ollama-proxy https://ollama-proxy.YOUR-SUBDOMAIN.workers.dev/:splat 200
+
+# 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://log.syui.ai/client-metadata.json",
+  "client_name": "ai.card",
+  "client_uri": "https://log.syui.ai",
+  "logo_uri": "https://log.syui.ai/favicon.ico",
+  "tos_uri": "https://log.syui.ai/terms",
+  "policy_uri": "https://log.syui.ai/privacy",
+  "redirect_uris": [
+    "https://log.syui.ai/oauth/callback",
+    "https://log.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/index.html

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

my-blog/templates/base.html

@@ -0,0 +1,360 @@
+<!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>
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    {% include "oauth-assets.html" %}
+    {% 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="header-actions">
+                    <!-- Ask AI button on all pages -->
+                    <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
+                        <span class="ai-icon">🤖</span>
+                        Ask AI
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Ask AI panel on all pages -->
+        <div class="ask-ai-panel" id="askAiPanel" style="display: none;">
+            <div class="ask-ai-content">
+                <!-- Authentication check -->
+                <div id="authCheck" class="auth-check">
+                    <p>🔒 Please login with ATProto to use Ask AI feature</p>
+                </div>
+                
+                <!-- Chat form (hidden until authenticated) -->
+                <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>
+                
+                <!-- Chat history -->
+                <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">
+        <p>&copy; {{ config.author }}</p>
+    </footer>
+
+    <script>
+        function toggleAskAI() {
+            const panel = document.getElementById('askAiPanel');
+            const isVisible = panel.style.display !== 'none';
+            panel.style.display = isVisible ? 'none' : 'block';
+            
+            if (!isVisible) {
+                checkAuthenticationStatus();
+            }
+        }
+
+        function checkAuthenticationStatus() {
+            const userSections = document.querySelectorAll('.user-section');
+            const isAuthenticated = userSections.length > 0;
+            
+            if (isAuthenticated) {
+                // User is authenticated - show Ask AI UI
+                document.getElementById('authCheck').style.display = 'none';
+                document.getElementById('chatForm').style.display = 'block';
+                document.getElementById('chatHistory').style.display = 'block';
+                
+                // Show initial greeting if chat history is empty
+                const chatHistory = document.getElementById('chatHistory');
+                if (chatHistory.children.length === 0) {
+                    showInitialGreeting();
+                }
+                
+                // Focus after a small delay to ensure element is visible
+                setTimeout(() => {
+                    document.getElementById('aiQuestion').focus();
+                }, 50);
+            } else {
+                // User is not authenticated - show login message only
+                document.getElementById('authCheck').style.display = 'block';
+                document.getElementById('chatForm').style.display = 'none';
+                document.getElementById('chatHistory').style.display = 'none';
+            }
+        }
+
+        let isAIChatReady = false;
+        let aiProfileData = null;
+        
+        // Listen for AI ready signal
+        window.addEventListener('aiChatReady', function() {
+            isAIChatReady = true;
+            console.log('AI Chat is ready');
+        });
+        
+        
+        // Listen for AI profile updates from OAuth app
+        window.addEventListener('aiProfileLoaded', function(event) {
+            aiProfileData = event.detail;
+            console.log('AI profile loaded:', aiProfileData);
+            updateAskAIButton();
+        });
+        
+        function updateAskAIButton() {
+            const button = document.getElementById('askAiButton');
+            const iconSpan = button.querySelector('.ai-icon');
+            
+            if (aiProfileData && aiProfileData.avatar) {
+                iconSpan.innerHTML = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName || 'AI'}" class="ai-avatar-small">`;
+            }
+            
+            if (aiProfileData && aiProfileData.displayName) {
+                button.childNodes[2].textContent = `Ask ${aiProfileData.displayName}`;
+            }
+        }
+        
+        function showInitialGreeting() {
+            const chatHistory = document.getElementById('chatHistory');
+            const greetingDiv = document.createElement('div');
+            greetingDiv.className = 'chat-message ai-message comment-style initial-greeting';
+            
+            if (!aiProfileData) {
+                return; // Don't show greeting if no AI profile data
+            }
+            
+            let avatarElement = '🤖';
+            if (aiProfileData.avatar) {
+                avatarElement = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName}" class="profile-avatar">`;
+            }
+            
+            const displayName = aiProfileData.displayName;
+            const handle = aiProfileData.handle;
+            
+            greetingDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${avatarElement}</div>
+                    <div class="user-info">
+                        <div class="display-name">${displayName}</div>
+                        <div class="handle">@${handle}</div>
+                        <div class="timestamp">${new Date().toLocaleString()}</div>
+                    </div>
+                </div>
+                <div class="message-content">
+                    Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
+                </div>
+            `;
+            chatHistory.appendChild(greetingDiv);
+        }
+        
+        async function askQuestion() {
+            const question = document.getElementById('aiQuestion').value;
+            const chatHistory = document.getElementById('chatHistory');
+            const askButton = document.getElementById('askButton');
+            
+            if (!question.trim()) return;
+            
+            // Wait for AI to be ready
+            if (!isAIChatReady) {
+                console.log('Waiting for AI Chat to be ready...');
+                await new Promise(resolve => {
+                    const checkReady = setInterval(() => {
+                        if (isAIChatReady) {
+                            clearInterval(checkReady);
+                            resolve();
+                        }
+                    }, 100);
+                });
+            }
+            
+            // Disable button and show loading
+            askButton.disabled = true;
+            askButton.textContent = 'Posting...';
+            
+            // Get user info from OAuth component
+            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('@', '');
+                }
+            }
+            
+            // Add question to chat history in comment style
+            const questionDiv = document.createElement('div');
+            questionDiv.className = 'chat-message user-message comment-style';
+            questionDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${userAvatar}</div>
+                    <div class="user-info">
+                        <div class="display-name">${userDisplay}</div>
+                        <div class="handle">@${userHandle}</div>
+                        <div class="timestamp">${new Date().toLocaleString()}</div>
+                    </div>
+                </div>
+                <div class="message-content">${question}</div>
+            `;
+            chatHistory.appendChild(questionDiv);
+            
+            // Clear input
+            document.getElementById('aiQuestion').value = '';
+            
+            try {
+                // Show loading immediately
+                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);
+                
+                // Post question to ATProto via OAuth app
+                const event = new CustomEvent('postAIQuestion', {
+                    detail: { question: question }
+                });
+                window.dispatchEvent(event);
+                
+            } catch (error) {
+                // Remove loading indicator and show error
+                const loadingMsg = chatHistory.querySelector('.ai-loading-simple');
+                if (loadingMsg) {
+                    loadingMsg.remove();
+                }
+                
+                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">Sorry, I encountered an error. Please try again.</div>
+                `;
+                chatHistory.appendChild(errorDiv);
+            } finally {
+                askButton.disabled = false;
+                askButton.textContent = 'Ask';
+            }
+        }
+
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                document.getElementById('askAiPanel').style.display = 'none';
+            }
+            
+            // Enter key to send message
+            if (e.key === 'Enter' && e.target.id === 'aiQuestion' && !e.shiftKey) {
+                e.preventDefault();
+                askQuestion();
+            }
+        });
+        
+        // Monitor authentication state changes
+        const authObserver = new MutationObserver(function(mutations) {
+            const userSections = document.querySelectorAll('.user-section');
+            if (userSections.length > 0) {
+                checkAuthenticationStatus();
+                // Stop observing once authenticated
+                authObserver.disconnect();
+            }
+        });
+        
+        // Start observing for authentication changes
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initial authentication check with slight delay for OAuth component
+            setTimeout(() => {
+                checkAuthenticationStatus();
+            }, 500);
+            
+            authObserver.observe(document.body, { 
+                childList: true, 
+                subtree: true 
+            });
+        });
+        
+        // Listen for AI responses from OAuth app
+        window.addEventListener('aiResponseReceived', function(event) {
+            const chatHistory = document.getElementById('chatHistory');
+            const loadingMsg = chatHistory.querySelector('.ai-loading-simple');
+            
+            if (loadingMsg) {
+                loadingMsg.remove();
+            }
+            
+            const aiProfile = event.detail.aiProfile;
+            if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
+                console.error('AI profile data is missing, cannot display response');
+                return;
+            }
+            
+            const timestamp = new Date(event.detail.timestamp || Date.now());
+            
+            // Create comment-style AI response
+            const answerDiv = document.createElement('div');
+            answerDiv.className = 'chat-message ai-message comment-style';
+            
+            // Prepare avatar
+            let avatarElement = '🤖';
+            if (aiProfile.avatar) {
+                avatarElement = `<img src="${aiProfile.avatar}" alt="${aiProfile.displayName}" class="profile-avatar">`;
+            }
+            
+            answerDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${avatarElement}</div>
+                    <div class="user-info">
+                        <div class="display-name">${aiProfile.displayName}</div>
+                        <div class="handle">@${aiProfile.handle}</div>
+                        <div class="timestamp">${timestamp.toLocaleString()}</div>
+                    </div>
+                </div>
+                <div class="message-content">${event.detail.answer}</div>
+            `;
+            chatHistory.appendChild(answerDiv);
+            
+            // Auto-expand content instead of scrolling
+            if (chatHistory.children.length > 5) {
+                const oldestMessage = chatHistory.children[0];
+                if (oldestMessage && oldestMessage.classList.contains('user-message')) {
+                    // Keep the latest 5 exchanges (10 messages)
+                    if (chatHistory.children.length > 10) {
+                        chatHistory.removeChild(oldestMessage);
+                        if (chatHistory.children.length > 0) {
+                            chatHistory.removeChild(chatHistory.children[0]);
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>

my-blog/templates/index.html

@@ -0,0 +1,52 @@
+{% 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>
+                
+                {% if post.excerpt %}
+                <p class="post-excerpt">{{ post.excerpt }}</p>
+                {% endif %}
+                
+                <div class="post-actions">
+                    <a href="{{ post.url }}" class="read-more">Read more</a>
+                    {% if post.markdown_url %}
+                    <a href="{{ post.markdown_url }}" class="view-markdown" title="View Markdown">Markdown</a>
+                    {% endif %}
+                    {% if post.translation_url %}
+                    <a href="{{ post.translation_url }}" class="view-translation" title="View Translation">🌐</a>
+                    {% endif %}
+                </div>
+            </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/oauth-assets.html

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

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

my-blog/templates/post.html

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

oauth/.env.production

@@ -7,7 +7,22 @@ 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
+AILOG_COLLECTION_CHAT=ai.syui.log.chat
+
+# 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="あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
+VITE_AI_DID=did:plc:4hqjfn7m6n5hno3doamuhgef
+
+# API Configuration
+VITE_BSKY_PUBLIC_API=https://public.api.bsky.app
+

oauth/src/App.css

@@ -1,7 +1,16 @@
+/* Theme Colors */
+:root {
+  --theme-color: #FF4500;
+  --white: #fff;
+  --light-gray: #aaa;
+  --dark-gray: #666;
+  --background: #fff;
+}
+
 .app {
   min-height: 100vh;
-  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
-  color: #333333;
+  background: linear-gradient(180deg, #f8f9fa 0%, var(--background) 100%);
+  color: var(--dark-gray);
 }
 
 .app-header {
@@ -41,15 +50,15 @@
 }
 
 .nav-button.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: 1px solid #667eea;
-  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
+  background: var(--theme-color);
+  color: var(--white);
+  border: 1px solid var(--theme-color);
+  box-shadow: 0 4px 16px rgba(255, 69, 0, 0.4);
 }
 
 .nav-button.active:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+  box-shadow: 0 6px 20px rgba(255, 69, 0, 0.5);
 }
 
 .app-header h1 {
@@ -99,9 +108,9 @@
 }
 
 .login-button {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: 1px solid #667eea;
+  background: var(--theme-color);
+  color: var(--white);
+  border: 1px solid var(--theme-color);
 }
 
 .backup-button {
@@ -124,7 +133,7 @@
 
 .login-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .backup-button:hover {
@@ -268,8 +277,8 @@
 }
 
 .atproto-button {
-  background: #1185fe;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 12px 24px;
   border-radius: 6px;
@@ -281,9 +290,9 @@
 }
 
 .atproto-button:hover {
-  background: #0d6efd;
+  filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(17, 133, 254, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .username-input-section {
@@ -407,8 +416,8 @@
 }
 
 .post-button {
-  background: #28a745;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 10px 20px;
   border-radius: 6px;
@@ -419,9 +428,9 @@
 }
 
 .post-button:hover:not(:disabled) {
-  background: #218838;
+  filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .post-button:disabled {
@@ -455,8 +464,8 @@
 }
 
 .comments-toggle-button {
-  background: #1185fe;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
@@ -467,9 +476,9 @@
 }
 
 .comments-toggle-button:hover {
-  background: #0d6efd;
+  filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(17, 133, 254, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
 }
 
 .comment-item {
@@ -714,8 +723,8 @@
 
 /* JSON Display Styles */
 .json-button {
-  background: #4caf50;
-  color: white;
+  background: var(--theme-color);
+  color: var(--white);
   border: none;
   padding: 4px 8px;
   border-radius: 4px;
@@ -726,7 +735,7 @@
 }
 
 .json-button:hover {
-  background: #45a049;
+  filter: brightness(1.1);
   transform: scale(1.05);
 }
 
@@ -760,3 +769,107 @@
   max-height: 400px;
   overflow-y: auto;
 }
+
+/* Tab Navigation */
+.tab-navigation {
+  display: flex;
+  border-bottom: 2px solid #e1e5e9;
+  margin-bottom: 20px;
+}
+
+.tab-button {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #656d76;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.tab-button:hover {
+  color: var(--theme-color);
+  background: #f6f8fa;
+}
+
+.tab-button.active {
+  color: var(--theme-color);
+  border-bottom-color: var(--theme-color);
+  background: #f6f8fa;
+}
+
+/* AI Chat History */
+.ai-chat-list {
+  max-width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.chat-item {
+  border: 1px solid #d1d9e0;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  background: #ffffff;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.chat-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chat-type-button {
+  background: var(--theme-color);
+  color: var(--white);
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: default;
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 4px;
+}
+
+.chat-type-text {
+  font-size: 16px;
+  margin-left: 4px;
+}
+
+
+.chat-date {
+  color: #656d76;
+  font-size: 12px;
+}
+
+.chat-content {
+  background: #f6f8fa;
+  padding: 12px;
+  border-radius: 6px;
+  border-left: 4px solid #d1d9e0;
+  margin-bottom: 8px;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.chat-meta {
+  font-size: 11px;
+  color: #656d76;
+}
+
+.no-chat {
+  text-align: center;
+  padding: 40px 20px;
+  color: #656d76;
+  font-style: italic;
+}

oauth/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { OAuthCallback } from './components/OAuthCallback';
+import { AIChat } from './components/AIChat';
 import { authService, User } from './services/auth';
 import { atprotoOAuthService } from './services/atproto-oauth';
 import { appConfig } from './config/app';
@@ -45,6 +46,8 @@ function App() {
   const [isPostingUserList, setIsPostingUserList] = useState(false);
   const [userListRecords, setUserListRecords] = useState<any[]>([]);
   const [showJsonFor, setShowJsonFor] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'comments' | 'ai-chat'>('comments');
+  const [aiChatHistory, setAiChatHistory] = useState<any[]>([]);
 
   useEffect(() => {
     // Setup Jetstream WebSocket for real-time comments (optional)
@@ -83,8 +86,8 @@ function App() {
       }
     };
     
-    // Jetstream + Cache example
-    const jetstream = setupJetstream();
+    // Jetstream + Cache example (disabled for now)
+    // const jetstream = setupJetstream();
     
     // キャッシュからコメント読み込み
     const loadCachedComments = () => {
@@ -102,7 +105,10 @@ function App() {
     
     // キャッシュがなければ、ATProtoから取得（認証状態に関係なく）
     if (!loadCachedComments()) {
+      console.log('No cached comments found, loading from ATProto...');
       loadAllComments(); // URLフィルタリングを無効にして全コメント表示
+    } else {
+      console.log('Cached comments loaded successfully');
     }
 
     // Handle popstate events for mock OAuth flow
@@ -144,8 +150,12 @@ function App() {
         
         // Load all comments for display (this will be the default view)
         // Temporarily disable URL filtering to see all comments
+        console.log('OAuth session found, loading all comments...');
         loadAllComments();
         
+        // Load AI chat history
+        loadAiChatHistory(userProfile.did);
+        
         // Load user list records if admin
         if (userProfile.did === appConfig.adminDid) {
           loadUserListRecords();
@@ -164,6 +174,7 @@ function App() {
         
         // Load all comments for display (this will be the default view)
         // Temporarily disable URL filtering to see all comments
+        console.log('Legacy auth session found, loading all comments...');
         loadAllComments();
         
         // Load user list records if admin
@@ -174,6 +185,7 @@ function App() {
       setIsLoading(false);
       
       // 認証状態に関係なく、コメントを読み込む
+      console.log('No auth session found, loading all comments anyway...');
       loadAllComments();
     };
 
@@ -214,6 +226,50 @@ function App() {
     return `https://via.placeholder.com/48x48/1185fe/ffffff?text=${initial}`;
   };
 
+  const loadAiChatHistory = async (did: string) => {
+    try {
+      console.log('Loading AI chat history for DID:', did);
+      const agent = atprotoOAuthService.getAgent();
+      if (!agent) {
+        console.log('No agent available');
+        return;
+      }
+
+      // Get AI chat records from current user
+      const response = await agent.api.com.atproto.repo.listRecords({
+        repo: did,
+        collection: appConfig.collections.chat,
+        limit: 100,
+      });
+
+      console.log('AI chat history loaded:', response.data);
+      const chatRecords = response.data.records || [];
+      
+      // Filter out old records with invalid AI profile data (temporary fix for migration)
+      const validRecords = chatRecords.filter(record => {
+        if (record.value.answer) {
+          // This is an AI answer - check if it has valid AI profile
+          return record.value.author?.handle && 
+                 record.value.author?.handle !== 'ai-assistant' &&
+                 record.value.author?.displayName !== 'AI Assistant';
+        }
+        return true; // Keep all questions
+      });
+      
+      console.log(`Filtered ${chatRecords.length} records to ${validRecords.length} valid records`);
+      
+      // Sort by creation time and group question-answer pairs
+      const sortedRecords = validRecords.sort((a, b) => 
+        new Date(a.value.createdAt).getTime() - new Date(b.value.createdAt).getTime()
+      );
+      
+      setAiChatHistory(sortedRecords);
+    } catch (err) {
+      console.error('Failed to load AI chat history:', err);
+      setAiChatHistory([]);
+    }
+  };
+
   const loadUserComments = async (did: string) => {
     try {
       console.log('Loading comments for DID:', did);
@@ -298,7 +354,7 @@ function App() {
               if (user.did && user.did.includes('-placeholder')) {
                 console.log(`Resolving placeholder DID for ${user.handle}`);
                 try {
-                  const profileResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.handle)}`);
+                  const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.handle)}`);
                   if (profileResponse.ok) {
                     const profileData = await profileResponse.json();
                     if (profileData.did) {
@@ -449,7 +505,7 @@ function App() {
           if (!record.value.author?.avatar && record.value.author?.handle) {
             try {
               // Public API でプロフィール取得
-              const profileResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.handle)}`);
+              const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.handle)}`);
               
               if (profileResponse.ok) {
                 const profileData = await profileResponse.json();
@@ -480,6 +536,7 @@ function App() {
       console.log('Known users used:', knownUsers);
       
       setComments(enhancedComments);
+      console.log('Comments state updated with', enhancedComments.length, 'comments');
       
       // キャッシュに保存（5分間有効）
       if (pageUrl) {
@@ -675,7 +732,7 @@ function App() {
         
         try {
           // Public APIでプロフィールを取得してDIDを解決
-          const profileResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
+          const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
           if (profileResponse.ok) {
             const profileData = await profileResponse.json();
             if (profileData.did) {
@@ -966,11 +1023,30 @@ function App() {
             </div>
           )}
 
+          {/* Tab Navigation */}
+          <div className="tab-navigation">
+            <button 
+              className={`tab-button ${activeTab === 'comments' ? 'active' : ''}`}
+              onClick={() => setActiveTab('comments')}
+            >
+              Comments ({comments.filter(shouldShowComment).length})
+            </button>
+            {user && (
+              <button 
+                className={`tab-button ${activeTab === 'ai-chat' ? 'active' : ''}`}
+                onClick={() => setActiveTab('ai-chat')}
+              >
+                AI Chat History ({aiChatHistory.length})
+              </button>
+            )}
+          </div>
+
           {/* Comments List */}
-          <div className="comments-list">
-            <div className="comments-header">
-              <h3>Comments</h3>
-            </div>
+          {activeTab === 'comments' && (
+            <div className="comments-list">
+              <div className="comments-header">
+                <h3>Comments</h3>
+              </div>
             {comments.filter(shouldShowComment).length === 0 ? (
               <p className="no-comments">
                 {appConfig.rkey ? `No comments for this post yet` : `No comments yet`}
@@ -980,9 +1056,25 @@ function App() {
                 <div key={index} className="comment-item">
                   <div className="comment-header">
                     <img 
-                      src={record.value.author?.avatar || generatePlaceholderAvatar(record.value.author?.handle || 'unknown')} 
+                      src={generatePlaceholderAvatar(record.value.author?.handle || 'unknown')} 
                       alt="User Avatar" 
                       className="comment-avatar"
+                      ref={(img) => {
+                        // Fetch fresh avatar from API when component mounts
+                        if (img && record.value.author?.did) {
+                          fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.did)}`)
+                            .then(res => res.json())
+                            .then(data => {
+                              if (data.avatar && img) {
+                                img.src = data.avatar;
+                              }
+                            })
+                            .catch(err => {
+                              console.warn('Failed to fetch fresh avatar:', err);
+                              // Keep placeholder on error
+                            });
+                        }
+                      }}
                     />
                     <div className="comment-author-info">
                       <span className="comment-author">
@@ -1039,7 +1131,92 @@ function App() {
                 </div>
               ))
             )}
-          </div>
+            </div>
+          )}
+
+          {/* AI Chat History List */}
+          {activeTab === 'ai-chat' && user && (
+            <div className="ai-chat-list">
+              <div className="chat-header">
+                <h3>AI Chat History</h3>
+              </div>
+              {aiChatHistory.length === 0 ? (
+                <p className="no-chat">No AI conversations yet. Start chatting with Ask AI!</p>
+              ) : (
+                aiChatHistory.map((record, index) => (
+                  <div key={index} className="chat-item">
+                    <div className="chat-header">
+                      <img 
+                        src={generatePlaceholderAvatar(record.value.author?.handle || 'unknown')} 
+                        alt="User Avatar" 
+                        className="comment-avatar"
+                        ref={(img) => {
+                          // Fetch fresh avatar from API when component mounts
+                          if (img && record.value.author?.did) {
+                            fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.did)}`)
+                              .then(res => res.json())
+                              .then(data => {
+                                if (data.avatar && img) {
+                                  img.src = data.avatar;
+                                }
+                              })
+                              .catch(err => {
+                                console.warn('Failed to fetch fresh avatar:', err);
+                                // Keep placeholder on error
+                              });
+                          }
+                        }}
+                      />
+                      <div className="comment-author-info">
+                        <span className="comment-author">
+                          {record.value.author?.displayName || record.value.author?.handle || 'unknown'}
+                        </span>
+                        <a 
+                          href={generateProfileUrl(record.value.author?.handle || '', record.value.author?.did || '')}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="comment-handle"
+                        >
+                          @{record.value.author?.handle || 'unknown'}
+                        </a>
+                      </div>
+                      <span className="comment-date">
+                        {new Date(record.value.createdAt).toLocaleString()}
+                      </span>
+                      <div className="comment-actions">
+                        <button 
+                          onClick={() => toggleJsonDisplay(record.uri)}
+                          className="json-button"
+                          title="Show/Hide JSON"
+                        >
+                          {showJsonFor === record.uri ? 'Hide' : 'JSON'}
+                        </button>
+                        <button className="chat-type-button">
+                          {record.value.question ? 'Question' : 'Answer'}
+                        </button>
+                      </div>
+                    </div>
+                    <div className="comment-content">
+                      {record.value.question || record.value.answer}
+                    </div>
+                    <div className="comment-meta">
+                      <small>{record.uri}</small>
+                    </div>
+                    
+                    {/* JSON Display */}
+                    {showJsonFor === record.uri && (
+                      <div className="json-display">
+                        <h5>JSON Record:</h5>
+                        <pre className="json-content">
+                          {JSON.stringify(record, null, 2)}
+                        </pre>
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
 
           {/* Comment Form - Only show on post pages */}
           {user && appConfig.rkey && (
@@ -1076,6 +1253,8 @@ function App() {
         </section>
       </main>
 
+      {/* AI Chat Component - handles all AI functionality */}
+      <AIChat user={user} isEnabled={appConfig.aiEnabled && appConfig.aiAskAi} />
     </div>
   );
 }

oauth/src/components/AIChat-access.tsx

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

oauth/src/components/AIChat.tsx

@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from 'react';
+import { User } from '../services/auth';
+import { atprotoOAuthService } from '../services/atproto-oauth';
+import { appConfig } from '../config/app';
+
+interface AIChatProps {
+  user: User | null;
+  isEnabled: boolean;
+}
+
+export const AIChat: React.FC<AIChatProps> = ({ user, isEnabled }) => {
+  const [chatHistory, setChatHistory] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [aiProfile, setAiProfile] = useState<any>(null);
+  
+  // Get AI settings from environment variables
+  const aiConfig = {
+    enabled: import.meta.env.VITE_AI_ENABLED === 'true',
+    askAi: import.meta.env.VITE_AI_ASK_AI === 'true',
+    provider: import.meta.env.VITE_AI_PROVIDER || 'ollama',
+    model: import.meta.env.VITE_AI_MODEL || 'gemma3:4b',
+    host: import.meta.env.VITE_AI_HOST || 'https://ollama.syui.ai',
+    systemPrompt: import.meta.env.VITE_AI_SYSTEM_PROMPT || 'You are a helpful AI assistant trained on this blog\'s content.',
+    aiDid: import.meta.env.VITE_AI_DID || 'did:plc:uqzpqmrjnptsxezjx4xuh2mn',
+    bskyPublicApi: import.meta.env.VITE_BSKY_PUBLIC_API || 'https://public.api.bsky.app',
+  };
+
+  // Fetch AI profile on load
+  useEffect(() => {
+    const fetchAIProfile = async () => {
+      console.log('=== AI PROFILE FETCH START ===');
+      console.log('AI DID:', aiConfig.aiDid);
+      
+      if (!aiConfig.aiDid) {
+        console.log('No AI DID configured');
+        return;
+      }
+      
+      try {
+        // Try with agent first
+        const agent = atprotoOAuthService.getAgent();
+        if (agent) {
+          console.log('Fetching AI profile with agent for DID:', aiConfig.aiDid);
+          const profile = await agent.getProfile({ actor: aiConfig.aiDid });
+          console.log('AI profile fetched successfully:', profile.data);
+          const profileData = {
+            did: aiConfig.aiDid,
+            handle: profile.data.handle,
+            displayName: profile.data.displayName,
+            avatar: profile.data.avatar,
+            description: profile.data.description
+          };
+          console.log('Setting aiProfile to:', profileData);
+          setAiProfile(profileData);
+          
+          // Dispatch event to update Ask AI button
+          window.dispatchEvent(new CustomEvent('aiProfileLoaded', { detail: profileData }));
+          console.log('=== AI PROFILE FETCH SUCCESS (AGENT) ===');
+          return;
+        }
+        
+        // Fallback to public API
+        console.log('No agent available, trying public API for AI profile');
+        const response = await fetch(`${aiConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(aiConfig.aiDid)}`);
+        if (response.ok) {
+          const profileData = await response.json();
+          console.log('AI profile fetched via public API:', profileData);
+          const profile = {
+            did: aiConfig.aiDid,
+            handle: profileData.handle,
+            displayName: profileData.displayName,
+            avatar: profileData.avatar,
+            description: profileData.description
+          };
+          console.log('Setting aiProfile to:', profile);
+          setAiProfile(profile);
+          
+          // Dispatch event to update Ask AI button
+          window.dispatchEvent(new CustomEvent('aiProfileLoaded', { detail: profile }));
+          console.log('=== AI PROFILE FETCH SUCCESS (PUBLIC API) ===');
+          return;
+        } else {
+          console.error('Public API failed with status:', response.status);
+        }
+      } catch (error) {
+        console.error('Failed to fetch AI profile:', error);
+        setAiProfile(null);
+      }
+      console.log('=== AI PROFILE FETCH FAILED ===');
+    };
+
+    fetchAIProfile();
+  }, [aiConfig.aiDid]);
+
+  useEffect(() => {
+    if (!isEnabled || !aiConfig.askAi) return;
+
+    // Listen for AI question posts from base.html
+    const handleAIQuestion = async (event: any) => {
+      if (!user || !event.detail || !event.detail.question || isProcessing || !aiProfile) return;
+      
+      console.log('AIChat received question:', event.detail.question);
+      console.log('Current aiProfile state:', aiProfile);
+      
+      setIsProcessing(true);
+      try {
+        await postQuestionAndGenerateResponse(event.detail.question);
+      } finally {
+        setIsProcessing(false);
+      }
+    };
+
+    // Add listener with a small delay to ensure it's ready
+    setTimeout(() => {
+      window.addEventListener('postAIQuestion', handleAIQuestion);
+      console.log('AIChat event listener registered');
+      
+      // Notify that AI is ready
+      window.dispatchEvent(new CustomEvent('aiChatReady'));
+    }, 100);
+
+    return () => {
+      window.removeEventListener('postAIQuestion', handleAIQuestion);
+    };
+  }, [user, isEnabled, isProcessing, aiProfile]);
+
+  const postQuestionAndGenerateResponse = async (question: string) => {
+    if (!user || !aiConfig.askAi || !aiProfile) return;
+
+    setIsLoading(true);
+    
+    try {
+      const agent = atprotoOAuthService.getAgent();
+      if (!agent) throw new Error('No agent available');
+
+      // 1. Post question to ATProto
+      const now = new Date();
+      const rkey = now.toISOString().replace(/[:.]/g, '-');
+      
+      const questionRecord = {
+        $type: appConfig.collections.chat,
+        question: question,
+        url: window.location.href,
+        createdAt: now.toISOString(),
+        author: {
+          did: user.did,
+          handle: user.handle,
+          avatar: user.avatar,
+          displayName: user.displayName || user.handle,
+        },
+        context: {
+          page_title: document.title,
+          page_url: window.location.href,
+        },
+      };
+
+      await agent.api.com.atproto.repo.putRecord({
+        repo: user.did,
+        collection: appConfig.collections.chat,
+        rkey: rkey,
+        record: questionRecord,
+      });
+
+      console.log('Question posted to ATProto');
+
+      // 2. Get chat history
+      const chatRecords = await agent.api.com.atproto.repo.listRecords({
+        repo: user.did,
+        collection: appConfig.collections.chat,
+        limit: 10,
+      });
+
+      let chatHistoryText = '';
+      if (chatRecords.data.records) {
+        chatHistoryText = chatRecords.data.records
+          .map((r: any) => {
+            if (r.value.question) {
+              return `User: ${r.value.question}`;
+            } else if (r.value.answer) {
+              return `AI: ${r.value.answer}`;
+            }
+            return '';
+          })
+          .filter(Boolean)
+          .join('\n');
+      }
+
+      // 3. Generate AI response based on provider
+      let aiAnswer = '';
+      
+      // 3. Generate AI response using Ollama via proxy
+      if (aiConfig.provider === 'ollama') {
+        const prompt = `${aiConfig.systemPrompt}
+
+Question: ${question}
+
+Answer:`;
+
+        const response = await fetch(`${aiConfig.host}/api/generate`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            model: aiConfig.model,
+            prompt: prompt,
+            stream: false,
+            options: {
+              temperature: 0.9,
+              top_p: 0.9,
+              num_predict: 80, // Shorter responses for faster generation
+              repeat_penalty: 1.1,
+            }
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('AI API request failed');
+        }
+
+        const data = await response.json();
+        aiAnswer = data.response;
+      }
+
+      // 4. Immediately dispatch event to update UI
+      window.dispatchEvent(new CustomEvent('aiResponseReceived', {
+        detail: { 
+          answer: aiAnswer,
+          aiProfile: aiProfile,
+          timestamp: now.toISOString()
+        }
+      }));
+
+      // 5. Save AI response in background
+      const answerRkey = now.toISOString().replace(/[:.]/g, '-') + '-answer';
+      
+      console.log('=== SAVING AI ANSWER ===');
+      console.log('Current aiProfile:', aiProfile);
+      
+      const answerRecord = {
+        $type: appConfig.collections.chat,
+        answer: aiAnswer,
+        question_rkey: rkey,
+        url: window.location.href,
+        createdAt: now.toISOString(),
+        author: {
+          did: aiProfile.did,
+          handle: aiProfile.handle,
+          displayName: aiProfile.displayName,
+          avatar: aiProfile.avatar,
+        },
+      };
+      
+      console.log('Answer record to save:', answerRecord);
+
+      // Save to ATProto asynchronously (don't wait for it)
+      agent.api.com.atproto.repo.putRecord({
+        repo: user.did,
+        collection: appConfig.collections.chat,
+        rkey: answerRkey,
+        record: answerRecord,
+      }).catch(err => {
+        console.error('Failed to save AI response to ATProto:', err);
+      });
+
+    } catch (error) {
+      console.error('Failed to generate AI response:', error);
+      window.dispatchEvent(new CustomEvent('aiResponseError', {
+        detail: { error: 'AI応答の生成に失敗しました' }
+      }));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // This component doesn't render anything - it just handles the logic
+  return null;
+};

oauth/src/components/AIProfile.tsx

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

oauth/src/config/app.ts

@@ -4,15 +4,22 @@ export interface AppConfig {
   collections: {
     comment: string;
     user: string;
+    chat: string;
   };
   host: string;
   rkey?: string; // Current post rkey if on post page
+  aiEnabled: boolean;
+  aiAskAi: boolean;
+  aiProvider: string;
+  aiModel: string;
+  aiHost: string;
+  bskyPublicApi: string;
 }
 
 // Generate collection names from host
 // Format: ${reg}.${name}.${sub}
 // Example: log.syui.ai -> ai.syui.log
-function generateCollectionNames(host: string): { comment: string; user: string } {
+function generateCollectionNames(host: string): { comment: string; user: string; chat: string } {
   try {
     // Remove protocol if present
     const cleanHost = host.replace(/^https?:\/\//, '');
@@ -31,14 +38,16 @@ function generateCollectionNames(host: string): { comment: string; user: string
     
     return {
       comment: collectionBase,
-      user: `${collectionBase}.user`
+      user: `${collectionBase}.user`,
+      chat: `${collectionBase}.chat`
     };
   } catch (error) {
     console.warn('Failed to generate collection names from host:', host, error);
     // Fallback to default collections
     return {
       comment: 'ai.syui.log',
-      user: 'ai.syui.log.user'
+      user: 'ai.syui.log.user',
+      chat: 'ai.syui.log.chat'
     };
   }
 }
@@ -61,22 +70,39 @@ export function getAppConfig(): AppConfig {
   const collections = {
     comment: import.meta.env.VITE_COLLECTION_COMMENT || autoGeneratedCollections.comment,
     user: import.meta.env.VITE_COLLECTION_USER || autoGeneratedCollections.user,
+    chat: import.meta.env.VITE_COLLECTION_CHAT || autoGeneratedCollections.chat,
   };
   
   const rkey = extractRkeyFromUrl();
   
+  // AI configuration
+  const aiEnabled = import.meta.env.VITE_AI_ENABLED === 'true';
+  const aiAskAi = import.meta.env.VITE_AI_ASK_AI === 'true';
+  const aiProvider = import.meta.env.VITE_AI_PROVIDER || 'ollama';
+  const aiModel = import.meta.env.VITE_AI_MODEL || 'gemma2:2b';
+  const aiHost = import.meta.env.VITE_AI_HOST || 'https://ollama.syui.ai';
+  const bskyPublicApi = import.meta.env.VITE_BSKY_PUBLIC_API || 'https://public.api.bsky.app';
+  
   console.log('App configuration:', {
     host,
     adminDid,
     collections,
-    rkey: rkey || 'none (not on post page)'
+    rkey: rkey || 'none (not on post page)',
+    ai: { enabled: aiEnabled, askAi: aiAskAi, provider: aiProvider, model: aiModel, host: aiHost },
+    bskyPublicApi
   });
   
   return {
     adminDid,
     collections,
     host,
-    rkey
+    rkey,
+    aiEnabled,
+    aiAskAi,
+    aiProvider,
+    aiModel,
+    aiHost,
+    bskyPublicApi
   };
 }
 

oauth/src/main.tsx

@@ -10,14 +10,21 @@ import { OAuthEndpointHandler } from './utils/oauth-endpoints'
 // DISABLED: This may interfere with BrowserOAuthClient
 // OAuthEndpointHandler.init()
 
-ReactDOM.createRoot(document.getElementById('comment-atproto')!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <Routes>
-        <Route path="/oauth/callback" element={<OAuthCallbackPage />} />
-        <Route path="/list" element={<CardList />} />
-        <Route path="*" element={<App />} />
-      </Routes>
-    </BrowserRouter>
-  </React.StrictMode>,
-)
+// Mount React app to all comment-atproto divs
+const mountPoints = document.querySelectorAll('#comment-atproto');
+console.log(`Found ${mountPoints.length} comment-atproto mount points`);
+
+mountPoints.forEach((mountPoint, index) => {
+  console.log(`Mounting React app to comment-atproto #${index + 1}`);
+  ReactDOM.createRoot(mountPoint as HTMLElement).render(
+    <React.StrictMode>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/oauth/callback" element={<OAuthCallbackPage />} />
+          <Route path="/list" element={<CardList />} />
+          <Route path="*" element={<App />} />
+        </Routes>
+      </BrowserRouter>
+    </React.StrictMode>,
+  );
+});

run.zsh

@@ -17,7 +17,6 @@ function _env() {
 }
 
 function _server() {
-	_env
 	lsof -ti:$port | xargs kill -9 2>/dev/null || true
 	cd $d/my-blog
 	cargo build --release
@@ -26,12 +25,10 @@ function _server() {
 }
 
 function _server_public() {
-	_env
 	cloudflared tunnel --config $d/cloudflared-config.yml run 
 }
 
 function _oauth_build() {
-	_env
 	cd $oauth
 	nvm use 21
 	npm i
@@ -43,11 +40,18 @@ function _oauth_build() {
 }
 
 function _server_comment() {
-	_env
 	cargo build --release
-	AILOG_DEBUG_ALL=1 $ailog stream start
+	AILOG_DEBUG_ALL=1 $ailog stream start my-blog
 }
 
+function _server_ollama(){
+	lsof -ti:11434 | xargs kill -9 2>/dev/null || true
+	brew services stop ollama
+	OLLAMA_ORIGINS="https://log.syui.ai" ollama serve
+}
+
+_env
+
 case "${1:-serve}" in
 	tunnel|c)
 		_server_public
@@ -58,6 +62,9 @@ case "${1:-serve}" in
 	comment|co)
 		_server_comment
 		;;
+	ollama|ol)
+		_server_ollama
+		;;
 	serve|s|*)
 		_server
 		;;

src/commands/init.rs

@@ -30,6 +30,7 @@ title = "My Blog"
 description = "A blog powered by ailog"
 base_url = "https://example.com"
 language = "ja"
+author = "Your Name"
 
 [build]
 highlight_code = true
@@ -88,7 +89,7 @@ comment_moderation = false
     </div>
     
     <footer class="main-footer">
-        <p>&copy; 2025 {{ config.title }}</p>
+        <p>&copy; {{ config.author | default(value=config.title) }}</p>
     </footer>
 
     <script>

src/commands/oauth.rs

@@ -53,6 +53,39 @@ pub async fn build(project_dir: PathBuf) -> Result<()> {
         .and_then(|v| v.as_str())
         .unwrap_or("ai.syui.log.user");
 
+    let collection_chat = oauth_config.get("collection_chat")
+        .and_then(|v| v.as_str())
+        .unwrap_or("ai.syui.log.chat");
+
+    // Extract AI config if present
+    let ai_config = config.get("ai")
+        .and_then(|v| v.as_table());
+    
+    let ai_enabled = ai_config
+        .and_then(|ai| ai.get("enabled"))
+        .and_then(|v| v.as_bool())
+        .unwrap_or(false);
+    
+    let ai_ask_ai = ai_config
+        .and_then(|ai| ai.get("ask_ai"))
+        .and_then(|v| v.as_bool())
+        .unwrap_or(false);
+    
+    let ai_provider = ai_config
+        .and_then(|ai| ai.get("provider"))
+        .and_then(|v| v.as_str())
+        .unwrap_or("ollama");
+    
+    let ai_model = ai_config
+        .and_then(|ai| ai.get("model"))
+        .and_then(|v| v.as_str())
+        .unwrap_or("gemma2:2b");
+    
+    let ai_host = ai_config
+        .and_then(|ai| ai.get("host"))
+        .and_then(|v| v.as_str())
+        .unwrap_or("https://ollama.syui.ai");
+
     // 4. Create .env.production content
     let env_content = format!(
         r#"# Production environment variables
@@ -64,10 +97,19 @@ VITE_ADMIN_DID={}
 # Collection names for OAuth app
 VITE_COLLECTION_COMMENT={}
 VITE_COLLECTION_USER={}
+VITE_COLLECTION_CHAT={}
 
 # Collection names for ailog (backward compatibility)
 AILOG_COLLECTION_COMMENT={}
 AILOG_COLLECTION_USER={}
+AILOG_COLLECTION_CHAT={}
+
+# AI Configuration
+VITE_AI_ENABLED={}
+VITE_AI_ASK_AI={}
+VITE_AI_PROVIDER={}
+VITE_AI_MODEL={}
+VITE_AI_HOST={}
 "#,
         base_url,
         base_url, client_id_path,
@@ -75,8 +117,15 @@ AILOG_COLLECTION_USER={}
         admin_did,
         collection_comment,
         collection_user,
+        collection_chat,
         collection_comment,
-        collection_user
+        collection_user,
+        collection_chat,
+        ai_enabled,
+        ai_ask_ai,
+        ai_provider,
+        ai_model,
+        ai_host
     );
 
     // 5. Find oauth directory (relative to current working directory)

src/config.rs

@@ -17,6 +17,7 @@ pub struct SiteConfig {
     pub description: String,
     pub base_url: String,
     pub language: String,
+    pub author: Option<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
@@ -30,6 +31,12 @@ pub struct AiConfig {
     pub enabled: bool,
     pub auto_translate: bool,
     pub comment_moderation: bool,
+    pub ask_ai: Option<bool>,
+    pub provider: Option<String>,
+    pub model: Option<String>,
+    pub host: Option<String>,
+    pub system_prompt: Option<String>,
+    pub ai_did: Option<String>,
     pub api_key: Option<String>,
     pub gpt_endpoint: Option<String>,
     pub atproto_config: Option<AtprotoConfig>,
@@ -135,6 +142,7 @@ impl Default for Config {
                 description: "A blog powered by ailog".to_string(),
                 base_url: "https://example.com".to_string(),
                 language: "ja".to_string(),
+                author: None,
             },
             build: BuildConfig {
                 highlight_code: true,
@@ -144,6 +152,12 @@ impl Default for Config {
                 enabled: false,
                 auto_translate: false,
                 comment_moderation: false,
+                ask_ai: Some(false),
+                provider: Some("ollama".to_string()),
+                model: Some("gemma3:4b".to_string()),
+                host: None,
+                system_prompt: Some("You are a helpful AI assistant trained on this blog's content.".to_string()),
+                ai_did: None,
                 api_key: None,
                 gpt_endpoint: None,
                 atproto_config: None,

src/ollama_proxy.rs

@@ -0,0 +1,96 @@
+use actix_web::{web, App, HttpResponse, HttpServer, middleware};
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::sync::Mutex;
+use chrono::{DateTime, Utc};
+
+#[derive(Clone)]
+struct RateLimiter {
+    requests: Arc<Mutex<HashMap<String, Vec<DateTime<Utc>>>>>,
+    limit_per_hour: usize,
+}
+
+impl RateLimiter {
+    fn new(limit: usize) -> Self {
+        Self {
+            requests: Arc::new(Mutex::new(HashMap::new())),
+            limit_per_hour: limit,
+        }
+    }
+
+    fn check_limit(&self, user_id: &str) -> bool {
+        let mut requests = self.requests.lock().unwrap();
+        let now = Utc::now();
+        let hour_ago = now - chrono::Duration::hours(1);
+        
+        let user_requests = requests.entry(user_id.to_string()).or_insert(Vec::new());
+        user_requests.retain(|&time| time > hour_ago);
+        
+        if user_requests.len() < self.limit_per_hour {
+            user_requests.push(now);
+            true
+        } else {
+            false
+        }
+    }
+}
+
+#[derive(Deserialize)]
+struct GenerateRequest {
+    model: String,
+    prompt: String,
+    stream: bool,
+    options: Option<serde_json::Value>,
+}
+
+async fn proxy_generate(
+    req: web::Json<GenerateRequest>,
+    data: web::Data<AppState>,
+    user_info: web::ReqData<UserInfo>, // ATProto認証から取得
+) -> Result<HttpResponse, actix_web::Error> {
+    // レート制限チェック
+    if !data.rate_limiter.check_limit(&user_info.did) {
+        return Ok(HttpResponse::TooManyRequests()
+            .json(serde_json::json!({
+                "error": "Rate limit exceeded. Please try again later."
+            })));
+    }
+    
+    // プロンプトサイズ制限
+    if req.prompt.len() > 500 {
+        return Ok(HttpResponse::BadRequest()
+            .json(serde_json::json!({
+                "error": "Prompt too long. Maximum 500 characters."
+            })));
+    }
+    
+    // Ollamaへのリクエスト転送
+    let client = reqwest::Client::new();
+    let response = client
+        .post("http://localhost:11434/api/generate")
+        .json(&req.into_inner())
+        .send()
+        .await?;
+    
+    let body = response.bytes().await?;
+    Ok(HttpResponse::Ok()
+        .content_type("application/json")
+        .body(body))
+}
+
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    let rate_limiter = RateLimiter::new(20); // 1時間に20リクエスト
+    
+    HttpServer::new(move || {
+        App::new()
+            .app_data(web::Data::new(AppState {
+                rate_limiter: rate_limiter.clone(),
+            }))
+            .wrap(middleware::Logger::default())
+            .route("/api/generate", web::post().to(proxy_generate))
+    })
+    .bind("127.0.0.1:8080")?
+    .run()
+    .await
+}

workers/ollama-proxy.js

@@ -0,0 +1,93 @@
+// Cloudflare Worker for secure Ollama proxy
+export default {
+  async fetch(request, env, ctx) {
+    // CORS preflight
+    if (request.method === 'OPTIONS') {
+      return new Response(null, {
+        headers: {
+          'Access-Control-Allow-Origin': 'https://log.syui.ai',
+          'Access-Control-Allow-Methods': 'POST, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, X-User-Token',
+          'Access-Control-Max-Age': '86400',
+        }
+      });
+    }
+
+    // Verify origin
+    const origin = request.headers.get('Origin');
+    const referer = request.headers.get('Referer');
+    
+    // 許可されたオリジンのみ
+    const allowedOrigins = [
+      'https://log.syui.ai',
+      'https://log.pages.dev' // Cloudflare Pages preview
+    ];
+    
+    if (!origin || !allowedOrigins.some(allowed => origin.startsWith(allowed))) {
+      return new Response('Forbidden', { status: 403 });
+    }
+
+    // ユーザー認証トークン検証（オプション）
+    const userToken = request.headers.get('X-User-Token');
+    if (env.REQUIRE_AUTH && !userToken) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    // リクエストボディを取得
+    const body = await request.json();
+    
+    // プロンプトサイズ制限
+    if (body.prompt && body.prompt.length > 1000) {
+      return new Response(JSON.stringify({
+        error: 'Prompt too long. Maximum 1000 characters.'
+      }), { 
+        status: 400,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    }
+
+    // レート制限（CF Workers KV使用）
+    if (env.RATE_LIMITER) {
+      const clientIP = request.headers.get('CF-Connecting-IP');
+      const rateLimitKey = `rate:${clientIP}`;
+      const currentCount = await env.RATE_LIMITER.get(rateLimitKey) || 0;
+      
+      if (currentCount >= 20) {
+        return new Response(JSON.stringify({
+          error: 'Rate limit exceeded. Try again later.'
+        }), { 
+          status: 429,
+          headers: { 'Content-Type': 'application/json' }
+        });
+      }
+      
+      // カウント増加（1時間TTL）
+      await env.RATE_LIMITER.put(rateLimitKey, currentCount + 1, {
+        expirationTtl: 3600
+      });
+    }
+
+    // Ollamaへプロキシ
+    const ollamaResponse = await fetch(env.OLLAMA_API_URL || 'https://ollama.syui.ai/api/generate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        // 内部認証ヘッダー（必要に応じて）
+        'X-Internal-Token': env.OLLAMA_INTERNAL_TOKEN || ''
+      },
+      body: JSON.stringify(body)
+    });
+
+    // レスポンスを返す
+    const responseData = await ollamaResponse.text();
+    
+    return new Response(responseData, {
+      status: ollamaResponse.status,
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': origin,
+        'Cache-Control': 'no-store'
+      }
+    });
+  }
+};

workers/wrangler.toml

@@ -0,0 +1,20 @@
+name = "ollama-proxy"
+main = "ollama-proxy.js"
+compatibility_date = "2024-01-01"
+
+# 環境変数
+[vars]
+REQUIRE_AUTH = false
+
+# 本番環境
+[env.production.vars]
+OLLAMA_API_URL = "https://ollama.syui.ai/api/generate"
+REQUIRE_AUTH = true
+
+# KVネームスペース（レート制限用）
+[[kv_namespaces]]
+binding = "RATE_LIMITER"
+id = "your-kv-namespace-id"
+
+# シークレット（wrangler secret putで設定）
+# OLLAMA_INTERNAL_TOKEN = "your-internal-token"