From 3103090c33e2ccf90b653a27378e180b6915a3d0 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Wed, 25 Mar 2026 05:58:41 +0900
Subject: [PATCH] refact web

---
 src/commands/index.rs             |   13 +
 src/web/components/browser.ts     |    9 +-
 src/web/components/card.ts        |   13 +-
 src/web/components/chat-list.ts   |  187 +++++
 src/web/components/chat-thread.ts |  143 ++++
 src/web/components/chat.ts        |  386 +--------
 src/web/components/discussion.ts  |   20 +-
 src/web/components/mode-tabs.ts   |    9 +-
 src/web/components/note.ts        |   18 +-
 src/web/components/posts.ts       |   23 +-
 src/web/components/profile.ts     |    9 +-
 src/web/components/rse.ts         |   13 +-
 src/web/lib/api.ts                |  446 +++++------
 src/web/lib/markdown.ts           |   11 +-
 src/web/lib/util.ts               |  104 +++
 src/web/main.ts                   | 1202 ++++++++++++++---------------
 16 files changed, 1241 insertions(+), 1365 deletions(-)
 create mode 100644 src/web/components/chat-list.ts
 create mode 100644 src/web/components/chat-thread.ts
 create mode 100644 src/web/lib/util.ts

diff --git a/src/commands/index.rs b/src/commands/index.rs
index 11b0ba2..d8bc5de 100644
--- a/src/commands/index.rs
+++ b/src/commands/index.rs
@@ -125,6 +125,19 @@ pub fn run(content_dir: &Path) -> Result<()> {
                     total_updated += 1;
                 }
             }
+
+            // Generate list.json (all records in a single array)
+            let list_path = col_path.join("list.json");
+            let mut records: Vec<serde_json::Value> = Vec::new();
+            for rkey in &rkeys {
+                let file_path = col_path.join(format!("{}.json", rkey));
+                if let Ok(content) = fs::read_to_string(&file_path) {
+                    if let Ok(json) = serde_json::from_str::<serde_json::Value>(&content) {
+                        records.push(json);
+                    }
+                }
+            }
+            fs::write(&list_path, serde_json::to_string(&records)?)?;
         }
     }
 
diff --git a/src/web/components/browser.ts b/src/web/components/browser.ts
index d9452d7..fc1afc5 100644
--- a/src/web/components/browser.ts
+++ b/src/web/components/browser.ts
@@ -1,4 +1,5 @@
 // AT-Browser: Server info and collection hierarchy
