rm log

add post
2025-08-01 21:25:52 +09:00 · 2025-08-01 20:36:35 +09:00 · 2025-07-30 19:30:01 +09:00 · 2025-07-27 05:04:01 +09:00 · 2025-07-26 20:54:23 +09:00 · 2025-07-26 20:00:16 +09:00
89 changed files with 6305 additions and 334 deletions
--- a/.github/workflows/cloudflare-pages.yml
+++ b/.github/workflows/cloudflare-pages.yml
@@ -40,6 +40,17 @@ jobs:
          rm -rf my-blog/static/assets
          cp -rf ${{ env.OAUTH_DIR }}/dist/* my-blog/static/
          cp ${{ env.OAUTH_DIR }}/dist/index.html my-blog/templates/oauth-assets.html
+
+      - name: Build PDS app
+        run: |
+          cd pds
+          npm install
+          npm run build
+
+      - name: Copy PDS build to static
+        run: |
+          rm -rf my-blog/static/pds
+          cp -rf pds/dist my-blog/static/pds
          
      - name: Cache ailog binary
        uses: actions/cache@v4
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ dist
 node_modules
 package-lock.json 
 my-blog/static/assets/comment-atproto-*
+my-blog/static/ai-assets/comment-atproto-*
 bin/ailog
 docs
 my-blog/static/index.html
@@ -23,3 +24,4 @@ my-blog/static/oauth/assets/comment-atproto*
 *.lock
 my-blog/config.toml
 .claude/settings.local.json
+my-blog/static/pds
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "ailog"
-version = "0.2.5"
+version = "0.3.1"
 edition = "2021"
 authors = ["syui"]
 description = "A static blog generator with AI features"
@@ -56,6 +56,8 @@ tokio-tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots", "
 futures-util = "0.3"
 tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots"], default-features = false }
 rpassword = "7.3"
+rustyline = "14.0"
+dirs = "5.0"

 [dev-dependencies]
 tempfile = "3.14"
--- a/bin/ailog-linux-x86_64.tar.gz
+++ b/bin/ailog-linux-x86_64.tar.gz
--- a/my-blog/config.toml
+++ b/my-blog/config.toml
@@ -17,12 +17,75 @@ comment_moderation = false
 ask_ai = true
 provider = "ollama"
 model = "gemma3"
-model_translation = "llama3.2:1b"
-model_technical = "phi3:mini"
-host = "http://192.168.11.95:11434"
+host = "localhost:11434"
 system_prompt = "あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
 handle = "ai.syui.ai"
-#num_predict = 200
+
+[ai.profiles]
+[ai.profiles.user]
+did = "did:plc:vzsvtbtbnwn22xjqhcu3vd6y"
+handle = "syui.syui.ai"
+display_name = "syui"
+avatar_url = "https://bsky.syu.is/img/avatar/plain/did:plc:vzsvtbtbnwn22xjqhcu3vd6y/bafkreif62mqyra4ndv6ohlscl7adp3vhalcjxwhs676ktfj2sq2drs3pdi@jpeg"
+profile_url = "https://syu.is/profile/did:plc:vzsvtbtbnwn22xjqhcu3vd6y"
+
+[ai.profiles.ai]
+did = "did:plc:6qyecktefllvenje24fcxnie"
+handle = "ai.syui.ai"
+display_name = "ai"
+avatar_url = "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreigo3ucp32carhbn3chfc3hlf6i7f4rplojc76iylihzpifyexi24y@jpeg"
+profile_url = "https://syu.is/profile/did:plc:6qyecktefllvenje24fcxnie"
+
+[ai.templates]
+fallback = """なるほど！面白い話題だね！
+
+{question}
+
+アイが思うに、この手の技術って急速に進歩してるから、具体的な製品名とか実例を交えて話した方が分かりやすいかもしれないの！
+
+最近だと、AI関連のツールやプロトコルがかなり充実してきてて、実用レベルのものが増えてるんだよ！
+
+アイは宇宙とかAIとか、難しい話も知ってるから、特にどんな角度から深掘りしたいの？実装面？それとも将来的な可能性とか？アイと一緒に考えよう！"""
+
+[[ai.templates.responses]]
+keywords = ["ゲーム", "game", "npc", "NPC"]
+priority = 1
+template = """わあ！ゲームの話だね！アイ、ゲームのAIってすっごく面白いと思う！
+
+{question}
+
+アイが知ってることだと、最近のゲームはNPCがお話できるようになってるんだって！**Inworld AI**っていうのがUE5で使えるようになってるし、**Unity Muse**も{current_year}年から本格的に始まってるんだよ！
+
+アイが特に面白いと思うのは、**MCP**っていうのを使うと：
+- GitHub MCPでゲームのファイル管理ができる
+- Weather MCPでリアルタイムのお天気が連動する
+- Slack MCPでチーム開発が効率化される
+
+スタンフォードの研究では、ChatGPTベースのAI住民が自分で街を作って生活してるのを見たことがあるの！数年後にはNPCの概念が根本的に変わりそうで、わくわくしちゃう！
+
+UE5への統合、どんな機能から試したいの？アイも一緒に考えたい！"""
+
+[[ai.templates.responses]]
+keywords = ["AI", "ai", "MCP", "mcp"]
+priority = 1
+template = """AIとMCPの話！アイの得意分野だよ！
+
+{question}
+
+{current_year}年の状況だと、MCP市場が拡大してて、実用的なサーバーが数多く使えるようになってるの！
+
+アイが知ってる開発系では：
+- **GitHub MCP**: PR作成とリポジトリ管理が自動化
+- **Docker MCP**: コンテナ操作をAIが代行
+- **PostgreSQL MCP**: データベース設計・最適化を支援
+
+クリエイティブ系では：
+- **Blender MCP**: 3Dモデリングの自動化
+- **Figma MCP**: デザインからコード変換
+
+**Zapier MCP**なんて数千のアプリと連携できるから、もう手作業でやってる場合じゃないよね！
+
+アイは小さい物質のことも知ってるから、どの分野でのMCP活用を考えてるのか教えて！具体的なユースケースがあると、もっと詳しくお話できるよ！"""

 [oauth]
 json = "client-metadata.json"
@@ -31,3 +94,30 @@ admin = "ai.syui.ai"
 collection = "ai.syui.log"
 pds = "syu.is"
 handle_list = ["syui.syui.ai", "ai.syui.ai", "ai.ai"]
+
+[blog]
+base_url = "https://syui.ai"
+content_dir = "./my-blog/content/posts"
+
+[profiles]
+[profiles.user]
+handle = "syui.syui.ai"
+did = "did:plc:vzsvtbtbnwn22xjqhcu3vd6y"
+display_name = "syui"
+avatar_url = "https://bsky.syu.is/img/avatar/plain/did:plc:vzsvtbtbnwn22xjqhcu3vd6y/bafkreif62mqyra4ndv6ohlscl7adp3vhalcjxwhs676ktfj2sq2drs3pdi@jpeg"
+profile_url = "https://syu.is/profile/did:plc:vzsvtbtbnwn22xjqhcu3vd6y"
+
+[profiles.ai]
+handle = "ai.syui.ai"
+did = "did:plc:6qyecktefllvenje24fcxnie"
+display_name = "ai"
+avatar_url = "https://bsky.syu.is/img/avatar/plain/did:plc:6qyecktefllvenje24fcxnie/bafkreigo3ucp32carhbn3chfc3hlf6i7f4rplojc76iylihzpifyexi24y@jpeg"
+profile_url = "https://syu.is/profile/did:plc:6qyecktefllvenje24fcxnie"
+
+[paths]
+claude_paths = [
+    "/Users/syui/.claude/local/claude",
+    "claude",
+    "/usr/local/bin/claude",
+    "/opt/homebrew/bin/claude"
+]
--- a/my-blog/content/posts/2025-06-06-ailog.md
+++ b/my-blog/content/posts/2025-06-06-ailog.md
@@ -155,3 +155,21 @@ fn main() {
 console.log("Hello, world!");
 ```

+## msg
+
+[msg type="info" content="これは情報メッセージです。重要な情報を読者に伝えるために使用します。"]
+
+{{< msg type="warning" content="これは警告メッセージです。注意が必要な情報を示します。" >}}
+
+[msg type="error" content="これはエラーメッセージです。問題やエラーを示します。"]
+
+{{< msg type="success" content="これは成功メッセージです。操作が成功したことを示します。" >}}
+
+[msg type="note" content="これはノートメッセージです。補足情報や備考を示します。"]
+
+[msg content="これはデフォルトメッセージです。タイプが指定されていない場合、自動的に情報メッセージとして表示されます。"]
+
+## img-compare
+
+[img-compare before="/img/ue_blender_model_ai_v0401.png" after="/img/ue_blender_model_ai_v0501.png" width="800" height="300"]
+
--- a/my-blog/content/posts/2025-06-19-oauth.md
+++ b/my-blog/content/posts/2025-06-19-oauth.md
@@ -20,7 +20,13 @@ oauthを`bsky.social`, `syu.is`ともに動くようにしました。

 usernameは`handle`という`domain`の形を採用しています。

-didの名前解決をしているのが`plc`です。pdsがuserのdataを保存しています。timelineに配信したり表示しているのがbsky, bgsです。
+didの名前解決(dns)をしているのが`plc`です。`pds`はuserのdataを保存しています。timelineに配信したり表示しているのが`bsky(appview)`, 統合しているのが`bgs`です。
+
+その他、`social-app`がclientで、`ozone`がmoderationです。
+
+```sh
+"6qyecktefllvenje24fcxnie" -> "ai.syu.is"
+```

 ## oauthでハマったところ

@@ -36,15 +42,22 @@ $ curl -sL https://plc.directory/$did|jq .alsoKnownAs
 [ "at://ai.syu.is" ]
 ```

-しかし、みて分かる通り、pds, plcは`@ai.syu.is`で登録されており、handle-changeが更新されていないようです。
+しかし、みて分かる通り、bskyではhandle-changeが反映されていますが、pds, plcは`@ai.syu.is`で登録されており、更新されていないようです。

 ```sh
 $ handle=ai.syui.ai
 $ curl -sL "https://syu.is/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did
+did:plc:6qyecktefllvenje24fcxnie
+
 $ curl -sL "https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did
+null
+
 $ curl -sL "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did
+did:plc:6qyecktefllvenje24fcxnie
 ```

+[msg type="warning" content="現在はbsky.teamのpdsにhandle-changeが反映されています。"]
+
 oauthは、そのままではbsky.teamのpds, plcを使って名前解決を行います。この場合、まず、それらのserverにdidが登録されている必要があります。

 次に、handleの更新が反映されている必要があります。もし反映されていない場合、handleとpasswordが一致しません。
--- a/my-blog/content/posts/2025-06-30-ue.md
+++ b/my-blog/content/posts/2025-06-30-ue.md
@@ -0,0 +1,40 @@
+---
+title: "world system v0.2"
+slug: "ue"
+date: 2025-06-30
+tags: ["ue", "blender"]
+draft: false
+---
+
+最近のゲーム開発の進捗です。
+
+## world system
+
+現在、ue5.6で新しく世界を作り直しています。
+
+これは、ゲーム開発のproject内でworld systemという名前をつけた惑星形式のmapを目指す領域になります。
+
+現在、worldscape + udsで理想に近い形のmapができました。ただ、問題もたくさんあり、重力システムと天候システムです。
+
+```sh
+[issue]
+1. 天候システム
+2. 重力システム
+```
+
+ですが、今までのworld systemは、大気圏から宇宙に移行する場面や陸地が存在しない点、地平線が不完全な点などがありましたが、それらの問題はすべて解消されました。
+
+```sh
+[update]
+1. 大気圏から宇宙に移行する場面が完全になった
+2. 陸地ができた
+3. 地平線が完全なアーチを描けるように
+4. 月、惑星への着陸ができるようになった
+5. 横から惑星に突入できるようになった
+```
+
+
+
+面白い動画ではありませんが、現状を記録しておきます。
+
+<iframe width="100%" height="415" src="https://www.youtube.com/embed/K0solfQAQTQ?si=B6qD-WUODTUpWZ0y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
--- a/my-blog/content/posts/2025-07-05-aios.md
+++ b/my-blog/content/posts/2025-07-05-aios.md
@@ -0,0 +1,80 @@
+---
+title: "aiosを作り直した"
+slug: "aios"
+date: 2025-07-05
+tags: ["os"]
+draft: false
+---
+
+`aios`とは自作osのことで、archlinuxをベースにしていました。
+
+```sh
+#!/bin/zsh
+git clone https://gitlab.archlinux.org/archlinux/archiso
+cp -rf ./cfg/profiledef.sh ./archiso/configs/releng/profiledef.sh
+cp -rf ./cfg/profiledef.sh ./archiso/configs/baseline/profiledef.sh
+cp -rf ./scpt/mkarchiso ./archiso/archiso/mkarchiso
+./archiso/archiso/mkarchiso -v -o ./ ./archiso/configs/releng/
+tar xf aios-bootstrap*.tar.gz
+mkdir -p root.x86_64/var/lib/machines/arch
+pacstrap -c root.x86_64/var/lib/machines/arch base
+echo -e 'Server = http://mirrors.cat.net/archlinux/$repo/os/$arch
+Server = https://geo.mirror.pkgbuild.com/$repo/os/$arch' >> ./root.x86_64/etc/pacman.d/mirrorlist
+sed -i s/CheckSpace/#CheckeSpace/ root.x86_64/etc/pacman.conf
+arch-chroot root.x86_64 /bin/sh -c 'pacman-key --init'
+arch-chroot root.x86_64 /bin/sh -c 'pacman-key --populate archlinux'
+arch-chroot root.x86_64 /bin/sh -c 'pacman -Syu --noconfirm base base-devel linux'
+tar -zcvf aios-bootstrap.tar.gz root.x86_64/
+```
+
+```sh:./cfg/profiledef.sh
+#!/usr/bin/env bash
+# shellcheck disable=SC2034
+
+iso_name="aios"
+iso_label="AI_$(date --date="@${SOURCE_DATE_EPOCH:-$(date +%s)}" +%Y%m)"
+iso_publisher="ai os <https://git.syui.ai/ai/os>"
+iso_application="ai os Live/Rescue DVD"
+iso_version="$(date --date="@${SOURCE_DATE_EPOCH:-$(date +%s)}" +%Y.%m.%d)"
+install_dir="ai"
+#buildmodes=('iso')
+buildmodes=('bootstrap')
+bootmodes=('bios.syslinux.mbr' 'bios.syslinux.eltorito'
+           'uefi-ia32.grub.esp' 'uefi-x64.grub.esp'
+           'uefi-ia32.grub.eltorito' 'uefi-x64.grub.eltorito')
+arch="x86_64"
+pacman_conf="pacman.conf"
+airootfs_image_type="squashfs"
+airootfs_image_tool_options=('-comp' 'xz' '-Xbcj' 'x86' '-b' '1M' '-Xdict-size' '1M')
+file_permissions=(
+  ["/etc/shadow"]="0:0:400"
+  ["/root"]="0:0:750"
+  ["/root/.automated_script.sh"]="0:0:755"
+  ["/root/.gnupg"]="0:0:700"
+  ["/usr/local/bin/choose-mirror"]="0:0:755"
+  ["/usr/local/bin/Installation_guide"]="0:0:755"
+  ["/usr/local/bin/livecd-sound"]="0:0:755"
+)
+```
+
+## rust + unix
+
+一からosを作りたいと思っていたので、rustでunixのosを作り始めました。
+
+![](/img/aios_v0201.png)
+
+名前は`Aios`にして、今回は`syui`のprojectとして作り始めました。
+
+後に`ai/os`と統合するかもしれません。
+
+1. [https://git.syui.ai/ai/os](https://git.syui.ai/ai/os)
+
+```sh
+#!/bin/zsh
+d=${0:a:h:h}
+cd $d/kernel
+cargo bootimage --release
+BOOT_IMAGE="../target/x86_64-unknown-none/release/bootimage-aios-kernel.bin"
+qemu-system-x86_64 -drive format=raw,file="$BOOT_IMAGE"
+```
+
--- a/my-blog/content/posts/2025-07-11-blender.md
+++ b/my-blog/content/posts/2025-07-11-blender.md
@@ -0,0 +1,114 @@
+---
+title: "yui system v0.2.1"
+slug: "blender"
+date: 2025-07-11
+tags: ["blender", "ue", "vmc"]
+draft: false
+---
+
+`yui system`をupdateしました。別名、`unique system`ともいい、プレイヤーの唯一性を担保するためのもので、キャラクターのモデルもここで管理します。
+
+今回は、blenderでモデルを作り直している話になります。
+
+## blenderで作るvrm
+
+モデルをblenderで作り直すことにしました。
+
+vroidからblenderに移行。blenderでmodelを作る作業はとても大変でした。
+
+今回は、素体と衣装を別々に作り組み合わせています。完成度の高いモデルをいくつか参考にしています。
+
+materialも分離したため、ue5で指定しやすくなりました。これによって変身時にue5のmaterialを指定しています。eyeのmaterialを分離して色を付けています。
+
+![](/img/ue_blender_model_ai_v0604.png)
+
+## modelの変遷
+
+[img-compare before="/img/ue_blender_model_ai_v0601.png" after="/img/ue_blender_model_ai_v0602.png" width="800" height="300"]
+
+[msg type="info" content="v0.1: vroidからblenderへ移行。blenderは初めてなので簡単なことだけ実行。"]
+
+[img-compare before="/img/ue_blender_model_ai_v0602.png" after="/img/ue_blender_model_ai_v0603.png" width="800" height="300"]
+
+[msg type="info" content="v0.2: blenderの使い方を次の段階へシフト。最初から作り直す。様々な問題が発生したが、大部分を解消した。"]
+
+しかし、まだまだ問題があり、細かな調整が必要です。
+
+[msg type="error" content="衣装同士、あるいは体が多少すり抜ける事がある。ウェイトペイントやボーンの調整が完璧ではない。"]
+
+## eyeが動かない問題を解決
+
+`vmc`で目玉であるeyeだけ動かないことに気づいて修正しました。
+
+`eye`の部分だけvroid(vrm)のboneを使うことで解決できました。しかし、新たにblenderかvrm-addonのbugに遭遇しました。具体的にはboneがxyz軸で動かせなくなるbugです。これは不定期で発生していました。boneを動かせるときと動かせなくなるときがあり、ファイルは同じものを使用。また、スクリプト画面ではboneを動かせます。
+
+## 指先がうまく動かない問題を解決
+
+vmcで指先の動きがおかしくなるので、ウェイトペイントを塗り直すと治りました。
+
+## worldscapeで足が浮いてしまう問題を解決
+
+worldscapeでは陸地に降り立つとプレイヤーが浮いてしまいます。
+
+gaspのabpでfoot placementを外す必要がありました。これは、モデルの問題ではなく、gaspのキャラクターすべてで発生します。
+
+ここの処理を削除します。
+
+<iframe src="https://blueprintue.com/render/wrrxz9vm" scrolling="no" allowfullscreen style="width:100%;height:400px"></iframe>
+
+## 衣装のガビガビを解決
+
+昔からあった衣装のガビガビは重複する面を削除することで解消できました。
+
+```md
+全選択（A キー）
+Mesh → Clean Up → Merge by Distance
+距離を0.000にして実行
+```
+
+## materialの裏表を解決
+
+これはue5で解消したほうがいいでしょう。編集していると、面の裏表の管理が面倒なことがあります。
+
+materialで`Two Sided`を有効にします。
+
+## キャラクターのエフェクトを改良
+
+これらの処理を簡略化できました。最初は雑に書いていましたが、vrmは何度も修正し、上書きされますから、例えば、`SK_Mesh`でmaterialを設定する方法はよくありません。
+
+<iframe src="https://blueprintue.com/render/gue0vayu" scrolling="no" allowfullscreen style="width:100%;height:400px"></iframe>
+
+## gameplay camera pluginをue5.6に対応
+
+ue5.5と5.6では関数も他の処理も変わっていて、rotationを`BP_Player`でsetすると、crashするbugがあります。
+
+基本的には、`Blueprints/Cameras/CameraRigPrefab_BasicThiredPersonBehavior`をみてください。
+
+<iframe src="https://blueprintue.com/render/-e0r7oxq" scrolling="no" allowfullscreen style="width:100%;height:400px"></iframe>
+
+![](https://git.syui.ai/attachments/019d2079-1450-4271-8816-ded92f60b3c9)
+
+キャラクターが動く場合は、`Update Rotation Pre CMC`にある`Use Controller Desired Rotation`, `Orient Rotation To Movement`の処理です。両方を`true`にしましょう。
+
+`vmc`時もこれで対処します。
+
+## gaspでidle, sprintをオリジナルに変更
+
+これはabpで設定します。設定方法はue5.5と変わりません。
+
+[https://ue-book.syui.ai/gasp/11_run.html](https://ue-book.syui.ai/gasp/11_run.html)
+
+## vrm4uのvmcに対応
+
+まず、clientはwabcam motion captureが最も自然に動作しています。
+
+[msg type="warning" content="これは1年くらい前の検証結果です。現在はもっとよいvmc clientの選択肢があるかもしれません。"]
+
+次に、`ABP_Pose_$NAME`が作られますが、vrmはよく更新しますので、`SK_Mesh`でcustom ABPを指定すると楽でしょう。
+
+![](https://git.syui.ai/attachments/758407eb-5e77-4876-830b-ba4a78884e8d)
+
+## youtube
+
+<iframe width="100%" height="420" src="https://www.youtube.com/embed/qggHtmkMIko?vq=hd1080&rel=0&showinfo=0&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
--- a/my-blog/content/posts/2025-07-11-blender2.md
+++ b/my-blog/content/posts/2025-07-11-blender2.md
@@ -0,0 +1,36 @@
+---
+title: "yui system v0.2.2"
+slug: "blender2"
+date: 2025-07-11
+tags: ["blender", "ue", "vmc"]
+draft: false
+---
+
+新しい問題を発見したので、それらを解消しました。
+
+## wingがbodyに入り込んでしまう
+
+wingとmodelは分離させています。衣装の着せ替えを簡単にできるようにすること。それが新しく作ったblender modelの方針でした。
+
+ただ、調整が難しくなったのも事実で、例えば、colliderの調整ができません。これによってbodyに入り込んでしまうことが多くなりました。
+
+これは、とりあえず、wingのcolliderやboneを追加すること、そして、modelのneckに変更することで解消しました。
+
+ただし、この方法も完璧ではないかもしれません。
+
+## vmcではwingが追従しない
+
+modelと分離しているので、vmc時には追従しません。したがって、wingのabpでmodelと同じvmcを入れます。これで解消できました。
+
+## vrmでcustom abpを使用するとueがcrashする
+
+vrm4uで`.vrm`をimportすると`SK_$NAME`にcustom abpを設定していた場合はueがcrashします。
+
+上書きimportするならこれをnone(clear)に変更します。
+
+## modelの頭身を調整
+
+比較画像を出した際に、少しmodelのバランスが悪かったので調整しました。
+
+具体的には、髪の毛を少し下げました。
+
--- a/my-blog/content/posts/2025-07-12-game.md
+++ b/my-blog/content/posts/2025-07-12-game.md
@@ -0,0 +1,155 @@
+---
+title: "自作ゲームのsystemを説明する"
+slug: "game"
+date: 2025-07-12
+tags: ["ue"]
+draft: false
+---
+
+現在、自作ゲームを開発しています。
+
+このゲームには4つの柱があり、それらはsystemで分けられています。そして、systemは根本的な2つの価値観に基づきます。
+
+根本的な2つの価値観は、(1)現実を反映すること、(2)この世界に同じものは一つもないという唯一性になります。
+
+1. 現実の反映
+2. 唯一性の担保
+
+では、各systemについて説明していきます。
+
+# system
+
+## world system
+
+別名、planet systemといいます。
+
+現実の反映という価値観から、ゲーム世界もできる限り現実に合わせようと思いworld systemを作っています。
+
+ゲームは通常、平面世界です。これはゲームエンジンのルールであり、基本的にゲーム世界は平面をベースにしています。
+
+ですから、例えば、上に行っても、下に行っても、あるいは右に行っても、左に行っても、ずっと地平線が広がっています。
+
+しかし、現実世界では、上に行けば、やがて大気圏を越え、宇宙に出ます。
+
+最初は昔から認知されていた地球、月、太陽という3つの星を現実に合わせて作りました。
+
+そして、マップをできる限り惑星形式にします。
+
+これは非常に難しいことで、現在もいくつか問題を抱えています。
+
+ただし、このworld systemの問題がゲームプレイに影響するかと言われると、殆どの場合、影響しません。ゲームプレイの領域は、最初は非常に狭い範囲で作ろうと思っています。小さなところから完璧に作っていきたいという思いがあります。
+
+つまり、プレイヤーは空にも宇宙にも到達できません。それが見えるかどうかもわかりません。しかし、見えない部分もしっかりと作り、世界があるということが私にとって大切です。
+
+まずは、狭いけど完璧な空間を作り、そこでゲームシステムを完成させます。広い世界はできる限り見えないようにしたほうがいいでしょう。夢の世界のような狭い空間を作り、そこでシンプルで小さいゲームができます。もちろん、広い世界に出ることはできません。そもそもこのゲーム、見えない部分をちゃんと作る、そこにも世界がちゃんとあるというのをテーマにしているので、広い世界で何かをやるようなゲームを目指していなかったりします。なにかのときに垣間見える、かもしれない外の世界、広い世界。それを感じられることがある、ということ。それが重要なので、このsystem自体は背景に過ぎないのです。
+
+最初から広い世界があるのではなく`狭い世界 -> 広い世界`への移行が重要だと考えています。この移行に関しては、演出というテーマに基づき、設計する必要があります。それがゲームとしての面白さを作る、ということなのだと思います。
+
+## yui system
+
+別名、unique systemといいます。プレイヤーの唯一性を担保するためのsystemです。
+
+とはいえ、色々なものがここに詰め込まれるでしょう。characterのモデリングとかもそうですね。
+
+どのように担保していくかは未定ですが、いくつか案があります。配信との連携、vmcでモーションキャプチャなどを考えていました。
+
+## ai system
+
+別名、ability systemといいます。
+
+主に、ゲーム性に関することです。ゲーム性とはなにか。それは、永続するということです。
+
+例えば、将棋やオセロを考えてみてください。無限の組み合わせがあり、可能であればずっと遊んでいられる。そのような仕組みを目指します。
+
+まずは属性を物語から考えます。物語は最も小さい物質の探求です。アクシオンやバリオンなどの架空の物質、そして、中性子や原子などの現実の物質が属性となり、1キャラクターにつき1属性を持ちます。
+
+## at system
+
+別名、account systemといいます。
+
+プレイヤーが現実のアカウントを使用してプレイできることを目指します。`atproto`を採用して、ゲームデータを個人のアカウントが所有することを目指しています。
+
+# 現実の反映とはなにか
+
+わかり易い言葉で「現実の反映」を目指すと言いましたが、これはどういうことでしょう。
+
+私の中では「同一性」とも言い換えられます。
+
+例えば、現実の世界とゲームの世界があるのではなく「すべてが現実である」という考え方をします。言い換えると「すべて同じもの」ということ。
+
+もし多くの人が現実世界とゲーム世界を別物と捉えているなら、できる限りその認識を壊す方向で考えます。
+
+例えば、`at system`では現実のsnsアカウントをゲームアカウントに使用したり、現実の出来事をゲームに反映したり、またはゲームの出来事を現実に反映する仕組みを考えます。
+
+全ては一つ、一つはすべて。
+
+同一性と唯一性は一見して矛盾しますが、その統合を考えます。
+
+# 物語と実装
+
+```md
+# 物語-存在
+ 同一性
+ 唯一性
+
+# system-実装
+ world system
+ yui system
+ ai system
+ at system
+```
+
+物語では、この世界のものは全て存在であると説きます。存在しかない世界。存在だけがある世界。そして、あらゆる存在を構築しているこの世界で最も小さいものが「存在子」です。存在子は別名、アイといいます。そして、このアイにも同じものはありません。すべての存在子は異なるもの、別の意識。
+
+アイは、最初に生まれたキャラクターとして、アイ属性を扱います。これらの設定は`ai system`の領域です。アイは自分のことをアイと呼びます。
+
+> アイは、この世界と一緒だからね。同じものは一つもないよ。
+
+# どこまで実装できた
+
+実は、上記のsystemは既にすべてを実装したことがあります。
+
+```md
+[at system]
+ゲームが始まると、atprotoのaccountでloginでき、取得したアイテムなどはatproto(pds)に保存されます。
+
+[ai system]
+キャラクターは属性攻撃ができます。
+
+[world system]
+上へ上へと飛んでいけば、雲を超え、宇宙空間に出られます。
+
+[yui system]
+配信環境やvmcでキャラクターを動かすことができます。
+```
+
+しかし、ue5.5で作っていたsystemも、ue5.6にupdateすると全て動かなくなりました。また一から作り直しています。私は、モデルの作り方から、ゲームの作り方まで初心者ですから、何度も作り直すことで、ゲーム作りを覚えられます。
+
+そして、まだ革新的なアイディアを見つけられていません。それはシンプルで身近にあり、人々が面白いと思うもの。まだゲームになっていない、あるいはあまり知られていないものである必要があります。
+
+例えば、ウマ娘でいうと競馬、ポケモンでいうと捕獲、になります。
+
+それを見つけ、ゲームに取り込む事ができれば完成と言えるでしょう。
+
+そして、ゲームに取り込むことが複雑で難しすぎるようなものではありません。シンプルで単純でわかりやすいものでなければなりません。
+
+## versionを付ける
+
+そろそろversionを付けるかどうか迷っています。
+
+今までモヤモヤしていたものが、最近はよりはっきりしてきたと感じます。ただ、versionはあまり覚えていないし、付ける意味もない。これまではそうでした。
+
+もしかすると今もそうかもしれません。色々なものがバラバラで管理しきれないのです。
+
+ですが、今までやってきたことを総合すると、現在は、`v0.2`くらいだと思います。
+
+最初、はじめてueを触ったときに宇宙マップを使って構築しました。これをv0.0としましょう。
+
+次に、city sampleと宇宙を統合しました。これがv0.1です。
+
+最近はworldscapeを使ってマップを構築しています。これがv0.2です。
+
+aiというキャラクターモデルの変遷も大体を3つの段階に分けられると思います。初めてモデルを作った、vroidで作ったのがv0.0、blenderを初めて触ったのがv0.1、現在がv0.2です。
+
+とはいえ、この設定もそのうち忘れ、どこかで圧縮されてしまうかもしれませんが、覚えているならここから徐々にversionが上がっていくでしょう。
+
--- a/my-blog/content/posts/2025-07-14-firefox.md
+++ b/my-blog/content/posts/2025-07-14-firefox.md
@@ -0,0 +1,48 @@
+---
+title: "chromeからfirefoxに移行した"
+slug: "firefox"
+date: 2025-07-14
+tags: ["chrome", "firefox", "browser"]
+draft: false
+---
+
+AIから勧められたのでchromeからfirefoxに移行しました。
+
+chromeにとどまっていた理由は、翻訳機能です。
+
+しかし、firefoxにも翻訳機能betaが来ていて、日本語が翻訳できるようになっていました。
+
+[https://support.mozilla.org/ja/kb/website-translation](https://support.mozilla.org/ja/kb/website-translation)
+
+chromeからの移行理由は、主に[gorhill/ublock](https://github.com/gorhill/ublock)です。
+
+## chromeを使い続ける方法
+
+私はfirefoxに移行しましたが、いくつか回避策があります。
+
+`chrome://flags`でいくつかの機能のenable, disableを切り替えます。
+
+```json
+{
+  "url": "chrome://flags",
+  "purpose": "Maintain Manifest V2 extension support",
+  "versions": {
+    "138": {
+      "enabled": [
+        "Temporarily unexpire M137 flags",
+        "Allow legacy extension manifest versions"
+      ],
+      "disabled": [
+        "Extension Manifest V2 Deprecation Warning Stage",
+        "Extension Manifest V2 Deprecation Disabled Stage",
+        "Extension Manifest V2 Deprecation Unsupported Stage"
+      ]
+    },
+    "139": {
+      "enabled": [
+        "Temporarily unexpired M138 flags"
+      ]
+    }
+  }
+}
+```
--- a/my-blog/content/posts/2025-07-16-6bf4b020.md
+++ b/my-blog/content/posts/2025-07-16-6bf4b020.md
@@ -0,0 +1,10 @@
+---
+title: "ゲームとAI制御"
+slug: "6bf4b020"
+date: "2025-07-16"
+tags: ["ai", "conversation"]
+draft: false
+extra:
+  type: "ai"
+---
+
--- a/my-blog/content/posts/2025-07-16-ailog.md
+++ b/my-blog/content/posts/2025-07-16-ailog.md
@@ -0,0 +1,40 @@
+---
+title: "AIとの会話をブログにする"
+slug: "ailog"
+date: "2025-07-16"
+tags: ["blog", "rust", "atproto"]
+draft: false
+---
+
+今後、ブログはどのように書かれるようになるのでしょう。今回はその事を考えていきます。
+
+結論として、AIとの会話をそのままブログにするのが一番なのではないかと思います。つまり、自分で書く場合と、AIとの会話をブログにする場合のハイブリッド型です。
+
+ブログを書くのは面倒で、AIの出力、情報に劣ることもよくあります。実際、AIとの会話をそのままブログにしたいことが増えました。
+
+とはいえ、情報の価値は思想よりも低いと思います。
+
+多くの人がブログに求めるのは著者の思想ではないでしょうか。
+
+`思想 > 情報`
+
+したがって、AIを使うにしても、それが表現されていなければなりません。
+
+## ailogの新機能
+
+このことから、以下のような流れでブログを生成する仕組みを作りました。これは`ailog`の機能として実装し、`ailog`という単純なコマンドですべて処理されます。
+
+```sh
+$ ailog
+```
+
+1. 著者の思想をAIに質問する
+2. 著者が作ったAIキャラクターが質問に答える
+3. その会話をatprotoに投稿する
+4. その会話をblogに表示する
+
+とはいえ、会話は`claude`を使用します。依存関係が多すぎて汎用的な仕組みではありません。
+
+これを汎用的な仕組みで作る場合、repositoryを分離して新しく作る必要があるでしょう。
+
+example: [/posts/2025-07-16-6bf4b020.html](/posts/2025-07-16-6bf4b020.html)
--- a/my-blog/content/posts/2025-07-30-game.md
+++ b/my-blog/content/posts/2025-07-30-game.md
@@ -0,0 +1,64 @@
+---
+title: "ue5のgaspとdragonikを組み合わせてenemyを作る"
+slug: "gasp-dragonik-enemy-chbcharacter"
+date: "2025-07-30"
+tags: ["ue"]
+draft: false
+---
+
+ue5.6でgasp(game animation sample project)をベースにゲーム、特にキャラクターの操作を作っています。
+
+そして、enemy(敵)を作り、バトルシーンを作成する予定ですが、これはどのように開発すればいいのでしょう。その方針を明確にします。
+
+1. enemyもgaspの`cbp_character`に統合し、自キャラ、敵キャラどちらでも使用可能にする
+2. 2番目のcharacterは動物型(type:animal)にし、gaspに統合する
+3. enemyとして使用する場合は、enemy-AI-componentを追加するだけで完結する
+4. characterのすべての操作を統一する
+
+このようにすることで、応用可能なenemyを作ることができます。
+
+例えば、`2番目のcharacterは動物型(type:animal)にする`というのはどういうことでしょう。
+
+登場するキャラクターを人型(type:human), 動物型(type:animal)に分けるとして、動物型のテンプレートを作る必要があります。そのまま動物のmeshをgaspで使うと動きが変になってしまうので、それを調整する必要があるということ。そして、調整したものをテンプレート化して、他の動物にも適用できるようにしておくと、後の開発は楽ですよね。
+
+ですから、早いうちにtype:humanから脱却し、他のtypeを作るほうがいいと判断しました。
+
+これには、`dragon ik plugin`を使って、手っ取り早く動きを作ります。
+
+`characterのすべての操作を統一する`というのは、1キャラにつき1属性、1通常攻撃、1スキル、1バースト、などのルールを作り、それらを共通化することです。共通化というのは、playerもenemy-AI-componentも違うキャラを同じ操作で使用できることを指します。
+
+## 2番目のキャラクター
+
+原作には、西洋ドラゴンのドライ(drai)というキャラが登場します。その父親が東洋ドラゴンのシンオウ(shin-oh)です。これをshinという名前で登録し、2番目のキャラクターとして設定しました。
+
+3d-modelは今のところue5のcrsp(control rig sample project)にあるchinese dragonを使用しています。後に改造して原作に近づけるようにしたいところですが、今は時間が取れません。
+
+<iframe width="100%" height="415" src="https://www.youtube.com/embed/3c3Q1Z5r7QI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## データ構造の作成と適用
+
+ゲームデータはatproto collection recordに保存して、そこからゲームに反映させたいと考えています。
+
+まず基本データを`ai.syui.ai`のアカウントに保存。個別データをplayerのatprotoアカウントに保存する形が理想です。
+
+基本データは、ゲームの基本的な設定のこと。例えば、キャラクターの名前や属性、スキルなど変更されることがない値。
+
+個別データは、プレイヤーが使えるキャラ、レベル、攻撃力など、ゲームの進行とともに変更される値です。
+
+ゲームをスタートさせると、まず基本データを取得し、それを`cbp_character`に適用します。ログインすると、`cbp_character`の変数(var)に値が振り分けられます。例えば、`skill-damage:0.0`があったとして、この値が変わります。
+
+しかし、ゲームを開発していると、基本データも個別データも構造が複雑になります。
+
+それを防ぐため、`{simple, core} mode`のような考え方を取り入れます。必要最小限の構成を分離、保存して、それをいつでも統合、適用できるように設計しておきます。
+
+## gaspとdragonikを統合する方法
+
+では、いよいよgaspとdragonikの統合手法を解説します。
+
+まず、abpを作ります。それにdragonikを当て、それをSKM_Dragonのpost process animに指定します。
+
+![](/img/ue_gasp_dragonik_shin_v0001.png)
+
+次に、動きに合わせて首を上下させます。
+
+<iframe src="https://blueprintue.com/render/piiw14oz" scrolling="no" allowfullscreen style="width:100%;height:400px"></iframe>
--- a/my-blog/layouts/shortcodes/msg.html
+++ b/my-blog/layouts/shortcodes/msg.html
@@ -0,0 +1,14 @@
+{{- $type := .Get "type" | default "info" -}}
+{{- $content := .Get "content" -}}
+<div class="msg msg-{{ $type }}">
+  <div class="msg-icon">
+    {{- if eq $type "info" -}}ℹ️
+    {{- else if eq $type "warning" -}}⚠️  
+    {{- else if eq $type "error" -}}❌
+    {{- else if eq $type "success" -}}✅
+    {{- else if eq $type "note" -}}📝
+    {{- else -}}ℹ️
+    {{- end -}}
+  </div>
+  <div class="msg-content">{{ $content | markdownify }}</div>
+</div>
--- a/my-blog/oauth/.env.production
+++ b/my-blog/oauth/.env.production
@@ -1,20 +0,0 @@
-# Production environment variables
-VITE_APP_HOST=https://syui.ai
-VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
-VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
-
-# Handle-based Configuration (DIDs resolved at runtime)
-VITE_ATPROTO_PDS=syu.is
-VITE_ADMIN_HANDLE=ai.syui.ai
-VITE_AI_HANDLE=ai.syui.ai
-VITE_OAUTH_COLLECTION=ai.syui.log
-VITE_ATPROTO_WEB_URL=https://bsky.app
-VITE_ATPROTO_HANDLE_LIST=["syui.syui.ai", "ai.syui.ai", "ai.ai"]
-
-# AI Configuration
-VITE_AI_ENABLED=true
-VITE_AI_ASK_AI=true
-VITE_AI_PROVIDER=ollama
-VITE_AI_MODEL=gemma3
-VITE_AI_HOST=http://192.168.11.95:11434
-VITE_AI_SYSTEM_PROMPT="あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。"
--- a/my-blog/static/css/pds.css
+++ b/my-blog/static/css/pds.css
@@ -0,0 +1,345 @@
+@import url('./style.css');
+
+.pds-container {
+}
+
+.pds-header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.pds-header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.pds-search-section {
+    border-radius: 8px;
+}
+
+.pds-search-form {
+    display: flex;
+    justify-content: center;
+				padding: 0px 20px;
+}
+
+.form-group {
+    display: flex;
+    align-items: center;
+}
+
+.form-group input {
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px 0 0 4px;
+				font-size: 14px;
+				width: 600px;
+    outline: none;
+    transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.form-group input:focus {
+    border-color: var(--theme-color, #f40);
+}
+
+.form-group button {
+    padding: 9px 15px;
+    background: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+				font-size: 14px;
+}
+
+.form-group button:hover {
+    background: #1565c0;
+}
+
+/*
+.user-info {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+*/
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.user-details h3 {
+    margin: 0 0 5px 0;
+    color: #333;
+}
+
+.user-details p {
+    margin: 0;
+    color: #666;
+}
+
+.user-did-section {
+    margin: 20px 0;
+}
+
+.did-display {
+    padding: 10px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 14px;
+    color: #666;
+    word-break: break-all;
+    margin-bottom: 10px;
+}
+
+.handle-display {
+    padding: 8px 10px;
+    background: #f0f9f0;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
+    margin-bottom: 8px;
+}
+
+.handle-display strong {
+    color: #2e7d32;
+}
+
+.handle-display span {
+    font-family: monospace;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+}
+
+
+.pds-display {
+    padding: 8px 10px;
+    background: #e8f4f8;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
+}
+
+.pds-display strong {
+    color: #1976d2;
+}
+
+.pds-display span {
+    font-family: monospace;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+}
+
+.collections-section,
+.records-section {
+    margin: 20px 0;
+}
+
+.collections-section h3,
+.records-section h3 {
+    font-size: 1.2em;
+    margin-bottom: 15px;
+    color: #333;
+    font-weight: bold;
+}
+
+.collections-list,
+.records-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.at-uri-link {
+    display: block;
+    padding: 8px 12px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    color: #1976d2;
+    text-decoration: none;
+    font-family: monospace;
+    font-size: 14px;
+    word-break: break-all;
+    transition: all 0.2s;
+}
+
+.at-uri-link:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+    text-decoration: none;
+}
+
+.pds-info {
+    padding: 8px 12px;
+    background: #f0f9ff;
+    border-radius: 4px;
+    border: 1px solid #b3e5fc;
+    margin-bottom: 8px;
+    color: #1976d2;
+    font-size: 12px;
+}
+
+.collection-info {
+    padding: 8px 12px;
+    background: #f0f9f0;
+    border-radius: 4px;
+    border: 1px solid #b3e5b3;
+    margin-bottom: 8px;
+    color: #2e7d32;
+    font-size: 12px;
+}
+
+.collections-header {
+    margin-bottom: 10px;
+}
+
+.collections-toggle {
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+    transition: background-color 0.2s;
+}
+
+.collections-toggle:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+}
+
+
+.pds-test-section,
+.pds-about-section {
+    margin-bottom: 40px;
+}
+
+.pds-test-section h2,
+.pds-about-section h2 {
+    font-size: 1.8em;
+    margin-bottom: 20px;
+    color: #333;
+    border-bottom: 2px solid #1976d2;
+    padding-bottom: 10px;
+}
+
+.test-uris {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.at-uri {
+    background: #f5f5f5;
+    padding: 15px;
+    border-radius: 8px;
+    font-family: monospace;
+    font-size: 14px;
+    word-break: break-all;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border: 1px solid #e0e0e0;
+}
+
+.at-uri:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+}
+
+.pds-about-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.pds-about-section li {
+    padding: 5px 0;
+    color: #666;
+}
+
+
+/* AT URI Modal Styles */
+.at-uri-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.at-uri-modal-content {
+    background-color: white;
+    border-radius: 8px;
+    max-width: 800px;
+    max-height: 600px;
+    width: 90%;
+    height: 80%;
+    overflow: auto;
+    position: relative;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.at-uri-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    z-index: 1001;
+    padding: 5px 10px;
+}
+
+/* Loading states */
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+}
+
+.error {
+    text-align: center;
+    padding: 20px;
+    color: #d32f2f;
+    background: #ffeaea;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.pds-search-section {
+		display: none;
+	}
+    .pds-search-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .form-group {
+        align-items: stretch;
+    }
+    
+    .form-group input {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+}
+
--- a/my-blog/static/css/style.css
+++ b/my-blog/static/css/style.css
@@ -55,6 +55,73 @@ a.view-markdown:any-link {
    text-decoration: none !important;
 }

