diff --git a/oauth_new/.env b/oauth_new/.env
index cada505..801b270 100644
--- a/oauth_new/.env
+++ b/oauth_new/.env
@@ -4,3 +4,7 @@ VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai", "ai.ai"]
 VITE_COLLECTION=ai.syui.log
 VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
 VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
+
+# Development/Debug features
+VITE_ENABLE_TEST_UI=true
+VITE_ENABLE_DEBUG=true
diff --git a/oauth_new/.env.production b/oauth_new/.env.production
new file mode 100644
index 0000000..b6d20ee
--- /dev/null
+++ b/oauth_new/.env.production
@@ -0,0 +1,10 @@
+VITE_ADMIN=ai.syui.ai
+VITE_PDS=syu.is
+VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai", "ai.ai"]
+VITE_COLLECTION=ai.syui.log
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
+
+# Production settings - Disable development features
+VITE_ENABLE_TEST_UI=false
+VITE_ENABLE_DEBUG=false
\ No newline at end of file
diff --git a/oauth_new/DEPLOYMENT.md b/oauth_new/DEPLOYMENT.md
new file mode 100644
index 0000000..a0bc407
--- /dev/null
+++ b/oauth_new/DEPLOYMENT.md
@@ -0,0 +1,178 @@
+# 本番環境デプロイメント手順
+
+## 本番環境用の調整
+
+### 1. テスト機能の削除・無効化
+
+本番環境では以下の調整が必要です：
+
+#### A. TestUI コンポーネントの削除
+```jsx
+// src/App.jsx から以下を削除/コメントアウト
+import TestUI from './components/TestUI.jsx'
+const [showTestUI, setShowTestUI] = useState(false)
+
+// ボトムセクションからTestUIを削除
+{showTestUI && (
+  <TestUI />
+)}
+<button
+  onClick={() => setShowTestUI(!showTestUI)}
+  className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
+>
+  {showTestUI ? 'close test' : 'test'}
+</button>
+```
+
+#### B. ログ出力の完全無効化
+現在は `logger.js` で開発環境のみログが有効になっていますが、完全に確実にするため：
+
+```bash
+# 本番ビルド前に全てのconsole.logを確認
+grep -r "console\." src/ --exclude-dir=node_modules
+```
+
+### 2. 環境変数の設定
+
+#### 本番用 .env.production
+```bash
+VITE_ATPROTO_PDS=syu.is
+VITE_ADMIN_HANDLE=ai.syui.ai  
+VITE_AI_HANDLE=ai.syui.ai
+VITE_OAUTH_COLLECTION=ai.syui.log
+```
+
+### 3. ビルドコマンド
+
+```bash
+# 本番用ビルド
+npm run build
+
+# 生成されるファイル確認
+ls -la dist/
+```
+
+### 4. デプロイ用ファイル構成
+
+```
+dist/
+├── index.html                          # 最小化HTML
+├── assets/
+│   ├── comment-atproto-[hash].js      # メインJSバンドル
+│   └── comment-atproto-[hash].css     # CSS
+```
+
+### 5. ailog サイトへの統合
+
+#### A. アセットファイルのコピー
+```bash
+# distファイルをailogサイトの適切な場所にコピー
+cp dist/assets/* /path/to/ailog/static/assets/
+cp dist/index.html /path/to/ailog/templates/oauth-assets.html
+```
+
+#### B. ailog テンプレートでの読み込み
+```html
+<!-- ailog のテンプレートに追加 -->
+{{ if .Site.Params.oauth_comments }}
+  {{ partial "oauth-assets.html" . }}
+{{ end }}
+```
+
+### 6. 本番環境チェックリスト
+
+#### ✅ セキュリティ
+- [ ] OAuth認証のリダイレクトURL確認
+- [ ] 環境変数の機密情報確認
+- [ ] HTTPS通信確認
+
+#### ✅ パフォーマンス  
+- [ ] バンドルサイズ確認（現在1.2MB）
+- [ ] ファイル圧縮確認
+- [ ] キャッシュ設定確認
+
+#### ✅ 機能
+- [ ] 本番PDS接続確認
+- [ ] OAuth認証フロー確認
+- [ ] コメント投稿・表示確認
+- [ ] アバター表示確認
+
+#### ✅ UI/UX
+- [ ] モバイル表示確認
+- [ ] アクセシビリティ確認
+- [ ] エラーハンドリング確認
+
+### 7. 段階的デプロイ戦略
+
+#### Phase 1: テスト環境
+```bash
+# テスト用のサブドメインでデプロイ
+# test.syui.ai など
+```
+
+#### Phase 2: 本番環境
+```bash
+# 問題なければ本番環境にデプロイ
+# ailog本体に統合
+```
+
+### 8. トラブルシューティング
+
+#### よくある問題
+1. **OAuth認証エラー**: リダイレクトURL設定確認
+2. **PDS接続エラー**: ネットワーク・DNS設定確認  
+3. **アバター表示エラー**: CORS設定確認
+4. **CSS競合**: oauth-プレフィックス確認
+
+#### ログ確認方法
+```bash
+# 本番環境でエラーが発生した場合
+# ブラウザのDevToolsでエラー確認
+# logger.jsは本番では無効化されている
+```
+
+### 9. 本番用設定ファイル
+
+```bash
+# ~/.config/syui/ai/log/config.json
+{
+  "oauth": {
+    "environment": "production",
+    "debug": false,
+    "test_mode": false
+  }
+}
+```
+
+### 10. 推奨デプロイ手順
+
+```bash
+# 1. テスト機能削除
+git checkout -b production-ready
+# App.jsx からTestUI関連を削除
+
+# 2. 本番ビルド
+npm run build
+
+# 3. ファイル確認
+ls -la dist/
+
+# 4. ailogサイトに統合
+cp dist/assets/* ../my-blog/static/assets/
+cp dist/index.html ../my-blog/templates/oauth-assets.html
+
+# 5. ailogサイトでテスト
+cd ../my-blog
+hugo server
+
+# 6. 問題なければcommit
+git add .
+git commit -m "Production build: Remove test UI, optimize for deployment"
+```
+
+## 注意事項
+
+- TestUIは開発・デモ用のため本番では削除必須
+- loggerは自動で本番では無効化される
+- OAuth設定は本番PDS用に調整必要
+- バンドルサイズが大きいため今後最適化検討
\ No newline at end of file
diff --git a/oauth_new/ENV_SETUP.md b/oauth_new/ENV_SETUP.md
new file mode 100644
index 0000000..91dfbbe
--- /dev/null
+++ b/oauth_new/ENV_SETUP.md
@@ -0,0 +1,110 @@
+# 環境変数による機能切り替え
+
+## 概要
+
+開発用機能（TestUI、デバッグログ）をenv変数で簡単に有効/無効化できるようになりました。
+
+## 設定ファイル
+
+### 開発環境用: `.env`
+```bash
+# Development/Debug features
+VITE_ENABLE_TEST_UI=true
+VITE_ENABLE_DEBUG=true
+```
+
+### 本番環境用: `.env.production`
+```bash
+# Production settings - Disable development features  
+VITE_ENABLE_TEST_UI=false
+VITE_ENABLE_DEBUG=false
+```
+
+## 制御される機能
+
+### 1. TestUI コンポーネント
+- **制御**: `VITE_ENABLE_TEST_UI`
+- **true**: TestボタンとTestUI表示
+- **false**: TestUI関連が完全に非表示
+
+### 2. デバッグログ
+- **制御**: `VITE_ENABLE_DEBUG`
+- **true**: console.log等が有効
+- **false**: すべてのlogが無効化
+
+## 使い方
+
+### 開発時
+```bash
+# .envで有効化されているので通常通り
+npm run dev
+npm run build
+```
+
+### 本番デプロイ時
+```bash
+# 自動的に .env.production が読み込まれる
+npm run build
+
+# または明示的に指定
+NODE_ENV=production npm run build
+```
+
+### 手動切り替え
+```bash
+# 一時的にTestUIだけ無効化
+VITE_ENABLE_TEST_UI=false npm run dev
+
+# 一時的にデバッグだけ無効化
+VITE_ENABLE_DEBUG=false npm run dev
+```
+
+## 実装詳細
+
+### App.jsx
+```jsx
+// Environment-based feature flags
+const ENABLE_TEST_UI = import.meta.env.VITE_ENABLE_TEST_UI === 'true'
+const ENABLE_DEBUG = import.meta.env.VITE_ENABLE_DEBUG === 'true'
+
+// TestUI表示制御
+{ENABLE_TEST_UI && showTestUI && (
+  <div className="test-section">
+    <TestUI />
+  </div>
+)}
+
+// Testボタン表示制御
+{ENABLE_TEST_UI && (
+  <div className="bottom-actions">
+    <button onClick={() => setShowTestUI(!showTestUI)}>
+      {showTestUI ? 'close test' : 'test'}
+    </button>
+  </div>
+)}
+```
+
+### logger.js
+```jsx
+class Logger {
+  constructor() {
+    this.isDev = import.meta.env.DEV || false
+    this.debugEnabled = import.meta.env.VITE_ENABLE_DEBUG === 'true'
+    this.isEnabled = this.isDev && this.debugEnabled
+  }
+}
+```
+
+## メリット
+
+✅ **コード削除不要**: 機能を残したまま本番で無効化
+✅ **簡単切り替え**: env変数だけで制御
+✅ **自動化対応**: CI/CDで環境別自動ビルド可能
+✅ **デバッグ容易**: 必要時に即座に有効化可能
+
+## 本番デプロイチェックリスト
+
+- [ ] `.env.production`でTestUI無効化確認
+- [ ] `.env.production`でデバッグ無効化確認  
+- [ ] 本番ビルドでTestボタン非表示確認
+- [ ] 本番でconsole.log出力なし確認
\ No newline at end of file
diff --git a/oauth_new/PROGRESS.md b/oauth_new/PROGRESS.md
new file mode 100644
index 0000000..7720411
--- /dev/null
+++ b/oauth_new/PROGRESS.md
@@ -0,0 +1,120 @@
+# OAuth Comment System 開発進捗 - 2025-06-18
+
+## 今日完了した項目
+
+### ✅ UI改善とスタイリング
+1. **ヘッダータイトル削除**: "ai.log"タイトルを削除
+2. **ログインボタンアイコン化**: テキストからBlueskyアイコン `<i class="fab fa-bluesky"></i>` に変更
+3. **Ask AIボタン削除**: 完全に削除
+4. **Testボタン移動**: ページ下部に移動、テキストを小文字に変更
+5. **検索バーレイアウト適用**: 認証セクションに検索バーUIパターンを適用
+6. **ボーダー削除**: 複数の要素からborder-top, border-bottom削除
+7. **ヘッダースペーシング修正**: 左側の余白問題を解決
+8. **CSS競合解決**: クラス名に`oauth-`プレフィックス追加でailogサイトとの競合回避
+9. **パディング統一**: `padding: 20px 0` に統一（デスクトップ・モバイル共通）
+
+### ✅ 機能実装
+1. **テスト用UI作成**: OAuth認証不要のputRecord機能実装
+2. **JSONビューワー追加**: コメント表示にshow/hideボタン追加
+3. **削除機能追加**: OAuth認証ユーザー用のdeleteボタン実装
+4. **動的アバター取得**: 壊れたアバターURL対応のフォールバック機能
+5. **ブラウザ動作確認**: 全機能の動作テスト完了
+
+### ✅ 技術的解決
+1. **DID処理改善**: テスト用の偽DITエラー修正
+2. **Handle処理修正**: 自動`.bsky.social`追加削除
+3. **セッション管理**: createSession機能の修正
+4. **アバターキャッシュ**: 動的取得とキャッシュ機能実装
+
+## 現在の技術構成
+
+### フロントエンド
+- **React + Vite**: モダンなSPA構成
+- **ATProto OAuth**: Bluesky認証システム
+- **アバター管理**: 動的取得・フォールバック・キャッシュ
+- **レスポンシブデザイン**: モバイル・デスクトップ対応
+
+### バックエンド連携
+- **ATProto API**: PDS通信
+- **Collection管理**: `ai.syui.log.chat.comment`等のレコード操作
+- **DID解決**: Handle → DID → PDS → Profile取得
+
+### CSS設計
+- **Prefix命名**: `oauth-`で競合回避
+- **統一パディング**: `20px 0`でレイアウト統一
+- **ailogスタイル継承**: 親サイトとの一貫性保持
+
+## ファイル構成
+
+```
+oauth_new/
+├── src/
+│   ├── App.jsx                 # メインアプリケーション
+│   ├── App.css                 # 統一スタイル（oauth-プレフィックス）
+│   ├── components/
+│   │   ├── AuthButton.jsx      # Blueskyアイコン認証ボタン
+│   │   ├── CommentForm.jsx     # コメント投稿フォーム
+│   │   ├── CommentList.jsx     # コメント一覧表示
+│   │   └── TestUI.jsx          # テスト用UI
+│   └── utils/
+│       └── avatarFetcher.js    # アバター動的取得
+├── dist/                       # ビルド成果物
+├── build-minimal.js            # 最小化ビルドスクリプト
+└── PROGRESS.md                 # 本ファイル
+```
+
+## 残存課題・継続開発項目
+
+### 🔄 現在進行中
+- 特になし（基本機能完成）
+
+### 📋 今後の拡張予定
+1. **AI連携強化**
+   - ai.gptとの統合
+   - AIコメント自動生成
+   - 心理分析機能統合
+
+2. **パフォーマンス最適化**
+   - バンドルサイズ削減（現在1.2MB）
+   - 動的インポート実装
+   - キャッシュ戦略改善
+
+3. **機能拡張**
+   - リアルタイム更新
+   - 通知システム
+   - モデレーション機能
+   - 多言語対応
+
+4. **ai.log統合**
+   - 静的ブログジェネレーター連携
+   - 記事別コメント管理
+   - SEO最適化
+
+### 🎯 次回セッション予定
+1. ai.gpt連携の詳細設計
+2. パフォーマンス最適化
+3. ai.log本体との統合テスト
+
+## 技術メモ
+
+### 重要な解決方法
+- **CSS競合**: `oauth-`プレフィックスで名前空間分離
+- **アバター問題**: 3段階フォールバック（record → fresh fetch → fallback）
+- **認証フロー**: session管理とDID-based認証
+- **レスポンシブ**: 統一パディングでシンプル化
+
+### 設定ファイル連携
+- `./my-blog/config.toml`: ブログ設定
+- `./oauth/.env.production`: OAuth設定
+- `~/.config/syui/ai/log/config.json`: システム設定
+
+## 成果物
+
+✅ **完全に動作するOAuthコメントシステム**
+- ATProto認証
+- コメント投稿・表示・削除
+- アバター表示
+- JSON詳細表示
+- テスト機能
+- レスポンシブデザイン
+- ailogサイトとの統合準備完了
\ No newline at end of file
diff --git a/oauth_new/src/App.jsx b/oauth_new/src/App.jsx
index a0ea6e2..8b64c75 100644
--- a/oauth_new/src/App.jsx
+++ b/oauth_new/src/App.jsx
@@ -17,6 +17,10 @@ export default function App() {
   const pageContext = usePageContext()
   const [showAskAI, setShowAskAI] = useState(false)
   const [showTestUI, setShowTestUI] = useState(false)
+  
+  // Environment-based feature flags
+  const ENABLE_TEST_UI = import.meta.env.VITE_ENABLE_TEST_UI === 'true'
+  const ENABLE_DEBUG = import.meta.env.VITE_ENABLE_DEBUG === 'true'
 
   // Event listeners for blog communication
   useEffect(() => {
@@ -153,20 +157,22 @@ export default function App() {
             }}
           />
 
-          {showTestUI && (
+          {ENABLE_TEST_UI && showTestUI && (
             <div className="test-section">
               <TestUI />
             </div>
           )}
 
-          <div className="bottom-actions">
-            <button
-              onClick={() => setShowTestUI(!showTestUI)}
-              className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
-            >
-              {showTestUI ? 'close test' : 'test'}
-            </button>
-          </div>
+          {ENABLE_TEST_UI && (
+            <div className="bottom-actions">
+              <button
+                onClick={() => setShowTestUI(!showTestUI)}
+                className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
+              >
+                {showTestUI ? 'close test' : 'test'}
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/oauth_new/src/utils/logger.js b/oauth_new/src/utils/logger.js
index 013d77d..5fb284c 100644
--- a/oauth_new/src/utils/logger.js
+++ b/oauth_new/src/utils/logger.js
@@ -2,7 +2,8 @@
 class Logger {
   constructor() {
     this.isDev = import.meta.env.DEV || false
-    this.isEnabled = this.isDev // Only enable in development
+    this.debugEnabled = import.meta.env.VITE_ENABLE_DEBUG === 'true'
+    this.isEnabled = this.isDev && this.debugEnabled // Enable only in dev AND when debug flag is true
   }
 
   log(...args) {
@@ -76,6 +77,6 @@ class Logger {
 export const logger = new Logger()
 
 // 開発環境でのみグローバルアクセス可能にする
-if (import.meta.env.DEV) {
+if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_DEBUG === 'true') {
   window._logger = logger
 }
\ No newline at end of file