diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c874782..a83408d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -30,6 +30,9 @@ jobs:
 
       - run: npm install
 
+      - name: Type check
+        run: node node_modules/typescript/bin/tsc -p tsconfig.main.json --noEmit && node node_modules/typescript/bin/tsc -p tsconfig.preload.json --noEmit && node node_modules/typescript/bin/tsc -p tsconfig.renderer.json --noEmit
+
       - run: npm run build
 
       - name: Build distributables
diff --git a/.gitignore b/.gitignore
index c9b4a37..90357ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,7 @@ release/
 .claude/
 *.env
 log.md
+
+# Agent Loop logs (迭代日志，不提交到仓库)
+agent-loop-logs/
+agent-loop.yaml
diff --git a/CLAUDE.md b/CLAUDE.md
index a375f95..5de5a19 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,68 +1,89 @@
-# ColaMD
+# CLAUDE.md
 
-## 产品定位
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-**Agent Native 的 Markdown 编辑器。**
+## Build & Development Commands
 
-面向 Agent-to-Agent、Agent-to-Human 之间的新型协作方式。当前 v1.0 聚焦于核心体验：AI Agent 修改 .md 文件时，ColaMD 自动检测变化并实时显示最新内容，让人类和 Agent 的协作像结对编程一样流畅。
+```bash
+npm run dev          # Start dev server with HMR (electron-vite dev)
+npm run build        # Compile all 3 bundles (main, preload, renderer)
+npm run preview      # Preview production build
+npm run dist         # Build + package for current platform
+npm run dist:mac     # macOS build (.dmg + .zip)
+npm run dist:win     # Windows build (.exe NSIS installer)
+npm run dist:linux   # Linux build (.AppImage + .deb)
+```
+
+No test framework, linter, or formatter is configured. Type checking: `npx tsc --noEmit`.
 
-后续会随着 Agent 生态的发展持续迭代。
+Release is triggered by pushing `v*` tags (see `.github/workflows/release.yml`).
 
-## 设计哲学
+## Architecture
 
-### 如非必要，勿增实体
+Electron 3-process model with a minimal, no-framework renderer:
 
-这是 ColaMD 的第一原则。每增加一个 UI 元素、一个功能、一行代码，都要问：这是绝对必要的吗？默认答案是否。
+```
+Main Process (src/main/index.ts)
+  Node.js APIs: fs.watch, dialog, shell, Menu
+  Responsibilities: window lifecycle, file I/O, file watching, agent detection,
+                    menus, PDF/HTML export, custom theme storage
+        ↕ IPC (ipcMain / ipcRenderer)
+Preload (src/preload/index.ts)
+  contextBridge.exposeInMainWorld → window.electronAPI
+  Defines typed ElectronAPI interface (invoke + event listener patterns)
+        ↕
+Renderer (src/renderer/)
+  Plain TypeScript, no React/Vue — Milkdown IS the UI
+  main.ts → wires IPC events to editor actions
+  editor/editor.ts → Milkdown setup (commonmark, gfm, history, listener, clipboard)
+  editor/html-view.ts → custom inline HTML node view
+  themes/base.css → ALL CSS: reset, layout, 4 built-in themes (via CSS custom properties)
+  themes/theme-manager.ts → theme switching & localStorage persistence
+```
 
-- 不要工具栏（用户会用快捷键和 Markdown 语法）
-- 不要侧边栏
-- 不要状态栏
-- 界面只有：标题栏（拖拽用）+ 编辑器
-- 追求极致的简单，一个功能做到极致
+### Key Mechanism: File Hot Update (Core Feature)
 
-### 核心功能优先级
+The main process uses `fs.watch()` on the open file. When external changes are detected:
 
-1. **文件热更新**（核心卖点）— 外部 Agent 修改 .md 时自动刷新，实时看到 Agent 的工作
-2. **所见即所得** — 输入 Markdown 即刻渲染为富文本
-3. **主题系统** — CSS 主题，可导入自定义主题
-4. **导出** — PDF、HTML
+1. Check `isInternalSave` flag — if true (our own save within 100ms), ignore to prevent feedback loops
+2. Agent activity state machine: `idle` → `active` (rapid writes, gap < 2s) → `cooldown` (3s after last write) → `idle` (2s later). Visual feedback via CSS animation on `#agent-dot`.
+3. Debounce 100ms → read file → send `file-changed` IPC to renderer → `setMarkdown()` replaces all content
 
-### 不做的事情
+Each BrowserWindow has independent `WindowState` (filePath, watcher, agent state). Opening a file already open in another window focuses that window instead.
 
-- 不做文件管理、文件树、工作区
-- 不做知识库管理
-- 不做云同步、协作编辑
-- 不做笔记组织和标签系统
-- 不加不必要的 UI 元素（工具栏、侧边栏等）
+### IPC Pattern
 
-## 技术栈
+- **Renderer → Main**: `ipcRenderer.invoke()` for request/response (openFile, saveFile, exportPDF, etc.)
+- **Main → Renderer**: `webContents.send()` for push events (file-changed, set-theme, agent-activity, menu-* actions)
+- All methods are typed via the `ElectronAPI` interface in `src/preload/index.ts`
 
-- Electron（桌面跨平台）
-- Milkdown（基于 ProseMirror 的 WYSIWYG Markdown 框架）
-- TypeScript 严格模式
-- electron-vite（构建）
-- electron-builder（打包）
+### Theme System
 
-## 项目结构
+- Built-in themes: `light`, `dark`, `elegant` (default), `newsprint` — switched by CSS class on `<body>`
+- Custom themes: stored as `.css` files in `~/.colamd/themes/`, injected via `<style>` element
+- Theme variables: `--bg-color`, `--text-color`, `--text-muted`, `--border-color`, `--link-color`, `--code-bg`, `--code-block-bg`, `--code-block-text`, `--blockquote-border`, `--blockquote-bg`, `--table-header-bg`, `--selection-bg`
+- Menu is rebuilt when custom themes change (scans themes dir synchronously)
 
-```
-src/
-├── main/           # Electron 主进程
-│   └── index.ts    # 窗口管理、文件 I/O、菜单、文件监听
-├── preload/        # 安全 IPC 桥接
-│   └── index.ts
-└── renderer/       # 渲染进程
-    ├── index.html
-    ├── main.ts     # 入口，连接编辑器和 IPC
-    ├── editor/     # Milkdown 编辑器核心
-    ├── themes/     # CSS 主题 + 主题管理器
-    └── env.d.ts
-```
+### Export
+
+- **PDF**: `win.webContents.printToPDF()` — temporarily injects CSS to expand editor to full content height
+- **HTML**: Renderer constructs standalone HTML with embedded theme CSS from computed styles, main process writes to disk
+
+## Design Principles
+
+**"如非必要，勿增实体"** — Do not add entities unless necessary. Every new UI element, feature, or line of code must justify itself. Default answer is no.
+
+No toolbars, sidebars, status bars. UI is title bar + editor only.
+
+Core priorities in order: file hot update → WYSIWYG → themes → export.
+
+Things explicitly NOT done: file management, knowledge base, cloud sync, collaborative editing, note organization.
 
-## 开发规范
+## Development Notes
 