+import { escapeHtml } from '../lib/util'
 
 // Group collections by service domain
 function groupCollectionsByService(collections: string[]): Map<string, string[]> {
@@ -241,11 +242,3 @@ function getRecordPreview(value: Record<string, unknown>): string {
   return ''
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
diff --git a/src/web/components/card.ts b/src/web/components/card.ts
index 4a0877c..4d83d47 100644
--- a/src/web/components/card.ts
+++ b/src/web/components/card.ts
@@ -1,4 +1,5 @@
 // Card display component for ai.syui.card.user collection
+import { getLocalizedText } from '../lib/util'
 
 export interface UserCard {
   id: number
@@ -29,18 +30,6 @@ export interface CardAdminData {
   card: CardAdminEntry[]
 }
 
-// Get current language
-function getLang(): string {
-  return localStorage.getItem('preferredLang') || 'ja'
-}
-
-// Get localized text
-function getLocalizedText(obj: { ja: string; en: string } | undefined): string {
-  if (!obj) return ''
-  const lang = getLang()
-  return obj[lang as 'ja' | 'en'] || obj.ja || obj.en || ''
-}
-
 // Get rarity class name
 function getRarityClass(card: UserCard): string {
   if (card.unique) return 'unique'
diff --git a/src/web/components/chat-list.ts b/src/web/components/chat-list.ts
new file mode 100644
index 0000000..12f114c
--- /dev/null
+++ b/src/web/components/chat-list.ts
@@ -0,0 +1,187 @@
+import type { ChatMessage, Profile } from '../types'
+import { escapeHtml, formatDateTime, getRkeyFromUri, getAuthorityFromUri } from '../lib/util'
+import { buildAuthorMap, resolveAuthorDid, chatTypeSlug, getTranslatedContent } from './chat'
+
+export type { ChatCollectionEntry } from './chat'
+
+const formatChatTime = formatDateTime
+
+// Render chat threads list (conversations this user started)
+export function renderChatThreadList(
+  messages: ChatMessage[],
+  userDid: string,
+  userHandle: string,
+  botDid: string,
+  botHandle: string,
+  userProfile?: Profile | null,
+  botProfile?: Profile | null,
+  pds?: string,
+  chatCollection: string = 'ai.syui.log.chat'
+): string {
+  // Build set of all message URIs
+  const allUris = new Set(messages.map(m => m.uri))
+
+  // Find root messages by this user:
+  // 1. No root field (explicit start of conversation)
+  // 2. Or root points to non-existent message (orphaned, treat as root)
+  //    For orphaned roots, only keep the oldest message per orphaned root URI
+  const orphanedRootFirstMsg = new Map<string, ChatMessage>()
+  const rootMessages: ChatMessage[] = []
+
+  for (const msg of messages) {
+    if (resolveAuthorDid(getAuthorityFromUri(msg.uri)) !== userDid) continue
+
+    if (!msg.value.root) {
+      // No root = explicit conversation start
+      rootMessages.push(msg)
+    } else if (!allUris.has(msg.value.root)) {
+      // Orphaned root - keep only the oldest message per orphaned root
+      const existing = orphanedRootFirstMsg.get(msg.value.root)
+      if (!existing || new Date(msg.value.publishedAt) < new Date(existing.value.publishedAt)) {
+        orphanedRootFirstMsg.set(msg.value.root, msg)
+      }
+    }
+  }
+
+  // Add orphaned root representatives
+  for (const msg of orphanedRootFirstMsg.values()) {
+    rootMessages.push(msg)
+  }
+
+  if (rootMessages.length === 0) {
+    return '<p class="no-posts">No chat threads yet.</p>'
+  }
+
+  const authors = buildAuthorMap(userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds)
+
+  // Sort by publishedAt (newest first)
+  const sorted = [...rootMessages].sort((a, b) =>
+    new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
+  )
+
+  const items = sorted.map(msg => {
+    const authorDid = resolveAuthorDid(getAuthorityFromUri(msg.uri))
+    const time = formatChatTime(msg.value.publishedAt)
+    const rkey = getRkeyFromUri(msg.uri)
+    const author = authors.get(authorDid) || { did: authorDid, handle: authorDid.slice(0, 20) + '...' }
+
+    const avatarHtml = author.avatarUrl
+      ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
+      : `<div class="chat-avatar-placeholder"></div>`
+
+    // Truncate content for preview (use translated content, show first 3 lines)
+    const displayContent = getTranslatedContent(msg)
+    const lines = displayContent.split('\n').slice(0, 3)
+    const preview = lines.join('\n')
+
+    return `
+      <a href="/@${userHandle}/at/chat/${chatTypeSlug(chatCollection)}/${rkey}" class="chat-thread-item">
+        <div class="chat-avatar-col">
+          ${avatarHtml}
+        </div>
+        <div class="chat-thread-content">
+          <div class="chat-thread-header">
+            <span class="chat-author">@${escapeHtml(author.handle)}</span>
+            <span class="chat-type-badge" data-type="${chatTypeSlug(chatCollection)}">${chatTypeSlug(chatCollection)}</span>
+            <span class="chat-time">${time}</span>
+          </div>
+          <div class="chat-thread-preview">${escapeHtml(preview)}</div>
+        </div>
+      </a>
+    `
+  }).join('')
+
+  return `<div class="chat-thread-list">${items}</div>`
+}
+
+// Render unified chat list page with filter buttons
+export function renderChatListPage(
+  collections: import('./chat').ChatCollectionEntry[],
+  userDid: string,
+  userHandle: string,
+  botDid: string,
+  botHandle: string,
+  userProfile?: Profile | null,
+  botProfile?: Profile | null,
+  pds?: string
+): string {
+  // Merge all collections into a single list
+  const allMessages: ChatMessage[] = []
+  const messageCollectionMap = new Map<string, string>()
+
+  for (const c of collections) {
+    for (const msg of c.messages) {
+      allMessages.push(msg)
+      messageCollectionMap.set(msg.uri, c.collection)
+    }
+  }
+
+  // Build author map with first collection's params (all share same users)
+  const authors = buildAuthorMap(userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds)
+
+  // Find root messages (same logic as renderChatThreadList)
+  const allUris = new Set(allMessages.map(m => m.uri))
+  const orphanedRootFirstMsg = new Map<string, ChatMessage>()
+  const rootMessages: ChatMessage[] = []
+
+  for (const msg of allMessages) {
+    if (resolveAuthorDid(getAuthorityFromUri(msg.uri)) !== userDid) continue
+
+    if (!msg.value.root) {
+      rootMessages.push(msg)
+    } else if (!allUris.has(msg.value.root)) {
+      const existing = orphanedRootFirstMsg.get(msg.value.root)
+      if (!existing || new Date(msg.value.publishedAt) < new Date(existing.value.publishedAt)) {
+        orphanedRootFirstMsg.set(msg.value.root, msg)
+      }
+    }
+  }
+
+  for (const msg of orphanedRootFirstMsg.values()) {
+    rootMessages.push(msg)
+  }
+
+  if (rootMessages.length === 0) {
+    return '<div class="chat-container"><p class="no-posts">No chat threads yet.</p></div>'
+  }
+
+  // Sort by publishedAt (newest first)
+  const sorted = [...rootMessages].sort((a, b) =>
+    new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
+  )
+
+  const items = sorted.map(msg => {
+    const authorDid = resolveAuthorDid(getAuthorityFromUri(msg.uri))
+    const time = formatChatTime(msg.value.publishedAt)
+    const rkey = getRkeyFromUri(msg.uri)
+    const author = authors.get(authorDid) || { did: authorDid, handle: authorDid.slice(0, 20) + '...' }
+    const collection = messageCollectionMap.get(msg.uri) || 'ai.syui.log.chat'
+    const slug = chatTypeSlug(collection)
+
+    const avatarHtml = author.avatarUrl
+      ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
+      : `<div class="chat-avatar-placeholder"></div>`
+
+    const displayContent = getTranslatedContent(msg)
+    const lines = displayContent.split('\n').slice(0, 3)
+    const preview = lines.join('\n')
+
+    return `
+      <a href="/@${userHandle}/at/chat/${slug}/${rkey}" class="chat-thread-item">
+        <div class="chat-avatar-col">
+          ${avatarHtml}
+        </div>
+        <div class="chat-thread-content">
+          <div class="chat-thread-header">
+            <span class="chat-author">@${escapeHtml(author.handle)}</span>
+            <span class="chat-type-badge" data-type="${slug}">${slug}</span>
+            <span class="chat-time">${time}</span>
+          </div>
+          <div class="chat-thread-preview">${escapeHtml(preview)}</div>
+        </div>
+      </a>
+    `
+  }).join('')
+
+  return `<div class="chat-container"><div class="chat-thread-list">${items}</div></div>`
+}
diff --git a/src/web/components/chat-thread.ts b/src/web/components/chat-thread.ts
new file mode 100644
index 0000000..9372dfd
--- /dev/null
+++ b/src/web/components/chat-thread.ts
@@ -0,0 +1,143 @@
+import type { ChatMessage, Profile } from '../types'
+import { renderMarkdown } from '../lib/markdown'
+import { escapeHtml, formatDateTime, getRkeyFromUri, getAuthorityFromUri } from '../lib/util'
+import { buildAuthorMap, resolveAuthorDid, chatTypeSlug, getTranslatedContent } from './chat'
+
+const formatChatTime = formatDateTime
+
+// Render single chat thread (full conversation)
+export function renderChatThread(
+  messages: ChatMessage[],
+  rootRkey: string,
+  userDid: string,
+  userHandle: string,
+  botDid: string,
+  botHandle: string,
+  userProfile?: Profile | null,
+  botProfile?: Profile | null,
+  pds?: string,
+  chatCollection: string = 'ai.syui.log.chat',
+  loggedInDid?: string | null
+): string {
+  // Find root message
+  const rootUri = `at://${userDid}/${chatCollection}/${rootRkey}`
+  const rootMsg = messages.find(m => m.uri === rootUri)
+
+  if (!rootMsg) {
+    return '<p class="error">Chat thread not found.</p>'
+  }
+
+  // Find all messages in this thread
+  // 1. The root message itself
+  // 2. Messages with root === rootUri (direct children)
+  // 3. If this is an orphaned root (root points to non-existent), find siblings with same original root
+  const originalRoot = rootMsg.value.root
+  const allUris = new Set(messages.map(m => m.uri))
+  const isOrphanedRoot = originalRoot && !allUris.has(originalRoot)
+
+  const threadMessages = messages.filter(msg => {
+    // Include the root message itself
+    if (msg.uri === rootUri) return true
+    // Include messages that point to this as root
+    if (msg.value.root === rootUri) return true
+    // If orphaned, include messages with the same original root
+    if (isOrphanedRoot && msg.value.root === originalRoot) return true
+    return false
+  })
+
+  if (threadMessages.length === 0) {
+    return '<p class="error">No messages in this thread.</p>'
+  }
+
+  const authors = buildAuthorMap(userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds)
+
+  // Sort by publishedAt
+  const sorted = [...threadMessages].sort((a, b) =>
+    new Date(a.value.publishedAt).getTime() - new Date(b.value.publishedAt).getTime()
+  )
+
+  const items = sorted.map(msg => {
+    const authorDid = resolveAuthorDid(getAuthorityFromUri(msg.uri))
+    const time = formatChatTime(msg.value.publishedAt)
+    const rkey = getRkeyFromUri(msg.uri)
+    const author = authors.get(authorDid) || { did: authorDid, handle: authorDid.slice(0, 20) + '...' }
+
+    const avatarHtml = author.avatarUrl
+      ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
+      : `<div class="chat-avatar-placeholder"></div>`
+
+    const displayContent = getTranslatedContent(msg)
+    const content = renderMarkdown(displayContent)
+    const recordLink = `/@${author.handle}/at/collection/${chatCollection}/${rkey}`
+    const canEdit = loggedInDid && authorDid === loggedInDid
+    const editLink = `/@${userHandle}/at/chat/${chatTypeSlug(chatCollection)}/${rkey}/edit`
+
+    return `
+      <article class="chat-message">
+        <div class="chat-avatar-col">
+          ${avatarHtml}
+        </div>
+        <div class="chat-content-col">
+          <div class="chat-message-header">
+            <a href="/@${author.handle}" class="chat-author">@${escapeHtml(author.handle)}</a>
+            <a href="${recordLink}" class="chat-time">${time}</a>
+            ${canEdit ? `<a href="${editLink}" class="chat-edit-btn">edit</a>` : ''}
+          </div>
+          <div class="chat-content">${content}</div>
+        </div>
+      </article>
+    `
+  }).join('')
+
+  return `<div class="chat-list">${items}</div>`
+}
+
+// Render chat thread page
+export function renderChatThreadPage(
+  messages: ChatMessage[],
+  rootRkey: string,
+  userDid: string,
+  userHandle: string,
+  botDid: string,
+  botHandle: string,
+  userProfile?: Profile | null,
+  botProfile?: Profile | null,
+  pds?: string,
+  chatCollection: string = 'ai.syui.log.chat',
+  loggedInDid?: string | null
+): string {
+  const thread = renderChatThread(messages, rootRkey, userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds, chatCollection, loggedInDid)
+  return `<div class="chat-container">${thread}</div>`
+}
+
+// Render chat edit form
+export function renderChatEditForm(
+  message: ChatMessage,
+  collection: string,
+  userHandle: string
+): string {
+  const rkey = message.uri.split('/').pop() || ''
+  const content = message.value.content.text
+
+  return `
+    <div class="chat-edit-container">
+      <h2>Edit Chat Message</h2>
+      <form class="chat-edit-form" id="chat-edit-form">
+        <textarea
+          class="chat-edit-content"
+          id="chat-edit-content"
+          rows="10"
+          required
+        >${escapeHtml(content)}</textarea>
+        <div class="chat-edit-footer">
+          <span class="chat-edit-collection">${collection}</span>
+          <div class="chat-edit-buttons">
+            <a href="/@${userHandle}/at/chat/${chatTypeSlug(collection)}/${rkey}" class="chat-edit-cancel">Cancel</a>
+            <button type="submit" class="chat-edit-save" id="chat-edit-save" data-rkey="${rkey}">Save</button>
+          </div>
+        </div>
+      </form>
+      <div id="chat-edit-status" class="chat-edit-status"></div>
+    </div>
+  `
+}
diff --git a/src/web/components/chat.ts b/src/web/components/chat.ts
index 4bbd179..1db1923 100644
--- a/src/web/components/chat.ts
+++ b/src/web/components/chat.ts
@@ -1,65 +1,28 @@
 import type { ChatMessage, Profile } from '../types'
-import { renderMarkdown } from '../lib/markdown'
-import { getCurrentLang } from './mode-tabs'
-
-// Get translated content for a chat message
-function getTranslatedContent(msg: ChatMessage): string {
-  const currentLang = getCurrentLang()
-  const originalLang = msg.value.langs?.[0] || 'ja'
-  const translations = msg.value.translations
-
-  if (translations && currentLang !== originalLang && translations[currentLang]) {
-    const translated = translations[currentLang].content
-    if (typeof translated === 'string') return translated
-    if (translated && typeof translated === 'object' && 'text' in translated) return (translated as { text: string }).text
-    return msg.value.content.text
-  }
-  return msg.value.content.text
-}
-
-// Escape HTML to prevent XSS
-function escapeHtml(text: string): string {
-  const div = document.createElement('div')
-  div.textContent = text
-  return div.innerHTML
-}
-
-// Format date/time for chat
-function formatChatTime(dateStr: string): string {
-  const d = new Date(dateStr)
-  const month = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  const hour = String(d.getHours()).padStart(2, '0')
-  const min = String(d.getMinutes()).padStart(2, '0')
-  return `${month}/${day} ${hour}:${min}`
-}
-
-// Extract rkey from AT URI
-function getRkeyFromUri(uri: string): string {
-  return uri.split('/').pop() || ''
-}
-
-// Extract authority from AT URI (at://did:plc:xxx/collection/rkey → did:plc:xxx)
-function getAuthorityFromUri(uri: string): string {
-  return uri.replace('at://', '').split('/')[0]
-}
+import { getTranslatedContent as getTranslation } from '../lib/util'
 
 // Profile info for authors
-interface AuthorInfo {
+export interface AuthorInfo {
   did: string
   handle: string
   avatarUrl?: string
 }
 
+// Chat collection entry for unified list
+export interface ChatCollectionEntry {
+  collection: string
+  messages: ChatMessage[]
+}
+
 // Handle/DID resolver: maps both handle and DID to DID
 let handleToDidMap = new Map<string, string>()
 
-function resolveAuthorDid(authority: string): string {
+export function resolveAuthorDid(authority: string): string {
   return handleToDidMap.get(authority) || authority
 }
 
 // Build author info map
-function buildAuthorMap(
+export function buildAuthorMap(
   userDid: string,
   userHandle: string,
   botDid: string,
@@ -97,330 +60,17 @@ function buildAuthorMap(
 }
 
 // Map collection name to chat type slug
-function chatTypeSlug(chatCollection: string): string {
+export function chatTypeSlug(chatCollection: string): string {
   if (chatCollection === 'ai.syui.ue.chat') return 'ue'
   return 'log'
 }
 
-// Render chat threads list (conversations this user started)
-export function renderChatThreadList(
-  messages: ChatMessage[],
-  userDid: string,
-  userHandle: string,
-  botDid: string,
-  botHandle: string,
-  userProfile?: Profile | null,
-  botProfile?: Profile | null,
-  pds?: string,
-  chatCollection: string = 'ai.syui.log.chat'
-): string {
-  // Build set of all message URIs
-  const allUris = new Set(messages.map(m => m.uri))
-
-  // Find root messages by this user:
-  // 1. No root field (explicit start of conversation)
-  // 2. Or root points to non-existent message (orphaned, treat as root)
-  //    For orphaned roots, only keep the oldest message per orphaned root URI
-  const orphanedRootFirstMsg = new Map<string, ChatMessage>()
-  const rootMessages: ChatMessage[] = []
-
-  for (const msg of messages) {
-    if (resolveAuthorDid(getAuthorityFromUri(msg.uri)) !== userDid) continue
-
-    if (!msg.value.root) {
-      // No root = explicit conversation start
-      rootMessages.push(msg)
-    } else if (!allUris.has(msg.value.root)) {
-      // Orphaned root - keep only the oldest message per orphaned root
-      const existing = orphanedRootFirstMsg.get(msg.value.root)
-      if (!existing || new Date(msg.value.publishedAt) < new Date(existing.value.publishedAt)) {
-        orphanedRootFirstMsg.set(msg.value.root, msg)
-      }
-    }
-  }
-
-  // Add orphaned root representatives
-  for (const msg of orphanedRootFirstMsg.values()) {
-    rootMessages.push(msg)
-  }
-
-  if (rootMessages.length === 0) {
-    return '<p class="no-posts">No chat threads yet.</p>'
-  }
-
-  const authors = buildAuthorMap(userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds)
-
-  // Sort by publishedAt (newest first)
-  const sorted = [...rootMessages].sort((a, b) =>
-    new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
-  )
-
-  const items = sorted.map(msg => {
-    const authorDid = resolveAuthorDid(getAuthorityFromUri(msg.uri))
-    const time = formatChatTime(msg.value.publishedAt)
-    const rkey = getRkeyFromUri(msg.uri)
-    const author = authors.get(authorDid) || { did: authorDid, handle: authorDid.slice(0, 20) + '...' }
-
-    const avatarHtml = author.avatarUrl
-      ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
-      : `<div class="chat-avatar-placeholder"></div>`
-
-    // Truncate content for preview (use translated content, show first 3 lines)
-    const displayContent = getTranslatedContent(msg)
-    const lines = displayContent.split('\n').slice(0, 3)
-    const preview = lines.join('\n')
-
-    return `
-      <a href="/@${userHandle}/at/chat/${chatTypeSlug(chatCollection)}/${rkey}" class="chat-thread-item">
-        <div class="chat-avatar-col">
-          ${avatarHtml}
-        </div>
-        <div class="chat-thread-content">
-          <div class="chat-thread-header">
-            <span class="chat-author">@${escapeHtml(author.handle)}</span>
-            <span class="chat-type-badge" data-type="${chatTypeSlug(chatCollection)}">${chatTypeSlug(chatCollection)}</span>
-            <span class="chat-time">${time}</span>
-          </div>
-          <div class="chat-thread-preview">${escapeHtml(preview)}</div>
-        </div>
-      </a>
-    `
-  }).join('')
-
-  return `<div class="chat-thread-list">${items}</div>`
+// Get translated content for a chat message
+export function getTranslatedContent(msg: ChatMessage): string {
+  const originalLang = msg.value.langs?.[0] || 'ja'
+  return getTranslation(msg.value.content.text, msg.value.translations, originalLang)
 }
 
-// Render single chat thread (full conversation)
-export function renderChatThread(
-  messages: ChatMessage[],
-  rootRkey: string,
-  userDid: string,
-  userHandle: string,
-  botDid: string,
-  botHandle: string,
-  userProfile?: Profile | null,
-  botProfile?: Profile | null,
-  pds?: string,
-  chatCollection: string = 'ai.syui.log.chat',
-  loggedInDid?: string | null
-): string {
-  // Find root message
-  const rootUri = `at://${userDid}/${chatCollection}/${rootRkey}`
-  const rootMsg = messages.find(m => m.uri === rootUri)
-
-  if (!rootMsg) {
-    return '<p class="error">Chat thread not found.</p>'
-  }
-
-  // Find all messages in this thread
-  // 1. The root message itself
-  // 2. Messages with root === rootUri (direct children)
-  // 3. If this is an orphaned root (root points to non-existent), find siblings with same original root
-  const originalRoot = rootMsg.value.root
-  const allUris = new Set(messages.map(m => m.uri))
-  const isOrphanedRoot = originalRoot && !allUris.has(originalRoot)
-
-  const threadMessages = messages.filter(msg => {
-    // Include the root message itself
-    if (msg.uri === rootUri) return true
-    // Include messages that point to this as root
-    if (msg.value.root === rootUri) return true
-    // If orphaned, include messages with the same original root
-    if (isOrphanedRoot && msg.value.root === originalRoot) return true
-    return false
-  })
-
-  if (threadMessages.length === 0) {
-    return '<p class="error">No messages in this thread.</p>'
-  }
-
-  const authors = buildAuthorMap(userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds)
-
-  // Sort by publishedAt
-  const sorted = [...threadMessages].sort((a, b) =>
-    new Date(a.value.publishedAt).getTime() - new Date(b.value.publishedAt).getTime()
-  )
-
-  const items = sorted.map(msg => {
-    const authorDid = resolveAuthorDid(getAuthorityFromUri(msg.uri))
-    const time = formatChatTime(msg.value.publishedAt)
-    const rkey = getRkeyFromUri(msg.uri)
-    const author = authors.get(authorDid) || { did: authorDid, handle: authorDid.slice(0, 20) + '...' }
-
-    const avatarHtml = author.avatarUrl
-      ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
-      : `<div class="chat-avatar-placeholder"></div>`
-
-    const displayContent = getTranslatedContent(msg)
-    const content = renderMarkdown(displayContent)
-    const recordLink = `/@${author.handle}/at/collection/${chatCollection}/${rkey}`
-    const canEdit = loggedInDid && authorDid === loggedInDid
-    const editLink = `/@${userHandle}/at/chat/${chatTypeSlug(chatCollection)}/${rkey}/edit`
-
-    return `
-      <article class="chat-message">
-        <div class="chat-avatar-col">
-          ${avatarHtml}
-        </div>
-        <div class="chat-content-col">
-          <div class="chat-message-header">
-            <a href="/@${author.handle}" class="chat-author">@${escapeHtml(author.handle)}</a>
-            <a href="${recordLink}" class="chat-time">${time}</a>
-            ${canEdit ? `<a href="${editLink}" class="chat-edit-btn">edit</a>` : ''}
-          </div>
-          <div class="chat-content">${content}</div>
-        </div>
-      </article>
-    `
-  }).join('')
-
-  return `<div class="chat-list">${items}</div>`
-}
-
-// Chat collection entry for unified list
-export interface ChatCollectionEntry {
-  collection: string
-  messages: ChatMessage[]
-}
-
-// Render unified chat list page with filter buttons
-export function renderChatListPage(
-  collections: ChatCollectionEntry[],
-  userDid: string,
-  userHandle: string,
-  botDid: string,
-  botHandle: string,
-  userProfile?: Profile | null,
-  botProfile?: Profile | null,
-  pds?: string
-): string {
-  // Merge all collections into a single list
-  const allMessages: ChatMessage[] = []
-  const messageCollectionMap = new Map<string, string>()
-
-  for (const c of collections) {
-    for (const msg of c.messages) {
-      allMessages.push(msg)
-      messageCollectionMap.set(msg.uri, c.collection)
-    }
-  }
-
-  // Build author map with first collection's params (all share same users)
-  const authors = buildAuthorMap(userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds)
-
-  // Find root messages (same logic as renderChatThreadList)
-  const allUris = new Set(allMessages.map(m => m.uri))
-  const orphanedRootFirstMsg = new Map<string, ChatMessage>()
-  const rootMessages: ChatMessage[] = []
-
-  for (const msg of allMessages) {
-    if (resolveAuthorDid(getAuthorityFromUri(msg.uri)) !== userDid) continue
-
-    if (!msg.value.root) {
-      rootMessages.push(msg)
-    } else if (!allUris.has(msg.value.root)) {
-      const existing = orphanedRootFirstMsg.get(msg.value.root)
-      if (!existing || new Date(msg.value.publishedAt) < new Date(existing.value.publishedAt)) {
-        orphanedRootFirstMsg.set(msg.value.root, msg)
-      }
-    }
-  }
-
-  for (const msg of orphanedRootFirstMsg.values()) {
-    rootMessages.push(msg)
-  }
-
-  if (rootMessages.length === 0) {
-    return '<div class="chat-container"><p class="no-posts">No chat threads yet.</p></div>'
-  }
-
-  // Sort by publishedAt (newest first)
-  const sorted = [...rootMessages].sort((a, b) =>
-    new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
-  )
-
-  const items = sorted.map(msg => {
-    const authorDid = resolveAuthorDid(getAuthorityFromUri(msg.uri))
-    const time = formatChatTime(msg.value.publishedAt)
-    const rkey = getRkeyFromUri(msg.uri)
-    const author = authors.get(authorDid) || { did: authorDid, handle: authorDid.slice(0, 20) + '...' }
-    const collection = messageCollectionMap.get(msg.uri) || 'ai.syui.log.chat'
-    const slug = chatTypeSlug(collection)
-
-    const avatarHtml = author.avatarUrl
-      ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
-      : `<div class="chat-avatar-placeholder"></div>`
-
-    const displayContent = getTranslatedContent(msg)
-    const lines = displayContent.split('\n').slice(0, 3)
-    const preview = lines.join('\n')
-
-    return `
-      <a href="/@${userHandle}/at/chat/${slug}/${rkey}" class="chat-thread-item">
-        <div class="chat-avatar-col">
-          ${avatarHtml}
-        </div>
-        <div class="chat-thread-content">
-          <div class="chat-thread-header">
-            <span class="chat-author">@${escapeHtml(author.handle)}</span>
-            <span class="chat-type-badge" data-type="${slug}">${slug}</span>
-            <span class="chat-time">${time}</span>
-          </div>
-          <div class="chat-thread-preview">${escapeHtml(preview)}</div>
-        </div>
-      </a>
-    `
-  }).join('')
-
-  return `<div class="chat-container"><div class="chat-thread-list">${items}</div></div>`
-}
-
-// Render chat thread page
-export function renderChatThreadPage(
-  messages: ChatMessage[],
-  rootRkey: string,
-  userDid: string,
-  userHandle: string,
-  botDid: string,
-  botHandle: string,
-  userProfile?: Profile | null,
-  botProfile?: Profile | null,
-  pds?: string,
-  chatCollection: string = 'ai.syui.log.chat',
-  loggedInDid?: string | null
-): string {
-  const thread = renderChatThread(messages, rootRkey, userDid, userHandle, botDid, botHandle, userProfile, botProfile, pds, chatCollection, loggedInDid)
-  return `<div class="chat-container">${thread}</div>`
-}
-
-// Render chat edit form
-export function renderChatEditForm(
-  message: ChatMessage,
-  collection: string,
-  userHandle: string
-): string {
-  const rkey = message.uri.split('/').pop() || ''
-  const content = message.value.content.text
-
-  return `
-    <div class="chat-edit-container">
-      <h2>Edit Chat Message</h2>
-      <form class="chat-edit-form" id="chat-edit-form">
-        <textarea
-          class="chat-edit-content"
-          id="chat-edit-content"
-          rows="10"
-          required
-        >${escapeHtml(content)}</textarea>
-        <div class="chat-edit-footer">
-          <span class="chat-edit-collection">${collection}</span>
-          <div class="chat-edit-buttons">
-            <a href="/@${userHandle}/at/chat/${chatTypeSlug(collection)}/${rkey}" class="chat-edit-cancel">Cancel</a>
-            <button type="submit" class="chat-edit-save" id="chat-edit-save" data-rkey="${rkey}">Save</button>
-          </div>
-        </div>
-      </form>
-      <div id="chat-edit-status" class="chat-edit-status"></div>
-    </div>
-  `
-}
+// Re-export from split modules
+export { renderChatThreadList, renderChatListPage } from './chat-list'
+export { renderChatThread, renderChatThreadPage, renderChatEditForm } from './chat-thread'
diff --git a/src/web/components/discussion.ts b/src/web/components/discussion.ts
index e1aacdc..589fe3b 100644
--- a/src/web/components/discussion.ts
+++ b/src/web/components/discussion.ts
@@ -1,24 +1,8 @@
 import { searchPostsForUrl, getCurrentNetwork, type SearchPost } from '../lib/api'
+import { escapeHtml, formatDateJa } from '../lib/util'
 
 const DISCUSSION_POST_LIMIT = 10
 
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
-function formatDate(dateStr: string): string {
-  const date = new Date(dateStr)
-  return date.toLocaleDateString('ja-JP', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  })
-}
-
 function getPostUrl(uri: string, appUrl: string): string {
   // at://did:plc:xxx/app.bsky.feed.post/rkey -> {appUrl}/profile/did:plc:xxx/post/rkey
   const parts = uri.replace('at://', '').split('/')
@@ -100,7 +84,7 @@ export async function loadDiscussionPosts(container: HTMLElement, postUrl: strin
             <span class="discussion-name">${escapeHtml(displayName)}</span>
             <span class="discussion-handle">@${escapeHtml(handle)}</span>
           </div>
-          <span class="discussion-date">${formatDate(createdAt)}</span>
+          <span class="discussion-date">${formatDateJa(createdAt)}</span>
         </div>
         <div class="discussion-text">${escapeHtml(truncatedText)}</div>
       </a>
diff --git a/src/web/components/mode-tabs.ts b/src/web/components/mode-tabs.ts
index 29a84f5..5732733 100644
--- a/src/web/components/mode-tabs.ts
+++ b/src/web/components/mode-tabs.ts
@@ -33,12 +33,11 @@ export function renderModeTabs(handle: string, activeTab: 'blog' | 'browser' | '
     tabs += `<a href="/@${handle}/at/chat" class="tab ${activeTab === 'chat' ? 'active' : ''}">chat</a>`
   }
 
-  // Note tab only for local user (admin) with note posts
-  if (isLocalUser && hasNotes) {
-    tabs += `<a href="/@${handle}/at/note" class="tab ${activeTab === 'note' ? 'active' : ''}">note</a>`
-  }
-
   if (isLoggedIn()) {
+    // Note tab only for logged-in admin with note posts
+    if (isLocalUser && hasNotes) {
+      tabs += `<a href="/@${handle}/at/note" class="tab ${activeTab === 'note' ? 'active' : ''}">note</a>`
+    }
     tabs += `<a href="/@${handle}/at/post" class="tab ${activeTab === 'post' ? 'active' : ''}">post</a>`
     tabs += `<a href="/@${handle}/at/link" class="tab ${activeTab === 'link' ? 'active' : ''}">link</a>`
   }
diff --git a/src/web/components/note.ts b/src/web/components/note.ts
index 044da8f..f51cdb1 100644
--- a/src/web/components/note.ts
+++ b/src/web/components/note.ts
@@ -1,5 +1,6 @@
 import { renderMarkdown } from '../lib/markdown'
 import type { Post } from '../types'
+import { escapeHtml, escapeAttr, formatDateJa } from '../lib/util'
 
 // Note post has extra fields for member content
 interface NotePost extends Post {
@@ -42,12 +43,10 @@ export function renderNoteListPage(posts: NotePost[], handle: string): string {
 export function renderNoteDetailPage(
   post: NotePost,
   _handle: string,
-  localOnly: boolean
+  isOwner: boolean
 ): string {
   const rkey = post.uri.split('/').pop() || ''
-  const date = new Date(post.value.publishedAt).toLocaleDateString('ja-JP', {
-    year: 'numeric', month: '2-digit', day: '2-digit'
-  })
+  const date = formatDateJa(post.value.publishedAt)
   const freeText = post.value.content?.text || ''
   const memberText = post.value.member?.text || ''
   const bonusText = post.value.member?.bonus || ''
@@ -59,7 +58,7 @@ export function renderNoteDetailPage(
   let html = ''
 
   // Action buttons at top
-  if (localOnly) {
+  if (isOwner) {
     html += `
       <div class="note-actions">
         <button type="button" class="note-copy-btn" id="note-copy-title">Copy Title</button>
@@ -103,7 +102,7 @@ export function renderNoteDetailPage(
   html += `</div>`
 
   // Edit form (below content)
-  if (localOnly) {
+  if (isOwner) {
     html += `
       <div class="note-edit" id="note-edit-form" style="display:none">
         <input type="text" id="note-edit-title" class="note-edit-input" value="${escapeAttr(post.value.title)}" placeholder="Title">
@@ -223,10 +222,3 @@ export function setupNoteDetail(
   })
 }
 
-function escapeHtml(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
-}
-
-function escapeAttr(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
diff --git a/src/web/components/posts.ts b/src/web/components/posts.ts
index 1ff5882..a79b11b 100644
--- a/src/web/components/posts.ts
+++ b/src/web/components/posts.ts
@@ -1,7 +1,7 @@
 import type { Post } from '../types'
 import { renderMarkdown } from '../lib/markdown'
 import { renderDiscussion, loadDiscussionPosts } from './discussion'
-import { getCurrentLang } from './mode-tabs'
+import { escapeHtml, formatDate, getLang } from '../lib/util'
 
 // Extract text content from post content (handles both string and object formats)
 function getContentText(content: unknown): string {
@@ -14,22 +14,13 @@ function getContentText(content: unknown): string {
   return ''
 }
 
-// Format date as yyyy/mm/dd
-function formatDate(dateStr: string): string {
-  const d = new Date(dateStr)
-  const year = d.getFullYear()
-  const month = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  return `${year}/${month}/${day}`
-}
-
 // Render post list
 export function renderPostList(posts: Post[], handle: string): string {
   if (posts.length === 0) {
     return '<p class="no-posts">No posts yet.</p>'
   }
 
-  const currentLang = getCurrentLang()
+  const currentLang = getLang()
 
   const items = posts.map(post => {
     const rkey = post.uri.split('/').pop() || ''
@@ -77,7 +68,7 @@ export function renderPostDetail(
   const editBtn = isOwner ? `<button type="button" class="post-edit-btn" id="post-edit-btn">Edit</button>` : ''
 
   // Get current language and show appropriate content
-  const currentLang = getCurrentLang()
+  const currentLang = getLang()
   const translations = post.value.translations
   const originalLang = post.value.langs?.[0] || 'ja'
 
@@ -144,11 +135,3 @@ export function mountPostDetail(container: HTMLElement, html: string): void {
   container.innerHTML = html
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
diff --git a/src/web/components/profile.ts b/src/web/components/profile.ts
index 6172c55..46bddf9 100644
--- a/src/web/components/profile.ts
+++ b/src/web/components/profile.ts
@@ -1,5 +1,6 @@
 import type { Profile } from '../types'
 import { getAvatarUrl, getAvatarUrlRemote } from '../lib/api'
+import { escapeHtml } from '../lib/util'
 
 // Service definitions for profile icons
 export interface ServiceLink {
@@ -122,11 +123,3 @@ export function mountProfile(container: HTMLElement, html: string): void {
   container.innerHTML = html
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
diff --git a/src/web/components/rse.ts b/src/web/components/rse.ts
index 4aa5f59..6d404fe 100644
--- a/src/web/components/rse.ts
+++ b/src/web/components/rse.ts
@@ -1,5 +1,6 @@
 // RSE display component for ai.syui.rse.user collection
 import { renderCard, type UserCard, type CardAdminEntry, type CardAdminData } from './card'
+import { getLocalizedText } from '../lib/util'
 
 export interface RseAdminItem {
   id: number
@@ -25,18 +26,6 @@ export interface RseCollection {
   updatedAt: string
 }
 
-// Get current language
-function getLang(): string {
-  return localStorage.getItem('preferredLang') || 'ja'
-}
-
-// Get localized text
-function getLocalizedText(obj: { ja: string; en: string } | undefined): string {
-  if (!obj) return ''
-  const lang = getLang()
-  return obj[lang as 'ja' | 'en'] || obj.ja || obj.en || ''
-}
-
 // Get rarity class from unique flag
 function getRarityClass(item: RseItem): string {
   if (item.unique) return 'unique'
diff --git a/src/web/lib/api.ts b/src/web/lib/api.ts
index 40c22a5..bbc9ce0 100644
--- a/src/web/lib/api.ts
+++ b/src/web/lib/api.ts
@@ -17,6 +17,7 @@ async function fetchWithTimeout(url: string, options: RequestInit = {}, timeout
 // Cache
 let configCache: AppConfig | null = null
 let networksCache: Networks | null = null
+const pdsCache = new Map<string, string | null>()
 
 // Load config.json
 export async function getConfig(): Promise<AppConfig> {
@@ -55,8 +56,10 @@ export async function resolveHandle(handle: string): Promise<string | null> {
   return null
 }
 
-// Get PDS endpoint for DID (try all networks)
+// Get PDS endpoint for DID (try all networks, cached)
 export async function getPds(did: string): Promise<string | null> {
+  if (pdsCache.has(did)) return pdsCache.get(did)!
+
   const networks = await getNetworks()
 
   for (const network of Object.values(networks)) {
@@ -66,6 +69,7 @@ export async function getPds(did: string): Promise<string | null> {
         const didDoc = await res.json()
         const service = didDoc.service?.find((s: { type: string }) => s.type === 'AtprotoPersonalDataServer')
         if (service?.serviceEndpoint) {
+          pdsCache.set(did, service.serviceEndpoint)
           return service.serviceEndpoint
         }
       }
@@ -73,6 +77,7 @@ export async function getPds(did: string): Promise<string | null> {
       // Try next network (timeout or error)
     }
   }
+  pdsCache.set(did, null)
   return null
 }
 
@@ -82,39 +87,62 @@ function isJsonResponse(res: Response): boolean {
   return contentType?.includes('application/json') ?? false
 }
 
-// Load local profile
-async function getLocalProfile(did: string): Promise<Profile | null> {
+// Generic local-then-remote fetch helper
+async function fetchLocalThenRemote<T>(
+  did: string,
+  localPath: string,
+  remoteFetcher: (pds: string) => Promise<T | null>,
+  localOnly: boolean,
+  defaultValue: T | null,
+  localTransform?: (data: unknown) => T | null
+): Promise<T | null> {
   try {
-    const res = await fetch(`/at/${did}/app.bsky.actor.profile/self.json`)
-    if (res.ok && isJsonResponse(res)) return res.json()
-  } catch {
-    // Not found
+    const res = await fetch(localPath)
+    if (res.ok && isJsonResponse(res)) {
+      const data = await res.json()
+      return localTransform ? localTransform(data) : data as T
+    }
+  } catch { /* Not found */ }
+
+  if (localOnly) return defaultValue
+
+  const pds = await getPds(did)
+  if (!pds) return defaultValue
+
+  try {
+    return await remoteFetcher(pds)
+  } catch { /* Failed */ }
+  return defaultValue
+}
+
+// Helper to build a remote getRecord fetcher
+function remoteGetRecord<T>(
+  did: string,
+  collection: string,
+  rkey: string,
+  transform?: (data: unknown) => T
+): (pds: string) => Promise<T | null> {
+  return async (pds: string) => {
+    const host = pds.replace('https://', '')
+    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=${rkey}`
+    const res = await fetchWithTimeout(url, {}, 8000)
+    if (res.ok) {
+      const data = await res.json()
+      return transform ? transform(data) : data as T
+    }
+    return null
   }
-  return null
 }
 
 // Load profile (local only for admin, remote for others)
 export async function getProfile(did: string, localOnly = false): Promise<Profile | null> {
-  // Try local first
-  const local = await getLocalProfile(did)
-  if (local) return local
-
-  // If local only mode, don't call API
-  if (localOnly) return null
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=app.bsky.actor.profile&rkey=self`
-    const res = await fetchWithTimeout(url, {}, 8000)
-    if (res.ok) return res.json()
-  } catch {
-    // Failed or timeout
-  }
-  return null
+  return fetchLocalThenRemote<Profile>(
+    did,
+    `/at/${did}/app.bsky.actor.profile/self.json`,
+    remoteGetRecord(did, 'app.bsky.actor.profile', 'self'),
+    localOnly,
+    null
+  )
 }
 
 // Get avatar URL (local only for admin, remote for others)
@@ -144,6 +172,18 @@ export async function getAvatarUrlRemote(did: string, profile: Profile): Promise
 
 // Load local posts
 async function getLocalPosts(did: string, collection: string): Promise<Post[]> {
+  // Try list.json first (single request)
+  try {
+    const listRes = await fetch(`/at/${did}/${collection}/list.json`)
+    if (listRes.ok && isJsonResponse(listRes)) {
+      const posts: Post[] = await listRes.json()
+      return posts.sort((a, b) =>
+        new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
+      )
+    }
+  } catch { /* fallback */ }
+
+  // Fallback: index.json + individual files
   try {
     const indexRes = await fetch(`/at/${did}/${collection}/index.json`)
     if (indexRes.ok && isJsonResponse(indexRes)) {
@@ -160,98 +200,67 @@ async function getLocalPosts(did: string, collection: string): Promise<Post[]> {
         new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
       )
     }
-  } catch {
-    // Not found
-  }
+  } catch { /* not found */ }
   return []
 }
 
 // Load posts (local only for admin, remote for others)
 export async function getPosts(did: string, collection: string, localOnly = false): Promise<Post[]> {
-  // Try local first
+  // Try local first (uses special index.json + Promise.all logic)
   const local = await getLocalPosts(did, collection)
   if (local.length > 0) return local
 
-  // If local only mode, don't call API
   if (localOnly) return []
 
-  // Remote fallback
   const pds = await getPds(did)
   if (!pds) return []
 
   try {
     const host = pds.replace('https://', '')
     const url = `${xrpcUrl(host, comAtprotoRepo.listRecords)}?repo=${did}&collection=${collection}&limit=100`
-    const res = await fetch(url)
+    const res = await fetchWithTimeout(url, {}, 8000)
     if (res.ok) {
       const data: ListRecordsResponse<Post> = await res.json()
       return data.records.sort((a, b) =>
         new Date(b.value.publishedAt).getTime() - new Date(a.value.publishedAt).getTime()
       )
     }
-  } catch {
-    // Failed
-  }
+  } catch { /* Failed */ }
   return []
 }
 
 // Get single post (local only for admin, remote for others)
 export async function getPost(did: string, collection: string, rkey: string, localOnly = false): Promise<Post | null> {
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/${rkey}.json`)
-    if (res.ok && isJsonResponse(res)) return res.json()
-  } catch {
-    // Not found
-  }
-
-  // If local only mode, don't call API
-  if (localOnly) return null
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=${rkey}`
-    const res = await fetch(url)
-    if (res.ok) return res.json()
-  } catch {
-    // Failed
-  }
-  return null
+  return fetchLocalThenRemote<Post>(
+    did,
+    `/at/${did}/${collection}/${rkey}.json`,
+    remoteGetRecord(did, collection, rkey),
+    localOnly,
+    null
+  )
 }
 
 // Describe repo - get collections list
 export async function describeRepo(did: string): Promise<string[]> {
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/describe.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const data = await res.json()
-      return data.collections || []
-    }
-  } catch {
-    // Not found
-  }
-
-  // Remote
-  const pds = await getPds(did)
-  if (!pds) return []
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.describeRepo)}?repo=${did}`
-    const res = await fetchWithTimeout(url, {}, 8000)
-    if (res.ok) {
-      const data = await res.json()
-      return data.collections || []
-    }
-  } catch {
-    // Failed or timeout
-  }
-  return []
+  const extractCollections = (data: unknown) => ((data as { collections?: string[] }).collections || []) as unknown as string[]
+  const result = await fetchLocalThenRemote<string[]>(
+    did,
+    `/at/${did}/describe.json`,
+    async (pds: string) => {
+      const host = pds.replace('https://', '')
+      const url = `${xrpcUrl(host, comAtprotoRepo.describeRepo)}?repo=${did}`
+      const res = await fetchWithTimeout(url, {}, 8000)
+      if (res.ok) {
+        const data = await res.json()
+        return data.collections || []
+      }
+      return null
+    },
+    false,
+    null,
+    extractCollections
+  )
+  return result || []
 }
 
 // List records from any collection
@@ -393,25 +402,31 @@ export async function getChatMessages(
 ): Promise<ChatMessage[]> {
   // Load messages for a single DID
   async function loadForDid(did: string): Promise<ChatMessage[]> {
-    // Try local first
+    // Try local list.json first (single request for all records)
+    try {
+      const res = await fetch(`/at/${did}/${collection}/list.json`)
+      if (res.ok && isJsonResponse(res)) {
+        return (await res.json()) as ChatMessage[]
+      }
+    } catch { /* fallback */ }
+
+    // Try local index.json + individual files
     try {
       const res = await fetch(`/at/${did}/${collection}/index.json`)
       if (res.ok && isJsonResponse(res)) {
         const rkeys: string[] = await res.json()
-        // Load all messages in parallel
-        const msgPromises = rkeys.map(async (rkey) => {
-          const msgRes = await fetch(`/at/${did}/${collection}/${rkey}.json`)
-          if (msgRes.ok && isJsonResponse(msgRes)) {
-            return msgRes.json() as Promise<ChatMessage>
-          }
-          return null
-        })
-        const results = await Promise.all(msgPromises)
+        const results = await Promise.all(
+          rkeys.map(async (rkey) => {
+            const msgRes = await fetch(`/at/${did}/${collection}/${rkey}.json`)
+            if (msgRes.ok && isJsonResponse(msgRes)) {
+              return msgRes.json() as Promise<ChatMessage>
+            }
+            return null
+          })
+        )
         return results.filter((m): m is ChatMessage => m !== null)
       }
-    } catch {
-      // Try remote
-    }
+    } catch { /* try remote */ }
 
     // Remote fallback
     const pds = await getPds(did)
@@ -420,14 +435,12 @@ export async function getChatMessages(
     try {
       const host = pds.replace('https://', '')
       const url = `${xrpcUrl(host, comAtprotoRepo.listRecords)}?repo=${did}&collection=${collection}&limit=100`
-      const res = await fetch(url)
+      const res = await fetchWithTimeout(url, {}, 8000)
       if (res.ok) {
         const data: ListRecordsResponse<ChatMessage> = await res.json()
         return data.records
       }
-    } catch {
-      // Failed
-    }
+    } catch { /* failed */ }
     return []
   }
 
@@ -591,33 +604,15 @@ export async function getCards(
   did: string,
   collection: string = 'ai.syui.card.user'
 ): Promise<CardCollection | null> {
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/self.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const record = await res.json()
-      return record.value as CardCollection
-    }
-  } catch {
-    // Try remote
-  }
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=self`
-    const res = await fetch(url)
-    if (res.ok) {
-      const record = await res.json()
-      return record.value as CardCollection
-    }
-  } catch {
-    // Failed
-  }
-  return null
+  const extractValue = (data: unknown) => (data as { value: CardCollection }).value
+  return fetchLocalThenRemote<CardCollection>(
+    did,
+    `/at/${did}/${collection}/self.json`,
+    remoteGetRecord(did, collection, 'self', extractValue),
+    false,
+    null,
+    extractValue
+  )
 }
 
 // RSE collection type
@@ -639,34 +634,15 @@ export interface RseCollection {
 // Get user's RSE collection (ai.syui.rse.user)
 export async function getRse(did: string): Promise<RseCollection | null> {
   const collection = 'ai.syui.rse.user'
-
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/self.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const record = await res.json()
-      return record.value as RseCollection
-    }
-  } catch {
-    // Try remote
-  }
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=self`
-    const res = await fetch(url)
-    if (res.ok) {
-      const record = await res.json()
-      return record.value as RseCollection
-    }
-  } catch {
-    // Failed
-  }
-  return null
+  const extractValue = (data: unknown) => (data as { value: RseCollection }).value
+  return fetchLocalThenRemote<RseCollection>(
+    did,
+    `/at/${did}/${collection}/self.json`,
+    remoteGetRecord(did, collection, 'self', extractValue),
+    false,
+    null,
+    extractValue
+  )
 }
 
 // VRM collection type
@@ -685,34 +661,15 @@ export interface VrmCollection {
 // Get user's VRM collection (ai.syui.vrm)
 export async function getVrm(did: string): Promise<VrmCollection | null> {
   const collection = 'ai.syui.vrm'
-
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/self.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const record = await res.json()
-      return record.value as VrmCollection
-    }
-  } catch {
-    // Try remote
-  }
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=self`
-    const res = await fetch(url)
-    if (res.ok) {
-      const record = await res.json()
-      return record.value as VrmCollection
-    }
-  } catch {
-    // Failed
-  }
-  return null
+  const extractValue = (data: unknown) => (data as { value: VrmCollection }).value
+  return fetchLocalThenRemote<VrmCollection>(
+    did,
+    `/at/${did}/${collection}/self.json`,
+    remoteGetRecord(did, collection, 'self', extractValue),
+    false,
+    null,
+    extractValue
+  )
 }
 
 // Link item type
@@ -747,34 +704,15 @@ export interface CardAdminData {
 // Get card admin data (ai.syui.card.admin)
 export async function getCardAdmin(did: string): Promise<CardAdminData | null> {
   const collection = 'ai.syui.card.admin'
-
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/self.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const record = await res.json()
-      return record.value as CardAdminData
-    }
-  } catch {
-    // Try remote
-  }
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=self`
-    const res = await fetch(url)
-    if (res.ok) {
-      const record = await res.json()
-      return record.value as CardAdminData
-    }
-  } catch {
-    // Failed
-  }
-  return null
+  const extractValue = (data: unknown) => (data as { value: CardAdminData }).value
+  return fetchLocalThenRemote<CardAdminData>(
+    did,
+    `/at/${did}/${collection}/self.json`,
+    remoteGetRecord(did, collection, 'self', extractValue),
+    false,
+    null,
+    extractValue
+  )
 }
 
 // RSE admin data types
@@ -797,65 +735,27 @@ export interface RseAdminData {
 // Get RSE admin data (ai.syui.rse.admin)
 export async function getRseAdmin(did: string): Promise<RseAdminData | null> {
   const collection = 'ai.syui.rse.admin'
-
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/self.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const record = await res.json()
-      return record.value as RseAdminData
-    }
-  } catch {
-    // Try remote
-  }
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=self`
-    const res = await fetch(url)
-    if (res.ok) {
-      const record = await res.json()
-      return record.value as RseAdminData
-    }
-  } catch {
-    // Failed
-  }
-  return null
+  const extractValue = (data: unknown) => (data as { value: RseAdminData }).value
+  return fetchLocalThenRemote<RseAdminData>(
+    did,
+    `/at/${did}/${collection}/self.json`,
+    remoteGetRecord(did, collection, 'self', extractValue),
+    false,
+    null,
+    extractValue
+  )
 }
 
 // Get user's links (ai.syui.at.link)
 export async function getLinks(did: string): Promise<LinkCollection | null> {
   const collection = 'ai.syui.at.link'
-
-  // Try local first
-  try {
-    const res = await fetch(`/at/${did}/${collection}/self.json`)
-    if (res.ok && isJsonResponse(res)) {
-      const record = await res.json()
-      return record.value as LinkCollection
-    }
-  } catch {
-    // Try remote
-  }
-
-  // Remote fallback
-  const pds = await getPds(did)
-  if (!pds) return null
-
-  try {
-    const host = pds.replace('https://', '')
-    const url = `${xrpcUrl(host, comAtprotoRepo.getRecord)}?repo=${did}&collection=${collection}&rkey=self`
-    const res = await fetch(url)
-    if (res.ok) {
-      const record = await res.json()
-      return record.value as LinkCollection
-    }
-  } catch {
-    // Failed
-  }
-  return null
+  const extractValue = (data: unknown) => (data as { value: LinkCollection }).value
+  return fetchLocalThenRemote<LinkCollection>(
+    did,
+    `/at/${did}/${collection}/self.json`,
+    remoteGetRecord(did, collection, 'self', extractValue),
+    false,
+    null,
+    extractValue
+  )
 }
diff --git a/src/web/lib/markdown.ts b/src/web/lib/markdown.ts
index 281aa95..ee67ba7 100644
--- a/src/web/lib/markdown.ts
+++ b/src/web/lib/markdown.ts
@@ -1,5 +1,6 @@
 import { marked } from 'marked'
 import hljs from 'highlight.js'
+import { escapeHtml } from './util'
 
 // Configure marked
 marked.setOptions({
@@ -21,16 +22,6 @@ renderer.code = function({ text, lang }: { text: string; lang?: string }) {
 
 marked.use({ renderer })
 
-// Escape HTML
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
-
 // Render markdown to HTML
 export function renderMarkdown(content: string): string {
   return marked(content) as string
diff --git a/src/web/lib/util.ts b/src/web/lib/util.ts
new file mode 100644
index 0000000..4529e4c
--- /dev/null
+++ b/src/web/lib/util.ts
@@ -0,0 +1,104 @@
+// Shared utility functions
+
+// Escape HTML to prevent XSS
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+// Escape for HTML attributes (same as escapeHtml)
+export function escapeAttr(text: string): string {
+  return escapeHtml(text)
+}
+
+// Format date as yyyy/mm/dd
+export function formatDate(dateStr: string): string {
+  const d = new Date(dateStr)
+  const year = d.getFullYear()
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${year}/${month}/${day}`
+}
+
+// Format date/time as mm/dd hh:mm
+export function formatDateTime(dateStr: string): string {
+  const d = new Date(dateStr)
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hour = String(d.getHours()).padStart(2, '0')
+  const min = String(d.getMinutes()).padStart(2, '0')
+  return `${month}/${day} ${hour}:${min}`
+}
+
+// Format date in ja-JP locale
+export function formatDateJa(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('ja-JP', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+// Get current language preference
+export function getLang(): string {
+  return localStorage.getItem('preferred-lang') || 'ja'
+}
+
+// Get localized text from a {ja, en} object
+export function getLocalizedText(obj: { ja: string; en: string } | undefined): string {
+  if (!obj) return ''
+  const lang = getLang()
+  return obj[lang as 'ja' | 'en'] || obj.ja || obj.en || ''
+}
+
+// Get translated content from a record with translations field
+export function getTranslatedContent(
+  originalText: string,
+  translations: Record<string, { content: string | { text: string } }> | undefined,
+  originalLang: string = 'ja'
+): string {
+  const currentLang = getLang()
+  if (translations && currentLang !== originalLang && translations[currentLang]) {
+    const translated = translations[currentLang].content
+    if (typeof translated === 'string') return translated
+    if (translated && typeof translated === 'object' && 'text' in translated) return translated.text
+  }
+  return originalText
+}
+
+// Extract rkey from AT URI
+export function getRkeyFromUri(uri: string): string {
+  return uri.split('/').pop() || ''
+}
+
+// Extract authority (DID) from AT URI
+export function getAuthorityFromUri(uri: string): string {
+  return uri.replace('at://', '').split('/')[0]
+}
+
+// Async button helper: find button by ID, add click handler with loading state
+export function setupAsyncButton(
+  id: string,
+  loadingText: string,
+  handler: (btn: HTMLButtonElement) => Promise<void>
+): void {
+  const btn = document.getElementById(id) as HTMLButtonElement | null
+  if (!btn) return
+  const originalText = btn.textContent || ''
+  btn.addEventListener('click', async () => {
+    btn.textContent = loadingText
+    btn.disabled = true
+    try {
+      await handler(btn)
+    } catch (err) {
+      console.error(`${id} failed:`, err)
+      alert(`Failed: ${err}`)
+      btn.textContent = originalText
+      btn.disabled = false
+    }
+  })
+}
diff --git a/src/web/main.ts b/src/web/main.ts
index 3d3809c..82a903e 100644
--- a/src/web/main.ts
+++ b/src/web/main.ts
@@ -21,6 +21,8 @@ import { renderVrmPage, setupVrmPage } from './components/vrm'
 import { checkMigrationStatus, renderMigrationPage, setupMigrationButton } from './components/card-migrate'
 import { renderNoteListPage, renderNoteDetailPage, setupNoteDetail } from './components/note'
 import { showLoading, hideLoading } from './components/loading'
+import { setupAsyncButton } from './lib/util'
+import type { AppConfig, Profile as ProfileType, Post } from './types'
 
 const app = document.getElementById('app')!
 
@@ -28,6 +30,30 @@ let currentHandle = ''
 let configHandle = ''
 let isFirstRender = true
 
+// Shared context passed to route renderers
+interface RenderContext {
+  config: AppConfig
+  did: string
+  handle: string
+  localOnly: boolean
+  isOwner: boolean
+  loggedInDid: string | null | undefined
+  profile: ProfileType | null
+  collections: string[]
+  webUrl: string | undefined
+  oauthEnabled: boolean
+  posts: Post[]
+  notePosts: Post[]
+}
+
+// Result from route content rendering
+interface RouteContentResult {
+  html: string
+  langList?: string[]
+  currentRecord?: { uri: string; cid: string; value: unknown } | null
+  cardMigrationState?: Awaited<ReturnType<typeof checkMigrationStatus>> | null
+}
+
 // Filter collections by service domain
 function filterCollectionsByService(collections: string[], service: string): string[] {
   return collections.filter(col => {
@@ -43,9 +69,7 @@ function filterCollectionsByService(collections: string[], service: string): str
 // Get web URL for handle from networks
 async function getWebUrl(handle: string): Promise<string | undefined> {
   const networks = await getNetworks()
-  // Check each network for matching handle domain
   for (const [_domain, network] of Object.entries(networks)) {
-    // Check handleDomains if configured
     if (network.handleDomains) {
       for (const hd of network.handleDomains) {
         if (handle.endsWith(`.${hd}`)) {
@@ -53,476 +77,302 @@ async function getWebUrl(handle: string): Promise<string | undefined> {
         }
       }
     }
-    // Check if handle domain matches network's web domain
     const webDomain = network.web?.replace(/^https?:\/\//, '')
     if (webDomain && handle.endsWith(`.${webDomain}`)) {
       return network.web
     }
   }
-  // Default to first network's web
   const firstNetwork = Object.values(networks)[0]
   return firstNetwork?.web
 }
 
-async function render(route: Route): Promise<void> {
-  // Skip loading indicator on first render for faster perceived performance
-  if (!isFirstRender) {
-    showLoading(app)
+// Collect available languages from posts
+function collectPostLangs(posts: Post[]): string[] {
+  const langs = new Set<string>()
+  for (const post of posts) {
+    langs.add(post.value.langs?.[0] || 'ja')
+    if (post.value.translations) {
+      for (const lang of Object.keys(post.value.translations)) {
+        langs.add(lang)
+      }
+    }
+  }
+  return Array.from(langs)
+}
+
+// Collect available languages from chat messages
+function collectChatLangs(messages: { value: { langs?: string[]; translations?: Record<string, unknown> } }[]): string[] {
+  const langs = new Set<string>()
+  for (const msg of messages) {
+    langs.add(msg.value.langs?.[0] || 'ja')
+    if (msg.value.translations) {
+      for (const lang of Object.keys(msg.value.translations)) {
+        langs.add(lang)
+      }
+    }
+  }
+  return Array.from(langs)
+}
+
+// --- Route content renderers ---
+
+async function renderRecordRoute(route: Route, ctx: RenderContext): Promise<RouteContentResult> {
+  const currentRecord = await getRecord(ctx.did, route.collection!, route.rkey!)
+  let html = ''
+  if (currentRecord) {
+    html += `<div id="content">${renderRecordDetail(currentRecord, route.collection!, ctx.isOwner)}</div>`
+  } else {
+    html += `<div id="content" class="error">Record not found</div>`
+  }
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}/at/collection/${route.collection}">${route.collection}</a></nav>`
+  return { html, currentRecord }
+}
+
+async function renderCollectionRoute(route: Route, ctx: RenderContext): Promise<RouteContentResult> {
+  const records = await listRecords(ctx.did, route.collection!)
+  let html = `<div id="content">${renderRecordList(records, ctx.handle, route.collection!)}</div>`
+  const parts = route.collection!.split('.')
+  const service = parts.length >= 2 ? `${parts[1]}.${parts[0]}` : ''
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}/at/service/${encodeURIComponent(service)}">${service}</a></nav>`
+  return { html }
+}
+
+async function renderServiceRoute(route: Route, ctx: RenderContext): Promise<RouteContentResult> {
+  const filtered = filterCollectionsByService(ctx.collections, route.service!)
+  let html = `<div id="content">${renderCollectionList(filtered, ctx.handle, route.service!)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}/at">at</a></nav>`
+  return { html }
+}
+
+async function renderAtBrowserRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  const pds = await getPds(ctx.did)
+  let html = `<div id="browser">`
+  html += renderServerInfo(ctx.did, pds)
+  html += renderServiceList(ctx.collections, ctx.handle)
+  html += `</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+async function renderPostRoute(route: Route, ctx: RenderContext, langList: string[]): Promise<RouteContentResult> {
+  const post = await getPost(ctx.did, ctx.config.collection, route.rkey!, ctx.localOnly)
+  let html = renderLangSelector(langList)
+  if (post) {
+    html += `<div id="content">${renderPostDetail(post, ctx.handle, ctx.config.collection, ctx.isOwner, ctx.config.siteUrl, ctx.webUrl)}</div>`
+  } else {
+    html += `<div id="content" class="error">Post not found</div>`
+  }
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+function renderPostPageRoute(ctx: RenderContext): RouteContentResult {
+  let html = `<div id="post-form">${renderPostForm(ctx.config.collection)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+async function renderCardRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  const cardCollection = ctx.config.cardCollection || 'ai.syui.card.user'
+  const cards = await getCards(ctx.did, cardCollection)
+  let html = `<div id="content">${renderCardPage(cards, ctx.handle, cardCollection)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+async function renderCardOldRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  const cardMigrationState = await checkMigrationStatus(ctx.did)
+  let html = `<div id="content">${renderMigrationPage(cardMigrationState, ctx.handle, ctx.isOwner)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html, cardMigrationState }
+}
+
+async function renderRseRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  const cardCollection = ctx.config.cardCollection || 'ai.syui.card.user'
+  const adminDid = ctx.config.bot?.did || ctx.config.did || ctx.did
+  const [rseData, cards, adminData, rseAdminData] = await Promise.all([
+    getRse(ctx.did),
+    getCards(ctx.did, cardCollection),
+    getCardAdmin(adminDid),
+    getRseAdmin(adminDid)
+  ])
+  const userCards = cards?.card || []
+  let html = `<div id="content">${renderRsePage(rseData, ctx.handle, userCards, adminData, rseAdminData, cardCollection)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+async function renderLinkRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  const links = await getLinks(ctx.did)
+  let html = `<div id="content">${renderLinkPage(links, ctx.handle, ctx.isOwner)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+async function renderVrmRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  const vrmData = await getVrm(ctx.did)
+  let html = `<div id="content">${renderVrmPage(vrmData, ctx.handle)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+function renderNoteRoute(ctx: RenderContext): RouteContentResult {
+  let html = `<div id="content">${renderNoteListPage(ctx.notePosts, ctx.handle)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html }
+}
+
+async function renderNoteDetailRoute(route: Route, ctx: RenderContext): Promise<RouteContentResult> {
+  const noteCollection = 'ai.syui.note.post'
+  const notePost = await getPost(ctx.did, noteCollection, route.rkey!, ctx.localOnly)
+  let html = ''
+  if (notePost) {
+    html += `<div id="content">${renderNoteDetailPage(notePost, ctx.handle, ctx.isOwner)}</div>`
+  } else {
+    html += `<div id="content" class="error">Note not found</div>`
+  }
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}/at/note">note</a></nav>`
+  return { html }
+}
+
+async function renderChatListRoute(ctx: RenderContext): Promise<RouteContentResult> {
+  if (!ctx.config.bot) {
+    return {
+      html: `<div id="content" class="error">Bot not configured in config.json</div><nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+    }
   }
 
-  try {
-    const config = await getConfig()
-    configHandle = config.handle
+  const botDid = ctx.config.bot.did
+  const botHandle = ctx.config.bot.handle
+  const chatCollection = ctx.config.chatCollection || 'ai.syui.log.chat'
 
-    // Apply theme color from config
-    if (config.color) {
-      document.documentElement.style.setProperty('--btn-color', config.color)
+  const [logMessages, ueMessages, botProfile, pds] = await Promise.all([
+    getChatMessages(ctx.did, botDid, chatCollection),
+    getChatMessages(ctx.did, botDid, 'ai.syui.ue.chat'),
+    getProfile(botDid, false),
+    getPds(ctx.did)
+  ])
+
+  const chatCollections = [
+    { collection: chatCollection, messages: logMessages },
+    { collection: 'ai.syui.ue.chat', messages: ueMessages },
+  ].filter(c => c.messages.length > 0)
+
+  const langList = collectChatLangs([...logMessages, ...ueMessages])
+
+  let html = renderLangSelector(langList)
+  html += `<div id="content">${renderChatListPage(chatCollections, ctx.did, ctx.handle, botDid, botHandle, ctx.profile, botProfile, pds || undefined)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
+  return { html, langList }
+}
+
+async function renderChatThreadRoute(route: Route, ctx: RenderContext): Promise<RouteContentResult> {
+  if (!ctx.config.bot) {
+    return {
+      html: `<div id="content" class="error">Bot not configured in config.json</div><nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
     }
+  }
 
-    // Set page title from config
-    if (config.title) {
-      document.title = config.title
+  const botDid = ctx.config.bot.did
+  const botHandle = ctx.config.bot.handle
+  const chatCollection = route.service === 'ue' ? 'ai.syui.ue.chat' : (ctx.config.chatCollection || 'ai.syui.log.chat')
+
+  const [chatMessages, botProfile, pds] = await Promise.all([
+    getChatMessages(ctx.did, botDid, chatCollection),
+    getProfile(botDid, false),
+    getPds(ctx.did)
+  ])
+
+  const langList = collectChatLangs(chatMessages)
+
+  let html = renderLangSelector(langList)
+  html += `<div id="content">${renderChatThreadPage(chatMessages, route.rkey!, ctx.did, ctx.handle, botDid, botHandle, ctx.profile, botProfile, pds || undefined, chatCollection, ctx.loggedInDid)}</div>`
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}/at/chat">chat</a></nav>`
+  return { html, langList }
+}
+
+async function renderChatEditRoute(route: Route, ctx: RenderContext): Promise<RouteContentResult> {
+  if (!ctx.config.bot) {
+    return {
+      html: `<div id="content" class="error">Bot not configured in config.json</div><nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>`
     }
-
-    // Check OAuth enabled
-    const oauthEnabled = config.oauth !== false
-
-    // Handle OAuth callback if present (check both ? and #)
-    const searchParams = new URLSearchParams(window.location.search)
-    const hashParams = window.location.hash ? new URLSearchParams(window.location.hash.slice(1)) : null
-    if (oauthEnabled && (searchParams.has('code') || searchParams.has('state') || hashParams?.has('code') || hashParams?.has('state'))) {
-      await handleCallback()
+  }
+  if (!ctx.isOwner) {
+    return {
+      html: `<div id="content" class="error">You can only edit your own messages</div><nav class="back-nav"><a href="/@${ctx.handle}/at/chat">chat</a></nav>`
     }
+  }
 
-    // Auto-login if redirected from another domain with ?login=handle
-    if (oauthEnabled && searchParams.has('login')) {
-      const loginHandle = searchParams.get('login')
-      if (loginHandle) {
-        window.history.replaceState({}, '', window.location.pathname)
-        await login(loginHandle)
-        return
-      }
-    }
+  const botDid = ctx.config.bot.did
+  const chatCollection = route.service === 'ue' ? 'ai.syui.ue.chat' : (ctx.config.chatCollection || 'ai.syui.log.chat')
 
-    // Restore session from storage (skip if oauth disabled)
-    if (oauthEnabled) {
-      await restoreSession()
-    }
+  const chatMessages = await getChatMessages(ctx.did, botDid, chatCollection)
+  const targetUri = `at://${ctx.did}/${chatCollection}/${route.rkey}`
+  const message = chatMessages.find(m => m.uri === targetUri)
 
-    // Redirect logged-in user from root to their user page
-    if (route.type === 'home' && isLoggedIn()) {
-      const loggedInHandle = getLoggedInHandle()
-      if (loggedInHandle) {
-        navigate({ type: 'user', handle: loggedInHandle })
-        return
-      }
-    }
+  let html = ''
+  if (!message) {
+    html += `<div id="content" class="error">Message not found</div>`
+  } else {
+    html += `<div id="content">${renderChatEditForm(message, chatCollection, ctx.handle)}</div>`
+  }
+  html += `<nav class="back-nav"><a href="/@${ctx.handle}/at/chat">chat</a></nav>`
+  return { html }
+}
 
-    // Determine handle and whether to use local data only (no API calls)
-    let handle: string
-    let localOnly: boolean
-    let did: string | null
+async function renderUserHomeRoute(ctx: RenderContext, langList: string[]): Promise<RouteContentResult> {
+  const links = await getLinks(ctx.did)
+  let html = `<div id="browser" class="browser-row">${renderCollectionButtons(ctx.collections, ctx.handle)}${renderLinkButtons(links)}</div>`
+  html += renderLangSelector(langList)
+  html += `<div id="content">${renderPostList(ctx.posts, ctx.handle)}</div>`
+  return { html }
+}
 
-    if (route.type === 'home') {
-      handle = config.handle
-      localOnly = true
-      did = config.did || null
-    } else if (route.handle) {
-      handle = route.handle
-      localOnly = handle === config.handle
-      did = localOnly ? (config.did || null) : null
-    } else {
-      handle = config.handle
-      localOnly = true
-      did = config.did || null
-    }
-
-    currentHandle = handle
-
-    // Resolve handle to DID only for remote users
-    if (!did) {
-      did = await resolveHandle(handle)
-    }
-
-    if (!did) {
-      app.innerHTML = `
-        ${renderHeader(handle, oauthEnabled)}
-        <div class="error">Could not resolve handle: ${handle}</div>
-        ${renderFooter(config.handle, config.repoUrl)}
-      `
-      setupEventHandlers()
-      return
-    }
-
-    // Load profile and collections (local only for admin, remote for others)
-    const [profile, webUrl, collections] = await Promise.all([
-      getProfile(did, localOnly),
-      getWebUrl(handle),
-      describeRepo(did)
-    ])
-
-    // Load posts (local only for admin, remote for others)
-    const posts = await getPosts(did, config.collection, localOnly)
-
-    // Collect available languages from posts (used for non-chat pages)
-    const availableLangs = new Set<string>()
-    for (const post of posts) {
-      // Add original language (default: ja for Japanese posts)
-      const postLang = post.value.langs?.[0] || 'ja'
-      availableLangs.add(postLang)
-      // Add translation languages
-      if (post.value.translations) {
-        for (const lang of Object.keys(post.value.translations)) {
-          availableLangs.add(lang)
-        }
-      }
-    }
-    let langList = Array.from(availableLangs)
-
-    // Build page
-    let html = renderHeader(handle, oauthEnabled)
-
-    // Mode tabs (Blog/Browser/Post/Chat/Link/PDS)
-    const activeTab = route.type === 'postpage' ? 'post' :
-      (route.type === 'chat' || route.type === 'chat-thread' || route.type === 'chat-edit') ? 'chat' :
-      route.type === 'link' ? 'link' :
-      (route.type === 'note' || route.type === 'note-detail') ? 'note' :
-      (route.type === 'atbrowser' || route.type === 'service' || route.type === 'collection' || route.type === 'record' ? 'browser' : 'blog')
-    const noteCollection = 'ai.syui.note.post'
-    const notePosts = localOnly ? await getPosts(did, noteCollection, true) : []
-    html += renderModeTabs(handle, activeTab, localOnly, notePosts.length > 0)
-
-    // Check if logged-in user owns this content
-    const loggedInDid = getLoggedInDid()
-    const isOwner = isLoggedIn() && loggedInDid === did
-
-    // Profile section
-    if (profile) {
-      html += await renderProfile(did, profile, handle, webUrl, localOnly, collections)
-    }
-
-    // Content section based on route type
-    let currentRecord: { uri: string; cid: string; value: unknown } | null = null
-    let cardMigrationState: Awaited<ReturnType<typeof checkMigrationStatus>> | null = null
-
-    if (route.type === 'record' && route.collection && route.rkey) {
-      // AT-Browser: Single record view
-      currentRecord = await getRecord(did, route.collection, route.rkey)
-      if (currentRecord) {
-        html += `<div id="content">${renderRecordDetail(currentRecord, route.collection, isOwner)}</div>`
-      } else {
-        html += `<div id="content" class="error">Record not found</div>`
-      }
-      html += `<nav class="back-nav"><a href="/@${handle}/at/collection/${route.collection}">${route.collection}</a></nav>`
-
-    } else if (route.type === 'collection' && route.collection) {
-      // AT-Browser: Collection records list
-      const records = await listRecords(did, route.collection)
-      html += `<div id="content">${renderRecordList(records, handle, route.collection)}</div>`
-      const parts = route.collection.split('.')
-      const service = parts.length >= 2 ? `${parts[1]}.${parts[0]}` : ''
-      html += `<nav class="back-nav"><a href="/@${handle}/at/service/${encodeURIComponent(service)}">${service}</a></nav>`
-
-    } else if (route.type === 'service' && route.service) {
-      // AT-Browser: Service collections list (use pre-loaded collections)
-      const filtered = filterCollectionsByService(collections, route.service)
-      html += `<div id="content">${renderCollectionList(filtered, handle, route.service)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}/at">at</a></nav>`
-
-    } else if (route.type === 'atbrowser') {
-      // AT-Browser: Main view with server info + service list (use pre-loaded collections)
-      const pds = await getPds(did)
-
-      html += `<div id="browser">`
-      html += renderServerInfo(did, pds)
-      html += renderServiceList(collections, handle)
-      html += `</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'post' && route.rkey) {
-      // Post detail (config.collection with markdown)
-      const post = await getPost(did, config.collection, route.rkey, localOnly)
-      html += renderLangSelector(langList)
-      if (post) {
-        html += `<div id="content">${renderPostDetail(post, handle, config.collection, isOwner, config.siteUrl, webUrl)}</div>`
-      } else {
-        html += `<div id="content" class="error">Post not found</div>`
-      }
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'postpage') {
-      // Post form page
-      html += `<div id="post-form">${renderPostForm(config.collection)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'card') {
-      // Card collection page
-      const cardCollection = config.cardCollection || 'ai.syui.card.user'
-      const cards = await getCards(did, cardCollection)
-      html += `<div id="content">${renderCardPage(cards, handle, cardCollection)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'card-old') {
-      // Card migration page
-      cardMigrationState = await checkMigrationStatus(did)
-      html += `<div id="content">${renderMigrationPage(cardMigrationState, handle, isOwner)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'rse') {
-      // RSE page with character cards
-      const cardCollection = config.cardCollection || 'ai.syui.card.user'
-      const adminDid = config.bot?.did || config.did || did
-      const [rseData, cards, adminData, rseAdminData] = await Promise.all([
-        getRse(did),
-        getCards(did, cardCollection),
-        getCardAdmin(adminDid),
-        getRseAdmin(adminDid)
-      ])
-      const userCards = cards?.card || []
-      html += `<div id="content">${renderRsePage(rseData, handle, userCards, adminData, rseAdminData, cardCollection)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'link') {
-      // Link page
-      const links = await getLinks(did)
-      html += `<div id="content">${renderLinkPage(links, handle, isOwner)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'vrm') {
-      // VRM page
-      const vrmData = await getVrm(did)
-      html += `<div id="content">${renderVrmPage(vrmData, handle)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'note') {
-      // Note list page (reuse notePosts from above)
-      html += `<div id="content">${renderNoteListPage(notePosts, handle)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-
-    } else if (route.type === 'note-detail' && route.rkey) {
-      // Note detail page
-      const notePost = await getPost(did, noteCollection, route.rkey, localOnly)
-      if (notePost) {
-        html += `<div id="content">${renderNoteDetailPage(notePost, handle, localOnly)}</div>`
-      } else {
-        html += `<div id="content" class="error">Note not found</div>`
-      }
-      html += `<nav class="back-nav"><a href="/@${handle}/at/note">note</a></nav>`
-
-    } else if (route.type === 'chat') {
-      // Chat list page - show all chat collections
-      if (!config.bot) {
-        html += `<div id="content" class="error">Bot not configured in config.json</div>`
-        html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-      } else {
-      const botDid = config.bot.did
-      const botHandle = config.bot.handle
-      const chatCollection = config.chatCollection || 'ai.syui.log.chat'
-
-      // Load all chat collections in parallel
-      const [logMessages, ueMessages, botProfile, pds] = await Promise.all([
-        getChatMessages(did, botDid, chatCollection),
-        getChatMessages(did, botDid, 'ai.syui.ue.chat'),
-        getProfile(botDid, false),
-        getPds(did)
-      ])
-
-      const chatCollections = [
-        { collection: chatCollection, messages: logMessages },
-        { collection: 'ai.syui.ue.chat', messages: ueMessages },
-      ].filter(c => c.messages.length > 0)
-
-      // Collect available languages from all chat messages
-      const allChatMsgs = [...logMessages, ...ueMessages]
-      const chatLangs = new Set<string>()
-      for (const msg of allChatMsgs) {
-        const msgLang = msg.value.langs?.[0] || 'ja'
-        chatLangs.add(msgLang)
-        if (msg.value.translations) {
-          for (const lang of Object.keys(msg.value.translations)) {
-            chatLangs.add(lang)
-          }
-        }
-      }
-      langList = Array.from(chatLangs)
-
-      html += renderLangSelector(langList)
-      html += `<div id="content">${renderChatListPage(chatCollections, did, handle, botDid, botHandle, profile, botProfile, pds || undefined)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-      }
-
-    } else if (route.type === 'chat-thread' && route.service && route.rkey) {
-      // Chat thread page - route.service is 'log' or 'ue'
-      if (!config.bot) {
-        html += `<div id="content" class="error">Bot not configured in config.json</div>`
-        html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-      } else {
-      const botDid = config.bot.did
-      const botHandle = config.bot.handle
-      const chatCollection = route.service === 'ue' ? 'ai.syui.ue.chat' : (config.chatCollection || 'ai.syui.log.chat')
-
-      const [chatMessages, botProfile, pds] = await Promise.all([
-        getChatMessages(did, botDid, chatCollection),
-        getProfile(botDid, false),
-        getPds(did)
-      ])
-
-      // Collect available languages from chat messages
-      const chatLangs = new Set<string>()
-      for (const msg of chatMessages) {
-        const msgLang = msg.value.langs?.[0] || 'ja'
-        chatLangs.add(msgLang)
-        if (msg.value.translations) {
-          for (const lang of Object.keys(msg.value.translations)) {
-            chatLangs.add(lang)
-          }
-        }
-      }
-      langList = Array.from(chatLangs)
-
-      html += renderLangSelector(langList)
-      html += `<div id="content">${renderChatThreadPage(chatMessages, route.rkey, did, handle, botDid, botHandle, profile, botProfile, pds || undefined, chatCollection, loggedInDid)}</div>`
-      html += `<nav class="back-nav"><a href="/@${handle}/at/chat">chat</a></nav>`
-      }
-
-    } else if (route.type === 'chat-edit' && route.service && route.rkey) {
-      // Chat edit page
-      if (!config.bot) {
-        html += `<div id="content" class="error">Bot not configured in config.json</div>`
-        html += `<nav class="back-nav"><a href="/@${handle}">${handle}</a></nav>`
-      } else if (!isOwner) {
-        html += `<div id="content" class="error">You can only edit your own messages</div>`
-        html += `<nav class="back-nav"><a href="/@${handle}/at/chat">chat</a></nav>`
-      } else {
-        const botDid = config.bot.did
-        const chatCollection = route.service === 'ue' ? 'ai.syui.ue.chat' : (config.chatCollection || 'ai.syui.log.chat')
-
-        const chatMessages = await getChatMessages(did, botDid, chatCollection)
-        const targetUri = `at://${did}/${chatCollection}/${route.rkey}`
-        const message = chatMessages.find(m => m.uri === targetUri)
-
-        if (!message) {
-          html += `<div id="content" class="error">Message not found</div>`
-        } else {
-          html += `<div id="content">${renderChatEditForm(message, chatCollection, handle)}</div>`
-        }
-        html += `<nav class="back-nav"><a href="/@${handle}/at/chat">chat</a></nav>`
-      }
-
-    } else {
-      // User page: compact collection buttons + link buttons + posts
-      const links = await getLinks(did)
-      html += `<div id="browser" class="browser-row">${renderCollectionButtons(collections, handle)}${renderLinkButtons(links)}</div>`
-
-      // Language selector above content
-      html += renderLangSelector(langList)
-
-      // Use pre-loaded posts
-      html += `<div id="content">${renderPostList(posts, handle)}</div>`
-    }
-
-    html += renderFooter(config.handle, config.repoUrl)
-
-    app.innerHTML = html
-    hideLoading(app)
-    setupEventHandlers()
-
-    // Setup mode tabs (PDS selector + Lang selector)
-    await setupModeTabs(
-      (_network) => {
-        // Refresh when network is changed
-        render(parseRoute())
-      },
-      langList,
-      (_lang) => {
-        // Refresh when language is changed
-        render(parseRoute())
-      }
-    )
-
-    // Setup post form on postpage
-    if (route.type === 'postpage' && isLoggedIn()) {
-      setupPostForm(config.collection, () => {
-        // Navigate to user page on success
-        navigate({ type: 'user', handle })
-      })
-    }
-
-    // Setup record delete button
-    if (isOwner) {
-      setupRecordDelete(handle, route)
-      setupPostEdit(config.collection)
-    }
-
-    // Setup chat edit form
-    if (route.type === 'chat-edit' && isOwner) {
-      const chatCollection = config.chatCollection || 'ai.syui.log.chat'
-      setupChatEdit(chatCollection, handle)
-    }
-
-    // Setup link edit
-    if (route.type === 'link' && isOwner) {
-      setupLinkEdit()
-    }
-
-    // Setup validate button for record detail
-    if (currentRecord) {
-      setupValidateButton(currentRecord)
-    }
-
-    // Setup post detail (translation toggle, discussion)
-    if (route.type === 'post') {
-      const contentEl = document.getElementById('content')
-      if (contentEl) {
-        setupPostDetail(contentEl)
-      }
-    }
-
-    // Setup merge button for AT-Browser record detail
-    if (route.type === 'record' && isOwner) {
-      setupRecordMerge()
-    }
-
-    // Setup note detail page
-    if (route.type === 'note-detail' && route.rkey) {
-      const notePost = await getPost(did, noteCollection, route.rkey, localOnly)
-      if (notePost && localOnly) {
-        setupNoteDetail(notePost)
-      }
-    }
-
-    // Setup VRM page audio controls
-    if (route.type === 'vrm') {
-      setupVrmPage()
-    }
-
-
-
-    // Setup card migration button
-    if (route.type === 'card-old' && cardMigrationState?.oldApiUser && cardMigrationState?.oldApiCards) {
-      setupMigrationButton(
-        cardMigrationState.oldApiUser,
-        cardMigrationState.oldApiCards,
-        () => render(parseRoute())  // Refresh on success
-      )
-    }
-
-  } catch (error) {
-    console.error('Render error:', error)
-    app.innerHTML = `
-      ${renderHeader(currentHandle, false)}
-      <div class="error">Error: ${error}</div>
-      ${renderFooter(configHandle, undefined)}
-    `
-    setupEventHandlers()
-  } finally {
-    hideLoading(app)
-    isFirstRender = false
+// Dispatch route to content renderer
+async function renderRouteContent(route: Route, ctx: RenderContext, langList: string[]): Promise<RouteContentResult> {
+  switch (route.type) {
+    case 'record':
+      return renderRecordRoute(route, ctx)
+    case 'collection':
+      return renderCollectionRoute(route, ctx)
+    case 'service':
+      return renderServiceRoute(route, ctx)
+    case 'atbrowser':
+      return renderAtBrowserRoute(ctx)
+    case 'post':
+      return renderPostRoute(route, ctx, langList)
+    case 'postpage':
+      return renderPostPageRoute(ctx)
+    case 'card':
+      return renderCardRoute(ctx)
+    case 'card-old':
+      return renderCardOldRoute(ctx)
+    case 'rse':
+      return renderRseRoute(ctx)
+    case 'link':
+      return renderLinkRoute(ctx)
+    case 'vrm':
+      return renderVrmRoute(ctx)
+    case 'note':
+      if (!ctx.isOwner) return { html: `<div id="content" class="error">Login required</div><nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>` }
+      return renderNoteRoute(ctx)
+    case 'note-detail':
+      if (!ctx.isOwner) return { html: `<div id="content" class="error">Login required</div><nav class="back-nav"><a href="/@${ctx.handle}">${ctx.handle}</a></nav>` }
+      return renderNoteDetailRoute(route, ctx)
+    case 'chat':
+      return renderChatListRoute(ctx)
+    case 'chat-thread':
+      return renderChatThreadRoute(route, ctx)
+    case 'chat-edit':
+      return renderChatEditRoute(route, ctx)
+    default:
+      return renderUserHomeRoute(ctx, langList)
   }
 }
 
+// --- Setup functions ---
+
 function setupEventHandlers(): void {
-  // Header form
   const form = document.getElementById('header-form') as HTMLFormElement
   const input = document.getElementById('header-input') as HTMLInputElement
 
@@ -534,7 +384,6 @@ function setupEventHandlers(): void {
     }
   })
 
-  // Login button
   const loginBtn = document.getElementById('login-btn')
   loginBtn?.addEventListener('click', async () => {
     const handle = input.value.trim() || currentHandle
@@ -550,14 +399,12 @@ function setupEventHandlers(): void {
     }
   })
 
-  // Logout button
   const logoutBtn = document.getElementById('logout-btn')
   logoutBtn?.addEventListener('click', async () => {
     await logout()
   })
 }
 
-// Setup validate button for record detail
 function setupValidateButton(record: { value: unknown }): void {
   const validateBtn = document.getElementById('validate-btn')
   const resultDiv = document.getElementById('validate-result')
@@ -567,27 +414,19 @@ function setupValidateButton(record: { value: unknown }): void {
     const collection = validateBtn.getAttribute('data-collection')
     if (!collection) return
 
-    // Show loading state
     validateBtn.textContent = 'Validating...'
     ;(validateBtn as HTMLButtonElement).disabled = true
     resultDiv.innerHTML = ''
 
     try {
       const result = await validateRecord(collection, record.value)
-
       if (result.valid) {
         resultDiv.innerHTML = `<span class="validate-valid">✓ Valid</span>`
       } else {
-        resultDiv.innerHTML = `
-          <span class="validate-invalid">✗ Invalid</span>
-          <span class="validate-error">${result.error || 'Unknown error'}</span>
-        `
+        resultDiv.innerHTML = `<span class="validate-invalid">✗ Invalid</span><span class="validate-error">${result.error || 'Unknown error'}</span>`
       }
     } catch (err) {
-      resultDiv.innerHTML = `
-        <span class="validate-invalid">✗ Error</span>
-        <span class="validate-error">${err}</span>
-      `
+      resultDiv.innerHTML = `<span class="validate-invalid">✗ Error</span><span class="validate-error">${err}</span>`
     }
 
     validateBtn.textContent = 'Validate'
@@ -595,181 +434,123 @@ function setupValidateButton(record: { value: unknown }): void {
   })
 }
 
-// Setup record delete button
-function setupRecordDelete(handle: string, _route: Route): void {
-  const deleteBtn = document.getElementById('record-delete-btn')
-  if (!deleteBtn) return
-
-  deleteBtn.addEventListener('click', async () => {
-    const collection = deleteBtn.getAttribute('data-collection')
-    const rkey = deleteBtn.getAttribute('data-rkey')
-
+function setupRecordDelete(handle: string): void {
+  setupAsyncButton('record-delete-btn', 'Deleting...', async (btn) => {
+    const collection = btn.getAttribute('data-collection')
+    const rkey = btn.getAttribute('data-rkey')
     if (!collection || !rkey) return
-
-    if (!confirm('Are you sure you want to delete this record?')) return
-
-    try {
-      deleteBtn.textContent = 'Deleting...'
-      ;(deleteBtn as HTMLButtonElement).disabled = true
-
-      await deleteRecord(collection, rkey)
-
-      // Navigate back to collection list
-      navigate({ type: 'collection', handle, collection })
-    } catch (err) {
-      console.error('Delete failed:', err)
-      alert('Delete failed: ' + err)
-      deleteBtn.textContent = 'Delete'
-      ;(deleteBtn as HTMLButtonElement).disabled = false
+    if (!confirm('Are you sure you want to delete this record?')) {
+      btn.textContent = 'Delete'
+      btn.disabled = false
+      return
     }
+    await deleteRecord(collection, rkey)
+    navigate({ type: 'collection', handle, collection })
   })
 }
 
-// Setup post edit form
 function setupPostEdit(collection: string): void {
   const editBtn = document.getElementById('post-edit-btn')
   const editForm = document.getElementById('post-edit-form')
   const postDisplay = document.getElementById('post-display')
   const cancelBtn = document.getElementById('post-edit-cancel')
-  const saveBtn = document.getElementById('post-edit-save')
   const titleInput = document.getElementById('post-edit-title') as HTMLInputElement
   const contentInput = document.getElementById('post-edit-content') as HTMLTextAreaElement
 
   if (!editBtn || !editForm) return
 
-  // Show edit form
   editBtn.addEventListener('click', () => {
     if (postDisplay) postDisplay.style.display = 'none'
     editForm.style.display = 'block'
     editBtn.style.display = 'none'
   })
 
-  // Cancel edit
   cancelBtn?.addEventListener('click', () => {
     editForm.style.display = 'none'
     if (postDisplay) postDisplay.style.display = ''
     editBtn.style.display = ''
   })
 
-  // Save edit
-  saveBtn?.addEventListener('click', async () => {
-    const rkey = saveBtn.getAttribute('data-rkey')
+  setupAsyncButton('post-edit-save', 'Saving...', async (btn) => {
+    const rkey = btn.getAttribute('data-rkey')
     if (!rkey || !titleInput || !contentInput) return
 
     const title = titleInput.value.trim()
     const content = contentInput.value.trim()
-
     if (!title || !content) {
       alert('Title and content are required')
+      btn.textContent = 'Save'
+      btn.disabled = false
       return
     }
 
-    try {
-      saveBtn.textContent = 'Saving...'
-      ;(saveBtn as HTMLButtonElement).disabled = true
-
-      await updatePost(collection, rkey, title, content)
-
-      // Refresh the page
-      render(parseRoute())
-    } catch (err) {
-      console.error('Update failed:', err)
-      alert('Update failed: ' + err)
-      saveBtn.textContent = 'Save'
-      ;(saveBtn as HTMLButtonElement).disabled = false
-    }
+    await updatePost(collection, rkey, title, content)
+    render(parseRoute())
   })
 }
 
-// Setup merge button for AT-Browser record detail (convert old format to new)
 function setupRecordMerge(): void {
-  const mergeBtn = document.getElementById('record-merge-btn')
-  if (!mergeBtn) return
-
-  mergeBtn.addEventListener('click', async () => {
-    const collection = mergeBtn.getAttribute('data-collection') || ''
-    const rkey = mergeBtn.getAttribute('data-rkey') || ''
+  setupAsyncButton('record-merge-btn', 'Merging...', async (btn) => {
+    const collection = btn.getAttribute('data-collection') || ''
+    const rkey = btn.getAttribute('data-rkey') || ''
     if (!collection || !rkey) return
 
     const agent = getAgent()
     if (!agent) return
 
-    try {
-      // Fetch current record
-      const existing = await agent.com.atproto.repo.getRecord({
-        repo: agent.assertDid,
-        collection,
-        rkey,
-      })
+    const existing = await agent.com.atproto.repo.getRecord({
+      repo: agent.assertDid,
+      collection,
+      rkey,
+    })
 
-      const oldValue = existing.data.value as Record<string, unknown>
+    const oldValue = existing.data.value as Record<string, unknown>
 
-      // Build new format record
-      const newRecord: Record<string, unknown> = {
-        $type: collection,
-        site: (typeof oldValue.site === 'string' && oldValue.site) || window.location.origin,
-        title: (typeof oldValue.title === 'string' ? oldValue.title : '') || '',
-        publishedAt: (typeof oldValue.publishedAt === 'string' && oldValue.publishedAt)
-          || (typeof oldValue.createdAt === 'string' && oldValue.createdAt)
-          || new Date().toISOString(),
-      }
-
-      // Convert content to open union format
-      const oldContent = oldValue.content
-      if (oldContent && typeof oldContent === 'object' && (oldContent as Record<string, unknown>).$type) {
-        // Already new format
-        newRecord.content = oldContent
-      } else if (typeof oldContent === 'string') {
-        // Old string format -> convert to union
-        newRecord.content = {
-          $type: `${collection}#markdown`,
-          text: oldContent,
-        }
-      } else {
-        newRecord.content = {
-          $type: `${collection}#markdown`,
-          text: '',
-        }
-      }
-
-      // Preserve optional fields
-      if (oldValue.description) newRecord.description = oldValue.description
-      if (oldValue.tags) newRecord.tags = oldValue.tags
-      if (oldValue.langs) newRecord.langs = oldValue.langs
-      if (oldValue.translations) newRecord.translations = oldValue.translations
-      if (oldValue.path) newRecord.path = oldValue.path
-      if (oldValue.root) newRecord.root = oldValue.root
-      if (oldValue.parent) newRecord.parent = oldValue.parent
-      if (oldValue.updatedAt) newRecord.updatedAt = oldValue.updatedAt
-
-      if (!confirm(`Merge record to new format?\n\nCollection: ${collection}\nRkey: ${rkey}`)) return
-
-      mergeBtn.textContent = 'Merging...'
-      ;(mergeBtn as HTMLButtonElement).disabled = true
-
-      await agent.com.atproto.repo.putRecord({
-        repo: agent.assertDid,
-        collection,
-        rkey,
-        record: newRecord,
-      })
-
-      mergeBtn.textContent = 'Merged!'
-
-      // Refresh page after short delay
-      setTimeout(() => {
-        render(parseRoute())
-      }, 1000)
-    } catch (err) {
-      console.error('Merge failed:', err)
-      alert('Merge failed: ' + err)
-      mergeBtn.textContent = 'Merge'
-      ;(mergeBtn as HTMLButtonElement).disabled = false
+    const newRecord: Record<string, unknown> = {
+      $type: collection,
+      site: (typeof oldValue.site === 'string' && oldValue.site) || window.location.origin,
+      title: (typeof oldValue.title === 'string' ? oldValue.title : '') || '',
+      publishedAt: (typeof oldValue.publishedAt === 'string' && oldValue.publishedAt)
+        || (typeof oldValue.createdAt === 'string' && oldValue.createdAt)
+        || new Date().toISOString(),
     }
+
+    const oldContent = oldValue.content
+    if (oldContent && typeof oldContent === 'object' && (oldContent as Record<string, unknown>).$type) {
+      newRecord.content = oldContent
+    } else if (typeof oldContent === 'string') {
+      newRecord.content = { $type: `${collection}#markdown`, text: oldContent }
+    } else {
+      newRecord.content = { $type: `${collection}#markdown`, text: '' }
+    }
+
+    if (oldValue.description) newRecord.description = oldValue.description
+    if (oldValue.tags) newRecord.tags = oldValue.tags
+    if (oldValue.langs) newRecord.langs = oldValue.langs
+    if (oldValue.translations) newRecord.translations = oldValue.translations
+    if (oldValue.path) newRecord.path = oldValue.path
+    if (oldValue.root) newRecord.root = oldValue.root
+    if (oldValue.parent) newRecord.parent = oldValue.parent
+    if (oldValue.updatedAt) newRecord.updatedAt = oldValue.updatedAt
+
+    if (!confirm(`Merge record to new format?\n\nCollection: ${collection}\nRkey: ${rkey}`)) {
+      btn.textContent = 'Merge'
+      btn.disabled = false
+      return
+    }
+
+    await agent.com.atproto.repo.putRecord({
+      repo: agent.assertDid,
+      collection,
+      rkey,
+      record: newRecord,
+    })
+
+    btn.textContent = 'Merged!'
+    setTimeout(() => { render(parseRoute()) }, 1000)
   })
 }
 
-// Setup chat edit form
 function setupChatEdit(collection: string, handle: string): void {
   const form = document.getElementById('chat-edit-form') as HTMLFormElement
   const contentInput = document.getElementById('chat-edit-content') as HTMLTextAreaElement
@@ -785,7 +566,6 @@ function setupChatEdit(collection: string, handle: string): void {
     if (!rkey || !contentInput) return
 
     const content = contentInput.value.trim()
-
     if (!content) {
       alert('Content is required')
       return
@@ -798,11 +578,7 @@ function setupChatEdit(collection: string, handle: string): void {
       await updateChat(collection, rkey, content)
 
       statusEl.innerHTML = '<span class="chat-edit-success">Saved!</span>'
-
-      // Navigate back to chat thread
-      setTimeout(() => {
-        navigate({ type: 'chat-thread', handle, rkey })
-      }, 1000)
+      setTimeout(() => { navigate({ type: 'chat-thread', handle, rkey }) }, 1000)
     } catch (err) {
       console.error('Update failed:', err)
       statusEl.innerHTML = `<span class="chat-edit-error">Error: ${err}</span>`
@@ -812,14 +588,12 @@ function setupChatEdit(collection: string, handle: string): void {
   })
 }
 
-// Setup link edit
 function setupLinkEdit(): void {
   const editBtn = document.getElementById('link-edit-btn')
   const editForm = document.getElementById('link-edit-form')
   const linkDisplay = document.getElementById('link-display')
   const editList = document.getElementById('link-edit-list')
   const cancelBtn = document.getElementById('link-edit-cancel')
-  const saveBtn = document.getElementById('link-edit-save')
   const addBtn = document.getElementById('link-add-btn')
   const addService = document.getElementById('link-add-service') as HTMLSelectElement
   const addUsername = document.getElementById('link-add-username') as HTMLInputElement
@@ -829,21 +603,18 @@ function setupLinkEdit(): void {
 
   let linkIndex = editList.querySelectorAll('.link-edit-item').length
 
-  // Show edit form
   editBtn.addEventListener('click', () => {
     if (linkDisplay) linkDisplay.style.display = 'none'
     editForm.style.display = 'block'
     editBtn.style.display = 'none'
   })
 
-  // Cancel edit
   cancelBtn?.addEventListener('click', () => {
     editForm.style.display = 'none'
     if (linkDisplay) linkDisplay.style.display = ''
     editBtn.style.display = ''
   })
 
-  // Add new link
   addBtn?.addEventListener('click', () => {
     const service = addService.value
     const username = addUsername.value.trim()
@@ -868,17 +639,14 @@ function setupLinkEdit(): void {
     addUsername.value = ''
   })
 
-  // Remove link (event delegation)
   editList.addEventListener('click', (e) => {
     const target = e.target as HTMLElement
     if (target.classList.contains('link-edit-remove')) {
-      const item = target.closest('.link-edit-item')
-      item?.remove()
+      target.closest('.link-edit-item')?.remove()
     }
   })
 
-  // Save links
-  saveBtn?.addEventListener('click', async () => {
+  setupAsyncButton('link-edit-save', 'Saving...', async () => {
     const items = editList.querySelectorAll('.link-edit-item')
     const links: { service: string; username: string }[] = []
 
@@ -890,7 +658,6 @@ function setupLinkEdit(): void {
       }
     })
 
-    // Also include pending add form input (if user forgot to click +)
     if (addService && addUsername) {
       const pendingUsername = addUsername.value.trim()
       if (pendingUsername) {
@@ -898,27 +665,226 @@ function setupLinkEdit(): void {
       }
     }
 
-    try {
-      saveBtn.textContent = 'Saving...'
-      ;(saveBtn as HTMLButtonElement).disabled = true
+    await updateLinks(links)
 
-      await updateLinks(links)
-
-      if (statusEl) statusEl.innerHTML = '<span class="link-edit-success">Saved!</span>'
-
-      // Refresh page
-      setTimeout(() => {
-        render(parseRoute())
-      }, 1000)
-    } catch (err) {
-      console.error('Update failed:', err)
-      if (statusEl) statusEl.innerHTML = `<span class="link-edit-error">Error: ${err}</span>`
-      saveBtn.textContent = 'Save'
-      ;(saveBtn as HTMLButtonElement).disabled = false
-    }
+    if (statusEl) statusEl.innerHTML = '<span class="link-edit-success">Saved!</span>'
+    setTimeout(() => { render(parseRoute()) }, 1000)
   })
 }
 
+// --- Post-render setup ---
+
+async function setupRouteHandlers(route: Route, ctx: RenderContext, result: RouteContentResult, langList: string[]): Promise<void> {
+  await setupModeTabs(
+    () => { render(parseRoute()) },
+    langList,
+    () => { render(parseRoute()) }
+  )
+
+  if (route.type === 'postpage' && isLoggedIn()) {
+    setupPostForm(ctx.config.collection, () => {
+      navigate({ type: 'user', handle: ctx.handle })
+    })
+  }
+
+  if (ctx.isOwner) {
+    setupRecordDelete(ctx.handle)
+    setupPostEdit(ctx.config.collection)
+  }
+
+  if (route.type === 'chat-edit' && ctx.isOwner) {
+    const chatCollection = ctx.config.chatCollection || 'ai.syui.log.chat'
+    setupChatEdit(chatCollection, ctx.handle)
+  }
+
+  if (route.type === 'link' && ctx.isOwner) {
+    setupLinkEdit()
+  }
+
+  if (result.currentRecord) {
+    setupValidateButton(result.currentRecord)
+  }
+
+  if (route.type === 'post') {
+    const contentEl = document.getElementById('content')
+    if (contentEl) setupPostDetail(contentEl)
+  }
+
+  if (route.type === 'record' && ctx.isOwner) {
+    setupRecordMerge()
+  }
+
+  if (route.type === 'note-detail' && route.rkey) {
+    const noteCollection = 'ai.syui.note.post'
+    const notePost = await getPost(ctx.did, noteCollection, route.rkey, ctx.localOnly)
+    if (notePost && ctx.isOwner) {
+      setupNoteDetail(notePost)
+    }
+  }
+
+  if (route.type === 'vrm') {
+    setupVrmPage()
+  }
+
+  if (route.type === 'card-old' && result.cardMigrationState?.oldApiUser && result.cardMigrationState?.oldApiCards) {
+    setupMigrationButton(
+      result.cardMigrationState.oldApiUser,
+      result.cardMigrationState.oldApiCards,
+      () => render(parseRoute())
+    )
+  }
+}
+
+// --- Main render ---
+
+async function render(route: Route): Promise<void> {
+  if (!isFirstRender) {
+    showLoading(app)
+  }
+
+  try {
+    const config = await getConfig()
+    configHandle = config.handle
+
+    if (config.color) {
+      document.documentElement.style.setProperty('--btn-color', config.color)
+    }
+    if (config.title) {
+      document.title = config.title
+    }
+
+    const oauthEnabled = config.oauth !== false
+
+    // Handle OAuth callback
+    const searchParams = new URLSearchParams(window.location.search)
+    const hashParams = window.location.hash ? new URLSearchParams(window.location.hash.slice(1)) : null
+    if (oauthEnabled && (searchParams.has('code') || searchParams.has('state') || hashParams?.has('code') || hashParams?.has('state'))) {
+      await handleCallback()
+    }
+
+    // Auto-login redirect
+    if (oauthEnabled && searchParams.has('login')) {
+      const loginHandle = searchParams.get('login')
+      if (loginHandle) {
+        window.history.replaceState({}, '', window.location.pathname)
+        await login(loginHandle)
+        return
+      }
+    }
+
+    if (oauthEnabled) {
+      await restoreSession()
+    }
+
+    // Redirect logged-in user from root to user page
+    if (route.type === 'home' && isLoggedIn()) {
+      const loggedInHandle = getLoggedInHandle()
+      if (loggedInHandle) {
+        navigate({ type: 'user', handle: loggedInHandle })
+        return
+      }
+    }
+
+    // Determine handle and data source
+    let handle: string
+    let localOnly: boolean
+    let did: string | null
+
+    if (route.type === 'home') {
+      handle = config.handle
+      localOnly = true
+      did = config.did || null
+    } else if (route.handle) {
+      handle = route.handle
+      localOnly = handle === config.handle
+      did = localOnly ? (config.did || null) : null
+    } else {
+      handle = config.handle
+      localOnly = true
+      did = config.did || null
+    }
+
+    currentHandle = handle
+
+    if (!did) {
+      did = await resolveHandle(handle)
+    }
+
+    if (!did) {
+      app.innerHTML = `
+        ${renderHeader(handle, oauthEnabled)}
+        <div class="error">Could not resolve handle: ${handle}</div>
+        ${renderFooter(config.handle, config.repoUrl)}
+      `
+      setupEventHandlers()
+      return
+    }
+
+    const [profile, webUrl, collections] = await Promise.all([
+      getProfile(did, localOnly),
+      getWebUrl(handle),
+      describeRepo(did)
+    ])
+
+    const posts = await getPosts(did, config.collection, localOnly)
+    let langList = collectPostLangs(posts)
+
+    const noteCollection = 'ai.syui.note.post'
+    const notePosts = localOnly ? await getPosts(did, noteCollection, true) : []
+
+    const loggedInDid = getLoggedInDid()
+    const isOwner = isLoggedIn() && loggedInDid === did
+
+    // Build context
+    const ctx: RenderContext = {
+      config, did, handle, localOnly, isOwner, loggedInDid,
+      profile, collections, webUrl, oauthEnabled, posts, notePosts
+    }
+
+    // Build page HTML
+    let html = renderHeader(handle, oauthEnabled)
+
+    const activeTab = route.type === 'postpage' ? 'post' :
+      (route.type === 'chat' || route.type === 'chat-thread' || route.type === 'chat-edit') ? 'chat' :
+      route.type === 'link' ? 'link' :
+      (route.type === 'note' || route.type === 'note-detail') ? 'note' :
+      (route.type === 'atbrowser' || route.type === 'service' || route.type === 'collection' || route.type === 'record' ? 'browser' : 'blog')
+    html += renderModeTabs(handle, activeTab, localOnly, notePosts.length > 0)
+
+    if (profile) {
+      html += await renderProfile(did, profile, handle, webUrl, localOnly, collections)
+    }
+
+    // Render route content
+    const result = await renderRouteContent(route, ctx, langList)
+    html += result.html
+    if (result.langList) {
+      langList = result.langList
+    }
+
+    html += renderFooter(config.handle, config.repoUrl)
+
+    app.innerHTML = html
+    hideLoading(app)
+    setupEventHandlers()
+
+    // Post-render setup
+    await setupRouteHandlers(route, ctx, result, langList)
+
+  } catch (error) {
+    console.error('Render error:', error)
+    app.innerHTML = `
+      ${renderHeader(currentHandle, false)}
+      <div class="error">Error: ${error}</div>
+      ${renderFooter(configHandle, undefined)}
+    `
+    setupEventHandlers()
+  } finally {
+    hideLoading(app)
+    isFirstRender = false
+  }
+}
+
 // Initial render
 render(parseRoute())