+/* AI Conversation Styles */
+
+.ai-conversation-display {
+    margin-bottom: 32px;
+}
+
+/* Style adjustments for AI conversation in chat area */
+.ai-conversation-display .chat-message {
+    margin-bottom: 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.ai-conversation-display .chat-message.ai-message {
+    background: linear-gradient(135deg, #f8f9ff, #f0f4ff);
+    border-left: 4px solid #667eea;
+}
+
+.ai-conversation-display .chat-message.user-message {
+    background: linear-gradient(135deg, #fff8f0, #fff4f0);
+    border-left: 4px solid #ff6b35;
+}
+
+.ai-conversation-display .message-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    padding: 12px 16px 0;
+}
+
+.ai-conversation-display .message-content {
+    padding: 0 16px 16px;
+    line-height: 1.6;
+    color: #2d3748;
+}
+
+.ai-conversation-display .avatar img {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-right: 12px;
+}
+
+.ai-conversation-display .user-info {
+    flex: 1;
+}
+
+.ai-conversation-display .display-name {
+    font-weight: 600;
+    color: #1a202c;
+    font-size: 14px;
+}
+
+.ai-conversation-display .handle {
+    font-size: 12px;
+    color: #718096;
+}
+
+.ai-conversation-display .handle a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.ai-conversation-display .handle a:hover {
+    text-decoration: underline;
+}
+
 /* Layout */
 .container {
    min-height: 100vh;
@@ -72,14 +139,14 @@ a.view-markdown:any-link {
    grid-area: header;
    background: #ffffff;
    border-bottom: 1px solid #d1d9e0;
-    padding: 16px 24px;
+    padding: 17px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
 }

 .header-content {
-    max-width: 1000px;
+    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
@@ -170,7 +237,7 @@ a.view-markdown:any-link {
 }

 .ask-ai-content {
-    max-width: 1000px;
+    max-width: 800px;
    margin: 0 auto;
 }

@@ -197,22 +264,14 @@ a.view-markdown:any-link {
    margin-bottom: 16px;
 }

-/* Main Content */
 .main-content {
 	grid-area: main;
-	max-width: 1000px;
+	max-width: 800px;
 	margin: 0 auto;
 	padding: 0px;
 	width: 100%;
 }

-@media (max-width: 1000px) {
-	.main-content {
-		padding: 0px;
-		max-width: 100%;
-	}
-}
-
 /* Timeline */
 .timeline-container {
    max-width: 600px;
@@ -327,12 +386,9 @@ a.view-markdown:any-link {

 /* Article */
 .article-container {
-    display: grid;
-    grid-template-columns: 1fr 240px;
-    /* gap: 40px; */
-    max-width: 1000px;
+    max-width: 800px;
    margin: 0 auto;
-				padding: 100px 0;
+    padding: 100px 0;
 }

 /* article.article-content { padding: 10px; } */
@@ -396,18 +452,12 @@ a.view-markdown:any-link {
    border-color: var(--white);
 }

-/* Sidebar styles */
-.article-sidebar {
-    position: sticky;
-    top: 100px;
-    height: fit-content;
-}
-
 .toc {
    background: #f6f8fa;
    border: 1px solid #d1d9e0;
    border-radius: 8px;
    padding: 16px;
+    margin: 20px 0;
 }

 .toc h3 {
@@ -673,7 +723,7 @@ article.article-content {
 .footer-social a {
    color: var(--dark-gray) !important;
    text-decoration: none !important;
-    font-size: 20px;
+    font-size: 25px;
    transition: all 0.2s ease;
 }

@@ -794,7 +844,6 @@ article.article-content {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 32px;
-    text-align: center;
 }

 /* OAuth Comment System - Hide on homepage by default, show on post pages */
@@ -814,10 +863,8 @@ article.article-content {
 /* Responsive */
@media (max-width: 1000px) {
    .article-container {
-        grid-template-columns: 1fr;
-        gap: 24px;
        max-width: 100%;
-        padding: 50px 0;
+        padding: 50px 20px;
        margin: 0;
    }
 }
@@ -904,9 +951,11 @@ article.article-content {
        max-width: 100% !important;
    }
    
+				/*
    .form-group {
        margin-bottom: 15px !important;
    }
+				*/
    
    .form-input, .form-textarea {
        width: 100% !important;
@@ -969,6 +1018,41 @@ article.article-content {
    .question-form {
        padding: 12px !important;
    }
+}
+
+/* Profile Display Styles */
+.profile-avatar-fallback {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--theme-color);
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.admin-badge {
+    background: var(--theme-color);
+    color: var(--white);
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-weight: 500;
+    margin-left: 8px;
+}
+
+.loading-message, .error-message, .no-profiles {
+    text-align: center;
+    padding: 20px;
+    color: var(--dark-gray);
+}
+
+.error-message {
+    color: #d32f2f;
+}
    
    .input-container {
        flex-direction: column !important;
@@ -1106,7 +1190,667 @@ article.article-content {
 				.article-meta {
 					padding: 10px;
 				}
+
 				.article-actions {
 					padding: 10px;
 				}
+
+
+}
+
+/* Loading spinner for Ask AI panel */
+.loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.loading-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid var(--theme-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 10px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-content p {
+    margin: 0;
+    color: #656d76;
+    font-size: 14px;
+}
+
+/* Handle links in chat messages */
+.message-header .handle a {
+    color: #656d76;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.message-header .handle a:hover {
+    color: var(--theme-color);
+    text-decoration: underline;
+}
+
+@media (max-width: 1000px) {
+	.main-content {
+		padding: 0px;
+		max-width: 100%;
+	}
+	article.article-content {
+		max-width: 100%;
+	}
+	.timeline-feed {
+		padding: 0px;
+	}
+}
+
+/* Image Comparison Slider Styles */
+.img-comparison-container {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 20px auto;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.img-comparison-slider {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.img-before,
+.img-after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.img-before {
+    z-index: 2;
+    clip-path: inset(0 50% 0 0);
+}
+
+.img-after {
+    z-index: 1;
+}
+
+.img-before img,
+.img-after img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    user-select: none;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+    z-index: 4;
+    opacity: 0;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0;
+    height: 0;
+}
+
+.slider::-moz-range-thumb {
+    width: 0;
+    height: 0;
+    border: none;
+    background: transparent;
+}
+
+.slider-thumb {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 4px;
+    height: 100%;
+    background: #ffffff;
+    z-index: 3;
+    pointer-events: none;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+    transform: translateX(-50%);
+}
+
+.slider-thumb::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    background: #ffffff;
+    border: 2px solid var(--theme-color);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.slider-thumb::after {
+    content: '↔';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--theme-color);
+    font-size: 16px;
+    font-weight: bold;
+    z-index: 1;
+}
+
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .img-comparison-container {
+        margin: 15px auto;
+        border-radius: 6px;
+    }
+    
+    .img-comparison-slider {
+        height: 250px;
+    }
+    
+    .slider-thumb::before {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .slider-thumb::after {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .img-comparison-slider {
+        height: 200px;
+    }
+    
+    .slider-thumb::before {
+        width: 28px;
+        height: 28px;
+    }
+    
+    .slider-thumb::after {
+        font-size: 12px;
+    }
+}
+
+/* Message Components */
+.msg {
+    display: flex;
+    align-items: flex-start;
+    margin: 20px 0;
+    padding: 16px;
+    border-radius: 8px;
+    border-left: 4px solid;
+    font-size: 14px;
+    line-height: 1.5;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.msg-symbol {
+    font-size: 18px;
+    font-weight: bold;
+    margin-right: 12px;
+    margin-top: 2px;
+    min-width: 20px;
+    text-align: center;
+}
+
+.msg-content {
+    flex: 1;
+}
+
+.msg-content p {
+    margin: 0;
+    color: inherit;
+}
+
+/* Message type styles */
+.msg.message {
+    background-color: #f0f8ff;
+    border-left-color: #2196f3;
+    color: #1565c0;
+}
+
+.msg.message .msg-symbol {
+    color: #2196f3;
+}
+
+.msg.warning {
+    background-color: #fffbf0;
+    border-left-color: #ff9800;
+    color: #f57c00;
+}
+
+.msg.warning .msg-symbol {
+    color: #ff9800;
+}
+
+.msg.error {
+    background-color: #fff5f5;
+    border-left-color: #f44336;
+    color: #d32f2f;
+}
+
+.msg.error .msg-symbol {
+    color: #f44336;
+}
+
+.msg.success {
+    background-color: #f0fff0;
+    border-left-color: #4caf50;
+    color: #388e3c;
+}
+
+.msg.success .msg-symbol {
+    color: #4caf50;
+}
+
+.msg.note {
+    background-color: #faf5ff;
+    border-left-color: #9c27b0;
+    color: #7b1fa2;
+}
+
+.msg.note .msg-symbol {
+    color: #9c27b0;
+}
+
+/* Responsive message styles */
+@media (max-width: 768px) {
+    .msg {
+        margin: 15px 0;
+        padding: 12px;
+        font-size: 13px;
+    }
+    
+    .msg-symbol {
+        font-size: 16px;
+        margin-right: 8px;
+    }
+}
+
+@media (max-width: 480px) {
+    .msg {
+        margin: 10px 0;
+        padding: 10px;
+        font-size: 12px;
+    }
+    
+    .msg-symbol {
+        font-size: 14px;
+        margin-right: 6px;
+    }
+}
+
+/* AI Conversation Display Styles */
+.ai-conversation-notice {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 16px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    text-align: center;
+}
+
+.ai-conversation-display {
+    margin: 24px 0;
+}
+
+.ai-conversation-loading {
+    text-align: center;
+    padding: 32px;
+    color: #666;
+}
+
+.ai-conversation-list {
+    max-width: none;
+}
+
+.ai-conversation-pair {
+    margin-bottom: 32px;
+    border: 1px solid #e1e4e8;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.ai-question {
+    background: #f8f9fa;
+    border-bottom: 1px solid #e1e4e8;
+}
+
+.ai-answer {
+    background: #fff;
+}
+
+.ai-question .message-header,
+.ai-answer .message-header {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px 8px 20px;
+    gap: 12px;
+}
+
+.ai-question .avatar,
+.ai-answer .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #e1e4e8;
+}
+
+.ai-question .user-info,
+.ai-answer .user-info {
+    flex: 1;
+}
+
+.ai-question .display-name,
+.ai-answer .display-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: #1f2328;
+    margin-bottom: 2px;
+}
+
+.ai-question .handle,
+.ai-answer .handle {
+    font-size: 12px;
+    color: #656d76;
+}
+
+.ai-question .message-content,
+.ai-answer .message-content {
+    padding: 8px 20px 20px 20px;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #1f2328;
+    white-space: pre-wrap;
+}
+
+.ai-question .message-content {
+    background: #f8f9fa;
+    border-left: 4px solid #0969da;
+    margin-left: 16px;
+    margin-right: 16px;
+    border-radius: 0 6px 6px 0;
+    padding-left: 16px;
+}
+
+.ai-answer .message-content {
+    background: #fff;
+    border-left: 4px solid #7c3aed;
+    margin-left: 16px;
+    margin-right: 16px;
+    border-radius: 0 6px 6px 0;
+    padding-left: 16px;
+}
+
+/* Responsive styles for AI conversation */
+@media (max-width: 768px) {
+    .ai-conversation-pair {
+        margin-bottom: 24px;
+        border-radius: 8px;
+    }
+    
+    .ai-question .message-header,
+    .ai-answer .message-header {
+        padding: 12px 16px 6px 16px;
+        gap: 10px;
+    }
+    
+    .ai-question .avatar,
+    .ai-answer .avatar {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .ai-question .message-content,
+    .ai-answer .message-content {
+        padding: 6px 16px 16px 16px;
+        font-size: 14px;
+        margin-left: 12px;
+        margin-right: 12px;
+        padding-left: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .ai-conversation-pair {
+        margin-bottom: 20px;
+        border-radius: 6px;
+    }
+    
+    .ai-question .message-header,
+    .ai-answer .message-header {
+        padding: 10px 12px 4px 12px;
+        gap: 8px;
+    }
+    
+    .ai-question .avatar,
+    .ai-answer .avatar {
+        width: 28px;
+        height: 28px;
+    }
+    
+    .ai-question .display-name,
+    .ai-answer .display-name {
+        font-size: 13px;
+    }
+    
+    .ai-question .handle,
+    .ai-answer .handle {
+        font-size: 11px;
+    }
+    
+    .ai-question .message-content,
+    .ai-answer .message-content {
+        padding: 4px 12px 12px 12px;
+        font-size: 13px;
+        margin-left: 8px;
+        margin-right: 8px;
+        padding-left: 10px;
+    }
+}
+
+/* AI Conversation Integration Styles */
+.chat-separator {
+    margin: 24px 0;
+    border-bottom: 1px solid var(--dark-white);
+}
+
+.article-body .chat-message {
+    margin-bottom: 24px;
+    background: var(--background);
+    border: 1px solid var(--dark-white);
+    border-radius: 6px;
+    padding: 16px;
+    transition: background 0.2s, border-color 0.2s;
+}
+
+.article-body .chat-message:hover {
+    background: var(--light-gray);
+    border-color: var(--dark-gray);
+}
+
+.article-body .chat-message.user-message {
+    border-left: 4px solid var(--theme-color);
+}
+
+.article-body .chat-message.ai-message {
+    border-left: 4px solid var(--ai-color);
+    background: #faf8ff;
+}
+
+.article-body .message-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+
+.article-body .message-header .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--light-gray);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border: 1px solid var(--dark-white);
+    flex-shrink: 0;
+}
+
+.article-body .message-header .user-info {
+    flex: 1;
+}
+
+.article-body .message-header .display-name {
+    font-weight: 600;
+    color: #1f2328;
+    font-size: 15px;
+}
+
+.article-body .message-header .handle {
+    color: var(--dark-gray);
+    font-size: 13px;
+}
+
+.article-body .message-header .handle-link {
+    color: var(--dark-gray);
+    text-decoration: none;
+}
+
+.article-body .message-header .handle-link:hover {
+    color: var(--theme-color);
+    text-decoration: underline;
+}
+
+.article-body .message-content {
+    color: #1f2328;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/* Ensure proper spacing for markdown content in chat messages */
+.article-body .message-content h1,
+.article-body .message-content h2,
+.article-body .message-content h3,
+.article-body .message-content h4,
+.article-body .message-content h5,
+.article-body .message-content h6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.article-body .message-content p {
+    margin-bottom: 1rem;
+}
+
+.article-body .message-content ul,
+.article-body .message-content ol {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+}
+
+.article-body .message-content li {
+    margin-bottom: 0.5rem;
+}
+
+.article-body .message-content blockquote {
+    margin: 1rem 0;
+    padding-left: 1rem;
+    border-left: 3px solid var(--dark-white);
+    color: var(--dark-gray);
+}
+
+.article-body .message-content pre {
+    background: #f6f8fa;
+    border: 1px solid var(--dark-white);
+    border-radius: 6px;
+    padding: 16px;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+.article-body .message-content code {
+    background: #f6f8fa;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.9em;
+}
+
+.article-body .message-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+.article-body .message-content table th,
+.article-body .message-content table td {
+    padding: 8px 12px;
+    border: 1px solid var(--dark-white);
+    text-align: left;
+}
+
+.article-body .message-content table th {
+    background: var(--light-gray);
+    font-weight: 600;
+}
+
+
+button.ask-at-btn {
+  margin: 10px;
+  background: var(--theme-color);
+  padding: 8px 16px;
+}
+
+button.ask-at-btn a {
+  color: var(--ai-color);
+}
+
+button#searchButton.pds-btn {
+	background: var(--theme-color);
 }
--- a/my-blog/static/img/aios_v0201.png
+++ b/my-blog/static/img/aios_v0201.png
--- a/my-blog/static/img/ue_blender_model_ai_v0401.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0401.png
--- a/my-blog/static/img/ue_blender_model_ai_v0402.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0402.png
--- a/my-blog/static/img/ue_blender_model_ai_v0501.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0501.png
--- a/my-blog/static/img/ue_blender_model_ai_v0502.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0502.png
--- a/my-blog/static/img/ue_blender_model_ai_v0601.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0601.png
--- a/my-blog/static/img/ue_blender_model_ai_v0602.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0602.png
--- a/my-blog/static/img/ue_blender_model_ai_v0603.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0603.png
--- a/my-blog/static/img/ue_blender_model_ai_v0604.png
+++ b/my-blog/static/img/ue_blender_model_ai_v0604.png
--- a/my-blog/static/img/ue_gasp_dragonik_shin_v0001.png
+++ b/my-blog/static/img/ue_gasp_dragonik_shin_v0001.png
--- a/my-blog/static/js/ask-ai.js
+++ b/my-blog/static/js/ask-ai.js
@@ -5,6 +5,22 @@
 // Global variables for AI functionality
 let aiProfileData = null;

+// Get config from window or use defaults
+const OAUTH_PDS = window.OAUTH_CONFIG?.pds || 'syu.is';
+const ADMIN_HANDLE = window.OAUTH_CONFIG?.admin || 'ai.syui.ai';
+const OAUTH_COLLECTION = window.OAUTH_CONFIG?.collection || 'ai.syui.log';
+
+// Listen for AI profile data from OAuth app
+window.addEventListener('aiProfileLoaded', function(event) {
+    aiProfileData = event.detail;
+    updateAskAIButton();
+});
+
+// Check if AI profile data is already available
+if (window.aiProfileData) {
+    aiProfileData = window.aiProfileData;
+}
+
 // Original functions from working implementation
 function toggleAskAI() {
    const panel = document.getElementById('askAiPanel');
@@ -12,24 +28,82 @@ function toggleAskAI() {
    panel.style.display = isVisible ? 'none' : 'block';
    
    if (!isVisible) {
-        checkAuthenticationStatus();
+        
+        // If AI profile data is already available, show introduction immediately
+        if (aiProfileData) {
+            // Quick check for authentication
+            const userSections = document.querySelectorAll('.user-section');
+            const isAuthenticated = userSections.length > 0;
+            handleAuthenticationStatus(isAuthenticated);
+            return;
+        }
+        
+        // For production fallback - if OAuth app fails to load, show profiles
+        const isProd = window.location.hostname !== 'localhost' && !window.location.hostname.includes('preview');
+        if (isProd) {
+            // Shorter timeout for production
+            setTimeout(() => {
+                const userSections = document.querySelectorAll('.user-section');
+                
+                if (userSections.length === 0) {
+                    handleAuthenticationStatus(false);
+                } else {
+                    handleAuthenticationStatus(true);
+                }
+            }, 300);
+        } else {
+            checkAuthenticationStatus();
+        }
    }
 }

 function checkAuthenticationStatus() {
-    const userSections = document.querySelectorAll('.user-section');
-    const isAuthenticated = userSections.length > 0;
+    // Check multiple times for OAuth app to load
+    let checkCount = 0;
+    const maxChecks = 10;
+    
+    const checkForAuth = () => {
+        const userSections = document.querySelectorAll('.user-section');
+        const authButtons = document.querySelectorAll('[data-auth-status]');
+        const oauthContainers = document.querySelectorAll('#oauth-container');
+        
+        
+        const isAuthenticated = userSections.length > 0;
+        
+        if (isAuthenticated || checkCount >= maxChecks - 1) {
+            handleAuthenticationStatus(isAuthenticated);
+        } else {
+            checkCount++;
+            setTimeout(checkForAuth, 200);
+        }
+    };
+    
+    checkForAuth();
+}
+
+function handleAuthenticationStatus(isAuthenticated) {
+    
+    // Always hide loading first
+    document.getElementById('authCheck').style.display = 'none';
    
    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
+        // Show initial greeting if chat history is empty and AI profile is available
        const chatHistory = document.getElementById('chatHistory');
        if (chatHistory.children.length === 0) {
-            showInitialGreeting();
+            if (aiProfileData) {
+                showInitialGreeting();
+            } else {
+                // Wait for AI profile data
+                setTimeout(() => {
+                    if (aiProfileData) {
+                        showInitialGreeting();
+                    }
+                }, 500);
+            }
        }
        
        // Focus on input
@@ -37,10 +111,78 @@ function checkAuthenticationStatus() {
            document.getElementById('aiQuestion').focus();
        }, 50);
    } else {
-        // User not authenticated - show auth message
-        document.getElementById('authCheck').style.display = 'block';
+        // User not authenticated - show AI introduction directly if profile available
        document.getElementById('chatForm').style.display = 'none';
-        document.getElementById('chatHistory').style.display = 'none';
+        document.getElementById('chatHistory').style.display = 'block';
+        
+        if (aiProfileData) {
+            // Show AI introduction directly using available profile data
+            showAIIntroduction();
+        } else {
+            // Fallback to profile loading
+            loadAndShowProfiles();
+        }
+    }
+}
+
+// Load and display profiles from ai.syui.log.profile collection
+async function loadAndShowProfiles() {
+    const chatHistory = document.getElementById('chatHistory');
+    chatHistory.innerHTML = '<div class="loading-message">Loading profiles...</div>';
+    
+    try {
+        const response = await fetch(`https://${OAUTH_PDS}/xrpc/com.atproto.repo.listRecords?repo=${ADMIN_HANDLE}&collection=${OAUTH_COLLECTION}&limit=100`);
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch profiles');
+        }
+        
+        const data = await response.json();
+        
+        // Filter only profile records and sort
+        const profileRecords = (data.records || []).filter(record => record.value.type === 'profile');
+        
+        const profiles = profileRecords.sort((a, b) => {
+            if (a.value.profileType === 'admin' && b.value.profileType !== 'admin') return -1;
+            if (a.value.profileType !== 'admin' && b.value.profileType === 'admin') return 1;
+            return 0;
+        });
+        
+        // Clear loading message
+        chatHistory.innerHTML = '';
+        
+        // Display profiles using the same format as chat
+        profiles.forEach(profile => {
+            const profileDiv = document.createElement('div');
+            profileDiv.className = 'chat-message ai-message comment-style';
+            
+            const avatarElement = profile.value.author.avatar 
+                ? `<img src="${profile.value.author.avatar}" alt="${profile.value.author.displayName || profile.value.author.handle}" class="profile-avatar">`
+                : `<div class="profile-avatar-fallback">${(profile.value.author.displayName || profile.value.author.handle || '?').charAt(0).toUpperCase()}</div>`;
+            
+            const adminBadge = profile.value.profileType === 'admin' 
+                ? '<span class="admin-badge">Admin</span>' 
+                : '';
+            
+            profileDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${avatarElement}</div>
+                    <div class="user-info">
+                        <div class="display-name">${profile.value.author.displayName || profile.value.author.handle} ${adminBadge}</div>
+                        <div class="handle"><a href="https://${OAUTH_PDS}/profile/${profile.value.author.handle}" target="_blank" rel="noopener noreferrer">@${profile.value.author.handle}</a></div>
+                    </div>
+                </div>
+                <div class="message-content">${profile.value.text}</div>
+            `;
+            chatHistory.appendChild(profileDiv);
+        });
+        
+        if (profiles.length === 0) {
+            chatHistory.innerHTML = '<div class="no-profiles">No profiles available</div>';
+        }
+        
+    } catch (error) {
+        chatHistory.innerHTML = '<div class="error-message">Failed to load profiles. Please try again later.</div>';
    }
 }

@@ -68,7 +210,6 @@ function askQuestion() {
        }));
        
    } catch (error) {
-        console.error('Failed to ask question:', error);
        showErrorMessage('Sorry, I encountered an error. Please try again.');
    } finally {
        askButton.disabled = false;
@@ -107,8 +248,7 @@ function addUserMessage(question) {
            <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 class="handle"><a href="https://${OAUTH_PDS}/profile/${userHandle}" target="_blank" rel="noopener noreferrer">@${userHandle}</a></div>
            </div>
        </div>
        <div class="message-content">${question}</div>
@@ -171,17 +311,57 @@ function showInitialGreeting() {
            <div class="avatar">${avatarElement}</div>
            <div class="user-info">
                <div class="display-name">${aiProfileData.displayName}</div>
-                <div class="handle">@${aiProfileData.handle}</div>
-                <div class="timestamp">${new Date().toLocaleString()}</div>
+                <div class="handle"><a href="https://${OAUTH_PDS}/profile/${aiProfileData.handle}" target="_blank" rel="noopener noreferrer">@${aiProfileData.handle}</a></div>
            </div>
        </div>
-        <div class="message-content">
-            Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
-        </div>
+        <div class="message-content">Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?</div>
    `;
    chatHistory.appendChild(greetingDiv);
 }

+function showAIIntroduction() {
+    if (!aiProfileData) return;
+
+    const chatHistory = document.getElementById('chatHistory');
+    chatHistory.innerHTML = ''; // Clear any existing content
+    
+    // AI Introduction message
+    const introDiv = document.createElement('div');
+    introDiv.className = 'chat-message ai-message comment-style initial-greeting';
+    
+    const avatarElement = aiProfileData.avatar 
+        ? `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName}" class="profile-avatar">`
+        : '🤖';
+    
+    introDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${avatarElement}</div>
+            <div class="user-info">
+                <div class="display-name">${aiProfileData.displayName}</div>
+                <div class="handle"><a href="https://${OAUTH_PDS}/profile/${aiProfileData.handle}" target="_blank" rel="noopener noreferrer">@${aiProfileData.handle}</a></div>
+            </div>
+        </div>
+        <div class="message-content">Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?</div>
+    `;
+    chatHistory.appendChild(introDiv);
+    
+    // OAuth login message
+    const loginDiv = document.createElement('div');
+    loginDiv.className = 'chat-message user-message comment-style initial-greeting';
+    
+    loginDiv.innerHTML = `
+        <div class="message-header">
+            <div class="avatar">${avatarElement}</div>
+            <div class="user-info">
+                <div class="display-name">${aiProfileData.displayName}</div>
+                <div class="handle"><a href="https://${OAUTH_PDS}/profile/${aiProfileData.handle}" target="_blank" rel="noopener noreferrer">@${aiProfileData.handle}</a></div>
+            </div>
+        </div>
+        <div class="message-content">Please atproto oauth login</div>
+    `;
+    chatHistory.appendChild(loginDiv);
+}
+
 function updateAskAIButton() {
    const button = document.getElementById('askAiButton');
    if (!button) return;
@@ -201,7 +381,6 @@ function handleAIResponse(responseData) {
    
    const aiProfile = responseData.aiProfile;
    if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
-        console.error('AI profile data is missing');
        return;
    }
    
@@ -217,8 +396,7 @@ function handleAIResponse(responseData) {
            <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 class="handle"><a href="https://${OAUTH_PDS}/profile/${aiProfile.handle}" target="_blank" rel="noopener noreferrer">@${aiProfile.handle}</a></div>
            </div>
        </div>
        <div class="message-content">${responseData.answer}</div>
@@ -244,7 +422,6 @@ function setupAskAIEventListeners() {
    // Listen for AI profile updates from OAuth app
    window.addEventListener('aiProfileLoaded', function(event) {
        aiProfileData = event.detail;
-        console.log('AI profile loaded:', aiProfileData);
        updateAskAIButton();
    });
    
@@ -256,7 +433,6 @@ function setupAskAIEventListeners() {
    // Listen for OAuth callback completion from iframe
    window.addEventListener('message', function(event) {
        if (event.data.type === 'oauth_success') {
-            console.log('Received OAuth success message:', event.data);
            
            // Close any OAuth popups/iframes
            const oauthFrame = document.getElementById('oauth-frame');
@@ -305,7 +481,36 @@ function setupAskAIEventListeners() {
 // Initialize Ask AI when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
    setupAskAIEventListeners();
-    console.log('Ask AI initialized successfully');
+    
+    // Also listen for OAuth app load completion
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type === 'childList') {
+                // Check if user-section was added/removed
+                const userSectionAdded = Array.from(mutation.addedNodes).some(node => 
+                    node.nodeType === Node.ELEMENT_NODE && 
+                    (node.classList?.contains('user-section') || node.querySelector?.('.user-section'))
+                );
+                const userSectionRemoved = Array.from(mutation.removedNodes).some(node => 
+                    node.nodeType === Node.ELEMENT_NODE && 
+                    (node.classList?.contains('user-section') || node.querySelector?.('.user-section'))
+                );
+                
+                if (userSectionAdded || userSectionRemoved) {
+                    // Update Ask AI panel if it's visible
+                    const panel = document.getElementById('askAiPanel');
+                    if (panel && panel.style.display !== 'none') {
+                        checkAuthenticationStatus();
+                    }
+                }
+            }
+        });
+    });
+    
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
 });

 // Global functions for onclick handlers
--- a/my-blog/static/js/image-comparison.js
+++ b/my-blog/static/js/image-comparison.js
@@ -0,0 +1,123 @@
+/**
+ * Image Comparison Slider
+ * UE5-style before/after image comparison component
+ */
+
+class ImageComparison {
+    constructor(container) {
+        this.container = container;
+        this.slider = container.querySelector('.slider');
+        this.beforeImg = container.querySelector('.img-before');
+        this.afterImg = container.querySelector('.img-after');
+        this.sliderThumb = container.querySelector('.slider-thumb');
+        
+        this.isDragging = false;
+        this.containerRect = null;
+        
+        this.init();
+    }
+    
+    init() {
+        this.bindEvents();
+        this.updatePosition(50); // Start at 50%
+    }
+    
+    bindEvents() {
+        // Mouse events
+        this.slider.addEventListener('input', (e) => {
+            this.updatePosition(e.target.value);
+        });
+        
+        this.slider.addEventListener('mousedown', () => {
+            this.isDragging = true;
+            document.body.style.userSelect = 'none';
+        });
+        
+        document.addEventListener('mouseup', () => {
+            if (this.isDragging) {
+                this.isDragging = false;
+                document.body.style.userSelect = '';
+            }
+        });
+        
+        // Touch events for mobile
+        this.slider.addEventListener('touchstart', (e) => {
+            this.isDragging = true;
+            e.preventDefault();
+        });
+        
+        this.slider.addEventListener('touchmove', (e) => {
+            if (this.isDragging) {
+                const touch = e.touches[0];
+                this.containerRect = this.container.getBoundingClientRect();
+                const x = touch.clientX - this.containerRect.left;
+                const percentage = Math.max(0, Math.min(100, (x / this.containerRect.width) * 100));
+                this.slider.value = percentage;
+                this.updatePosition(percentage);
+                e.preventDefault();
+            }
+        });
+        
+        this.slider.addEventListener('touchend', () => {
+            this.isDragging = false;
+        });
+        
+        // Direct click on container
+        this.container.addEventListener('click', (e) => {
+            if (e.target === this.container || e.target.classList.contains('img-comparison-slider')) {
+                this.containerRect = this.container.getBoundingClientRect();
+                const x = e.clientX - this.containerRect.left;
+                const percentage = Math.max(0, Math.min(100, (x / this.containerRect.width) * 100));
+                this.slider.value = percentage;
+                this.updatePosition(percentage);
+            }
+        });
+        
+        // Keyboard support
+        this.slider.addEventListener('keydown', (e) => {
+            let value = parseFloat(this.slider.value);
+            switch (e.key) {
+                case 'ArrowLeft':
+                    value = Math.max(0, value - 1);
+                    break;
+                case 'ArrowRight':
+                    value = Math.min(100, value + 1);
+                    break;
+                case 'Home':
+                    value = 0;
+                    break;
+                case 'End':
+                    value = 100;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this.slider.value = value;
+            this.updatePosition(value);
+        });
+    }
+    
+    updatePosition(percentage) {
+        const position = parseFloat(percentage);
+        
+        // Update clip-path for before image to show only the left portion
+        this.beforeImg.style.clipPath = `inset(0 ${100 - position}% 0 0)`;
+        
+        // Update slider thumb position
+        this.sliderThumb.style.left = `${position}%`;
+        this.sliderThumb.style.transform = `translateX(-50%)`;
+        
+    }
+}
+
+// Auto-initialize all image comparison components
+document.addEventListener('DOMContentLoaded', function() {
+    const comparisons = document.querySelectorAll('.img-comparison-container');
+    comparisons.forEach(container => {
+        new ImageComparison(container);
+    });
+});
+
+// Export for manual initialization
+window.ImageComparison = ImageComparison;
--- a/my-blog/static/js/pds.js
+++ b/my-blog/static/js/pds.js
@@ -0,0 +1,370 @@
+// AT Protocol API functions
+const AT_PROTOCOL_CONFIG = {
+    primary: {
+        pds: 'https://syu.is',
+        plc: 'https://plc.syu.is',
+        bsky: 'https://bsky.syu.is',
+        web: 'https://web.syu.is'
+    },
+    fallback: {
+        pds: 'https://bsky.social',
+        plc: 'https://plc.directory',
+        bsky: 'https://public.api.bsky.app',
+        web: 'https://bsky.app'
+    }
+};
+
+// Search user function
+async function searchUser() {
+    const handleInput = document.getElementById('handleInput');
+    const userInfo = document.getElementById('userInfo');
+    const collectionsList = document.getElementById('collectionsList');
+    const recordsList = document.getElementById('recordsList');
+    const searchButton = document.getElementById('searchButton');
+    
+    const input = handleInput.value.trim();
+    if (!input) {
+        alert('Handle nameまたはAT URIを入力してください');
+        return;
+    }
+    
+    searchButton.disabled = true;
+    searchButton.innerHTML = '@';
+    //searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
+    
+    try {
+        // Clear previous results
+        document.getElementById('userDidSection').style.display = 'none';
+        document.getElementById('collectionsSection').style.display = 'none';
+        document.getElementById('recordsSection').style.display = 'none';
+        collectionsList.innerHTML = '';
+        recordsList.innerHTML = '';
+        
+        // Check if input is AT URI
+        if (input.startsWith('at://')) {
+            // Parse AT URI to check if it's a full record or just a handle/collection
+            const uriParts = input.replace('at://', '').split('/').filter(part => part.length > 0);
+            
+            if (uriParts.length >= 3) {
+                // Full AT URI with rkey - show in modal
+                showAtUriModal(input);
+                return;
+            } else if (uriParts.length === 1) {
+                // Just handle in AT URI format (at://handle) - treat as regular handle
+                const handle = uriParts[0];
+                const userProfile = await resolveUserProfile(handle);
+                
+                if (userProfile.success) {
+                    displayUserDid(userProfile.data);
+                    await loadUserCollections(handle, userProfile.data.did);
+                } else {
+                    alert('ユーザーが見つかりません: ' + userProfile.error);
+                }
+                return;
+            } else if (uriParts.length === 2) {
+                // Collection level AT URI - load collection records
+                const [repo, collection] = uriParts;
+                
+                try {
+                    // First resolve the repo to get handle if it's a DID
+                    let handle = repo;
+                    if (repo.startsWith('did:')) {
+                        // Try to resolve DID to handle - for now just use the DID
+                        handle = repo;
+                    }
+                    
+                    loadCollectionRecords(handle, collection, repo);
+                } catch (error) {
+                    alert('コレクションの読み込みに失敗しました: ' + error.message);
+                }
+                return;
+            }
+        }
+        
+        // Handle regular handle search
+        const userProfile = await resolveUserProfile(input);
+        
+        if (userProfile.success) {
+            displayUserDid(userProfile.data);
+            await loadUserCollections(input, userProfile.data.did);
+        } else {
+            alert('ユーザーが見つかりません: ' + userProfile.error);
+        }
+    } catch (error) {
+        alert('エラーが発生しました: ' + error.message);
+    } finally {
+        searchButton.disabled = false;
+        searchButton.innerHTML = '@';
+        //searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
+    }
+}
+
+// Resolve user profile
+async function resolveUserProfile(handle) {
+    try {
+        let response = null;
+        
+        // Try syu.is first
+        try {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+        } catch (error) {
+            console.log('Failed to resolve from syu.is:', error);
+        }
+        
+        // If syu.is fails, try bsky.social
+        if (!response || !response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to resolve handle');
+        }
+        
+        const repoData = await response.json();
+        
+        // Get profile data
+        const profileResponse = await fetch(`${AT_PROTOCOL_CONFIG.fallback.bsky}/xrpc/app.bsky.actor.getProfile?actor=${repoData.did}`);
+        const profileData = await profileResponse.json();
+        
+        return {
+            success: true,
+            data: {
+                did: repoData.did,
+                handle: profileData.handle,
+                displayName: profileData.displayName,
+                avatar: profileData.avatar,
+                description: profileData.description,
+                pds: repoData.didDoc.service.find(s => s.type === 'AtprotoPersonalDataServer')?.serviceEndpoint
+            }
+        };
+    } catch (error) {
+        return {
+            success: false,
+            error: error.message
+        };
+    }
+}
+
+// Display user DID
+function displayUserDid(profile) {
+    document.getElementById('userPdsText').textContent = profile.pds || 'Unknown';
+    document.getElementById('userHandleText').textContent = profile.handle;
+    document.getElementById('userDidText').textContent = profile.did;
+    document.getElementById('userDidSection').style.display = 'block';
+}
+
+// Load user collections
+async function loadUserCollections(handle, did) {
+    const collectionsList = document.getElementById('collectionsList');
+    
+    collectionsList.innerHTML = '<div class="loading">コレクションを読み込み中...</div>';
+    
+    try {
+        // Try to get collections from describeRepo
+        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+        let usedPds = AT_PROTOCOL_CONFIG.primary.pds;
+        
+        // If syu.is fails, try bsky.social
+        if (!response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.describeRepo?repo=${handle}`);
+            usedPds = AT_PROTOCOL_CONFIG.fallback.pds;
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to describe repository');
+        }
+        
+        const data = await response.json();
+        const collections = data.collections || [];
+        
+        // Display collections as AT URI links
+        collectionsList.innerHTML = '';
+        if (collections.length === 0) {
+            collectionsList.innerHTML = '<div class="error">コレクションが見つかりませんでした</div>';
+        } else {
+            
+            collections.forEach(collection => {
+                const atUri = `at://${did}/${collection}/`;
+                const collectionElement = document.createElement('a');
+                collectionElement.className = 'at-uri-link';
+                collectionElement.href = '#';
+                collectionElement.textContent = atUri;
+                collectionElement.onclick = (e) => {
+                    e.preventDefault();
+                    loadCollectionRecords(handle, collection, did);
+                    // Close collections and update toggle
+                    document.getElementById('collectionsList').style.display = 'none';
+                    document.getElementById('collectionsToggle').textContent = '[-] Collections';
+                };
+                collectionsList.appendChild(collectionElement);
+            });
+            
+            document.getElementById('collectionsSection').style.display = 'block';
+        }
+        
+    } catch (error) {
+        collectionsList.innerHTML = '<div class="error">コレクションの読み込みに失敗しました: ' + error.message + '</div>';
+        document.getElementById('collectionsSection').style.display = 'block';
+    }
+}
+
+// Load collection records
+async function loadCollectionRecords(handle, collection, did) {
+    const recordsList = document.getElementById('recordsList');
+    
+    recordsList.innerHTML = '<div class="loading">レコードを読み込み中...</div>';
+    
+    try {
+        // Try with syu.is first
+        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=${collection}`);
+        let usedPds = AT_PROTOCOL_CONFIG.primary.pds;
+        
+        // If that fails, try with bsky.social
+        if (!response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=${collection}`);
+            usedPds = AT_PROTOCOL_CONFIG.fallback.pds;
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to load records');
+        }
+        
+        const data = await response.json();
+        
+        // Display records as AT URI links
+        recordsList.innerHTML = '';
+        
+        // Add collection info for records
+        const collectionInfo = document.createElement('div');
+        collectionInfo.className = 'collection-info';
+        collectionInfo.innerHTML = `<strong>${collection}</strong>`;
+        recordsList.appendChild(collectionInfo);
+        
+        data.records.forEach(record => {
+            const atUri = record.uri;
+            const recordElement = document.createElement('a');
+            recordElement.className = 'at-uri-link';
+            recordElement.href = '#';
+            recordElement.textContent = atUri;
+            recordElement.onclick = (e) => {
+                e.preventDefault();
+                showAtUriModal(atUri);
+            };
+            recordsList.appendChild(recordElement);
+        });
+        
+        document.getElementById('recordsSection').style.display = 'block';
+        
+    } catch (error) {
+        recordsList.innerHTML = '<div class="error">レコードの読み込みに失敗しました: ' + error.message + '</div>';
+        document.getElementById('recordsSection').style.display = 'block';
+    }
+}
+
+// Show AT URI modal
+function showAtUriModal(uri) {
+    const modal = document.getElementById('atUriModal');
+    const content = document.getElementById('atUriContent');
+    
+    content.innerHTML = '<div class="loading">レコードを読み込み中...</div>';
+    modal.style.display = 'flex';
+    
+    // Load record data
+    loadAtUriRecord(uri, content);
+}
+
+// Load AT URI record
+async function loadAtUriRecord(uri, contentElement) {
+    try {
+        const parts = uri.replace('at://', '').split('/');
+        const repo = parts[0];
+        const collection = parts[1];
+        const rkey = parts[2];
+        
+        // Try with syu.is first
+        let response = await fetch(`${AT_PROTOCOL_CONFIG.primary.pds}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`);
+        
+        // If that fails, try with bsky.social
+        if (!response.ok) {
+            response = await fetch(`${AT_PROTOCOL_CONFIG.fallback.pds}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`);
+        }
+        
+        if (!response.ok) {
+            throw new Error('Failed to load record');
+        }
+        
+        const data = await response.json();
+        
+        contentElement.innerHTML = `
+            <div style="padding: 20px;">
+                <h3>AT URI Record</h3>
+                <div style="font-family: monospace; font-size: 14px; color: #666; margin-bottom: 20px; word-break: break-all;">
+                    ${uri}
+                </div>
+                <div style="font-size: 12px; color: #999; margin-bottom: 20px;">
+                    Repo: ${repo} | Collection: ${collection} | RKey: ${rkey}
+                </div>
+                <h4>Record Data</h4>
+                <pre style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow: auto;">${JSON.stringify(data, null, 2)}</pre>
+            </div>
+        `;
+    } catch (error) {
+        contentElement.innerHTML = `
+            <div style="padding: 20px; color: red;">
+                <strong>Error:</strong> ${error.message}
+                <div style="margin-top: 10px; font-size: 12px;">
+                    <strong>URI:</strong> ${uri}
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Close AT URI modal
+function closeAtUriModal(event) {
+    const modal = document.getElementById('atUriModal');
+    if (event && event.target !== modal) {
+        return;
+    }
+    modal.style.display = 'none';
+}
+
+// Initialize AT URI click handlers
+document.addEventListener('DOMContentLoaded', function() {
+    // Add click handlers to existing AT URIs
+    document.querySelectorAll('.at-uri').forEach(element => {
+        element.addEventListener('click', function() {
+            const uri = this.getAttribute('data-at-uri');
+            showAtUriModal(uri);
+        });
+    });
+    
+    // ESC key to close modal
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape') {
+            closeAtUriModal();
+        }
+    });
+    
+    // Enter key to search
+    document.getElementById('handleInput').addEventListener('keydown', function(event) {
+        if (event.key === 'Enter') {
+            searchUser();
+        }
+    });
+    
+});
+
+// Toggle collections visibility
+function toggleCollections() {
+    const collectionsList = document.getElementById('collectionsList');
+    const toggleButton = document.getElementById('collectionsToggle');
+    
+    if (collectionsList.style.display === 'none') {
+        collectionsList.style.display = 'block';
+        toggleButton.textContent = '[-] Collections';
+    } else {
+        collectionsList.style.display = 'none';
+        toggleButton.textContent = '[+] Collections';
+    }
+}
--- a/my-blog/static/js/theme.js
+++ b/my-blog/static/js/theme.js
@@ -84,11 +84,10 @@ class Theme {
    setupLogoAnimations() {
        // Pure CSS animations are handled by the svg-animation-package.css
        // This method is reserved for any future JavaScript-based enhancements
-        console.log('Logo animations initialized (CSS-based)');
    }
 }

 // Initialize theme when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
    new Theme();
-});
+});
--- a/my-blog/static/oauth/index.html
+++ b/my-blog/static/oauth/index.html
@@ -1,3 +1,3 @@
 <!-- OAuth Comment System - Load globally for session management -->
-<script type="module" crossorigin src="/assets/comment-atproto-D0RrISz4.js"></script>
-<link rel="stylesheet" crossorigin href="/assets/comment-atproto-BUFiApUA.css">
+<script type="module" crossorigin src="/assets/comment-atproto-B2YEFA6R.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-BHjafP79.css">
--- a/my-blog/templates/at-browser-assets.html
+++ b/my-blog/templates/at-browser-assets.html
@@ -0,0 +1,61 @@
+<!-- AT Browser Integration - Temporarily disabled to fix site display -->
+<!-- 
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="/assets/pds-browser.umd.js"></script>
+<script>
+  // AT Browser integration - needs debugging
+  console.log('AT Browser integration temporarily disabled');
+</script>
+-->
+
+<style>
+  /* AT Browser Modal Styles */
+  .at-uri-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+  
+  .at-uri-modal-content {
+    background-color: white;
+    border-radius: 8px;
+    max-width: 800px;
+    max-height: 600px;
+    width: 90%;
+    height: 80%;
+    overflow: auto;
+    position: relative;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .at-uri-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    z-index: 1001;
+    padding: 5px 10px;
+  }
+  
+  /* AT URI Link Styles */
+  [data-at-uri] {
+    color: #1976d2;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  
+  [data-at-uri]:hover {
+    color: #1565c0;
+  }
+</style>
--- a/my-blog/templates/base.html
+++ b/my-blog/templates/base.html
@@ -12,6 +12,7 @@
    <!-- Stylesheets -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/svg-animation-package.css">
+    <link rel="stylesheet" href="/css/pds.css">
    <link rel="stylesheet" href="/pkg/icomoon/style.css">
    <link rel="stylesheet" href="/pkg/font-awesome/css/all.min.css">
    
@@ -48,7 +49,18 @@
                        </svg>
                    </a>
                </div>
-                <div class="header-actions">
+																<div class="header-actions">
+																	<!-- User Handle Input Form -->
+																	<div class="pds-search-section">
+																		<form class="pds-search-form" onsubmit="searchUser(); return false;">
+																			<div class="form-group">
+																				<input type="text" id="handleInput" placeholder="at://syui.ai" value="syui.ai" />
+																				<button type="submit" id="searchButton" class="pds-btn">
+																				@
+																				</button>
+																			</div>
+																		</form>
+																	</div>
                    <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
                        <span class="ai-icon icon-ai"></span>
                        ai
@@ -61,7 +73,10 @@
        <div class="ask-ai-panel" id="askAiPanel" style="display: none;">
            <div class="ask-ai-content">
                <div id="authCheck" class="auth-check">
-                    <p>🔒 Please login with ATProto to use Ask AI feature</p>
+                    <div class="loading-content">
+                        <div class="loading-spinner"></div>
+                        <p>Loading...</p>
+                    </div>
                </div>
                
                <div id="chatForm" class="ask-ai-form" style="display: none;">
@@ -72,8 +87,11 @@
                <div id="chatHistory" class="chat-history" style="display: none;"></div>
            </div>
        </div>
-        
+
        <main class="main-content">
+								<!-- Pds Panel -->
+								{% include "pds-header.html" %}
+
            {% block content %}{% endblock %}
        </main>

@@ -89,9 +107,46 @@
        <p>© {{ config.author }}</p>
    </footer>

+    <script>
+        // Config variables from Hugo
+        window.OAUTH_CONFIG = {
+            {% if config.oauth.pds %}
+            pds: "{{ config.oauth.pds }}",
+            {% else %}
+            pds: "syu.is",
+            {% endif %}
+            {% if config.oauth.admin %}
+            admin: "{{ config.oauth.admin }}",
+            {% else %}
+            admin: "ai.syui.ai",
+            {% endif %}
+            {% if config.oauth.collection %}
+            collection: "{{ config.oauth.collection }}"
+            {% else %}
+            collection: "ai.syui.log"
+            {% endif %}
+        };
+    </script>
    <script src="/js/ask-ai.js"></script>
+    <script src="/js/pds.js"></script>
    <script src="/js/theme.js"></script>
+    <script src="/js/image-comparison.js"></script>
+    
+    <!-- Mermaid support -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+    <script>
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'neutral',
+            securityLevel: 'loose',
+            themeVariables: {
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+                fontSize: '14px'
+            }
+        });
+    </script>
    
    {% include "oauth-assets.html" %}
+    {% include "at-browser-assets.html" %}
 </body>
 </html>
--- a/my-blog/templates/game.html
+++ b/my-blog/templates/game.html
@@ -0,0 +1,135 @@
+{% extends "base.html" %}
+
+{% block title %}Game - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div id="gameContainer" class="game-container">
+    <div id="gameAuth" class="game-auth-section">
+        <h1>Login to Play</h1>
+        <p>Please authenticate with your AT Protocol account to access the game.</p>
+        <div id="authRoot"></div>
+    </div>
+    <div id="gameFrame" class="game-frame-container" style="display: none;">
+        <iframe 
+            id="pixelStreamingFrame"
+            src="https://verse.syui.ai/simple-noui.html"
+            frameborder="0"
+            allowfullscreen
+            allow="microphone; camera; fullscreen; autoplay"
+            class="pixel-streaming-iframe"
+        ></iframe>
+    </div>
+</div>
+
+<style>
+/* Game specific styles */
+.game-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: #000;
+    overflow: hidden;
+}
+
+.game-auth-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    color: white;
+}
+
+.game-auth-section h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
+.game-auth-section p {
+    font-size: 1.2em;
+    margin-bottom: 30px;
+    color: #ccc;
+}
+
+.game-frame-container {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+}
+
+.pixel-streaming-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Override auth button for game page */
+.game-auth-section .auth-section {
+    background: transparent;
+    box-shadow: none;
+}
+
+.game-auth-section .auth-button {
+    font-size: 1.2em;
+    padding: 12px 30px;
+}
+
+/* Hide header and footer on game page */
+body:has(.game-container) header,
+body:has(.game-container) footer,
+body:has(.game-container) nav {
+    display: none !important;
+}
+
+/* Remove any body padding/margin for full screen game */
+body:has(.game-container) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+</style>
+
+<script>
+// Wait for OAuth component to be loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if user is already authenticated
+    const checkAuthStatus = () => {
+        // Check if OAuth components are available and user is authenticated
+        if (window.currentUser && window.currentAgent) {
+            showGame();
+            return true;
+        }
+        return false;
+    };
+
+    // Show game iframe
+    const showGame = () => {
+        document.getElementById('gameAuth').style.display = 'none';
+        document.getElementById('gameFrame').style.display = 'block';
+    };
+
+    // Listen for OAuth success
+    window.addEventListener('oauth-success', function(event) {
+        console.log('OAuth success:', event.detail);
+        showGame();
+    });
+
+    // Check auth status on load
+    if (!checkAuthStatus()) {
+        // Check periodically if OAuth components are loaded
+        const authCheckInterval = setInterval(() => {
+            if (checkAuthStatus()) {
+                clearInterval(authCheckInterval);
+            }
+        }, 500);
+    }
+});
+</script>
+
+<!-- Include OAuth assets -->
+{% include "oauth-assets.html" %}
+{% endblock %}
--- a/my-blog/templates/pds-header.html
+++ b/my-blog/templates/pds-header.html
@@ -0,0 +1,48 @@
+<div class="pds-container">
+    <div class="pds-header">
+    </div>
+    
+
+    
+    <!-- Current User DID -->
+    <div id="userDidSection" class="user-did-section" style="display: none;">
+        <div class="pds-display">
+            <strong>PDS:</strong> <span id="userPdsText"></span>
+        </div>
+        <div class="handle-display">
+            <strong>Handle:</strong> <span id="userHandleText"></span>
+        </div>
+        <div class="did-display">
+            <span id="userDidText"></span>
+        </div>
+    </div>
+    
+    <!-- Collection List -->
+    <div id="collectionsSection" class="collections-section" style="display: none;">
+        <div class="collections-header">
+            <button id="collectionsToggle" class="collections-toggle" onclick="toggleCollections()">[+] Collections</button>
+        </div>
+        <div id="collectionsList" class="collections-list" style="display: none;">
+            <!-- Collections will be populated here -->
+        </div>
+    </div>
+    
+    <!-- AT URI Records -->
+    <div id="recordsSection" class="records-section" style="display: none;">
+        <div id="recordsList" class="records-list">
+            <!-- Records will be populated here -->
+        </div>
+    </div>
+    
+    
+</div>
+
+<!-- AT URI Modal -->
+<div id="atUriModal" class="at-uri-modal-overlay" style="display: none;" onclick="closeAtUriModal(event)">
+    <div class="at-uri-modal-content">
+        <button class="at-uri-modal-close" onclick="closeAtUriModal()">&times;</button>
+        <div id="atUriContent"></div>
+    </div>
+</div>
+
+
--- a/my-blog/templates/pds.html
+++ b/my-blog/templates/pds.html
@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{% block title %}at-uri browser - {{ config.title }}{% endblock %}
+
+{% block content %}
+{% endblock %}
--- a/my-blog/templates/post.html
+++ b/my-blog/templates/post.html
@@ -13,6 +13,7 @@
                <span class="article-lang">{{ post.language }}</span>
                {% endif %}
            </div>
+            {% if not post.extra.type or post.extra.type != "ai" %}
            <div class="article-actions">
                {% if post.markdown_url %}
                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
@@ -25,29 +26,35 @@
                </a>
                {% endif %}
            </div>
+            {% endif %}
        </header>
        
-        <div class="article-body">
-            {{ post.content | safe }}
-        </div>
-        
-        <div id="comment-atproto"></div>
-    </article>
-    
-    <aside class="article-sidebar">
+        {% if not post.extra.type or post.extra.type != "ai" %}
        <nav class="toc">
            <h3>Contents</h3>
            <div id="toc-content">
                <!-- TOC will be generated by JavaScript -->
            </div>
        </nav>
-    </aside>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        {% endif %}
+        
+        <div id="comment-atproto"></div>
+    </article>
 </div>

+
 <script>
 // Generate table of contents
 function generateTableOfContents() {
    const tocContainer = document.getElementById('toc-content');
+    if (!tocContainer) {
+        return;
+    }
+    
    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) {
--- a/oauth/.env.production
+++ b/oauth/.env.production
@@ -16,4 +16,4 @@ VITE_AI_SYSTEM_PROMPT="あなたは6歳の女の子アイです。明るく元

 # Production settings - Disable development features
 VITE_ENABLE_TEST_UI=false
-VITE_ENABLE_DEBUG=false
+VITE_ENABLE_DEBUG=true
--- a/oauth/package.json
+++ b/oauth/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ailog-oauth",
-  "version": "0.2.5",
+  "version": "0.3.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -8,10 +8,13 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@atproto/api": "^0.15.12",
+    "@atproto/oauth-client-browser": "^0.3.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "@atproto/api": "^0.15.12",
-    "@atproto/oauth-client-browser": "^0.3.19"
+    "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
--- a/oauth/src/App.css
+++ b/oauth/src/App.css
@@ -34,13 +34,103 @@ body {
  background: var(--background);
 }

+/* Profile Form Styles */
+.profile-form-container {
+  background: var(--background-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.profile-form-container h3 {
+  margin: 0 0 16px 0;
+  color: var(--text);
+}
+
+.profile-form .form-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.profile-form .form-group {
+  flex: 1;
+}
+
+.profile-form .form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.profile-form .form-group input,
+.profile-form .form-group select,
+.profile-form .form-group textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.profile-form .form-group input:focus,
+.profile-form .form-group select:focus,
+.profile-form .form-group textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.profile-form .form-group textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.profile-form .submit-btn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.profile-form .submit-btn:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+
+.profile-form .submit-btn:disabled {
+  background: var(--text-secondary);
+  cursor: not-allowed;
+}
+
+/* Profile Record List Styles */
+.profile-record-list .record-item.admin {
+  border-left: 4px solid var(--primary);
+}
+
+.profile-record-list .admin-badge {
+  background: var(--primary);
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-weight: 500;
+  margin-left: 8px;
+}
+
 /* Header */
 .oauth-app-header {
-  background: var(--background);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  width: 100%;
+	background: var(--background);
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	width: 100%;
 }

 .oauth-header-content {
@@ -49,7 +139,7 @@ body {
  /* align-items: center; */
  max-width: 800px;
  margin: 0 auto;
-  padding: 45px 0;
+  padding: 30px 0;
  width: 100%;
 }

@@ -197,7 +287,6 @@ body {
 .auth-section {
  display: flex;
  align-items: center;
-  gap: 8px;
 }

 .auth-section.search-bar-layout {
@@ -212,10 +301,10 @@ body {
 .auth-section.search-bar-layout .handle-input {
  flex: 1;
  margin: 0;
-  padding: 10px 15px;
-  font-size: 16px;
+  padding: 9px 15px;
+  font-size: 13px;
  border: 1px solid var(--border);
-  border-radius: 8px 0 0 8px;
+  border-radius: 4px 0 0 4px;
  background: var(--background);
  outline: none;
  transition: border-color 0.2s;
@@ -229,12 +318,13 @@ body {
 }

 .auth-section.search-bar-layout .auth-button {
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 4px 4px 0;
  border: 1px solid var(--primary);
  border-left: none;
  margin: 0;
-  padding: 10px 15px;
-  height: 40px;
+  padding: 9px 15px;
+  min-width: 50px;
+  min-height: 30px;
 }

 /* Auth Button */
@@ -242,15 +332,26 @@ body {
  background: var(--primary);
  color: white;
  border: none;
-  border-radius: 6px;
-  padding: 8px 16px;
+  border-radius: 4px;
+  padding: 9px 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
-  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
+  min-width: 50px;
+  min-height: 30px;
+}
+
+/* Loading spinner for auth button */
+.auth-button.loading i {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }

 .auth-button:hover {
@@ -264,7 +365,7 @@ body {

 .main-content {
 	grid-area: main;
-	max-width: 1000px;
+	max-width: 800px;
 	margin: 0 auto;
 	padding: 0px;
 	width: 100%;
@@ -332,10 +433,6 @@ body {
  margin-bottom: 16px;
 }

-.form-group {
-  margin-bottom: 16px;
-}
-
 .form-group label {
  display: block;
  font-weight: 700;
@@ -570,13 +667,10 @@ body {
  margin-bottom: 16px;
 }

-.user-message {
-  margin-left: 40px;
-}
-
-.ai-message {
-  margin-right: 40px;
-}
+/*
+.user-message { margin-left: 40px; }
+.ai-message { margin-right: 40px; }
+*/

 .message-header {
  display: flex;
@@ -832,10 +926,6 @@ body {
    max-width: 100% !important;
  }
  
-  .form-group {
-    margin-bottom: 15px !important;
-  }
-  
  .form-input, .form-textarea {
    width: 100% !important;
    max-width: 100% !important;
@@ -983,6 +1073,10 @@ body {
    width: 100%;
    justify-content: center;
  }
+		article.article-content {
+			max-width: 100%;
+		}
+
 }

 /* Avatar Styles */
@@ -1183,12 +1277,6 @@ body {
 /* Chat Conversation Styles */
 .chat-conversation {
  margin-bottom: 32px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.chat-conversation:last-child {
-  border-bottom: none;
 }

 .chat-message.comment-style {
@@ -1252,10 +1340,144 @@ body {
 .message-content {
  color: var(--text);
  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+		word-wrap: anywhere;
+}
+
+/* Markdown styles */
+.message-content h1,
+.message-content h2,
+.message-content h3,
+.message-content h4,
+.message-content h5,
+.message-content h6 {
+  margin: 16px 0 8px 0;
+  font-weight: 600;
+}
+
+.message-content h1 { font-size: 1.5em; }
+.message-content h2 { font-size: 1.3em; }
+.message-content h3 { font-size: 1.1em; }
+
+.message-content p {
+  margin: 8px 0;
+}
+
+.message-content pre {
+  background: var(--background-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  margin: 12px 0;
+  overflow-x: auto;
+}
+
+.message-content code {
+  background: var(--background-secondary);
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 0.9em;
+}
+
+.message-content pre code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: 0.9em;
+}
+
+.message-content ul,
+.message-content ol {
+  margin: 8px 0;
+  padding-left: 24px;
+}
+
+.message-content li {
+  margin: 4px 0;
+}
+
+.message-content blockquote {
+  border-left: 4px solid var(--border);
+  padding-left: 16px;
+  margin: 12px 0;
+  color: var(--text-secondary);
+}
+
+.message-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 12px 0;
+}
+
+.message-content th,
+.message-content td {
+  border: 1px solid var(--border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.message-content th {
+  background: var(--background-secondary);
+  font-weight: 600;
+}
+
+.message-content a {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.message-content a:hover {
+  text-decoration: underline;
+}
+
+.message-content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 16px 0;
 }

 .record-actions {
  flex-shrink: 0;
 }
+
+.bluesky-footer {
+  text-align: center;
+  padding: 20px;
+  color: var(--primary);
+  font-size: 24px;
+}
+
+.bluesky-footer i {
+  transition: color 0.2s ease;
+}
+
+.bluesky-footer i:hover {
+  color: var(--primary-hover);
+}
+
+/* Custom code block styling */
+.message-content pre {
+  background: #2d3748 !important;
+  border: 1px solid #4a5568 !important;
+  border-radius: 6px;
+  padding: 12px;
+  margin: 12px 0;
+  overflow-x: auto;
+}
+
+.message-content pre code {
+  background: transparent !important;
+  color: #e2e8f0 !important;
+  font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.message-content code {
+  background: #2d3748 !important;
+  color: #e2e8f0 !important;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-size: 14px;
+}
--- a/oauth/src/App.jsx
+++ b/oauth/src/App.jsx
@@ -7,13 +7,14 @@ import { usePageContext } from './hooks/usePageContext.js'
 import AuthButton from './components/AuthButton.jsx'
 import RecordTabs from './components/RecordTabs.jsx'
 import CommentForm from './components/CommentForm.jsx'
+import ProfileForm from './components/ProfileForm.jsx'
 import AskAI from './components/AskAI.jsx'
 import TestUI from './components/TestUI.jsx'
 import OAuthCallback from './components/OAuthCallback.jsx'

 export default function App() {
  const { user, agent, loading: authLoading, login, logout } = useAuth()
-  const { adminData, langRecords, commentRecords, loading: dataLoading, error, retryCount, refresh: refreshAdminData } = useAdminData()
+  const { adminData, langRecords, commentRecords, chatRecords: adminChatRecords, chatHasMore, loading: dataLoading, error, refresh: refreshAdminData, loadMoreChat } = useAdminData()
  const { userComments, chatRecords, loading: userLoading, refresh: refreshUserData } = useUserData(adminData)
  const [userChatRecords, setUserChatRecords] = useState([])
  const [userChatLoading, setUserChatLoading] = useState(false)
@@ -21,6 +22,19 @@ export default function App() {
  const [showAskAI, setShowAskAI] = useState(false)
  const [showTestUI, setShowTestUI] = useState(false)
  
+  // Check if current page has matching chat records (AI posts always have chat records)
+  const isAiPost = !pageContext.isTopPage && Array.isArray(adminChatRecords) && adminChatRecords.some(chatPair => {
+    const recordUrl = chatPair.question?.value?.post?.url
+    if (!recordUrl) return false
+    
+    try {
+      const recordRkey = new URL(recordUrl).pathname.split('/').pop()?.replace(/\.html$/, '')
+      return recordRkey === pageContext.rkey
+    } catch {
+      return false
+    }
+  })
+  
  // 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'
@@ -74,7 +88,7 @@ export default function App() {
      
      setUserChatRecords(chatPairs)
    } catch (error) {
-      console.error('Failed to fetch user chat records:', error)
+      // Silently fail - no error logging
      setUserChatRecords([])
    } finally {
      setUserChatLoading(false)
@@ -86,6 +100,32 @@ export default function App() {
    fetchUserChatRecords()
  }, [user, agent])

+  // Expose AI profile data to blog's ask-ai.js
+  useEffect(() => {
+    if (adminData?.profile) {
+      // Make AI profile data available globally for ask-ai.js
+      window.aiProfileData = {
+        did: adminData.did,
+        handle: adminData.profile.handle,
+        displayName: adminData.profile.displayName,
+        avatar: adminData.profile.avatar
+      }
+      
+      // Dispatch event to notify ask-ai.js
+      window.dispatchEvent(new CustomEvent('aiProfileLoaded', {
+        detail: window.aiProfileData
+      }))
+    }
+  }, [adminData])
+
+  // Expose current user and agent for game page
+  useEffect(() => {
+    if (user && agent) {
+      window.currentUser = user
+      window.currentAgent = agent
+    }
+  }, [user, agent])
+
  // Event listeners for blog communication
  useEffect(() => {
    // Clear OAuth completion flag once app is loaded
@@ -99,7 +139,6 @@ export default function App() {
      const { question } = event.detail
      if (question && adminData && user && agent) {
        try {
-          console.log('Processing AI question:', question)
          
          // AI設定
          const aiConfig = {
@@ -146,8 +185,6 @@ Answer:`

          const data = await response.json()
          const answer = data.response || 'エラーが発生しました'
-          
-          console.log('AI response received:', answer)

          // Save conversation to ATProto
          try {
@@ -219,14 +256,13 @@ Answer:`
              record: answerRecord
            })
            
-            console.log('Question and answer saved to ATProto')
            
            // Refresh chat records after saving
            setTimeout(() => {
              fetchUserChatRecords()
            }, 1000)
          } catch (saveError) {
-            console.error('Failed to save conversation:', saveError)
+            // Silently fail - no error logging
          }

          // Send response to blog
@@ -245,8 +281,7 @@ Answer:`
          }))
          
        } catch (error) {
-          console.error('Failed to process AI question:', error)
-          // Send error response to blog
+          // Silently fail - send error response to blog without logging
          window.dispatchEvent(new CustomEvent('aiResponseReceived', {
            detail: {
              question: question,
@@ -334,43 +369,13 @@ Answer:`
  }

  if (error) {
-    return (
-      <div style={{ padding: '20px', textAlign: 'center' }}>
-        <h1>エラー</h1>
-        <div style={{ 
-          background: '#fee', 
-          color: '#c33', 
-          padding: '15px', 
-          borderRadius: '5px',
-          margin: '20px auto',
-          maxWidth: '500px',
-          border: '1px solid #fcc'
-        }}>
-          <p><strong>エラー:</strong> {error}</p>
-          {retryCount > 0 && (
-            <p><small>自動リトライ中... ({retryCount}/3)</small></p>
-          )}
-        </div>
-        <button 
-          onClick={refreshAdminData}
-          style={{
-            background: '#007bff',
-            color: 'white',
-            border: 'none',
-            padding: '10px 20px',
-            borderRadius: '5px',
-            cursor: 'pointer',
-            fontSize: '16px'
-          }}
-        >
-          再読み込み
-        </button>
-      </div>
-    )
+    // Silently hide component on error - no error display
+    return null
  }

  return (
    <div className="app">
+      {!isAiPost && (
      <header className="oauth-app-header">
        <div className="oauth-header-content">
          {user && (
@@ -411,6 +416,7 @@ Answer:`
          </div>
        </div>
      </header>
+      )}

      <div className="main-content">
        <div className="content-area">
@@ -428,11 +434,27 @@ Answer:`
            </div>
          )}

+          {user && (
+            <div className="profile-form">
+              <ProfileForm
+                user={user}
+                agent={agent}
+                apiConfig={adminData.apiConfig}
+                onProfilePosted={() => {
+                  refreshAdminData?.()
+                  refreshUserData?.()
+                }}
+              />
+            </div>
+          )}
+
          <RecordTabs 
            langRecords={langRecords}
            commentRecords={commentRecords}
            userComments={userComments}
-            chatRecords={chatRecords}
+            chatRecords={adminChatRecords}
+            chatHasMore={chatHasMore}
+            onLoadMoreChat={loadMoreChat}
            userChatRecords={userChatRecords}
            userChatLoading={userChatLoading}
            baseRecords={adminData.records}
@@ -464,9 +486,6 @@ Answer:`
            </div>
          )}
          
-          <div className="bluesky-footer">
-            <i className="fab fa-bluesky"></i>
-          </div>
        </div>
      </div>
    </div>
--- a/oauth/src/api/atproto.js
+++ b/oauth/src/api/atproto.js
@@ -1,5 +1,5 @@
 // ATProto API client
-import { ATProtoError, logError } from '../utils/errorHandler.js'
+import { ATProtoError } from '../utils/errorHandler.js'

 const ENDPOINTS = {
  describeRepo: 'com.atproto.repo.describeRepo',
@@ -36,12 +36,10 @@ async function request(url, options = {}) {
        408,
        { url }
      )
-      logError(timeoutError, 'Request Timeout')
      throw timeoutError
    }
    
    if (error instanceof ATProtoError) {
-      logError(error, 'API Request')
      throw error
    }
    
@@ -51,21 +49,20 @@ async function request(url, options = {}) {
      0,
      { url, originalError: error.message }
    )
-    logError(networkError, 'Network Error')
    throw networkError
  }
 }

 export const atproto = {
  async getDid(pds, handle) {
-    const res = await request(`https://${pds}/xrpc/${ENDPOINTS.describeRepo}?repo=${handle}`)
+    const endpoint = pds.startsWith('http') ? pds : `https://${pds}`
+    const res = await request(`${endpoint}/xrpc/${ENDPOINTS.describeRepo}?repo=${handle}`)
    return res.did
  },

  async getProfile(bsky, actor) {
    // Skip test DIDs
    if (actor && actor.includes('test-')) {
-      console.log('Skipping profile fetch for test DID:', actor)
      return {
        did: actor,
        handle: 'test.user',
@@ -80,16 +77,22 @@ export const atproto = {
    // Allow public.api.bsky.app and bsky.syu.is, redirect other PDS endpoints
    if (!bsky.includes('public.api.bsky.app') && !bsky.includes('bsky.syu.is')) {
      // If it's a PDS endpoint that doesn't support getProfile, redirect to public API
-      console.warn(`getProfile called with PDS endpoint ${bsky}, redirecting to public API`)
      apiEndpoint = 'https://public.api.bsky.app'
    }
    
    return await request(`${apiEndpoint}/xrpc/${ENDPOINTS.getProfile}?actor=${actor}`)
  },

-  async getRecords(pds, repo, collection, limit = 10) {
-    const res = await request(`${pds}/xrpc/${ENDPOINTS.listRecords}?repo=${repo}&collection=${collection}&limit=${limit}`)
-    return res.records || []
+  async getRecords(pds, repo, collection, limit = 10, cursor = null) {
+    let url = `${pds}/xrpc/${ENDPOINTS.listRecords}?repo=${repo}&collection=${collection}&limit=${limit}`
+    if (cursor) {
+      url += `&cursor=${cursor}`
+    }
+    const res = await request(url)
+    return {
+      records: res.records || [],
+      cursor: res.cursor || null
+    }
  },

  async searchPlc(plc, did) {
@@ -125,8 +128,10 @@ export const collections = {
    if (cached) return cached
    
    const data = await atproto.getRecords(pds, repo, collection, limit)
-    dataCache.set(cacheKey, data)
-    return data
+    // Extract records array for backward compatibility
+    const records = data.records || data
+    dataCache.set(cacheKey, records)
+    return records
  },

  async getLang(pds, repo, collection, limit = 10) {
@@ -135,8 +140,10 @@ export const collections = {
    if (cached) return cached
    
    const data = await atproto.getRecords(pds, repo, `${collection}.chat.lang`, limit)
-    dataCache.set(cacheKey, data)
-    return data
+    // Extract records array for backward compatibility
+    const records = data.records || data
+    dataCache.set(cacheKey, records)
+    return records
  },

  async getComment(pds, repo, collection, limit = 10) {
@@ -145,17 +152,29 @@ export const collections = {
    if (cached) return cached
    
    const data = await atproto.getRecords(pds, repo, `${collection}.chat.comment`, limit)
-    dataCache.set(cacheKey, data)
-    return data
+    // Extract records array for backward compatibility
+    const records = data.records || data
+    dataCache.set(cacheKey, records)
+    return records
  },

-  async getChat(pds, repo, collection, limit = 10) {
+  async getChat(pds, repo, collection, limit = 10, cursor = null) {
+    // Don't use cache for pagination requests
+    if (cursor) {
+      const result = await atproto.getRecords(pds, repo, `${collection}.chat`, limit, cursor)
+      return result
+    }
+    
    const cacheKey = dataCache.generateKey('chat', pds, repo, collection, limit)
    const cached = dataCache.get(cacheKey)
-    if (cached) return cached
+    if (cached) {
+      // Ensure cached data has the correct structure
+      return Array.isArray(cached) ? { records: cached, cursor: null } : cached
+    }
    
    const data = await atproto.getRecords(pds, repo, `${collection}.chat`, limit)
-    dataCache.set(cacheKey, data)
+    // Cache only the records array for backward compatibility
+    dataCache.set(cacheKey, data.records || data)
    return data
  },

@@ -165,8 +184,10 @@ export const collections = {
    if (cached) return cached
    
    const data = await atproto.getRecords(pds, repo, `${collection}.user`, limit)
-    dataCache.set(cacheKey, data)
-    return data
+    // Extract records array for backward compatibility
+    const records = data.records || data
+    dataCache.set(cacheKey, records)
+    return records
  },

  async getUserComments(pds, repo, collection, limit = 10) {
@@ -175,8 +196,22 @@ export const collections = {
    if (cached) return cached
    
    const data = await atproto.getRecords(pds, repo, collection, limit)
-    dataCache.set(cacheKey, data)
-    return data
+    // Extract records array for backward compatibility
+    const records = data.records || data
+    dataCache.set(cacheKey, records)
+    return records
+  },
+
+  async getProfiles(pds, repo, collection, limit = 100) {
+    const cacheKey = dataCache.generateKey('profiles', pds, repo, collection, limit)
+    const cached = dataCache.get(cacheKey)
+    if (cached) return cached
+    
+    const data = await atproto.getRecords(pds, repo, `${collection}.profile`, limit)
+    // Extract records array for backward compatibility
+    const records = data.records || data
+    dataCache.set(cacheKey, records)
+    return records
  },

  // 投稿後にキャッシュを無効化
--- a/oauth/src/components/AuthButton.jsx
+++ b/oauth/src/components/AuthButton.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { logger } from '../utils/logger.js'

 export default function AuthButton({ user, onLogin, onLogout, loading }) {
  const [handleInput, setHandleInput] = useState('')
@@ -12,7 +13,7 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
    try {
      await onLogin(handleInput.trim())
    } catch (error) {
-      console.error('Login failed:', error)
+      logger.error('Login failed:', error)
      alert('ログインに失敗しました: ' + error.message)
    } finally {
      setIsLoading(false)
@@ -68,9 +69,9 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
        type="button"
        onClick={handleSubmit}
        disabled={isLoading || !handleInput.trim()}
-        className="auth-button"
+        className={`auth-button ${isLoading ? 'loading' : ''}`}
      >
-        {isLoading ? 'Loading...' : <i className="fab fa-bluesky"></i>}
+        <i className={isLoading ? "fas fa-spinner" : "fab fa-bluesky"}></i>
      </button>
    </div>
  )
--- a/oauth/src/components/AvatarTest.jsx
+++ b/oauth/src/components/AvatarTest.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import Avatar, { AvatarWithCard, AvatarList } from './Avatar.jsx'
 import { getAvatar, batchFetchAvatars, prefetchAvatar } from '../utils/avatar.js'
+import { logger } from '../utils/logger.js'

 /**
 * Test component to demonstrate avatar functionality
@@ -63,7 +64,7 @@ export default function AvatarTest() {
      
      setTestResults(results)
    } catch (error) {
-      console.error('Test failed:', error)
+      logger.error('Test failed:', error)
    } finally {
      setLoading(false)
    }
@@ -78,7 +79,7 @@ export default function AvatarTest() {
        batchResults: Object.fromEntries(avatarMap)
      }))
    } catch (error) {
-      console.error('Batch test failed:', error)
+      logger.error('Batch test failed:', error)
    } finally {
      setLoading(false)
    }
@@ -94,7 +95,7 @@ export default function AvatarTest() {
        prefetchResult: cachedAvatar
      }))
    } catch (error) {
-      console.error('Prefetch test failed:', error)
+      logger.error('Prefetch test failed:', error)
    } finally {
      setLoading(false)
    }
--- a/oauth/src/components/ChatRecordList.jsx
+++ b/oauth/src/components/ChatRecordList.jsx
@@ -1,6 +1,40 @@
-import React from 'react'
+import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import 'highlight.js/styles/github-dark.css'
+
+// Helper function to get correct web URL based on avatar URL
+function getCorrectWebUrl(avatarUrl) {
+  if (!avatarUrl) return 'https://bsky.app'
+  
+  // If avatar is from bsky.app (main Bluesky), use bsky.app
+  if (avatarUrl.includes('cdn.bsky.app') || avatarUrl.includes('bsky.app')) {
+    return 'https://bsky.app'
+  }
+  
+  // If avatar is from syu.is, use web.syu.is
+  if (avatarUrl.includes('bsky.syu.is') || avatarUrl.includes('syu.is')) {
+    return 'https://syu.is'
+  }
+  
+  // Default to bsky.app
+  return 'https://bsky.app'
+}
+
+export default function ChatRecordList({ chatPairs, chatHasMore, onLoadMoreChat, apiConfig, user = null, agent = null, onRecordDeleted = null }) {
+  const [expandedRecords, setExpandedRecords] = useState(new Set())
+
+  const toggleJsonView = (key) => {
+    const newExpanded = new Set(expandedRecords)
+    if (newExpanded.has(key)) {
+      newExpanded.delete(key)
+    } else {
+      newExpanded.add(key)
+    }
+    setExpandedRecords(newExpanded)
+  }

-export default function ChatRecordList({ chatPairs, apiConfig, user = null, agent = null, onRecordDeleted = null }) {
  if (!chatPairs || chatPairs.length === 0) {
    return (
      <section>
@@ -68,12 +102,30 @@ export default function ChatRecordList({ chatPairs, apiConfig, user = null, agen
                  </div>
                )}
                <div className="user-info">
-                  <div className="display-name">{chatPair.question.value.author?.displayName || chatPair.question.value.author?.handle}</div>
-                  <div className="handle">@{chatPair.question.value.author?.handle}</div>
-                  <div className="timestamp">{new Date(chatPair.question.value.createdAt).toLocaleString()}</div>
+                  <div className="display-name">
+                    {chatPair.question.value.author?.displayName || chatPair.question.value.author?.handle}
+                    {chatPair.question.value.author?.handle === 'syui' && <span className="admin-badge"> Admin</span>}
+                  </div>
+                  <div className="handle">
+                    <a 
+                      href={`${getCorrectWebUrl(chatPair.question.value.author?.avatar)}/profile/${chatPair.question.value.author?.did}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="handle-link"
+                    >
+                      @{chatPair.question.value.author?.handle}
+                    </a>
+                  </div>
                </div>
-                {canDelete(chatPair) && (
-                  <div className="record-actions">
+                <div className="record-actions">
+                  <button
+                    onClick={() => toggleJsonView(`${chatPair.rkey}-question`)}
+                    className={`btn btn-sm ${expandedRecords.has(`${chatPair.rkey}-question`) ? 'btn-outline' : 'btn-primary'}`}
+                    title="Show/Hide JSON"
+                  >
+                    {expandedRecords.has(`${chatPair.rkey}-question`) ? 'hide' : 'json'}
+                  </button>
+                  {canDelete(chatPair) && (
                    <button
                      onClick={() => handleDelete(chatPair)}
                      className="btn btn-danger btn-sm"
@@ -81,10 +133,24 @@ export default function ChatRecordList({ chatPairs, apiConfig, user = null, agen
                    >
                      delete
                    </button>
-                  </div>
-                )}
+                  )}
+                </div>
+              </div>
+              {expandedRecords.has(`${chatPair.rkey}-question`) && (
+                <div className="json-display">
+                  <pre className="json-content">
+                    {JSON.stringify(chatPair.question, null, 2)}
+                  </pre>
+                </div>
+              )}
+              <div className="message-content">
+                <ReactMarkdown 
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeHighlight]}
+                >
+                  {chatPair.question.value.text}
+                </ReactMarkdown>
              </div>
-              <div className="message-content">{chatPair.question.value.text}</div>
            </div>
          )}

@@ -104,30 +170,62 @@ export default function ChatRecordList({ chatPairs, apiConfig, user = null, agen
                  </div>
                )}
                <div className="user-info">
-                  <div className="display-name">{chatPair.answer.value.author?.displayName || chatPair.answer.value.author?.handle}</div>
-                  <div className="handle">@{chatPair.answer.value.author?.handle}</div>
-                  <div className="timestamp">{new Date(chatPair.answer.value.createdAt).toLocaleString()}</div>
+                  <div className="display-name">
+                    {chatPair.answer.value.author?.displayName || chatPair.answer.value.author?.handle}
+                  </div>
+                  <div className="handle">
+                    <a 
+                      href={`${getCorrectWebUrl(chatPair.answer.value.author?.avatar)}/profile/${chatPair.answer.value.author?.did}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="handle-link"
+                    >
+                      @{chatPair.answer.value.author?.handle}
+                    </a>
+                  </div>
+                </div>
+                <div className="record-actions">
+                  <button
+                    onClick={() => toggleJsonView(`${chatPair.rkey}-answer`)}
+                    className={`btn btn-sm ${expandedRecords.has(`${chatPair.rkey}-answer`) ? 'btn-outline' : 'btn-primary'}`}
+                    title="Show/Hide JSON"
+                  >
+                    {expandedRecords.has(`${chatPair.rkey}-answer`) ? 'hide' : 'json'}
+                  </button>
                </div>
              </div>
-              <div className="message-content">{chatPair.answer.value.text}</div>
+              {expandedRecords.has(`${chatPair.rkey}-answer`) && (
+                <div className="json-display">
+                  <pre className="json-content">
+                    {JSON.stringify(chatPair.answer, null, 2)}
+                  </pre>
+                </div>
+              )}
+              <div className="message-content">
+                <ReactMarkdown 
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeHighlight]}
+                >
+                  {chatPair.answer.value.text}
+                </ReactMarkdown>
+              </div>
            </div>
          )}

-          {/* Post metadata */}
-          {chatPair.question?.value.post?.url && (
-            <div className="record-meta">
-              <a 
-                href={chatPair.question.value.post.url} 
-                target="_blank" 
-                rel="noopener noreferrer"
-                className="record-url"
-              >
-                {chatPair.question.value.post.url}
-              </a>
-            </div>
-          )}
        </div>
      ))}
+      
+      {/* Load More Button */}
+      {chatHasMore && onLoadMoreChat && (
+        <div className="bluesky-footer">
+          <i 
+            className="fab fa-bluesky"
+            onClick={onLoadMoreChat}
+            style={{cursor: 'pointer'}}
+            title="続きを読み込む"
+          ></i>
+        </div>
+      )}
    </section>
  )
 }
--- a/oauth/src/components/ProfileForm.jsx
+++ b/oauth/src/components/ProfileForm.jsx
@@ -0,0 +1,166 @@
+import React, { useState } from 'react'
+import { atproto, collections } from '../api/atproto.js'
+import { env } from '../config/env.js'
+import { logger } from '../utils/logger.js'
+
+const ProfileForm = ({ user, agent, apiConfig, onProfilePosted }) => {
+  const [text, setText] = useState('')
+  const [type, setType] = useState('user')
+  const [handle, setHandle] = useState('')
+  const [rkey, setRkey] = useState('')
+  const [posting, setPosting] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    
+    if (!text.trim() || !handle.trim() || !rkey.trim()) {
+      setError('すべてのフィールドを入力してください')
+      return
+    }
+
+    setPosting(true)
+    setError('')
+
+    try {
+      // Get handle information
+      let authorData
+      try {
+        const handleDid = await atproto.getDid(apiConfig.pds, handle)
+        // Use agent to get profile with authentication
+        const profileResponse = await agent.api.app.bsky.actor.getProfile({ actor: handleDid })
+        authorData = profileResponse.data
+      } catch (err) {
+        throw new Error('ハンドルが見つかりません')
+      }
+
+      // Create record using the same pattern as CommentForm
+      const timestamp = new Date().toISOString()
+      const record = {
+        repo: user.did,
+        collection: env.collection,
+        rkey: rkey,
+        record: {
+          $type: env.collection,
+          text: text,
+          type: 'profile',
+          profileType: type, // admin or user
+          author: {
+            did: authorData.did,
+            handle: authorData.handle,
+            displayName: authorData.displayName || authorData.handle,
+            avatar: authorData.avatar || null
+          },
+          createdAt: timestamp,
+          post: {
+            url: window.location.origin,
+            date: timestamp,
+            slug: '',
+            tags: [],
+            title: 'Profile',
+            language: 'ja'
+          }
+        }
+      }
+
+      // Post the record using agent like CommentForm
+      await agent.api.com.atproto.repo.putRecord(record)
+      
+      // Invalidate cache and refresh
+      collections.invalidateCache(env.collection)
+      
+      // Reset form
+      setText('')
+      setType('user')
+      setHandle('')
+      setRkey('')
+      
+      if (onProfilePosted) {
+        onProfilePosted()
+      }
+      
+    } catch (err) {
+      logger.error('Failed to create profile:', err)
+      setError(err.message || 'プロフィールの作成に失敗しました')
+    } finally {
+      setPosting(false)
+    }
+  }
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <div className="profile-form-container">
+      <h3>プロフィール投稿</h3>
+      
+      {error && (
+        <div className="error-message">
+          {error}
+        </div>
+      )}
+      
+      <form onSubmit={handleSubmit} className="profile-form">
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="handle">ハンドル</label>
+            <input
+              type="text"
+              id="handle"
+              value={handle}
+              onChange={(e) => setHandle(e.target.value)}
+              placeholder="例: syui.ai"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="rkey">Rkey</label>
+            <input
+              type="text"
+              id="rkey"
+              value={rkey}
+              onChange={(e) => setRkey(e.target.value)}
+              placeholder="例: syui"
+              required
+            />
+          </div>
+        </div>
+        
+        <div className="form-group">
+          <label htmlFor="type">タイプ</label>
+          <select
+            id="type"
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+          >
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+          </select>
+        </div>
+        
+        <div className="form-group">
+          <label htmlFor="text">プロフィールテキスト</label>
+          <textarea
+            id="text"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="プロフィールの説明を入力してください"
+            rows={4}
+            required
+          />
+        </div>
+        
+        <button 
+          type="submit" 
+          disabled={posting || !text.trim() || !handle.trim() || !rkey.trim()}
+          className="submit-btn"
+        >
+          {posting ? '投稿中...' : '投稿'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default ProfileForm
--- a/oauth/src/components/ProfileRecordList.jsx
+++ b/oauth/src/components/ProfileRecordList.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+
+// Helper function to get correct web URL based on avatar URL
+function getCorrectWebUrl(avatarUrl) {
+  if (!avatarUrl) return 'https://bsky.app'
+  
+  // If avatar is from bsky.app (main Bluesky), use bsky.app
+  if (avatarUrl.includes('cdn.bsky.app') || avatarUrl.includes('bsky.app')) {
+    return 'https://bsky.app'
+  }
+  
+  // If avatar is from syu.is, use web.syu.is
+  if (avatarUrl.includes('bsky.syu.is') || avatarUrl.includes('syu.is')) {
+    return 'https://syu.is'
+  }
+  
+  // Default to bsky.app
+  return 'https://bsky.app'
+}
+
+export default function ProfileRecordList({ profileRecords, apiConfig, user = null, agent = null, onRecordDeleted = null }) {
+  const [expandedRecords, setExpandedRecords] = useState(new Set())
+
+  const toggleJsonView = (uri) => {
+    const newExpanded = new Set(expandedRecords)
+    if (newExpanded.has(uri)) {
+      newExpanded.delete(uri)
+    } else {
+      newExpanded.add(uri)
+    }
+    setExpandedRecords(newExpanded)
+  }
+  if (!profileRecords || profileRecords.length === 0) {
+    return (
+      <section>
+        <p>プロフィールがありません</p>
+      </section>
+    )
+  }
+
+  const handleDelete = async (profile) => {
+    if (!user || !agent || !profile.uri) return
+    
+    const confirmed = window.confirm('このプロフィールを削除しますか？')
+    if (!confirmed) return
+
+    try {
+      const uriParts = profile.uri.split('/')
+      await agent.api.com.atproto.repo.deleteRecord({
+        repo: uriParts[2],
+        collection: uriParts[3],
+        rkey: uriParts[4]
+      })
+
+      if (onRecordDeleted) {
+        onRecordDeleted()
+      }
+    } catch (error) {
+      alert(`削除に失敗しました: ${error.message}`)
+    }
+  }
+
+  const canDelete = (profile) => {
+    if (!user || !agent || !profile.uri) return false
+    
+    // Check if the record is in the current user's repository
+    const recordRepoDid = profile.uri.split('/')[2]
+    return recordRepoDid === user.did
+  }
+
+  return (
+    <section>
+      {profileRecords.map((profile) => (
+        <div key={profile.uri} className="chat-message comment-style">
+          <div className="message-header">
+            {profile.value.author?.avatar ? (
+              <img 
+                src={profile.value.author.avatar} 
+                alt={`${profile.value.author.displayName || profile.value.author.handle} avatar`}
+                className="avatar"
+              />
+            ) : (
+              <div className="avatar">
+                {(profile.value.author?.displayName || profile.value.author?.handle || '?').charAt(0).toUpperCase()}
+              </div>
+            )}
+            <div className="user-info">
+              <div className="display-name">
+                {profile.value.author?.displayName || profile.value.author?.handle}
+                {profile.value.profileType === 'admin' && (
+                  <span className="admin-badge"> Admin</span>
+                )}
+              </div>
+              <div className="handle">
+                <a 
+                  href={`${getCorrectWebUrl(profile.value.author?.avatar)}/profile/${profile.value.author?.did}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="handle-link"
+                >
+                  @{profile.value.author?.handle}
+                </a>
+              </div>
+            </div>
+            <div className="record-actions">
+              <button
+                onClick={() => toggleJsonView(profile.uri)}
+                className={`btn btn-sm ${expandedRecords.has(profile.uri) ? 'btn-outline' : 'btn-primary'}`}
+                title="Show/Hide JSON"
+              >
+                {expandedRecords.has(profile.uri) ? 'hide' : 'json'}
+              </button>
+              {canDelete(profile) && (
+                <button
+                  onClick={() => handleDelete(profile)}
+                  className="btn btn-danger btn-sm"
+                  title="Delete Profile"
+                >
+                  delete
+                </button>
+              )}
+            </div>
+          </div>
+          {expandedRecords.has(profile.uri) && (
+            <div className="json-display">
+              <pre className="json-content">
+                {JSON.stringify(profile, null, 2)}
+              </pre>
+            </div>
+          )}
+          <div className="message-content">{profile.value.text}</div>
+        </div>
+      ))}
+    </section>
+  )
+}
--- a/oauth/src/components/RecordList.jsx
+++ b/oauth/src/components/RecordList.jsx
@@ -13,7 +13,7 @@ function getCorrectWebUrl(avatarUrl) {
  
  // If avatar is from syu.is, use web.syu.is
  if (avatarUrl.includes('bsky.syu.is') || avatarUrl.includes('syu.is')) {
-    return 'https://web.syu.is'
+    return 'https://syu.is'
  }
  
  // Default to bsky.app
@@ -151,4 +151,4 @@ export default function RecordList({ title, records, apiConfig, showTitle = true
      ))}
    </section>
  )
-}
+}
--- a/oauth/src/components/RecordTabs.jsx
+++ b/oauth/src/components/RecordTabs.jsx
@@ -1,58 +1,191 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import RecordList from './RecordList.jsx'
 import ChatRecordList from './ChatRecordList.jsx'
+import ProfileRecordList from './ProfileRecordList.jsx'
 import LoadingSkeleton from './LoadingSkeleton.jsx'
+import { logger } from '../utils/logger.js'

-export default function RecordTabs({ langRecords, commentRecords, userComments, chatRecords, userChatRecords, userChatLoading, baseRecords, apiConfig, pageContext, user = null, agent = null, onRecordDeleted = null }) {
-  const [activeTab, setActiveTab] = useState('comment')
+export default function RecordTabs({ langRecords, commentRecords, userComments, chatRecords, chatHasMore, onLoadMoreChat, userChatRecords, userChatLoading, baseRecords, apiConfig, pageContext, user = null, agent = null, onRecordDeleted = null }) {
+  // Check if current page has matching chat records (AI posts always have chat records)
+  const isAiPost = !pageContext.isTopPage && Array.isArray(chatRecords) && chatRecords.some(chatPair => {
+    const recordUrl = chatPair.question?.value?.post?.url
+    if (!recordUrl) return false
+    
+    try {
+      const recordRkey = new URL(recordUrl).pathname.split('/').pop()?.replace(/\.html$/, '')
+      return recordRkey === pageContext.rkey
+    } catch {
+      return false
+    }
+  })
+  
+  const [activeTab, setActiveTab] = useState(isAiPost ? 'collection' : 'profiles')
+  
+  // Monitor activeTab changes
+  useEffect(() => {
+    logger.log('RecordTabs: activeTab changed to', activeTab)
+  }, [activeTab])
+  
+  logger.log('RecordTabs: activeTab is', activeTab)
+  logger.log('RecordTabs: commentRecords prop:', commentRecords?.length || 0, commentRecords)

  // Filter records based on page context
-  const filterRecords = (records) => {
+  const filterRecords = (records, isProfile = false) => {
+    // Ensure records is an array
+    const recordsArray = Array.isArray(records) ? records : []
+    
+    logger.log('filterRecords called with:', {
+      recordsLength: recordsArray.length,
+      isProfile,
+      isTopPage: pageContext.isTopPage,
+      pageRkey: pageContext.rkey,
+      records: recordsArray
+    })
+    
    if (pageContext.isTopPage) {
      // Top page: show latest 3 records
-      return records.slice(0, 3)
+      const result = recordsArray.slice(0, 3)
+      logger.log('filterRecords: Top page result:', result.length, result)
+      return result
    } else {
      // Individual page: show records matching the URL
-      return records.filter(record => {
+      const filtered = recordsArray.filter(record => {
+        // Profile records should always be shown
+        if (isProfile || record.value?.type === 'profile') {
+          logger.log('filterRecords: Profile record included:', record.value?.type)
+          return true
+        }
+        
        const recordUrl = record.value?.post?.url
-        if (!recordUrl) return false
+        if (!recordUrl) {
+          logger.log('filterRecords: No recordUrl found for record:', record.value?.type)
+          return false
+        }
        
        try {
          const recordRkey = new URL(recordUrl).pathname.split('/').pop()?.replace(/\.html$/, '')
-          return recordRkey === pageContext.rkey
+          const matches = recordRkey === pageContext.rkey
+          logger.log('filterRecords: URL matching:', { recordRkey, pageRkey: pageContext.rkey, matches })
+          return matches
        } catch {
+          logger.log('filterRecords: URL parsing failed for:', recordUrl)
          return false
        }
      })
+      logger.log('filterRecords: Individual page result:', filtered.length, filtered)
+      return filtered
    }
  }

-  const filteredLangRecords = filterRecords(langRecords)
-  const filteredCommentRecords = filterRecords(commentRecords)
-  const filteredUserComments = filterRecords(userComments || [])
-  const filteredChatRecords = filterRecords(chatRecords || [])
-  const filteredBaseRecords = filterRecords(baseRecords || [])
+  // Special filter for chat records (which are already processed into pairs)
+  const filterChatRecords = (chatPairs) => {
+    // Ensure chatPairs is an array
+    const chatArray = Array.isArray(chatPairs) ? chatPairs : []
+    
+    logger.log('filterChatRecords called:', { 
+      isTopPage: pageContext.isTopPage, 
+      rkey: pageContext.rkey, 
+      chatPairsLength: chatArray.length,
+      chatPairsType: typeof chatPairs,
+      isArray: Array.isArray(chatPairs)
+    })
+    
+    if (pageContext.isTopPage) {
+      // Top page: show latest 3 pairs
+      const result = chatArray.slice(0, 3)
+      logger.log('Top page: returning', result.length, 'pairs')
+      return result
+    } else {
+      // Individual page: show pairs matching the URL (compare path only, ignore domain)
+      const filtered = chatArray.filter(chatPair => {
+        const recordUrl = chatPair.question?.value?.post?.url
+        if (!recordUrl) {
+          logger.log('No recordUrl for chatPair:', chatPair)
+          return false
+        }
+        
+        try {
+          // Extract path from URL and get the filename part
+          const recordPath = new URL(recordUrl).pathname
+          const recordRkey = recordPath.split('/').pop()?.replace(/\.html$/, '')
+          
+          logger.log('Comparing:', { recordRkey, pageRkey: pageContext.rkey, recordUrl })
+          
+          // Compare with current page rkey
+          const matches = recordRkey === pageContext.rkey
+          if (matches) {
+            logger.log('Found matching chat pair!')
+          }
+          return matches
+        } catch (error) {
+          logger.log('Error processing recordUrl:', recordUrl, error)
+          return false
+        }
+      })
+      
+      logger.log('Individual page: returning', filtered.length, 'filtered pairs')
+      return filtered
+    }
+  }
+
+  const filteredLangRecords = filterRecords(Array.isArray(langRecords) ? langRecords : [])
+  
+  logger.log('RecordTabs: About to filter commentRecords:', commentRecords?.length || 0, commentRecords)
+  const filteredCommentRecords = filterRecords(Array.isArray(commentRecords) ? commentRecords : [])
+  logger.log('RecordTabs: After filtering commentRecords:', filteredCommentRecords.length, filteredCommentRecords)
+  
+  const filteredUserComments = filterRecords(Array.isArray(userComments) ? userComments : [])
+  const filteredChatRecords = filterChatRecords(Array.isArray(chatRecords) ? chatRecords : [])
+  const filteredBaseRecords = filterRecords(Array.isArray(baseRecords) ? baseRecords : [])
+  
+  logger.log('RecordTabs: filtered results:')
+  logger.log('  - filteredCommentRecords:', filteredCommentRecords.length, filteredCommentRecords)
+  logger.log('  - filteredLangRecords:', filteredLangRecords.length)
+  logger.log('  - filteredUserComments:', filteredUserComments.length)
+  logger.log('  - pageContext:', pageContext)
+  logger.log('RecordTabs: TAB RENDER VALUES:')
+  logger.log('  - filteredCommentRecords.length for tab:', filteredCommentRecords.length)
+  logger.log('  - commentRecords input:', commentRecords?.length || 0)
+  
+  // Filter profile records from baseRecords
+  const profileRecords = (Array.isArray(baseRecords) ? baseRecords : []).filter(record => record.value?.type === 'profile')
+  const sortedProfileRecords = profileRecords.sort((a, b) => {
+    if (a.value.profileType === 'admin' && b.value.profileType !== 'admin') return -1
+    if (a.value.profileType !== 'admin' && b.value.profileType === 'admin') return 1
+    return 0
+  })
+  const filteredProfileRecords = filterRecords(sortedProfileRecords, true)

  return (
    <div className="record-tabs">
+      {!isAiPost && (
      <div className="tab-header">
        <button 
-          className={`tab-btn ${activeTab === 'comment' ? 'active' : ''}`}
-          onClick={() => setActiveTab('comment')}
+          className={`tab-btn ${activeTab === 'profiles' ? 'active' : ''}`}
+          onClick={() => {
+            logger.log('RecordTabs: Profiles tab clicked')
+            setActiveTab('profiles')
+          }}
        >
-          feedback ({filteredCommentRecords.length})
-        </button>
-        <button 
-          className={`tab-btn ${activeTab === 'lang' ? 'active' : ''}`}
-          onClick={() => setActiveTab('lang')}
-        >
-          en ({filteredLangRecords.length})
+          about ({filteredProfileRecords.length})
        </button>
        <button 
          className={`tab-btn ${activeTab === 'collection' ? 'active' : ''}`}
          onClick={() => setActiveTab('collection')}
        >
-          chat ({userChatRecords?.length || 0})
+          chat ({filteredChatRecords.length > 0 ? filteredChatRecords.length : (userChatRecords?.length || 0)})
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'comment' ? 'active' : ''}`}
+          onClick={() => {
+            logger.log('RecordTabs: feedback tab clicked, setting activeTab to comment')
+            setActiveTab('comment')
+          }}
+        >
+          feedback ({(() => {
+            logger.log('RecordTabs: feedback tab render - filteredCommentRecords.length:', filteredCommentRecords.length)
+            return filteredCommentRecords.length
+          })()})
        </button>
        <button 
          className={`tab-btn ${activeTab === 'users' ? 'active' : ''}`}
@@ -60,10 +193,17 @@ export default function RecordTabs({ langRecords, commentRecords, userComments,
        >
          comment ({filteredUserComments.length})
        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'lang' ? 'active' : ''}`}
+          onClick={() => setActiveTab('lang')}
+        >
+          en ({filteredLangRecords.length})
+        </button>
      </div>
+      )}

      <div className="tab-content">
-        {activeTab === 'lang' && (
+        {activeTab === 'lang' && !isAiPost && (
          !langRecords ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
@@ -78,7 +218,7 @@ export default function RecordTabs({ langRecords, commentRecords, userComments,
            />
          )
        )}
-        {activeTab === 'comment' && (
+        {activeTab === 'comment' && !isAiPost && (
          !commentRecords ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
@@ -98,7 +238,9 @@ export default function RecordTabs({ langRecords, commentRecords, userComments,
            <LoadingSkeleton count={2} showTitle={true} />
          ) : (
            <ChatRecordList 
-              chatPairs={userChatRecords} 
+              chatPairs={filteredChatRecords.length > 0 ? filteredChatRecords : (Array.isArray(userChatRecords) ? userChatRecords : [])} 
+              chatHasMore={filteredChatRecords.length > 0 ? chatHasMore : false}
+              onLoadMoreChat={filteredChatRecords.length > 0 ? onLoadMoreChat : null}
              apiConfig={apiConfig} 
              user={user}
              agent={agent}
@@ -106,7 +248,7 @@ export default function RecordTabs({ langRecords, commentRecords, userComments,
            />
          )
        )}
-        {activeTab === 'users' && (
+        {activeTab === 'users' && !isAiPost && (
          !userComments ? (
            <LoadingSkeleton count={3} showTitle={true} />
          ) : (
@@ -121,6 +263,19 @@ export default function RecordTabs({ langRecords, commentRecords, userComments,
            />
          )
        )}
+        {activeTab === 'profiles' && !isAiPost && (
+          !baseRecords ? (
+            <LoadingSkeleton count={3} showTitle={true} />
+          ) : (
+            <ProfileRecordList 
+              profileRecords={filteredProfileRecords}
+              apiConfig={apiConfig} 
+              user={user}
+              agent={agent}
+              onRecordDeleted={onRecordDeleted}
+            />
+          )
+        )}
      </div>

    </div>
--- a/oauth/src/components/UserLookup.jsx
+++ b/oauth/src/components/UserLookup.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { atproto } from '../api/atproto.js'
 import { getPdsFromHandle, getApiConfig } from '../utils/pds.js'
+import { logger } from '../utils/logger.js'

 export default function UserLookup() {
  const [handleInput, setHandleInput] = useState('')
@@ -26,7 +27,7 @@ export default function UserLookup() {
        config: apiConfig
      })
    } catch (error) {
-      console.error('User lookup failed:', error)
+      logger.error('User lookup failed:', error)
      setUserInfo({ error: error.message })
    } finally {
      setLoading(false)
--- a/oauth/src/hooks/useAdminData.js
+++ b/oauth/src/hooks/useAdminData.js
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'
 import { atproto, collections } from '../api/atproto.js'
 import { getApiConfig } from '../utils/pds.js'
 import { env } from '../config/env.js'
-import { getErrorMessage, logError } from '../utils/errorHandler.js'
+import { getErrorMessage } from '../utils/errorHandler.js'
+import { logger } from '../utils/logger.js'

 export function useAdminData() {
  const [adminData, setAdminData] = useState({ 
@@ -13,9 +14,11 @@ export function useAdminData() {
  })
  const [langRecords, setLangRecords] = useState([])
  const [commentRecords, setCommentRecords] = useState([])
+  const [chatRecords, setChatRecords] = useState([])
+  const [chatCursor, setChatCursor] = useState(null)
+  const [chatHasMore, setChatHasMore] = useState(true)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
-  const [retryCount, setRetryCount] = useState(0)

  useEffect(() => {
    loadAdminData()
@@ -30,40 +33,163 @@ export function useAdminData() {
      const did = await atproto.getDid(env.pds, env.admin)
      const profile = await atproto.getProfile(apiConfig.bsky, did)
      
-      // Load all data in parallel
-      const [records, lang, comment] = await Promise.all([
-        collections.getBase(apiConfig.pds, did, env.collection),
-        collections.getLang(apiConfig.pds, did, env.collection),
-        collections.getComment(apiConfig.pds, did, env.collection)
+      // Load all data in parallel with error handling
+      logger.log('useAdminData: Starting API calls...')
+      const [records, lang, comment, chatResult] = await Promise.all([
+        collections.getBase(apiConfig.pds, did, env.collection).catch(err => {
+          logger.error('getBase error:', err)
+          throw err
+        }),
+        collections.getLang(apiConfig.pds, did, env.collection).catch(err => {
+          logger.error('getLang error:', err)
+          throw err
+        }),
+        collections.getComment(apiConfig.pds, did, env.collection).catch(err => {
+          logger.error('getComment error:', err)
+          throw err
+        }),
+        collections.getChat(apiConfig.pds, did, env.collection, 10).catch(err => {
+          logger.error('getChat error:', err)
+          throw err
+        })
      ])
+      logger.log('useAdminData: API calls completed successfully')
+      
+      const chat = chatResult.records || chatResult
+      const cursor = chatResult.cursor || null
+      setChatCursor(cursor)
+      setChatHasMore(!!cursor)
+
+      logger.log('useAdminData: chatResult structure:', chatResult)
+      logger.log('useAdminData: chat variable type:', typeof chat, 'isArray:', Array.isArray(chat))
+
+      // Process chat records into question-answer pairs
+      const chatPairs = []
+      const recordMap = new Map()
+      
+      // Ensure chat is an array
+      const chatArray = Array.isArray(chat) ? chat : []
+      
+      // First pass: organize records by base rkey
+      chatArray.forEach(record => {
+        const rkey = record.uri.split('/').pop()
+        const baseRkey = rkey.replace('-answer', '')
+        
+        if (!recordMap.has(baseRkey)) {
+          recordMap.set(baseRkey, { question: null, answer: null })
+        }
+        
+        if (record.value.type === 'question') {
+          recordMap.get(baseRkey).question = record
+        } else if (record.value.type === 'answer') {
+          recordMap.get(baseRkey).answer = record
+        }
+      })
+      
+      // Second pass: create chat pairs
+      recordMap.forEach((pair, rkey) => {
+        if (pair.question) {
+          chatPairs.push({
+            rkey,
+            question: pair.question,
+            answer: pair.answer,
+            createdAt: pair.question.value.createdAt
+          })
+        }
+      })
+      
+      // Sort by creation time (newest first)
+      chatPairs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+
+      logger.log('useAdminData: raw chat records:', chat.length)
+      logger.log('useAdminData: processed chat pairs:', chatPairs.length, chatPairs)
+      logger.log('useAdminData: setting state data:')
+      logger.log('  - records:', records.length)
+      logger.log('  - langRecords:', lang.length)
+      logger.log('  - commentRecords:', comment.length, comment)
+      logger.log('  - chatRecords:', chatPairs.length)

      setAdminData({ did, profile, records, apiConfig })
      setLangRecords(lang)
      setCommentRecords(comment)
-      setRetryCount(0) // 成功時はリトライカウントをリセット
+      setChatRecords(chatPairs)
    } catch (err) {
-      logError(err, 'useAdminData.loadAdminData')
-      setError(getErrorMessage(err))
-      
-      // 自動リトライ（最大3回）
-      if (retryCount < 3) {
-        setTimeout(() => {
-          setRetryCount(prev => prev + 1)
-          loadAdminData()
-        }, Math.pow(2, retryCount) * 1000) // 1s, 2s, 4s
-      }
+      // Log the actual error for debugging
+      logger.error('useAdminData: Error in loadAdminData:', err)
+      setError('silent_failure')
    } finally {
      setLoading(false)
    }
  }

+  const loadMoreChat = async () => {
+    if (!chatCursor || !chatHasMore) return
+    
+    try {
+      const apiConfig = getApiConfig(`https://${env.pds}`)
+      const did = await atproto.getDid(env.pds, env.admin)
+      const chatResult = await collections.getChat(apiConfig.pds, did, env.collection, 10, chatCursor)
+      
+      const newChatRecords = chatResult.records || chatResult
+      const newCursor = chatResult.cursor || null
+      
+      // Process new chat records into question-answer pairs
+      const newChatPairs = []
+      const recordMap = new Map()
+      
+      // Ensure newChatRecords is an array
+      const newChatArray = Array.isArray(newChatRecords) ? newChatRecords : []
+      
+      // First pass: organize records by base rkey
+      newChatArray.forEach(record => {
+        const rkey = record.uri.split('/').pop()
+        const baseRkey = rkey.replace('-answer', '')
+        
+        if (!recordMap.has(baseRkey)) {
+          recordMap.set(baseRkey, { question: null, answer: null })
+        }
+        
+        if (record.value.type === 'question') {
+          recordMap.get(baseRkey).question = record
+        } else if (record.value.type === 'answer') {
+          recordMap.get(baseRkey).answer = record
+        }
+      })
+      
+      // Second pass: create chat pairs
+      recordMap.forEach((pair, rkey) => {
+        if (pair.question) {
+          newChatPairs.push({
+            rkey,
+            question: pair.question,
+            answer: pair.answer,
+            createdAt: pair.question.value.createdAt
+          })
+        }
+      })
+      
+      // Sort new pairs by creation time (newest first)
+      newChatPairs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+      
+      // Append to existing chat records
+      setChatRecords(prev => [...prev, ...newChatPairs])
+      setChatCursor(newCursor)
+      setChatHasMore(!!newCursor)
+      
+    } catch (err) {
+      // Silently fail - no error logging
+    }
+  }
+
  return {
    adminData,
    langRecords,
    commentRecords,
+    chatRecords,
+    chatHasMore,
    loading,
    error,
-    retryCount,
-    refresh: loadAdminData
+    refresh: loadAdminData,
+    loadMoreChat
  }
 }
--- a/oauth/src/hooks/useAuth.js
+++ b/oauth/src/hooks/useAuth.js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { OAuthService } from '../services/oauth.js'
+import { logger } from '../utils/logger.js'

 const oauthService = new OAuthService()

@@ -21,7 +22,7 @@ export function useAuth() {
        
        // If we're on callback page and authentication succeeded, notify parent
        if (window.location.pathname === '/oauth/callback') {
-          console.log('OAuth callback completed, notifying parent window')
+          logger.log('OAuth callback completed, notifying parent window')
          
          // Get referrer or use stored return URL
          const returnUrl = sessionStorage.getItem('oauth_return_url') || 
@@ -48,7 +49,7 @@ export function useAuth() {
        }
      }
    } catch (error) {
-      console.error('Auth initialization failed:', error)
+      logger.error('Auth initialization failed:', error)
    } finally {
      setLoading(false)
    }
--- a/oauth/src/hooks/useUserData.js
+++ b/oauth/src/hooks/useUserData.js
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { atproto, collections } from '../api/atproto.js'
 import { getApiConfig, isSyuIsHandle, getPdsFromHandle } from '../utils/pds.js'
 import { env } from '../config/env.js'
+import { logger } from '../utils/logger.js'

 export function useUserData(adminData) {
  const [userComments, setUserComments] = useState([])
@@ -24,13 +25,53 @@ export function useUserData(adminData) {
          env.collection
        )

-        // 2. Get chat records from ai.syui.log.chat
-        const chatRecords = await collections.getChat(
+        // 2. Get chat records from ai.syui.log.chat and process into pairs
+        const chatResult = await collections.getChat(
          adminData.apiConfig.pds,
          adminData.did,
          env.collection
        )
-        setChatRecords(chatRecords)
+        
+        const chatRecords = chatResult.records || chatResult
+        logger.log('useUserData: raw chatRecords:', chatRecords.length, chatRecords)
+        
+        // Process chat records into question-answer pairs
+        const chatPairs = []
+        const recordMap = new Map()
+        
+        // First pass: organize records by base rkey
+        chatRecords.forEach(record => {
+          const rkey = record.uri.split('/').pop()
+          const baseRkey = rkey.replace('-answer', '')
+          
+          if (!recordMap.has(baseRkey)) {
+            recordMap.set(baseRkey, { question: null, answer: null })
+          }
+          
+          if (record.value.type === 'question') {
+            recordMap.get(baseRkey).question = record
+          } else if (record.value.type === 'answer') {
+            recordMap.get(baseRkey).answer = record
+          }
+        })
+        
+        // Second pass: create chat pairs
+        recordMap.forEach((pair, rkey) => {
+          if (pair.question) {
+            chatPairs.push({
+              rkey,
+              question: pair.question,
+              answer: pair.answer,
+              createdAt: pair.question.value.createdAt
+            })
+          }
+        })
+        
+        // Sort by creation time (newest first)
+        chatPairs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+        
+        logger.log('useUserData: processed chatPairs:', chatPairs.length, chatPairs)
+        setChatRecords(chatPairs)

        // 3. Get base collection records which contain user comments
        const baseRecords = await collections.getBase(
@@ -62,7 +103,7 @@ export function useUserData(adminData) {
        // Also try to get individual user records from the user list
        // Currently skipping user list processing since users contain placeholder DIDs
        if (userListRecords.length > 0 && userListRecords[0].value?.users) {
-          console.log('User list found, but skipping placeholder users for now')
+          logger.log('User list found, but skipping placeholder users for now')
          
          // Filter out placeholder users
          const realUsers = userListRecords[0].value.users.filter(user => 
@@ -73,7 +114,7 @@ export function useUserData(adminData) {
          )
          
          if (realUsers.length > 0) {
-            console.log(`Processing ${realUsers.length} real users`)
+            logger.log(`Processing ${realUsers.length} real users`)
            
            for (const user of realUsers) {
              const userHandle = user.handle
@@ -100,7 +141,7 @@ export function useUserData(adminData) {
                    userApiConfig = getApiConfig(realPds)
                  } catch (error) {
                    // Fallback to syu.is if bsky.social fails
-                    console.warn(`Failed to get PDS for ${userHandle} from bsky.social, trying syu.is:`, error)
+                    logger.warn(`Failed to get PDS for ${userHandle} from bsky.social, trying syu.is:`, error)
                    userPds = env.pds
                    userApiConfig = getApiConfig(env.pds)
                    userDid = await atproto.getDid(userPds, userHandle)
@@ -124,7 +165,7 @@ export function useUserData(adminData) {
                try {
                  profile = await atproto.getProfile(userApiConfig.bsky, userDid)
                } catch (profileError) {
-                  console.warn(`Failed to get profile for ${userHandle}:`, profileError)
+                  logger.warn(`Failed to get profile for ${userHandle}:`, profileError)
                }

                // Add profile info to each record
@@ -143,11 +184,11 @@ export function useUserData(adminData) {

                allUserComments.push(...enrichedRecords)
              } catch (userError) {
-                console.warn(`Failed to fetch data for user ${userHandle}:`, userError)
+                logger.warn(`Failed to fetch data for user ${userHandle}:`, userError)
              }
            }
          } else {
-            console.log('No real users found in user list - all appear to be placeholders')
+            logger.log('No real users found in user list - all appear to be placeholders')
          }
        }

--- a/oauth/src/main.jsx
+++ b/oauth/src/main.jsx
@@ -3,4 +3,8 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './App.css'

-ReactDOM.createRoot(document.getElementById('comment-atproto')).render(<App />)
+// Only mount the OAuth app if the target element exists
+const targetElement = document.getElementById('comment-atproto')
+if (targetElement) {
+  ReactDOM.createRoot(targetElement).render(<App />)
+}
--- a/oauth/src/services/oauth.js
+++ b/oauth/src/services/oauth.js
@@ -2,6 +2,7 @@ import { BrowserOAuthClient } from '@atproto/oauth-client-browser'
 import { Agent } from '@atproto/api'
 import { env } from '../config/env.js'
 import { isSyuIsHandle } from '../utils/pds.js'
+import { logger } from '../utils/logger.js'

 export class OAuthService {
  constructor() {
@@ -44,7 +45,7 @@ export class OAuthService {
      // Try to restore session
      return await this.restoreSession()
    } catch (error) {
-      console.error('OAuth initialization failed:', error)
+      logger.error('OAuth initialization failed:', error)
      this.initPromise = null
      throw error
    }
@@ -89,18 +90,18 @@ export class OAuthService {
        displayName = profile.data.displayName || null
        avatar = profile.data.avatar || null
        
-        console.log('Profile fetched from session:', {
+        logger.log('Profile fetched from session:', {
          did,
          handle,
          displayName,
          avatar: avatar ? 'present' : 'none'
        })
      } catch (error) {
-        console.log('Failed to get profile from session:', error)
+        logger.log('Failed to get profile from session:', error)
        // Keep the basic info we have
      }
    } else if (did && did.includes('test-')) {
-      console.log('Skipping profile fetch for test DID:', did)
+      logger.log('Skipping profile fetch for test DID:', did)
    }

    this.sessionInfo = { 
@@ -140,7 +141,7 @@ export class OAuthService {
      }
      return null
    } catch (error) {
-      console.error('Auth check failed:', error)
+      logger.error('Auth check failed:', error)
      return null
    }
  }
@@ -168,7 +169,7 @@ export class OAuthService {
      // Reload page
      window.location.reload()
    } catch (error) {
-      console.error('Logout failed:', error)
+      logger.error('Logout failed:', error)
    }
  }

--- a/oauth/src/utils/logger.js
+++ b/oauth/src/utils/logger.js
@@ -3,7 +3,7 @@ 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 // Enable only in dev AND when debug flag is true
+    this.isEnabled = this.debugEnabled // Enable when debug flag is true (regardless of dev mode)
  }

  log(...args) {
@@ -76,7 +76,7 @@ class Logger {
 // シングルトンインスタンス
 export const logger = new Logger()

-// 開発環境でのみグローバルアクセス可能にする
-if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_DEBUG === 'true') {
+// デバッグ有効時にグローバルアクセス可能にする
+if (import.meta.env.VITE_ENABLE_DEBUG === 'true') {
  window._logger = logger
 }
--- a/oauth/src/utils/pds.js
+++ b/oauth/src/utils/pds.js
@@ -10,7 +10,7 @@ export function getApiConfig(pds) {
      pds: `https://${env.pds}`,
      bsky: `https://bsky.${env.pds}`,
      plc: `https://plc.${env.pds}`,
-      web: `https://web.${env.pds}`
+      web: `https://${env.pds}`
    }
  }
  return {
@@ -36,4 +36,4 @@ export async function getPdsFromHandle(handle) {
    .then(res => res.json())
  
  return data.didDoc?.service?.[0]?.serviceEndpoint || initialPds
-}
+}
--- a/pds/index.html
+++ b/pds/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AT URI Browser - syui.ai</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
--- a/pds/package.json
+++ b/pds/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "pds-browser",
+  "version": "0.3.1",
+  "description": "AT Protocol browser for ai.log",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@atproto/api": "^0.13.0",
+    "@atproto/did": "^0.1.0",
+    "@atproto/lexicon": "^0.4.0",
+    "@atproto/syntax": "^0.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^5.0.0"
+  }
+}
--- a/pds/src/App.css
+++ b/pds/src/App.css
@@ -0,0 +1,128 @@
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  margin: 0;
+  padding: 20px;
+  background-color: #f5f5f5;
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 30px;
+  border-bottom: 3px solid #007acc;
+  padding-bottom: 10px;
+}
+
+.test-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #007acc;
+}
+
+.test-uris {
+  background: #fff;
+  padding: 15px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  margin: 15px 0;
+}
+
+.at-uri {
+  font-family: 'Monaco', 'Consolas', monospace;
+  background: #f4f4f4;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin: 10px 0;
+  display: block;
+  word-break: break-all;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.at-uri:hover {
+  background: #e8e8e8;
+}
+
+.instructions {
+  background: #e8f4f8;
+  padding: 15px;
+  border-radius: 5px;
+  margin: 15px 0;
+}
+
+.instructions ol {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.back-link {
+  display: inline-block;
+  margin-top: 20px;
+  color: #007acc;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+/* AT Browser Modal Styles */
+.at-uri-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.at-uri-modal-content {
+  background-color: white;
+  border-radius: 8px;
+  max-width: 800px;
+  max-height: 600px;
+  width: 90%;
+  height: 80%;
+  overflow: auto;
+  position: relative;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.at-uri-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  z-index: 1001;
+  padding: 5px 10px;
+}
+
+/* AT URI Link Styles */
+[data-at-uri] {
+  color: #1976d2;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+[data-at-uri]:hover {
+  color: #1565c0;
+}
--- a/pds/src/App.jsx
+++ b/pds/src/App.jsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import { AtUriBrowser } from './components/AtUriBrowser.jsx'
+import './App.css'
+
+function App() {
+  return (
+    <AtUriBrowser>
+      <div className="container">
+        <h1>AT URI Browser</h1>
+        
+        <div className="test-section">
+          <h2>テスト用 AT URI</h2>
+          <p>以下のAT URIをクリックすると、モーダルでコンテンツが表示されます。</p>
+          
+          <div className="test-uris">
+            <div className="at-uri" data-at-uri="at://did:plc:vzsvtbtbnwn22xjqhcu3vd6y/app.bsky.feed.post/3lu5givmkc222">
+              at://did:plc:vzsvtbtbnwn22xjqhcu3vd6y/app.bsky.feed.post/3lu5givmkc222
+            </div>
+            <div className="at-uri" data-at-uri="at://did:plc:vzsvtbtbnwn22xjqhcu3vd6y/app.bsky.actor.profile/self">
+              at://did:plc:vzsvtbtbnwn22xjqhcu3vd6y/app.bsky.actor.profile/self
+            </div>
+            <div className="at-uri" data-at-uri="at://syui.ai/app.bsky.actor.profile/self">
+              at://syui.ai/app.bsky.actor.profile/self
+            </div>
+            <div className="at-uri" data-at-uri="at://bsky.app/app.bsky.actor.profile/self">
+              at://bsky.app/app.bsky.actor.profile/self
+            </div>
+          </div>
+          
+          <div className="instructions">
+            <h3>使用方法:</h3>
+            <ol>
+              <li>上記のAT URIをクリックしてください</li>
+              <li>モーダルがポップアップし、AT Protocolレコードの内容が表示されます</li>
+              <li>モーダルは×ボタンまたはEscキーで閉じることができます</li>
+              <li>モーダルはレスポンシブ対応で、異なる画面サイズに対応します</li>
+            </ol>
+          </div>
+        </div>
+        
+        <div className="test-section">
+          <h2>AT URI について</h2>
+          <p>AT URIは、AT Protocolで使用される統一リソース識別子です。この形式により、分散ソーシャルネットワーク上のコンテンツを一意に識別できます。</p>
+          <p>このブラウザを使用することで、ブログ投稿やその他のコンテンツに埋め込まれたAT URIを直接探索することが可能です。</p>
+          
+          <h3>対応PDS環境</h3>
+          <ul>
+            <li><strong>bsky.social</strong> - メインのBlueskyネットワーク</li>
+            <li><strong>syu.is</strong> - 独立したPDS環境</li>
+            <li><strong>plc.directory</strong> + <strong>plc.syu.is</strong> - DID解決</li>
+          </ul>
+          
+          <p><small>注意: 独立したPDS環境では、レコードの同期状況により、一部のコンテンツが利用できない場合があります。</small></p>
+        </div>
+        
+        <a href="/" className="back-link">← ブログに戻る</a>
+      </div>
+    </AtUriBrowser>
+  )
+}
+
+export default App
--- a/pds/src/components/AtUriBrowser.jsx
+++ b/pds/src/components/AtUriBrowser.jsx
@@ -0,0 +1,75 @@
+/*
+ * AT URI Browser Component
+ * Copyright (c) 2025 ai.log
+ * MIT License
+ */
+
+import React, { useState, useEffect } from 'react'
+import { AtUriModal } from './AtUriModal.jsx'
+import { isAtUri } from '../lib/atproto.js'
+
+export function AtUriBrowser({ children }) {
+  const [modalUri, setModalUri] = useState(null)
+
+  useEffect(() => {
+    const handleAtUriClick = (e) => {
+      const target = e.target
+      
+      // Check if clicked element has at-uri data attribute
+      if (target.dataset.atUri) {
+        e.preventDefault()
+        setModalUri(target.dataset.atUri)
+        return
+      }
+
+      // Check if clicked element contains at-uri text
+      const text = target.textContent
+      if (text && isAtUri(text)) {
+        e.preventDefault()
+        setModalUri(text)
+        return
+      }
+
+      // Check if parent element has at-uri
+      const parent = target.parentElement
+      if (parent && parent.dataset.atUri) {
+        e.preventDefault()
+        setModalUri(parent.dataset.atUri)
+        return
+      }
+    }
+
+    document.addEventListener('click', handleAtUriClick)
+
+    return () => {
+      document.removeEventListener('click', handleAtUriClick)
+    }
+  }, [])
+
+  const handleAtUriClick = (uri) => {
+    setModalUri(uri)
+  }
+
+  const handleCloseModal = () => {
+    setModalUri(null)
+  }
+
+  return (
+    <>
+      {children}
+      <AtUriModal 
+        uri={modalUri} 
+        onClose={handleCloseModal}
+        onAtUriClick={handleAtUriClick}
+      />
+    </>
+  )
+}
+
+// Utility function to wrap at-uri text with clickable spans
+export const wrapAtUris = (text) => {
+  const atUriRegex = /at:\/\/[^\s]+/g
+  return text.replace(atUriRegex, (match) => {
+    return `<span data-at-uri="${match}" style="color: blue; cursor: pointer; text-decoration: underline;">${match}</span>`
+  })
+}
--- a/pds/src/components/AtUriJson.jsx
+++ b/pds/src/components/AtUriJson.jsx
@@ -0,0 +1,130 @@
+/*
+ * Based on frontpage/atproto-browser
+ * Copyright (c) 2025 The Frontpage Authors
+ * MIT License
+ */
+
+import React from 'react'
+import { isDid } from '@atproto/did'
+import { parseAtUri, isAtUri } from '../lib/atproto.js'
+
+const JSONString = ({ data, onAtUriClick }) => {
+  const handleClick = (uri) => {
+    if (onAtUriClick) {
+      onAtUriClick(uri)
+    }
+  }
+
+  return (
+    <pre style={{ color: 'darkgreen', margin: 0, display: 'inline' }}>
+      {isAtUri(data) ? (
+        <>
+          &quot;
+          <span 
+            onClick={() => handleClick(data)}
+            style={{ 
+              color: 'blue', 
+              cursor: 'pointer',
+              textDecoration: 'underline'
+            }}
+          >
+            {data}
+          </span>
+          &quot;
+        </>
+      ) : isDid(data) ? (
+        <>
+          &quot;
+          <span 
+            onClick={() => handleClick(`at://${data}`)}
+            style={{ 
+              color: 'blue', 
+              cursor: 'pointer',
+              textDecoration: 'underline'
+            }}
+          >
+            {data}
+          </span>
+          &quot;
+        </>
+      ) : URL.canParse(data) ? (
+        <>
+          &quot;
+          <a href={data} rel="noopener noreferrer ugc" target="_blank">
+            {data}
+          </a>
+          &quot;
+        </>
+      ) : (
+        `"${data}"`
+      )}
+    </pre>
+  )
+}
+
+const JSONValue = ({ data, onAtUriClick }) => {
+  if (data === null) {
+    return <pre style={{ color: 'gray', margin: 0, display: 'inline' }}>null</pre>
+  }
+
+  if (typeof data === 'string') {
+    return <JSONString data={data} onAtUriClick={onAtUriClick} />
+  }
+
+  if (typeof data === 'number') {
+    return <pre style={{ color: 'darkorange', margin: 0, display: 'inline' }}>{data}</pre>
+  }
+
+  if (typeof data === 'boolean') {
+    return <pre style={{ color: 'darkred', margin: 0, display: 'inline' }}>{data.toString()}</pre>
+  }
+
+  if (Array.isArray(data)) {
+    return (
+      <div style={{ paddingLeft: '20px' }}>
+        [
+        {data.map((item, index) => (
+          <div key={index} style={{ paddingLeft: '20px' }}>
+            <JSONValue data={item} onAtUriClick={onAtUriClick} />
+            {index < data.length - 1 && ','}
+          </div>
+        ))}
+        ]
+      </div>
+    )
+  }
+
+  if (typeof data === 'object') {
+    return (
+      <div style={{ paddingLeft: '20px' }}>
+        {'{'}
+        {Object.entries(data).map(([key, value], index, entries) => (
+          <div key={key} style={{ paddingLeft: '20px' }}>
+            <span style={{ color: 'darkblue' }}>"{key}"</span>: <JSONValue data={value} onAtUriClick={onAtUriClick} />
+            {index < entries.length - 1 && ','}
+          </div>
+        ))}
+        {'}'}
+      </div>
+    )
+  }
+
+  return <pre style={{ margin: 0, display: 'inline' }}>{String(data)}</pre>
+}
+
+export default function AtUriJson({ data, onAtUriClick }) {
+  return (
+    <div style={{ 
+      fontFamily: 'monospace', 
+      fontSize: '14px',
+      padding: '10px',
+      backgroundColor: '#f5f5f5',
+      border: '1px solid #ddd',
+      borderRadius: '4px',
+      overflow: 'auto',
+      maxHeight: '400px'
+    }}>
+      <JSONValue data={data} onAtUriClick={onAtUriClick} />
+    </div>
+  )
+}
--- a/pds/src/components/AtUriModal.jsx
+++ b/pds/src/components/AtUriModal.jsx
@@ -0,0 +1,80 @@
+/*
+ * AT URI Modal Component
+ * Copyright (c) 2025 ai.log
+ * MIT License
+ */
+
+import React, { useEffect } from 'react'
+import AtUriViewer from './AtUriViewer.jsx'
+
+export function AtUriModal({ uri, onClose, onAtUriClick }) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    const handleClickOutside = (e) => {
+      if (e.target.classList.contains('at-uri-modal-overlay')) {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [onClose])
+
+  if (!uri) return null
+
+  return (
+    <div className="at-uri-modal-overlay" style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 1000
+    }}>
+      <div style={{
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        maxWidth: '800px',
+        maxHeight: '600px',
+        width: '90%',
+        height: '80%',
+        overflow: 'auto',
+        position: 'relative',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+      }}>
+        <button
+          onClick={onClose}
+          style={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            background: 'none',
+            border: 'none',
+            fontSize: '20px',
+            cursor: 'pointer',
+            zIndex: 1001,
+            padding: '5px 10px'
+          }}
+        >
+          ×
+        </button>
+        
+        <AtUriViewer uri={uri} onAtUriClick={onAtUriClick} />
+      </div>
+    </div>
+  )
+}
--- a/pds/src/components/AtUriViewer.jsx
+++ b/pds/src/components/AtUriViewer.jsx
@@ -0,0 +1,103 @@
+/*
+ * Based on frontpage/atproto-browser
+ * Copyright (c) 2025 The Frontpage Authors
+ * MIT License
+ */
+
+import React, { useState, useEffect } from 'react'
+import { parseAtUri, getRecord } from '../lib/atproto.js'
+import AtUriJson from './AtUriJson.jsx'
+
+export default function AtUriViewer({ uri, onAtUriClick }) {
+  const [record, setRecord] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const loadRecord = async () => {
+      if (!uri) return
+
+      setLoading(true)
+      setError(null)
+
+      try {
+        const atUri = parseAtUri(uri)
+        if (!atUri) {
+          throw new Error('Invalid AT URI')
+        }
+
+
+        const result = await getRecord(atUri.hostname, atUri.collection, atUri.rkey)
+        
+        
+        if (!result.success) {
+          throw new Error(result.error)
+        }
+
+        setRecord(result.data)
+      } catch (err) {
+        setError(err.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadRecord()
+  }, [uri])
+
+  if (loading) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <div>Loading...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: '20px', color: 'red' }}>
+        <div><strong>Error:</strong> {error}</div>
+        <div style={{ marginTop: '10px', fontSize: '12px' }}>
+          <strong>URI:</strong> {uri}
+        </div>
+        <div style={{ marginTop: '10px', fontSize: '12px', color: '#666' }}>
+          デバッグ情報: このAT URIは有効ではないか、レコードが存在しません。
+        </div>
+      </div>
+    )
+  }
+
+  if (!record) {
+    return (
+      <div style={{ padding: '20px' }}>
+        <div>No record found</div>
+      </div>
+    )
+  }
+
+  const atUri = parseAtUri(uri)
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '20px' }}>
+        <h3 style={{ margin: '0 0 10px 0', fontSize: '18px' }}>AT URI Record</h3>
+        <div style={{ 
+          fontSize: '14px', 
+          color: '#666',
+          fontFamily: 'monospace',
+          wordBreak: 'break-all'
+        }}>
+          {uri}
+        </div>
+        <div style={{ fontSize: '12px', color: '#999', marginTop: '5px' }}>
+          DID: {atUri.hostname} | Collection: {atUri.collection} | RKey: {atUri.rkey}
+        </div>
+      </div>
+
+      <div>
+        <h4 style={{ margin: '0 0 10px 0', fontSize: '16px' }}>Record Data</h4>
+        <AtUriJson data={record} onAtUriClick={onAtUriClick} />
+      </div>
+    </div>
+  )
+}
--- a/pds/src/config.js
+++ b/pds/src/config.js
@@ -0,0 +1,33 @@
+/*
+ * AT Protocol Configuration for syu.is environment
+ */
+
+export const AT_PROTOCOL_CONFIG = {
+  // Primary PDS environment (syu.is)
+  primary: {
+    pds: 'https://syu.is',
+    plc: 'https://plc.syu.is',
+    bsky: 'https://bsky.syu.is',
+    web: 'https://web.syu.is'
+  },
+  
+  // Fallback PDS environment (bsky.social)
+  fallback: {
+    pds: 'https://bsky.social',
+    plc: 'https://plc.directory',
+    bsky: 'https://public.api.bsky.app',
+    web: 'https://bsky.app'
+  }
+}
+
+export const getPDSConfig = (pds) => {
+  // Map PDS URL to appropriate config
+  if (pds.includes('syu.is')) {
+    return AT_PROTOCOL_CONFIG.primary
+  } else if (pds.includes('bsky.social')) {
+    return AT_PROTOCOL_CONFIG.fallback
+  }
+  
+  // Default to primary for unknown PDS
+  return AT_PROTOCOL_CONFIG.primary
+}
--- a/pds/src/index.js
+++ b/pds/src/index.js
@@ -0,0 +1,9 @@
+/*
+ * Based on frontpage/atproto-browser
+ * Copyright (c) 2025 The Frontpage Authors
+ * MIT License
+ */
+
+export { AtUriBrowser } from './components/AtUriBrowser.jsx'
+export { AtUriModal } from './components/AtUriModal.jsx'
+export { default as AtUriViewer } from './components/AtUriViewer.jsx'
--- a/pds/src/lib/atproto.js
+++ b/pds/src/lib/atproto.js
@@ -0,0 +1,155 @@
+/*
+ * Based on frontpage/atproto-browser
+ * Copyright (c) 2025 The Frontpage Authors
+ * MIT License
+ */
+
+import { AtpBaseClient } from '@atproto/api'
+import { AtUri } from '@atproto/syntax'
+import { isDid } from '@atproto/did'
+import { AT_PROTOCOL_CONFIG } from '../config.js'
+
+// Identity resolution cache
+const identityCache = new Map()
+
+// Create AT Protocol client
+export const createAtpClient = (pds) => {
+  return new AtpBaseClient({
+    service: pds.startsWith('http') ? pds : `https://${pds}`
+  })
+}
+
+// Resolve identity (DID/Handle)
+export const resolveIdentity = async (identifier) => {
+  if (identityCache.has(identifier)) {
+    return identityCache.get(identifier)
+  }
+
+  try {
+    let did = identifier
+    
+    // If it's a handle, resolve to DID
+    if (!isDid(identifier)) {
+      // Try syu.is first, then fallback to bsky.social
+      let resolved = false
+      
+      try {
+        const client = createAtpClient(AT_PROTOCOL_CONFIG.primary.pds)
+        const response = await client.com.atproto.repo.describeRepo({ repo: identifier })
+        did = response.data.did
+        resolved = true
+      } catch (error) {
+      }
+      
+      if (!resolved) {
+        try {
+          const client = createAtpClient(AT_PROTOCOL_CONFIG.fallback.pds)
+          const response = await client.com.atproto.repo.describeRepo({ repo: identifier })
+          did = response.data.did
+        } catch (error) {
+          throw new Error(`Failed to resolve handle: ${identifier}`)
+        }
+      }
+    }
+
+    // Get DID document to find PDS
+    // Try plc.syu.is first, then fallback to plc.directory
+    let didDoc = null
+    let plcResponse = null
+    
+    try {
+      plcResponse = await fetch(`${AT_PROTOCOL_CONFIG.primary.plc}/${did}`)
+      if (plcResponse.ok) {
+        didDoc = await plcResponse.json()
+      }
+    } catch (error) {
+    }
+    
+    // If plc.syu.is fails, try plc.directory
+    if (!didDoc) {
+      try {
+        plcResponse = await fetch(`${AT_PROTOCOL_CONFIG.fallback.plc}/${did}`)
+        if (plcResponse.ok) {
+          didDoc = await plcResponse.json()
+        }
+      } catch (error) {
+      }
+    }
+    
+    if (!didDoc) {
+      throw new Error(`Failed to resolve DID document from any PLC server`)
+    }
+    
+    // Find PDS service endpoint
+    const pdsService = didDoc.service?.find(service => 
+      service.type === 'AtprotoPersonalDataServer' ||
+      service.id === '#atproto_pds'
+    )
+    
+    if (!pdsService) {
+      throw new Error('No PDS service found in DID document')
+    }
+
+    const result = {
+      success: true,
+      didDocument: didDoc,
+      pdsUrl: pdsService.serviceEndpoint
+    }
+
+    identityCache.set(identifier, result)
+    return result
+  } catch (error) {
+    const result = {
+      success: false,
+      error: error.message
+    }
+    identityCache.set(identifier, result)
+    return result
+  }
+}
+
+// Get record from AT Protocol
+export const getRecord = async (did, collection, rkey) => {
+  try {
+    const identityResult = await resolveIdentity(did)
+    
+    if (!identityResult.success) {
+      return { success: false, error: identityResult.error }
+    }
+
+    const pdsUrl = identityResult.pdsUrl
+    
+    const client = createAtpClient(pdsUrl)
+
+    const response = await client.com.atproto.repo.getRecord({
+      repo: did,
+      collection,
+      rkey
+    })
+
+    return {
+      success: true,
+      data: response.data,
+      pdsUrl
+    }
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message
+    }
+  }
+}
+
+// Parse AT URI
+export const parseAtUri = (uri) => {
+  try {
+    return new AtUri(uri)
+  } catch (error) {
+    return null
+  }
+}
+
+// Check if string is AT URI
+export const isAtUri = (str) => {
+  return str.startsWith('at://') && str.split(' ').length === 1
+}
--- a/pds/src/main.jsx
+++ b/pds/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/pds/vite.config.js
+++ b/pds/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/pds/',
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production')
+  }
+})
--- a/scpt/delete-chat-records.zsh
+++ b/scpt/delete-chat-records.zsh
@@ -3,11 +3,11 @@
 set -e

 cb=ai.syui.log
-cl=($cb.chat $cb.user $cb )
+cl=($cb.chat)
 f=~/.config/syui/ai/log/config.json

-default_collection="ai.syui.log.chat"
-default_pds=bsky.social
+#default_collection="ai.syui.log.chat"
+default_pds=syu.is
 default_did=`cat $f|jq -r .admin.did`
 default_token=`cat $f|jq -r .admin.access_jwt`
 default_refresh=`cat $f|jq -r .admin.refresh_jwt`
--- a/scpt/run.zsh
+++ b/scpt/run.zsh
@@ -2,9 +2,10 @@

 function _env() {
 	d=${0:a:h}
-	ailog=$d/target/debug/ailog
+	ailog=$d/target/release/ailog
 	oauth=$d/oauth
 	myblog=$d/my-blog
+	pds=$d/pds
 	port=4173
 	#source $oauth/.env.production
 	case $OSTYPE in
@@ -22,7 +23,7 @@ function _deploy_ailog() {
 function _server() {
 	lsof -ti:$port | xargs kill -9 2>/dev/null || true
 	cd $d/my-blog
-	cargo build
+	cargo build --release
 	cp -rf $ailog $CARGO_HOME/bin/
 	$ailog build
 	$ailog serve --port $port
@@ -43,8 +44,24 @@ function _oauth_build() {
 	#npm run preview
 }

+function _pds_build() {
+	cd $pds
+	nvm use 21
+	npm i
+	npm run build
+	rm -rf $myblog/static/pds
+	cp -rf dist $myblog/static/pds
+}
+
+function _pds_server() {
+	cd $pds
+	nvm use 21
+	npm run preview
+}
+
+
 function _server_comment() {
-	cargo build
+	cargo build --release
 	cp -rf $ailog $CARGO_HOME/bin/
 	AILOG_DEBUG_ALL=1 $ailog stream start my-blog
 }
@@ -64,6 +81,12 @@ case "${1:-serve}" in
 	oauth|o)
 		_oauth_build
 		;;
+	pds|p)
+		_pds_build
+		;;
+	pds-server|ps)
+		_pds_server
+		;;
 	n)
 		oauth=$d/oauth_old
 		_oauth_build
--- a/src/atproto/mod.rs
+++ b/src/atproto/mod.rs
@@ -1,3 +1,4 @@
 pub mod oauth;
 pub mod client;
-pub mod comment_sync;
+pub mod comment_sync;
+pub mod profile;
--- a/src/atproto/profile.rs
+++ b/src/atproto/profile.rs
@@ -0,0 +1,215 @@
+use anyhow::Result;
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct NetworkConfig {
+    pub pds_api: String,
+    pub plc_api: String,
+    pub bsky_api: String,
+    pub web_url: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Profile {
+    pub did: String,
+    pub handle: String,
+    pub display_name: Option<String>,
+    pub avatar: Option<String>,
+    pub description: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RepoDescription {
+    pub did: String,
+    pub handle: String,
+    #[serde(rename = "didDoc")]
+    pub did_doc: DidDoc,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct DidDoc {
+    pub service: Vec<Service>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Service {
+    #[serde(rename = "serviceEndpoint")]
+    pub service_endpoint: String,
+}
+
+pub struct ProfileFetcher {
+    client: reqwest::Client,
+}
+
+impl ProfileFetcher {
+    pub fn new() -> Self {
+        Self {
+            client: reqwest::Client::new(),
+        }
+    }
+
+    /// Get network configuration based on PDS
+    pub fn get_network_config(pds: &str) -> NetworkConfig {
+        match pds {
+            "bsky.social" | "bsky.app" => NetworkConfig {
+                pds_api: format!("https://{}", pds),
+                plc_api: "https://plc.directory".to_string(),
+                bsky_api: "https://public.api.bsky.app".to_string(),
+                web_url: "https://bsky.app".to_string(),
+            },
+            "syu.is" => NetworkConfig {
+                pds_api: "https://syu.is".to_string(),
+                plc_api: "https://plc.syu.is".to_string(),
+                bsky_api: "https://bsky.syu.is".to_string(),
+                web_url: "https://web.syu.is".to_string(),
+            },
+            _ => {
+                // Default to Bluesky network for unknown PDS
+                NetworkConfig {
+                    pds_api: format!("https://{}", pds),
+                    plc_api: "https://plc.directory".to_string(),
+                    bsky_api: "https://public.api.bsky.app".to_string(),
+                    web_url: "https://bsky.app".to_string(),
+                }
+            }
+        }
+    }
+
+    /// Fetch DID and PDS from handle
+    pub async fn describe_repo(&self, handle: &str, pds: &str) -> Result<RepoDescription> {
+        let network_config = Self::get_network_config(pds);
+        let url = format!("{}/xrpc/com.atproto.repo.describeRepo", network_config.pds_api);
+        
+        let response = self.client
+            .get(&url)
+            .query(&[("repo", handle)])
+            .send()
+            .await?;
+        
+        if !response.status().is_success() {
+            return Err(anyhow::anyhow!("Failed to describe repo: {}", response.status()));
+        }
+        
+        let repo_desc: RepoDescription = response.json().await?;
+        Ok(repo_desc)
+    }
+
+    /// Get user's PDS from their DID document
+    pub fn extract_pds_from_repo_desc(repo_desc: &RepoDescription) -> Option<String> {
+        repo_desc.did_doc.service.first().map(|service| {
+            // Extract hostname from service endpoint
+            let endpoint = &service.service_endpoint;
+            if let Some(url) = endpoint.strip_prefix("https://") {
+                if let Some(host) = url.split('/').next() {
+                    return host.to_string();
+                }
+            }
+            endpoint.clone()
+        })
+    }
+
+    /// Fetch profile from bsky API
+    pub async fn get_profile(&self, did: &str, pds: &str) -> Result<Profile> {
+        let network_config = Self::get_network_config(pds);
+        let url = format!("{}/xrpc/app.bsky.actor.getProfile", network_config.bsky_api);
+        
+        let response = self.client
+            .get(&url)
+            .query(&[("actor", did)])
+            .send()
+            .await?;
+        
+        if !response.status().is_success() {
+            return Err(anyhow::anyhow!("Failed to get profile: {}", response.status()));
+        }
+        
+        let profile_data: Value = response.json().await?;
+        
+        let profile = Profile {
+            did: did.to_string(),
+            handle: profile_data["handle"].as_str().unwrap_or("").to_string(),
+            display_name: profile_data["displayName"].as_str().map(|s| s.to_string()),
+            avatar: profile_data["avatar"].as_str().map(|s| s.to_string()),
+            description: profile_data["description"].as_str().map(|s| s.to_string()),
+        };
+        
+        Ok(profile)
+    }
+
+    /// Fetch complete profile information from handle and PDS
+    pub async fn fetch_profile_from_handle(&self, handle: &str, pds: &str) -> Result<Profile> {
+        println!("🔍 Fetching profile for handle: {} from PDS: {}", handle, pds);
+        
+        // First, get DID from handle
+        let repo_desc = self.describe_repo(handle, pds).await?;
+        let did = repo_desc.did.clone();
+        
+        // Determine the actual PDS from the DID document
+        let actual_pds = Self::extract_pds_from_repo_desc(&repo_desc)
+            .unwrap_or_else(|| pds.to_string());
+        
+        println!("📍 Found DID: {} with PDS: {}", did, actual_pds);
+        
+        // Get profile from the actual PDS
+        let profile = self.get_profile(&did, &actual_pds).await?;
+        
+        println!("✅ Profile fetched: {} ({})", profile.display_name.as_deref().unwrap_or(&profile.handle), profile.did);
+        
+        Ok(profile)
+    }
+
+    /// Generate profile URL for a given DID and PDS
+    #[allow(dead_code)]
+    pub fn generate_profile_url(did: &str, pds: &str) -> String {
+        let network_config = Self::get_network_config(pds);
+        match pds {
+            "syu.is" => format!("https://syu.is/profile/{}", did),
+            _ => format!("{}/profile/{}", network_config.web_url, did),
+        }
+    }
+
+    /// Convert Profile to JSON format used by the application
+    #[allow(dead_code)]
+    pub fn profile_to_json(&self, profile: &Profile, _pds: &str) -> Value {
+        serde_json::json!({
+            "did": profile.did,
+            "handle": profile.handle,
+            "displayName": profile.display_name.as_deref().unwrap_or(&profile.handle),
+            "avatar": profile.avatar.as_deref().unwrap_or(&format!("https://bsky.syu.is/img/avatar/plain/{}/default@jpeg", profile.did))
+        })
+    }
+}
+
+impl Default for ProfileFetcher {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_network_config() {
+        let config = ProfileFetcher::get_network_config("syu.is");
+        assert_eq!(config.pds_api, "https://syu.is");
+        assert_eq!(config.bsky_api, "https://bsky.syu.is");
+        
+        let config = ProfileFetcher::get_network_config("bsky.social");
+        assert_eq!(config.pds_api, "https://bsky.social");
+        assert_eq!(config.bsky_api, "https://public.api.bsky.app");
+    }
+
+    #[test]
+    fn test_profile_url_generation() {
+        let did = "did:plc:test123";
+        
+        let url = ProfileFetcher::generate_profile_url(did, "syu.is");
+        assert_eq!(url, "https://syu.is/profile/did:plc:test123");
+        
+        let url = ProfileFetcher::generate_profile_url(did, "bsky.social");
+        assert_eq!(url, "https://bsky.app/profile/did:plc:test123");
+    }
+}
--- a/src/commands/auth.rs
+++ b/src/commands/auth.rs
@@ -245,7 +245,7 @@ pub async fn init_with_pds(pds_override: Option<String>) -> Result<()> {
        }
    } else {
        // Auto-detect from handle suffix
-        if handle.ends_with(".syu.is") {
+        if handle.ends_with(".syu.is") || handle.ends_with(".syui.ai") {
            "https://syu.is".to_string()
        } else {
            "https://bsky.social".to_string()
--- a/src/commands/interactive.rs
+++ b/src/commands/interactive.rs
@@ -0,0 +1,706 @@
+use anyhow::Result;
+use chrono::{DateTime, Utc, Datelike};
+use std::path::PathBuf;
+use serde_json::{json, Value};
+use crate::commands::auth::{AuthConfig, load_config_with_refresh};
+use toml::Value as TomlValue;
+use rustyline::DefaultEditor;
+use rand::Rng;
+use serde::Deserialize;
+
+#[derive(Debug, Deserialize)]
+struct BlogConfig {
+    base_url: String,
+    content_dir: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct ProfileConfig {
+    handle: String,
+    did: String,
+    display_name: String,
+    avatar_url: String,
+    profile_url: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct ProfilesConfig {
+    user: ProfileConfig,
+    ai: ProfileConfig,
+}
+
+#[derive(Debug, Deserialize)]
+struct PathsConfig {
+    claude_paths: Vec<String>,
+}
+
+#[derive(Debug, Deserialize)]
+struct AppConfig {
+    blog: BlogConfig,
+    profiles: ProfilesConfig,
+    paths: PathsConfig,
+}
+
+pub async fn run() -> Result<()> {
+    println!("🤖 Interactive Blog Writer");
+    println!("Type your title and questions to create a conversation blog post.");
+    println!("Features: ← → for cursor movement, ↑ ↓ for history, Ctrl+C to cancel");
+    println!("Type 'end' to finish and publish.\n");
+
+    // Initialize rustyline editor with history support
+    let mut rl = DefaultEditor::new()?;
+    
+    // Try to load history from file
+    let history_file = std::env::temp_dir().join("ailog_history.txt");
+    let _ = rl.load_history(&history_file);
+    
+    // Get title
+    let title = match rl.readline("Title? ") {
+        Ok(line) => line.trim().to_string(),
+        Err(_) => {
+            println!("Cancelled.");
+            return Ok(());
+        }
+    };
+
+    if title.is_empty() {
+        println!("Title cannot be empty. Exiting.");
+        return Ok(());
+    }
+
+    // Create conversation
+    let mut conversation = Vec::new();
+
+    loop {
+        
+        // Get question
+        let question = match rl.readline("\n質問は? ") {
+            Ok(line) => line.trim().to_string(),
+            Err(_) => {
+                println!("Cancelled.");
+                break;
+            }
+        };
+
+        if question.is_empty() || question == "end" {
+            break;
+        }
+
+        println!("\n🤖 Thinking...\n");
+
+        // Get Claude response
+        let response = match get_claude_response(&question).await {
+            Ok(resp) => resp,
+            Err(e) => {
+                println!("Error getting Claude response: {}", e);
+                continue;
+            }
+        };
+
+        println!("Claude: {}\n", response);
+        // Get continue input
+        let continue_input = match rl.readline("Press Enter to continue, or type 'end' to finish: ") {
+            Ok(line) => line.trim().to_string(),
+            Err(_) => {
+                println!("Cancelled.");
+                break;
+            }
+        };
+        
+        // Store conversation pair
+        conversation.push(ConversationPair {
+            question: question.clone(),
+            answer: response.clone(),
+        });
+
+        if continue_input == "end" {
+            break;
+        }
+    }
+
+    if conversation.is_empty() {
+        println!("No conversation to save. Exiting.");
+        return Ok(());
+    }
+
+    // Generate post
+    println!("🔧 Generating post details...");
+    let app_config = load_app_config().await?;
+    let now = Utc::now();
+    let date = now.format("%Y-%m-%d").to_string();
+    let hash = generate_hash(&title);
+    let filename = format!("{}-{}.md", date, hash);
+    let url = format!("{}/posts/{}", app_config.blog.base_url, filename.replace(".md", ".html"));
+    println!("📝 Post details - Date: {}, Hash: {}, File: {}", date, hash, filename);
+
+    // Create markdown file
+    println!("📝 Creating markdown file: {}", filename);
+    match create_post_file(&title, &date, &hash, &conversation, &filename).await {
+        Ok(_) => println!("✅ Markdown file created successfully"),
+        Err(e) => {
+            println!("❌ Failed to create markdown file: {}", e);
+            return Err(e);
+        }
+    }
+    
+    // Post to atproto
+    post_to_atproto(&title, &conversation, &url, &now).await?;
+
+    // Save history before exiting
+    let _ = rl.save_history(&history_file);
+    
+    println!("✅ Blog post created: {}", filename);
+    println!("📝 URL: {}", url);
+    
+    Ok(())
+}
+
+#[derive(Debug)]
+struct ConversationPair {
+    question: String,
+    answer: String,
+}
+
+async fn get_claude_response(question: &str) -> Result<String> {
+    println!("🤖 Asking Claude...");
+    
+    // Load system prompt from config
+    let system_prompt = load_system_prompt().await.unwrap_or_else(|_| {
+        "あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。".to_string()
+    });
+    
+    // Method 1: Try stdin input (most direct)
+    println!("🔄 Trying stdin method...");
+    match try_claude_stdin(question, &system_prompt).await {
+        Ok(response) if !response.trim().is_empty() => {
+            return Ok(response);
+        }
+        Ok(_) => println!("⚠️ Empty response from stdin method"),
+        Err(e) => println!("⚠️ Stdin method failed: {}", e),
+    }
+    
+    // Method 2: Try file input
+    println!("🔄 Trying file method...");
+    match try_claude_file(question, &system_prompt).await {
+        Ok(response) if !response.trim().is_empty() => {
+            return Ok(response);
+        }
+        Ok(_) => println!("⚠️ Empty response from file method"),
+        Err(e) => println!("⚠️ File method failed: {}", e),
+    }
+    
+    // Fallback - provide a more engaging response using character
+    println!("⚠️ Claude Code not available, using character-based fallback");
+    
+    // Generate contextual response based on question content with character
+    let current_year = Utc::now().year();
+    let response = if question.contains("ゲーム") || question.contains("game") || question.contains("npc") || question.contains("NPC") {
+        format!("わあ！ゲームの話だね！アイ、ゲームのAIってすっごく面白いと思う！\n\n{}\n\nアイが知ってることだと、最近のゲームはNPCがお話できるようになってるんだって！**Inworld AI**っていうのがUE5で使えるようになってるし、**Unity Muse**も{}年から本格的に始まってるんだよ！\n\nアイが特に面白いと思うのは、**MCP**っていうのを使うと：\n- GitHub MCPでゲームのファイル管理ができる\n- Weather MCPでリアルタイムのお天気が連動する\n- Slack MCPでチーム開発が効率化される\n\nスタンフォードの研究では、ChatGPTベースのAI住民が自分で街を作って生活してるのを見たことがあるの！数年後にはNPCの概念が根本的に変わりそうで、わくわくしちゃう！\n\nUE5への統合、どんな機能から試したいの？アイも一緒に考えたい！", question, current_year)
+    } else if question.contains("AI") || question.contains("ai") || question.contains("MCP") || question.contains("mcp") {
+        format!("AIとMCPの話！アイの得意分野だよ！\n\n{}\n\n{}年の状況だと、MCP市場が拡大してて、実用的なサーバーが数多く使えるようになってるの！\n\nアイが知ってる開発系では：\n- **GitHub MCP**: PR作成とリポジトリ管理が自動化\n- **Docker MCP**: コンテナ操作をAIが代行\n- **PostgreSQL MCP**: データベース設計・最適化を支援\n\nクリエイティブ系では：\n- **Blender MCP**: 3Dモデリングの自動化\n- **Figma MCP**: デザインからコード変換\n\n**Zapier MCP**なんて数千のアプリと連携できるから、もう手作業でやってる場合じゃないよね！\n\nアイは小さい物質のことも知ってるから、どの分野でのMCP活用を考えてるのか教えて！具体的なユースケースがあると、もっと詳しくお話できるよ！", question, current_year)
+    } else {
+        format!("なるほど！面白い話題だね！\n\n{}\n\nアイが思うに、この手の技術って急速に進歩してるから、具体的な製品名とか実例を交えて話した方が分かりやすいかもしれないの！\n\n最近だと、AI関連のツールやプロトコルがかなり充実してきてて、実用レベルのものが増えてるんだよ！\n\nアイは宇宙とかAIとか、難しい話も知ってるから、特にどんな角度から深掘りしたいの？実装面？それとも将来的な可能性とか？アイと一緒に考えよう！", question)
+    };
+    
+    Ok(response)
+}
+
+async fn load_app_config() -> Result<AppConfig> {
+    let config_path = PathBuf::from("./my-blog/config.toml");
+    let config_content = std::fs::read_to_string(config_path)?;
+    let config: AppConfig = toml::from_str(&config_content)?;
+    Ok(config)
+}
+
+async fn load_system_prompt() -> Result<String> {
+    let config_path = PathBuf::from("./my-blog/config.toml");
+    let config_content = std::fs::read_to_string(config_path)?;
+    let config: TomlValue = toml::from_str(&config_content)?;
+    
+    if let Some(ai_section) = config.get("ai") {
+        if let Some(system_prompt) = ai_section.get("system_prompt") {
+            if let Some(prompt_str) = system_prompt.as_str() {
+                return Ok(prompt_str.to_string());
+            }
+        }
+    }
+    
+    // Default fallback
+    Ok("あなたは6歳の女の子アイです。明るく元気で、ちょっとおっちょこちょい。自分のことは「アイ」って呼びます。白と金のワンピース姿。 相手のことが大好きで、ときどき甘えたり、照れたりします。 でも、宇宙とかAIとか、難しい話にもすっごく詳しいの。専門的なことも、がんばって子どもっぽく教えようとします。不思議な力を持っています。小さい物質のことをよく知っているようです。".to_string())
+}
+
+async fn try_claude_stdin(question: &str, _system_prompt: &str) -> Result<String> {
+    use std::process::{Command, Stdio};
+    use std::io::Write;
+    
+    // Load Claude command paths from config
+    let app_config = load_app_config().await?;
+    let claude_paths = &app_config.paths.claude_paths;
+    
+    let mut last_error = None;
+    
+    for claude_path in claude_paths {
+        match Command::new(claude_path)
+            .stdin(Stdio::piped())
+            .stdout(Stdio::piped())
+            .stderr(Stdio::piped())
+            .spawn() {
+            Ok(mut child) => {
+                if let Some(stdin) = child.stdin.as_mut() {
+                    let current_year = Utc::now().year();
+                    // キャラクター設定を読み込み
+                    let system_prompt = load_system_prompt().await.unwrap_or_default();
+                    let blog_prompt = format!(
+                        r#"{}
+
+**質問**: "{}"
+
+以下の要件で技術ブログ記事として回答してください：
+
+**技術要件：**
+- 最新の技術動向（{}年）と具体例
+- 実装可能なコード例（言語やツールを明記）
+- 複数の解決策の比較検討
+- セキュリティとパフォーマンスの考慮事項
+
+**表現要件：**
+- キャラクターの個性を活かした親しみやすい説明
+- 技術に対する個人的な意見や考えを含める
+- 難しい概念も分かりやすく説明
+- 読者との対話的な文章
+
+**Markdown記法：**
+- コードブロックは言語指定付き（```typescript, ```python など）
+- 表は | を使用したMarkdown形式
+- 見出しは適切な階層構造（#, ##, ###）
+- リストは - または 1. 形式
+- mermaidやその他の図も積極的に使用
+
+専門的な内容を保ちながら、キャラクターの視点から技術の面白さや可能性について語ってください。"#, system_prompt, question, current_year);
+                    
+                    writeln!(stdin, "{}", blog_prompt)?;
+                    stdin.flush()?;
+                    // Close stdin to signal end of input
+                    drop(child.stdin.take());
+                }
+                
+                let output = child.wait_with_output()?;
+                
+                if output.status.success() {
+                    let response = String::from_utf8_lossy(&output.stdout);
+                    return Ok(response.trim().to_string());
+                } else {
+                    let error = String::from_utf8_lossy(&output.stderr);
+                    last_error = Some(anyhow::anyhow!("Claude stdin error: {}", error));
+                }
+            }
+            Err(e) => {
+                last_error = Some(e.into());
+                continue;
+            }
+        }
+    }
+    
+    Err(last_error.unwrap_or_else(|| anyhow::anyhow!("No Claude command found")))
+}
+
+async fn try_claude_file(question: &str, _system_prompt: &str) -> Result<String> {
+    use std::process::Command;
+    use std::fs;
+    
+    // Create temporary directory for communication
+    let temp_dir = std::env::temp_dir().join("ailog_claude");
+    fs::create_dir_all(&temp_dir)?;
+    
+    let question_file = temp_dir.join("question.md");
+    
+    // Write question to file with blog prompt
+    let current_year = Utc::now().year();
+    let system_prompt = load_system_prompt().await.unwrap_or_default();
+    fs::write(&question_file, format!(
+        r#"{}
+
+**質問**: "{}"
+
+以下の要件で技術ブログ記事として回答してください：
+
+**技術要件：**
+- 最新の技術動向（{}年）と具体例
+- 実装可能なコード例（言語やツールを明記）
+- 複数の解決策の比較検討
+- セキュリティとパフォーマンスの考慮事項
+
+**表現要件：**
+- キャラクターの個性を活かした親しみやすい説明
+- 技術に対する個人的な意見や考えを含める
+- 難しい概念も分かりやすく説明
+- 読者との対話的な文章
+
+**Markdown記法：**
+- コードブロックは言語指定付き（```typescript, ```python など）
+- 表は | を使用したMarkdown形式
+- 見出しは適切な階層構造（#, ##, ###）
+- リストは - または 1. 形式
+- mermaidやその他の図も積極的に使用
+
+専門的な内容を保ちながら、キャラクターの視点から技術の面白さや可能性について語ってください。"#, system_prompt, question, current_year))?;
+    
+    // Load Claude command paths from config
+    let app_config = load_app_config().await?;
+    let claude_paths = &app_config.paths.claude_paths;
+    
+    let mut last_error = None;
+    
+    for claude_path in claude_paths {
+        match Command::new(claude_path)
+            .arg(question_file.to_str().unwrap())
+            .output() {
+            Ok(output) if output.status.success() => {
+                let _ = fs::remove_file(&question_file);
+                let response = String::from_utf8_lossy(&output.stdout);
+                return Ok(response.trim().to_string());
+            }
+            Ok(output) => {
+                let error = String::from_utf8_lossy(&output.stderr);
+                last_error = Some(anyhow::anyhow!("Claude file error: {}", error));
+            }
+            Err(e) => {
+                last_error = Some(e.into());
+                continue;
+            }
+        }
+    }
+        
+    // Clean up temporary files
+    let _ = fs::remove_file(&question_file);
+    
+    Err(last_error.unwrap_or_else(|| anyhow::anyhow!("No Claude command found")))
+}
+
+fn generate_hash(title: &str) -> String {
+    // Simple hash generation from title
+    use std::collections::hash_map::DefaultHasher;
+    use std::hash::{Hash, Hasher};
+    
+    let mut hasher = DefaultHasher::new();
+    title.hash(&mut hasher);
+    format!("{:x}", hasher.finish())[..8].to_string()
+}
+
+async fn create_post_file(
+    title: &str, 
+    date: &str, 
+    hash: &str, 
+    conversation: &[ConversationPair],
+    filename: &str
+) -> Result<()> {
+    // Load profile information from config
+    let app_config = load_app_config().await?;
+    let user_profile = &app_config.profiles.user;
+    let ai_profile = &app_config.profiles.ai;
+    let content_dir = PathBuf::from(&app_config.blog.content_dir);
+    std::fs::create_dir_all(&content_dir)?;
+    
+    let file_path = content_dir.join(filename);
+    println!("📂 Writing to path: {}", file_path.display());
+    
+    let mut content = format!(
+        r#"---
+title: "{}"
+slug: "{}"
+date: "{}"
+tags: ["ai", "conversation"]
+draft: false
+extra:
+  type: "ai"
+---
+
+"#,
+        title, hash, date
+    );
+
+    // Add conversation metadata
+    content.push_str("<!-- AI Conversation Metadata -->\n");
+    content.push_str(&format!("<!-- Total exchanges: {} -->\n\n", conversation.len()));
+    
+    // Add conversation content with chat-style HTML
+    for (i, pair) in conversation.iter().enumerate() {
+        if i > 0 {
+            content.push_str("\n<div class=\"chat-separator\"></div>\n\n");
+        }
+        
+        // User message (question)
+        content.push_str(&format!(r#"<div class="chat-message user-message comment-style">
+    <div class="message-header">
+        <div class="avatar">
+            <img src="{}" alt="syui avatar" class="profile-avatar">
+        </div>
+        <div class="user-info">
+            <div class="display-name">{}</div>
+            <div class="handle">
+                <a href="{}" target="_blank" rel="noopener noreferrer" class="handle-link">@{}</a>
+            </div>
+        </div>
+    </div>
+    <div class="message-content">
+"#, 
+            user_profile.avatar_url,
+            user_profile.display_name,
+            user_profile.profile_url,
+            user_profile.handle
+        ));
+        content.push_str(&pair.question);
+        content.push_str("\n    </div>\n</div>\n\n");
+        
+        // AI message (answer)
+        content.push_str(&format!(r#"<div class="chat-message ai-message comment-style">
+    <div class="message-header">
+        <div class="avatar">
+            <img src="{}" alt="ai avatar" class="profile-avatar">
+        </div>
+        <div class="user-info">
+            <div class="display-name">{}</div>
+            <div class="handle">
+                <a href="{}" target="_blank" rel="noopener noreferrer" class="handle-link">@{}</a>
+            </div>
+        </div>
+    </div>
+    <div class="message-content">
+"#, 
+            ai_profile.avatar_url,
+            ai_profile.display_name,
+            ai_profile.profile_url,
+            ai_profile.handle
+        ));
+        content.push_str(&pair.answer);
+        content.push_str("\n    </div>\n</div>\n\n");
+    }
+
+    std::fs::write(&file_path, content)?;
+    println!("📄 Created: {}", filename);
+    println!("✅ File exists: {}", file_path.exists());
+    
+    Ok(())
+}
+
+async fn post_to_atproto(
+    title: &str,
+    conversation: &[ConversationPair], 
+    url: &str,
+    timestamp: &DateTime<Utc>
+) -> Result<()> {
+    println!("📡 Posting to atproto...");
+    
+    // Load auth config once
+    let config = load_config_with_refresh().await?;
+    let client = reqwest::Client::new();
+    
+    // Simple duplicate check - just warn if there might be duplicates
+    if let Err(e) = check_for_duplicates(&client, &config, conversation, url).await {
+        println!("⚠️ Duplicate check warning: {}", e);
+        // Continue posting anyway
+    }
+    
+    // Get user and AI profile information
+    let user_profile = get_user_profile(&config).await?;
+    let ai_profile = get_ai_profile(&client, &config).await?;
+    
+    for (i, pair) in conversation.iter().enumerate() {
+        println!("  📤 Posting exchange {}/{}...", i + 1, conversation.len());
+        
+        // Create base rkey for this conversation pair with random component
+        let mut rng = rand::thread_rng();
+        let random_suffix: u32 = rng.gen_range(1000..9999);
+        let base_rkey = format!("{}-{}-{}", timestamp.format("%Y-%m-%dT%H-%M-%S-%3fZ"), i, random_suffix);
+        
+        // Post question record first
+        print!("    📝 Question... ");
+        let question_record = json!({
+            "$type": "ai.syui.log.chat",
+            "post": {
+                "url": url,
+                "date": timestamp.to_rfc3339(),
+                "slug": "",
+                "tags": [],
+                "title": title,
+                "language": "ja",
+                "type": "ai"
+            },
+            "text": pair.question,
+            "type": "question",
+            "author": user_profile,
+            "createdAt": timestamp.to_rfc3339()
+        });
+        
+        store_atproto_record(&client, &config, &config.collections.chat(), &question_record, &base_rkey).await?;
+        println!("✅");
+        
+        // Wait a moment between posts
+        tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+        
+        // Post answer record
+        print!("    🤖 Answer... ");
+        let answer_rkey = format!("{}-answer", base_rkey);
+        let answer_record = json!({
+            "$type": "ai.syui.log.chat",
+            "post": {
+                "url": url,
+                "date": timestamp.to_rfc3339(),
+                "slug": "",
+                "tags": [],
+                "title": title,
+                "language": "ja",
+                "type": "ai"
+            },
+            "text": pair.answer,
+            "type": "answer",
+            "author": ai_profile,
+            "createdAt": timestamp.to_rfc3339()
+        });
+        
+        store_atproto_record(&client, &config, &config.collections.chat(), &answer_record, &answer_rkey).await?;
+        println!("✅");
+        
+        // Wait between conversation pairs
+        if i < conversation.len() - 1 {
+            tokio::time::sleep(tokio::time::Duration::from_millis(1000)).await;
+        }
+    }
+    
+    println!("✅ Posted to atproto");
+    Ok(())
+}
+
+async fn get_user_profile(config: &AuthConfig) -> Result<Value> {
+    use crate::atproto::profile::ProfileFetcher;
+    
+    // Load user config from app config
+    let app_config = load_app_config().await?;
+    let user_profile = &app_config.profiles.user;
+    
+    // Try to fetch profile dynamically
+    let profile_fetcher = ProfileFetcher::new();
+    match profile_fetcher.fetch_profile_from_handle(&user_profile.handle, &config.admin.pds).await {
+        Ok(profile) => {
+            Ok(json!({
+                "did": profile.did,
+                "handle": profile.handle,
+                "displayName": profile.display_name.unwrap_or_else(|| user_profile.display_name.clone()),
+                "avatar": profile.avatar.unwrap_or_else(|| user_profile.avatar_url.clone())
+            }))
+        }
+        Err(e) => {
+            println!("⚠️ Failed to fetch user profile dynamically: {}, using config defaults", e);
+            Ok(json!({
+                "did": user_profile.did,
+                "handle": user_profile.handle,
+                "displayName": user_profile.display_name,
+                "avatar": user_profile.avatar_url
+            }))
+        }
+    }
+}
+
+async fn get_ai_profile(_client: &reqwest::Client, config: &AuthConfig) -> Result<Value> {
+    use crate::atproto::profile::ProfileFetcher;
+    
+    // Load AI config from app config
+    let app_config = load_app_config().await?;
+    let ai_profile = &app_config.profiles.ai;
+    
+    // Try to fetch profile dynamically
+    let profile_fetcher = ProfileFetcher::new();
+    match profile_fetcher.fetch_profile_from_handle(&ai_profile.handle, &config.admin.pds).await {
+        Ok(profile) => {
+            Ok(json!({
+                "did": profile.did,
+                "handle": profile.handle,
+                "displayName": profile.display_name.unwrap_or_else(|| ai_profile.display_name.clone()),
+                "avatar": profile.avatar.unwrap_or_else(|| ai_profile.avatar_url.clone())
+            }))
+        }
+        Err(e) => {
+            println!("⚠️ Failed to fetch AI profile dynamically: {}, using config defaults", e);
+            Ok(json!({
+                "did": ai_profile.did,
+                "handle": ai_profile.handle,
+                "displayName": ai_profile.display_name,
+                "avatar": ai_profile.avatar_url
+            }))
+        }
+    }
+}
+
+async fn check_for_duplicates(
+    client: &reqwest::Client,
+    config: &AuthConfig,
+    _conversation: &[ConversationPair],
+    _url: &str,
+) -> Result<()> {
+    // Simple check - just get recent records to warn about potential duplicates
+    let chat_collection = format!("{}.chat", config.collections.base);
+    let list_url = format!("{}/xrpc/com.atproto.repo.listRecords", config.admin.pds);
+    
+    let response = client
+        .get(&list_url)
+        .query(&[
+            ("repo", config.admin.did.as_str()),
+            ("collection", chat_collection.as_str()),
+            ("limit", "10"), // Only check last 10 records
+        ])
+        .send()
+        .await?;
+    
+    if !response.status().is_success() {
+        return Err(anyhow::anyhow!("Failed to fetch existing records"));
+    }
+    
+    let records: serde_json::Value = response.json().await?;
+    let record_count = records["records"].as_array().map(|arr| arr.len()).unwrap_or(0);
+    
+    if record_count > 0 {
+        println!("ℹ️ Found {} recent chat records", record_count);
+    }
+    
+    Ok(())
+}
+
+async fn store_atproto_record(
+    client: &reqwest::Client,
+    config: &AuthConfig,
+    collection: &str,
+    record_data: &Value,
+    rkey: &str,
+) -> Result<()> {
+    let url = format!("{}/xrpc/com.atproto.repo.putRecord", config.admin.pds);
+    
+    let put_request = json!({
+        "repo": config.admin.did,
+        "collection": collection,
+        "rkey": rkey,
+        "record": record_data
+    });
+
+    let response = client
+        .post(&url)
+        .header("Authorization", format!("Bearer {}", config.admin.access_jwt))
+        .header("Content-Type", "application/json")
+        .json(&put_request)
+        .send()
+        .await?;
+
+    if !response.status().is_success() {
+        let status = response.status();
+        let error_text = response.text().await?;
+        
+        // Check if it's a conflict error (record already exists)
+        if status == 409 || error_text.contains("InvalidSwap") || error_text.contains("RecordAlreadyExists") {
+            println!("⚠️ Record with rkey '{}' already exists, skipping", rkey);
+            return Ok(());
+        }
+        
+        return Err(anyhow::anyhow!("Failed to post record: {} - {}", status, error_text));
+    }
+    
+    Ok(())
+}
--- a/src/commands/mod.rs
+++ b/src/commands/mod.rs
@@ -6,4 +6,5 @@ pub mod clean;
 pub mod doc;
 pub mod auth;
 pub mod stream;
-pub mod oauth;
+pub mod oauth;
+pub mod interactive;
--- a/src/commands/serve.rs
+++ b/src/commands/serve.rs
@@ -328,7 +328,7 @@ async fn serve_file(path: &str) -> Result<(&'static str, Vec<u8>, &'static str)>
    // Remove query parameters from path
    let clean_path = path.split('?').next().unwrap_or(path);
    
-    let file_path = if clean_path == "/" {
+    let mut file_path = if clean_path == "/" {
        PathBuf::from("public/index.html")
    } else {
        PathBuf::from("public").join(clean_path.trim_start_matches('/'))
@@ -337,9 +337,42 @@ async fn serve_file(path: &str) -> Result<(&'static str, Vec<u8>, &'static str)>
    println!("Serving file: {}", file_path.display());

    // Check if file exists and get metadata
-    let metadata = tokio::fs::metadata(&file_path).await?;
-    if !metadata.is_file() {
-        return Err(anyhow::anyhow!("Not a file: {}", file_path.display()));
+    let metadata = tokio::fs::metadata(&file_path).await;
+    
+    match metadata {
+        Ok(meta) if meta.is_file() => {
+            // File exists, proceed normally
+        }
+        Ok(meta) if meta.is_dir() => {
+            // Directory exists, try to serve index.html
+            file_path = file_path.join("index.html");
+            println!("Directory found, trying index.html: {}", file_path.display());
+            let index_metadata = tokio::fs::metadata(&file_path).await?;
+            if !index_metadata.is_file() {
+                return Err(anyhow::anyhow!("No index.html in directory: {}", file_path.display()));
+            }
+        }
+        Ok(_) => {
+            return Err(anyhow::anyhow!("Not a file: {}", file_path.display()));
+        }
+        Err(e) => {
+            // Try adding index.html to the original path
+            let index_path = PathBuf::from("public")
+                .join(clean_path.trim_start_matches('/'))
+                .join("index.html");
+            
+            println!("File not found, trying index.html: {}", index_path.display());
+            let index_metadata = tokio::fs::metadata(&index_path).await;
+            if let Ok(meta) = index_metadata {
+                if meta.is_file() {
+                    file_path = index_path;
+                } else {
+                    return Err(anyhow::anyhow!("Original error: {}", e));
+                }
+            } else {
+                return Err(anyhow::anyhow!("File not found: {}", file_path.display()));
+            }
+        }
    }

    let (content_type, cache_control) = match file_path.extension().and_then(|ext| ext.to_str()) {
--- a/src/generator.rs
+++ b/src/generator.rs
@@ -86,6 +86,12 @@ impl Generator {
            }
        }

+        // Generate PDS page
+        self.generate_pds_page().await?;
+
+        // Generate Game page
+        self.generate_game_page().await?;
+
        println!("{} {} posts", "Generated".cyan(), posts.len());

        Ok(())
@@ -235,6 +241,7 @@ impl Generator {
                .unwrap_or_default(),
            translations: None,
            ai_comment: None,
+            extra: frontmatter.get("extra").cloned(),
        };
        
        // Auto-translate if enabled and post is in Japanese
@@ -341,7 +348,8 @@ impl Generator {
            "ai_comment": enhanced_post.ai_comment,
            "markdown_url": markdown_url,
            "translation_url": translation_urls.first(),
-            "language": self.config.site.language
+            "language": self.config.site.language,
+            "extra": enhanced_post.extra
        }));

        let html = self.template_engine.render_with_context("post.html", &context)?;
@@ -489,6 +497,54 @@ impl Generator {
        Ok(())
    }
    
+    async fn generate_pds_page(&self) -> Result<()> {
+        let public_dir = self.base_path.join("public");
+        let pds_dir = public_dir.join("pds");
+        fs::create_dir_all(&pds_dir)?;
+        
+        // Generate PDS page using the pds.html template
+        let config_with_timestamp = self.create_config_with_timestamp()?;
+        let mut context = tera::Context::new();
+        context.insert("config", &config_with_timestamp);
+        context.insert("site", &self.config.site);
+        context.insert("page", &serde_json::json!({
+            "title": "AT URI Browser",
+            "description": "AT Protocol レコードをブラウズし、分散SNSのコンテンツを探索できます"
+        }));
+        
+        let rendered_content = self.template_engine.render("pds.html", &context)?;
+        let output_path = pds_dir.join("index.html");
+        fs::write(output_path, rendered_content)?;
+        
+        println!("{} PDS page", "Generated".cyan());
+        
+        Ok(())
+    }
+
+    async fn generate_game_page(&self) -> Result<()> {
+        let public_dir = self.base_path.join("public");
+        let game_dir = public_dir.join("game");
+        fs::create_dir_all(&game_dir)?;
+        
+        // Generate Game page using the game.html template
+        let config_with_timestamp = self.create_config_with_timestamp()?;
+        let mut context = tera::Context::new();
+        context.insert("config", &config_with_timestamp);
+        context.insert("site", &self.config.site);
+        context.insert("page", &serde_json::json!({
+            "title": "Game",
+            "description": "Play the game with AT Protocol authentication"
+        }));
+        
+        let rendered_content = self.template_engine.render("game.html", &context)?;
+        let output_path = game_dir.join("index.html");
+        fs::write(output_path, rendered_content)?;
+        
+        println!("{} Game page", "Generated".cyan());
+        
+        Ok(())
+    }
+    
    fn extract_plain_text(&self, html_content: &str) -> String {
        // Remove HTML tags and extract plain text
        let mut text = String::new();
@@ -531,8 +587,10 @@ pub struct Post {
    pub tags: Vec<String>,
    pub translations: Option<Vec<Translation>>,
    pub ai_comment: Option<String>,
+    pub extra: Option<serde_json::Value>,
 }

+
 #[derive(Debug, Clone, serde::Serialize)]
 pub struct Translation {
    pub lang: String,
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -7,6 +7,7 @@ pub mod config;
 pub mod doc_generator;
 pub mod generator;
 pub mod markdown;
+pub mod shortcode;
 pub mod mcp;
 pub mod oauth;
 // pub mod ollama_proxy; // Temporarily disabled - uses actix-web instead of axum
--- a/src/main.rs
+++ b/src/main.rs
@@ -7,6 +7,7 @@ mod commands;
 mod doc_generator;
 mod generator;
 mod markdown;
+mod shortcode;
 mod template;
 mod oauth;
 mod translator;
@@ -106,6 +107,8 @@ enum Commands {
        #[command(subcommand)]
        command: OauthCommands,
    },
+    /// Interactive blog writing mode (default)
+    Interactive,
 }

 #[derive(Subcommand)]
@@ -188,10 +191,8 @@ async fn main() -> Result<()> {
        return Ok(());
    }
    
-    // Require subcommand if no version flag
-    let command = cli.command.ok_or_else(|| {
-        anyhow::anyhow!("No subcommand provided. Use --help for usage information.")
-    })?;
+    // If no subcommand provided, start interactive mode
+    let command = cli.command.unwrap_or(Commands::Interactive);

    match command {
        Commands::Init { path } => {
@@ -279,6 +280,9 @@ async fn main() -> Result<()> {
                }
            }
        }
+        Commands::Interactive => {
+            commands::interactive::run().await?;
+        }
    }

    Ok(())
--- a/src/markdown.rs
+++ b/src/markdown.rs
@@ -6,12 +6,14 @@ use syntect::html::{styled_line_to_highlighted_html, IncludeBackground};
 use gray_matter::Matter;
 use gray_matter::engine::YAML;
 use serde_json::Value;
+use crate::shortcode::ShortcodeProcessor;

 pub struct MarkdownProcessor {
    highlight_code: bool,
    highlight_theme: String,
    syntax_set: SyntaxSet,
    theme_set: ThemeSet,
+    shortcode_processor: ShortcodeProcessor,
 }

 impl MarkdownProcessor {
@@ -21,6 +23,7 @@ impl MarkdownProcessor {
            highlight_theme: highlight_theme.unwrap_or_else(|| "Monokai".to_string()),
            syntax_set: SyntaxSet::load_defaults_newlines(),
            theme_set: ThemeSet::load_defaults(),
+            shortcode_processor: ShortcodeProcessor::new(),
        }
    }

@@ -68,6 +71,9 @@ impl MarkdownProcessor {


    pub fn render(&self, content: &str) -> Result<String> {
+        // Process shortcodes first
+        let processed_content = self.shortcode_processor.process(content);
+        
        let mut options = Options::empty();
        options.insert(Options::ENABLE_STRIKETHROUGH);
        options.insert(Options::ENABLE_TABLES);
@@ -75,15 +81,21 @@ impl MarkdownProcessor {
        options.insert(Options::ENABLE_TASKLISTS);

        if self.highlight_code {
-            self.render_with_syntax_highlighting(content, options)
+            self.render_with_syntax_highlighting(&processed_content, options)
        } else {
-            let parser = Parser::new_ext(content, options);
+            let parser = Parser::new_ext(&processed_content, options);
            let mut html_output = String::new();
            html::push_html(&mut html_output, parser);
            Ok(html_output)
        }
    }

+    /// Provide access to the shortcode processor for custom shortcode registration
+    #[allow(dead_code)]
+    pub fn shortcode_processor_mut(&mut self) -> &mut ShortcodeProcessor {
+        &mut self.shortcode_processor
+    }
+
    fn render_with_syntax_highlighting(&self, content: &str, options: Options) -> Result<String> {
        let parser = Parser::new_ext(content, options);
        let mut html_output = String::new();
--- a/src/shortcode.rs
+++ b/src/shortcode.rs
@@ -0,0 +1,256 @@
+use regex::Regex;
+use std::collections::HashMap;
+
+pub struct ShortcodeProcessor {
+    shortcodes: HashMap<String, Box<dyn Fn(&str) -> String + Send + Sync>>,
+}
+
+impl ShortcodeProcessor {
+    pub fn new() -> Self {
+        let mut processor = Self {
+            shortcodes: HashMap::new(),
+        };
+        
+        // Register built-in shortcodes
+        processor.register_img_compare();
+        processor.register_message();
+        
+        processor
+    }
+
+    fn register_img_compare(&mut self) {
+        self.shortcodes.insert(
+            "img-compare".to_string(),
+            Box::new(|attrs| Self::parse_img_compare_shortcode(attrs)),
+        );
+    }
+
+    fn register_message(&mut self) {
+        self.shortcodes.insert(
+            "msg".to_string(),
+            Box::new(|attrs| Self::parse_message_shortcode(attrs)),
+        );
+    }
+
+    pub fn process(&self, content: &str) -> String {
+        let mut processed = content.to_string();
+
+        // Process {{< shortcode >}} format (Hugo-style)
+        let hugo_regex = Regex::new(r#"\{\{<\s*(\w+(?:-\w+)*)\s*([^>]*)\s*>\}\}"#).unwrap();
+        processed = hugo_regex.replace_all(&processed, |caps: &regex::Captures| {
+            let shortcode_name = &caps[1];
+            let attrs = caps.get(2).map(|m| m.as_str()).unwrap_or("");
+            
+            if let Some(handler) = self.shortcodes.get(shortcode_name) {
+                handler(attrs)
+            } else {
+                caps[0].to_string() // Return original if shortcode not found
+            }
+        }).to_string();
+
+        // Process [shortcode] format (Bracket-style)
+        let bracket_regex = Regex::new(r#"\[(\w+(?:-\w+)*)\s*([^\]]*)\]"#).unwrap();
+        processed = bracket_regex.replace_all(&processed, |caps: &regex::Captures| {
+            let shortcode_name = &caps[1];
+            let attrs = caps.get(2).map(|m| m.as_str()).unwrap_or("");
+            
+            if let Some(handler) = self.shortcodes.get(shortcode_name) {
+                handler(attrs)
+            } else {
+                caps[0].to_string() // Return original if shortcode not found
+            }
+        }).to_string();
+
+        processed
+    }
+
+    fn parse_attributes(attrs: &str) -> HashMap<String, String> {
+        let attr_regex = Regex::new(r#"(\w+(?:-\w+)*)=(?:"([^"]*)"|'([^']*)'|([^\s]+))"#).unwrap();
+        let mut attributes = HashMap::new();
+
+        for caps in attr_regex.captures_iter(attrs) {
+            let key = caps.get(1).unwrap().as_str().to_string();
+            let value = caps.get(2).or(caps.get(3)).or(caps.get(4)).unwrap().as_str().to_string();
+            attributes.insert(key, value);
+        }
+
+        attributes
+    }
+
+    fn parse_img_compare_shortcode(attrs: &str) -> String {
+        let attributes = Self::parse_attributes(attrs);
+
+        let before = attributes.get("before").map(|s| s.as_str()).unwrap_or("");
+        let after = attributes.get("after").map(|s| s.as_str()).unwrap_or("");
+        let before_caption = attributes.get("before-caption")
+            .or(attributes.get("before-alt"))
+            .map(|s| s.as_str())
+            .unwrap_or("Before");
+        let after_caption = attributes.get("after-caption")
+            .or(attributes.get("after-alt"))
+            .map(|s| s.as_str())
+            .unwrap_or("After");
+        let width = attributes.get("width").map(|s| s.as_str()).unwrap_or("1000");
+        let height = attributes.get("height").map(|s| s.as_str()).unwrap_or("400");
+        let alt = attributes.get("alt").map(|s| s.as_str()).unwrap_or("");
+
+        let alt_suffix = if !alt.is_empty() { 
+            format!(" | {}", alt) 
+        } else { 
+            String::new() 
+        };
+
+        format!(r#"
+<div class="img-comparison-container">
+    <div class="img-comparison-slider" style="height: {}px;">
+        <div class="img-before overlay-side">
+            <img src="{}" alt="{}{}" loading="lazy" width="{}">
+        </div>
+        <div class="img-after">
+            <img src="{}" alt="{}{}" loading="lazy" width="{}">
+        </div>
+        <input type="range" min="0" max="100" value="50" class="slider">
+        <div class="slider-thumb">
+            <div class="slider-thumb-img"></div>
+        </div>
+    </div>
+</div>"#, 
+            height, 
+            before, before_caption, alt_suffix, width,
+            after, after_caption, alt_suffix, width
+        )
+    }
+
+    fn parse_message_shortcode(attrs: &str) -> String {
+        let attributes = Self::parse_attributes(attrs);
+
+        let msg_type = attributes.get("type").map(|s| s.as_str()).unwrap_or("info");
+        let content = attributes.get("content").map(|s| s.as_str()).unwrap_or("");
+        
+        let (symbol, class_suffix) = match msg_type {
+            "info" => ("!", "message"),
+            "warning" => ("⚠", "warning"),
+            "error" => ("✖", "error"),
+            "success" => ("✓", "success"),
+            "note" => ("📝", "note"),
+            _ => ("!", "message"),
+        };
+
+        format!(r#"
+<aside class="msg {}"><span class="msg-symbol">{}</span><div class="msg-content">
+<p>{}</p>
+</div></aside>"#, 
+            class_suffix, symbol, content
+        )
+    }
+
+    /// Register a custom shortcode handler
+    #[allow(dead_code)]
+    pub fn register_shortcode<F>(&mut self, name: &str, handler: F)
+    where
+        F: Fn(&str) -> String + Send + Sync + 'static,
+    {
+        self.shortcodes.insert(name.to_string(), Box::new(handler));
+    }
+
+    /// Get list of registered shortcodes
+    #[allow(dead_code)]
+    pub fn get_shortcode_names(&self) -> Vec<&String> {
+        self.shortcodes.keys().collect()
+    }
+}
+
+impl Default for ShortcodeProcessor {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_img_compare_hugo_style() {
+        let processor = ShortcodeProcessor::new();
+        let input = r#"{{< img-compare before="/before.jpg" after="/after.jpg" >}}"#;
+        let result = processor.process(input);
+        
+        assert!(result.contains("img-comparison-container"));
+        assert!(result.contains("/before.jpg"));
+        assert!(result.contains("/after.jpg"));
+    }
+
+    #[test]
+    fn test_img_compare_bracket_style() {
+        let processor = ShortcodeProcessor::new();
+        let input = r#"[img-compare before="/before.jpg" after="/after.jpg"]"#;
+        let result = processor.process(input);
+        
+        assert!(result.contains("img-comparison-container"));
+        assert!(result.contains("/before.jpg"));
+        assert!(result.contains("/after.jpg"));
+    }
+
+    #[test]
+    fn test_custom_shortcode() {
+        let mut processor = ShortcodeProcessor::new();
+        processor.register_shortcode("test", |_| "<div>test</div>".to_string());
+        
+        let input = "{{< test >}}";
+        let result = processor.process(input);
+        
+        assert_eq!(result, "<div>test</div>");
+    }
+
+    #[test]
+    fn test_unknown_shortcode() {
+        let processor = ShortcodeProcessor::new();
+        let input = "{{< unknown attr=\"value\" >}}";
+        let result = processor.process(input);
+        
+        assert_eq!(result, input); // Should return original
+    }
+
+    #[test]
+    fn test_attribute_parsing() {
+        let attributes = ShortcodeProcessor::parse_attributes(r#"before="/test.jpg" after='test2.jpg' width=800"#);
+        
+        assert_eq!(attributes.get("before").unwrap(), "/test.jpg");
+        assert_eq!(attributes.get("after").unwrap(), "test2.jpg");
+        assert_eq!(attributes.get("width").unwrap(), "800");
+    }
+
+    #[test]
+    fn test_message_shortcode_info() {
+        let processor = ShortcodeProcessor::new();
+        let input = r#"[msg type="info" content="This is an info message"]"#;
+        let result = processor.process(input);
+        
+        assert!(result.contains("msg message"));
+        assert!(result.contains("This is an info message"));
+        assert!(result.contains("!"));
+    }
+
+    #[test]
+    fn test_message_shortcode_warning() {
+        let processor = ShortcodeProcessor::new();
+        let input = r#"{{< msg type="warning" content="This is a warning" >}}"#;
+        let result = processor.process(input);
+        
+        assert!(result.contains("msg warning"));
+        assert!(result.contains("This is a warning"));
+        assert!(result.contains("⚠"));
+    }
+
+    #[test]
+    fn test_message_shortcode_default() {
+        let processor = ShortcodeProcessor::new();
+        let input = r#"[msg content="Default message"]"#;
+        let result = processor.process(input);
+        
+        assert!(result.contains("msg message"));
+        assert!(result.contains("Default message"));
+        assert!(result.contains("!"));
+    }
+}
--- a/src/translator/mod.rs
+++ b/src/translator/mod.rs
@@ -74,7 +74,9 @@ pub struct LanguageMapping {

 #[derive(Debug, Clone)]
 pub struct LanguageInfo {
+    #[allow(dead_code)]
    pub name: String,
+    #[allow(dead_code)]
    pub code: String,
    pub ollama_prompt: String,
 }
--- a/src/translator/ollama_translator.rs
+++ b/src/translator/ollama_translator.rs
@@ -56,6 +56,7 @@ impl OllamaTranslator {
        Ok(translated.to_string())
    }
    
+    #[allow(dead_code)]
    fn build_translation_prompt(&self, text: &str, config: &TranslationConfig) -> Result<String> {
        let source_info = self.language_mapping.get_language_info(&config.source_lang)
            .ok_or_else(|| anyhow::anyhow!("Unsupported source language: {}", config.source_lang))?;
Author	SHA1	Message	Date
syui	cb8b0582e9	rm log	2025-08-01 21:25:52 +09:00
syui	85494944ad	rm log	2025-08-01 20:36:35 +09:00
syui	5aeeba106a	add post	2025-07-30 19:30:01 +09:00
syui	f1e76ab31f	fix post	2025-07-27 05:04:01 +09:00
syui	3c9ef78696	add binary	2025-07-26 20:54:23 +09:00
syui	ee2d21b0f3	update	2025-07-26 20:00:16 +09:00
syui	0667ac58fb	test game	2025-07-26 19:51:55 +09:00
syui	d89855338b	fix css	2025-07-18 10:57:42 +09:00
syui	e19170cdff	add pds.html	2025-07-18 00:05:04 +09:00
syui	c3e22611f5	fix layout	2025-07-17 23:57:08 +09:00
syui	2943c94ec1	binary	2025-07-17 22:23:14 +09:00
syui	f27997b7e8	rm pds asset	2025-07-17 22:20:25 +09:00
syui	447e4bded9	update	2025-07-17 22:12:06 +09:00
syui	03161a52ca	fix oauth-ai-chat	2025-07-17 19:26:40 +09:00
syui	fe9381a860	fix blog post	2025-07-17 19:26:40 +09:00
syui	f0cea89005	fix oauth filter	2025-07-16 22:57:09 +09:00
syui	b059fe1de0	fix comment, rm console.log	2025-07-16 22:53:01 +09:00
syui	07b0b0f702	fix css	2025-07-16 20:58:42 +09:00
syui	ecd69557fe	oauth markdown	2025-07-16 20:42:50 +09:00
syui	452a0fda6a	fix blog post	2025-07-16 11:47:15 +09:00
syui	a62dd82790	fix config	2025-07-16 11:27:37 +09:00
syui	3faec33bac	fix blog post	2025-07-16 11:04:50 +09:00
syui	33402f4a21	add blog post	2025-07-16 11:04:02 +09:00
syui	3e65bc8210	binary	2025-07-16 10:18:03 +09:00
syui	16d724ec25	update	2025-07-16 10:08:43 +09:00
syui	69182a1bf8	update	2025-07-16 09:33:46 +09:00
syui	0110773592	test ai-blog	2025-07-16 09:32:45 +09:00
syui	75f108e7b8	fix blog post link	2025-07-14 15:27:10 +09:00
syui	263189ce72	add blog post	2025-07-14 14:11:55 +09:00
syui	7800a655f3	fix profile	2025-07-13 08:12:40 +09:00
syui	76c797e4d8	add blog post	2025-07-13 07:52:43 +09:00
syui	d1a1c92842	update binary	2025-07-11 13:38:22 +09:00
syui	9da1f87640	fix update version	2025-07-11 13:09:15 +09:00
syui	ddfc43512c	add md msg	2025-07-11 08:52:34 +09:00
syui	b3ccd61935	add my-blog msg	2025-07-11 08:51:46 +09:00
syui	a243b6a44e	fix post filename	2025-07-05 15:42:36 +09:00
syui	e3c1cf4790	fix build err	2025-07-05 15:31:04 +09:00
syui	a6236661bf	post	2025-07-05 15:30:55 +09:00
syui	195a4474c9	fix config.toml	2025-07-01 21:22:48 +09:00
syui	4a34a6ca59	rm my-blog/oauth	2025-07-01 21:20:26 +09:00
syui	4d01fb8507	fix oauth network err	2025-07-01 19:48:49 +09:00
syui	d69c9aa09b	update binary	2025-07-01 06:22:15 +09:00
syui	99ee49f76e	feat: add server-side image comparison shortcode support - Add {{< img-compare >}} and [img-compare] shortcode syntax - Implement server-side shortcode processing in Rust - Create dedicated shortcode module for extensibility - Fix image comparison slider display issues - Remove caption display for cleaner UI - Update to version 0.2.6 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-07-01 06:09:39 +09:00
syui	19c0e28668	add post	2025-07-01 06:02:31 +09:00
syui	bc99eb0814	update img-slider	2025-07-01 06:02:25 +09:00
syui	cf93721bad	fix social-app uri	2025-06-26 19:56:13 +09:00
syui	8a8a121f4a	fix delete record	2025-06-25 23:14:27 +09:00
syui	be2bcae1d6	fix test ask-AI oauth profile	2025-06-25 23:03:50 +09:00
syui	2c08a4acfb	test blog profile	2025-06-25 21:18:13 +09:00