-- TypeScript 严格模式
-- 编辑器核心与 UI 解耦
-- 主题 CSS 与编辑器逻辑完全分离
-- 代码简洁，不过度设计
-- 每个新功能先问：这是必要的吗？
+- TypeScript strict mode (`tsconfig.json` base, 3 project references for main/preload/renderer)
+- Main process is a single file (`src/main/index.ts`, ~450 lines). Keep it that way — simplicity is the point.
+- Renderer has no framework. Milkdown (ProseMirror-based) is the entire UI.
+- Only 2 runtime dependencies: `@milkdown/kit` and `remark-breaks`
+- Security: `contextIsolation: true`, `nodeIntegration: false`, CSP header in index.html
+- Custom themes dir: `~/.colamd/themes/` — auto-created on startup
diff --git a/package.json b/package.json
index d06e691..258040d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "scripts": {
     "dev": "electron-vite dev",
     "build": "electron-vite build",
+    "typecheck": "tsc -p tsconfig.main.json --noEmit && tsc -p tsconfig.preload.json --noEmit && tsc -p tsconfig.renderer.json --noEmit",
     "preview": "electron-vite preview",
     "dist": "electron-vite build && electron-builder",
     "dist:mac": "electron-vite build && electron-builder --mac",
diff --git a/src/main/index.ts b/src/main/index.ts
index c91af97..f66d0a1 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,24 +1,32 @@
 import { app, BrowserWindow, ipcMain, dialog, Menu, shell } from 'electron'
 import { join, basename } from 'path'
-import { readFile, writeFile, readdir, copyFile, mkdir } from 'fs/promises'
-import { watch, FSWatcher, existsSync, readdirSync } from 'fs'
+import { readFile, writeFile, copyFile, mkdir, stat } from 'fs/promises'
+import { watch, FSWatcher, readdirSync } from 'fs'
 
 // Custom themes directory
+// Agent detection constants
+const AGENT_ACTIVE_GAP_MS = 2000
+const AGENT_COOLDOWN_MS = 3000
+const AGENT_IDLE_MS = 2000
+const FILE_DEBOUNCE_MS = 100
+const INTERNAL_SAVE_SUPPRESS_MS = 250
+
 const themesDir = join(app.getPath('home'), '.colamd', 'themes')
+const MAX_OPEN_FILE_SIZE = 5 * 1024 * 1024 // 5MB
 
-function ensureThemesDir(): void {
-  if (!existsSync(themesDir)) {
-    mkdir(themesDir, { recursive: true }).catch(() => {})
-  }
+async function readTextDocument(filePath: string): Promise<string> {
+  const info = await stat(filePath)
+  if (!info.isFile()) throw new Error('Not a regular file')
+  if (info.size > MAX_OPEN_FILE_SIZE) throw new Error('File too large for live sync')
+  return readFile(filePath, 'utf-8')
 }
 
-async function scanCustomThemes(): Promise<string[]> {
-  try {
-    const files = await readdir(themesDir)
-    return files.filter(f => f.endsWith('.css')).sort()
-  } catch {
-    return []
-  }
+async function ensureThemesDir(): Promise<void> {
+  await mkdir(themesDir, { recursive: true })
+}
+
+interface AppErrorPayload {
+  message: string
 }
 
 // Per-window state
@@ -48,6 +56,39 @@ function getWinFromEvent(event: Electron.IpcMainInvokeEvent): BrowserWindow | nu
   return BrowserWindow.fromWebContents(event.sender)
 }
 
+function sendError(win: BrowserWindow, message: string): void {
+  if (!win.isDestroyed()) {
+    win.webContents.send('app-error', { message } satisfies AppErrorPayload)
+  }
+}
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+
+function formatReadError(error: unknown): string {
+  const message = getErrorMessage(error, 'Could not open file.')
+  if (message === 'Not a regular file') return 'Only regular text files can be opened.'
+  if (message === 'File too large for live sync') return 'This file is too large for live sync.'
+  if ((error as NodeJS.ErrnoException | undefined)?.code === 'ENOENT') return 'The file no longer exists.'
+  if ((error as NodeJS.ErrnoException | undefined)?.code === 'EACCES') return 'You do not have permission to open this file.'
+  return 'Could not open this file as UTF-8 text.'
+}
+
+async function openDocumentInWindow(win: BrowserWindow, filePath: string): Promise<{ path: string; content: string } | null> {
+  try {
+    const content = await readTextDocument(filePath)
+    const state = getState(win)
+    state.filePath = filePath
+    watchFile(win, state)
+    updateTitle(win)
+    return { path: filePath, content }
+  } catch (error) {
+    sendError(win, formatReadError(error))
+    return null
+  }
+}
+
 function createWindow(filePath?: string): BrowserWindow {
   const win = new BrowserWindow({
     width: 960,
@@ -60,7 +101,7 @@ function createWindow(filePath?: string): BrowserWindow {
       preload: join(__dirname, '../preload/index.js'),
       contextIsolation: true,
       nodeIntegration: false,
-      sandbox: false
+      sandbox: true
     }
   })
 
@@ -74,7 +115,7 @@ function createWindow(filePath?: string): BrowserWindow {
 
   win.webContents.on('did-finish-load', () => {
     if (filePath) {
-      loadFileInWindow(win, filePath)
+      void loadFileInWindow(win, filePath)
     }
   })
 
@@ -108,6 +149,10 @@ function stopWatching(state: WindowState): void {
     state.watcher.close()
     state.watcher = null
   }
+  if (state.debounceTimer) {
+    clearTimeout(state.debounceTimer)
+    state.debounceTimer = null
+  }
   if (state.agentCooldownTimer) {
     clearTimeout(state.agentCooldownTimer)
     state.agentCooldownTimer = null
@@ -130,13 +175,13 @@ function transitionAgentState(win: BrowserWindow, state: WindowState, newState:
     // Reset cooldown timer — 3s after last write
     state.agentCooldownTimer = setTimeout(() => {
       transitionAgentState(win, state, 'cooldown')
-    }, 3000)
+    }, AGENT_COOLDOWN_MS)
   } else if (newState === 'cooldown') {
     state.agentState = 'cooldown'
     if (!win.isDestroyed()) win.webContents.send('agent-activity', 'cooldown')
     state.agentCooldownTimer = setTimeout(() => {
       transitionAgentState(win, state, 'idle')
-    }, 2000)
+    }, AGENT_IDLE_MS)
   } else {
     state.agentState = 'idle'
     if (!win.isDestroyed()) win.webContents.send('agent-activity', 'idle')
@@ -147,40 +192,78 @@ function watchFile(win: BrowserWindow, state: WindowState): void {
   if (!state.filePath) return
   stopWatching(state)
   const filePath = state.filePath
-  state.watcher = watch(filePath, (eventType) => {
-    if (eventType !== 'change' || state.isInternalSave) return
-
-    // Agent activity detection
-    const now = Date.now()
-    const gap = now - state.lastExternalChange
-    state.lastExternalChange = now
-    if (gap > 0 && gap < 2000) {
-      transitionAgentState(win, state, 'active')
-    } else if (state.agentState === 'active') {
-      transitionAgentState(win, state, 'active') // reset cooldown timer
-    }
+  try {
+    state.watcher = watch(filePath, { persistent: false }, (eventType) => {
+      if (state.isInternalSave) return
+
+      // Handle rename (atomic saves from editors like vim)
+      if (eventType === 'rename') {
+        // Close watcher without resetting agent state
+        if (state.watcher) {
+          state.watcher.close()
+          state.watcher = null
+        }
+        if (state.debounceTimer) {
+          clearTimeout(state.debounceTimer)
+          state.debounceTimer = null
+        }
+        // Re-read immediately since atomic save replaced the file
+        setTimeout(() => {
+          watchFile(win, state)
+          readTextDocument(filePath)
+            .then((data) => {
+              if (!win.isDestroyed()) win.webContents.send('file-changed', data)
+            })
+            .catch((error) => {
+              console.error('[watchFile] rename read error:', error)
+            })
+        }, 50)
+        return
+      }
+
+      if (eventType !== 'change') return
+
+      // Agent activity detection
+      const now = Date.now()
+      const gap = now - state.lastExternalChange
+      state.lastExternalChange = now
+      if (gap > 0 && gap < AGENT_ACTIVE_GAP_MS) {
+        transitionAgentState(win, state, 'active')
+      } else if (state.agentState === 'active') {
+        transitionAgentState(win, state, 'active')
+      }
+
+      if (state.debounceTimer) clearTimeout(state.debounceTimer)
+      state.debounceTimer = setTimeout(() => {
+        readTextDocument(filePath)
+          .then((data) => {
+            if (!win.isDestroyed()) win.webContents.send('file-changed', data)
+          })
+          .catch((error) => {
+            console.error('[watchFile] read error:', error)
+            sendError(win, formatReadError(error))
+          })
+      }, FILE_DEBOUNCE_MS)
+    })
+  } catch (error) {
+    console.error('[watchFile] watch error:', error)
+    stopWatching(state)
+    setTimeout(() => watchFile(win, state), 500)
+    return
+  }
 
-    if (state.debounceTimer) clearTimeout(state.debounceTimer)
-    state.debounceTimer = setTimeout(() => {
-      readFile(filePath, 'utf-8')
-        .then((data) => {
-          if (!win.isDestroyed()) win.webContents.send('file-changed', data)
-        })
-        .catch(() => {})
-    }, 100)
+  state.watcher.on('error', (error) => {
+    console.error('[watchFile] watcher error:', error)
+    stopWatching(state)
+    setTimeout(() => watchFile(win, state), 500)
   })
 }
 
-function loadFileInWindow(win: BrowserWindow, filePath: string): void {
-  readFile(filePath, 'utf-8')
-    .then((data) => {
-      const state = getState(win)
-      state.filePath = filePath
-      watchFile(win, state)
-      updateTitle(win)
-      win.webContents.send('file-opened', { path: filePath, content: data })
-    })
-    .catch(() => {})
+async function loadFileInWindow(win: BrowserWindow, filePath: string): Promise<void> {
+  const result = await openDocumentInWindow(win, filePath)
+  if (result && !win.isDestroyed()) {
+    win.webContents.send('file-opened', result)
+  }
 }
 
 // Find window that already has this file open
@@ -205,7 +288,7 @@ function openFile(filePath: string): void {
   // Find an untitled empty window to reuse
   const emptyWin = findEmptyWindow()
   if (emptyWin) {
-    loadFileInWindow(emptyWin, filePath)
+    void loadFileInWindow(emptyWin, filePath)
     emptyWin.focus()
     return
   }
@@ -233,10 +316,11 @@ async function saveToPath(win: BrowserWindow, filePath: string, content: string)
     watchFile(win, state)
     updateTitle(win)
     return true
-  } catch {
+  } catch (error) {
+    sendError(win, getErrorMessage(error, 'Could not save file.'))
     return false
   } finally {
-    setTimeout(() => { state.isInternalSave = false }, 100)
+    setTimeout(() => { state.isInternalSave = false }, INTERNAL_SAVE_SUPPRESS_MS)
   }
 }
 
@@ -266,15 +350,7 @@ ipcMain.handle('open-file', async (event) => {
   // If this window has no file, load here; otherwise open in new window
   const state = getState(win)
   if (!state.filePath) {
-    try {
-      const content = await readFile(filePath, 'utf-8')
-      state.filePath = filePath
-      watchFile(win, state)
-      updateTitle(win)
-      return { path: filePath, content }
-    } catch {
-      return null
-    }
+    return openDocumentInWindow(win, filePath)
   } else {
     openFile(filePath)
     return null
@@ -283,20 +359,12 @@ ipcMain.handle('open-file', async (event) => {
 
 ipcMain.handle('open-file-path', async (event, filePath: string) => {
   const win = getWinFromEvent(event)
-  if (!win) return null
+  if (!win || typeof filePath !== 'string' || !filePath) return null
   const state = getState(win)
 
   // If this window has no file, load here
   if (!state.filePath) {
-    try {
-      const content = await readFile(filePath, 'utf-8')
-      state.filePath = filePath
-      watchFile(win, state)
-      updateTitle(win)
-      return { path: filePath, content }
-    } catch {
-      return null
-    }
+    return openDocumentInWindow(win, filePath)
   } else {
     openFile(filePath)
     return null
@@ -305,7 +373,7 @@ ipcMain.handle('open-file-path', async (event, filePath: string) => {
 
 ipcMain.handle('save-file', async (event, content: string) => {
   const win = getWinFromEvent(event)
-  if (!win) return false
+  if (!win || typeof content !== 'string') return false
   const state = getState(win)
   if (!state.filePath) {
     const result = await dialog.showSaveDialog(win, {
@@ -323,7 +391,7 @@ ipcMain.handle('save-file', async (event, content: string) => {
 
 ipcMain.handle('save-file-as', async (event, content: string) => {
   const win = getWinFromEvent(event)
-  if (!win) return false
+  if (!win || typeof content !== 'string') return false
   const result = await dialog.showSaveDialog(win, {
     defaultPath: suggestFileName(win, content),
     filters: [
@@ -344,27 +412,31 @@ ipcMain.handle('export-pdf', async (event) => {
   })
   if (result.canceled || !result.filePath) return false
 
+  let cssKey: string | null = null
   try {
     // Expand editor to full content height for printing
-    const cssKey = await win.webContents.insertCSS(
+    cssKey = await win.webContents.insertCSS(
       'html, body { height: auto !important; overflow: visible !important; } #titlebar { display: none !important; } #editor { height: auto !important; overflow: visible !important; } #editor .ProseMirror { min-height: auto !important; }'
     )
     const pdfData = await win.webContents.printToPDF({
-      marginType: 0,
       printBackground: true,
       pageSize: 'A4'
     })
-    await win.webContents.removeInsertedCSS(cssKey)
     await writeFile(result.filePath, pdfData)
     return true
-  } catch {
+  } catch (error) {
+    sendError(win, getErrorMessage(error, 'Could not export PDF.'))
     return false
+  } finally {
+    if (cssKey) {
+      try { await win.webContents.removeInsertedCSS(cssKey) } catch { /* ignore cleanup failure */ }
+    }
   }
 })
 
 ipcMain.handle('export-html', async (event, htmlContent: string) => {
   const win = getWinFromEvent(event)
-  if (!win) return false
+  if (!win || typeof htmlContent !== 'string') return false
   const result = await dialog.showSaveDialog(win, {
     defaultPath: suggestFileName(win),
     filters: [{ name: 'HTML', extensions: ['html'] }]
@@ -374,7 +446,8 @@ ipcMain.handle('export-html', async (event, htmlContent: string) => {
   try {
     await writeFile(result.filePath, htmlContent, 'utf-8')
     return true
-  } catch {
+  } catch (error) {
+    sendError(win, getErrorMessage(error, 'Could not export HTML.'))
     return false
   }
 })
@@ -389,6 +462,7 @@ ipcMain.handle('load-custom-theme', async (event) => {
   if (result.canceled || result.filePaths.length === 0) return null
 
   try {
+    await ensureThemesDir()
     const srcPath = result.filePaths[0]
     const fileName = basename(srcPath)
     const destPath = join(themesDir, fileName)
@@ -396,15 +470,25 @@ ipcMain.handle('load-custom-theme', async (event) => {
     const css = await readFile(destPath, 'utf-8')
     buildMenu() // rebuild menu to include new theme
     return { name: fileName, css }
-  } catch {
+  } catch (error) {
+    sendError(win, getErrorMessage(error, 'Could not import theme.'))
     return null
   }
 })
 
-ipcMain.handle('load-theme-css', async (_event, fileName: string) => {
+function resolveThemePath(fileName: string): string | null {
+  if (!fileName.endsWith('.css') || basename(fileName) !== fileName || fileName.includes('..')) return null
+  return join(themesDir, fileName)
+}
+
+ipcMain.handle('load-theme-css', async (event, fileName: string) => {
+  const win = getWinFromEvent(event)
   try {
-    return await readFile(join(themesDir, fileName), 'utf-8')
-  } catch {
+    const themePath = resolveThemePath(fileName)
+    if (!themePath) return null
+    return await readFile(themePath, 'utf-8')
+  } catch (error) {
+    if (win) sendError(win, getErrorMessage(error, 'Could not load theme CSS.'))
     return null
   }
 })
@@ -431,11 +515,14 @@ function buildMenu(): void {
       customThemeItems.push({
         label: file.replace(/\.css$/, ''),
         click: async () => {
+          const win = getFocusedWindow()
           try {
             const css = await readFile(join(themesDir, file), 'utf-8')
             sendToFocused('set-theme', `custom:${file}`)
             sendToFocused('set-custom-css', css)
-          } catch { /* ignore */ }
+          } catch (error) {
+            if (win) sendError(win, getErrorMessage(error, 'Could not load theme CSS.'))
+          }
         }
       })
     }
@@ -547,8 +634,8 @@ function buildMenu(): void {
 
 // App lifecycle
 
-app.whenReady().then(() => {
-  ensureThemesDir()
+app.whenReady().then(async () => {
+  await ensureThemesDir()
   buildMenu()
 
   // Check command line args for file paths
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 79a793c..f5ea6e7 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,5 +1,13 @@
 import { contextBridge, ipcRenderer, webUtils } from 'electron'
 
+type Unsubscribe = () => void
+
+function on<T>(channel: string, callback: (payload: T) => void): Unsubscribe {
+  const listener = (_event: Electron.IpcRendererEvent, payload: T) => callback(payload)
+  ipcRenderer.on(channel, listener)
+  return () => ipcRenderer.removeListener(channel, listener)
+}
+
 export interface ElectronAPI {
   openFile: () => Promise<{ path: string; content: string } | null>
   openFilePath: (path: string) => Promise<{ path: string; content: string } | null>
@@ -11,18 +19,19 @@ export interface ElectronAPI {
   loadThemeCSS: (fileName: string) => Promise<string | null>
   getPathForFile: (file: File) => string
   openExternal: (url: string) => void
-  onFileChanged: (callback: (content: string) => void) => void
-  onNewFile: (callback: () => void) => void
-  onFileOpened: (callback: (data: { path: string; content: string }) => void) => void
-  onMenuOpen: (callback: () => void) => void
-  onMenuSave: (callback: () => void) => void
-  onMenuSaveAs: (callback: () => void) => void
-  onMenuExportPDF: (callback: () => void) => void
-  onMenuExportHTML: (callback: () => void) => void
-  onSetTheme: (callback: (theme: string) => void) => void
-  onSetCustomCSS: (callback: (css: string) => void) => void
-  onMenuImportTheme: (callback: () => void) => void
-  onAgentActivity: (callback: (state: string) => void) => void
+  onAppError: (callback: (payload: { message: string }) => void) => Unsubscribe
+  onFileChanged: (callback: (content: string) => void) => Unsubscribe
+  onNewFile: (callback: () => void) => Unsubscribe
+  onFileOpened: (callback: (data: { path: string; content: string }) => void) => Unsubscribe
+  onMenuOpen: (callback: () => void) => Unsubscribe
+  onMenuSave: (callback: () => void) => Unsubscribe
+  onMenuSaveAs: (callback: () => void) => Unsubscribe
+  onMenuExportPDF: (callback: () => void) => Unsubscribe
+  onMenuExportHTML: (callback: () => void) => Unsubscribe
+  onSetTheme: (callback: (theme: string) => void) => Unsubscribe
+  onSetCustomCSS: (callback: (css: string) => void) => Unsubscribe
+  onMenuImportTheme: (callback: () => void) => Unsubscribe
+  onAgentActivity: (callback: (state: string) => void) => Unsubscribe
 }
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -36,40 +45,17 @@ contextBridge.exposeInMainWorld('electronAPI', {
   loadThemeCSS: (fileName: string) => ipcRenderer.invoke('load-theme-css', fileName),
   getPathForFile: (file: File) => webUtils.getPathForFile(file),
   openExternal: (url: string) => ipcRenderer.send('open-external', url),
-  onFileChanged: (callback: (content: string) => void) => {
-    ipcRenderer.on('file-changed', (_event, content) => callback(content))
-  },
-  onNewFile: (callback: () => void) => {
-    ipcRenderer.on('new-file', () => callback())
-  },
-  onFileOpened: (callback: (data: { path: string; content: string }) => void) => {
-    ipcRenderer.on('file-opened', (_event, data) => callback(data))
-  },
-  onMenuOpen: (callback: () => void) => {
-    ipcRenderer.on('menu-open', () => callback())
-  },
-  onMenuSave: (callback: () => void) => {
-    ipcRenderer.on('menu-save', () => callback())
-  },
-  onMenuSaveAs: (callback: () => void) => {
-    ipcRenderer.on('menu-save-as', () => callback())
-  },
-  onMenuExportPDF: (callback: () => void) => {
-    ipcRenderer.on('menu-export-pdf', () => callback())
-  },
-  onMenuExportHTML: (callback: () => void) => {
-    ipcRenderer.on('menu-export-html', () => callback())
-  },
-  onSetTheme: (callback: (theme: string) => void) => {
-    ipcRenderer.on('set-theme', (_event, theme) => callback(theme))
-  },
-  onSetCustomCSS: (callback: (css: string) => void) => {
-    ipcRenderer.on('set-custom-css', (_event, css) => callback(css))
-  },
-  onMenuImportTheme: (callback: () => void) => {
-    ipcRenderer.on('menu-import-theme', () => callback())
-  },
-  onAgentActivity: (callback: (state: string) => void) => {
-    ipcRenderer.on('agent-activity', (_event, state) => callback(state))
-  }
+  onAppError: (callback) => on('app-error', callback),
+  onFileChanged: (callback) => on('file-changed', callback),
+  onNewFile: (callback) => on('new-file', callback),
+  onFileOpened: (callback) => on('file-opened', callback),
+  onMenuOpen: (callback) => on('menu-open', callback),
+  onMenuSave: (callback) => on('menu-save', callback),
+  onMenuSaveAs: (callback) => on('menu-save-as', callback),
+  onMenuExportPDF: (callback) => on('menu-export-pdf', callback),
+  onMenuExportHTML: (callback) => on('menu-export-html', callback),
+  onSetTheme: (callback) => on('set-theme', callback),
+  onSetCustomCSS: (callback) => on('set-custom-css', callback),
+  onMenuImportTheme: (callback) => on('menu-import-theme', callback),
+  onAgentActivity: (callback) => on('agent-activity', callback)
 } satisfies ElectronAPI)
diff --git a/src/renderer/editor/editor.ts b/src/renderer/editor/editor.ts
index c8d69be..2959eb1 100644
--- a/src/renderer/editor/editor.ts
+++ b/src/renderer/editor/editor.ts
@@ -12,6 +12,8 @@ import { htmlView } from './html-view'
 import '@milkdown/kit/prose/view/style/prosemirror.css'
 
 let editorInstance: Editor | null = null
+let previousNodeTexts: string[] = []
+let diffFadeoutTimer: ReturnType<typeof setTimeout> | null = null
 
 const inlineStyles: Record<string, string> = {
   'h1': 'font-size:1.8em;font-weight:700;margin:1em 0 .5em;padding-bottom:.3em;border-bottom:1px solid #eee;',
@@ -48,7 +50,6 @@ function enhanceClipboard(e: ClipboardEvent): void {
     })
   }
 
-  // pre > code: override code style inside code blocks
   doc.querySelectorAll('pre code').forEach((el) => {
     ;(el as HTMLElement).setAttribute('style', 'background:none;padding:0;font-size:.875em;line-height:1.6;font-family:Menlo,Monaco,monospace;')
   })
@@ -61,6 +62,52 @@ const defaultContent = `# Welcome to ColaMD
 Start typing here...
 `
 
+// --- Agent Diff View ---
+
+function snapshotNodes(root: HTMLElement): string[] {
+  const pm = root.querySelector('.ProseMirror')
+  if (!pm) return []
+  const texts: string[] = []
+  for (const child of pm.children) {
+    texts.push(child.textContent || '')
+  }
+  return texts
+}
+
+function applyDiffHighlight(root: HTMLElement): void {
+  if (previousNodeTexts.length === 0) return
+  const pm = root.querySelector('.ProseMirror')
+  if (!pm) return
+
+  const children = Array.from(pm.children)
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i] as HTMLElement
+    const currentText = node.textContent || ''
+    const prevText = i < previousNodeTexts.length ? previousNodeTexts[i] : null
+
+    if (prevText === null || currentText !== prevText) {
+      node.classList.add('agent-diff-added')
+    }
+  }
+
+  scheduleDiffFadeout(root)
+}
+
+function scheduleDiffFadeout(root: HTMLElement): void {
+  if (diffFadeoutTimer) clearTimeout(diffFadeoutTimer)
+  diffFadeoutTimer = setTimeout(() => {
+    root.querySelectorAll('.agent-diff-added').forEach((el) => {
+      el.classList.add('agent-diff-fadeout')
+      el.addEventListener('animationend', () => {
+        el.classList.remove('agent-diff-added', 'agent-diff-fadeout')
+      }, { once: true })
+    })
+    diffFadeoutTimer = null
+  }, 5000)
+}
+
+// --- Editor ---
+
 export async function createEditor(
   rootId: string,
   onChange?: (markdown: string) => void
@@ -72,7 +119,7 @@ export async function createEditor(
     .config((ctx) => {
       ctx.set(rootCtx, root)
       ctx.set(defaultValueCtx, defaultContent)
-      ctx.set(remarkPluginsCtx, [{ plugin: remarkBreaks, options: undefined }])
+      ctx.set(remarkPluginsCtx, [{ plugin: remarkBreaks, options: {} }])
       if (onChange) {
         ctx.get(listenerCtx).markdownUpdated((_ctx, markdown) => {
           onChange(markdown)
@@ -87,11 +134,11 @@ export async function createEditor(
     .use(htmlView)
     .create()
 
-  // Enhance clipboard with inline styles for rich text paste (e.g. WeChat)
+  // Enhance clipboard with inline styles for rich text paste
   root.addEventListener('copy', enhanceClipboard)
   root.addEventListener('cut', enhanceClipboard)
 
-  // Cmd+click (Mac) / Ctrl+click (Win/Linux) to open links in browser
+  // Cmd+click to open links
   root.addEventListener('click', (e) => {
     if (!(e.metaKey || e.ctrlKey)) return
     const link = (e.target as HTMLElement).closest('a')
@@ -130,7 +177,17 @@ export function getHTML(): string {
   return html
 }
 
-export function setMarkdown(content: string): void {
+export function setMarkdown(content: string, showDiff: boolean = false): void {
   if (!editorInstance) return
+  const root = document.getElementById('editor')
+
+  if (showDiff && root) {
+    previousNodeTexts = snapshotNodes(root)
+  }
+
   editorInstance.action(replaceAll(content))
+
+  if (showDiff && root) {
+    requestAnimationFrame(() => applyDiffHighlight(root))
+  }
 }
diff --git a/src/renderer/editor/html-view.ts b/src/renderer/editor/html-view.ts
index 88b2ec2..4cc3dce 100644
--- a/src/renderer/editor/html-view.ts
+++ b/src/renderer/editor/html-view.ts
@@ -1,12 +1,14 @@
 import { $view } from '@milkdown/kit/utils'
 import { htmlSchema } from '@milkdown/kit/preset/commonmark'
 import type { NodeViewConstructor } from '@milkdown/kit/prose/view'
+import { sanitizeHTMLFragment } from './sanitize'
 
 export const htmlView = $view(htmlSchema.node, (): NodeViewConstructor => {
   return (node) => {
     const dom = document.createElement('span')
     dom.classList.add('milkdown-html-inline')
-    dom.innerHTML = node.attrs.value as string
+    const rawHtml = typeof node.attrs.value === 'string' ? node.attrs.value : ''
+    dom.innerHTML = sanitizeHTMLFragment(rawHtml)
     return {
       dom,
       stopEvent: () => true
diff --git a/src/renderer/editor/sanitize.ts b/src/renderer/editor/sanitize.ts
new file mode 100644
index 0000000..47df271
--- /dev/null
+++ b/src/renderer/editor/sanitize.ts
@@ -0,0 +1,93 @@
+const ALLOWED_HTML_TAGS = new Set([
+  'kbd', 'mark', 'sub', 'sup', 'br', 'hr', 'abbr', 'del', 'ins',
+  'span', 'div', 'details', 'summary', 'small', 'strong', 'em',
+  'code', 'pre', 'b', 'i', 'u', 's', 'table', 'thead', 'tbody',
+  'tr', 'th', 'td', 'blockquote', 'ul', 'ol', 'li', 'p', 'a',
+  'img', 'figure', 'figcaption', 'ruby', 'rt', 'rp'
+])
+
+const GLOBAL_ALLOWED_ATTRS = new Set([
+  'title', 'class', 'role', 'lang', 'dir', 'aria-label', 'aria-hidden'
+])
+
+const TAG_ALLOWED_ATTRS: Record<string, Set<string>> = {
+  a: new Set(['href', 'target', 'rel']),
+  img: new Set(['src', 'alt', 'width', 'height']),
+  td: new Set(['colspan', 'rowspan', 'align']),
+  th: new Set(['colspan', 'rowspan', 'align']),
+  ol: new Set(['start']),
+  details: new Set(['open'])
+}
+
+const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:'])
+
+function isSafeUrl(tagName: string, attrName: string, value: string): boolean {
+  const trimmed = value.trim()
+  if (!trimmed) return false
+
+  if (trimmed.startsWith('#') || trimmed.startsWith('/')) return true
+  if (trimmed.startsWith('./') || trimmed.startsWith('../')) return true
+  if (tagName === 'img' && attrName === 'src' && /^data:image\/[a-z0-9.+-]+;base64,/i.test(trimmed)) return true
+  if (tagName === 'img' && attrName === 'src' && trimmed.startsWith('blob:')) return true
+
+  try {
+    const parsed = new URL(trimmed, 'https://colamd.local')
+    return SAFE_PROTOCOLS.has(parsed.protocol)
+  } catch {
+    return false
+  }
+}
+
+function shouldKeepAttribute(tagName: string, attrName: string, value: string): boolean {
+  if (attrName.startsWith('on') || attrName === 'style') return false
+  if (attrName.startsWith('aria-')) return true
+  if (GLOBAL_ALLOWED_ATTRS.has(attrName)) return true
+  if (attrName === 'href' || attrName === 'src') return isSafeUrl(tagName, attrName, value)
+  return TAG_ALLOWED_ATTRS[tagName]?.has(attrName) ?? false
+}
+
+export function sanitizeHTMLFragment(raw: string): string {
+  const doc = new DOMParser().parseFromString(raw, 'text/html')
+
+  const walk = (node: Element): void => {
+    for (const attr of Array.from(node.attributes)) {
+      const attrName = attr.name.toLowerCase()
+      if (!shouldKeepAttribute(node.tagName.toLowerCase(), attrName, attr.value)) {
+        node.removeAttribute(attr.name)
+      }
+    }
+
+    if (node.tagName.toLowerCase() === 'a' && node.getAttribute('target') === '_blank') {
+      node.setAttribute('rel', 'noopener noreferrer')
+    }
+
+    // Collect promoted children before processing so we can recurse into them
+    const promoted: Element[] = []
+    for (const child of Array.from(node.children)) {
+      const tagName = child.tagName.toLowerCase()
+      if (!ALLOWED_HTML_TAGS.has(tagName)) {
+        // collect childNodes BEFORE replaceWith mutates the DOM
+        const childNodes = Array.from(child.childNodes)
+        promoted.push(...Array.from(childNodes).filter((n): n is Element => n instanceof Element))
+        child.replaceWith(...childNodes)
+      } else {
+        walk(child)
+      }
+    }
+    // Walk promoted elements so their attributes are also sanitized
+    for (const el of promoted) {
+      // Check if the promoted element's own tag is allowed, otherwise strip it too
+      if (ALLOWED_HTML_TAGS.has(el.tagName.toLowerCase())) {
+        walk(el)
+      } else {
+        // Strip disallowed tag but promote its children for further processing
+        const childNodes = Array.from(el.childNodes)
+        el.replaceWith(...childNodes)
+        promoted.push(...Array.from(childNodes).filter((n): n is Element => n instanceof Element))
+      }
+    }
+  }
+
+  walk(doc.body)
+  return doc.body.innerHTML
+}
diff --git a/src/renderer/index.html b/src/renderer/index.html
index c457486..dbf521a 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -3,11 +3,24 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: blob: https: http:;">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-src 'none'">
   <title>ColaMD</title>
 </head>
 <body>
-  <div id="titlebar"><div id="agent-dot"></div></div>
+  <div id="titlebar">
+    <div id="agent-meta">
+      <div id="agent-dot"></div>
+      <span id="agent-status">Waiting for agent activity</span>
+      <button id="agent-panel-toggle" type="button" aria-expanded="false">Recent Changes</button>
+    </div>
+  </div>
+  <aside id="agent-panel" hidden>
+    <div id="agent-panel-header">
+      <strong>Recent Agent Changes</strong>
+      <span id="agent-summary">No external updates yet</span>
+    </div>
+    <ol id="agent-change-list"></ol>
+  </aside>
   <div id="editor"></div>
   <script type="module" src="./main.ts"></script>
 </body>
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 5d5ecf9..70209a8 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -1,12 +1,312 @@
-import { createEditor, getMarkdown, getHTML, setMarkdown } from './editor/editor'
+import { sanitizeHTMLFragment } from './editor/sanitize'
 import { applyTheme, loadSavedTheme } from './themes/theme-manager'
 import './themes/base.css'
 
+function ensureErrorToast(): HTMLElement {
+  let toast = document.getElementById('error-toast')
+  if (!toast) {
+    toast = document.createElement('div')
+    toast.id = 'error-toast'
+    document.body.appendChild(toast)
+  }
+  return toast
+}
+
+let errorToastTimer: ReturnType<typeof setTimeout> | null = null
+
+function showError(message: string): void {
+  const toast = ensureErrorToast()
+  toast.textContent = message
+  toast.classList.add('visible')
+  if (errorToastTimer) clearTimeout(errorToastTimer)
+  errorToastTimer = setTimeout(() => {
+    toast.classList.remove('visible')
+    errorToastTimer = null
+  }, 4200)
+}
+
+interface AgentChangeEntry {
+  id: number
+  summary: string
+  timestamp: number
+  targetText: string | null
+}
+
+const MAX_AGENT_CHANGES = 5
+
+function formatRelativeTime(timestamp: number): string {
+  const diffMs = Date.now() - timestamp
+  if (diffMs < 10_000) return 'just now'
+  const diffSec = Math.floor(diffMs / 1000)
+  if (diffSec < 60) return `${diffSec}s ago`
+  const diffMin = Math.floor(diffSec / 60)
+  if (diffMin < 60) return `${diffMin}m ago`
+  const diffHour = Math.floor(diffMin / 60)
+  if (diffHour < 24) return `${diffHour}h ago`
+  const diffDay = Math.floor(diffHour / 24)
+  return `${diffDay}d ago`
+}
+
+function isHeadingLine(line: string): boolean {
+  return /^#{1,6}\s+/.test(line.trim())
+}
+
+function normalizeLine(line: string): string {
+  return line.trim()
+}
+
+function stripMarkdown(text: string): string {
+  return text
+    .replace(/!\[.*?\]\(.*?\)/g, '')       // images
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // links
+    .replace(/`{1,3}[^`]*`{1,3}/g, '')     // inline code and code blocks
+    .replace(/[*_]{1,2}([^*_]+)[*_]{1,2}/g, '$1') // bold and italic
+    .replace(/^#{1,6}\s+/gm, '')           // headings
+    .replace(/^[-*+]\s+/gm, '')            // unordered list markers
+    .replace(/^\d+\.\s+/gm, '')            // ordered list markers
+    .replace(/^>\s+/gm, '')                 // blockquotes
+    .replace(/^---$/gm, '')                 // horizontal rules
+    .replace(/\|[^|\n]+/g, '')             // table cells
+    .trim()
+}
+
+function countLineOccurrences(lines: string[]): Map<string, number> {
+  const counts = new Map<string, number>()
+  for (const line of lines) {
+    counts.set(line, (counts.get(line) ?? 0) + 1)
+  }
+  return counts
+}
+
+function collectLineDiff(previousLines: string[], nextLines: string[]): { added: string[]; removed: string[] } {
+  const previousCounts = countLineOccurrences(previousLines)
+  const nextCounts = countLineOccurrences(nextLines)
+  const added: string[] = []
+  const removed: string[] = []
+
+  for (const line of nextLines) {
+    const count = previousCounts.get(line) ?? 0
+    if (count > 0) {
+      previousCounts.set(line, count - 1)
+    } else {
+      added.push(line)
+    }
+  }
+
+  for (const line of previousLines) {
+    const count = nextCounts.get(line) ?? 0
+    if (count > 0) {
+      nextCounts.set(line, count - 1)
+    } else {
+      removed.push(line)
+    }
+  }
+
+  return { added, removed }
+}
+
+function findFirstChangedLineIndex(previousLines: string[], nextLines: string[]): number {
+  const max = Math.max(previousLines.length, nextLines.length)
+  for (let i = 0; i < max; i++) {
+    if ((previousLines[i] ?? '') !== (nextLines[i] ?? '')) return i
+  }
+  return -1
+}
+
+function findHeadingContext(lines: string[], changedIndex: number): string | null {
+  const safeIndex = Math.min(Math.max(changedIndex, 0), lines.length - 1)
+  for (let i = safeIndex; i >= 0; i--) {
+    const line = lines[i]?.trim() ?? ''
+    if (isHeadingLine(line)) return line.slice(0, 80)
+  }
+  return null
+}
+
+function buildChangeLabel(addedCount: number, removedCount: number): string {
+  if (addedCount > 0 && removedCount > 0) return 'Updated'
+  if (addedCount > 0) return 'Added'
+  if (removedCount > 0) return 'Removed'
+  return 'Reworked'
+}
+
+function formatLineDelta(addedCount: number, removedCount: number): string {
+  if (addedCount === 0 && removedCount === 0) return ''
+  if (addedCount > 0 && removedCount > 0) return ` (+${addedCount}/-${removedCount} lines)`
+  if (addedCount > 0) return ` (+${addedCount} lines)`
+  return ` (-${removedCount} lines)`
+}
+
+function analyzeAgentChange(previous: string, next: string): { summary: string; targetText: string | null } {
+  const previousLines = previous.split('\n').map(normalizeLine).filter(Boolean)
+  const nextLines = next.split('\n').map(normalizeLine).filter(Boolean)
+  const { added, removed } = collectLineDiff(previousLines, nextLines)
+  const changedIndex = findFirstChangedLineIndex(previousLines, nextLines)
+  const headingContext = findHeadingContext(nextLines, changedIndex >= 0 ? changedIndex : nextLines.length - 1)
+    ?? findHeadingContext(previousLines, changedIndex >= 0 ? changedIndex : previousLines.length - 1)
+  const label = buildChangeLabel(added.length, removed.length)
+  const lineDelta = formatLineDelta(added.length, removed.length)
+
+  if (headingContext) {
+    return {
+      summary: `${label} ${headingContext}${lineDelta}`,
+      targetText: stripMarkdown(headingContext)
+    }
+  }
+
+  const firstAdded = added.find((line) => !isHeadingLine(line))
+  if (firstAdded) {
+    return {
+      summary: `${label} paragraph: ${firstAdded.slice(0, 110)}${lineDelta}`,
+      targetText: stripMarkdown(firstAdded)
+    }
+  }
+
+  const firstRemoved = removed.find((line) => !isHeadingLine(line))
+  if (firstRemoved) {
+    return {
+      summary: `${label} paragraph: ${firstRemoved.slice(0, 110)}${lineDelta}`,
+      targetText: stripMarkdown(firstRemoved)
+    }
+  }
+
+  return {
+    summary: `Agent updated the document structure${lineDelta}`.trim(),
+    targetText: null
+  }
+}
+
 async function init(): Promise<void> {
   const api = window.electronAPI
+  let currentMarkdown = ''
+  let editorReady = false
+  let pendingOpenedContent: string | null = null
+  const pendingErrors: string[] = []
+  let getMarkdown = () => ''
+  let getHTML = () => ''
+  let setMarkdown = (_content: string, _showDiff?: boolean) => {}
+  let agentState: 'idle' | 'active' | 'cooldown' = 'idle'
+  let lastAgentUpdateAt: number | null = null
+  let agentUpdateCount = 0
+  let agentChangeId = 0
+  let agentChanges: AgentChangeEntry[] = []
   const savedTheme = loadSavedTheme()
   applyTheme(savedTheme)
 
+  const agentStatus = document.getElementById('agent-status')
+  const agentPanel = document.getElementById('agent-panel')
+  const agentPanelToggle = document.getElementById('agent-panel-toggle') as HTMLButtonElement | null
+  const agentSummary = document.getElementById('agent-summary')
+  const agentChangeList = document.getElementById('agent-change-list')
+
+  const jumpToAgentChange = (change: AgentChangeEntry): void => {
+    const editorEl = document.getElementById('editor')
+    const proseMirror = document.querySelector('#editor .ProseMirror')
+    if (!editorEl || !proseMirror) return
+
+    const children = Array.from(proseMirror.children) as HTMLElement[]
+    const normalizedTarget = change.targetText?.trim().toLowerCase()
+    let match: HTMLElement | null = null
+
+    if (normalizedTarget) {
+      match = children.find((child) => {
+        const text = child.textContent?.trim().toLowerCase() ?? ''
+        return text === normalizedTarget || text.startsWith(normalizedTarget) || text.includes(normalizedTarget)
+      }) ?? null
+    }
+
+    if (!match) {
+      match = children[0] ?? null
+    }
+    if (!match) return
+
+    match.classList.remove('agent-change-target')
+    editorEl.scrollTo({
+      top: Math.max(match.offsetTop - 24, 0),
+      behavior: 'smooth'
+    })
+    requestAnimationFrame(() => {
+      match?.classList.add('agent-change-target')
+      setTimeout(() => match?.classList.remove('agent-change-target'), 1800)
+    })
+  }
+
+  const renderAgentUI = (): void => {
+    if (agentStatus) {
+      if (agentState === 'active') {
+        agentStatus.textContent = 'Agent editing...'
+      } else if (lastAgentUpdateAt) {
+        agentStatus.textContent = `Updated ${formatRelativeTime(lastAgentUpdateAt)} • ${agentUpdateCount} sync${agentUpdateCount === 1 ? '' : 's'}`
+      } else {
+        agentStatus.textContent = 'Waiting for agent activity'
+      }
+    }
+
+    if (agentSummary) {
+      agentSummary.textContent = lastAgentUpdateAt
+        ? `Last update ${formatRelativeTime(lastAgentUpdateAt)}`
+        : 'No external updates yet'
+    }
+
+    if (agentChangeList) {
+      agentChangeList.innerHTML = ''
+      for (const change of agentChanges) {
+        const item = document.createElement('li')
+        const time = document.createElement('span')
+        time.className = 'agent-change-time'
+        time.textContent = formatRelativeTime(change.timestamp)
+        const summary = document.createElement('button')
+        summary.type = 'button'
+        summary.className = 'agent-change-link'
+        summary.addEventListener('click', () => jumpToAgentChange(change))
+        summary.title = change.targetText ? `Jump to ${change.targetText}` : 'Jump to document'
+        const summaryText = document.createElement('span')
+        summaryText.className = 'agent-change-summary'
+        summaryText.textContent = change.summary
+        summary.appendChild(summaryText)
+        item.append(time, summary)
+        agentChangeList.appendChild(item)
+      }
+    }
+  }
+
+  const resetAgentTimeline = (): void => {
+    agentState = 'idle'
+    lastAgentUpdateAt = null
+    agentUpdateCount = 0
+    agentChangeId = 0
+    agentChanges = []
+    renderAgentUI()
+  }
+
+  agentPanelToggle?.addEventListener('click', () => {
+    const open = agentPanel?.hidden ?? true
+    if (agentPanel) agentPanel.hidden = !open
+    if (agentPanelToggle) agentPanelToggle.setAttribute('aria-expanded', String(open))
+  })
+
+  setInterval(() => {
+    if (lastAgentUpdateAt && agentState !== 'active') renderAgentUI()
+  }, 30_000)
+  renderAgentUI()
+
+  api.onAppError(({ message }) => {
+    if (!editorReady) {
+      pendingErrors.push(message)
+      return
+    }
+    showError(message)
+  })
+
+  api.onFileOpened((data) => {
+    currentMarkdown = data.content
+    if (!editorReady) {
+      pendingOpenedContent = data.content
+      return
+    }
+    resetAgentTimeline()
+    setMarkdown(data.content)
+  })
+
   // Restore custom theme CSS from disk
   if (savedTheme.startsWith('custom:')) {
     const fileName = savedTheme.slice(7)
@@ -14,16 +314,36 @@ async function init(): Promise<void> {
     if (css) applyTheme(savedTheme, css)
   }
 
-  await createEditor('editor')
+  const editorModule = await import('./editor/editor')
+  await editorModule.createEditor('editor', (markdown) => {
+    currentMarkdown = markdown
+  })
+  getMarkdown = editorModule.getMarkdown
+  getHTML = editorModule.getHTML
+  setMarkdown = editorModule.setMarkdown
+  editorReady = true
+  currentMarkdown = getMarkdown()
+
+  if (pendingOpenedContent !== null) {
+    setMarkdown(pendingOpenedContent)
+  }
+  for (const message of pendingErrors) {
+    showError(message)
+  }
 
   api.onMenuOpen(async () => {
     const result = await api.openFile()
-    if (result) setMarkdown(result.content)
+    if (result) {
+      currentMarkdown = result.content
+      resetAgentTimeline()
+      setMarkdown(result.content)
+    }
   })
 
-  api.onMenuSave(() => api.saveFile(getMarkdown()))
-  api.onMenuSaveAs(() => api.saveFileAs(getMarkdown()))
+  api.onMenuSave(() => api.saveFile(currentMarkdown))
+  api.onMenuSaveAs(() => api.saveFileAs(currentMarkdown))
   api.onMenuExportPDF(() => api.exportPDF())
+
   api.onMenuExportHTML(() => {
     const s = getComputedStyle(document.body)
     const v = (name: string) => s.getPropertyValue(name).trim()
@@ -40,7 +360,6 @@ async function init(): Promise<void> {
     const tableHeaderBg = v('--table-header-bg')
     const selectionBg = v('--selection-bg')
 
-    // Get computed styles from actual editor elements
     const editor = document.querySelector('#editor .ProseMirror')
     const fontFamily = editor ? getComputedStyle(editor).fontFamily : '-apple-system,BlinkMacSystemFont,sans-serif'
 
@@ -71,12 +390,44 @@ hr{border:none;border-top:2px solid ${borderColor};margin:2em 0}
 img{max-width:100%}
 ::selection{background:${selectionBg}}
 </style>
-</head><body>${getHTML()}</body></html>`
+</head><body>${sanitizeHTMLFragment(getHTML())}</body></html>`
     api.exportHTML(html)
   })
-  api.onNewFile(() => setMarkdown(''))
-  api.onFileOpened((data) => setMarkdown(data.content))
-  api.onFileChanged((content) => setMarkdown(content))
+
+  api.onNewFile(() => {
+    currentMarkdown = ''
+    pendingOpenedContent = null
+    resetAgentTimeline()
+    setMarkdown('')
+  })
+
+  // file-changed: show diff highlight for agent changes
+  api.onFileChanged((content) => {
+    if (content === currentMarkdown) return
+
+    const previousMarkdown = currentMarkdown
+    const editorEl = document.getElementById('editor')
+    const scrollTop = editorEl?.scrollTop ?? 0
+    currentMarkdown = content
+    lastAgentUpdateAt = Date.now()
+    agentUpdateCount += 1
+    const changeInfo = analyzeAgentChange(previousMarkdown, content)
+    agentChanges = [
+      {
+        id: ++agentChangeId,
+        summary: changeInfo.summary,
+        timestamp: lastAgentUpdateAt,
+        targetText: changeInfo.targetText
+      },
+      ...agentChanges
+    ].slice(0, MAX_AGENT_CHANGES)
+    renderAgentUI()
+    setMarkdown(content, true)
+    requestAnimationFrame(() => {
+      if (editorEl) editorEl.scrollTop = scrollTop
+    })
+  })
+
   api.onSetTheme((theme) => applyTheme(theme))
   api.onSetCustomCSS((css) => {
     const theme = loadSavedTheme()
@@ -90,6 +441,8 @@ img{max-width:100%}
 
   const agentDot = document.getElementById('agent-dot')
   api.onAgentActivity((state) => {
+    agentState = state as 'idle' | 'active' | 'cooldown'
+    renderAgentUI()
     if (agentDot) agentDot.className = state === 'idle' ? '' : state
   })
 
@@ -102,7 +455,11 @@ img{max-width:100%}
     const filePath = api.getPathForFile(file)
     if (!filePath) return
     const result = await api.openFilePath(filePath)
-    if (result) setMarkdown(result.content)
+    if (result) {
+      currentMarkdown = result.content
+      resetAgentTimeline()
+      setMarkdown(result.content)
+    }
   })
 }
 
diff --git a/src/renderer/themes/base.css b/src/renderer/themes/base.css
index 75a9a1e..b71d24d 100644
--- a/src/renderer/themes/base.css
+++ b/src/renderer/themes/base.css
@@ -19,19 +19,138 @@ html, body {
   position: relative;
 }
 
-#agent-dot {
+#agent-meta {
   position: absolute;
-  top: 22px;
+  top: 14px;
   right: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  -webkit-app-region: no-drag;
+}
+
+#agent-status {
+  max-width: min(38vw, 320px);
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#agent-panel-toggle {
+  border: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-color) 90%, var(--text-color) 10%);
+  color: var(--text-color);
+  border-radius: 999px;
+  padding: 5px 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+#agent-panel-toggle:hover {
+  background: color-mix(in srgb, var(--bg-color) 82%, var(--text-color) 18%);
+}
+
+#agent-dot {
+  position: static;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--text-muted);
   opacity: 0.3;
-  -webkit-app-region: no-drag;
   transition: background 0.3s ease, opacity 0.3s ease;
 }
 
+#agent-panel {
+  margin: 0 40px 16px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--bg-color) 96%, var(--text-color) 4%);
+}
+
+#agent-panel[hidden] {
+  display: none;
+}
+
+#agent-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+#agent-summary {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+#agent-change-list {
+  padding-left: 18px;
+}
+
+#agent-change-list li + li {
+  margin-top: 10px;
+}
+
+.agent-change-time {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.agent-change-link {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.agent-change-link:hover .agent-change-summary {
+  color: var(--link-color);
+}
+
+.agent-change-summary {
+  color: var(--text-color);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+#editor .ProseMirror .agent-change-target {
+  animation: agent-jump-highlight 1.8s ease;
+}
+
+#error-toast {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  max-width: min(420px, calc(100vw - 32px));
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(120, 25, 25, 0.94);
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.45;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  z-index: 20;
+}
+
+#error-toast.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 #agent-dot.active {
   background: #e8913a;
   opacity: 1;
@@ -44,11 +163,36 @@ html, body {
   animation: none;
 }
 
+/* Agent diff highlight */
+#editor .ProseMirror .agent-diff-added {
+  background: rgba(63, 185, 80, 0.15);
+  border-radius: 3px;
+  transition: background 0.3s ease;
+}
+
+#editor .ProseMirror .agent-diff-fadeout {
+  animation: agent-diff-fadeout 0.4s ease forwards;
+}
+
+@keyframes agent-diff-fadeout {
+  0% { background: rgba(63, 185, 80, 0.25); }
+  100% { background: transparent; }
+}
+
 @keyframes agent-breathe {
   0%, 100% { opacity: 0.45; transform: scale(0.95); }
   50% { opacity: 1; transform: scale(1.05); }
 }
 
+@keyframes agent-jump-highlight {
+  0% {
+    background: color-mix(in srgb, var(--link-color) 22%, transparent);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
 #editor {
   height: calc(100vh - 52px);
   overflow-y: auto;