commit 9e4b70f1f1fbd3d5c603dc0157a6c10a2c213e17
Author: how2ice <how2ice@git.sm-home.cloud>
Date:   Tue Apr 21 03:33:23 2026 +0900

    Initial import

diff --git a/.env.example b/.env.example
new file mode 100755
index 0000000..7bdfc8e
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,11 @@
+NODE_VERSION=22.22.2
+PHOTOPRISM_PORT=2342
+PHOTOPRISM_ORIGINALS_SOURCE=/mnt/usb/photos
+PHOTOPRISM_SITE_URL=https://photo.sm-home.cloud/
+PHOTOPRISM_READONLY=true
+PHOTOPRISM_ADMIN_USER=admin
+PHOTOPRISM_ADMIN_PASSWORD=ChangeMe1234
+PHOTOPRISM_DATABASE_NAME=photoprism
+PHOTOPRISM_DATABASE_USER=photoprism
+PHOTOPRISM_DATABASE_PASSWORD=photoprism
+PHOTOPRISM_DATABASE_ROOT_PASSWORD=photoprism-root
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..03a97b9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,43 @@
+node_modules/
+dist/
+dev-dist/
+app-dist/
+test-app-dist/
+
+.DS_Store
+.auto_codex/
+.worktrees/
+.idea/
+.vscode/
+.docker/
+
+coverage/
+playwright-report/
+test-results/
+.cache/
+tmp/
+node_modules.root-owned-backup/
+
+.env
+.env.*
+.tmp
+!.env.example
+
+# etc workspace
+etc/**/.env
+etc/**/node_modules/
+etc/**/dist/
+etc/**/.docker/
+etc/**/*.log
+etc/**/.DS_Store
+
+*.tsbuildinfo
+*.swp
+*.root-owned-backup
+
+vite.config.js
+vite.config.d.ts
+
+public/.codex_chat
+.server-command-runner-heartbeat.json
+docs/assets/worklogs/
diff --git a/.nvmrc b/.nvmrc
new file mode 100755
index 0000000..db49bb1
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22.22.2
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100755
index 0000000..02fff07
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,71 @@
+# 📌 AI 작업 운영 규칙 (Codex + 로컬 작업 기준)
+
+## 🚨 현재 적용 모드 (최우선)
+
+현재 이 저장소는 **로컬 전용 + main 직접 작업 모드**로 사용한다.
+
+이 문서의 목적은 복잡한 브랜치 흐름보다 **현재 체크아웃된 로컬 `main`에서 바로 수정하고 실행하는 기준**을 우선 적용하는 것이다.
+
+### Codex / AI 기본 규칙
+
+* 사용자가 구현, 수정, 실행, 설정 변경, 문서 수정, 채팅 응답 개선, 작업 메모 반영을 요청하면 **현재 로컬 `main`에서 바로 작업**한다
+* 브라우저 확인, 화면 검증, 접속 테스트, 기본 작업 도메인은 **`https://test.sm-home.cloud/` 하나만 기준으로 사용**한다
+* 별도 지시가 없으면 `sm-home.cloud`, `rel.sm-home.cloud` 같은 다른 외부 도메인은 작업 기준으로 삼지 않는다
+* `채팅`, `작업 메모`, `작업메모`, `메모 반영`, `문서 반영` 요청은 기본적으로 **브랜치 생성 없이 main 직접 수정**으로 해석한다
+* `git remote`, `fetch`, `pull`, `push`, `branch`, `switch`, `checkout`, `merge`, `rebase`, `reset`, `stash`, `tag`, `commit` 같은 Git 관리 작업은 기본적으로 수행하지 않는다
+* 사용자가 Git 작업을 **명시적으로 요청한 경우에만** 필요한 명령을 최소 범위로 수행한다
+* 원격 저장소 연결 복구, 브랜치 전략 복구, release/main 동기화, 자동 merge 같은 작업을 자동으로 시도하지 않는다
+* 현재는 브랜치 전략보다 **로컬 실행 가능 상태 유지, 코드 수정, 문서 갱신, 메모 반영 속도**를 우선한다
+* `.auto_codex` 관련 Git 자동화, Plan 자동화, 브랜치 생성/병합 흐름은 사용자가 다시 요청하기 전까지 **비활성 상태**로 취급한다
+
+### 요청 해석 규칙
+
+* 사용자가 단순히 구현, 수정, 실행, 설정 변경을 요청하면 **Git 작업 없이 로컬 파일 수정과 실행 작업만 진행**한다
+* 사용자가 `git`, `브랜치`, `원격`, `push`, `pull`, `merge`, `commit`를 명시적으로 언급할 때만 Git 작업으로 해석한다
+* 사용자가 `Plan 등록`, `Plan 게시판 등록`, `게시판 등록`, `계획 등록`이라고 말하면 **Plan 게시판 항목 생성** 의미로 해석한다
+* 사용자가 `자동화 등록`, `자동화 접수`, `자동화 실행`, `자동화 돌려줘`라고 말하면 **자동화 API 등록 또는 실제 자동화 수행** 의미로 해석한다
+* 사용자가 `자동화 메모`라고만 말하면 게시판 메모인지 자동화 접수 메모인지 문맥을 먼저 확인한다
+* 사용자가 `Plan 게시판에 등록만`, `자동화 없이`, `구현하지 말고 계획만 등록`, `게시판만`처럼 표현하면 **자동화 실행 없이 Plan 항목만 등록**한다
+* 사용자가 `자동화해줘`, `구현해줘`, `작업 진행해줘`, `실행해줘`처럼 실제 수행을 명시한 경우에만 자동화 또는 코드 작업으로 해석한다
+* 요청이 모호하면 자동화 실행을 바로 진행하지 말고, 우선 **Plan 등록**으로 안전 해석하거나 짧게 재확인한다
+
+---
+
+## Git 관련 안전 규칙
+
+* 로컬 작업 중에도 사용자가 요청하지 않은 Git 정리 작업은 하지 않는다
+* `reset`, `checkout`, `switch`, `clean`, 강제 덮어쓰기처럼 되돌리기 어려운 작업은 자동으로 수행하지 않는다
+* 사용자가 Git 작업을 요청해도 **정말 필요한 범위만** 실행한다
+* 현재 모드에서는 `main` 직접 수정이 허용되지만, **자동 commit / push는 여전히 금지**한다
+
+---
+
+## Codex Live / 채팅 / 작업 메모 규칙
+
+* `Codex Live`, 일반 채팅, 작업 메모 반영 요청은 모두 현재 프로젝트의 로컬 `main`을 기준으로 처리한다
+* 외부 도메인 기준 동작 확인이 필요하면 기본 대상은 항상 `https://test.sm-home.cloud/`로 본다
+* 채팅에서 나온 수정 요청도 별도 브랜치 생성 없이 바로 파일 수정으로 이어질 수 있다
+* 작업 메모는 기록 목적이든 실제 수정 지시든 우선 `main` 기준의 로컬 작업으로 연결한다
+* 채팅과 작업 메모는 Git flow를 강제하지 않고, 필요한 경우에만 사용자가 별도로 Git 단계를 요청한다
+* 채팅에서 파일/문서/이미지/코드 리소스를 제공할 때는 반드시 `public/.codex_chat/<chat-session-id>/resource/` 아래 세션 전용 경로를 기준으로 사용한다
+* 채팅 첨부 파일은 `public/.codex_chat/<chat-session-id>/resource/uploads/` 아래 경로를 기준으로 사용한다
+* 원본 파일 경로만 응답해도 서버가 해당 리소스를 위 세션 경로로 복사해 공개 링크로 바꿔 줄 수 있지만, 문서와 안내 문구에는 위 공개 경로 기준을 우선 명시한다
+
+---
+
+## Plan / 자동화 메모
+
+* 기존 문서에 남아 있는 `feature`, `hotfix`, `release` 흐름은 **현재 로컬 모드에서는 기본 규칙으로 사용하지 않는다**
+* Plan 게시판과 자동화 관련 기능 설명은 UI/상태 설명으로만 참고하고, 실제 Git 브랜치 운영 규칙으로 자동 적용하지 않는다
+* 사용자가 나중에 브랜치 전략 복구를 명시적으로 요청하면 그때 별도 문서 갱신 후 다시 적용한다
+
+---
+
+## 한 줄 요약
+
+👉 지금은 로컬 `main`에서 바로 수정한다  
+👉 외부 확인 기본 도메인은 `https://test.sm-home.cloud/` 하나다  
+👉 채팅이든 작업 메모든 기본 해석은 `main` 직접 작업이다  
+👉 Git 작업은 사용자가 명시적으로 요청할 때만 최소 범위로 한다
+
+---
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..56ea6e9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,121 @@
+# AI Code App
+
+React + Vite + TypeScript 기반의 문서/샘플 허브 애플리케이션입니다. 현재 저장소는 공통 컴포넌트, 위젯 샘플, Markdown 문서 뷰어, Plan 게시판을 하나의 앱에서 탐색할 수 있도록 구성되어 있습니다.
+
+## 임시 운영 메모
+
+- 현재 저장소는 당분간 **로컬 전용 작업 모드**로 사용합니다.
+- Git 원격 동기화, 브랜치 운영, 자동 병합/자동화는 잠시 중지한 상태로 간주합니다.
+- Codex나 자동화 도구는 기본적으로 Git 작업 없이 **현재 프로젝트 루트의 `main` 작업본을 바로 수정**합니다.
+- `채팅`, `Codex Live`, `작업메모`, `메모 반영` 요청도 같은 기준으로 해석합니다.
+- 채팅 리소스와 첨부 파일은 `public/.codex_chat/<chat-session-id>/resource/...` 기준으로 제공하며, 업로드 파일은 `public/.codex_chat/<chat-session-id>/resource/uploads/...` 아래를 사용합니다.
+
+## 시작하기
+
+```bash
+npm install
+npm run dev
+```
+
+## PhotoPrism
+
+루트 `docker-compose.yml`에는 PhotoPrism와 MariaDB 서비스가 포함되어 있습니다.
+
+```bash
+cp .env.example .env
+docker compose up -d photoprism photoprism-db
+```
+
+- 기본 접속 포트: `127.0.0.1:2342`
+- 기본 사이트 URL: `https://photo.sm-home.cloud/`
+- 원본 사진 경로: `/mnt/usb/photos`
+- 원본 경로는 읽기 전용으로 마운트됩니다.
+- `/mnt/usb/photos`가 호스트에 없으면 bind mount를 자동 생성하지 않고 기동이 실패합니다.
+
+## 주요 스크립트
+
+```bash
+npm run dev
+npm run build
+npm run build:lib
+npm run build:app
+npm run preview
+npm run docs:daily
+npm run capture:component
+npm run capture:menu
+npm run capture:feature
+npm run capture:fullscreen
+npm run capture:plan-mobile
+npm run plan:codex:once
+```
+
+## 프로젝트 구조
+
+```text
+src/
+├─ app/
+│  ├─ main/                # 메인 레이아웃과 상단/사이드 UI
+│  └─ manifests/           # 문서/샘플 로딩 매니페스트
+├─ components/
+│  ├─ markdownPreview/     # Markdown 문서 목록/카드 렌더링
+│  ├─ navigation/          # 섹션 메뉴와 폴더 트리
+│  ├─ previewer/           # text/json/code/image/markdown 미리보기
+│  ├─ search/              # 통합 검색 모달
+│  ├─ status-badge/        # 상태 표현 UI
+│  └─ window/              # 드래그/리사이즈 가능한 윈도우 UI
+├─ features/
+│  ├─ dashboard/           # 프로젝트 전용 대시보드 샘플
+│  ├─ layout/              # 프로젝트 전용 레이아웃 문서
+│  ├─ markdownPreview/     # 기능 레벨 Markdown 카드
+│  └─ planBoard/           # Plan 게시판 화면과 API 연동
+├─ layer/                  # 제스처/검색 레이어
+├─ samples/                # 샘플 엔트리 레지스트리
+├─ store/                  # 앱 전역 상태
+└─ widgets/                # 위젯 단위 샘플과 공통 셸
+docs/
+├─ components/             # 컴포넌트 문서
+├─ features/               # 기능 문서
+├─ templates/              # 문서 템플릿
+└─ worklogs/               # 날짜별 작업일지
+```
+
+## 앱 구성
+
+- `APIs / Components`: 공통 컴포넌트 샘플 탐색
+- `APIs / Widgets`: 위젯 샘플 탐색
+- `Docs`: `docs/**/*.md`와 일부 `src/features/**/*.md` 문서 탐색
+- `Plans`: 작업 항목, 조치 이력, 이슈 이력을 관리하는 Plan 게시판
+
+## 문서 위치
+
+- 전체 문서 가이드: `docs/README.md`
+- 작업일지: `docs/worklogs`
+- 기능 문서: `docs/features`
+- 컴포넌트 문서: `docs/components`
+
+## 운영 메모
+
+- 앱 문서는 Vite `import.meta.glob`으로 Markdown 파일을 수집합니다.
+- 작업일지는 날짜별 파일로 누적하며 캡처 이미지는 `docs/assets/worklogs/YYYY-MM-DD/` 기준으로 관리합니다.
+- Plan 자동화 스크립트는 `scripts/run-plan-codex-once.mjs`를 사용합니다.
+- 서버 재기동을 호스트 프로젝트 루트 기준으로 처리하려면 `npm run server-command:runner`를 실행합니다.
+- 문서/작업일지 일일 정리는 `npm run docs:daily`와 `.github/workflows/daily-docs-maintenance.yml` 기준으로 실행합니다.
+
+## 프로젝트 현황
+
+<!-- AUTO_DAILY_DOCS:README_START -->
+- 기준 일자: `2026-04-07` (Asia/Seoul)
+- 작업일지: 9개
+- 기능 문서: 2개
+- 컴포넌트 문서: 8개
+- 스크린샷 보관 폴더: 7개
+
+최근 작업일지
+- `2026-04-07` 작업일지
+- `2026-04-06` 작업일지
+- `2026-04-05` 작업일지
+- `2026-04-04` 작업일지
+- `2026-04-03` 작업일지
+- `2026-04-02` 작업일지
+- `2026-04-01` 작업일지
+<!-- AUTO_DAILY_DOCS:README_END -->
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100755
index 0000000..2d34c8e
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,152 @@
+services:
+  photoprism:
+    image: photoprism/photoprism:latest
+    container_name: photoprism
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    depends_on:
+      - photoprism-db
+    ports:
+      - '127.0.0.1:${PHOTOPRISM_PORT:-2342}:2342'
+    volumes:
+      - type: bind
+        source: ${PHOTOPRISM_ORIGINALS_SOURCE:-/mnt/usb/photos}
+        target: /photoprism/originals
+        read_only: true
+        bind:
+          create_host_path: false
+      - photoprism-storage:/photoprism/storage
+    environment:
+      PHOTOPRISM_ADMIN_USER: ${PHOTOPRISM_ADMIN_USER:-admin}
+      PHOTOPRISM_ADMIN_PASSWORD: ${PHOTOPRISM_ADMIN_PASSWORD:-ChangeMe1234}
+      PHOTOPRISM_SITE_URL: ${PHOTOPRISM_SITE_URL:-https://photo.sm-home.cloud/}
+      PHOTOPRISM_ORIGINALS_PATH: /photoprism/originals
+      PHOTOPRISM_STORAGE_PATH: /photoprism/storage
+      PHOTOPRISM_READONLY: ${PHOTOPRISM_READONLY:-true}
+      PHOTOPRISM_DATABASE_DRIVER: mysql
+      PHOTOPRISM_DATABASE_SERVER: photoprism-db:3306
+      PHOTOPRISM_DATABASE_NAME: ${PHOTOPRISM_DATABASE_NAME:-photoprism}
+      PHOTOPRISM_DATABASE_USER: ${PHOTOPRISM_DATABASE_USER:-photoprism}
+      PHOTOPRISM_DATABASE_PASSWORD: ${PHOTOPRISM_DATABASE_PASSWORD:-photoprism}
+    restart: unless-stopped
+    networks:
+      - default
+      - work-backend
+
+  photoprism-db:
+    image: mariadb:11
+    container_name: photoprism-db
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    command: --innodb-buffer-pool-size=512M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
+    environment:
+      MARIADB_AUTO_UPGRADE: "1"
+      MARIADB_DATABASE: ${PHOTOPRISM_DATABASE_NAME:-photoprism}
+      MARIADB_USER: ${PHOTOPRISM_DATABASE_USER:-photoprism}
+      MARIADB_PASSWORD: ${PHOTOPRISM_DATABASE_PASSWORD:-photoprism}
+      MARIADB_ROOT_PASSWORD: ${PHOTOPRISM_DATABASE_ROOT_PASSWORD:-photoprism-root}
+    volumes:
+      - photoprism-db:/var/lib/mysql
+    restart: unless-stopped
+    networks:
+      - default
+      - work-backend
+
+  prod-app:
+    image: node:${NODE_VERSION:-22.22.2}-bookworm
+    container_name: ai-code-app-prod
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    user: "0:0"
+    cpus: 1.0
+    mem_limit: 1536m
+    working_dir: /prod-app
+    ports:
+      - '127.0.0.1:5173:5173'
+    volumes:
+      - ${PROD_APP_SOURCE:-.}:/prod-app
+      - ./.docker/prod-app/node_modules:/prod-app/node_modules
+      - ./.docker/prod-app/home:/home/how2ice
+    networks:
+      - default
+      - work-backend
+    environment:
+      HOME: /home/how2ice
+      NPM_CONFIG_CACHE: /home/how2ice/.npm
+      WORK_SERVER_URL: http://work-server:3100
+      VITE_DISABLE_APP_UPDATE: "true"
+    command: >
+      sh -c "npm ci --legacy-peer-deps && npm run build:test-app && npm run preview:test-app -- --host 0.0.0.0 --port 5173 --strictPort"
+
+  app:
+    image: node:${NODE_VERSION:-22.22.2}-bookworm
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    user: "0:0"
+    cpus: 1.0
+    mem_limit: 1536m
+    working_dir: /app
+    ports:
+      - '127.0.0.1:5174:5173'
+    volumes:
+      - ./:/app
+      - app-node-modules:/app/node_modules
+      - app-home:/home/how2ice
+    networks:
+      - default
+      - work-backend
+    environment:
+      HOME: /home/how2ice
+      NPM_CONFIG_CACHE: /home/how2ice/.npm
+      WORK_SERVER_URL: http://work-server:3100
+    command: >
+      sh -c "npm ci --legacy-peer-deps && npm run build:test-app && npm run preview:test-app -- --host 0.0.0.0 --port 5173 --strictPort"
+
+  release-app:
+    image: node:${NODE_VERSION:-22.22.2}-bookworm
+    container_name: ai-code-app-release
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    user: "0:0"
+    cpus: 1.0
+    mem_limit: 1536m
+    working_dir: /release-app
+    ports:
+      - '127.0.0.1:5175:5173'
+    volumes:
+      - ${RELEASE_APP_SOURCE:-.}:/release-app
+      - ./.docker/release-app/node_modules:/release-app/node_modules
+      - ./.docker/release-app/home:/home/how2ice
+    networks:
+      - default
+      - work-backend
+    environment:
+      HOME: /home/how2ice
+      NPM_CONFIG_CACHE: /home/how2ice/.npm
+    command: >
+      sh -c "npm ci --legacy-peer-deps && npm run dev -- --host 0.0.0.0 --port 5173"
+
+networks:
+  work-backend:
+    name: work-backend
+
+volumes:
+  app-node-modules:
+  app-home:
+  photoprism-storage:
+  photoprism-db:
diff --git a/docs/README.md b/docs/README.md
new file mode 100755
index 0000000..6f2415b
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,155 @@
+# Docs Guide
+
+프로젝트 문서는 작업일지, 기능 문서, 컴포넌트 문서를 기본 축으로 운영합니다. 현재 메인 앱 `Docs` 화면은 `docs/**/*.md`를 동적으로 수집해 폴더별로 노출합니다.
+
+## 0. 임시 로컬 모드
+
+- 현재 저장소는 당분간 로컬 전용으로 운영합니다.
+- 문서 정리나 Codex 작업 시 Git 원격 동기화, 브랜치 운영, 자동 merge 흐름은 기본 전제로 사용하지 않습니다.
+- `Codex Live`, 일반 채팅, 작업메모 반영 요청은 **현재 프로젝트 루트의 로컬 `main` 작업본을 바로 수정**하는 방식으로 처리합니다.
+- Git 관련 작업은 사용자가 명시적으로 요청할 때만 수행합니다.
+
+## 1. 작업일지
+
+- 위치: `docs/worklogs`
+- 규칙: 날짜별 1개 Markdown 파일 작성
+- 파일명 예시: `2026-03-31.md`
+- 템플릿: `docs/templates/worklog-template.md`
+- 권장 기록 범위: 구현 내용, 구조 변경, 빌드/배포 이슈, Git 작업 내역
+- 최근 작업일지는 날짜별로 계속 누적 기록
+- 화면 캡처는 `docs/assets/worklogs/YYYY-MM-DD/` 아래에 저장하고 작업일지에서 상대 경로로 연결
+- 캡처는 전체 화면보다 작업한 컴포넌트 영역 단위 이미지를 우선 사용
+- 메뉴/기능 증적이 필요하면 `capture:menu`, `capture:feature` 스크립트로 화면 단위 캡처를 함께 남김
+- 화면 캡처를 남기지 못한 날에도 `## 화면 캡처` 섹션은 유지하고, 미첨부 사유를 한 줄로 기록
+- 문서 최신화 작업을 수행한 날에는 어떤 문서를 왜 수정했는지 함께 기록
+
+권장 항목:
+
+- 오늘 작업한 내용
+- 이슈 및 해결 과정
+- 결정 사항
+- 상세 작업 내역
+
+## 2. 기능 문서
+
+- 위치: `docs/features`
+- 규칙: 기능 단위로 Markdown 파일 작성
+- 파일명 예시: `auth.md`, `dashboard.md`
+- 템플릿: `docs/templates/feature-template.md`
+- 권장 기록 범위: 기능 목적, 화면 흐름, API/상태, 테스트 포인트
+- `docs/features/*.md`를 추가하거나 수정하면 앱 `Docs / 기능문서` 메뉴에 반영됨
+- `src/features/**/*.md`는 프로젝트 내부 전용 설명 문서용이며 메인 `Docs` 메뉴의 기본 수집 대상은 아님
+
+권장 항목:
+
+- 기능 목적
+- 주요 화면/흐름
+- 데이터 구조 및 API
+- 예외 처리
+- 테스트 포인트
+
+## 3. 컴포넌트 문서
+
+- 위치: `docs/components`
+- 규칙: 컴포넌트별 1개 Markdown 파일 작성
+- 파일명 예시: `status-badge.md`, `user-card.md`
+- 대표 샘플: 각 컴포넌트의 `samples/Sample.tsx`
+- 확장 샘플: `samples/*.tsx`
+
+권장 항목:
+
+- 목적
+- 폴더 구조
+- UI props
+- plugin input/output 규칙
+- plugin 합성 규칙
+- Sample 활용 예시
+
+현재 기준 주요 컴포넌트 구조:
+
+```text
+src/components
+├─ markdownPreview
+├─ navigation
+├─ previewer
+├─ search
+├─ status-badge
+└─ window
+```
+
+공통 플러그인 타입과 유틸은 `src/types/component-plugin.ts` 에서 관리합니다.
+
+샘플 운영 규칙:
+
+- `samples/Sample.tsx`는 해당 컴포넌트의 가장 기본형만 표현
+- plugin/feature 예시는 `samples/*.tsx`로 분리
+- 샘플 목록에서는 같은 컴포넌트 기준으로 묶고 `base -> plugin -> feature` 순서로 정렬
+
+## 4. 샘플/위젯 레이아웃
+
+- 컴포넌트 샘플 레이아웃: 좌측 컴포넌트 목록 + 우측 상세 카드
+- 상세 카드는 컴포넌트 하나당 1개
+- 카드 내부는 `Base Sample` 아래에 `Plugin Samples`, `Feature Samples`를 순차적으로 배치
+- 위젯 샘플은 `widgets/**/samples/*.tsx` 기준으로 별도 수집
+- 실제 샘플 엔트리 로딩은 `src/app/manifests/samples.manifest.ts`, `src/samples/registry.ts`를 기준으로 동작
+
+## 5. 프로젝트 종속 레이아웃
+
+- 위치: `src/features/layout`
+- 대상: 현재 프로젝트 화면에서만 사용하는 레이아웃
+- 예시: 컴포넌트 샘플 목록, 위젯 샘플 목록, Docs markdown preview, Plan 게시판
+
+프로젝트 종속 기능 규칙:
+
+- 현재 프로젝트에서만 의미 있는 화면/기능은 `src/features` 아래에 둠
+- 예: `Plan 게시판`, 대시보드 feature 샘플, 앱 전용 레이아웃
+- 공통 컴포넌트/위젯으로 재사용 가능한 항목은 `src/components`, `src/widgets`에 유지
+
+메인 화면 분리 규칙:
+
+- 위치: `src/app/main`
+- 구성: `MainView`, `MainHeader`, `MainSidebar`, `MainContent`
+- 목적: 상단 메뉴, 사이드바, 본문, 검색/문서/Plan 흐름을 앱 레벨에서 분리
+
+## 6. Markdown Preview
+
+- 공통 markdown preview는 `src/components/markdownPreview` 아래에서 관리
+- `basePath`를 받아 특정 폴더 아래 markdown 문서를 재사용 가능하게 렌더링
+- `docs` 문서 영역은 좌측 폴더/문서 트리 + 우측 markdown 카드 목록 구조 사용
+- 문서 수집 매니페스트는 `src/app/manifests/docs.manifest.ts`에서 관리
+- `docs/features`, `docs/components`, `docs/worklogs`, `docs/templates`는 폴더 단위로 자동 분류됨
+- `docs/worklogs`는 최신 날짜가 먼저 보이도록 역순 정렬
+
+## 7. 대시보드 위젯/데이터
+
+- 대시보드 카드 위젯은 `src/widgets/dashboard-report-card`
+- 위젯 샘플과 프로젝트 종속 샘플은 분리
+- 재사용 가능한 샘플 데이터는 `src/data` 아래에서 관리
+- 프로젝트 전용 대시보드 샘플은 `src/features/dashboard`에 둠
+
+## 8. 배포 메모
+
+- Nexus publish 대상 registry는 `package.json`의 `publishConfig.registry`
+- alpha 버전 배포는 `npm publish --tag alpha`
+- Nexus 인증은 `~/.npmrc`의 `username / _password(base64) / email` 방식으로 확인
+
+## 9. etc 운영 기준
+
+- 부가 서버/DB/타언어 프로젝트는 `etc` 아래에서 분리 관리
+- 서버 예시: `etc/servers/work-server`
+- DB 예시: `etc/db/work-db`
+- `etc` 내부 비밀값과 생성물은 커밋 제외
+  - `.env`
+  - `node_modules`
+  - `dist`
+  - `*.log`
+
+## 10. Plan 기능 문서 메모
+
+- `Plan` 기능은 `src/features/planBoard`에서 관리
+- 현재 앱에는 목록/상세 보드, release 검수, 차트, 스케줄 화면이 함께 포함됨
+- 기본 상태는 `등록`, `작업중`, `작업완료`, `릴리즈완료`, `완료`
+- 자동화 진행은 `workerStatus`로 별도 관리하며 브랜치 준비, 자동 작업, release/main 반영 상태를 표현
+- `작업시작` 이후에는 원본 요청(`작업 ID`, 원본 메모`)을 수정하지 않고 조치 이력으로 누적 기록
+- 권한 토큰이 없으면 조회 중심으로 동작하며 민감 메모와 소스 작업 일부는 제한 또는 마스킹
+- 관련 기능 문서는 `docs/features/plan-board-review.md`, `plan-automation.md`, `plan-schedule.md`, `plan-usage.md` 참고
diff --git a/docs/chat-frontend-rewrite-plan.md b/docs/chat-frontend-rewrite-plan.md
new file mode 100644
index 0000000..8a1a979
--- /dev/null
+++ b/docs/chat-frontend-rewrite-plan.md
@@ -0,0 +1,249 @@
+# Chat Frontend Rewrite Plan
+
+## Goal
+
+Rebuild the chat frontend around explicit feature boundaries instead of one large panel. The rewrite keeps the current server contract for now, but removes direct API coupling from UI components and preserves the current mobile visual structure.
+
+## Non-Goals
+
+The first rewrite wave does not change:
+
+1. Work server REST endpoint shapes
+2. Work server WebSocket event payload shapes
+3. Existing chat database schema
+4. Current mobile interaction model and visual hierarchy
+
+## Current Pain Points
+
+The existing frontend mixes too many concerns in the same render tree:
+
+1. Session routing and panel selection
+2. Conversation list fetch and sort
+3. Conversation detail recovery
+4. Composer draft and upload lifecycle
+5. WebSocket connection and reconnect
+6. Runtime dashboard fetch and live updates
+7. Error log loading
+8. Notification unread sync
+9. Visibility, focus, reconnect, and page restore sync
+
+This creates three classes of failures:
+
+1. Render loops from unstable effect dependencies
+2. Request storms from duplicate fetch paths
+3. Partial outages where one failing concern blanks the whole chat workspace
+
+## Rewrite Strategy
+
+The rewrite is frontend-first, but not frontend-only in architecture. The new frontend must assume that API latency and WebSocket reconnects can fail, and each feature controller must degrade independently.
+
+### Guiding Rules
+
+1. UI components do not call REST helpers directly
+2. UI components do not build WebSocket URLs directly
+3. One feature controller owns one feature's network lifecycle
+4. Shell state never performs data fetches
+5. Mobile layout is preserved while data flow is replaced under it
+
+## Feature Inventory
+
+### 1. Workspace Shell
+
+Responsibilities:
+
+1. Hold `chat | runtime | errors` selection
+2. Hold active session id
+3. Hold mobile split-pane visibility
+4. Compose feature panes
+
+Rules:
+
+1. No direct REST calls
+2. No direct socket usage
+3. No data caching
+
+### 2. Conversation List
+
+Responsibilities:
+
+1. Load room summaries
+2. Search and sort locally
+3. Create, rename, delete, and select rooms
+4. Expose unread and processing badges
+
+Rules:
+
+1. One fetch source
+2. One short-lived in-flight dedupe layer
+3. No room detail fetch inside the list controller
+
+### 3. Conversation Room
+
+Responsibilities:
+
+1. Load one room detail
+2. Merge server messages with optimistic local state
+3. Recover state after reconnect
+4. Mark replies as read
+
+Rules:
+
+1. Only one active detail request at a time
+2. Detail loading must never fan out into list reloads
+3. Loading and recovery state must be local to the active room
+
+### 4. Composer
+
+Responsibilities:
+
+1. Hold draft and attachments
+2. Submit queue or direct requests
+3. Retry, cancel, and delete pending items
+4. Manage optimistic user/request messages
+
+Rules:
+
+1. No list-wide refresh on send
+2. No runtime refresh coupled to draft input
+
+### 5. Live Connection
+
+Responsibilities:
+
+1. Open and maintain the shared chat socket
+2. Route message, job, runtime, and activity events
+3. Reconnect with bounded recovery
+4. Publish connection state through a shared adapter
+
+Rules:
+
+1. No duplicate context writes
+2. Background transitions are throttled
+3. Reconnect only restores the active room by default
+
+### 6. Runtime
+
+Responsibilities:
+
+1. Load runtime snapshot
+2. Show queue and active jobs
+3. Load per-job detail
+4. Support remove and cancel actions
+
+Rules:
+
+1. Runtime refresh is separate from room detail refresh
+2. Runtime failure must not blank the chat room UI
+
+### 7. Error Viewer
+
+Responsibilities:
+
+1. Load error log list
+2. Render error detail and resource previews
+
+Rules:
+
+1. Fully isolated from chat room state
+
+### 8. Notification Integration
+
+Responsibilities:
+
+1. Unread badges
+2. Notification center list/detail
+3. Offline room notifications
+
+Rules:
+
+1. No room detail polling from notification badge refresh
+2. No direct dependency from notification UI to chat room rendering
+
+## New Frontend Layers
+
+### A. UI Layer
+
+Files under `components/` and pane files.
+
+Responsibilities:
+
+1. Render props only
+2. Emit user actions only
+
+### B. Feature Controller Layer
+
+Files under `hooks/`.
+
+Responsibilities:
+
+1. Manage one feature's state machine
+2. Translate UI actions to gateway calls
+3. Own loading and error state
+
+### C. Gateway Layer
+
+Files under `data/`.
+
+Responsibilities:
+
+1. Wrap all chat REST calls
+2. Wrap all chat socket entry points
+3. Normalize fallback behavior and timeouts in one place
+
+This is the critical separation that the old frontend does not have.
+
+## Target Folder Shape
+
+```text
+src/app/main/chatV2/
+  ChatWorkspaceV2.tsx
+  types.ts
+  data/
+    chatGateway.ts
+    chatConnectionGateway.ts
+  hooks/
+    useChatWorkspaceState.ts
+    useConversationListController.ts
+    useConversationRoomController.ts
+    useComposerController.ts
+    useRuntimeController.ts
+    useNotificationController.ts
+  components/
+    ConversationListPane.tsx
+    ConversationRoomPane.tsx
+    Composer.tsx
+    RuntimePane.tsx
+    ErrorPane.tsx
+```
+
+## Migration Waves
+
+### Wave 1
+
+1. Freeze mobile layout
+2. Introduce chatV2 gateway layer
+3. Move list/detail/runtime access behind the gateway
+
+### Wave 2
+
+1. Replace list controller
+2. Replace room controller
+3. Replace composer controller
+
+### Wave 3
+
+1. Reconnect runtime and notifications through new controllers
+2. Remove old `MainChatPanel` effect chains
+
+### Wave 4
+
+1. Make `MainChatPanel` a thin compatibility wrapper or replace it entirely
+
+## Success Criteria
+
+1. Main load triggers one list fetch
+2. Opening one room triggers one detail fetch
+3. No direct browser fallback to external `:3100` ports on remote hosts
+4. WebSocket and REST routing live in one gateway boundary
+5. One pane can fail without blanking the others
+6. Mobile layout matches the pre-rewrite visual structure
diff --git a/docs/components/check-combo.md b/docs/components/check-combo.md
new file mode 100755
index 0000000..775f83c
--- /dev/null
+++ b/docs/components/check-combo.md
@@ -0,0 +1,34 @@
+# Check Combo Input
+
+## 목적
+
+`code/value` 데이터를 받아 여러 항목을 체크박스 형태로 선택하고, 실제 값은 `code[]`로 유지하는 다중 선택 combo 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/checkCombo
+├─ CheckComboUI.tsx
+├─ index.ts
+├─ plugins/
+├─ samples/
+└─ types/
+```
+
+## 주요 props
+
+- `data: { code, value }[]`
+- `value`, `defaultValue`
+- `onChange(codes, items)`
+- `showSearch`
+- `allowClear`
+- `placeholder`
+
+## plugins
+
+- `createCheckComboPlaceholderPlugin`
+- `createCheckComboSortPlugin`
+
+## 샘플
+
+- 대표 샘플: `src/components/inputs/checkCombo/samples/Sample.tsx`
diff --git a/docs/components/codex-diff-previewer.md b/docs/components/codex-diff-previewer.md
new file mode 100755
index 0000000..33e1abc
--- /dev/null
+++ b/docs/components/codex-diff-previewer.md
@@ -0,0 +1,35 @@
+# Codex Diff Previewer
+
+## 목적
+
+변경 파일의 전체 소스와 raw diff를 codex 스타일 아코디언으로 함께 보여주는 공통 preview 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/previewer
+├─ CodexDiffBlock.tsx
+├─ CodexDiffPreviewer.tsx
+├─ CodexDiffPreviewer.css
+├─ samples/
+│  └─ CodexDiffSample.tsx
+└─ index.ts
+```
+
+## 주요 props
+
+- `files`
+- `diffText`
+- `title`
+- `description`
+- `height`
+
+## 공통 사용처
+
+- 작업일지 `## 소스` 탭
+- 일반 문서의 ````diff```` 코드 블록
+- previewer 샘플 갤러리
+
+## 샘플
+
+- 대표 샘플: `src/components/previewer/samples/CodexDiffSample.tsx`
diff --git a/docs/components/component-addition-suggestions.md b/docs/components/component-addition-suggestions.md
new file mode 100755
index 0000000..3620fe2
--- /dev/null
+++ b/docs/components/component-addition-suggestions.md
@@ -0,0 +1,130 @@
+# 신규 컴포넌트 후보 2차 정리
+
+## 신규 컴포넌트 후보 7차 제안
+
+### 목적
+
+현재 `release` 브랜치 기준으로 기존 컴포넌트와 겹치지 않는 신규 공통 컴포넌트 후보를 제안합니다.
+
+이 글은 검토용 plan 게시판 작성만 수행하며, 자동화 접수는 하지 않고 미접수 상태로 유지합니다.
+
+### release 기준 확인
+
+- 이미 존재: Dashboard Report Card, Progress/MultiProgress, Search Command, Popup/Select/CheckCombo 입력, Markdown Preview, Previewer/Codex Diff, Status Badge, Window, DataListTable, EmbeddedMap, TextMemo/GPS/API 샘플 위젯
+- 제안 방향: Plan/Board/History 화면에서 반복될 가능성이 높지만 아직 공통 컴포넌트로 분리되지 않은 조합형 UI
+
+### 신규 후보
+
+#### 1. Query Filter Builder UI
+
+복수 조건 필터를 행 단위로 추가하고 저장할 수 있는 필터 빌더 컴포넌트입니다.
+
+- 적용 위치: Plan Board 고급 필터, History 검색, Board 검색
+- 주요 props: `fields`, `operators`, `value`, `onChange`, `presets`, `compact`
+- 기대 효과: 화면마다 흩어질 수 있는 필터 조건 UI를 일관된 패턴으로 정리
+
+#### 2. Timeline Activity Feed UI
+
+작업 상태 변경, 접수, release/main 반영, 오류 이벤트를 시간순으로 보여주는 활동 피드 컴포넌트입니다.
+
+- 적용 위치: Plan 상세, History 상세, 자동화 실행 이력
+- 주요 props: `items`, `groupByDate`, `statusResolver`, `dense`, `renderMeta`
+- 기대 효과: 로그성 텍스트를 추적 가능한 UI로 전환하고 최근 변경 맥락을 빠르게 파악
+
+#### 3. Evidence Attachment Strip UI
+
+스크린샷, diff, 로그, 링크 같은 증빙 자료를 한 줄 카드 목록으로 노출하는 첨부 스트립 컴포넌트입니다.
+
+- 적용 위치: Plan 검증 증빙, Preview 결과, History 상세
+- 주요 props: `attachments`, `onPreview`, `onDownload`, `maxVisible`, `variant`
+- 기대 효과: 증빙 자료 표시와 미리보기 진입점을 공통화
+
+### 우선순위 제안
+
+1. Query Filter Builder UI
+2. Timeline Activity Feed UI
+3. Evidence Attachment Strip UI
+
+우선 1번을 먼저 검토하는 것이 좋습니다. Plan Board와 History에서 필터 조건이 계속 늘어날 가능성이 높아 재사용 효과가 가장 큽니다.
+
+## 목적
+
+기존에 개발 완료된 `FormField`, `StateKit`, `DataListTable`과 이미 개발 접수된 `Action Toolbar UI`, `Detail Inspector Panel`, `Timeline / Activity Log UI`, `Confirm Dialog UI`, `Notification Toast / Action Feedback UI`, `Date Range Input`, `File Attachment List`, `Component Usage Doc Card`, `Split Pane Layout`은 이번 후보에서 제외합니다.
+
+이번 문서는 현재 코드베이스와 기존 Board/Plan 접수 이력에 없는 신규 공통 컴포넌트만 다시 추려 이후 Plan 후속 작업 후보를 만드는 목적입니다.
+
+## 제외 기준
+
+- 이미 구현 완료된 공통 컴포넌트는 중복 후보로 다시 올리지 않음
+- 이미 Board/Plan에서 개발 접수된 컴포넌트는 신규 후보에서 제외
+- 앱 전용 화면 조합보다 여러 기능에서 재사용 가능한 공통 UI를 우선 선정
+
+## 신규 후보
+
+### 1. Drawer / Side Sheet UI
+
+본문 흐름을 끊지 않고 우측 또는 하단에서 보조 편집 화면을 여는 컴포넌트입니다.
+
+- 적용 위치: Plan 상세 보조 편집, 설정 화면, 모바일 상세 패널
+- 주요 props: `open`, `placement`, `width`, `title`, `footer`, `onClose`
+- 기대 효과: 전체 화면 전환 없이 보조 작업을 열고 닫는 패턴을 공통화
+
+### 2. Description List / Key Value Summary UI
+
+상세 정보 화면에서 라벨과 값을 읽기 전용으로 정리하는 컴포넌트입니다.
+
+- 적용 위치: Plan 메타 정보, 방문 이력 상세, 앱 설정 요약
+- 주요 props: `items`, `columns`, `size`, `labelWidth`, `copyable`
+- 기대 효과: 상세 화면마다 반복되는 메타 정보 레이아웃을 줄임
+
+### 3. Stepper / Process Flow UI
+
+등록, 작업중, `release` 반영, `main` 반영 같은 단계를 순서형으로 보여주는 컴포넌트입니다.
+
+- 적용 위치: Plan 상태 흐름, 배포 진행 표시, 자동화 단계 요약
+- 주요 props: `steps`, `current`, `status`, `direction`, `compact`
+- 기대 효과: 텍스트 상태 나열보다 현재 단계와 다음 단계를 직관적으로 전달
+
+### 4. Tag Input UI
+
+여러 키워드나 라벨을 직접 추가하고 삭제하는 입력 컴포넌트입니다.
+
+- 적용 위치: Board 태그, 검색 조건 저장, 증적 분류, 빠른 필터 조합
+- 주요 props: `value`, `suggestions`, `maxTags`, `allowCustom`, `onChange`
+- 기대 효과: 다중 조건 입력을 `select`와 별도로 다뤄 반복 필터 구성이 쉬워짐
+
+### 5. Breadcrumb / Context Path UI
+
+현재 위치와 상위 경로를 짧게 보여주는 탐색 보조 컴포넌트입니다.
+
+- 적용 위치: Docs 상세, Components 샘플 상세, History 상세 진입 경로
+- 주요 props: `items`, `separator`, `compact`, `onNavigate`
+- 기대 효과: 깊은 메뉴 구조에서 현재 위치 파악과 상위 이동 비용을 낮춤
+
+### 6. Property Grid UI
+
+설정값이나 옵션 목록을 2열 또는 다열로 배치해 빠르게 편집하는 설정형 컴포넌트입니다.
+
+- 적용 위치: 앱 설정, 자동화 설정, 위젯 옵션 편집
+- 주요 props: `sections`, `fields`, `columns`, `readonly`, `onChange`
+- 기대 효과: 설정 폼을 긴 세로 나열 대신 밀도 있게 구성 가능
+
+## 권장 진행 순서
+
+1. `Description List / Key Value Summary UI`
+2. `Stepper / Process Flow UI`
+3. `Drawer / Side Sheet UI`
+4. `Tag Input UI`
+5. `Property Grid UI`
+6. `Breadcrumb / Context Path UI`
+
+## 검증 기준
+
+- 모바일 폭에서 `drawer`, `stepper`, `property grid`가 가로 넘침 없이 동작하는지 확인
+- Plan 상세와 설정 화면에 붙였을 때 기존 `antd` 기본 컴포넌트 조합보다 반복 코드가 줄어드는지 확인
+- 읽기 전용 화면과 편집 화면에서 같은 컴포넌트를 무리 없이 재사용할 수 있는지 확인
+
+## 메모
+
+- 다음 후보 구현 시에는 `samples/BaseSample.tsx`, `samples/Sample.tsx`, 필요 시 `plugins/*.plugin.ts`를 같은 묶음으로 준비
+- Docs 문서에는 목적, 주요 props, 적용 위치, 확장 포인트를 함께 기록
diff --git a/docs/components/evidence-attachment-strip-ui.md b/docs/components/evidence-attachment-strip-ui.md
new file mode 100755
index 0000000..f514db9
--- /dev/null
+++ b/docs/components/evidence-attachment-strip-ui.md
@@ -0,0 +1,46 @@
+# Evidence Attachment Strip UI
+
+## 목적
+
+Plan/Board 계열 화면에서 반복되는 산출물 카드, 링크, 미리보기 진입 UI를 공통 스트립으로 정리하는 컴포넌트입니다.
+
+## 지원 타입
+
+- `image`
+- `markdown`
+- `code`
+- `text`
+- `json`
+- `preview`
+- `video`
+- `audio`
+- `pdf`
+- `empty`
+
+## 주요 props
+
+- `attachments`
+- `onPreview`
+- `onCopy`
+- `maxVisible`
+- `compact`
+- `emptyText`
+- `title`
+- `description`
+
+## 기본 액션
+
+- 링크 열기
+- 복사
+- 미리보기 진입
+
+## 적용 예시
+
+- `PlanBoardPage`의 `WorklogEvidenceTab` 산출물 Preview 영역
+- 작업일지/스크린샷/로그/preview 링크 혼합 카드 목록
+- 모바일 보조 패널 또는 상세 모달의 compact 첨부 목록
+
+## 확장 포인트
+
+- `EvidenceAttachmentPreviewBody`를 별도 export 하므로 상세 모달 본문에서 같은 렌더러를 재사용할 수 있습니다.
+- `copyValue`, `language`, `format`을 항목별로 제어해 코드/텍스트/경로형 산출물 표현을 조정할 수 있습니다.
diff --git a/docs/components/input.md b/docs/components/input.md
new file mode 100755
index 0000000..24073ce
--- /dev/null
+++ b/docs/components/input.md
@@ -0,0 +1,66 @@
+# Input
+
+## 목적
+
+Ant Design `Input`을 기반으로 하되, 타이핑 중에는 내부 상태만 변경하고 `Enter` 또는 `blur` 시점에만 외부 `onChange`를 호출하는 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/primitives/input
+├─ plugins/
+│  ├─ index.ts
+│  └─ input.plugin.ts
+├─ samples/
+│  ├─ Sample.tsx
+│  └─ ValidInputSample.tsx
+├─ types/
+│  ├─ index.ts
+│  └─ input.ts
+├─ InputUI.tsx
+└─ index.ts
+```
+
+## 동작 방식
+
+- 입력 중에는 내부 `draftValue`만 변경
+- `Enter` 시 외부 `onChange` 호출
+- `blur` 시 외부 `onChange` 호출
+- 검증이나 추가 기능은 `commitPlugins`로 주입
+- 나머지 props는 Ant Design `InputProps`를 그대로 전달
+
+## 샘플 규칙
+
+- `samples/Sample.tsx`: 기본형 `InputUI`
+- `samples/ValidInputSample.tsx`: validation plugin을 적용한 확장 샘플
+
+## 사용 예시
+
+```tsx
+<InputUI
+  value={value}
+  placeholder="입력 후 Enter"
+  onChange={(event) => {
+    setValue(event.target.value);
+  }}
+/>
+```
+
+```tsx
+<InputUI
+  value={value}
+  placeholder="3글자 이상만 허용"
+  commitPlugins={[
+    createValidInputPlugin(({ nextValue }) => nextValue.trim().length >= 3),
+  ]}
+  onChange={(event) => {
+    setValue(event.target.value);
+  }}
+/>
+```
+
+## 참고
+
+- 외부에서 제어하는 값은 확정 시점에만 변경됩니다.
+- `InputUI.tsx` 하나만 두고 기능은 plugin으로 확장하는 구조입니다.
+- API 게시판이나 문서 예시는 `samples/Sample.tsx`를 대표 샘플로 사용합니다.
diff --git a/docs/components/popup.md b/docs/components/popup.md
new file mode 100755
index 0000000..6838cb1
--- /dev/null
+++ b/docs/components/popup.md
@@ -0,0 +1,35 @@
+# Popup Input
+
+## 목적
+
+`[input][button][readonly input]` 형태로 검색어 입력, 버튼 액션, 선택 결과 표시를 한 줄에서 처리하는 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/popup
+├─ PopupUI.tsx
+├─ index.ts
+├─ plugins/
+├─ samples/
+└─ types/
+```
+
+## 주요 props
+
+- `value`, `defaultValue`
+- `resultValue`
+- `onChange`
+- `onButtonClick`
+- `buttonText`
+- `inputPlaceholder`
+- `resultPlaceholder`
+
+## plugins
+
+- `createPopupButtonTextPlugin`
+- `createPopupResultPlaceholderPlugin`
+
+## 샘플
+
+- 대표 샘플: `src/components/inputs/popup/samples/Sample.tsx`
diff --git a/docs/components/previewer-ui.md b/docs/components/previewer-ui.md
new file mode 100755
index 0000000..c42f018
--- /dev/null
+++ b/docs/components/previewer-ui.md
@@ -0,0 +1,30 @@
+# Previewer UI
+
+## 목적
+
+다양한 데이터를 공통 카드 형태로 미리보기할 수 있는 previewer 컴포넌트입니다.
+
+## 지원 타입
+
+- `text`
+- `json`
+- `code`
+- `image`
+- `markdown`
+- `empty`
+
+## 추가로 유용한 preview 타입
+
+- `markdown`: 작업일지, 문서 미리보기
+- `empty`: 파일 미선택, 데이터 없음 상태
+
+## 주요 props
+
+- `type`
+- `title`
+- `description`
+- `value`
+- `language`
+- `imageAlt`
+- `height`
+- `toolbar`
diff --git a/docs/components/process-flow-ui.md b/docs/components/process-flow-ui.md
new file mode 100755
index 0000000..0d92cad
--- /dev/null
+++ b/docs/components/process-flow-ui.md
@@ -0,0 +1,108 @@
+# Process Flow UI
+
+## 목적
+
+Plan, Board, History 화면에서 공통으로 사용할 수 있는 단계형 진행 표시 컴포넌트입니다.
+현재 단계, 완료 단계, 실패 단계, 다음 대기 단계를 한 번에 보여주며 가로/세로 배치와 compact 모드를 지원합니다.
+
+## 폴더 구조
+
+```text
+src/components/processFlow
+├─ samples/
+│  └─ BaseSample.tsx
+├─ types/
+│  ├─ index.ts
+│  └─ process-flow.ts
+├─ ProcessFlowUI.css
+├─ ProcessFlowUI.tsx
+└─ index.ts
+```
+
+## 기본 Props
+
+```ts
+type ProcessFlowStepStatus = 'complete' | 'current' | 'failed' | 'pending';
+
+type ProcessFlowStep = {
+  key: string;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: ProcessFlowStepStatus;
+};
+
+type ProcessFlowUIProps = {
+  steps: ProcessFlowStep[];
+  currentStepKey?: string;
+  direction?: 'horizontal' | 'vertical';
+  compact?: boolean;
+  showConnector?: boolean;
+  onStepClick?: (step: ProcessFlowStep, index: number) => void;
+  statusIcons?: Partial<Record<ProcessFlowStepStatus, ReactNode>>;
+  statusStyles?: Partial<Record<ProcessFlowStepStatus, Partial<ProcessFlowStatusAppearance>>>;
+  statusLabels?: Partial<Record<ProcessFlowStepStatus, string>>;
+};
+```
+
+## 동작 규칙
+
+- `step.status` 가 있으면 해당 상태를 우선 사용합니다.
+- `step.status` 가 없으면 `currentStepKey` 기준으로 이전 단계는 `complete`, 현재 단계는 `current`, 이후 단계는 `pending` 으로 계산합니다.
+- `direction="horizontal"` 은 넓은 화면에서 단계 흐름을 한 줄로 보여주고, 모바일 폭에서는 자동으로 세로 스택으로 바뀝니다.
+- `direction="vertical"` 은 긴 설명이나 운영 절차처럼 텍스트가 많은 흐름에 적합합니다.
+- `compact` 는 카드 안쪽, 테이블 상세, 모바일 요약 영역처럼 밀도가 필요한 구간에 사용합니다.
+
+## 기본 예시
+
+```tsx
+import { ProcessFlowUI } from '@/components/processFlow';
+
+const steps = [
+  { key: 'created', label: '등록' },
+  { key: 'working', label: '작업중' },
+  { key: 'done', label: '작업완료' },
+  { key: 'released', label: '릴리즈완료' },
+  { key: 'completed', label: '완료' },
+];
+
+export function PlanStatusFlow() {
+  return <ProcessFlowUI steps={steps} currentStepKey="working" />;
+}
+```
+
+## 상태 확장 예시
+
+```tsx
+import { CheckOutlined, SyncOutlined } from '@ant-design/icons';
+
+<ProcessFlowUI
+  steps={steps}
+  currentStepKey="released"
+  statusIcons={{
+    complete: <CheckOutlined />,
+    current: <SyncOutlined spin />,
+  }}
+  statusStyles={{
+    current: {
+      accent: '#7c3aed',
+      accentSoft: 'rgba(124, 58, 237, 0.12)',
+      border: 'rgba(124, 58, 237, 0.22)',
+      background: 'linear-gradient(180deg, rgba(245, 243, 255, 0.98) 0%, rgba(237, 233, 254, 0.84) 100%)',
+      text: '#4c1d95',
+      connector: 'rgba(124, 58, 237, 0.28)',
+    },
+  }}
+/>
+```
+
+## 적용 예시
+
+- Plan 상세: `등록 -> 작업중 -> 작업완료 -> 릴리즈완료 -> 완료`
+- release/main 반영 대기 흐름 표시
+- Board 자동화 접수 후 현재 진행 단계 요약
+
+## 재사용 가이드
+
+- 공통 운영 상태를 이미 문자열로 보유하고 있다면 화면 레이어에서 `steps` 와 `currentStepKey` 로만 변환해서 바로 사용할 수 있습니다.
+- 상태 라벨이 운영 용어와 다르면 `statusLabels` 로 화면별 텍스트만 바꿉니다.
+- 프로젝트 고유 색이나 아이콘이 필요하면 `statusStyles`, `statusIcons` 만 덮어쓰고 기본 레이아웃은 유지합니다.
diff --git a/docs/components/search-command.md b/docs/components/search-command.md
new file mode 100755
index 0000000..f8731fa
--- /dev/null
+++ b/docs/components/search-command.md
@@ -0,0 +1,23 @@
+# Search Command
+
+## 목적
+
+문서, API, 컴포넌트, 위젯을 키워드로 빠르게 찾고 바로 이동할 수 있는 통합 검색 모달입니다.
+
+## 특징
+
+- `AutoComplete` 기반 추천 드롭다운
+- 모달 오픈 시 입력창 자동 포커스
+- `Enter`, 항목 선택, 바깥 클릭, `Esc`로 닫기/이동
+- 모바일 상단 제스처와 연결 가능
+
+## 주요 props
+
+- `open`
+- `options`
+- `onClose`
+
+## 샘플/연결
+
+- `src/components/search/SearchCommandModal.tsx`
+- `src/layer/search/context/SearchLayerContext.tsx`
diff --git a/docs/components/select.md b/docs/components/select.md
new file mode 100755
index 0000000..632e18a
--- /dev/null
+++ b/docs/components/select.md
@@ -0,0 +1,34 @@
+# Select Input
+
+## 목적
+
+`code/value` 데이터를 받아 실제 값은 `code`로 유지하고, 드롭다운 표시와 검색은 `value` 기준으로 처리하는 select combo 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/select
+├─ SelectUI.tsx
+├─ index.ts
+├─ plugins/
+├─ samples/
+└─ types/
+```
+
+## 주요 props
+
+- `data: { code, value }[]`
+- `value`, `defaultValue`
+- `onChange(code, item)`
+- `showSearch`
+- `allowClear`
+- `placeholder`
+
+## plugins
+
+- `createSelectPlaceholderPlugin`
+- `createSelectSortPlugin`
+
+## 샘플
+
+- 대표 샘플: `src/components/inputs/select/samples/Sample.tsx`
diff --git a/docs/components/status-badge.md b/docs/components/status-badge.md
new file mode 100755
index 0000000..b718764
--- /dev/null
+++ b/docs/components/status-badge.md
@@ -0,0 +1,106 @@
+# StatusBadge
+
+## 목적
+
+상태 값을 간단한 UI 배지로 표현하는 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/status-badge
+├─ plugins/
+│  ├─ index.ts
+│  └─ status-badge.plugin.ts
+├─ samples/
+│  └─ Sample.tsx
+├─ types/
+│  ├─ index.ts
+│  └─ status-badge.ts
+├─ StatusBadgeUI.tsx
+└─ index.ts
+```
+
+## 구성 원칙
+
+- `StatusBadgeUI.tsx`: 실제 UI 렌더링
+- `types/`: props, plugin input 타입 관리
+- `plugins/`: 외부 입력 변환, props 후처리, 커링 플러그인 관리
+- `samples/Sample.tsx`: 대표 샘플
+
+공통 플러그인 제네릭은 `src/types/component-plugin.ts` 에서 관리합니다.
+
+## 기본 Props
+
+```ts
+type StatusBadgeProps = {
+  label: string;
+  tone?: 'success' | 'warning' | 'error' | 'processing' | 'default';
+};
+```
+
+## Plugin Input 예시
+
+```ts
+type StatusBadgePluginInput = {
+  text: string;
+  status?: 'ready' | 'working' | 'blocked' | 'done';
+};
+```
+
+## 공통 Plugin 타입
+
+```ts
+type PropsPlugin<TProps> = (props: TProps) => TProps;
+
+type ComponentPlugin<TInput, TProps = TInput> = (input: TInput) => TProps;
+
+type ComponentPluginFactory<TArgs extends unknown[] = [], TInput = unknown, TProps = TInput> =
+  (...args: TArgs) => ComponentPlugin<TInput, TProps>;
+```
+
+`PropsPlugin<TProps>` 는 질문하신 `plugin<T>(T props) => T` 형태를 직접 표현합니다.  
+`ComponentPlugin` 과 `ComponentPluginFactory` 는 입력 타입과 UI props 타입이 다르거나, 커링이 필요한 경우까지 확장하기 위한 타입입니다.
+
+## 여러 Plugin 합성
+
+```ts
+function plugins<TProps>(
+  props: TProps,
+  pluginList: ReadonlyArray<PropsPlugin<TProps>>,
+): TProps
+```
+
+`plugins<T>(props, Plugin[])` 형태로 여러 props 플러그인을 순서대로 적용합니다.
+
+## Plugin 구현 예시
+
+```ts
+const mapStatusBadgeInputToProps: ComponentPlugin<
+  StatusBadgePluginInput,
+  StatusBadgeProps
+> = (input) => ({
+  label: input.text,
+  tone: input.status ? statusToneMap[input.status] : 'default',
+});
+
+const createStatusBadgeTonePlugin: ComponentPluginFactory<
+  [options?: StatusBadgePluginOptions],
+  StatusBadgeProps
+> = (options) => (props) => ({
+  ...props,
+  tone: props.tone === 'default' ? options?.fallbackTone ?? 'default' : props.tone,
+});
+```
+
+## Sample 활용 목적
+
+- API 게시판에서 예제 UI 노출
+- 문서 페이지에서 동작 방식 설명
+- QA 시 컴포넌트 빠른 확인
+
+## 확장 방향
+
+- `map input -> props` 와 `props -> props` 플러그인 체인을 조합
+- `plugins(props, pluginList)` 로 여러 후처리 플러그인 적용
+- 기본형은 `PropsPlugin<TProps>` 로, 확장형은 `ComponentPluginFactory` 로 표준화
+- 샘플 자동 수집 페이지 구성
diff --git a/docs/components/stepper.md b/docs/components/stepper.md
new file mode 100755
index 0000000..8b9adf1
--- /dev/null
+++ b/docs/components/stepper.md
@@ -0,0 +1,43 @@
+# Stepper
+
+## 목적
+
+여러 단계를 순서대로 표시하고 현재 진행 위치를 강조하는 stepper 컴포넌트입니다.
+
+## 구현 위치
+
+```text
+src/components/stepper
+├─ StepperUI.tsx
+├─ index.ts
+├─ types.ts
+└─ samples/
+   └─ BaseSample.tsx
+```
+
+## 특징
+
+- 내부적으로 `ProcessFlowUI`를 재사용해 동일한 상태 표현과 스타일을 유지합니다.
+- `horizontal`, `vertical` 두 방향을 지원합니다.
+- `currentStepKey`만 넘겨도 현재 단계를 기준으로 완료/진행중/대기 상태를 계산합니다.
+- 각 단계에 `status`를 직접 지정하면 수동 상태 제어도 가능합니다.
+- `compact`, `showConnector`, `statusLabels`, `statusIcons`, `statusStyles`를 그대로 사용할 수 있습니다.
+
+## 기본 예시
+
+```tsx
+<Stepper
+  steps={[
+    { key: 'draft', label: '초안' },
+    { key: 'review', label: '검토' },
+    { key: 'done', label: '완료' },
+  ]}
+  currentStepKey="review"
+/>
+```
+
+## 참고
+
+- `Stepper`와 `StepperUI`를 함께 export하므로 둘 중 하나를 선택해 사용할 수 있습니다.
+- `ProcessFlowUI`의 별칭 성격 컴포넌트이므로 동작 규칙과 스타일 계열은 동일합니다.
+- 대표 샘플은 `src/components/stepper/samples/BaseSample.tsx`를 사용합니다.
diff --git a/docs/components/window-ui.md b/docs/components/window-ui.md
new file mode 100755
index 0000000..c308890
--- /dev/null
+++ b/docs/components/window-ui.md
@@ -0,0 +1,27 @@
+# Window UI
+
+## 목적
+
+부모 영역 안에서 이동 가능한 모달 스타일 윈도우를 제공합니다.
+
+## 특징
+
+- 헤더 작업줄 드래그 이동
+- 부모 영역 내부로 이동 범위 제한
+- 모서리/변 리사이즈
+- 리사이즈 테두리 더 넓은 히트영역
+- 리사이즈 변/모서리 더블클릭 및 더블탭 시 해당 방향으로 즉시 확장
+- 최소화 / 최대화 / 복원
+- 헤더 더블클릭 최대화 토글
+
+## 주요 props
+
+- `title`
+- `subtitle`
+- `defaultFrame`
+- `minWidth`
+- `minHeight`
+
+## 샘플
+
+- `src/components/window/samples/Sample.tsx`
diff --git a/docs/features/plan-automation.md b/docs/features/plan-automation.md
new file mode 100755
index 0000000..3c69e29
--- /dev/null
+++ b/docs/features/plan-automation.md
@@ -0,0 +1,144 @@
+# Plan 자동화와 구현 방식
+
+## 목적
+
+Plan 자동화 기능의 데이터 구조, API 연동 방식, release 검수 연계 방식을 정리합니다.
+
+## 구현 위치
+
+- 화면 진입: `src/app/main/MainContent.tsx`
+- 메뉴/라우팅: `src/app/main/routes.tsx`
+- 메인 보드: `src/features/planBoard/PlanBoardPage.tsx`
+- release 검수: `src/features/planBoard/ReleaseReviewPage.tsx`
+- 스케줄: `src/features/planBoard/PlanSchedulePage.tsx`
+- 차트: `src/features/planBoard/charts.tsx`
+- API 클라이언트: `src/features/planBoard/api.ts`
+- 빠른 필터: `src/features/planBoard/quickFilters.ts`
+- 메모 마스킹: `src/features/planBoard/noteMasking.ts`
+
+## 데이터 모델
+
+핵심 타입은 `src/features/planBoard/types.ts`에 있습니다.
+
+- `PlanItem`: 보드의 기본 작업 항목
+- `PlanDraft`: 생성/수정용 초안
+- `PlanIssueHistory`: 이슈 이력
+- `PlanActionHistory`: 조치 이력
+- `PlanSourceWorkHistory`: 브랜치, diff, preview, 파일 스냅샷 등 소스 작업 증적
+- `PlanReleaseReview`: release 검수 상태와 메타데이터
+- `PlanReleaseReviewBoardItem`: 검수 화면용 합성 모델
+
+자동화 유형 값은 다음 기준으로 사용합니다.
+
+- `plan`: Markdown 스타일 Plan 문서 등록 및 접수용
+- `auto_worker`: 실제 Codex 자동 작업 실행용
+- `command_execution`, `non_source_work`: 기존 실행 분류 유지
+
+기존 저장값인 `plan_registration`, `general_development`는 서버에서 각각 `plan`, `auto_worker`로 정규화합니다.
+
+## API 연동 방식
+
+기본 API 베이스 URL 규칙:
+
+- `VITE_WORK_SERVER_URL`이 있으면 그 값을 사용
+- 없으면 `/api` 사용
+- `/api`가 실패하면 브라우저 origin 기준 `3100/api`로 fallback 재시도
+
+요청 공통 규칙:
+
+- GET은 기본 `no-store`
+- 타임아웃 8초
+- 등록된 토큰이 있으면 `X-Access-Token` 헤더 추가
+- 클라이언트 식별 헤더는 `appendClientIdHeader`로 추가
+
+## 주요 엔드포인트
+
+- `POST /plan/setup`: 초기 테이블/구성 준비
+- `GET /plan/items`: Plan 목록 조회
+- `POST /plan/items`: Plan 등록
+- `PATCH /plan/items/:id`: Plan 수정
+- `DELETE /plan/items/:id`: Plan 삭제
+- `POST /plan/items/:id/actions/:action`: 상태 전이/재처리 액션
+- `GET /plan/items/:id/issues`: 이슈 이력
+- `POST /plan/items/:id/issues/action`: 이슈 조치
+- `GET /plan/items/:id/actions`: 조치 이력
+- `POST /plan/items/:id/actions/note`: 추가 조치 메모
+- `GET /plan/items/:id/source-works`: 소스 작업 이력
+- `GET /plan/items/:id/source-works/:sourceWorkId`: 특정 소스 작업 상세
+- `GET /plan/release-reviews`: release 검수 목록
+- `PATCH /plan/release-reviews/:planItemId`: release 검수 상태 저장
+
+## 빠른 필터 규칙
+
+`quickFilters.ts`에서 다음 조건을 별도 유틸로 관리합니다.
+
+- `working`: 상태가 `작업중`
+- `release-pending-main`: `릴리즈완료`이거나 main 반영 대기/진행/실패 상태
+- `automation-failed`: 워커 실패 상태 집합에 포함
+
+이 구조 덕분에 사이드바, 검색, deep link가 같은 기준을 공유합니다.
+
+## release 검수 방식
+
+release 검수 화면은 Plan 본문과 분리되어 있지만 같은 데이터 축을 사용합니다.
+
+- 검수 필터: 전체, main 대기, 검수완료, 수정필요
+- 검수 메모 저장
+- 관련 컴포넌트/위젯 샘플 바로 열기
+- 체크된 페이지/샘플 ID 기반 진행률 계산
+- 전체 대상 확인 시 자동으로 `approved`
+- 일부 확인 또는 메모 작성 시 `reviewing`
+- 수정 요청 상태에서 체크가 덜 끝난 경우 `changes-requested` 유지
+
+검수 메타데이터에는 다음 값이 들어갈 수 있습니다.
+
+- `summary`
+- `pageSelectionIds`
+- `checkedPageSelectionIds`
+- `docIds`
+- `componentIds`
+- `widgetIds`
+
+## 소스 작업 증적
+
+Plan 상세에서는 최신 자동 작업 결과를 탭 형태로 확인할 수 있습니다.
+
+- 작업란
+- 전체소스
+- diff
+- 커맨드 로그
+- 증적 Preview
+- 파일 목록
+
+`PlanSourceWorkHistory`에는 브랜치명, 커밋 해시, preview URL, 변경 파일, diff 텍스트, 파일 스냅샷이 포함됩니다.
+
+Codex 실행 로그에 `tokens used`가 잡히면 source work 기록과 상세 상단 상태 영역에 함께 표기합니다.
+
+## 차트 집계 방식
+
+`charts.tsx`는 Plan 전체 목록을 주기적으로 다시 불러와 최근 성과를 집계합니다.
+
+- 일별 최근 7일
+- 주별 최근 8주
+- 등록 수
+- 기능확인완료 수
+- 작업완료 수
+- main 반영 수
+
+현재 스냅샷은 전체, 등록, 작업중, 기능확인완료, 완료, main반영 개수를 함께 제공합니다.
+
+## 검색/진입 연계
+
+통합 검색 옵션은 `src/app/main/mainView/searchOptions.ts`에서 정의합니다.
+
+- `자동화 / 자동화`
+- `자동화 / plan`
+- `자동화 / release 검수`
+
+검색에서 선택하면 해당 메뉴로 이동하고 필요한 경우 문서/컴포넌트 위치로 스크롤합니다.
+
+## 유지보수 메모
+
+- 상태 문자열과 워커 상태 문자열은 문자열 상수 기반이라 백엔드와 값이 어긋나지 않게 같이 관리해야 합니다.
+- 스케줄 API는 여러 경로 후보를 순차 시도하므로 서버 경로 통합 시 `api.ts` 정리가 필요합니다.
+- release 검수 메타데이터 스키마를 늘릴 때는 `ReleaseReviewPage`의 진행률 계산 규칙도 같이 점검해야 합니다.
diff --git a/docs/features/plan-board-review.md b/docs/features/plan-board-review.md
new file mode 100755
index 0000000..bf27ff4
--- /dev/null
+++ b/docs/features/plan-board-review.md
@@ -0,0 +1,114 @@
+# Plan 자동화 보드
+
+## 목적
+
+`src/features/planBoard`는 Plan 등록부터 자동 작업, release 검수, main 동기화 전 단계까지 한 화면 흐름으로 관리하는 기능 묶음입니다.
+현재 문서는 기존 개선 제안 메모를 대신해 실제 구현 기준의 운영 문서로 사용합니다.
+
+## 화면 구성
+
+- `all`: 전체 자동화 목록
+- `in-progress`: 완료 전 항목 중심 목록
+- `error`: 열린 이슈가 있는 항목 중심 목록
+- `done`: release 완료 기준 목록
+- `board`: 상세 편집과 이력 조회 중심 보드
+- `release-review`: release 검수 전용 화면
+- `charts`: 최근 작업 추이 차트
+- `schedule`: 반복 등록 스케줄 관리
+- `history`: 향후 이력 확장 메뉴용 영역
+
+라우팅과 메뉴 정의는 `src/app/main/routes.tsx`, `src/app/main/MainContent.tsx`에서 관리합니다.
+
+## 문서 반영 방식
+
+- 이 문서를 포함한 `docs/features/*.md`는 메인 앱 `Docs / 기능문서` 메뉴에서 자동 수집됩니다.
+- 문서 추가만으로 별도 라우트를 만들지는 않으며, `Docs` 화면의 markdown 목록에 합류하는 방식입니다.
+- 노출 순서와 폴더 라벨은 `src/app/main/layout/useMainLayoutData.ts`, `src/app/main/routes.tsx`에서 결정합니다.
+
+## 상태 모델
+
+기본 상태는 `src/features/planBoard/types.ts`에 정의되어 있습니다.
+
+- `등록`
+- `작업중`
+- `작업완료`
+- `릴리즈완료`
+- `완료`
+
+실제 자동화 진행은 별도 `workerStatus`로 관리합니다. 대표값은 다음과 같습니다.
+
+- 진행: `브랜치생성중`, `자동작업중`, `release반영중`, `main반영중`
+- 대기: `브랜치준비`, `release반영대기`, `main반영대기`
+- 실패: `브랜치실패`, `자동작업실패`, `release반영실패`, `main반영실패`
+
+즉, 사용자에게 보이는 업무 상태와 자동 워커 상태를 분리해서 표현합니다.
+
+## 주요 사용 흐름
+
+1. 작업을 등록하면 Plan 항목이 생성됩니다.
+2. `작업시작` 또는 자동화에 따라 브랜치 준비와 작업이 진행됩니다.
+3. 작업이 완료되면 release 반영 상태와 main 반영 대기 여부가 추적됩니다.
+4. release 검수 화면에서 샘플/위젯/변경 파일을 확인하고 검수 상태를 갱신합니다.
+5. main 반영이 끝나면 최종 완료 흐름으로 정리됩니다.
+
+## 목록 기능
+
+`PlanBoardPage.tsx` 기준으로 다음 기능이 구현되어 있습니다.
+
+- 검색: `workId`, 메모, 상태, 브랜치, 워커 상태, 이슈 태그 검색
+- 보조 필터: 작업자 상태, release 상태, main 상태, 이슈 상태
+- 빠른 필터: 현재 작업중, 현재 release 상태, 현재 자동화 실패
+- 정렬: 진행 목록에서는 자동화 우선순위를 먼저 적용하고, 그 외에는 최근 갱신순 정렬
+- 페이지네이션: 목록 10개 단위
+
+## 상세 기능
+
+선택한 Plan 항목은 오버레이에서 상세 확인과 후속 조치를 처리합니다.
+
+- 원본 요청 보기
+- 작업 체크리스트
+- 릴리즈 준비 요약
+- 소스 작업 내역
+- 조치 / 이슈 이력
+- 추가 조치 기록
+- 이슈 조치 기록
+- 작업 소스 / diff / command log / 증적 / 파일 뷰어
+
+원본 요청은 `startedAt` 이후 잠기며, 이후 변경은 조치 이력으로 누적합니다.
+
+## 실행 액션
+
+상태와 `workerStatus`에 따라 다음 액션 버튼이 조건부로 노출됩니다.
+
+- `작업시작`
+- `작업완료 처리`
+- `브랜치 재시도`
+- `작업 재처리`
+- `release 반영 재시도`
+- `작업취소`
+- `main 일괄 반영 요청`
+
+세부 액션은 `/plan/items/:id/actions/:action` API로 실행됩니다.
+
+## 자동 새로고침과 알림
+
+- 자동화가 진행/대기 상태일 때만 자동 조회 타이머가 동작합니다.
+- 주기는 `appConfig.automation.autoRefreshIntervalSeconds`를 따릅니다.
+- 길게 눌러 자동 조회 On/Off를 전환할 수 있습니다.
+- 설정값에 따라 자동화 시작/실패 메시지를 toast로 알립니다.
+
+## 권한 처리
+
+권한 토큰이 없는 경우 조회 중심으로 동작합니다.
+
+- 수정/삭제/조치/스케줄 저장 비활성화
+- 민감한 요청 메모는 마스킹
+- 소스 작업 상세/증적 확인 제한
+
+토큰 처리와 헤더 부착은 `src/app/main/tokenAccess.ts`, `src/features/planBoard/api.ts`에서 담당합니다.
+
+## 연관 문서
+
+- 자동화/구현 방식: `docs/features/plan-automation.md`
+- 스케줄 사용법: `docs/features/plan-schedule.md`
+- 활용 가이드: `docs/features/plan-usage.md`
diff --git a/docs/features/plan-schedule.md b/docs/features/plan-schedule.md
new file mode 100755
index 0000000..43b1b6d
--- /dev/null
+++ b/docs/features/plan-schedule.md
@@ -0,0 +1,98 @@
+# Plan 스케줄 사용법
+
+## 목적
+
+반복적으로 등록되는 자동화 요청을 수동 입력 없이 생성하기 위한 스케줄 화면 사용법과 제약을 정리합니다.
+
+## 구현 위치
+
+- 화면: `src/features/planBoard/PlanSchedulePage.tsx`
+- API: `src/features/planBoard/api.ts`
+
+## 제공 기능
+
+- 스케줄 목록 조회
+- 신규 스케줄 등록
+- 기존 스케줄 수정/삭제
+- 즉시 실행 옵션 설정
+- 활성/비활성 전환
+- 반복 주기 또는 매일 실행 시간 설정
+- 다음 실행 예정 시각 계산 표시
+
+## 입력 항목
+
+- `workId`: 반복 등록할 작업 ID
+- `note`: 매번 생성될 요청 메모
+- `automationType`: 자동화 유형
+  - `plan`: Markdown 스타일 Plan 문서 등록/접수
+  - `auto_worker`: 실제 자동 작업 실행
+  - `command_execution`, `non_source_work`: 기존 분류 유지
+- `releaseTarget`: 반영 대상 브랜치
+- `jangsingProcessingRequired`: 기능동작확인 필요 여부
+- `autoDeployToMain`: main 자동 반영 대상 여부
+- `enabled`: 스케줄 사용 여부
+- `immediateRunEnabled`: 생성 직후 바로 등록 허용 여부
+
+## 스케줄 모드
+
+### 1. 반복 주기
+
+`interval` 모드입니다.
+
+- 값 + 단위로 반복 주기 설정
+- 단위: `minute`, `hour`, `day`, `week`, `month`
+- 내부 저장은 `repeatIntervalMinutes` 기준
+
+### 2. 매일 시간
+
+`daily` 모드입니다.
+
+- `HH:mm` 형식 시간 사용
+- 시간 계산은 `Asia/Seoul` 기준
+- 하루 1회 등록에 적합
+
+## 유효성 규칙
+
+현재 화면에서 다음 검사를 수행합니다.
+
+- 작업 ID 필수
+- 메모 필수
+- 같은 작업 ID 중복 금지
+- `interval` 모드 최소 10분 이상
+- 비활성 스케줄은 자동 등록되지 않음을 경고
+
+## 다음 실행 시각 계산
+
+다음 실행 시각은 화면에서 즉석 계산해 보여줍니다.
+
+- 비활성 상태면 `중지`
+- 직전 등록 이력이 없고 즉시 실행이 켜져 있으면 현재 시각 기준
+- `daily`는 오늘 KST 실행 여부를 보고 오늘 또는 다음 날 시각 결정
+- `interval`은 마지막 등록 시각 또는 생성 시각 기준으로 다음 주기를 계산
+
+## 추천 운영 방식
+
+- 자주 반복되는 운영 작업은 고정 `workId`로 등록
+- 사람이 검토해야 하는 작업은 `autoDeployToMain`을 끄고 release 검수 단계에서 확인
+- 단순 알림성/반복성 작업은 `immediateRunEnabled`를 켜서 누락 없이 시작
+- 짧은 주기 스케줄은 10분 이상으로 유지해 중복 생성 위험을 낮춤
+
+## API 경로 메모
+
+스케줄 API는 서버 구현 차이를 흡수하기 위해 여러 경로를 순차 시도합니다.
+
+- `/plan/scheduled-tasks`
+- `/plan/schedule/tasks`
+- `/plan/schedule`
+- `/plan/schedules`
+- `/plans/...` 변형 경로
+
+서버 경로가 고정되면 후보 경로를 줄여도 됩니다.
+
+## 테스트 포인트
+
+- interval/daily 전환 시 값 보존이 자연스러운지 확인
+- 같은 `workId` 중복 저장이 막히는지 확인
+- KST 기준 다음 실행 시각이 기대와 일치하는지 확인
+- 비활성 스케줄이 자동 생성되지 않는지 확인
+- 토큰 없는 사용자에게 저장/삭제가 제한되는지 확인
diff --git a/docs/features/plan-usage.md b/docs/features/plan-usage.md
new file mode 100755
index 0000000..9607f40
--- /dev/null
+++ b/docs/features/plan-usage.md
@@ -0,0 +1,58 @@
+# Plan 활용 가이드
+
+## 목적
+
+운영자, 검수자, 개발자가 현재 Plan 기능을 어떤 순서로 써야 하는지 정리한 실무 가이드입니다.
+
+## 빠른 진입
+
+- 전체 목록 확인: `자동화 / 자동화`
+- 상세 처리 중심: `자동화 / plan`
+- release 검수: `자동화 / release 검수`
+- 추이 확인: `자동화 / 차트`
+- 반복 등록: `자동화 / 스케줄`
+
+통합 검색에서도 `plan`, `release 검수`, `스케줄`로 바로 이동할 수 있습니다.
+
+## 운영자 기준 사용 순서
+
+1. `자동화 / 자동화`에서 작업을 찾습니다.
+2. 필요하면 빠른 필터로 `현재 작업중`, `현재 release 상태`, `현재 자동화 실패`를 좁힙니다.
+3. 상세 오버레이에서 현재 상태, 이슈, 최근 소스 작업을 확인합니다.
+4. 상황에 맞는 액션을 실행합니다.
+5. 후속 설명은 조치 기록 또는 이슈 조치 기록으로 남깁니다.
+
+## 검수자 기준 사용 순서
+
+1. `release 검수`에서 `main 대기` 필터를 우선 봅니다.
+2. 검수 메모와 변경 파일, 관련 컴포넌트/위젯 샘플을 확인합니다.
+3. 확인한 항목은 체크 상태로 반영합니다.
+4. 이상 없으면 `검수완료`, 수정이 필요하면 `수정필요`로 저장합니다.
+
+## 개발자 기준 확인 포인트
+
+- 실패 상태면 `workerStatus`와 `lastError`를 먼저 확인
+- 브랜치 누락 계열 실패는 `브랜치 재시도` 또는 `작업 재처리` 판단
+- release/main 반영 관련 문제는 상세의 소스 작업 내역과 diff를 먼저 확인
+- 메모 원문이 잠겨 있으면 추가 조치 기록으로 정정 사유를 남김
+
+## 권한 없는 사용자 동작
+
+- 목록과 검수 현황은 조회 가능
+- 민감 메모는 마스킹
+- 상세 수정/삭제/조치 실행은 제한
+- 소스 작업 상세와 증적 확인도 제한될 수 있음
+
+## 문서와 화면을 함께 운영하는 방법
+
+- 기능 변경 시 `docs/features`를 먼저 갱신
+- 새 문서를 만들면 앱 `Docs / 기능문서`에 자동 노출되는지 함께 확인
+- 증적이 필요한 변경은 Plan 상세의 Preview, diff, 파일 목록으로 확인
+- 작업일지에는 어떤 기능 문서를 왜 수정했는지 함께 남김
+
+## 추천 문서 읽기 순서
+
+1. `docs/features/plan-board-review.md`
+2. `docs/features/plan-automation.md`
+3. `docs/features/plan-schedule.md`
+4. `docs/features/plan-usage.md`
diff --git a/docs/features/project-setup.md b/docs/features/project-setup.md
new file mode 100755
index 0000000..786a648
--- /dev/null
+++ b/docs/features/project-setup.md
@@ -0,0 +1,100 @@
+# 프로젝트 구성 개요
+
+## 목적
+
+현재 저장소의 화면 구조와 문서 체계를 빠르게 파악하기 위한 최신 개요 문서입니다.
+
+## 기술 스택
+
+- React
+- Vite
+- TypeScript
+- Ant Design
+- Recharts
+- React Router
+
+## 최상위 앱 구조
+
+- `src/app/main`: 메인 앱 프레임, 상단 메뉴, 사이드바, 본문, 검색 연동
+- `src/features`: 프로젝트 전용 기능 화면
+- `src/components`: 재사용 가능한 UI 컴포넌트
+- `src/widgets`: 샘플/위젯 단위 UI
+- `docs`: 기능/컴포넌트/작업일지 문서
+- `etc/servers/work-server`: Plan API 연동 서버 자산
+
+## 현재 주요 기능 축
+
+### Docs
+
+- `docs/**/*.md`를 수집해 문서 화면에 노출
+- 작업일지, 기능 문서, 컴포넌트 문서를 같은 흐름으로 탐색
+- `docs/features` 아래 문서는 `Docs / 기능문서` 메뉴에서 동적으로 확인 가능
+
+### APIs
+
+- 컴포넌트 샘플
+- 위젯 샘플
+
+### Plans
+
+- Plan 자동화 목록/상세
+- release 검수
+- 차트
+- 스케줄
+- 히스토리 확장 영역
+
+### Chat
+
+- Codex Live
+- 에러 로그
+
+`Codex Live`는 현재 프로젝트 환경의 `main_project`를 기준 저장소로 사용합니다. 소스 수정이 필요하면 **현재 프로젝트 루트의 로컬 `main` 작업본을 바로 수정**합니다.
+
+일반 채팅 요청과 작업메모 반영 요청도 같은 기준을 따르며, 별도 브랜치 생성 없이 현재 프로젝트 루트에서 바로 수정하는 것을 기본 동작으로 사용합니다.
+
+채팅에서 제공되는 파일/문서/이미지/코드 리소스와 첨부 파일은 세션별로 `public/.codex_chat/<chat-session-id>/resource/...` 아래에 노출됩니다.
+
+### Play
+
+- Layout Editor
+- 저장된 레이아웃 기록
+
+## Plan 기능 구조
+
+Plan 관련 코드는 `src/features/planBoard`에 집중되어 있습니다.
+
+- `PlanBoardPage.tsx`: 자동화 목록과 상세 편집
+- `ReleaseReviewPage.tsx`: release 검수
+- `PlanSchedulePage.tsx`: 반복 등록 스케줄
+- `charts.tsx`: 작업 추이 차트
+- `api.ts`: API 통신
+- `types.ts`: 상태/타입 정의
+
+## 문서 구조
+
+- `docs/worklogs`: 날짜별 작업 기록
+- `docs/features`: 기능 설명과 운영 가이드
+- `docs/components`: 공통 컴포넌트 설명
+- `docs/templates`: 기능/작업일지 템플릿
+
+현재 `docs/features`의 핵심 문서는 다음과 같습니다.
+
+- `project-setup.md`
+- `search-layer.md`
+- `plan-board-review.md`
+- `plan-automation.md`
+- `plan-schedule.md`
+- `plan-usage.md`
+
+## 검색/문서 연계
+
+- 통합 검색 옵션은 `src/app/main/mainView/searchOptions.ts`에서 구성
+- 문서, Plan 화면, 컴포넌트 샘플, 위젯 샘플을 하나의 검색 엔트리로 제공
+- 선택 시 해당 메뉴와 포커스 대상으로 바로 이동
+
+## 운영 메모
+
+- 기능 문서는 구현 파일명과 메뉴명을 그대로 써서 찾기 쉽게 유지
+- `docs/features` 변경분이 보이지 않으면 현재 선택한 Docs 폴더가 `기능문서`인지 먼저 확인
+- Plan 관련 변경은 문서와 라우팅/검색 옵션을 함께 확인
+- 스케줄, release 검수, 차트처럼 화면이 분리된 기능은 개별 문서를 유지
diff --git a/docs/features/search-layer.md b/docs/features/search-layer.md
new file mode 100755
index 0000000..217c06f
--- /dev/null
+++ b/docs/features/search-layer.md
@@ -0,0 +1,22 @@
+# Search Layer
+
+## 목적
+
+통합 검색 모달의 열기/닫기와 검색 옵션 목록을 전역 레이어에서 관리합니다.
+
+## 구조
+
+- `src/layer/search/context`
+- `src/layer/search/hooks`
+- `src/layer/search/types`
+
+## 역할 분리
+
+- `layer/search`: 검색 모달 렌더링, open/close, 옵션 등록
+- `layer/gesture`: 제스처 감지와 검색 열기 트리거
+- `store/appStore`: 현재 페이지와 포커스된 컴포넌트 상태 관리
+
+## 메모
+
+- 검색 UI는 페이지 내부에 직접 두지 않고 레이어에서 렌더링
+- 페이지는 검색 옵션만 계산해서 레이어에 전달
diff --git a/docs/templates/feature-template.md b/docs/templates/feature-template.md
new file mode 100755
index 0000000..45768a9
--- /dev/null
+++ b/docs/templates/feature-template.md
@@ -0,0 +1,25 @@
+# 기능명
+
+## 목적
+
+- 
+
+## 사용자 시나리오
+
+- 
+
+## 화면/동작 설명
+
+- 
+
+## 데이터 및 API
+
+- 
+
+## 예외 처리
+
+- 
+
+## 테스트 포인트
+
+- 
diff --git a/docs/templates/worklog-template.md b/docs/templates/worklog-template.md
new file mode 100755
index 0000000..9f6a64a
--- /dev/null
+++ b/docs/templates/worklog-template.md
@@ -0,0 +1,53 @@
+# YYYY-MM-DD 작업일지
+
+## 오늘 작업
+
+- 
+
+## 이슈 및 해결
+
+- 
+
+## 결정 사항
+
+- 
+
+## 상세 작업 내역
+
+- 
+- 이 섹션에는 파일 목록, 경로 나열, raw diff를 직접 풀어쓰지 말고 작업 흐름과 판단만 정리
+- 파일 목록은 `## 변경/신규 파일`, raw diff는 `## 소스`에서만 기록
+
+## 스크린샷
+
+- 전체 화면 스크린샷 1장은 필수
+- 위젯/컴포넌트 단위 부분 스크린샷은 필요한 만큼 추가
+- 저장소 기준 연결된 스크린샷이 없으면 작업 종료 전 반드시 채움
+
+## 소스
+
+### 파일 1: `path/to/file.tsx`
+
+- 변경 또는 신규 추가 목적과 핵심 내용을 한 줄로 정리
+- `상세 작업 내역`에는 파일 목록이나 raw diff를 다시 쓰지 않음
+- `소스` 탭에서 Codex preview 스타일의 `전체소스 / raw diff` 전환을 제공하므로 여기에는 파일별 raw diff 위주로 남김
+
+```diff
+# 이 파일의 raw diff
+- before
++ after
+```
+
+### 파일 2: `path/to/another-file.ts`
+
+- 필요 없으면 이 섹션은 삭제
+
+## 실행 커맨드
+
+```bash
+```
+
+## 변경/신규 파일
+
+- M path/to/file.tsx
+- A path/to/new-file.ts
diff --git a/docs/test001.md b/docs/test001.md
new file mode 100755
index 0000000..3f0ca1f
--- /dev/null
+++ b/docs/test001.md
@@ -0,0 +1 @@
+테스트MD자동 생성 입니다.
diff --git a/docs/worklogs/2026-03-30.md b/docs/worklogs/2026-03-30.md
new file mode 100755
index 0000000..b72f30f
--- /dev/null
+++ b/docs/worklogs/2026-03-30.md
@@ -0,0 +1,126 @@
+# 2026-03-30 작업일지
+
+## 오늘 작업
+
+- Ant Design 기반 프론트엔드 프로젝트 초기 구조 생성
+- `docs/worklogs`, `docs/features` 문서 폴더 구성
+- 기본 대시보드 스타일의 시작 화면 작성
+- React 19.2.4, Vite 8.0.3 최신 안정 버전으로 업데이트
+- 컴포넌트 샘플 구조를 `plugins/`, `samples/`, `types/`, `xxxUI.tsx` 형태로 정리
+- 공통 플러그인 제네릭과 `plugins<T>(props, pluginList)` 합성 유틸 추가
+- `status-badge` 컴포넌트 샘플과 컴포넌트 문서 작성
+- `InputUI.tsx` 단일 컴포넌트 구조와 validation plugin 기반 입력 샘플 추가
+- 컴포넌트 샘플과 위젯 샘플을 별도 registry로 분리
+- `WidgetShell`, `ApiSampleCardWidget`, 위젯 샘플 레이아웃 추가
+- 컴포넌트 샘플 레이아웃을 좌측 내비게이션 + 우측 상세 카드 구조로 개편
+- 입력 컴포넌트 구조를 `primitives / specialized / composite` 계층으로 재정리
+- Git 저장소 초기화, `main` 브랜치 생성, 원격 `origin` 연결, 초기 커밋 생성
+
+## 이슈 및 메모
+
+- 초기 스택은 `React + Vite + TypeScript + Ant Design`으로 결정
+- `antd` 포함 번들 특성상 빌드 시 청크 크기 경고가 발생함
+- 원격 저장소 `push`는 HTTPS 인증 정보 부재로 실패
+- 샘플 목록은 `samples/Sample.tsx` 기본형과 `samples/*.tsx` 확장형을 구분해 관리하기로 함
+
+## 결정 사항
+
+- 작업일지는 날짜별 Markdown 파일로 관리
+- 기능 문서는 기능 단위 Markdown 파일로 관리
+- 컴포넌트 문서는 `docs/components` 아래에서 관리
+- 컴포넌트 샘플은 `samples/Sample.tsx`를 대표 샘플로 사용
+- 입력 컴포넌트는 `InputUI.tsx` 하나만 두고 기능은 plugin으로 확장
+- 입력 패키지는 `primitives`, `specialized`, `composite` 역할 기준으로 분리
+- 플러그인은 기본적으로 공통 제네릭 타입을 사용하고, 필요 시 커링/팩토리 형태로 확장
+- 여러 props 후처리 플러그인은 `plugins<T>(props, pluginList)` 형태로 합성
+- 샘플 목록은 같은 컴포넌트 기준으로 묶고 `base -> plugin -> feature` 순서로 정렬
+
+## 상세 작업 내역
+
+- 프로젝트 부트스트랩 이후 문서 폴더와 샘플 레지스트리를 함께 정리해 이후 확장 기준을 먼저 마련
+- `status-badge`, `InputUI`를 기준 컴포넌트로 삼아 plugin 합성 구조와 샘플 표시 구조를 동시에 검증
+- 컴포넌트/위젯 샘플을 분리해 API 성격의 문서 화면으로 확장할 수 있는 기본 형태를 준비
+- 원격 저장소 연결까지 완료했지만 인증 이슈로 `push`는 보류 상태로 남음
+
+## 스크린샷
+
+![input](../assets/worklogs/2026-03-30/input.png)
+![status-badge](../assets/worklogs/2026-03-30/status-badge.png)
+
+## 소스
+
+- `src/components/status-badge/StatusBadgeUI.tsx`, `src/components/status-badge/plugins/status-badge.plugin.ts`: 상태 배지 기본 UI와 플러그인 합성 구조를 잡아 샘플 갤러리의 기준 컴포넌트로 삼았습니다.
+- `src/components/inputs/input/InputUI.tsx`: validation plugin 기반 입력 컴포넌트 초안을 잡아 이후 `primitives / specialized / composite` 확장의 출발점으로 사용했습니다.
+- `src/widgets/core/WidgetShell.tsx`: 위젯 본문을 단순 문단이 아니라 자유 레이아웃 컨테이너로 바꿔 카드형 샘플과 대시보드 위젯을 수용하게 했습니다.
+- `docs/templates/worklog-template.md`: 작업일지 템플릿에 상세 내역, 스크린샷, 소스, 실행 커맨드, 변경 파일 섹션을 추가해 증적 기록 형식을 고정했습니다.
+
+```diff
+diff --git a/src/widgets/core/WidgetShell.tsx b/src/widgets/core/WidgetShell.tsx
+-const { Paragraph, Title } = Typography;
++const { Title } = Typography;
+...
+-        <Paragraph className="widget-shell__content">{children}</Paragraph>
++        <div className="widget-shell__content">{children}</div>
+
+diff --git a/docs/templates/worklog-template.md b/docs/templates/worklog-template.md
++## 상세 작업 내역
++## 스크린샷
++## 소스
++
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- A .gitignore
+- A README.md
+- A docs/README.md
+- A docs/components/status-badge.md
+- A docs/features/project-setup.md
+- A docs/templates/feature-template.md
+- A docs/templates/worklog-template.md
+- A docs/worklogs/2026-03-30.md
+- A index.html
+- A package-lock.json
+- A package.json
+- A src/App.tsx
+- A src/components/status-badge/StatusBadgeUI.tsx
+- A src/components/status-badge/index.ts
+- A src/components/status-badge/plugins/index.ts
+- A src/components/status-badge/plugins/status-badge.plugin.ts
+- A src/components/status-badge/samples/Sample.tsx
+- A src/components/status-badge/types/index.ts
+- A src/components/status-badge/types/status-badge.ts
+- A src/main.tsx
+- A src/styles.css
+- A src/types/component-plugin.ts
+- A tsconfig.app.json
+- A tsconfig.json
+- A tsconfig.node.json
+- A vite.config.ts
+
+## 실행 커맨드
++## 변경 파일
+```
+
+## 실행 커맨드
+
+```bash
+npm install
+npm run build
+git init
+git checkout -b main
+git add .
+git commit -m "feat: initialize antd app and component plugin structure"
+```
+
+## 변경 파일
+
+- `README.md`
+- `docs/worklogs/2026-03-30.md`
+- `src/App.tsx`
+- `src/components/status-badge/StatusBadgeUI.tsx`
+- `src/components/status-badge/plugins/status-badge.plugin.ts`
+- `src/components/inputs/input/InputUI.tsx`
+- `src/widgets/core/WidgetShell.tsx`
+- `src/styles.css`
+- `package.json`
+- `vite.config.ts`
diff --git a/docs/worklogs/2026-03-31.md b/docs/worklogs/2026-03-31.md
new file mode 100755
index 0000000..37bdce3
--- /dev/null
+++ b/docs/worklogs/2026-03-31.md
@@ -0,0 +1,173 @@
+# 2026-03-31 작업일지
+
+## 오늘 작업
+
+- 입력 컴포넌트 구조를 `primitives / specialized / composite` 계층으로 재정리
+- 기본 입력을 `src/components/inputs/primitives/input` 아래로 이동
+- 이메일 입력을 `src/components/inputs/specialized/emailInput` 구조로 정리
+- 3분할 입력을 `src/components/inputs/composite/multiInput` 구조로 정리
+- 샘플 및 문서 경로를 새 입력 계층 구조에 맞게 갱신
+- 프로젝트 종속 레이아웃을 `src/features/layout` 아래로 이동
+- `basePath` 기반 공통 markdown preview 컴포넌트와 리스트 구성 추가
+- `docs/**/*.md`까지 읽을 수 있도록 markdown registry 범위 확장
+- `docs` 문서를 좌측 폴더/문서 트리 + 우측 markdown 카드 목록 구조로 구성
+- 좌측 문서 바로가기를 공통 `FolderTreeNav` 기반 접기/펼치기 트리로 정리
+- 구조 변경 내용을 커밋하고 원격 `main` 브랜치로 푸시
+
+## 이슈 및 메모
+
+- 입력 컴포넌트 이름과 패키지명 기준이 중간에 몇 차례 조정됨
+- 샘플 레이아웃과 문서 경로는 구조 변경 시 함께 관리해야 함
+- `src` 기준 glob만 사용하면 프로젝트 루트 `docs/`는 읽히지 않음
+- 빌드는 정상 통과했지만 `antd` 포함 번들로 인해 청크 크기 경고는 계속 발생
+
+## 결정 사항
+
+- 입력 컴포넌트는 역할 기준으로 `primitives`, `specialized`, `composite`로 분리
+- `InputUI`는 primitive로 관리
+- `EmailInputUI`는 specialized 입력으로 관리
+- `MultiInputUI`는 여러 입력을 조합한 composite 입력으로 관리
+- 프로젝트 종속적인 레이아웃은 `src/features/layout` 아래에서 관리
+- markdown preview는 공통 컴포넌트가 `basePath`를 받아 재사용 가능하게 구성
+- 작업일지는 날짜별 파일로 계속 누적 기록
+
+## 상세 작업 내역
+
+- 입력 계층 재정리와 동시에 샘플/문서 경로도 같이 옮겨 구조 변경 시 누락 포인트를 줄임
+- `docs` 트리와 markdown preview를 공통화하면서 프로젝트 루트 문서도 읽을 수 있게 범위를 확장
+- 좌측 폴더 트리와 우측 카드 목록 구성을 도입해 문서 탐색 화면의 기본 틀을 완성
+- 구조 개편 후 빌드와 원격 푸시까지 마쳐 문서 기반 화면을 기준선으로 고정
+
+## 스크린샷
+
+![email-input](../assets/worklogs/2026-03-31/email-input.png)
+![multi-input](../assets/worklogs/2026-03-31/multi-input.png)
+
+## 소스
+
+- `src/components/inputs/primitives/input/InputUI.tsx`: 기본 입력을 primitive 계층으로 고정하고 commit plugin 검증 흐름을 공통 엔트리로 정리했습니다.
+- `src/components/inputs/specialized/emailInput/EmailInputUI.tsx`: 이메일 전용 입력을 primitive 위에 얹어 specialized 계층 규칙을 검증했습니다.
+- `src/components/inputs/composite/multiInput/MultiInputUI.tsx`: 전화번호형 3분할 입력을 추가해 composite 계층과 세그먼트 이동 UX를 구현했습니다.
+- `src/components/markdownPreview/MarkdownPreviewCard.tsx`, `src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx`: 루트 `docs/` 문서를 카드와 폴더 트리로 탐색하는 Docs 미리보기 레이아웃을 추가했습니다.
+
+```diff
+diff --git a/src/components/inputs/composite/multiInput/MultiInputUI.tsx b/src/components/inputs/composite/multiInput/MultiInputUI.tsx
++function splitValue(value?: string): MultiInputParts {
++  const digits = (value ?? '').replace(/\D/g, '').slice(0, 11);
++  return [digits.slice(0, 3), digits.slice(3, 7), digits.slice(7, 11)];
++}
+...
++          if (event.target.value.length === 3) {
++            secondRef.current?.focus();
++          }
+
+diff --git a/src/components/inputs/specialized/emailInput/EmailInputUI.tsx b/src/components/inputs/specialized/emailInput/EmailInputUI.tsx
++      inputMode={inputMode}
++      placeholder={placeholder}
++      autoComplete={autoComplete}
++      commitPlugins={[createEmailValidatorPlugin(), ...commitPlugins]}
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- M README.md
+- M docs/README.md
+- M docs/features/project-setup.md
+- A docs/worklogs/2026-03-31.md
+- M src/App.tsx
+- A src/components/markdownPreview/MarkdownPreviewCard.tsx
+- A src/components/markdownPreview/MarkdownPreviewContent.tsx
+- A src/components/markdownPreview/MarkdownPreviewList.tsx
+- A src/components/markdownPreview/index.ts
+- A src/components/markdownPreview/markdown-document.ts
+- A src/components/markdownPreview/registry.ts
+- A src/components/navigation/folder-tree-nav.tsx
+- A src/components/navigation/index.ts
+- A src/features/layout/README.md
+- R src/layouts/component-sample-gallery/ComponentSamplesLayout.tsx -> src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
+- R src/layouts/component-sample-gallery/index.ts -> src/features/layout/component-sample-gallery/index.ts
+- A src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx
+- A src/features/layout/docs-markdown-preview/index.ts
+- A src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx
+- A src/features/layout/feature-markdown-preview/index.ts
+- R src/layouts/widget-registry-gallery/WidgetRegistryLayout.tsx -> src/features/layout/widget-registry-gallery/WidgetRegistryLayout.tsx
+- R src/layouts/widget-registry-gallery/index.ts -> src/features/layout/widget-registry-gallery/index.ts
+- R src/layouts/widget-sample-gallery/SampleWidgetsLayout.tsx -> src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx
+- R src/layouts/widget-sample-gallery/index.ts -> src/features/layout/widget-sample-gallery/index.ts
+- A src/features/markdownPreview/FeatureMarkdownPreviewCard.tsx
+- A src/features/markdownPreview/index.ts
+- A src/features/overview.md
+- M src/styles.css
+- M docs/components/input.md
+- M docs/worklogs/2026-03-30.md
+- A src/components/inputs/composite/multiInput/MultiInputUI.tsx
+- A src/components/inputs/composite/multiInput/index.ts
+- A src/components/inputs/composite/multiInput/plugins/index.ts
+- A src/components/inputs/composite/multiInput/plugins/multi-input.plugin.ts
+- A src/components/inputs/composite/multiInput/samples/Sample.tsx
+- A src/components/inputs/composite/multiInput/types/index.ts
+- A src/components/inputs/composite/multiInput/types/multi-input.ts
+- R src/components/inputs/input/InputUI.tsx -> src/components/inputs/primitives/input/InputUI.tsx
+- R src/components/inputs/input/index.ts -> src/components/inputs/primitives/input/index.ts
+- R src/components/inputs/input/plugins/index.ts -> src/components/inputs/primitives/input/plugins/index.ts
+- R src/components/inputs/input/plugins/input.plugin.ts -> src/components/inputs/primitives/input/plugins/input.plugin.ts
+- R src/components/inputs/input/samples/Sample.tsx -> src/components/inputs/primitives/input/samples/Sample.tsx
+- R src/components/inputs/input/samples/ValidInputSample.tsx -> src/components/inputs/primitives/input/samples/ValidInputSample.tsx
+- R src/components/inputs/input/types/index.ts -> src/components/inputs/primitives/input/types/index.ts
+- R src/components/inputs/input/types/input.ts -> src/components/inputs/primitives/input/types/input.ts
+- A src/components/inputs/specialized/emailInput/EmailInputUI.tsx
+- A src/components/inputs/specialized/emailInput/index.ts
+- A src/components/inputs/specialized/emailInput/plugins/email-input.plugin.ts
+- A src/components/inputs/specialized/emailInput/plugins/index.ts
+- A src/components/inputs/specialized/emailInput/samples/Sample.tsx
+- A src/components/inputs/specialized/emailInput/types/email-input.ts
+- A src/components/inputs/specialized/emailInput/types/index.ts
+- A docs/components/input.md
+- A src/components/inputs/input/InputUI.tsx
+- A src/components/inputs/input/index.ts
+- A src/components/inputs/input/plugins/index.ts
+- A src/components/inputs/input/plugins/input.plugin.ts
+- A src/components/inputs/input/samples/Sample.tsx
+- A src/components/inputs/input/samples/ValidInputSample.tsx
+- A src/components/inputs/input/types/index.ts
+- A src/components/inputs/input/types/input.ts
+- M src/components/status-badge/samples/Sample.tsx
+- A src/layouts/component-sample-gallery/ComponentSamplesLayout.tsx
+- A src/layouts/component-sample-gallery/index.ts
+- A src/layouts/widget-registry-gallery/WidgetRegistryLayout.tsx
+- A src/layouts/widget-registry-gallery/index.ts
+- A src/layouts/widget-sample-gallery/SampleWidgetsLayout.tsx
+- A src/layouts/widget-sample-gallery/index.ts
+- A src/samples/registry.ts
+- A src/vite-env.d.ts
+- A src/widgets/api-sample-card/ApiSampleCardWidget.tsx
+- A src/widgets/api-sample-card/index.ts
+- A src/widgets/api-sample-card/samples/Sample.tsx
+- A src/widgets/core/WidgetShell.tsx
+- A src/widgets/core/index.ts
+- A src/widgets/core/registry/widget-features.ts
+- A src/widgets/core/types/widget.ts
+- A src/widgets/registry.ts
+
+## 실행 커맨드
+
+```bash
+npm run build
+git add .
+git commit -m "입력 컴포넌트 구조 정리"
+git commit -m "문서 미리보기와 레이아웃 정리"
+git push origin main
+```
+
+## 변경 파일
+
+- `docs/worklogs/2026-03-31.md`
+- `src/components/inputs/primitives/input/InputUI.tsx`
+- `src/components/inputs/specialized/emailInput/EmailInputUI.tsx`
+- `src/components/inputs/composite/multiInput/MultiInputUI.tsx`
+- `src/components/markdownPreview/MarkdownPreviewCard.tsx`
+- `src/components/markdownPreview/MarkdownPreviewContent.tsx`
+- `src/components/markdownPreview/MarkdownPreviewList.tsx`
+- `src/components/navigation/folder-tree-nav.tsx`
+- `src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx`
+- `src/styles.css`
diff --git a/docs/worklogs/2026-04-01.md b/docs/worklogs/2026-04-01.md
new file mode 100755
index 0000000..32003bd
--- /dev/null
+++ b/docs/worklogs/2026-04-01.md
@@ -0,0 +1,254 @@
+# 2026-04-01 작업일지
+
+## 오늘 작업
+
+- 대시보드 카드 위젯과 샘플 구성을 보강
+- WMS/TMS 대시보드 콘텐츠 배치와 차트 표현을 조정
+- 대시보드 공통 표현 컴포넌트 `progress`, `multiProgress` 구조를 정리
+- `src/data` 아래로 대시보드 프리셋 데이터를 분리
+- 메인 화면을 좌측 메뉴 기반 API 스타일 구조로 정리
+- `popup` 입력 컴포넌트를 추가하고 UI 스타일을 보강
+- `select` 입력 컴포넌트를 추가
+- `checkCombo` 입력 컴포넌트를 추가
+- `package.json`에 Nexus `publishConfig` 추가
+- 버전을 `0.1.0-alpha.0`로 조정하고 publish용 `private` 설정을 해제
+- 메인 화면을 `src/views/main` 아래로 임시 분리
+- Nexus 인증 방식을 `username / _password(base64)` 형식으로 재구성
+- Nexus에 `ai-code-app@0.1.0-alpha.0` 배포 성공
+- 메인 화면 구조를 `src/app/main` 기준으로 다시 정리하고 export 경로를 보강
+- 콘텐츠 영역 바깥 여백을 줄여 카드 중심 레이아웃으로 정리
+- 버튼 클릭 시에만 편집 가능한 `buttonEditableInput` 컴포넌트를 추가
+- `buttonEditableInput`의 readonly 음영과 확인 버튼 편집 완료 동작을 보정
+
+## 이슈 및 메모
+
+- `npm publish`는 alpha 버전 배포 시 `--tag alpha`가 필요
+- Nexus는 토큰 방식보다 `username / _password(base64)` 방식에서 인증이 정상 동작함
+- popup 입력은 스타일 보강 과정에서 입력/버튼/readonly 영역의 경계와 톤을 반복 조정
+- 대시보드 카드 높이와 콘텐츠 간격 조정은 과도한 고정값을 피하고 점진적으로 조정하는 편이 안정적
+- 버튼 기반 편집 입력은 blur, Enter, 버튼 클릭 확정 타이밍을 함께 맞춰야 UX가 안정적
+
+## 결정 사항
+
+- 재사용 가능한 샘플/프리셋 데이터는 `src/data`에서 관리
+- 대시보드 공통 표현은 `src/components/dashboard`, 카드 조합은 `src/widgets/dashboard-report-card`로 분리
+- 신규 입력 컴포넌트도 `UI / plugins / samples / types` 구조를 동일하게 적용
+- 메인 화면은 임시로 `views/main` 아래에 `header / sidebar / content` 단위로 분리
+- 배포는 `npm publish --tag alpha` 기준으로 진행
+- 메인 화면 엔트리는 `src/app/main` 기준으로 정리하고 패키지 루트 export를 함께 관리
+- 버튼 편집 입력은 기본 readonly 상태를 유지하고 검증 실패 시 이전 값으로 복원
+
+## 상세 작업 내역
+
+- 대시보드 위젯, 입력 컴포넌트, 메인 화면 구조 변경이 동시에 진행되며 앱 성격이 샘플 갤러리 중심으로 이동
+- Nexus 배포 설정과 인증 방식을 실사용 기준으로 정리해 alpha 배포 경로를 실제로 검증
+- `popup`, `select`, `checkCombo`, `buttonEditableInput`을 추가하며 입력 UI 패키지 확장 패턴을 구체화
+- 메인 화면을 `src/app/main`으로 재정리하면서 이후 헤더/사이드바/콘텐츠 분리 작업의 기반을 마련
+
+## 스크린샷
+
+![button-editable-input](../assets/worklogs/2026-04-01/button-editable-input.png)
+![check-combo-input](../assets/worklogs/2026-04-01/check-combo-input.png)
+![dashboard-multi-progress](../assets/worklogs/2026-04-01/dashboard-multi-progress.png)
+![dashboard-progress](../assets/worklogs/2026-04-01/dashboard-progress.png)
+![main-content-fullscreen-toggle](../assets/worklogs/2026-04-01/main-content-fullscreen-toggle.png)
+![popup-input](../assets/worklogs/2026-04-01/popup-input.png)
+![select-input](../assets/worklogs/2026-04-01/select-input.png)
+
+## 소스
+
+- `src/components/dashboard/progress/ProgressUI.tsx`, `src/components/dashboard/multiProgress/MultiProgressUI.tsx`: 대시보드 진행률 표현을 컴포넌트화해 카드/샘플/위젯에서 공통으로 쓰게 정리했습니다.
+- `src/components/inputs/popup/PopupUI.tsx`, `src/components/inputs/select/SelectUI.tsx`, `src/components/inputs/checkCombo/CheckComboUI.tsx`: 신규 입력군을 같은 패키지 규칙으로 추가해 선택형 입력 범위를 넓혔습니다.
+- `src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx`: readonly 상태와 편집 확정 버튼을 가진 클릭 편집 입력을 도입했습니다.
+- `src/app/main/MainContent.tsx`: 메인 콘텐츠를 `Docs / APIs` 기준 카드 레이아웃으로 나눠 현재 앱 성격에 맞는 메인 화면으로 재정리했습니다.
+
+```diff
+diff --git a/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx b/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx
++    const [isEditing, setIsEditing] = useState(false);
+...
++          readOnly={!isEditing}
++          commitPlugins={mergedCommitPlugins}
+...
++          {isEditing ? confirmButtonLabel : editButtonLabel}
+
+diff --git a/src/app/main/MainContent.tsx b/src/app/main/MainContent.tsx
++      {activeTopMenu === 'docs' ? (
++        <div className="app-main-panel">
++          <Card title={`Docs / ${selectedDocsMenu}`} ...>
++            {selectedDocs.map((document) => (
++              <MarkdownPreviewCard document={document} />
++            ))}
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- A app-dist/assets/2026-03-30-C4SD1FRx.js
+- A app-dist/assets/2026-03-31-DwLJWvh2.js
+- A app-dist/assets/2026-04-01-D5gI7Q4h.js
+- A app-dist/assets/AntdIcon-Byo_R91X.js
+- A app-dist/assets/CloseOutlined-B6nrJF3-.js
+- A app-dist/assets/InputUI-DAmC5DJh.js
+- A app-dist/assets/MultiProgressUI--uB5kqTr.js
+- A app-dist/assets/ProgressUI-C91UL-oJ.js
+- A app-dist/assets/README-CI9EVrw_.js
+- A app-dist/assets/README-O9_O-4tf2.js
+- A app-dist/assets/Sample-6Ml90fMj.js
+- A app-dist/assets/Sample-BJxnglT1.js
+- A app-dist/assets/Sample-BPCdH5hH.js
+- A app-dist/assets/Sample-CLup9Uwo.js
+- A app-dist/assets/Sample-CeT4nPqx.js
+- A app-dist/assets/Sample-DKoCtyPX.js
+- A app-dist/assets/Sample-DMEGMJwT.js
+- A app-dist/assets/Sample-Dyso1eHr.js
+- A app-dist/assets/Sample-E6V4D3Du.js
+- A app-dist/assets/Sample-LB0lRdor.js
+- A app-dist/assets/Sample-xgRr-oUd.js
+- A app-dist/assets/SearchOutlined-Civ7xtmP.js
+- A app-dist/assets/TmsDeliveryFlowSample-BHeS93-n.js
+- A app-dist/assets/TmsDeliveryMetricsSample-BQV5az65.js
+- A app-dist/assets/ValidInputSample-C9pl9si5.js
+- A app-dist/assets/WidgetShell-DhXCYrC8.js
+- A app-dist/assets/WmsInboundOutboundSample-BZCM3_0V.js
+- A app-dist/assets/WmsInventoryTrendSample-DvxPBjgx.js
+- A app-dist/assets/card-BpKFEf6A.js
+- A app-dist/assets/check-combo-Bz7kGmN1.js
+- A app-dist/assets/clsx-CzIxj0DI.js
+- A app-dist/assets/component-plugin-BjxKibxS.js
+- A app-dist/assets/dashboard-report-presets-Bh8duNGL.js
+- A app-dist/assets/feature-template-D3D0o1kc.js
+- A app-dist/assets/index-BQsYfbAI.js
+- A app-dist/assets/index-CaXbpawn.css
+- A app-dist/assets/input-B6oA1SZJ.js
+- A app-dist/assets/input.plugin-ulF_zEvq.js
+- A app-dist/assets/jsx-runtime-CNArSbpp.js
+- A app-dist/assets/overview-DgYaz2rW.js
+- A app-dist/assets/popup-BGFdvx2z.js
+- A app-dist/assets/project-setup-jU8Nv-E8.js
+- A app-dist/assets/select-DYfkmyn8.js
+- A app-dist/assets/select-kIZVYgkF.js
+- A app-dist/assets/status-badge-1fx0opaz.js
+- A app-dist/assets/wave-DQjt-ubw.js
+- A app-dist/assets/worklog-template-DE_f72dx.js
+- A app-dist/index.html
+- A docker-compose.yml
+- M docs/worklogs/2026-04-01.md
+- M package-lock.json
+- M package.json
+- M src/App.tsx
+- A src/app/main/MainContent.tsx
+- A src/app/main/MainHeader.tsx
+- R src/views/main/MainSidebar.tsx -> src/app/main/MainSidebar.tsx
+- R src/views/main/MainView.tsx -> src/app/main/MainView.tsx
+- R src/views/main/index.ts -> src/app/main/index.ts
+- R src/views/main/types.ts -> src/app/main/types.ts
+- A src/app/manifests/docs.manifest.ts
+- A src/app/manifests/samples.manifest.ts
+- M src/components/inputs/primitives/input/index.ts
+- A src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.css
+- A src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx
+- A src/components/inputs/specialized/buttonEditableInput/index.ts
+- A src/components/inputs/specialized/buttonEditableInput/samples/Sample.tsx
+- M src/components/markdownPreview/MarkdownPreviewList.tsx
+- M src/components/markdownPreview/index.ts
+- M src/components/markdownPreview/registry.ts
+- M src/components/status-badge/index.ts
+- M src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
+- M src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx
+- M src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx
+- M src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx
+- M src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx
+- A src/index.ts
+- M src/samples/registry.ts
+- M src/styles.css
+- M src/views/main/MainContent.tsx
+- D src/views/main/MainHeader.tsx
+- A tsconfig.lib.json
+- M README.md
+- M docs/README.md
+- M docs/features/project-setup.md
+- A src/views/main/MainContent.tsx
+- A src/views/main/MainHeader.tsx
+- A src/views/main/MainSidebar.tsx
+- A src/views/main/MainView.tsx
+- A src/views/main/index.ts
+- A src/views/main/types.ts
+- A docs/components/check-combo.md
+- A docs/components/popup.md
+- A docs/components/select.md
+- A docs/worklogs/2026-04-01.md
+- A src/components/dashboard/multiProgress/MultiProgressUI.tsx
+- A src/components/dashboard/multiProgress/index.ts
+- A src/components/dashboard/multiProgress/plugins/index.ts
+- A src/components/dashboard/multiProgress/plugins/multi-progress.plugin.ts
+- A src/components/dashboard/multiProgress/samples/Sample.tsx
+- A src/components/dashboard/multiProgress/types/index.ts
+- A src/components/dashboard/multiProgress/types/multi-progress.ts
+- A src/components/dashboard/progress/ProgressUI.tsx
+- A src/components/dashboard/progress/index.ts
+- A src/components/dashboard/progress/plugins/index.ts
+- A src/components/dashboard/progress/plugins/progress.plugin.ts
+- A src/components/dashboard/progress/samples/Sample.tsx
+- A src/components/dashboard/progress/types/index.ts
+- A src/components/dashboard/progress/types/progress.ts
+- A src/components/inputs/checkCombo/CheckComboUI.tsx
+- A src/components/inputs/checkCombo/index.ts
+- A src/components/inputs/checkCombo/plugins/check-combo.plugin.ts
+- A src/components/inputs/checkCombo/plugins/index.ts
+- A src/components/inputs/checkCombo/samples/Sample.tsx
+- A src/components/inputs/checkCombo/types/check-combo.ts
+- A src/components/inputs/checkCombo/types/index.ts
+- A src/components/inputs/popup/PopupUI.tsx
+- A src/components/inputs/popup/index.ts
+- A src/components/inputs/popup/plugins/index.ts
+- A src/components/inputs/popup/plugins/popup.plugin.ts
+- A src/components/inputs/popup/samples/Sample.tsx
+- A src/components/inputs/popup/types/index.ts
+- A src/components/inputs/popup/types/popup.ts
+- A src/components/inputs/select/SelectUI.tsx
+- A src/components/inputs/select/index.ts
+- A src/components/inputs/select/plugins/index.ts
+- A src/components/inputs/select/plugins/select.plugin.ts
+- A src/components/inputs/select/samples/Sample.tsx
+- A src/components/inputs/select/types/index.ts
+- A src/components/inputs/select/types/select.ts
+- A src/components/navigation/SectionMenuLayout.tsx
+- M src/components/navigation/index.ts
+- A src/data/dashboard-report-presets.ts
+- A src/features/dashboard/TmsDashboardFeatureSamples.tsx
+- A src/features/dashboard/WmsDashboardFeatureSamples.tsx
+- A src/features/layout/dashboard-feature-gallery/DashboardFeatureGalleryLayout.tsx
+- A src/features/layout/dashboard-feature-gallery/index.ts
+- A src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx
+- A src/features/layout/dashboard-report-gallery/index.ts
+- M src/widgets/core/WidgetShell.tsx
+- A src/widgets/dashboard-report-card/DashboardReportCardWidget.tsx
+- A src/widgets/dashboard-report-card/index.ts
+- A src/widgets/dashboard-report-card/samples/TmsDeliveryFlowSample.tsx
+- A src/widgets/dashboard-report-card/samples/TmsDeliveryMetricsSample.tsx
+- A src/widgets/dashboard-report-card/samples/WmsInboundOutboundSample.tsx
+- A src/widgets/dashboard-report-card/samples/WmsInventoryTrendSample.tsx
+- M src/widgets/registry.ts
+
+## 실행 커맨드
+
+```bash
+npm run build
+npm publish --tag alpha
+npm run capture:component -- --date 2026-04-01 --name check-combo-input
+npm run capture:component -- --date 2026-04-01 --name select-input
+npm run capture:component -- --date 2026-04-01 --name popup-input
+npm run capture:fullscreen -- --date 2026-04-01
+```
+
+## 변경 파일
+
+- `docs/worklogs/2026-04-01.md`
+- `package.json`
+- `src/components/dashboard/progress/ProgressUI.tsx`
+- `src/components/dashboard/multiProgress/MultiProgressUI.tsx`
+- `src/components/inputs/popup/PopupUI.tsx`
+- `src/components/inputs/select/SelectUI.tsx`
+- `src/components/inputs/checkCombo/CheckComboUI.tsx`
+- `src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx`
+- `src/app/main/MainContent.tsx`
+- `src/styles.css`
diff --git a/docs/worklogs/2026-04-02.md b/docs/worklogs/2026-04-02.md
new file mode 100755
index 0000000..5e0d02f
--- /dev/null
+++ b/docs/worklogs/2026-04-02.md
@@ -0,0 +1,396 @@
+# 2026-04-02 작업일지
+
+## 오늘 작업
+
+- 루트 `README.md`를 현재 앱 구조와 스크립트 기준으로 최신화
+- `docs/README.md`의 문서 운영 기준을 실제 디렉터리 구조와 Docs 수집 방식에 맞게 정리
+- 오늘 작업일지에 문서 최신화 내역을 추가
+- `window-ui` 공통 컴포넌트를 추가
+- 윈도우 헤더 드래그, 리사이즈, 최소화, 최대화, 복원 동작을 구성
+- 모바일 터치 기반 드래그와 버튼 터치 영역을 보정
+- 멀티 윈도우 추천 배치, 가로 분할, 세로 분할, 그리드 배치를 추가
+- 배치 이후 창 순서를 사용자가 조정할 수 있는 UI를 추가
+- 활성화된 윈도우가 항상 최상단으로 오도록 z-index 정렬을 추가
+- 전체화면 버튼을 빈 공간 우선 확장 후 부모 전체 확장 방식으로 보정
+- `previewer-ui` 공통 컴포넌트를 추가
+- `text`, `json`, `code`, `image`, `markdown`, `empty` preview 타입을 구성
+- JSON preview에 영역별 컬러 토큰 표시를 추가
+- Code preview에 언어 선택과 VSCode 스타일 표현을 추가
+- Previewer 샘플에 TypeScript, JSON, HTML, CSS, Bash, SQL, YAML 예제를 추가
+- 메인 앱을 PWA 오프라인 캐시 전략으로 보강
+- 모바일 헤더/사이드바 동작을 손봐서 메뉴 선택 흐름을 단순화
+- 헤더 액션 영역과 전체화면 토글 동작을 재정리
+- `src/layer/gesture`를 추가해 모바일 우측 상단 제스처를 레이어로 관리
+- `src/store/appStore`를 추가해 현재 페이지와 포커스 컴포넌트 상태를 관리
+- `src/layer/search`를 추가해 통합검색 모달과 검색 옵션을 레이어 컨텍스트로 관리
+- `SearchCommandModal` 통합 검색 컴포넌트를 추가
+- 문서, API, 컴포넌트, 위젯 키워드 자동 추천과 빠른 이동을 연결
+- 모바일 입력 확대 방지와 검색 모달 포커스 동작을 보정
+- 빌드 산출물 추적 정리를 위해 `.gitignore`를 보강하고 `app-dist`, `dev-dist` 무시 준비를 진행
+- `etc/db/work-db` 경로로 PostgreSQL 도커 구성을 분리하고 `.env` 기반 설정을 정리
+- `etc/servers/work-server`에 `Fastify + PostgreSQL` 기반 작업 API 서버를 추가
+- Plan 게시판용 등록, 수정, 삭제, 테이블 생성 API를 추가
+- Plan 게시판이 웹서버 프록시(`/api`)를 통해 `work-server`를 바라보도록 수정
+- Plan 항목 등록 시 작업 ID, 요청 메모, 대상 브랜치/릴리즈 흐름을 함께 관리하도록 화면과 서버 모델을 정리
+- Plan 항목을 주기적으로 읽어 `등록 -> 작업중(브랜치 준비)`와 `개발완료 -> 완료(release merge)` 흐름을 자동화하는 worker를 추가
+- `scripts/run-plan-codex-once.mjs`로 단건 Plan 항목을 읽어 Codex 실행 결과를 조치 이력에 반영하는 자동화 스크립트를 추가
+- Plan 자동화 실패 시 상태를 `이슈`로 바꾸지 않고 해시태그/오류 이력으로 관리하도록 변경
+- `etc` 내부에서 커밋되면 안 되는 `.env`, `node_modules`, `dist`, 로그 파일을 루트 `.gitignore`에서도 명시적으로 제외
+- `작업시작` 이후에는 원본 요청을 수정할 수 없도록 잠금 규칙을 추가
+- 작업 이후 변경 사항은 일반 조치 이력과 이슈 조치 이력으로 누적 기록되도록 확장
+- 컴포넌트/화면 스크린샷을 생성한 뒤 작업일지 `## 화면 캡처` 섹션에 자동 링크하는 스크립트를 정리
+- Plan 게시판 메모 상세의 모바일 높이를 절반 수준으로 줄이도록 조정
+- 작업일지 캡처 스크립트를 공통 유틸로 정리하고 누락 방지용 모바일 Plan 상세 캡처를 추가
+
+## 이슈 및 메모
+
+- `vite-plugin-pwa`는 `vite@8`과 peer 경고가 있어 도커 실행 시 `npm install --force`가 필요
+- 작업일지 이미지 표시를 위해 markdown preview가 전체 블록을 렌더링하도록 수정
+- 컴포넌트 캡처 자동화는 `Playwright` 기반으로 스크린샷을 생성하고 작업일지 링크를 함께 추가
+- 캡처 스크립트는 날짜별 폴더를 만들고 동일 날짜 작업일지에 이미지 Markdown 링크를 자동 삽입함
+- iOS에서는 제스처 후 키보드 오픈 보장이 제한적이라 강제 포커스 로직보다 레이어 분리와 단순 동작 유지에 우선순위를 둠
+- Plan 자동화는 현재 저장소 worktree가 깨끗해야 브랜치 생성이 가능함
+- 현재 저장소에는 `release` 브랜치가 아직 없어 실제 자동 merge를 쓰려면 브랜치 생성이 먼저 필요함
+- 컨테이너 내부 git은 `safe.directory` 이슈가 있어 자동 처리 로직을 추가함
+- Plan 이력 테이블 추가 이후 기존 실패 데이터에는 과거 이력이 없을 수 있어 재시도로 새 이력을 만드는 방식으로 정리함
+- `run-plan-codex-once`는 최근 조치 이력/이슈 이력을 프롬프트에 포함해 재작업이나 보완 요청을 우선 반영하도록 구성함
+
+## 결정 사항
+
+- 공통 미리보기 컴포넌트는 `src/components/previewer` 아래에서 관리
+- 공통 윈도우 컴포넌트는 `src/components/window` 아래에서 관리
+- 작업일지 캡처 이미지는 `docs/assets/worklogs/YYYY-MM-DD/`에 저장
+- 컴포넌트 캡처는 전체 화면이 아니라 샘플 컴포넌트 영역 중심으로 생성
+- 앱 상태 저장은 `src/store`
+- 화면 전역 UI는 `src/layer`
+- 통합검색은 store가 아니라 layer context로 관리
+- 프로젝트 내부 부가 서버/DB는 `etc/servers/<name>`, `etc/db/<name>` 구조로 관리
+- `etc` 내부의 비밀값/생성물은 각 하위 `.gitignore`와 루트 `.gitignore`에서 이중으로 차단
+- Plan 게시판은 상태 수기 변경보다 자동화 중심 흐름을 우선하고, 사용자는 상태별 허용 액션 버튼만 사용
+- 원본 요청은 `작업시작` 이후 읽기 전용으로 전환하고 추가 조치사항은 이력으로만 남김
+- 스크린샷 자산은 날짜별 작업일지와 1:1로 연결하고 캡처 직후 문서 링크까지 자동 반영
+
+## 상세 작업 내역
+
+- 초기 문서에 남아 있던 구형 `src/components/inputs`, `src/views/main` 기준 설명을 현재 `src/app/main`, `src/components/*`, `src/features/planBoard` 구조에 맞춰 교체
+- 루트 안내문에서 실행 스크립트, 앱 섹션, 문서 위치를 한 번에 확인할 수 있도록 정리
+- Docs 가이드에 실제 Markdown 수집 범위와 문서 최신화 기록 원칙을 반영
+- `window-ui`, `previewer-ui` 추가 이후 앱 전반 구조가 컴포넌트 문서/샘플 허브 형태로 더 선명해짐
+- PWA 오프라인 캐시 전략과 모바일 레이아웃 보정을 함께 진행해 실제 사용 환경 대응 범위를 넓힘
+- `gesture`, `search`, `store/appStore`를 나눠 전역 UI와 상태 책임을 분리하는 기준을 세움
+- 통합검색은 문서, API, 컴포넌트, 위젯을 한 흐름에서 찾도록 묶고 모달/제스처/포커스 추적을 연결
+- 빌드 산출물 추적을 정리하며 `.gitignore`와 Git 인덱스 운영 기준도 함께 정비
+- `work-server`는 Plan 게시판 API, DB 연결, worker 자동화 역할을 함께 가지도록 확장
+- Plan 게시판은 단순 상태 보드가 아니라 등록 정보, 조치 이력, 이슈 이력, 원본 요청 잠금 규칙까지 함께 관리하는 작업 큐 성격으로 확장
+- 등록 단계에서는 작업 ID와 요청 내용을 남기고, 자동화 단계에서는 브랜치 확보, Codex 실행, 커밋/푸시, release 반영 가능 여부를 순차적으로 판단하도록 흐름을 정리
+- 자동화 worker는 현재 저장소에 직접 브랜치를 만들고 `release` 브랜치 머지까지 시도하되, 작업 디렉터리가 dirty면 이슈 태그와 오류 이력을 남기고 안전하게 멈춤
+- Plan 화면에서는 브랜치명, 자동화 상태, 최근 오류, 이슈 태그, 조치 이력을 함께 확인할 수 있게 보강
+- `작업시작` 이후 서버는 원본 요청 수정 API를 `409`로 차단하고, 화면에서도 메모/작업 ID를 읽기 전용으로 전환
+- 스크린샷 처리 스크립트는 `docs/assets/worklogs/YYYY-MM-DD/` 저장, `docs/worklogs/YYYY-MM-DD.md` 링크 반영, 중복 링크 방지까지 한 번에 수행하도록 맞춤
+- 검색 모달, 프리뷰어, 윈도우 UI 캡처는 각각 샘플 셀렉터를 기준으로 잘라 저장해 작업일지 증적 자료로 재사용 가능하게 구성
+- Plan 게시판은 모바일에서 `새 메모` 상세를 바로 캡처하는 스크립트를 추가해 메모 높이 보정 결과를 작업일지에 바로 남길 수 있게 함
+
+## 스크린샷
+
+![plan-board-mobile-memo-detail](../assets/worklogs/2026-04-02/plan-board-mobile-memo-detail.png)
+![previewer-ui](../assets/worklogs/2026-04-02/previewer-ui.png)
+![search-command](../assets/worklogs/2026-04-02/search-command.png)
+![window-ui](../assets/worklogs/2026-04-02/window-ui.png)
+
+## 소스
+
+- `src/components/window/WindowUI.tsx`: 드래그, 리사이즈, 분할 배치를 지원하는 공통 윈도우 UI를 추가했습니다.
+- `src/components/previewer/PreviewerUI.tsx`: `text/json/code/image/markdown` 등 여러 증적 형식을 한 컴포넌트에서 미리보게 만들었습니다.
+- `src/components/search/SearchCommandModal.tsx`: 문서, API, 컴포넌트, 위젯을 한 번에 찾는 통합 검색 모달을 추가했습니다.
+- `src/features/planBoard/PlanBoardPage.tsx`: Plan 게시판 UI와 상세 흐름을 본격 추가했습니다.
+- `etc/servers/work-server/src/workers/plan-worker.ts`, `scripts/run-plan-codex-once.mjs`: Plan 자동화 워커와 Codex 실행기를 도입해 브랜치 준비, 작업 실행, 반영 흐름을 자동화했습니다.
+
+```diff
+diff --git a/etc/servers/work-server/src/workers/plan-worker.ts b/etc/servers/work-server/src/workers/plan-worker.ts
++export class PlanWorker {
++  private readonly workerId: string;
++  private timer: NodeJS.Timeout | null = null;
++  private running = false;
+...
++      await this.processRegisteredPlans();
++      await this.processExecutablePlans();
++      await this.processReleaseReadyPlans();
+
+diff --git a/scripts/run-plan-codex-once.mjs b/scripts/run-plan-codex-once.mjs
++const planItemId = process.env.PLAN_ITEM_ID ? Number(process.env.PLAN_ITEM_ID) : null;
++const codexBin = process.env.PLAN_CODEX_BIN ?? 'codex';
+...
++function requiresSourceChange(note) {
++  return /(?:\/|\\).+\.[a-z0-9]+/i.test(text) || /(생성|만들어|추가|수정|변경|삭제|파일)/.test(text);
++}
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- M scripts/run-plan-codex-once.mjs
+- M .gitignore
+- M etc/servers/work-server/.env.example
+- M etc/servers/work-server/docker-compose.yml
+- M etc/servers/work-server/src/services/plan-service.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M src/features/planBoard/PlanBoardPage.tsx
+- M src/main.tsx
+- M etc/servers/work-server/src/config/env.ts
+- M etc/servers/work-server/src/routes/plan.ts
+- M etc/servers/work-server/src/services/git-service.ts
+- M src/features/planBoard/types.ts
+- M package.json
+- A scripts/run-plan-codex-once.mjs
+- M docs/README.md
+- M docs/worklogs/2026-04-02.md
+- M src/features/planBoard/api.ts
+- M docker-compose.yml
+- A etc/db/work-db/.env.example
+- A etc/db/work-db/.gitignore
+- A etc/db/work-db/README.md
+- A etc/db/work-db/docker-compose.yml
+- A etc/servers/work-server/.env.example
+- A etc/servers/work-server/.gitignore
+- A etc/servers/work-server/README.md
+- A etc/servers/work-server/docker-compose.yml
+- A etc/servers/work-server/package-lock.json
+- A etc/servers/work-server/package.json
+- A etc/servers/work-server/src/app.ts
+- A etc/servers/work-server/src/config/env.ts
+- A etc/servers/work-server/src/db/client.ts
+- A etc/servers/work-server/src/lib/identifier.ts
+- A etc/servers/work-server/src/routes/crud.ts
+- A etc/servers/work-server/src/routes/ddl.ts
+- A etc/servers/work-server/src/routes/health.ts
+- A etc/servers/work-server/src/routes/plan.ts
+- A etc/servers/work-server/src/routes/schema.ts
+- A etc/servers/work-server/src/server.ts
+- A etc/servers/work-server/src/services/git-service.ts
+- A etc/servers/work-server/src/services/plan-service.ts
+- A etc/servers/work-server/src/workers/plan-worker.ts
+- A etc/servers/work-server/tsconfig.json
+- M src/app/main/MainContent.tsx
+- M src/app/main/MainHeader.tsx
+- M src/app/main/MainSidebar.tsx
+- M src/app/main/MainView.tsx
+- M src/app/main/types.ts
+- A src/features/planBoard/PlanBoardPage.tsx
+- A src/features/planBoard/api.ts
+- A src/features/planBoard/index.ts
+- A src/features/planBoard/types.ts
+- M src/store/appStore/types/index.ts
+- M src/styles.css
+- M vite.config.ts
+- A docs/assets/worklogs/2026-04-02/search-command.png
+- M docs/templates/worklog-template.md
+- M docs/worklogs/2026-03-30.md
+- M docs/worklogs/2026-03-31.md
+- M docs/worklogs/2026-04-01.md
+- A scripts/capture-search-command-screenshot.mjs
+- D app-dist/apple-touch-icon.svg
+- D app-dist/assets/2026-03-30-C9zIPzPv.js
+- D app-dist/assets/2026-03-31-DnTx-3Nm.js
+- D app-dist/assets/2026-04-01-HPg12E04.js
+- D app-dist/assets/AntdIcon-Byo_R91X.js
+- D app-dist/assets/CloseOutlined-B6nrJF3-.js
+- D app-dist/assets/InputUI-w7gS2eD_.js
+- D app-dist/assets/MultiProgressUI-BrtiP5fC.js
+- D app-dist/assets/ProgressUI-CcSfL1yk.js
+- D app-dist/assets/README-C7FUDFuk.js
+- D app-dist/assets/README-CCe9ioJ1.js
+- D app-dist/assets/Sample-3CFWfRoz.js
+- D app-dist/assets/Sample-AyuQ97sV.css
+- D app-dist/assets/Sample-BVdBpN2O.js
+- D app-dist/assets/Sample-BX522g-L.js
+- D app-dist/assets/Sample-BcLA6P4T.js
+- D app-dist/assets/Sample-BdE7za0g.js
+- D app-dist/assets/Sample-CJuh1XyL.js
+- D app-dist/assets/Sample-CXTqMdzC.js
+- D app-dist/assets/Sample-CYEm5q8n.js
+- D app-dist/assets/Sample-D8WPIGkO.js
+- D app-dist/assets/Sample-DCMU_ANA.js
+- D app-dist/assets/Sample-DucAjs70.css
+- D app-dist/assets/Sample-H43X1Va0.js
+- D app-dist/assets/Sample-H8g2LJhv.js
+- D app-dist/assets/Sample-IHgSYgwU.css
+- D app-dist/assets/Sample-iMOOVcMn.js
+- D app-dist/assets/SearchOutlined-Civ7xtmP.js
+- D app-dist/assets/TmsDeliveryFlowSample-BIsYLVLu.js
+- D app-dist/assets/TmsDeliveryMetricsSample-Cij5-xON.js
+- D app-dist/assets/ValidInputSample-DfYNB-Xp.js
+- D app-dist/assets/WidgetShell-BuID0-5g.js
+- D app-dist/assets/WmsInboundOutboundSample-D8v85F-k.js
+- D app-dist/assets/WmsInventoryTrendSample-BaOj-o94.js
+- D app-dist/assets/button-editable-input-TvwRLJmy.png
+- D app-dist/assets/card-C6TZ9YUa.js
+- D app-dist/assets/check-combo-Bz7kGmN1.js
+- D app-dist/assets/clsx-CzIxj0DI.js
+- D app-dist/assets/component-plugin-DrEfBYjG.js
+- D app-dist/assets/dashboard-report-presets-BmenDHNL.js
+- D app-dist/assets/feature-template-C3ggnfNS.js
+- D app-dist/assets/index-CR5AbEsh.js
+- D app-dist/assets/index-WZ9gt1kR.css
+- D app-dist/assets/input-B6oA1SZJ.js
+- D app-dist/assets/input.plugin-BigPQCa9.js
+- D app-dist/assets/jsx-runtime-CNArSbpp.js
+- D app-dist/assets/main-content-fullscreen-toggle-Cppu1H3t.png
+- D app-dist/assets/overview-BtWbOP4n.js
+- D app-dist/assets/popup-BGFdvx2z.js
+- D app-dist/assets/previewer-ui-BheoU6aq.js
+- D app-dist/assets/project-setup-B38Eco2m.js
+- D app-dist/assets/select-BVXn7KWj.js
+- D app-dist/assets/select-oi1Bjv-c.js
+- D app-dist/assets/status-badge-C7aul6sS.js
+- D app-dist/assets/wave-DQjt-ubw.js
+- D app-dist/assets/window-ui-CXDuYQu1.js
+- D app-dist/assets/workbox-window.prod.es5-B4qug_J_.js
+- D app-dist/assets/worklog-template-Donys780.js
+- D app-dist/favicon.svg
+- D app-dist/index.html
+- D app-dist/manifest.webmanifest
+- D app-dist/pwa-192x192.svg
+- D app-dist/pwa-512x512.svg
+- D app-dist/sw.js
+- D app-dist/workbox-8c29f6e4.js
+- D dev-dist/sw.js
+- D dev-dist/workbox-5a5d9309.js
+- A docs/components/search-command.md
+- A docs/features/search-layer.md
+- M index.html
+- A src/components/search/SearchCommandModal.tsx
+- A src/components/search/index.ts
+- A src/components/search/types.ts
+- M src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
+- M src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx
+- M src/index.ts
+- A src/layer/gesture/context/GestureContext.tsx
+- A src/layer/gesture/hooks/useGestureLayer.ts
+- A src/layer/gesture/index.ts
+- A src/layer/gesture/types/index.ts
+- A src/layer/index.ts
+- A src/layer/search/context/SearchLayerContext.tsx
+- A src/layer/search/hooks/useSearchLayer.ts
+- A src/layer/search/index.ts
+- A src/layer/search/types/index.ts
+- A src/store/appStore/context/AppStoreContext.tsx
+- A src/store/appStore/hooks/useAppStore.ts
+- A src/store/appStore/index.ts
+- A src/store/appStore/types/index.ts
+- A src/store/index.ts
+- A app-dist/apple-touch-icon.svg
+- R app-dist/assets/2026-03-30-C4SD1FRx.js -> app-dist/assets/2026-03-30-C9zIPzPv.js
+- R app-dist/assets/2026-03-31-DwLJWvh2.js -> app-dist/assets/2026-03-31-DnTx-3Nm.js
+- D app-dist/assets/2026-04-01-D5gI7Q4h.js
+- A app-dist/assets/2026-04-01-HPg12E04.js
+- R app-dist/assets/InputUI-DAmC5DJh.js -> app-dist/assets/InputUI-w7gS2eD_.js
+- R app-dist/assets/MultiProgressUI--uB5kqTr.js -> app-dist/assets/MultiProgressUI-BrtiP5fC.js
+- R app-dist/assets/ProgressUI-C91UL-oJ.js -> app-dist/assets/ProgressUI-CcSfL1yk.js
+- R app-dist/assets/README-CI9EVrw_.js -> app-dist/assets/README-C7FUDFuk.js
+- R app-dist/assets/README-O9_O-4tf2.js -> app-dist/assets/README-CCe9ioJ1.js
+- R app-dist/assets/Sample-CeT4nPqx.js -> app-dist/assets/Sample-3CFWfRoz.js
+- A app-dist/assets/Sample-AyuQ97sV.css
+- R app-dist/assets/Sample-Dyso1eHr.js -> app-dist/assets/Sample-BVdBpN2O.js
+- A app-dist/assets/Sample-BX522g-L.js
+- R app-dist/assets/Sample-DKoCtyPX.js -> app-dist/assets/Sample-BcLA6P4T.js
+- R app-dist/assets/Sample-DMEGMJwT.js -> app-dist/assets/Sample-BdE7za0g.js
+- R app-dist/assets/Sample-BJxnglT1.js -> app-dist/assets/Sample-CJuh1XyL.js
+- R app-dist/assets/Sample-xgRr-oUd.js -> app-dist/assets/Sample-CXTqMdzC.js
+- R app-dist/assets/Sample-BPCdH5hH.js -> app-dist/assets/Sample-CYEm5q8n.js
+- R app-dist/assets/Sample-LB0lRdor.js -> app-dist/assets/Sample-D8WPIGkO.js
+- R app-dist/assets/Sample-6Ml90fMj.js -> app-dist/assets/Sample-DCMU_ANA.js
+- A app-dist/assets/Sample-DucAjs70.css
+- D app-dist/assets/Sample-E6V4D3Du.js
+- A app-dist/assets/Sample-H43X1Va0.js
+- R app-dist/assets/Sample-CLup9Uwo.js -> app-dist/assets/Sample-H8g2LJhv.js
+- A app-dist/assets/Sample-IHgSYgwU.css
+- A app-dist/assets/Sample-iMOOVcMn.js
+- R app-dist/assets/TmsDeliveryFlowSample-BHeS93-n.js -> app-dist/assets/TmsDeliveryFlowSample-BIsYLVLu.js
+- R app-dist/assets/TmsDeliveryMetricsSample-BQV5az65.js -> app-dist/assets/TmsDeliveryMetricsSample-Cij5-xON.js
+- R app-dist/assets/ValidInputSample-C9pl9si5.js -> app-dist/assets/ValidInputSample-DfYNB-Xp.js
+- R app-dist/assets/WidgetShell-DhXCYrC8.js -> app-dist/assets/WidgetShell-BuID0-5g.js
+- R app-dist/assets/WmsInboundOutboundSample-BZCM3_0V.js -> app-dist/assets/WmsInboundOutboundSample-D8v85F-k.js
+- R app-dist/assets/WmsInventoryTrendSample-DvxPBjgx.js -> app-dist/assets/WmsInventoryTrendSample-BaOj-o94.js
+- A app-dist/assets/button-editable-input-TvwRLJmy.png
+- R app-dist/assets/card-BpKFEf6A.js -> app-dist/assets/card-C6TZ9YUa.js
+- R app-dist/assets/component-plugin-BjxKibxS.js -> app-dist/assets/component-plugin-DrEfBYjG.js
+- R app-dist/assets/dashboard-report-presets-Bh8duNGL.js -> app-dist/assets/dashboard-report-presets-BmenDHNL.js
+- R app-dist/assets/feature-template-D3D0o1kc.js -> app-dist/assets/feature-template-C3ggnfNS.js
+- R app-dist/assets/index-BQsYfbAI.js -> app-dist/assets/index-CR5AbEsh.js
+- D app-dist/assets/index-CaXbpawn.css
+- A app-dist/assets/index-WZ9gt1kR.css
+- R app-dist/assets/input.plugin-ulF_zEvq.js -> app-dist/assets/input.plugin-BigPQCa9.js
+- A app-dist/assets/main-content-fullscreen-toggle-Cppu1H3t.png
+- R app-dist/assets/overview-DgYaz2rW.js -> app-dist/assets/overview-BtWbOP4n.js
+- A app-dist/assets/previewer-ui-BheoU6aq.js
+- R app-dist/assets/project-setup-jU8Nv-E8.js -> app-dist/assets/project-setup-B38Eco2m.js
+- R app-dist/assets/select-DYfkmyn8.js -> app-dist/assets/select-BVXn7KWj.js
+- R app-dist/assets/select-kIZVYgkF.js -> app-dist/assets/select-oi1Bjv-c.js
+- R app-dist/assets/status-badge-1fx0opaz.js -> app-dist/assets/status-badge-C7aul6sS.js
+- A app-dist/assets/window-ui-CXDuYQu1.js
+- A app-dist/assets/workbox-window.prod.es5-B4qug_J_.js
+- R app-dist/assets/worklog-template-DE_f72dx.js -> app-dist/assets/worklog-template-Donys780.js
+- A app-dist/favicon.svg
+- M app-dist/index.html
+- A app-dist/manifest.webmanifest
+- A app-dist/pwa-192x192.svg
+- A app-dist/pwa-512x512.svg
+- A app-dist/sw.js
+- A app-dist/workbox-8c29f6e4.js
+- A dev-dist/sw.js
+- A dev-dist/workbox-5a5d9309.js
+- A docs/assets/worklogs/2026-04-01/.gitkeep
+- A docs/assets/worklogs/2026-04-01/button-editable-input.png
+- A docs/assets/worklogs/2026-04-01/main-content-fullscreen-toggle.png
+- A docs/assets/worklogs/2026-04-02/.gitkeep
+- A docs/assets/worklogs/2026-04-02/previewer-ui.png
+- A docs/assets/worklogs/2026-04-02/window-ui.png
+- A docs/components/previewer-ui.md
+- A docs/components/window-ui.md
+- A docs/worklogs/2026-04-02.md
+- M package-lock.json
+- A public/apple-touch-icon.svg
+- A public/favicon.svg
+- A public/pwa-192x192.svg
+- A public/pwa-512x512.svg
+- A scripts/capture-component-screenshot.mjs
+- A scripts/capture-fullscreen-toggle-screenshot.mjs
+- M src/app/manifests/docs.manifest.ts
+- M src/components/markdownPreview/MarkdownPreviewCard.tsx
+- M src/components/markdownPreview/MarkdownPreviewContent.tsx
+- A src/components/previewer/PreviewerUI.css
+- A src/components/previewer/PreviewerUI.tsx
+- A src/components/previewer/index.ts
+- A src/components/previewer/samples/Sample.tsx
+- A src/components/previewer/types/index.ts
+- A src/components/previewer/types/previewer.ts
+- A src/components/window/WindowUI.css
+- A src/components/window/WindowUI.tsx
+- A src/components/window/index.ts
+- A src/components/window/samples/Sample.tsx
+- A src/components/window/types/index.ts
+- A src/components/window/types/window.ts
+- M src/vite-env.d.ts
+- M tsconfig.lib.json
+
+## 실행 커맨드
+
+```bash
+npm run build
+docker compose up -d
+npm run plan:codex:once
+node scripts/capture-search-command-screenshot.mjs --date 2026-04-02
+npm run capture:plan-mobile -- --date 2026-04-02
+```
+
+## 변경 파일
+
+- `docs/worklogs/2026-04-02.md`
+- `src/components/window/WindowUI.tsx`
+- `src/components/previewer/PreviewerUI.tsx`
+- `src/components/search/SearchCommandModal.tsx`
+- `src/features/planBoard/PlanBoardPage.tsx`
+- `src/layer/search/context/SearchLayerContext.tsx`
+- `src/store/appStore/context/AppStoreContext.tsx`
+- `etc/servers/work-server/src/routes/plan.ts`
+- `etc/servers/work-server/src/services/plan-service.ts`
+- `scripts/run-plan-codex-once.mjs`
diff --git a/docs/worklogs/2026-04-03.md b/docs/worklogs/2026-04-03.md
new file mode 100755
index 0000000..e625b13
--- /dev/null
+++ b/docs/worklogs/2026-04-03.md
@@ -0,0 +1,137 @@
+# 2026-04-03 작업일지
+
+## 오늘 작업
+
+- Plan 자동화 재처리 흐름과 main 반영 안정화
+- release/main 브랜치 전략을 정리하고 서버 재시작 오류를 수정
+- Plan 메모 검색 기능 추가
+- Plan 상세에서 소스 작업 이력/미리보기 확인 흐름 보강
+- 모바일 설정 아이콘 터치 불가 이슈를 제스처 오버레이 충돌 제거로 해결
+- 작업 상세의 불필요한 `내용 조회` 버튼 제거
+- Noti 설정의 서버 토큰 등록/삭제 연동 보강
+- 작업 ID 기본값(`작업ID`) 처리 및 중복 제약 완화
+- 완료/반영 단계에서도 소스 작업 이력이 누락되지 않도록 저장 로직 보강
+- Web Push 등록/호환 처리 보강(미지원 API 404 노출 완화)
+- 4월 3일 작업 증적용 스크린샷(앱 설정, 알림 설정) 보강
+- Plan 상세 증적 탭 하단에 스크린샷/작업일지/preview/source 전체화면 미리보기 추가
+
+## 이슈 및 메모
+
+- release -> main 자동 머지 이후 브랜치 상태 꼬임이 반복되어 브랜치 전략 재정비 필요
+- 모바일 터치 이슈는 기능 오류보다 레이어 겹침(오버레이) 영향이 컸음
+- 알림 기능은 로컬 UI 상태와 서버 토큰 상태가 분리되면 재현 어려운 장애로 이어짐
+- 작업/이슈 이력 누락은 재처리 판단 정확도에 직접 영향
+
+## 결정 사항
+
+- Plan 자동화 브랜치 기준은 `main` 중심으로 정리
+- 실패 후 재실행은 명시적 재처리 요청 기반으로 진행
+- 알림 설정은 UI 토글만이 아니라 서버 토큰 등록/삭제와 동기화
+- 메모/소스 작업 이력은 완료 단계 이후까지 일관 저장
+
+## 상세 작업 내역
+
+- 자동화 워커의 재처리, 반영, 이력 저장 경로를 손봐 동일 이슈 반복 시 추적 가능성을 높임
+- release/main 전개 과정에서 발생하던 복구성 작업을 줄이기 위해 브랜치 운영 규칙을 단순화
+- Plan 보드 UX는 모바일 접근성(터치/조회/검색) 중심으로 우선 개선
+- 알림 관련 API 미지원 상황에서도 사용자에게 과도한 오류를 직접 노출하지 않도록 완충 처리 추가
+
+## 스크린샷
+
+![settings-app](../assets/worklogs/2026-04-03/settings-app.png)
+![settings-notification](../assets/worklogs/2026-04-03/settings-notification.png)
+
+## 소스
+
+- `etc/servers/work-server/src/services/git-service.ts`: 새 이슈 브랜치를 `release`가 아니라 `main` 기준으로 만들도록 바꿔 브랜치 꼬임을 줄였습니다.
+- `etc/servers/work-server/src/services/plan-service.ts`: 기본 작업 ID 처리, 중복 제약 해제, 완료 시 소스 이력 저장, `main` 반영 요청 단건화 등 자동화 추적 로직을 보강했습니다.
+- `src/features/planBoard/PlanBoardPage.tsx`: 소스 작업 이력과 증적 미리보기 흐름을 상세 화면에 반영했습니다.
+- `src/app/main/MainHeader.tsx`, `src/app/main/notificationApi.ts`: 알림 설정을 서버 토큰 상태와 동기화하고 미지원 환경의 404를 사용자 오류로 과하게 노출하지 않도록 조정했습니다.
+- `etc/servers/work-server/src/workers/plan-worker.ts`: 재처리와 반영 흐름을 `main` 중심으로 다시 맞췄습니다.
+
+```diff
+diff --git a/etc/servers/work-server/src/services/git-service.ts b/etc/servers/work-server/src/services/git-service.ts
+-  const baseBranch = releaseTarget || config.releaseBranch;
++  const baseBranch = config.mainBranch;
+
+diff --git a/etc/servers/work-server/src/services/plan-service.ts b/etc/servers/work-server/src/services/plan-service.ts
+-  workId: z.string().trim().min(1),
++  workId: z.string().trim().optional().default('작업ID'),
+...
++  await createPlanLifecycleSourceWorkHistory(
++    id,
++    '작업완료 처리로 release 반영 대기 상태로 전환했습니다.',
++    currentRow.assigned_branch ?? currentRow.release_target ?? 'release',
++  );
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- M etc/servers/work-server/src/services/plan-service.ts
+- M scripts/run-plan-codex-once.mjs
+- M etc/servers/work-server/.env.example
+- M etc/servers/work-server/README.md
+- M etc/servers/work-server/src/config/env.ts
+- M etc/servers/work-server/src/services/git-service.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M src/app/main/notificationApi.ts
+- M src/app/main/MainHeader.tsx
+- M etc/servers/work-server/package-lock.json
+- M etc/servers/work-server/package.json
+- M etc/servers/work-server/src/routes/notification.ts
+- M etc/servers/work-server/src/services/notification-service.ts
+- A etc/servers/work-server/src/types/web-push.d.ts
+- M src/main.tsx
+- A src/sw.ts
+- M vite.config.ts
+- M src/features/planBoard/PlanBoardPage.tsx
+- M etc/servers/work-server/src/routes/plan.ts
+- M src/features/planBoard/api.ts
+- M src/features/planBoard/types.ts
+- A etc/servers/work-server/src/services/plan-notification-service.ts
+- A src/app/main/notificationApi.ts
+- M src/layer/gesture/context/GestureContext.tsx
+- M src/styles.css
+- M etc/servers/work-server/src/app.ts
+- A etc/servers/work-server/src/routes/notification.ts
+- M etc/servers/work-server/src/server.ts
+- A etc/servers/work-server/src/services/notification-service.ts
+- M README.md
+- A docs/assets/worklogs/2026-04-02/plan-board-mobile-memo-detail.png
+- M docs/worklogs/2026-04-02.md
+- M package.json
+- M scripts/capture-component-screenshot.mjs
+- M scripts/capture-fullscreen-toggle-screenshot.mjs
+- A scripts/capture-plan-board-mobile-screenshot.mjs
+- M scripts/capture-search-command-screenshot.mjs
+- A scripts/worklog-capture-utils.mjs
+- M src/app/main/MainSidebar.tsx
+- M docs/README.md
+- M index.html
+- M src/app/main/MainView.tsx
+- M src/app/main/types.ts
+- M docker-compose.yml
+- M src/features/planBoard/index.ts
+- A docs/test001.md
+- M etc/servers/work-server/docker-compose.yml
+
+## 실행 커맨드
+
+```bash
+npm run plan:codex:once
+npm run build
+npm run capture:settings -- --date 2026-04-03
+```
+
+## 변경 파일
+
+- `docs/worklogs/2026-04-03.md`
+- `src/features/planBoard/PlanBoardPage.tsx`
+- `etc/servers/work-server/src/workers/plan-worker.ts`
+- `etc/servers/work-server/src/services/plan-service.ts`
+- `etc/servers/work-server/src/services/git-service.ts`
+- `src/app/main/MainHeader.tsx`
+- `src/app/main/notificationApi.ts`
+- `src/layer/gesture/context/GestureContext.tsx`
+- `scripts/run-plan-codex-once.mjs`
+- `src/styles.css`
diff --git a/docs/worklogs/2026-04-04.md b/docs/worklogs/2026-04-04.md
new file mode 100755
index 0000000..4a8610b
--- /dev/null
+++ b/docs/worklogs/2026-04-04.md
@@ -0,0 +1,104 @@
+# 2026-04-04 작업일지
+
+## 오늘 작업
+
+- Plan 목록 조회 버튼을 자동조회 중심 UX로 개편(남은 시간 표시/토글)
+- 자동조회 버튼 레이아웃 깨짐/문구 중복/선택 드래그 문제 보정
+- 앱 업데이트 진행 UI에 단계 표시와 프로그레스 흐름 추가
+- 서비스워커 교체 흐름(`SKIP_WAITING`, 등록 확인, 타임아웃) 안정화
+- 업데이트 실패 시 상태 복구와 오류 가시성 개선
+- `vite-plugin-pwa` 업데이트 경로를 공식 흐름 우선으로 정리
+- 자동화 Codex 실행 타임아웃 도입 및 롤백 과정 반영
+- Plan 삭제 응답/정리 로직 개선
+- work-server 메인 프로젝트 경로/풀 동작 정리
+
+## 이슈 및 메모
+
+- 업데이트 이슈는 단일 원인보다 서비스워커 교체 타이밍/등록 상태/환경 설정이 복합적으로 영향
+- 자동조회는 텍스트/배지/오버레이가 겹치면 UX가 빠르게 악화됨
+- Codex 타임아웃은 안전장치가 되지만 과도하면 정상 작업도 중단시킬 수 있음
+
+## 결정 사항
+
+- 업데이트 상태는 단순 성공/실패가 아닌 단계 기반으로 노출
+- 서비스워커 등록/교체는 실패 복구 경로까지 포함해 설계
+- 자동조회 UI는 버튼 본문 최소화 + 보조 배지 방식 유지
+- 워커 경로 설정은 환경별 명확한 기준 경로로 통일
+
+## 상세 작업 내역
+
+- Plan 보드에서는 자동조회 중심 운영을 위해 상단 액션을 재설계하고 모바일/데스크톱 표시 균형을 맞춤
+- 앱 업데이트 영역은 사용자 체감 기준(지금 무엇을 하는지)으로 문구와 상태 전이를 재구성
+- 서비스워커 관련 반복 장애를 줄이기 위해 등록 확인, 교체 메시지 처리, 타임아웃/롤백 로직을 함께 점검
+- 서버 측 경로 및 삭제 처리 개선으로 운영 중 발생하던 잔여 데이터/응답 일관성 문제를 줄임
+
+## 스크린샷
+
+- 저장소 기준 연결된 스크린샷 없음
+
+## 소스
+
+- `src/app/main/appUpdate.ts`, `src/app/main/MainHeader.tsx`: 앱 업데이트를 단계형 상태와 프로그레스 UI로 노출하고 서비스워커 등록 대기/재시도 흐름을 추가했습니다.
+- `src/features/planBoard/PlanBoardPage.tsx`: 자동조회 버튼 UX와 Plan 목록 상단 액션 구성을 손봤습니다.
+- `scripts/run-plan-codex-once.mjs`: Codex 자식 프로세스 종료/에러를 중복 처리하지 않도록 `settled` 가드를 추가했습니다.
+- `etc/servers/work-server/src/services/plan-service.ts`: Plan 삭제 시 연관 소스작업/조치/이슈 이력까지 함께 정리하도록 트랜잭션 삭제로 바꿨습니다.
+- `etc/servers/work-server/src/workers/plan-worker.ts`: 타임아웃과 실패 처리 흐름을 보강했습니다.
+
+```diff
+diff --git a/etc/servers/work-server/src/services/plan-service.ts b/etc/servers/work-server/src/services/plan-service.ts
+-  await db(PLAN_TABLE).where({ id }).delete();
++  await db.transaction(async (trx) => {
++    await trx(PLAN_SOURCE_WORK_TABLE).where({ plan_item_id: id }).delete();
++    await trx(PLAN_ACTION_TABLE).where({ plan_item_id: id }).delete();
++    await trx(PLAN_ISSUE_TABLE).where({ plan_item_id: id }).delete();
++    await trx(PLAN_TABLE).where({ id }).delete();
++  });
+
+diff --git a/src/app/main/MainHeader.tsx b/src/app/main/MainHeader.tsx
++import { applyAppUpdate, getAppUpdateSnapshot, subscribeAppUpdate, type AppUpdateStatus } from './appUpdate';
+...
++            <Button
++              block
++              icon={appUpdateStatus === 'updating' ? <ReloadOutlined spin /> : <DownloadOutlined />}
++            >
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- M src/app/main/appUpdate.ts
+- M etc/servers/work-server/src/routes/plan.ts
+- M etc/servers/work-server/src/services/plan-service.ts
+- M src/features/planBoard/api.ts
+- M etc/servers/work-server/src/config/env.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M scripts/run-plan-codex-once.mjs
+- M src/sw.ts
+- M vite.config.ts
+- M src/app/main/MainHeader.tsx
+- M src/styles.css
+- M etc/servers/work-server/.env.example
+- M etc/servers/work-server/docker-compose.yml
+- M src/features/planBoard/PlanBoardPage.tsx
+- M docker-compose.yml
+- A src/app/main/appUpdate.ts
+- M src/main.tsx
+
+## 실행 커맨드
+
+```bash
+npm run build
+npm run plan:codex:once
+```
+
+## 변경 파일
+
+- `docs/worklogs/2026-04-04.md`
+- `src/app/main/appUpdate.ts`
+- `src/app/main/MainHeader.tsx`
+- `src/features/planBoard/PlanBoardPage.tsx`
+- `src/sw.ts`
+- `vite.config.ts`
+- `etc/servers/work-server/src/config/env.ts`
+- `etc/servers/work-server/src/workers/plan-worker.ts`
+- `etc/servers/work-server/src/services/plan-service.ts`
+- `scripts/run-plan-codex-once.mjs`
diff --git a/docs/worklogs/2026-04-05.md b/docs/worklogs/2026-04-05.md
new file mode 100755
index 0000000..d61f55e
--- /dev/null
+++ b/docs/worklogs/2026-04-05.md
@@ -0,0 +1,129 @@
+# 2026-04-05 작업일지
+
+## 오늘 작업
+
+- Plan 작업 등록 시 `메인까지 자동등록` 옵션 추가 및 자동 main 반영 흐름 연결
+- 대기성 알림을 줄이고 실제 자동화 시작/핵심 단계 중심 알림으로 재정렬
+- 기본 진입 화면을 Plans로 조정하고 알림 진입 시 plan 상세 연결 개선
+- Plan 성과 차트를 보드 하단에서 별도 사이드 메뉴(차트) 화면으로 분리
+- 작업 ID 기본값일 때 알림 제목을 `#채번번호` 기준으로 표기
+- Codex Live 채팅 기능 추가 후 별도 Chat 메뉴/사이드바로 분리
+- 채팅을 폴링 기반에서 `work-server /ws/chat` WebSocket 기반으로 전환
+- Vite 개발 환경에 `/ws/chat` 프록시 추가 및 재연결 안정화
+- 채팅 UI를 하단 입력 고정형으로 개편하고 진단/오프라인 폴백 개선
+- 진행 알림(1분/3분) 메시지에 현재 처리 단계/요약 반영
+- 재처리/재시작 알림 조건 정교화(실제 재실행 예약 시만 노출)
+- Web Push 알림 태그 충돌(덮어쓰기) 방지 처리
+- Noti 토큰 관리 UI 및 전송 조건(토큰 등록 시) 정리
+- Docs 기본 선택을 `worklogs`로 조정
+- Plan 목록에서 `정상처리 구분(상/중/하)` 즉시 변경 기능 추가
+
+## 이슈 및 메모
+
+- 채팅 연결 이슈는 프론트 코드보다 프록시/업그레이드 헤더/URL 계산의 영향이 큼
+- 진행 알림은 내용 품질이 낮으면 오히려 운영 피로도를 높임
+- Web Push는 `tag` 충돌 시 중요한 이벤트가 사라질 수 있어 이벤트 키 설계가 중요
+- 재처리 알림은 "실행 예약"과 "단순 응답" 구분이 필요
+
+## 결정 사항
+
+- 채팅은 WebSocket 기본, 실패 시 진단 가능 메시지와 폴백 제공
+- 진행 알림은 `1분 후`, 이후 `3분마다` 유지하되 현재 단계 중심 문구 사용
+- 알림 제목은 사용자 입력값보다 채번 ID 우선 전략 유지
+- 재시작 알림은 실제 재실행이 예약된 경우에만 발송
+- Docs 진입 기본 탭은 작업일지 우선
+
+## 상세 작업 내역
+
+- Plan/Chat 네비게이션을 재구성해 상단 메뉴-사이드바-콘텐츠 관계를 명확히 분리
+- 워커 알림 체계를 시작/경과/완료/재시작으로 세분화하고 노이즈 이벤트를 제거
+- 채팅은 UI 레이아웃, 연결 안정성, 진단 문구, 오프라인 대체 응답까지 함께 다듬어 실사용 대응 범위를 확장
+- 푸시 알림은 iOS/Web 공통 이벤트 일관성을 높이고 덮어쓰기 문제를 줄이도록 이벤트 키 전략을 조정
+- Plan 보드 운영 기능(정상처리 구분, 상세 이동, 자동화 상태 반영)을 보강해 운영 화면으로서 활용도를 높임
+
+## 스크린샷
+
+![feature-chat-live](../assets/worklogs/2026-04-05/feature-chat-live.png)
+![feature-plans-charts](../assets/worklogs/2026-04-05/feature-plans-charts.png)
+
+## 소스
+
+- `etc/servers/work-server/src/services/chat-service.ts`, `src/app/main/MainChatPanel.tsx`: Codex Live 채팅을 WebSocket 기반으로 연결하고, 현재 화면/Plan 상태를 반영한 응답 흐름을 추가했습니다.
+- `src/features/planBoard/charts.tsx`, `src/features/planBoard/PlanBoardPage.tsx`: Plan 성과 차트를 별도 메뉴로 분리하고 보드 운영 기능을 확장했습니다.
+- `src/features/planBoard/api.ts`: Plan 데이터 조회를 `no-store` 중심으로 바꿔 현재 상태가 바로 반영되게 조정했습니다.
+- `etc/servers/work-server/src/services/plan-service.ts`, `etc/servers/work-server/src/workers/plan-worker.ts`: `메인까지 자동등록`, 정상처리 구분, 진행 알림/재시작 조건을 서버 흐름에 연결했습니다.
+
+```diff
+diff --git a/etc/servers/work-server/src/services/chat-service.ts b/etc/servers/work-server/src/services/chat-service.ts
++type ChatInboundMessage =
++  | { type: 'context:update'; payload: ChatContext }
++  | { type: 'message:send'; payload: { text: string } };
+...
++function isWorklogRequest(input: string) {
++  return mentionsWorklog || (normalized.includes('log') && asksToWrite);
++}
+...
++function buildWorklogReply(context: ChatContext | null, snapshot: PlanSnapshot | null) {
++  return [
++    `# ${today} 작업일지`,
++    '## 오늘 작업',
++  ].join('\\n');
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- M etc/servers/work-server/src/services/chat-service.ts
+- M etc/servers/work-server/src/routes/plan.ts
+- M src/app/main/MainChatPanel.tsx
+- M etc/servers/work-server/src/services/plan-notification-service.ts
+- M src/app/main/MainHeader.tsx
+- A src/app/main/tokenAccess.ts
+- M src/features/planBoard/PlanBoardPage.tsx
+- M etc/servers/work-server/src/config/env.ts
+- M etc/servers/work-server/src/services/plan-service.ts
+- M scripts/run-plan-codex-once.mjs
+- M src/features/planBoard/types.ts
+- M src/styles.css
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M src/app/main/MainContent.tsx
+- M vite.config.ts
+- M etc/servers/work-server/package-lock.json
+- M etc/servers/work-server/package.json
+- M etc/servers/work-server/src/server.ts
+- A etc/servers/work-server/src/services/chat-service.ts
+- M src/app/main/MainSidebar.tsx
+- M src/app/main/MainView.tsx
+- M src/app/main/types.ts
+- M src/store/appStore/types/index.ts
+- A src/app/main/MainChatPanel.tsx
+- A src/features/planBoard/charts.tsx
+- M src/features/planBoard/index.ts
+- M src/store/appStore/context/AppStoreContext.tsx
+- M src/sw.js
+- M src/features/planBoard/api.ts
+- M docker-compose.yml
+- M scripts/serve-app-dist.mjs
+- R src/sw.ts -> src/sw.js
+- A scripts/serve-app-dist.mjs
+- M src/app/main/appUpdate.ts
+
+## 실행 커맨드
+
+```bash
+npm run build
+npm run capture:feature -- --date 2026-04-05 --target chat-live
+npm run capture:feature -- --date 2026-04-05 --target plans-charts
+```
+
+## 변경 파일
+
+- `docs/worklogs/2026-04-05.md`
+- `src/app/main/MainChatPanel.tsx`
+- `src/features/planBoard/PlanBoardPage.tsx`
+- `src/features/planBoard/charts.tsx`
+- `src/features/planBoard/api.ts`
+- `etc/servers/work-server/src/services/plan-service.ts`
+- `etc/servers/work-server/src/services/plan-notification-service.ts`
+- `etc/servers/work-server/src/services/plan-notification-policy.ts`
+- `etc/servers/work-server/src/services/chat-service.ts`
+- `etc/servers/work-server/src/workers/plan-worker.ts`
diff --git a/docs/worklogs/2026-04-06.md b/docs/worklogs/2026-04-06.md
new file mode 100755
index 0000000..2411fa0
--- /dev/null
+++ b/docs/worklogs/2026-04-06.md
@@ -0,0 +1,171 @@
+# 2026-04-06 작업일지
+
+## 오늘 작업
+
+- Plan API의 `Load Failed`, 완료건 정상처리, 삭제 요청 실패 같은 기본 동작 오류를 먼저 정리
+- Plan 목록/상세에서 작업 ID 표기, 자동화 진행 상태, 로딩/오류 메시지, 복사 버튼 등 사용성 보강
+- Chat 화면이 선택된 Plan 문맥을 더 직접적으로 답하도록 서버 응답과 헤더 UX를 계속 보완
+- `Codex Live`와 `앱로그 > 에러 로그` 구조를 나누고, 에러 로그 상세 화면을 탭/미리보기 중심으로 확장
+- 앱 설정을 드롭다운 구조와 `app config` 저장 방식으로 재구성하고 DB 동기화, 스냅샷 캐시, 즉시 반영 흐름 정리
+- Docs 작업일지를 산출물 브라우저와 섹션 탭 기반 미리보기 형태로 키우고, `## 소스`/`## 실행 커맨드`/`## 변경 파일` 포맷을 통일
+- 작업일지 스크린샷 자동화, 중복 제거, 날짜별 연결 규칙을 정리하고 3월 30일~4월 6일 문서를 후속 보강
+- 토큰 미등록 사용자의 Plan/설정 접근 범위를 readonly와 403 기준으로 제한
+
+## 이슈 및 메모
+
+- Fastify는 빈 바디인데 `Content-Type: application/json`만 있는 `DELETE` 요청을 `400`으로 거절해 프런트 공통 요청 유틸 수정이 필요했음
+- 완료건 정상처리, 자동 재처리, 자동화 설정 반영 시점이 서로 어긋나면 사용자 입장에서는 저장 실패처럼 보여 서버/프런트 기준을 같이 맞춰야 했음
+- 작업일지 본문만 보여주던 방식으로는 스크린샷, 로그, 코드 diff, 변경 파일을 따라가기 어려워 산출물 브라우저가 필요했음
+- 에러 로그/채팅/작업일지 preview가 각각 다른 규칙으로 렌더링돼 fenced code, 커맨드 블록, 파일 목록 표시가 계속 들쭉날쭉했음
+- 토큰 미등록 사용자에게는 Plan 상세, 메모, 소스 작업, 설정 일부를 그대로 노출하면 안 돼 화면과 API를 동시에 잠가야 했음
+
+## 결정 사항
+
+- 공통 API 유틸은 HTTP 메서드가 아니라 실제 바디 유무 기준으로 `Content-Type`을 설정
+- 자동화 실패 후 메모 저장이나 이슈 조치만으로는 자동 재처리를 다시 켜지 않도록 `retry=false` 기본값을 유지
+- 작업일지 preview는 Markdown 본문 외 산출물도 같은 카드 안에서 섹션 단위 탭으로 노출
+- 작업일지 `## 소스`는 파일 나열보다 "요약 설명 + 대표 diff" 중심으로 고정
+- 앱 설정은 클라이언트 임시 상태가 아니라 DB 저장값과 비교 가능한 `app config` 구조로 관리
+- 토큰 미등록 사용자는 Plan 관련 쓰기 작업과 민감 상세 열람을 모두 제한
+
+## 상세 작업 내역
+
+- `src/features/planBoard/api.ts`에서 요청 타임아웃/재시도와 헤더 구성을 다듬어 `Load Failed`, 삭제 실패, 정상처리 갱신 문제를 함께 줄였음
+- `src/features/planBoard/PlanBoardPage.tsx`에서 작업 ID 표기, 자동화 상태 설명, 오류 알림 복사, 진행중 우선 정렬, readonly 처리, 작업일지 산출물 브라우저를 순차 반영
+- `etc/servers/work-server/src/services/chat-service.ts`는 Chat 화면이어도 `planId`가 있으면 상태/이력/이슈를 같이 답하게 보강했고, 응답 제한 이유도 더 직접적으로 바꿨음
+- `src/app/main/MainChatPanel.tsx`와 서버 에러 로그 라우트/서비스를 연결해 `앱로그 > 에러 로그` 화면과 상세 탭/최대화/참조 preview를 정리했음
+- `src/app/main/MainHeader.tsx`, `src/app/main/appConfig.ts`, `etc/servers/work-server/src/routes/app-config.ts` 계층에서 앱 설정 드롭다운, DB 저장, 동기화, 캐시, 즉시 반영 흐름을 묶었음
+- `src/components/markdownPreview/MarkdownPreviewCard.tsx`, `src/components/markdownPreview/MarkdownPreviewContent.tsx`, `src/components/previewer/*`는 작업일지/산출물 preview를 공통 포맷 레이어로 렌더링하게 바꿨음
+- `scripts/capture-menu-screenshot.mjs`, `scripts/capture-feature-screenshot.mjs`, `scripts/worklog-capture-utils.mjs`로 메뉴/기능 캡처와 작업일지 연결을 자동화했고, 불필요한 날짜 참조는 다시 정리했음
+- `docs/worklogs/2026-03-30.md`부터 `docs/worklogs/2026-04-06.md`까지 문서 포맷과 스크린샷/소스/커맨드/변경 파일 섹션을 현재 규칙에 맞게 보강했음
+
+## 스크린샷
+
+- 저장소 기준 연결된 스크린샷 없음
+
+## 소스
+
+- Plan 기본 동작 안정화: 완료건 정상처리, 삭제, 재시도, 오류 표시에 걸친 프런트/서버 동작을 정리했습니다.
+- `src/features/planBoard/api.ts`, `src/features/planBoard/PlanBoardPage.tsx`, `etc/servers/work-server/src/services/plan-service.ts`: 요청 헤더, 타임아웃, 목록 정렬, readonly, 완료 처리와 자동 재처리 기준을 함께 맞췄습니다.
+- Chat/앱로그 확장: 선택된 Plan 문맥 응답과 에러 로그 상세 뷰를 계속 키웠습니다.
+- `etc/servers/work-server/src/services/chat-service.ts`, `src/app/main/MainChatPanel.tsx`, `src/app/main/errorLogApi.ts`: Chat 답변 문맥, 앱로그 메뉴 구조, 에러 로그 조회/상세/preview 흐름을 연결했습니다.
+- 작업일지/증적 preview 정리: 문서 본문, 코드, 커맨드, 변경 파일을 같은 시각 규칙으로 렌더링하게 통일했습니다.
+- `src/components/markdownPreview/MarkdownPreviewContent.tsx`, `src/components/previewer/renderers.tsx`, `docs/templates/worklog-template.md`: 작업일지 포맷과 preview 렌더러를 섹션 중심으로 정리했습니다.
+
+```diff
+diff --git a/src/features/planBoard/api.ts b/src/features/planBoard/api.ts
++  const hasBody = init?.body !== undefined && init.body !== null;
+...
+-  headers.set('Content-Type', 'application/json');
++  if (hasBody && !headers.has('Content-Type')) {
++    headers.set('Content-Type', 'application/json');
++  }
+```
+
+```diff
+diff --git a/src/app/main/MainHeader.tsx b/src/app/main/MainHeader.tsx
+- <button>앱 설정</button>
++ <Dropdown menu={{ items: appConfigMenus }}>
++   <button>앱 설정</button>
++ </Dropdown>
+```
+
+```diff
+diff --git a/src/components/previewer/renderers.tsx b/src/components/previewer/renderers.tsx
++export function renderMarkdownSectionPreview(section, context) {
++  if (section.type === 'code') return <CodeBlockPreview {...context} />;
++  if (section.type === 'command') return <CommandLogPreview {...context} />;
++  return <DefaultSectionPreview {...context} />;
++}
+```
+
+## 변경 파일 (전체, 중복 제거, KST 기준)
+
+- M src/app/main/MainChatPanel.tsx
+- M src/styles.css
+- M etc/servers/work-server/src/services/app-config-service.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M src/app/main/MainHeader.tsx
+- M src/components/window/WindowUI.tsx
+- M src/app/main/MainSidebar.tsx
+- M src/app/main/MainView.tsx
+- M etc/servers/work-server/src/services/plan-service.ts
+- M src/features/planBoard/PlanBoardPage.tsx
+- M src/features/planBoard/api.ts
+- M etc/servers/work-server/src/services/plan-policy.test.ts
+- M etc/servers/work-server/src/app.ts
+- M etc/servers/work-server/src/services/error-log-service.ts
+- M src/app/main/errorLogApi.ts
+- M src/app/main/MainContent.tsx
+- M src/app/main/types.ts
+- A etc/servers/work-server/src/routes/error-log.ts
+- A etc/servers/work-server/src/services/error-log-service.ts
+- M src/App.tsx
+- A src/app/main/errorLogApi.ts
+- M etc/servers/work-server/src/routes/app-config.ts
+- M src/app/main/appConfig.ts
+- A etc/servers/work-server/src/routes/app-config.ts
+- A etc/servers/work-server/src/services/app-config-service.ts
+- M etc/servers/work-server/src/config/env.ts
+- M etc/servers/work-server/src/routes/plan.ts
+- M etc/servers/work-server/src/services/git-service.ts
+- M etc/servers/work-server/src/services/notification-service.ts
+- A src/app/main/appConfig.ts
+- M etc/servers/work-server/src/services/chat-service.ts
+- M src/features/planBoard/charts.tsx
+- M src/features/planBoard/types.ts
+- A docs/worklogs/2026-04-03.md
+- A docs/worklogs/2026-04-04.md
+- A docs/worklogs/2026-04-05.md
+- A docs/worklogs/2026-04-06.md
+- M etc/servers/work-server/src/services/plan-notification-service.ts
+- M etc/servers/work-server/package.json
+- A etc/servers/work-server/src/services/plan-notification-policy.ts
+- A etc/servers/work-server/src/services/plan-policy.test.ts
+- A etc/servers/work-server/src/services/plan-retry-policy.ts
+- M src/sw.js
+
+## 실행 커맨드
+
+```bash
+npx tsc -b
+npm run build:app
+npm run capture:menu -- --date 2026-04-06
+npm run capture:feature -- --date 2026-04-06
+npm run plan:codex:once
+```
+
+## 변경 파일
+
+- `docs/templates/worklog-template.md`
+- `docs/worklogs/2026-03-30.md`
+- `docs/worklogs/2026-03-31.md`
+- `docs/worklogs/2026-04-01.md`
+- `docs/worklogs/2026-04-02.md`
+- `docs/worklogs/2026-04-03.md`
+- `docs/worklogs/2026-04-04.md`
+- `docs/worklogs/2026-04-05.md`
+- `docs/worklogs/2026-04-06.md`
+- `etc/servers/work-server/src/routes/app-config.ts`
+- `etc/servers/work-server/src/routes/error-log.ts`
+- `etc/servers/work-server/src/routes/plan.ts`
+- `etc/servers/work-server/src/services/app-config-service.ts`
+- `etc/servers/work-server/src/services/chat-service.ts`
+- `etc/servers/work-server/src/services/error-log-service.ts`
+- `etc/servers/work-server/src/services/plan-service.ts`
+- `etc/servers/work-server/src/workers/plan-worker.ts`
+- `scripts/capture-feature-screenshot.mjs`
+- `scripts/capture-menu-screenshot.mjs`
+- `scripts/worklog-capture-utils.mjs`
+- `src/app/main/MainChatPanel.tsx`
+- `src/app/main/MainHeader.tsx`
+- `src/app/main/appConfig.ts`
+- `src/app/main/errorLogApi.ts`
+- `src/components/markdownPreview/MarkdownPreviewCard.tsx`
+- `src/components/markdownPreview/MarkdownPreviewContent.tsx`
+- `src/components/previewer/PreviewerUI.css`
+- `src/components/previewer/PreviewerUI.tsx`
+- `src/components/previewer/renderers.tsx`
+- `src/features/planBoard/PlanBoardPage.tsx`
+- `src/features/planBoard/api.ts`
+- `src/styles.css`
diff --git a/docs/worklogs/2026-04-07.md b/docs/worklogs/2026-04-07.md
new file mode 100755
index 0000000..0dc26dc
--- /dev/null
+++ b/docs/worklogs/2026-04-07.md
@@ -0,0 +1,159 @@
+# 2026-04-07 작업일지
+
+## 오늘 작업
+
+- 누락된 `2026-04-07` 작업일지 파일을 복구
+- Plan 재처리 요청 이력과 자동작업 실패 이슈를 기준으로 오늘 상태를 문서화
+- `Docs > 작업일지` 화면 캡처를 생성해 오늘자 스크린샷 자산과 문서 링크를 연결
+- `## 소스`, `## 실행 커맨드`, `## 변경/신규 파일` 섹션을 현재 정리 결과 기준으로 갱신
+
+## 이슈 및 해결
+
+- 오늘자 작업일지가 없어 Docs와 Plan 증적에서 `2026-04-07` 기록을 바로 확인할 수 없었음
+- 별도 기능 수정 없이 누락된 일자 문서를 추가해 조회 공백을 해소
+- 스크린샷 섹션이 비어 있어 오늘 작업 화면을 바로 검증하기 어려웠음
+- `vite` 개발 서버와 `capture:feature` 스크립트로 `feature-docs-worklogs.png`를 생성해 문서와 연결
+
+## 결정 사항
+
+- 오늘 조치 범위는 작업일지 정리와 증적 보강으로 한정
+- 2026-04-07 증적 대표 화면은 `Docs > 작업일지` 뷰로 통일
+- 앱 번들 타입 오류가 남아 있어 이번 캡처는 `build:app` 대신 `vite` 개발 서버 기준으로 수행
+
+## 상세 작업 내역
+
+- `docs/worklogs/2026-04-07.md`를 생성해 오늘자 작업일지 기본 섹션을 채움
+- 최근 조치 이력의 재처리 요청과 자동작업 실패 이력을 작업일지 맥락에 맞게 정리
+- `docs/assets/worklogs/2026-04-07/feature-docs-worklogs.png`를 생성하고 `## 스크린샷`에 연결
+- 실행한 확인/캡처 커맨드와 오늘 기준 변경 파일 증적을 문서 하단 섹션에 정리
+
+## 스크린샷
+
+![feature-docs-worklogs](../assets/worklogs/2026-04-07/feature-docs-worklogs.png)
+
+## 소스
+
+### 파일 1: `docs/worklogs/2026-04-07.md`
+
+- 누락된 작업일지 복구 후 최신 증적까지 포함하도록 오늘자 문서를 다시 정리했습니다.
+- 오늘 작업 요약, 스크린샷 링크, 실행 커맨드, 변경/신규 파일 목록을 최신 상태로 반영했습니다.
+
+```diff
+diff --git a/docs/worklogs/2026-04-07.md b/docs/worklogs/2026-04-07.md
++## 스크린샷
++![feature-docs-worklogs](../assets/worklogs/2026-04-07/feature-docs-worklogs.png)
++## 실행 커맨드
++npm run dev -- --host 127.0.0.1 --port 4173
+```
+
+### 파일 2: `docs/assets/worklogs/2026-04-07/feature-docs-worklogs.png`
+
+- `Docs > 작업일지` 화면을 오늘자 자산 폴더에 저장해 문서 증적에서 바로 미리볼 수 있게 했습니다.
+- 2026-04-07 작업일지의 스크린샷 섹션과 1:1로 대응하는 캡처 파일입니다.
+
+```diff
+Binary file added: docs/assets/worklogs/2026-04-07/feature-docs-worklogs.png
+```
+
+## 변경/신규 파일 (전체, 중복 제거, KST 기준)
+
+- M src/app/main/MainHeader.tsx
+- M scripts/run-plan-codex-once.mjs
+- M docs/worklogs/2026-04-07.md
+- M etc/servers/work-server/src/services/app-config-service.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M src/app/main/appConfig.ts
+- A .github/workflows/daily-docs-maintenance.yml
+- M README.md
+- M docs/README.md
+- A docs/assets/worklogs/2026-04-07/.gitkeep
+- A docs/assets/worklogs/2026-04-07/feature-docs-worklogs.png
+- A docs/daily-maintenance.config.json
+- M docs/worklogs/2026-03-30.md
+- M docs/worklogs/2026-03-31.md
+- M docs/worklogs/2026-04-01.md
+- M docs/worklogs/2026-04-02.md
+- M docs/worklogs/2026-04-03.md
+- M docs/worklogs/2026-04-04.md
+- M docs/worklogs/2026-04-05.md
+- M docs/worklogs/2026-04-06.md
+- M package.json
+- A scripts/refresh-daily-docs.mjs
+- M src/features/planBoard/PlanBoardPage.tsx
+- A etc/servers/work-server/src/services/plan-service.test.ts
+- M etc/servers/work-server/src/services/plan-service.ts
+- A docs/worklogs/2026-04-07.md
+- M docs/templates/worklog-template.md
+- M etc/servers/work-server/src/services/chat-service.ts
+- M src/components/markdownPreview/MarkdownPreviewCard.tsx
+- M scripts/capture-component-screenshot.mjs
+- M scripts/capture-feature-screenshot.mjs
+- M scripts/capture-fullscreen-toggle-screenshot.mjs
+- M scripts/capture-menu-screenshot.mjs
+- M scripts/capture-plan-board-mobile-screenshot.mjs
+- M scripts/capture-search-command-screenshot.mjs
+- M scripts/capture-settings-screenshot.mjs
+- M scripts/worklog-capture-utils.mjs
+- M src/components/markdownPreview/MarkdownPreviewContent.tsx
+- M src/components/previewer/PreviewerUI.css
+- M src/components/previewer/PreviewerUI.tsx
+- A src/components/previewer/renderers.tsx
+- M src/components/previewer/types/index.ts
+- M src/components/previewer/types/previewer.ts
+- M etc/servers/work-server/src/routes/plan.ts
+- M src/features/planBoard/types.ts
+- M src/features/planBoard/api.ts
+- M src/styles.css
+- M src/app/main/MainContent.tsx
+- M src/app/main/MainView.tsx
+- R docs/assets/worklogs/2026-04-03/feature-chat-live.png -> docs/assets/worklogs/2026-04-05/feature-chat-live.png
+- R docs/assets/worklogs/2026-04-03/feature-plans-charts.png -> docs/assets/worklogs/2026-04-05/feature-plans-charts.png
+- A docs/assets/worklogs/2026-04-03/feature-chat-live.png
+- A docs/assets/worklogs/2026-04-03/feature-plans-charts.png
+- A docs/assets/worklogs/2026-04-03/settings-app.png
+- A docs/assets/worklogs/2026-04-03/settings-notification.png
+- A scripts/capture-settings-screenshot.mjs
+- D docs/assets/worklogs/2026-04-06/docs-menu.png
+- D docs/assets/worklogs/2026-04-06/feature-apis-components.png
+- D docs/assets/worklogs/2026-04-06/feature-docs-worklogs.png
+- D docs/assets/worklogs/2026-04-06/feature-plans-board.png
+- D docs/assets/worklogs/2026-04-06/feature-plans-charts.png
+- D docs/assets/worklogs/2026-04-06/plans-menu.png
+- A docs/assets/worklogs/2026-04-06/docs-menu.png
+- A docs/assets/worklogs/2026-04-06/feature-apis-components.png
+- A docs/assets/worklogs/2026-04-06/feature-docs-worklogs.png
+- A docs/assets/worklogs/2026-04-06/feature-plans-board.png
+- A docs/assets/worklogs/2026-04-06/feature-plans-charts.png
+- A docs/assets/worklogs/2026-04-06/plans-menu.png
+- A scripts/capture-feature-screenshot.mjs
+- A scripts/capture-menu-screenshot.mjs
+- A docs/assets/worklogs/2026-03-30/input.png
+- A docs/assets/worklogs/2026-03-30/status-badge.png
+- A docs/assets/worklogs/2026-03-31/email-input.png
+- A docs/assets/worklogs/2026-03-31/multi-input.png
+- A docs/assets/worklogs/2026-04-01/check-combo-input.png
+- A docs/assets/worklogs/2026-04-01/dashboard-multi-progress.png
+- A docs/assets/worklogs/2026-04-01/dashboard-progress.png
+- A docs/assets/worklogs/2026-04-01/popup-input.png
+- A docs/assets/worklogs/2026-04-01/select-input.png
+- M etc/servers/work-server/src/services/plan-notification-service.ts
+- M etc/servers/work-server/src/services/plan-policy.test.ts
+- M src/app/main/MainChatPanel.tsx
+
+## 실행 커맨드
+
+```bash
+git -c safe.directory=/workspace/auto_codex/repo status --short --branch
+sed -n '1,260p' docs/worklogs/2026-04-07.md
+sed -n '1,260p' docs/templates/worklog-template.md
+npm run dev -- --host 127.0.0.1 --port 4173
+CAPTURE_BASE_URL=http://127.0.0.1:4173 npm run capture:feature -- docs-worklogs 2026-04-07
+git -c safe.directory=/workspace/auto_codex/repo diff -- docs/worklogs/2026-04-07.md
+```
+
+## 자동 정리 상태
+
+- 일일 정리 스크립트 실행일: `2026-04-07`
+- 작업일지 파일 점검: `docs/worklogs/2026-04-07.md`
+- 스크린샷 폴더 점검: `docs/assets/worklogs/2026-04-07/`
+- README / Docs 가이드 자동 요약 갱신 완료
diff --git a/docs/worklogs/2026-04-08.md b/docs/worklogs/2026-04-08.md
new file mode 100755
index 0000000..fb6b5a6
--- /dev/null
+++ b/docs/worklogs/2026-04-08.md
@@ -0,0 +1,188 @@
+# 2026-04-08 작업일지
+
+## 오늘 작업
+
+- `Play` 상단 메뉴와 `Play > Test` 진입 경로를 추가했습니다.
+- 헤더 최상단 메뉴를 `Docs / Plan / Play` 3개 기준으로 정리했습니다.
+- `Play > layout` 화면을 만들고 상하/좌우 분할, 재귀 분할, 크기 단위, 최소 크기, 리사이즈 여부를 조절할 수 있게 확장했습니다.
+- Plan 상세에서 긴 `issue`/`error` 본문을 기본 접힘으로 바꾸고 아이콘으로만 펼치도록 정리했습니다.
+- `release` 환경에서 `main` 미반영 항목만 모아 보여주는 모달을 추가했습니다.
+- 자동화 작업 브랜치 기준을 `release`가 아니라 `main`으로 바로잡고, worklog 자동화는 `hotfix/*` 브랜치를 쓰도록 보강했습니다.
+- 누락됐던 `docs/worklogs/2026-04-08.md` 초안이 템플릿 상태로만 남아 있던 문제를 실제 작업 내역 기준으로 다시 정리했습니다.
+- 누락됐던 `Play > layout` 스크린샷을 `docs/assets/worklogs/2026-04-08/feature-play-layout.png`로 다시 연결했습니다.
+
+## 이슈 및 해결
+
+- 오늘자 작업일지가 템플릿 문구만 남아 있어 `play`, 자동화 브랜치 정책, release 대기 모달 작업 이력을 문서에서 확인할 수 없었습니다.
+- Git 기록 기준으로 2026-04-08 UTC/KST 커밋을 다시 확인해 실제 작업 항목과 변경 파일을 복원했습니다.
+- 사용자가 언급한 `history` 기능은 Git 이력상 2026-04-07 13:44:06 UTC 커밋(`plan(history)`)에 생성됐고, 2026-04-08에는 `play`/plan 상세/자동화 보강 작업이 집중됐습니다.
+- 스크린샷 섹션이 비어 있고 소스 뷰어의 diff 라벨도 일관되지 않아, 증적 확인 흐름이 한 번에 읽히지 않았습니다.
+
+## 결정 사항
+
+- 2026-04-08 문서는 placeholder 템플릿이 아니라 실제 커밋 증적 기준으로 유지합니다.
+- `Play`는 `Test`와 `layout` 두 축으로 관리하고, 레이아웃 실험은 전용 playground에서 확장합니다.
+- Plan 소스 뷰어 탭 명칭은 사용자가 바로 이해할 수 있게 `작업란 / 전체소스 / diff`로 정리합니다.
+- 자동화 작업 브랜치 base는 `main`, 자동 worklog 정리는 `hotfix/*` 흐름을 따릅니다.
+- 2026-04-08 대표 스크린샷은 `Play > layout` 화면으로 고정합니다.
+
+## 상세 작업 내역
+
+- `src/app/main/MainHeader.tsx`, `src/app/main/MainView.tsx`, `src/app/main/MainContent.tsx`, `src/app/main/types.ts`, `src/views/play/TestView.tsx`에서 `Play` 메뉴와 `Play > Test` 화면을 연결했습니다.
+- `src/views/play/LayoutPlaygroundView.tsx`와 `src/styles.css`에서 레이아웃 playground를 추가하고, 이후 같은 날 재귀 분할과 초기 빈 상태 진입까지 두 차례 확장했습니다.
+- `src/features/planBoard/PlanBoardPage.tsx`에서 긴 이슈 본문 접힘 처리와 소스 작업 미리보기 경험을 보강했습니다.
+- `src/App.tsx`, `src/app/main/ReleasePendingMainModal.tsx`, `src/styles.css`에서 `release` 접속 시 `main` 미반영 항목 안내 모달을 추가했습니다.
+- `scripts/run-plan-codex-once.mjs`, `etc/servers/work-server/src/services/git-service.ts`, `etc/servers/work-server/src/workers/plan-worker.ts`, `etc/servers/work-server/src/services/plan-service.ts`에서 자동화 브랜치/정리 정책을 수정했습니다.
+- 오늘 문서 누락 보완으로 `docs/worklogs/2026-04-08.md`를 실제 기록 기준으로 재작성했습니다.
+- `scripts/capture-feature-screenshot.mjs`에 `play-layout` 프리셋을 추가해 오늘자 대표 화면을 다시 캡처할 수 있게 했습니다.
+- `src/components/previewer/CodexDiffPreviewer.tsx`에서 소스 뷰어 탭 라벨을 `전체소스 / diff`로 맞췄습니다.
+
+## 스크린샷
+
+![feature-play-layout](../assets/worklogs/2026-04-08/feature-play-layout.png)
+
+## 소스
+
+### 파일 1: `src/app/main/MainView.tsx`
+
+- 상단 메뉴 체계를 `Docs / Plan / Play` 중심으로 재정리하고 `Play > Test`, `Play > layout` 탐색을 연결했습니다.
+- 검색 커맨드와 초기 URL 파라미터도 `playSection` 기준으로 함께 맞췄습니다.
+
+```diff
+const PLAY_BASE_OPEN_KEYS = ['play-group', 'play-test-group', 'play-layout-group'] as const;
+...
++        id: 'page:play:test',
++        keywords: ['play', 'test', '테스트', 'TEST메뉴'],
++      },
++      {
++        id: 'page:play:layout',
++        keywords: ['play', 'layout', 'flex', 'split', '분할', '레이아웃', 'preview'],
+```
+
+### 파일 2: `src/views/play/LayoutPlaygroundView.tsx`
+
+- `play > layout` 화면을 추가하고, 같은 날 재귀 분할과 빈 상태 시작 플로우까지 확장했습니다.
+- 상하/좌우 시작, `px/%` 단위, 최소 크기, 리사이즈 허용 여부를 화면에서 바로 조정할 수 있습니다.
+
+```diff
+diff --git a/src/views/play/LayoutPlaygroundView.tsx b/src/views/play/LayoutPlaygroundView.tsx
++const DEFAULT_LAYOUT_DIRECTION = 'row';
++const EMPTY_LAYOUT: LayoutNode | null = null;
+...
++<Button onClick={() => handleCreateRoot('row')}>좌우로 시작</Button>
++<Button onClick={() => handleCreateRoot('column')}>상하로 시작</Button>
+...
++<Button onClick={() => handleSplitNode(selectedNodeId, 'row')}>좌우 추가</Button>
++<Button onClick={() => handleSplitNode(selectedNodeId, 'column')}>상하 추가</Button>
+```
+
+### 파일 3: `src/app/main/ReleasePendingMainModal.tsx`
+
+- `release` 환경에서 아직 `main`에 반영되지 않은 작업만 모아 보여주는 전용 모달을 추가했습니다.
+- `릴리즈완료`, `main반영대기/중/실패` 상태를 기준으로 요약과 현황을 표시합니다.
+
+```diff
+diff --git a/src/app/main/ReleasePendingMainModal.tsx b/src/app/main/ReleasePendingMainModal.tsx
++export function ReleasePendingMainModal() {
++  // release 서버에서 main 미반영 항목만 조회
++}
+```
+
+### 파일 4: `scripts/run-plan-codex-once.mjs`
+
+- `.auto_codex` 작업 브랜치의 base를 `release`가 아니라 `main`으로 맞췄습니다.
+- 같은 날 자동 worklog 쪽은 `hotfix/*` 흐름을 따르도록 서버 로직도 함께 보강됐습니다.
+
+```diff
+diff --git a/scripts/run-plan-codex-once.mjs b/scripts/run-plan-codex-once.mjs
+-const baseBranch = 'release';
++const baseBranch = 'main';
+```
+
+### 파일 5: `src/features/planBoard/PlanBoardPage.tsx`
+
+- 긴 `issue`/`error` 본문은 기본 접힘으로 바꾸고, 이번 보완에서 소스 뷰어 탭 명칭도 `작업란 / 전체소스 / diff`로 정리했습니다.
+
+```diff
+diff --git a/src/features/planBoard/PlanBoardPage.tsx b/src/features/planBoard/PlanBoardPage.tsx
+-      label: '요약',
++      label: '작업란',
+-      label: '전체 소스',
++      label: '전체소스',
+-      label: 'Diff',
++      label: 'diff',
+```
+
+### 파일 6: `src/components/previewer/CodexDiffPreviewer.tsx`
+
+- worklog 소스 탭과 Plan 소스 뷰어의 모드 라벨을 `전체소스 / diff`로 통일했습니다.
+- 기존 `Raw Diff` 표기를 `diff`로 바꿔 사용자가 탭 목적을 바로 읽을 수 있게 맞췄습니다.
+
+```diff
+diff --git a/src/components/previewer/CodexDiffPreviewer.tsx b/src/components/previewer/CodexDiffPreviewer.tsx
+-            { label: '전체 소스', value: 'source' },
+-            { label: 'Raw Diff', value: 'diff' },
++            { label: '전체소스', value: 'source' },
++            { label: 'diff', value: 'diff' },
+```
+
+### 파일 7: `scripts/capture-feature-screenshot.mjs`
+
+- `Play > layout` 화면도 기존 worklog 캡처 흐름으로 다시 만들 수 있게 프리셋을 추가했습니다.
+- 오늘자 누락 스크린샷은 이 프리셋으로 `feature-play-layout.png`를 생성해 연결했습니다.
+
+```diff
+diff --git a/scripts/capture-feature-screenshot.mjs b/scripts/capture-feature-screenshot.mjs
++  'play-layout': {
++    topMenu: 'play',
++    screenshotFileName: 'feature-play-layout.png',
++    targetSelector: '.app-main-card',
++    query: { playSection: 'layout' },
++  },
+```
+
+### 파일 8: `docs/assets/worklogs/2026-04-08/feature-play-layout.png`
+
+- `Play > layout` 대표 화면을 다시 캡처해 오늘자 스크린샷 섹션과 바로 연결했습니다.
+- 2026-04-08 작업일지에서 비어 있던 시각 증적을 채우는 실제 산출물 파일입니다.
+
+```diff
+Binary file added: docs/assets/worklogs/2026-04-08/feature-play-layout.png
+```
+
+## 실행 커맨드
+
+```bash
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-08 00:00' --until='2026-04-08 23:59:59' --stat --oneline --decorate
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-08 00:00' --until='2026-04-08 23:59:59' --name-status --format='commit %H%nAuthor: %an%nDate: %ad%nSubject: %s' --date=iso
+git -c safe.directory=/workspace/auto_codex/repo log --follow --name-status -- src/features/history/HistoryPage.tsx
+npm run dev -- --host 127.0.0.1 --port 4173
+CAPTURE_BASE_URL=http://127.0.0.1:4173 node scripts/capture-feature-screenshot.mjs play-layout 2026-04-08
+```
+
+## 변경/신규 파일 (전체, 중복 제거, Git 기록 기준)
+
+- M src/app/main/MainHeader.tsx
+- M src/app/main/MainContent.tsx
+- M src/app/main/MainSidebar.tsx
+- M src/app/main/MainView.tsx
+- M src/app/main/types.ts
+- M src/app/main/clientIdentity.ts
+- M src/App.tsx
+- A src/app/main/ReleasePendingMainModal.tsx
+- A src/views/play/TestView.tsx
+- A src/views/play/LayoutPlaygroundView.tsx
+- M src/features/planBoard/PlanBoardPage.tsx
+- M src/styles.css
+- M src/store/appStore/types/index.ts
+- M scripts/run-plan-codex-once.mjs
+- M etc/servers/work-server/src/services/git-service.ts
+- A etc/servers/work-server/src/services/git-service.test.ts
+- M etc/servers/work-server/src/services/plan-service.ts
+- M etc/servers/work-server/src/services/plan-service.test.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M AGENTS.md
+- A docs/worklogs/2026-04-08.md
+- M src/components/previewer/CodexDiffPreviewer.tsx
+- M scripts/capture-feature-screenshot.mjs
+- A docs/assets/worklogs/2026-04-08/feature-play-layout.png
diff --git a/docs/worklogs/2026-04-09.md b/docs/worklogs/2026-04-09.md
new file mode 100755
index 0000000..2e6b494
--- /dev/null
+++ b/docs/worklogs/2026-04-09.md
@@ -0,0 +1,446 @@
+# 2026-04-09 작업일지
+
+## 오늘 작업
+
+- `Play > Layout`을 컴포넌트/위젯 선택형 레이아웃 편집기로 확장하고, 저장 레이아웃 목록/상세 흐름을 여러 차례 다듬었습니다.
+- 레이아웃 저장소를 브라우저 `IndexedDB`에서 `work-db` API 기반 서버 저장 방식으로 전환했습니다.
+- `Window UI` 검색 중복 열림, 모바일 리사이즈 hit area, 더블탭/더블클릭 확장, 스크롤 처리 문제를 순차적으로 정리했습니다.
+- `EmbeddedMapUI`, `GPS Sample Widget`, 서버 경유 푸시 알림 흐름을 추가해 GPS 거점/반경/알림 시나리오를 앱 안에서 직접 다룰 수 있게 만들었습니다.
+- `Text Memo Widget`을 신규 추가하고, 이어서 iOS 메모 느낌의 시트형 UI로 재구성했습니다.
+- `Plan Board`에 로컬 페이지네이션, `release 반영 상태`/`자동화 실패` 바로가기, `main` 일괄 반영 흐름을 추가했습니다.
+- 앱 초기 1.9초 로딩 오버레이, 제스처 단축키 설정, `release 반영 상태` 메뉴/모달, Git flow 안전 규칙 문서 보강까지 반영했습니다.
+- 오늘자 작업 증적을 위해 전체 화면 1장과 위젯 단위 부분 캡처 1장을 `docs/assets/worklogs/2026-04-09/`에 저장하고 연결했습니다.
+
+## 이슈 및 해결
+
+- `Play > Layout` 저장본을 클라이언트 로컬 저장소만으로 관리하던 상태라 작업 환경이 바뀌면 레이아웃이 끊겼습니다.
+- `src/views/play/layoutStorage.ts`를 `work-db` API 호출 구조로 전환하고, 인증 토큰/클라이언트 ID 헤더를 함께 보내도록 바꿔 저장본을 서버 기준으로 유지했습니다.
+- `Window UI` 검색/열기 흐름에서 같은 항목이 짧은 시간 안에 2개씩 열리거나, 전체 부모 기준으로 과도하게 확장되는 재발 이슈가 있었습니다.
+- `SearchLayerContext`, `SearchCommandModal`, `WindowUI`를 함께 수정해 선택 잠금, 500ms 중복 차단, 보이는 viewport 기준 확장 로직으로 안정화했습니다.
+- 지도 반경 오버레이는 초기에 좌표 기반 렌더가 아니라 CSS 고정 오버레이 성격이 강해 지도를 움직일 때 의미가 깨졌습니다.
+- `EmbeddedMapUI`를 실제 좌표/경계 계산 기반 OSM iframe 오버레이로 바꾸고, GPS 위젯에서 선택 거점과 현재 위치를 함께 표시하도록 맞췄습니다.
+- 자동화 쪽은 `main` 반영이 단건 기준으로만 움직여 `release`에 쌓인 항목을 한 번에 넘기기 어려웠습니다.
+- `plan-service.ts`, `plan-worker.ts`에서 `release_target` 기준 `main` 일괄 반영/재시도 흐름으로 보강했습니다.
+
+## 결정 사항
+
+- `Play > Layout`의 대표 명칭은 `Layout Editor`로 통일하고, 저장된 레이아웃은 별도 메뉴 엔트리로 노출합니다.
+- 레이아웃/플레이그라운드 저장은 브라우저 로컬 상태보다 `work-db` 서버 저장을 우선 기준으로 사용합니다.
+- `Plan` 상단/설정 영역의 `release 반영 상태`, `자동화 실패`는 별도 빠른 진입점으로 유지합니다.
+- `hotfix`와 `feature` 후속 작업은 항상 새 브랜치에서 다시 시작한다는 Git 안전 규칙을 문서에 명시합니다.
+- 오늘 대표 스크린샷은 `Play > Layout`, 부분 스크린샷은 실제 위젯 단위로 확인 가능한 `GPS Sample Widget` 카드로 남깁니다.
+
+## 상세 작업 내역
+
+- `src/views/play/LayoutPlaygroundView.tsx`에서 섹션별 `showHideAction`, 컴포넌트/위젯 검색 모달, preview-only 렌더, 저장 레이아웃 목록/상세, 전체보기/빈 상태 플로우를 누적 확장했습니다.
+- `src/views/play/layoutStorage.ts`에서 `play_layouts` 테이블을 다루는 서버 API 저장소로 전환하고, fallback URL과 timeout 처리까지 추가했습니다.
+- `src/components/search/SearchCommandModal.tsx`, `src/layer/search/context/SearchLayerContext.tsx`, `src/components/window/WindowUI.tsx`, `src/components/window/WindowUI.css`에서 검색 선택 중복, 모바일 hit area, 보이는 화면 기준 확장, 닫기 액션을 정리했습니다.
+- `src/components/embeddedMap/*`, `src/layer/gps/*`, `src/widgets/gps-sample-card/*`, `etc/servers/work-server/src/routes/notification.ts`, `src/app/main/notificationApi.ts`에서 지도 내장 UI, GPS 레이어, 웹푸시 알림 경로를 구축했습니다.
+- `src/widgets/text-memo-widget/*`, `src/widgets/core/WidgetShell.tsx`, `src/widgets/registry.ts`, `src/index.ts`에서 메모 위젯을 추가하고 위젯 카드 래퍼 옵션과 샘플 연결을 마쳤습니다.
+- `src/features/planBoard/PlanBoardPage.tsx`, `src/features/planBoard/quickFilters.ts`, `src/app/main/MainHeader.tsx`, `src/app/main/MainView.tsx`, `src/app/main/MainContent.tsx`에서 plan 빠른 필터/로컬 패이징/윈도우 열기/메뉴 정리를 반영했습니다.
+- `etc/servers/work-server/src/services/plan-service.ts`, `etc/servers/work-server/src/workers/plan-worker.ts`에서 `main` 일괄 반영 요청과 배치 처리 로직을 추가했습니다.
+- `src/App.tsx`, `src/styles.css`에 앱 시작 로딩 오버레이와 로그 스트림 애니메이션을 넣었습니다.
+- `AGENTS.md`에 `release` 반영 직후 같은 브랜치에서 작업을 이어가지 않도록 하는 안전 체크리스트와 꼬임 위험 신호를 추가했습니다.
+- 오늘 업무일지 문서와 스크린샷 자산은 현재 날짜 기준 Git 이력과 실제 캡처 결과로 다시 정리했습니다.
+
+## 스크린샷
+
+![feature-play-layout](../assets/worklogs/2026-04-09/feature-play-layout.png)
+
+- `Play > Layout` 전체 화면입니다. 저장 레이아웃/편집/분할/섹션 선택 흐름을 한 번에 확인할 수 있습니다.
+
+![widget-gps-sample](../assets/worklogs/2026-04-09/widget-gps-sample.png)
+
+- `GPS Sample Widget` 부분 캡처입니다. 오늘 추가된 지도/거점/반경 위젯 단위 증적입니다.
+
+## 소스
+
+### 파일 1: `src/views/play/LayoutPlaygroundView.tsx`
+
+- `Layout Editor`의 핵심 화면으로, 컴포넌트/위젯 바인딩과 저장 레이아웃 상세 플로우를 대부분 이 파일에서 확장했습니다.
+
+```diff
++import { SearchCommandModal, type SearchKeywordOption } from '../../components/search';
++import { componentSampleEntries, widgetSampleEntries } from '../../app/manifests/samples.manifest';
++type LayoutComponentBinding = {
++  optionId: string;
++  label: string;
++  description?: string;
++  keywords: string[];
++};
++type LayoutPlaygroundViewProps = {
++  savedLayoutViewId?: string | null;
++  showSavedLayoutsOnly?: boolean;
++  onSavedLayoutsChange?: (layouts: SavedLayoutRecord[]) => void;
++};
+-  title: string;
+-  description: string;
++  showHideAction: boolean;
++  componentBinding: LayoutComponentBinding | null;
+```
+
+### 파일 2: `src/views/play/layoutStorage.ts`
+
+- 레이아웃 저장소를 `IndexedDB`에서 `work-db` API 기반 서버 저장 방식으로 전환했습니다.
+
+```diff
++import { appendClientIdHeader } from '../../app/main/clientIdentity';
++import { getRegisteredAccessToken } from '../../app/main/tokenAccess';
+-const DATABASE_NAME = 'play-layout-db';
+-const STORE_NAME = 'saved-layouts';
+-const DATABASE_VERSION = 1;
++const WORK_SERVER_TIMEOUT_MS = 8000;
++const PLAY_LAYOUTS_TABLE = 'play_layouts';
++class LayoutStorageError extends Error {
++  status: number;
++}
+```
+
+### 파일 3: `src/components/search/SearchCommandModal.tsx`
+
+- 검색 모달 제목/설명 커스터마이징, 모바일 축약 문구, 선택 잠금 로직을 추가했습니다.
+
+```diff
++  title?: string;
++  description?: string;
++  placeholder?: string;
++  submitHint?: string;
++  const selectionLockRef = useRef(false);
++  const [isMobileViewport, setIsMobileViewport] = useState(() => {
++    return window.innerWidth <= 768;
++  });
++  const submitOption = (option: SearchKeywordOption | undefined) => {
++    if (!option || selectionLockRef.current) {
++      return;
++    }
++    selectionLockRef.current = true;
++    onSelectOption(option);
++    onClose();
++  };
+```
+
+### 파일 4: `src/components/window/WindowUI.tsx`
+
+- `Window UI`는 닫기 액션, 모바일 리사이즈 개선, 보이는 viewport 기준 더블탭/더블클릭 확장 로직을 받았습니다.
+
+```diff
+-import { FullscreenExitOutlined, FullscreenOutlined, MinusOutlined } from '@ant-design/icons';
++import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusOutlined } from '@ant-design/icons';
++type ResizeTapRecord = {
++  direction: ResizeDirection;
++  at: number;
++  x: number;
++  y: number;
++};
++const DOUBLE_TAP_DELAY = 320;
++const DOUBLE_TAP_MOVE_TOLERANCE = 18;
++const RESIZE_MOVE_THRESHOLD = 4;
++function getVisibleParentBounds(element: HTMLDivElement | null) {
++  const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
++}
+```
+
+### 파일 5: `src/components/embeddedMap/EmbeddedMapUI.tsx`
+
+- 새 내장 지도 UI를 추가하고, 좌표/반경/보조 마커를 OSM iframe 위에 오버레이로 표시하도록 구성했습니다.
+
+```diff
++export type EmbeddedMapUIProps = {
++  latitude: number;
++  longitude: number;
++  radiusMeters?: number;
++  lockViewport?: boolean;
++  secondaryMarker?: {
++    latitude: number;
++    longitude: number;
++    label?: string;
++  } | null;
++  overlay?: ReactNode;
++};
++function createEmbedUrl(bounds: Bounds, latitude: number, longitude: number) {
++  return `https://www.openstreetmap.org/export/embed.html?...`;
++}
+```
+
+### 파일 6: `src/widgets/gps-sample-card/GpsSampleWidget.tsx`
+
+- GPS on/off, 현재 좌표, 거점 저장, 반경, In/Out 푸시 알림, 지도 표시를 한 위젯으로 묶었습니다.
+
+```diff
++import {
++  AimOutlined,
++  BellOutlined,
++  EnvironmentOutlined,
++  DeleteOutlined,
++  RadarChartOutlined,
++} from '@ant-design/icons';
++import { EmbeddedMapUI } from '../../components/embeddedMap';
++import { useGpsLayer } from '../../layer';
++const selectedAnchor = anchors.find((anchor) => anchor.id === selectedAnchorId) ?? null;
++const distanceToSelectedAnchor =
++  selectedAnchor && currentPosition
++    ? calculateDistanceMeters(...)
++    : null;
+```
+
+### 파일 7: `src/widgets/text-memo-widget/TextMemoWidget.tsx`
+
+- `Text Memo Widget`을 신규 추가하고 최근 6개 메모 저장/불러오기/삭제와 시트형 편집 UI를 구성했습니다.
+
+```diff
++const STORAGE_KEY = 'ai-code-app:text-memo-widget';
++const MAX_SAVED_NOTES = 6;
++type SavedNote = {
++  id: string;
++  body: string;
++  createdAt: string;
++};
++export const TextMemoWidget = forwardRef<WidgetHandle, TextMemoWidgetProps>(function TextMemoWidget(
++  { cardWrapper },
++  ref,
++) {
+```
+
+### 파일 8: `src/features/planBoard/PlanBoardPage.tsx`
+
+- plan 목록 로컬 패이징, 빠른 필터, 최대화 뒤 아이콘-only 돌아가기, 긴 본문 접힘 흐름을 오늘 기준으로 누적 반영했습니다.
+
+```diff
++  const [currentPage, setCurrentPage] = useState(1);
++  const pageSize = 10;
++  const pagedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
++  useEffect(() => {
++    setCurrentPage(1);
++  }, [filter, searchQuery]);
+-      label: '요약',
++      label: '작업란',
+```
+
+### 파일 9: `src/app/main/MainHeader.tsx`
+
+- 설정 메뉴에 `release 상태 작업`, `자동화 실패` 바로가기를 추가하고 현재 건수를 같이 보여주도록 확장했습니다.
+
+```diff
++import { isAutomationFailedItem, isReleasePendingMainItem } from '../../features/planBoard/quickFilters';
++const [planShortcutCounts, setPlanShortcutCounts] = useState({
++  releasePendingMain: 0,
++  automationFailed: 0,
++});
++void fetchPlanItems('all')
++  .then((items) => {
++    setPlanShortcutCounts({
++      releasePendingMain: items.filter(isReleasePendingMainItem).length,
++      automationFailed: items.filter(isAutomationFailedItem).length,
++    });
++  })
+```
+
+### 파일 10: `src/app/main/MainView.tsx`
+
+- 상단/사이드 메뉴 구조를 `release 반영 상태`, `APIs / Widgets`, `Layout Editor`, 저장 레이아웃 메뉴까지 포괄하도록 재정리했습니다.
+
+```diff
+-  'in-progress': '작업중',
++  'in-progress': '자동화 대기 / 작업 중',
+-  error: '오류',
++  error: '오류 (작업 완료 전)',
++  release: 'release 반영 상태',
++const PLAY_LAYOUT_RECORD_PREFIX = 'layout-record:' as const;
++function resolvePlanQuickFilterMenu(filter: PlanQuickFilter): Extract<PlanSidebarKey, 'release' | 'error'> {
++  return filter === 'release-pending-main' ? 'release' : 'error';
++}
+```
+
+### 파일 11: `src/app/main/MainContent.tsx`
+
+- 검색 결과를 `Window UI` 창으로 여는 흐름, 샘플 숨김 목록, `Plan`/저장 레이아웃 렌더 분기를 추가했습니다.
+
+```diff
++import { useMemo, useState, type ReactNode } from 'react';
++import { WindowUI, type WindowFrame } from '../../components/window';
++import { useSearchLayer } from '../../layer';
++const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];
++const { windowSelections, clearWindowSelection } = useSearchLayer();
++const [windowFrames, setWindowFrames] = useState<Record<string, WindowFrame>>({});
++const [windowZIndexes, setWindowZIndexes] = useState<Record<string, number>>({});
+```
+
+### 파일 12: `src/App.tsx`
+
+- 앱 시작 직후 1.9초 동안 보여주는 풀스크린 로딩 오버레이와 로그 스트림 UI를 추가했습니다.
+
+```diff
++const INITIAL_LOADING_LOGS = [
++  'BOOT SEQUENCE :: app shell warmup',
++  'CONFIG SYNC :: workspace profile applied',
++  'SESSION LINK :: reconnecting realtime channel',
++  'MODULE CHECK :: dashboard widgets online',
++  'READY SIGNAL :: rendering main viewport',
++];
++const [showInitialLoading, setShowInitialLoading] = useState(true);
++window.setTimeout(() => {
++  setShowInitialLoading(false);
++}, 1900);
+```
+
+### 파일 13: `etc/servers/work-server/src/services/plan-service.ts`
+
+- `main` 반영 요청/클레임/완료 처리 모두를 `release_target` 기준 배치 처리로 바꿨습니다.
+
+```diff
+-    isMainRetry ? 'main 반영 재시도를 요청했습니다.' : 'release 반영 재시도를 요청했습니다.',
++    isMainRetry ? 'main 일괄 반영 재시도를 요청했습니다.' : 'release 반영 재시도를 요청했습니다.',
++  const pendingRows = await db(PLAN_TABLE)
++    .select('id')
++    .where({ status: '릴리즈완료', release_target: releaseTarget });
+-    .where({ id })
++    .whereIn('id', targetIds.length > 0 ? targetIds : [id])
++    message: `${releaseTarget} 브랜치 기준으로 ${Math.max(targetIds.length, 1)}건 main 일괄 반영을 요청했습니다.`,
+```
+
+### 파일 14: `AGENTS.md`
+
+- Git 안전 규칙을 보강해 `release` 반영 뒤 같은 브랜치에서 추가 작업을 이어가는 패턴을 금지하고 점검 절차를 명시했습니다.
+
+```diff
++* `release` 반영 상태에서 현재 브랜치 그대로 추가 작업 진행
++* `release` 반영이 끝난 뒤 추가 수정 요청이 들어오면, 반드시 새 브랜치에서 다시 시작한다
++## 안전 점검 체크리스트
++1. 지금 반영할 변경이 `release`에 먼저 들어갔는지 확인
++2. 추가 요청이라면 새 `feature/*` 또는 `hotfix/*` 브랜치에서 작업 중인지 확인
++## 꼬임 위험 신호
++* `release` 반영 직후 추가 요청을 현재 브랜치에서 바로 이어서 처리하는 경우
+```
+
+### 파일 15: `docs/assets/worklogs/2026-04-09/feature-play-layout.png`
+
+- 오늘 대표 전체 화면 스크린샷입니다.
+
+```diff
+Binary file added: docs/assets/worklogs/2026-04-09/feature-play-layout.png
+```
+
+### 파일 16: `docs/assets/worklogs/2026-04-09/widget-gps-sample.png`
+
+- 오늘 위젯 단위 부분 스크린샷입니다.
+
+```diff
+Binary file added: docs/assets/worklogs/2026-04-09/widget-gps-sample.png
+```
+
+## 실행 커맨드
+
+```bash
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-09 00:00' --until='2026-04-09 23:59:59' --stat --oneline --decorate
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-09 00:00' --until='2026-04-09 23:59:59' --name-status --format='commit %H%nAuthor: %an%nDate: %ad%nSubject: %s%n' --date=iso
+git -c safe.directory=/workspace/auto_codex/repo diff --stat b70ce0c2549542703967b73aedf8d249050a40f7..HEAD
+npm run dev -- --host 127.0.0.1 --port 4173
+CAPTURE_BASE_URL=http://127.0.0.1:4173 node scripts/capture-feature-screenshot.mjs play-layout 2026-04-09
+node --input-type=module # GPS Sample Widget 부분 캡처
+npm run build:app
+```
+
+## 변경/신규 파일 (전체, 중복 제거, Git 기록 기준 + 오늘 업무일지 산출물)
+
+- A src/components/dashboard/multiProgress/samples/BaseSample.tsx
+- A src/components/dashboard/progress/samples/BaseSample.tsx
+- A src/components/embeddedMap/EmbeddedMapUI.css
+- A src/components/embeddedMap/EmbeddedMapUI.tsx
+- A src/components/embeddedMap/index.ts
+- A src/components/embeddedMap/samples/BaseSample.tsx
+- A src/components/embeddedMap/samples/Sample.tsx
+- A src/components/inputs/checkCombo/samples/BaseSample.tsx
+- A src/components/inputs/composite/multiInput/samples/BaseSample.tsx
+- A src/components/inputs/popup/samples/BaseSample.tsx
+- A src/components/inputs/primitives/input/samples/BaseSample.tsx
+- A src/components/inputs/select/samples/BaseSample.tsx
+- A src/components/inputs/specialized/buttonEditableInput/samples/BaseSample.tsx
+- A src/components/inputs/specialized/emailInput/samples/BaseSample.tsx
+- A src/components/markdownPreview/samples/MarkdownPreviewCardBaseSample.tsx
+- A src/components/markdownPreview/samples/MarkdownPreviewContentBaseSample.tsx
+- A src/components/markdownPreview/samples/MarkdownPreviewListBaseSample.tsx
+- A src/components/navigation/samples/FolderTreeNavBaseSample.tsx
+- A src/components/navigation/samples/SectionMenuLayoutBaseSample.tsx
+- A src/components/previewer/samples/BaseSample.tsx
+- A src/components/previewer/samples/CodexDiffBaseSample.tsx
+- A src/components/search/samples/BaseSample.tsx
+- A src/components/status-badge/samples/BaseSample.tsx
+- A src/components/window/samples/BaseSample.tsx
+- A src/features/planBoard/quickFilters.ts
+- A src/layer/gps/context/GpsLayerContext.tsx
+- A src/layer/gps/hooks/useGpsLayer.ts
+- A src/layer/gps/index.ts
+- A src/layer/gps/types/index.ts
+- A src/widgets/gps-sample-card/GpsSampleWidget.css
+- A src/widgets/gps-sample-card/GpsSampleWidget.tsx
+- A src/widgets/gps-sample-card/index.ts
+- A src/widgets/gps-sample-card/samples/Sample.tsx
+- A src/widgets/text-memo-widget/TextMemoWidget.css
+- A src/widgets/text-memo-widget/TextMemoWidget.tsx
+- A src/widgets/text-memo-widget/index.ts
+- A src/widgets/text-memo-widget/samples/Sample.tsx
+- M AGENTS.md
+- M docs/components/window-ui.md
+- M etc/servers/work-server/src/routes/notification.ts
+- M etc/servers/work-server/src/services/plan-service.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M package-lock.json
+- M package.json
+- M src/App.tsx
+- M src/app/main/MainContent.tsx
+- M src/app/main/MainHeader.tsx
+- M src/app/main/MainView.tsx
+- M src/app/main/ReleasePendingMainModal.tsx
+- M src/app/main/appConfig.ts
+- M src/app/main/notificationApi.ts
+- M src/app/main/types.ts
+- M src/components/dashboard/multiProgress/samples/Sample.tsx
+- M src/components/dashboard/progress/samples/Sample.tsx
+- M src/components/embeddedMap/EmbeddedMapUI.css
+- M src/components/embeddedMap/EmbeddedMapUI.tsx
+- M src/components/embeddedMap/samples/Sample.tsx
+- M src/components/inputs/checkCombo/samples/Sample.tsx
+- M src/components/inputs/composite/multiInput/samples/Sample.tsx
+- M src/components/inputs/popup/samples/Sample.tsx
+- M src/components/inputs/primitives/input/samples/Sample.tsx
+- M src/components/inputs/select/samples/Sample.tsx
+- M src/components/inputs/specialized/buttonEditableInput/samples/Sample.tsx
+- M src/components/inputs/specialized/emailInput/samples/Sample.tsx
+- M src/components/previewer/samples/CodexDiffSample.tsx
+- M src/components/previewer/samples/Sample.tsx
+- M src/components/search/SearchCommandModal.tsx
+- M src/components/status-badge/samples/Sample.tsx
+- M src/components/window/WindowUI.css
+- M src/components/window/WindowUI.tsx
+- M src/components/window/samples/Sample.tsx
+- M src/components/window/types/window.ts
+- M src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
+- M src/features/planBoard/PlanBoardPage.tsx
+- M src/features/planBoard/index.ts
+- M src/index.ts
+- M src/layer/gps/context/GpsLayerContext.tsx
+- M src/layer/index.ts
+- M src/layer/search/context/SearchLayerContext.tsx
+- M src/layer/search/types/index.ts
+- M src/main.tsx
+- M src/styles.css
+- M src/views/play/LayoutPlaygroundView.tsx
+- M src/views/play/layoutStorage.ts
+- M src/widgets/api-sample-card/ApiSampleCardWidget.tsx
+- M src/widgets/api-sample-card/samples/Sample.tsx
+- M src/widgets/core/WidgetShell.tsx
+- M src/widgets/core/index.ts
+- M src/widgets/core/types/widget.ts
+- M src/widgets/dashboard-report-card/DashboardReportCardWidget.tsx
+- M src/widgets/dashboard-report-card/samples/TmsDeliveryFlowSample.tsx
+- M src/widgets/dashboard-report-card/samples/TmsDeliveryMetricsSample.tsx
+- M src/widgets/dashboard-report-card/samples/WmsInboundOutboundSample.tsx
+- M src/widgets/dashboard-report-card/samples/WmsInventoryTrendSample.tsx
+- M src/widgets/gps-sample-card/GpsSampleWidget.tsx
+- M src/widgets/gps-sample-card/samples/Sample.tsx
+- M src/widgets/registry.ts
+- M src/widgets/text-memo-widget/TextMemoWidget.css
+- M src/widgets/text-memo-widget/TextMemoWidget.tsx
+- A docs/worklogs/2026-04-09.md
+- A docs/assets/worklogs/2026-04-09/feature-play-layout.png
+- A docs/assets/worklogs/2026-04-09/widget-gps-sample.png
diff --git a/docs/worklogs/2026-04-10.md b/docs/worklogs/2026-04-10.md
new file mode 100755
index 0000000..b54bcdf
--- /dev/null
+++ b/docs/worklogs/2026-04-10.md
@@ -0,0 +1,357 @@
+# 2026-04-10 작업일지
+
+## 오늘 작업
+
+- `react-router-dom` 기반 앱 셸로 메인 화면을 재구성하고, 상단 메뉴와 사이드바 선택이 URL 경로와 직접 연결되도록 정리했습니다.
+- `AppShell`, `MainLayout`, `routes.tsx`를 추가해 `Docs / APIs / Plans / Chat / Play`를 페이지 단위로 분리했습니다.
+- `MainContent`는 공통 창 레이어와 콘텐츠 컨테이너 역할만 남기고, 실제 화면 렌더링은 각 페이지 컴포넌트로 이동시켰습니다.
+- 저장 레이아웃 상세 화면은 `savedLayoutViewId` 전용 fit 모드로 보정해, 상단 바를 포함한 전체 구성을 한 화면 안에 맞춰 보이도록 수정했습니다.
+- `Text Memo Widget`의 삭제 버튼이 실제로 동작하도록 `Modal.useModal()` 기반 확인 플로우를 연결했습니다.
+- 오늘 증적용으로 `APIs / Widgets` 전체 화면 1장과 `Text Memo Widget` 부분 화면 1장을 `docs/assets/worklogs/2026-04-10/`에 저장했습니다.
+- 오늘자 작업일지 문서를 새로 작성하고, 소스 탭에서 `전체소스 / diff` 전환에 대응할 수 있도록 파일별 raw diff 근거와 전체 변경 파일 목록을 정리했습니다.
+
+## 이슈 및 해결
+
+- 기존 `MainView` 한 파일에 메뉴 상태, 검색 옵션, 문서/플랜/채팅/플레이 렌더링이 모두 얽혀 있어 경로 기반 탐색과 확장이 어려웠습니다.
+- `AppShell + MainLayout + pages/* + routes.tsx` 구조로 나누고, 라우팅 파생 상태는 `parseRoute()`와 `MainLayoutContext`에서만 계산하도록 정리했습니다.
+- 저장 레이아웃 전용 화면은 내부 콘텐츠 높이와 스크롤 상태에 따라 미리보기가 잘리거나 빈 여백이 생겼습니다.
+- `useLayoutEffect`, `ResizeObserver`, `MutationObserver`로 실제 렌더 크기를 다시 재고 `savedLayoutFitScale`을 계산해 fit 렌더를 안정화했습니다.
+- 메모 위젯 삭제 버튼은 정적 모달 호출과 컨텍스트 미연결 상태 때문에 클릭해도 확인창이 뜨지 않는 문제가 있었습니다.
+- `Modal.useModal()`을 도입하고 `modalContextHolder`를 위젯 루트에 넣어 저장 메모와 작성 중 초안 모두 삭제 가능하게 바꿨습니다.
+- 이 작업 환경에서는 Git이 `dubious ownership`으로 차단되고 글로벌 `safe.directory` 등록도 실패했습니다.
+- 글로벌 설정 대신 모든 Git 조회에 `git -c safe.directory=/workspace/auto_codex/repo ...`를 사용해 증적 수집을 계속 진행했습니다.
+
+## 결정 사항
+
+- 메인 앱 진입은 상태 기반 조건 분기보다 URL 라우팅을 우선 기준으로 유지합니다.
+- 공통 레이아웃 상태는 `MainLayoutContext`로 전달하고, 페이지별 렌더링 책임은 `pages/*`로 분리합니다.
+- 저장 레이아웃 상세 뷰는 스크롤보다 fit 우선 미리보기 규칙을 사용합니다.
+- 메모 삭제는 즉시 삭제하지 않고 항상 확인 모달을 거치게 유지합니다.
+- 오늘 대표 스크린샷은 `APIs / Widgets` 전체 화면, 부분 스크린샷은 `Text Memo Widget`으로 고정합니다.
+
+## 상세 작업 내역
+
+- 오늘 Git 이력은 `WindowUI` 최소화/헤더 정리, 메모 삭제 플로우 복구, 저장 레이아웃 fit 모드 보정, 앱 셸 라우팅 분리 순서로 누적됐고 최종적으로 `release -> main` 동기화까지 진행됐습니다.
+- 라우팅 개편은 `MainView`에 모여 있던 메뉴/문서/플랜/채팅/플레이 조건 분기를 걷어내고, `AppShell` 아래에서 `MainLayout`이 공통 상태를 제공한 뒤 각 페이지가 자기 화면만 렌더링하도록 재조정한 작업입니다.
+- 검색 옵션 빌드도 같은 라우팅 구조를 따라가도록 재작성해서, 검색 결과가 단순 상태 변경이 아니라 실제 경로 전환과 포커스 이동을 함께 수행하도록 맞췄습니다.
+- 저장 레이아웃 보정은 단순 CSS 스케일링이 아니라 실제 콘텐츠 크기를 측정해 viewport 안에 맞추는 방식으로 바꿨고, 관련 overflow 규칙도 같이 조정했습니다.
+- 메모 위젯은 삭제 버튼 활성화와 확인 모달 흐름을 분리해, 저장된 메모와 작성 중 초안을 같은 UX 안에서 처리하도록 정리했습니다.
+- 오늘 작업일지 작성 단계에서는 Git 로그, diff, 빌드 결과, 실제 Playwright 캡처를 함께 확인해서 문서와 스크린샷 링크를 최신 상태로 맞췄습니다.
+
+## 스크린샷
+
+![feature-apis-widgets-full](../assets/worklogs/2026-04-10/feature-apis-widgets-full.png)
+
+- `APIs / Widgets` 전체 화면 캡처입니다. 라우팅 기반 앱 셸 아래에서 위젯 갤러리 전체 내역이 한 번에 보이도록 full-page로 저장했습니다.
+
+![widget-text-memo](../assets/worklogs/2026-04-10/widget-text-memo.png)
+
+- `Text Memo Widget` 부분 캡처입니다. 오늘 복구한 메모 입력/삭제 흐름을 위젯 단위로 바로 확인할 수 있도록 별도로 남겼습니다.
+
+## 소스
+
+### 파일 1: `src/app/main/AppShell.tsx`
+
+- 라우터 엔트리와 페이지 분리의 기준점입니다.
+
+```diff
++import { Navigate, Route, Routes } from 'react-router-dom';
++import { MainLayout } from './layout/MainLayout';
++import { ApisPage } from './pages/ApisPage';
++import { ChatPage } from './pages/ChatPage';
++import { DocsPage } from './pages/DocsPage';
++import { PlansPage } from './pages/PlansPage';
++import { PlayPage } from './pages/PlayPage';
++<Route path="/" element={<MainLayout />}>
++  <Route path="docs/:folder" element={<DocsPage />} />
++  <Route path="apis/:section" element={<ApisPage />} />
++  <Route path="plans/:section" element={<PlansPage />} />
++  <Route path="chat/:section" element={<ChatPage />} />
++  <Route path="play/layout-record/:layoutId" element={<PlayPage />} />
++</Route>
+```
+
+### 파일 2: `src/app/main/layout/MainLayout.tsx`
+
+- 기존 `MainView`의 거대한 상태 조합을 라우팅 기반 공통 레이아웃으로 옮겼습니다.
+
+```diff
++import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
++function parseRoute(pathname: string) {
++  if (top === 'docs') { ... }
++  if (top === 'apis' && (first === 'components' || first === 'widgets')) { ... }
++  if (top === 'play' && first === 'layout-record' && second) { ... }
++}
++const routeState = useMemo(() => parseRoute(location.pathname), [location.pathname]);
++const layoutData = useMainLayoutData();
++<MainLayoutContextProvider value={...}>
++  <MainHeader ... />
++  <MainSidebar ... />
++  <MainContent contentExpanded={contentExpanded} onToggleContentExpanded={...}>
++    <Outlet />
++  </MainContent>
++</MainLayoutContextProvider>
+```
+
+### 파일 3: `src/app/main/routes.tsx`
+
+- 메뉴 라벨, 경로 빌더, 사이드바 공개 타입을 한곳에 모았습니다.
+
+```diff
++export type TopMenuKey = 'docs' | 'apis' | 'plans' | 'chat' | 'play';
++export type PlanSectionKey = PlanFilterStatus | 'release' | 'charts' | 'history';
++export const DOCS_DEFAULT_FOLDER = 'worklogs';
++export function buildDocsPath(folder = DOCS_DEFAULT_FOLDER) {
++  return `/docs/${folder}`;
++}
++export function buildPlansPath(section: PlanSectionKey = 'all') {
++  return `/plans/${section}`;
++}
++export function buildPlayMenuItems(savedLayouts: Array<{ id: string; name: string }>): MenuProps['items'] {
++  return [{ key: 'play-group', children: [...] }];
++}
+```
+
+### 파일 4: `src/app/main/MainContent.tsx`
+
+- 공통 창 레이어만 남기고 화면별 조건 분기를 페이지 컴포넌트로 밀어냈습니다.
+
+```diff
+-import { Button, Card, Layout, Modal, Space, Typography } from 'antd';
++import { Button, Layout, Modal, Space, Typography } from 'antd';
+-import { MarkdownPreviewCard } from '../../components/markdownPreview';
++import { useMainLayoutContext } from './layout/MainLayoutContext';
+-export function MainContent({ activeTopMenu, selectedApiMenu, selectedDocsMenu, ... }: MainContentProps) {
++export function MainContent({ contentExpanded, onToggleContentExpanded, children }: MainContentProps) {
++  const { componentSampleEntries, widgetSampleEntries, componentSamples, widgetSamples, initialSelectedPlanId, initialSelectedWorkId } =
++    useMainLayoutContext();
+-  <div className={activeTopMenu === 'chat' ? 'app-main-layout app-main-layout--single' : 'app-main-layout'}>
+-    {activeTopMenu === 'docs' ? ... : activeTopMenu === 'plans' ? ... : ...}
+-  </div>
++  <div className="app-main-layout">{children}</div>
+```
+
+### 파일 5: `src/app/main/MainSidebar.tsx`
+
+- 소개 영역과 API 메뉴 선택 타입을 공통 라우팅 구조에 맞게 정리했습니다.
+
+```diff
++  introColor,
++  introTag,
++  introDescription,
+-  const activeTagColor = isDocsGroup ? 'gold' : activeTopMenu === 'play' ? 'cyan' : 'green';
+-  <Tag color={activeTagColor}>...</Tag>
++  <Tag color={introColor}>{introTag}</Tag>
++  <Text type="secondary">{introDescription}</Text>
+-  onSelectApiMenu(key);
++  onSelectApiMenu(key as MainSidebarProps['selectedApiMenu']);
+```
+
+### 파일 6: `src/app/main/layout/MainLayoutContext.ts`
+
+- 페이지와 공통 레이어가 같은 상태를 공유하도록 컨텍스트를 신설했습니다.
+
+```diff
++export type MainLayoutContextValue = {
++  topMenu: TopMenuKey;
++  selectedDocsMenu: string;
++  selectedApiMenu: ApiSectionKey;
++  selectedPlanMenu: PlanSectionKey;
++  selectedChatMenu: ChatSectionKey;
++  selectedPlayMenu: PlaySidebarKey;
++  searchOptions: SearchKeywordOption[];
++};
++const MainLayoutContext = createContext<MainLayoutContextValue | null>(null);
++export function useMainLayoutContext() { ... }
+```
+
+### 파일 7: `src/app/main/layout/buildSearchOptions.ts`
+
+- 검색 결과가 상태 변경이 아니라 실제 라우팅 전환을 수행하도록 재작성했습니다.
+
+```diff
++import { buildApisPath, buildChatPath, buildDocsPath, buildPlansPath, buildPlayPath } from '../routes';
++onSelect: () => {
++  requestPlanQuickFilter(null);
++  navigateTo(buildApisPath('widgets'));
++  setFocusedComponentId(null);
++},
++onSelect: () => {
++  requestPlanQuickFilter('release-pending-main');
++  navigateTo(buildPlansPath('release'));
++  setFocusedComponentId(null);
++},
++onSelect: () => {
++  navigateTo(buildDocsPath(document.folder));
++  setFocusedComponentId(`doc:${document.id}`);
++  scrollToElement(`document-preview-${document.id}`);
++},
+```
+
+### 파일 8: `src/app/main/pages/ApisPage.tsx`
+
+- APIs 화면 렌더링 책임을 페이지 단위로 분리했습니다.
+
+```diff
++export function ApisPage() {
++  const { selectedApiMenu, componentSampleEntries, widgetSampleEntries } = useMainLayoutContext();
++  return (
++    <div className="app-main-panel">
++      <Card title={selectedApiMenu === 'components' ? 'APIs / Components' : 'APIs / Widgets'} className="app-main-card" bordered={false}>
++        {selectedApiMenu === 'components' ? (
++          <ComponentSamplesLayout entries={componentSampleEntries} excludeComponentIds={HIDDEN_COMPONENT_IDS} />
++        ) : (
++          <SampleWidgetsLayout entries={widgetSampleEntries} />
++        )}
++      </Card>
++    </div>
++  );
++}
+```
+
+### 파일 9: `src/views/play/LayoutPlaygroundView.tsx`
+
+- 저장 레이아웃 전용 fit 모드와 실제 크기 측정 로직을 추가했습니다.
+
+```diff
+-import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
++import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
++const isSavedLayoutFitMode = Boolean(savedLayoutViewId);
++const [savedLayoutFitScale, setSavedLayoutFitScale] = useState(1);
++const [savedLayoutFitSize, setSavedLayoutFitSize] = useState<{ width: number; height: number } | null>(null);
++const savedLayoutFitViewportRef = useRef<HTMLDivElement | null>(null);
++const savedLayoutFitContentRef = useRef<HTMLDivElement | null>(null);
++useLayoutEffect(() => {
++  const nextScale = Math.min(1, availableWidth / width, availableHeight / height);
++  setSavedLayoutFitScale(...);
++}, [savedLayoutViewId, selectedSavedLayoutRecord, sampleEntries.length]);
++style={{ transform: `scale(${savedLayoutFitScale})`, width: `${savedLayoutFitSize.width}px` }}
++previewSurface: isSavedLayoutFitMode,
+```
+
+### 파일 10: `src/styles.css`
+
+- fit 모드에서 overflow와 스크롤바를 억제하는 전용 스타일을 추가했습니다.
+
+```diff
++.layout-playground__fullscreen-shell--saved-fit {
++  min-height: 0;
++  overflow: hidden;
++}
++.layout-playground__saved-fit-viewport {
++  display: flex;
++  align-items: center;
++  justify-content: center;
++  overflow: hidden;
++}
++.layout-playground__saved-detail--fit * {
++  scrollbar-width: none;
++}
++.layout-playground__saved-detail--fit *::-webkit-scrollbar {
++  width: 0;
++  height: 0;
++}
+```
+
+### 파일 11: `src/widgets/text-memo-widget/TextMemoWidget.tsx`
+
+- 삭제 버튼 비활성 상태를 해제하고, 확인 모달을 거쳐 실제 삭제되도록 바꿨습니다.
+
+```diff
+-import { Button, Empty, Input, message } from 'antd';
++import { Button, Empty, Input, Modal, message } from 'antd';
++const [modalApi, modalContextHolder] = Modal.useModal();
+-const handleDelete = () => {
+-  void messageApi.info('삭제 기능은 현재 비활성화되어 있습니다.');
+-};
++const handleDelete = () => {
++  if (!selectedNote && !hasDraft) {
++    return;
++  }
++  void modalApi.confirm({
++    title: isDraftOnly ? '작성 중인 메모를 삭제할까요?' : '선택한 메모를 삭제할까요?',
++    onOk: () => { ... },
++  });
++};
++{modalContextHolder}
+-disabled
++disabled={!selectedNote && !hasDraft}
+```
+
+### 파일 12: `src/App.tsx`, `src/main.tsx`, `src/app/main/index.ts`
+
+- 앱 진입점을 라우터 기반 셸로 연결했습니다.
+
+```diff
+-import { MainView } from './app/main';
++import { BrowserRouter } from 'react-router-dom';
++import { MainView } from './app/main';
++<BrowserRouter>
++  <MainView />
++</BrowserRouter>
+-export { MainView } from './MainView';
++export { AppShell } from './AppShell';
++export { MainView } from './MainView';
+-export function MainView() { ...legacy layout... }
++export function MainView() {
++  return <AppShell />;
++}
+```
+
+## 실행 커맨드
+
+```bash
+find docs/worklogs docs/assets/worklogs -type f | sort
+grep -RIn "작업일지\|스크린샷\|소스 탭\|실행 커맨드\|상세형" docs/worklogs --include='*.md'
+git -c safe.directory=/workspace/auto_codex/repo status --short --branch
+sed -n '1,260p' docs/worklogs/2026-04-09.md
+sed -n '1,260p' docs/templates/worklog-template.md
+find scripts -maxdepth 1 -type f | sort
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-10 00:00:00' --until='2026-04-10 23:59:59' --stat --oneline
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-10 00:00:00' --until='2026-04-10 23:59:59' --name-only --pretty=format: | sed '/^$/d' | sort | uniq
+git -c safe.directory=/workspace/auto_codex/repo diff --stat 0b105f8..HEAD -- src/app/main/MainView.tsx src/app/main/layout/MainLayout.tsx src/app/main/routes.tsx src/app/main/MainContent.tsx src/widgets/text-memo-widget/TextMemoWidget.tsx src/components/window/WindowUI.tsx src/styles.css src/views/play/LayoutPlaygroundView.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/app/main/MainView.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/app/main/layout/MainLayout.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/widgets/text-memo-widget/TextMemoWidget.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/app/main/routes.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/app/main/MainContent.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/views/play/LayoutPlaygroundView.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/app/main/AppShell.tsx src/app/main/MainSidebar.tsx src/app/main/layout/MainLayoutContext.ts src/app/main/layout/buildSearchOptions.ts src/app/main/layout/useMainLayoutData.ts src/app/main/pages/ApisPage.tsx src/app/main/pages/ChatPage.tsx src/app/main/pages/DocsPage.tsx src/app/main/pages/PlansPage.tsx src/main.tsx
+git -c safe.directory=/workspace/auto_codex/repo diff 0b105f8..HEAD -- src/components/window/WindowUI.tsx src/components/window/WindowUI.css src/widgets/text-memo-widget/TextMemoWidget.css src/styles.css
+git -c safe.directory=/workspace/auto_codex/repo diff --name-status 0b105f8..HEAD
+npm run build:app
+PORT=4173 node scripts/serve-app-dist.mjs
+node --input-type=module <<'EOF'
+import { chromium } from 'playwright';
+// APIs / Widgets full-page screenshot and text memo widget crop capture
+EOF
+```
+
+## 변경/신규 파일
+
+- A docs/worklogs/2026-04-10.md
+- A docs/assets/worklogs/2026-04-10/feature-apis-widgets-full.png
+- A docs/assets/worklogs/2026-04-10/widget-text-memo.png
+- M package-lock.json
+- M package.json
+- M src/App.tsx
+- A src/app/main/AppShell.tsx
+- M src/app/main/MainContent.tsx
+- M src/app/main/MainSidebar.tsx
+- M src/app/main/MainView.tsx
+- M src/app/main/index.ts
+- A src/app/main/layout/MainLayout.tsx
+- A src/app/main/layout/MainLayoutContext.ts
+- A src/app/main/layout/buildSearchOptions.ts
+- A src/app/main/layout/useMainLayoutData.ts
+- A src/app/main/pages/ApisPage.tsx
+- A src/app/main/pages/ChatPage.tsx
+- A src/app/main/pages/DocsPage.tsx
+- A src/app/main/pages/PlansPage.tsx
+- A src/app/main/pages/PlayPage.tsx
+- A src/app/main/routes.tsx
+- M src/app/main/types.ts
+- M src/main.tsx
+- M src/styles.css
+- M src/views/play/LayoutPlaygroundView.tsx
+- M src/widgets/text-memo-widget/TextMemoWidget.tsx
diff --git a/docs/worklogs/2026-04-11.md b/docs/worklogs/2026-04-11.md
new file mode 100755
index 0000000..5a7e776
--- /dev/null
+++ b/docs/worklogs/2026-04-11.md
@@ -0,0 +1,296 @@
+# 2026-04-11 작업일지
+
+## 오늘 작업
+
+- 게시판 글을 자동화 항목으로 접수하는 흐름을 열고, 중복 접수 상태와 권한 검사를 같이 묶어 게시판에서 바로 후속 작업으로 넘길 수 있게 정리했습니다.
+- 게시판 기반 Markdown 자동 등록 자동화는 설정, 워커 스케줄, 대상 폴더 규칙을 한 흐름으로 묶고 주기 계산을 분 단위 기준으로 다시 맞췄습니다.
+- Plan 반복 요청은 기존 메모 내부 옵션에서 분리해 전용 스케줄 기능으로 옮기고, 스케줄 화면과 API, 서버 저장 구조를 새로 연결했습니다.
+- Plan 화면은 목록 필터, 체크리스트, 릴리즈 요약, 증적 탭, 게시판 연결, 이슈/조치 기록, 본문 최대화, 읽기 전용 제어를 순차 보강했습니다.
+- Plans 진입 구조는 불필요한 중간 화면을 걷어내고 `Plan / 게시판 / 차트 / 스케줄 / 히스토리`가 직접 연결되도록 다시 정리했습니다.
+- 공통 컴포넌트 묶음으로 `FormField`, `StateKit`, `DataListTable`을 추가해 이후 화면 확장에 재사용할 수 있는 기반을 확보했습니다.
+- 오늘 증적용으로 `Plan/자동화` 전체 화면 1장과 상단 개요 영역 1장을 `docs/assets/worklogs/2026-04-11/`에 저장했습니다.
+
+## 이슈 및 해결
+
+- 게시판 초기화가 동시에 들어오면 테이블과 컬럼 생성 경합으로 첫 진입이 실패할 수 있었습니다.
+- 생성 전 존재 여부를 다시 확인하는 방식으로 setup 경합을 흡수해 초기 로드 실패를 줄였습니다.
+- 게시판 자동 등록은 대기 글이 없을 때 다음 주기까지 완전히 멈춰 추천 문서 Plan이 더 이상 생기지 않는 구간이 있었습니다.
+- 워커가 빈 큐에서도 다음 스케줄을 유지하도록 바꾸고, 분/초 단위 혼용 계산도 함께 보정했습니다.
+- Plan 반복 요청 옵션을 메모 등록 폼 안에 유지하니 일반 메모 편집과 스케줄성 작업이 한 화면에서 섞여 판단이 어려웠습니다.
+- 반복 요청 UI를 걷어내고 전용 스케줄 화면과 서버 테이블로 분리해 책임 경계를 명확히 했습니다.
+- Plan 상세는 자동화 접수 항목인데도 일부 상태값이나 이력 입력이 우회 수정될 수 있었습니다.
+- 잠금 판정을 공통 함수로 모으고, 권한 토큰이 없는 사용자는 조치 입력과 상태 액션이 모두 읽기 전용으로만 보이게 막았습니다.
+- 증적/미리보기 전체화면은 내부 스크롤 대신 부모 스크롤이 따라 움직여 읽기 흐름이 깨졌습니다.
+- 전체화면 진입 시 `body/html` 스크롤을 고정하고, 모달 내부 스크롤만 유지하도록 바꿔 사용 흐름을 안정화했습니다.
+
+## 결정 사항
+
+- 게시판에서 만들어진 자동화 접수 건은 기본적으로 `release` 기준으로 처리하고 `main` 자동 반영은 별도 정책이 없는 한 꺼 둡니다.
+- 반복성 작업은 일반 메모 옵션이 아니라 전용 스케줄 목록에서 관리합니다.
+- Plan 상세에서 자동화로 접수된 원본 요청은 수정 대신 조치 기록과 증적 확인 중심으로 다룹니다.
+- Plans 화면은 중간 안내 카드보다 실제 작업 화면을 바로 여는 구성이 우선입니다.
+- 오늘 대표 증적 화면은 `Plan/자동화` 전체 화면, 부분 증적은 상단 개요 카드로 통일합니다.
+
+## 상세 작업 내역
+
+- 오전 초반에는 게시판 setup 경합과 자동화 접수 진입점을 먼저 정리해, 게시판 글이 실패 없이 열리고 필요한 경우 바로 자동화 요청으로 이어지게 만들었습니다.
+- 이어서 게시판 글을 Markdown 생성 작업으로 돌리는 자동화 흐름을 붙였고, 추천 문서 생성 규칙과 스케줄 조건을 계속 수정하면서 빈 큐에서도 다음 주기를 유지하도록 다듬었습니다.
+- 공통 컴포넌트 추가는 이후 화면 정리에 필요한 기반 작업으로 진행했고, 새 입력/상태/목록 컴포넌트를 샘플과 함께 공개해 재사용 가능한 토대를 마련했습니다.
+- 중반 작업에서는 반복 요청 옵션을 걷어내고 전용 스케줄 기능으로 치환하는 쪽으로 방향을 바꿨습니다. 이 과정에서 저장 구조, API, 워커, 화면을 함께 움직여 반복 작업 관리의 중심을 스케줄 화면으로 옮겼습니다.
+- 이후 Plans 네비게이션은 실제 사용 흐름에 맞게 다시 접었고, 게시판 복구, 차트/스케줄/히스토리 재연결, 용어 정리, 검색 라벨 통일을 거쳐 지금 구조로 수렴시켰습니다.
+- 오후 후반에는 Plan 목록과 상세 화면 품질을 집중 보강했습니다. 조합 필터, 체크리스트, 릴리즈 요약, 증적 탭, 게시판 연결, 이슈 조치 기록이 순차적으로 붙었고, 본문 최대화와 전체화면 스크롤 제어도 여기서 함께 정리됐습니다.
+- 마감 단계에서는 자동화 접수 건의 잠금 규칙을 다시 점검해 우회 수정 가능성을 줄였고, 비토큰 사용자 읽기 전용 제어와 알림 링크 연결까지 보완한 뒤 오늘 작업일지와 증적 캡처를 최신 상태로 정리했습니다.
+
+## 스크린샷
+
+![feature-plans-automation-full](../assets/worklogs/2026-04-11/feature-plans-automation-full.png)
+
+- `Plan/자동화` 전체 화면 캡처입니다. 오늘 정리한 목록, 상세 진입 흐름, 상단 개요 구성이 한 화면에서 보이도록 전체 페이지 기준으로 저장했습니다.
+
+![plan-board-overview](../assets/worklogs/2026-04-11/plan-board-overview.png)
+
+- 상단 개요 카드 부분 캡처입니다. 자동 새로고침 상태, 작업 개수 요약, 안내 문구처럼 오늘 보강한 운영 문맥을 빠르게 확인할 수 있도록 따로 남겼습니다.
+
+## 소스
+
+### 파일 1: `etc/servers/work-server/src/routes/board.ts`, `etc/servers/work-server/src/services/board-service.ts`, `src/features/board/BoardPage.tsx`, `src/features/board/api.ts`, `src/features/board/types.ts`
+
+- 게시판 글을 즉시 자동화 Plan으로 접수하고, 접수 중복과 권한을 함께 처리하는 흐름입니다.
+
+```diff
++app.post('/api/board/posts/:id/actions/automation-receive', async (request, reply) => {
++  if (!requireBoardAutomationAccess(request, reply)) {
++    return;
++  }
++  const result = await receiveBoardPostAutomation(id);
++  return { ok: true, item: result.item, planItemId: result.planItemId, alreadyReceived: result.alreadyReceived };
++});
++if (currentRow.automation_received_at || currentRow.automation_plan_item_id) {
++  return { item: mapBoardPostRow(currentRow), planItemId: ..., alreadyReceived: true };
++}
++const workId = `board-post-${id}`;
++note: [`게시판 제목: ${title}`, '', content].join('\n'),
++auto_deploy_to_main: false,
++const [automationReceivingId, setAutomationReceivingId] = useState<number | null>(null);
++const [automationReceiveError, setAutomationReceiveError] = useState<string | null>(null);
++icon={<PlayCircleOutlined />}
++Tag color={automationStatus.color}
+```
+
+### 파일 2: `etc/servers/work-server/src/services/board-service.ts`, `etc/servers/work-server/src/workers/plan-worker.ts`, `etc/servers/work-server/src/services/app-config-service.ts`, `src/app/main/MainHeader.tsx`, `src/app/main/appConfig.ts`
+
+- 게시판 Markdown 자동 등록 자동화를 설정과 워커 주기 계산까지 포함해 운영 가능한 상태로 묶었습니다.
+
+```diff
++markdownPlanItemId: number | null;
++markdownExportedAt: string | null;
++function buildBoardPostMarkdownPlanNote(row: Record<string, unknown>, targetFolder: string) {
++  return [
++    `게시판 추천 글 #${id}을 Markdown 문서로 등록해 주세요.`,
++    `대상 파일: ${targetPath}`,
++  ].join('\n');
++}
++export async function createNextBoardPostMarkdownAutomationPlan(targetFolder: string, releaseTarget = 'release') {
++  work_id: `board-md-${id}`,
++  auto_deploy_to_main: true,
++}
++private evaluateBoardMarkdownAutomationSchedule(config, now) {
++  const scheduleType = config?.scheduleType ?? 'interval';
++  return { due, nextEligibleAt, scheduleLabel };
++}
++await this.processBoardMarkdownAutomation(appConfig);
++intervalMinutes: z.coerce.number().int().min(1).default(5)
+```
+
+### 파일 3: `src/components/formField/FormField.tsx`, `src/components/stateKit/StateKit.tsx`, `src/components/dataListTable/DataListTable.tsx`, `src/index.ts`
+
+- 입력/상태/목록 UI를 공통 컴포넌트로 분리해 이후 Plan, Board, History 화면이 같은 토대 위에서 확장되도록 만들었습니다.
+
+```diff
++export type DataListTableProps<T extends object> = {
++  data: T[];
++  searchFields?: ReadonlyArray<keyof T | ((item: T) => string)>;
++  filters?: ReadonlyArray<DataListFilterOption<T>>;
++  mobileCardRender?: (item: T) => ReactNode;
++};
++export function DataListTable<T extends object>({ ... }: DataListTableProps<T>) {
++  const filteredData = useMemo(() => { ... }, [...]);
++  return <Table<T> ... />;
++}
++export type FormFieldProps = Omit<FormItemProps, 'children' | 'help' | 'required'> & {
++  error?: ReactNode;
++  children: ReactNode | ((state: FormFieldRenderState) => ReactNode);
++};
++export { FormField } from './components/formField';
++export { StateKit } from './components/stateKit';
++export { DataListTable } from './components/dataListTable';
+```
+
+### 파일 4: `etc/servers/work-server/src/services/plan-service.ts`, `etc/servers/work-server/src/services/plan-schedule-service.ts`, `etc/servers/work-server/src/routes/plan.ts`, `etc/servers/work-server/src/workers/plan-worker.ts`, `src/features/planBoard/PlanSchedulePage.tsx`, `src/features/planBoard/api.ts`
+
+- 반복 요청을 메모 옵션에서 분리하고 전용 스케줄 저장소와 화면으로 재편했습니다.
+
+```diff
++export const PLAN_SCHEDULED_TASK_TABLE = 'plan_scheduled_tasks';
++export const createPlanScheduledTaskSchema = z.object({
++  workId: z.string().trim().optional().default('반복작업'),
++  repeatIntervalMinutes: z.coerce.number().int().min(1).max(1440).default(60),
++});
++app.get('/api/plan/scheduled-tasks', async (request, reply) => { ... });
++app.post('/api/plan/scheduled-tasks', async (request, reply) => { ... });
++app.patch('/api/plan/scheduled-tasks/:id', async (request, reply) => { ... });
++app.delete('/api/plan/scheduled-tasks/:id', async (request, reply) => { ... });
++await ensurePlanScheduledTaskTable();
++return fetchWithFallback('/api/plan/scheduled-tasks', '/api/plans/scheduled-tasks');
++'/plan/schedule', '/plan/schedules', '/plans/schedule', '/plans/schedules'
+```
+
+### 파일 5: `src/features/planBoard/PlanBoardPage.tsx`, `src/features/history/HistoryPage.tsx`, `src/features/board/BoardPage.tsx`, `src/styles.css`
+
+- Plan 목록과 상세는 필터, 요약, 증적, 본문 최대화, 잠금 규칙, 읽기 전용 제어를 중심으로 계속 보강했습니다.
+
+```diff
++function isPlanItemRequestLocked(item: Pick<PlanItem, 'startedAt'> | null | undefined) {
++  return Boolean(item?.startedAt);
++}
++const [noteExpanded, setNoteExpanded] = useState(false);
++const canAppendActionHistory = hasAccess && Boolean(selectedItem) && isPlanItemRequestLocked(selectedItem);
++if (!hasAccess) {
++  messageApi.error('설정 > 토큰 관리에서 권한 토큰을 등록한 사용자만 조치 이력을 추가할 수 있습니다.');
++}
++if (isPlanItemRequestLocked(currentItem)) {
++  messageApi.warning('자동화 접수된 항목은 기능동작확인을 수정할 수 없습니다.');
++}
++className={`plan-board-page__notepad-frame${noteExpanded ? ' plan-board-page__notepad-frame--expanded' : ''}`}
++className={`board-page__editor-frame${contentExpanded ? ' board-page__editor-frame--expanded' : ''}`}
++options={FUNCTION_CHECK_OPTIONS}
++disabled={!hasAccess || jangsingProcessingSavingId === item.id || isPlanItemRequestLocked(item)}
+```
+
+### 파일 6: `src/app/main/MainContent.tsx`, `src/app/main/layout/MainLayout.tsx`, `src/app/main/layout/buildSearchOptions.ts`, `src/app/main/mainView/constants.tsx`, `src/app/main/mainView/navigation.ts`, `src/app/main/mainView/searchOptions.ts`, `src/app/main/pages/PlansPage.tsx`, `src/app/main/routes.tsx`, `src/app/main/MainHeader.tsx`
+
+- Plans 진입 구조를 단순화하고, 게시판/차트/스케줄/히스토리 복구와 용어 정리를 같은 축에서 마무리했습니다.
+
+```diff
++type PlanSectionKey = 'all' | 'board' | 'charts' | 'schedule' | 'history' | 'release';
++navigateTo(buildPlansPath('board'));
++navigateTo(buildPlansPath('schedule'));
++navigateTo(buildPlansPath('history'));
++label: '자동화'
++label: 'Plan'
++title: '자동화'
++return <PlanBoardPage />;
++release target link -> '*.sm-home.cloud'
++search label: 'Plan'
+```
+
+### 파일 7: `etc/servers/work-server/src/services/plan-notification-service.ts`, `src/sw.js`, `src/components/previewer/PreviewerUI.tsx`, `src/components/previewer/CodexDiffPreviewer.tsx`
+
+- 알림 클릭 이동과 전체화면 미리보기는 마지막 품질 보완으로 정리했습니다.
+
+```diff
++function buildPlanNotificationTargetUrl(planId: number, workId: string | null | undefined, eventType: string) {
++  const baseUrl = eventType.startsWith('release-') ? 'https://rel.sm-home.cloud/' : 'https://sm-home.cloud/';
++  targetUrl.searchParams.set('planId', String(planId));
++}
++targetUrl = notificationData.targetUrl ? new URL(String(notificationData.targetUrl)) : new URL('/', self.location.origin);
++const scrollY = window.scrollY;
++document.body.style.position = 'fixed';
++document.body.style.top = `-${scrollY}px`;
++document.documentElement.style.overflow = 'hidden';
++window.scrollTo(0, scrollY);
+```
+
+### 파일 8: `docs/components/component-addition-suggestions.md`
+
+- 게시판 논의 결과를 문서 증적으로 옮겨 오늘 제안 정리 흐름도 문서 세트 안에서 바로 확인할 수 있게 했습니다.
+
+```diff
++## 이번 반영 요약
++- FormField: 폼 레이블, 도움말, 오류 메시지를 같은 포맷으로 묶는 공통 입력 레이어
++- StateKit: 로딩, 비어 있음, 오류 상태를 화면마다 반복 작성하지 않도록 정리한 상태 표현 묶음
++- DataListTable: 검색, 필터, 모바일 카드 대체 렌더를 함께 제공하는 공통 목록 레이어
+```
+
+## 실행 커맨드
+
+```bash
+find docs/worklogs -maxdepth 2 -type f -name '*.md' | sort
+grep -RInE '작업일지|실행 커맨드|소스 탭|상세 작업 내역' docs/worklogs --include='*.md'
+git -c safe.directory=/workspace/auto_codex/repo branch --show-current
+git -c safe.directory=/workspace/auto_codex/repo status --short --branch
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-11 00:00' --pretty=format:'%h %ad %d %s' --date=iso-local --reverse --all
+git -c safe.directory=/workspace/auto_codex/repo log --since='2026-04-11 00:00' --name-status --pretty=format:'commit %h' --all
+git -c safe.directory=/workspace/auto_codex/repo diff 6f7a9aa..a6a3c92 -- src/features/planBoard/PlanBoardPage.tsx
+git -c safe.directory=/workspace/auto_codex/repo show 818cc2f -- src/features/board/BoardPage.tsx src/features/board/api.ts src/features/board/types.ts etc/servers/work-server/src/routes/board.ts etc/servers/work-server/src/services/board-service.ts
+git -c safe.directory=/workspace/auto_codex/repo show d9d124b -- src/features/planBoard/PlanSchedulePage.tsx src/features/planBoard/api.ts etc/servers/work-server/src/routes/plan.ts etc/servers/work-server/src/services/plan-schedule-service.ts etc/servers/work-server/src/workers/plan-worker.ts
+git -c safe.directory=/workspace/auto_codex/repo show dd2e975 -- src/components/formField/FormField.tsx src/components/stateKit/StateKit.tsx src/components/dataListTable/DataListTable.tsx src/index.ts
+git -c safe.directory=/workspace/auto_codex/repo show 4e48813 -- src/app/main/MainHeader.tsx src/app/main/appConfig.ts etc/servers/work-server/src/workers/plan-worker.ts etc/servers/work-server/src/services/board-service.ts
+npm run build:app
+PORT=4173 node scripts/serve-app-dist.mjs
+curl -I http://127.0.0.1:4173/plans/all
+node --input-type=module <<'EOF'
+// Playwright로 /plans/all 진입 후 전체 화면과 개요 카드 캡처 저장
+EOF
+find docs/assets/worklogs/2026-04-11 -maxdepth 1 -type f | sort
+```
+
+## 변경/신규 파일
+
+- A docs/worklogs/2026-04-11.md
+- A docs/assets/worklogs/2026-04-11/feature-plans-automation-full.png
+- A docs/assets/worklogs/2026-04-11/plan-board-overview.png
+- M docs/components/component-addition-suggestions.md
+- M etc/db/work-db/sql/board-posts.sql
+- M etc/servers/work-server/src/routes/board.ts
+- M etc/servers/work-server/src/routes/plan.ts
+- M etc/servers/work-server/src/routes/visitor-history.ts
+- M etc/servers/work-server/src/services/app-config-service.ts
+- M etc/servers/work-server/src/services/board-service.ts
+- M etc/servers/work-server/src/services/plan-notification-service.ts
+- A etc/servers/work-server/src/services/plan-schedule-service.ts
+- M etc/servers/work-server/src/services/plan-service.ts
+- M etc/servers/work-server/src/services/visitor-history-service.ts
+- M etc/servers/work-server/src/services/worklog-automation-service.ts
+- M etc/servers/work-server/src/services/worklog-automation-utils.ts
+- A etc/servers/work-server/src/workers/plan-worker.test.ts
+- M etc/servers/work-server/src/workers/plan-worker.ts
+- M src/app/main/MainContent.tsx
+- M src/app/main/MainHeader.tsx
+- M src/app/main/appConfig.ts
+- M src/app/main/clientIdentity.ts
+- M src/app/main/layout/MainLayout.tsx
+- M src/app/main/layout/buildSearchOptions.ts
+- M src/app/main/mainView/constants.tsx
+- M src/app/main/mainView/navigation.ts
+- M src/app/main/mainView/searchOptions.ts
+- M src/app/main/pages/PlansPage.tsx
+- M src/app/main/routes.tsx
+- A src/components/dataListTable/DataListTable.css
+- A src/components/dataListTable/DataListTable.tsx
+- A src/components/dataListTable/index.ts
+- A src/components/dataListTable/samples/BaseSample.tsx
+- A src/components/formField/FormField.css
+- A src/components/formField/FormField.tsx
+- A src/components/formField/index.ts
+- A src/components/formField/samples/BaseSample.tsx
+- M src/components/previewer/CodexDiffPreviewer.tsx
+- M src/components/previewer/PreviewerUI.tsx
+- A src/components/stateKit/StateKit.css
+- A src/components/stateKit/StateKit.tsx
+- A src/components/stateKit/index.ts
+- A src/components/stateKit/samples/BaseSample.tsx
+- M src/features/board/BoardPage.tsx
+- M src/features/board/api.ts
+- M src/features/board/types.ts
+- M src/features/history/HistoryPage.tsx
+- M src/features/history/api.ts
+- M src/features/planBoard/PlanBoardPage.tsx
+- A src/features/planBoard/PlanSchedulePage.tsx
+- M src/features/planBoard/api.ts
+- M src/features/planBoard/index.ts
+- M src/features/planBoard/types.ts
+- M src/index.ts
+- M src/store/appStore/context/AppStoreContext.tsx
+- M src/styles.css
+- M src/sw.js
diff --git a/etc/commands/server-command/restart-rel.sh b/etc/commands/server-command/restart-rel.sh
new file mode 100755
index 0000000..0a8968f
--- /dev/null
+++ b/etc/commands/server-command/restart-rel.sh
@@ -0,0 +1,27 @@
+#!/bin/sh
+
+set -eu
+
+MAIN_PROJECT_ROOT="${MAIN_PROJECT_ROOT:-/workspace/main-project}"
+SERVER_COMMAND_COMPOSE_FILE="${SERVER_COMMAND_COMPOSE_FILE:-$MAIN_PROJECT_ROOT/docker-compose.yml}"
+SERVER_COMMAND_SERVICE="${SERVER_COMMAND_SERVICE:-release-app}"
+SERVER_COMMAND_CONTAINER_NAME="${SERVER_COMMAND_CONTAINER_NAME:-ai-code-app-release}"
+SERVER_COMMAND_DOCKER_SOCKET="${SERVER_COMMAND_DOCKER_SOCKET:-/var/run/docker.sock}"
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)
+
+cd "$MAIN_PROJECT_ROOT"
+
+if command -v docker >/dev/null 2>&1; then
+  if docker compose -f "$SERVER_COMMAND_COMPOSE_FILE" restart "$SERVER_COMMAND_SERVICE"; then
+    exit 0
+  fi
+
+  exec docker compose -f "$SERVER_COMMAND_COMPOSE_FILE" up -d --no-deps "$SERVER_COMMAND_SERVICE"
+fi
+
+if [ -S "$SERVER_COMMAND_DOCKER_SOCKET" ]; then
+  exec node "$SCRIPT_DIR/restart-via-docker-socket.mjs" "$SERVER_COMMAND_CONTAINER_NAME"
+fi
+
+echo "docker CLI not found and Docker socket is unavailable: $SERVER_COMMAND_DOCKER_SOCKET" >&2
+exit 127
diff --git a/etc/commands/server-command/restart-server-command-runner.sh b/etc/commands/server-command/restart-server-command-runner.sh
new file mode 100755
index 0000000..e9a3526
--- /dev/null
+++ b/etc/commands/server-command/restart-server-command-runner.sh
@@ -0,0 +1,53 @@
+#!/bin/sh
+
+set -eu
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)
+PROJECT_ROOT="${PROJECT_ROOT:-$(CDPATH= cd -- "$SCRIPT_DIR/../../.." && pwd)}"
+RUNNER_SCRIPT="${SERVER_COMMAND_RUNNER_SCRIPT:-$PROJECT_ROOT/scripts/run-server-command-runner.mjs}"
+RUNNER_NODE_BIN="${SERVER_COMMAND_RUNNER_NODE_BIN:-node}"
+RUNNER_NVM_DIR="${SERVER_COMMAND_RUNNER_NVM_DIR:-$HOME/.nvm}"
+RUNNER_HOST="${SERVER_COMMAND_RUNNER_HOST:-0.0.0.0}"
+RUNNER_PORT="${SERVER_COMMAND_RUNNER_PORT:-3211}"
+RUNNER_ACCESS_TOKEN="${SERVER_COMMAND_RUNNER_ACCESS_TOKEN:-local-server-command-runner}"
+RUNNER_LOG_FILE="${SERVER_COMMAND_RUNNER_LOG_FILE:-/tmp/server-command-runner.log}"
+RUNNER_HEARTBEAT_FILE="${SERVER_COMMAND_RUNNER_HEARTBEAT_FILE:-$PROJECT_ROOT/.server-command-runner-heartbeat.json}"
+RUNNER_CPU_WATCHDOG_ENABLED="${SERVER_COMMAND_CPU_WATCHDOG_ENABLED:-true}"
+RUNNER_CPU_WATCHDOG_INTERVAL_MS="${SERVER_COMMAND_CPU_WATCHDOG_INTERVAL_MS:-60000}"
+RUNNER_CPU_WATCHDOG_THRESHOLD_PERCENT="${SERVER_COMMAND_CPU_WATCHDOG_THRESHOLD_PERCENT:-120}"
+RUNNER_CPU_WATCHDOG_CONSECUTIVE_LIMIT="${SERVER_COMMAND_CPU_WATCHDOG_CONSECUTIVE_LIMIT:-8}"
+RUNNER_CPU_WATCHDOG_COOLDOWN_MS="${SERVER_COMMAND_CPU_WATCHDOG_COOLDOWN_MS:-1200000}"
+RUNNER_SCRIPT_BASENAME=$(basename "$RUNNER_SCRIPT")
+
+if [ "$RUNNER_NODE_BIN" = "node" ] && [ -s "$RUNNER_NVM_DIR/nvm.sh" ]; then
+  # Fresh-PC shells often miss the nvm-managed Node.js path in non-login execution.
+  . "$RUNNER_NVM_DIR/nvm.sh"
+  if command -v node >/dev/null 2>&1; then
+    RUNNER_NODE_BIN=$(command -v node)
+  fi
+fi
+
+if ! command -v "$RUNNER_NODE_BIN" >/dev/null 2>&1; then
+  echo "node runtime not found: $RUNNER_NODE_BIN" >&2
+  exit 1
+fi
+
+RUNNER_PIDS=$(ps -ef | grep "$RUNNER_SCRIPT_BASENAME" | grep -v grep | awk '{print $2}' || true)
+if [ -n "$RUNNER_PIDS" ]; then
+  kill $RUNNER_PIDS || true
+  sleep 1
+fi
+
+setsid env \
+  SERVER_COMMAND_RUNNER_HOST="$RUNNER_HOST" \
+  SERVER_COMMAND_RUNNER_PORT="$RUNNER_PORT" \
+  SERVER_COMMAND_RUNNER_ACCESS_TOKEN="$RUNNER_ACCESS_TOKEN" \
+  SERVER_COMMAND_RUNNER_HEARTBEAT_FILE="$RUNNER_HEARTBEAT_FILE" \
+  SERVER_COMMAND_CPU_WATCHDOG_ENABLED="$RUNNER_CPU_WATCHDOG_ENABLED" \
+  SERVER_COMMAND_CPU_WATCHDOG_INTERVAL_MS="$RUNNER_CPU_WATCHDOG_INTERVAL_MS" \
+  SERVER_COMMAND_CPU_WATCHDOG_THRESHOLD_PERCENT="$RUNNER_CPU_WATCHDOG_THRESHOLD_PERCENT" \
+  SERVER_COMMAND_CPU_WATCHDOG_CONSECUTIVE_LIMIT="$RUNNER_CPU_WATCHDOG_CONSECUTIVE_LIMIT" \
+  SERVER_COMMAND_CPU_WATCHDOG_COOLDOWN_MS="$RUNNER_CPU_WATCHDOG_COOLDOWN_MS" \
+  "$RUNNER_NODE_BIN" "$RUNNER_SCRIPT" >>"$RUNNER_LOG_FILE" 2>&1 </dev/null &
+
+echo "server-command-runner restart requested"
diff --git a/etc/commands/server-command/restart-test.sh b/etc/commands/server-command/restart-test.sh
new file mode 100755
index 0000000..a8b137b
--- /dev/null
+++ b/etc/commands/server-command/restart-test.sh
@@ -0,0 +1,27 @@
+#!/bin/sh
+
+set -eu
+
+MAIN_PROJECT_ROOT="${MAIN_PROJECT_ROOT:-/workspace/main-project}"
+SERVER_COMMAND_COMPOSE_FILE="${SERVER_COMMAND_COMPOSE_FILE:-$MAIN_PROJECT_ROOT/docker-compose.yml}"
+SERVER_COMMAND_SERVICE="${SERVER_COMMAND_SERVICE:-app}"
+SERVER_COMMAND_CONTAINER_NAME="${SERVER_COMMAND_CONTAINER_NAME:-ai-code-app-app-1}"
+SERVER_COMMAND_DOCKER_SOCKET="${SERVER_COMMAND_DOCKER_SOCKET:-/var/run/docker.sock}"
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)
+
+cd "$MAIN_PROJECT_ROOT"
+
+if command -v docker >/dev/null 2>&1; then
+  if docker compose -f "$SERVER_COMMAND_COMPOSE_FILE" restart "$SERVER_COMMAND_SERVICE"; then
+    exit 0
+  fi
+
+  exec docker compose -f "$SERVER_COMMAND_COMPOSE_FILE" up -d --no-deps "$SERVER_COMMAND_SERVICE"
+fi
+
+if [ -S "$SERVER_COMMAND_DOCKER_SOCKET" ]; then
+  exec node "$SCRIPT_DIR/restart-via-docker-socket.mjs" "$SERVER_COMMAND_CONTAINER_NAME"
+fi
+
+echo "docker CLI not found and Docker socket is unavailable: $SERVER_COMMAND_DOCKER_SOCKET" >&2
+exit 127
diff --git a/etc/commands/server-command/restart-via-docker-socket.mjs b/etc/commands/server-command/restart-via-docker-socket.mjs
new file mode 100755
index 0000000..bf68760
--- /dev/null
+++ b/etc/commands/server-command/restart-via-docker-socket.mjs
@@ -0,0 +1,63 @@
+import fs from 'node:fs';
+import http from 'node:http';
+
+function requestDocker(socketPath, requestPath, method) {
+  return new Promise((resolve, reject) => {
+    const request = http.request(
+      {
+        socketPath,
+        path: requestPath,
+        method,
+      },
+      (response) => {
+        let body = '';
+        response.setEncoding('utf8');
+        response.on('data', (chunk) => {
+          body += chunk;
+        });
+        response.on('end', () => {
+          resolve({
+            statusCode: response.statusCode ?? 500,
+            body,
+          });
+        });
+      },
+    );
+
+    request.on('error', reject);
+    request.end();
+  });
+}
+
+async function main() {
+  const containerName = process.argv[2]?.trim();
+  const socketPath = process.env.SERVER_COMMAND_DOCKER_SOCKET?.trim() || '/var/run/docker.sock';
+
+  if (!containerName) {
+    console.error('container name is required');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(socketPath)) {
+    console.error(`Docker socket not found: ${socketPath}`);
+    process.exit(127);
+  }
+
+  const restartPath = `/containers/${encodeURIComponent(containerName)}/restart?t=30`;
+  const response = await requestDocker(socketPath, restartPath, 'POST');
+
+  if (response.statusCode >= 200 && response.statusCode < 300) {
+    process.stdout.write(`${containerName} restarted via Docker socket`);
+    return;
+  }
+
+  if (response.statusCode === 404) {
+    console.error(`Container not found: ${containerName}`);
+    process.exit(1);
+  }
+
+  console.error(`Docker socket restart failed (${response.statusCode}): ${response.body.trim()}`);
+  process.exit(1);
+}
+
+await main();
diff --git a/etc/commands/server-command/restart-work-server.sh b/etc/commands/server-command/restart-work-server.sh
new file mode 100755
index 0000000..b48ce65
--- /dev/null
+++ b/etc/commands/server-command/restart-work-server.sh
@@ -0,0 +1,9 @@
+#!/bin/sh
+
+set -eu
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)
+REPO_ROOT=$(CDPATH= cd -- "$SCRIPT_DIR/../../.." && pwd)
+
+cd "$REPO_ROOT"
+exec docker compose -f etc/servers/work-server/docker-compose.yml up -d --build --force-recreate --no-deps work-server
diff --git a/etc/db/work-db/.env.example b/etc/db/work-db/.env.example
new file mode 100755
index 0000000..c83ea17
--- /dev/null
+++ b/etc/db/work-db/.env.example
@@ -0,0 +1,4 @@
+POSTGRES_DB=work_db
+POSTGRES_USER=work_user
+POSTGRES_PASSWORD=change-me
+POSTGRES_PORT=5432
diff --git a/etc/db/work-db/.gitignore b/etc/db/work-db/.gitignore
new file mode 100755
index 0000000..82d8eec
--- /dev/null
+++ b/etc/db/work-db/.gitignore
@@ -0,0 +1,2 @@
+.env
+postgres-data
diff --git a/etc/db/work-db/README.md b/etc/db/work-db/README.md
new file mode 100755
index 0000000..1854532
--- /dev/null
+++ b/etc/db/work-db/README.md
@@ -0,0 +1,28 @@
+# Work DB
+
+로컬 개발용 PostgreSQL 컨테이너입니다.
+
+## 실행
+
+```bash
+docker compose up -d
+docker compose logs -f postgres
+```
+
+## 중지
+
+```bash
+docker compose down
+```
+
+## 기본 접속 정보
+
+- Host: `localhost`
+- Port: `.env`의 `POSTGRES_PORT`
+- Database: `.env`의 `POSTGRES_DB`
+- User: `.env`의 `POSTGRES_USER`
+- Password: `.env`의 `POSTGRES_PASSWORD`
+
+## work-server 연동
+
+`etc/servers/work-server/.env`의 DB 설정과 맞춰서 사용합니다.
diff --git a/etc/db/work-db/docker-compose.yml b/etc/db/work-db/docker-compose.yml
new file mode 100755
index 0000000..e964c71
--- /dev/null
+++ b/etc/db/work-db/docker-compose.yml
@@ -0,0 +1,41 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: work-db
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    restart: unless-stopped
+    env_file:
+      - path: ./.env.example
+        required: false
+      - path: ./.env
+        required: false
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB}
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    ports:
+      - '${POSTGRES_PORT:-5432}:5432'
+    volumes:
+      - work-db-data:/var/lib/postgresql/data
+    networks:
+      - work-backend
+    healthcheck:
+      test:
+        [
+          'CMD-SHELL',
+          'pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB'
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+volumes:
+  work-db-data:
+
+networks:
+  work-backend:
+    name: work-backend
diff --git a/etc/db/work-db/sql/board-posts.sql b/etc/db/work-db/sql/board-posts.sql
new file mode 100755
index 0000000..93c9985
--- /dev/null
+++ b/etc/db/work-db/sql/board-posts.sql
@@ -0,0 +1,12 @@
+create table if not exists board_posts (
+  id serial primary key,
+  title varchar(200) not null,
+  content text not null,
+  automation_plan_item_id integer null,
+  automation_received_at timestamptz null,
+  created_at timestamptz not null default now(),
+  updated_at timestamptz not null default now()
+);
+
+create index if not exists idx_board_posts_updated_at
+  on board_posts (updated_at desc);
diff --git a/etc/db/work-db/sql/notification-messages.sql b/etc/db/work-db/sql/notification-messages.sql
new file mode 100755
index 0000000..cc5a12c
--- /dev/null
+++ b/etc/db/work-db/sql/notification-messages.sql
@@ -0,0 +1,16 @@
+create table if not exists notification_messages (
+  id serial primary key,
+  title varchar(200) not null,
+  body text not null,
+  category varchar(60) not null default 'general',
+  source varchar(80) not null default 'system',
+  priority varchar(20) not null default 'normal',
+  is_read boolean not null default false,
+  read_at timestamptz null,
+  metadata_json jsonb not null default '{}'::jsonb,
+  created_at timestamptz not null default now(),
+  updated_at timestamptz not null default now()
+);
+
+create index if not exists idx_notification_messages_unread_created_at
+  on notification_messages (is_read, created_at desc, id desc);
diff --git a/etc/db/work-db/sql/visitor-history.sql b/etc/db/work-db/sql/visitor-history.sql
new file mode 100755
index 0000000..f28e469
--- /dev/null
+++ b/etc/db/work-db/sql/visitor-history.sql
@@ -0,0 +1,34 @@
+-- 방문자 마스터 테이블: clientId 단위 집계 정보 보관
+create table if not exists visitor_clients (
+  id serial primary key,
+  client_id varchar(120) not null unique,
+  nickname varchar(80) not null,
+  first_visited_at timestamptz not null default now(),
+  last_visited_at timestamptz not null default now(),
+  visit_count integer not null default 1,
+  last_visited_url varchar(2000),
+  last_user_agent varchar(1000),
+  last_ip varchar(120),
+  created_at timestamptz not null default now(),
+  updated_at timestamptz not null default now()
+);
+
+create index if not exists idx_visitor_clients_last_visited_at
+  on visitor_clients (last_visited_at desc);
+
+-- 방문 상세 이력 테이블: 중복 방문도 모두 적재
+create table if not exists visitor_visit_histories (
+  id serial primary key,
+  client_id varchar(120) not null,
+  visited_at timestamptz not null default now(),
+  url varchar(2000) not null,
+  event_type varchar(80) not null default 'page_view',
+  user_agent varchar(1000),
+  ip varchar(120)
+);
+
+create index if not exists idx_visitor_visit_histories_client_id
+  on visitor_visit_histories (client_id);
+
+create index if not exists idx_visitor_visit_histories_visited_at
+  on visitor_visit_histories (visited_at desc);
diff --git a/etc/servers/work-server/.env.example b/etc/servers/work-server/.env.example
new file mode 100644
index 0000000..0c4cf48
--- /dev/null
+++ b/etc/servers/work-server/.env.example
@@ -0,0 +1,52 @@
+NODE_VERSION=22.22.2
+PORT=3100
+APP_TIME_ZONE=Asia/Seoul
+DB_TIME_ZONE=Asia/Seoul
+DB_CLIENT=pg
+DB_HOST=work-db
+DB_PORT=5432
+DB_NAME=work_db
+DB_USER=work_user
+DB_PASSWORD=change-me
+DB_SSL=false
+PLAN_WORKER_ENABLED=true
+PLAN_WORKER_INTERVAL_MS=10000
+PLAN_WORKER_ID=
+PLAN_GIT_REPO_PATH=/workspace/auto_codex/repo
+PLAN_MAIN_PROJECT_REPO_PATH=/workspace/main-project
+PLAN_RELEASE_BRANCH=release
+PLAN_MAIN_BRANCH=main
+PLAN_GIT_USER_NAME=how2ice
+PLAN_GIT_USER_EMAIL=how2ice@naver.com
+PLAN_CODEX_RUNNER_PATH=/workspace/repo-scripts/run-plan-codex-once.mjs
+PLAN_CODEX_ENABLED=true
+PLAN_LOCAL_MAIN_MODE=true
+PLAN_CODEX_BIN=codex
+IOS_NOTIFICATION_ENABLED=false
+WEB_PUSH_ENABLED=true
+WEB_PUSH_VAPID_PUBLIC_KEY=BL1_f6BgOym_NhSs5QOmziKaYB5rTecl_2JG172w2AO_ru0hD-EG15S9F_6zgv0B6ajfzHEccgnwJAygfGDVv6Y
+WEB_PUSH_VAPID_PRIVATE_KEY=BglyVgx-u1BnyFSIkTwbnamHnQDGxHewwmp5JLtyr3M
+WEB_PUSH_SUBJECT=mailto:how2ice@naver.com
+APNS_KEY_ID=
+APNS_TEAM_ID=
+APNS_BUNDLE_ID=
+APNS_PRIVATE_KEY=
+APNS_PRIVATE_KEY_PATH=
+APNS_PRODUCTION=false
+SERVER_COMMAND_ACCESS_TOKEN=usr_7f3a9c2d8e1b4a6f
+SERVER_COMMAND_API_BASE_URL=http://host.docker.internal:3211/api
+SERVER_COMMAND_API_ACCESS_TOKEN=local-server-command-runner
+SERVER_COMMAND_API_RESTART_PATH_TEMPLATE=/api/server-commands/{key}/actions/restart
+SERVER_COMMAND_PROJECT_ROOT=/workspace/auto_codex/repo
+SERVER_COMMAND_MAIN_PROJECT_ROOT=/workspace/main-project
+SERVER_COMMAND_DOCKER_SOCKET=/var/run/docker.sock
+SERVER_COMMAND_TEST_URL=https://test.sm-home.cloud/
+SERVER_COMMAND_REL_URL=https://rel.sm-home.cloud/
+SERVER_COMMAND_WORK_SERVER_URL=http://127.0.0.1:3100/health
+SERVER_COMMAND_RUNNER_URL=http://host.docker.internal:3211/health
+SERVER_COMMAND_RUNNER_ACCESS_TOKEN=local-server-command-runner
+SERVER_COMMAND_RUNNER_HOST=0.0.0.0
+SERVER_COMMAND_RUNNER_HEARTBEAT_FILE=/workspace/main-project/.server-command-runner-heartbeat.json
+SERVER_COMMAND_TEST_SERVICE=app
+SERVER_COMMAND_REL_SERVICE=release-app
+SERVER_COMMAND_WORK_SERVER_SERVICE=work-server
diff --git a/etc/servers/work-server/.gitignore b/etc/servers/work-server/.gitignore
new file mode 100755
index 0000000..9c97bbd
--- /dev/null
+++ b/etc/servers/work-server/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.env
diff --git a/etc/servers/work-server/Dockerfile b/etc/servers/work-server/Dockerfile
new file mode 100644
index 0000000..4f447cf
--- /dev/null
+++ b/etc/servers/work-server/Dockerfile
@@ -0,0 +1,14 @@
+FROM node:22.22.2-bookworm
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install -g @openai/codex && npm ci --legacy-peer-deps
+
+COPY tsconfig.json ./
+COPY scripts ./scripts
+COPY src ./src
+
+RUN npm run build
+
+CMD ["npm", "run", "start"]
diff --git a/etc/servers/work-server/README.md b/etc/servers/work-server/README.md
new file mode 100644
index 0000000..a04fe3e
--- /dev/null
+++ b/etc/servers/work-server/README.md
@@ -0,0 +1,115 @@
+# Work Server
+
+`Fastify + Knex + PostgreSQL` 기반의 범용 작업용 API 서버입니다.
+
+## 추천 DB
+
+- `PostgreSQL`
+- 이유:
+  - Node 생태계에서 검증된 조합
+  - `Knex`로 CRUD와 DDL을 함께 다루기 편함
+  - 운영/확장/마이그레이션 측면에서 무난함
+
+## 실행
+
+```bash
+docker compose up -d
+docker compose logs -f work-server
+```
+
+`work-server`는 HMR/watch 없이 빌드 산출물(`dist`)을 실행합니다. 컨테이너 재기동은 `docker compose up -d --build --force-recreate --no-deps work-server` 기준으로 최신 소스를 다시 빌드한 뒤 새 컨테이너를 띄웁니다.
+
+호스트 프로젝트 루트와 동일한 문맥으로 서버 재기동을 처리하려면 별도 host runner도 함께 켭니다.
+
+```bash
+cd /home/how2ice/project/ai-code-app
+npm run server-command:runner
+```
+
+## 환경 변수
+
+기본 실행은 `.env.example` 값으로도 가능합니다.
+로컬 환경에 맞는 값을 덮어쓰려면 `.env.example`를 참고해서 `.env`를 추가하면 됩니다.
+
+주요 항목:
+
+- `APP_TIME_ZONE`: Node 서버 런타임 기준 시간대. 기본값 `Asia/Seoul`
+- `DB_TIME_ZONE`: 앱이 여는 DB 세션 시간대. 기본값 `Asia/Seoul`
+- `DB_*`: PostgreSQL 접속 정보
+- `PLAN_WORKER_ENABLED`: Plan 자동화 worker 활성화 여부
+- `PLAN_WORKER_INTERVAL_MS`: Plan polling 주기
+- `PLAN_GIT_REPO_PATH`: 브랜치 생성/병합 대상 저장소 경로
+- `PLAN_MAIN_PROJECT_REPO_PATH`: main 반영 후 pull 받을 메인 루트 프로젝트 경로. 비우면 `PLAN_GIT_REPO_PATH`를 사용
+- `PLAN_RELEASE_BRANCH`: 자동 merge 대상 release 브랜치명
+- `IOS_NOTIFICATION_ENABLED`: iOS APNs 알림 활성화 여부
+- `APNS_*`: Apple Push Notification 인증 키 정보
+- `SERVER_COMMAND_DOCKER_SOCKET`: 서버 재기동 명령이 사용할 Docker Unix socket 경로. rootless Docker면 예: `/run/user/1000/docker.sock`
+- `SERVER_COMMAND_API_BASE_URL`: `work-server`가 서버 재기동 요청을 위임할 host runner 주소
+- `SERVER_COMMAND_API_ACCESS_TOKEN`: host runner 호출 토큰
+
+서버 재기동 기능을 쓰려면 `work-server` 컨테이너가 Docker에 접근할 수 있어야 합니다. 기본값은 `/var/run/docker.sock`이며, rootless Docker 환경이면 `.env`에 `SERVER_COMMAND_DOCKER_SOCKET` 또는 `DOCKER_HOST=unix:///run/user/<uid>/docker.sock`를 맞춰 준 뒤 `work-server`를 다시 올려야 합니다.
+
+기본 예시는 `http://host.docker.internal:3211/api`로 맞춰져 있어서, `work-server` 컨테이너가 아니라 호스트의 현재 프로젝트 루트에서 `restart-*.sh`를 실행합니다. 즉 `Server > Command`가 직접 CLI로 재기동한 것과 최대한 비슷한 문맥을 사용합니다.
+
+## Codex Live
+
+`Codex Live`는 현재 프로젝트 환경의 `main_project` 경로를 기준으로 실행됩니다. 기본값은 `PLAN_MAIN_PROJECT_REPO_PATH=/workspace/main-project`이며, 소스 수정이 필요하면 이 경로의 실제 프로젝트를 바로 수정합니다.
+
+현재 운영 기준에서는 `Codex Live`, 일반 채팅, 작업메모 반영 요청 모두 **현재 프로젝트 루트의 로컬 `main` 작업본을 바로 수정**합니다. 별도 브랜치 생성이나 `release -> main` 동기화는 기본 전제로 사용하지 않으며, Git 관련 작업은 사용자가 명시적으로 요청할 때만 수행합니다.
+
+브라우저 기준 접속 확인, 화면 검증, 외부 도메인 테스트는 **`https://test.sm-home.cloud/`를 기본 작업 도메인으로 사용**합니다. 별도 요청이 없는 한 `sm-home.cloud`나 `rel.sm-home.cloud`는 기본 검증 대상으로 삼지 않습니다.
+
+채팅에서 파일, 문서, 이미지, 코드 같은 리소스를 제공할 때의 기본 공개 경로는 `public/.codex_chat/<chat-session-id>/resource/...`입니다. Codex가 원본 파일 경로만 답해도 서버가 이 위치로 세션 전용 사본을 만들고, 채팅에는 공개 URL을 다시 적어 줍니다.
+
+채팅 첨부 파일도 같은 기준을 사용하며 `public/.codex_chat/<chat-session-id>/resource/uploads/...` 아래에 저장됩니다.
+
+## Plan 자동화
+
+`Plan` 게시판 항목을 작업 큐처럼 읽어 자동화할 수 있습니다.
+
+현재 로컬 운영 모드에서는 아래 자동 브랜치 흐름을 기본 동작으로 강제하지 않습니다. 필요 시 사용자가 별도로 요청한 경우에만 사용합니다.
+
+- `등록` 상태: worker가 읽어서 `feature/plan-{id}-{workId}` 브랜치 생성 시도
+- 성공 시: `작업중`, `브랜치준비`
+- 실패 시: `이슈`, 최근 오류 기록
+- `개발완료` 상태: worker가 `release` 브랜치 병합 시도
+- 병합 성공 시: `완료`
+- 병합 실패 시: `이슈`
+
+안전 조건:
+
+- Git worktree가 깨끗해야 동작
+- `release` 브랜치가 실제로 존재해야 병합 가능
+- 실패 시 자동으로 `이슈` 상태와 오류 메시지를 남김
+
+## 주요 API
+
+- `GET /health`
+- `GET /api/schema/tables`
+- `POST /api/ddl/create-table`
+- `POST /api/ddl/drop-table`
+- `POST /api/ddl/add-column`
+- `POST /api/ddl/drop-column`
+- `POST /api/ddl/raw`
+- `POST /api/crud/:table/select`
+- `POST /api/crud/:table/insert`
+- `PATCH /api/crud/:table/update`
+- `DELETE /api/crud/:table/delete`
+- `GET /api/plan/statuses`
+- `POST /api/plan/setup`
+- `GET /api/plan/items`
+- `GET /api/plan/items/:id`
+- `POST /api/plan/items`
+- `PATCH /api/plan/items/:id`
+- `DELETE /api/plan/items/:id`
+- `POST /api/notifications/setup`
+- `GET /api/notifications/tokens`
+- `PUT /api/notifications/tokens/ios`
+- `DELETE /api/notifications/tokens/ios`
+- `POST /api/notifications/send-test`
+
+## iOS 알림 연동
+
+- 프론트에서 알림 `On` 시 `PUT /api/notifications/tokens/ios`로 APNs 토큰을 등록합니다.
+- 프론트에서 알림 `Off` 시 또는 토큰이 폐기되면 `DELETE /api/notifications/tokens/ios`로 토큰을 제거합니다.
+- Plan worker가 브랜치 준비, 자동 작업 완료/실패, release 반영 완료/실패, main 반영 완료/실패 시 등록된 iOS 토큰으로 APNs 알림을 전송합니다.
diff --git a/etc/servers/work-server/docker-compose.yml b/etc/servers/work-server/docker-compose.yml
new file mode 100644
index 0000000..b54f494
--- /dev/null
+++ b/etc/servers/work-server/docker-compose.yml
@@ -0,0 +1,53 @@
+services:
+  work-server:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: work-server
+    logging:
+      driver: json-file
+      options:
+        max-size: "200m"
+        max-file: "2"
+    user: "0:0"
+    group_add:
+      - "${SERVER_COMMAND_DOCKER_GID:-984}"
+    cpus: 1.5
+    mem_limit: 2048m
+    working_dir: /app
+    env_file:
+      - path: ./.env.example
+        required: false
+      - path: ./.env
+        required: false
+    ports:
+      - '127.0.0.1:3100:3100'
+    volumes:
+      - ../../../:/workspace/main-project
+      - ../../../.auto_codex:/workspace/auto_codex
+      - ../../../scripts:/workspace/repo-scripts:ro
+      - ${SERVER_COMMAND_DOCKER_SOCKET:-/var/run/docker.sock}:${SERVER_COMMAND_DOCKER_SOCKET:-/var/run/docker.sock}
+      - ./.docker/home:/home/how2ice
+      - ./.docker/codex-home:/codex-home
+      - ./.docker/codex-home-template:/codex-home-template
+    environment:
+      TZ: ${APP_TIME_ZONE:-Asia/Seoul}
+      HOME: /home/how2ice
+      CODEX_HOME: /codex-home
+      PLAN_CODEX_TEMPLATE_HOME: /codex-home-template
+      PLAN_CODEX_BIN: ${PLAN_CODEX_BIN:-codex}
+      PLAN_CODEX_ENABLED: ${PLAN_CODEX_ENABLED:-false}
+      PLAN_WORKER_ENABLED: ${PLAN_WORKER_ENABLED:-false}
+      APP_TIME_ZONE: ${APP_TIME_ZONE:-Asia/Seoul}
+      DB_TIME_ZONE: ${DB_TIME_ZONE:-Asia/Seoul}
+      NPM_CONFIG_CACHE: /home/how2ice/.npm
+      SERVER_COMMAND_DOCKER_SOCKET: ${SERVER_COMMAND_DOCKER_SOCKET:-/var/run/docker.sock}
+      DOCKER_HOST: ${DOCKER_HOST:-}
+    networks:
+      - work-backend
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+
+networks:
+  work-backend:
+    name: work-backend
diff --git a/etc/servers/work-server/package-lock.json b/etc/servers/work-server/package-lock.json
new file mode 100755
index 0000000..6d21cea
--- /dev/null
+++ b/etc/servers/work-server/package-lock.json
@@ -0,0 +1,1999 @@
+{
+  "name": "work-server",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "work-server",
+      "version": "0.1.0",
+      "dependencies": {
+        "@fastify/cors": "^11.1.0",
+        "@parse/node-apn": "^8.0.0",
+        "dotenv": "^17.2.2",
+        "fastify": "^5.6.0",
+        "knex": "^3.1.0",
+        "pg": "^8.16.3",
+        "web-push": "^3.6.7",
+        "ws": "^8.18.3",
+        "zod": "^4.1.5"
+      },
+      "devDependencies": {
+        "@types/node": "^24.5.2",
+        "@types/ws": "^8.18.1",
+        "tsx": "^4.20.5",
+        "typescript": "^5.9.2"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.5.tgz",
+      "integrity": "sha512-nGsF/4C7uzUj+Nj/4J+Zt0bYQ6bz33Phz8Lb2N80Mti1HjGclTJdXZ+9APC4kLvONbjxN1zfvYNd8FEcbBK/MQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.5.tgz",
+      "integrity": "sha512-Cv781jd0Rfj/paoNrul1/r4G0HLvuFKYh7C9uHZ2Pl8YXstzvCyyeWENTFR9qFnRzNMCjXmsulZuvosDg10Mog==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.5.tgz",
+      "integrity": "sha512-Oeghq+XFgh1pUGd1YKs4DDoxzxkoUkvko+T/IVKwlghKLvvjbGFB3ek8VEDBmNvqhwuL0CQS3cExdzpmUyIrgA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.5.tgz",
+      "integrity": "sha512-nQD7lspbzerlmtNOxYMFAGmhxgzn8Z7m9jgFkh6kpkjsAhZee1w8tJW3ZlW+N9iRePz0oPUDrYrXidCPSImD0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.5.tgz",
+      "integrity": "sha512-I+Ya/MgC6rr8oRWGRDF3BXDfP8K1BVUggHqN6VI2lUZLdDi1IM1v2cy0e3lCPbP+pVcK3Tv8cgUhHse1kaNZZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.5.tgz",
+      "integrity": "sha512-MCjQUtC8wWJn/pIPM7vQaO69BFgwPD1jriEdqwTCKzWjGgkMbcg+M5HzrOhPhuYe1AJjXlHmD142KQf+jnYj8A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.5.tgz",
+      "integrity": "sha512-X6xVS+goSH0UelYXnuf4GHLwpOdc8rgK/zai+dKzBMnncw7BTQIwquOodE7EKvY2UVUetSqyAfyZC1D+oqLQtg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.5.tgz",
+      "integrity": "sha512-233X1FGo3a8x1ekLB6XT69LfZ83vqz+9z3TSEQCTYfMNY880A97nr81KbPcAMl9rmOFp11wO0dP+eB18KU/Ucg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.5.tgz",
+      "integrity": "sha512-0wkVrYHG4sdCCN/bcwQ7yYMXACkaHc3UFeaEOwSVW6e5RycMageYAFv+JS2bKLwHyeKVUvtoVH+5/RHq0fgeFw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.5.tgz",
+      "integrity": "sha512-euKkilsNOv7x/M1NKsx5znyprbpsRFIzTV6lWziqJch7yWYayfLtZzDxDTl+LSQDJYAjd9TVb/Kt5UKIrj2e4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.5.tgz",
+      "integrity": "sha512-hVRQX4+P3MS36NxOy24v/Cdsimy/5HYePw+tmPqnNN1fxV0bPrFWR6TMqwXPwoTM2VzbkA+4lbHWUKDd5ZDA/w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.5.tgz",
+      "integrity": "sha512-mKqqRuOPALI8nDzhOBmIS0INvZOOFGGg5n1osGIXAx8oersceEbKd4t1ACNTHM3sJBXGFAlEgqM+svzjPot+ZQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.5.tgz",
+      "integrity": "sha512-EE/QXH9IyaAj1qeuIV5+/GZkBTipgGO782Ff7Um3vPS9cvLhJJeATy4Ggxikz2inZ46KByamMn6GqtqyVjhenA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.5.tgz",
+      "integrity": "sha512-0V2iF1RGxBf1b7/BjurA5jfkl7PtySjom1r6xOK2q9KWw/XCpAdtB6KNMO+9xx69yYfSCRR9FE0TyKfHA2eQMw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.5.tgz",
+      "integrity": "sha512-rYxThBx6G9HN6tFNuvB/vykeLi4VDsm5hE5pVwzqbAjZEARQrWu3noZSfbEnPZ/CRXP3271GyFk/49up2W190g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.5.tgz",
+      "integrity": "sha512-uEP2q/4qgd8goEUc4QIdU/1P2NmEtZ/zX5u3OpLlCGhJIuBIv0s0wr7TB2nBrd3/A5XIdEkkS5ZLF0ULuvaaYQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.5.tgz",
+      "integrity": "sha512-+Gq47Wqq6PLOOZuBzVSII2//9yyHNKZLuwfzCemqexqOQCSz0zy0O26kIzyp9EMNMK+nZ0tFHBZrCeVUuMs/ew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.5.tgz",
+      "integrity": "sha512-3F/5EG8VHfN/I+W5cO1/SV2H9Q/5r7vcHabMnBqhHK2lTWOh3F8vixNzo8lqxrlmBtZVFpW8pmITHnq54+Tq4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.5.tgz",
+      "integrity": "sha512-28t+Sj3CPN8vkMOlZotOmDgilQwVvxWZl7b8rxpn73Tt/gCnvrHxQUMng4uu3itdFvrtba/1nHejvxqz8xgEMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.5.tgz",
+      "integrity": "sha512-Doz/hKtiuVAi9hMsBMpwBANhIZc8l238U2Onko3t2xUp8xtM0ZKdDYHMnm/qPFVthY8KtxkXaocwmMh6VolzMA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.5.tgz",
+      "integrity": "sha512-WfGVaa1oz5A7+ZFPkERIbIhKT4olvGl1tyzTRaB5yoZRLqC0KwaO95FeZtOdQj/oKkjW57KcVF944m62/0GYtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.5.tgz",
+      "integrity": "sha512-Xh+VRuh6OMh3uJ0JkCjI57l+DVe7VRGBYymen8rFPnTVgATBwA6nmToxM2OwTlSvrnWpPKkrQUj93+K9huYC6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.5.tgz",
+      "integrity": "sha512-aC1gpJkkaUADHuAdQfuVTnqVUTLqqUNhAvEwHwVWcnVVZvNlDPGA0UveZsfXJJ9T6k9Po4eHi3c02gbdwO3g6w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.5.tgz",
+      "integrity": "sha512-0UNx2aavV0fk6UpZcwXFLztA2r/k9jTUa7OW7SAea1VYUhkug99MW1uZeXEnPn5+cHOd0n8myQay6TlFnBR07w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.5.tgz",
+      "integrity": "sha512-5nlJ3AeJWCTSzR7AEqVjT/faWyqKU86kCi1lLmxVqmNR+j4HrYdns+eTGjS/vmrzCIe8inGQckUadvS0+JkKdQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.5.tgz",
+      "integrity": "sha512-PWypQR+d4FLfkhBIV+/kHsUELAnMpx1bRvvsn3p+/sAERbnCzFrtDRG2Xw5n+2zPxBK2+iaP+vetsRl4Ti7WgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@fastify/ajv-compiler": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-4.0.5.tgz",
+      "integrity": "sha512-KoWKW+MhvfTRWL4qrhUwAAZoaChluo0m0vbiJlGMt2GXvL4LVPQEjt8kSpHI3IBq5Rez8fg+XeH3cneztq+C7A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.12.0",
+        "ajv-formats": "^3.0.1",
+        "fast-uri": "^3.0.0"
+      }
+    },
+    "node_modules/@fastify/cors": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/cors/-/cors-11.2.0.tgz",
+      "integrity": "sha512-LbLHBuSAdGdSFZYTLVA3+Ch2t+sA6nq3Ejc6XLAKiQ6ViS2qFnvicpj0htsx03FyYeLs04HfRNBsz/a8SvbcUw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fastify-plugin": "^5.0.0",
+        "toad-cache": "^3.7.0"
+      }
+    },
+    "node_modules/@fastify/error": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/error/-/error-4.2.0.tgz",
+      "integrity": "sha512-RSo3sVDXfHskiBZKBPRgnQTtIqpi/7zhJOEmAxCiBcM7d0uwdGdxLlsCaLzGs8v8NnxIRlfG0N51p5yFaOentQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/@fastify/fast-json-stringify-compiler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-5.0.3.tgz",
+      "integrity": "sha512-uik7yYHkLr6fxd8hJSZ8c+xF4WafPK+XzneQDPU+D10r5X19GW8lJcom2YijX2+qtFF1ENJlHXKFM9ouXNJYgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fast-json-stringify": "^6.0.0"
+      }
+    },
+    "node_modules/@fastify/forwarded": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@fastify/forwarded/-/forwarded-3.0.1.tgz",
+      "integrity": "sha512-JqDochHFqXs3C3Ml3gOY58zM7OqO9ENqPo0UqAjAjH8L01fRZqwX9iLeX34//kiJubF7r2ZQHtBRU36vONbLlw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/@fastify/merge-json-schemas": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@fastify/merge-json-schemas/-/merge-json-schemas-0.2.1.tgz",
+      "integrity": "sha512-OA3KGBCy6KtIvLf8DINC5880o5iBlDX4SxzLQS8HorJAbqluzLRn80UXU0bxZn7UOFhFgpRJDasfwn9nG4FG4A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@fastify/proxy-addr": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/proxy-addr/-/proxy-addr-5.1.0.tgz",
+      "integrity": "sha512-INS+6gh91cLUjB+PVHfu1UqcB76Sqtpyp7bnL+FYojhjygvOPA9ctiD/JDKsyD9Xgu4hUhCSJBPig/w7duNajw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/forwarded": "^3.0.0",
+        "ipaddr.js": "^2.1.0"
+      }
+    },
+    "node_modules/@parse/node-apn": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@parse/node-apn/-/node-apn-8.0.0.tgz",
+      "integrity": "sha512-blvU/V0FL3j7u2lstso1aInMw7yYrKg/6Ctr3Kc/7kleFatAfZswhzHk9d5lI4DUQBsUBun8nidgZHCY6sft+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4.4.3",
+        "jsonwebtoken": "9.0.3",
+        "node-forge": "1.4.0",
+        "verror": "1.10.1"
+      },
+      "engines": {
+        "node": "20 || 22 || 24"
+      }
+    },
+    "node_modules/@parse/node-apn/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@parse/node-apn/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/@pinojs/redact": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@pinojs/redact/-/redact-0.4.0.tgz",
+      "integrity": "sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.12.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.0.tgz",
+      "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/abstract-logging": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
+      "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==",
+      "license": "MIT"
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/atomic-sleep": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
+      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/avvio": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/avvio/-/avvio-9.2.0.tgz",
+      "integrity": "sha512-2t/sy01ArdHHE0vRH5Hsay+RtCZt3dLPji7W7/MMOCEgze5b7SNDC4j5H6FnVgPkI1MTNFGzHdHrVXDDl7QSSQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/error": "^4.0.0",
+        "fastq": "^1.17.1"
+      }
+    },
+    "node_modules/bn.js": {
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
+      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
+      "license": "MIT"
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.0.tgz",
+      "integrity": "sha512-kCKF62fwtzwYm0IGBNjRUjtJgMfGapII+FslMHIjMR5KTnwEmBmWLDRSnc3XSNP8bNy34tekgQyDT0hr7pERRQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.5.tgz",
+      "integrity": "sha512-zdQoHBjuDqKsvV5OPaWansOwfSQ0Js+Uj9J85TBvj3bFW1JjWTSULMRwdQAc8qMeIScbClxeMK0jlrtB9linhA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.5",
+        "@esbuild/android-arm": "0.27.5",
+        "@esbuild/android-arm64": "0.27.5",
+        "@esbuild/android-x64": "0.27.5",
+        "@esbuild/darwin-arm64": "0.27.5",
+        "@esbuild/darwin-x64": "0.27.5",
+        "@esbuild/freebsd-arm64": "0.27.5",
+        "@esbuild/freebsd-x64": "0.27.5",
+        "@esbuild/linux-arm": "0.27.5",
+        "@esbuild/linux-arm64": "0.27.5",
+        "@esbuild/linux-ia32": "0.27.5",
+        "@esbuild/linux-loong64": "0.27.5",
+        "@esbuild/linux-mips64el": "0.27.5",
+        "@esbuild/linux-ppc64": "0.27.5",
+        "@esbuild/linux-riscv64": "0.27.5",
+        "@esbuild/linux-s390x": "0.27.5",
+        "@esbuild/linux-x64": "0.27.5",
+        "@esbuild/netbsd-arm64": "0.27.5",
+        "@esbuild/netbsd-x64": "0.27.5",
+        "@esbuild/openbsd-arm64": "0.27.5",
+        "@esbuild/openbsd-x64": "0.27.5",
+        "@esbuild/openharmony-arm64": "0.27.5",
+        "@esbuild/sunos-x64": "0.27.5",
+        "@esbuild/win32-arm64": "0.27.5",
+        "@esbuild/win32-ia32": "0.27.5",
+        "@esbuild/win32-x64": "0.27.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
+      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/fast-decode-uri-component": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
+      "integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stringify": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-6.3.0.tgz",
+      "integrity": "sha512-oRCntNDY/329HJPlmdNLIdogNtt6Vyjb1WuT01Soss3slIdyUp8kAcDU3saQTOquEK8KFVfwIIF7FebxUAu+yA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/merge-json-schemas": "^0.2.0",
+        "ajv": "^8.12.0",
+        "ajv-formats": "^3.0.1",
+        "fast-uri": "^3.0.0",
+        "json-schema-ref-resolver": "^3.0.0",
+        "rfdc": "^1.2.0"
+      }
+    },
+    "node_modules/fast-querystring": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.1.2.tgz",
+      "integrity": "sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-decode-uri-component": "^1.0.1"
+      }
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastify": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/fastify/-/fastify-5.8.4.tgz",
+      "integrity": "sha512-sa42J1xylbBAYUWALSBoyXKPDUvM3OoNOibIefA+Oha57FryXKKCZarA1iDntOCWp3O35voZLuDg2mdODXtPzQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/ajv-compiler": "^4.0.5",
+        "@fastify/error": "^4.0.0",
+        "@fastify/fast-json-stringify-compiler": "^5.0.0",
+        "@fastify/proxy-addr": "^5.0.0",
+        "abstract-logging": "^2.0.1",
+        "avvio": "^9.0.0",
+        "fast-json-stringify": "^6.0.0",
+        "find-my-way": "^9.0.0",
+        "light-my-request": "^6.0.0",
+        "pino": "^9.14.0 || ^10.1.0",
+        "process-warning": "^5.0.0",
+        "rfdc": "^1.3.1",
+        "secure-json-parse": "^4.0.0",
+        "semver": "^7.6.0",
+        "toad-cache": "^3.7.0"
+      }
+    },
+    "node_modules/fastify-plugin": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/fastify-plugin/-/fastify-plugin-5.1.0.tgz",
+      "integrity": "sha512-FAIDA8eovSt5qcDgcBvDuX/v0Cjz0ohGhENZ/wpc3y+oZCY2afZ9Baqql3g/lC+OHRnciQol4ww7tuthOb9idw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/find-my-way": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/find-my-way/-/find-my-way-9.5.0.tgz",
+      "integrity": "sha512-VW2RfnmscZO5KgBY5XVyKREMW5nMZcxDy+buTOsL+zIPnBlbKm+00sgzoQzq1EVh4aALZLfKdwv6atBGcjvjrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-querystring": "^1.0.0",
+        "safe-regex2": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.7",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.7.tgz",
+      "integrity": "sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/getopts": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/getopts/-/getopts-2.3.0.tgz",
+      "integrity": "sha512-5eDf9fuSXwxBL6q5HX+dhDj+dslFGWzU5thZ9kNKUkcPtaPdatmUFKwHFrLb/uf/WpA4BHET+AX3Scl56cAjpA==",
+      "license": "MIT"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http_ece": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http_ece/-/http_ece-1.2.0.tgz",
+      "integrity": "sha512-JrF8SSLVmcvc5NducxgyOrKXe3EsyHMgBFgSaIUGmArKe+rwr0uphRkRXvwiom3I+fpIfoItveHrfudL8/rxuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/interpret": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.3.0.tgz",
+      "integrity": "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/json-schema-ref-resolver": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-ref-resolver/-/json-schema-ref-resolver-3.0.0.tgz",
+      "integrity": "sha512-hOrZIVL5jyYFjzk7+y7n5JDzGlU8rfWDuYyHwGa2WA8/pcmMHezp2xsVwxrebD/Q9t8Nc5DboieySDpCp4WG4A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/knex": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/knex/-/knex-3.2.8.tgz",
+      "integrity": "sha512-ElXXxu9Nq+5hWYdBUddYIWIT5yKKs5KNCsmKGbJSHPyaMpAABp3xs4L55GgdQoAs6QQ7dv72ai3M4pxYQ8utEg==",
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "2.0.19",
+        "commander": "^10.0.0",
+        "debug": "4.3.4",
+        "escalade": "^3.1.1",
+        "esm": "^3.2.25",
+        "get-package-type": "^0.1.0",
+        "getopts": "2.3.0",
+        "interpret": "^2.2.0",
+        "lodash": "^4.17.21",
+        "pg-connection-string": "2.6.2",
+        "rechoir": "^0.8.0",
+        "resolve-from": "^5.0.0",
+        "tarn": "^3.0.2",
+        "tildify": "2.0.0"
+      },
+      "bin": {
+        "knex": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "pg-query-stream": "^4.14.0"
+      },
+      "peerDependenciesMeta": {
+        "better-sqlite3": {
+          "optional": true
+        },
+        "mysql": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "pg": {
+          "optional": true
+        },
+        "pg-native": {
+          "optional": true
+        },
+        "pg-query-stream": {
+          "optional": true
+        },
+        "sqlite3": {
+          "optional": true
+        },
+        "tedious": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/light-my-request": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-6.6.0.tgz",
+      "integrity": "sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "process-warning": "^4.0.0",
+        "set-cookie-parser": "^2.6.0"
+      }
+    },
+    "node_modules/light-my-request/node_modules/process-warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-4.0.1.tgz",
+      "integrity": "sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "license": "MIT"
+    },
+    "node_modules/node-forge": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.4.0.tgz",
+      "integrity": "sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==",
+      "license": "(BSD-3-Clause OR GPL-2.0)",
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/on-exit-leak-free": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
+      "integrity": "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.2.tgz",
+      "integrity": "sha512-ch6OwaeaPYcova4kKZ15sbJ2hKb/VP48ZD2gE7i1J+L4MspCtBMAx8nMgz7bksc7IojCIIWuEhHibSMFH8m8oA==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pg/node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
+    "node_modules/pino": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-10.3.1.tgz",
+      "integrity": "sha512-r34yH/GlQpKZbU1BvFFqOjhISRo1MNx1tWYsYvmj6KIRHSPMT2+yHOEb1SG6NMvRoHRF0a07kCOox/9yakl1vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@pinojs/redact": "^0.4.0",
+        "atomic-sleep": "^1.0.0",
+        "on-exit-leak-free": "^2.1.0",
+        "pino-abstract-transport": "^3.0.0",
+        "pino-std-serializers": "^7.0.0",
+        "process-warning": "^5.0.0",
+        "quick-format-unescaped": "^4.0.3",
+        "real-require": "^0.2.0",
+        "safe-stable-stringify": "^2.3.1",
+        "sonic-boom": "^4.0.1",
+        "thread-stream": "^4.0.0"
+      },
+      "bin": {
+        "pino": "bin.js"
+      }
+    },
+    "node_modules/pino-abstract-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-3.0.0.tgz",
+      "integrity": "sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.0.0"
+      }
+    },
+    "node_modules/pino-std-serializers": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-7.1.0.tgz",
+      "integrity": "sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==",
+      "license": "MIT"
+    },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/process-warning": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
+      "integrity": "sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/quick-format-unescaped": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
+      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==",
+      "license": "MIT"
+    },
+    "node_modules/real-require": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
+      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/rechoir": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+      "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+      "license": "MIT",
+      "dependencies": {
+        "resolve": "^1.20.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/ret": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.5.0.tgz",
+      "integrity": "sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-regex2": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex2/-/safe-regex2-5.1.0.tgz",
+      "integrity": "sha512-pNHAuBW7TrcleFHsxBr5QMi/Iyp0ENjUKz7GCcX1UO7cMh+NmVK6HxQckNL1tJp1XAJVjG6B8OKIPqodqj9rtw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "ret": "~0.5.0"
+      },
+      "bin": {
+        "safe-regex2": "bin/safe-regex2.js"
+      }
+    },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/secure-json-parse": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-4.1.0.tgz",
+      "integrity": "sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/sonic-boom": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.1.tgz",
+      "integrity": "sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "atomic-sleep": "^1.0.0"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tarn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
+      "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/thread-stream": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-4.0.0.tgz",
+      "integrity": "sha512-4iMVL6HAINXWf1ZKZjIPcz5wYaOdPhtO8ATvZ+Xqp3BTdaqtAwQkNmKORqcIo5YkQqGXq5cwfswDwMqqQNrpJA==",
+      "license": "MIT",
+      "dependencies": {
+        "real-require": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/tildify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tildify/-/tildify-2.0.0.tgz",
+      "integrity": "sha512-Cc+OraorugtXNfs50hU9KS369rFXCfgGLpfCfvlc+Ud5u6VWmUQsOAa9HbTvheQdYnrdJqqv1e5oIqXppMYnSw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/toad-cache": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/toad-cache/-/toad-cache-3.7.0.tgz",
+      "integrity": "sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/tsx": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.27.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/verror": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
+      "integrity": "sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/web-push": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/web-push/-/web-push-3.6.7.tgz",
+      "integrity": "sha512-OpiIUe8cuGjrj3mMBFWY+e4MMIkW3SVT+7vEIjvD9kejGUypv8GPDf84JdPWskK8zMRIJ6xYGm+Kxr8YkPyA0A==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "asn1.js": "^5.3.0",
+        "http_ece": "1.2.0",
+        "https-proxy-agent": "^7.0.0",
+        "jws": "^4.0.0",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "web-push": "src/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
diff --git a/etc/servers/work-server/package.json b/etc/servers/work-server/package.json
new file mode 100644
index 0000000..9225408
--- /dev/null
+++ b/etc/servers/work-server/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "work-server",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npm run build && npm run start",
+    "build": "tsc -p tsconfig.json && node ./scripts/write-build-info.mjs",
+    "start": "node dist/server.js",
+    "backfill:chat-request-links": "node --import tsx ./scripts/backfill-chat-request-links.ts",
+    "backfill:chat-resource-urls": "node --import tsx ./scripts/backfill-chat-resource-urls.ts",
+    "test": "node --import tsx --test src/**/*.test.ts"
+  },
+  "dependencies": {
+    "@fastify/cors": "^11.1.0",
+    "@parse/node-apn": "^8.0.0",
+    "dotenv": "^17.2.2",
+    "fastify": "^5.6.0",
+    "knex": "^3.1.0",
+    "pg": "^8.16.3",
+    "web-push": "^3.6.7",
+    "ws": "^8.18.3",
+    "zod": "^4.1.5"
+  },
+  "devDependencies": {
+    "@types/node": "^24.5.2",
+    "@types/ws": "^8.18.1",
+    "tsx": "^4.20.5",
+    "typescript": "^5.9.2"
+  }
+}
diff --git a/etc/servers/work-server/scripts/backfill-chat-request-links.ts b/etc/servers/work-server/scripts/backfill-chat-request-links.ts
new file mode 100644
index 0000000..77f0de5
--- /dev/null
+++ b/etc/servers/work-server/scripts/backfill-chat-request-links.ts
@@ -0,0 +1,14 @@
+import { db } from '../src/db/client.js';
+import { repairChatConversationRequestLinks } from '../src/services/chat-room-service.js';
+
+const requestedSessionId = process.argv[2]?.trim() || null;
+
+try {
+  const result = await repairChatConversationRequestLinks(requestedSessionId);
+  console.log(JSON.stringify(result, null, 2));
+} catch (error) {
+  console.error(error);
+  process.exitCode = 1;
+} finally {
+  await db.destroy();
+}
diff --git a/etc/servers/work-server/scripts/backfill-chat-resource-urls.ts b/etc/servers/work-server/scripts/backfill-chat-resource-urls.ts
new file mode 100644
index 0000000..9ce0645
--- /dev/null
+++ b/etc/servers/work-server/scripts/backfill-chat-resource-urls.ts
@@ -0,0 +1,76 @@
+import { db } from '../src/db/client.js';
+import {
+  CHAT_CONVERSATION_MESSAGE_TABLE,
+  CHAT_CONVERSATION_REQUEST_TABLE,
+} from '../src/services/chat-room-service.js';
+
+const LEGACY_CHAT_RESOURCE_PREFIX = '/.codex_chat/';
+const API_CHAT_RESOURCE_PREFIX = '/api/chat/resources/.codex_chat/';
+const requestedSessionId = process.argv[2]?.trim() || null;
+
+function rewriteLegacyChatResourceUrls(text: string) {
+  const normalized = String(text ?? '').replaceAll(LEGACY_CHAT_RESOURCE_PREFIX, API_CHAT_RESOURCE_PREFIX);
+
+  return normalized.replace(
+    /\((?:\/[^)\s]*?)?(\/api\/chat\/resources\/\.codex_chat\/[^)\s]*?)(?:\/api\/chat\/resources\/\.codex_chat\/[^)\s]*)?\)/g,
+    (_match, resourcePath) => `(${resourcePath})`,
+  );
+}
+
+async function backfillTable(
+  tableName: string,
+  textColumn: string,
+) {
+  const rows = await db(tableName)
+    .modify((query) => {
+      if (requestedSessionId) {
+        query.where('session_id', requestedSessionId);
+      }
+    })
+    .where(textColumn, 'like', `%${LEGACY_CHAT_RESOURCE_PREFIX}%`)
+    .select('id', 'session_id', textColumn);
+
+  let updatedCount = 0;
+  const touchedSessionIds = new Set<string>();
+
+  for (const row of rows) {
+    const currentText = String(row[textColumn] ?? '');
+    const nextText = rewriteLegacyChatResourceUrls(currentText);
+
+    if (nextText === currentText) {
+      continue;
+    }
+
+    await db(tableName)
+      .where('id', row.id)
+      .update({
+        [textColumn]: nextText,
+      });
+
+    updatedCount += 1;
+    touchedSessionIds.add(String(row.session_id ?? ''));
+  }
+
+  return {
+    tableName,
+    textColumn,
+    updatedCount,
+    touchedSessionIds: Array.from(touchedSessionIds).filter(Boolean),
+  };
+}
+
+try {
+  const messageResult = await backfillTable(CHAT_CONVERSATION_MESSAGE_TABLE, 'text');
+  const requestResult = await backfillTable(CHAT_CONVERSATION_REQUEST_TABLE, 'response_text');
+
+  console.log(JSON.stringify({
+    requestedSessionId,
+    updatedRowCount: messageResult.updatedCount + requestResult.updatedCount,
+    tables: [messageResult, requestResult],
+  }, null, 2));
+} catch (error) {
+  console.error(error);
+  process.exitCode = 1;
+} finally {
+  await db.destroy();
+}
diff --git a/etc/servers/work-server/scripts/write-build-info.mjs b/etc/servers/work-server/scripts/write-build-info.mjs
new file mode 100755
index 0000000..8926af1
--- /dev/null
+++ b/etc/servers/work-server/scripts/write-build-info.mjs
@@ -0,0 +1,21 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const projectRoot = process.cwd();
+const packageJsonPath = path.join(projectRoot, 'package.json');
+const distDirectoryPath = path.join(projectRoot, 'dist');
+const buildInfoPath = path.join(distDirectoryPath, 'build-info.json');
+
+const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+const builtAt = new Date().toISOString();
+
+const buildInfo = {
+  version: typeof packageJson.version === 'string' ? packageJson.version : '0.0.0',
+  buildId: `${typeof packageJson.version === 'string' ? packageJson.version : '0.0.0'}@${builtAt}`,
+  builtAt,
+};
+
+await fs.mkdir(distDirectoryPath, { recursive: true });
+await fs.writeFile(buildInfoPath, JSON.stringify(buildInfo, null, 2));
+
+console.log(`work-server build info written to ${buildInfoPath}`);
diff --git a/etc/servers/work-server/src/app.ts b/etc/servers/work-server/src/app.ts
new file mode 100755
index 0000000..ae04a40
--- /dev/null
+++ b/etc/servers/work-server/src/app.ts
@@ -0,0 +1,104 @@
+import cors from '@fastify/cors';
+import Fastify from 'fastify';
+import { registerJsonBodyParser } from './json-body.js';
+import { registerBoardRoutes } from './routes/board.js';
+import { registerCrudRoutes } from './routes/crud.js';
+import { registerDdlRoutes } from './routes/ddl.js';
+import { registerErrorLogRoutes } from './routes/error-log.js';
+import { registerHealthRoutes } from './routes/health.js';
+import { registerAppConfigRoutes } from './routes/app-config.js';
+import { registerChatRoutes } from './routes/chat.js';
+import { registerNotificationRoutes } from './routes/notification.js';
+import { registerPlanRoutes } from './routes/plan.js';
+import { registerServerCommandRoutes } from './routes/server-command.js';
+import { registerSchemaRoutes } from './routes/schema.js';
+import { registerVisitorHistoryRoutes } from './routes/visitor-history.js';
+import { shouldPersistNotFoundErrorLog } from './not-found.js';
+import { createErrorLog } from './services/error-log-service.js';
+
+export function createApp() {
+  const app = Fastify({
+    logger: true,
+  });
+
+  app.register(cors, {
+    origin: true,
+  });
+
+  registerJsonBodyParser(app);
+  app.register(registerBoardRoutes);
+  app.register(registerHealthRoutes);
+  app.register(registerAppConfigRoutes);
+  app.register(registerChatRoutes);
+  app.register(registerSchemaRoutes);
+  app.register(registerDdlRoutes);
+  app.register(registerCrudRoutes);
+  app.register(registerErrorLogRoutes);
+  app.register(registerNotificationRoutes);
+  app.register(registerPlanRoutes);
+  app.register(registerServerCommandRoutes);
+  app.register(registerVisitorHistoryRoutes);
+
+  app.setNotFoundHandler(async (request, reply) => {
+    if (shouldPersistNotFoundErrorLog(request.url)) {
+      try {
+        await createErrorLog({
+          source: 'server',
+          sourceLabel: '워크서버 API',
+          errorType: 'NotFound',
+          errorMessage: `Route not found: ${request.method} ${request.url}`,
+          statusCode: 404,
+          requestMethod: request.method,
+          requestPath: request.url,
+          context: {
+            route: request.routeOptions.url,
+          },
+        });
+      } catch (loggingError) {
+        app.log.error(loggingError, 'Failed to persist 404 error log');
+      }
+    }
+
+    reply.status(404);
+    return {
+      message: '요청한 경로를 찾을 수 없습니다.',
+    };
+  });
+
+  app.setErrorHandler(async (error, request, reply) => {
+    const handledError = error instanceof Error ? error : new Error(String(error));
+    const errorWithMeta = handledError as Error & { statusCode?: number; code?: string };
+    const statusCode = typeof errorWithMeta.statusCode === 'number'
+      ? Number(errorWithMeta.statusCode)
+      : 500;
+
+    try {
+      await createErrorLog({
+        source: 'server',
+        sourceLabel: '워크서버 API',
+        errorType: errorWithMeta.code ?? handledError.name ?? 'ServerError',
+        errorName: handledError.name,
+        errorMessage: handledError.message || '서버 오류가 발생했습니다.',
+        stackTrace: handledError.stack,
+        statusCode,
+        requestMethod: request.method,
+        requestPath: request.url,
+        context: {
+          route: request.routeOptions.url,
+          params: (request.params as Record<string, unknown> | undefined) ?? null,
+          query: (request.query as Record<string, unknown> | undefined) ?? null,
+        },
+      });
+    } catch (loggingError) {
+      app.log.error(loggingError, 'Failed to persist server error log');
+    }
+
+    app.log.error(handledError);
+    reply.status(statusCode >= 400 ? statusCode : 500);
+    return {
+      message: handledError.message || '요청 처리에 실패했습니다.',
+    };
+  });
+
+  return app;
+}
diff --git a/etc/servers/work-server/src/config/env.ts b/etc/servers/work-server/src/config/env.ts
new file mode 100644
index 0000000..c9f686e
--- /dev/null
+++ b/etc/servers/work-server/src/config/env.ts
@@ -0,0 +1,103 @@
+import path from 'node:path';
+import dotenv from 'dotenv';
+import { z } from 'zod';
+
+dotenv.config({ override: true, quiet: true });
+
+const envSchema = z.object({
+  PORT: z.coerce.number().default(3100),
+  APP_TIME_ZONE: z.string().default('Asia/Seoul'),
+  DB_TIME_ZONE: z.string().default('Asia/Seoul'),
+  DB_CLIENT: z.string().default('pg'),
+  DB_HOST: z.string().default('localhost'),
+  DB_PORT: z.coerce.number().default(5432),
+  DB_NAME: z.string().default('work_db'),
+  DB_USER: z.string().default('work_user'),
+  DB_PASSWORD: z.string().default('change-me'),
+  DB_SSL: z
+    .string()
+    .default('false')
+    .transform((value) => value === 'true'),
+  PLAN_WORKER_ENABLED: z
+    .string()
+    .default('true')
+    .transform((value) => value === 'true'),
+  PLAN_WORKER_INTERVAL_MS: z.coerce.number().default(10000),
+  PLAN_WORKER_ID: z.string().optional(),
+  PLAN_GIT_REPO_PATH: z.string().default('/workspace/repo'),
+  PLAN_MAIN_PROJECT_REPO_PATH: z.string().optional(),
+  PLAN_RELEASE_BRANCH: z.string().default('release'),
+  PLAN_MAIN_BRANCH: z.string().default('main'),
+  PLAN_GIT_USER_NAME: z.string().default('how2ice'),
+  PLAN_GIT_USER_EMAIL: z.string().default('how2ice@naver.com'),
+  PLAN_CODEX_RUNNER_PATH: z.string().default('/workspace/repo-scripts/run-plan-codex-once.mjs'),
+  PLAN_CODEX_ENABLED: z
+    .string()
+    .default('true')
+    .transform((value) => value === 'true'),
+  PLAN_LOCAL_MAIN_MODE: z
+    .string()
+    .default('true')
+    .transform((value) => value === 'true'),
+  PLAN_CODEX_BIN: z.string().default('codex'),
+  PLAN_CODEX_TEMPLATE_HOME: z.string().optional(),
+  PLAN_PREVIEW_BASE_URL: z.string().optional(),
+  PLAN_PREVIEW_URL_TEMPLATE: z.string().optional(),
+  IOS_NOTIFICATION_ENABLED: z
+    .string()
+    .default('false')
+    .transform((value) => value === 'true'),
+  WEB_PUSH_ENABLED: z
+    .string()
+    .default('false')
+    .transform((value) => value === 'true'),
+  WEB_PUSH_VAPID_PUBLIC_KEY: z.string().optional(),
+  WEB_PUSH_VAPID_PRIVATE_KEY: z.string().optional(),
+  WEB_PUSH_SUBJECT: z.string().default('mailto:how2ice@naver.com'),
+  APNS_KEY_ID: z.string().optional(),
+  APNS_TEAM_ID: z.string().optional(),
+  APNS_BUNDLE_ID: z.string().optional(),
+  APNS_PRIVATE_KEY: z.string().optional(),
+  APNS_PRIVATE_KEY_PATH: z.string().optional(),
+  APNS_PRODUCTION: z
+    .string()
+    .default('false')
+    .transform((value) => value === 'true'),
+  SERVER_COMMAND_ACCESS_TOKEN: z.string().default('usr_7f3a9c2d8e1b4a6f'),
+  SERVER_COMMAND_API_BASE_URL: z.string().optional(),
+  SERVER_COMMAND_API_ACCESS_TOKEN: z.string().optional(),
+  SERVER_COMMAND_API_RESTART_PATH_TEMPLATE: z.string().default('/api/server-commands/{key}/actions/restart'),
+  SERVER_COMMAND_PROJECT_ROOT: z.string().default(path.resolve(process.cwd(), '../../..')),
+  SERVER_COMMAND_MAIN_PROJECT_ROOT: z.string().default('/workspace/main-project'),
+  SERVER_COMMAND_TEST_URL: z.string().default('https://test.sm-home.cloud/'),
+  SERVER_COMMAND_REL_URL: z.string().default('https://rel.sm-home.cloud/'),
+  SERVER_COMMAND_WORK_SERVER_URL: z.string().default('http://127.0.0.1:3100/health'),
+  SERVER_COMMAND_RUNNER_URL: z.string().default('http://host.docker.internal:3211/health'),
+  SERVER_COMMAND_RUNNER_ACCESS_TOKEN: z.string().default('local-server-command-runner'),
+  SERVER_COMMAND_RUNNER_HEARTBEAT_FILE: z.string().optional(),
+  SERVER_COMMAND_TEST_SERVICE: z.string().default('app'),
+  SERVER_COMMAND_REL_SERVICE: z.string().default('release-app'),
+  SERVER_COMMAND_WORK_SERVER_SERVICE: z.string().default('work-server'),
+});
+
+function parseEnv() {
+  dotenv.config({ override: true, quiet: true });
+  const parsedEnv = envSchema.parse(process.env);
+
+  return {
+    ...parsedEnv,
+    PLAN_MAIN_PROJECT_REPO_PATH: parsedEnv.PLAN_MAIN_PROJECT_REPO_PATH ?? parsedEnv.PLAN_GIT_REPO_PATH,
+  };
+}
+
+export function getEnv() {
+  const parsedEnv = parseEnv();
+
+  if (!process.env.TZ?.trim()) {
+    process.env.TZ = parsedEnv.APP_TIME_ZONE;
+  }
+
+  return parsedEnv;
+}
+
+export const env = getEnv();
diff --git a/etc/servers/work-server/src/db/client.ts b/etc/servers/work-server/src/db/client.ts
new file mode 100755
index 0000000..9b00be4
--- /dev/null
+++ b/etc/servers/work-server/src/db/client.ts
@@ -0,0 +1,37 @@
+import knex from 'knex';
+import { env } from '../config/env.js';
+
+export const db = knex({
+  client: env.DB_CLIENT,
+  connection: {
+    host: env.DB_HOST,
+    port: env.DB_PORT,
+    database: env.DB_NAME,
+    user: env.DB_USER,
+    password: env.DB_PASSWORD,
+    ssl: env.DB_SSL ? { rejectUnauthorized: false } : false,
+  },
+  pool: {
+    min: 0,
+    max: 10,
+    afterCreate(connection: any, done: (error: Error | null, connection: any) => void) {
+      const clientName = String(env.DB_CLIENT ?? '').toLowerCase();
+
+      if (clientName === 'pg' || clientName === 'postgres' || clientName === 'postgresql') {
+        connection.query(`SET TIME ZONE '${env.DB_TIME_ZONE}'`, (error: Error | null) => {
+          done(error, connection);
+        });
+        return;
+      }
+
+      if (clientName === 'mysql' || clientName === 'mysql2') {
+        connection.query('SET time_zone = "+09:00"', (error: Error | null) => {
+          done(error, connection);
+        });
+        return;
+      }
+
+      done(null, connection);
+    },
+  },
+});
diff --git a/etc/servers/work-server/src/json-body.ts b/etc/servers/work-server/src/json-body.ts
new file mode 100755
index 0000000..bb833e0
--- /dev/null
+++ b/etc/servers/work-server/src/json-body.ts
@@ -0,0 +1,25 @@
+import type { FastifyInstance } from 'fastify';
+
+export function registerJsonBodyParser(app: FastifyInstance) {
+  app.addContentTypeParser('application/json', { parseAs: 'string' }, (request, body, done) => {
+    const rawBody = typeof body === 'string' ? body : '';
+    const normalizedBody = rawBody.trim();
+
+    if (!normalizedBody) {
+      done(null, {});
+      return;
+    }
+
+    try {
+      done(null, JSON.parse(normalizedBody));
+    } catch {
+      const error = new Error('Body is not valid JSON.') as Error & {
+        statusCode?: number;
+        code?: string;
+      };
+      error.statusCode = 400;
+      error.code = 'FST_ERR_CTP_INVALID_JSON_BODY';
+      done(error, undefined);
+    }
+  });
+}
diff --git a/etc/servers/work-server/src/lib/identifier.ts b/etc/servers/work-server/src/lib/identifier.ts
new file mode 100755
index 0000000..cf12f42
--- /dev/null
+++ b/etc/servers/work-server/src/lib/identifier.ts
@@ -0,0 +1,9 @@
+const IDENTIFIER_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+
+export function assertIdentifier(value: string, label = 'identifier') {
+  if (!IDENTIFIER_PATTERN.test(value)) {
+    throw new Error(`Invalid ${label}: ${value}`);
+  }
+
+  return value;
+}
diff --git a/etc/servers/work-server/src/not-found.test.ts b/etc/servers/work-server/src/not-found.test.ts
new file mode 100755
index 0000000..1e67c1f
--- /dev/null
+++ b/etc/servers/work-server/src/not-found.test.ts
@@ -0,0 +1,22 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { shouldPersistNotFoundErrorLog } from './not-found.js';
+
+test('shouldPersistNotFoundErrorLog only keeps work-server API paths', () => {
+  assert.equal(shouldPersistNotFoundErrorLog('/api'), true);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/notifications/preferences/automation'), true);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/notifications/preferences/automation?targetKind=client&targetId=abc'), true);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/1234567890abcdef1234567890abcdef'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/docs'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/docs/index.html'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/env'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/config'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/debug'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/debug/pprof'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/.env'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/api/.git/config'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/apis/components'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/apis/widgets?widgetId=dashboard-report-card'), false);
+  assert.equal(shouldPersistNotFoundErrorLog('/plans/release-review'), false);
+});
diff --git a/etc/servers/work-server/src/not-found.ts b/etc/servers/work-server/src/not-found.ts
new file mode 100755
index 0000000..9ba2a0a
--- /dev/null
+++ b/etc/servers/work-server/src/not-found.ts
@@ -0,0 +1,61 @@
+function normalizeRequestPath(requestUrl: string) {
+  try {
+    return new URL(requestUrl, 'http://localhost').pathname;
+  } catch {
+    return requestUrl.split('?')[0] ?? requestUrl;
+  }
+}
+
+function hasHiddenPathSegment(pathname: string) {
+  return pathname
+    .split('/')
+    .some((segment, index) => index > 1 && segment.startsWith('.'));
+}
+
+function isIgnoredScannerProbePath(pathname: string) {
+  return pathname === '/api/docs' ||
+    pathname.startsWith('/api/docs/') ||
+    pathname === '/api/env' ||
+    pathname === '/api/config' ||
+    pathname === '/api/debug' ||
+    pathname.startsWith('/api/debug/');
+}
+
+function isOpaqueScannerToken(segment: string) {
+  if (segment.length < 24 || !/^[a-z0-9_-]+$/i.test(segment)) {
+    return false;
+  }
+
+  if (/^(.)\1+$/.test(segment)) {
+    return true;
+  }
+
+  return !/[/-]/.test(segment);
+}
+
+function isIgnoredOpaqueApiProbePath(pathname: string) {
+  const segments = pathname.split('/').filter(Boolean);
+
+  if (segments.length !== 2 || segments[0] !== 'api') {
+    return false;
+  }
+
+  return isOpaqueScannerToken(segments[1] ?? '');
+}
+
+export function shouldPersistNotFoundErrorLog(requestUrl: string) {
+  const pathname = normalizeRequestPath(String(requestUrl ?? ''));
+  if (!(pathname === '/api' || pathname.startsWith('/api/'))) {
+    return false;
+  }
+
+  if (hasHiddenPathSegment(pathname)) {
+    return false;
+  }
+
+  if (isIgnoredScannerProbePath(pathname)) {
+    return false;
+  }
+
+  return !isIgnoredOpaqueApiProbePath(pathname);
+}
diff --git a/etc/servers/work-server/src/routes/app-config.ts b/etc/servers/work-server/src/routes/app-config.ts
new file mode 100755
index 0000000..245406d
--- /dev/null
+++ b/etc/servers/work-server/src/routes/app-config.ts
@@ -0,0 +1,48 @@
+import type { FastifyInstance } from 'fastify';
+import { getAppConfig, upsertAppConfig } from '../services/app-config-service.js';
+
+export async function registerAppConfigRoutes(app: FastifyInstance) {
+  app.get('/api/app-config', async () => {
+    const config = await getAppConfig();
+
+    return {
+      ok: true,
+      config: config ?? {},
+    };
+  });
+
+  app.put('/api/app-config', async (request, reply) => {
+    try {
+      let payload: unknown = request.body ?? {};
+
+      if (typeof payload === 'string') {
+        try {
+          payload = JSON.parse(payload);
+        } catch {
+          payload = {};
+        }
+      }
+
+      if (!payload || typeof payload !== 'object' || !('config' in payload)) {
+        throw new Error('저장할 설정 값이 비어 있습니다.');
+      }
+
+      const config = (payload as { config: unknown }).config;
+
+      if (!config || typeof config !== 'object') {
+        throw new Error('설정 값 형식이 올바르지 않습니다.');
+      }
+
+      const savedConfig = await upsertAppConfig(config as Record<string, unknown>);
+
+      return {
+        ok: true,
+        config: savedConfig,
+      };
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : '앱 설정 저장에 실패했습니다.',
+      });
+    }
+  });
+}
diff --git a/etc/servers/work-server/src/routes/board.ts b/etc/servers/work-server/src/routes/board.ts
new file mode 100755
index 0000000..d21e23e
--- /dev/null
+++ b/etc/servers/work-server/src/routes/board.ts
@@ -0,0 +1,172 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import { hasErrorLogViewAccessToken } from '../services/error-log-service.js';
+import {
+  BoardPostAutomationLockedError,
+  boardPostPayloadSchema,
+  createBoardPost,
+  deleteBoardPost,
+  ensureBoardPostsTable,
+  getBoardPost,
+  listBoardPosts,
+  receiveBoardPostAutomation,
+  updateBoardPost,
+} from '../services/board-service.js';
+
+export async function registerBoardRoutes(app: FastifyInstance) {
+  function isLoopbackAddress(value: string | null | undefined) {
+    const normalizedValue = String(value ?? '').trim();
+    return normalizedValue === '127.0.0.1' || normalizedValue === '::1' || normalizedValue === '::ffff:127.0.0.1';
+  }
+
+  function hasBoardAutomationAccess(request: { headers: Record<string, unknown>; ip?: string; socket?: { remoteAddress?: string | null }; raw?: { socket?: { remoteAddress?: string | null } } }) {
+    if (hasErrorLogViewAccessToken(request.headers['x-access-token'] as string | string[] | undefined)) {
+      return true;
+    }
+
+    return isLoopbackAddress(request.ip) || isLoopbackAddress(request.raw?.socket?.remoteAddress) || isLoopbackAddress(request.socket?.remoteAddress);
+  }
+
+  function requireBoardAutomationAccess(
+    request: { headers: Record<string, unknown>; ip?: string; socket?: { remoteAddress?: string | null }; raw?: { socket?: { remoteAddress?: string | null } } },
+    reply: Parameters<FastifyInstance['get']>[1] extends (request: any, reply: infer T) => any ? T : any,
+  ) {
+    if (hasBoardAutomationAccess(request)) {
+      return true;
+    }
+
+    void reply.code(403).send({
+      message: '권한 토큰이 등록된 사용자만 자동화 접수를 할 수 있습니다.',
+    });
+    return false;
+  }
+
+  async function respondWithBoardSetup() {
+    await ensureBoardPostsTable();
+
+    return {
+      ok: true,
+      table: 'board_posts',
+    };
+  }
+
+  async function respondWithBoardPosts() {
+    const items = await listBoardPosts();
+
+    return {
+      ok: true,
+      items,
+    };
+  }
+
+  app.get('/api/board/setup', async () => respondWithBoardSetup());
+  app.post('/api/board/setup', async () => {
+    return respondWithBoardSetup();
+  });
+
+  app.get('/api/board/posts', async () => respondWithBoardPosts());
+  app.get('/api/board/items', async () => respondWithBoardPosts());
+
+  app.get('/api/board/posts/:id', async (request, reply) => {
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await getBoardPost(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '게시글을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.post('/api/board/posts', async (request) => {
+    const item = await createBoardPost(boardPostPayloadSchema.parse(request.body ?? {}));
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.post('/api/board/posts/:id/actions/automation-receive', async (request, reply) => {
+    if (!requireBoardAutomationAccess(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const result = await receiveBoardPostAutomation(id);
+
+    if (!result) {
+      return reply.code(404).send({
+        message: '자동화 접수할 게시글을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item: result.item,
+      planItemId: result.planItemId,
+      alreadyReceived: result.alreadyReceived,
+    };
+  });
+
+  app.patch('/api/board/posts/:id', async (request, reply) => {
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    let item;
+
+    try {
+      item = await updateBoardPost(id, boardPostPayloadSchema.parse(request.body ?? {}));
+    } catch (error) {
+      if (error instanceof BoardPostAutomationLockedError) {
+        return reply.code(409).send({
+          message: error.message,
+        });
+      }
+
+      throw error;
+    }
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '수정할 게시글을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.delete('/api/board/posts/:id', async (request, reply) => {
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    let deleted;
+
+    try {
+      deleted = await deleteBoardPost(id);
+    } catch (error) {
+      if (error instanceof BoardPostAutomationLockedError) {
+        return reply.code(409).send({
+          message: error.message,
+        });
+      }
+
+      throw error;
+    }
+
+    if (!deleted) {
+      return reply.code(404).send({
+        message: '삭제할 게시글을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      id,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/chat.ts b/etc/servers/work-server/src/routes/chat.ts
new file mode 100755
index 0000000..51bdf3f
--- /dev/null
+++ b/etc/servers/work-server/src/routes/chat.ts
@@ -0,0 +1,500 @@
+import { randomUUID } from 'node:crypto';
+import { createReadStream } from 'node:fs';
+import { access, mkdir, stat, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { z } from 'zod';
+import { env } from '../config/env.js';
+import { hasErrorLogViewAccessToken } from '../services/error-log-service.js';
+import { getChatRuntimeController } from '../services/chat-service.js';
+import {
+  createChatConversation,
+  deleteUnansweredChatConversationRequest,
+  deleteChatConversation,
+  ensureChatConversationTables,
+  getChatConversation,
+  listChatConversationActivityLogs,
+  listChatConversationMessages,
+  listChatConversationRequests,
+  listChatConversations,
+  markChatConversationResponsesRead,
+  updateChatConversationContext,
+} from '../services/chat-room-service.js';
+import { chatRuntimeService } from '../services/chat-runtime-service.js';
+
+const CHAT_ATTACHMENT_ROUTE_BODY_LIMIT = 20 * 1024 * 1024;
+const CHAT_ATTACHMENT_FILE_SIZE_LIMIT = 10 * 1024 * 1024;
+const CHAT_PUBLIC_ROUTE_PREFIX = '/.codex_chat/';
+const CHAT_API_RESOURCE_ROUTE_PREFIX = '/api/chat/resources';
+
+function resolveStaticContentType(filePath: string) {
+  const extension = path.extname(filePath).toLowerCase();
+
+  switch (extension) {
+    case '.ts':
+    case '.tsx':
+    case '.js':
+    case '.jsx':
+    case '.mjs':
+    case '.cjs':
+    case '.json':
+    case '.css':
+    case '.html':
+    case '.md':
+    case '.txt':
+    case '.diff':
+      return 'text/plain; charset=utf-8';
+    case '.svg':
+      return 'image/svg+xml';
+    case '.png':
+      return 'image/png';
+    case '.jpg':
+    case '.jpeg':
+      return 'image/jpeg';
+    case '.gif':
+      return 'image/gif';
+    case '.webp':
+      return 'image/webp';
+    case '.ico':
+      return 'image/x-icon';
+    case '.pdf':
+      return 'application/pdf';
+    default:
+      return 'application/octet-stream';
+  }
+}
+
+function buildChatResourcePublicUrl(relativePath: string) {
+  const normalizedRelativePath = relativePath.replace(/^public\//, '').replace(/^\/+/, '');
+  return `${CHAT_API_RESOURCE_ROUTE_PREFIX}/${normalizedRelativePath
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join('/')}`;
+}
+
+function normalizeChatResourceWildcard(wildcard: string) {
+  const cleaned = wildcard.trim().replace(/^\/+/, '').replace(/^public\//, '');
+
+  if (!cleaned) {
+    return '';
+  }
+
+  if (cleaned.startsWith('.codex_chat/')) {
+    return cleaned;
+  }
+
+  return path.posix.join('.codex_chat', cleaned);
+}
+
+async function serveChatPublicResource(
+  repoPath: string,
+  wildcard: string,
+  reply: FastifyReply,
+) {
+  const requestedRelativePath = normalizeChatResourceWildcard(wildcard);
+
+  if (!requestedRelativePath) {
+    return reply.code(404).send({
+      message: '채팅 리소스를 찾을 수 없습니다.',
+    });
+  }
+
+  const publicRoot = path.join(repoPath, 'public');
+  const absolutePath = path.resolve(publicRoot, requestedRelativePath);
+
+  if (!absolutePath.startsWith(`${publicRoot}${path.sep}`)) {
+    return reply.code(403).send({
+      message: '허용되지 않은 경로입니다.',
+    });
+  }
+
+  try {
+    await access(absolutePath);
+    const fileStat = await stat(absolutePath);
+
+    if (!fileStat.isFile()) {
+      return reply.code(404).send({
+        message: '채팅 리소스를 찾을 수 없습니다.',
+      });
+    }
+  } catch {
+    return reply.code(404).send({
+      message: '채팅 리소스를 찾을 수 없습니다.',
+    });
+  }
+
+  reply.header('Cache-Control', 'no-store');
+  reply.type(resolveStaticContentType(absolutePath));
+  return reply.send(createReadStream(absolutePath));
+}
+
+function sanitizeChatAttachmentFileName(fileName: string) {
+  const normalized = fileName.trim().replace(/[\\/:"*?<>|]+/g, '-').replace(/\s+/g, ' ');
+  const compact = normalized || 'attachment';
+  return compact.length > 120 ? compact.slice(-120) : compact;
+}
+
+function resolveChatAttachmentRepoPath() {
+  return path.resolve(env.PLAN_MAIN_PROJECT_REPO_PATH ?? env.PLAN_GIT_REPO_PATH);
+}
+
+function getClientIdHeader(request: { headers: Record<string, unknown> }) {
+  const raw = request.headers['x-client-id'];
+  return Array.isArray(raw) ? String(raw[0] ?? '').trim() : String(raw ?? '').trim();
+}
+
+function canViewAllConversations(request: { headers: Record<string, unknown> }) {
+  return hasErrorLogViewAccessToken(request.headers['x-access-token'] as string | string[] | undefined);
+}
+
+export async function registerChatRoutes(app: FastifyInstance) {
+  app.get(`${CHAT_PUBLIC_ROUTE_PREFIX}*`, async (request, reply) => {
+    const wildcard = String((request.params as { '*': string | undefined })['*'] ?? '').trim();
+    return serveChatPublicResource(resolveChatAttachmentRepoPath(), wildcard, reply);
+  });
+
+  app.get(`${CHAT_API_RESOURCE_ROUTE_PREFIX}/*`, async (request, reply) => {
+    const wildcard = String((request.params as { '*': string | undefined })['*'] ?? '').trim();
+    return serveChatPublicResource(resolveChatAttachmentRepoPath(), wildcard, reply);
+  });
+
+  app.get('/api/chat/setup', async () => {
+    await ensureChatConversationTables();
+
+    return {
+      ok: true,
+      tables: ['chat_conversations', 'chat_conversation_messages', 'chat_conversation_requests'],
+    };
+  });
+
+  app.get('/api/chat/conversations', async (request) => {
+    const query = z.object({
+      limit: z.coerce.number().int().min(1).max(200).optional(),
+    }).parse(request.query ?? {});
+
+    const viewerClientId = getClientIdHeader(request);
+    const clientId = canViewAllConversations(request) ? null : viewerClientId;
+    const items = await listChatConversations(clientId, query.limit ?? 50, viewerClientId || null);
+
+    return {
+      ok: true,
+      items,
+    };
+  });
+
+  app.get('/api/chat/runtime', async () => {
+    return {
+      ok: true,
+      item: chatRuntimeService.getSnapshot(),
+    };
+  });
+
+  app.post('/api/chat/attachments', { bodyLimit: CHAT_ATTACHMENT_ROUTE_BODY_LIMIT }, async (request, reply) => {
+    const payload = z.object({
+      sessionId: z.string().trim().min(1).max(120).regex(/^[A-Za-z0-9._:-]+$/),
+      fileName: z.string().trim().min(1).max(255),
+      mimeType: z.string().trim().max(200).optional(),
+      contentBase64: z.string().trim().min(1).max(CHAT_ATTACHMENT_ROUTE_BODY_LIMIT * 2),
+    }).parse(request.body ?? {});
+
+    const buffer = Buffer.from(payload.contentBase64, 'base64');
+
+    if (buffer.byteLength === 0) {
+      return reply.code(400).send({
+        message: '업로드할 파일 내용을 찾지 못했습니다.',
+      });
+    }
+
+    if (buffer.byteLength > CHAT_ATTACHMENT_FILE_SIZE_LIMIT) {
+      return reply.code(413).send({
+        message: '첨부 파일은 10MB 이하만 업로드할 수 있습니다.',
+      });
+    }
+
+    const safeFileName = sanitizeChatAttachmentFileName(payload.fileName);
+    const fileToken = `${Date.now().toString(36)}-${randomUUID().slice(0, 8)}`;
+    const relativePath = path.posix.join(
+      'public',
+      '.codex_chat',
+      payload.sessionId,
+      'resource',
+      'uploads',
+      `${fileToken}-${safeFileName}`,
+    );
+    const absolutePath = path.join(resolveChatAttachmentRepoPath(), ...relativePath.split('/'));
+
+    await mkdir(path.dirname(absolutePath), { recursive: true });
+    await writeFile(absolutePath, buffer);
+
+    return {
+      ok: true,
+      item: {
+        id: randomUUID(),
+        name: payload.fileName,
+        path: relativePath,
+        publicUrl: buildChatResourcePublicUrl(relativePath),
+        size: buffer.byteLength,
+        mimeType: payload.mimeType?.trim() || 'application/octet-stream',
+      },
+    };
+  });
+
+  app.get('/api/chat/runtime/jobs/:requestId', async (request, reply) => {
+    const params = z.object({
+      requestId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+    const controller = getChatRuntimeController();
+
+    if (!controller) {
+      return reply.code(503).send({
+        message: '채팅 런타임 컨트롤러가 준비되지 않았습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item: controller.getJobDetail(params.requestId),
+    };
+  });
+
+  app.post('/api/chat/runtime/jobs/:requestId/cancel', async (request, reply) => {
+    const params = z.object({
+      requestId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+    const controller = getChatRuntimeController();
+
+    if (!controller) {
+      return reply.code(503).send({
+        message: '채팅 런타임 컨트롤러가 준비되지 않았습니다.',
+      });
+    }
+
+    const cancelled = await controller.cancelJob(params.requestId);
+
+    if (!cancelled) {
+      return reply.code(404).send({
+        message: '취소할 실행 중 요청을 찾지 못했습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      cancelled: true,
+    };
+  });
+
+  app.post('/api/chat/runtime/jobs/:requestId/remove', async (request, reply) => {
+    const params = z.object({
+      requestId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+    const controller = getChatRuntimeController();
+
+    if (!controller) {
+      return reply.code(503).send({
+        message: '채팅 런타임 컨트롤러가 준비되지 않았습니다.',
+      });
+    }
+
+    const removed = await controller.removeQueuedJob(params.requestId);
+
+    if (!removed) {
+      return reply.code(404).send({
+        message: '제거할 대기 요청을 찾지 못했습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      removed: true,
+    };
+  });
+
+  app.post('/api/chat/conversations', async (request) => {
+    const payload = z.object({
+      sessionId: z.string().trim().min(1).max(120),
+      title: z.string().trim().max(200).optional(),
+      contextLabel: z.string().trim().max(200).optional(),
+      contextDescription: z.string().trim().max(2000).optional(),
+      notifyOffline: z.boolean().optional(),
+    }).parse(request.body ?? {});
+
+    const clientId = getClientIdHeader(request);
+    const item = await createChatConversation({
+      sessionId: payload.sessionId,
+      clientId: clientId || null,
+      title: payload.title ?? '새 대화',
+      contextLabel: payload.contextLabel ?? null,
+      contextDescription: payload.contextDescription ?? null,
+      notifyOffline: payload.notifyOffline ?? true,
+    });
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.get('/api/chat/conversations/:sessionId', async (request, reply) => {
+    const params = z.object({
+      sessionId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+    const query = z.object({
+      limit: z.coerce.number().int().min(1).max(500).optional(),
+      beforeMessageId: z.coerce.number().int().positive().optional(),
+    }).parse(request.query ?? {});
+
+    const clientId = canViewAllConversations(request) ? null : getClientIdHeader(request);
+    const item = await getChatConversation(params.sessionId, clientId || null);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '채팅방을 찾을 수 없습니다.',
+      });
+    }
+
+    const messageLimit = query.limit ?? 500;
+    const messages = await listChatConversationMessages(params.sessionId, {
+      limit: messageLimit,
+      beforeMessageId: query.beforeMessageId ?? null,
+    });
+    const requests = await listChatConversationRequests(params.sessionId, 500);
+    const activityLogs = await listChatConversationActivityLogs(params.sessionId, 500);
+    const oldestLoadedMessageId = messages[0]?.id ?? null;
+    const hasOlderMessages =
+      oldestLoadedMessageId != null
+        ? (await listChatConversationMessages(params.sessionId, {
+            limit: 1,
+            beforeMessageId: oldestLoadedMessageId,
+          })).length > 0
+        : false;
+
+    return {
+      ok: true,
+      item,
+      messages,
+      requests,
+      activityLogs,
+      oldestLoadedMessageId,
+      hasOlderMessages,
+    };
+  });
+
+  app.post('/api/chat/conversations/:sessionId/read', async (request, reply) => {
+    const params = z.object({
+      sessionId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+
+    const clientId = getClientIdHeader(request);
+
+    if (!clientId) {
+      return reply.code(400).send({
+        message: '읽음 처리를 위한 clientId가 필요합니다.',
+      });
+    }
+
+    const result = await markChatConversationResponsesRead(params.sessionId, clientId);
+
+    if (!result) {
+      return reply.code(404).send({
+        message: '읽음 처리할 채팅방을 찾지 못했습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      ...result,
+    };
+  });
+
+  app.delete('/api/chat/conversations/:sessionId/requests/:requestId', async (request, reply) => {
+    const params = z.object({
+      sessionId: z.string().trim().min(1).max(120),
+      requestId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+
+    const result = await deleteUnansweredChatConversationRequest(params.sessionId, params.requestId);
+
+    if (!result.deleted) {
+      if (result.reason === 'not_found') {
+        return reply.code(404).send({
+          message: '삭제할 요청을 찾지 못했습니다.',
+        });
+      }
+
+      if (result.reason === 'answered') {
+        return reply.code(409).send({
+          message: '이미 답변이 연결된 요청은 삭제할 수 없습니다.',
+        });
+      }
+
+      return reply.code(409).send({
+        message: '현재 처리 중인 요청은 삭제할 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      deleted: true,
+      sessionId: params.sessionId,
+      requestId: params.requestId,
+    };
+  });
+
+  app.patch('/api/chat/conversations/:sessionId', async (request, reply) => {
+    const params = z.object({
+      sessionId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+    const payload = z.object({
+      title: z.string().trim().min(1).max(200).optional(),
+      contextLabel: z.string().trim().max(200).optional().nullable(),
+      contextDescription: z.string().trim().max(2000).optional().nullable(),
+      notifyOffline: z.boolean().optional(),
+    }).parse(request.body ?? {});
+
+    const clientId = canViewAllConversations(request) ? null : getClientIdHeader(request);
+    const current = await getChatConversation(params.sessionId, clientId || null);
+
+    if (!current) {
+      return reply.code(404).send({
+        message: '수정할 채팅방을 찾을 수 없습니다.',
+      });
+    }
+
+    const item = await updateChatConversationContext(params.sessionId, {
+      title: payload.title ?? current.title,
+      clientId: current.clientId,
+      contextLabel: payload.contextLabel ?? current.contextLabel,
+      contextDescription: payload.contextDescription ?? current.contextDescription,
+      notifyOffline: payload.notifyOffline ?? current.notifyOffline,
+    });
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.delete('/api/chat/conversations/:sessionId', async (request, reply) => {
+    const params = z.object({
+      sessionId: z.string().trim().min(1).max(120),
+    }).parse(request.params ?? {});
+
+    const clientId = canViewAllConversations(request) ? null : getClientIdHeader(request);
+    const current = await getChatConversation(params.sessionId, clientId || null);
+
+    if (!current) {
+      return reply.code(404).send({
+        message: '삭제할 채팅방을 찾을 수 없습니다.',
+      });
+    }
+
+    const deleted = await deleteChatConversation(params.sessionId);
+
+    return {
+      ok: true,
+      deleted,
+      sessionId: params.sessionId,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/compatibility.test.ts b/etc/servers/work-server/src/routes/compatibility.test.ts
new file mode 100755
index 0000000..2a25b96
--- /dev/null
+++ b/etc/servers/work-server/src/routes/compatibility.test.ts
@@ -0,0 +1,91 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import Fastify from 'fastify';
+import { registerJsonBodyParser } from '../json-body.js';
+import { registerBoardRoutes } from './board.js';
+import { registerNotificationRoutes } from './notification.js';
+
+function createRouteRecorder() {
+  const routes: Array<{ method: string; path: string }> = [];
+  const record = (method: string) => (path: string) => {
+    routes.push({ method, path });
+    return undefined;
+  };
+  const app = {
+    get: record('GET'),
+    post: record('POST'),
+    put: record('PUT'),
+    patch: record('PATCH'),
+    delete: record('DELETE'),
+  };
+
+  return {
+    app: app as any,
+    routes,
+  };
+}
+
+test('registerJsonBodyParser treats empty json body as an empty object', async () => {
+  const app = Fastify();
+  registerJsonBodyParser(app);
+  app.post('/json', async (request) => ({
+    body: request.body,
+  }));
+
+  const response = await app.inject({
+    method: 'POST',
+    url: '/json',
+    headers: {
+      'content-type': 'application/json',
+    },
+    payload: '',
+  });
+
+  assert.equal(response.statusCode, 200);
+  assert.deepEqual(response.json(), {
+    body: {},
+  });
+  await app.close();
+});
+
+test('registerJsonBodyParser still rejects malformed json', async () => {
+  const app = Fastify();
+  registerJsonBodyParser(app);
+  app.post('/json', async (request) => ({
+    body: request.body,
+  }));
+
+  const response = await app.inject({
+    method: 'POST',
+    url: '/json',
+    headers: {
+      'content-type': 'application/json',
+    },
+    payload: '{',
+  });
+
+  assert.equal(response.statusCode, 400);
+  assert.match(response.body, /valid JSON/i);
+  await app.close();
+});
+
+test('registerBoardRoutes keeps setup and items compatibility routes', async () => {
+  const { app, routes } = createRouteRecorder();
+  await registerBoardRoutes(app);
+
+  assert.ok(routes.some((route) => route.method === 'GET' && route.path === '/api/board/setup'));
+  assert.ok(routes.some((route) => route.method === 'POST' && route.path === '/api/board/setup'));
+  assert.ok(routes.some((route) => route.method === 'GET' && route.path === '/api/board/posts'));
+  assert.ok(routes.some((route) => route.method === 'GET' && route.path === '/api/board/items'));
+});
+
+test('registerNotificationRoutes exposes notification message routes', async () => {
+  const { app, routes } = createRouteRecorder();
+  await registerNotificationRoutes(app);
+
+  assert.ok(routes.some((route) => route.method === 'GET' && route.path === '/api/notifications/messages'));
+  assert.ok(routes.some((route) => route.method === 'GET' && route.path === '/api/notifications/messages/:id'));
+  assert.ok(routes.some((route) => route.method === 'POST' && route.path === '/api/notifications/messages'));
+  assert.ok(routes.some((route) => route.method === 'PATCH' && route.path === '/api/notifications/messages/:id'));
+  assert.ok(routes.some((route) => route.method === 'DELETE' && route.path === '/api/notifications/messages/:id'));
+});
diff --git a/etc/servers/work-server/src/routes/crud.ts b/etc/servers/work-server/src/routes/crud.ts
new file mode 100755
index 0000000..06f42bc
--- /dev/null
+++ b/etc/servers/work-server/src/routes/crud.ts
@@ -0,0 +1,220 @@
+import type { Knex } from 'knex';
+import type { FastifyInstance, FastifyRequest } from 'fastify';
+import { z } from 'zod';
+import { db } from '../db/client.js';
+import { assertIdentifier } from '../lib/identifier.js';
+
+const filterSchema = z.object({
+  field: z.string(),
+  operator: z
+    .enum(['eq', 'ne', 'gt', 'gte', 'lt', 'lte', 'like', 'in', 'null', 'notNull'])
+    .default('eq'),
+  value: z.any().optional(),
+});
+
+const orderBySchema = z.object({
+  field: z.string(),
+  direction: z.enum(['asc', 'desc']).default('asc'),
+});
+
+const selectSchema = z.object({
+  columns: z.array(z.string()).optional(),
+  where: z.array(filterSchema).optional(),
+  orderBy: z.array(orderBySchema).optional(),
+  limit: z.number().int().positive().max(500).optional(),
+  offset: z.number().int().min(0).optional(),
+});
+
+const insertSchema = z.object({
+  data: z.record(z.string(), z.any()).or(z.array(z.record(z.string(), z.any()))),
+});
+
+const updateSchema = z.object({
+  data: z.record(z.string(), z.any()),
+  where: z.array(filterSchema).default([]),
+});
+
+const deleteSchema = z.object({
+  where: z.array(filterSchema).default([]),
+});
+
+const protectedBoardPostAutomationFields = new Set(['automation_plan_item_id', 'automation_received_at']);
+
+function applyFilters(query: Knex.QueryBuilder, filters: z.infer<typeof filterSchema>[] = []) {
+  filters.forEach((filter) => {
+    const field = assertIdentifier(filter.field, 'field');
+
+    switch (filter.operator) {
+      case 'eq':
+        query.where(field, filter.value);
+        break;
+      case 'ne':
+        query.whereNot(field, filter.value);
+        break;
+      case 'gt':
+        query.where(field, '>', filter.value);
+        break;
+      case 'gte':
+        query.where(field, '>=', filter.value);
+        break;
+      case 'lt':
+        query.where(field, '<', filter.value);
+        break;
+      case 'lte':
+        query.where(field, '<=', filter.value);
+        break;
+      case 'like':
+        query.where(field, 'like', filter.value);
+        break;
+      case 'in':
+        query.whereIn(field, Array.isArray(filter.value) ? filter.value : [filter.value]);
+        break;
+      case 'null':
+        query.whereNull(field);
+        break;
+      case 'notNull':
+        query.whereNotNull(field);
+        break;
+      default:
+        break;
+    }
+  });
+}
+
+export async function registerCrudRoutes(app: FastifyInstance) {
+  function getRequestTraceContext(request: FastifyRequest) {
+    return {
+      ip: request.ip,
+      remoteAddress: request.raw.socket.remoteAddress,
+      host: request.headers.host,
+      origin: request.headers.origin,
+      referer: request.headers.referer,
+      userAgent: request.headers['user-agent'],
+      clientId: request.headers['x-client-id'],
+    };
+  }
+
+  function summarizeCrudUpdatePayload(table: string, payload: z.infer<typeof updateSchema>) {
+    if (table !== 'board_posts') {
+      return {
+        dataKeys: Object.keys(payload.data),
+        where: payload.where,
+      };
+    }
+
+    return {
+      dataKeys: Object.keys(payload.data),
+      where: payload.where,
+      automationPlanItemId: payload.data.automation_plan_item_id ?? null,
+      automationReceivedAt: payload.data.automation_received_at ?? null,
+      title: typeof payload.data.title === 'string' ? payload.data.title : undefined,
+      contentLength: typeof payload.data.content === 'string' ? payload.data.content.length : undefined,
+    };
+  }
+
+  app.post('/api/crud/:table/select', async (request) => {
+    const table = assertIdentifier((request.params as { table: string }).table, 'table name');
+    const payload = selectSchema.parse(request.body ?? {});
+    const columns = payload.columns?.map((column) => assertIdentifier(column, 'column')) ?? ['*'];
+
+    const query = db(table).select(columns);
+    applyFilters(query, payload.where);
+
+    payload.orderBy?.forEach((order) => {
+      query.orderBy(assertIdentifier(order.field, 'order field'), order.direction);
+    });
+
+    if (payload.limit) {
+      query.limit(payload.limit);
+    }
+
+    if (payload.offset) {
+      query.offset(payload.offset);
+    }
+
+    const rows = await query;
+
+    return {
+      ok: true,
+      table,
+      count: rows.length,
+      rows,
+    };
+  });
+
+  app.post('/api/crud/:table/insert', async (request) => {
+    const table = assertIdentifier((request.params as { table: string }).table, 'table name');
+    const payload = insertSchema.parse(request.body);
+    const inserted = await db(table).insert(payload.data).returning('*');
+
+    return {
+      ok: true,
+      table,
+      rows: inserted,
+    };
+  });
+
+  app.patch('/api/crud/:table/update', async (request, reply) => {
+    const table = assertIdentifier((request.params as { table: string }).table, 'table name');
+    const payload = updateSchema.parse(request.body);
+    const query = db(table);
+
+    applyFilters(query, payload.where);
+
+    if (table === 'board_posts') {
+      request.log.warn(
+        {
+          table,
+          payload: summarizeCrudUpdatePayload(table, payload),
+          trace: getRequestTraceContext(request),
+        },
+        'Board post CRUD update requested',
+      );
+
+      const protectedFields = Object.keys(payload.data).filter((field) => protectedBoardPostAutomationFields.has(field));
+
+      if (protectedFields.length) {
+        request.log.warn(
+          {
+            table,
+            protectedFields,
+            payload: summarizeCrudUpdatePayload(table, payload),
+            trace: getRequestTraceContext(request),
+          },
+          'Board post CRUD update blocked from changing automation link fields',
+        );
+
+        return reply.code(409).send({
+          message: '자동화 접수 연결 필드는 일반 CRUD 수정으로 변경할 수 없습니다.',
+          protectedFields,
+        });
+      }
+    }
+
+    const rows = await query.update(payload.data).returning('*');
+
+    return {
+      ok: true,
+      table,
+      count: rows.length,
+      rows,
+    };
+  });
+
+  app.delete('/api/crud/:table/delete', async (request) => {
+    const table = assertIdentifier((request.params as { table: string }).table, 'table name');
+    const payload = deleteSchema.parse(request.body ?? {});
+    const query = db(table);
+
+    applyFilters(query, payload.where);
+
+    const rows = await query.delete().returning('*');
+
+    return {
+      ok: true,
+      table,
+      count: rows.length,
+      rows,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/ddl.ts b/etc/servers/work-server/src/routes/ddl.ts
new file mode 100755
index 0000000..9aceb79
--- /dev/null
+++ b/etc/servers/work-server/src/routes/ddl.ts
@@ -0,0 +1,119 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import { db } from '../db/client.js';
+import { assertIdentifier } from '../lib/identifier.js';
+
+const columnSchema = z.object({
+  name: z.string(),
+  type: z.string(),
+  nullable: z.boolean().optional(),
+  primary: z.boolean().optional(),
+  unique: z.boolean().optional(),
+  defaultTo: z.any().optional(),
+});
+
+const createTableSchema = z.object({
+  tableName: z.string(),
+  columns: z.array(columnSchema).min(1),
+});
+
+const dropTableSchema = z.object({
+  tableName: z.string(),
+});
+
+const addColumnSchema = z.object({
+  tableName: z.string(),
+  column: columnSchema,
+});
+
+const dropColumnSchema = z.object({
+  tableName: z.string(),
+  columnName: z.string(),
+});
+
+const rawDdlSchema = z.object({
+  sql: z.string().min(1),
+});
+
+function applyColumn(tableBuilder: any, column: z.infer<typeof columnSchema>) {
+  const name = assertIdentifier(column.name, 'column name');
+  const definition = tableBuilder.specificType(name, column.type);
+
+  if (column.nullable === false) {
+    definition.notNullable();
+  }
+
+  if (column.nullable === true) {
+    definition.nullable();
+  }
+
+  if (column.primary) {
+    definition.primary();
+  }
+
+  if (column.unique) {
+    definition.unique();
+  }
+
+  if (column.defaultTo !== undefined) {
+    definition.defaultTo(column.defaultTo);
+  }
+}
+
+export async function registerDdlRoutes(app: FastifyInstance) {
+  app.post('/api/ddl/create-table', async (request) => {
+    const payload = createTableSchema.parse(request.body);
+    const tableName = assertIdentifier(payload.tableName, 'table name');
+
+    await db.schema.createTable(tableName, (table) => {
+      payload.columns.forEach((column) => {
+        applyColumn(table, column);
+      });
+    });
+
+    return { ok: true, action: 'create-table', tableName };
+  });
+
+  app.post('/api/ddl/drop-table', async (request) => {
+    const payload = dropTableSchema.parse(request.body);
+    const tableName = assertIdentifier(payload.tableName, 'table name');
+
+    await db.schema.dropTableIfExists(tableName);
+
+    return { ok: true, action: 'drop-table', tableName };
+  });
+
+  app.post('/api/ddl/add-column', async (request) => {
+    const payload = addColumnSchema.parse(request.body);
+    const tableName = assertIdentifier(payload.tableName, 'table name');
+
+    await db.schema.alterTable(tableName, (table) => {
+      applyColumn(table, payload.column);
+    });
+
+    return { ok: true, action: 'add-column', tableName, column: payload.column.name };
+  });
+
+  app.post('/api/ddl/drop-column', async (request) => {
+    const payload = dropColumnSchema.parse(request.body);
+    const tableName = assertIdentifier(payload.tableName, 'table name');
+    const columnName = assertIdentifier(payload.columnName, 'column name');
+
+    await db.schema.alterTable(tableName, (table) => {
+      table.dropColumn(columnName);
+    });
+
+    return { ok: true, action: 'drop-column', tableName, columnName };
+  });
+
+  app.post('/api/ddl/raw', async (request) => {
+    const payload = rawDdlSchema.parse(request.body);
+    const result = await db.raw(payload.sql);
+
+    return {
+      ok: true,
+      action: 'raw',
+      result,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/error-log.ts b/etc/servers/work-server/src/routes/error-log.ts
new file mode 100755
index 0000000..175b2c6
--- /dev/null
+++ b/etc/servers/work-server/src/routes/error-log.ts
@@ -0,0 +1,49 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import {
+  createErrorLog,
+  createErrorLogSchema,
+  hasErrorLogViewAccessToken,
+  listErrorLogs,
+  setupErrorLogTable,
+} from '../services/error-log-service.js';
+
+const errorLogListQuerySchema = z.object({
+  limit: z.coerce.number().int().min(1).max(200).optional(),
+});
+
+export async function registerErrorLogRoutes(app: FastifyInstance) {
+  app.post('/api/error-logs/setup', async () => {
+    return setupErrorLogTable();
+  });
+
+  app.get('/api/error-logs', async (request, reply) => {
+    const accessToken = request.headers['x-access-token'];
+
+    if (!hasErrorLogViewAccessToken(accessToken)) {
+      reply.status(403);
+      return {
+        ok: false,
+        message: '에러 로그 조회 권한이 없습니다.',
+      };
+    }
+
+    const query = errorLogListQuerySchema.parse(request.query ?? {});
+    const items = await listErrorLogs(query.limit ?? 50);
+
+    return {
+      ok: true,
+      items,
+    };
+  });
+
+  app.post('/api/error-logs/report', async (request) => {
+    const payload = createErrorLogSchema.parse(request.body);
+    const item = await createErrorLog(payload);
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/health.ts b/etc/servers/work-server/src/routes/health.ts
new file mode 100755
index 0000000..46b01d7
--- /dev/null
+++ b/etc/servers/work-server/src/routes/health.ts
@@ -0,0 +1,13 @@
+import type { FastifyInstance } from 'fastify';
+
+export async function registerHealthRoutes(app: FastifyInstance) {
+  const respondHealth = async () => ({
+    ok: true,
+    service: 'work-server',
+    timestamp: new Date().toISOString(),
+  });
+
+  app.get('/', respondHealth);
+  app.get('/api', respondHealth);
+  app.get('/health', respondHealth);
+}
diff --git a/etc/servers/work-server/src/routes/notification.ts b/etc/servers/work-server/src/routes/notification.ts
new file mode 100755
index 0000000..f5fc304
--- /dev/null
+++ b/etc/servers/work-server/src/routes/notification.ts
@@ -0,0 +1,207 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import {
+  listIosNotificationTokens,
+  getAutomationNotificationPreference,
+  getWebPushConfig,
+  registerIosNotificationToken,
+  registerAutomationNotificationPreferenceSchema,
+  registerIosTokenSchema,
+  registerWebPushSubscription,
+  registerWebPushSubscriptionSchema,
+  sendNotifications,
+  sendIosNotificationSchema,
+  setupNotificationTables,
+  upsertAutomationNotificationPreference,
+  unregisterIosNotificationToken,
+  unregisterIosTokenSchema,
+  unregisterWebPushSubscription,
+  unregisterWebPushSubscriptionSchema,
+} from '../services/notification-service.js';
+import {
+  createNotificationMessage,
+  deleteNotificationMessage,
+  getNotificationMessage,
+  listNotificationMessages,
+  notificationMessageListQuerySchema,
+  notificationMessagePayloadSchema,
+  notificationMessageReadPayloadSchema,
+  updateNotificationMessageReadState,
+} from '../services/notification-message-service.js';
+
+const automationNotificationPreferenceQuerySchema = z.object({
+  targetKind: z.enum(['client', 'ios-token', 'ios-token-client', 'web-endpoint']).optional(),
+  targetId: z.string().trim().min(1).max(1000).optional(),
+});
+
+type AutomationNotificationPreferenceTargetKind = NonNullable<
+  z.infer<typeof automationNotificationPreferenceQuerySchema>['targetKind']
+>;
+
+function getClientIdHeader(request: { headers: Record<string, string | string[] | undefined> }) {
+  const rawClientId = request.headers['x-client-id'];
+  const clientId = Array.isArray(rawClientId) ? rawClientId[0] : rawClientId;
+  return clientId?.trim() ?? '';
+}
+
+export async function registerNotificationRoutes(app: FastifyInstance) {
+  app.post('/api/notifications/setup', async () => setupNotificationTables());
+
+  app.get('/api/notifications/tokens', async () => ({
+    items: await listIosNotificationTokens(),
+  }));
+
+  app.get('/api/notifications/webpush/config', async () => getWebPushConfig());
+
+  app.get('/api/notifications/messages', async (request) => {
+    const query = notificationMessageListQuerySchema.parse(request.query ?? {});
+    return {
+      ok: true,
+      ...(await listNotificationMessages(query)),
+    };
+  });
+
+  app.get('/api/notifications/messages/:id', async (request, reply) => {
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await getNotificationMessage(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '알림 메시지를 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.post('/api/notifications/messages', async (request) => {
+    const item = await createNotificationMessage(notificationMessagePayloadSchema.parse(request.body ?? {}));
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.patch('/api/notifications/messages/:id', async (request, reply) => {
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await updateNotificationMessageReadState(id, notificationMessageReadPayloadSchema.parse(request.body ?? {}));
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '상태를 변경할 알림 메시지를 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item,
+    };
+  });
+
+  app.delete('/api/notifications/messages/:id', async (request, reply) => {
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const deleted = await deleteNotificationMessage(id);
+
+    if (!deleted) {
+      return reply.code(404).send({
+        message: '삭제할 알림 메시지를 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      deleted: true,
+    };
+  });
+
+  app.get('/api/notifications/preferences/automation', async (request) => {
+    const query = automationNotificationPreferenceQuerySchema.parse(request.query ?? {});
+    const targetId = query.targetId || getClientIdHeader(request);
+    const targetKind = query.targetId ? query.targetKind ?? 'client' : 'client';
+
+    return {
+      ok: true,
+      automation: await getAutomationNotificationPreferenceWithFallback(targetId, targetKind),
+    };
+  });
+
+  app.put('/api/notifications/preferences/automation', async (request, reply) => {
+    try {
+      const payload = registerAutomationNotificationPreferenceSchema.parse(request.body ?? {});
+      const targetId = payload.targetId || getClientIdHeader(request);
+
+      if (!targetId) {
+        throw new Error('알림 설정을 저장할 클라이언트 ID가 없습니다.');
+      }
+
+      return upsertAutomationNotificationPreference({
+        ...payload,
+        targetId,
+      });
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : '알림 설정 저장에 실패했습니다.',
+      });
+    }
+  });
+
+  app.put('/api/notifications/tokens/ios', async (request) => {
+    const payload = registerIosTokenSchema.parse(request.body ?? {});
+    return registerIosNotificationToken(payload);
+  });
+
+  app.delete('/api/notifications/tokens/ios', async (request) => {
+    const payload = unregisterIosTokenSchema.parse(request.body ?? {});
+    return unregisterIosNotificationToken(payload.token);
+  });
+
+  app.put('/api/notifications/subscriptions/web', async (request) => {
+    const payload = registerWebPushSubscriptionSchema.parse(request.body ?? {});
+    return registerWebPushSubscription(payload);
+  });
+
+  app.delete('/api/notifications/subscriptions/web', async (request) => {
+    const payload = unregisterWebPushSubscriptionSchema.parse(request.body ?? {});
+    return unregisterWebPushSubscription(payload.endpoint);
+  });
+
+  app.post('/api/notifications/send', async (request) => {
+    const payload = sendIosNotificationSchema.parse(request.body ?? {});
+    return sendNotifications(payload);
+  });
+
+  app.post('/api/notifications/send-test', async (request) => {
+    const payload = sendIosNotificationSchema.parse(request.body ?? {});
+    return sendNotifications(payload);
+  });
+}
+async function getAutomationNotificationPreferenceWithFallback(
+  targetId: string,
+  targetKind: AutomationNotificationPreferenceTargetKind,
+) {
+  const automation = await getAutomationNotificationPreference(targetId, targetKind);
+
+  if (automation || targetKind !== 'ios-token-client') {
+    return automation;
+  }
+
+  const [token, clientId] = targetId.split('::client::');
+
+  if (token?.trim()) {
+    const tokenAutomation = await getAutomationNotificationPreference(token.trim(), 'ios-token');
+
+    if (tokenAutomation) {
+      return tokenAutomation;
+    }
+  }
+
+  if (clientId?.trim()) {
+    return getAutomationNotificationPreference(clientId.trim(), 'client');
+  }
+
+  return null;
+}
diff --git a/etc/servers/work-server/src/routes/plan.ts b/etc/servers/work-server/src/routes/plan.ts
new file mode 100755
index 0000000..53b09bf
--- /dev/null
+++ b/etc/servers/work-server/src/routes/plan.ts
@@ -0,0 +1,981 @@
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
+import { z } from 'zod';
+import { hasErrorLogViewAccessToken } from '../services/error-log-service.js';
+import { notifyPlanEvent } from '../services/plan-notification-service.js';
+import { shouldNotifyPlanRestart } from '../services/plan-notification-policy.js';
+import {
+  PLAN_ACTION_TABLE,
+  PLAN_ISSUE_TABLE,
+  PLAN_RELEASE_REVIEW_TABLE,
+  PLAN_SOURCE_WORK_TABLE,
+  PLAN_TABLE,
+  appendLatestIssueAction,
+  cancelPlanRelease,
+  createPlanItem,
+  createPlanActionHistory,
+  createPlanSourceWorkHistory,
+  createPlanSchema,
+  deletePlanItem,
+  ensurePlanTable,
+  getPlanSourceWorkHistory,
+  getBoardPostLinkedToPlanItem,
+  getPlanItemById,
+  formatPlanNotificationLabel,
+  issueActionSchema,
+  listPlanActionHistories,
+  listPlanIssueHistories,
+  listPlanItems,
+  listPlanReleaseReviewBoardItems,
+  listPlanSourceWorkHistories,
+  listPlanQuerySchema,
+  mapPlanActionRow,
+  mapPlanIssueRow,
+  mapPlanSourceWorkRow,
+  markPlanAsStarted,
+  planStatuses,
+  markPlanAsCompleted,
+  markPlanAsDevelopmentComplete,
+  queuePlanRetryFromFailure,
+  queuePlanRetryFromIssueAction,
+  requestPlanMainMerge,
+  resumePlanDevelopmentFromRelease,
+  retryPlanBranch,
+  retryPlanWork,
+  retryPlanMerge,
+  setupSchema,
+  updatePlanReleaseReviewSchema,
+  upsertPlanReleaseReview,
+  updatePlanItem,
+  updatePlanItemJangsingProcessingRequired,
+  updatePlanJangsingProcessingSchema,
+  updatePlanSchema,
+} from '../services/plan-service.js';
+import { db } from '../db/client.js';
+import { getEnv } from '../config/env.js';
+import { recreateReleaseBranchFromMain } from '../services/git-service.js';
+import { registerErrorLogBoardPosts } from '../services/error-log-plan-registration-service.js';
+import {
+  PLAN_SCHEDULED_TASK_TABLE,
+  createPlanScheduledTask,
+  createPlanScheduledTaskSchema,
+  deletePlanScheduledTask,
+  ensurePlanScheduledTaskTable,
+  getPlanScheduledTaskById,
+  listPlanScheduledTasks,
+  mapPlanScheduledTaskRow,
+  registerPlanScheduledTaskNow,
+  updatePlanScheduledTask,
+  updatePlanScheduledTaskSchema,
+} from '../services/plan-schedule-service.js';
+import { getVisitorClientByClientId } from '../services/visitor-history-service.js';
+
+const completeActionSchema = z.object({
+  note: z.string().trim().min(1).optional(),
+});
+
+const actionNoteSchema = z.object({
+  actionNote: z.string().trim().min(1),
+  actionType: z.string().trim().min(1).optional(),
+});
+
+const createSourceWorkSchema = z.object({
+  summary: z.string().trim().min(1),
+  branchName: z.string().trim().min(1),
+  commitHash: z.string().trim().min(1).nullable().optional(),
+  previewUrl: z.string().trim().url().nullable().optional(),
+  changedFiles: z.array(z.string()).default([]),
+  commandLog: z.string().nullable().optional(),
+  diffText: z.string().nullable().optional(),
+  sourceFiles: z
+    .array(
+      z.object({
+        path: z.string().trim().min(1),
+        previousPath: z.string().trim().min(1).nullable().optional(),
+        status: z.enum(['added', 'modified', 'deleted', 'renamed', 'binary', 'unknown']),
+        language: z.string().trim().min(1),
+        content: z.string(),
+      }),
+    )
+    .default([]),
+});
+
+export async function registerPlanRoutes(app: FastifyInstance) {
+  function getRequestTraceContext(request: FastifyRequest) {
+    return {
+      ip: request.ip,
+      remoteAddress: request.raw.socket.remoteAddress,
+      host: request.headers.host,
+      origin: request.headers.origin,
+      referer: request.headers.referer,
+      userAgent: request.headers['user-agent'],
+      clientId: request.headers['x-client-id'],
+    };
+  }
+
+  function isLoopbackAddress(value: string | null | undefined) {
+    const normalizedValue = String(value ?? '').trim();
+    return normalizedValue === '127.0.0.1' || normalizedValue === '::1' || normalizedValue === '::ffff:127.0.0.1';
+  }
+
+  function hasPlanAccessToken(accessToken: string | string[] | undefined) {
+    return hasErrorLogViewAccessToken(accessToken);
+  }
+
+  function hasPlanAccess(request: { headers: Record<string, unknown>; ip?: string; socket?: { remoteAddress?: string | null }; raw?: { socket?: { remoteAddress?: string | null } } }) {
+    if (hasPlanAccessToken(request.headers['x-access-token'] as string | string[] | undefined)) {
+      return true;
+    }
+
+    return isLoopbackAddress(request.ip) || isLoopbackAddress(request.raw?.socket?.remoteAddress) || isLoopbackAddress(request.socket?.remoteAddress);
+  }
+
+  function requirePlanAccessToken(
+    request: { headers: Record<string, unknown>; ip?: string; socket?: { remoteAddress?: string | null }; raw?: { socket?: { remoteAddress?: string | null } } },
+    reply: Parameters<FastifyInstance['get']>[1] extends (request: any, reply: infer T) => any ? T : any,
+  ) {
+    if (hasPlanAccess(request)) {
+      return true;
+    }
+
+    void reply.code(403).send({
+      message: '권한 토큰이 등록된 사용자만 수정할 수 있습니다.',
+    });
+    return false;
+  }
+
+  async function handleListPlanScheduledTasks(request: FastifyRequest, reply: FastifyReply) {
+    if (!hasPlanAccess(request)) {
+      return reply.code(403).send({
+        message: '권한 토큰이 등록된 사용자만 스케줄을 사용할 수 있습니다.',
+      });
+    }
+
+    const rows = await listPlanScheduledTasks();
+
+    return {
+      items: rows.map(mapPlanScheduledTaskRow),
+    };
+  }
+
+  async function handleCreatePlanScheduledTask(request: FastifyRequest, reply: FastifyReply) {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const payload = createPlanScheduledTaskSchema.parse(request.body ?? {});
+    const row = await createPlanScheduledTask(payload);
+    const immediateRegistration = payload.enabled && payload.immediateRunEnabled ? await registerPlanScheduledTaskNow(Number(row.id)) : null;
+
+    return {
+      ok: true,
+      item: mapPlanScheduledTaskRow(row),
+      registeredPlan: immediateRegistration?.createdPlan ? await getPlanItemById(Number(immediateRegistration.createdPlan.id)) : null,
+      registeredBoardPosts: immediateRegistration?.createdBoardPosts ?? [],
+    };
+  }
+
+  async function handleGetPlanScheduledTask(request: FastifyRequest, reply: FastifyReply) {
+    if (!hasPlanAccess(request)) {
+      return reply.code(403).send({
+        message: '권한 토큰이 등록된 사용자만 스케줄을 사용할 수 있습니다.',
+      });
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await getPlanScheduledTaskById(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '스케줄을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      item: mapPlanScheduledTaskRow(row),
+    };
+  }
+
+  async function handleUpdatePlanScheduledTask(request: FastifyRequest, reply: FastifyReply) {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const payload = updatePlanScheduledTaskSchema.parse(request.body ?? {});
+    const row = await updatePlanScheduledTask(id, payload);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '수정할 스케줄을 찾을 수 없습니다.',
+      });
+    }
+
+    const shouldTriggerImmediateRegistration =
+      row &&
+      Boolean(row.enabled ?? true) &&
+      Boolean(row.immediate_run_enabled ?? true) &&
+      payload.enabled !== false;
+    const immediateRegistration = shouldTriggerImmediateRegistration ? await registerPlanScheduledTaskNow(id) : null;
+
+    return {
+      ok: true,
+      item: mapPlanScheduledTaskRow(row),
+      registeredPlan: immediateRegistration?.createdPlan ? await getPlanItemById(Number(immediateRegistration.createdPlan.id)) : null,
+      registeredBoardPosts: immediateRegistration?.createdBoardPosts ?? [],
+    };
+  }
+
+  app.post('/api/plan/registrations/error-logs', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const payload = z.object({
+      rangeStart: z.coerce.date().optional(),
+      rangeEnd: z.coerce.date().optional(),
+      maxGroups: z.coerce.number().int().min(1).max(24).optional(),
+    }).parse(request.body ?? {});
+
+    const result = await registerErrorLogBoardPosts(payload);
+
+    return {
+      ok: true,
+      rangeStart: result.rangeStart.toISOString(),
+      rangeEnd: result.rangeEnd.toISOString(),
+      recentLogCount: result.recentLogs.length,
+      candidateCount: result.candidates.length,
+      rawCandidateCount: result.rawCandidates.length,
+      createdBoardPosts: result.createdPosts,
+      skippedBoardPosts: result.skippedPosts,
+    };
+  });
+
+  async function handleDeletePlanScheduledTask(request: FastifyRequest, reply: FastifyReply) {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await deletePlanScheduledTask(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '삭제할 스케줄을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      id,
+    };
+  }
+
+  app.get('/api/plan/statuses', async () => ({
+    items: planStatuses,
+  }));
+
+  app.post('/api/plan/setup', async (request) => {
+    const payload = setupSchema.parse(request.body ?? {});
+
+    if (payload.recreate) {
+      await db.schema.dropTableIfExists(PLAN_SCHEDULED_TASK_TABLE);
+      await db.schema.dropTableIfExists(PLAN_ACTION_TABLE);
+      await db.schema.dropTableIfExists(PLAN_ISSUE_TABLE);
+      await db.schema.dropTableIfExists(PLAN_SOURCE_WORK_TABLE);
+      await db.schema.dropTableIfExists(PLAN_TABLE);
+    }
+
+    await ensurePlanTable();
+    await ensurePlanScheduledTaskTable();
+
+    return {
+      ok: true,
+      table: PLAN_TABLE,
+      scheduleTable: PLAN_SCHEDULED_TASK_TABLE,
+      releaseReviewTable: PLAN_RELEASE_REVIEW_TABLE,
+      statuses: planStatuses,
+    };
+  });
+
+  app.get('/api/plan/release-reviews', async (request) => {
+    const items = await listPlanReleaseReviewBoardItems({
+      maskNote: !hasPlanAccess(request),
+    });
+
+    return {
+      items,
+    };
+  });
+
+  app.patch('/api/plan/release-reviews/:planItemId', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const planItemId = z.coerce.number().int().positive().parse((request.params as { planItemId: string }).planItemId);
+    const payload = updatePlanReleaseReviewSchema.parse(request.body ?? {});
+    const clientId = String(request.headers['x-client-id'] ?? '').trim();
+    const visitor = clientId ? await getVisitorClientByClientId(clientId) : null;
+    const review = await upsertPlanReleaseReview(planItemId, payload, {
+      clientId: clientId || null,
+      nickname: visitor?.nickname ?? null,
+    });
+
+    if (!review) {
+      return reply.code(404).send({
+        message: '검수 대상을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item: review,
+    };
+  });
+
+  app.get('/api/plan/scheduled-tasks', handleListPlanScheduledTasks);
+  app.get('/api/plan/schedule/tasks', handleListPlanScheduledTasks);
+  app.get('/api/plan/schedule', handleListPlanScheduledTasks);
+  app.get('/api/plan/schedules', handleListPlanScheduledTasks);
+  app.get('/api/plans/scheduled-tasks', handleListPlanScheduledTasks);
+  app.get('/api/plans/schedule/tasks', handleListPlanScheduledTasks);
+  app.get('/api/plans/schedule', handleListPlanScheduledTasks);
+  app.get('/api/plans/schedules', handleListPlanScheduledTasks);
+  app.get('/api/plan/scheduled-tasks/:id', handleGetPlanScheduledTask);
+  app.get('/api/plan/schedule/tasks/:id', handleGetPlanScheduledTask);
+  app.get('/api/plan/schedule/:id', handleGetPlanScheduledTask);
+  app.get('/api/plan/schedules/:id', handleGetPlanScheduledTask);
+  app.get('/api/plans/scheduled-tasks/:id', handleGetPlanScheduledTask);
+  app.get('/api/plans/schedule/tasks/:id', handleGetPlanScheduledTask);
+  app.get('/api/plans/schedule/:id', handleGetPlanScheduledTask);
+  app.get('/api/plans/schedules/:id', handleGetPlanScheduledTask);
+  app.post('/api/plan/scheduled-tasks', handleCreatePlanScheduledTask);
+  app.post('/api/plan/schedule/tasks', handleCreatePlanScheduledTask);
+  app.post('/api/plan/schedule', handleCreatePlanScheduledTask);
+  app.post('/api/plan/schedules', handleCreatePlanScheduledTask);
+  app.post('/api/plans/scheduled-tasks', handleCreatePlanScheduledTask);
+  app.post('/api/plans/schedule/tasks', handleCreatePlanScheduledTask);
+  app.post('/api/plans/schedule', handleCreatePlanScheduledTask);
+  app.post('/api/plans/schedules', handleCreatePlanScheduledTask);
+  app.patch('/api/plan/scheduled-tasks/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plan/schedule/tasks/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plan/schedule/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plan/schedules/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plans/scheduled-tasks/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plans/schedule/tasks/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plans/schedule/:id', handleUpdatePlanScheduledTask);
+  app.patch('/api/plans/schedules/:id', handleUpdatePlanScheduledTask);
+  app.delete('/api/plan/scheduled-tasks/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plan/schedule/tasks/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plan/schedule/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plan/schedules/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plans/scheduled-tasks/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plans/schedule/tasks/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plans/schedule/:id', handleDeletePlanScheduledTask);
+  app.delete('/api/plans/schedules/:id', handleDeletePlanScheduledTask);
+
+  app.get('/api/plan/items', async (request, reply) => {
+    const parsedQuery = listPlanQuerySchema.safeParse(request.query ?? {});
+
+    if (!parsedQuery.success) {
+      return reply.code(400).send({
+        message: '유효하지 않은 status 쿼리입니다.',
+      });
+    }
+
+    const query = parsedQuery.data;
+    const items = await listPlanItems(query.status, {
+      maskNote: !hasPlanAccess(request),
+    });
+
+    return {
+      items,
+    };
+  });
+
+  app.get('/api/plan/items/:id', async (request, reply) => {
+    const hasAccess = hasPlanAccess(request);
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await getPlanItemById(id, {
+      maskNote: !hasAccess,
+    });
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      item: row,
+    };
+  });
+
+  app.post('/api/plan/items', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    try {
+      const payload = createPlanSchema.parse(request.body ?? {});
+      const createdRow = await createPlanItem(payload);
+      const row = await getPlanItemById(Number(createdRow.id));
+
+      return {
+        ok: true,
+        item: row,
+      };
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : '작업 항목 등록에 실패했습니다.',
+      });
+    }
+  });
+
+  app.patch('/api/plan/items/:id', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    try {
+      const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+      const payload = updatePlanSchema.parse(request.body ?? {});
+      const updatedRow = await updatePlanItem(id, payload);
+
+      if (!updatedRow) {
+        return reply.code(404).send({
+          message: '수정할 작업 항목을 찾을 수 없습니다.',
+        });
+      }
+
+      const row = await getPlanItemById(id);
+
+      return {
+        ok: true,
+        item: row,
+      };
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : '작업 항목 수정에 실패했습니다.',
+      });
+    }
+  });
+
+  app.patch('/api/plan/items/:id/jangsing-processing', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    try {
+      const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+      const payload = updatePlanJangsingProcessingSchema.parse(request.body ?? {});
+      const updatedRow = await updatePlanItemJangsingProcessingRequired(id, payload.jangsingProcessingRequired);
+
+      if (!updatedRow) {
+        return reply.code(404).send({
+          message: '수정할 작업 항목을 찾을 수 없습니다.',
+        });
+      }
+
+      return {
+        ok: true,
+        item: await getPlanItemById(id),
+      };
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : '기능동작확인 수정에 실패했습니다.',
+      });
+    }
+  });
+
+  app.delete('/api/plan/items/:id', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    request.log.warn(
+      {
+        planItemId: id,
+        trace: getRequestTraceContext(request),
+      },
+      'Plan item delete requested',
+    );
+    const linkedBoardPost = await getBoardPostLinkedToPlanItem(id);
+
+    if (linkedBoardPost) {
+      request.log.warn(
+        {
+          planItemId: id,
+          boardPostId: linkedBoardPost.id,
+          boardPostTitle: linkedBoardPost.title,
+          trace: getRequestTraceContext(request),
+        },
+        'Plan item delete blocked because it is linked to a board post',
+      );
+
+      return reply.code(409).send({
+        message: `자동화 접수된 항목은 삭제할 수 없습니다. 연결 게시글 #${linkedBoardPost.id}`,
+      });
+    }
+
+    const row = await deletePlanItem(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '삭제할 작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      id,
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/complete-development', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await markPlanAsDevelopmentComplete(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const planLabel = formatPlanNotificationLabel(String(row.work_id), id);
+    await notifyPlanEvent(
+      id,
+      `[${planLabel}] release 반영 대기`,
+      '수동 작업완료로 release 반영 대기 상태가 되었습니다.',
+      'development-completed',
+    );
+
+    return {
+      ok: true,
+      item: await getPlanItemById(id),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/complete', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const payload = completeActionSchema.parse(request.body ?? {});
+    const row = await markPlanAsCompleted(id, payload.note);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const planLabel = formatPlanNotificationLabel(String(row.work_id), id);
+    await notifyPlanEvent(
+      id,
+      `[${planLabel}] 완료 처리`,
+      payload.note ?? '작업이 완료 처리되었습니다.',
+      'plan-completed',
+    );
+
+    return {
+      ok: true,
+      item: await getPlanItemById(id),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/start-work', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await markPlanAsStarted(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const planLabel = formatPlanNotificationLabel(String(row.work_id), id);
+    await notifyPlanEvent(
+      id,
+      `[${planLabel}] 작업시작`,
+      '작업이 시작되었습니다.',
+      'work-started',
+    );
+
+    return {
+      ok: true,
+      item: await getPlanItemById(id),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/retry-branch', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await retryPlanBranch(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const planLabel = formatPlanNotificationLabel(String(row.work_id), id);
+    await notifyPlanEvent(
+      id,
+      `[${planLabel}] 작업 재시작`,
+      '브랜치 재시도를 요청했습니다.',
+      'plan-restarted',
+    );
+
+    return {
+      ok: true,
+      item: await getPlanItemById(id),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/retry-work', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await retryPlanWork(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const planLabel = formatPlanNotificationLabel(String(row.work_id), id);
+    await notifyPlanEvent(
+      id,
+      `[${planLabel}] 작업 재시작`,
+      '자동 작업 재처리를 요청했습니다.',
+      'plan-restarted',
+    );
+
+    return {
+      ok: true,
+      item: await getPlanItemById(id),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/retry-merge', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const row = await retryPlanMerge(id);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const planLabel = formatPlanNotificationLabel(String(row.work_id), id);
+    await notifyPlanEvent(
+      id,
+      `[${planLabel}] 작업 재시작`,
+      row.worker_status === 'main반영대기' ? 'main 반영 재시도를 요청했습니다.' : 'release 반영 재시도를 요청했습니다.',
+      'plan-restarted',
+    );
+
+    return {
+      ok: true,
+      item: await getPlanItemById(id),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/cancel-release', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    try {
+      const env = getEnv();
+      const isReleaseMergeFailure = item.status === '작업완료' && item.workerStatus === 'release반영실패';
+
+      if (!isReleaseMergeFailure) {
+        await recreateReleaseBranchFromMain(
+          {
+            repoPath: env.PLAN_GIT_REPO_PATH,
+            releaseBranch: env.PLAN_RELEASE_BRANCH,
+            mainBranch: env.PLAN_MAIN_BRANCH,
+          },
+          String(item.releaseTarget ?? env.PLAN_RELEASE_BRANCH),
+        );
+      }
+
+      const result = await cancelPlanRelease(id);
+
+      return {
+        ok: true,
+        item: result?.item ?? (await getPlanItemById(id)),
+        message: result?.message,
+      };
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : 'release 작업취소 처리에 실패했습니다.',
+      });
+    }
+  });
+
+  app.post('/api/plan/items/:id/actions/request-main-merge', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const result = await requestPlanMainMerge(id);
+
+    if (!result) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      item: result.item,
+      message: result.message,
+    };
+  });
+
+  app.get('/api/plan/items/:id/issues', async (request, reply) => {
+    if (!hasPlanAccess(request)) {
+      return reply.code(403).send({
+        message: '상세 조회 권한이 없습니다.',
+      });
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const rows = await listPlanIssueHistories(id);
+
+    return {
+      items: rows.map(mapPlanIssueRow),
+    };
+  });
+
+  app.post('/api/plan/items/:id/issues/action', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const payload = issueActionSchema.parse(request.body ?? {});
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    try {
+      const row = await appendLatestIssueAction(id, payload.actionNote, payload.resolve);
+      const retryResult = await queuePlanRetryFromIssueAction(id, payload.actionNote, payload.retry);
+
+      if (payload.resolve) {
+        const planLabel = formatPlanNotificationLabel(String(item.workId), id);
+        await notifyPlanEvent(
+          id,
+          `[${planLabel}] 이슈 해결 처리`,
+          `${row.issue_tag} 이슈가 해결 처리되었습니다.`,
+          'issue-resolved',
+        );
+      }
+
+      if (shouldNotifyPlanRestart(retryResult)) {
+        const planLabel = formatPlanNotificationLabel(String(item.workId), id);
+        await notifyPlanEvent(
+          id,
+          `[${planLabel}] 작업 재시작`,
+          retryResult?.message ?? '작업 재시작을 요청했습니다.',
+          'plan-restarted',
+        );
+      }
+
+      return {
+        ok: true,
+        item: mapPlanIssueRow(row),
+        planItem: retryResult?.item ?? (await getPlanItemById(id)),
+        message: retryResult?.message,
+      };
+    } catch (error) {
+      return reply.code(409).send({
+        message: error instanceof Error ? error.message : '이슈 조치 기록 저장에 실패했습니다.',
+      });
+    }
+  });
+
+  app.get('/api/plan/items/:id/actions', async (request, reply) => {
+    if (!hasPlanAccess(request)) {
+      return reply.code(403).send({
+        message: '상세 조회 권한이 없습니다.',
+      });
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const rows = await listPlanActionHistories(id);
+
+    return {
+      items: rows.map(mapPlanActionRow),
+    };
+  });
+
+  app.get('/api/plan/items/:id/source-works', async (request, reply) => {
+    if (!hasPlanAccess(request)) {
+      return reply.code(403).send({
+        message: '상세 조회 권한이 없습니다.',
+      });
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const rows = await listPlanSourceWorkHistories(id);
+
+    return {
+      items: rows.map(mapPlanSourceWorkRow),
+    };
+  });
+
+  app.get('/api/plan/items/:id/source-works/:sourceWorkId', async (request, reply) => {
+    if (!hasPlanAccess(request)) {
+      return reply.code(403).send({
+        message: '상세 조회 권한이 없습니다.',
+      });
+    }
+
+    const params = z.object({
+      id: z.coerce.number().int().positive(),
+      sourceWorkId: z.coerce.number().int().positive(),
+    }).parse(request.params);
+    const row = await getPlanSourceWorkHistory(params.id, params.sourceWorkId);
+
+    if (!row) {
+      return reply.code(404).send({
+        message: '소스 작업 이력을 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      item: mapPlanSourceWorkRow(row),
+    };
+  });
+
+  app.post('/api/plan/items/:id/source-works', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const payload = createSourceWorkSchema.parse(request.body ?? {});
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    const row = await createPlanSourceWorkHistory(id, payload);
+
+    return {
+      ok: true,
+      item: mapPlanSourceWorkRow(row),
+    };
+  });
+
+  app.post('/api/plan/items/:id/actions/note', async (request, reply) => {
+    if (!requirePlanAccessToken(request, reply)) {
+      return;
+    }
+
+    const id = z.coerce.number().int().positive().parse((request.params as { id: string }).id);
+    const payload = actionNoteSchema.parse(request.body ?? {});
+    const item = await getPlanItemById(id);
+
+    if (!item) {
+      return reply.code(404).send({
+        message: '작업 항목을 찾을 수 없습니다.',
+      });
+    }
+
+    if (!item.startedAt) {
+      return reply.code(409).send({
+        message: '작업시작 이후부터 조치 이력을 기록할 수 있습니다.',
+      });
+    }
+
+    const row = await createPlanActionHistory(id, payload.actionType ?? '추가조치', payload.actionNote);
+    const releaseResumeResult = await resumePlanDevelopmentFromRelease(id, payload.actionNote);
+    const retryResult = releaseResumeResult?.message
+      ? releaseResumeResult
+      : await queuePlanRetryFromFailure(id, payload.actionNote);
+
+    if (shouldNotifyPlanRestart(retryResult)) {
+      const planLabel = formatPlanNotificationLabel(String(item.workId), id);
+      await notifyPlanEvent(
+        id,
+        `[${planLabel}] 작업 재시작`,
+        retryResult?.message ?? '작업 재시작을 요청했습니다.',
+        'plan-restarted',
+      );
+    }
+
+    return {
+      ok: true,
+      item: mapPlanActionRow(row),
+      planItem: retryResult?.item ?? (await getPlanItemById(id)),
+      message: retryResult?.message,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/schema.ts b/etc/servers/work-server/src/routes/schema.ts
new file mode 100755
index 0000000..c8c89cc
--- /dev/null
+++ b/etc/servers/work-server/src/routes/schema.ts
@@ -0,0 +1,17 @@
+import type { FastifyInstance } from 'fastify';
+import { db } from '../db/client.js';
+
+export async function registerSchemaRoutes(app: FastifyInstance) {
+  app.get('/api/schema/tables', async () => {
+    const tables = await db('information_schema.tables')
+      .select('table_name', 'table_schema')
+      .where('table_type', 'BASE TABLE')
+      .whereNotIn('table_schema', ['pg_catalog', 'information_schema'])
+      .orderBy('table_schema')
+      .orderBy('table_name');
+
+    return {
+      items: tables,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/server-command.ts b/etc/servers/work-server/src/routes/server-command.ts
new file mode 100755
index 0000000..a207998
--- /dev/null
+++ b/etc/servers/work-server/src/routes/server-command.ts
@@ -0,0 +1,54 @@
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
+import { z } from 'zod';
+import { env } from '../config/env.js';
+import { listServerCommands, restartServerCommand, serverCommandKeys } from '../services/server-command-service.js';
+
+const serverCommandParamSchema = z.object({
+  key: z.enum(serverCommandKeys),
+});
+
+function getRequestAccessToken(request: FastifyRequest) {
+  const tokenHeader = request.headers['x-access-token'];
+  return Array.isArray(tokenHeader) ? tokenHeader[0]?.trim() ?? '' : String(tokenHeader ?? '').trim();
+}
+
+function ensureAuthorized(request: FastifyRequest, reply: FastifyReply) {
+  if (getRequestAccessToken(request) === env.SERVER_COMMAND_ACCESS_TOKEN) {
+    return true;
+  }
+
+  reply.status(403);
+  void reply.send({
+    message: '권한 토큰이 필요합니다.',
+  });
+  return false;
+}
+
+export async function registerServerCommandRoutes(app: FastifyInstance) {
+  app.get('/api/server-commands', async (request, reply) => {
+    if (!ensureAuthorized(request, reply)) {
+      return;
+    }
+
+    return {
+      ok: true,
+      items: await listServerCommands(),
+    };
+  });
+
+  app.post('/api/server-commands/:key/actions/restart', async (request, reply) => {
+    if (!ensureAuthorized(request, reply)) {
+      return;
+    }
+
+    const { key } = serverCommandParamSchema.parse(request.params);
+    const result = await restartServerCommand(key);
+
+    return {
+      ok: true,
+      item: result.server,
+      commandOutput: result.commandOutput,
+      restartState: result.restartState,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/routes/visitor-history.ts b/etc/servers/work-server/src/routes/visitor-history.ts
new file mode 100755
index 0000000..977f6ec
--- /dev/null
+++ b/etc/servers/work-server/src/routes/visitor-history.ts
@@ -0,0 +1,129 @@
+import type { FastifyInstance } from 'fastify';
+import { z } from 'zod';
+import { hasErrorLogViewAccessToken } from '../services/error-log-service.js';
+import {
+  ensureVisitorHistoryTables,
+  getVisitorClientByClientId,
+  listVisitorClients,
+  listVisitorClientsQuerySchema,
+  listVisitorHistories,
+  trackVisit,
+  trackVisitSchema,
+  updateVisitorNickname,
+  updateVisitorNicknameSchema,
+  visitorHistoryQuerySchema,
+} from '../services/visitor-history-service.js';
+
+export async function registerVisitorHistoryRoutes(app: FastifyInstance) {
+  function requireHistoryAccessToken(
+    request: { headers: Record<string, unknown> },
+    reply: Parameters<FastifyInstance['get']>[1] extends (request: any, reply: infer T) => any ? T : any,
+  ) {
+    if (hasErrorLogViewAccessToken(request.headers['x-access-token'] as string | string[] | undefined)) {
+      return true;
+    }
+
+    void reply.code(403).send({
+      message: '권한 토큰이 등록된 사용자만 방문 이력을 조회할 수 있습니다.',
+    });
+    return false;
+  }
+
+  app.post('/api/history/setup', async () => {
+    await ensureVisitorHistoryTables();
+
+    return {
+      ok: true,
+    };
+  });
+
+  app.post('/api/history/track', async (request) => {
+    const bodyPayload =
+      request.body && typeof request.body === 'object'
+        ? (request.body as Record<string, unknown>)
+        : {};
+    const clientIdFromHeader = String(request.headers['x-client-id'] ?? '').trim();
+    const payload = trackVisitSchema.parse({
+      clientId: clientIdFromHeader || bodyPayload.clientId,
+      url: bodyPayload.url,
+      eventType: bodyPayload.eventType,
+      userAgent:
+        typeof bodyPayload.userAgent === 'string'
+          ? bodyPayload.userAgent
+          : String(request.headers['user-agent'] ?? ''),
+    });
+
+    const client = await trackVisit(payload, request.ip);
+
+    return {
+      ok: true,
+      client,
+    };
+  });
+
+  app.get('/api/history/visitors', async (request, reply) => {
+    if (!requireHistoryAccessToken(request, reply)) {
+      return;
+    }
+
+    const query = listVisitorClientsQuerySchema.parse(request.query ?? {});
+    const items = await listVisitorClients(query.limit ?? 100, {
+      search: query.search,
+      clientId: query.clientId,
+      nickname: query.nickname,
+      path: query.path,
+      visitedFrom: query.visitedFrom,
+      visitedTo: query.visitedTo,
+    });
+
+    return {
+      ok: true,
+      items,
+    };
+  });
+
+  app.get('/api/history/visitors/:clientId', async (request, reply) => {
+    if (!requireHistoryAccessToken(request, reply)) {
+      return;
+    }
+
+    const clientId = z.string().trim().min(1).parse((request.params as { clientId: string }).clientId);
+    const query = visitorHistoryQuerySchema.parse(request.query ?? {});
+    const client = await getVisitorClientByClientId(clientId);
+
+    if (!client) {
+      return reply.code(404).send({
+        message: '방문자를 찾을 수 없습니다.',
+      });
+    }
+
+    const visits = await listVisitorHistories(clientId, query.limit ?? 200);
+
+    return {
+      ok: true,
+      client,
+      visits,
+    };
+  });
+
+  app.patch('/api/history/visitors/:clientId/nickname', async (request, reply) => {
+    if (!requireHistoryAccessToken(request, reply)) {
+      return;
+    }
+
+    const clientId = z.string().trim().min(1).parse((request.params as { clientId: string }).clientId);
+    const payload = updateVisitorNicknameSchema.parse(request.body ?? {});
+    const client = await updateVisitorNickname(clientId, payload.nickname);
+
+    if (!client) {
+      return reply.code(404).send({
+        message: '닉네임을 수정할 방문자를 찾을 수 없습니다.',
+      });
+    }
+
+    return {
+      ok: true,
+      client,
+    };
+  });
+}
diff --git a/etc/servers/work-server/src/server.ts b/etc/servers/work-server/src/server.ts
new file mode 100755
index 0000000..128f797
--- /dev/null
+++ b/etc/servers/work-server/src/server.ts
@@ -0,0 +1,47 @@
+import { env } from './config/env.js';
+import { db } from './db/client.js';
+import { createApp } from './app.js';
+import { ChatService } from './services/chat-service.js';
+import { clearAllChatConversationJobStates } from './services/chat-room-service.js';
+import { shutdownNotificationProvider } from './services/notification-service.js';
+import { PlanWorker } from './workers/plan-worker.js';
+
+const app = createApp();
+const planWorker = new PlanWorker(app.log);
+const chatService = new ChatService(app.log);
+app.server.on('upgrade', chatService.attachUpgradeHandler());
+
+async function start() {
+  try {
+    await clearAllChatConversationJobStates();
+    await app.listen({
+      host: '0.0.0.0',
+      port: env.PORT,
+    });
+    planWorker.start();
+  } catch (error) {
+    app.log.error(error);
+    process.exit(1);
+  }
+}
+
+async function shutdown(signal: string) {
+  app.log.info(`Received ${signal}, closing server`);
+
+  await planWorker.stop();
+  chatService.close();
+  await app.close();
+  await shutdownNotificationProvider();
+  await db.destroy();
+  process.exit(0);
+}
+
+process.on('SIGINT', () => {
+  void shutdown('SIGINT');
+});
+
+process.on('SIGTERM', () => {
+  void shutdown('SIGTERM');
+});
+
+void start();
diff --git a/etc/servers/work-server/src/services/app-config-service.ts b/etc/servers/work-server/src/services/app-config-service.ts
new file mode 100755
index 0000000..a683734
--- /dev/null
+++ b/etc/servers/work-server/src/services/app-config-service.ts
@@ -0,0 +1,131 @@
+import { db } from '../db/client.js';
+
+export const APP_CONFIG_TABLE = 'app_configs';
+
+async function ensureAppConfigTable() {
+  const hasTable = await db.schema.hasTable(APP_CONFIG_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(APP_CONFIG_TABLE, (table) => {
+      table.increments('id').primary();
+      table.jsonb('config_json').notNullable().defaultTo('{}');
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['config_json', (table) => table.jsonb('config_json').notNullable().defaultTo('{}')],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(APP_CONFIG_TABLE, columnName);
+    if (!hasColumn) {
+      await db.schema.alterTable(APP_CONFIG_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function getAppConfig() {
+  await ensureAppConfigTable();
+
+  const row = await db(APP_CONFIG_TABLE).first();
+
+  if (!row) {
+    return null;
+  }
+
+  if (typeof row.config_json === 'string') {
+    try {
+      return JSON.parse(row.config_json) as Record<string, unknown>;
+    } catch {
+      return {};
+    }
+  }
+
+  return row.config_json ?? {};
+}
+
+export type AppConfigSnapshot = {
+  chat?: {
+    maxContextMessages?: number;
+    maxContextChars?: number;
+  };
+  automation?: {
+    autoRefreshEnabled?: boolean;
+    autoRefreshIntervalSeconds?: number;
+    autoReceiveScheduleType?: 'interval' | 'daily' | 'weekly';
+    autoReceiveIntervalSeconds?: number;
+    autoReceiveDailyTime?: string;
+    autoReceiveWeeklyDay?: 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+    autoReceiveWeeklyTime?: string;
+    notifyOnAutomationStart?: boolean;
+    notifyOnAutomationProgress?: boolean;
+    notifyOnAutomationCompletion?: boolean;
+    notifyOnAutomationRelease?: boolean;
+    notifyOnAutomationMain?: boolean;
+    notifyOnAutomationFailure?: boolean;
+    notifyOnAutomationRestart?: boolean;
+    notifyOnAutomationIssueResolved?: boolean;
+  };
+  worklogAutomation?: {
+    autoCreateDailyWorklog?: boolean;
+    dailyCreateTime?: string;
+    repeatRequestEnabled?: boolean;
+    repeatIntervalMinutes?: number;
+    includeScreenshots?: boolean;
+    includeChangedFiles?: boolean;
+    includeCommandLogs?: boolean;
+    template?: 'simple' | 'detailed';
+  };
+};
+
+export async function getAppConfigSnapshot(): Promise<AppConfigSnapshot> {
+  const raw = await getAppConfig();
+
+  if (!raw || typeof raw !== 'object') {
+    return {};
+  }
+
+  const snapshot = raw as AppConfigSnapshot;
+
+  if (snapshot.worklogAutomation) {
+    return {
+      ...snapshot,
+      worklogAutomation: {
+        ...snapshot.worklogAutomation,
+        repeatRequestEnabled: false,
+      },
+    };
+  }
+
+  return snapshot;
+}
+
+export async function upsertAppConfig(config: Record<string, unknown>) {
+  await ensureAppConfigTable();
+
+  const existing = await db(APP_CONFIG_TABLE).first();
+
+  if (!existing) {
+    const rows = await db(APP_CONFIG_TABLE)
+      .insert({
+        config_json: config,
+        updated_at: db.fn.now(),
+      })
+      .returning('*');
+    return rows[0]?.config_json ?? config;
+  }
+
+  const rows = await db(APP_CONFIG_TABLE)
+    .update({
+      config_json: config,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return rows[0]?.config_json ?? config;
+}
diff --git a/etc/servers/work-server/src/services/board-service.test.ts b/etc/servers/work-server/src/services/board-service.test.ts
new file mode 100644
index 0000000..1f35d0e
--- /dev/null
+++ b/etc/servers/work-server/src/services/board-service.test.ts
@@ -0,0 +1,23 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { BoardPostAutomationLockedError, buildBoardPostPlanNote } from './board-service.js';
+
+test('buildBoardPostPlanNote formats automation work memo with clear sections', () => {
+  assert.equal(
+    buildBoardPostPlanNote('  알림 개선  ', '본문 첫 줄\n본문 둘째 줄\n'),
+    [
+      '# 자동화 작업메모',
+      '',
+      '- 게시판 제목: 알림 개선',
+      '- 메모 출처: board_posts 자동화 접수',
+      '',
+      '## 요청 본문',
+      '본문 첫 줄\n본문 둘째 줄',
+    ].join('\n'),
+  );
+});
+
+test('BoardPostAutomationLockedError keeps user-facing message by action', () => {
+  assert.equal(new BoardPostAutomationLockedError('update').message, '자동화 접수된 작업메모는 수정할 수 없습니다.');
+  assert.equal(new BoardPostAutomationLockedError('delete').message, '자동화 접수된 작업메모는 삭제할 수 없습니다.');
+});
diff --git a/etc/servers/work-server/src/services/board-service.ts b/etc/servers/work-server/src/services/board-service.ts
new file mode 100755
index 0000000..07d58be
--- /dev/null
+++ b/etc/servers/work-server/src/services/board-service.ts
@@ -0,0 +1,347 @@
+import { z } from 'zod';
+import { db } from '../db/client.js';
+import {
+  ensurePlanTable,
+  normalizePlanAutomationType,
+  PLAN_TABLE,
+  planAutomationTypeSchema,
+} from './plan-service.js';
+
+export const BOARD_POSTS_TABLE = 'board_posts';
+
+export const boardPostPayloadSchema = z.object({
+  title: z.string().trim().min(1).max(200),
+  content: z.string().min(1).max(200000),
+  automationType: z.preprocess((value) => value, planAutomationTypeSchema.default('none')),
+});
+
+export type BoardPostItem = {
+  id: number;
+  title: string;
+  content: string;
+  preview: string;
+  automationType: z.infer<typeof boardPostPayloadSchema>['automationType'];
+  automationPlanItemId: number | null;
+  automationReceivedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export class BoardPostAutomationLockedError extends Error {
+  constructor(action: 'update' | 'delete') {
+    super(
+      action === 'delete'
+        ? '자동화 접수된 작업메모는 삭제할 수 없습니다.'
+        : '자동화 접수된 작업메모는 수정할 수 없습니다.',
+    );
+    this.name = 'BoardPostAutomationLockedError';
+  }
+}
+
+function createPreview(content: string) {
+  const normalized = content
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/!\[[^\]]*\]\([^)]+\)/g, ' ')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1')
+    .replace(/[#>*_`~-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function mapBoardPostRow(row: Record<string, unknown>): BoardPostItem {
+  const content = String(row.content ?? '');
+
+  return {
+    id: Number(row.id ?? 0),
+    title: String(row.title ?? ''),
+    content,
+    preview: createPreview(content),
+    automationType: normalizePlanAutomationType(row.automation_type),
+    automationPlanItemId: row.automation_plan_item_id === null || row.automation_plan_item_id === undefined
+      ? null
+      : Number(row.automation_plan_item_id),
+    automationReceivedAt: row.automation_received_at === null || row.automation_received_at === undefined
+      ? null
+      : String(row.automation_received_at),
+    createdAt: String(row.created_at ?? ''),
+    updatedAt: String(row.updated_at ?? ''),
+  };
+}
+
+function isBoardPostAutomationLocked(row: Record<string, unknown>) {
+  return Boolean(row.automation_received_at || row.automation_plan_item_id);
+}
+
+export function buildBoardPostPlanNote(title: string, content: string) {
+  const normalizedTitle = title.trim();
+  const normalizedContent = content.trim();
+
+  return [
+    '# 자동화 작업메모',
+    '',
+    `- 게시판 제목: ${normalizedTitle}`,
+    '- 메모 출처: board_posts 자동화 접수',
+    '',
+    '## 요청 본문',
+    normalizedContent,
+  ].join('\n');
+}
+
+function resolveInsertedId(result: unknown): number | null {
+  if (typeof result === 'number' && Number.isInteger(result) && result > 0) {
+    return result;
+  }
+
+  if (Array.isArray(result)) {
+    const first = result[0];
+
+    if (typeof first === 'number' && Number.isInteger(first) && first > 0) {
+      return first;
+    }
+
+    if (first && typeof first === 'object' && 'id' in first) {
+      const id = Number((first as { id?: unknown }).id);
+      return Number.isInteger(id) && id > 0 ? id : null;
+    }
+  }
+
+  if (result && typeof result === 'object' && 'id' in result) {
+    const id = Number((result as { id?: unknown }).id);
+    return Number.isInteger(id) && id > 0 ? id : null;
+  }
+
+  return null;
+}
+
+function supportsReturning() {
+  const clientName = String(db.client.config.client ?? '').toLowerCase();
+  return ['pg', 'postgres', 'postgresql', 'sqlite3', 'better-sqlite3', 'oracledb', 'mssql'].includes(clientName);
+}
+
+function isDuplicateSchemaError(error: unknown, codes: string[], patterns: RegExp[]) {
+  const candidate = error as { code?: unknown; message?: unknown };
+  const code = typeof candidate?.code === 'string' ? candidate.code : '';
+  const message = typeof candidate?.message === 'string' ? candidate.message : '';
+
+  return codes.includes(code) || patterns.some((pattern) => pattern.test(message));
+}
+
+function isDuplicateTableError(error: unknown) {
+  return isDuplicateSchemaError(error, ['42P07'], [/already exists/i]);
+}
+
+function isDuplicateColumnError(error: unknown) {
+  return isDuplicateSchemaError(error, ['42701'], [/already exists/i, /duplicate column/i]);
+}
+
+export async function ensureBoardPostsTable() {
+  const hasTable = await db.schema.hasTable(BOARD_POSTS_TABLE);
+
+  if (!hasTable) {
+    try {
+      await db.schema.createTable(BOARD_POSTS_TABLE, (table) => {
+        table.increments('id').primary();
+        table.string('title', 200).notNullable();
+        table.text('content').notNullable();
+        table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+        table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      });
+    } catch (error) {
+      if (!isDuplicateTableError(error)) {
+        throw error;
+      }
+    }
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['title', (table) => table.string('title', 200).notNullable().defaultTo('제목 없음')],
+    ['content', (table) => table.text('content').notNullable().defaultTo('')],
+    ['automation_type', (table) => table.string('automation_type', 40).notNullable().defaultTo('none')],
+    ['automation_plan_item_id', (table) => table.integer('automation_plan_item_id').nullable()],
+    ['automation_received_at', (table) => table.timestamp('automation_received_at', { useTz: true }).nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(BOARD_POSTS_TABLE, columnName);
+
+    if (!hasColumn) {
+      try {
+        await db.schema.alterTable(BOARD_POSTS_TABLE, (table) => {
+          createColumn(table);
+        });
+      } catch (error) {
+        if (!isDuplicateColumnError(error)) {
+          throw error;
+        }
+      }
+    }
+  }
+
+  await db(BOARD_POSTS_TABLE)
+    .where({ automation_type: 'plan_registration' })
+    .update({ automation_type: 'plan' });
+  await db(BOARD_POSTS_TABLE)
+    .where({ automation_type: 'general_development' })
+    .update({ automation_type: 'auto_worker' });
+}
+
+export async function listBoardPosts() {
+  await ensureBoardPostsTable();
+
+  const rows = await db(BOARD_POSTS_TABLE).select('*').orderBy('updated_at', 'desc').orderBy('id', 'desc');
+  return rows.map((row) => mapBoardPostRow(row));
+}
+
+export async function getBoardPost(id: number) {
+  await ensureBoardPostsTable();
+
+  const row = await db(BOARD_POSTS_TABLE).where({ id }).first();
+  return row ? mapBoardPostRow(row) : null;
+}
+
+export async function createBoardPost(payload: z.infer<typeof boardPostPayloadSchema>) {
+  await ensureBoardPostsTable();
+  const parsedPayload = boardPostPayloadSchema.parse(payload);
+  const insertQuery = db(BOARD_POSTS_TABLE).insert({
+    title: parsedPayload.title,
+    content: parsedPayload.content,
+    automation_type: parsedPayload.automationType,
+    created_at: db.fn.now(),
+    updated_at: db.fn.now(),
+  });
+  const insertResult = supportsReturning() ? await insertQuery.returning('id') : await insertQuery;
+
+  const insertedId = resolveInsertedId(insertResult);
+
+  if (!insertedId) {
+    throw new Error('게시글 저장 후 ID를 확인하지 못했습니다.');
+  }
+
+  const row = await db(BOARD_POSTS_TABLE).where({ id: insertedId }).first();
+
+  if (!row) {
+    throw new Error('저장된 게시글을 다시 불러오지 못했습니다.');
+  }
+
+  return mapBoardPostRow(row);
+}
+
+export async function receiveBoardPostAutomation(id: number) {
+  await ensureBoardPostsTable();
+  await ensurePlanTable();
+
+  return db.transaction(async (trx) => {
+    const currentRow = await trx(BOARD_POSTS_TABLE).where({ id }).forUpdate().first();
+
+    if (!currentRow) {
+      return null;
+    }
+
+    if (currentRow.automation_received_at || currentRow.automation_plan_item_id) {
+      return {
+        item: mapBoardPostRow(currentRow),
+        planItemId:
+          currentRow.automation_plan_item_id === null || currentRow.automation_plan_item_id === undefined
+            ? null
+            : Number(currentRow.automation_plan_item_id),
+        alreadyReceived: true,
+      };
+    }
+
+    const title = String(currentRow.title ?? '').trim();
+    const content = String(currentRow.content ?? '').trim();
+    const workId = `board-post-${id}`;
+    const insertQuery = trx(PLAN_TABLE).insert({
+      work_id: workId,
+      note: buildBoardPostPlanNote(title, content),
+      automation_type: normalizePlanAutomationType(currentRow.automation_type),
+      status: '등록',
+      release_target: 'release',
+      jangsing_processing_required: true,
+      auto_deploy_to_main: false,
+      worker_status: '대기',
+      last_error: null,
+      updated_at: trx.fn.now(),
+    });
+    const insertResult = supportsReturning() ? await insertQuery.returning('id') : await insertQuery;
+    const planItemId = resolveInsertedId(insertResult);
+
+    if (!planItemId) {
+      throw new Error('자동화 접수 후 Plan ID를 확인하지 못했습니다.');
+    }
+
+    const updateQuery = trx(BOARD_POSTS_TABLE)
+      .where({ id })
+      .update({
+        automation_plan_item_id: planItemId,
+        automation_received_at: trx.fn.now(),
+        updated_at: trx.fn.now(),
+      });
+    const updatedRows = supportsReturning() ? await updateQuery.returning('*') : [];
+    if (!supportsReturning()) {
+      await updateQuery;
+    }
+
+    const updatedRow = updatedRows[0] ?? (await trx(BOARD_POSTS_TABLE).where({ id }).first());
+
+    if (!updatedRow) {
+      throw new Error('자동화 접수된 게시글을 다시 불러오지 못했습니다.');
+    }
+
+    return {
+      item: mapBoardPostRow(updatedRow),
+      planItemId,
+      alreadyReceived: false,
+    };
+  });
+}
+
+export async function updateBoardPost(id: number, payload: z.infer<typeof boardPostPayloadSchema>) {
+  await ensureBoardPostsTable();
+  const parsedPayload = boardPostPayloadSchema.parse(payload);
+  return db.transaction(async (trx) => {
+    const currentRow = await trx(BOARD_POSTS_TABLE).where({ id }).forUpdate().first();
+
+    if (!currentRow) {
+      return null;
+    }
+
+    if (isBoardPostAutomationLocked(currentRow)) {
+      throw new BoardPostAutomationLockedError('update');
+    }
+
+    await trx(BOARD_POSTS_TABLE)
+      .where({ id })
+      .update({
+        title: parsedPayload.title,
+        content: parsedPayload.content,
+        automation_type: parsedPayload.automationType,
+        updated_at: trx.fn.now(),
+      });
+
+    const row = await trx(BOARD_POSTS_TABLE).where({ id }).first();
+    return row ? mapBoardPostRow(row) : null;
+  });
+}
+
+export async function deleteBoardPost(id: number) {
+  await ensureBoardPostsTable();
+  return db.transaction(async (trx) => {
+    const currentRow = await trx(BOARD_POSTS_TABLE).where({ id }).forUpdate().first();
+
+    if (!currentRow) {
+      return false;
+    }
+
+    if (isBoardPostAutomationLocked(currentRow)) {
+      throw new BoardPostAutomationLockedError('delete');
+    }
+
+    const deletedCount = await trx(BOARD_POSTS_TABLE).where({ id }).del();
+    return deletedCount > 0;
+  });
+}
diff --git a/etc/servers/work-server/src/services/chat-room-service.test.ts b/etc/servers/work-server/src/services/chat-room-service.test.ts
new file mode 100644
index 0000000..c50db03
--- /dev/null
+++ b/etc/servers/work-server/src/services/chat-room-service.test.ts
@@ -0,0 +1,211 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  buildChatConversationRequestPatchFromMessage,
+  mergeChatConversationRequestStatus,
+  shouldClearConversationJobState,
+  selectChatConversationResponseCandidate,
+} from './chat-room-service.js';
+
+test('mergeChatConversationRequestStatus keeps terminal states from being downgraded', () => {
+  assert.equal(mergeChatConversationRequestStatus('completed', 'accepted'), 'completed');
+  assert.equal(mergeChatConversationRequestStatus('started', 'accepted'), 'started');
+  assert.equal(mergeChatConversationRequestStatus('queued', 'accepted'), 'queued');
+  assert.equal(mergeChatConversationRequestStatus('accepted', 'completed'), 'completed');
+});
+
+test('buildChatConversationRequestPatchFromMessage ignores system progress messages', () => {
+  assert.equal(
+    buildChatConversationRequestPatchFromMessage({
+      id: 10,
+      author: 'system',
+      text: '요청 실행 중입니다.',
+      clientRequestId: 'chat-req-1',
+    }),
+    null,
+  );
+});
+
+test('buildChatConversationRequestPatchFromMessage builds user and codex request patches', () => {
+  assert.deepEqual(
+    buildChatConversationRequestPatchFromMessage({
+      id: 11,
+      author: 'user',
+      text: '질문',
+      clientRequestId: 'chat-req-2',
+    }),
+    {
+      requestId: 'chat-req-2',
+      status: 'accepted',
+      userMessageId: 11,
+      userText: '질문',
+    },
+  );
+
+  assert.deepEqual(
+    buildChatConversationRequestPatchFromMessage({
+      id: 12,
+      author: 'codex',
+      text: '답변',
+      clientRequestId: 'chat-req-2',
+    }),
+    {
+      requestId: 'chat-req-2',
+      status: 'started',
+      responseMessageId: 12,
+      responseText: '답변',
+    },
+  );
+});
+
+test('selectChatConversationResponseCandidate falls back to codex replies in the request window', () => {
+  const candidate = selectChatConversationResponseCandidate(
+    {
+      requestId: 'chat-req-3',
+      createdAt: '2026-04-18T14:00:00.000Z',
+      responseMessageId: null,
+    },
+    {
+      createdAt: '2026-04-18T14:10:00.000Z',
+    },
+    [
+      {
+        id: 1,
+        messageId: 1001,
+        author: 'codex',
+        text: '이전 답변',
+        clientRequestId: null,
+        createdAt: '2026-04-18T13:59:00.000Z',
+      },
+      {
+        id: 2,
+        messageId: 1002,
+        author: 'codex',
+        text: '현재 요청 답변',
+        clientRequestId: null,
+        createdAt: '2026-04-18T14:05:00.000Z',
+      },
+      {
+        id: 3,
+        messageId: 1003,
+        author: 'codex',
+        text: '다음 요청 답변',
+        clientRequestId: null,
+        createdAt: '2026-04-18T14:11:00.000Z',
+      },
+    ],
+  );
+
+  assert.deepEqual(candidate, {
+    id: 2,
+    messageId: 1002,
+    author: 'codex',
+    text: '현재 요청 답변',
+    clientRequestId: null,
+    createdAt: '2026-04-18T14:05:00.000Z',
+  });
+});
+
+test('shouldClearConversationJobState clears stale job state when terminal request already has a response', () => {
+  assert.equal(
+    shouldClearConversationJobState({
+      currentRequestId: 'chat-req-4',
+      currentJobStatus: 'started',
+      request: {
+        requestId: 'chat-req-4',
+        status: 'completed',
+        responseMessageId: 101,
+        responseText: '답변',
+        terminalAt: '2026-04-19T01:00:00.000Z',
+      },
+    }),
+    true,
+  );
+});
+
+test('shouldClearConversationJobState clears orphaned job state without a current request id', () => {
+  assert.equal(
+    shouldClearConversationJobState({
+      currentRequestId: null,
+      currentJobStatus: 'started',
+      request: null,
+    }),
+    true,
+  );
+});
+
+test('shouldClearConversationJobState keeps active job state when request is still running without a response', () => {
+  assert.equal(
+    shouldClearConversationJobState({
+      currentRequestId: 'chat-req-5',
+      currentJobStatus: 'started',
+      request: {
+        requestId: 'chat-req-5',
+        status: 'started',
+        responseMessageId: null,
+        responseText: '',
+        terminalAt: null,
+      },
+    }),
+    false,
+  );
+});
+
+test('shouldClearConversationJobState does not clear placeholder-only started responses', () => {
+  assert.equal(
+    shouldClearConversationJobState({
+      currentRequestId: 'chat-req-6',
+      currentJobStatus: 'started',
+      request: {
+        requestId: 'chat-req-6',
+        status: 'started',
+        responseMessageId: 301,
+        responseText: '응답을 준비하고 있습니다...',
+        terminalAt: null,
+      },
+    }),
+    false,
+  );
+});
+
+test('shouldClearConversationJobState clears stale placeholder-only started responses when runtime is gone', () => {
+  assert.equal(
+    shouldClearConversationJobState({
+      currentRequestId: 'chat-req-7',
+      currentJobStatus: 'started',
+      currentStatusUpdatedAt: '2026-04-19T08:08:35.813Z',
+      runtimeActive: false,
+      nowMs: Date.parse('2026-04-19T08:11:36.000Z'),
+      request: {
+        requestId: 'chat-req-7',
+        status: 'started',
+        responseMessageId: 302,
+        responseText: '응답을 준비하고 있습니다...',
+        terminalAt: null,
+        updatedAt: '2026-04-19T08:08:56.086Z',
+      },
+    }),
+    true,
+  );
+});
+
+test('shouldClearConversationJobState keeps placeholder-only started responses while runtime is active', () => {
+  assert.equal(
+    shouldClearConversationJobState({
+      currentRequestId: 'chat-req-8',
+      currentJobStatus: 'started',
+      currentStatusUpdatedAt: '2026-04-19T08:08:35.813Z',
+      runtimeActive: true,
+      nowMs: Date.parse('2026-04-19T08:11:36.000Z'),
+      request: {
+        requestId: 'chat-req-8',
+        status: 'started',
+        responseMessageId: 303,
+        responseText: '응답을 준비하고 있습니다...',
+        terminalAt: null,
+        updatedAt: '2026-04-19T08:08:56.086Z',
+      },
+    }),
+    false,
+  );
+});
diff --git a/etc/servers/work-server/src/services/chat-room-service.ts b/etc/servers/work-server/src/services/chat-room-service.ts
new file mode 100644
index 0000000..5850914
--- /dev/null
+++ b/etc/servers/work-server/src/services/chat-room-service.ts
@@ -0,0 +1,1967 @@
+import { z } from 'zod';
+import { db } from '../db/client.js';
+import { chatRuntimeService } from './chat-runtime-service.js';
+
+export const CHAT_CONVERSATION_TABLE = 'chat_conversations';
+export const CHAT_CONVERSATION_MESSAGE_TABLE = 'chat_conversation_messages';
+export const CHAT_CONVERSATION_CLIENT_TABLE = 'chat_conversation_clients';
+export const CHAT_CONVERSATION_REQUEST_TABLE = 'chat_conversation_requests';
+export const CHAT_CONVERSATION_ACTIVITY_TABLE = 'chat_conversation_request_activities';
+const CHAT_ACTIVITY_MESSAGE_PREFIX = '[[activity-log]]';
+const STALE_CHAT_REQUEST_TIMEOUT_MS = 2 * 60 * 1000;
+
+const conversationPayloadSchema = z.object({
+  sessionId: z.string().trim().min(1).max(120),
+  clientId: z.string().trim().max(120).nullable().optional(),
+  title: z.string().trim().max(200).nullable().optional(),
+  contextLabel: z.string().trim().max(200).nullable().optional(),
+  contextDescription: z.string().trim().max(2000).nullable().optional(),
+  notifyOffline: z.boolean().optional(),
+});
+
+const conversationMessagePayloadSchema = z.object({
+  sessionId: z.string().trim().min(1).max(120),
+  messageId: z.number().int().positive(),
+  author: z.enum(['codex', 'system', 'user']),
+  text: z.string().max(200000),
+  timestamp: z.string().trim().max(40),
+  clientRequestId: z.string().trim().max(120).nullable().optional(),
+});
+
+export type ChatConversationItem = {
+  sessionId: string;
+  clientId: string | null;
+  title: string;
+  contextLabel: string | null;
+  contextDescription: string | null;
+  notifyOffline: boolean;
+  hasUnreadResponse: boolean;
+  currentRequestId: string | null;
+  currentJobStatus: 'queued' | 'started' | 'completed' | 'failed' | null;
+  currentJobMessage: string | null;
+  currentQueueSize: number;
+  currentStatusUpdatedAt: string | null;
+  lastMessagePreview: string;
+  createdAt: string;
+  updatedAt: string;
+  lastMessageAt: string | null;
+};
+
+export type StoredChatMessage = {
+  id: number;
+  author: 'codex' | 'system' | 'user';
+  text: string;
+  timestamp: string;
+  clientRequestId?: string | null;
+};
+
+export type ChatConversationRequestStatus =
+  | 'accepted'
+  | 'queued'
+  | 'started'
+  | 'completed'
+  | 'failed'
+  | 'cancelled'
+  | 'removed';
+
+export type ChatConversationRequestItem = {
+  sessionId: string;
+  requestId: string;
+  status: ChatConversationRequestStatus;
+  statusMessage: string | null;
+  userMessageId: number | null;
+  userText: string;
+  responseMessageId: number | null;
+  responseText: string;
+  hasResponse: boolean;
+  canDelete: boolean;
+  createdAt: string;
+  updatedAt: string;
+  answeredAt: string | null;
+  terminalAt: string | null;
+};
+
+export type ChatConversationActivityLogItem = {
+  sessionId: string;
+  requestId: string;
+  lines: string[];
+  updatedAt: string | null;
+};
+
+type ChatConversationRequestStatusPatch = {
+  requestId: string;
+  status?: ChatConversationRequestStatus;
+  userMessageId?: number | null;
+  userText?: string | null;
+  responseMessageId?: number | null;
+  responseText?: string | null;
+};
+
+type ChatConversationResponseCandidate = {
+  id: number;
+  messageId: number;
+  author: StoredChatMessage['author'];
+  text: string;
+  clientRequestId: string | null;
+  createdAt: string | null;
+};
+
+type ChatConversationClientPreference = {
+  sessionId: string;
+  clientId: string;
+  notifyOffline: boolean;
+  lastReadResponseMessageId: number | null;
+};
+
+function createPreview(text: string) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function isPreviewableConversationMessage(row: { author?: unknown; text?: unknown }) {
+  const author = String(row.author ?? '');
+  const text = String(row.text ?? '').trim();
+
+  if (!text) {
+    return false;
+  }
+
+  if (author === 'system' && text.startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`)) {
+    return false;
+  }
+
+  return author === 'user' || author === 'codex';
+}
+
+function buildConversationTitle(text: string) {
+  const preview = createPreview(text);
+  return preview || '새 대화';
+}
+
+function mapConversationRow(row: Record<string, unknown>): ChatConversationItem {
+  return {
+    sessionId: String(row.session_id ?? ''),
+    clientId: row.client_id == null ? null : String(row.client_id),
+    title: String(row.title ?? '새 대화'),
+    contextLabel: row.context_label == null ? null : String(row.context_label),
+    contextDescription: row.context_description == null ? null : String(row.context_description),
+    notifyOffline: Boolean(row.notify_offline),
+    hasUnreadResponse: Boolean(row.has_unread_response),
+    currentRequestId: row.current_request_id == null ? null : String(row.current_request_id),
+    currentJobStatus: row.current_job_status == null ? null : String(row.current_job_status) as ChatConversationItem['currentJobStatus'],
+    currentJobMessage: row.current_job_message == null ? null : String(row.current_job_message),
+    currentQueueSize: Number(row.current_queue_size ?? 0),
+    currentStatusUpdatedAt: row.current_status_updated_at == null ? null : String(row.current_status_updated_at),
+    lastMessagePreview: String(row.last_message_preview ?? ''),
+    createdAt: String(row.created_at ?? ''),
+    updatedAt: String(row.updated_at ?? ''),
+    lastMessageAt: row.last_message_at == null ? null : String(row.last_message_at),
+  };
+}
+
+function mapMessageRow(row: Record<string, unknown>): StoredChatMessage {
+  return {
+    id: Number(row.message_id ?? row.id ?? 0),
+    author: String(row.author ?? 'codex') as StoredChatMessage['author'],
+    text: String(row.text ?? ''),
+    timestamp: String(row.display_timestamp ?? ''),
+    clientRequestId: row.client_request_id == null ? null : String(row.client_request_id),
+  };
+}
+
+function isVisibleConversationMessage(message: StoredChatMessage) {
+  if (message.author !== 'system') {
+    return true;
+  }
+
+  return message.text.startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`);
+}
+
+function mapClientPreferenceRow(row: Record<string, unknown>): ChatConversationClientPreference {
+  return {
+    sessionId: String(row.session_id ?? ''),
+    clientId: String(row.client_id ?? ''),
+    notifyOffline: Boolean(row.notify_offline),
+    lastReadResponseMessageId:
+      row.last_read_response_message_id == null ? null : Number(row.last_read_response_message_id),
+  };
+}
+
+function mapRequestRow(row: Record<string, unknown>): ChatConversationRequestItem {
+  const status = String(row.status ?? 'accepted') as ChatConversationRequestStatus;
+  const hasResponse = row.response_message_id != null || String(row.response_text ?? '').trim().length > 0;
+  const canDelete = !hasResponse && !['queued', 'started', 'completed'].includes(status);
+
+  return {
+    sessionId: String(row.session_id ?? ''),
+    requestId: String(row.request_id ?? ''),
+    status,
+    statusMessage: row.status_message == null ? null : String(row.status_message),
+    userMessageId: row.user_message_id == null ? null : Number(row.user_message_id),
+    userText: String(row.user_text ?? ''),
+    responseMessageId: row.response_message_id == null ? null : Number(row.response_message_id),
+    responseText: String(row.response_text ?? ''),
+    hasResponse,
+    canDelete,
+    createdAt: String(row.created_at ?? ''),
+    updatedAt: String(row.updated_at ?? ''),
+    answeredAt: row.answered_at == null ? null : String(row.answered_at),
+    terminalAt: row.terminal_at == null ? null : String(row.terminal_at),
+  };
+}
+
+function normalizeClientId(clientId?: string | null) {
+  return clientId?.trim() || null;
+}
+
+function getTimeValue(value: string | null | undefined) {
+  if (!value) {
+    return 0;
+  }
+
+  const timestamp = new Date(value).getTime();
+  return Number.isFinite(timestamp) ? timestamp : 0;
+}
+
+function isRuntimeRequestActive(requestId?: string | null) {
+  const normalizedRequestId = requestId?.trim() || null;
+
+  if (!normalizedRequestId) {
+    return false;
+  }
+
+  const detail = chatRuntimeService.getJobDetail(normalizedRequestId);
+  return detail.item != null && detail.terminalStatus == null;
+}
+
+function isTerminalRequestStatus(status: ChatConversationRequestStatus | null | undefined) {
+  return status === 'completed' || status === 'failed' || status === 'cancelled' || status === 'removed';
+}
+
+function isPreparingChatReplyText(text?: string | null) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.startsWith('응답을 준비하고 있습니다');
+}
+
+function hasStoredRequestResponse(request: {
+  responseMessageId?: number | null;
+  responseText?: string | null;
+}) {
+  const normalizedResponseText = String(request.responseText ?? '').trim();
+
+  if (normalizedResponseText.length > 0) {
+    return !isPreparingChatReplyText(normalizedResponseText);
+  }
+
+  return request.responseMessageId != null;
+}
+
+function isConversationRequestActive(
+  conversation: {
+    current_request_id?: unknown;
+    current_job_status?: unknown;
+  } | null | undefined,
+  requestId?: string | null,
+) {
+  const normalizedRequestId = requestId?.trim() || null;
+
+  if (!normalizedRequestId) {
+    return false;
+  }
+
+  const currentRequestId = String(conversation?.current_request_id ?? '').trim() || null;
+  const currentJobStatus = String(conversation?.current_job_status ?? '').trim();
+
+  if (currentRequestId !== normalizedRequestId) {
+    return false;
+  }
+
+  return currentJobStatus === 'queued' || currentJobStatus === 'started';
+}
+
+function normalizeStaleRequestItem(
+  item: ChatConversationRequestItem,
+  conversation: {
+    current_request_id?: unknown;
+    current_job_status?: unknown;
+    current_status_updated_at?: unknown;
+  } | null | undefined,
+) {
+  const runtimeActive = isRuntimeRequestActive(item.requestId);
+
+  if (
+    (item.status === 'queued' || item.status === 'started') &&
+    !item.hasResponse &&
+    !isConversationRequestActive(conversation, item.requestId)
+  ) {
+    return {
+      ...item,
+      status: 'failed' as const,
+      statusMessage: item.statusMessage ?? '중단된 오래된 요청',
+      canDelete: true,
+      terminalAt: item.terminalAt ?? item.updatedAt,
+    };
+  }
+
+  if (
+    shouldClearConversationJobState({
+      currentRequestId: String(conversation?.current_request_id ?? ''),
+      currentJobStatus:
+        conversation?.current_job_status == null
+          ? null
+          : String(conversation.current_job_status) as ChatConversationItem['currentJobStatus'],
+      currentStatusUpdatedAt:
+        conversation?.current_status_updated_at == null ? null : String(conversation.current_status_updated_at),
+      runtimeActive,
+      request: item,
+    })
+  ) {
+    return {
+      ...item,
+      status: 'failed' as const,
+      statusMessage: item.statusMessage ?? '중단된 오래된 요청',
+      canDelete: true,
+      terminalAt: item.terminalAt ?? item.updatedAt,
+    };
+  }
+
+  return item;
+}
+
+export function shouldClearConversationJobState(params: {
+  currentRequestId?: string | null;
+  currentJobStatus?: ChatConversationItem['currentJobStatus'];
+  currentStatusUpdatedAt?: string | null;
+  runtimeActive?: boolean;
+  nowMs?: number;
+  request:
+    | {
+        requestId?: string | null;
+        status?: ChatConversationRequestStatus | null;
+        responseMessageId?: number | null;
+        responseText?: string | null;
+        terminalAt?: string | null;
+        updatedAt?: string | null;
+      }
+    | null
+    | undefined;
+}) {
+  const currentJobStatus = params.currentJobStatus ?? null;
+  const requestStatus = params.request?.status ?? null;
+  const hasStoredResponse = hasStoredRequestResponse(params.request ?? {});
+
+  if (!currentJobStatus) {
+    return false;
+  }
+
+  const currentRequestId = params.currentRequestId?.trim() || null;
+
+  if (!currentRequestId) {
+    return true;
+  }
+
+  const requestId = params.request?.requestId?.trim() || null;
+
+  if (!requestId || requestId !== currentRequestId) {
+    return false;
+  }
+
+  const runtimeActive = params.runtimeActive === true;
+  const lastUpdatedAt = Math.max(
+    getTimeValue(params.currentStatusUpdatedAt),
+    getTimeValue(params.request?.updatedAt),
+  );
+  const nowMs = Number.isFinite(params.nowMs) ? Number(params.nowMs) : Date.now();
+  const isStaleInProgressState =
+    !runtimeActive &&
+    (currentJobStatus === 'queued' || currentJobStatus === 'started') &&
+    !hasStoredRequestResponse(params.request ?? {}) &&
+    !isTerminalRequestStatus(params.request?.status ?? null) &&
+    lastUpdatedAt > 0 &&
+    nowMs - lastUpdatedAt >= STALE_CHAT_REQUEST_TIMEOUT_MS;
+
+  return (
+    (requestStatus != null && requestStatus !== 'completed' && isTerminalRequestStatus(requestStatus)) ||
+    hasStoredResponse ||
+    isStaleInProgressState
+  );
+}
+
+function getRequestStatusRank(status: ChatConversationRequestStatus | null | undefined) {
+  switch (status) {
+    case 'accepted':
+      return 0;
+    case 'queued':
+      return 1;
+    case 'started':
+      return 2;
+    case 'completed':
+    case 'failed':
+    case 'cancelled':
+    case 'removed':
+      return 3;
+    default:
+      return -1;
+  }
+}
+
+export function mergeChatConversationRequestStatus(
+  currentStatus: ChatConversationRequestStatus | null | undefined,
+  incomingStatus: ChatConversationRequestStatus | null | undefined,
+): ChatConversationRequestStatus {
+  const normalizedCurrent = currentStatus ?? null;
+  const normalizedIncoming = incomingStatus ?? null;
+
+  if (!normalizedCurrent && !normalizedIncoming) {
+    return 'accepted';
+  }
+
+  if (!normalizedCurrent) {
+    return normalizedIncoming ?? 'accepted';
+  }
+
+  if (!normalizedIncoming) {
+    return normalizedCurrent;
+  }
+
+  if (isTerminalRequestStatus(normalizedCurrent) && !isTerminalRequestStatus(normalizedIncoming)) {
+    return normalizedCurrent;
+  }
+
+  if (!isTerminalRequestStatus(normalizedCurrent) && isTerminalRequestStatus(normalizedIncoming)) {
+    return normalizedIncoming;
+  }
+
+  return getRequestStatusRank(normalizedIncoming) >= getRequestStatusRank(normalizedCurrent)
+    ? normalizedIncoming
+    : normalizedCurrent;
+}
+
+export function buildChatConversationRequestPatchFromMessage(message: {
+  id: number;
+  author: StoredChatMessage['author'];
+  text: string;
+  clientRequestId?: string | null;
+}): ChatConversationRequestStatusPatch | null {
+  const normalizedRequestId = message.clientRequestId?.trim() || null;
+
+  if (!normalizedRequestId) {
+    return null;
+  }
+
+  if (message.author === 'user') {
+    return {
+      requestId: normalizedRequestId,
+      status: 'accepted',
+      userMessageId: message.id,
+      userText: message.text,
+    };
+  }
+
+  if (message.author === 'codex') {
+    return {
+      requestId: normalizedRequestId,
+      status: 'started',
+      responseMessageId: message.id,
+      responseText: message.text,
+    };
+  }
+
+  return null;
+}
+
+export function selectChatConversationResponseCandidate(
+  request: {
+    requestId: string;
+    createdAt: string;
+    responseMessageId?: number | null;
+  },
+  nextRequest: {
+    createdAt: string;
+  } | undefined,
+  messages: ChatConversationResponseCandidate[],
+) {
+  const normalizedRequestId = request.requestId.trim();
+
+  if (!normalizedRequestId) {
+    return null;
+  }
+
+  const directMatches = messages.filter(
+    (message) => message.author === 'codex' && message.clientRequestId?.trim() === normalizedRequestId,
+  );
+
+  if (directMatches.length > 0) {
+    return directMatches.at(-1) ?? null;
+  }
+
+  if (request.responseMessageId != null) {
+    const responseMessageMatch = messages.find(
+      (message) => message.author === 'codex' && message.messageId === request.responseMessageId,
+    );
+
+    if (responseMessageMatch) {
+      return responseMessageMatch;
+    }
+  }
+
+  const requestCreatedAt = getTimeValue(request.createdAt);
+  const nextRequestCreatedAt = getTimeValue(nextRequest?.createdAt);
+  const windowMatches = messages.filter((message) => {
+    if (message.author !== 'codex') {
+      return false;
+    }
+
+    const linkedRequestId = message.clientRequestId?.trim() || null;
+
+    if (linkedRequestId && linkedRequestId !== normalizedRequestId) {
+      return false;
+    }
+
+    const createdAt = getTimeValue(message.createdAt);
+
+    if (requestCreatedAt > 0 && createdAt > 0 && createdAt < requestCreatedAt) {
+      return false;
+    }
+
+    if (nextRequestCreatedAt > 0 && createdAt > 0 && createdAt >= nextRequestCreatedAt) {
+      return false;
+    }
+
+    return Boolean(String(message.text ?? '').trim());
+  });
+
+  return windowMatches.at(-1) ?? null;
+}
+
+async function getLatestPreviewableMessageMap(sessionIds: string[]) {
+  const normalizedSessionIds = sessionIds.map((sessionId) => sessionId.trim()).filter(Boolean);
+
+  if (normalizedSessionIds.length === 0) {
+    return new Map<string, { text: string; createdAt: string | null }>();
+  }
+
+  const rows = await db(CHAT_CONVERSATION_MESSAGE_TABLE)
+    .select('session_id', 'author', 'text', 'created_at')
+    .whereIn('session_id', normalizedSessionIds)
+    .whereIn('author', ['user', 'codex'])
+    .orderBy('session_id', 'asc')
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+
+  const messageMap = new Map<string, { text: string; createdAt: string | null }>();
+
+  for (const row of rows) {
+    const sessionId = String(row.session_id ?? '').trim();
+
+    if (!sessionId || messageMap.has(sessionId) || !isPreviewableConversationMessage(row)) {
+      continue;
+    }
+
+    messageMap.set(sessionId, {
+      text: String(row.text ?? ''),
+      createdAt: row.created_at == null ? null : String(row.created_at),
+    });
+  }
+
+  return messageMap;
+}
+
+async function getLatestRequestPreviewMap(sessionIds: string[]) {
+  const normalizedSessionIds = Array.from(new Set(sessionIds.map((sessionId) => sessionId.trim()).filter(Boolean)));
+
+  if (normalizedSessionIds.length === 0) {
+    return new Map<string, { text: string; createdAt: string | null }>();
+  }
+
+  const rows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .select('session_id', 'user_text', 'created_at', 'status', 'request_id')
+    .whereIn('session_id', normalizedSessionIds)
+    .whereNot('status', 'removed')
+    .orderBy('session_id', 'asc')
+    .orderBy('created_at', 'desc')
+    .orderBy('request_id', 'desc');
+
+  const requestMap = new Map<string, { text: string; createdAt: string | null }>();
+
+  for (const row of rows) {
+    const sessionId = String(row.session_id ?? '').trim();
+    const userText = String(row.user_text ?? '').trim();
+
+    if (!sessionId || requestMap.has(sessionId) || !userText) {
+      continue;
+    }
+
+    requestMap.set(sessionId, {
+      text: userText,
+      createdAt: row.created_at == null ? null : String(row.created_at),
+    });
+  }
+
+  return requestMap;
+}
+
+function resolveConversationPreviewOverride(
+  mapped: ChatConversationItem,
+  latestMessage: { text: string; createdAt: string | null } | undefined,
+  latestRequest: { text: string; createdAt: string | null } | undefined,
+) {
+  const latestMessageTime = getTimeValue(latestMessage?.createdAt);
+  const latestRequestTime = getTimeValue(latestRequest?.createdAt);
+
+  if (latestRequest && latestRequestTime > latestMessageTime) {
+    return {
+      ...mapped,
+      lastMessagePreview: createPreview(latestRequest.text),
+      lastMessageAt: latestRequest.createdAt,
+    };
+  }
+
+  if (latestMessage) {
+    return {
+      ...mapped,
+      lastMessagePreview: createPreview(latestMessage.text),
+      lastMessageAt: latestMessage.createdAt,
+    };
+  }
+
+  return mapped;
+}
+
+async function getLatestResponseMessageIdMap(sessionIds: string[]) {
+  const normalizedSessionIds = Array.from(new Set(sessionIds.map((sessionId) => sessionId.trim()).filter(Boolean)));
+
+  if (normalizedSessionIds.length === 0) {
+    return new Map<string, number>();
+  }
+
+  const rows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .select('session_id', 'response_message_id')
+    .whereIn('session_id', normalizedSessionIds)
+    .whereNotNull('response_message_id')
+    .orderBy('session_id', 'asc')
+    .orderBy('response_message_id', 'desc');
+
+  const responseMap = new Map<string, number>();
+
+  for (const row of rows) {
+    const sessionId = String(row.session_id ?? '').trim();
+    const responseMessageId =
+      row.response_message_id == null ? null : Number(row.response_message_id);
+
+    if (!sessionId || responseMessageId == null || responseMap.has(sessionId)) {
+      continue;
+    }
+
+    responseMap.set(sessionId, responseMessageId);
+  }
+
+  return responseMap;
+}
+
+async function getLatestResponseMessageId(sessionId: string) {
+  const responseMap = await getLatestResponseMessageIdMap([sessionId]);
+  return responseMap.get(sessionId.trim()) ?? null;
+}
+
+export async function ensureChatConversationTables() {
+  const hasConversationTable = await db.schema.hasTable(CHAT_CONVERSATION_TABLE);
+
+  if (!hasConversationTable) {
+    await db.schema.createTable(CHAT_CONVERSATION_TABLE, (table) => {
+      table.string('session_id', 120).primary();
+      table.string('client_id', 120).nullable().index();
+      table.string('title', 200).notNullable().defaultTo('새 대화');
+      table.string('context_label', 200).nullable();
+      table.text('context_description').nullable();
+      table.boolean('notify_offline').notNullable().defaultTo(false);
+      table.string('current_request_id', 120).nullable();
+      table.string('current_job_status', 40).nullable();
+      table.text('current_job_message').nullable();
+      table.integer('current_queue_size').notNullable().defaultTo(0);
+      table.timestamp('current_status_updated_at', { useTz: true }).nullable();
+      table.text('last_message_preview').notNullable().defaultTo('');
+      table.timestamp('last_message_at', { useTz: true }).nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+  }
+
+  const requiredConversationColumns: Array<[string, (table: any) => void]> = [
+    ['client_id', (table) => table.string('client_id', 120).nullable().index()],
+    ['title', (table) => table.string('title', 200).notNullable().defaultTo('새 대화')],
+    ['context_label', (table) => table.string('context_label', 200).nullable()],
+    ['context_description', (table) => table.text('context_description').nullable()],
+    ['notify_offline', (table) => table.boolean('notify_offline').notNullable().defaultTo(false)],
+    ['current_request_id', (table) => table.string('current_request_id', 120).nullable()],
+    ['current_job_status', (table) => table.string('current_job_status', 40).nullable()],
+    ['current_job_message', (table) => table.text('current_job_message').nullable()],
+    ['current_queue_size', (table) => table.integer('current_queue_size').notNullable().defaultTo(0)],
+    ['current_status_updated_at', (table) => table.timestamp('current_status_updated_at', { useTz: true }).nullable()],
+    ['last_message_preview', (table) => table.text('last_message_preview').notNullable().defaultTo('')],
+    ['last_message_at', (table) => table.timestamp('last_message_at', { useTz: true }).nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredConversationColumns) {
+    const hasColumn = await db.schema.hasColumn(CHAT_CONVERSATION_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(CHAT_CONVERSATION_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+
+  const hasClientTable = await db.schema.hasTable(CHAT_CONVERSATION_CLIENT_TABLE);
+
+  if (!hasClientTable) {
+    await db.schema.createTable(CHAT_CONVERSATION_CLIENT_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('session_id', 120).notNullable().index();
+      table.string('client_id', 120).notNullable().index();
+      table.boolean('notify_offline').notNullable().defaultTo(false);
+      table.bigInteger('last_read_response_message_id').nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.unique(['session_id', 'client_id']);
+    });
+  }
+
+  const requiredClientColumns: Array<[string, (table: any) => void]> = [
+    ['session_id', (table) => table.string('session_id', 120).notNullable().index()],
+    ['client_id', (table) => table.string('client_id', 120).notNullable().index()],
+    ['notify_offline', (table) => table.boolean('notify_offline').notNullable().defaultTo(false)],
+    ['last_read_response_message_id', (table) => table.bigInteger('last_read_response_message_id').nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredClientColumns) {
+    const hasColumn = await db.schema.hasColumn(CHAT_CONVERSATION_CLIENT_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(CHAT_CONVERSATION_CLIENT_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+
+  const hasMessageTable = await db.schema.hasTable(CHAT_CONVERSATION_MESSAGE_TABLE);
+
+  if (!hasMessageTable) {
+    await db.schema.createTable(CHAT_CONVERSATION_MESSAGE_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('session_id', 120).notNullable().index();
+      table.bigInteger('message_id').notNullable();
+      table.string('author', 20).notNullable();
+      table.text('text').notNullable();
+      table.string('display_timestamp', 40).notNullable().defaultTo('');
+      table.string('client_request_id', 120).nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.unique(['session_id', 'message_id']);
+    });
+  }
+
+  const requiredMessageColumns: Array<[string, (table: any) => void]> = [
+    ['session_id', (table) => table.string('session_id', 120).notNullable().index()],
+    ['message_id', (table) => table.bigInteger('message_id').notNullable()],
+    ['author', (table) => table.string('author', 20).notNullable().defaultTo('codex')],
+    ['text', (table) => table.text('text').notNullable().defaultTo('')],
+    ['display_timestamp', (table) => table.string('display_timestamp', 40).notNullable().defaultTo('')],
+    ['client_request_id', (table) => table.string('client_request_id', 120).nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredMessageColumns) {
+    const hasColumn = await db.schema.hasColumn(CHAT_CONVERSATION_MESSAGE_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(CHAT_CONVERSATION_MESSAGE_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+
+  const hasRequestTable = await db.schema.hasTable(CHAT_CONVERSATION_REQUEST_TABLE);
+
+  if (!hasRequestTable) {
+    await db.schema.createTable(CHAT_CONVERSATION_REQUEST_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('session_id', 120).notNullable().index();
+      table.string('request_id', 120).notNullable();
+      table.string('status', 40).notNullable().defaultTo('accepted');
+      table.text('status_message').nullable();
+      table.bigInteger('user_message_id').nullable();
+      table.text('user_text').notNullable().defaultTo('');
+      table.bigInteger('response_message_id').nullable();
+      table.text('response_text').notNullable().defaultTo('');
+      table.timestamp('answered_at', { useTz: true }).nullable();
+      table.timestamp('terminal_at', { useTz: true }).nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.unique(['session_id', 'request_id']);
+    });
+  }
+
+  const requiredRequestColumns: Array<[string, (table: any) => void]> = [
+    ['session_id', (table) => table.string('session_id', 120).notNullable().index()],
+    ['request_id', (table) => table.string('request_id', 120).notNullable()],
+    ['status', (table) => table.string('status', 40).notNullable().defaultTo('accepted')],
+    ['status_message', (table) => table.text('status_message').nullable()],
+    ['user_message_id', (table) => table.bigInteger('user_message_id').nullable()],
+    ['user_text', (table) => table.text('user_text').notNullable().defaultTo('')],
+    ['response_message_id', (table) => table.bigInteger('response_message_id').nullable()],
+    ['response_text', (table) => table.text('response_text').notNullable().defaultTo('')],
+    ['answered_at', (table) => table.timestamp('answered_at', { useTz: true }).nullable()],
+    ['terminal_at', (table) => table.timestamp('terminal_at', { useTz: true }).nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredRequestColumns) {
+    const hasColumn = await db.schema.hasColumn(CHAT_CONVERSATION_REQUEST_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(CHAT_CONVERSATION_REQUEST_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+
+  const hasActivityTable = await db.schema.hasTable(CHAT_CONVERSATION_ACTIVITY_TABLE);
+
+  if (!hasActivityTable) {
+    await db.schema.createTable(CHAT_CONVERSATION_ACTIVITY_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('session_id', 120).notNullable().index();
+      table.string('request_id', 120).notNullable().index();
+      table.integer('line_no').notNullable();
+      table.text('text').notNullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.unique(['session_id', 'request_id', 'line_no']);
+    });
+  }
+
+  const requiredActivityColumns: Array<[string, (table: any) => void]> = [
+    ['session_id', (table) => table.string('session_id', 120).notNullable().index()],
+    ['request_id', (table) => table.string('request_id', 120).notNullable().index()],
+    ['line_no', (table) => table.integer('line_no').notNullable()],
+    ['text', (table) => table.text('text').notNullable().defaultTo('')],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredActivityColumns) {
+    const hasColumn = await db.schema.hasColumn(CHAT_CONVERSATION_ACTIVITY_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(CHAT_CONVERSATION_ACTIVITY_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function getChatConversation(sessionId: string, clientId?: string | null) {
+  await ensureChatConversationTables();
+  const normalizedSessionId = sessionId.trim();
+  let row = await db(CHAT_CONVERSATION_TABLE).where({ session_id: normalizedSessionId }).first();
+
+  if (!row) {
+    return null;
+  }
+
+  const currentRequestId = String(row.current_request_id ?? '').trim() || null;
+
+  if (
+    shouldClearConversationJobState({
+      currentRequestId,
+      currentJobStatus: row.current_job_status == null ? null : String(row.current_job_status) as ChatConversationItem['currentJobStatus'],
+      currentStatusUpdatedAt: row.current_status_updated_at == null ? null : String(row.current_status_updated_at),
+      runtimeActive: isRuntimeRequestActive(currentRequestId),
+      request: currentRequestId
+        ? await db(CHAT_CONVERSATION_REQUEST_TABLE)
+            .where({
+              session_id: normalizedSessionId,
+              request_id: currentRequestId,
+            })
+            .first()
+            .then((requestRow) =>
+              requestRow
+                ? {
+                    requestId: String(requestRow.request_id ?? ''),
+                    status: String(requestRow.status ?? '') as ChatConversationRequestStatus,
+                    responseMessageId: requestRow.response_message_id == null ? null : Number(requestRow.response_message_id),
+                    responseText: String(requestRow.response_text ?? ''),
+                    terminalAt: requestRow.terminal_at == null ? null : String(requestRow.terminal_at),
+                    updatedAt: requestRow.updated_at == null ? null : String(requestRow.updated_at),
+                  }
+                : null,
+            )
+        : null,
+    })
+  ) {
+    const shouldMarkRequestFailed =
+      currentRequestId &&
+      !isRuntimeRequestActive(currentRequestId) &&
+      ['queued', 'started'].includes(String(row.current_job_status ?? '').trim());
+
+    if (shouldMarkRequestFailed) {
+      await db(CHAT_CONVERSATION_REQUEST_TABLE)
+        .where({
+          session_id: normalizedSessionId,
+          request_id: currentRequestId,
+        })
+        .whereIn('status', ['queued', 'started'])
+        .update({
+          status: 'failed',
+          status_message: '중단된 오래된 요청',
+          terminal_at: db.fn.now(),
+          updated_at: db.fn.now(),
+        });
+    }
+
+    await db(CHAT_CONVERSATION_TABLE)
+      .where({ session_id: normalizedSessionId })
+      .update({
+        current_request_id: null,
+        current_job_status: null,
+        current_job_message: null,
+        current_queue_size: 0,
+        current_status_updated_at: db.fn.now(),
+        updated_at: db.fn.now(),
+      });
+    row = await db(CHAT_CONVERSATION_TABLE).where({ session_id: normalizedSessionId }).first();
+
+    if (!row) {
+      return null;
+    }
+  }
+
+  const mapped = mapConversationRow(row);
+  const latestPreviewMessageMap = await getLatestPreviewableMessageMap([normalizedSessionId]);
+  const latestRequestPreviewMap = await getLatestRequestPreviewMap([normalizedSessionId]);
+  const previewResolvedConversation = resolveConversationPreviewOverride(
+    mapped,
+    latestPreviewMessageMap.get(normalizedSessionId),
+    latestRequestPreviewMap.get(normalizedSessionId),
+  );
+  const normalizedClientId = normalizeClientId(clientId);
+
+  if (!normalizedClientId) {
+    return previewResolvedConversation;
+  }
+
+  const preference = await getChatConversationClientPreference(sessionId, normalizedClientId);
+  const latestResponseMessageId = await getLatestResponseMessageId(normalizedSessionId);
+  return {
+    ...previewResolvedConversation,
+    clientId: normalizedClientId,
+    notifyOffline: preference?.notifyOffline ?? previewResolvedConversation.notifyOffline,
+    hasUnreadResponse:
+      latestResponseMessageId != null &&
+      latestResponseMessageId > (preference?.lastReadResponseMessageId ?? 0),
+  };
+}
+
+export async function createChatConversation(payload: z.input<typeof conversationPayloadSchema>) {
+  await ensureChatConversationTables();
+  const parsed = conversationPayloadSchema.parse(payload);
+  const normalizedClientId = normalizeClientId(parsed.clientId);
+  const notifyOffline = parsed.notifyOffline ?? true;
+  await db(CHAT_CONVERSATION_TABLE)
+    .insert({
+      session_id: parsed.sessionId,
+      client_id: normalizedClientId,
+      title: parsed.title?.trim() || '새 대화',
+      context_label: parsed.contextLabel?.trim() || null,
+      context_description: parsed.contextDescription?.trim() || null,
+      notify_offline: notifyOffline,
+      current_request_id: null,
+      current_job_status: null,
+      current_job_message: null,
+      current_queue_size: 0,
+      current_status_updated_at: null,
+      last_message_preview: '',
+      last_message_at: null,
+      created_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .onConflict('session_id')
+    .ignore();
+
+  if (normalizedClientId) {
+    const existingPreference = await getChatConversationClientPreference(parsed.sessionId, normalizedClientId);
+
+    if (!existingPreference) {
+      await upsertChatConversationClientPreference(parsed.sessionId, normalizedClientId, notifyOffline);
+    }
+  }
+
+  const conversation = await getChatConversation(parsed.sessionId, normalizedClientId);
+
+  if (!conversation) {
+    throw new Error('채팅방을 저장했지만 다시 불러오지 못했습니다.');
+  }
+
+  return conversation;
+}
+
+export async function updateChatConversationContext(
+  sessionId: string,
+  payload: {
+    title?: string | null;
+    clientId?: string | null;
+    contextLabel?: string | null;
+    contextDescription?: string | null;
+    notifyOffline?: boolean | null;
+  },
+) {
+  await ensureChatConversationTables();
+  const normalizedClientId = normalizeClientId(payload.clientId);
+  const current = await db(CHAT_CONVERSATION_TABLE).where({ session_id: sessionId.trim() }).first();
+
+  if (!current) {
+    return null;
+  }
+
+  await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: sessionId.trim() })
+    .update({
+      title: payload.title?.trim() || current.title || '새 대화',
+      client_id: normalizedClientId || current.client_id || null,
+      context_label: payload.contextLabel?.trim() || null,
+      context_description: payload.contextDescription?.trim() || null,
+      notify_offline:
+        normalizedClientId == null && payload.notifyOffline != null
+          ? payload.notifyOffline
+          : Boolean(current.notify_offline),
+      updated_at: db.fn.now(),
+    });
+
+  if (normalizedClientId && payload.notifyOffline != null) {
+    await upsertChatConversationClientPreference(sessionId, normalizedClientId, payload.notifyOffline);
+  }
+
+  return getChatConversation(sessionId, normalizedClientId);
+}
+
+export async function listChatConversations(
+  clientId?: string | null,
+  limit = 50,
+  unreadStateClientId?: string | null,
+) {
+  await ensureChatConversationTables();
+  const normalizedClientId = normalizeClientId(clientId);
+  const normalizedUnreadStateClientId = normalizeClientId(unreadStateClientId ?? clientId);
+  const query = db(CHAT_CONVERSATION_TABLE)
+    .select('*')
+    .orderByRaw('COALESCE(last_message_at, updated_at, created_at) DESC NULLS LAST')
+    .orderByRaw('last_message_at DESC NULLS LAST')
+    .orderByRaw('updated_at DESC NULLS LAST')
+    .orderByRaw('created_at DESC NULLS LAST')
+    .limit(Math.max(1, Math.min(200, Math.round(limit))));
+
+  if (normalizedClientId) {
+    query.where((builder) => {
+      builder
+        .where({ client_id: normalizedClientId })
+        .orWhereExists(
+          db(CHAT_CONVERSATION_CLIENT_TABLE)
+            .select(db.raw('1'))
+            .whereRaw(`${CHAT_CONVERSATION_CLIENT_TABLE}.session_id = ${CHAT_CONVERSATION_TABLE}.session_id`)
+            .andWhere({ client_id: normalizedClientId }),
+        );
+    });
+  }
+
+  let rows = await query;
+
+  const sessionIds = rows.map((row) => String(row.session_id ?? '')).filter(Boolean);
+  const currentRequestIds = Array.from(
+    new Set(rows.map((row) => String(row.current_request_id ?? '').trim()).filter(Boolean)),
+  );
+
+  if (sessionIds.length > 0 && currentRequestIds.length > 0) {
+    const requestRows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+      .select('session_id', 'request_id', 'status', 'response_message_id', 'response_text', 'terminal_at')
+      .whereIn('session_id', sessionIds)
+      .whereIn('request_id', currentRequestIds);
+    const requestMap = new Map(
+      requestRows.map((requestRow) => [
+        `${String(requestRow.session_id ?? '').trim()}:${String(requestRow.request_id ?? '').trim()}`,
+        {
+          requestId: String(requestRow.request_id ?? ''),
+          status: String(requestRow.status ?? '') as ChatConversationRequestStatus,
+          responseMessageId: requestRow.response_message_id == null ? null : Number(requestRow.response_message_id),
+          responseText: String(requestRow.response_text ?? ''),
+          terminalAt: requestRow.terminal_at == null ? null : String(requestRow.terminal_at),
+        },
+      ]),
+    );
+    const staleSessionIds = rows
+      .filter((row) =>
+        shouldClearConversationJobState({
+          currentRequestId: String(row.current_request_id ?? ''),
+          currentJobStatus: row.current_job_status == null ? null : String(row.current_job_status) as ChatConversationItem['currentJobStatus'],
+          currentStatusUpdatedAt: row.current_status_updated_at == null ? null : String(row.current_status_updated_at),
+          runtimeActive: isRuntimeRequestActive(String(row.current_request_id ?? '')),
+          request:
+            requestMap.get(`${String(row.session_id ?? '').trim()}:${String(row.current_request_id ?? '').trim()}`) ?? null,
+        }),
+      )
+      .map((row) => String(row.session_id ?? '').trim())
+      .filter(Boolean);
+
+    if (staleSessionIds.length > 0) {
+      const staleRequestIds = rows
+        .filter((row) => staleSessionIds.includes(String(row.session_id ?? '').trim()))
+        .map((row) => ({
+          sessionId: String(row.session_id ?? '').trim(),
+          requestId: String(row.current_request_id ?? '').trim(),
+          status: String(row.current_job_status ?? '').trim(),
+        }))
+        .filter((item) => item.requestId && (item.status === 'queued' || item.status === 'started'));
+
+      for (const staleItem of staleRequestIds) {
+        await db(CHAT_CONVERSATION_REQUEST_TABLE)
+          .where({
+            session_id: staleItem.sessionId,
+            request_id: staleItem.requestId,
+          })
+          .whereIn('status', ['queued', 'started'])
+          .update({
+            status: 'failed',
+            status_message: '중단된 오래된 요청',
+            terminal_at: db.fn.now(),
+            updated_at: db.fn.now(),
+          });
+      }
+
+      await db(CHAT_CONVERSATION_TABLE)
+        .whereIn('session_id', staleSessionIds)
+        .update({
+          current_request_id: null,
+          current_job_status: null,
+          current_job_message: null,
+          current_queue_size: 0,
+          current_status_updated_at: db.fn.now(),
+          updated_at: db.fn.now(),
+        });
+      rows = await query.clone();
+    }
+  }
+
+  const latestPreviewMessageMap = await getLatestPreviewableMessageMap(
+    rows.map((row) => String(row.session_id ?? '')),
+  );
+  const latestRequestPreviewMap = await getLatestRequestPreviewMap(
+    rows.map((row) => String(row.session_id ?? '')),
+  );
+  const latestResponseMessageIdMap = await getLatestResponseMessageIdMap(
+    rows.map((row) => String(row.session_id ?? '')),
+  );
+
+  if (!normalizedUnreadStateClientId) {
+    return rows
+      .map((row) => {
+        const mapped = mapConversationRow(row);
+        return {
+          ...resolveConversationPreviewOverride(
+            mapped,
+            latestPreviewMessageMap.get(mapped.sessionId),
+            latestRequestPreviewMap.get(mapped.sessionId),
+          ),
+          hasUnreadResponse: false,
+        };
+      })
+      .sort((left, right) =>
+        (right.lastMessageAt ?? right.updatedAt).localeCompare(left.lastMessageAt ?? left.updatedAt),
+      );
+  }
+
+  if (rows.length === 0) {
+    return [];
+  }
+
+  const preferences = await db(CHAT_CONVERSATION_CLIENT_TABLE)
+    .select('*')
+    .where({ client_id: normalizedUnreadStateClientId })
+    .whereIn(
+      'session_id',
+      rows.map((row) => String(row.session_id ?? '')).filter(Boolean),
+    );
+
+  const preferenceMap = new Map(
+    preferences.map((row) => {
+      const mapped = mapClientPreferenceRow(row);
+      return [mapped.sessionId, mapped];
+    }),
+  );
+
+  return rows
+    .map((row) => {
+      const mapped = mapConversationRow(row);
+      const preference = preferenceMap.get(mapped.sessionId);
+      const latestPreviewMessage = latestPreviewMessageMap.get(mapped.sessionId);
+
+      return {
+        ...resolveConversationPreviewOverride(
+          mapped,
+          latestPreviewMessage,
+          latestRequestPreviewMap.get(mapped.sessionId),
+        ),
+        clientId: normalizedUnreadStateClientId,
+        notifyOffline: preference?.notifyOffline ?? mapped.notifyOffline,
+        hasUnreadResponse:
+          (latestResponseMessageIdMap.get(mapped.sessionId) ?? 0) >
+          (preference?.lastReadResponseMessageId ?? 0),
+      };
+    })
+    .sort((left, right) =>
+      (right.lastMessageAt ?? right.updatedAt).localeCompare(left.lastMessageAt ?? left.updatedAt),
+    );
+}
+
+export async function listChatConversationMessages(
+  sessionId: string,
+  options: {
+    limit?: number;
+    beforeMessageId?: number | null;
+  } = {},
+) {
+  await ensureChatConversationTables();
+  const normalizedLimit = Math.max(1, Math.min(1000, Math.round(options.limit ?? 200)));
+  const normalizedBeforeMessageId =
+    Number.isFinite(options.beforeMessageId) && (options.beforeMessageId ?? 0) > 0
+      ? Math.trunc(options.beforeMessageId as number)
+      : null;
+  const query = db(CHAT_CONVERSATION_MESSAGE_TABLE)
+    .select('*')
+    .where({ session_id: sessionId.trim() })
+    .modify((builder) => {
+      if (normalizedBeforeMessageId !== null) {
+        builder.where('message_id', '<', normalizedBeforeMessageId);
+      }
+    })
+    .orderBy('message_id', 'desc')
+    .orderBy('id', 'desc')
+    .limit(normalizedLimit);
+  const latestRows = await query;
+
+  return latestRows
+    .reverse()
+    .map((row: Parameters<typeof mapMessageRow>[0]) => mapMessageRow(row))
+    .filter((message: ReturnType<typeof mapMessageRow>) => isVisibleConversationMessage(message));
+}
+
+export async function listChatConversationRequests(sessionId: string, limit = 200) {
+  await ensureChatConversationTables();
+  const normalizedSessionId = sessionId.trim();
+  const conversation = await db(CHAT_CONVERSATION_TABLE).where({ session_id: normalizedSessionId }).first();
+
+  const rows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .where({ session_id: normalizedSessionId })
+    .orderBy('created_at', 'asc')
+    .limit(Math.max(1, Math.min(1000, Math.round(limit))));
+
+  return rows.map((row) => normalizeStaleRequestItem(mapRequestRow(row), conversation));
+}
+
+export async function getChatConversationRequest(sessionId: string, requestId: string) {
+  await ensureChatConversationTables();
+
+  const normalizedSessionId = sessionId.trim();
+  const normalizedRequestId = requestId.trim();
+
+  if (!normalizedSessionId || !normalizedRequestId) {
+    return null;
+  }
+
+  const conversation = await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: normalizedSessionId })
+    .first();
+  const row = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .where({
+      session_id: normalizedSessionId,
+      request_id: normalizedRequestId,
+    })
+    .first();
+
+  return row ? normalizeStaleRequestItem(mapRequestRow(row), conversation) : null;
+}
+
+async function refreshConversationPreview(sessionId: string) {
+  const latestMessage = await db(CHAT_CONVERSATION_MESSAGE_TABLE)
+    .where({ session_id: sessionId.trim() })
+    .whereIn('author', ['user', 'codex'])
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc')
+    .first();
+
+  await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: sessionId.trim() })
+    .update({
+      last_message_preview: latestMessage && isPreviewableConversationMessage(latestMessage) ? createPreview(String(latestMessage.text ?? '')) : '',
+      last_message_at: latestMessage && isPreviewableConversationMessage(latestMessage) ? latestMessage.created_at : null,
+      updated_at: db.fn.now(),
+    });
+}
+
+export async function appendChatConversationMessage(
+  conversationPayload: z.input<typeof conversationPayloadSchema>,
+  messagePayload: z.input<typeof conversationMessagePayloadSchema>,
+) {
+  await ensureChatConversationTables();
+  const conversation = conversationPayloadSchema.parse(conversationPayload);
+  const message = conversationMessagePayloadSchema.parse(messagePayload);
+
+  await createChatConversation(conversation);
+
+  const currentConversation = await db(CHAT_CONVERSATION_TABLE).where({ session_id: conversation.sessionId }).first();
+  const resolvedClientRequestId =
+    message.clientRequestId?.trim() ||
+    (message.author === 'codex' ? String(currentConversation?.current_request_id ?? '').trim() || null : null);
+
+  await db(CHAT_CONVERSATION_MESSAGE_TABLE)
+    .insert({
+      session_id: message.sessionId,
+      message_id: message.messageId,
+      author: message.author,
+      text: message.text,
+      display_timestamp: message.timestamp,
+      client_request_id: resolvedClientRequestId,
+      created_at: db.fn.now(),
+    })
+    .onConflict(['session_id', 'message_id'])
+    .merge({
+      author: message.author,
+      text: message.text,
+      display_timestamp: message.timestamp,
+      client_request_id: resolvedClientRequestId,
+    });
+
+  const currentTitle = String(currentConversation?.title ?? '새 대화').trim() || '새 대화';
+  const nextTitle =
+    message.author === 'user' && (!currentTitle || currentTitle === '새 대화')
+      ? buildConversationTitle(message.text)
+      : currentTitle;
+
+  await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: conversation.sessionId })
+    .update({
+      client_id: normalizeClientId(conversation.clientId) || currentConversation?.client_id || null,
+      title: nextTitle,
+      context_label: conversation.contextLabel?.trim() || currentConversation?.context_label || null,
+      context_description: conversation.contextDescription?.trim() || currentConversation?.context_description || null,
+      notify_offline:
+        conversation.notifyOffline == null ? Boolean(currentConversation?.notify_offline) : conversation.notifyOffline,
+      updated_at: db.fn.now(),
+    });
+
+  await refreshConversationPreview(conversation.sessionId);
+
+  if (normalizeClientId(conversation.clientId) && conversation.notifyOffline != null) {
+    await upsertChatConversationClientPreference(
+      conversation.sessionId,
+      normalizeClientId(conversation.clientId)!,
+      conversation.notifyOffline,
+    );
+  }
+
+  const requestPatch = buildChatConversationRequestPatchFromMessage({
+    id: message.messageId,
+    author: message.author,
+    text: message.text,
+    clientRequestId: resolvedClientRequestId,
+  });
+
+  if (requestPatch) {
+    await upsertChatConversationRequest(conversation.sessionId, {
+      requestId: requestPatch.requestId,
+      status: requestPatch.status,
+      userMessageId: requestPatch.userMessageId,
+      userText: requestPatch.userText,
+      responseMessageId: requestPatch.responseMessageId,
+      responseText: requestPatch.responseText,
+    });
+  }
+}
+
+export async function appendChatConversationActivityLine(sessionId: string, requestId: string, line: string) {
+  await ensureChatConversationTables();
+  const normalizedSessionId = sessionId.trim();
+  const normalizedRequestId = requestId.trim();
+  const normalizedLine = line.trim();
+
+  if (!normalizedSessionId || !normalizedRequestId || !normalizedLine) {
+    return null;
+  }
+
+  const existingLineCountRow = await db(CHAT_CONVERSATION_ACTIVITY_TABLE)
+    .where({
+      session_id: normalizedSessionId,
+      request_id: normalizedRequestId,
+    })
+    .count<{ count?: string | number }>('id as count')
+    .first();
+  const nextLineNo = Number(existingLineCountRow?.count ?? 0) + 1;
+
+  await db(CHAT_CONVERSATION_ACTIVITY_TABLE)
+    .insert({
+      session_id: normalizedSessionId,
+      request_id: normalizedRequestId,
+      line_no: nextLineNo,
+      text: normalizedLine,
+      created_at: db.fn.now(),
+    })
+    .onConflict(['session_id', 'request_id', 'line_no'])
+    .ignore();
+
+  return nextLineNo;
+}
+
+export async function listChatConversationActivityLogs(
+  sessionId: string,
+  limitRequests = 500,
+): Promise<ChatConversationActivityLogItem[]> {
+  await ensureChatConversationTables();
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return [];
+  }
+
+  const requestRows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .select('request_id')
+    .where({ session_id: normalizedSessionId })
+    .whereNot('status', 'removed')
+    .orderBy('created_at', 'desc')
+    .orderBy('request_id', 'desc')
+    .limit(limitRequests);
+  const requestIds = requestRows
+    .map((row) => String(row.request_id ?? '').trim())
+    .filter(Boolean);
+
+  if (requestIds.length === 0) {
+    return [];
+  }
+
+  const rows = await db(CHAT_CONVERSATION_ACTIVITY_TABLE)
+    .select('session_id', 'request_id', 'text', 'line_no', 'created_at')
+    .where({ session_id: normalizedSessionId })
+    .whereIn('request_id', requestIds)
+    .orderBy('request_id', 'asc')
+    .orderBy('line_no', 'asc')
+    .orderBy('id', 'asc');
+
+  const activityMap = new Map<string, ChatConversationActivityLogItem>();
+
+  for (const row of rows) {
+    const requestId = String(row.request_id ?? '').trim();
+
+    if (!requestId) {
+      continue;
+    }
+
+    const existing = activityMap.get(requestId);
+
+    if (existing) {
+      existing.lines.push(String(row.text ?? ''));
+      existing.updatedAt = row.created_at == null ? existing.updatedAt : String(row.created_at);
+      continue;
+    }
+
+    activityMap.set(requestId, {
+      sessionId: String(row.session_id ?? normalizedSessionId),
+      requestId,
+      lines: [String(row.text ?? '')],
+      updatedAt: row.created_at == null ? null : String(row.created_at),
+    });
+  }
+
+  return requestIds.map((requestId) => activityMap.get(requestId)).filter(Boolean) as ChatConversationActivityLogItem[];
+}
+
+export async function updateChatConversationJobState(
+  sessionId: string,
+  payload: {
+    requestId?: string | null;
+    status?: 'queued' | 'started' | 'completed' | 'failed' | null;
+    message?: string | null;
+    queueSize?: number | null;
+    clear?: boolean;
+  },
+) {
+  await ensureChatConversationTables();
+
+  const current = await db(CHAT_CONVERSATION_TABLE).where({ session_id: sessionId.trim() }).first();
+
+  if (!current) {
+    return null;
+  }
+
+  const shouldClear = payload.clear === true;
+
+  await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: sessionId.trim() })
+    .update({
+      current_request_id: shouldClear ? null : payload.requestId?.trim() || current.current_request_id || null,
+      current_job_status: shouldClear ? null : payload.status ?? current.current_job_status ?? null,
+      current_job_message: shouldClear ? null : payload.message?.trim() || null,
+      current_queue_size: shouldClear ? 0 : Math.max(0, Math.round(payload.queueSize ?? current.current_queue_size ?? 0)),
+      current_status_updated_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    });
+
+  const row = await db(CHAT_CONVERSATION_TABLE).where({ session_id: sessionId.trim() }).first();
+  return row ? mapConversationRow(row) : null;
+}
+
+async function clearConversationJobStateForRequest(sessionId: string, requestId: string) {
+  await db(CHAT_CONVERSATION_TABLE)
+    .where({
+      session_id: sessionId,
+      current_request_id: requestId,
+    })
+    .update({
+      current_request_id: null,
+      current_job_status: null,
+      current_job_message: null,
+      current_queue_size: 0,
+      current_status_updated_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    });
+}
+
+export async function upsertChatConversationRequest(
+  sessionId: string,
+  payload: {
+    requestId: string;
+    status?: ChatConversationRequestStatus;
+    statusMessage?: string | null;
+    userMessageId?: number | null;
+    userText?: string | null;
+    responseMessageId?: number | null;
+    responseText?: string | null;
+  },
+) {
+  await ensureChatConversationTables();
+
+  const normalizedSessionId = sessionId.trim();
+  const normalizedRequestId = payload.requestId.trim();
+
+  if (!normalizedSessionId || !normalizedRequestId) {
+    return null;
+  }
+
+  let nextRow:
+    | {
+        session_id: string;
+        request_id: string;
+        status: ChatConversationRequestStatus;
+        status_message: string | null;
+        user_message_id: number | null;
+        user_text: string;
+        response_message_id: number | null;
+        response_text: string;
+        answered_at: unknown;
+        terminal_at: unknown;
+        created_at: unknown;
+        updated_at: unknown;
+      }
+    | null = null;
+  let nextStatus: ChatConversationRequestStatus = payload.status ?? 'accepted';
+
+  for (let attempt = 0; attempt < 3; attempt += 1) {
+    const current = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+      .where({
+        session_id: normalizedSessionId,
+        request_id: normalizedRequestId,
+      })
+      .first();
+
+    nextStatus = mergeChatConversationRequestStatus(
+      (current?.status as ChatConversationRequestStatus | undefined) ?? null,
+      payload.status ?? null,
+    );
+    const terminalStatus = ['completed', 'failed', 'cancelled', 'removed'].includes(nextStatus)
+      ? db.fn.now()
+      : current?.terminal_at ?? null;
+    const answeredAt =
+      payload.responseMessageId != null || (payload.responseText?.trim() ?? '').length > 0
+        ? current?.answered_at ?? db.fn.now()
+        : current?.answered_at ?? null;
+
+    nextRow = {
+      session_id: normalizedSessionId,
+      request_id: normalizedRequestId,
+      status: nextStatus,
+      status_message: payload.statusMessage?.trim() || current?.status_message || null,
+      user_message_id: payload.userMessageId ?? current?.user_message_id ?? null,
+      user_text: payload.userText ?? current?.user_text ?? '',
+      response_message_id: payload.responseMessageId ?? current?.response_message_id ?? null,
+      response_text: payload.responseText ?? current?.response_text ?? '',
+      answered_at: answeredAt,
+      terminal_at: terminalStatus,
+      created_at: current?.created_at ?? db.fn.now(),
+      updated_at: db.fn.now(),
+    };
+
+    if (current) {
+      await db(CHAT_CONVERSATION_REQUEST_TABLE)
+        .where({
+          session_id: normalizedSessionId,
+          request_id: normalizedRequestId,
+        })
+        .update(nextRow);
+      break;
+    }
+
+    const insertedRows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+      .insert(nextRow)
+      .onConflict(['session_id', 'request_id'])
+      .ignore()
+      .returning(['session_id']);
+
+    if (insertedRows.length > 0) {
+      break;
+    }
+  }
+
+  if (!nextRow) {
+    return null;
+  }
+
+  const row = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .where({
+      session_id: normalizedSessionId,
+      request_id: normalizedRequestId,
+    })
+    .first();
+
+  if (
+    shouldClearConversationJobState({
+      currentRequestId: normalizedRequestId,
+      currentJobStatus: 'started',
+      request: {
+        requestId: normalizedRequestId,
+        status: nextStatus,
+        responseMessageId: nextRow.response_message_id,
+        responseText: nextRow.response_text,
+        terminalAt: nextRow.terminal_at == null ? null : String(nextRow.terminal_at),
+      },
+    })
+  ) {
+    await clearConversationJobStateForRequest(normalizedSessionId, normalizedRequestId);
+  }
+
+  return row ? mapRequestRow(row) : null;
+}
+
+export async function repairChatConversationRequestLinks(sessionId?: string | null) {
+  await ensureChatConversationTables();
+
+  const normalizedSessionId = sessionId?.trim() || null;
+  const sessionRows = normalizedSessionId
+    ? [{ session_id: normalizedSessionId }]
+    : await db(CHAT_CONVERSATION_REQUEST_TABLE).distinct('session_id').orderBy('session_id', 'asc');
+
+  let repairedRequestCount = 0;
+  let linkedMessageCount = 0;
+  let completedStatusCount = 0;
+  const touchedSessions: string[] = [];
+
+  for (const sessionRow of sessionRows) {
+    const currentSessionId = String(sessionRow.session_id ?? '').trim();
+
+    if (!currentSessionId) {
+      continue;
+    }
+
+    const requestRows = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+      .where({ session_id: currentSessionId })
+      .orderBy('created_at', 'asc')
+      .orderBy('request_id', 'asc');
+    const messageRows = await db(CHAT_CONVERSATION_MESSAGE_TABLE)
+      .where({ session_id: currentSessionId })
+      .select('id', 'message_id', 'author', 'text', 'client_request_id', 'created_at')
+      .orderBy('created_at', 'asc')
+      .orderBy('message_id', 'asc')
+      .orderBy('id', 'asc');
+
+    let sessionTouched = false;
+    const responseMessages: ChatConversationResponseCandidate[] = messageRows.map((row) => ({
+      id: Number(row.id ?? 0),
+      messageId: Number(row.message_id ?? 0),
+      author: String(row.author ?? 'codex') as StoredChatMessage['author'],
+      text: String(row.text ?? ''),
+      clientRequestId: row.client_request_id == null ? null : String(row.client_request_id),
+      createdAt: row.created_at == null ? null : String(row.created_at),
+    }));
+
+    for (let index = 0; index < requestRows.length; index += 1) {
+      const requestRow = requestRows[index];
+      const nextRequestRow = requestRows[index + 1];
+      const requestId = String(requestRow.request_id ?? '').trim();
+
+      if (!requestId) {
+        continue;
+      }
+
+      const candidate = selectChatConversationResponseCandidate(
+        {
+          requestId,
+          createdAt: String(requestRow.created_at ?? ''),
+          responseMessageId: requestRow.response_message_id == null ? null : Number(requestRow.response_message_id),
+        },
+        nextRequestRow
+          ? {
+              createdAt: String(nextRequestRow.created_at ?? ''),
+            }
+          : undefined,
+        responseMessages,
+      );
+
+      if (!candidate) {
+        continue;
+      }
+
+      if ((candidate.clientRequestId?.trim() || null) !== requestId) {
+        await db(CHAT_CONVERSATION_MESSAGE_TABLE)
+          .where({
+            session_id: currentSessionId,
+            message_id: candidate.messageId,
+          })
+          .update({
+            client_request_id: requestId,
+          });
+        candidate.clientRequestId = requestId;
+        linkedMessageCount += 1;
+        sessionTouched = true;
+      }
+
+      const shouldPromoteToCompleted =
+        !isTerminalRequestStatus(String(requestRow.status ?? '') as ChatConversationRequestStatus) &&
+        requestRow.terminal_at != null;
+      const nextStatus = shouldPromoteToCompleted ? 'completed' : undefined;
+      const previousStatus = String(requestRow.status ?? '').trim();
+
+      await upsertChatConversationRequest(currentSessionId, {
+        requestId,
+        status: nextStatus,
+        responseMessageId: candidate.messageId,
+        responseText: candidate.text,
+      });
+
+      if (
+        requestRow.response_message_id == null ||
+        String(requestRow.response_text ?? '') !== candidate.text ||
+        requestRow.answered_at == null
+      ) {
+        repairedRequestCount += 1;
+        sessionTouched = true;
+      }
+
+      if (nextStatus === 'completed' && previousStatus !== 'completed') {
+        completedStatusCount += 1;
+        sessionTouched = true;
+      }
+    }
+
+    if (sessionTouched) {
+      touchedSessions.push(currentSessionId);
+    }
+  }
+
+  return {
+    sessionCount: sessionRows.length,
+    touchedSessions,
+    repairedRequestCount,
+    linkedMessageCount,
+    completedStatusCount,
+  };
+}
+
+export async function deleteUnansweredChatConversationRequest(sessionId: string, requestId: string) {
+  await ensureChatConversationTables();
+
+  const normalizedSessionId = sessionId.trim();
+  const normalizedRequestId = requestId.trim();
+  const current = await db(CHAT_CONVERSATION_REQUEST_TABLE)
+    .where({
+      session_id: normalizedSessionId,
+      request_id: normalizedRequestId,
+    })
+    .first();
+
+  if (!current) {
+    return { deleted: false, reason: 'not_found' as const };
+  }
+
+  const conversation = await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: normalizedSessionId })
+    .first();
+  const mapped = normalizeStaleRequestItem(mapRequestRow(current), conversation);
+
+  if (mapped.hasResponse) {
+    return { deleted: false, reason: 'answered' as const };
+  }
+
+  if (mapped.status === 'queued' || mapped.status === 'started') {
+    return { deleted: false, reason: 'active' as const };
+  }
+
+  await db.transaction(async (trx) => {
+    await trx(CHAT_CONVERSATION_MESSAGE_TABLE)
+      .where({
+        session_id: normalizedSessionId,
+        client_request_id: normalizedRequestId,
+      })
+      .del();
+
+    await trx(CHAT_CONVERSATION_REQUEST_TABLE)
+      .where({
+        session_id: normalizedSessionId,
+        request_id: normalizedRequestId,
+      })
+      .del();
+
+    const conversation = await trx(CHAT_CONVERSATION_TABLE)
+      .where({ session_id: normalizedSessionId })
+      .first();
+
+    if (conversation?.current_request_id === normalizedRequestId) {
+      await trx(CHAT_CONVERSATION_TABLE)
+        .where({ session_id: normalizedSessionId })
+        .update({
+          current_request_id: null,
+          current_job_status: null,
+          current_job_message: null,
+          current_queue_size: 0,
+          current_status_updated_at: db.fn.now(),
+          updated_at: db.fn.now(),
+        });
+    }
+  });
+
+  await refreshConversationPreview(normalizedSessionId);
+  return { deleted: true, reason: null as null };
+}
+
+export async function clearAllChatConversationJobStates() {
+  await ensureChatConversationTables();
+
+  await db(CHAT_CONVERSATION_TABLE)
+    .whereNotNull('current_job_status')
+    .update({
+      current_request_id: null,
+      current_job_status: null,
+      current_job_message: null,
+      current_queue_size: 0,
+      current_status_updated_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    });
+}
+
+export async function deleteChatConversation(sessionId: string) {
+  await ensureChatConversationTables();
+
+  return db.transaction(async (trx) => {
+    await trx(CHAT_CONVERSATION_CLIENT_TABLE).where({ session_id: sessionId.trim() }).del();
+    await trx(CHAT_CONVERSATION_REQUEST_TABLE).where({ session_id: sessionId.trim() }).del();
+    await trx(CHAT_CONVERSATION_MESSAGE_TABLE).where({ session_id: sessionId.trim() }).del();
+    const deletedCount = await trx(CHAT_CONVERSATION_TABLE).where({ session_id: sessionId.trim() }).del();
+    return deletedCount > 0;
+  });
+}
+
+export async function getChatConversationClientPreference(sessionId: string, clientId: string) {
+  await ensureChatConversationTables();
+  const row = await db(CHAT_CONVERSATION_CLIENT_TABLE)
+    .where({
+      session_id: sessionId.trim(),
+      client_id: clientId.trim(),
+    })
+    .first();
+
+  return row ? mapClientPreferenceRow(row) : null;
+}
+
+export async function listChatConversationOfflineNotificationClientIds(sessionId: string) {
+  await ensureChatConversationTables();
+
+  const rows = await db(CHAT_CONVERSATION_CLIENT_TABLE)
+    .where({
+      session_id: sessionId.trim(),
+      notify_offline: true,
+    })
+    .select('client_id');
+
+  return rows
+    .map((row) => String(row.client_id ?? '').trim())
+    .filter(Boolean);
+}
+
+export async function upsertChatConversationClientPreference(sessionId: string, clientId: string, notifyOffline: boolean) {
+  await ensureChatConversationTables();
+  const normalizedSessionId = sessionId.trim();
+  const normalizedClientId = clientId.trim();
+  await db(CHAT_CONVERSATION_CLIENT_TABLE)
+    .insert({
+      session_id: normalizedSessionId,
+      client_id: normalizedClientId,
+      notify_offline: notifyOffline,
+      last_read_response_message_id: null,
+      created_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .onConflict(['session_id', 'client_id'])
+    .merge({
+      notify_offline: notifyOffline,
+      updated_at: db.fn.now(),
+    });
+
+  return getChatConversationClientPreference(normalizedSessionId, normalizedClientId);
+}
+
+export async function markChatConversationResponsesRead(sessionId: string, clientId: string) {
+  await ensureChatConversationTables();
+
+  const normalizedSessionId = sessionId.trim();
+  const normalizedClientId = clientId.trim();
+
+  if (!normalizedSessionId || !normalizedClientId) {
+    return null;
+  }
+
+  const currentConversation = await db(CHAT_CONVERSATION_TABLE)
+    .where({ session_id: normalizedSessionId })
+    .first();
+
+  if (!currentConversation) {
+    return null;
+  }
+
+  const latestResponseMessageId = await getLatestResponseMessageId(normalizedSessionId);
+  await db(CHAT_CONVERSATION_CLIENT_TABLE)
+    .insert({
+      session_id: normalizedSessionId,
+      client_id: normalizedClientId,
+      notify_offline: Boolean(currentConversation.notify_offline),
+      last_read_response_message_id: latestResponseMessageId,
+      created_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .onConflict(['session_id', 'client_id'])
+    .merge({
+      last_read_response_message_id: latestResponseMessageId,
+      updated_at: db.fn.now(),
+    });
+
+  return {
+    sessionId: normalizedSessionId,
+    lastReadResponseMessageId: latestResponseMessageId,
+  };
+}
diff --git a/etc/servers/work-server/src/services/chat-runtime-service.ts b/etc/servers/work-server/src/services/chat-runtime-service.ts
new file mode 100755
index 0000000..08d976c
--- /dev/null
+++ b/etc/servers/work-server/src/services/chat-runtime-service.ts
@@ -0,0 +1,392 @@
+type ChatRuntimeJobMode = 'queue' | 'direct';
+type ChatRuntimeLifecycleStatus = 'queued' | 'running';
+type ChatRuntimeTerminalStatus = 'completed' | 'failed' | 'cancelled' | 'removed';
+
+type RuntimeJobControl = {
+  cancel?: () => Promise<boolean> | boolean;
+  remove?: () => Promise<boolean> | boolean;
+};
+
+type RuntimeJobRecord = ChatRuntimeJobItem & {
+  logs: string[];
+  lastUpdatedAt: string;
+  terminalStatus: ChatRuntimeTerminalStatus | null;
+};
+
+export type ChatRuntimeJobItem = {
+  requestId: string;
+  sessionId: string;
+  mode: ChatRuntimeJobMode;
+  status: ChatRuntimeLifecycleStatus;
+  summary: string;
+  enqueuedAt: string;
+  startedAt: string | null;
+  pid: number | null;
+};
+
+export type ChatRuntimeSessionSummary = {
+  sessionId: string;
+  runningCount: number;
+  queuedCount: number;
+  latestRequestId: string | null;
+  latestStatus: ChatRuntimeLifecycleStatus | null;
+};
+
+export type ChatRuntimeSnapshot = {
+  generatedAt: string;
+  runningCount: number;
+  queuedCount: number;
+  sessionCount: number;
+  running: ChatRuntimeJobItem[];
+  queued: ChatRuntimeJobItem[];
+  sessions: ChatRuntimeSessionSummary[];
+  recent: Array<ChatRuntimeJobItem & { terminalStatus: ChatRuntimeTerminalStatus; lastUpdatedAt: string }>;
+};
+
+export type ChatRuntimeJobDetail = {
+  item: ChatRuntimeJobItem | null;
+  logs: string[];
+  lastUpdatedAt: string | null;
+  terminalStatus: ChatRuntimeTerminalStatus | null;
+  availableActions: {
+    cancel: boolean;
+    remove: boolean;
+  };
+};
+
+type RuntimeSubscriber = (snapshot: ChatRuntimeSnapshot) => void;
+
+const MAX_LOG_LINES = 80;
+const MAX_ARCHIVED_JOBS = 40;
+
+function nowIso() {
+  return new Date().toISOString();
+}
+
+function summarizeText(text: string) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.length > 120 ? `${normalized.slice(0, 117).trimEnd()}...` : normalized;
+}
+
+function normalizeLogLine(line: string) {
+  return String(line ?? '').replace(/\r/g, '').trimEnd();
+}
+
+class ChatRuntimeService {
+  private readonly queuedJobs = new Map<string, RuntimeJobRecord>();
+  private readonly runningJobs = new Map<string, RuntimeJobRecord>();
+  private readonly archivedJobs = new Map<string, RuntimeJobRecord>();
+  private readonly controls = new Map<string, RuntimeJobControl>();
+  private readonly subscribers = new Set<RuntimeSubscriber>();
+
+  subscribe(listener: RuntimeSubscriber) {
+    this.subscribers.add(listener);
+
+    return () => {
+      this.subscribers.delete(listener);
+    };
+  }
+
+  getSnapshot(): ChatRuntimeSnapshot {
+    const running = [...this.runningJobs.values()].sort((left, right) =>
+      (left.startedAt ?? left.enqueuedAt).localeCompare(right.startedAt ?? right.enqueuedAt),
+    );
+    const queued = [...this.queuedJobs.values()].sort((left, right) => left.enqueuedAt.localeCompare(right.enqueuedAt));
+    const sessionMap = new Map<string, ChatRuntimeSessionSummary>();
+
+    for (const item of [...running, ...queued]) {
+      const current = sessionMap.get(item.sessionId) ?? {
+        sessionId: item.sessionId,
+        runningCount: 0,
+        queuedCount: 0,
+        latestRequestId: null,
+        latestStatus: null,
+      };
+
+      if (item.status === 'running') {
+        current.runningCount += 1;
+      } else {
+        current.queuedCount += 1;
+      }
+
+      current.latestRequestId = item.requestId;
+      current.latestStatus = item.status;
+      sessionMap.set(item.sessionId, current);
+    }
+
+    const sessions = [...sessionMap.values()].sort((left, right) => {
+      const loadDiff = right.runningCount + right.queuedCount - (left.runningCount + left.queuedCount);
+      return loadDiff !== 0 ? loadDiff : left.sessionId.localeCompare(right.sessionId);
+    });
+
+    return {
+      generatedAt: nowIso(),
+      runningCount: running.length,
+      queuedCount: queued.length,
+      sessionCount: sessions.length,
+      running: running.map(({ logs: _logs, lastUpdatedAt: _lastUpdatedAt, terminalStatus: _terminalStatus, ...item }) => item),
+      queued: queued.map(({ logs: _logs, lastUpdatedAt: _lastUpdatedAt, terminalStatus: _terminalStatus, ...item }) => item),
+      sessions,
+      recent: [...this.archivedJobs.values()]
+        .sort((left, right) => right.lastUpdatedAt.localeCompare(left.lastUpdatedAt))
+        .slice(0, 12)
+        .map(({ logs: _logs, ...item }) => ({
+          ...item,
+          terminalStatus: item.terminalStatus ?? 'completed',
+        })),
+    };
+  }
+
+  getJobDetail(requestId: string): ChatRuntimeJobDetail {
+    const current =
+      this.runningJobs.get(requestId) ??
+      this.queuedJobs.get(requestId) ??
+      this.archivedJobs.get(requestId) ??
+      null;
+
+    return {
+      item: current
+        ? {
+            requestId: current.requestId,
+            sessionId: current.sessionId,
+            mode: current.mode,
+            status: current.status,
+            summary: current.summary,
+            enqueuedAt: current.enqueuedAt,
+            startedAt: current.startedAt,
+            pid: current.pid,
+          }
+        : null,
+      logs: current?.logs ?? [],
+      lastUpdatedAt: current?.lastUpdatedAt ?? null,
+      terminalStatus: current?.terminalStatus ?? null,
+      availableActions: {
+        cancel: this.runningJobs.has(requestId) && this.controls.has(requestId),
+        remove: this.queuedJobs.has(requestId) && this.controls.has(requestId),
+      },
+    };
+  }
+
+  registerQueuedControl(requestId: string, control: RuntimeJobControl) {
+    this.controls.set(requestId, control);
+  }
+
+  registerRunningControl(requestId: string, control: RuntimeJobControl) {
+    this.controls.set(requestId, control);
+  }
+
+  enqueueJob(args: {
+    sessionId: string;
+    requestId: string;
+    mode: ChatRuntimeJobMode;
+    text: string;
+  }) {
+    const existingRunning = this.runningJobs.get(args.requestId);
+
+    if (existingRunning) {
+      return existingRunning;
+    }
+
+    const item: RuntimeJobRecord = {
+      requestId: args.requestId,
+      sessionId: args.sessionId,
+      mode: args.mode,
+      status: 'queued',
+      summary: summarizeText(args.text),
+      enqueuedAt: nowIso(),
+      startedAt: null,
+      pid: null,
+      logs: ['큐에 등록되었습니다.'],
+      lastUpdatedAt: nowIso(),
+      terminalStatus: null,
+    };
+
+    this.archivedJobs.delete(args.requestId);
+    this.queuedJobs.set(args.requestId, item);
+    this.emit();
+    return item;
+  }
+
+  startJob(args: {
+    sessionId: string;
+    requestId: string;
+    mode: ChatRuntimeJobMode;
+    text: string;
+    pid?: number | null;
+  }) {
+    const queuedItem = this.queuedJobs.get(args.requestId);
+    const runningItem: RuntimeJobRecord = {
+      requestId: args.requestId,
+      sessionId: args.sessionId,
+      mode: args.mode,
+      status: 'running',
+      summary: summarizeText(args.text),
+      enqueuedAt: queuedItem?.enqueuedAt ?? nowIso(),
+      startedAt: nowIso(),
+      pid: args.pid == null ? null : Math.round(args.pid),
+      logs: queuedItem?.logs ?? [],
+      lastUpdatedAt: nowIso(),
+      terminalStatus: null,
+    };
+
+    runningItem.logs = [...runningItem.logs, '실행이 시작되었습니다.'].slice(-MAX_LOG_LINES);
+
+    this.queuedJobs.delete(args.requestId);
+    this.archivedJobs.delete(args.requestId);
+    this.runningJobs.set(args.requestId, runningItem);
+    this.emit();
+    return runningItem;
+  }
+
+  attachProcess(requestId: string, pid?: number | null) {
+    const current = this.runningJobs.get(requestId);
+
+    if (!current || pid == null) {
+      return current ?? null;
+    }
+
+    const next: RuntimeJobRecord = {
+      ...current,
+      pid: Math.round(pid),
+      lastUpdatedAt: nowIso(),
+      logs: [...current.logs, `프로세스가 연결되었습니다. pid=${Math.round(pid)}`].slice(-MAX_LOG_LINES),
+    };
+
+    this.runningJobs.set(requestId, next);
+    this.emit();
+    return next;
+  }
+
+  appendLog(requestId: string, line: string) {
+    const normalizedLine = normalizeLogLine(line);
+
+    if (!normalizedLine) {
+      return;
+    }
+
+    const current = this.runningJobs.get(requestId) ?? this.queuedJobs.get(requestId) ?? this.archivedJobs.get(requestId);
+
+    if (!current) {
+      return;
+    }
+
+    const next: RuntimeJobRecord = {
+      ...current,
+      logs: [...current.logs, normalizedLine].slice(-MAX_LOG_LINES),
+      lastUpdatedAt: nowIso(),
+    };
+
+    if (this.runningJobs.has(requestId)) {
+      this.runningJobs.set(requestId, next);
+    } else if (this.queuedJobs.has(requestId)) {
+      this.queuedJobs.set(requestId, next);
+    } else {
+      this.archivedJobs.set(requestId, next);
+    }
+
+    this.emit();
+  }
+
+  async cancelJob(requestId: string) {
+    const control = this.controls.get(requestId);
+
+    if (!this.runningJobs.has(requestId) || !control?.cancel) {
+      return false;
+    }
+
+    const result = await control.cancel();
+    return result === true;
+  }
+
+  async removeQueuedJob(requestId: string) {
+    const control = this.controls.get(requestId);
+
+    if (!this.queuedJobs.has(requestId) || !control?.remove) {
+      return false;
+    }
+
+    const result = await control.remove();
+    return result === true;
+  }
+
+  finishJob(requestId: string, terminalStatus: ChatRuntimeTerminalStatus = 'completed') {
+    const removedRunning = this.runningJobs.get(requestId);
+    const removedQueued = this.queuedJobs.get(requestId);
+    const removed = removedRunning ?? removedQueued ?? null;
+
+    this.runningJobs.delete(requestId);
+    this.queuedJobs.delete(requestId);
+    this.controls.delete(requestId);
+
+    if (!removed) {
+      return;
+    }
+
+    const archived: RuntimeJobRecord = {
+      ...removed,
+      lastUpdatedAt: nowIso(),
+      terminalStatus,
+      logs: [...removed.logs, this.buildTerminalLog(terminalStatus)].slice(-MAX_LOG_LINES),
+    };
+
+    this.archivedJobs.delete(requestId);
+    this.archivedJobs.set(requestId, archived);
+    this.trimArchivedJobs();
+    this.emit();
+  }
+
+  clearAll() {
+    if (
+      this.runningJobs.size === 0 &&
+      this.queuedJobs.size === 0 &&
+      this.archivedJobs.size === 0 &&
+      this.controls.size === 0
+    ) {
+      return;
+    }
+
+    this.runningJobs.clear();
+    this.queuedJobs.clear();
+    this.archivedJobs.clear();
+    this.controls.clear();
+    this.emit();
+  }
+
+  private buildTerminalLog(status: ChatRuntimeTerminalStatus) {
+    if (status === 'completed') {
+      return '실행이 완료되었습니다.';
+    }
+
+    if (status === 'failed') {
+      return '실행이 실패로 종료되었습니다.';
+    }
+
+    if (status === 'cancelled') {
+      return '실행이 강제 취소되었습니다.';
+    }
+
+    return '대기열에서 제거되었습니다.';
+  }
+
+  private trimArchivedJobs() {
+    while (this.archivedJobs.size > MAX_ARCHIVED_JOBS) {
+      const firstKey = this.archivedJobs.keys().next().value;
+
+      if (!firstKey) {
+        return;
+      }
+
+      this.archivedJobs.delete(firstKey);
+    }
+  }
+
+  private emit() {
+    const snapshot = this.getSnapshot();
+
+    this.subscribers.forEach((listener) => {
+      listener(snapshot);
+    });
+  }
+}
+
+export const chatRuntimeService = new ChatRuntimeService();
diff --git a/etc/servers/work-server/src/services/chat-service.test.ts b/etc/servers/work-server/src/services/chat-service.test.ts
new file mode 100644
index 0000000..4e83943
--- /dev/null
+++ b/etc/servers/work-server/src/services/chat-service.test.ts
@@ -0,0 +1,260 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp, mkdir, readFile, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { env } from '../config/env.js';
+import {
+  collectOfflineNotificationClientIds,
+  createActivityLogMessage,
+  extractDiffCodeBlocks,
+  fitActivityLogLines,
+  isAutomationRegistrationCountRequest,
+  resolveResponseTimestamp,
+  rewriteCodexOutputWithChatResources,
+  shouldUseAgenticCodexReply,
+  shouldUseTemplateMacroReply,
+  validateAgenticCodexRuntime,
+} from './chat-service.js';
+
+test('collectOfflineNotificationClientIds merges session and conversation targets without duplicates', () => {
+  assert.deepEqual(
+    collectOfflineNotificationClientIds('client-a', ['client-b', ' client-a ', '', 'client-c', 'client-b']),
+    ['client-b', 'client-a', 'client-c'],
+  );
+});
+
+test('isAutomationRegistrationCountRequest detects today automation registration count questions', () => {
+  assert.equal(isAutomationRegistrationCountRequest('오늘 자동화 등록 총 건수'), true);
+  assert.equal(isAutomationRegistrationCountRequest('today automation register count'), true);
+  assert.equal(isAutomationRegistrationCountRequest('자동화 등록 기준이 뭐야'), false);
+});
+
+test('shouldUseAgenticCodexReply routes read and modify style requests to real Codex execution', () => {
+  assert.equal(shouldUseAgenticCodexReply('src/app/main/MainChatPanel.tsx 읽어서 구조 설명해줘'), true);
+  assert.equal(shouldUseAgenticCodexReply('DB 직접 조회해서 오늘 오류 건수 확인해줘'), true);
+  assert.equal(shouldUseAgenticCodexReply('MainChatPanel.hotfix.css 수정해줘'), true);
+});
+
+test('shouldUseAgenticCodexReply keeps fast-path responses for automation registration count questions', () => {
+  assert.equal(shouldUseAgenticCodexReply('오늘 자동화 등록 총 건수'), false);
+});
+
+test('shouldUseTemplateMacroReply only matches template chats and template-scoped prompts', () => {
+  assert.equal(
+    shouldUseTemplateMacroReply(
+      {
+        pageId: null,
+        pageTitle: 'Codex Live',
+        topMenu: 'chat',
+        focusedComponentId: null,
+        pageUrl: 'https://test.sm-home.cloud/chat/live',
+        chatTypeLabel: 'API 요청 템플릿',
+        chatTypeDescription: 'API 요청 본문을 정리하는 템플릿',
+        chatTypeIsTemplate: true,
+      },
+      '이 템플릿 예시 보여줘',
+    ),
+    true,
+  );
+
+  assert.equal(
+    shouldUseTemplateMacroReply(
+      {
+        pageId: null,
+        pageTitle: 'Codex Live',
+        topMenu: 'chat',
+        focusedComponentId: null,
+        pageUrl: 'https://test.sm-home.cloud/chat/live',
+        chatTypeLabel: 'API 요청 템플릿',
+        chatTypeDescription: 'API 요청 본문을 정리하는 템플릿',
+        chatTypeIsTemplate: true,
+      },
+      '아이패드 말풍선 폰트 조금 줄여줘',
+    ),
+    false,
+  );
+
+  assert.equal(
+    shouldUseTemplateMacroReply(
+      {
+        pageId: null,
+        pageTitle: 'Codex Live',
+        topMenu: 'chat',
+        focusedComponentId: null,
+        pageUrl: 'https://test.sm-home.cloud/chat/live',
+        chatTypeLabel: '일반 요청',
+        chatTypeDescription: '일반 요청',
+        chatTypeIsTemplate: false,
+      },
+      '템플릿 예시 보여줘',
+    ),
+    false,
+  );
+});
+
+test('fitActivityLogLines keeps modest activity history instead of trimming at 12 lines', () => {
+  const lines = Array.from({ length: 13 }, (_, index) => `# 진행: step ${index + 1}`);
+
+  assert.deepEqual(fitActivityLogLines(lines), lines);
+});
+
+test('fitActivityLogLines keeps full activity history when it is within the configured limits', () => {
+  const lines = Array.from({ length: 80 }, (_, index) => `# 진행: step ${index + 1}`);
+  const fitted = fitActivityLogLines(lines);
+
+  assert.equal(fitted.length, 80);
+  assert.equal(fitted[0], '# 진행: step 1');
+  assert.equal(fitted.at(-1), '# 진행: step 80');
+});
+
+test('createActivityLogMessage keeps fitted activity history instead of the latest line only', () => {
+  const lines = ['# 상태: 요청을 처리합니다.', '# 진행: 분석 중입니다.', '# 상태: 응답 생성이 완료되었습니다.'];
+  const message = createActivityLogMessage('req-activity', lines);
+
+  assert.ok(message);
+  assert.equal(
+    message?.text,
+    '[[activity-log]]\n# 상태: 요청을 처리합니다.\n\n# 진행: 분석 중입니다.\n\n# 상태: 응답 생성이 완료되었습니다.',
+  );
+});
+
+test('resolveResponseTimestamp moves fast replies behind the request second', () => {
+  assert.equal(resolveResponseTimestamp(Date.UTC(2026, 3, 16, 0, 0, 0), Date.UTC(2026, 3, 16, 0, 0, 0, 250)), '2026-04-16 09:00:01');
+});
+
+test('resolveResponseTimestamp keeps the real time when reply is already later', () => {
+  assert.equal(resolveResponseTimestamp(Date.UTC(2026, 3, 16, 0, 0, 0), Date.UTC(2026, 3, 16, 0, 0, 5)), '2026-04-16 09:00:05');
+});
+
+test('extractDiffCodeBlocks collects fenced diff bodies', () => {
+  const output = ['설명', '', '```diff', 'diff --git a/a.ts b/a.ts', '+hello', '```', '', '마무리'].join('\n');
+
+  assert.deepEqual(extractDiffCodeBlocks(output), ['diff --git a/a.ts b/a.ts\n+hello']);
+});
+
+test('rewriteCodexOutputWithChatResources stages diff blocks as chat resources', async () => {
+  const repoPath = await mkdtemp(path.join(tmpdir(), 'chat-service-test-'));
+  await mkdir(path.join(repoPath, 'public'), { recursive: true });
+
+  const output = ['변경사항입니다.', '', '```diff', 'diff --git a/src/a.ts b/src/a.ts', '+hello', '```'].join('\n');
+  const rewritten = await rewriteCodexOutputWithChatResources(output, repoPath, 'chat-room');
+  const expectedUrl = '/api/chat/resources/.codex_chat/chat-room/resource/_generated/response.diff';
+  const savedDiffPath = path.join(
+    repoPath,
+    'public',
+    '.codex_chat',
+    'chat-room',
+    'resource',
+    '_generated',
+    'response.diff',
+  );
+
+  assert.match(rewritten, new RegExp(`${expectedUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`, 'm'));
+  assert.equal(await readFile(savedDiffPath, 'utf8'), 'diff --git a/src/a.ts b/src/a.ts\n+hello\n');
+});
+
+test('rewriteCodexOutputWithChatResources keeps existing public chat resource paths stable', async () => {
+  const repoPath = await mkdtemp(path.join(tmpdir(), 'chat-service-test-'));
+  const originalPath = path.join(repoPath, 'src', 'app', 'main', 'MainChatPanel.tsx');
+  const stagedPath = path.join(
+    repoPath,
+    'public',
+    '.codex_chat',
+    'chat-room',
+    'resource',
+    'src',
+    'app',
+    'main',
+    'MainChatPanel.tsx',
+  );
+
+  await mkdir(path.dirname(originalPath), { recursive: true });
+  await mkdir(path.dirname(stagedPath), { recursive: true });
+  await writeFile(originalPath, 'export const value = 1;\n', 'utf8');
+  await writeFile(stagedPath, 'export const value = 1;\n', 'utf8');
+
+  const output =
+    '리소스 경로는 public/.codex_chat/chat-room/resource/src/app/main/MainChatPanel.tsx 입니다.';
+  const rewritten = await rewriteCodexOutputWithChatResources(output, repoPath, 'chat-room');
+
+  assert.match(rewritten, /\/api\/chat\/resources\/\.codex_chat\/chat-room\/resource\/src\/app\/main\/MainChatPanel\.tsx/);
+  assert.doesNotMatch(rewritten, /resource\/public\/\.codex_chat/);
+  assert.equal(await readFile(stagedPath, 'utf8'), 'export const value = 1;\n');
+});
+
+test('rewriteCodexOutputWithChatResources stages repo root files linked with a leading slash', async () => {
+  const repoPath = await mkdtemp(path.join(tmpdir(), 'chat-service-test-'));
+  const originalPath = path.join(repoPath, 'docker-compose.yml');
+  const stagedPath = path.join(
+    repoPath,
+    'public',
+    '.codex_chat',
+    'chat-room',
+    'resource',
+    'docker-compose.yml',
+  );
+
+  await mkdir(path.dirname(originalPath), { recursive: true });
+  await writeFile(originalPath, 'services:\n  app:\n    image: node:22\n', 'utf8');
+
+  const output = '파일은 /docker-compose.yml 에 있습니다.';
+  const rewritten = await rewriteCodexOutputWithChatResources(output, repoPath, 'chat-room');
+
+  assert.match(rewritten, /\/api\/chat\/resources\/\.codex_chat\/chat-room\/resource\/docker-compose\.yml/);
+  assert.equal(await readFile(stagedPath, 'utf8'), 'services:\n  app:\n    image: node:22\n');
+});
+
+test('rewriteCodexOutputWithChatResources prefers absolute path replacements before nested relative paths', async () => {
+  const repoPath = await mkdtemp(path.join(tmpdir(), 'chat-service-test-'));
+  const originalPath = path.join(repoPath, 'etc', 'servers', 'work-server', 'package.json');
+
+  await mkdir(path.dirname(originalPath), { recursive: true });
+  await mkdir(path.join(repoPath, 'public'), { recursive: true });
+  await writeFile(originalPath, '{\n  "name": "work-server"\n}\n', 'utf8');
+
+  const output =
+    '변경 파일: [/api/chat/resources/.codex_chat/chat-room/resource/etc/servers/work-server/package.json](' +
+    `${originalPath})`;
+  const rewritten = await rewriteCodexOutputWithChatResources(output, repoPath, 'chat-room');
+
+  assert.match(
+    rewritten,
+    /\[\/api\/chat\/resources\/\.codex_chat\/chat-room\/resource\/etc\/servers\/work-server\/package\.json\]\(\/api\/chat\/resources\/\.codex_chat\/chat-room\/resource\/etc\/servers\/work-server\/package\.json\)/,
+  );
+  assert.doesNotMatch(rewritten, /\/home\/.+\/api\/chat\/resources/);
+});
+
+test('validateAgenticCodexRuntime explains missing runtime paths clearly', async () => {
+  const originalRunnerUrl = env.SERVER_COMMAND_RUNNER_URL;
+  const originalFetch = globalThis.fetch;
+  env.SERVER_COMMAND_RUNNER_URL = 'http://127.0.0.1:3211/health';
+  globalThis.fetch = (async () => {
+    throw new Error('connect ECONNREFUSED');
+  }) as typeof globalThis.fetch;
+
+  try {
+    await assert.rejects(
+      validateAgenticCodexRuntime('/tmp/chat-missing-repo-path', '/tmp/chat-missing-codex-bin'),
+      /채팅 실행 환경이 준비되지 않았습니다\..*PLAN_MAIN_PROJECT_REPO_PATH.*SERVER_COMMAND_RUNNER_URL/s,
+    );
+  } finally {
+    env.SERVER_COMMAND_RUNNER_URL = originalRunnerUrl;
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test('validateAgenticCodexRuntime accepts reachable command-runner api', async () => {
+  const repoPath = await mkdtemp(path.join(tmpdir(), 'chat-service-test-repo-'));
+  const originalRunnerUrl = env.SERVER_COMMAND_RUNNER_URL;
+  const originalFetch = globalThis.fetch;
+  env.SERVER_COMMAND_RUNNER_URL = 'http://127.0.0.1:3211/health';
+  globalThis.fetch = (async () => new Response(JSON.stringify({ ok: true }), { status: 200 })) as typeof globalThis.fetch;
+
+  try {
+    await assert.doesNotReject(validateAgenticCodexRuntime(repoPath, 'codex'));
+  } finally {
+    env.SERVER_COMMAND_RUNNER_URL = originalRunnerUrl;
+    globalThis.fetch = originalFetch;
+  }
+});
diff --git a/etc/servers/work-server/src/services/chat-service.ts b/etc/servers/work-server/src/services/chat-service.ts
new file mode 100644
index 0000000..486f0f7
--- /dev/null
+++ b/etc/servers/work-server/src/services/chat-service.ts
@@ -0,0 +1,3274 @@
+import { cp, mkdir, stat, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import webpush from 'web-push';
+import type { FastifyBaseLogger } from 'fastify';
+import type { IncomingMessage } from 'node:http';
+import type { Socket } from 'node:net';
+import { WebSocketServer, type RawData, type WebSocket } from 'ws';
+import { env } from '../config/env.js';
+import { db } from '../db/client.js';
+import { getAppConfigSnapshot } from './app-config-service.js';
+import { BOARD_POSTS_TABLE } from './board-service.js';
+import {
+  appendChatConversationMessage,
+  appendChatConversationActivityLine,
+  getChatConversationRequest,
+  getChatConversation,
+  listChatConversationMessages,
+  listChatConversationOfflineNotificationClientIds,
+  listChatConversationRequests,
+  upsertChatConversationRequest,
+  updateChatConversationJobState,
+  updateChatConversationContext,
+} from './chat-room-service.js';
+import { chatRuntimeService, type ChatRuntimeJobDetail, type ChatRuntimeSnapshot } from './chat-runtime-service.js';
+import { WEB_PUSH_SUBSCRIPTION_TABLE } from './notification-service.js';
+import { createNotificationMessage } from './notification-message-service.js';
+import {
+  findLatestPlanItem,
+  findPlanItemByPreviewUrl,
+  findPlanItemByWorkId,
+  getPlanItemById,
+  listPlanActionHistories,
+  listPlanIssueHistories,
+  listPlanSourceWorkHistories,
+  mapPlanActionRow,
+  mapPlanIssueRow,
+  mapPlanSourceWorkRow,
+  PLAN_TABLE,
+} from './plan-service.js';
+
+type ChatAuthor = 'codex' | 'system' | 'user';
+
+type ChatMessage = {
+  id: number;
+  author: ChatAuthor;
+  text: string;
+  timestamp: string;
+  clientRequestId?: string | null;
+};
+
+type ChatContext = {
+  pageId: string | null;
+  pageTitle: string;
+  topMenu: string;
+  focusedComponentId: string | null;
+  pageUrl: string;
+  isStandaloneMode?: boolean;
+  pageVisibilityState?: 'visible' | 'hidden';
+  chatTypeId?: string | null;
+  chatTypeLabel?: string;
+  chatTypeDescription?: string;
+  chatTypeIsTemplate?: boolean;
+};
+
+type ChatInboundMessage =
+  | {
+      type: 'context:update';
+      payload: ChatContext;
+    }
+  | {
+      type: 'presence:ping';
+      payload?: {
+        at?: number;
+      };
+    }
+  | {
+      type: 'event:received';
+      payload: {
+        eventId: number;
+      };
+    }
+  | {
+      type: 'message:send';
+      payload: {
+        text: string;
+        requestId?: string;
+        mode?: 'queue' | 'direct';
+        chatTypeId?: string | null;
+        chatTypeLabel?: string;
+        chatTypeDescription?: string;
+        chatTypeIsTemplate?: boolean;
+      };
+    }
+  | {
+      type: 'runtime:watch';
+      payload: {
+        requestId?: string | null;
+      };
+    };
+
+type ChatOutboundPayload =
+  | {
+      type: 'chat:init';
+      payload: {
+        messages: ChatMessage[];
+      };
+    }
+  | {
+      type: 'chat:message';
+      payload: ChatMessage;
+    }
+  | {
+      type: 'chat:message:update';
+      payload: ChatMessage;
+    }
+  | {
+      type: 'chat:status';
+      payload: {
+        connectedAt: string;
+      };
+    }
+  | {
+      type: 'chat:job';
+      payload: {
+        requestId: string;
+        status: 'queued' | 'started' | 'completed' | 'failed';
+        mode: 'queue' | 'direct';
+        queueSize: number;
+        message: string;
+      };
+    }
+  | {
+      type: 'chat:error';
+      payload: {
+        message: string;
+      };
+    }
+  | {
+      type: 'chat:runtime';
+      payload: ChatRuntimeSnapshot;
+    }
+  | {
+      type: 'chat:runtime:detail';
+      payload: ChatRuntimeJobDetail;
+    }
+  | {
+      type: 'chat:activity';
+      payload: {
+        requestId: string;
+        line: string;
+        lineCount: number;
+      };
+    };
+
+type ChatOutboundMessage = ChatOutboundPayload & {
+  eventId: number;
+  sessionId: string;
+};
+
+type ChatSessionState = {
+  sessionId: string;
+  clientId: string | null;
+  socket: WebSocket | null;
+  lastSeenAt: number;
+  context: ChatContext | null;
+  queue: Array<{
+    requestId: string;
+    text: string;
+    mode: 'queue' | 'direct';
+    requestedAtMs: number;
+  }>;
+  activeRequestCount: number;
+  pendingQueueReleaseEventId: number | null;
+  nextEventId: number;
+  eventHistory: ChatOutboundMessage[];
+  messagePersistenceTail: Promise<void>;
+  watchedRuntimeRequestId: string | null;
+};
+
+type ChatRuntimeController = {
+  getJobDetail: (requestId: string) => ReturnType<typeof chatRuntimeService.getJobDetail>;
+  cancelJob: (requestId: string) => Promise<boolean>;
+  removeQueuedJob: (requestId: string) => Promise<boolean>;
+};
+
+type ActiveChatExecution = {
+  cancel: () => Promise<boolean> | boolean;
+};
+
+let activeRuntimeController: ChatRuntimeController | null = null;
+const activeChatProcessRegistry = new Map<string, ActiveChatExecution>();
+
+export function getChatRuntimeController() {
+  return activeRuntimeController;
+}
+
+const SOCKET_PATH = '/ws/chat';
+const KST_TIME_ZONE = 'Asia/Seoul';
+const STREAM_CAPTURE_LIMIT = 256 * 1024;
+const CHAT_PUBLIC_RESOURCE_DIR = '.codex_chat';
+const CHAT_PUBLIC_RESOURCE_SUBDIR = 'resource';
+const CHAT_API_RESOURCE_ROUTE_PREFIX = '/api/chat/resources';
+const SOCKET_READY_STATE_OPEN = 1;
+const CHAT_ACTIVITY_MESSAGE_PREFIX = '[[activity-log]]';
+const MAX_CHAT_ACTIVITY_MESSAGE_LINES = 240;
+const MAX_CHAT_ACTIVITY_MESSAGE_CHARS = 80_000;
+const CHAT_OFFLINE_PUSH_SUPPRESSION_WINDOW_MS = 15_000;
+const CHAT_PROMPT_HISTORY_MAX_MESSAGES = 12;
+const CHAT_PROMPT_HISTORY_MAX_CHARS = 3200;
+const CHAT_SESSION_EVENT_HISTORY_LIMIT = 400;
+let chatMessageSequence = 0;
+function hasWebPushConfig() {
+  return Boolean(
+    env.WEB_PUSH_ENABLED &&
+      env.WEB_PUSH_VAPID_PUBLIC_KEY?.trim() &&
+      env.WEB_PUSH_VAPID_PRIVATE_KEY?.trim() &&
+      env.WEB_PUSH_SUBJECT?.trim(),
+  );
+}
+
+function ensureChatWebPushConfigured() {
+  if (!hasWebPushConfig()) {
+    return false;
+  }
+
+  webpush.setVapidDetails(
+    env.WEB_PUSH_SUBJECT!,
+    env.WEB_PUSH_VAPID_PUBLIC_KEY!.trim(),
+    env.WEB_PUSH_VAPID_PRIVATE_KEY!.trim(),
+  );
+
+  return true;
+}
+
+function isChatSessionActivelyViewing(session: ChatSessionState) {
+  if (!session.socket || session.socket.readyState !== SOCKET_READY_STATE_OPEN) {
+    return false;
+  }
+
+  if (session.context?.pageVisibilityState === 'hidden') {
+    return false;
+  }
+
+  if (session.context?.topMenu !== 'chat') {
+    return false;
+  }
+
+  const pageUrl = session.context?.pageUrl?.trim();
+
+  if (pageUrl) {
+    try {
+      const resolvedUrl = new URL(pageUrl);
+
+      if (!resolvedUrl.pathname.startsWith('/chat/live')) {
+        return false;
+      }
+    } catch {
+      return false;
+    }
+  }
+
+  return Date.now() - session.lastSeenAt < CHAT_OFFLINE_PUSH_SUPPRESSION_WINDOW_MS;
+}
+
+function buildChatNotificationTargetUrl(context: ChatContext | null, sessionId: string) {
+  const fallbackUrl = new URL('https://test.sm-home.cloud/chat/live');
+  fallbackUrl.searchParams.set('topMenu', 'chat');
+  fallbackUrl.searchParams.set('sessionId', sessionId);
+
+  const pageUrl = context?.pageUrl?.trim();
+
+  if (!pageUrl) {
+    return fallbackUrl.toString();
+  }
+
+  try {
+    const targetUrl = new URL(pageUrl);
+    targetUrl.searchParams.set('topMenu', targetUrl.searchParams.get('topMenu') || 'chat');
+    targetUrl.searchParams.set('sessionId', sessionId);
+    return targetUrl.toString();
+  } catch {
+    return fallbackUrl.toString();
+  }
+}
+
+function createChatNotificationPreview(text: string) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function createChatQuestionAnswerNotificationBody(args: {
+  questionText?: string | null;
+  answerText?: string | null;
+  fallback: string;
+}) {
+  const questionPreview = createChatNotificationPreview(args.questionText ?? '');
+  const answerPreview = createChatNotificationPreview(args.answerText ?? '');
+
+  if (questionPreview && answerPreview) {
+    return `질문: ${questionPreview}\n답변: ${answerPreview}`;
+  }
+
+  if (answerPreview) {
+    return `답변: ${answerPreview}`;
+  }
+
+  if (questionPreview) {
+    return `질문: ${questionPreview}`;
+  }
+
+  return args.fallback;
+}
+
+function createChatQuestionOnlyNotificationPreview(questionText?: string | null, fallback?: string) {
+  const questionPreview = createChatNotificationPreview(questionText ?? '');
+  return questionPreview ? `질문: ${questionPreview}` : fallback ?? '';
+}
+
+function normalizeNotificationDetailText(text?: string | null) {
+  const normalized = String(text ?? '').trim();
+  return normalized || undefined;
+}
+
+export function collectOfflineNotificationClientIds(sessionClientId?: string | null, preferredClientIds?: string[]) {
+  const nextClientIds = new Set<string>();
+
+  for (const candidate of preferredClientIds ?? []) {
+    const normalized = String(candidate ?? '').trim();
+
+    if (normalized) {
+      nextClientIds.add(normalized);
+    }
+  }
+
+  const normalizedSessionClientId = String(sessionClientId ?? '').trim();
+
+  if (normalizedSessionClientId) {
+    nextClientIds.add(normalizedSessionClientId);
+  }
+
+  return [...nextClientIds];
+}
+
+function isPreparingChatReply(text?: string | null) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.startsWith('응답을 준비하고 있습니다');
+}
+
+function formatTime(date: Date) {
+  return new Intl.DateTimeFormat('sv-SE', {
+    timeZone: KST_TIME_ZONE,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  })
+    .format(date)
+    .replace(',', '');
+}
+
+export function resolveResponseTimestamp(requestedAtMs?: number | null, nowMs = Date.now()) {
+  if (!Number.isFinite(requestedAtMs)) {
+    return formatTime(new Date(nowMs));
+  }
+
+  return formatTime(new Date(Math.max(nowMs, Number(requestedAtMs) + 1_000)));
+}
+
+function formatKstDate(date = new Date()) {
+  return new Intl.DateTimeFormat('en-CA', {
+    timeZone: KST_TIME_ZONE,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(date);
+}
+
+function createChatMessageId() {
+  chatMessageSequence = (chatMessageSequence + 1) % 1_000;
+  return Date.now() * 1_000 + chatMessageSequence;
+}
+
+function createMessage(author: ChatAuthor, text: string, clientRequestId?: string | null): ChatMessage {
+  return {
+    id: createChatMessageId(),
+    author,
+    text,
+    timestamp: formatTime(new Date()),
+    clientRequestId: clientRequestId?.trim() || null,
+  };
+}
+
+function createRequestId() {
+  return `chat-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function hashRequestId(value: string) {
+  let hash = 0;
+
+  for (const character of value) {
+    hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  }
+
+  return Math.abs(hash) + 1_000_000;
+}
+
+export function fitActivityLogLines(lines: string[]) {
+  const normalizedLines = lines.map((line) => line.trim()).filter(Boolean);
+
+  if (normalizedLines.length <= 1) {
+    return normalizedLines;
+  }
+
+  let startIndex = Math.max(0, normalizedLines.length - MAX_CHAT_ACTIVITY_MESSAGE_LINES);
+  let fittedLines = normalizedLines.slice(startIndex);
+
+  while (fittedLines.length > 1 && fittedLines.join('\n\n').length > MAX_CHAT_ACTIVITY_MESSAGE_CHARS) {
+    startIndex += 1;
+    fittedLines = normalizedLines.slice(startIndex);
+  }
+
+  return fittedLines;
+}
+
+export function createActivityLogMessage(requestId: string, lines: string[]) {
+  const normalizedRequestId = requestId.trim();
+  const fittedLines = fitActivityLogLines(lines);
+  const messageBody = fittedLines.length > 0 ? fittedLines.join('\n\n') : '활동 로그를 준비하고 있습니다.';
+  const messageText = `${CHAT_ACTIVITY_MESSAGE_PREFIX}\n${messageBody}`;
+
+  return createMessage('system', messageText, normalizedRequestId)
+    ? {
+        id: hashRequestId(normalizedRequestId),
+        author: 'system' as const,
+        text: messageText,
+        timestamp: formatTime(new Date()),
+        clientRequestId: normalizedRequestId,
+      }
+    : null;
+}
+
+function shouldPersistMessageUpdate(message: ChatMessage) {
+  if (message.author === 'codex') {
+    return false;
+  }
+
+  return !String(message.text ?? '').startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`);
+}
+
+function isSocketOpen(socket: WebSocket | null | undefined) {
+  return Boolean(socket && socket.readyState === SOCKET_READY_STATE_OPEN);
+}
+
+function closeSocketSafely(logger: FastifyBaseLogger, socket: WebSocket | null | undefined, message: string) {
+  if (!socket) {
+    return;
+  }
+
+  try {
+    socket.close();
+  } catch (error) {
+    logger.warn(error, message);
+  }
+}
+
+function sendSocketEnvelope(
+  logger: FastifyBaseLogger,
+  socket: WebSocket | null | undefined,
+  envelope: ChatOutboundMessage,
+  message: string,
+) {
+  const targetSocket = socket;
+
+  if (!targetSocket || targetSocket.readyState !== SOCKET_READY_STATE_OPEN) {
+    return false;
+  }
+
+  try {
+    targetSocket.send(JSON.stringify(envelope));
+    return true;
+  } catch (error) {
+    logger.warn(error, message);
+    return false;
+  }
+}
+
+type ParsedPlanContext = {
+  planId: number | null;
+  workId: string | null;
+  previewUrl: string | null;
+};
+
+type PlanSnapshot = {
+  planId: number;
+  workId: string;
+  status: string;
+  note: string;
+  workerStatus: string | null;
+  issueTags: string[];
+  hasOpenIssues: boolean;
+  assignedBranch: string | null;
+  lastError: string | null;
+  latestActionNote: string | null;
+  latestIssue: {
+    tag: string;
+    message: string;
+    resolved: boolean;
+  } | null;
+  latestSourceWork: {
+    summary: string;
+    previewUrl: string | null;
+    changedFiles: string[];
+  } | null;
+  recentActionNotes: string[];
+  recentWorkSummaries: string[];
+};
+
+function truncateText(value: string | null | undefined, limit = 120) {
+  const normalized = String(value ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  return normalized.length > limit ? `${normalized.slice(0, limit - 1)}…` : normalized;
+}
+
+function extractReferencedPlanId(input: string) {
+  const planIdMatch = input.match(/(?:planid=|#)(\d{1,9})/i) ?? input.match(/\bplan\s*(\d{1,9})\b/i);
+  const parsedPlanId = planIdMatch?.[1] ? Number(planIdMatch[1]) : NaN;
+
+  return Number.isInteger(parsedPlanId) && parsedPlanId > 0 ? parsedPlanId : null;
+}
+
+function extractReferencedWorkId(input: string) {
+  const workIdMatch = input.match(/\bworkid\s*[:=]?\s*([^\s,]+)/i);
+  return workIdMatch?.[1]?.trim() || null;
+}
+
+function extractReferencedPreviewUrl(input: string) {
+  const previewUrlMatch = input.match(/https?:\/\/[^\s)]+/i);
+  return previewUrlMatch?.[0]?.trim() || null;
+}
+
+function buildChangedFilesSummary(changedFiles: string[], limit = 5) {
+  if (changedFiles.length === 0) {
+    return '변경/신규 파일: 기록 없음';
+  }
+
+  const visibleFiles = changedFiles.slice(0, limit);
+  const suffix = changedFiles.length > limit ? ` 외 ${changedFiles.length - limit}개` : '';
+  return `변경/신규 파일: ${visibleFiles.join(', ')}${suffix}`;
+}
+
+function parsePlanContext(context: ChatContext | null, input: string): ParsedPlanContext {
+  const pageUrl = context?.pageUrl ?? '';
+  const referencedPlanId = extractReferencedPlanId(input);
+  const referencedWorkId = extractReferencedWorkId(input);
+  const referencedPreviewUrl = extractReferencedPreviewUrl(input);
+
+  if (!pageUrl) {
+    return {
+      planId: referencedPlanId,
+      workId: referencedWorkId,
+      previewUrl: referencedPreviewUrl,
+    };
+  }
+
+  try {
+    const url = new URL(pageUrl);
+    const planIdText = url.searchParams.get('planId');
+    const workIdText = url.searchParams.get('workId');
+    const planIdNumber = planIdText ? Number(planIdText) : NaN;
+
+    return {
+      planId: Number.isInteger(planIdNumber) && planIdNumber > 0 ? planIdNumber : referencedPlanId,
+      workId: workIdText?.trim() || referencedWorkId,
+      previewUrl: referencedPreviewUrl,
+    };
+  } catch {
+    return {
+      planId: referencedPlanId,
+      workId: referencedWorkId,
+      previewUrl: referencedPreviewUrl,
+    };
+  }
+}
+
+async function loadPlanSnapshot(planId: number): Promise<PlanSnapshot | null> {
+  const item = await getPlanItemById(planId);
+
+  if (!item) {
+    return null;
+  }
+
+  const [actionRows, issueRows, sourceWorkRows] = await Promise.all([
+    listPlanActionHistories(planId),
+    listPlanIssueHistories(planId),
+    listPlanSourceWorkHistories(planId),
+  ]);
+  const latestAction = actionRows[0] ? mapPlanActionRow(actionRows[0]) : null;
+  const latestIssue = issueRows[0] ? mapPlanIssueRow(issueRows[0]) : null;
+  const latestSourceWork = sourceWorkRows[0] ? mapPlanSourceWorkRow(sourceWorkRows[0]) : null;
+
+  return {
+    planId,
+    workId: String(item.workId ?? '작업ID'),
+    status: String(item.status ?? '-'),
+    note: String(item.note ?? ''),
+    workerStatus: item.workerStatus ? String(item.workerStatus) : null,
+    issueTags: Array.isArray(item.issueTags) ? item.issueTags.map((value) => String(value)) : [],
+    hasOpenIssues: Boolean(item.hasOpenIssues),
+    assignedBranch: item.assignedBranch ? String(item.assignedBranch) : null,
+    lastError: item.lastError ? String(item.lastError) : null,
+    latestActionNote: latestAction ? String(latestAction.note) : null,
+    latestIssue: latestIssue
+      ? {
+          tag: String(latestIssue.issueTag),
+          message: String(latestIssue.message),
+          resolved: Boolean(latestIssue.resolved),
+        }
+      : null,
+    latestSourceWork: latestSourceWork
+      ? {
+          summary: String(latestSourceWork.summary),
+          previewUrl: latestSourceWork.previewUrl ? String(latestSourceWork.previewUrl) : null,
+          changedFiles: latestSourceWork.changedFiles,
+        }
+      : null,
+    recentActionNotes: actionRows
+      .slice(0, 5)
+      .map((row) => truncateText(String(mapPlanActionRow(row).note ?? ''), 140))
+      .filter(Boolean),
+    recentWorkSummaries: sourceWorkRows
+      .slice(0, 5)
+      .map((row) => truncateText(String(mapPlanSourceWorkRow(row).summary ?? ''), 140))
+      .filter(Boolean),
+  };
+}
+
+function isWorklogRequest(input: string) {
+  const normalized = input.toLowerCase();
+  const mentionsWorklog =
+    input.includes('워크일지') ||
+    input.includes('작업로그') ||
+    input.includes('작업 일지') ||
+    input.includes('작업일지') ||
+    normalized.includes('worklog');
+  const asksToWrite =
+    input.includes('작성') ||
+    input.includes('정리') ||
+    input.includes('기록') ||
+    input.includes('밀린') ||
+    input.includes('써');
+
+  return mentionsWorklog || (normalized.includes('log') && asksToWrite);
+}
+
+function isPlanDetailRequest(input: string) {
+  const normalized = input.toLowerCase();
+
+  return (
+    input.includes('작업') ||
+    input.includes('계획') ||
+    input.includes('이력') ||
+    input.includes('이슈') ||
+    input.includes('상태') ||
+    input.includes('브랜치') ||
+    normalized.includes('plan') ||
+    normalized.includes('issue') ||
+    normalized.includes('status') ||
+    normalized.includes('history') ||
+    normalized.includes('branch')
+  );
+}
+
+function buildWorklogReply(context: ChatContext | null, snapshot: PlanSnapshot | null) {
+  const pageTitle = context?.pageTitle ?? '현재 화면';
+
+  if (!snapshot) {
+    return `현재 화면: ${pageTitle}\n작업로그 초안을 만들 Plan을 찾지 못했습니다. Plan 상세를 연 뒤 다시 요청해 주세요.`;
+  }
+
+  const today = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Seoul',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(new Date());
+  const todayWork = [
+    truncateText(snapshot.note, 180),
+    ...snapshot.recentWorkSummaries,
+    snapshot.latestActionNote ? truncateText(snapshot.latestActionNote, 140) : '',
+  ].filter(Boolean);
+  const issues = snapshot.latestIssue
+    ? [
+        `${snapshot.latestIssue.tag} ${snapshot.latestIssue.resolved ? '해결' : '미해결'}: ${truncateText(
+          snapshot.latestIssue.message,
+          140,
+        )}`,
+      ]
+    : [];
+  const decisions = [
+    snapshot.assignedBranch ? `작업 브랜치: ${snapshot.assignedBranch}` : '',
+    snapshot.latestSourceWork?.previewUrl ? `preview 링크: ${snapshot.latestSourceWork.previewUrl}` : '',
+    snapshot.status ? `현재 상태: ${snapshot.status}${snapshot.workerStatus ? ` / ${snapshot.workerStatus}` : ''}` : '',
+  ].filter(Boolean);
+  const details = [...snapshot.recentActionNotes, ...snapshot.recentWorkSummaries].filter(Boolean);
+
+  return [
+    `현재 화면: ${pageTitle}`,
+    `기준 Plan: #${snapshot.planId} ${snapshot.workId}`,
+    '아래 초안을 작업일지에 바로 붙여 넣으면 됩니다.',
+    '',
+    `# ${today} 작업일지`,
+    '',
+    '## 오늘 작업',
+    ...(todayWork.length > 0 ? todayWork.slice(0, 6).map((item) => `- ${item}`) : ['- Plan 메모와 이력 확인 후 작업 내용을 보강해 주세요.']),
+    '',
+    '## 이슈 및 해결',
+    ...(issues.length > 0 ? issues.map((item) => `- ${item}`) : ['- 현재 기록된 이슈 없음']),
+    '',
+    '## 결정 사항',
+    ...(decisions.length > 0 ? decisions.map((item) => `- ${item}`) : ['- 별도 결정 사항 없음']),
+    '',
+    '## 상세 작업 내역',
+    ...(details.length > 0 ? details.slice(0, 8).map((item) => `- ${item}`) : ['- 최근 조치 이력이 없어 상세 내역 보강이 필요합니다.']),
+  ].join('\n');
+}
+
+function buildRecentPlanHistoryLines(snapshot: PlanSnapshot | null, limit = 2) {
+  if (!snapshot) {
+    return [];
+  }
+
+  const historyItems = [
+    ...snapshot.recentActionNotes.map((note) => `[조치] ${note}`),
+    ...snapshot.recentWorkSummaries.map((summary) => `[소스] ${summary}`),
+  ]
+    .filter(Boolean)
+    .slice(0, limit);
+
+  if (historyItems.length === 0) {
+    return [];
+  }
+
+  return ['최근 조치 이력:', ...historyItems.map((item, index) => `${index + 1}. ${item}`)];
+}
+
+function isDetailRequest(input: string) {
+  const normalized = input.toLowerCase();
+
+  return (
+    input.includes('상세') ||
+    input.includes('자세히') ||
+    input.includes('전체') ||
+    normalized.includes('detail') ||
+    normalized.includes('details') ||
+    normalized.includes('more')
+  );
+}
+
+export function isAutomationRegistrationCountRequest(input: string) {
+  const normalized = input.toLowerCase();
+  const mentionsAutomation =
+    input.includes('자동화') || normalized.includes('automation') || normalized.includes('plan');
+  const mentionsRegistration =
+    input.includes('등록') || input.includes('접수') || normalized.includes('register') || normalized.includes('count');
+  const mentionsToday =
+    input.includes('오늘') || normalized.includes('today');
+  const asksCount =
+    input.includes('총') ||
+    input.includes('건수') ||
+    input.includes('몇 건') ||
+    input.includes('몇건') ||
+    normalized.includes('count') ||
+    normalized.includes('total');
+
+  return mentionsAutomation && mentionsRegistration && (mentionsToday || asksCount);
+}
+
+function isAutomationRegistrationDefinitionRequest(input: string) {
+  const normalized = input.toLowerCase();
+  const mentionsAutomation = input.includes('자동화') || normalized.includes('automation');
+  const mentionsRegistration = input.includes('등록') || input.includes('접수') || normalized.includes('register');
+  const asksMeaning =
+    input.includes('무슨 뜻') ||
+    input.includes('뭐야') ||
+    input.includes('뜻') ||
+    input.includes('기준') ||
+    input.includes('뭘 의미') ||
+    normalized.includes('meaning') ||
+    normalized.includes('define');
+
+  return mentionsAutomation && mentionsRegistration && asksMeaning;
+}
+
+export function shouldUseAgenticCodexReply(input: string) {
+  const normalized = input.toLowerCase();
+  const trimmed = input.trim();
+
+  if (isAutomationRegistrationCountRequest(input) || isAutomationRegistrationDefinitionRequest(input)) {
+    return false;
+  }
+
+  if (!trimmed) {
+    return false;
+  }
+
+  if (trimmed.length <= 3 && !/(db|api|fix|bug|log|sql)/i.test(trimmed)) {
+    return false;
+  }
+
+  if (isDetailRequest(input) || isPlanDetailRequest(input) || isWorklogRequest(input)) {
+    return false;
+  }
+
+  return (
+    input.includes('수정') ||
+    input.includes('변경') ||
+    input.includes('구현') ||
+    input.includes('추가') ||
+    input.includes('삭제') ||
+    input.includes('고쳐') ||
+    input.includes('만들어') ||
+    input.includes('등록해줘') ||
+    input.includes('조회') ||
+    input.includes('확인') ||
+    input.includes('읽어') ||
+    input.includes('분석') ||
+    input.includes('DB') ||
+    input.includes('API') ||
+    input.includes('소스') ||
+    input.includes('파일') ||
+    input.includes('로그') ||
+    /(?:\/|\\).+\.[a-z0-9]+/i.test(input) ||
+    normalized.includes('fix') ||
+    normalized.includes('implement') ||
+    normalized.includes('change') ||
+    normalized.includes('edit') ||
+    normalized.includes('read') ||
+    normalized.includes('source') ||
+    normalized.includes('file') ||
+    normalized.includes('db') ||
+    normalized.includes('api') ||
+    /\s/.test(trimmed)
+  );
+}
+
+function extractTemplateKeywords(context: ChatContext | null) {
+  const raw = `${context?.chatTypeLabel ?? ''} ${context?.chatTypeDescription ?? ''}`;
+
+  return Array.from(
+    new Set(
+      raw
+        .split(/[^0-9A-Za-z가-힣]+/)
+        .map((keyword) => keyword.trim())
+        .filter((keyword) => keyword.length >= 2)
+        .filter(
+          (keyword) =>
+            !['템플릿', 'template', 'chat', 'codex', 'live', '요청', '일반', '기본', '유형'].includes(keyword.toLowerCase()),
+        ),
+    ),
+  );
+}
+
+export function shouldUseTemplateMacroReply(context: ChatContext | null, input: string) {
+  if (context?.chatTypeIsTemplate !== true) {
+    return false;
+  }
+
+  const normalized = input.toLowerCase();
+
+  if (
+    input.includes('템플릿') ||
+    input.includes('양식') ||
+    input.includes('포맷') ||
+    input.includes('형식') ||
+    input.includes('예시') ||
+    input.includes('샘플') ||
+    normalized.includes('template') ||
+    normalized.includes('format') ||
+    normalized.includes('sample')
+  ) {
+    return true;
+  }
+
+  return extractTemplateKeywords(context).some((keyword) => normalized.includes(keyword.toLowerCase()));
+}
+
+function summarizeCodexOutput(output: string) {
+  const normalized = String(output ?? '').trim();
+
+  if (!normalized) {
+    return 'Codex 실행 결과가 비어 있습니다.';
+  }
+
+  const lines = normalized
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter(Boolean);
+
+  return lines.slice(-12).join('\n');
+}
+
+function summarizeCommand(command: string, limit = 180) {
+  const normalized = String(command ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  return normalized.length > limit ? `${normalized.slice(0, limit - 1).trimEnd()}...` : normalized;
+}
+
+function summarizeCommandOutput(output: string, maxLines = 3, maxLength = 220) {
+  const lines = String(output ?? '')
+    .replace(/\r/g, '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  if (lines.length === 0) {
+    return '';
+  }
+
+  const joined = lines.slice(0, maxLines).join(' / ');
+  return joined.length > maxLength ? `${joined.slice(0, maxLength - 1).trimEnd()}...` : joined;
+}
+
+function inferCommandReason(command: string) {
+  const normalized = command.toLowerCase();
+
+  if (normalized.includes('rg ') || normalized.includes('ripgrep')) {
+    return '관련 파일이나 텍스트를 빠르게 찾기 위해 검색했습니다.';
+  }
+
+  if (normalized.includes('sed -n') || normalized.includes('cat ') || normalized.includes('less ')) {
+    return '해당 파일 내용을 직접 읽어 문맥을 확인했습니다.';
+  }
+
+  if (normalized.includes('ls ') || normalized === 'ls' || normalized.includes('rg --files')) {
+    return '디렉터리 구조와 대상 파일 위치를 확인했습니다.';
+  }
+
+  if (normalized.includes('git status')) {
+    return '작업 트리 상태와 변경 범위를 점검했습니다.';
+  }
+
+  if (normalized.includes('tsc ') || normalized.includes('npm test') || normalized.includes('node --test')) {
+    return '수정 후 타입이나 동작 검증을 진행했습니다.';
+  }
+
+  if (normalized.includes('curl ') || normalized.includes('fetch')) {
+    return '실제 응답이나 연결 상태를 확인했습니다.';
+  }
+
+  return '현재 요청을 해결하기 위한 다음 단계를 확인했습니다.';
+}
+
+function isIgnorableCodexDiagnosticLine(line: string) {
+  const normalized = line.trim();
+
+  if (!normalized) {
+    return true;
+  }
+
+  return (
+    /^\d{4}-\d{2}-\d{2}T\S+\s+WARN\b/.test(normalized) ||
+    normalized.includes('ignoring interface.defaultPrompt') ||
+    normalized.includes('failed to open state db') ||
+    normalized.includes('state db discrepancy') ||
+    normalized.includes('Failed to kill MCP process group') ||
+    normalized.includes('Failed to delete shell snapshot') ||
+    normalized.includes('failed to unwatch ')
+  );
+}
+
+function extractCodexActivityLog(parsed: Record<string, unknown>) {
+  const type = typeof parsed.type === 'string' ? parsed.type : '';
+  const item = parsed.item && typeof parsed.item === 'object' ? (parsed.item as Record<string, unknown>) : null;
+  const itemType = typeof item?.type === 'string' ? item.type : '';
+
+  if (!item || itemType !== 'command_execution') {
+    return '';
+  }
+
+  const command = summarizeCommand(typeof item.command === 'string' ? item.command : '');
+
+  if (!command) {
+    return '';
+  }
+
+  const reason = inferCommandReason(command);
+
+  if (type === 'item.started') {
+    return `# 이유: ${reason}\n$ ${command}`;
+  }
+
+  if (type === 'item.completed') {
+    const exitCode =
+      typeof item.exit_code === 'number' && Number.isFinite(item.exit_code) ? Math.round(item.exit_code) : null;
+    const outputSummary = summarizeCommandOutput(typeof item.aggregated_output === 'string' ? item.aggregated_output : '');
+    const statusLabel = exitCode === null ? '# 결과: 완료' : exitCode === 0 ? '# 결과: 완료(0)' : `# 결과: 종료(${exitCode})`;
+
+    return outputSummary ? `${statusLabel}\n# 출력: ${outputSummary}` : statusLabel;
+  }
+
+  return '';
+}
+
+function normalizeCodexReplyOutput(output: string) {
+  const normalized = String(output ?? '').trim();
+  return normalized || 'Codex 실행 결과가 비어 있습니다.';
+}
+
+function collectCodexTextFragments(value: unknown): string[] {
+  if (typeof value === 'string') {
+    const normalized = value.trim();
+    return normalized ? [normalized] : [];
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => collectCodexTextFragments(item));
+  }
+
+  if (!value || typeof value !== 'object') {
+    return [];
+  }
+
+  const record = value as Record<string, unknown>;
+  const directTextKeys = ['text', 'delta', 'output_text', 'content', 'message'];
+
+  for (const key of directTextKeys) {
+    const fragments = collectCodexTextFragments(record[key]);
+
+    if (fragments.length > 0) {
+      return fragments;
+    }
+  }
+
+  if (typeof record.type === 'string' && record.type.includes('output_text')) {
+    const fragments = collectCodexTextFragments(record.text ?? record.delta);
+
+    if (fragments.length > 0) {
+      return fragments;
+    }
+  }
+
+  return Object.values(record).flatMap((item) => collectCodexTextFragments(item));
+}
+
+export function extractCodexStreamText(parsed: Record<string, unknown>) {
+  const type = typeof parsed.type === 'string' ? parsed.type : '';
+
+  if (type === 'item.completed') {
+    const completedText = collectCodexTextFragments(parsed.item).join('');
+    return {
+      type,
+      completedText,
+      deltaText: '',
+    };
+  }
+
+  if (type === 'item.delta' || type === 'response.output_text.delta') {
+    const deltaText =
+      type === 'response.output_text.delta'
+        ? collectCodexTextFragments(parsed.delta ?? parsed.text).join('')
+        : collectCodexTextFragments(parsed.delta).join('');
+    return {
+      type,
+      completedText: '',
+      deltaText,
+    };
+  }
+
+  if (type === 'response.completed') {
+    const completedText = collectCodexTextFragments(parsed.response).join('');
+    return {
+      type,
+      completedText,
+      deltaText: '',
+    };
+  }
+
+  return {
+    type,
+    completedText: '',
+    deltaText: '',
+  };
+}
+
+async function streamReplyChunks(text: string, onProgress?: (text: string) => void, chunkSize = 28, delayMs = 24) {
+  const normalized = normalizeCodexReplyOutput(text);
+
+  if (!onProgress) {
+    return normalized;
+  }
+
+  for (let index = chunkSize; index < normalized.length; index += chunkSize) {
+    onProgress(normalized.slice(0, index));
+    await new Promise((resolve) => {
+      setTimeout(resolve, delayMs);
+    });
+  }
+
+  onProgress(normalized);
+  return normalized;
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function stripTrailingLineInfo(value: string) {
+  return value.replace(/:\d+(?::\d+)?$/, '');
+}
+
+function trimPathCandidate(value: string) {
+  return value.replace(/^[("'`\[]+/, '').replace(/[)\]"'`,.;:]+$/, '');
+}
+
+function encodeUrlPathSegments(value: string) {
+  return value
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join('/');
+}
+
+const CHAT_RESOURCE_REPO_RELATIVE_PATH_PATTERN =
+  /^(?:src|public|docs|etc|scripts|\.github)\/[^\n\s)\]"'`,]+$/;
+const CHAT_RESOURCE_ROOT_FILE_PATTERN =
+  /^(?:docker-compose\.(?:yml|yaml)|[A-Za-z0-9._-]*Dockerfile(?:\.[A-Za-z0-9._-]+)?|(?:AGENTS|README)(?:\.[A-Za-z0-9._-]+)?|package(?:-lock)?\.json|tsconfig(?:\.[A-Za-z0-9._-]+)?\.json|vite\.config\.[A-Za-z0-9._-]+|eslint\.config\.[A-Za-z0-9._-]+|prettier\.config\.[A-Za-z0-9._-]+|pnpm-lock\.yaml|yarn\.lock|bun\.lockb|npm-shrinkwrap\.json|\.env(?:\.[A-Za-z0-9._-]+)?|\.gitignore|\.dockerignore)$/;
+
+function isLikelyRepoRelativeChatResourcePath(candidate: string) {
+  const normalized = candidate.replace(/^\/+/, '');
+  return (
+    CHAT_RESOURCE_REPO_RELATIVE_PATH_PATTERN.test(normalized) ||
+    CHAT_RESOURCE_ROOT_FILE_PATTERN.test(normalized)
+  );
+}
+
+function buildChatResourcePublicUrl(relativePath: string) {
+  const cleaned = relativePath.replace(/^public\//, '').replace(/^\/+/, '');
+  return `${CHAT_API_RESOURCE_ROUTE_PREFIX}/${encodeUrlPathSegments(cleaned)}`;
+}
+
+function normalizeEmbeddedChatResourceUrls(text: string) {
+  return String(text ?? '').replace(
+    /(?:\/[^\s)\]"'`,]*?)?(\/api\/chat\/resources\/\.codex_chat\/[^\s)\]"'`,]+)/g,
+    (_match, resourcePath) => resourcePath,
+  );
+}
+
+function toPosixPath(value: string) {
+  return value.split(path.sep).join('/');
+}
+
+function normalizeExistingChatPublicUrl(candidate: string) {
+  const cleaned = stripTrailingLineInfo(trimPathCandidate(candidate.trim()))
+    .replace(/^\/+/, '')
+    .replace(/^public\//, '');
+
+  if (!cleaned.startsWith(`${CHAT_PUBLIC_RESOURCE_DIR}/`)) {
+    return null;
+  }
+
+  return buildChatResourcePublicUrl(cleaned);
+}
+
+export function extractDiffCodeBlocks(output: string) {
+  const matches = Array.from(String(output ?? '').matchAll(/```diff[^\n]*\n([\s\S]*?)\n```/g));
+
+  return matches
+    .map((match) => (typeof match[1] === 'string' ? match[1].trim() : ''))
+    .filter(Boolean);
+}
+
+async function resolveChatResourceSourcePath(repoPath: string, candidate: string) {
+  const cleaned = stripTrailingLineInfo(trimPathCandidate(candidate.trim()));
+
+  if (!cleaned) {
+    return null;
+  }
+
+  let sourcePath: string | null = null;
+
+  if (cleaned.startsWith(repoPath)) {
+    sourcePath = cleaned;
+  } else if (cleaned.startsWith('/')) {
+    if (isLikelyRepoRelativeChatResourcePath(cleaned)) {
+      sourcePath = path.resolve(repoPath, cleaned.replace(/^\/+/, ''));
+    } else {
+      sourcePath = cleaned;
+    }
+  } else {
+    sourcePath = path.resolve(repoPath, cleaned);
+  }
+
+  const normalizedRepoPath = path.resolve(repoPath);
+  const normalizedSourcePath = path.resolve(sourcePath);
+  const relativePath = path.relative(normalizedRepoPath, normalizedSourcePath);
+
+  if (!relativePath || relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+    return null;
+  }
+
+  try {
+    const sourceStat = await stat(normalizedSourcePath);
+
+    if (!sourceStat.isFile()) {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+
+  return {
+    absolutePath: normalizedSourcePath,
+    relativePath: toPosixPath(relativePath),
+  };
+}
+
+export function isChatResourcePathCandidate(candidate: string) {
+  const cleaned = stripTrailingLineInfo(trimPathCandidate(candidate.trim()));
+
+  if (!cleaned) {
+    return false;
+  }
+
+  if (cleaned.startsWith(`/${CHAT_PUBLIC_RESOURCE_DIR}/`)) {
+    return true;
+  }
+
+  return isLikelyRepoRelativeChatResourcePath(cleaned) || /^\/(?:workspace|root|home|Users|tmp)\//.test(cleaned);
+}
+
+export async function stageChatResourceFile(repoPath: string, sessionId: string, candidate: string) {
+  const existingPublicUrl = normalizeExistingChatPublicUrl(candidate);
+
+  if (existingPublicUrl) {
+    return existingPublicUrl;
+  }
+
+  const resolvedSource = await resolveChatResourceSourcePath(repoPath, candidate);
+
+  if (!resolvedSource) {
+    return null;
+  }
+
+  const targetRelativePath = `${CHAT_PUBLIC_RESOURCE_DIR}/${sessionId}/${CHAT_PUBLIC_RESOURCE_SUBDIR}/${resolvedSource.relativePath}`;
+  const targetAbsolutePath = path.join(repoPath, 'public', targetRelativePath);
+  await mkdir(path.dirname(targetAbsolutePath), { recursive: true });
+  await cp(resolvedSource.absolutePath, targetAbsolutePath, { force: true });
+
+  return buildChatResourcePublicUrl(targetRelativePath);
+}
+
+async function stageChatDiffResourceFiles(repoPath: string, sessionId: string, output: string) {
+  const diffBlocks = extractDiffCodeBlocks(output);
+
+  if (diffBlocks.length === 0) {
+    return [];
+  }
+
+  const urls: string[] = [];
+
+  for (const [index, diffText] of diffBlocks.entries()) {
+    const fileName = diffBlocks.length === 1 ? 'response.diff' : `response-${index + 1}.diff`;
+    const targetRelativePath =
+      `${CHAT_PUBLIC_RESOURCE_DIR}/${sessionId}/${CHAT_PUBLIC_RESOURCE_SUBDIR}/_generated/${fileName}`;
+    const targetAbsolutePath = path.join(repoPath, 'public', targetRelativePath);
+    await mkdir(path.dirname(targetAbsolutePath), { recursive: true });
+    await writeFile(targetAbsolutePath, `${diffText}\n`, 'utf8');
+    urls.push(buildChatResourcePublicUrl(targetRelativePath));
+  }
+
+  return urls;
+}
+
+function appendDiffResourceLinks(output: string, diffUrls: string[]) {
+  if (diffUrls.length === 0) {
+    return output;
+  }
+
+  const uniqueUrls = diffUrls.filter((url, index) => diffUrls.indexOf(url) === index && !output.includes(url));
+
+  if (uniqueUrls.length === 0) {
+    return output;
+  }
+
+  const lines = ['diff 리소스 경로:'];
+
+  if (uniqueUrls.length === 1) {
+    lines.push(uniqueUrls[0]!);
+  } else {
+    lines.push(...uniqueUrls.map((url, index) => `${index + 1}. ${url}`));
+  }
+
+  return `${output}\n\n${lines.join('\n')}`;
+}
+
+export async function rewriteCodexOutputWithChatResources(output: string, repoPath: string, sessionId: string) {
+  const escapedRepoPath = escapeRegExp(path.resolve(repoPath));
+  const filePathPattern = "[^\\n\\s)\\]\"'`,]+";
+  const rootFilePattern = String.raw`\/?(?:docker-compose\.(?:yml|yaml)|[A-Za-z0-9._-]*Dockerfile(?:\.[A-Za-z0-9._-]+)?|(?:AGENTS|README)(?:\.[A-Za-z0-9._-]+)?|package(?:-lock)?\.json|tsconfig(?:\.[A-Za-z0-9._-]+)?\.json|vite\.config\.[A-Za-z0-9._-]+|eslint\.config\.[A-Za-z0-9._-]+|prettier\.config\.[A-Za-z0-9._-]+|pnpm-lock\.yaml|yarn\.lock|bun\.lockb|npm-shrinkwrap\.json|\.env(?:\.[A-Za-z0-9._-]+)?|\.gitignore|\.dockerignore)`;
+  const candidatePattern = new RegExp(
+    `${escapedRepoPath}\\/${filePathPattern}|(?:\\/?(?:public\\/)?\\.codex_chat|src|public|docs|etc|scripts)\\/${filePathPattern}|${rootFilePattern}`,
+    'g',
+  );
+  const matches = [...output.matchAll(candidatePattern)];
+
+  if (matches.length === 0) {
+    return output;
+  }
+
+  const replacementMap = new Map<string, string>();
+
+  for (const match of matches) {
+    const rawCandidate = match[0]?.trim();
+
+    if (!rawCandidate || replacementMap.has(rawCandidate)) {
+      continue;
+    }
+
+    const stagedUrl = await stageChatResourceFile(repoPath, sessionId, rawCandidate);
+
+    if (stagedUrl) {
+      replacementMap.set(rawCandidate, stagedUrl);
+    }
+  }
+
+  let rewrittenOutput = output;
+
+  const replacements = Array.from(replacementMap.entries()).sort((left, right) => right[0].length - left[0].length);
+
+  for (const [sourcePath, publicUrl] of replacements) {
+    rewrittenOutput = rewrittenOutput.replaceAll(sourcePath, publicUrl);
+  }
+
+  rewrittenOutput = normalizeEmbeddedChatResourceUrls(rewrittenOutput);
+
+  const diffUrls = await stageChatDiffResourceFiles(repoPath, sessionId, rewrittenOutput);
+  return appendDiffResourceLinks(rewrittenOutput, diffUrls);
+}
+
+function normalizeChatPromptHistoryText(text: string) {
+  return String(text ?? '').replace(/\s+/g, ' ').trim();
+}
+
+function normalizePromptHistoryMessageLimit(value: number | undefined) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return CHAT_PROMPT_HISTORY_MAX_MESSAGES;
+  }
+
+  return Math.min(50, Math.max(1, Math.round(value)));
+}
+
+function normalizePromptHistoryCharLimit(value: number | undefined) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return CHAT_PROMPT_HISTORY_MAX_CHARS;
+  }
+
+  return Math.min(20_000, Math.max(500, Math.round(value)));
+}
+
+async function buildRecentChatPromptHistory(
+  sessionId: string,
+  requestId: string,
+  limits?: {
+    maxMessages?: number;
+    maxChars?: number;
+  },
+) {
+  const maxMessages = normalizePromptHistoryMessageLimit(limits?.maxMessages);
+  const maxChars = normalizePromptHistoryCharLimit(limits?.maxChars);
+  const messages = await listChatConversationMessages(sessionId, { limit: 80 });
+  const relevantMessages = messages.filter((message: (typeof messages)[number]) => {
+    if (message.clientRequestId?.trim() === requestId.trim()) {
+      return false;
+    }
+
+    if (message.author !== 'user' && message.author !== 'codex') {
+      return false;
+    }
+
+    return Boolean(normalizeChatPromptHistoryText(message.text));
+  });
+
+  const selectedMessages: typeof relevantMessages = [];
+  let totalChars = 0;
+
+  for (let index = relevantMessages.length - 1; index >= 0; index -= 1) {
+    const message = relevantMessages[index];
+    const text = normalizeChatPromptHistoryText(message.text);
+    const nextChars = text.length;
+
+    if (
+      selectedMessages.length >= maxMessages ||
+      (selectedMessages.length > 0 && totalChars + nextChars > maxChars)
+    ) {
+      break;
+    }
+
+    selectedMessages.unshift(message);
+    totalChars += nextChars;
+  }
+
+  return {
+    items: selectedMessages.map(
+      (message: (typeof selectedMessages)[number]) => `[${message.author}] ${normalizeChatPromptHistoryText(message.text)}`,
+    ),
+    omittedCount: Math.max(0, relevantMessages.length - selectedMessages.length),
+  };
+}
+
+function buildAgenticCodexPrompt(
+  context: ChatContext | null,
+  input: string,
+  sessionId: string,
+  promptContext?: {
+    recentHistoryLines?: string[];
+    omittedHistoryCount?: number;
+  },
+) {
+  const repoPath = env.PLAN_MAIN_PROJECT_REPO_PATH || env.PLAN_GIT_REPO_PATH;
+  const chatSessionResourceDir = `public/.codex_chat/${sessionId}/resource`;
+  const chatSessionUploadDir = `${chatSessionResourceDir}/uploads`;
+  const recentHistoryLines = promptContext?.recentHistoryLines ?? [];
+  const omittedHistoryCount = Math.max(0, promptContext?.omittedHistoryCount ?? 0);
+  const isTemplateRequest = context?.chatTypeIsTemplate === true;
+
+  return [
+    '당신은 이 저장소에서 Codex Live 요청을 처리하는 실제 Codex 실행기입니다.',
+    `저장소 루트(main_project): ${repoPath}`,
+    '반드시 저장소 루트의 AGENTS.md를 먼저 읽고 그 규칙을 따르세요.',
+    '가능한 작업 범위:',
+    '- 로컬 소스 파일 읽기',
+    '- 필요 시 DB 직접 조회',
+    '- 필요 시 로컬 API 응답 확인',
+    '- 사용자가 요청했거나 해결에 필요하면 소스 코드 수정',
+    '- Codex Live에서 소스 수정이 필요하면 현재 프로젝트 환경의 main_project 저장소 루트에서 바로 수정하세요. 단, AGENTS.md의 브랜치 전략을 먼저 확인하고 그 규칙 안에서만 작업하세요.',
+    `- 현재 채팅 세션 리소스 기본 경로: ${chatSessionResourceDir}/`,
+    `- 현재 채팅 첨부 업로드 경로: ${chatSessionUploadDir}/`,
+    '- 채팅에서 파일/문서/이미지/코드 리소스를 제공할 때는 반드시 위 세션 전용 경로를 우선 사용하세요.',
+    '- 새로 생성하는 문서, 이미지, 코드 스니펫 파일, 로그, 산출물은 가능하면 처음부터 위 세션 전용 경로 아래에 만들고, 다른 위치에 만들었다면 최종 응답 전에 위 경로로 이동하거나 복사한 뒤 그 경로를 응답하세요.',
+    '- 원본 파일 경로만 출력해도 서버가 해당 위치를 세션 리소스로 복사해 링크로 바꿀 수 있지만, 가능하면 세션 전용 경로 자체를 직접 사용하세요.',
+    '응답 규칙:',
+    '- 사실성보다 추측을 우선하지 마세요. 오늘/최신/건수 질문은 직접 확인하세요.',
+    '- 코드 수정이 필요 없는 질문이면 파일을 수정하지 마세요.',
+    '- 코드 수정을 했다면 최종 답변에 변경 이력을 기본으로 ```diff 코드블록으로 포함하세요.',
+    '- 코드 수정이 있으면 마지막에 변경한 파일 경로를 짧게 적으세요.',
+    '- 한국어로 간결하게 답하세요.',
+    '',
+    '현재 화면 문맥:',
+    `- pageTitle: ${context?.pageTitle ?? '없음'}`,
+    `- topMenu: ${context?.topMenu ?? '없음'}`,
+    `- focusedComponentId: ${context?.focusedComponentId ?? '없음'}`,
+    `- pageUrl: ${context?.pageUrl ?? '없음'}`,
+    `- chatTypeLabel: ${context?.chatTypeLabel ?? '없음'}`,
+    `- chatTypeDescription: ${context?.chatTypeDescription ?? '없음'}`,
+    `- chatTypeIsTemplate: ${isTemplateRequest ? 'true' : 'false'}`,
+    '',
+    isTemplateRequest ? '템플릿 요청 규칙:' : '최근 대화 문맥:',
+    ...(isTemplateRequest
+      ? [
+          '- 이 요청은 템플릿 유형입니다.',
+          '- 이전 채팅방 내용은 참조하지 말고, 현재 화면 문맥/유형 설명/사용자 요청만 기준으로 처리하세요.',
+        ]
+      : recentHistoryLines.length > 0
+        ? [
+            ...recentHistoryLines.map((line) => `- ${line}`),
+            ...(omittedHistoryCount > 0
+              ? [`- 최근 문맥 일부만 포함했습니다. 이전 ${omittedHistoryCount}개 메시지는 제외되었습니다.`]
+              : []),
+          ]
+        : ['- 참조할 최근 대화가 없습니다.']),
+    '',
+    '사용자 요청:',
+    input,
+    '',
+    '최종 답변만 출력하세요.',
+  ].join('\n');
+}
+
+export async function validateAgenticCodexRuntime(repoPath: string, codexBin: string) {
+  const issues: string[] = [];
+
+  try {
+    const repoStat = await stat(repoPath);
+
+    if (!repoStat.isDirectory()) {
+      issues.push(`PLAN_MAIN_PROJECT_REPO_PATH 경로가 디렉터리가 아닙니다: ${repoPath}`);
+    }
+  } catch {
+    issues.push(`PLAN_MAIN_PROJECT_REPO_PATH 경로를 찾지 못했습니다: ${repoPath}`);
+  }
+
+  const runnerCandidates = buildCommandRunnerApiCandidates('/health');
+  const headers = new Headers();
+
+  if (env.SERVER_COMMAND_RUNNER_ACCESS_TOKEN?.trim()) {
+    headers.set('X-Access-Token', env.SERVER_COMMAND_RUNNER_ACCESS_TOKEN.trim());
+  }
+
+  let runnerReachable = false;
+
+  for (const candidate of runnerCandidates) {
+    try {
+      const response = await fetch(candidate, {
+        method: 'GET',
+        headers,
+        signal: AbortSignal.timeout(5000),
+      });
+
+      if (response.ok) {
+        runnerReachable = true;
+        break;
+      }
+    } catch {
+      // try next candidate
+    }
+  }
+
+  if (!runnerReachable) {
+    issues.push(`SERVER_COMMAND_RUNNER_URL 경로로 Codex runner에 연결하지 못했습니다: ${env.SERVER_COMMAND_RUNNER_URL}`);
+  }
+
+  if (issues.length > 0) {
+    throw new Error(`채팅 실행 환경이 준비되지 않았습니다. ${issues.join(' / ')}`);
+  }
+}
+
+function normalizeRunnerUrl(value: string) {
+  return value.trim().replace(/\/+$/, '');
+}
+
+function buildCommandRunnerApiCandidates(requestPath: string) {
+  const configuredHealthUrl = env.SERVER_COMMAND_RUNNER_URL?.trim() || 'http://host.docker.internal:3211/health';
+
+  let parsedUrl: URL;
+
+  try {
+    parsedUrl = new URL(configuredHealthUrl);
+  } catch {
+    return [];
+  }
+
+  const hostVariants =
+    parsedUrl.hostname === 'host.docker.internal'
+      ? ['host.docker.internal', '127.0.0.1', 'localhost']
+      : parsedUrl.hostname === '127.0.0.1' || parsedUrl.hostname === 'localhost'
+        ? [parsedUrl.hostname, parsedUrl.hostname === '127.0.0.1' ? 'localhost' : '127.0.0.1', 'host.docker.internal']
+        : [parsedUrl.hostname];
+
+  const deduped: string[] = [];
+
+  for (const hostname of hostVariants) {
+    const candidate = new URL(parsedUrl.toString());
+    candidate.hostname = hostname;
+    candidate.pathname = requestPath.startsWith('/') ? requestPath : `/${requestPath}`;
+    candidate.search = '';
+    candidate.hash = '';
+    const serialized = normalizeRunnerUrl(candidate.toString());
+
+    if (!deduped.includes(serialized)) {
+      deduped.push(serialized);
+    }
+  }
+
+  return deduped;
+}
+
+async function requestCommandRunner(requestPath: string, init?: RequestInit) {
+  const headers = new Headers(init?.headers);
+
+  if (init?.body != null && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  if (env.SERVER_COMMAND_RUNNER_ACCESS_TOKEN?.trim() && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', env.SERVER_COMMAND_RUNNER_ACCESS_TOKEN.trim());
+  }
+
+  let lastError: Error | null = null;
+
+  for (const url of buildCommandRunnerApiCandidates(requestPath)) {
+    try {
+      return await fetch(url, {
+        ...init,
+        headers,
+      });
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+    }
+  }
+
+  throw lastError ?? new Error('command-runner에 연결하지 못했습니다.');
+}
+
+async function cancelRunnerCodexExecution(requestId: string) {
+  try {
+    const response = await requestCommandRunner(`/api/codex-live/jobs/${encodeURIComponent(requestId)}/cancel`, {
+      method: 'POST',
+    });
+
+    if (!response.ok) {
+      return false;
+    }
+
+    const payload = (await response.json().catch(() => null)) as { cancelled?: boolean } | null;
+    return payload?.cancelled === true;
+  } catch {
+    return false;
+  }
+}
+
+async function runAgenticCodexReply(
+  context: ChatContext | null,
+  input: string,
+  sessionId: string,
+  requestId: string,
+  onProgress?: (text: string) => void,
+  onActivity?: (line: string) => void,
+) {
+  const repoPath = env.PLAN_MAIN_PROJECT_REPO_PATH || env.PLAN_GIT_REPO_PATH;
+  await validateAgenticCodexRuntime(repoPath, env.PLAN_CODEX_BIN);
+  const appConfig = await getAppConfigSnapshot();
+  const recentHistory =
+    context?.chatTypeIsTemplate === true
+      ? { items: [] as string[], omittedCount: 0 }
+      : await buildRecentChatPromptHistory(sessionId, requestId, {
+          maxMessages: appConfig.chat?.maxContextMessages,
+          maxChars: appConfig.chat?.maxContextChars,
+        });
+  const prompt = buildAgenticCodexPrompt(context, input, sessionId, {
+    recentHistoryLines: recentHistory.items,
+    omittedHistoryCount: recentHistory.omittedCount,
+  });
+  let streamedOutput = '';
+  let stdoutTail = '';
+  let stderr = '';
+  let jsonLineBuffer = '';
+  let lastProgressText = '';
+  let completedAgentMessage = '';
+  let hasIncrementalDelta = false;
+  activeChatProcessRegistry.set(requestId, {
+    cancel: () => cancelRunnerCodexExecution(requestId),
+  });
+
+  await new Promise<void>(async (resolve, reject) => {
+    const emitProgress = (nextText: string) => {
+      const normalizedProgress = nextText.trim();
+
+      if (!normalizedProgress || normalizedProgress === lastProgressText) {
+        return;
+      }
+
+      lastProgressText = normalizedProgress;
+      streamedOutput = normalizedProgress;
+      onProgress?.(normalizedProgress);
+    };
+
+    try {
+      const response = await requestCommandRunner('/api/codex-live/execute', {
+        method: 'POST',
+        body: JSON.stringify({
+          requestId,
+          sessionId,
+          repoPath,
+          prompt,
+          resourceDir: path.join(repoPath, 'public', '.codex_chat', sessionId, 'resource'),
+          uploadDir: path.join(repoPath, 'public', '.codex_chat', sessionId, 'resource', 'uploads'),
+        }),
+      });
+
+      if (!response.ok) {
+        reject(new Error((await response.text()) || 'command-runner Codex 실행 요청에 실패했습니다.'));
+        return;
+      }
+
+      if (!response.body) {
+        reject(new Error('command-runner Codex 스트림이 비어 있습니다.'));
+        return;
+      }
+
+      chatRuntimeService.appendLog(requestId, 'Codex 실행을 command-runner API로 요청했습니다.');
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let remoteErrorMessage = '';
+
+      const handleRunnerLine = (line: string) => {
+        let parsed: Record<string, unknown>;
+
+        try {
+          parsed = JSON.parse(line) as Record<string, unknown>;
+        } catch {
+          return;
+        }
+
+        const eventType = typeof parsed.type === 'string' ? parsed.type : '';
+
+        if (eventType === 'started') {
+          const pid = typeof parsed.pid === 'number' && Number.isFinite(parsed.pid) ? parsed.pid : null;
+          chatRuntimeService.attachProcess(requestId, pid);
+          chatRuntimeService.appendLog(
+            requestId,
+            pid ? `호스트 command-runner에서 Codex 프로세스를 시작했습니다. pid=${pid}` : '호스트 command-runner에서 Codex 프로세스를 시작했습니다.',
+          );
+          return;
+        }
+
+        if (eventType === 'activity') {
+          const activityLog = String(parsed.line ?? '').trim();
+
+          if (activityLog) {
+            chatRuntimeService.appendLog(requestId, activityLog);
+            onActivity?.(activityLog);
+          }
+          return;
+        }
+
+        if (eventType === 'delta') {
+          const deltaText = String(parsed.text ?? '');
+
+          if (deltaText) {
+            hasIncrementalDelta = true;
+            emitProgress(`${streamedOutput}${deltaText}`);
+          }
+          return;
+        }
+
+        if (eventType === 'completed') {
+          completedAgentMessage = String(parsed.text ?? '').trim();
+          if (completedAgentMessage && hasIncrementalDelta) {
+            emitProgress(completedAgentMessage);
+          }
+          return;
+        }
+
+        if (eventType === 'stdout') {
+          const stdoutLine = String(parsed.line ?? '').trim();
+
+          if (stdoutLine) {
+            stdoutTail = `${stdoutTail}\n${stdoutLine}`.slice(-STREAM_CAPTURE_LIMIT);
+            chatRuntimeService.appendLog(requestId, `[stdout] ${stdoutLine}`);
+            onActivity?.(`[stdout] ${stdoutLine}`);
+          }
+          return;
+        }
+
+        if (eventType === 'stderr') {
+          const stderrLine = String(parsed.line ?? '').trim();
+
+          if (stderrLine) {
+            stderr = `${stderr}\n${stderrLine}`.slice(-STREAM_CAPTURE_LIMIT);
+            chatRuntimeService.appendLog(requestId, `[stderr] ${stderrLine}`);
+            onActivity?.(`[stderr] ${stderrLine}`);
+          }
+          return;
+        }
+
+        if (eventType === 'error') {
+          remoteErrorMessage = String(parsed.message ?? '').trim();
+        }
+      };
+
+      while (true) {
+        const { value, done } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        jsonLineBuffer += decoder.decode(value, { stream: true });
+        const lines = jsonLineBuffer.split('\n');
+        jsonLineBuffer = lines.pop() ?? '';
+
+        for (const rawLine of lines) {
+          const line = rawLine.trim();
+
+          if (!line) {
+            continue;
+          }
+
+          handleRunnerLine(line);
+        }
+      }
+
+      const trailingLine = jsonLineBuffer.trim();
+      if (trailingLine) {
+        handleRunnerLine(trailingLine);
+      }
+
+      if (remoteErrorMessage) {
+        reject(new Error(remoteErrorMessage));
+        return;
+      }
+
+      resolve();
+    } catch (error) {
+      reject(error);
+    }
+  });
+
+  const normalizedOutput = normalizeCodexReplyOutput(completedAgentMessage || streamedOutput || stdoutTail);
+  const rewrittenOutput = await rewriteCodexOutputWithChatResources(normalizedOutput, repoPath, sessionId);
+
+  // If the CLI only produced a final completed event, avoid sending it as one big batch.
+  if (!hasIncrementalDelta && rewrittenOutput) {
+    await streamReplyChunks(rewrittenOutput, onProgress);
+  } else if (rewrittenOutput !== lastProgressText) {
+    onProgress?.(rewrittenOutput);
+  }
+
+  return rewrittenOutput;
+}
+
+async function getTodayAutomationRegistrationCounts() {
+  const [planCountResult, boardReceivedCountResult] = await Promise.all([
+    db(PLAN_TABLE)
+      .whereNot('automation_type', 'none')
+      .whereRaw("(created_at at time zone ?)::date = (current_timestamp at time zone ?)::date", [KST_TIME_ZONE, KST_TIME_ZONE])
+      .count<{ count: string }>('* as count')
+      .first(),
+    db(BOARD_POSTS_TABLE)
+      .whereNotNull('automation_received_at')
+      .whereRaw(
+        "(automation_received_at at time zone ?)::date = (current_timestamp at time zone ?)::date",
+        [KST_TIME_ZONE, KST_TIME_ZONE],
+      )
+      .count<{ count: string }>('* as count')
+      .first(),
+  ]);
+
+  return {
+    today: formatKstDate(),
+    planCount: Number(planCountResult?.count ?? 0),
+    boardReceivedCount: Number(boardReceivedCountResult?.count ?? 0),
+  };
+}
+
+async function buildAutomationRegistrationCountReply() {
+  const counts = await getTodayAutomationRegistrationCounts();
+  const lines = [
+    '결과',
+    `- ${counts.today} KST 기준 오늘 자동화 등록 총 건수는 ${counts.planCount}건입니다.`,
+    '- 기본 기준: `plan_items`에서 `automation_type <> \'none\'` 이고 오늘 생성된 건수',
+  ];
+
+  if (counts.planCount === counts.boardReceivedCount) {
+    lines.push(`- 교차 확인: 오늘 ` + '`board_posts.automation_received_at`' + ` 기준 접수 건수도 ${counts.boardReceivedCount}건으로 같습니다.`);
+  } else {
+    lines.push(`- 참고: 오늘 ` + '`board_posts.automation_received_at`' + ` 기준 접수 건수는 ${counts.boardReceivedCount}건입니다.`);
+    lines.push('- 이 프로젝트는 게시판 등록, 자동화 접수, Plan 생성이 분리될 수 있어 기준에 따라 숫자가 달라질 수 있습니다.');
+  }
+
+  return lines.join('\n');
+}
+
+function buildAutomationRegistrationDefinitionReply() {
+  return [
+    '결과',
+    '- 이 프로젝트에서 `자동화 등록`은 하나로 고정된 용어가 아닙니다.',
+    '- `board_posts.created_at`: 게시판 등록',
+    '- `board_posts.automation_received_at`: 자동화 접수',
+    '- `plan_items.created_at` + `automation_type <> \'none\'`: 실제 자동화 대상 Plan 생성',
+    '- 건수 질문이면 어떤 기준인지 먼저 구분하고, 모호하면 기본적으로 Plan 생성 기준을 우선 안내합니다.',
+  ].join('\n');
+}
+
+function buildProgressMessages(input: string) {
+  const messages = ['생각 중입니다. 요청 의도와 현재 화면 문맥을 먼저 정리하고 있습니다.'];
+
+  if (isAutomationRegistrationCountRequest(input)) {
+    messages.push('오늘 기준 집계가 필요한 요청이라 DB 기준과 시간대 기준을 확인하고 있습니다.');
+    return messages;
+  }
+
+  if (/db|데이터베이스|sql|쿼리|집계|건수/i.test(input)) {
+    messages.push('DB를 직접 확인할 수 있는지와 집계 기준을 함께 보고 있습니다.');
+  }
+
+  if (/api|응답|endpoint|엔드포인트|fetch|호출/i.test(input)) {
+    messages.push('관련 API 경로와 실제 응답 기준을 확인하고 있습니다.');
+  }
+
+  if (/파일|소스|코드|tsx|ts|js|css|수정|변경|구현|fix|edit|implement/i.test(input)) {
+    messages.push('관련 소스 파일과 연결된 흐름을 읽고 있습니다.');
+  }
+
+  messages.push('필요하면 실제 Codex 실행기로 이어서 조회하거나 수정하겠습니다.');
+  return [...new Set(messages)];
+}
+
+function buildGenericReply(context: ChatContext | null, input: string, snapshot: PlanSnapshot | null) {
+  const normalized = input.toLowerCase();
+  const pageTitle = context?.pageTitle ?? '현재 화면';
+  const previewUrl = context?.pageUrl || '없음';
+  const detailRequested = isDetailRequest(input);
+
+  if (normalized.includes('preview') || normalized.includes('링크') || normalized.includes('url')) {
+    const lines = [
+      '결과',
+      `- preview: ${snapshot?.latestSourceWork?.previewUrl ?? previewUrl}`,
+    ];
+
+    if (snapshot?.latestSourceWork?.summary) {
+      lines.push(`- 요약: ${truncateText(snapshot.latestSourceWork.summary, 100)}`);
+    }
+
+    if (detailRequested && snapshot?.latestSourceWork) {
+      lines.push(`- ${buildChangedFilesSummary(snapshot.latestSourceWork.changedFiles)}`);
+    }
+
+    if (!detailRequested) {
+      lines.push('- 상세가 필요하면 "상세"라고 입력해 주세요.');
+    }
+
+    return lines.join('\n');
+  }
+
+  if (input.includes('계획') || normalized.includes('plan')) {
+    if (!snapshot) {
+      return ['결과', '- 연결된 Plan을 찾지 못했습니다.', '- planId 또는 작업 ID를 함께 보내 주세요.'].join('\n');
+    }
+
+    const lines = [
+      '작업 요약',
+      `- #${snapshot.planId} ${snapshot.workId}`,
+      `- 상태: ${snapshot.status}${snapshot.workerStatus ? ` / ${snapshot.workerStatus}` : ''}`,
+      `- 메모: ${truncateText(snapshot.note, 110) || '기록 없음'}`,
+    ];
+
+    if (detailRequested) {
+      if (snapshot.assignedBranch) {
+        lines.push(`- 브랜치: ${snapshot.assignedBranch}`);
+      }
+
+      lines.push(...buildRecentPlanHistoryLines(snapshot));
+    } else {
+      lines.push('- 상세가 필요하면 "상세"라고 입력해 주세요.');
+    }
+
+    return lines.join('\n');
+  }
+
+  if ((input.includes('이슈') || normalized.includes('issue')) && snapshot) {
+    const lines = ['이슈 요약'];
+
+    if (snapshot.latestIssue) {
+      lines.push(
+        `- ${snapshot.latestIssue.tag} / ${snapshot.latestIssue.resolved ? '해결' : '미해결'}`,
+        `- 내용: ${truncateText(snapshot.latestIssue.message, 110)}`,
+      );
+    } else if (snapshot.issueTags.length > 0) {
+      lines.push(`- 태그: ${snapshot.issueTags.join(', ')}`);
+    } else {
+      lines.push('- 최근 이슈 이력이 없습니다.');
+    }
+
+    if (detailRequested) {
+      lines.push(...buildRecentPlanHistoryLines(snapshot));
+    }
+
+    return lines.join('\n');
+  }
+
+  if ((input.includes('이력') || input.includes('최근') || normalized.includes('history')) && snapshot) {
+    const lines = [
+      '최근 이력',
+      `- ${truncateText(snapshot.latestSourceWork?.summary ?? snapshot.latestActionNote ?? snapshot.note, 120) || '최근 작업 이력이 없습니다.'}`,
+    ];
+
+    if (detailRequested) {
+      lines.push(...buildRecentPlanHistoryLines(snapshot));
+    } else {
+      lines.push('- 상세가 필요하면 "상세"라고 입력해 주세요.');
+    }
+
+    return lines.join('\n');
+  }
+
+  if (input.includes('문서') || normalized.includes('docs')) {
+    return ['결과', '- 문서 요청으로 인식했습니다.', '- 대상 문서명이나 링크를 함께 보내 주세요.'].join('\n');
+  }
+
+  if (isWorklogRequest(input)) {
+    if (snapshot) {
+      return buildWorklogReply(context, snapshot);
+    }
+
+    return ['결과', '- 작업로그 초안을 만들 Plan이 없습니다.', '- planId 또는 작업 화면에서 다시 요청해 주세요.'].join('\n');
+  }
+
+  if (
+    input.includes('컴포넌트') ||
+    normalized.includes('widget') ||
+    normalized.includes('api')
+  ) {
+    return ['결과', '- 대상 리소스를 특정해 주세요.', '- 예: 버튼 컴포넌트, previewer, history api'].join('\n');
+  }
+
+  if (snapshot && isPlanDetailRequest(input)) {
+    const lines = [
+      '작업 요약',
+      `- #${snapshot.planId} ${snapshot.workId}`,
+      `- 상태: ${snapshot.status}${snapshot.workerStatus ? ` / ${snapshot.workerStatus}` : ''}`,
+      `- 최근 작업: ${truncateText(snapshot.latestSourceWork?.summary ?? snapshot.latestActionNote ?? snapshot.note, 110) || '기록 없음'}`,
+    ];
+
+    if (detailRequested) {
+      lines.push(...buildRecentPlanHistoryLines(snapshot));
+    } else {
+      lines.push('- 상세가 필요하면 "상세"라고 입력해 주세요.');
+    }
+
+    return lines.join('\n');
+  }
+
+  return [
+    '결과',
+    `- 현재 화면: ${pageTitle}`,
+    '- 요청을 더 구체적으로 적어 주시면 필요한 정보만 짧게 정리합니다.',
+    '- 예: preview 링크, 최근 이슈, 작업 요약, 상세',
+  ].join('\n');
+}
+
+function buildPlanReply(context: ChatContext | null, input: string, snapshot: PlanSnapshot | null) {
+  const normalized = input.toLowerCase();
+  const detailRequested = isDetailRequest(input);
+  const pageTitle = context?.pageTitle ?? '현재 화면';
+
+  if (!snapshot) {
+    return `현재 화면: ${pageTitle}\n선택된 Plan을 찾지 못했습니다. Plan 목록에서 항목을 선택한 뒤 다시 요청해 주세요.`;
+  }
+
+  const lines = ['작업 요약', `- #${snapshot.planId} ${snapshot.workId}`, `- 상태: ${snapshot.status}${snapshot.workerStatus ? ` / ${snapshot.workerStatus}` : ''}`];
+
+  if (isWorklogRequest(input)) {
+    return buildWorklogReply(context, snapshot);
+  }
+
+  if (snapshot.note) {
+    lines.push(`- 메모: ${truncateText(snapshot.note, 110)}`);
+  }
+
+  if (normalized.includes('preview') || normalized.includes('링크') || normalized.includes('url')) {
+    lines.push(`- preview: ${snapshot.latestSourceWork?.previewUrl ?? context?.pageUrl ?? '없음'}`);
+    if (snapshot.latestSourceWork) {
+      lines.push(`- 최근 작업: ${truncateText(snapshot.latestSourceWork.summary, 100)}`);
+      if (detailRequested) {
+        lines.push(`- ${buildChangedFilesSummary(snapshot.latestSourceWork.changedFiles)}`);
+      }
+    }
+
+    if (!detailRequested) {
+      lines.push('- 상세가 필요하면 "상세"라고 입력해 주세요.');
+    }
+
+    return lines.join('\n');
+  }
+
+  if (snapshot.latestIssue) {
+    lines.push(`- 최근 이슈: ${snapshot.latestIssue.tag} / ${snapshot.latestIssue.resolved ? '해결' : '미해결'}`);
+    if (detailRequested) {
+      lines.push(`- 이슈 내용: ${truncateText(snapshot.latestIssue.message, 100)}`);
+    }
+  } else if (snapshot.issueTags.length > 0) {
+    lines.push(`- 이슈 태그: ${snapshot.issueTags.join(', ')}`);
+  }
+
+  if (snapshot.latestActionNote) {
+    lines.push(`- 최근 조치: ${truncateText(snapshot.latestActionNote, 100)}`);
+  }
+
+  if (snapshot.latestSourceWork) {
+    lines.push(`- 최근 작업: ${truncateText(snapshot.latestSourceWork.summary, 100)}`);
+    if (detailRequested && snapshot.latestSourceWork.changedFiles.length > 0) {
+      lines.push(`- 파일 ${snapshot.latestSourceWork.changedFiles.length}개 변경`);
+    }
+  }
+
+  if (snapshot.lastError && snapshot.hasOpenIssues) {
+    lines.push(`- 주의: ${truncateText(snapshot.lastError, 100)}`);
+  }
+
+  if (detailRequested) {
+    if (snapshot.assignedBranch) {
+      lines.push(`- 브랜치: ${snapshot.assignedBranch}`);
+    }
+    lines.push(...buildRecentPlanHistoryLines(snapshot));
+  } else {
+    lines.push('- 상세가 필요하면 "상세"라고 입력해 주세요.');
+  }
+
+  return lines.join('\n');
+}
+
+async function buildCodexReply(
+  context: ChatContext | null,
+  input: string,
+  sessionId: string,
+  requestId: string,
+  onProgress?: (text: string) => void,
+  onActivity?: (line: string) => void,
+) {
+  const normalized = input.toLowerCase();
+
+  if (isAutomationRegistrationCountRequest(input)) {
+    return buildAutomationRegistrationCountReply();
+  }
+
+  if (isAutomationRegistrationDefinitionRequest(input)) {
+    return buildAutomationRegistrationDefinitionReply();
+  }
+
+  if (shouldUseAgenticCodexReply(input)) {
+    return runAgenticCodexReply(context, input, sessionId, requestId, onProgress, onActivity);
+  }
+
+  const requestsPlanContext =
+    isWorklogRequest(input) ||
+    isPlanDetailRequest(input) ||
+    normalized.includes('preview') ||
+    normalized.includes('링크') ||
+    normalized.includes('url') ||
+    input.includes('변경') ||
+    input.includes('스크린샷');
+  const parsedPlanContext = parsePlanContext(context, input);
+  let snapshot = parsedPlanContext.planId ? await loadPlanSnapshot(parsedPlanContext.planId) : null;
+
+  if (!snapshot && parsedPlanContext.workId) {
+    const planItem = await findPlanItemByWorkId(parsedPlanContext.workId);
+    snapshot = planItem?.id ? await loadPlanSnapshot(Number(planItem.id)) : null;
+  }
+
+  if (!snapshot && parsedPlanContext.previewUrl) {
+    const planItem = await findPlanItemByPreviewUrl(parsedPlanContext.previewUrl);
+    snapshot = planItem?.id ? await loadPlanSnapshot(Number(planItem.id)) : null;
+  }
+
+  if (!snapshot && requestsPlanContext) {
+    const latestPlanItem = await findLatestPlanItem();
+    snapshot = latestPlanItem?.id ? await loadPlanSnapshot(Number(latestPlanItem.id)) : null;
+  }
+
+  const isPlanPage =
+    context?.topMenu === 'plans' ||
+    context?.pageId?.startsWith('plans:') ||
+    isPlanDetailRequest(input);
+
+  if (isPlanPage && snapshot) {
+    return buildPlanReply(context, input, snapshot);
+  }
+
+  if (!shouldUseTemplateMacroReply(context, input)) {
+    return runAgenticCodexReply(context, input, sessionId, requestId, onProgress, onActivity);
+  }
+
+  return buildGenericReply(context, input, snapshot);
+}
+
+export class ChatService {
+  private readonly wss = new WebSocketServer({ noServer: true });
+
+  private readonly clientStates = new Map<WebSocket, ChatSessionState>();
+  private readonly sessions = new Map<string, ChatSessionState>();
+  private readonly cancelledRequestIds = new Set<string>();
+  private readonly unsubscribeRuntimeBroadcast: () => void;
+
+  constructor(private readonly logger: FastifyBaseLogger) {
+    activeRuntimeController = {
+      getJobDetail: (requestId) => chatRuntimeService.getJobDetail(requestId),
+      cancelJob: (requestId) => this.cancelRuntimeJob(requestId),
+      removeQueuedJob: (requestId) => this.removeQueuedRuntimeJob(requestId),
+    };
+
+    this.unsubscribeRuntimeBroadcast = chatRuntimeService.subscribe((snapshot) => {
+      this.broadcastRuntimeSnapshot(snapshot);
+    });
+
+    this.wss.on('connection', (socket: WebSocket, request: IncomingMessage) => {
+      void this.handleConnection(socket, request).catch((error: unknown) => {
+        const session = this.clientStates.get(socket);
+        this.logger.error(error, 'chat websocket connection initialization failed');
+        this.clientStates.delete(socket);
+        if (session?.socket === socket) {
+          session.socket = null;
+        }
+        closeSocketSafely(this.logger, socket, 'failed to close websocket after initialization error');
+      });
+    });
+  }
+
+  attachUpgradeHandler() {
+    return (request: IncomingMessage, socket: Socket, head: Buffer) => {
+      const origin = request.headers.host ? `http://${request.headers.host}` : 'http://localhost';
+      const url = new URL(request.url ?? '/', origin);
+
+      if (url.pathname !== SOCKET_PATH) {
+        socket.destroy();
+        return;
+      }
+
+      this.wss.handleUpgrade(request, socket, head, (websocket: WebSocket) => {
+        this.wss.emit('connection', websocket, request);
+      });
+    };
+  }
+
+  close() {
+    activeRuntimeController = null;
+    this.unsubscribeRuntimeBroadcast();
+
+    for (const execution of activeChatProcessRegistry.values()) {
+      void Promise.resolve(execution.cancel()).catch(() => {
+        // noop
+      });
+    }
+
+    activeChatProcessRegistry.clear();
+    chatRuntimeService.clearAll();
+
+    for (const client of this.clientStates.keys()) {
+      client.close();
+    }
+
+    this.wss.close();
+  }
+
+  private getOrCreateSession(sessionId: string, clientId?: string | null) {
+    const existing = this.sessions.get(sessionId);
+
+    if (existing) {
+      if (clientId?.trim()) {
+        existing.clientId = clientId.trim();
+      }
+      return existing;
+    }
+
+    const nextSession: ChatSessionState = {
+      sessionId,
+      clientId: clientId?.trim() || null,
+      socket: null,
+      lastSeenAt: Date.now(),
+      context: null,
+      queue: [],
+      activeRequestCount: 0,
+      pendingQueueReleaseEventId: null,
+      nextEventId: 1,
+      eventHistory: [],
+      messagePersistenceTail: Promise.resolve(),
+      watchedRuntimeRequestId: null,
+    };
+    this.sessions.set(sessionId, nextSession);
+    return nextSession;
+  }
+
+  private createSessionEnvelope(session: ChatSessionState, message: ChatOutboundPayload): ChatOutboundMessage {
+    return {
+      ...message,
+      eventId: session.nextEventId++,
+      sessionId: session.sessionId,
+    };
+  }
+
+  private retainEnvelopeForReplay(session: ChatSessionState, envelope: ChatOutboundMessage) {
+    if (envelope.type === 'chat:init' || envelope.type === 'chat:status') {
+      return;
+    }
+
+    session.eventHistory.push(envelope);
+
+    if (session.eventHistory.length > CHAT_SESSION_EVENT_HISTORY_LIMIT) {
+      session.eventHistory.splice(0, session.eventHistory.length - CHAT_SESSION_EVENT_HISTORY_LIMIT);
+    }
+  }
+
+  private persistConversationMessage(session: ChatSessionState, message: ChatMessage) {
+    const nextPersistence = session.messagePersistenceTail
+      .catch(() => undefined)
+      .then(() =>
+        appendChatConversationMessage(
+          {
+            sessionId: session.sessionId,
+            clientId: session.clientId,
+            title: null,
+            contextLabel: session.context?.chatTypeLabel ?? null,
+            contextDescription: session.context?.chatTypeDescription ?? null,
+            notifyOffline: undefined,
+          },
+          {
+            sessionId: session.sessionId,
+            messageId: message.id,
+            author: message.author,
+            text: message.text,
+            timestamp: message.timestamp,
+            clientRequestId: message.clientRequestId ?? null,
+          },
+        ),
+      );
+
+    session.messagePersistenceTail = nextPersistence.catch((error: unknown) => {
+      this.logger.error(error, 'failed to persist chat message');
+    });
+
+    return session.messagePersistenceTail;
+  }
+
+  private sendToSession(
+    session: ChatSessionState,
+    message: ChatOutboundPayload,
+    options?: {
+      skipOfflineNotification?: boolean;
+    },
+  ) {
+    const envelope = this.createSessionEnvelope(session, message);
+    this.retainEnvelopeForReplay(session, envelope);
+
+    sendSocketEnvelope(this.logger, session.socket, envelope, 'failed to send websocket session envelope');
+
+    if (message.type === 'chat:message') {
+      this.persistConversationMessage(session, message.payload);
+
+      if (message.payload.author === 'codex' && options?.skipOfflineNotification !== true) {
+        void this.sendOfflineNotificationIfNeeded(session, message.payload).catch((error: unknown) => {
+          this.logger.error(error, 'failed to send offline chat notification');
+        });
+      }
+    }
+
+    return envelope;
+  }
+
+  private updateMessageInSession(session: ChatSessionState, message: ChatMessage) {
+    const envelope = this.createSessionEnvelope(session, {
+      type: 'chat:message:update',
+      payload: message,
+    });
+    this.retainEnvelopeForReplay(session, envelope);
+
+    sendSocketEnvelope(this.logger, session.socket, envelope, 'failed to send websocket message update envelope');
+
+    // Streaming codex deltas and synthesized activity summaries are transient UI state.
+    // Persist only the final chat message / activity rows to avoid long DB tails that
+    // can keep a finished request looking "running" until every intermediate update flushes.
+    if (shouldPersistMessageUpdate(message)) {
+      this.persistConversationMessage(session, message);
+    }
+
+    return envelope;
+  }
+
+  private broadcastRuntimeSnapshot(snapshot = chatRuntimeService.getSnapshot()) {
+    for (const session of this.sessions.values()) {
+      this.sendToSession(session, {
+        type: 'chat:runtime',
+        payload: snapshot,
+      });
+
+      this.pushRuntimeDetail(session);
+    }
+  }
+
+  private pushRuntimeDetail(session: ChatSessionState) {
+    const requestId = session.watchedRuntimeRequestId?.trim();
+
+    if (!requestId) {
+      return;
+    }
+
+    this.sendToSession(session, {
+      type: 'chat:runtime:detail',
+      payload: chatRuntimeService.getJobDetail(requestId),
+    });
+  }
+
+  private async cancelRuntimeJob(requestId: string) {
+    const execution = activeChatProcessRegistry.get(requestId);
+
+    if (!execution) {
+      return false;
+    }
+
+    chatRuntimeService.appendLog(requestId, '사용자 요청으로 실행 취소를 시도합니다.');
+    this.cancelledRequestIds.add(requestId);
+    const session = this.findSessionByRequestId(requestId);
+
+    if (session) {
+      void upsertChatConversationRequest(session.sessionId, {
+        requestId,
+        status: 'cancelled',
+        statusMessage: '사용자 요청으로 실행 취소를 시도합니다.',
+      }).catch((error: unknown) => {
+        this.logger.warn(error, 'failed to persist chat request cancellation state');
+      });
+    }
+
+    try {
+      return await execution.cancel();
+    } catch (error) {
+      this.logger.warn(error, 'failed to cancel chat runtime job');
+      chatRuntimeService.appendLog(requestId, '실행 취소 요청에 실패했습니다.');
+      this.cancelledRequestIds.delete(requestId);
+      return false;
+    }
+  }
+
+  private async removeQueuedRuntimeJob(requestId: string) {
+    let removed = false;
+    let removedSessionId: string | null = null;
+
+    for (const session of this.sessions.values()) {
+      const nextQueue = session.queue.filter((item) => item.requestId !== requestId);
+
+      if (nextQueue.length === session.queue.length) {
+        continue;
+      }
+
+      session.queue = nextQueue;
+      removed = true;
+      removedSessionId = session.sessionId;
+      this.emitJobState(session, {
+        requestId,
+        status: 'completed',
+        mode: 'queue',
+        queueSize: session.queue.length,
+        message: '대기열에서 제거됨',
+      });
+      this.sendToSession(session, {
+        type: 'chat:message',
+        payload: createMessage('system', '대기열 요청이 관리 화면에서 제거되었습니다.'),
+      });
+      break;
+    }
+
+    if (!removed) {
+      return false;
+    }
+
+    chatRuntimeService.finishJob(requestId, 'removed');
+    if (removedSessionId) {
+      await upsertChatConversationRequest(removedSessionId, {
+        requestId,
+        status: 'removed',
+        statusMessage: '대기열에서 제거되었습니다.',
+      });
+    }
+    return true;
+  }
+
+  private tryStartNextQueuedRequest(session: ChatSessionState) {
+    this.normalizeSessionExecutionState(session);
+
+    if (session.activeRequestCount > 0 || session.queue.length === 0 || session.pendingQueueReleaseEventId !== null) {
+      return;
+    }
+
+    const nextQueuedRequest = session.queue.shift();
+
+    if (!nextQueuedRequest) {
+      return;
+    }
+
+    void this.executeRequest(session, nextQueuedRequest).catch((error: unknown) => {
+      this.logger.error(error, 'queued chat reply build failed');
+      this.sendToSession(session, {
+        type: 'chat:error',
+        payload: {
+          message: '대기 중이던 채팅 요청 처리 중 오류가 발생했습니다.',
+        },
+      });
+    });
+  }
+
+  private normalizeSessionExecutionState(session: ChatSessionState) {
+    const snapshot = chatRuntimeService.getSnapshot();
+    const runtimeSession = snapshot.sessions.find((item) => item.sessionId === session.sessionId) ?? null;
+    const runtimeRunningCount = runtimeSession?.runningCount ?? 0;
+    const runtimeQueuedIds = new Set(
+      snapshot.queued.filter((item) => item.sessionId === session.sessionId).map((item) => item.requestId),
+    );
+
+    session.activeRequestCount = runtimeRunningCount;
+    session.queue = session.queue.filter((item) => runtimeQueuedIds.has(item.requestId));
+
+    if (runtimeRunningCount === 0) {
+      session.pendingQueueReleaseEventId = null;
+    }
+  }
+
+  private emitJobState(
+    session: ChatSessionState,
+    payload: {
+      requestId: string;
+      status: 'queued' | 'started' | 'completed' | 'failed';
+      mode: 'queue' | 'direct';
+      queueSize: number;
+      message: string;
+    },
+  ) {
+    this.sendToSession(session, {
+      type: 'chat:job',
+      payload,
+    });
+
+    void updateChatConversationJobState(session.sessionId, {
+      requestId: payload.requestId,
+      status: payload.status,
+      message: payload.message,
+      queueSize: payload.queueSize,
+      clear: false,
+    }).catch((error: unknown) => {
+      this.logger.error(error, 'failed to persist chat job state');
+    });
+
+    const requestStatus =
+      payload.status === 'queued'
+        ? 'queued'
+        : payload.status === 'started'
+          ? 'started'
+          : payload.status === 'completed'
+            ? 'completed'
+            : this.cancelledRequestIds.has(payload.requestId)
+              ? 'cancelled'
+              : 'failed';
+
+    void upsertChatConversationRequest(session.sessionId, {
+      requestId: payload.requestId,
+      status: requestStatus,
+      statusMessage: payload.message,
+    }).catch((error: unknown) => {
+      this.logger.error(error, 'failed to persist chat request state');
+    });
+  }
+
+  private findSessionByRequestId(requestId: string) {
+    for (const session of this.sessions.values()) {
+      if (session.queue.some((item) => item.requestId === requestId)) {
+        return session;
+      }
+
+      if (
+        session.eventHistory.some((event) => {
+          if (event.type === 'chat:job') {
+            return event.payload.requestId === requestId;
+          }
+
+          if (event.type === 'chat:message' || event.type === 'chat:message:update') {
+            return event.payload.clientRequestId === requestId;
+          }
+
+          return false;
+        })
+      ) {
+        return session;
+      }
+    }
+
+    return null;
+  }
+
+  private async sendOfflineNotificationIfNeeded(session: ChatSessionState, message: ChatMessage) {
+    if (!session.clientId?.trim()) {
+      return;
+    }
+
+    if (message.author !== 'codex' || isPreparingChatReply(message.text)) {
+      return;
+    }
+
+    const conversation = await getChatConversation(session.sessionId, session.clientId);
+
+    if (!conversation?.notifyOffline) {
+      return;
+    }
+
+    const notificationPayload = await this.buildOfflineChatNotificationPayload(
+      session,
+      message,
+      conversation.title || '현재 채팅방',
+    );
+
+    if (!notificationPayload) {
+      return;
+    }
+
+    await this.createOfflineAppNotificationIfNeeded(notificationPayload);
+
+    if (!ensureChatWebPushConfigured()) {
+      return;
+    }
+
+    const preferredClientIds = await listChatConversationOfflineNotificationClientIds(session.sessionId).catch(() => []);
+    const notificationTargetClientIds = collectOfflineNotificationClientIds(session.clientId, preferredClientIds);
+
+    if (!notificationTargetClientIds.length) {
+      return;
+    }
+
+    const rows = await db(WEB_PUSH_SUBSCRIPTION_TABLE)
+      .where({
+        is_enabled: true,
+      })
+      .andWhere((builder) => {
+        builder.whereIn('device_id', notificationTargetClientIds).orWhereNull('device_id').orWhere('device_id', '');
+      })
+      .select('endpoint', 'subscription_json');
+
+    if (!rows.length) {
+      return;
+    }
+
+    const uniqueRows = rows.filter((row, index, currentRows) => {
+      const endpoint = String(row.endpoint ?? '').trim();
+
+      if (!endpoint) {
+        return false;
+      }
+
+      return currentRows.findIndex((candidate) => String(candidate.endpoint ?? '').trim() === endpoint) === index;
+    });
+
+    const payloadText = JSON.stringify({
+      title: notificationPayload.title,
+      body: notificationPayload.body,
+      data: notificationPayload.data,
+      threadId: notificationPayload.threadId,
+    });
+    await Promise.all(
+      uniqueRows.map(async (row) => {
+        try {
+          await webpush.sendNotification(row.subscription_json as Record<string, unknown>, payloadText);
+        } catch (error: any) {
+          const statusCode = Number(error?.statusCode ?? 0);
+
+          this.logger.warn(
+            {
+              endpoint: String(row.endpoint ?? ''),
+              statusCode: statusCode || undefined,
+              detail: normalizeNotificationDetailText(error?.body) ?? normalizeNotificationDetailText(error?.message),
+            },
+            'chat webpush delivery failed; subscription preserved',
+          );
+        }
+      }),
+    );
+  }
+
+  private async createOfflineAppNotificationIfNeeded(
+    payload: {
+      title: string;
+      body: string;
+      previewText: string;
+      metadata: Record<string, string>;
+      linkUrl: string;
+    },
+  ) {
+    await createNotificationMessage({
+      title: payload.title,
+      body: payload.body,
+      category: 'chat',
+      source: 'codex-live',
+      priority: 'normal',
+      metadata: {
+        ...payload.metadata,
+        linkUrl: payload.linkUrl,
+        linkLabel: '채팅 바로 열기',
+        previewText: payload.previewText,
+      },
+    });
+  }
+
+  private async buildOfflineChatNotificationPayload(
+    session: ChatSessionState,
+    message: ChatMessage,
+    conversationTitle: string,
+  ) {
+    const isBackgroundedSession = session.context?.pageVisibilityState === 'hidden';
+
+    if (session.socket && session.socket.readyState === SOCKET_READY_STATE_OPEN && !isBackgroundedSession) {
+      return null;
+    }
+
+    const answerText = String(message.text ?? '').trim();
+
+    if (!answerText || isPreparingChatReply(answerText)) {
+      return null;
+    }
+
+    const linkUrl = buildChatNotificationTargetUrl(session.context, session.sessionId);
+    const requests = message.clientRequestId?.trim()
+      ? await listChatConversationRequests(session.sessionId, 200).catch(() => [])
+      : [];
+    const matchingRequest =
+      requests.find((request) => request.requestId === message.clientRequestId) ??
+      requests.find((request) => request.responseMessageId === message.id) ??
+      null;
+    const questionText = matchingRequest?.userText?.trim() || '';
+    const fallback = createChatNotificationPreview(answerText) || `${conversationTitle} 채팅방에 새 응답이 도착했습니다.`;
+    const body = createChatQuestionAnswerNotificationBody({
+      questionText,
+      answerText,
+      fallback,
+    });
+    const previewText = createChatQuestionOnlyNotificationPreview(questionText, fallback);
+
+    if (!body.trim()) {
+      return null;
+    }
+
+    const metadata = {
+      category: 'chat',
+      sessionId: session.sessionId,
+      conversationTitle,
+      messageId: String(message.id),
+      messageTimestamp: message.timestamp,
+      questionText: normalizeNotificationDetailText(questionText) ?? '',
+      answerText: normalizeNotificationDetailText(answerText) ?? '',
+      targetUrl: linkUrl,
+      notificationKey: `chat:${session.sessionId}:${message.id}`,
+      type: 'chat-reply',
+    };
+
+    return {
+      title: 'Codex Live 새 메시지',
+      body,
+      previewText,
+      linkUrl,
+      threadId: `chat:${session.sessionId}`,
+      data: metadata,
+      metadata,
+    };
+  }
+
+  private replaySessionHistory(session: ChatSessionState, lastEventId: number) {
+    if (!Number.isFinite(lastEventId) || lastEventId <= 0 || session.eventHistory.length === 0) {
+      return;
+    }
+
+    const pendingEnvelopes = session.eventHistory.filter((envelope) => envelope.eventId > lastEventId);
+
+    for (const envelope of pendingEnvelopes) {
+      sendSocketEnvelope(this.logger, session.socket, envelope, 'failed to replay websocket session history envelope');
+    }
+  }
+
+  private async initializeSession(session: ChatSessionState) {
+    await session.messagePersistenceTail.catch(() => undefined);
+
+    const messages = await listChatConversationMessages(session.sessionId, { limit: 500 });
+
+    const initEnvelope = this.createSessionEnvelope(session, {
+      type: 'chat:init',
+      payload: {
+        messages,
+      },
+    });
+
+    sendSocketEnvelope(this.logger, session.socket, initEnvelope, 'failed to send websocket init envelope');
+
+    const statusEnvelope = this.createSessionEnvelope(session, {
+      type: 'chat:status',
+      payload: {
+        connectedAt: new Date().toISOString(),
+      },
+    });
+
+    sendSocketEnvelope(this.logger, session.socket, statusEnvelope, 'failed to send websocket status envelope');
+
+    this.sendToSession(session, {
+      type: 'chat:runtime',
+      payload: chatRuntimeService.getSnapshot(),
+    });
+  }
+
+  private async handleConnection(socket: WebSocket, request: IncomingMessage) {
+    const origin = request.headers.host ? `http://${request.headers.host}` : 'http://localhost';
+    const url = new URL(request.url ?? '/', origin);
+    const requestedSessionId = url.searchParams.get('sessionId')?.trim() || createRequestId();
+    const clientId = url.searchParams.get('clientId')?.trim() || null;
+    const lastEventIdRaw = Number(url.searchParams.get('lastEventId') ?? 0);
+    const lastEventId = Number.isFinite(lastEventIdRaw) && lastEventIdRaw > 0 ? lastEventIdRaw : 0;
+    const session = this.getOrCreateSession(requestedSessionId, clientId);
+
+    if (session.socket && session.socket !== socket) {
+      closeSocketSafely(this.logger, session.socket, 'failed to close superseded websocket session');
+    }
+
+    session.socket = socket;
+    session.lastSeenAt = Date.now();
+    this.clientStates.set(socket, session);
+
+    socket.on('message', (raw: RawData) => {
+      this.handleMessage(socket, raw);
+    });
+
+    socket.on('close', () => {
+      this.clientStates.delete(socket);
+      if (session.socket === socket) {
+        session.socket = null;
+      }
+    });
+
+    socket.on('error', (error: Error) => {
+      this.logger.error(error, 'chat websocket error');
+      this.clientStates.delete(socket);
+      if (session.socket === socket) {
+        session.socket = null;
+      }
+    });
+
+    await this.initializeSession(session);
+    this.replaySessionHistory(session, lastEventId);
+  }
+
+  private handleMessage(socket: WebSocket, raw: RawData) {
+    try {
+      const message = JSON.parse(raw.toString()) as ChatInboundMessage;
+      const session = this.clientStates.get(socket);
+
+      if (session) {
+        session.lastSeenAt = Date.now();
+      }
+
+      if (message.type === 'context:update') {
+        this.handleContextUpdate(socket, message.payload);
+        return;
+      }
+
+      if (message.type === 'presence:ping') {
+        return;
+      }
+
+      if (message.type === 'event:received') {
+        const receivedEventId = Math.round(Number(message.payload?.eventId ?? 0));
+
+        if (
+          session &&
+          Number.isFinite(receivedEventId) &&
+          receivedEventId > 0 &&
+          session.pendingQueueReleaseEventId !== null &&
+          receivedEventId >= session.pendingQueueReleaseEventId
+        ) {
+          session.pendingQueueReleaseEventId = null;
+          this.tryStartNextQueuedRequest(session);
+        }
+        return;
+      }
+
+      if (message.type === 'message:send') {
+        void this.handleUserMessage(
+          socket,
+          message.payload.text,
+          message.payload.requestId,
+          message.payload.mode === 'direct' ? 'direct' : 'queue',
+          {
+            chatTypeId: message.payload.chatTypeId ?? null,
+            chatTypeLabel: message.payload.chatTypeLabel,
+            chatTypeDescription: message.payload.chatTypeDescription,
+            chatTypeIsTemplate: message.payload.chatTypeIsTemplate,
+          },
+        ).catch((error: unknown) => {
+          this.logger.error(error, 'chat reply build failed');
+          const session = this.clientStates.get(socket);
+
+          if (!session) {
+            return;
+          }
+
+          this.sendToSession(session, {
+            type: 'chat:error',
+            payload: {
+              message:
+                error instanceof Error && error.message.trim()
+                  ? error.message.trim()
+                  : '채팅 응답을 만드는 중 오류가 발생했습니다.',
+            },
+          });
+        });
+        return;
+      }
+
+      if (message.type === 'runtime:watch') {
+        if (!session) {
+          return;
+        }
+
+        session.watchedRuntimeRequestId = message.payload?.requestId?.trim() || null;
+        this.pushRuntimeDetail(session);
+      }
+    } catch (error) {
+      this.logger.warn(error, 'invalid chat websocket payload');
+      const session = this.clientStates.get(socket);
+
+      if (!session) {
+        return;
+      }
+
+      this.sendToSession(session, {
+        type: 'chat:error',
+        payload: {
+          message: '채팅 메시지를 처리하지 못했습니다.',
+        },
+      });
+    }
+  }
+
+  private handleContextUpdate(socket: WebSocket, context: ChatContext) {
+    const state = this.clientStates.get(socket);
+
+    if (!state) {
+      return;
+    }
+
+    const previousFocus = state.context?.focusedComponentId;
+    const previousContextLabel = state.context?.chatTypeLabel ?? null;
+    const previousContextDescription = state.context?.chatTypeDescription ?? null;
+    state.context = context;
+    const nextContextLabel = context.chatTypeLabel ?? null;
+    const nextContextDescription = context.chatTypeDescription ?? null;
+
+    if (previousContextLabel !== nextContextLabel || previousContextDescription !== nextContextDescription) {
+      void updateChatConversationContext(state.sessionId, {
+        clientId: state.clientId,
+        contextLabel: nextContextLabel,
+        contextDescription: nextContextDescription,
+      }).catch((error: unknown) => {
+        this.logger.error(error, 'failed to persist chat context');
+      });
+    }
+
+    if (context.focusedComponentId && context.focusedComponentId !== previousFocus) {
+      this.sendToSession(state, {
+        type: 'chat:message',
+        payload: createMessage('codex', `선택 포커스가 ${context.focusedComponentId}로 이동했습니다. 관련 문맥을 반영합니다.`),
+      });
+    }
+  }
+
+  private async handleUserMessage(
+    socket: WebSocket,
+    text: string,
+    requestId?: string,
+    mode: 'queue' | 'direct' = 'queue',
+    contextOverride?: Partial<ChatContext> | null,
+  ) {
+    const trimmed = text.trim();
+
+    if (!trimmed) {
+      return;
+    }
+
+    const state = this.clientStates.get(socket);
+
+    if (!state) {
+      return;
+    }
+
+    if (contextOverride) {
+      state.context = {
+        ...(state.context ?? {
+          pageId: null,
+          pageTitle: '',
+          topMenu: '',
+          focusedComponentId: null,
+          pageUrl: '',
+        }),
+        ...contextOverride,
+      };
+    }
+
+    this.normalizeSessionExecutionState(state);
+
+    const nextRequestId = requestId?.trim() || createRequestId();
+    const requestedAtMs = Date.now();
+
+    const request = {
+      requestId: nextRequestId,
+      text: trimmed,
+      mode,
+      requestedAtMs,
+    };
+
+    if (mode === 'queue' && (state.activeRequestCount > 0 || state.queue.length > 0)) {
+      const queuedUserMessage = {
+        ...createMessage('user', trimmed, nextRequestId),
+        timestamp: formatTime(new Date(requestedAtMs)),
+      };
+
+      this.sendToSession(state, {
+        type: 'chat:message',
+        payload: queuedUserMessage,
+      });
+      state.queue.push(request);
+      chatRuntimeService.enqueueJob({
+        sessionId: state.sessionId,
+        requestId: nextRequestId,
+        mode,
+        text: trimmed,
+      });
+      chatRuntimeService.registerQueuedControl(nextRequestId, {
+        remove: () => this.removeQueuedRuntimeJob(nextRequestId),
+      });
+      this.emitJobState(state, {
+        requestId: nextRequestId,
+        status: 'queued',
+        mode,
+        queueSize: state.queue.length,
+        message: `대기열 ${state.queue.length}건`,
+      });
+      void upsertChatConversationRequest(state.sessionId, {
+        requestId: nextRequestId,
+        status: 'queued',
+        statusMessage: `대기열 ${state.queue.length}건`,
+        userMessageId: queuedUserMessage.id,
+        userText: trimmed,
+      }).catch((error: unknown) => {
+        this.logger.error(error, 'failed to persist queued chat request');
+      });
+      return;
+    }
+
+    await this.executeRequest(state, request);
+  }
+
+  private async executeRequest(
+    session: ChatSessionState,
+    request: {
+      requestId: string;
+      text: string;
+      mode: 'queue' | 'direct';
+      requestedAtMs: number;
+    },
+  ) {
+    let terminalStatus: 'completed' | 'failed' | 'cancelled' = 'completed';
+    let hasAnnouncedStreaming = false;
+    const activityLines: string[] = [];
+    session.activeRequestCount += 1;
+    const existingRequest = await getChatConversationRequest(session.sessionId, request.requestId);
+    const hasStoredUserMessage = existingRequest?.userMessageId != null;
+
+    if (!hasStoredUserMessage) {
+      this.sendToSession(session, {
+        type: 'chat:message',
+        payload: {
+          ...createMessage('user', request.text, request.requestId),
+          timestamp: formatTime(new Date(request.requestedAtMs)),
+        },
+      });
+    }
+
+    const appendActivityLine = (line: string) => {
+      const normalized = line.trim();
+
+      if (!normalized) {
+        return;
+      }
+
+      activityLines.push(normalized);
+      void appendChatConversationActivityLine(session.sessionId, request.requestId, normalized).catch((error: unknown) => {
+        this.logger.warn(error, 'failed to persist chat activity line');
+      });
+      this.sendToSession(session, {
+        type: 'chat:activity',
+        payload: {
+          requestId: request.requestId,
+          line: normalized,
+          lineCount: activityLines.length,
+        },
+      });
+      const activityMessage = createActivityLogMessage(request.requestId, activityLines);
+
+      if (activityMessage) {
+        this.updateMessageInSession(session, activityMessage);
+      }
+    };
+
+    chatRuntimeService.startJob({
+      sessionId: session.sessionId,
+      requestId: request.requestId,
+      mode: request.mode,
+      text: request.text,
+    });
+    chatRuntimeService.registerRunningControl(request.requestId, {
+      cancel: () => this.cancelRuntimeJob(request.requestId),
+    });
+    chatRuntimeService.appendLog(request.requestId, `요청을 처리합니다. mode=${request.mode}`);
+    appendActivityLine(`# 상태: 요청을 처리합니다. mode=${request.mode}`);
+    this.emitJobState(session, {
+      requestId: request.requestId,
+      status: 'started',
+      mode: request.mode,
+      queueSize: session.queue.length,
+      message:
+        request.mode === 'direct'
+          ? '즉시 요청 실행 중'
+          : `요청 처리 중${session.queue.length > 0 ? ` · 대기열 ${session.queue.length}건` : ''}`,
+    });
+
+    this.sendToSession(session, {
+        type: 'chat:message',
+        payload: createMessage(
+          'system',
+          request.mode === 'direct'
+            ? '즉시 요청 실행 중입니다.'
+            : `요청 실행 중입니다.${session.queue.length > 0 ? ` 남은 대기열 ${session.queue.length}건` : ''}`,
+          request.requestId,
+        ),
+      });
+
+    const progressMessages = buildProgressMessages(request.text);
+    let progressIndex = 0;
+    let progressTimer: ReturnType<typeof setInterval> | null = setInterval(() => {
+      const nextMessage = progressMessages[Math.min(progressIndex, progressMessages.length - 1)];
+      chatRuntimeService.appendLog(request.requestId, nextMessage);
+      appendActivityLine(`# 진행: ${nextMessage}`);
+
+      this.sendToSession(session, {
+        type: 'chat:message',
+        payload: createMessage('system', nextMessage, request.requestId),
+      });
+
+      if (progressIndex < progressMessages.length - 1) {
+        progressIndex += 1;
+      }
+    }, 2200);
+
+    const codexReplyMessage = createMessage('codex', '', request.requestId);
+    const stopProgressTimer = () => {
+      if (progressTimer !== null) {
+        clearInterval(progressTimer);
+        progressTimer = null;
+      }
+    };
+
+    try {
+      chatRuntimeService.appendLog(request.requestId, '요청 분석을 시작합니다.');
+      appendActivityLine('# 진행: 요청 분석을 시작합니다.');
+      this.sendToSession(session, {
+        type: 'chat:message',
+        payload: createMessage('system', progressMessages[0] ?? '요청을 분석하고 있습니다.', request.requestId),
+      });
+      this.updateMessageInSession(session, {
+        ...codexReplyMessage,
+        text: '응답을 준비하고 있습니다...',
+        timestamp: resolveResponseTimestamp(request.requestedAtMs),
+      });
+
+      const reply = await buildCodexReply(
+        session.context ?? null,
+        request.text,
+        session.sessionId,
+        request.requestId,
+        (partialReply) => {
+          stopProgressTimer();
+          if (!hasAnnouncedStreaming) {
+            hasAnnouncedStreaming = true;
+            chatRuntimeService.appendLog(request.requestId, '응답을 실시간으로 전송 중입니다.');
+            appendActivityLine('# 진행: 응답을 실시간으로 전송 중입니다.');
+          }
+          this.updateMessageInSession(session, {
+            ...codexReplyMessage,
+            text: partialReply,
+            timestamp: resolveResponseTimestamp(request.requestedAtMs),
+          });
+        },
+        (activityLine) => {
+          appendActivityLine(activityLine);
+        },
+      );
+      chatRuntimeService.appendLog(request.requestId, '응답 생성이 완료되었습니다.');
+      appendActivityLine('# 상태: 응답 생성이 완료되었습니다.');
+
+      const finalCodexReplyMessage = {
+        ...codexReplyMessage,
+        text: reply,
+        timestamp: resolveResponseTimestamp(request.requestedAtMs),
+      };
+
+      this.sendToSession(
+        session,
+        {
+          type: 'chat:message',
+          payload: finalCodexReplyMessage,
+        },
+        {
+          skipOfflineNotification: true,
+        },
+      );
+
+      // Final replies must be durably stored before the request is marked complete,
+      // otherwise replay/reload can be stuck on the placeholder text.
+      await this.persistConversationMessage(session, finalCodexReplyMessage);
+      await upsertChatConversationRequest(session.sessionId, {
+        requestId: request.requestId,
+        status: 'completed',
+        statusMessage: '요청 처리 완료',
+        responseMessageId: finalCodexReplyMessage.id,
+        responseText: finalCodexReplyMessage.text,
+      });
+
+      const terminalMessageEnvelope = this.sendToSession(session, {
+        type: 'chat:message',
+        payload: createMessage(
+          'system',
+          request.mode === 'direct'
+            ? '즉시 요청 처리가 끝났습니다.'
+            : `요청 처리가 끝났습니다.${session.queue.length > 0 ? ` 대기열 ${session.queue.length}건이 이어집니다.` : ''}`,
+          request.requestId,
+        ),
+      });
+      session.pendingQueueReleaseEventId = terminalMessageEnvelope.eventId;
+      this.emitJobState(session, {
+        requestId: request.requestId,
+        status: 'completed',
+        mode: request.mode,
+        queueSize: session.queue.length,
+        message: '요청 처리 완료',
+      });
+      chatRuntimeService.finishJob(request.requestId, 'completed');
+      await this.sendOfflineNotificationIfNeeded(session, finalCodexReplyMessage);
+    } catch (error) {
+      const wasCancelled = this.cancelledRequestIds.has(request.requestId);
+      terminalStatus = wasCancelled ? 'cancelled' : 'failed';
+      chatRuntimeService.appendLog(
+        request.requestId,
+        wasCancelled
+          ? '사용자 요청으로 실행이 중단되었습니다.'
+          : error instanceof Error
+            ? `실행 오류: ${error.message}`
+            : '실행 오류가 발생했습니다.',
+      );
+      appendActivityLine(
+        wasCancelled
+          ? '# 상태: 사용자 요청으로 실행이 중단되었습니다.'
+          : error instanceof Error
+            ? `# 오류: ${error.message}`
+            : '# 오류: 실행 오류가 발생했습니다.',
+      );
+      const terminalErrorEnvelope = this.sendToSession(session, {
+        type: 'chat:message',
+        payload: createMessage(
+          'system',
+          wasCancelled ? '요청 실행이 중단되었습니다.' : '요청 처리 중 오류가 발생했습니다.',
+          request.requestId,
+        ),
+      });
+      session.pendingQueueReleaseEventId = terminalErrorEnvelope.eventId;
+      this.emitJobState(session, {
+        requestId: request.requestId,
+        status: 'failed',
+        mode: request.mode,
+        queueSize: session.queue.length,
+        message: wasCancelled ? '요청 실행 중단' : '요청 처리 실패',
+      });
+      throw error;
+    } finally {
+      stopProgressTimer();
+      activeChatProcessRegistry.delete(request.requestId);
+      if (chatRuntimeService.getJobDetail(request.requestId).terminalStatus == null) {
+        chatRuntimeService.finishJob(request.requestId, terminalStatus);
+      }
+      this.cancelledRequestIds.delete(request.requestId);
+      session.activeRequestCount = Math.max(0, session.activeRequestCount - 1);
+      this.tryStartNextQueuedRequest(session);
+    }
+  }
+}
diff --git a/etc/servers/work-server/src/services/error-log-plan-registration-service.ts b/etc/servers/work-server/src/services/error-log-plan-registration-service.ts
new file mode 100755
index 0000000..4d2ca4c
--- /dev/null
+++ b/etc/servers/work-server/src/services/error-log-plan-registration-service.ts
@@ -0,0 +1,460 @@
+import { createHash } from 'node:crypto';
+import { db } from '../db/client.js';
+import { listBoardPosts, createBoardPost } from './board-service.js';
+import { listErrorLogs } from './error-log-service.js';
+import { ensurePlanTable, PLAN_TABLE } from './plan-service.js';
+
+const DEFAULT_ERROR_LOG_PLAN_GROUP_LIMIT = 6;
+const ERROR_LOG_BOARD_POST_MARKER_PREFIX = '<!-- error-log-plan-work-id:';
+
+type ErrorLogCandidate = {
+  fingerprint: string;
+  workId: string;
+  source: string;
+  sourceLabel: string | null;
+  errorType: string;
+  errorName: string | null;
+  errorMessage: string;
+  requestPath: string | null;
+  requestPathGroup: string;
+  requestPaths: string[];
+  statusCode: number | null;
+  count: number;
+  firstCreatedAt: unknown;
+  lastCreatedAt: unknown;
+  sampleLogId: number | null;
+  sampleLogIds: number[];
+  errorNames: string[];
+  representativeMessages: string[];
+  groupedScopes?: string[];
+  groupedCandidateCount?: number;
+};
+
+type ErrorLogRegistrationSkip = {
+  workId: string;
+  reason: string;
+  boardPostId?: number;
+  planId?: number;
+};
+
+type ErrorLogBoardPostRegistration = {
+  postId: number;
+  title: string;
+  workId: string;
+  count: number;
+};
+
+function normalizeDateBoundary(value: unknown) {
+  if (!value) {
+    return null;
+  }
+
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function formatIsoTimestamp(value: unknown) {
+  const date = normalizeDateBoundary(value);
+  return date ? date.toISOString() : String(value ?? '');
+}
+
+function normalizeRequestPathGroup(requestPath: unknown) {
+  const normalized = String(requestPath ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/\?.*$/u, '')
+    .replace(/\/\d+(?=\/|$)/gu, '/:id')
+    .replace(/[0-9a-f]{8,}(?=\/|$)/giu, ':id');
+
+  if (!normalized) {
+    return 'unknown';
+  }
+
+  const segments = normalized
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+    .slice(0, 3);
+
+  return segments.length > 0 ? `/${segments.join('/')}` : normalized;
+}
+
+function buildErrorLogPlanFingerprint(log: Record<string, unknown>) {
+  return createHash('sha1')
+    .update(
+      [
+        String(log.source ?? '').trim().toLowerCase(),
+        String(log.errorType ?? '').trim().toLowerCase(),
+        log.statusCode == null ? '' : String(log.statusCode),
+      ].join('||'),
+    )
+    .digest('hex')
+    .slice(0, 12);
+}
+
+function buildErrorLogPlanWorkId(log: Record<string, unknown>) {
+  return `error-fix-${buildErrorLogPlanFingerprint(log)}`;
+}
+
+function buildErrorLogPlanCandidates(logs: Array<Record<string, unknown>>) {
+  const grouped = new Map<string, any>();
+
+  for (const log of logs) {
+    const fingerprint = createHash('sha1')
+      .update(
+        [
+          String(log.source ?? '').trim().toLowerCase(),
+          String(log.errorType ?? '').trim().toLowerCase(),
+          String(log.errorName ?? '').trim().toLowerCase(),
+          log.statusCode == null ? '' : String(log.statusCode),
+          normalizeRequestPathGroup(log.requestPath),
+        ].join('||'),
+      )
+      .digest('hex')
+      .slice(0, 12);
+
+    const createdAtMs = normalizeDateBoundary(log.createdAt)?.getTime() ?? 0;
+    const existing = grouped.get(fingerprint);
+    const requestPathGroup = normalizeRequestPathGroup(log.requestPath);
+    const errorMessage = String(log.errorMessage ?? '').trim();
+
+    if (!existing) {
+      grouped.set(fingerprint, {
+        sample: log,
+        count: 1,
+        firstCreatedAt: log.createdAt,
+        firstTimeMs: createdAtMs,
+        lastCreatedAt: log.createdAt,
+        lastTimeMs: createdAtMs,
+        requestPathGroup,
+        requestPaths: log.requestPath ? new Set([String(log.requestPath).trim()]) : new Set(),
+        errorMessages: errorMessage ? new Set([errorMessage]) : new Set(),
+        errorNames: log.errorName ? new Set([String(log.errorName).trim()]) : new Set(),
+        sampleLogIds: log.id != null ? [Number(log.id)] : [],
+      });
+      continue;
+    }
+
+    existing.count += 1;
+
+    if (log.requestPath) {
+      existing.requestPaths.add(String(log.requestPath).trim());
+    }
+
+    if (errorMessage) {
+      existing.errorMessages.add(errorMessage);
+    }
+
+    if (log.errorName) {
+      existing.errorNames.add(String(log.errorName).trim());
+    }
+
+    if (log.id != null && existing.sampleLogIds.length < 5) {
+      existing.sampleLogIds.push(Number(log.id));
+    }
+
+    if (createdAtMs <= existing.firstTimeMs) {
+      existing.firstCreatedAt = log.createdAt;
+      existing.firstTimeMs = createdAtMs;
+    }
+
+    if (createdAtMs >= existing.lastTimeMs) {
+      existing.sample = log;
+      existing.lastCreatedAt = log.createdAt;
+      existing.lastTimeMs = createdAtMs;
+    }
+  }
+
+  return [...grouped.entries()]
+    .map(([fingerprint, entry]) => ({
+      fingerprint,
+      workId: buildErrorLogPlanWorkId(entry.sample),
+      source: String(entry.sample.source ?? ''),
+      sourceLabel: entry.sample.sourceLabel ? String(entry.sample.sourceLabel) : null,
+      errorType: String(entry.sample.errorType ?? ''),
+      errorName: entry.sample.errorName ? String(entry.sample.errorName) : null,
+      errorMessage: String(entry.sample.errorMessage ?? ''),
+      requestPath: entry.sample.requestPath ? String(entry.sample.requestPath) : null,
+      requestPathGroup: entry.requestPathGroup,
+      requestPaths: [...entry.requestPaths].filter(Boolean).slice(0, 5),
+      statusCode: entry.sample.statusCode == null ? null : Number(entry.sample.statusCode),
+      count: entry.count,
+      firstCreatedAt: entry.firstCreatedAt,
+      lastCreatedAt: entry.lastCreatedAt,
+      sampleLogId: entry.sample.id == null ? null : Number(entry.sample.id),
+      sampleLogIds: entry.sampleLogIds,
+      errorNames: [...entry.errorNames].filter(Boolean).slice(0, 5),
+      representativeMessages: [...entry.errorMessages].filter(Boolean).slice(0, 5),
+    }))
+    .sort((left, right) => {
+      if (right.count !== left.count) {
+        return right.count - left.count;
+      }
+
+      const leftLastTime = normalizeDateBoundary(left.lastCreatedAt)?.getTime() ?? 0;
+      const rightLastTime = normalizeDateBoundary(right.lastCreatedAt)?.getTime() ?? 0;
+
+      if (rightLastTime !== leftLastTime) {
+        return rightLastTime - leftLastTime;
+      }
+
+      return Number(right.sampleLogId ?? 0) - Number(left.sampleLogId ?? 0);
+    });
+}
+
+function mergeErrorLogPlanCandidateBucket(bucket: ErrorLogCandidate[], bucketIndex: number): ErrorLogCandidate {
+  const sortedBucket = [...bucket].sort((left, right) => {
+    if (right.count !== left.count) {
+      return right.count - left.count;
+    }
+
+    return String(left.workId ?? '').localeCompare(String(right.workId ?? ''));
+  });
+
+  const representative = sortedBucket[0];
+  const uniqueFingerprints = [...new Set(sortedBucket.map((candidate) => candidate.fingerprint).filter(Boolean))].sort();
+  const mergedFingerprint = createHash('sha1')
+    .update(uniqueFingerprints.join('||'))
+    .digest('hex')
+    .slice(0, 12);
+  const firstCreatedAt = sortedBucket
+    .map((candidate) => normalizeDateBoundary(candidate.firstCreatedAt)?.getTime() ?? Number.POSITIVE_INFINITY)
+    .reduce((min, value) => Math.min(min, value), Number.POSITIVE_INFINITY);
+  const lastCreatedAt = sortedBucket
+    .map((candidate) => normalizeDateBoundary(candidate.lastCreatedAt)?.getTime() ?? 0)
+    .reduce((max, value) => Math.max(max, value), 0);
+  const requestPaths = [...new Set(sortedBucket.flatMap((candidate) => candidate.requestPaths ?? []).filter(Boolean))].slice(0, 8);
+  const representativeMessages = [...new Set(sortedBucket.flatMap((candidate) => candidate.representativeMessages ?? []).filter(Boolean))].slice(0, 8);
+  const errorNames = [...new Set(sortedBucket.flatMap((candidate) => candidate.errorNames ?? []).filter(Boolean))].slice(0, 8);
+  const groupedScopes = sortedBucket
+    .slice(0, 8)
+    .map((candidate) => {
+      const parts = [candidate.sourceLabel || candidate.source, candidate.errorType];
+
+      if (candidate.requestPathGroup && candidate.requestPathGroup !== 'unknown') {
+        parts.push(candidate.requestPathGroup);
+      }
+
+      return parts.filter(Boolean).join(' / ');
+    })
+    .filter(Boolean);
+
+  return {
+    fingerprint: mergedFingerprint,
+    workId: `error-fix-bundle-${mergedFingerprint}`,
+    source: representative.source,
+    sourceLabel: representative.sourceLabel,
+    errorType: sortedBucket.length > 1 ? '다중 에러 묶음' : representative.errorType,
+    errorName: representative.errorName,
+    errorMessage: representative.errorMessage,
+    requestPath: representative.requestPath,
+    requestPathGroup: representative.requestPathGroup,
+    requestPaths,
+    statusCode: representative.statusCode,
+    count: sortedBucket.reduce((sum, candidate) => sum + Number(candidate.count ?? 0), 0),
+    firstCreatedAt: Number.isFinite(firstCreatedAt) ? new Date(firstCreatedAt).toISOString() : representative.firstCreatedAt,
+    lastCreatedAt: lastCreatedAt > 0 ? new Date(lastCreatedAt).toISOString() : representative.lastCreatedAt,
+    sampleLogId: representative.sampleLogId,
+    sampleLogIds: [...new Set(sortedBucket.flatMap((candidate) => candidate.sampleLogIds ?? []).filter((value) => value != null))].slice(0, 8),
+    errorNames,
+    representativeMessages,
+    groupedScopes,
+    groupedCandidateCount: sortedBucket.length,
+  };
+}
+
+function coalesceErrorLogPlanCandidates(candidates: ErrorLogCandidate[], maxGroups = DEFAULT_ERROR_LOG_PLAN_GROUP_LIMIT) {
+  const sortedCandidates = [...candidates].sort((left, right) => {
+    if (right.count !== left.count) {
+      return right.count - left.count;
+    }
+
+    return String(left.workId ?? '').localeCompare(String(right.workId ?? ''));
+  });
+
+  if (sortedCandidates.length <= maxGroups) {
+    return sortedCandidates;
+  }
+
+  const bucketSize = Math.ceil(sortedCandidates.length / maxGroups);
+  const merged: ErrorLogCandidate[] = [];
+
+  for (let index = 0; index < sortedCandidates.length; index += bucketSize) {
+    const bucket = sortedCandidates.slice(index, index + bucketSize);
+
+    if (bucket.length === 0) {
+      continue;
+    }
+
+    merged.push(mergeErrorLogPlanCandidateBucket(bucket, merged.length + 1));
+  }
+
+  return merged.slice(0, maxGroups);
+}
+
+function filterLogsWithinRange(logs: Array<Record<string, unknown>>, rangeStart: Date, rangeEnd: Date) {
+  const startTime = rangeStart.getTime();
+  const endTime = rangeEnd.getTime();
+
+  return logs.filter((log) => {
+    const createdAtMs = normalizeDateBoundary(log.createdAt)?.getTime();
+    return createdAtMs != null && createdAtMs >= startTime && createdAtMs <= endTime;
+  });
+}
+
+function formatErrorLogPlanNote(candidate: ErrorLogCandidate, rangeStart: Date, rangeEnd: Date) {
+  const lines = [
+    `조회 구간: ${formatIsoTimestamp(rangeStart)} ~ ${formatIsoTimestamp(rangeEnd)}`,
+    `발생 건수: ${candidate.count}건`,
+    `최근 발생: ${formatIsoTimestamp(candidate.lastCreatedAt)}`,
+    `최초 발생: ${formatIsoTimestamp(candidate.firstCreatedAt)}`,
+    `에러 유형: ${candidate.errorType}`,
+  ];
+
+  if (candidate.errorName) {
+    lines.push(`에러 이름: ${candidate.errorName}`);
+  }
+
+  if (candidate.sourceLabel || candidate.source) {
+    lines.push(`발생 위치: ${candidate.sourceLabel || candidate.source}`);
+  }
+
+  if (candidate.groupedCandidateCount && candidate.groupedCandidateCount > 1) {
+    lines.push(`묶인 에러 그룹: ${candidate.groupedCandidateCount}개`);
+  }
+
+  if (candidate.requestPathGroup && candidate.requestPathGroup !== 'unknown') {
+    lines.push(`주요 경로 그룹: ${candidate.requestPathGroup}`);
+  }
+
+  if (Array.isArray(candidate.requestPaths) && candidate.requestPaths.length > 0) {
+    lines.push(`대표 경로: ${candidate.requestPaths.join(', ')}`);
+  }
+
+  if (candidate.statusCode != null) {
+    lines.push(`상태 코드: ${candidate.statusCode}`);
+  }
+
+  if (Array.isArray(candidate.representativeMessages) && candidate.representativeMessages.length > 0) {
+    lines.push('대표 메시지:');
+    lines.push(...candidate.representativeMessages.map((message, index) => `${index + 1}. ${message}`));
+  } else {
+    lines.push(`대표 메시지: ${String(candidate.errorMessage ?? '').trim()}`);
+  }
+
+  if (Array.isArray(candidate.sampleLogIds) && candidate.sampleLogIds.length > 0) {
+    lines.push(`대표 로그 ID: ${candidate.sampleLogIds.join(', ')}`);
+  } else {
+    lines.push(`대표 로그 ID: ${candidate.sampleLogId}`);
+  }
+
+  if (Array.isArray(candidate.groupedScopes) && candidate.groupedScopes.length > 0) {
+    lines.push('묶인 에러 범위:');
+    lines.push(...candidate.groupedScopes.map((scope, index) => `${index + 1}. ${scope}`));
+  }
+
+  lines.push('');
+  lines.push('처리 요청:');
+  lines.push('1. 재현 경로와 영향 범위를 확인합니다.');
+  lines.push('2. 수정이 필요한 경우 별도 Plan으로 소스 작업을 진행합니다.');
+  lines.push('3. 테스트와 재발 방지 필요 여부를 검토합니다.');
+
+  return lines.join('\n');
+}
+
+function buildBoardPostMarker(workId: string) {
+  return `${ERROR_LOG_BOARD_POST_MARKER_PREFIX}${workId} -->`;
+}
+
+function buildErrorLogBoardPostTitle(candidate: ErrorLogCandidate) {
+  const scope = candidate.requestPathGroup && candidate.requestPathGroup !== 'unknown'
+    ? ` ${candidate.requestPathGroup}`
+    : '';
+  const title = `에러로그 조치 계획: ${candidate.errorType}${scope}`.replace(/\s+/g, ' ').trim();
+  return title.length > 200 ? `${title.slice(0, 197).trimEnd()}...` : title;
+}
+
+function buildErrorLogBoardPostContent(candidate: ErrorLogCandidate, rangeStart: Date, rangeEnd: Date) {
+  const detailNote = formatErrorLogPlanNote(candidate, rangeStart, rangeEnd);
+  return [
+    buildBoardPostMarker(candidate.workId),
+    `# ${buildErrorLogBoardPostTitle(candidate)}`,
+    '',
+    detailNote,
+  ].join('\n');
+}
+
+export async function registerErrorLogBoardPosts(args?: {
+  rangeStart?: Date;
+  rangeEnd?: Date;
+  maxGroups?: number;
+}) {
+  await ensurePlanTable();
+
+  const rangeEnd = args?.rangeEnd ?? new Date();
+  const rangeStart = args?.rangeStart ?? new Date(rangeEnd.getTime() - 24 * 60 * 60 * 1000);
+  const maxGroups = args?.maxGroups ?? DEFAULT_ERROR_LOG_PLAN_GROUP_LIMIT;
+  const [errorLogs, existingBoardPosts] = await Promise.all([
+    listErrorLogs(200),
+    listBoardPosts(),
+  ]);
+
+  const recentLogs = filterLogsWithinRange(errorLogs as Array<Record<string, unknown>>, rangeStart, rangeEnd);
+  const rawCandidates = buildErrorLogPlanCandidates(recentLogs as Array<Record<string, unknown>>);
+  const candidates = coalesceErrorLogPlanCandidates(rawCandidates, maxGroups);
+  const createdPosts: ErrorLogBoardPostRegistration[] = [];
+  const skippedPosts: ErrorLogRegistrationSkip[] = [];
+
+  for (const candidate of candidates) {
+    const marker = buildBoardPostMarker(candidate.workId);
+    const existingBoardPost = existingBoardPosts.find((post) => String(post.content ?? '').includes(marker));
+
+    if (existingBoardPost) {
+      skippedPosts.push({
+        workId: candidate.workId,
+        boardPostId: existingBoardPost.id,
+        reason: `기존 게시글 #${existingBoardPost.id}가 있습니다.`,
+      });
+      continue;
+    }
+
+    const latestOpenPlan = await db(PLAN_TABLE)
+      .select(['id', 'status'])
+      .where({ work_id: candidate.workId })
+      .whereNot({ status: '완료' as never })
+      .orderBy('id', 'desc')
+      .first();
+
+    if (latestOpenPlan) {
+      skippedPosts.push({
+        workId: candidate.workId,
+        planId: Number(latestOpenPlan.id),
+        reason: `기존 미완료 Plan #${latestOpenPlan.id}가 있습니다.`,
+      });
+      continue;
+    }
+
+    const createdPost = await createBoardPost({
+      title: buildErrorLogBoardPostTitle(candidate),
+      content: buildErrorLogBoardPostContent(candidate, rangeStart, rangeEnd),
+      automationType: 'none',
+    });
+
+    createdPosts.push({
+      postId: createdPost.id,
+      title: createdPost.title,
+      workId: candidate.workId,
+      count: candidate.count,
+    });
+  }
+
+  return {
+    rangeStart,
+    rangeEnd,
+    recentLogs,
+    rawCandidates,
+    candidates,
+    createdPosts,
+    skippedPosts,
+  };
+}
diff --git a/etc/servers/work-server/src/services/error-log-service.ts b/etc/servers/work-server/src/services/error-log-service.ts
new file mode 100755
index 0000000..703cf1f
--- /dev/null
+++ b/etc/servers/work-server/src/services/error-log-service.ts
@@ -0,0 +1,164 @@
+import { z } from 'zod';
+import { db } from '../db/client.js';
+
+export const ERROR_LOG_TABLE = 'error_logs';
+export const ERROR_LOG_VIEW_TOKEN = 'usr_7f3a9c2d8e1b4a6f';
+
+export const createErrorLogSchema = z.object({
+  source: z.enum(['server', 'client', 'automation']).default('server'),
+  sourceLabel: z.string().trim().max(80).optional().nullable(),
+  errorType: z.string().trim().min(1).max(120),
+  errorName: z.string().trim().max(255).optional().nullable(),
+  errorMessage: z.string().trim().min(1).max(10000),
+  detail: z.string().trim().max(50000).optional().nullable(),
+  stackTrace: z.string().trim().max(50000).optional().nullable(),
+  statusCode: z.number().int().min(100).max(599).optional().nullable(),
+  requestMethod: z.string().trim().max(10).optional().nullable(),
+  requestPath: z.string().trim().max(1000).optional().nullable(),
+  relatedPlanId: z.number().int().positive().optional().nullable(),
+  relatedWorkId: z.string().trim().max(120).optional().nullable(),
+  context: z.record(z.string(), z.unknown()).optional().nullable(),
+});
+
+export type ErrorLogPayload = z.infer<typeof createErrorLogSchema>;
+
+async function ensureErrorLogTable() {
+  const hasTable = await db.schema.hasTable(ERROR_LOG_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(ERROR_LOG_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('source', 20).notNullable().defaultTo('server');
+      table.string('source_label', 80).nullable();
+      table.string('error_type', 120).notNullable();
+      table.string('error_name', 255).nullable();
+      table.text('error_message').notNullable();
+      table.text('detail').nullable();
+      table.text('stack_trace').nullable();
+      table.integer('status_code').nullable();
+      table.string('request_method', 10).nullable();
+      table.string('request_path', 1000).nullable();
+      table.integer('related_plan_id').nullable();
+      table.string('related_work_id', 120).nullable();
+      table.jsonb('context_json').nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['source', (table) => table.string('source', 20).notNullable().defaultTo('server')],
+    ['source_label', (table) => table.string('source_label', 80).nullable()],
+    ['error_type', (table) => table.string('error_type', 120).notNullable().defaultTo('unknown')],
+    ['error_name', (table) => table.string('error_name', 255).nullable()],
+    ['error_message', (table) => table.text('error_message').notNullable().defaultTo('')],
+    ['detail', (table) => table.text('detail').nullable()],
+    ['stack_trace', (table) => table.text('stack_trace').nullable()],
+    ['status_code', (table) => table.integer('status_code').nullable()],
+    ['request_method', (table) => table.string('request_method', 10).nullable()],
+    ['request_path', (table) => table.string('request_path', 1000).nullable()],
+    ['related_plan_id', (table) => table.integer('related_plan_id').nullable()],
+    ['related_work_id', (table) => table.string('related_work_id', 120).nullable()],
+    ['context_json', (table) => table.jsonb('context_json').nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(ERROR_LOG_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(ERROR_LOG_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+function normalizePayload(payload: ErrorLogPayload) {
+  const parsedPayload = createErrorLogSchema.parse(payload);
+  const sourceLabel =
+    parsedPayload.sourceLabel ??
+    (parsedPayload.source === 'client'
+      ? '프론트엔드'
+      : parsedPayload.source === 'automation'
+        ? 'Plan 자동화'
+        : '워크서버 API');
+
+  return {
+    source: parsedPayload.source,
+    source_label: sourceLabel,
+    error_type: parsedPayload.errorType,
+    error_name: parsedPayload.errorName ?? null,
+    error_message: parsedPayload.errorMessage,
+    detail: parsedPayload.detail ?? null,
+    stack_trace: parsedPayload.stackTrace ?? null,
+    status_code: parsedPayload.statusCode ?? null,
+    request_method: parsedPayload.requestMethod ?? null,
+    request_path: parsedPayload.requestPath ?? null,
+    related_plan_id: parsedPayload.relatedPlanId ?? null,
+    related_work_id: parsedPayload.relatedWorkId ?? null,
+    context_json: parsedPayload.context ?? null,
+  };
+}
+
+function mapErrorLogRow(row: Record<string, unknown>) {
+  return {
+    id: Number(row.id),
+    source: String(row.source ?? 'server'),
+    sourceLabel: row.source_label ? String(row.source_label) : null,
+    errorType: String(row.error_type ?? ''),
+    errorName: row.error_name ? String(row.error_name) : null,
+    errorMessage: String(row.error_message ?? ''),
+    detail: row.detail ? String(row.detail) : null,
+    stackTrace: row.stack_trace ? String(row.stack_trace) : null,
+    statusCode: typeof row.status_code === 'number' ? row.status_code : row.status_code ? Number(row.status_code) : null,
+    requestMethod: row.request_method ? String(row.request_method) : null,
+    requestPath: row.request_path ? String(row.request_path) : null,
+    relatedPlanId:
+      typeof row.related_plan_id === 'number'
+        ? row.related_plan_id
+        : row.related_plan_id
+          ? Number(row.related_plan_id)
+          : null,
+    relatedWorkId: row.related_work_id ? String(row.related_work_id) : null,
+    context: row.context_json && typeof row.context_json === 'object' ? (row.context_json as Record<string, unknown>) : null,
+    createdAt: row.created_at,
+  };
+}
+
+export async function setupErrorLogTable() {
+  await ensureErrorLogTable();
+
+  return {
+    ok: true,
+    table: ERROR_LOG_TABLE,
+  };
+}
+
+export async function createErrorLog(payload: ErrorLogPayload) {
+  await ensureErrorLogTable();
+
+  const [row] = await db(ERROR_LOG_TABLE)
+    .insert({
+      ...normalizePayload(payload),
+      created_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return mapErrorLogRow(row);
+}
+
+export async function listErrorLogs(limit = 50) {
+  await ensureErrorLogTable();
+
+  const safeLimit = Number.isFinite(limit) ? Math.min(Math.max(Math.trunc(limit), 1), 200) : 50;
+  const rows = await db(ERROR_LOG_TABLE).select('*').orderBy('created_at', 'desc').limit(safeLimit);
+
+  return rows.map((row) => mapErrorLogRow(row));
+}
+
+export function hasErrorLogViewAccessToken(token: string | string[] | undefined) {
+  const normalizedToken = Array.isArray(token) ? token[0] : token;
+  return String(normalizedToken ?? '').trim() === ERROR_LOG_VIEW_TOKEN;
+}
diff --git a/etc/servers/work-server/src/services/git-service.test.ts b/etc/servers/work-server/src/services/git-service.test.ts
new file mode 100755
index 0000000..66d40f1
--- /dev/null
+++ b/etc/servers/work-server/src/services/git-service.test.ts
@@ -0,0 +1,150 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+import {
+  ensureBranchExists,
+  mergeBranchToRelease,
+  mergeReleaseToMain,
+  type GitAutomationConfig,
+} from './git-service.js';
+
+const execFileAsync = promisify(execFile);
+
+async function runGit(repoPath: string, args: string[]) {
+  const { stdout } = await execFileAsync('git', ['-c', `safe.directory=${repoPath}`, '-C', repoPath, ...args], {
+    encoding: 'utf8',
+    env: {
+      ...process.env,
+      GIT_AUTHOR_NAME: 'test',
+      GIT_AUTHOR_EMAIL: 'test@example.com',
+      GIT_COMMITTER_NAME: 'test',
+      GIT_COMMITTER_EMAIL: 'test@example.com',
+    },
+  });
+
+  return stdout.trim();
+}
+
+async function createRepo() {
+  const rootPath = await mkdtemp(path.join(tmpdir(), 'git-service-test-'));
+  const remotePath = path.join(rootPath, 'remote.git');
+  const repoPath = path.join(rootPath, 'work');
+  const config: GitAutomationConfig = {
+    repoPath,
+    mainBranch: 'main',
+    releaseBranch: 'release',
+  };
+
+  await execFileAsync('git', ['init', '--bare', '--initial-branch=main', remotePath], {
+    encoding: 'utf8',
+  });
+  await execFileAsync('git', ['clone', remotePath, repoPath], {
+    encoding: 'utf8',
+    env: {
+      ...process.env,
+      GIT_TERMINAL_PROMPT: '0',
+    },
+  });
+
+  await runGit(repoPath, ['config', 'user.name', 'test']);
+  await runGit(repoPath, ['config', 'user.email', 'test@example.com']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'main root']);
+  await runGit(repoPath, ['push', '-u', 'origin', 'main']);
+
+  await runGit(repoPath, ['switch', '-c', 'release']);
+  await runGit(repoPath, ['push', '-u', 'origin', 'release']);
+  await runGit(repoPath, ['switch', 'main']);
+
+  return { repoPath, config };
+}
+
+test('ensureBranchExists creates feature branch from main even when release diverged', async () => {
+  const { repoPath, config } = await createRepo();
+
+  await runGit(repoPath, ['switch', 'main']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'main base']);
+  await runGit(repoPath, ['push', 'origin', 'main']);
+  const mainHead = await runGit(repoPath, ['rev-parse', 'HEAD']);
+
+  await runGit(repoPath, ['switch', 'release']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'release only']);
+  await runGit(repoPath, ['push', 'origin', 'release']);
+  const releaseHead = await runGit(repoPath, ['rev-parse', 'HEAD']);
+
+  await ensureBranchExists(config, 'feature/test-branch', 'release');
+
+  const featureHead = await runGit(repoPath, ['rev-parse', 'feature/test-branch']);
+
+  assert.equal(featureHead, mainHead);
+  assert.notEqual(featureHead, releaseHead, 'feature branch should point to main head, not release head');
+});
+
+test('ensureBranchExists recreates missing local main from origin/main', async () => {
+  const { repoPath, config } = await createRepo();
+
+  await runGit(repoPath, ['switch', 'main']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'main base']);
+  await runGit(repoPath, ['push', 'origin', 'main']);
+  const mainHead = await runGit(repoPath, ['rev-parse', 'main']);
+
+  await runGit(repoPath, ['branch', '-D', 'main']);
+
+  await ensureBranchExists(config, 'feature/recreated-from-origin-main');
+
+  const recreatedMainHead = await runGit(repoPath, ['rev-parse', 'main']);
+  const featureHead = await runGit(repoPath, ['rev-parse', 'feature/recreated-from-origin-main']);
+
+  assert.equal(recreatedMainHead, mainHead);
+  assert.equal(featureHead, mainHead);
+});
+
+test('mergeBranchToRelease squashes hotfix changes into release', async () => {
+  const { repoPath, config } = await createRepo();
+
+  await runGit(repoPath, ['switch', 'main']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'main base']);
+  await runGit(repoPath, ['push', 'origin', 'main']);
+
+  await runGit(repoPath, ['switch', 'release']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'release base']);
+  await runGit(repoPath, ['push', 'origin', 'release']);
+
+  await runGit(repoPath, ['switch', '-c', 'hotfix/test']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'hotfix change']);
+  await runGit(repoPath, ['push', '-u', 'origin', 'hotfix/test']);
+  const hotfixHead = await runGit(repoPath, ['rev-parse', 'HEAD']);
+
+  await mergeBranchToRelease(config, 'hotfix/test', 'release');
+
+  const releaseMessage = await runGit(repoPath, ['log', '-1', '--pretty=%s', 'release']);
+  const parentCount = await runGit(repoPath, ['rev-list', '--parents', '-n', '1', 'release']);
+  const releaseHistory = await runGit(repoPath, ['rev-list', 'release']);
+
+  assert.equal(releaseMessage, 'merge: hotfix/test -> release (squash)');
+  assert.equal(parentCount.split(' ').length, 2);
+  assert.ok(!releaseHistory.split('\n').includes(hotfixHead));
+});
+
+test('mergeReleaseToMain keeps release to main as a normal merge commit', async () => {
+  const { repoPath, config } = await createRepo();
+
+  await runGit(repoPath, ['switch', 'main']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'main base']);
+  await runGit(repoPath, ['push', 'origin', 'main']);
+
+  await runGit(repoPath, ['switch', 'release']);
+  await runGit(repoPath, ['commit', '--allow-empty', '-m', 'release change']);
+  await runGit(repoPath, ['push', 'origin', 'release']);
+
+  await mergeReleaseToMain(config, 'release');
+
+  const mainMessage = await runGit(repoPath, ['log', '-1', '--pretty=%s', 'main']);
+  const parentCount = await runGit(repoPath, ['rev-list', '--parents', '-n', '1', 'main']);
+
+  assert.equal(mainMessage, 'merge: release -> main');
+  assert.equal(parentCount.split(' ').length, 3);
+});
diff --git a/etc/servers/work-server/src/services/git-service.ts b/etc/servers/work-server/src/services/git-service.ts
new file mode 100755
index 0000000..ac5b097
--- /dev/null
+++ b/etc/servers/work-server/src/services/git-service.ts
@@ -0,0 +1,267 @@
+import { execFile } from 'node:child_process';
+import { access, copyFile } from 'node:fs/promises';
+import { constants as fsConstants } from 'node:fs';
+import { promisify } from 'node:util';
+import { getEnv } from '../config/env.js';
+
+const execFileAsync = promisify(execFile);
+const gitCredentialSourcePath = '/root/.git-credentials';
+const gitCredentialCachePath = '/tmp/work-server-git-credentials';
+
+async function prepareWritableCredentialStore() {
+  try {
+    await access(gitCredentialSourcePath, fsConstants.R_OK);
+    await copyFile(gitCredentialSourcePath, gitCredentialCachePath);
+    return gitCredentialCachePath;
+  } catch {
+    return null;
+  }
+}
+
+export type GitAutomationConfig = {
+  repoPath: string;
+  releaseBranch: string;
+  mainBranch: string;
+};
+
+async function runGit(repoPath: string, args: string[]) {
+  const credentialStorePath = await prepareWritableCredentialStore();
+  const gitArgs = ['-c', `safe.directory=${repoPath}`];
+  const env = getEnv();
+
+  if (credentialStorePath) {
+    gitArgs.push('-c', `credential.helper=store --file=${credentialStorePath}`);
+  }
+
+  await execFileAsync('git', ['-c', `safe.directory=${repoPath}`, '-C', repoPath, 'config', 'user.name', env.PLAN_GIT_USER_NAME], {
+    encoding: 'utf8',
+  });
+  await execFileAsync('git', ['-c', `safe.directory=${repoPath}`, '-C', repoPath, 'config', 'user.email', env.PLAN_GIT_USER_EMAIL], {
+    encoding: 'utf8',
+  });
+
+  const { stdout, stderr } = await execFileAsync('git', [...gitArgs, '-C', repoPath, ...args], {
+    encoding: 'utf8',
+  });
+
+  return {
+    stdout: stdout.trim(),
+    stderr: stderr.trim(),
+  };
+}
+
+async function assertBranchExists(repoPath: string, branchName: string) {
+  try {
+    await runGit(repoPath, ['rev-parse', '--verify', branchName]);
+  } catch {
+    throw new Error(
+      `${branchName} 브랜치를 찾을 수 없습니다. 먼저 ${branchName} 브랜치를 생성한 뒤 다시 시도해 주세요.`,
+    );
+  }
+}
+
+async function hasLocalBranch(repoPath: string, branchName: string) {
+  try {
+    await runGit(repoPath, ['rev-parse', '--verify', '--quiet', branchName]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function hasRemoteBranch(repoPath: string, branchName: string) {
+  try {
+    await runGit(repoPath, ['rev-parse', '--verify', '--quiet', `refs/remotes/origin/${branchName}`]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function syncBranchWithRemote(repoPath: string, branchName: string) {
+  await runGit(repoPath, ['fetch', 'origin', branchName]);
+
+  if (!(await hasRemoteBranch(repoPath, branchName))) {
+    return;
+  }
+
+  if (!(await hasLocalBranch(repoPath, branchName))) {
+    await runGit(repoPath, ['branch', branchName, `origin/${branchName}`]);
+  }
+
+  try {
+    await runGit(repoPath, ['switch', branchName]);
+  } catch {
+    await runGit(repoPath, ['switch', '-C', branchName, `origin/${branchName}`]);
+  }
+
+  await runGit(repoPath, ['reset', '--hard', `origin/${branchName}`]);
+}
+
+export async function assertCleanWorktree(repoPath: string) {
+  const { stdout } = await runGit(repoPath, ['status', '--porcelain']);
+
+  if (stdout) {
+    throw new Error('Git 작업 디렉터리가 깨끗하지 않습니다. 변경 사항을 정리한 뒤 다시 시도해 주세요.');
+  }
+}
+
+export async function cleanAutomationWorktree(repoPath: string) {
+  await runGit(repoPath, ['reset', '--hard']);
+  await runGit(repoPath, ['clean', '-fd']);
+}
+
+export async function ensureBranchExists(config: GitAutomationConfig, branchName: string, releaseTarget?: string) {
+  const baseBranch = config.mainBranch;
+
+  await assertCleanWorktree(config.repoPath);
+  await syncBranchWithRemote(config.repoPath, baseBranch);
+  await assertBranchExists(config.repoPath, baseBranch);
+  await runGit(config.repoPath, ['switch', baseBranch]);
+  await runGit(config.repoPath, ['switch', '-C', branchName]);
+}
+
+export async function pushBranch(repoPath: string, branchName: string, setUpstream = false) {
+  await runGit(repoPath, setUpstream ? ['push', '-u', 'origin', branchName] : ['push', 'origin', branchName]);
+}
+
+async function deleteLocalBranch(repoPath: string, branchName: string) {
+  try {
+    await runGit(repoPath, ['branch', '-D', branchName]);
+  } catch {
+    return;
+  }
+}
+
+async function deleteRemoteBranch(repoPath: string, branchName: string) {
+  try {
+    await runGit(repoPath, ['push', 'origin', '--delete', branchName]);
+  } catch {
+    return;
+  }
+}
+
+export async function commitAllChanges(repoPath: string, message: string) {
+  await runGit(repoPath, ['add', '-A']);
+  await runGit(repoPath, ['commit', '-m', message]);
+}
+
+export async function hasWorkingTreeChanges(repoPath: string) {
+  const { stdout } = await runGit(repoPath, ['status', '--porcelain']);
+  return Boolean(stdout);
+}
+
+function isHotfixBranch(branchName: string) {
+  return /^hotfix\//.test(branchName);
+}
+
+function isReleaseBranch(branchName: string, config: GitAutomationConfig) {
+  return branchName === config.releaseBranch || /^release([/-]|$)/.test(branchName);
+}
+
+function shouldSquashMerge(sourceBranch: string, targetBranch: string, config: GitAutomationConfig) {
+  return isHotfixBranch(sourceBranch) && (
+    targetBranch === config.mainBranch || isReleaseBranch(targetBranch, config)
+  );
+}
+
+function assertAllowedMergeDirection(
+  config: GitAutomationConfig,
+  sourceBranch: string,
+  targetBranch: string,
+) {
+  if (
+    targetBranch === config.mainBranch &&
+    sourceBranch !== config.releaseBranch &&
+    sourceBranch !== config.mainBranch &&
+    !isHotfixBranch(sourceBranch)
+  ) {
+    throw new Error(
+      `브랜치 전략 위반: ${sourceBranch} -> ${targetBranch} 직접 머지는 허용되지 않습니다. release 반영 후 main에 반영해 주세요.`,
+    );
+  }
+}
+
+export async function mergeBranch(
+  config: GitAutomationConfig,
+  sourceBranch: string,
+  targetBranch: string,
+) {
+  assertAllowedMergeDirection(config, sourceBranch, targetBranch);
+  await assertCleanWorktree(config.repoPath);
+  await syncBranchWithRemote(config.repoPath, targetBranch);
+  await assertBranchExists(config.repoPath, targetBranch);
+  await assertBranchExists(config.repoPath, sourceBranch);
+
+  if (sourceBranch === config.releaseBranch || sourceBranch === config.mainBranch) {
+    await syncBranchWithRemote(config.repoPath, sourceBranch);
+  }
+
+  await runGit(config.repoPath, ['switch', targetBranch]);
+  if (shouldSquashMerge(sourceBranch, targetBranch, config)) {
+    await runGit(config.repoPath, ['merge', '--squash', sourceBranch]);
+    await runGit(config.repoPath, ['commit', '-m', `merge: ${sourceBranch} -> ${targetBranch} (squash)`]);
+    return;
+  }
+
+  await runGit(config.repoPath, ['merge', '--no-ff', sourceBranch, '-m', `merge: ${sourceBranch} -> ${targetBranch}`]);
+}
+
+export async function mergeBranchToRelease(
+  config: GitAutomationConfig,
+  branchName: string,
+  releaseTarget?: string,
+) {
+  const baseBranch = releaseTarget || config.releaseBranch;
+  await mergeBranch(config, branchName, baseBranch);
+}
+
+export async function mergeReleaseToMain(
+  config: GitAutomationConfig,
+  releaseTarget?: string,
+) {
+  const baseBranch = releaseTarget || config.releaseBranch;
+  await mergeBranch(config, baseBranch, config.mainBranch);
+}
+
+export async function mergeIssueBranchToMain(
+  config: GitAutomationConfig,
+  branchName: string,
+) {
+  throw new Error(
+    `브랜치 전략 위반: ${branchName} -> ${config.mainBranch} 직접 머지는 비활성화되었습니다. release 브랜치를 통해 반영해 주세요.`,
+  );
+}
+
+export async function pullMainProjectBranch(repoPath: string, branchName: string) {
+  await assertCleanWorktree(repoPath);
+  await runGit(repoPath, ['fetch', 'origin', branchName]);
+
+  try {
+    await runGit(repoPath, ['switch', branchName]);
+  } catch {
+    await runGit(repoPath, ['switch', '-C', branchName, `origin/${branchName}`]);
+  }
+
+  await runGit(repoPath, ['pull', '--ff-only', 'origin', branchName]);
+}
+
+export async function recreateReleaseBranchFromMain(
+  config: GitAutomationConfig,
+  releaseTarget?: string,
+) {
+  const targetBranch = releaseTarget || config.releaseBranch;
+
+  if (targetBranch === config.mainBranch) {
+    throw new Error('release 브랜치를 main 브랜치와 동일하게 재생성할 수 없습니다.');
+  }
+
+  await assertCleanWorktree(config.repoPath);
+  await syncBranchWithRemote(config.repoPath, config.mainBranch);
+  await assertBranchExists(config.repoPath, config.mainBranch);
+  await runGit(config.repoPath, ['switch', config.mainBranch]);
+  await deleteLocalBranch(config.repoPath, targetBranch);
+  await deleteRemoteBranch(config.repoPath, targetBranch);
+  await runGit(config.repoPath, ['switch', '-C', targetBranch, config.mainBranch]);
+  await pushBranch(config.repoPath, targetBranch, true);
+}
diff --git a/etc/servers/work-server/src/services/notification-message-service.ts b/etc/servers/work-server/src/services/notification-message-service.ts
new file mode 100755
index 0000000..17ad497
--- /dev/null
+++ b/etc/servers/work-server/src/services/notification-message-service.ts
@@ -0,0 +1,244 @@
+import { z } from 'zod';
+import { db } from '../db/client.js';
+
+export const NOTIFICATION_MESSAGE_TABLE = 'notification_messages';
+
+const notificationMessagePrioritySchema = z.enum(['low', 'normal', 'high', 'urgent']);
+const notificationMessageListStatusSchema = z.enum(['all', 'unread']);
+
+export const notificationMessageListQuerySchema = z.object({
+  status: notificationMessageListStatusSchema.default('all'),
+  limit: z.coerce.number().int().min(1).max(100).default(20),
+});
+
+export const notificationMessagePayloadSchema = z.object({
+  title: z.string().trim().min(1).max(200),
+  body: z.string().trim().min(1).max(20000),
+  category: z.string().trim().min(1).max(60).default('general'),
+  source: z.string().trim().min(1).max(80).default('system'),
+  priority: notificationMessagePrioritySchema.default('normal'),
+  metadata: z.record(z.string(), z.unknown()).default({}),
+});
+
+export const notificationMessageReadPayloadSchema = z.object({
+  read: z.boolean().default(true),
+});
+
+export type NotificationMessageItem = {
+  id: number;
+  title: string;
+  body: string;
+  preview: string;
+  category: string;
+  source: string;
+  priority: z.infer<typeof notificationMessagePrioritySchema>;
+  read: boolean;
+  readAt: string | null;
+  metadata: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+};
+
+function normalizePreviewText(value: string) {
+  const normalized = value
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/!\[[^\]]*\]\([^)]+\)/g, ' ')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1')
+    .replace(/[#>*_`~-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function mapNotificationMessageRow(row: Record<string, unknown>): NotificationMessageItem {
+  const body = String(row.body ?? '');
+  const metadata =
+    typeof row.metadata_json === 'object' && row.metadata_json ? (row.metadata_json as Record<string, unknown>) : {};
+  const metadataPreview =
+    typeof metadata.previewText === 'string'
+      ? metadata.previewText
+      : typeof metadata.listPreviewText === 'string'
+        ? metadata.listPreviewText
+        : '';
+
+  return {
+    id: Number(row.id ?? 0),
+    title: String(row.title ?? ''),
+    body,
+    preview: normalizePreviewText(metadataPreview || body),
+    category: String(row.category ?? 'general'),
+    source: String(row.source ?? 'system'),
+    priority: notificationMessagePrioritySchema.catch('normal').parse(row.priority),
+    read: Boolean(row.is_read),
+    readAt: row.read_at === null || row.read_at === undefined ? null : String(row.read_at),
+    metadata,
+    createdAt: String(row.created_at ?? ''),
+    updatedAt: String(row.updated_at ?? ''),
+  };
+}
+
+function resolveInsertedId(result: unknown): number | null {
+  if (typeof result === 'number' && Number.isInteger(result) && result > 0) {
+    return result;
+  }
+
+  if (Array.isArray(result)) {
+    const first = result[0];
+
+    if (typeof first === 'number' && Number.isInteger(first) && first > 0) {
+      return first;
+    }
+
+    if (first && typeof first === 'object' && 'id' in first) {
+      const id = Number((first as { id?: unknown }).id);
+      return Number.isInteger(id) && id > 0 ? id : null;
+    }
+  }
+
+  if (result && typeof result === 'object' && 'id' in result) {
+    const id = Number((result as { id?: unknown }).id);
+    return Number.isInteger(id) && id > 0 ? id : null;
+  }
+
+  return null;
+}
+
+function supportsReturning() {
+  const clientName = String(db.client.config.client ?? '').toLowerCase();
+  return ['pg', 'postgres', 'postgresql', 'sqlite3', 'better-sqlite3', 'oracledb', 'mssql'].includes(clientName);
+}
+
+export async function ensureNotificationMessagesTable() {
+  const hasTable = await db.schema.hasTable(NOTIFICATION_MESSAGE_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(NOTIFICATION_MESSAGE_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('title', 200).notNullable();
+      table.text('body').notNullable();
+      table.string('category', 60).notNullable().defaultTo('general');
+      table.string('source', 80).notNullable().defaultTo('system');
+      table.string('priority', 20).notNullable().defaultTo('normal');
+      table.boolean('is_read').notNullable().defaultTo(false);
+      table.timestamp('read_at', { useTz: true }).nullable();
+      table.jsonb('metadata_json').notNullable().defaultTo('{}');
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['title', (table) => table.string('title', 200).notNullable().defaultTo('알림')],
+    ['body', (table) => table.text('body').notNullable().defaultTo('')],
+    ['category', (table) => table.string('category', 60).notNullable().defaultTo('general')],
+    ['source', (table) => table.string('source', 80).notNullable().defaultTo('system')],
+    ['priority', (table) => table.string('priority', 20).notNullable().defaultTo('normal')],
+    ['is_read', (table) => table.boolean('is_read').notNullable().defaultTo(false)],
+    ['read_at', (table) => table.timestamp('read_at', { useTz: true }).nullable()],
+    ['metadata_json', (table) => table.jsonb('metadata_json').notNullable().defaultTo('{}')],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(NOTIFICATION_MESSAGE_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(NOTIFICATION_MESSAGE_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function listNotificationMessages(query: z.infer<typeof notificationMessageListQuerySchema>) {
+  await ensureNotificationMessagesTable();
+  const parsedQuery = notificationMessageListQuerySchema.parse(query);
+  const builder = db(NOTIFICATION_MESSAGE_TABLE)
+    .select('*')
+    .orderBy('is_read', 'asc')
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc')
+    .limit(parsedQuery.limit);
+
+  if (parsedQuery.status === 'unread') {
+    builder.where({ is_read: false });
+  }
+
+  const rows = await builder;
+  const unreadCountResult = await db(NOTIFICATION_MESSAGE_TABLE)
+    .where({ is_read: false })
+    .count<{ count: string | number }>({ count: '*' })
+    .first();
+
+  return {
+    items: rows.map((row) => mapNotificationMessageRow(row)),
+    unreadCount: Number(unreadCountResult?.count ?? 0),
+  };
+}
+
+export async function getNotificationMessage(id: number) {
+  await ensureNotificationMessagesTable();
+  const row = await db(NOTIFICATION_MESSAGE_TABLE).where({ id }).first();
+  return row ? mapNotificationMessageRow(row) : null;
+}
+
+export async function createNotificationMessage(payload: z.infer<typeof notificationMessagePayloadSchema>) {
+  await ensureNotificationMessagesTable();
+  const parsedPayload = notificationMessagePayloadSchema.parse(payload);
+  const insertQuery = db(NOTIFICATION_MESSAGE_TABLE).insert({
+    title: parsedPayload.title,
+    body: parsedPayload.body,
+    category: parsedPayload.category,
+    source: parsedPayload.source,
+    priority: parsedPayload.priority,
+    metadata_json: parsedPayload.metadata,
+    is_read: false,
+    read_at: null,
+    created_at: db.fn.now(),
+    updated_at: db.fn.now(),
+  });
+  const insertResult = supportsReturning() ? await insertQuery.returning('id') : await insertQuery;
+  const insertedId = resolveInsertedId(insertResult);
+
+  if (!insertedId) {
+    throw new Error('알림 메시지 저장 후 ID를 확인하지 못했습니다.');
+  }
+
+  const row = await db(NOTIFICATION_MESSAGE_TABLE).where({ id: insertedId }).first();
+
+  if (!row) {
+    throw new Error('저장된 알림 메시지를 다시 불러오지 못했습니다.');
+  }
+
+  return mapNotificationMessageRow(row);
+}
+
+export async function updateNotificationMessageReadState(
+  id: number,
+  payload: z.infer<typeof notificationMessageReadPayloadSchema>,
+) {
+  await ensureNotificationMessagesTable();
+  const parsedPayload = notificationMessageReadPayloadSchema.parse(payload);
+  const updatedCount = await db(NOTIFICATION_MESSAGE_TABLE)
+    .where({ id })
+    .update({
+      is_read: parsedPayload.read,
+      read_at: parsedPayload.read ? db.fn.now() : null,
+      updated_at: db.fn.now(),
+    });
+
+  if (!updatedCount) {
+    return null;
+  }
+
+  const row = await db(NOTIFICATION_MESSAGE_TABLE).where({ id }).first();
+  return row ? mapNotificationMessageRow(row) : null;
+}
+
+export async function deleteNotificationMessage(id: number) {
+  await ensureNotificationMessagesTable();
+  const deletedCount = await db(NOTIFICATION_MESSAGE_TABLE).where({ id }).del();
+  return deletedCount > 0;
+}
diff --git a/etc/servers/work-server/src/services/notification-service.ts b/etc/servers/work-server/src/services/notification-service.ts
new file mode 100755
index 0000000..6d074a0
--- /dev/null
+++ b/etc/servers/work-server/src/services/notification-service.ts
@@ -0,0 +1,900 @@
+import { readFile } from 'node:fs/promises';
+import { Notification, Provider } from '@parse/node-apn';
+import webpush from 'web-push';
+import { z } from 'zod';
+import { getEnv } from '../config/env.js';
+import { db } from '../db/client.js';
+import { ensureNotificationMessagesTable } from './notification-message-service.js';
+
+export const NOTIFICATION_TOKEN_TABLE = 'notification_tokens';
+export const WEB_PUSH_SUBSCRIPTION_TABLE = 'web_push_subscriptions';
+export const NOTIFICATION_PREFERENCE_TABLE = 'notification_preferences';
+
+const automationNotificationPreferenceSchema = z.object({
+  notifyOnAutomationStart: z.boolean().optional(),
+  notifyOnAutomationProgress: z.boolean().optional(),
+  notifyOnAutomationCompletion: z.boolean().optional(),
+  notifyOnAutomationRelease: z.boolean().optional(),
+  notifyOnAutomationMain: z.boolean().optional(),
+  notifyOnAutomationFailure: z.boolean().optional(),
+  notifyOnAutomationRestart: z.boolean().optional(),
+  notifyOnAutomationIssueResolved: z.boolean().optional(),
+});
+
+const notificationTargetKindSchema = z.enum(['client', 'ios-token', 'ios-token-client', 'web-endpoint']);
+
+export const registerAutomationNotificationPreferenceSchema = z.object({
+  targetKind: notificationTargetKindSchema.default('client'),
+  targetId: z.string().trim().min(1).max(1000).optional(),
+  automation: automationNotificationPreferenceSchema,
+});
+
+export const registerIosTokenSchema = z.object({
+  token: z.string().trim().min(1),
+  deviceId: z.string().trim().min(1).max(200).optional(),
+  enabled: z.boolean().default(true),
+});
+
+export const unregisterIosTokenSchema = z.object({
+  token: z.string().trim().min(1),
+});
+
+export const registerWebPushSubscriptionSchema = z.object({
+  subscription: z.object({
+    endpoint: z.string().trim().url(),
+    expirationTime: z.number().nullable().optional(),
+    keys: z.object({
+      p256dh: z.string().trim().min(1),
+      auth: z.string().trim().min(1),
+    }),
+  }),
+  deviceId: z.string().trim().min(1).max(200).optional(),
+  userAgent: z.string().trim().max(500).optional(),
+  enabled: z.boolean().default(true),
+});
+
+export const unregisterWebPushSubscriptionSchema = z.object({
+  endpoint: z.string().trim().url(),
+});
+
+export const sendIosNotificationSchema = z.object({
+  title: z.string().trim().min(1),
+  body: z.string().trim().min(1),
+  data: z.record(z.string(), z.string()).default({}),
+  threadId: z.string().trim().min(1).optional(),
+});
+
+type IosNotificationPayload = z.infer<typeof sendIosNotificationSchema>;
+type WebPushSubscriptionPayload = z.infer<typeof registerWebPushSubscriptionSchema>['subscription'];
+type AutomationNotificationPreference = z.infer<typeof automationNotificationPreferenceSchema>;
+type NotificationTargetKind = z.infer<typeof notificationTargetKindSchema>;
+type NotificationPreferenceTarget = {
+  kind: NotificationTargetKind;
+  id: string;
+};
+
+type WebPushFailureDetail = {
+  endpoint: string;
+  statusCode?: number;
+  detail?: string;
+  code?: string;
+  attemptCount: number;
+};
+
+function buildScopedPwaNotificationTargetId(token: string, clientId: string) {
+  return [token.trim(), clientId.trim()].filter(Boolean).join('::client::');
+}
+
+let providerPromise: Promise<Provider | null> | null = null;
+let providerSignature: string | null = null;
+
+function normalizePrivateKey(privateKey: string) {
+  return privateKey.replace(/\\n/g, '\n');
+}
+
+async function loadPrivateKey(env: ReturnType<typeof getEnv>) {
+  if (env.APNS_PRIVATE_KEY?.trim()) {
+    return normalizePrivateKey(env.APNS_PRIVATE_KEY.trim());
+  }
+
+  if (env.APNS_PRIVATE_KEY_PATH?.trim()) {
+    const file = await readFile(env.APNS_PRIVATE_KEY_PATH.trim(), 'utf8');
+    return file.trim();
+  }
+
+  return null;
+}
+
+function hasWebPushConfig(env: ReturnType<typeof getEnv>) {
+  return Boolean(
+    env.WEB_PUSH_ENABLED &&
+      env.WEB_PUSH_VAPID_PUBLIC_KEY?.trim() &&
+      env.WEB_PUSH_VAPID_PRIVATE_KEY?.trim() &&
+      env.WEB_PUSH_SUBJECT?.trim(),
+  );
+}
+
+function ensureWebPushConfigured(env: ReturnType<typeof getEnv>) {
+  if (!hasWebPushConfig(env)) {
+    return false;
+  }
+
+  webpush.setVapidDetails(
+    env.WEB_PUSH_SUBJECT,
+    env.WEB_PUSH_VAPID_PUBLIC_KEY!.trim(),
+    env.WEB_PUSH_VAPID_PRIVATE_KEY!.trim(),
+  );
+
+  return true;
+}
+
+function normalizeNotificationDetailText(text?: string | null) {
+  const normalized = String(text ?? '').trim();
+  return normalized || undefined;
+}
+
+function isChatNotificationPayload(payload: IosNotificationPayload) {
+  const category = String(payload.data?.category ?? '').trim().toLowerCase();
+  const threadId = String(payload.threadId ?? '').trim().toLowerCase();
+  return category === 'chat' || threadId.startsWith('chat:');
+}
+
+function isRetryableWebPushError(error: any) {
+  const statusCode = Number(error?.statusCode ?? 0);
+
+  if ([408, 425, 429, 500, 502, 503, 504].includes(statusCode)) {
+    return true;
+  }
+
+  const code = String(error?.code ?? '').trim().toUpperCase();
+  return ['ECONNRESET', 'ETIMEDOUT', 'ECONNREFUSED', 'EAI_AGAIN', 'UND_ERR_CONNECT_TIMEOUT'].includes(code);
+}
+
+async function waitForRetry(delayMs: number) {
+  await new Promise((resolve) => setTimeout(resolve, delayMs));
+}
+
+async function sendWebPushWithRetry(subscription: WebPushSubscriptionPayload, payloadText: string) {
+  let lastError: unknown;
+
+  for (let attempt = 1; attempt <= 2; attempt += 1) {
+    try {
+      await webpush.sendNotification(subscription, payloadText);
+      return { attemptCount: attempt };
+    } catch (error) {
+      lastError = error;
+
+      if (attempt >= 2 || !isRetryableWebPushError(error)) {
+        throw {
+          error,
+          attemptCount: attempt,
+        };
+      }
+
+      await waitForRetry(250 * attempt);
+    }
+  }
+
+  throw {
+    error: lastError,
+    attemptCount: 2,
+  };
+}
+
+function buildProviderSignature(env: ReturnType<typeof getEnv>) {
+  return [
+    env.IOS_NOTIFICATION_ENABLED,
+    env.APNS_KEY_ID,
+    env.APNS_TEAM_ID,
+    env.APNS_BUNDLE_ID,
+    env.APNS_PRIVATE_KEY,
+    env.APNS_PRIVATE_KEY_PATH,
+    env.APNS_PRODUCTION,
+  ].join('|');
+}
+
+async function createProvider(env: ReturnType<typeof getEnv>) {
+  if (
+    !env.IOS_NOTIFICATION_ENABLED ||
+    !env.APNS_KEY_ID ||
+    !env.APNS_TEAM_ID ||
+    !env.APNS_BUNDLE_ID
+  ) {
+    return null;
+  }
+
+  const privateKey = await loadPrivateKey(env);
+
+  if (!privateKey) {
+    return null;
+  }
+
+  return new Provider({
+    token: {
+      key: privateKey,
+      keyId: env.APNS_KEY_ID,
+      teamId: env.APNS_TEAM_ID,
+    },
+    production: env.APNS_PRODUCTION,
+  });
+}
+
+async function getProvider() {
+  const env = getEnv();
+  const signature = buildProviderSignature(env);
+
+  if (signature !== providerSignature) {
+    providerSignature = signature;
+    providerPromise = null;
+  }
+
+  if (!providerPromise) {
+    providerPromise = createProvider(env);
+  }
+
+  return providerPromise;
+}
+
+async function ensureNotificationTokenTable() {
+  const hasTable = await db.schema.hasTable(NOTIFICATION_TOKEN_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(NOTIFICATION_TOKEN_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('platform', 20).notNullable().defaultTo('ios');
+      table.string('device_token', 255).notNullable().unique();
+      table.string('device_id', 200).nullable();
+      table.boolean('is_enabled').notNullable().defaultTo(true);
+      table.timestamp('last_registered_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['platform', (table) => table.string('platform', 20).notNullable().defaultTo('ios')],
+    ['device_token', (table) => table.string('device_token', 255).notNullable()],
+    ['device_id', (table) => table.string('device_id', 200).nullable()],
+    ['is_enabled', (table) => table.boolean('is_enabled').notNullable().defaultTo(true)],
+    [
+      'last_registered_at',
+      (table) => table.timestamp('last_registered_at', { useTz: true }).notNullable().defaultTo(db.fn.now()),
+    ],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(NOTIFICATION_TOKEN_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(NOTIFICATION_TOKEN_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+async function ensureWebPushSubscriptionTable() {
+  const hasTable = await db.schema.hasTable(WEB_PUSH_SUBSCRIPTION_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(WEB_PUSH_SUBSCRIPTION_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('endpoint', 1000).notNullable().unique();
+      table.jsonb('subscription_json').notNullable();
+      table.string('device_id', 200).nullable();
+      table.text('user_agent').nullable();
+      table.boolean('is_enabled').notNullable().defaultTo(true);
+      table.timestamp('last_registered_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['endpoint', (table) => table.string('endpoint', 1000).notNullable()],
+    ['subscription_json', (table) => table.jsonb('subscription_json').notNullable().defaultTo('{}')],
+    ['device_id', (table) => table.string('device_id', 200).nullable()],
+    ['user_agent', (table) => table.text('user_agent').nullable()],
+    ['is_enabled', (table) => table.boolean('is_enabled').notNullable().defaultTo(true)],
+    [
+      'last_registered_at',
+      (table) => table.timestamp('last_registered_at', { useTz: true }).notNullable().defaultTo(db.fn.now()),
+    ],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(WEB_PUSH_SUBSCRIPTION_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(WEB_PUSH_SUBSCRIPTION_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+async function ensureNotificationPreferenceTable() {
+  const hasTable = await db.schema.hasTable(NOTIFICATION_PREFERENCE_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(NOTIFICATION_PREFERENCE_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('target_kind', 40).notNullable();
+      table.string('target_id', 1000).notNullable();
+      table.jsonb('config_json').notNullable().defaultTo('{}');
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.unique(['target_kind', 'target_id']);
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['target_kind', (table) => table.string('target_kind', 40).notNullable().defaultTo('client')],
+    ['target_id', (table) => table.string('target_id', 1000).notNullable().defaultTo('')],
+    ['config_json', (table) => table.jsonb('config_json').notNullable().defaultTo('{}')],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(NOTIFICATION_PREFERENCE_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(NOTIFICATION_PREFERENCE_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function setupNotificationTables() {
+  await ensureNotificationTokenTable();
+  await ensureWebPushSubscriptionTable();
+  await ensureNotificationPreferenceTable();
+  await ensureNotificationMessagesTable();
+
+  return {
+    ok: true,
+    tables: [NOTIFICATION_TOKEN_TABLE, WEB_PUSH_SUBSCRIPTION_TABLE, NOTIFICATION_PREFERENCE_TABLE, 'notification_messages'],
+  };
+}
+
+export function getWebPushConfig() {
+  const env = getEnv();
+  return {
+    enabled: hasWebPushConfig(env),
+    publicKey: hasWebPushConfig(env) ? env.WEB_PUSH_VAPID_PUBLIC_KEY!.trim() : '',
+  };
+}
+
+export async function listIosNotificationTokens() {
+  await ensureNotificationTokenTable();
+
+  const rows = await db(NOTIFICATION_TOKEN_TABLE)
+    .where({ platform: 'ios' })
+    .orderBy('updated_at', 'desc');
+
+  return rows.map((row) => ({
+    id: row.id,
+    platform: row.platform,
+    token: row.device_token,
+    deviceId: row.device_id,
+    enabled: row.is_enabled,
+    lastRegisteredAt: row.last_registered_at,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  }));
+}
+
+export async function registerIosNotificationToken(payload: z.infer<typeof registerIosTokenSchema>) {
+  await ensureNotificationTokenTable();
+
+  if (!payload.enabled) {
+    await unregisterIosNotificationToken(payload.token);
+
+    return {
+      ok: true,
+      removed: true,
+      token: payload.token,
+    };
+  }
+
+  await db(NOTIFICATION_TOKEN_TABLE)
+    .insert({
+      platform: 'ios',
+      device_token: payload.token,
+      device_id: payload.deviceId ?? null,
+      is_enabled: true,
+      last_registered_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .onConflict('device_token')
+    .merge({
+      platform: 'ios',
+      device_id: payload.deviceId ?? null,
+      is_enabled: true,
+      last_registered_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    });
+
+  return {
+    ok: true,
+    token: payload.token,
+  };
+}
+
+function parseAutomationNotificationPreference(raw: unknown): AutomationNotificationPreference {
+  if (typeof raw === 'string') {
+    try {
+      return automationNotificationPreferenceSchema.parse(JSON.parse(raw));
+    } catch {
+      return {};
+    }
+  }
+
+  return automationNotificationPreferenceSchema.parse(raw ?? {});
+}
+
+export async function getAutomationNotificationPreference(
+  targetId: string,
+  targetKind: NotificationTargetKind = 'client',
+) {
+  const normalizedTargetId = targetId.trim();
+
+  if (!normalizedTargetId) {
+    return null;
+  }
+
+  await ensureNotificationPreferenceTable();
+
+  const row = await db(NOTIFICATION_PREFERENCE_TABLE)
+    .where({
+      target_kind: targetKind,
+      target_id: normalizedTargetId,
+    })
+    .first();
+
+  if (!row) {
+    return null;
+  }
+
+  return parseAutomationNotificationPreference(row.config_json);
+}
+
+export async function upsertAutomationNotificationPreference(
+  payload: z.infer<typeof registerAutomationNotificationPreferenceSchema> & { targetId: string },
+) {
+  const targetId = payload.targetId.trim();
+  await ensureNotificationPreferenceTable();
+
+  await db(NOTIFICATION_PREFERENCE_TABLE)
+    .insert({
+      target_kind: payload.targetKind,
+      target_id: targetId,
+      config_json: payload.automation,
+      updated_at: db.fn.now(),
+    })
+    .onConflict(['target_kind', 'target_id'])
+    .merge({
+      config_json: payload.automation,
+      updated_at: db.fn.now(),
+    });
+
+  return {
+    ok: true,
+    targetKind: payload.targetKind,
+    targetId,
+    automation: payload.automation,
+  };
+}
+
+export async function unregisterIosNotificationToken(token: string) {
+  await ensureNotificationTokenTable();
+
+  const deletedCount = await db(NOTIFICATION_TOKEN_TABLE)
+    .where({
+      platform: 'ios',
+      device_token: token,
+    })
+    .delete();
+
+  return {
+    ok: true,
+    removed: deletedCount > 0,
+    token,
+  };
+}
+
+export async function registerWebPushSubscription(
+  payload: z.infer<typeof registerWebPushSubscriptionSchema>,
+) {
+  await ensureWebPushSubscriptionTable();
+
+  if (!payload.enabled) {
+    await unregisterWebPushSubscription(payload.subscription.endpoint);
+
+    return {
+      ok: true,
+      removed: true,
+      endpoint: payload.subscription.endpoint,
+    };
+  }
+
+  await db(WEB_PUSH_SUBSCRIPTION_TABLE)
+    .insert({
+      endpoint: payload.subscription.endpoint,
+      subscription_json: payload.subscription,
+      device_id: payload.deviceId ?? null,
+      user_agent: payload.userAgent ?? null,
+      is_enabled: true,
+      last_registered_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .onConflict('endpoint')
+    .merge({
+      subscription_json: payload.subscription,
+      device_id: payload.deviceId ?? null,
+      user_agent: payload.userAgent ?? null,
+      is_enabled: true,
+      last_registered_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    });
+
+  if (payload.deviceId?.trim()) {
+    await db(WEB_PUSH_SUBSCRIPTION_TABLE)
+      .where({ device_id: payload.deviceId.trim() })
+      .whereNot({ endpoint: payload.subscription.endpoint })
+      .delete();
+  }
+
+  return {
+    ok: true,
+    endpoint: payload.subscription.endpoint,
+  };
+}
+
+export async function unregisterWebPushSubscription(endpoint: string) {
+  await ensureWebPushSubscriptionTable();
+
+  const deletedCount = await db(WEB_PUSH_SUBSCRIPTION_TABLE).where({ endpoint }).delete();
+
+  return {
+    ok: true,
+    removed: deletedCount > 0,
+    endpoint,
+  };
+}
+
+async function getEnabledIosTokens() {
+  await ensureNotificationTokenTable();
+
+  const rows = await db(NOTIFICATION_TOKEN_TABLE)
+    .where({
+      platform: 'ios',
+      is_enabled: true,
+    })
+    .select('device_token', 'device_id');
+
+  return rows.map((row) => ({
+    token: String(row.device_token),
+    deviceId: row.device_id ? String(row.device_id) : '',
+  }));
+}
+
+async function getEnabledWebPushSubscriptions() {
+  await ensureWebPushSubscriptionTable();
+
+  const rows = await db(WEB_PUSH_SUBSCRIPTION_TABLE)
+    .where({
+      is_enabled: true,
+    })
+    .select('endpoint', 'subscription_json', 'device_id');
+
+  return rows.map((row) => ({
+    endpoint: String(row.endpoint),
+    subscription: row.subscription_json as WebPushSubscriptionPayload,
+    deviceId: row.device_id ? String(row.device_id) : '',
+  }));
+}
+
+async function removeInvalidIosTokens(tokens: string[]) {
+  if (!tokens.length) {
+    return;
+  }
+
+  await db(NOTIFICATION_TOKEN_TABLE)
+    .whereIn('device_token', tokens)
+    .delete();
+}
+
+async function removeInvalidWebPushSubscriptions(endpoints: string[]) {
+  if (!endpoints.length) {
+    return;
+  }
+
+  await db(WEB_PUSH_SUBSCRIPTION_TABLE)
+    .whereIn('endpoint', endpoints)
+    .delete();
+}
+
+function shouldNotifyAutomationEvent(
+  automation: AutomationNotificationPreference | null | undefined,
+  eventType: string,
+) {
+  if (eventType === 'work-started') {
+    return automation?.notifyOnAutomationStart ?? true;
+  }
+
+  if (eventType === 'work-progress') {
+    return automation?.notifyOnAutomationProgress ?? true;
+  }
+
+  if (
+    eventType === 'work-completed' ||
+    eventType === 'work-noop-complete' ||
+    eventType === 'development-completed' ||
+    eventType === 'plan-completed'
+  ) {
+    return automation?.notifyOnAutomationCompletion ?? true;
+  }
+
+  if (eventType === 'release-merged') {
+    return automation?.notifyOnAutomationRelease ?? true;
+  }
+
+  if (eventType === 'main-merged') {
+    return automation?.notifyOnAutomationMain ?? true;
+  }
+
+  if (
+    eventType === 'branch-failed' ||
+    eventType === 'work-failed' ||
+    eventType === 'release-failed' ||
+    eventType === 'main-failed'
+  ) {
+    return automation?.notifyOnAutomationFailure ?? true;
+  }
+
+  if (eventType === 'plan-restarted') {
+    return automation?.notifyOnAutomationRestart ?? true;
+  }
+
+  if (eventType === 'issue-resolved') {
+    return automation?.notifyOnAutomationIssueResolved ?? true;
+  }
+
+  return true;
+}
+
+async function isNotificationRecipientAllowed(
+  preferenceTargets: NotificationPreferenceTarget[],
+  payload: IosNotificationPayload,
+) {
+  const eventType = payload.data.eventType?.trim();
+
+  if (!eventType) {
+    return true;
+  }
+
+  for (const target of preferenceTargets) {
+    if (!target.id.trim()) {
+      continue;
+    }
+
+    const automation = await getAutomationNotificationPreference(target.id, target.kind);
+
+    if (automation) {
+      return shouldNotifyAutomationEvent(automation, eventType);
+    }
+  }
+
+  return true;
+}
+
+export async function sendIosNotifications(payload: IosNotificationPayload) {
+  const env = getEnv();
+  const provider = await getProvider();
+
+  if (!provider || !env.APNS_BUNDLE_ID) {
+    return {
+      ok: false,
+      skipped: true,
+      reason: 'APNs 설정이 비어 있습니다.',
+      sentCount: 0,
+      failedCount: 0,
+    };
+  }
+
+  const tokenRows = await getEnabledIosTokens();
+  const tokens = (
+    await Promise.all(
+      tokenRows.map(async (row) => ({
+        token: row.token,
+        allowed: await isNotificationRecipientAllowed(
+          [
+            { kind: 'ios-token-client', id: buildScopedPwaNotificationTargetId(row.token, row.deviceId) },
+            { kind: 'ios-token', id: row.token },
+            { kind: 'client', id: row.deviceId },
+          ],
+          payload,
+        ),
+      })),
+    )
+  )
+    .filter((row) => row.allowed)
+    .map((row) => row.token);
+
+  if (!tokens.length) {
+    return {
+      ok: true,
+      skipped: true,
+      reason: '등록된 iOS 알림 토큰이 없습니다.',
+      sentCount: 0,
+      failedCount: 0,
+    };
+  }
+
+  const notification = new Notification();
+  notification.topic = env.APNS_BUNDLE_ID;
+  notification.pushType = 'alert';
+  notification.priority = 10;
+  notification.expiry = Math.floor(Date.now() / 1000) + 3600;
+  notification.alert = {
+    title: payload.title,
+    body: payload.body,
+  };
+  notification.sound = 'default';
+  notification.badge = 1;
+  notification.payload = payload.data;
+  if (payload.threadId) {
+    notification.threadId = payload.threadId;
+  }
+
+  const response = await provider.send(notification, tokens);
+  const invalidTokens = response.failed
+    .map((result) => result.device)
+    .filter((device): device is string => Boolean(device));
+
+  await removeInvalidIosTokens(invalidTokens);
+
+  return {
+    ok: response.failed.length === 0,
+    skipped: false,
+    sentCount: response.sent.length,
+    failedCount: response.failed.length,
+    invalidTokens,
+  };
+}
+
+async function sendWebPushNotifications(payload: IosNotificationPayload) {
+  const env = getEnv();
+  if (!ensureWebPushConfigured(env)) {
+    return {
+      ok: false,
+      skipped: true,
+      reason: 'Web Push 설정이 비어 있습니다.',
+      sentCount: 0,
+      failedCount: 0,
+    };
+  }
+
+  const subscriptions = (
+    await Promise.all(
+      (await getEnabledWebPushSubscriptions()).map(async (row) => ({
+        ...row,
+        allowed: await isNotificationRecipientAllowed(
+          [
+            { kind: 'web-endpoint', id: row.endpoint },
+            { kind: 'client', id: row.deviceId },
+          ],
+          payload,
+        ),
+      })),
+    )
+  ).filter((row) => row.allowed);
+
+  if (!subscriptions.length) {
+    return {
+      ok: true,
+      skipped: true,
+      reason: '등록된 Web Push 구독이 없습니다.',
+      sentCount: 0,
+      failedCount: 0,
+    };
+  }
+
+  const payloadText = JSON.stringify({
+    title: payload.title,
+    body: payload.body,
+    data: payload.data,
+    threadId: payload.threadId,
+  });
+  const preserveSubscriptions = isChatNotificationPayload(payload);
+
+  const invalidEndpoints: string[] = [];
+  let sentCount = 0;
+  let failedCount = 0;
+  const failures: WebPushFailureDetail[] = [];
+
+  await Promise.all(
+    subscriptions.map(async ({ endpoint, subscription }) => {
+      try {
+        await sendWebPushWithRetry(subscription, payloadText);
+        sentCount += 1;
+      } catch (error: any) {
+        const deliveryError = error?.error ?? error;
+        const attemptCount = Number(error?.attemptCount ?? 1);
+        failedCount += 1;
+        const statusCode = Number(deliveryError?.statusCode ?? 0);
+        const detail =
+          normalizeNotificationDetailText(deliveryError?.body) ?? normalizeNotificationDetailText(deliveryError?.message);
+        const code = normalizeNotificationDetailText(deliveryError?.code);
+
+        if (!preserveSubscriptions && (statusCode === 404 || statusCode === 410)) {
+          invalidEndpoints.push(endpoint);
+        }
+
+        failures.push({
+          endpoint,
+          statusCode: statusCode || undefined,
+          detail,
+          code,
+          attemptCount,
+        });
+      }
+    }),
+  );
+
+  if (!preserveSubscriptions) {
+    await removeInvalidWebPushSubscriptions(invalidEndpoints);
+  }
+
+  if (failures.length) {
+    console.warn(
+      '[notification-service] web push delivery failed',
+      JSON.stringify({
+        failedCount,
+        preserveSubscriptions,
+        invalidEndpointCount: invalidEndpoints.length,
+        failures,
+      }),
+    );
+  }
+
+  return {
+    ok: failedCount === 0,
+    skipped: false,
+    sentCount,
+    failedCount,
+    invalidEndpoints,
+  };
+}
+
+export async function sendNotifications(payload: IosNotificationPayload) {
+  const [ios, web] = await Promise.all([
+    sendIosNotifications(payload),
+    sendWebPushNotifications(payload),
+  ]);
+
+  return {
+    ok: ios.ok || web.ok,
+    ios,
+    web,
+  };
+}
+
+export async function shutdownNotificationProvider() {
+  const provider = await getProvider();
+  provider?.shutdown();
+  providerPromise = null;
+}
diff --git a/etc/servers/work-server/src/services/plan-notification-policy.ts b/etc/servers/work-server/src/services/plan-notification-policy.ts
new file mode 100755
index 0000000..b272fe2
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-notification-policy.ts
@@ -0,0 +1,3 @@
+export function shouldNotifyPlanRestart(result: { didScheduleRetry?: boolean } | null | undefined) {
+  return Boolean(result?.didScheduleRetry);
+}
diff --git a/etc/servers/work-server/src/services/plan-notification-service.ts b/etc/servers/work-server/src/services/plan-notification-service.ts
new file mode 100755
index 0000000..dbddba4
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-notification-service.ts
@@ -0,0 +1,114 @@
+import { sendNotifications } from './notification-service.js';
+import type { AppConfigSnapshot } from './app-config-service.js';
+import { getPlanItemById } from './plan-service.js';
+
+function buildPlanNotificationTargetUrl(planId: number, workId: string | null | undefined) {
+  const targetUrl = new URL('https://sm-home.cloud/');
+
+  targetUrl.searchParams.set('topMenu', 'plans');
+  targetUrl.searchParams.set('planId', String(planId));
+
+  if (workId?.trim()) {
+    targetUrl.searchParams.set('workId', workId.trim());
+  }
+
+  return targetUrl.toString();
+}
+
+export function shouldNotifyPlanEventType(
+  automation: AppConfigSnapshot['automation'] | undefined,
+  eventType: string,
+) {
+  if (eventType === 'work-started') {
+    return automation?.notifyOnAutomationStart ?? true;
+  }
+
+  if (eventType === 'work-progress') {
+    return automation?.notifyOnAutomationProgress ?? true;
+  }
+
+  if (
+    eventType === 'work-completed' ||
+    eventType === 'work-noop-complete' ||
+    eventType === 'development-completed' ||
+    eventType === 'plan-completed'
+  ) {
+    return automation?.notifyOnAutomationCompletion ?? true;
+  }
+
+  if (eventType === 'release-merged') {
+    return automation?.notifyOnAutomationRelease ?? true;
+  }
+
+  if (eventType === 'main-merged') {
+    return automation?.notifyOnAutomationMain ?? true;
+  }
+
+  if (
+    eventType === 'branch-failed' ||
+    eventType === 'work-failed' ||
+    eventType === 'release-failed' ||
+    eventType === 'main-failed'
+  ) {
+    return automation?.notifyOnAutomationFailure ?? true;
+  }
+
+  if (eventType === 'plan-restarted') {
+    return automation?.notifyOnAutomationRestart ?? true;
+  }
+
+  if (eventType === 'issue-resolved') {
+    return automation?.notifyOnAutomationIssueResolved ?? true;
+  }
+
+  return true;
+}
+
+export async function shouldSendPlanNotification(eventType: string) {
+  void eventType;
+  return true;
+}
+
+export function buildPlanNotificationData(planId: number, workId: string | null | undefined, eventType: string) {
+  return {
+    category: 'automation',
+    planId: String(planId),
+    workId: String(workId ?? ''),
+    eventType,
+    notificationScope: 'automation',
+    targetUrl: buildPlanNotificationTargetUrl(planId, workId),
+    notificationKey: `plan:${planId}`,
+  };
+}
+
+export async function notifyPlanEvent(
+  planId: number,
+  title: string,
+  body: string,
+  eventType: string,
+) {
+  if (!(await shouldSendPlanNotification(eventType))) {
+    return {
+      ok: true,
+      skipped: true,
+      reason: '앱 설정에서 이 알림 항목이 꺼져 있습니다.',
+    };
+  }
+
+  const item = await getPlanItemById(planId);
+
+  if (!item) {
+    return {
+      ok: false,
+      skipped: true,
+      reason: '작업 항목을 찾을 수 없습니다.',
+    };
+  }
+
+  return sendNotifications({
+    title,
+    body,
+    threadId: `plan-${planId}`,
+    data: buildPlanNotificationData(planId, String(item.workId), eventType),
+  });
+}
diff --git a/etc/servers/work-server/src/services/plan-policy.test.ts b/etc/servers/work-server/src/services/plan-policy.test.ts
new file mode 100755
index 0000000..604fff5
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-policy.test.ts
@@ -0,0 +1,54 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { buildPlanNotificationData } from './plan-notification-service.js';
+import { shouldNotifyPlanRestart } from './plan-notification-policy.js';
+import { shouldTriggerRetryFromActionNote } from './plan-retry-policy.js';
+import { issueActionSchema } from './plan-service.js';
+
+test('shouldTriggerRetryFromActionNote detects missing-fix and verification follow-up requests', () => {
+  assert.equal(shouldTriggerRetryFromActionNote('누락된 거 다시 고쳐서 테스트해 줘'), true);
+  assert.equal(shouldTriggerRetryFromActionNote('빠진 내용 보완하고 검증해줘'), true);
+});
+
+test('shouldTriggerRetryFromActionNote ignores simple status comments', () => {
+  assert.equal(shouldTriggerRetryFromActionNote('확인했습니다. 메모만 남깁니다.'), false);
+});
+
+test('issueActionSchema defaults retry to false', () => {
+  assert.deepEqual(
+    issueActionSchema.parse({
+      actionNote: '원인 분석과 조치 내용을 남깁니다.',
+    }),
+    {
+      actionNote: '원인 분석과 조치 내용을 남깁니다.',
+      resolve: false,
+      retry: false,
+    },
+  );
+});
+
+test('shouldNotifyPlanRestart only allows restart alerts when a retry was actually scheduled', () => {
+  assert.equal(
+    shouldNotifyPlanRestart({
+      didScheduleRetry: false,
+    }),
+    false,
+  );
+  assert.equal(
+    shouldNotifyPlanRestart({
+      didScheduleRetry: true,
+    }),
+    true,
+  );
+  assert.equal(shouldNotifyPlanRestart(null), false);
+});
+
+test('buildPlanNotificationData uses stable task key per plan', () => {
+  assert.deepEqual(buildPlanNotificationData(17, 'WK-123', 'plan-restarted'), {
+    planId: '17',
+    workId: 'WK-123',
+    eventType: 'plan-restarted',
+    targetUrl: 'https://sm-home.cloud/?topMenu=plans&planId=17&workId=WK-123',
+    notificationKey: 'plan:17',
+  });
+});
diff --git a/etc/servers/work-server/src/services/plan-retry-policy.ts b/etc/servers/work-server/src/services/plan-retry-policy.ts
new file mode 100755
index 0000000..9113d15
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-retry-policy.ts
@@ -0,0 +1,11 @@
+export function shouldTriggerRetryFromActionNote(actionNote: string) {
+  const text = String(actionNote ?? '').trim();
+
+  if (!text) {
+    return false;
+  }
+
+  return /(재처리|다시|누락|빠진|빼먹|보완|조치해|처리해|해결해|고쳐|반영해|수정해|시도해|진행해|테스트해|검증해|부탁)/.test(
+    text,
+  );
+}
diff --git a/etc/servers/work-server/src/services/plan-schedule-service.ts b/etc/servers/work-server/src/services/plan-schedule-service.ts
new file mode 100755
index 0000000..c90e591
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-schedule-service.ts
@@ -0,0 +1,540 @@
+import { z } from 'zod';
+import { db } from '../db/client.js';
+import {
+  createCompletedPlanExecutionLogItem,
+  createPlanActionHistory,
+  createPlanItem,
+  ensurePlanTable,
+  normalizePlanAutomationType,
+  planAutomationTypeSchema,
+} from './plan-service.js';
+import { getKstNowParts } from './worklog-automation-utils.js';
+import { registerErrorLogBoardPosts } from './error-log-plan-registration-service.js';
+
+export const PLAN_SCHEDULED_TASK_TABLE = 'plan_scheduled_tasks';
+const scheduleModes = ['interval', 'daily'] as const;
+const repeatIntervalUnits = ['minute', 'hour', 'day', 'week', 'month'] as const;
+const DEFAULT_DAILY_RUN_TIME = '09:00';
+
+export const createPlanScheduledTaskSchema = z.object({
+  workId: z.string().trim().optional().default('반복작업'),
+  note: z.string().default(''),
+  automationType: z.preprocess((value) => value, planAutomationTypeSchema.default('none')),
+  releaseTarget: z.string().trim().min(1).default('release'),
+  jangsingProcessingRequired: z.boolean().default(true),
+  autoDeployToMain: z.boolean().default(true),
+  enabled: z.boolean().default(true),
+  immediateRunEnabled: z.boolean().default(true),
+  scheduleMode: z.enum(scheduleModes).default('interval'),
+  repeatIntervalValue: z.coerce.number().int().min(1).max(525600).default(60),
+  repeatIntervalUnit: z.enum(repeatIntervalUnits).default('minute'),
+  repeatIntervalMinutes: z.coerce.number().int().min(1).max(525600).optional(),
+  dailyRunTime: z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/).default(DEFAULT_DAILY_RUN_TIME),
+});
+
+export const updatePlanScheduledTaskSchema = createPlanScheduledTaskSchema.partial();
+
+function normalizeScheduledWorkId(value?: string | null) {
+  const workId = String(value ?? '').trim();
+  const normalized = workId.replace(/^\[|\]$/g, '').replace(/\s+/g, '').toLowerCase();
+
+  if (!workId || normalized === '작업id' || normalized === 'workid' || normalized === 'undefined' || normalized === 'null') {
+    return '반복작업';
+  }
+
+  return workId;
+}
+
+function normalizeRepeatIntervalMinutes(value: unknown) {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue)) {
+    return 60;
+  }
+
+  return Math.min(525600, Math.max(1, Math.round(numericValue)));
+}
+
+function normalizeRepeatIntervalValue(value: unknown) {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue)) {
+    return 60;
+  }
+
+  return Math.min(525600, Math.max(1, Math.round(numericValue)));
+}
+
+function normalizeRepeatIntervalUnit(value: unknown): (typeof repeatIntervalUnits)[number] {
+  return repeatIntervalUnits.includes(value as (typeof repeatIntervalUnits)[number])
+    ? (value as (typeof repeatIntervalUnits)[number])
+    : 'minute';
+}
+
+function normalizeScheduleMode(value: unknown): (typeof scheduleModes)[number] {
+  return scheduleModes.includes(value as (typeof scheduleModes)[number])
+    ? (value as (typeof scheduleModes)[number])
+    : 'interval';
+}
+
+function normalizeDailyRunTime(value: unknown) {
+  return typeof value === 'string' && /^([01]\d|2[0-3]):[0-5]\d$/.test(value)
+    ? value
+    : DEFAULT_DAILY_RUN_TIME;
+}
+
+function toRepeatIntervalMinutes(value: unknown, unit: unknown) {
+  const repeatIntervalValue = normalizeRepeatIntervalValue(value);
+  const repeatIntervalUnit = normalizeRepeatIntervalUnit(unit);
+
+  if (repeatIntervalUnit === 'day') {
+    return repeatIntervalValue * 24 * 60;
+  }
+
+  if (repeatIntervalUnit === 'week') {
+    return repeatIntervalValue * 7 * 24 * 60;
+  }
+
+  if (repeatIntervalUnit === 'month') {
+    return repeatIntervalValue * 30 * 24 * 60;
+  }
+
+  if (repeatIntervalUnit === 'hour') {
+    return repeatIntervalValue * 60;
+  }
+
+  return repeatIntervalValue;
+}
+
+function normalizeBoolean(value: unknown, fallback: boolean) {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (value === 0 || value === '0' || value === 'false') {
+    return false;
+  }
+
+  if (value === 1 || value === '1' || value === 'true') {
+    return true;
+  }
+
+  return fallback;
+}
+
+function formatScheduleWorkId(workId: string, date: Date) {
+  const timestamp = [
+    date.getFullYear(),
+    String(date.getMonth() + 1).padStart(2, '0'),
+    String(date.getDate()).padStart(2, '0'),
+    String(date.getHours()).padStart(2, '0'),
+    String(date.getMinutes()).padStart(2, '0'),
+  ].join('');
+
+  return `${normalizeScheduledWorkId(workId)}-${timestamp}`;
+}
+
+function getKstDateKey(value: unknown) {
+  if (!value) {
+    return null;
+  }
+
+  const date = value instanceof Date ? value : new Date(String(value));
+
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+
+  return getKstNowParts(date).dateKey;
+}
+
+function isDailyScheduleDue(row: Record<string, unknown>, now: Date) {
+  const nowParts = getKstNowParts(now);
+  const [hours, minutes] = normalizeDailyRunTime(row.daily_run_time).split(':').map((value) => Number(value));
+  const scheduledMinutesOfDay = hours * 60 + minutes;
+  return nowParts.minutesOfDay >= scheduledMinutesOfDay && getKstDateKey(row.last_registered_at) !== nowParts.dateKey;
+}
+
+function isIntervalScheduleDue(row: Record<string, unknown>, now: Date) {
+  const lastRegisteredAt = row.last_registered_at ? new Date(String(row.last_registered_at)) : null;
+  const intervalBaseAt = lastRegisteredAt && !Number.isNaN(lastRegisteredAt.getTime())
+    ? lastRegisteredAt
+    : new Date(String(row.created_at ?? now.toISOString()));
+
+  if (Number.isNaN(intervalBaseAt.getTime())) {
+    return true;
+  }
+
+  const repeatIntervalMinutes = normalizeRepeatIntervalMinutes(
+    row.repeat_interval_minutes ?? toRepeatIntervalMinutes(row.repeat_interval_value, row.repeat_interval_unit),
+  );
+  return intervalBaseAt.getTime() <= now.getTime() - repeatIntervalMinutes * 60 * 1000;
+}
+
+function isScheduleDue(row: Record<string, unknown>, now: Date) {
+  if (!row.last_registered_at && normalizeBoolean(row.immediate_run_enabled, true)) {
+    return true;
+  }
+
+  return normalizeScheduleMode(row.schedule_mode) === 'daily'
+    ? isDailyScheduleDue(row, now)
+    : isIntervalScheduleDue(row, now);
+}
+
+export function mapPlanScheduledTaskRow(row: Record<string, unknown>) {
+  return {
+    id: row.id,
+    workId: row.work_id,
+    note: row.note,
+    automationType: normalizePlanAutomationType(row.automation_type),
+    releaseTarget: row.release_target,
+    jangsingProcessingRequired: Boolean(row.jangsing_processing_required ?? true),
+    autoDeployToMain: Boolean(row.auto_deploy_to_main ?? true),
+    enabled: Boolean(row.enabled ?? true),
+    immediateRunEnabled: normalizeBoolean(row.immediate_run_enabled, true),
+    scheduleMode: normalizeScheduleMode(row.schedule_mode),
+    repeatIntervalValue: Number(row.repeat_interval_value ?? row.repeat_interval_minutes ?? 60),
+    repeatIntervalUnit: normalizeRepeatIntervalUnit(row.repeat_interval_unit),
+    repeatIntervalMinutes: normalizeRepeatIntervalMinutes(
+      row.repeat_interval_minutes ?? toRepeatIntervalMinutes(row.repeat_interval_value ?? 60, row.repeat_interval_unit),
+    ),
+    dailyRunTime: normalizeDailyRunTime(row.daily_run_time),
+    lastRegisteredAt: row.last_registered_at,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  };
+}
+
+async function ensurePlanScheduledTaskColumn(
+  columnName: string,
+  addColumn: (table: any) => void,
+) {
+  const hasColumn = await db.schema.hasColumn(PLAN_SCHEDULED_TASK_TABLE, columnName);
+
+  if (hasColumn) {
+    return;
+  }
+
+  await db.schema.alterTable(PLAN_SCHEDULED_TASK_TABLE, (table) => {
+    addColumn(table);
+  });
+}
+
+export async function ensurePlanScheduledTaskTable() {
+  const exists = await db.schema.hasTable(PLAN_SCHEDULED_TASK_TABLE);
+
+  if (!exists) {
+    await db.schema.createTable(PLAN_SCHEDULED_TASK_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('work_id', 120).notNullable().defaultTo('반복작업');
+      table.text('note').notNullable().defaultTo('');
+      table.string('automation_type', 40).notNullable().defaultTo('none');
+      table.string('release_target', 120).notNullable().defaultTo('release');
+      table.boolean('jangsing_processing_required').notNullable().defaultTo(true);
+      table.boolean('auto_deploy_to_main').notNullable().defaultTo(true);
+      table.boolean('enabled').notNullable().defaultTo(true);
+      table.boolean('immediate_run_enabled').notNullable().defaultTo(true);
+      table.string('schedule_mode', 20).notNullable().defaultTo('interval');
+      table.integer('repeat_interval_value').notNullable().defaultTo(60);
+      table.string('repeat_interval_unit', 20).notNullable().defaultTo('minute');
+      table.integer('repeat_interval_minutes').notNullable().defaultTo(60);
+      table.string('daily_run_time', 5).notNullable().defaultTo(DEFAULT_DAILY_RUN_TIME);
+      table.timestamp('last_registered_at', { useTz: true }).nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+    return;
+  }
+
+  await ensurePlanScheduledTaskColumn('release_target', (table) => {
+    table.string('release_target', 120).notNullable().defaultTo('release');
+  });
+  await ensurePlanScheduledTaskColumn('automation_type', (table) => {
+    table.string('automation_type', 40).notNullable().defaultTo('none');
+  });
+  await ensurePlanScheduledTaskColumn('jangsing_processing_required', (table) => {
+    table.boolean('jangsing_processing_required').notNullable().defaultTo(true);
+  });
+  await ensurePlanScheduledTaskColumn('auto_deploy_to_main', (table) => {
+    table.boolean('auto_deploy_to_main').notNullable().defaultTo(true);
+  });
+  await ensurePlanScheduledTaskColumn('enabled', (table) => {
+    table.boolean('enabled').notNullable().defaultTo(true);
+  });
+  await ensurePlanScheduledTaskColumn('immediate_run_enabled', (table) => {
+    table.boolean('immediate_run_enabled').notNullable().defaultTo(true);
+  });
+  await ensurePlanScheduledTaskColumn('schedule_mode', (table) => {
+    table.string('schedule_mode', 20).notNullable().defaultTo('interval');
+  });
+  await ensurePlanScheduledTaskColumn('repeat_interval_value', (table) => {
+    table.integer('repeat_interval_value').notNullable().defaultTo(60);
+  });
+  await ensurePlanScheduledTaskColumn('repeat_interval_unit', (table) => {
+    table.string('repeat_interval_unit', 20).notNullable().defaultTo('minute');
+  });
+  await ensurePlanScheduledTaskColumn('repeat_interval_minutes', (table) => {
+    table.integer('repeat_interval_minutes').notNullable().defaultTo(60);
+  });
+  await ensurePlanScheduledTaskColumn('daily_run_time', (table) => {
+    table.string('daily_run_time', 5).notNullable().defaultTo(DEFAULT_DAILY_RUN_TIME);
+  });
+  await ensurePlanScheduledTaskColumn('last_registered_at', (table) => {
+    table.timestamp('last_registered_at', { useTz: true }).nullable();
+  });
+  await ensurePlanScheduledTaskColumn('created_at', (table) => {
+    table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+  });
+  await ensurePlanScheduledTaskColumn('updated_at', (table) => {
+    table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+  });
+
+  await db(PLAN_SCHEDULED_TASK_TABLE)
+    .where({ automation_type: 'plan_registration' })
+    .update({ automation_type: 'plan' });
+  await db(PLAN_SCHEDULED_TASK_TABLE)
+    .where({ automation_type: 'general_development' })
+    .update({ automation_type: 'auto_worker' });
+
+  await db(PLAN_SCHEDULED_TASK_TABLE)
+    .where({ repeat_interval_unit: 'minute' })
+    .update({
+      repeat_interval_value: db.raw('repeat_interval_minutes'),
+    });
+}
+
+export async function listPlanScheduledTasks() {
+  await ensurePlanScheduledTaskTable();
+
+  return db(PLAN_SCHEDULED_TASK_TABLE).select('*').orderBy('id', 'desc');
+}
+
+export async function getPlanScheduledTaskById(id: number) {
+  await ensurePlanScheduledTaskTable();
+
+  return db(PLAN_SCHEDULED_TASK_TABLE).where({ id }).first();
+}
+
+export async function createPlanScheduledTask(payload: z.infer<typeof createPlanScheduledTaskSchema>) {
+  await ensurePlanScheduledTaskTable();
+  const scheduleMode = normalizeScheduleMode(payload.scheduleMode);
+  const repeatIntervalValue = normalizeRepeatIntervalValue(payload.repeatIntervalValue);
+  const repeatIntervalUnit = normalizeRepeatIntervalUnit(payload.repeatIntervalUnit);
+
+  const rows = await db(PLAN_SCHEDULED_TASK_TABLE)
+    .insert({
+      work_id: normalizeScheduledWorkId(payload.workId),
+      note: payload.note,
+      automation_type: normalizePlanAutomationType(payload.automationType),
+      release_target: payload.releaseTarget,
+      jangsing_processing_required: payload.jangsingProcessingRequired,
+      auto_deploy_to_main: payload.autoDeployToMain,
+      enabled: payload.enabled,
+      immediate_run_enabled: payload.immediateRunEnabled,
+      schedule_mode: scheduleMode,
+      repeat_interval_value: repeatIntervalValue,
+      repeat_interval_unit: repeatIntervalUnit,
+      repeat_interval_minutes: normalizeRepeatIntervalMinutes(
+        payload.repeatIntervalMinutes ?? toRepeatIntervalMinutes(repeatIntervalValue, repeatIntervalUnit),
+      ),
+      daily_run_time: normalizeDailyRunTime(payload.dailyRunTime),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return rows[0];
+}
+
+export async function updatePlanScheduledTask(id: number, payload: z.infer<typeof updatePlanScheduledTaskSchema>) {
+  await ensurePlanScheduledTaskTable();
+
+  const currentRow = await db(PLAN_SCHEDULED_TASK_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+  const scheduleMode = normalizeScheduleMode(payload.scheduleMode ?? currentRow.schedule_mode);
+  const repeatIntervalValue = normalizeRepeatIntervalValue(
+    payload.repeatIntervalValue ?? currentRow.repeat_interval_value ?? currentRow.repeat_interval_minutes ?? 60,
+  );
+  const repeatIntervalUnit = normalizeRepeatIntervalUnit(payload.repeatIntervalUnit ?? currentRow.repeat_interval_unit);
+
+  const rows = await db(PLAN_SCHEDULED_TASK_TABLE)
+    .where({ id })
+    .update({
+      work_id: payload.workId === undefined ? currentRow.work_id : normalizeScheduledWorkId(payload.workId),
+      note: payload.note ?? currentRow.note,
+      automation_type: normalizePlanAutomationType(payload.automationType ?? currentRow.automation_type),
+      release_target: payload.releaseTarget ?? currentRow.release_target ?? 'release',
+      jangsing_processing_required:
+        payload.jangsingProcessingRequired ?? currentRow.jangsing_processing_required ?? true,
+      auto_deploy_to_main: payload.autoDeployToMain ?? currentRow.auto_deploy_to_main ?? true,
+      enabled: payload.enabled ?? currentRow.enabled ?? true,
+      immediate_run_enabled: payload.immediateRunEnabled ?? currentRow.immediate_run_enabled ?? true,
+      schedule_mode: scheduleMode,
+      repeat_interval_value: repeatIntervalValue,
+      repeat_interval_unit: repeatIntervalUnit,
+      repeat_interval_minutes: normalizeRepeatIntervalMinutes(
+        payload.repeatIntervalMinutes
+          ?? toRepeatIntervalMinutes(repeatIntervalValue, repeatIntervalUnit)
+          ?? currentRow.repeat_interval_minutes
+          ?? 60,
+      ),
+      daily_run_time: normalizeDailyRunTime(payload.dailyRunTime ?? currentRow.daily_run_time),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return rows[0] ?? null;
+}
+
+export async function deletePlanScheduledTask(id: number) {
+  await ensurePlanScheduledTaskTable();
+
+  const currentRow = await db(PLAN_SCHEDULED_TASK_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  await db(PLAN_SCHEDULED_TASK_TABLE).where({ id }).delete();
+
+  return currentRow;
+}
+
+export async function registerDuePlanScheduledTasks(now = new Date()) {
+  await ensurePlanTable();
+  await ensurePlanScheduledTaskTable();
+
+  const rows = await db(PLAN_SCHEDULED_TASK_TABLE).where({ enabled: true }).orderBy('id', 'asc');
+  const registered = [];
+
+  for (const row of rows.filter((item) => isScheduleDue(item, now))) {
+    const registration = await registerPlanScheduledTaskRow(row, now);
+
+    if (registration.createdPlan || registration.createdBoardPosts.length > 0) {
+      registered.push(registration);
+    }
+  }
+
+  return registered;
+}
+
+async function registerPlanScheduledTaskRow(row: Record<string, unknown>, now: Date) {
+  if (normalizePlanAutomationType(row.automation_type) === 'plan') {
+    const rangeEnd = now;
+    const lastRegisteredAt = row.last_registered_at ? new Date(String(row.last_registered_at)) : null;
+    const rangeStart =
+      lastRegisteredAt && !Number.isNaN(lastRegisteredAt.getTime())
+        ? lastRegisteredAt
+        : new Date(now.getTime() - 24 * 60 * 60 * 1000);
+    const registration = await registerErrorLogBoardPosts({
+      rangeStart,
+      rangeEnd,
+    });
+    const executionLogNoteLines = [
+      `Plan 스케줄 #${row.id} 실행 이력입니다.`,
+      `조회 구간: ${rangeStart.toISOString()} ~ ${rangeEnd.toISOString()}`,
+      `신규 게시글 등록: ${registration.createdPosts.length}건`,
+      `중복 제외: ${registration.skippedPosts.length}건`,
+    ];
+
+    if (registration.createdPosts.length > 0) {
+      executionLogNoteLines.push('');
+      executionLogNoteLines.push('등록된 게시글:');
+      executionLogNoteLines.push(
+        ...registration.createdPosts.map((post) => `- 게시글 #${post.postId} ${post.workId} (${post.count}건)`),
+      );
+    }
+
+    if (registration.skippedPosts.length > 0) {
+      executionLogNoteLines.push('');
+      executionLogNoteLines.push('제외된 항목:');
+      executionLogNoteLines.push(
+        ...registration.skippedPosts.map((post) => `- ${post.workId}: ${post.reason}`),
+      );
+    }
+
+    const executionLog = await createCompletedPlanExecutionLogItem({
+      workId: formatScheduleWorkId(String(row.work_id ?? '반복작업'), now),
+      note: executionLogNoteLines.join('\n'),
+      automationType: 'plan',
+      releaseTarget: String(row.release_target ?? 'release'),
+      jangsingProcessingRequired: Boolean(row.jangsing_processing_required ?? true),
+      autoDeployToMain: Boolean(row.auto_deploy_to_main ?? true),
+      repeatRequestEnabled: false,
+      repeatIntervalMinutes: normalizeRepeatIntervalMinutes(
+        row.repeat_interval_minutes ?? toRepeatIntervalMinutes(row.repeat_interval_value, row.repeat_interval_unit),
+      ),
+    });
+
+    await createPlanActionHistory(
+      Number(executionLog.id),
+      '스케줄등록',
+      `Plan 스케줄 #${row.id} 실행 이력을 저장했습니다.`,
+    );
+    await createPlanActionHistory(
+      Number(executionLog.id),
+      '완료처리',
+      registration.createdPosts.length > 0
+        ? `Plan 게시판 글 ${registration.createdPosts.length}건을 등록했습니다.`
+        : '등록할 신규 Plan 게시판 글이 없었습니다.',
+    );
+
+    await db(PLAN_SCHEDULED_TASK_TABLE)
+      .where({ id: row.id })
+      .update({
+        last_registered_at: now,
+        updated_at: db.fn.now(),
+      });
+
+    return {
+      createdPlan: executionLog,
+      createdBoardPosts: registration.createdPosts,
+    };
+  }
+
+  const repeatIntervalMinutes = normalizeRepeatIntervalMinutes(
+    row.repeat_interval_minutes ?? toRepeatIntervalMinutes(row.repeat_interval_value, row.repeat_interval_unit),
+  );
+  const createdPlan = await createPlanItem({
+    workId: formatScheduleWorkId(String(row.work_id ?? '반복작업'), now),
+    note: String(row.note ?? ''),
+    automationType: normalizePlanAutomationType(row.automation_type),
+    releaseTarget: String(row.release_target ?? 'release'),
+    jangsingProcessingRequired: Boolean(row.jangsing_processing_required ?? true),
+    autoDeployToMain: Boolean(row.auto_deploy_to_main ?? true),
+    repeatRequestEnabled: false,
+    repeatIntervalMinutes,
+  });
+
+  await db(PLAN_SCHEDULED_TASK_TABLE)
+    .where({ id: row.id })
+    .update({
+      last_registered_at: now,
+      updated_at: db.fn.now(),
+    });
+  await createPlanActionHistory(
+    Number(createdPlan.id),
+    '스케줄등록',
+    `Plan 스케줄 #${row.id} 반복 작업에서 등록했습니다.`,
+  );
+
+  return {
+    createdPlan,
+    createdBoardPosts: [],
+  };
+}
+
+export async function registerPlanScheduledTaskNow(id: number, now = new Date()) {
+  await ensurePlanTable();
+  await ensurePlanScheduledTaskTable();
+
+  const row = await db(PLAN_SCHEDULED_TASK_TABLE).where({ id, enabled: true }).first();
+
+  if (!row || !isScheduleDue(row, now)) {
+    return null;
+  }
+
+  return registerPlanScheduledTaskRow(row, now);
+}
diff --git a/etc/servers/work-server/src/services/plan-service.test.ts b/etc/servers/work-server/src/services/plan-service.test.ts
new file mode 100755
index 0000000..bb1cddf
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-service.test.ts
@@ -0,0 +1,73 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  buildPlanBranchName,
+  filterRetryWorklogEvidencePaths,
+  listPlanQuerySchema,
+  maskPlanNote,
+  normalizeChangedFiles,
+  shouldResumePlanDevelopmentFromIssueAction,
+} from './plan-service.js';
+
+test('maskPlanNote masks note like the requested preview format', () => {
+  assert.equal(maskPlanNote('테스트 작업 실행'), '테** 작업 *행');
+});
+
+test('maskPlanNote collapses spaces and masks single-word notes', () => {
+  assert.equal(maskPlanNote('  긴급메모  '), '긴***');
+  assert.equal(maskPlanNote('가'), '*');
+});
+
+test('normalizeChangedFiles removes blanks and duplicate paths while preserving order', () => {
+  assert.deepEqual(normalizeChangedFiles([' a.ts ', '', 'a.ts', 'b.ts', '  ', 'b.ts']), ['a.ts', 'b.ts']);
+});
+
+test('filterRetryWorklogEvidencePaths keeps non-worklog files and removes repeated worklog artifacts', () => {
+  const changedFiles = [
+    'docs/worklogs/2026-04-07.md',
+    'docs/assets/worklogs/2026-04-07/feature-docs-worklogs.png',
+    'src/features/planBoard/PlanBoardPage.tsx',
+    'docs/assets/worklogs/2026-04-07/run.log',
+  ];
+  const existingChangedFilesList = [
+    ['docs/worklogs/2026-04-07.md', 'docs/assets/worklogs/2026-04-07/feature-docs-worklogs.png'],
+  ];
+
+  assert.deepEqual(filterRetryWorklogEvidencePaths(changedFiles, existingChangedFilesList), [
+    'src/features/planBoard/PlanBoardPage.tsx',
+    'docs/assets/worklogs/2026-04-07/run.log',
+  ]);
+});
+
+test('shouldResumePlanDevelopmentFromIssueAction only resumes release-complete items when retry is requested', () => {
+  assert.equal(shouldResumePlanDevelopmentFromIssueAction('릴리즈완료', true), true);
+  assert.equal(shouldResumePlanDevelopmentFromIssueAction('릴리즈완료', false), false);
+  assert.equal(shouldResumePlanDevelopmentFromIssueAction('작업중', true), false);
+});
+
+test('buildPlanBranchName uses hotfix prefix for auto-worklog plans and feature prefix otherwise', () => {
+  assert.equal(buildPlanBranchName('auto-worklog-2026-04-09', 187), 'hotfix/plan-187-auto-worklog-2026-04-09');
+  assert.equal(buildPlanBranchName('new-play-ground', 182), 'feature/plan-182-new-play-ground');
+});
+
+test('listPlanQuerySchema accepts legacy filter aliases without throwing', () => {
+  assert.deepEqual(listPlanQuerySchema.parse({ status: 'in-progress' }), {
+    status: undefined,
+  });
+  assert.deepEqual(listPlanQuerySchema.parse({ status: 'done' }), {
+    status: undefined,
+  });
+  assert.deepEqual(listPlanQuerySchema.parse({ status: 'error' }), {
+    status: undefined,
+  });
+  assert.deepEqual(listPlanQuerySchema.parse({ status: 'all' }), {
+    status: undefined,
+  });
+});
+
+test('listPlanQuerySchema keeps exact plan statuses and rejects unknown values', () => {
+  assert.deepEqual(listPlanQuerySchema.parse({ status: '작업중' }), {
+    status: '작업중',
+  });
+  assert.throws(() => listPlanQuerySchema.parse({ status: 'processing' }));
+});
diff --git a/etc/servers/work-server/src/services/plan-service.ts b/etc/servers/work-server/src/services/plan-service.ts
new file mode 100755
index 0000000..6d4baf2
--- /dev/null
+++ b/etc/servers/work-server/src/services/plan-service.ts
@@ -0,0 +1,2933 @@
+import { z } from 'zod';
+import { getEnv } from '../config/env.js';
+import { db } from '../db/client.js';
+import { shouldTriggerRetryFromActionNote } from './plan-retry-policy.js';
+
+export const PLAN_TABLE = 'plan_items';
+export const PLAN_ISSUE_TABLE = 'plan_issue_histories';
+export const PLAN_ACTION_TABLE = 'plan_action_histories';
+export const PLAN_SOURCE_WORK_TABLE = 'plan_source_work_histories';
+export const PLAN_RELEASE_REVIEW_TABLE = 'plan_release_reviews';
+export const planStatuses = ['등록', '작업중', '작업완료', '릴리즈완료', '완료'] as const;
+export const planAutomationTypes = ['none', 'plan', 'command_execution', 'non_source_work', 'auto_worker'] as const;
+export const planWorkerStatuses = [
+  '대기',
+  '브랜치생성중',
+  '브랜치준비',
+  '자동작업중',
+  'release반영대기',
+  'release반영중',
+  'release반영완료',
+  'main반영대기',
+  'main반영중',
+  'main반영완료',
+  '자동완료',
+  '브랜치실패',
+  'release반영실패',
+  'main반영실패',
+  '자동작업실패',
+  '작업취소',
+] as const;
+export const planReleaseReviewStatuses = ['pending', 'reviewing', 'approved', 'changes-requested'] as const;
+
+export type PlanAutomationUsageSnapshot = {
+  tokenTotals: {
+    total: number;
+    input: number;
+    output: number;
+    cached: number;
+    reasoning: number;
+  };
+  totalTokens: number;
+  retryCount: number;
+  sourceWorkCount: number;
+  processingStartedAt: string | null;
+  processingEndedAt: string | null;
+  processingEndedAtSource: string | null;
+  processingDurationSeconds: number | null;
+};
+
+type PlanRowOptions = {
+  issueTags?: string[];
+  hasOpenIssues?: boolean;
+  maskNote?: boolean;
+  noteMasked?: boolean;
+  releaseReviewNote?: string;
+};
+
+export const statusSchema = z.enum(planStatuses);
+
+export const setupSchema = z.object({
+  recreate: z.boolean().optional(),
+});
+
+function resolvePlanAutomationTypeAlias(value: unknown) {
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  const normalizedValue = value.trim();
+
+  if (normalizedValue === 'plan_registration') {
+    return 'plan';
+  }
+
+  if (normalizedValue === 'general_development') {
+    return 'auto_worker';
+  }
+
+  return normalizedValue;
+}
+
+export const planAutomationTypeSchema = z.preprocess(
+  resolvePlanAutomationTypeAlias,
+  z.enum(planAutomationTypes),
+);
+
+export const createPlanSchema = z.object({
+  workId: z.string().trim().optional().default('작업ID'),
+  note: z.string().default(''),
+  automationType: z.preprocess(resolvePlanAutomationTypeAlias, z.enum(planAutomationTypes).default('none')),
+  releaseTarget: z.string().trim().min(1).default('release'),
+  jangsingProcessingRequired: z.boolean().default(true),
+  autoDeployToMain: z.boolean().default(true),
+  repeatRequestEnabled: z.boolean().default(false),
+  repeatIntervalMinutes: z.coerce.number().int().min(1).max(1440).default(60),
+});
+
+export const updatePlanSchema = z.object({
+  workId: z.string().trim().optional(),
+  note: z.string().optional(),
+  automationType: z.preprocess(resolvePlanAutomationTypeAlias, z.enum(planAutomationTypes).optional()),
+  releaseTarget: z.string().trim().min(1).optional(),
+  jangsingProcessingRequired: z.boolean().optional(),
+  autoDeployToMain: z.boolean().optional(),
+  repeatRequestEnabled: z.boolean().optional(),
+  repeatIntervalMinutes: z.coerce.number().int().min(1).max(1440).optional(),
+});
+
+export const updatePlanJangsingProcessingSchema = z.object({
+  jangsingProcessingRequired: z.boolean(),
+});
+
+export const issueActionSchema = z.object({
+  actionNote: z.string().trim().min(1),
+  resolve: z.boolean().default(false),
+  retry: z.boolean().default(false),
+});
+
+const planListStatusFilterAliases = new Set(['all', 'in-progress', 'done', 'error']);
+
+export const listPlanQuerySchema = z.object({
+  status: z.preprocess((value) => {
+    if (typeof value !== 'string') {
+      return value;
+    }
+
+    const normalizedValue = value.trim();
+
+    if (!normalizedValue || planListStatusFilterAliases.has(normalizedValue)) {
+      return undefined;
+    }
+
+    return normalizedValue;
+  }, statusSchema.optional()),
+});
+
+export type PlanStatus = (typeof planStatuses)[number];
+export type PlanAutomationType = (typeof planAutomationTypes)[number];
+export type PlanWorkerStatus = (typeof planWorkerStatuses)[number];
+export type PlanReleaseReviewStatus = (typeof planReleaseReviewStatuses)[number];
+
+export const planReleaseReviewStatusSchema = z.enum(planReleaseReviewStatuses);
+
+const planReleaseReviewMetadataSchema = z.object({
+  summary: z.string().trim().min(1).max(500).optional(),
+  pageSelectionIds: z.array(z.string().trim().min(1).max(160)).max(12).optional(),
+  checkedPageSelectionIds: z.array(z.string().trim().min(1).max(160)).max(12).optional(),
+  docIds: z.array(z.string().trim().min(1).max(160)).max(12).optional(),
+  componentIds: z.array(z.string().trim().min(1).max(160)).max(12).optional(),
+  widgetIds: z.array(z.string().trim().min(1).max(160)).max(12).optional(),
+});
+
+export const updatePlanReleaseReviewSchema = z.object({
+  status: planReleaseReviewStatusSchema.optional(),
+  reviewNote: z.string().max(4000).optional(),
+  metadata: planReleaseReviewMetadataSchema.optional(),
+});
+
+export type PlanReleaseReviewMetadata = z.infer<typeof planReleaseReviewMetadataSchema>;
+
+const planFailureWorkerStatuses = new Set<PlanWorkerStatus>([
+  '브랜치실패',
+  '자동작업실패',
+  'release반영실패',
+  'main반영실패',
+]);
+const functionCheckEditableStatuses = new Set<PlanStatus>(['작업완료', '릴리즈완료', '완료']);
+
+const automationIssueTags = ['#브랜치실패', '#자동작업실패', '#release반영실패', '#main반영실패'] as const;
+const WORKLOG_EVIDENCE_PATH_PATTERN = /^docs\/(?:worklogs\/.+\.md|assets\/worklogs\/.+)/i;
+
+function sanitizeBranchToken(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 48);
+}
+
+function normalizePlanWorkId(value?: string | null) {
+  const workId = String(value ?? '').trim();
+  const normalized = workId.replace(/^\[|\]$/g, '').replace(/\s+/g, '').toLowerCase();
+
+  if (!workId || normalized === '작업id' || normalized === 'workid' || normalized === 'undefined' || normalized === 'null') {
+    return '작업ID';
+  }
+
+  return workId;
+}
+
+export function normalizePlanAutomationType(value: unknown): PlanAutomationType {
+  const normalizedValue = resolvePlanAutomationTypeAlias(value);
+  return planAutomationTypes.includes(normalizedValue as PlanAutomationType)
+    ? (normalizedValue as PlanAutomationType)
+    : 'none';
+}
+
+function shouldSkipLifecycleSourceWork(row: Record<string, unknown> | undefined | null) {
+  return normalizePlanAutomationType(row?.automation_type) === 'plan';
+}
+
+export function formatPlanNotificationLabel(workId: string | null | undefined, id: number) {
+  const normalizedWorkId = normalizePlanWorkId(workId);
+  return normalizedWorkId === '작업ID' ? `#${id}` : normalizedWorkId;
+}
+
+export function maskPlanNote(value: unknown) {
+  const normalized = String(value ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  const words = normalized.split(' ').filter(Boolean);
+
+  if (words.length === 1) {
+    const [word] = words;
+    if (word.length <= 1) {
+      return '*';
+    }
+
+    return `${word[0]}${'*'.repeat(word.length - 1)}`;
+  }
+
+  return words
+    .map((word, index) => {
+      if (word.length <= 1) {
+        return '*';
+      }
+
+      if (index === 0) {
+        return `${word[0]}${'*'.repeat(word.length - 1)}`;
+      }
+
+      if (index === words.length - 1) {
+        return `${'*'.repeat(word.length - 1)}${word[word.length - 1]}`;
+      }
+
+      return word;
+    })
+    .join(' ');
+}
+
+export function normalizeChangedFiles(rawChangedFiles: string[] | null | undefined) {
+  return [...new Set((rawChangedFiles ?? []).map((file) => String(file ?? '').trim()).filter(Boolean))];
+}
+
+export function filterRetryWorklogEvidencePaths(
+  changedFiles: string[],
+  existingChangedFilesList: string[][],
+) {
+  const normalizedChangedFiles = normalizeChangedFiles(changedFiles);
+  const existingEvidencePaths = new Set(
+    existingChangedFilesList
+      .flatMap((files) => normalizeChangedFiles(files))
+      .filter((file) => WORKLOG_EVIDENCE_PATH_PATTERN.test(file)),
+  );
+
+  return normalizedChangedFiles.filter(
+    (file) => !WORKLOG_EVIDENCE_PATH_PATTERN.test(file) || !existingEvidencePaths.has(file),
+  );
+}
+
+export function buildPlanBranchName(workId: string, id: number) {
+  const token = sanitizeBranchToken(workId) || `plan-${id}`;
+  const prefix = /^auto-worklog-\d{4}-\d{2}-\d{2}$/i.test(String(workId ?? '').trim()) ? 'hotfix' : 'feature';
+  return `${prefix}/plan-${id}-${token}`;
+}
+
+export function mapPlanRow(
+  row: Record<string, unknown>,
+  options?: PlanRowOptions,
+) {
+  return {
+    id: row.id,
+    workId: row.work_id,
+    note: options?.maskNote ? maskPlanNote(row.note) : row.note,
+    automationType: normalizePlanAutomationType(row.automation_type),
+    releaseReviewNote: options?.releaseReviewNote ?? '',
+    noteMasked: Boolean(options?.noteMasked),
+    status: row.status,
+    jangsingProcessingRequired:
+      typeof row.jangsing_processing_required === 'boolean'
+        ? row.jangsing_processing_required
+        : row.normal_processing_level === '상',
+    autoDeployToMain: Boolean(row.auto_deploy_to_main ?? true),
+    repeatRequestEnabled: Boolean(row.repeat_request_enabled ?? false),
+    repeatIntervalMinutes: Number(row.repeat_interval_minutes ?? 60),
+    assignedBranch: row.assigned_branch,
+    releaseTarget: row.release_target,
+    workerStatus: row.worker_status,
+    lastError: row.last_error,
+    issueTags: options?.issueTags ?? [],
+    hasOpenIssues: options?.hasOpenIssues ?? false,
+    startedAt: row.started_at,
+    completedAt: row.completed_at,
+    mergedAt: row.merged_at,
+    usageSnapshot: mapPlanAutomationUsageSnapshot(row.usage_snapshot),
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  };
+}
+
+export function mapPlanIssueRow(row: Record<string, unknown>) {
+  return {
+    id: row.id,
+    planItemId: row.plan_item_id,
+    issueTag: row.issue_tag,
+    message: row.message,
+    actionNote: row.action_note,
+    resolved: row.resolved,
+    resolvedAt: row.resolved_at,
+    createdAt: row.created_at,
+  };
+}
+
+export function mapPlanActionRow(row: Record<string, unknown>) {
+  return {
+    id: row.id,
+    planItemId: row.plan_item_id,
+    actionType: row.action_type,
+    note: row.note,
+    createdAt: row.created_at,
+  };
+}
+
+export function mapPlanSourceWorkRow(row: Record<string, unknown>) {
+  const changedFilesText = String(row.changed_files ?? '[]');
+  let changedFiles: string[] = [];
+  const sourceFilesText = String(row.source_files ?? '[]');
+  type SourceFileRow = {
+    path: string;
+    previousPath: string | null;
+    status: 'added' | 'modified' | 'deleted' | 'renamed' | 'binary' | 'unknown';
+    language: string;
+    content: string;
+  };
+  let sourceFiles: SourceFileRow[] = [];
+
+  try {
+    changedFiles = normalizeChangedFiles(JSON.parse(changedFilesText) as string[]);
+  } catch {
+    changedFiles = [];
+  }
+
+  try {
+    sourceFiles = JSON.parse(sourceFilesText) as SourceFileRow[];
+  } catch {
+    sourceFiles = [];
+  }
+
+  return {
+    id: row.id,
+    planItemId: row.plan_item_id,
+    summary: row.summary,
+    branchName: row.branch_name,
+    commitHash: row.commit_hash,
+    previewUrl: row.preview_url ?? null,
+    changedFiles,
+    commandLog: row.command_log,
+    diffText: row.diff_text,
+    sourceFiles,
+    createdAt: row.created_at,
+  };
+}
+
+function normalizePlanAutomationUsageSnapshotMetric(value: unknown) {
+  const normalized = Number(value ?? 0);
+  return Number.isFinite(normalized) ? Math.max(0, Math.round(normalized)) : 0;
+}
+
+export function mapPlanAutomationUsageSnapshot(value: unknown): PlanAutomationUsageSnapshot | null {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    const trimmedValue = value.trim();
+
+    if (!trimmedValue) {
+      return null;
+    }
+
+    try {
+      parsedValue = JSON.parse(trimmedValue);
+    } catch {
+      return null;
+    }
+  }
+
+  if (!parsedValue || typeof parsedValue !== 'object') {
+    return null;
+  }
+
+  const snapshot = parsedValue as Partial<PlanAutomationUsageSnapshot> & {
+    tokenTotals?: Partial<PlanAutomationUsageSnapshot['tokenTotals']>;
+  };
+  const tokenTotals: Partial<PlanAutomationUsageSnapshot['tokenTotals']> = snapshot.tokenTotals ?? {};
+
+  return {
+    tokenTotals: {
+      total: normalizePlanAutomationUsageSnapshotMetric(tokenTotals.total),
+      input: normalizePlanAutomationUsageSnapshotMetric(tokenTotals.input),
+      output: normalizePlanAutomationUsageSnapshotMetric(tokenTotals.output),
+      cached: normalizePlanAutomationUsageSnapshotMetric(tokenTotals.cached),
+      reasoning: normalizePlanAutomationUsageSnapshotMetric(tokenTotals.reasoning),
+    },
+    totalTokens: normalizePlanAutomationUsageSnapshotMetric(snapshot.totalTokens),
+    retryCount: normalizePlanAutomationUsageSnapshotMetric(snapshot.retryCount),
+    sourceWorkCount: normalizePlanAutomationUsageSnapshotMetric(snapshot.sourceWorkCount),
+    processingStartedAt:
+      typeof snapshot.processingStartedAt === 'string' && snapshot.processingStartedAt.trim()
+        ? snapshot.processingStartedAt
+        : null,
+    processingEndedAt:
+      typeof snapshot.processingEndedAt === 'string' && snapshot.processingEndedAt.trim()
+        ? snapshot.processingEndedAt
+        : null,
+    processingEndedAtSource:
+      typeof snapshot.processingEndedAtSource === 'string' && snapshot.processingEndedAtSource.trim()
+        ? snapshot.processingEndedAtSource
+        : null,
+    processingDurationSeconds: Number.isFinite(Number(snapshot.processingDurationSeconds))
+      ? Math.max(0, Math.round(Number(snapshot.processingDurationSeconds)))
+      : null,
+  };
+}
+
+export function mapPlanReleaseReviewMetadata(value: unknown): PlanReleaseReviewMetadata {
+  if (typeof value === 'string' && value.trim()) {
+    try {
+      return planReleaseReviewMetadataSchema.parse(JSON.parse(value));
+    } catch {
+      return {};
+    }
+  }
+
+  if (value && typeof value === 'object') {
+    try {
+      return planReleaseReviewMetadataSchema.parse(value);
+    } catch {
+      return {};
+    }
+  }
+
+  return {};
+}
+
+export function mapPlanReleaseReviewRow(row: Record<string, unknown> | null | undefined, planItemId: number) {
+  const metadata = mapPlanReleaseReviewMetadata(row?.metadata ?? null);
+
+  return {
+    id: row?.id ? Number(row.id) : null,
+    planItemId,
+    status: (row?.status ? String(row.status) : 'pending') as PlanReleaseReviewStatus,
+    reviewNote: row?.review_note ? String(row.review_note) : '',
+    checkedByClientId: row?.checked_by_client_id ? String(row.checked_by_client_id) : null,
+    checkedByNickname: row?.checked_by_nickname ? String(row.checked_by_nickname) : null,
+    checkedAt: row?.checked_at ? String(row.checked_at) : null,
+    metadata,
+    createdAt: row?.created_at ? String(row.created_at) : null,
+    updatedAt: row?.updated_at ? String(row.updated_at) : null,
+  };
+}
+
+function extractAutomationTokenUsageText(sourceWork: Pick<ReturnType<typeof mapPlanSourceWorkRow>, 'summary' | 'commandLog'>) {
+  const candidates = [
+    typeof sourceWork.commandLog === 'string' ? sourceWork.commandLog : null,
+    typeof sourceWork.summary === 'string' ? sourceWork.summary : null,
+  ];
+
+  for (const candidate of candidates) {
+    if (!candidate) {
+      continue;
+    }
+
+    const line = candidate
+      .split('\n')
+      .map((entry) => entry.trim())
+      .find((entry) => /^토큰 사용량:\s*/.test(entry));
+
+    if (line) {
+      return line.replace(/^토큰 사용량:\s*/u, '').trim();
+    }
+  }
+
+  return null;
+}
+
+function parseTokenMetricValue(valueText: string, unitText: string | undefined) {
+  const normalizedValue = Number(String(valueText ?? '').replace(/,/g, ''));
+
+  if (!Number.isFinite(normalizedValue)) {
+    return null;
+  }
+
+  const unit = String(unitText ?? '').trim().toLowerCase();
+
+  if (unit === 'k') {
+    return Math.round(normalizedValue * 1_000);
+  }
+
+  if (unit === 'm') {
+    return Math.round(normalizedValue * 1_000_000);
+  }
+
+  return Math.round(normalizedValue);
+}
+
+function parseAutomationTokenUsageMetrics(tokenUsageText: string) {
+  const normalizedText = tokenUsageText
+    .replace(/^tokens?\s+used\s*:?\s*/iu, '')
+    .replace(/\(([^)]+)\)/g, ', $1')
+    .trim();
+  const metrics = new Map<string, number>();
+
+  for (const match of normalizedText.matchAll(/(\d[\d,]*(?:\.\d+)?)\s*([km]?)\s*(input|output|total|cached|reasoning)\b/giu)) {
+    const label = match[3]?.toLowerCase() ?? '';
+    const value = parseTokenMetricValue(match[1] ?? '', match[2]);
+
+    if (!label || value === null) {
+      continue;
+    }
+
+    metrics.set(label, value);
+  }
+
+  for (const match of normalizedText.matchAll(/\b(input|output|total|cached|reasoning)\s*[:=]?\s*(\d[\d,]*(?:\.\d+)?)\s*([km]?)/giu)) {
+    const label = match[1]?.toLowerCase() ?? '';
+    const value = parseTokenMetricValue(match[2] ?? '', match[3]);
+
+    if (!label || value === null) {
+      continue;
+    }
+
+    metrics.set(label, value);
+  }
+
+  if (metrics.size > 0) {
+    return metrics;
+  }
+
+  const fallbackMatch = normalizedText.match(/(\d[\d,]*(?:\.\d+)?)\s*([km]?)/i);
+
+  if (!fallbackMatch) {
+    return null;
+  }
+
+  const fallbackValue = parseTokenMetricValue(fallbackMatch[1], fallbackMatch[2]);
+
+  if (fallbackValue === null) {
+    return null;
+  }
+
+  return new Map([['total', fallbackValue]]);
+}
+
+function getAutomationTotalTokenCount(metrics: Map<string, number>) {
+  const total = metrics.get('total');
+
+  if (typeof total === 'number' && Number.isFinite(total)) {
+    return total;
+  }
+
+  return ['input', 'output', 'cached', 'reasoning'].reduce((sum, key) => sum + (metrics.get(key) ?? 0), 0);
+}
+
+function isPlanAutomationWorkerActive(workerStatus: unknown) {
+  return [
+    '브랜치생성중',
+    '브랜치준비',
+    '자동작업중',
+    'release반영대기',
+    'release반영중',
+    'main반영대기',
+    'main반영중',
+  ].includes(String(workerStatus ?? '').trim());
+}
+
+async function getLatestPlanReviewCheckedAt(planItemId: number) {
+  const row = await db(PLAN_RELEASE_REVIEW_TABLE)
+    .select('checked_at', 'updated_at', 'id')
+    .where({ plan_item_id: planItemId })
+    .orderBy([
+      { column: 'updated_at', order: 'desc' },
+      { column: 'id', order: 'desc' },
+    ])
+    .first();
+
+  return row?.checked_at ? String(row.checked_at) : null;
+}
+
+function resolvePlanProcessingEndedAt(
+  row: Record<string, unknown>,
+  reviewCheckedAt: string | null,
+): { endedAt: string | null; source: string | null } {
+  if (reviewCheckedAt) {
+    return {
+      endedAt: reviewCheckedAt,
+      source: 'review_checked_at',
+    };
+  }
+
+  if (row.merged_at) {
+    return {
+      endedAt: String(row.merged_at),
+      source: 'merged_at',
+    };
+  }
+
+  if (row.completed_at) {
+    return {
+      endedAt: String(row.completed_at),
+      source: 'completed_at',
+    };
+  }
+
+  if (row.updated_at && row.started_at && !isPlanAutomationWorkerActive(row.worker_status)) {
+    return {
+      endedAt: String(row.updated_at),
+      source: 'updated_at',
+    };
+  }
+
+  if (row.started_at && isPlanAutomationWorkerActive(row.worker_status)) {
+    return {
+      endedAt: new Date().toISOString(),
+      source: 'in_progress',
+    };
+  }
+
+  return {
+    endedAt: null,
+    source: null,
+  };
+}
+
+function buildPlanAutomationUsageSnapshot(
+  sourceWorks: Array<Pick<ReturnType<typeof mapPlanSourceWorkRow>, 'summary' | 'commandLog' | 'createdAt'>>,
+  row: Record<string, unknown>,
+  reviewCheckedAt: string | null,
+): PlanAutomationUsageSnapshot | null {
+  const totals = new Map<string, number>();
+
+  sourceWorks.forEach((sourceWork) => {
+    const tokenUsageText = extractAutomationTokenUsageText(sourceWork);
+
+    if (!tokenUsageText) {
+      return;
+    }
+
+    const metrics = parseAutomationTokenUsageMetrics(tokenUsageText);
+
+    if (!metrics) {
+      return;
+    }
+
+    metrics.forEach((value, key) => {
+      totals.set(key, (totals.get(key) ?? 0) + value);
+    });
+  });
+
+  const sourceWorkCount = sourceWorks.length;
+  const processingStartedAt =
+    row.started_at ? String(row.started_at) : sourceWorks[0]?.createdAt ? String(sourceWorks[0].createdAt) : null;
+  const { endedAt, source } = resolvePlanProcessingEndedAt(row, reviewCheckedAt);
+  const processingDurationSeconds =
+    processingStartedAt && endedAt
+      ? Math.max(
+          0,
+          Math.round((new Date(endedAt).getTime() - new Date(processingStartedAt).getTime()) / 1_000),
+        )
+      : null;
+  const totalTokens = getAutomationTotalTokenCount(totals);
+
+  if (sourceWorkCount === 0 && !processingStartedAt && totalTokens === 0) {
+    return null;
+  }
+
+  return {
+    tokenTotals: {
+      total: Math.max(0, totals.get('total') ?? 0),
+      input: Math.max(0, totals.get('input') ?? 0),
+      output: Math.max(0, totals.get('output') ?? 0),
+      cached: Math.max(0, totals.get('cached') ?? 0),
+      reasoning: Math.max(0, totals.get('reasoning') ?? 0),
+    },
+    totalTokens,
+    retryCount: Math.max(0, sourceWorkCount - 1),
+    sourceWorkCount,
+    processingStartedAt,
+    processingEndedAt: endedAt,
+    processingEndedAtSource: source,
+    processingDurationSeconds,
+  };
+}
+
+export async function syncPlanAutomationUsageSnapshot(planItemId: number) {
+  await ensurePlanTable();
+
+  const row = await db(PLAN_TABLE).where({ id: planItemId }).first();
+
+  if (!row) {
+    return null;
+  }
+
+  const sourceWorkRows = await db(PLAN_SOURCE_WORK_TABLE)
+    .select('summary', 'command_log', 'created_at')
+    .where({ plan_item_id: planItemId })
+    .orderBy('created_at', 'asc')
+    .orderBy('id', 'asc');
+  const reviewCheckedAt = await getLatestPlanReviewCheckedAt(planItemId);
+  const snapshot = buildPlanAutomationUsageSnapshot(
+    sourceWorkRows.map((sourceWorkRow) => ({
+      summary: sourceWorkRow.summary,
+      commandLog: sourceWorkRow.command_log,
+      createdAt: String(sourceWorkRow.created_at),
+    })),
+    row,
+    reviewCheckedAt,
+  );
+
+  await db(PLAN_TABLE)
+    .where({ id: planItemId })
+    .update({
+      usage_snapshot: snapshot ? JSON.stringify(snapshot) : null,
+    });
+
+  return snapshot;
+}
+
+async function listPlanReleaseReviewNoteMap(planItemIds: number[]) {
+  if (planItemIds.length === 0) {
+    return new Map<number, string>();
+  }
+
+  const rows = await db(PLAN_RELEASE_REVIEW_TABLE)
+    .select('plan_item_id', 'review_note', 'updated_at', 'id')
+    .whereIn('plan_item_id', planItemIds)
+    .orderBy([
+      { column: 'updated_at', order: 'desc' },
+      { column: 'id', order: 'desc' },
+    ]);
+
+  const noteMap = new Map<number, string>();
+
+  for (const row of rows) {
+    const planItemId = Number(row.plan_item_id);
+
+    if (!Number.isFinite(planItemId) || noteMap.has(planItemId)) {
+      continue;
+    }
+
+    noteMap.set(planItemId, row.review_note ? String(row.review_note) : '');
+  }
+
+  return noteMap;
+}
+
+async function ensurePlanFailureIssueHistory(planItemId: number) {
+  const planRow = await db(PLAN_TABLE).where({ id: planItemId }).first();
+
+  if (!planRow || !planRow.worker_status || !planFailureWorkerStatuses.has(planRow.worker_status)) {
+    return;
+  }
+
+  if (!planRow.last_error) {
+    return;
+  }
+
+  const existingIssue = await db(PLAN_ISSUE_TABLE)
+    .where({
+      plan_item_id: planItemId,
+      issue_tag: `#${planRow.worker_status}`,
+      message: planRow.last_error,
+    })
+    .first();
+
+  if (existingIssue) {
+    return;
+  }
+
+  await db(PLAN_ISSUE_TABLE).insert({
+    plan_item_id: planItemId,
+    issue_tag: `#${planRow.worker_status}`,
+    message: planRow.last_error,
+    resolved: false,
+  });
+}
+
+async function ensureColumn(
+  columnName: string,
+  addColumn: (table: any) => void,
+) {
+  const hasColumn = await db.schema.hasColumn(PLAN_TABLE, columnName);
+
+  if (hasColumn) {
+    return;
+  }
+
+  await db.schema.alterTable(PLAN_TABLE, (table) => {
+    addColumn(table);
+  });
+}
+
+async function syncPlanColumns() {
+  const hasIssueNoteColumn = await db.schema.hasColumn(PLAN_TABLE, 'issue_note');
+
+  if (hasIssueNoteColumn) {
+    await db.schema.alterTable(PLAN_TABLE, (table) => {
+      table.dropColumn('issue_note');
+    });
+  }
+
+  await ensureColumn('assigned_branch', (table) => {
+    table.string('assigned_branch', 200).nullable();
+  });
+  await ensureColumn('release_target', (table) => {
+    table.string('release_target', 120).notNullable().defaultTo('release');
+  });
+  await ensureColumn('automation_type', (table) => {
+    table.string('automation_type', 40).notNullable().defaultTo('none');
+  });
+  await ensureColumn('auto_deploy_to_main', (table) => {
+    table.boolean('auto_deploy_to_main').notNullable().defaultTo(true);
+  });
+  await ensureColumn('repeat_request_enabled', (table) => {
+    table.boolean('repeat_request_enabled').notNullable().defaultTo(false);
+  });
+  await ensureColumn('repeat_interval_minutes', (table) => {
+    table.integer('repeat_interval_minutes').notNullable().defaultTo(60);
+  });
+  await ensureColumn('normal_processing_level', (table) => {
+    table.string('normal_processing_level', 20).notNullable().defaultTo('중');
+  });
+  await ensureColumn('jangsing_processing_required', (table) => {
+    table.boolean('jangsing_processing_required').notNullable().defaultTo(true);
+  });
+  await ensureColumn('worker_status', (table) => {
+    table.string('worker_status', 80).nullable();
+  });
+  await ensureColumn('last_error', (table) => {
+    table.text('last_error').nullable();
+  });
+  await ensureColumn('locked_by', (table) => {
+    table.string('locked_by', 120).nullable();
+  });
+  await ensureColumn('locked_at', (table) => {
+    table.timestamp('locked_at', { useTz: true }).nullable();
+  });
+  await ensureColumn('started_at', (table) => {
+    table.timestamp('started_at', { useTz: true }).nullable();
+  });
+  await ensureColumn('completed_at', (table) => {
+    table.timestamp('completed_at', { useTz: true }).nullable();
+  });
+  await ensureColumn('merged_at', (table) => {
+    table.timestamp('merged_at', { useTz: true }).nullable();
+  });
+  await ensureColumn('usage_snapshot', (table) => {
+    table.text('usage_snapshot').nullable();
+  });
+
+  await db(PLAN_TABLE)
+    .where({ automation_type: 'plan_registration' })
+    .update({ automation_type: 'plan' });
+  await db(PLAN_TABLE)
+    .where({ automation_type: 'general_development' })
+    .update({ automation_type: 'auto_worker' });
+}
+
+async function dropPlanWorkIdUniqueConstraint() {
+  await db.raw(
+    `
+      do $$
+      declare constraint_name text;
+      begin
+        for constraint_name in
+          select con.conname
+          from pg_constraint con
+          join pg_class rel on rel.oid = con.conrelid
+          join pg_namespace nsp on nsp.oid = rel.relnamespace
+          join pg_attribute att on att.attrelid = rel.oid and att.attnum = any(con.conkey)
+          where nsp.nspname = current_schema()
+            and rel.relname = '${PLAN_TABLE}'
+            and con.contype = 'u'
+            and att.attname = 'work_id'
+        loop
+          execute format('alter table %I.%I drop constraint %I', current_schema(), '${PLAN_TABLE}', constraint_name);
+        end loop;
+      end
+      $$;
+    `,
+  );
+}
+
+async function ensurePlanIssueTable() {
+  const exists = await db.schema.hasTable(PLAN_ISSUE_TABLE);
+
+  if (exists) {
+    return;
+  }
+
+  await db.schema.createTable(PLAN_ISSUE_TABLE, (table) => {
+    table.increments('id').primary();
+    table.integer('plan_item_id').notNullable().index();
+    table.string('issue_tag', 120).notNullable();
+    table.text('message').notNullable();
+    table.text('action_note').nullable();
+    table.boolean('resolved').notNullable().defaultTo(false);
+    table.timestamp('resolved_at', { useTz: true }).nullable();
+    table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+  });
+}
+
+async function ensurePlanActionTable() {
+  const exists = await db.schema.hasTable(PLAN_ACTION_TABLE);
+
+  if (exists) {
+    return;
+  }
+
+  await db.schema.createTable(PLAN_ACTION_TABLE, (table) => {
+    table.increments('id').primary();
+    table.integer('plan_item_id').notNullable().index();
+    table.string('action_type', 120).notNullable();
+    table.text('note').notNullable();
+    table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+  });
+}
+
+async function ensurePlanSourceWorkTable() {
+  const exists = await db.schema.hasTable(PLAN_SOURCE_WORK_TABLE);
+
+  if (exists) {
+    const hasPreviewUrlColumn = await db.schema.hasColumn(PLAN_SOURCE_WORK_TABLE, 'preview_url');
+
+    if (!hasPreviewUrlColumn) {
+      await db.schema.alterTable(PLAN_SOURCE_WORK_TABLE, (table) => {
+        table.string('preview_url', 2000).nullable();
+      });
+    }
+
+    const hasSourceFilesColumn = await db.schema.hasColumn(PLAN_SOURCE_WORK_TABLE, 'source_files');
+
+    if (!hasSourceFilesColumn) {
+      await db.schema.alterTable(PLAN_SOURCE_WORK_TABLE, (table) => {
+        table.text('source_files').notNullable().defaultTo('[]');
+      });
+    }
+    return;
+  }
+
+  await db.schema.createTable(PLAN_SOURCE_WORK_TABLE, (table) => {
+    table.increments('id').primary();
+    table.integer('plan_item_id').notNullable().index();
+    table.text('summary').notNullable();
+    table.string('branch_name', 200).notNullable();
+    table.string('commit_hash', 80).nullable();
+    table.string('preview_url', 2000).nullable();
+    table.text('changed_files').notNullable().defaultTo('[]');
+    table.text('command_log').nullable();
+    table.text('diff_text').nullable();
+    table.text('source_files').notNullable().defaultTo('[]');
+    table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+  });
+}
+
+async function ensurePlanReleaseReviewTable() {
+  const exists = await db.schema.hasTable(PLAN_RELEASE_REVIEW_TABLE);
+
+  if (!exists) {
+    await db.schema.createTable(PLAN_RELEASE_REVIEW_TABLE, (table) => {
+      table.increments('id').primary();
+      table.integer('plan_item_id').notNullable().unique().index();
+      table.string('status', 40).notNullable().defaultTo('pending');
+      table.text('review_note').notNullable().defaultTo('');
+      table.string('checked_by_client_id', 120).nullable();
+      table.string('checked_by_nickname', 80).nullable();
+      table.timestamp('checked_at', { useTz: true }).nullable();
+      table.text('metadata').notNullable().defaultTo('{}');
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['plan_item_id', (table) => table.integer('plan_item_id').notNullable().unique().index()],
+    ['status', (table) => table.string('status', 40).notNullable().defaultTo('pending')],
+    ['review_note', (table) => table.text('review_note').notNullable().defaultTo('')],
+    ['checked_by_client_id', (table) => table.string('checked_by_client_id', 120).nullable()],
+    ['checked_by_nickname', (table) => table.string('checked_by_nickname', 80).nullable()],
+    ['checked_at', (table) => table.timestamp('checked_at', { useTz: true }).nullable()],
+    ['metadata', (table) => table.text('metadata').notNullable().defaultTo('{}')],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(PLAN_RELEASE_REVIEW_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(PLAN_RELEASE_REVIEW_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function ensurePlanTable() {
+  const exists = await db.schema.hasTable(PLAN_TABLE);
+
+  if (!exists) {
+    try {
+      await db.schema.createTable(PLAN_TABLE, (table) => {
+        table.increments('id').primary();
+        table.string('work_id', 120).notNullable().unique();
+        table.text('note').notNullable().defaultTo('');
+        table.string('status', 40).notNullable().defaultTo('등록');
+        table.boolean('jangsing_processing_required').notNullable().defaultTo(true);
+        table.boolean('auto_deploy_to_main').notNullable().defaultTo(true);
+        table.string('assigned_branch', 200).nullable();
+        table.string('release_target', 120).notNullable().defaultTo('release');
+        table.string('worker_status', 80).nullable();
+        table.text('last_error').nullable();
+        table.string('locked_by', 120).nullable();
+        table.timestamp('locked_at', { useTz: true }).nullable();
+        table.timestamp('started_at', { useTz: true }).nullable();
+        table.timestamp('completed_at', { useTz: true }).nullable();
+        table.timestamp('merged_at', { useTz: true }).nullable();
+        table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+        table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      });
+    } catch (error) {
+      const dbError = error as { code?: string };
+
+      if (dbError.code !== '42P07' && dbError.code !== '23505') {
+        throw error;
+      }
+    }
+  }
+
+  await syncPlanColumns();
+  await dropPlanWorkIdUniqueConstraint();
+  await ensurePlanIssueTable();
+  await ensurePlanActionTable();
+  await ensurePlanSourceWorkTable();
+  await ensurePlanReleaseReviewTable();
+  await db(PLAN_TABLE)
+    .whereNull('jangsing_processing_required')
+    .update({
+      jangsing_processing_required: true,
+    });
+  await db(PLAN_TABLE)
+    .whereIn('status', ['작업완료', '릴리즈완료', '완료'] as never[])
+    .whereNull('completed_at')
+    .update({
+      completed_at: db.raw('coalesce(merged_at, updated_at, created_at)'),
+      updated_at: db.fn.now(),
+    });
+  await db(PLAN_TABLE)
+    .where({ status: '이슈' as never })
+    .update({
+      status: '등록',
+      worker_status: db.raw("coalesce(worker_status, '브랜치실패')"),
+      updated_at: db.fn.now(),
+    });
+  await db(PLAN_TABLE)
+    .where({ status: '개발완료' as never })
+    .update({
+      status: '작업완료',
+      worker_status: db.raw("case when worker_status in ('병합대기','병합중') then 'release반영대기' when worker_status='병합완료' then 'main반영완료' else worker_status end"),
+      updated_at: db.fn.now(),
+    });
+  await db(PLAN_TABLE)
+    .whereIn('worker_status', ['release반영완료', 'main반영대기', 'main반영중', 'main반영실패'] as never[])
+    .whereNot({ status: '완료' as never })
+    .update({
+      status: '릴리즈완료',
+      updated_at: db.fn.now(),
+    });
+}
+
+export async function createPlanItem(payload: z.infer<typeof createPlanSchema>) {
+  await ensurePlanTable();
+  const workId = normalizePlanWorkId(payload.workId);
+
+  const rows = await db(PLAN_TABLE)
+    .insert({
+      work_id: workId,
+      note: payload.note,
+      status: '등록',
+      automation_type: normalizePlanAutomationType(payload.automationType),
+      release_target: payload.releaseTarget,
+      jangsing_processing_required: payload.jangsingProcessingRequired,
+      auto_deploy_to_main: payload.autoDeployToMain,
+      repeat_request_enabled: payload.repeatRequestEnabled,
+      repeat_interval_minutes: payload.repeatIntervalMinutes,
+      worker_status: '대기',
+      last_error: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return rows[0];
+}
+
+export async function createCompletedPlanExecutionLogItem(payload: z.infer<typeof createPlanSchema>) {
+  await ensurePlanTable();
+  const workId = normalizePlanWorkId(payload.workId);
+
+  const rows = await db(PLAN_TABLE)
+    .insert({
+      work_id: workId,
+      note: payload.note,
+      status: '완료',
+      automation_type: normalizePlanAutomationType(payload.automationType),
+      release_target: payload.releaseTarget,
+      jangsing_processing_required: payload.jangsingProcessingRequired,
+      auto_deploy_to_main: payload.autoDeployToMain,
+      repeat_request_enabled: payload.repeatRequestEnabled,
+      repeat_interval_minutes: payload.repeatIntervalMinutes,
+      worker_status: '자동완료',
+      last_error: null,
+      started_at: db.fn.now(),
+      completed_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  if (rows[0]?.id) {
+    await syncPlanAutomationUsageSnapshot(Number(rows[0].id));
+  }
+
+  return rows[0];
+}
+
+export async function upsertAutoPlanItem(args: {
+  workId: string;
+  note: string;
+  releaseTarget: string;
+  jangsingProcessingRequired: boolean;
+  autoDeployToMain: boolean;
+  automationType?: PlanAutomationType;
+  requeue: boolean;
+}) {
+  await ensurePlanTable();
+
+  const workId = normalizePlanWorkId(args.workId);
+  const existingRow = await db(PLAN_TABLE)
+    .where({ work_id: workId })
+    .orderBy('id', 'desc')
+    .first();
+
+  if (!existingRow) {
+    return {
+      row: await createPlanItem({
+        workId,
+        note: args.note,
+        automationType: normalizePlanAutomationType(args.automationType),
+        releaseTarget: args.releaseTarget,
+        jangsingProcessingRequired: args.jangsingProcessingRequired,
+        autoDeployToMain: args.autoDeployToMain,
+        repeatRequestEnabled: false,
+        repeatIntervalMinutes: 60,
+      }),
+      action: 'created' as const,
+    };
+  }
+
+  const nextReleaseTarget = args.releaseTarget || existingRow.release_target || 'release';
+  const nextAutomationType = normalizePlanAutomationType(args.automationType ?? existingRow.automation_type);
+  const nextJangsingProcessingRequired = args.jangsingProcessingRequired;
+  const nextAutoDeployToMain = args.autoDeployToMain;
+  const nextNote = args.note;
+  const currentJangsingProcessingRequired =
+    typeof existingRow.jangsing_processing_required === 'boolean'
+      ? existingRow.jangsing_processing_required
+      : existingRow.normal_processing_level === '상';
+  const hasPayloadChange =
+    existingRow.note !== nextNote ||
+    normalizePlanAutomationType(existingRow.automation_type) !== nextAutomationType ||
+    (existingRow.release_target ?? 'release') !== nextReleaseTarget ||
+    Boolean(existingRow.auto_deploy_to_main ?? true) !== nextAutoDeployToMain ||
+    Boolean(currentJangsingProcessingRequired) !== nextJangsingProcessingRequired;
+
+  if (!args.requeue) {
+    if (!hasPayloadChange || existingRow.status !== '등록') {
+      return {
+        row: existingRow,
+        action: 'unchanged' as const,
+      };
+    }
+
+    const rows = await db(PLAN_TABLE)
+      .where({ id: existingRow.id })
+      .update({
+        note: nextNote,
+        automation_type: nextAutomationType,
+        release_target: nextReleaseTarget,
+        jangsing_processing_required: nextJangsingProcessingRequired,
+        auto_deploy_to_main: nextAutoDeployToMain,
+        updated_at: db.fn.now(),
+      })
+      .returning('*');
+
+    return {
+      row: rows[0],
+      action: 'updated' as const,
+    };
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id: existingRow.id })
+    .update({
+      work_id: workId,
+      note: nextNote,
+      status: '등록',
+      assigned_branch: null,
+      automation_type: nextAutomationType,
+      release_target: nextReleaseTarget,
+      jangsing_processing_required: nextJangsingProcessingRequired,
+      auto_deploy_to_main: nextAutoDeployToMain,
+      worker_status: '대기',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      started_at: null,
+      completed_at: null,
+      merged_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await createPlanActionHistory(
+    Number(existingRow.id),
+    '자동갱신',
+    '업무일지 자동화 설정 기준으로 Plan 항목을 최신 상태로 갱신했습니다.',
+  );
+  await syncPlanAutomationUsageSnapshot(Number(existingRow.id));
+
+  return {
+    row: rows[0],
+    action: 'requeued' as const,
+  };
+}
+
+export async function updatePlanItem(id: number, payload: z.infer<typeof updatePlanSchema>) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const nextWorkId =
+    payload.workId === undefined ? currentRow.work_id : normalizePlanWorkId(payload.workId);
+  const nextAutomationType = payload.automationType ?? normalizePlanAutomationType(currentRow.automation_type);
+  const nextReleaseTarget = payload.releaseTarget ?? currentRow.release_target ?? 'release';
+  const nextJangsingProcessingRequired =
+    payload.jangsingProcessingRequired ??
+    (typeof currentRow.jangsing_processing_required === 'boolean'
+      ? currentRow.jangsing_processing_required
+      : currentRow.normal_processing_level === '상');
+  const nextAutoDeployToMain = payload.autoDeployToMain ?? currentRow.auto_deploy_to_main ?? true;
+  const nextRepeatRequestEnabled = payload.repeatRequestEnabled ?? currentRow.repeat_request_enabled ?? false;
+  const nextRepeatIntervalMinutes = payload.repeatIntervalMinutes ?? currentRow.repeat_interval_minutes ?? 60;
+  const nextNote = payload.note ?? currentRow.note;
+
+  const isOnlyJangsingUpdate =
+    nextWorkId === currentRow.work_id &&
+    nextAutomationType === normalizePlanAutomationType(currentRow.automation_type) &&
+    nextReleaseTarget === (currentRow.release_target ?? 'release') &&
+    nextAutoDeployToMain === (currentRow.auto_deploy_to_main ?? true) &&
+    nextRepeatRequestEnabled === (currentRow.repeat_request_enabled ?? false) &&
+    nextRepeatIntervalMinutes === (currentRow.repeat_interval_minutes ?? 60) &&
+    nextNote === currentRow.note;
+
+  if (payload.jangsingProcessingRequired !== undefined && isOnlyJangsingUpdate) {
+    return updatePlanItemJangsingProcessingRequired(id, nextJangsingProcessingRequired);
+  }
+
+  if (currentRow.started_at || currentRow.status !== '등록') {
+    throw new Error('작업시작 이후에는 원본 요청을 수정할 수 없습니다. 추가 조치사항은 이력에 기록해 주세요.');
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      work_id: nextWorkId,
+      note: nextNote,
+      status: currentRow.status,
+      automation_type: nextAutomationType,
+      release_target: nextReleaseTarget,
+      jangsing_processing_required: nextJangsingProcessingRequired,
+      auto_deploy_to_main: nextAutoDeployToMain,
+      repeat_request_enabled: nextRepeatRequestEnabled,
+      repeat_interval_minutes: nextRepeatIntervalMinutes,
+      worker_status: currentRow.worker_status,
+      last_error: currentRow.last_error,
+      completed_at: currentRow.completed_at,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return rows[0];
+}
+
+export async function updatePlanItemJangsingProcessingRequired(
+  id: number,
+  jangsingProcessingRequired: boolean,
+) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  if (!functionCheckEditableStatuses.has(currentRow.status)) {
+    throw new Error('기능동작확인은 작업완료 건만 수정할 수 있습니다.');
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      jangsing_processing_required: jangsingProcessingRequired,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  return rows[0] ?? null;
+}
+
+export async function deletePlanItem(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  await db.transaction(async (trx) => {
+    await trx(PLAN_SOURCE_WORK_TABLE).where({ plan_item_id: id }).delete();
+    await trx(PLAN_ACTION_TABLE).where({ plan_item_id: id }).delete();
+    await trx(PLAN_ISSUE_TABLE).where({ plan_item_id: id }).delete();
+    await trx(PLAN_TABLE).where({ id }).delete();
+  });
+
+  return currentRow;
+}
+
+export async function getBoardPostLinkedToPlanItem(planItemId: number) {
+  const boardPostsTable = 'board_posts';
+  const hasBoardPostsTable = await db.schema.hasTable(boardPostsTable);
+
+  if (!hasBoardPostsTable) {
+    return null;
+  }
+
+  return db(boardPostsTable).select('id', 'title').where({ automation_plan_item_id: planItemId }).first();
+}
+
+export async function markPlanAsDevelopmentComplete(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: '작업완료',
+      jangsing_processing_required: true,
+      worker_status: 'release반영대기',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      completed_at: currentRow.completed_at ?? db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await createPlanLifecycleSourceWorkHistory(
+    id,
+    '작업완료 처리로 release 반영 대기 상태로 전환했습니다.',
+    currentRow.assigned_branch ?? currentRow.release_target ?? 'release',
+    currentRow.assigned_branch
+      ? `현재 작업 브랜치: ${currentRow.assigned_branch}`
+      : `release 대기 브랜치: ${currentRow.release_target ?? 'release'}`,
+  );
+  await createPlanActionHistory(id, '작업완료', '작업완료 처리');
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function markPlanAsCompleted(
+  id: number,
+  note?: string,
+  workerStatus: Extract<PlanWorkerStatus, '자동완료' | 'main반영완료'> = '자동완료',
+) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: '완료',
+      worker_status: workerStatus,
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      completed_at: currentRow.completed_at ?? db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  const sourceWorkCountRow = await db(PLAN_SOURCE_WORK_TABLE)
+    .where({ plan_item_id: id })
+    .count<{ count: string }>('id as count')
+    .first();
+  const sourceWorkCount = Number(sourceWorkCountRow?.count ?? 0);
+
+  if (sourceWorkCount === 0 && !shouldSkipLifecycleSourceWork(currentRow)) {
+    await createPlanLifecycleSourceWorkHistory(
+      id,
+      note ?? '작업 결과를 검토하고 완료 처리했습니다.',
+      currentRow.assigned_branch ?? currentRow.release_target ?? getEnv().PLAN_MAIN_BRANCH,
+      currentRow.assigned_branch
+        ? `완료 기준 브랜치: ${currentRow.assigned_branch}`
+        : `완료 기준 브랜치: ${currentRow.release_target ?? getEnv().PLAN_MAIN_BRANCH}`,
+    );
+  }
+
+  await createPlanActionHistory(id, '완료처리', note ?? '작업을 완료 처리했습니다.');
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function markPlanAsStarted(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: '작업중',
+      worker_status: currentRow.worker_status === '대기' ? null : currentRow.worker_status,
+      last_error: currentRow.last_error,
+      started_at: currentRow.started_at ?? db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await createPlanActionHistory(id, '작업시작', '작업을 시작했습니다.');
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function retryPlanBranch(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: '등록',
+      worker_status: '대기',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await createPlanActionHistory(id, '브랜치재시도', '브랜치 재시도를 요청했습니다.');
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function retryPlanMerge(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const isMainRetry =
+    currentRow.worker_status === 'main반영실패' ||
+    currentRow.worker_status === 'main반영대기' ||
+    currentRow.worker_status === 'main반영중' ||
+    currentRow.status === '릴리즈완료';
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: isMainRetry ? '릴리즈완료' : '작업완료',
+      worker_status: isMainRetry ? 'main반영대기' : 'release반영대기',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await createPlanActionHistory(
+    id,
+    isMainRetry ? 'main반영재시도' : 'release반영재시도',
+    isMainRetry ? 'main 일괄 반영 재시도를 요청했습니다.' : 'release 반영 재시도를 요청했습니다.',
+  );
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function requestPlanMainMerge(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  if (currentRow.status !== '릴리즈완료') {
+    return {
+      item: await getPlanItemById(id),
+      message: 'main 반영 요청은 release 반영이 완료된 이후에만 가능합니다.',
+    };
+  }
+
+  const releaseTarget = String(currentRow.release_target ?? 'release');
+  const pendingRows = await db(PLAN_TABLE)
+    .select('id')
+    .where({ status: '릴리즈완료', release_target: releaseTarget });
+
+  const targetIds = pendingRows.map((row) => Number(row.id)).filter(Number.isFinite);
+
+  await db(PLAN_TABLE)
+    .whereIn('id', targetIds.length > 0 ? targetIds : [id])
+    .update({
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      worker_status: 'main반영대기',
+      updated_at: db.fn.now(),
+    });
+
+  await createPlanActionHistory(
+    id,
+    'main반영요청',
+    `${releaseTarget} 브랜치 기준 main 일괄 반영을 요청했습니다.`,
+  );
+  await Promise.all((targetIds.length > 0 ? targetIds : [id]).map((targetId) => syncPlanAutomationUsageSnapshot(targetId)));
+
+  return {
+    item: await getPlanItemById(id),
+    message: `${releaseTarget} 브랜치 기준으로 ${Math.max(targetIds.length, 1)}건 main 일괄 반영을 요청했습니다.`,
+  };
+}
+
+export async function retryPlanWork(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: '작업중',
+      worker_status: '브랜치준비',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await createPlanActionHistory(id, '작업재처리', '자동 작업 재처리를 요청했습니다.');
+
+  return rows[0];
+}
+
+export async function isPlanLockedByWorker(id: number, workerId: string) {
+  await ensurePlanTable();
+
+  const row = await db(PLAN_TABLE)
+    .select('id')
+    .where({ id, locked_by: workerId })
+    .first();
+
+  return Boolean(row);
+}
+
+export async function resumePlanDevelopmentFromRelease(id: number, actionNote: string) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  if (currentRow.status !== '릴리즈완료') {
+    return {
+      didScheduleRetry: false,
+      item: await getPlanItemById(id),
+      message: null,
+    };
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .update({
+      status: '작업중',
+      worker_status: '브랜치준비',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      merged_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await syncPlanAutomationUsageSnapshot(id);
+
+  await createPlanActionHistory(
+    id,
+    '릴리즈추가조치',
+    `release 상태 추가 조치로 개발을 재개했습니다.\n${actionNote}`,
+  );
+
+  return {
+    didScheduleRetry: false,
+    item: await getPlanItemById(id),
+    message: 'release 상태의 추가 조치를 반영해 추가 개발로 전환했습니다.',
+    row: rows[0],
+  };
+}
+
+export async function queuePlanRetryFromFailure(id: number, actionNote?: string) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  return {
+    didScheduleRetry: false,
+    item: await getPlanItemById(id),
+    message: shouldTriggerRetryFromActionNote(actionNote ?? '')
+      ? '조치 이력을 저장했습니다. 자동 재시작은 하지 않았습니다. 필요하면 재시도 액션을 직접 실행해 주세요.'
+      : '조치 이력을 저장했습니다. 자동화는 중단된 상태로 유지합니다.',
+  };
+}
+
+export function shouldResumePlanDevelopmentFromIssueAction(
+  status: PlanStatus | string | null | undefined,
+  retry: boolean,
+) {
+  return retry && status === '릴리즈완료';
+}
+
+async function queuePlanRetryForCurrentStatus(id: number, workerStatus: string | null | undefined) {
+  if (workerStatus === '자동작업중') {
+    await retryPlanWork(id);
+    return {
+      didScheduleRetry: true,
+      item: await getPlanItemById(id),
+      message: '실행 중인 자동 작업을 정리하고 이슈 조치를 반영하도록 다시 실행합니다.',
+    };
+  }
+
+  if (workerStatus === '브랜치실패') {
+    await retryPlanBranch(id);
+    return {
+      didScheduleRetry: true,
+      item: await getPlanItemById(id),
+      message: '이슈 조치를 반영해 브랜치 재시도를 예약했습니다.',
+    };
+  }
+
+  if (workerStatus === '자동작업실패') {
+    await retryPlanWork(id);
+    return {
+      didScheduleRetry: true,
+      item: await getPlanItemById(id),
+      message: '이슈 조치를 반영해 자동 작업 재처리를 예약했습니다.',
+    };
+  }
+
+  if (workerStatus === 'release반영실패') {
+    await retryPlanMerge(id);
+    return {
+      didScheduleRetry: true,
+      item: await getPlanItemById(id),
+      message: '이슈 조치를 반영해 release 반영 재처리를 예약했습니다.',
+    };
+  }
+
+  if (workerStatus === 'main반영실패') {
+    return {
+      didScheduleRetry: true,
+      ...(await requestPlanMainMerge(id)),
+    };
+  }
+
+  return {
+    didScheduleRetry: false,
+    item: await getPlanItemById(id),
+    message: '이슈 조치 이력을 저장했고 자동 재처리 대상은 없습니다.',
+  };
+}
+
+export async function queuePlanRetryFromIssueAction(id: number, actionNote: string, retry = false) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  if (!retry) {
+    return {
+      didScheduleRetry: false,
+      item: await getPlanItemById(id),
+      message: '이슈 조치 이력을 저장했습니다. 재처리는 요청하지 않았습니다.',
+    };
+  }
+
+  if (shouldResumePlanDevelopmentFromIssueAction(currentRow.status, retry)) {
+    const resumeResult = await resumePlanDevelopmentFromRelease(id, actionNote);
+
+    return {
+      ...resumeResult,
+      didScheduleRetry: Boolean(resumeResult?.message),
+    };
+  }
+
+  return queuePlanRetryForCurrentStatus(id, currentRow.worker_status);
+}
+
+export async function cancelPlanRelease(id: number) {
+  await ensurePlanTable();
+
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const releaseTarget = currentRow.release_target ?? 'release';
+  const isReleaseMergeFailure = currentRow.status === '작업완료' && currentRow.worker_status === 'release반영실패';
+  const targetRows = isReleaseMergeFailure
+    ? []
+    : await db(PLAN_TABLE)
+        .select('*')
+        .where({ release_target: releaseTarget, status: '릴리즈완료' });
+
+  const targetIds = isReleaseMergeFailure
+    ? [id]
+    : [...new Set(targetRows.map((row) => Number(row.id)).concat(id))];
+  const historyMessage = isReleaseMergeFailure
+    ? `release(${releaseTarget}) 반영 실패 상태에서 작업을 취소 처리했습니다.`
+    : `release(${releaseTarget}) 배포 내역을 롤백하고 작업을 취소 처리했습니다.`;
+  const resultMessage = isReleaseMergeFailure
+    ? `release(${releaseTarget}) 반영 실패 상태에서 작업취소로 완료 처리했습니다.`
+    : `release(${releaseTarget}) 배포 내역을 롤백하고 작업취소로 완료 처리했습니다.`;
+
+  if (targetIds.length === 0) {
+    return {
+      item: await getPlanItemById(id),
+      message: '취소할 release 반영 이력이 없습니다.',
+    };
+  }
+
+  await db(PLAN_TABLE)
+    .whereIn('id', targetIds)
+    .update({
+      status: '완료',
+      worker_status: '작업취소',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      completed_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    });
+
+  for (const targetId of targetIds) {
+    await createPlanActionHistory(
+      targetId,
+      '작업취소',
+      historyMessage,
+    );
+
+    const issueRow = await createPlanIssueHistory(
+      targetId,
+      '작업취소',
+      historyMessage,
+    );
+
+    await db(PLAN_ISSUE_TABLE)
+      .where({ id: issueRow.id })
+      .update({
+        resolved: true,
+        resolved_at: db.fn.now(),
+      });
+
+    await syncPlanAutomationUsageSnapshot(targetId);
+  }
+
+  return {
+    item: await getPlanItemById(id),
+    message: resultMessage,
+  };
+}
+
+export async function createPlanActionHistory(planItemId: number, actionType: string, note: string) {
+  await ensurePlanTable();
+
+  const rows = await db(PLAN_ACTION_TABLE)
+    .insert({
+      plan_item_id: planItemId,
+      action_type: actionType,
+      note,
+    })
+    .returning('*');
+
+  return rows[0];
+}
+
+export async function resolveAutomationIssueHistories(planItemId: number) {
+  await ensurePlanTable();
+
+  await db(PLAN_ISSUE_TABLE)
+    .where({ plan_item_id: planItemId, resolved: false })
+    .whereIn('issue_tag', [...automationIssueTags])
+    .update({
+      resolved: true,
+      resolved_at: db.fn.now(),
+    });
+}
+
+export async function listPlanActionHistories(planItemId: number) {
+  await ensurePlanTable();
+
+  return db(PLAN_ACTION_TABLE)
+    .select('*')
+    .where({ plan_item_id: planItemId })
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+}
+
+export async function createPlanSourceWorkHistory(
+  planItemId: number,
+  payload: {
+    summary: string;
+    branchName: string;
+    commitHash?: string | null;
+    previewUrl?: string | null;
+    changedFiles?: string[];
+    commandLog?: string | null;
+    diffText?: string | null;
+    sourceFiles?: Array<{
+      path: string;
+      previousPath?: string | null;
+      status: 'added' | 'modified' | 'deleted' | 'renamed' | 'binary' | 'unknown';
+      language: string;
+      content: string;
+    }>;
+  },
+) {
+  await ensurePlanTable();
+
+  const rawChangedFiles = payload.changedFiles ?? [];
+  const changedFiles = normalizeChangedFiles(rawChangedFiles);
+
+  let filteredChangedFiles = changedFiles;
+
+  if (changedFiles.some((file) => WORKLOG_EVIDENCE_PATH_PATTERN.test(file))) {
+    const rows = await db(PLAN_SOURCE_WORK_TABLE)
+      .select('changed_files')
+      .where({ plan_item_id: planItemId })
+      .orderBy('created_at', 'asc')
+      .orderBy('id', 'asc');
+    const existingChangedFilesList = rows.map((row) => {
+      try {
+        return JSON.parse(String(row.changed_files ?? '[]')) as string[];
+      } catch {
+        return [];
+      }
+    });
+
+    filteredChangedFiles = filterRetryWorklogEvidencePaths(changedFiles, existingChangedFilesList);
+  }
+
+  const rows = await db(PLAN_SOURCE_WORK_TABLE)
+    .insert({
+      plan_item_id: planItemId,
+      summary: payload.summary,
+      branch_name: payload.branchName,
+      commit_hash: payload.commitHash ?? null,
+      preview_url: payload.previewUrl ?? null,
+      changed_files: JSON.stringify(filteredChangedFiles),
+      command_log: payload.commandLog ?? null,
+      diff_text: payload.diffText ?? null,
+      source_files: JSON.stringify(payload.sourceFiles ?? []),
+    })
+    .returning('*');
+
+  await syncPlanAutomationUsageSnapshot(planItemId);
+
+  return rows[0];
+}
+
+async function createPlanLifecycleSourceWorkHistory(
+  planItemId: number,
+  summary: string,
+  branchName: string,
+  commandLog?: string | null,
+  previewUrl?: string | null,
+) {
+  return createPlanSourceWorkHistory(planItemId, {
+    summary,
+    branchName,
+    previewUrl,
+    changedFiles: [],
+    commandLog: commandLog ?? null,
+    diffText: null,
+    sourceFiles: [],
+  });
+}
+
+export async function listPlanSourceWorkHistories(planItemId: number) {
+  await ensurePlanTable();
+
+  return db(PLAN_SOURCE_WORK_TABLE)
+    .select('*')
+    .where({ plan_item_id: planItemId })
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+}
+
+export async function getPlanSourceWorkHistory(planItemId: number, sourceWorkId: number) {
+  await ensurePlanTable();
+
+  return db(PLAN_SOURCE_WORK_TABLE)
+    .select('*')
+    .where({
+      id: sourceWorkId,
+      plan_item_id: planItemId,
+    })
+    .first();
+}
+
+export async function listLatestPlanSourceWorkMap(planItemIds: number[]) {
+  if (planItemIds.length === 0) {
+    return new Map<number, ReturnType<typeof mapPlanSourceWorkRow>>();
+  }
+
+  const rows = await db(PLAN_SOURCE_WORK_TABLE)
+    .select('*')
+    .whereIn('plan_item_id', planItemIds)
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+
+  const latestMap = new Map<number, ReturnType<typeof mapPlanSourceWorkRow>>();
+  const fallbackMap = new Map<number, ReturnType<typeof mapPlanSourceWorkRow>>();
+
+  rows.forEach((row) => {
+    const planItemId = Number(row.plan_item_id);
+    const mappedRow = mapPlanSourceWorkRow(row);
+    const hasMeaningfulChanges = mappedRow.changedFiles.length > 0 || mappedRow.sourceFiles.length > 0;
+
+    if (!fallbackMap.has(planItemId)) {
+      fallbackMap.set(planItemId, mappedRow);
+    }
+
+    if (!latestMap.has(planItemId) && hasMeaningfulChanges) {
+      latestMap.set(planItemId, mappedRow);
+    }
+  });
+
+  planItemIds.forEach((planItemId) => {
+    if (!latestMap.has(planItemId) && fallbackMap.has(planItemId)) {
+      latestMap.set(planItemId, fallbackMap.get(planItemId)!);
+    }
+  });
+
+  return latestMap;
+}
+
+async function listPlanReleaseReviewRowMap(planItemIds: number[]) {
+  if (planItemIds.length === 0) {
+    return new Map<number, Record<string, unknown>>();
+  }
+
+  const rows = await db(PLAN_RELEASE_REVIEW_TABLE)
+    .select('*')
+    .whereIn('plan_item_id', planItemIds)
+    .orderBy('updated_at', 'desc')
+    .orderBy('id', 'desc');
+
+  const reviewMap = new Map<number, Record<string, unknown>>();
+
+  rows.forEach((row) => {
+    const planItemId = Number(row.plan_item_id);
+
+    if (!reviewMap.has(planItemId)) {
+      reviewMap.set(planItemId, row);
+    }
+  });
+
+  return reviewMap;
+}
+
+function summarizePlanReviewText(value: string) {
+  return String(value ?? '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 220);
+}
+
+function inferReleaseReviewPageSelectionIds(changedFiles: string[]) {
+  const selectionIds = new Set<string>(['page:plans:release-review', 'page:plans:release']);
+
+  changedFiles.forEach((file) => {
+    const normalized = String(file ?? '').trim();
+
+    if (!normalized) {
+      return;
+    }
+
+    if (normalized.startsWith('src/features/board/') || normalized.includes('/BoardPage.tsx')) {
+      selectionIds.add('page:plans:board');
+    }
+
+    if (normalized.startsWith('src/features/history/')) {
+      selectionIds.add('page:plans:history');
+    }
+
+    if (normalized.startsWith('src/components/') || normalized.startsWith('src/features/layout/')) {
+      selectionIds.add('page:apis:components');
+    }
+
+    if (normalized.startsWith('src/widgets/')) {
+      selectionIds.add('page:apis:widgets');
+    }
+  });
+
+  return Array.from(selectionIds);
+}
+
+function inferReleaseReviewDocIds(changedFiles: string[]) {
+  return Array.from(
+    new Set(
+      changedFiles
+        .map((file) => {
+          const normalized = String(file ?? '').trim();
+          return normalized.startsWith('docs/') ? normalized.replace(/[^\w-]+/g, '-') : '';
+        })
+        .filter(Boolean),
+    ),
+  );
+}
+
+function toKebabCase(value: string) {
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[_\s]+/g, '-')
+    .toLowerCase();
+}
+
+function extractSampleTargetIds(
+  sourceFiles: Array<{ path: string; content: string }> | undefined,
+  changedFiles: string[],
+  pathPrefix: string,
+) {
+  const targetIds = new Set<string>();
+
+  (sourceFiles ?? []).forEach((sourceFile) => {
+    const normalizedPath = String(sourceFile.path ?? '').trim();
+
+    if (!normalizedPath.startsWith(pathPrefix)) {
+      return;
+    }
+
+    const matches = String(sourceFile.content ?? '').matchAll(/componentId\s*:\s*['"]([^'"]+)['"]/g);
+
+    for (const match of matches) {
+      const targetId = String(match[1] ?? '').trim();
+
+      if (targetId) {
+        targetIds.add(targetId);
+      }
+    }
+  });
+
+  changedFiles.forEach((file) => {
+    const normalized = String(file ?? '').trim();
+
+    if (!normalized.startsWith(pathPrefix)) {
+      return;
+    }
+
+    const relativePath = normalized.slice(pathPrefix.length);
+    const firstSegment = relativePath.split('/').filter(Boolean)[0];
+
+    if (firstSegment) {
+      targetIds.add(toKebabCase(firstSegment));
+    }
+  });
+
+  return Array.from(targetIds);
+}
+
+function inferReleaseReviewComponentIds(
+  sourceFiles: Array<{ path: string; content: string }> | undefined,
+  changedFiles: string[],
+) {
+  return extractSampleTargetIds(sourceFiles, changedFiles, 'src/components/');
+}
+
+function inferReleaseReviewWidgetIds(
+  sourceFiles: Array<{ path: string; content: string }> | undefined,
+  changedFiles: string[],
+) {
+  return extractSampleTargetIds(sourceFiles, changedFiles, 'src/widgets/');
+}
+
+function buildReleaseReviewSummary(
+  row: Record<string, unknown>,
+  latestSourceWork: ReturnType<typeof mapPlanSourceWorkRow> | undefined,
+  reviewRow: Record<string, unknown> | undefined,
+) {
+  const metadata = mapPlanReleaseReviewMetadata(reviewRow?.metadata ?? null);
+  const candidateSummary =
+    metadata.summary ??
+    summarizePlanReviewText(String(latestSourceWork?.summary ?? '')) ??
+    summarizePlanReviewText(String(row.note ?? ''));
+
+  return candidateSummary || summarizePlanReviewText(String(row.note ?? ''));
+}
+
+export async function upsertPlanReleaseReview(
+  planItemId: number,
+  payload: z.infer<typeof updatePlanReleaseReviewSchema>,
+  actor?: {
+    clientId?: string | null;
+    nickname?: string | null;
+  },
+) {
+  await ensurePlanTable();
+
+  const currentItem = await db(PLAN_TABLE).where({ id: planItemId }).first();
+
+  if (!currentItem) {
+    return null;
+  }
+
+  const currentRow = await db(PLAN_RELEASE_REVIEW_TABLE).where({ plan_item_id: planItemId }).first();
+  const currentMetadata = mapPlanReleaseReviewMetadata(currentRow?.metadata ?? null);
+  const nextStatus = payload.status ?? ((currentRow?.status ? String(currentRow.status) : 'pending') as PlanReleaseReviewStatus);
+  const nextReviewNote = payload.reviewNote ?? String(currentRow?.review_note ?? '');
+  const nextMetadata = payload.metadata ? { ...currentMetadata, ...payload.metadata } : currentMetadata;
+  const hasReviewerTrace = nextStatus !== 'pending' || nextReviewNote.trim().length > 0;
+
+  const nextRow = {
+    plan_item_id: planItemId,
+    status: nextStatus,
+    review_note: nextReviewNote,
+    checked_by_client_id: hasReviewerTrace ? actor?.clientId?.trim() || null : null,
+    checked_by_nickname: hasReviewerTrace ? actor?.nickname?.trim() || actor?.clientId?.trim() || null : null,
+    checked_at: hasReviewerTrace ? db.fn.now() : null,
+    metadata: JSON.stringify(nextMetadata),
+    updated_at: db.fn.now(),
+  };
+
+  if (currentRow) {
+    const rows = await db(PLAN_RELEASE_REVIEW_TABLE)
+      .where({ plan_item_id: planItemId })
+      .update(nextRow)
+      .returning('*');
+
+    await syncPlanAutomationUsageSnapshot(planItemId);
+    return mapPlanReleaseReviewRow(rows[0], planItemId);
+  }
+
+  const rows = await db(PLAN_RELEASE_REVIEW_TABLE)
+    .insert({
+      ...nextRow,
+      created_at: db.fn.now(),
+    })
+    .returning('*');
+
+  await syncPlanAutomationUsageSnapshot(planItemId);
+  return mapPlanReleaseReviewRow(rows[0], planItemId);
+}
+
+export async function listPlanReleaseReviewBoardItems(options?: Pick<PlanRowOptions, 'maskNote'>) {
+  await ensurePlanTable();
+
+  const rows = await db(PLAN_TABLE).select('*').orderBy('updated_at', 'desc').orderBy('id', 'desc');
+  const releaseRows = rows.filter((row) => {
+    const workerStatus = String(row.worker_status ?? '');
+    return (
+      row.status === '릴리즈완료' ||
+      row.status === '완료' ||
+      ['release반영중', 'main반영대기', 'main반영중', 'main반영실패', 'release반영완료'].includes(workerStatus)
+    );
+  });
+
+  const planItemIds = releaseRows.map((row) => Number(row.id));
+  const issueSummaryMap = await listPlanIssueSummaries(planItemIds);
+  const latestSourceWorkMap = await listLatestPlanSourceWorkMap(planItemIds);
+  const reviewRowMap = await listPlanReleaseReviewRowMap(planItemIds);
+
+  return releaseRows.map((row) => {
+    const planItemId = Number(row.id);
+    const planItem = mapPlanRow(row, {
+      ...(issueSummaryMap.get(planItemId) ?? { issueTags: [], hasOpenIssues: false }),
+      maskNote: options?.maskNote,
+      noteMasked: options?.maskNote,
+    });
+    const latestSourceWork = latestSourceWorkMap.get(planItemId) ?? null;
+    const reviewRow = reviewRowMap.get(planItemId);
+    const review = mapPlanReleaseReviewRow(reviewRow, planItemId);
+    const changedFiles = latestSourceWork?.changedFiles ?? [];
+    const sourceFiles = latestSourceWork?.sourceFiles ?? [];
+    const metadata = {
+      ...review.metadata,
+      summary: review.metadata.summary ?? buildReleaseReviewSummary(row, latestSourceWork ?? undefined, reviewRow),
+      pageSelectionIds: review.metadata.pageSelectionIds ?? inferReleaseReviewPageSelectionIds(changedFiles),
+      docIds: review.metadata.docIds ?? inferReleaseReviewDocIds(changedFiles),
+      componentIds: review.metadata.componentIds ?? inferReleaseReviewComponentIds(sourceFiles, changedFiles),
+      widgetIds: review.metadata.widgetIds ?? inferReleaseReviewWidgetIds(sourceFiles, changedFiles),
+    };
+
+    return {
+      planItem,
+      review: {
+        ...review,
+        metadata,
+      },
+      latestSourceWork,
+    };
+  });
+}
+
+export async function createPlanIssueHistory(
+  planItemId: number,
+  issueTag: string,
+  message: string,
+) {
+  await ensurePlanTable();
+
+  const normalizedIssueTag = issueTag.startsWith('#') ? issueTag : `#${issueTag}`;
+  const previousIssueWithAction = await db(PLAN_ISSUE_TABLE)
+    .select('*')
+    .where({
+      plan_item_id: planItemId,
+      issue_tag: normalizedIssueTag,
+      message,
+    })
+    .whereNotNull('action_note')
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc')
+    .first();
+
+  const rows = await db(PLAN_ISSUE_TABLE)
+    .insert({
+      plan_item_id: planItemId,
+      issue_tag: normalizedIssueTag,
+      message,
+      action_note: previousIssueWithAction?.action_note ?? null,
+    })
+    .returning('*');
+
+  return rows[0];
+}
+
+export async function appendLatestIssueAction(planItemId: number, actionNote: string, resolve = false) {
+  await ensurePlanTable();
+
+  const issueRow = await db(PLAN_ISSUE_TABLE)
+    .where({ plan_item_id: planItemId })
+    .orderBy('resolved', 'asc')
+    .orderBy('created_at', 'desc')
+    .first();
+
+  if (!issueRow) {
+    throw new Error('기록할 이슈 이력이 없습니다.');
+  }
+
+  const nextActionNote = issueRow.action_note
+    ? `${issueRow.action_note}\n[${new Date().toISOString()}] ${actionNote}`
+    : `[${new Date().toISOString()}] ${actionNote}`;
+
+  const rows = await db(PLAN_ISSUE_TABLE)
+    .where({ id: issueRow.id })
+    .update({
+      action_note: nextActionNote,
+      resolved: resolve ? true : issueRow.resolved,
+      resolved_at: resolve ? db.fn.now() : issueRow.resolved_at,
+    })
+    .returning('*');
+
+  await createPlanActionHistory(
+    planItemId,
+    resolve ? '이슈해결조치' : '이슈조치',
+    actionNote,
+  );
+
+  return rows[0];
+}
+
+export async function listPlanIssueHistories(planItemId: number) {
+  await ensurePlanTable();
+  await ensurePlanFailureIssueHistory(planItemId);
+
+  return db(PLAN_ISSUE_TABLE)
+    .select('*')
+    .where({ plan_item_id: planItemId })
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+}
+
+export async function listPlanIssueSummaries(planItemIds: number[]) {
+  await ensurePlanTable();
+
+  if (planItemIds.length === 0) {
+    return new Map<number, { issueTags: string[]; hasOpenIssues: boolean }>();
+  }
+
+  for (const planItemId of planItemIds) {
+    await ensurePlanFailureIssueHistory(planItemId);
+  }
+
+  const rows = await db(PLAN_ISSUE_TABLE)
+    .select('*')
+    .whereIn('plan_item_id', planItemIds)
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+
+  const summaryMap = new Map<number, { issueTags: string[]; hasOpenIssues: boolean }>();
+
+  rows.forEach((row) => {
+    const planItemId = Number(row.plan_item_id);
+    const current = summaryMap.get(planItemId) ?? { issueTags: [], hasOpenIssues: false };
+
+    if (!row.resolved && typeof row.issue_tag === 'string' && !current.issueTags.includes(row.issue_tag)) {
+      current.issueTags.push(row.issue_tag);
+    }
+
+    if (!row.resolved) {
+      current.hasOpenIssues = true;
+    }
+
+    summaryMap.set(planItemId, current);
+  });
+
+  return summaryMap;
+}
+
+export async function claimNextPlanForBranch(workerId: string) {
+  await ensurePlanTable();
+  const env = getEnv();
+
+  return db.transaction(async (trx) => {
+    const row = await trx(PLAN_TABLE)
+      .select('*')
+      .where({ status: '등록' })
+      .where((builder) => {
+        builder.whereNull('worker_status').orWhere('worker_status', '대기');
+      })
+      .orderBy('created_at', 'asc')
+      .forUpdate()
+      .skipLocked()
+      .first();
+
+    if (!row) {
+      return null;
+    }
+
+    const assignedBranch = env.PLAN_LOCAL_MAIN_MODE ? env.PLAN_MAIN_BRANCH : buildPlanBranchName(String(row.work_id), Number(row.id));
+    const rows = await trx(PLAN_TABLE)
+      .where({ id: row.id })
+      .update({
+        status: '작업중',
+        assigned_branch: assignedBranch,
+        worker_status: '브랜치생성중',
+        last_error: null,
+        locked_by: workerId,
+        locked_at: db.fn.now(),
+        started_at: row.started_at ?? db.fn.now(),
+        updated_at: db.fn.now(),
+      })
+      .returning('*');
+
+    return rows[0];
+  });
+}
+
+export async function claimNextPlanForExecution(workerId: string) {
+  await ensurePlanTable();
+
+  return db.transaction(async (trx) => {
+    const row = await trx(PLAN_TABLE)
+      .select('*')
+      .where({ status: '작업중', worker_status: '브랜치준비' })
+      .whereNotNull('assigned_branch')
+      .orderBy('updated_at', 'asc')
+      .forUpdate()
+      .skipLocked()
+      .first();
+
+    if (!row) {
+      return null;
+    }
+
+    const rows = await trx(PLAN_TABLE)
+      .where({ id: row.id })
+      .update({
+        worker_status: '자동작업중',
+        last_error: null,
+        locked_by: workerId,
+        locked_at: db.fn.now(),
+        updated_at: db.fn.now(),
+      })
+      .returning('*');
+
+    return rows[0];
+  });
+}
+
+export async function claimNextPlanForMerge(workerId: string) {
+  await ensurePlanTable();
+
+  return db.transaction(async (trx) => {
+    const row = await trx(PLAN_TABLE)
+      .select('*')
+      .where({ status: '작업완료' })
+      .whereNotNull('assigned_branch')
+      .where((builder) => {
+        builder.whereNull('worker_status').orWhere('worker_status', 'release반영대기');
+      })
+      .orderBy('updated_at', 'asc')
+      .forUpdate()
+      .skipLocked()
+      .first();
+
+    if (!row) {
+      return null;
+    }
+
+    const rows = await trx(PLAN_TABLE)
+      .where({ id: row.id })
+      .update({
+        worker_status: 'release반영중',
+        last_error: null,
+        locked_by: workerId,
+        locked_at: db.fn.now(),
+        updated_at: db.fn.now(),
+      })
+      .returning('*');
+
+    return rows[0];
+  });
+}
+
+export async function claimNextPlanForMainMerge(workerId: string) {
+  await ensurePlanTable();
+
+  return db.transaction(async (trx) => {
+    const candidateRows = await trx(PLAN_TABLE)
+      .select('*')
+      .where({ status: '릴리즈완료', worker_status: 'main반영대기' })
+      .whereNotNull('assigned_branch')
+      .orderBy('updated_at', 'asc')
+      .forUpdate();
+
+    const row = candidateRows[0];
+
+    if (!row) {
+      return null;
+    }
+
+    const pendingReleaseRow = await trx(PLAN_TABLE)
+      .select('id')
+      .where({ release_target: row.release_target, status: '작업완료' })
+      .first();
+
+    if (pendingReleaseRow) {
+      return null;
+    }
+
+    const batchRows = await trx(PLAN_TABLE)
+      .select('id')
+      .where({ status: '릴리즈완료', release_target: row.release_target })
+      .whereIn('worker_status', ['main반영대기', 'main반영실패'] as never[]);
+
+    const batchIds = batchRows.map((candidate) => Number(candidate.id)).filter(Number.isFinite);
+
+    const rows = await trx(PLAN_TABLE)
+      .whereIn('id', batchIds.length > 0 ? batchIds : [Number(row.id)])
+      .update({
+        worker_status: 'main반영중',
+        last_error: null,
+        locked_by: workerId,
+        locked_at: db.fn.now(),
+        updated_at: db.fn.now(),
+      })
+      .returning('*');
+
+    return rows[0] ?? null;
+  });
+}
+
+export async function markPlanBranchReady(id: number, workerId: string) {
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .where({ locked_by: workerId })
+    .update({
+      worker_status: '브랜치준비',
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  if (!rows[0]) {
+    return null;
+  }
+
+  return rows[0];
+}
+
+export async function markPlanWorkCompleted(id: number, workerId: string, note?: string) {
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .where({ locked_by: workerId })
+    .update({
+      status: '작업완료',
+      jangsing_processing_required: true,
+      worker_status: 'release반영대기',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  if (!rows[0]) {
+    return null;
+  }
+
+  if (currentRow) {
+    await createPlanLifecycleSourceWorkHistory(
+      id,
+      '자동 작업 완료로 release 반영 대기 상태로 전환했습니다.',
+      currentRow.assigned_branch ?? currentRow.release_target ?? 'release',
+      currentRow.assigned_branch
+        ? `현재 작업 브랜치: ${currentRow.assigned_branch}`
+        : `release 대기 브랜치: ${currentRow.release_target ?? 'release'}`,
+    );
+  }
+  await createPlanActionHistory(id, '작업완료', note ?? '자동 작업을 마치고 release 반영을 대기합니다.');
+  await resolveAutomationIssueHistories(id);
+
+  return rows[0];
+}
+
+export async function markPlanReleaseMerged(id: number, workerId: string) {
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+  const autoDeployToMain = Boolean(currentRow?.auto_deploy_to_main ?? true);
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .where({ locked_by: workerId })
+    .update({
+      status: '릴리즈완료',
+      worker_status: autoDeployToMain ? 'main반영대기' : 'release반영완료',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  if (!rows[0]) {
+    return null;
+  }
+
+  if (currentRow) {
+    await createPlanLifecycleSourceWorkHistory(
+      id,
+      'release 브랜치 반영을 완료했습니다.',
+      currentRow.release_target ?? 'release',
+      `release 브랜치: ${currentRow.release_target ?? 'release'}`,
+    );
+  }
+  await createPlanActionHistory(
+    id,
+    'release반영완료',
+    autoDeployToMain
+      ? 'release 브랜치 반영을 완료했고 main 자동 반영을 예약했습니다.'
+      : 'release 브랜치 반영을 완료했습니다.',
+  );
+  await resolveAutomationIssueHistories(id);
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function markPlanMerged(id: number, workerId: string) {
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow || currentRow.locked_by !== workerId) {
+    return null;
+  }
+
+  const batchRows = await db(PLAN_TABLE)
+    .select('*')
+    .where({ status: '릴리즈완료', release_target: currentRow.release_target })
+    .whereIn('worker_status', ['main반영대기', 'main반영중', 'main반영실패'] as never[]);
+
+  const batchIds = batchRows.map((row) => Number(row.id)).filter(Number.isFinite);
+  const targetRows = batchRows.length > 0 ? batchRows : [currentRow];
+
+  const rows = await db(PLAN_TABLE)
+    .whereIn('id', batchIds.length > 0 ? batchIds : [id])
+    .update({
+      status: '완료',
+      worker_status: 'main반영완료',
+      last_error: null,
+      locked_by: null,
+      locked_at: null,
+      merged_at: db.fn.now(),
+      completed_at: db.fn.now(),
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  for (const row of targetRows) {
+    const planId = Number(row.id);
+    await createPlanLifecycleSourceWorkHistory(
+      planId,
+      `${getEnv().PLAN_MAIN_BRANCH} 브랜치 반영을 완료했습니다.`,
+      getEnv().PLAN_MAIN_BRANCH,
+      `${row.release_target ?? 'release'} -> ${getEnv().PLAN_MAIN_BRANCH}`,
+    );
+    await createPlanActionHistory(
+      planId,
+      'main반영완료',
+      `${row.release_target ?? 'release'} 브랜치를 ${getEnv().PLAN_MAIN_BRANCH} 브랜치에 일괄 반영 완료했습니다.`,
+    );
+    await resolveAutomationIssueHistories(planId);
+    await syncPlanAutomationUsageSnapshot(planId);
+  }
+
+  return {
+    mergedRow: rows[0] ?? null,
+    notificationRows: targetRows,
+  };
+}
+
+export async function markPlanMainMergeFailure(releaseTarget: string, workerId: string, errorMessage: string) {
+  await ensurePlanTable();
+
+  const rows = await db(PLAN_TABLE)
+    .where({ status: '릴리즈완료', release_target: releaseTarget, locked_by: workerId })
+    .whereIn('worker_status', ['main반영대기', 'main반영중'] as never[])
+    .update({
+      worker_status: 'main반영실패',
+      last_error: errorMessage,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  for (const row of rows) {
+    await createPlanActionHistory(
+      Number(row.id),
+      'main반영실패',
+      `${releaseTarget} 브랜치 기준 main 일괄 반영에 실패했습니다.`,
+    );
+    await syncPlanAutomationUsageSnapshot(Number(row.id));
+  }
+
+  return rows;
+}
+
+export async function markPlanAutomationFailure(
+  id: number,
+  workerId: string,
+  workerStatus: Extract<PlanWorkerStatus, '브랜치실패' | '자동작업실패' | 'release반영실패' | 'main반영실패'>,
+  errorMessage: string,
+) {
+  const currentRow = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!currentRow) {
+    return null;
+  }
+
+  const nextStatus =
+    workerStatus === '브랜치실패'
+      ? '등록'
+      : workerStatus === '자동작업실패'
+        ? '작업중'
+        : workerStatus === 'main반영실패'
+          ? '릴리즈완료'
+          : '작업완료';
+  const rows = await db(PLAN_TABLE)
+    .where({ id })
+    .where({ locked_by: workerId })
+    .update({
+      status: nextStatus,
+      worker_status: workerStatus,
+      last_error: errorMessage,
+      locked_by: null,
+      locked_at: null,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  if (!rows[0]) {
+    return null;
+  }
+
+  const issueHistory = await createPlanIssueHistory(id, workerStatus, errorMessage);
+
+  if (issueHistory?.action_note) {
+    await createPlanActionHistory(
+      id,
+      '오류재발',
+      `동일 오류가 다시 발생했습니다.\n기존 조치내역:\n${issueHistory.action_note}`,
+    );
+  }
+
+  await syncPlanAutomationUsageSnapshot(id);
+
+  return rows[0];
+}
+
+export async function listPlanItems(status?: PlanStatus, options?: Pick<PlanRowOptions, 'maskNote'>) {
+  await ensurePlanTable();
+
+  const buildListQuery = () => {
+    const builder = db(PLAN_TABLE).select('*').orderBy('id', 'desc');
+
+    if (status) {
+      builder.where('status', status);
+    }
+
+    return builder;
+  };
+
+  let rows = await buildListQuery();
+  const missingSnapshotIds = rows
+    .filter((row) => row.usage_snapshot === null || row.usage_snapshot === undefined || String(row.usage_snapshot).trim() === '')
+    .map((row) => Number(row.id))
+    .filter(Number.isFinite);
+
+  if (missingSnapshotIds.length > 0) {
+    await Promise.all(missingSnapshotIds.map((planItemId) => syncPlanAutomationUsageSnapshot(planItemId)));
+    rows = await buildListQuery();
+  }
+
+  const planItemIds = rows.map((row) => Number(row.id));
+  const issueSummaryMap = await listPlanIssueSummaries(planItemIds);
+  const releaseReviewNoteMap = await listPlanReleaseReviewNoteMap(planItemIds);
+
+  return rows.map((row) =>
+    mapPlanRow(row, {
+      ...(issueSummaryMap.get(Number(row.id)) ?? { issueTags: [], hasOpenIssues: false }),
+      maskNote: options?.maskNote,
+      noteMasked: options?.maskNote,
+      releaseReviewNote: releaseReviewNoteMap.get(Number(row.id)) ?? '',
+    }),
+  );
+}
+
+export async function getPlanItemById(id: number, options?: Pick<PlanRowOptions, 'maskNote'>) {
+  await ensurePlanTable();
+  await ensurePlanFailureIssueHistory(id);
+  let row = await db(PLAN_TABLE).where({ id }).first();
+
+  if (!row) {
+    return null;
+  }
+
+  if (row.usage_snapshot === null || row.usage_snapshot === undefined || String(row.usage_snapshot).trim() === '') {
+    await syncPlanAutomationUsageSnapshot(id);
+    row = await db(PLAN_TABLE).where({ id }).first();
+  }
+
+  const issueSummaryMap = await listPlanIssueSummaries([id]);
+  const releaseReviewNoteMap = await listPlanReleaseReviewNoteMap([id]);
+  return mapPlanRow(row, {
+    ...(issueSummaryMap.get(id) ?? { issueTags: [], hasOpenIssues: false }),
+    maskNote: options?.maskNote,
+    noteMasked: options?.maskNote,
+    releaseReviewNote: releaseReviewNoteMap.get(id) ?? '',
+  });
+}
+
+function normalizePreviewLookupValue(value: string | null | undefined, stripSearch = false) {
+  const trimmed = String(value ?? '').trim();
+
+  if (!trimmed) {
+    return '';
+  }
+
+  try {
+    const url = new URL(trimmed);
+    url.hash = '';
+
+    if (stripSearch) {
+      url.search = '';
+    }
+
+    return url.toString().replace(/\/+$/, '');
+  } catch {
+    const withoutHash = trimmed.replace(/#.*$/, '');
+    const withoutSearch = stripSearch ? withoutHash.replace(/\?.*$/, '') : withoutHash;
+    return withoutSearch.replace(/\/+$/, '');
+  }
+}
+
+function buildPreviewLookupCandidates(value: string | null | undefined) {
+  return Array.from(
+    new Set([
+      normalizePreviewLookupValue(value, false),
+      normalizePreviewLookupValue(value, true),
+    ].filter(Boolean)),
+  );
+}
+
+export async function findLatestPlanItem() {
+  await ensurePlanTable();
+
+  const row = await db(PLAN_TABLE).select('id').orderBy('id', 'desc').first();
+
+  if (!row?.id) {
+    return null;
+  }
+
+  return getPlanItemById(Number(row.id));
+}
+
+export async function findPlanItemByWorkId(workId: string) {
+  await ensurePlanTable();
+
+  const normalizedWorkId = normalizePlanWorkId(workId);
+
+  if (normalizedWorkId === '작업ID') {
+    return null;
+  }
+
+  const rows = await db(PLAN_TABLE)
+    .select('id', 'work_id')
+    .orderBy('id', 'desc');
+
+  const matchedRow = rows.find((row) => normalizePlanWorkId(String(row.work_id ?? '')) === normalizedWorkId);
+
+  if (!matchedRow?.id) {
+    return null;
+  }
+
+  return getPlanItemById(Number(matchedRow.id));
+}
+
+export async function findPlanItemByPreviewUrl(previewUrl: string) {
+  await ensurePlanTable();
+
+  const lookupCandidates = new Set(buildPreviewLookupCandidates(previewUrl));
+
+  if (lookupCandidates.size === 0) {
+    return null;
+  }
+
+  const rows = await db(PLAN_SOURCE_WORK_TABLE)
+    .select('plan_item_id', 'preview_url')
+    .whereNotNull('preview_url')
+    .orderBy('created_at', 'desc')
+    .orderBy('id', 'desc');
+
+  const matchedRow = rows.find((row) =>
+    buildPreviewLookupCandidates(String(row.preview_url ?? '')).some((candidate) => lookupCandidates.has(candidate)),
+  );
+
+  if (!matchedRow?.plan_item_id) {
+    return null;
+  }
+
+  return getPlanItemById(Number(matchedRow.plan_item_id));
+}
diff --git a/etc/servers/work-server/src/services/server-command-service.test.ts b/etc/servers/work-server/src/services/server-command-service.test.ts
new file mode 100644
index 0000000..d86d4ce
--- /dev/null
+++ b/etc/servers/work-server/src/services/server-command-service.test.ts
@@ -0,0 +1,242 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { EventEmitter } from 'node:events';
+import { writeFile } from 'node:fs/promises';
+import { env } from '../config/env.js';
+import {
+  buildHealthCheckUrls,
+  buildRestartFailureMessage,
+  buildServerCommandApiRestartUrl,
+  listServerCommands,
+  resolveDockerSocketPath,
+  restartServerCommand,
+} from './server-command-service.js';
+
+test('buildRestartFailureMessage includes exit info and stderr output', () => {
+  const message = buildRestartFailureMessage(
+    'TEST',
+    Object.assign(new Error('Command failed'), {
+      code: 1,
+      stderr: 'no such service: app',
+      stdout: '',
+    }),
+  );
+
+  assert.match(message, /TEST 재기동에 실패했습니다\./);
+  assert.match(message, /exit:1/);
+  assert.match(message, /no such service: app/);
+});
+
+test('listServerCommands uses app as the default test restart service', async () => {
+  const commands = await listServerCommands();
+  const testCommand = commands.find((item) => item.key === 'test');
+
+  assert.ok(testCommand);
+  assert.equal(testCommand.serviceName, 'app');
+});
+
+test('listServerCommands resolves restart script from main project when project root fallback is needed', async () => {
+  const commands = await listServerCommands();
+  const testCommand = commands.find((item) => item.key === 'test');
+
+  assert.ok(testCommand);
+  assert.match(testCommand.commandScript, /\/etc\/commands\/server-command\/restart-test\.sh$/);
+  assert.notEqual(testCommand.commandScript, '/etc/commands/server-command/restart-test.sh');
+});
+
+test('test and release restart scripts fall back to Docker socket when docker CLI is unavailable', () => {
+  const commandsRoot = new URL('../../../../commands/server-command/', import.meta.url);
+  const testScript = fs.readFileSync(new URL('restart-test.sh', commandsRoot), 'utf8');
+  const relScript = fs.readFileSync(new URL('restart-rel.sh', commandsRoot), 'utf8');
+  const workServerScript = fs.readFileSync(new URL('restart-work-server.sh', commandsRoot), 'utf8');
+  const socketRestartScript = fs.readFileSync(new URL('restart-via-docker-socket.mjs', commandsRoot), 'utf8');
+
+  assert.match(testScript, /command -v docker >/);
+  assert.match(testScript, /docker compose -f "\$SERVER_COMMAND_COMPOSE_FILE" restart "\$SERVER_COMMAND_SERVICE"/);
+  assert.match(testScript, /docker compose -f "\$SERVER_COMMAND_COMPOSE_FILE" up -d --no-deps "\$SERVER_COMMAND_SERVICE"/);
+  assert.match(testScript, /restart-via-docker-socket\.mjs/);
+  assert.match(testScript, /SERVER_COMMAND_CONTAINER_NAME="\$\{SERVER_COMMAND_CONTAINER_NAME:-ai-code-app-app-1\}"/);
+  assert.match(relScript, /command -v docker >/);
+  assert.match(relScript, /docker compose -f "\$SERVER_COMMAND_COMPOSE_FILE" restart "\$SERVER_COMMAND_SERVICE"/);
+  assert.match(relScript, /docker compose -f "\$SERVER_COMMAND_COMPOSE_FILE" up -d --no-deps "\$SERVER_COMMAND_SERVICE"/);
+  assert.match(relScript, /restart-via-docker-socket\.mjs/);
+  assert.match(relScript, /SERVER_COMMAND_CONTAINER_NAME="\$\{SERVER_COMMAND_CONTAINER_NAME:-ai-code-app-release\}"/);
+  assert.match(
+    workServerScript,
+    /docker compose -f etc\/servers\/work-server\/docker-compose\.yml up -d --build --force-recreate --no-deps work-server/,
+  );
+  assert.match(socketRestartScript, /\/containers\/\$\{encodeURIComponent\(containerName\)\}\/restart\?t=30/);
+});
+
+test('work-server package dev script does not use watch mode and rebuilds before start', async () => {
+  const packageJsonPath = new URL('../../package.json', import.meta.url);
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')) as {
+    scripts?: Record<string, string>;
+  };
+
+  assert.equal(packageJson.scripts?.dev, 'npm run build && npm run start');
+  assert.doesNotMatch(String(packageJson.scripts?.dev ?? ''), /\bwatch\b/i);
+});
+
+test('buildServerCommandApiRestartUrl replaces key placeholders on configured command api endpoint', () => {
+  assert.equal(
+    buildServerCommandApiRestartUrl('http://127.0.0.1:3200/', '/commands/{key}/restart', 'work-server'),
+    'http://127.0.0.1:3200/commands/work-server/restart',
+  );
+});
+
+test('buildServerCommandApiRestartUrl avoids duplicating an existing base path prefix', () => {
+  assert.equal(
+    buildServerCommandApiRestartUrl(
+      'http://127.0.0.1:3211/api',
+      '/api/server-commands/{key}/actions/restart',
+      'test',
+    ),
+    'http://127.0.0.1:3211/api/server-commands/test/actions/restart',
+  );
+});
+
+test('buildHealthCheckUrls adds localhost fallbacks for command-runner', () => {
+  assert.deepEqual(buildHealthCheckUrls('command-runner', 'http://host.docker.internal:3211/health'), [
+    'http://host.docker.internal:3211/health',
+    'http://127.0.0.1:3211/health',
+    'http://localhost:3211/health',
+  ]);
+  assert.deepEqual(buildHealthCheckUrls('work-server', 'http://host.docker.internal:3100/health'), [
+    'http://host.docker.internal:3100/health',
+  ]);
+});
+
+test('resolveDockerSocketPath prefers explicit socket path and falls back to unix DOCKER_HOST', () => {
+  assert.equal(
+    resolveDockerSocketPath({
+      SERVER_COMMAND_DOCKER_SOCKET: '/custom/docker.sock',
+      DOCKER_HOST: 'unix:///run/user/1000/docker.sock',
+    }),
+    '/custom/docker.sock',
+  );
+
+  assert.equal(
+    resolveDockerSocketPath({
+      DOCKER_HOST: 'unix:///run/user/1000/docker.sock',
+    }),
+    '/run/user/1000/docker.sock',
+  );
+});
+
+test('restartServerCommand delegates to configured command api when base url is provided', async (t) => {
+  const originalBaseUrl = env.SERVER_COMMAND_API_BASE_URL;
+  const originalAccessToken = env.SERVER_COMMAND_API_ACCESS_TOKEN;
+  const originalPathTemplate = env.SERVER_COMMAND_API_RESTART_PATH_TEMPLATE;
+
+  env.SERVER_COMMAND_API_BASE_URL = 'http://127.0.0.1:3200/api';
+  env.SERVER_COMMAND_API_ACCESS_TOKEN = 'local-command-token';
+  env.SERVER_COMMAND_API_RESTART_PATH_TEMPLATE = '/commands/{key}/restart';
+
+  const fetchMock = t.mock.method(globalThis, 'fetch', async (input: string | URL | Request, init?: RequestInit) => {
+    assert.equal(String(input), 'http://127.0.0.1:3200/api/commands/test/restart');
+    assert.equal(init?.method, 'POST');
+    const headers = new Headers(init?.headers);
+    assert.equal(headers.get('X-Access-Token'), 'local-command-token');
+
+    return new Response(
+      JSON.stringify({
+        restartState: 'accepted',
+        item: {
+          key: 'test',
+          label: 'TEST',
+          composeStatus: 'restarting',
+        },
+        commandOutput: 'restart accepted',
+      }),
+      {
+        status: 200,
+        headers: {
+          'content-type': 'application/json',
+        },
+      },
+    );
+  });
+
+  try {
+    const result = await restartServerCommand('test');
+
+    assert.equal(fetchMock.mock.callCount(), 1);
+    assert.equal(result.restartState, 'accepted');
+    assert.equal(result.commandOutput, 'restart accepted');
+    assert.equal(result.server.key, 'test');
+    assert.equal(result.server.composeStatus, 'restarting');
+  } finally {
+    env.SERVER_COMMAND_API_BASE_URL = originalBaseUrl;
+    env.SERVER_COMMAND_API_ACCESS_TOKEN = originalAccessToken;
+    env.SERVER_COMMAND_API_RESTART_PATH_TEMPLATE = originalPathTemplate;
+  }
+});
+
+test('restartServerCommand surfaces deferred restart script failures for work-server', async (t) => {
+  const originalBaseUrl = env.SERVER_COMMAND_API_BASE_URL;
+  env.SERVER_COMMAND_API_BASE_URL = '';
+  const childProcessModule = (await import('node:child_process')) as { spawn: (...args: unknown[]) => unknown };
+
+  const spawnMock = t.mock.method(
+    childProcessModule,
+    'spawn',
+    (...spawnArgs: unknown[]) => {
+      const args = Array.isArray(spawnArgs[1]) ? (spawnArgs[1] as string[]) : [];
+      const shellCommand = String(args[1] ?? '');
+      const logPath = shellCommand.match(/>"([^"]+\.log)"/)?.[1] ?? '';
+      const statusPath = shellCommand.match(/>"([^"]+\.status)"/)?.[1] ?? '';
+
+      queueMicrotask(() => {
+        void writeFile(statusPath, '1', 'utf8');
+        void writeFile(logPath, 'docker compose failed', 'utf8');
+      });
+
+      const child = new EventEmitter() as EventEmitter & { unref(): void };
+      child.unref = () => undefined;
+      queueMicrotask(() => {
+        child.emit('spawn');
+      });
+      return child;
+    },
+  );
+
+  try {
+    await assert.rejects(() => restartServerCommand('work-server'), /WORK-SERVER 재기동에 실패했습니다\./);
+    assert.equal(spawnMock.mock.callCount(), 1);
+  } finally {
+    env.SERVER_COMMAND_API_BASE_URL = originalBaseUrl;
+  }
+});
+
+test('listServerCommands marks command-runner online when localhost fallback responds', async (t) => {
+  const fetchMock = t.mock.method(globalThis, 'fetch', async (input: string | URL | Request) => {
+    const url = String(input);
+
+    if (url === 'http://host.docker.internal:3211/health') {
+      throw new Error('fetch failed');
+    }
+
+    if (url === 'http://127.0.0.1:3211/health') {
+      return new Response(JSON.stringify({ ok: true, service: 'server-command-runner' }), {
+        status: 200,
+        headers: {
+          'content-type': 'application/json',
+        },
+      });
+    }
+
+    return new Response('ok', { status: 200 });
+  });
+
+  const commands = await listServerCommands();
+  const runnerCommand = commands.find((item) => item.key === 'command-runner');
+
+  assert.ok(runnerCommand);
+  assert.equal(fetchMock.mock.calls.some((call) => String(call.arguments[0]) === 'http://host.docker.internal:3211/health'), true);
+  assert.equal(fetchMock.mock.calls.some((call) => String(call.arguments[0]) === 'http://127.0.0.1:3211/health'), true);
+  assert.equal(runnerCommand.availability, 'online');
+  assert.equal(runnerCommand.httpStatus, 200);
+  assert.match(String(runnerCommand.errorMessage ?? ''), /fallback health check succeeded via http:\/\/127\.0\.0\.1:3211\/health/);
+});
diff --git a/etc/servers/work-server/src/services/server-command-service.ts b/etc/servers/work-server/src/services/server-command-service.ts
new file mode 100755
index 0000000..d33db28
--- /dev/null
+++ b/etc/servers/work-server/src/services/server-command-service.ts
@@ -0,0 +1,1121 @@
+import { execFile, spawn } from 'node:child_process';
+import fs from 'node:fs';
+import { readFile, rm, stat } from 'node:fs/promises';
+import path from 'node:path';
+import { promisify } from 'node:util';
+import { env } from '../config/env.js';
+import {
+  getRuntimeWorkServerBuildInfo,
+  readLatestWorkServerBuildInfo,
+  readLatestWorkServerSourceChange,
+} from './work-server-build-service.js';
+
+const execFileAsync = promisify(execFile);
+
+export const serverCommandKeys = ['test', 'rel', 'work-server', 'command-runner'] as const;
+
+export type ServerCommandKey = (typeof serverCommandKeys)[number];
+
+type ServerDefinition = {
+  key: ServerCommandKey;
+  label: string;
+  summary: string;
+  environment: string;
+  publicUrl: string | null;
+  checkUrl: string;
+  composeFile: string;
+  serviceName: string;
+  containerName: string;
+  commandScript: string;
+  commandWorkingDirectory: string;
+  commandEnvironment: Record<string, string>;
+  restartStrategy: 'wait' | 'deferred';
+};
+
+export type ServerCommandSnapshot = {
+  key: ServerCommandKey;
+  label: string;
+  summary: string;
+  environment: string;
+  publicUrl: string | null;
+  checkUrl: string;
+  composeFile: string;
+  serviceName: string;
+  availability: 'online' | 'degraded' | 'offline';
+  httpStatus: number | null;
+  contentType: string | null;
+  responsePreview: string | null;
+  checkedAt: string;
+  startedAt: string | null;
+  runningVersion: string | null;
+  runningBuiltAt: string | null;
+  latestVersion: string | null;
+  latestBuiltAt: string | null;
+  latestSourceChangeAt: string | null;
+  latestSourceChangePath: string | null;
+  buildRequired: boolean;
+  updateAvailable: boolean;
+  updateSummary: string | null;
+  responseTimeMs: number | null;
+  composeStatus: string | null;
+  composeDetails: string | null;
+  lastCommand: string;
+  commandScript: string;
+  commandWorkingDirectory: string;
+  errorMessage: string | null;
+};
+
+export type ServerCommandRestartResult = {
+  server: ServerCommandSnapshot;
+  commandOutput: string | null;
+  restartState: 'completed' | 'accepted';
+};
+
+type ExecFileFailure = Error & {
+  code?: number | string;
+  signal?: NodeJS.Signals | string | null;
+  stdout?: string;
+  stderr?: string;
+};
+
+type RemoteRestartPayload = {
+  server?: ServerCommandSnapshot;
+  commandOutput: string | null;
+  restartState: 'completed' | 'accepted';
+};
+
+type HealthCheckAttempt = {
+  url: string;
+  httpStatus: number | null;
+  contentType: string | null;
+  responsePreview: string | null;
+  availability: ServerCommandSnapshot['availability'];
+  errorMessage: string | null;
+};
+
+type RuntimeInspectionResult = {
+  startedAt: string | null;
+  composeStatus: string | null;
+  composeDetails: string | null;
+  availability?: ServerCommandSnapshot['availability'];
+  responsePreview?: string | null;
+  errorMessage?: string | null;
+};
+
+type BuildInspectionResult = {
+  runningVersion: string | null;
+  runningBuiltAt: string | null;
+  latestVersion: string | null;
+  latestBuiltAt: string | null;
+  latestSourceChangeAt: string | null;
+  latestSourceChangePath: string | null;
+  buildRequired: boolean;
+  updateAvailable: boolean;
+  updateSummary: string | null;
+};
+
+const RUNNER_HEARTBEAT_FRESHNESS_MS = 30_000;
+const DEFERRED_RESTART_DELAY_MS = 2_000;
+const DEFERRED_RESTART_CONFIRM_TIMEOUT_MS = 4_500;
+const DEFERRED_RESTART_POLL_INTERVAL_MS = 150;
+
+function normalizeUrl(value: string) {
+  return value.trim().replace(/\/+$/, '');
+}
+
+function normalizeOptionalUrl(value: string | null | undefined) {
+  const normalized = value?.trim();
+  return normalized ? normalizeUrl(normalized) : null;
+}
+
+function normalizePath(value: string) {
+  return path.resolve(value);
+}
+
+export function buildServerCommandApiRestartUrl(baseUrl: string, pathTemplate: string, key: ServerCommandKey) {
+  const normalizedBaseUrl = normalizeUrl(baseUrl);
+  const normalizedPath = pathTemplate.trim() || '/api/server-commands/{key}/actions/restart';
+  const pathName = normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`;
+  const resolvedPath = pathName.replaceAll('{key}', encodeURIComponent(key));
+  const baseUrlObject = new URL(`${normalizedBaseUrl}/`);
+  const basePath = baseUrlObject.pathname.replace(/\/+$/, '');
+  const nextPath =
+    basePath && resolvedPath === basePath
+      ? resolvedPath
+      : basePath && resolvedPath.startsWith(`${basePath}/`)
+        ? resolvedPath
+        : `${basePath}${resolvedPath}`.replace(/\/{2,}/g, '/');
+
+  baseUrlObject.pathname = nextPath.startsWith('/') ? nextPath : `/${nextPath}`;
+  baseUrlObject.search = '';
+  baseUrlObject.hash = '';
+
+  return normalizeUrl(baseUrlObject.toString());
+}
+
+function resolveCommandScriptPath(scriptName: string, preferredRoots: string[]) {
+  const resolvedRoots = preferredRoots
+    .map((root) => normalizePath(root))
+    .filter((root, index, array) => Boolean(root) && array.indexOf(root) === index);
+  const candidates = resolvedRoots.map((root) => path.join(root, 'etc', 'commands', 'server-command', scriptName));
+  const existingPath = candidates.find((candidate) => fs.existsSync(candidate));
+
+  return existingPath ?? candidates[0];
+}
+
+export function resolveDockerSocketPath(source: NodeJS.ProcessEnv | Record<string, string> = process.env) {
+  const explicitSocketPath = source.SERVER_COMMAND_DOCKER_SOCKET?.trim();
+  if (explicitSocketPath) {
+    return explicitSocketPath;
+  }
+
+  const dockerHost = source.DOCKER_HOST?.trim();
+  if (dockerHost?.startsWith('unix://')) {
+    return dockerHost.slice('unix://'.length);
+  }
+
+  return '/var/run/docker.sock';
+}
+
+function shouldRetryWithDockerSocket(error: unknown) {
+  const failure = error instanceof Error ? (error as ExecFileFailure) : null;
+  const detail = [failure?.stderr, failure?.stdout, failure?.message].filter(Boolean).join('\n');
+
+  return failure?.code === 127 || /docker CLI not found/i.test(detail);
+}
+
+export function buildHealthCheckUrls(key: ServerCommandKey, checkUrl: string) {
+  const normalized = normalizeUrl(checkUrl);
+
+  if (key !== 'command-runner') {
+    return [normalized];
+  }
+
+  let parsedUrl: URL;
+
+  try {
+    parsedUrl = new URL(normalized);
+  } catch {
+    return [normalized];
+  }
+
+  const hostVariants =
+    parsedUrl.hostname === 'host.docker.internal'
+      ? ['host.docker.internal', '127.0.0.1', 'localhost']
+      : parsedUrl.hostname === '127.0.0.1' || parsedUrl.hostname === 'localhost'
+        ? [parsedUrl.hostname, parsedUrl.hostname === '127.0.0.1' ? 'localhost' : '127.0.0.1', 'host.docker.internal']
+        : [parsedUrl.hostname];
+
+  const dedupedUrls: string[] = [];
+
+  for (const hostname of hostVariants) {
+    const candidate = new URL(parsedUrl.toString());
+    candidate.hostname = hostname;
+    const serialized = normalizeUrl(candidate.toString());
+
+    if (!dedupedUrls.includes(serialized)) {
+      dedupedUrls.push(serialized);
+    }
+  }
+
+  return dedupedUrls;
+}
+
+async function fetchHealthCheck(url: string): Promise<HealthCheckAttempt> {
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      redirect: 'follow',
+      signal: AbortSignal.timeout(5000),
+    });
+    const bodyText = await response.text();
+
+    return {
+      url,
+      httpStatus: response.status,
+      contentType: response.headers.get('content-type'),
+      responsePreview: trimPreview(bodyText),
+      availability: response.ok ? 'online' : response.status < 500 ? 'degraded' : 'offline',
+      errorMessage: null,
+    };
+  } catch (error) {
+    return {
+      url,
+      httpStatus: null,
+      contentType: null,
+      responsePreview: null,
+      availability: 'offline',
+      errorMessage: error instanceof Error ? error.message : '서버 상태를 확인하지 못했습니다.',
+    };
+  }
+}
+
+async function restartViaDockerSocket(definition: ServerDefinition) {
+  const mergedEnv = {
+    ...process.env,
+    ...definition.commandEnvironment,
+  };
+  const socketPath = resolveDockerSocketPath(mergedEnv);
+  const socketRestartScript = path.join(path.dirname(definition.commandScript), 'restart-via-docker-socket.mjs');
+
+  return execFileAsync('node', [socketRestartScript, definition.containerName], {
+    cwd: definition.commandWorkingDirectory,
+    timeout: 30000,
+    maxBuffer: 1024 * 1024,
+    env: {
+      ...mergedEnv,
+      SERVER_COMMAND_DOCKER_SOCKET: socketPath,
+    },
+  });
+}
+
+function getServerDefinitions(): ServerDefinition[] {
+  const projectRoot = normalizePath(env.SERVER_COMMAND_PROJECT_ROOT);
+  const mainProjectRoot = normalizePath(env.SERVER_COMMAND_MAIN_PROJECT_ROOT);
+
+  return [
+    {
+      key: 'test',
+      label: 'TEST',
+      summary: '메인 프로젝트의 테스트 앱 컨테이너',
+      environment: 'test',
+      publicUrl: normalizeUrl(env.SERVER_COMMAND_TEST_URL),
+      checkUrl: normalizeUrl(env.SERVER_COMMAND_TEST_URL),
+      composeFile: path.join(mainProjectRoot, 'docker-compose.yml'),
+      serviceName: env.SERVER_COMMAND_TEST_SERVICE,
+      containerName: 'ai-code-app-app-1',
+      commandScript: resolveCommandScriptPath('restart-test.sh', [projectRoot, mainProjectRoot, '/workspace/main-project']),
+      commandWorkingDirectory: mainProjectRoot,
+      commandEnvironment: {
+        MAIN_PROJECT_ROOT: mainProjectRoot,
+        SERVER_COMMAND_COMPOSE_FILE: path.join(mainProjectRoot, 'docker-compose.yml'),
+        SERVER_COMMAND_SERVICE: env.SERVER_COMMAND_TEST_SERVICE,
+        SERVER_COMMAND_CONTAINER_NAME: 'ai-code-app-app-1',
+      },
+      restartStrategy: 'wait',
+    },
+    {
+      key: 'rel',
+      label: 'REL',
+      summary: 'release 브랜치를 서비스하는 릴리즈 앱 컨테이너',
+      environment: 'release',
+      publicUrl: normalizeUrl(env.SERVER_COMMAND_REL_URL),
+      checkUrl: normalizeUrl(env.SERVER_COMMAND_REL_URL),
+      composeFile: path.join(mainProjectRoot, 'docker-compose.yml'),
+      serviceName: env.SERVER_COMMAND_REL_SERVICE,
+      containerName: 'ai-code-app-release',
+      commandScript: resolveCommandScriptPath('restart-rel.sh', [projectRoot, mainProjectRoot, '/workspace/main-project']),
+      commandWorkingDirectory: mainProjectRoot,
+      commandEnvironment: {
+        MAIN_PROJECT_ROOT: mainProjectRoot,
+        SERVER_COMMAND_COMPOSE_FILE: path.join(mainProjectRoot, 'docker-compose.yml'),
+        SERVER_COMMAND_SERVICE: env.SERVER_COMMAND_REL_SERVICE,
+      },
+      restartStrategy: 'wait',
+    },
+    {
+      key: 'work-server',
+      label: 'WORK-SERVER',
+      summary: 'Plan, Board, History API를 제공하는 워크서버',
+      environment: 'internal-api',
+      publicUrl: null,
+      checkUrl: normalizeUrl(env.SERVER_COMMAND_WORK_SERVER_URL),
+      composeFile: path.join(projectRoot, 'etc', 'servers', 'work-server', 'docker-compose.yml'),
+      serviceName: env.SERVER_COMMAND_WORK_SERVER_SERVICE,
+      containerName: 'work-server',
+      commandScript: resolveCommandScriptPath('restart-work-server.sh', [projectRoot, mainProjectRoot, '/workspace/main-project']),
+      commandWorkingDirectory: projectRoot,
+      commandEnvironment: {
+        REPO_ROOT: projectRoot,
+      },
+      restartStrategy: 'deferred',
+    },
+    {
+      key: 'command-runner',
+      label: 'COMMAND-RUNNER',
+      summary: 'nohup으로 실행 중인 서버 명령 host runner',
+      environment: 'host-runner',
+      publicUrl: null,
+      checkUrl: normalizeUrl(env.SERVER_COMMAND_RUNNER_URL),
+      composeFile: path.join(projectRoot, 'scripts', 'run-server-command-runner.mjs'),
+      serviceName: 'server-command-runner',
+      containerName: 'server-command-runner',
+      commandScript: resolveCommandScriptPath('restart-server-command-runner.sh', [projectRoot, mainProjectRoot, '/workspace/main-project']),
+      commandWorkingDirectory: projectRoot,
+      commandEnvironment: {
+        PROJECT_ROOT: projectRoot,
+      },
+      restartStrategy: 'deferred',
+    },
+  ];
+}
+
+function getServerDefinition(key: ServerCommandKey) {
+  const definition = getServerDefinitions().find((item) => item.key === key);
+
+  if (!definition) {
+    throw new Error('지원하지 않는 서버입니다.');
+  }
+
+  return definition;
+}
+
+function trimPreview(value: string | null | undefined, maxLength = 220) {
+  const normalized = value?.replace(/\s+/g, ' ').trim() ?? '';
+
+  if (!normalized) {
+    return null;
+  }
+
+  return normalized.length > maxLength ? `${normalized.slice(0, maxLength - 3)}...` : normalized;
+}
+
+function normalizeDateTimeValue(value: string | null | undefined) {
+  const normalized = value?.trim();
+
+  if (!normalized) {
+    return null;
+  }
+
+  const parsed = new Date(normalized);
+  return Number.isNaN(parsed.getTime()) ? null : parsed.toISOString();
+}
+
+function buildRestartCommandPreview(definition: ServerDefinition) {
+  return `sh ${definition.commandScript}`;
+}
+
+function buildDeferredRestartProbePaths(definition: ServerDefinition) {
+  const token = `${definition.key}-${Date.now()}-${process.pid}`;
+
+  return {
+    logPath: path.join('/tmp', `${token}.log`),
+    statusPath: path.join('/tmp', `${token}.status`),
+  };
+}
+
+function buildAcceptedRestartSnapshot(definition: ServerDefinition): ServerCommandSnapshot {
+  return {
+    key: definition.key,
+    label: definition.label,
+    summary: definition.summary,
+    environment: definition.environment,
+    publicUrl: definition.publicUrl,
+    checkUrl: definition.checkUrl,
+    composeFile: definition.composeFile,
+    serviceName: definition.serviceName,
+    availability: 'degraded',
+    httpStatus: null,
+    contentType: null,
+    responsePreview: null,
+    checkedAt: new Date().toISOString(),
+    startedAt: null,
+    runningVersion: null,
+    runningBuiltAt: null,
+    latestVersion: null,
+    latestBuiltAt: null,
+    latestSourceChangeAt: null,
+    latestSourceChangePath: null,
+    buildRequired: false,
+    updateAvailable: false,
+    updateSummary: null,
+    responseTimeMs: null,
+    composeStatus: 'restarting',
+    composeDetails: 'restart requested',
+    lastCommand: buildRestartCommandPreview(definition),
+    commandScript: definition.commandScript,
+    commandWorkingDirectory: definition.commandWorkingDirectory,
+    errorMessage: null,
+  };
+}
+
+function coerceServerSnapshot(
+  definition: ServerDefinition,
+  value: unknown,
+  fallback: ServerCommandSnapshot,
+): ServerCommandSnapshot {
+  if (!value || typeof value !== 'object') {
+    return fallback;
+  }
+
+  const item = value as Partial<Record<keyof ServerCommandSnapshot, unknown>>;
+
+  return {
+    ...fallback,
+    key: item.key === definition.key ? definition.key : fallback.key,
+    label: typeof item.label === 'string' ? item.label : fallback.label,
+    summary: typeof item.summary === 'string' ? item.summary : fallback.summary,
+    environment: typeof item.environment === 'string' ? item.environment : fallback.environment,
+    publicUrl: typeof item.publicUrl === 'string' ? item.publicUrl : item.publicUrl === null ? null : fallback.publicUrl,
+    checkUrl: typeof item.checkUrl === 'string' ? item.checkUrl : fallback.checkUrl,
+    composeFile: typeof item.composeFile === 'string' ? item.composeFile : fallback.composeFile,
+    serviceName: typeof item.serviceName === 'string' ? item.serviceName : fallback.serviceName,
+    availability:
+      item.availability === 'online' || item.availability === 'degraded' || item.availability === 'offline'
+        ? item.availability
+        : fallback.availability,
+    httpStatus: typeof item.httpStatus === 'number' ? item.httpStatus : item.httpStatus === null ? null : fallback.httpStatus,
+    contentType:
+      typeof item.contentType === 'string' ? item.contentType : item.contentType === null ? null : fallback.contentType,
+    responsePreview:
+      typeof item.responsePreview === 'string'
+        ? item.responsePreview
+        : item.responsePreview === null
+          ? null
+          : fallback.responsePreview,
+    checkedAt: typeof item.checkedAt === 'string' ? item.checkedAt : fallback.checkedAt,
+    startedAt: typeof item.startedAt === 'string' ? item.startedAt : item.startedAt === null ? null : fallback.startedAt,
+    runningVersion:
+      typeof item.runningVersion === 'string' ? item.runningVersion : item.runningVersion === null ? null : fallback.runningVersion,
+    runningBuiltAt:
+      typeof item.runningBuiltAt === 'string' ? item.runningBuiltAt : item.runningBuiltAt === null ? null : fallback.runningBuiltAt,
+    latestVersion:
+      typeof item.latestVersion === 'string' ? item.latestVersion : item.latestVersion === null ? null : fallback.latestVersion,
+    latestBuiltAt:
+      typeof item.latestBuiltAt === 'string' ? item.latestBuiltAt : item.latestBuiltAt === null ? null : fallback.latestBuiltAt,
+    latestSourceChangeAt:
+      typeof item.latestSourceChangeAt === 'string'
+        ? item.latestSourceChangeAt
+        : item.latestSourceChangeAt === null
+          ? null
+          : fallback.latestSourceChangeAt,
+    latestSourceChangePath:
+      typeof item.latestSourceChangePath === 'string'
+        ? item.latestSourceChangePath
+        : item.latestSourceChangePath === null
+          ? null
+          : fallback.latestSourceChangePath,
+    buildRequired: typeof item.buildRequired === 'boolean' ? item.buildRequired : fallback.buildRequired,
+    updateAvailable: typeof item.updateAvailable === 'boolean' ? item.updateAvailable : fallback.updateAvailable,
+    updateSummary:
+      typeof item.updateSummary === 'string' ? item.updateSummary : item.updateSummary === null ? null : fallback.updateSummary,
+    responseTimeMs:
+      typeof item.responseTimeMs === 'number' ? item.responseTimeMs : item.responseTimeMs === null ? null : fallback.responseTimeMs,
+    composeStatus:
+      typeof item.composeStatus === 'string' ? item.composeStatus : item.composeStatus === null ? null : fallback.composeStatus,
+    composeDetails:
+      typeof item.composeDetails === 'string'
+        ? item.composeDetails
+        : item.composeDetails === null
+          ? null
+          : fallback.composeDetails,
+    lastCommand: typeof item.lastCommand === 'string' ? item.lastCommand : fallback.lastCommand,
+    commandScript: typeof item.commandScript === 'string' ? item.commandScript : fallback.commandScript,
+    commandWorkingDirectory:
+      typeof item.commandWorkingDirectory === 'string' ? item.commandWorkingDirectory : fallback.commandWorkingDirectory,
+    errorMessage:
+      typeof item.errorMessage === 'string' ? item.errorMessage : item.errorMessage === null ? null : fallback.errorMessage,
+  };
+}
+
+export function buildRestartFailureMessage(label: string, error: unknown) {
+  const failure = error instanceof Error ? (error as ExecFileFailure) : null;
+  const output = trimPreview([failure?.stderr, failure?.stdout, failure?.message].filter(Boolean).join('\n'), 400);
+  const exitInfo = [
+    failure?.code != null ? `exit:${String(failure.code)}` : null,
+    failure?.signal ? `signal:${String(failure.signal)}` : null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return trimPreview(
+    [`${label} 재기동에 실패했습니다.`, exitInfo || null, output || null].filter(Boolean).join(' '),
+    400,
+  ) || `${label} 재기동에 실패했습니다.`;
+}
+
+async function waitForDeferredRestartResult(
+  definition: ServerDefinition,
+  statusPath: string,
+  logPath: string,
+): Promise<string | null> {
+  const deadline = Date.now() + DEFERRED_RESTART_CONFIRM_TIMEOUT_MS;
+
+  while (Date.now() <= deadline) {
+    try {
+      const statusText = (await readFile(statusPath, 'utf8')).trim();
+      const output = trimPreview(await readFile(logPath, 'utf8'), 400);
+      const exitCode = Number.parseInt(statusText, 10);
+
+      await rm(statusPath, { force: true });
+      await rm(logPath, { force: true });
+
+      if (!Number.isNaN(exitCode) && exitCode !== 0) {
+        const restartError = new Error(
+          buildRestartFailureMessage(
+            definition.label,
+            Object.assign(new Error(`deferred restart exited with ${exitCode}`), {
+              code: exitCode,
+              stderr: output ?? '',
+              stdout: '',
+            }),
+          ),
+        );
+        (restartError as Error & { statusCode?: number }).statusCode = 500;
+        throw restartError;
+      }
+
+      return output;
+    } catch (error) {
+      if (
+        error &&
+        typeof error === 'object' &&
+        'code' in error &&
+        (error as NodeJS.ErrnoException).code === 'ENOENT'
+      ) {
+        await new Promise((resolve) => {
+          setTimeout(resolve, DEFERRED_RESTART_POLL_INTERVAL_MS);
+        });
+        continue;
+      }
+
+      throw error;
+    }
+  }
+
+  return null;
+}
+
+async function restartServerCommandDeferred(definition: ServerDefinition): Promise<ServerCommandRestartResult> {
+  const { logPath, statusPath } = buildDeferredRestartProbePaths(definition);
+  const shellCommand = [
+    `sleep ${Math.ceil(DEFERRED_RESTART_DELAY_MS / 1000)}`,
+    `sh ${JSON.stringify(definition.commandScript)} >${JSON.stringify(logPath)} 2>&1`,
+    'status=$?',
+    `printf '%s' \"$status\" >${JSON.stringify(statusPath)}`,
+  ].join('; ');
+
+  await new Promise<void>((resolve, reject) => {
+    const child = spawn('sh', ['-c', shellCommand], {
+      cwd: definition.commandWorkingDirectory,
+      detached: true,
+      stdio: 'ignore',
+      env: {
+        ...process.env,
+        ...definition.commandEnvironment,
+      },
+    });
+
+    child.once('error', reject);
+    child.once('spawn', () => {
+      child.unref();
+      resolve();
+    });
+  });
+
+  const commandOutput = await waitForDeferredRestartResult(definition, statusPath, logPath);
+
+  return {
+    server: buildAcceptedRestartSnapshot(definition),
+    commandOutput: commandOutput ?? `${definition.label} 재기동 요청을 접수했습니다. 잠시 후 상태를 다시 확인해 주세요.`,
+    restartState: 'accepted',
+  };
+}
+
+async function parseRemoteRestartPayload(response: Response): Promise<RemoteRestartPayload> {
+  const responseText = await response.text();
+  const parsed =
+    responseText.trim().length > 0
+      ? (() => {
+          try {
+            return JSON.parse(responseText) as {
+              item?: unknown;
+              server?: unknown;
+              commandOutput?: unknown;
+              output?: unknown;
+              restartState?: unknown;
+              data?: {
+                item?: unknown;
+                server?: unknown;
+                commandOutput?: unknown;
+                output?: unknown;
+                restartState?: unknown;
+              };
+            };
+          } catch {
+            return null;
+          }
+        })()
+      : null;
+  const nestedData = parsed?.data && typeof parsed.data === 'object' && !Array.isArray(parsed.data) ? parsed.data : null;
+
+  return {
+    server:
+      parsed?.item && typeof parsed.item === 'object'
+        ? (parsed.item as ServerCommandSnapshot)
+        : parsed?.server && typeof parsed.server === 'object'
+          ? (parsed.server as ServerCommandSnapshot)
+          : nestedData?.item && typeof nestedData.item === 'object'
+            ? (nestedData.item as ServerCommandSnapshot)
+            : nestedData?.server && typeof nestedData.server === 'object'
+              ? (nestedData.server as ServerCommandSnapshot)
+              : undefined,
+    commandOutput: trimPreview(
+      [
+        typeof parsed?.commandOutput === 'string' ? parsed.commandOutput : null,
+        typeof parsed?.output === 'string' ? parsed.output : null,
+        typeof nestedData?.commandOutput === 'string' ? nestedData.commandOutput : null,
+        typeof nestedData?.output === 'string' ? nestedData.output : null,
+        !parsed ? responseText : null,
+      ]
+        .filter(Boolean)
+        .join('\n'),
+      400,
+    ),
+    restartState:
+      parsed?.restartState === 'accepted' || nestedData?.restartState === 'accepted' ? 'accepted' : 'completed',
+  };
+}
+
+async function restartServerCommandViaApi(definition: ServerDefinition): Promise<ServerCommandRestartResult> {
+  const apiBaseUrl = normalizeOptionalUrl(env.SERVER_COMMAND_API_BASE_URL);
+  if (!apiBaseUrl) {
+    throw new Error('SERVER_COMMAND_API_BASE_URL이 비어 있습니다.');
+  }
+
+  const requestUrl = buildServerCommandApiRestartUrl(
+    apiBaseUrl,
+    env.SERVER_COMMAND_API_RESTART_PATH_TEMPLATE,
+    definition.key,
+  );
+  const headers = new Headers();
+
+  if (env.SERVER_COMMAND_API_ACCESS_TOKEN?.trim()) {
+    headers.set('X-Access-Token', env.SERVER_COMMAND_API_ACCESS_TOKEN.trim());
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(requestUrl, {
+      method: 'POST',
+      headers,
+      signal: AbortSignal.timeout(15000),
+    });
+  } catch (error) {
+    const restartError = new Error(buildRestartFailureMessage(definition.label, error));
+    (restartError as Error & { statusCode?: number }).statusCode = 500;
+    throw restartError;
+  }
+
+  if (!response.ok) {
+    const detail = await response.text();
+    const failure = Object.assign(new Error(`HTTP ${response.status}`), {
+      code: response.status,
+      stderr: detail,
+      stdout: '',
+    });
+    const restartError = new Error(buildRestartFailureMessage(definition.label, failure));
+    (restartError as Error & { statusCode?: number }).statusCode = 500;
+    throw restartError;
+  }
+
+  const remotePayload = await parseRemoteRestartPayload(response);
+  const fallbackSnapshot =
+    remotePayload.restartState === 'accepted' ? buildAcceptedRestartSnapshot(definition) : await checkServer(definition);
+
+  return {
+    server: coerceServerSnapshot(definition, remotePayload.server, fallbackSnapshot),
+    commandOutput: remotePayload.commandOutput,
+    restartState: remotePayload.restartState,
+  };
+}
+
+function shouldFallbackFromRemoteRestart(error: unknown) {
+  const detail = error instanceof Error ? error.message : String(error);
+
+  return /Failed to fetch|fetch failed|ECONNREFUSED|ENOTFOUND|EHOSTUNREACH|ETIMEDOUT|404|408/i.test(detail);
+}
+
+async function inspectComposeStatus(definition: ServerDefinition) {
+  try {
+    const { stdout } = await execFileAsync(
+      'docker',
+      ['compose', '-f', definition.composeFile, 'ps', definition.serviceName, '--format', 'json'],
+      {
+        cwd: definition.commandWorkingDirectory,
+        timeout: 8000,
+        maxBuffer: 1024 * 1024,
+      },
+    );
+    const normalized = stdout.trim();
+
+    if (!normalized) {
+      return {
+        startedAt: null,
+        composeStatus: null,
+        composeDetails: null,
+      };
+    }
+
+    const parsed = JSON.parse(normalized) as Record<string, unknown> | Array<Record<string, unknown>>;
+    const firstRow = Array.isArray(parsed) ? parsed[0] : parsed;
+    const status = typeof firstRow?.State === 'string' ? firstRow.State : typeof firstRow?.Status === 'string' ? firstRow.Status : null;
+    const details = trimPreview(
+      [
+        typeof firstRow?.Name === 'string' ? `name:${firstRow.Name}` : null,
+        typeof firstRow?.Publishers === 'string' ? `publishers:${firstRow.Publishers}` : null,
+        typeof firstRow?.Health === 'string' ? `health:${firstRow.Health}` : null,
+      ]
+        .filter(Boolean)
+        .join(' '),
+    );
+
+    return {
+      startedAt: null,
+      composeStatus: status,
+      composeDetails: details,
+    };
+  } catch (error) {
+    return {
+      startedAt: null,
+      composeStatus: null,
+      composeDetails: trimPreview(error instanceof Error ? error.message : 'compose 상태 확인 실패'),
+    };
+  }
+}
+
+async function inspectContainerRuntime(definition: ServerDefinition): Promise<RuntimeInspectionResult> {
+  try {
+    const { stdout } = await execFileAsync(
+      'docker',
+      ['inspect', '-f', '{{.State.StartedAt}}\t{{.State.Status}}\t{{.Name}}', definition.containerName],
+      {
+        cwd: definition.commandWorkingDirectory,
+        timeout: 8000,
+        maxBuffer: 1024 * 1024,
+      },
+    );
+    const [startedAtRaw = '', statusRaw = '', nameRaw = ''] = stdout.trim().split('\t');
+
+    return {
+      startedAt: normalizeDateTimeValue(startedAtRaw),
+      composeStatus: statusRaw.trim() || null,
+      composeDetails: trimPreview(nameRaw.trim() ? `name:${nameRaw.trim().replace(/^\//, '')}` : null),
+    };
+  } catch (error) {
+    return inspectComposeStatus(definition);
+  }
+}
+
+async function inspectRunnerRuntime(definition: ServerDefinition): Promise<RuntimeInspectionResult> {
+  try {
+    const runnerScriptName = path.basename(path.join(definition.commandWorkingDirectory, 'scripts', 'run-server-command-runner.mjs'));
+    const { stdout } = await execFileAsync(
+      'sh',
+      [
+        '-c',
+        `ps -eo lstart=,args= | grep ${JSON.stringify(runnerScriptName)} | grep -v grep | head -n 1`,
+      ],
+      {
+        cwd: definition.commandWorkingDirectory,
+        timeout: 5000,
+        maxBuffer: 1024 * 1024,
+      },
+    );
+    const line = stdout.trim();
+
+    if (!line) {
+      return {
+        startedAt: null,
+        composeStatus: null,
+        composeDetails: null,
+      };
+    }
+
+    const match = line.match(/^([A-Z][a-z]{2}\s+[A-Z][a-z]{2}\s+\d+\s+\d{2}:\d{2}:\d{2}\s+\d{4})\s+(.+)$/);
+    const startedAt = normalizeDateTimeValue(match?.[1] ?? null);
+
+    return {
+      startedAt,
+      composeStatus: 'running',
+      composeDetails: trimPreview(match?.[2] ?? line),
+    };
+  } catch {
+    return {
+      startedAt: null,
+      composeStatus: null,
+      composeDetails: null,
+    };
+  }
+}
+
+async function inspectRunnerHeartbeat(): Promise<RuntimeInspectionResult> {
+  const heartbeatCandidates = [
+    env.SERVER_COMMAND_RUNNER_HEARTBEAT_FILE?.trim() || null,
+    path.join(normalizePath(env.SERVER_COMMAND_PROJECT_ROOT), '.server-command-runner-heartbeat.json'),
+    path.join(normalizePath(env.SERVER_COMMAND_MAIN_PROJECT_ROOT), '.server-command-runner-heartbeat.json'),
+  ].filter((value, index, array): value is string => Boolean(value) && array.indexOf(value) === index);
+
+  let latestHeartbeatPath: string | null = null;
+  let latestHeartbeatStat: Awaited<ReturnType<typeof stat>> | null = null;
+
+  for (const candidate of heartbeatCandidates) {
+    try {
+      const candidateStat = await stat(candidate);
+
+      if (!latestHeartbeatStat || candidateStat.mtimeMs > latestHeartbeatStat.mtimeMs) {
+        latestHeartbeatPath = candidate;
+        latestHeartbeatStat = candidateStat;
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  const heartbeatPath = latestHeartbeatPath ?? heartbeatCandidates[0] ?? '.server-command-runner-heartbeat.json';
+
+  try {
+    const heartbeatStat = latestHeartbeatStat ?? (await stat(heartbeatPath));
+    const ageMs = Date.now() - heartbeatStat.mtimeMs;
+    const startedAt = normalizeDateTimeValue(heartbeatStat.birthtime.toISOString());
+
+    if (ageMs <= RUNNER_HEARTBEAT_FRESHNESS_MS) {
+      return {
+        startedAt,
+        composeStatus: 'running',
+        composeDetails: trimPreview(`heartbeat:${heartbeatPath}`),
+        availability: 'online',
+        responsePreview: trimPreview(`heartbeat ok · ${Math.max(0, Math.round(ageMs / 1000))}초 전 갱신`),
+        errorMessage: '로컬 전용 runner를 heartbeat 파일 기준으로 확인했습니다.',
+      };
+    }
+
+    return {
+      startedAt,
+      composeStatus: 'stale',
+      composeDetails: trimPreview(`heartbeat:${heartbeatPath}`),
+      availability: 'offline',
+      responsePreview: trimPreview(`heartbeat stale · ${Math.max(0, Math.round(ageMs / 1000))}초 경과`),
+      errorMessage: 'runner heartbeat 갱신이 오래되었습니다.',
+    };
+  } catch (error) {
+    return {
+      startedAt: null,
+      composeStatus: null,
+      composeDetails: trimPreview(`heartbeat:${heartbeatPath}`),
+      availability: 'offline',
+      responsePreview: null,
+      errorMessage: error instanceof Error ? `runner heartbeat 확인 실패: ${error.message}` : 'runner heartbeat 확인 실패',
+    };
+  }
+}
+
+function inspectCurrentProcessRuntime(): RuntimeInspectionResult {
+  const startedAt = new Date(Date.now() - process.uptime() * 1000).toISOString();
+
+  return {
+    startedAt,
+    composeStatus: 'running',
+    composeDetails: trimPreview(`pid:${process.pid}`),
+  };
+}
+
+async function inspectRuntime(definition: ServerDefinition): Promise<RuntimeInspectionResult> {
+  if (definition.key === 'command-runner') {
+    const runtimeInfo = await inspectRunnerRuntime(definition);
+
+    if (runtimeInfo.startedAt) {
+      return runtimeInfo;
+    }
+
+    return inspectRunnerHeartbeat();
+  }
+
+  if (definition.key === 'work-server') {
+    const runtimeInfo = await inspectContainerRuntime(definition);
+
+    if (runtimeInfo.startedAt) {
+      return runtimeInfo;
+    }
+
+    return inspectCurrentProcessRuntime();
+  }
+
+  return inspectContainerRuntime(definition);
+}
+
+async function inspectBuild(definition: ServerDefinition): Promise<BuildInspectionResult> {
+  if (definition.key !== 'work-server') {
+    return {
+      runningVersion: null,
+      runningBuiltAt: null,
+      latestVersion: null,
+      latestBuiltAt: null,
+      latestSourceChangeAt: null,
+      latestSourceChangePath: null,
+      buildRequired: false,
+      updateAvailable: false,
+      updateSummary: null,
+    };
+  }
+
+  const runningBuild = getRuntimeWorkServerBuildInfo();
+  const latestBuild = await readLatestWorkServerBuildInfo();
+  const latestSourceChange = await readLatestWorkServerSourceChange();
+  const latestSourceChangedAt = latestSourceChange?.changedAt ?? null;
+  const buildRequired = latestSourceChangedAt
+    ? !latestBuild?.builtAt || latestSourceChangedAt > latestBuild.builtAt
+    : false;
+  const updateAvailable =
+    Boolean(runningBuild?.buildId) && Boolean(latestBuild?.buildId) && runningBuild?.buildId !== latestBuild?.buildId;
+
+  return {
+    runningVersion: runningBuild?.buildId ?? null,
+    runningBuiltAt: runningBuild?.builtAt ?? null,
+    latestVersion: latestBuild?.buildId ?? null,
+    latestBuiltAt: latestBuild?.builtAt ?? null,
+    latestSourceChangeAt: latestSourceChangedAt,
+    latestSourceChangePath: latestSourceChange?.path ?? null,
+    buildRequired,
+    updateAvailable,
+    updateSummary: buildRequired
+      ? `수정된 소스가 최신 빌드보다 새롭습니다.${latestSourceChange?.path ? ` (${latestSourceChange?.path})` : ''} 재시작 시 다시 빌드한 뒤 적용합니다.`
+      : updateAvailable
+        ? '새로운 work-server 빌드가 준비되어 있습니다. 재시작하면 최신 버전이 적용됩니다.'
+        : runningBuild && latestBuild
+        ? '실행 중인 work-server가 최신 빌드입니다.'
+        : latestBuild
+          ? '최신 빌드는 준비되어 있지만 실행 중 버전 정보를 읽지 못했습니다.'
+          : '아직 확인된 work-server 빌드 정보가 없습니다.',
+  };
+}
+
+async function checkServer(definition: ServerDefinition): Promise<ServerCommandSnapshot> {
+  const startedAt = Date.now();
+  const attemptUrls = buildHealthCheckUrls(definition.key, definition.checkUrl);
+  const attempts: HealthCheckAttempt[] = [];
+  let selectedAttempt: HealthCheckAttempt | null = null;
+
+  for (const attemptUrl of attemptUrls) {
+    const attempt = await fetchHealthCheck(attemptUrl);
+    attempts.push(attempt);
+
+    if (attempt.availability !== 'offline') {
+      selectedAttempt = attempt;
+      break;
+    }
+  }
+
+  if (!selectedAttempt) {
+    selectedAttempt = attempts[0] ?? {
+      url: definition.checkUrl,
+      httpStatus: null,
+      contentType: null,
+      responsePreview: null,
+      availability: 'offline',
+      errorMessage: '서버 상태를 확인하지 못했습니다.',
+    };
+  }
+
+  const runtimeInfo = await inspectRuntime(definition);
+  const buildInfo = await inspectBuild(definition);
+  const fallbackAttempt = selectedAttempt.url !== definition.checkUrl ? `fallback health check succeeded via ${selectedAttempt.url}` : null;
+  const collectedErrors = attempts
+    .filter((attempt) => attempt.errorMessage)
+    .map((attempt) => `${attempt.url} -> ${attempt.errorMessage}`);
+  const errorMessage =
+    runtimeInfo.errorMessage ??
+    selectedAttempt.errorMessage ??
+    (fallbackAttempt && collectedErrors.length > 0
+      ? trimPreview([fallbackAttempt, ...collectedErrors].join(' | '), 400)
+      : collectedErrors.length > 0
+        ? trimPreview(collectedErrors.join(' | '), 400)
+        : fallbackAttempt);
+
+  return {
+    key: definition.key,
+    label: definition.label,
+    summary: definition.summary,
+    environment: definition.environment,
+    publicUrl: definition.publicUrl,
+    checkUrl: definition.checkUrl,
+    composeFile: definition.composeFile,
+    serviceName: definition.serviceName,
+    availability: runtimeInfo.availability ?? selectedAttempt.availability,
+    httpStatus: selectedAttempt.httpStatus,
+    contentType: selectedAttempt.contentType,
+    responsePreview: runtimeInfo.responsePreview ?? selectedAttempt.responsePreview,
+    checkedAt: new Date().toISOString(),
+    startedAt: runtimeInfo.startedAt,
+    runningVersion: buildInfo.runningVersion,
+    runningBuiltAt: buildInfo.runningBuiltAt,
+    latestVersion: buildInfo.latestVersion,
+    latestBuiltAt: buildInfo.latestBuiltAt,
+    latestSourceChangeAt: buildInfo.latestSourceChangeAt,
+    latestSourceChangePath: buildInfo.latestSourceChangePath,
+    buildRequired: buildInfo.buildRequired,
+    updateAvailable: buildInfo.updateAvailable,
+    updateSummary: buildInfo.updateSummary,
+    responseTimeMs: Date.now() - startedAt,
+    composeStatus: runtimeInfo.composeStatus,
+    composeDetails: runtimeInfo.composeDetails,
+    lastCommand: buildRestartCommandPreview(definition),
+    commandScript: definition.commandScript,
+    commandWorkingDirectory: definition.commandWorkingDirectory,
+    errorMessage,
+  };
+}
+
+export async function listServerCommands() {
+  const definitions = getServerDefinitions();
+  return Promise.all(definitions.map((definition) => checkServer(definition)));
+}
+
+export async function restartServerCommand(key: ServerCommandKey): Promise<ServerCommandRestartResult> {
+  const definition = getServerDefinition(key);
+  if (normalizeOptionalUrl(env.SERVER_COMMAND_API_BASE_URL)) {
+    try {
+      return await restartServerCommandViaApi(definition);
+    } catch (error) {
+      if (!shouldFallbackFromRemoteRestart(error)) {
+        throw error;
+      }
+    }
+  }
+
+  let stdout = '';
+  let stderr = '';
+
+  if (definition.restartStrategy === 'deferred') {
+    return restartServerCommandDeferred(definition);
+  }
+
+  try {
+    const commandResult = await execFileAsync('sh', [definition.commandScript], {
+      cwd: definition.commandWorkingDirectory,
+      timeout: 30000,
+      maxBuffer: 1024 * 1024,
+      env: {
+        ...process.env,
+        ...definition.commandEnvironment,
+      },
+    });
+    stdout = commandResult.stdout;
+    stderr = commandResult.stderr;
+  } catch (error) {
+    if (shouldRetryWithDockerSocket(error)) {
+      try {
+        const commandResult = await restartViaDockerSocket(definition);
+        stdout = commandResult.stdout;
+        stderr = commandResult.stderr;
+      } catch (socketError) {
+        const restartError = new Error(buildRestartFailureMessage(definition.label, socketError));
+        (restartError as Error & { statusCode?: number }).statusCode = 500;
+        throw restartError;
+      }
+    } else {
+      const restartError = new Error(buildRestartFailureMessage(definition.label, error));
+      (restartError as Error & { statusCode?: number }).statusCode = 500;
+      throw restartError;
+    }
+  }
+
+  const server = await checkServer(definition);
+
+  return {
+    server,
+    commandOutput: trimPreview([stdout, stderr].filter(Boolean).join('\n'), 400),
+    restartState: 'completed',
+  };
+}
diff --git a/etc/servers/work-server/src/services/visitor-history-service.ts b/etc/servers/work-server/src/services/visitor-history-service.ts
new file mode 100755
index 0000000..49b6675
--- /dev/null
+++ b/etc/servers/work-server/src/services/visitor-history-service.ts
@@ -0,0 +1,353 @@
+import { z } from 'zod';
+import { db } from '../db/client.js';
+
+export const VISITOR_CLIENT_TABLE = 'visitor_clients';
+export const VISITOR_HISTORY_TABLE = 'visitor_visit_histories';
+
+export const trackVisitSchema = z.object({
+  clientId: z.string().trim().min(1).max(120),
+  url: z.string().trim().min(1).max(2000),
+  eventType: z.string().trim().min(1).max(80).default('page_view'),
+  userAgent: z.string().trim().max(1000).optional().nullable(),
+});
+
+export const listVisitorClientsQuerySchema = z.object({
+  limit: z.coerce.number().int().min(1).max(500).optional(),
+  search: z.string().trim().max(120).optional(),
+  clientId: z.string().trim().max(120).optional(),
+  nickname: z.string().trim().max(80).optional(),
+  path: z.string().trim().max(500).optional(),
+  visitedFrom: z.string().trim().max(40).optional(),
+  visitedTo: z.string().trim().max(40).optional(),
+});
+
+export const visitorHistoryQuerySchema = z.object({
+  limit: z.coerce.number().int().min(1).max(500).optional(),
+});
+
+export const updateVisitorNicknameSchema = z.object({
+  nickname: z.string().trim().min(1).max(80),
+});
+
+export type VisitorClientItem = {
+  clientId: string;
+  nickname: string;
+  firstVisitedAt: string;
+  lastVisitedAt: string;
+  visitCount: number;
+  lastVisitedUrl: string | null;
+  lastUserAgent: string | null;
+  lastIp: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type VisitorHistoryItem = {
+  id: number;
+  clientId: string;
+  visitedAt: string;
+  url: string;
+  eventType: string;
+  userAgent: string | null;
+  ip: string | null;
+};
+
+function mapVisitorClientRow(row: Record<string, unknown>): VisitorClientItem {
+  return {
+    clientId: String(row.client_id ?? ''),
+    nickname: String(row.nickname ?? ''),
+    firstVisitedAt: String(row.first_visited_at ?? ''),
+    lastVisitedAt: String(row.last_visited_at ?? ''),
+    visitCount: Number(row.visit_count ?? 0),
+    lastVisitedUrl: row.last_visited_url ? String(row.last_visited_url) : null,
+    lastUserAgent: row.last_user_agent ? String(row.last_user_agent) : null,
+    lastIp: row.last_ip ? String(row.last_ip) : null,
+    createdAt: String(row.created_at ?? ''),
+    updatedAt: String(row.updated_at ?? ''),
+  };
+}
+
+function mapVisitorHistoryRow(row: Record<string, unknown>): VisitorHistoryItem {
+  return {
+    id: Number(row.id ?? 0),
+    clientId: String(row.client_id ?? ''),
+    visitedAt: String(row.visited_at ?? ''),
+    url: String(row.url ?? ''),
+    eventType: String(row.event_type ?? 'page_view'),
+    userAgent: row.user_agent ? String(row.user_agent) : null,
+    ip: row.ip ? String(row.ip) : null,
+  };
+}
+
+function normalizeDateBoundary(value: string, boundary: 'start' | 'end') {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return value;
+  }
+
+  return boundary === 'start' ? `${value} 00:00:00` : `${value} 23:59:59.999`;
+}
+
+async function ensureVisitorClientTable() {
+  const hasTable = await db.schema.hasTable(VISITOR_CLIENT_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(VISITOR_CLIENT_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('client_id', 120).notNullable().unique();
+      table.string('nickname', 80).notNullable();
+      table.timestamp('first_visited_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('last_visited_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.integer('visit_count').notNullable().defaultTo(1);
+      table.string('last_visited_url', 2000).nullable();
+      table.string('last_user_agent', 1000).nullable();
+      table.string('last_ip', 120).nullable();
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['client_id', (table) => table.string('client_id', 120).notNullable().unique()],
+    ['nickname', (table) => table.string('nickname', 80).notNullable().defaultTo('방문자_0001')],
+    ['first_visited_at', (table) => table.timestamp('first_visited_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['last_visited_at', (table) => table.timestamp('last_visited_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['visit_count', (table) => table.integer('visit_count').notNullable().defaultTo(1)],
+    ['last_visited_url', (table) => table.string('last_visited_url', 2000).nullable()],
+    ['last_user_agent', (table) => table.string('last_user_agent', 1000).nullable()],
+    ['last_ip', (table) => table.string('last_ip', 120).nullable()],
+    ['created_at', (table) => table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['updated_at', (table) => table.timestamp('updated_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(VISITOR_CLIENT_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(VISITOR_CLIENT_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+async function ensureVisitorHistoryTable() {
+  const hasTable = await db.schema.hasTable(VISITOR_HISTORY_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(VISITOR_HISTORY_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('client_id', 120).notNullable().index();
+      table.timestamp('visited_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+      table.string('url', 2000).notNullable();
+      table.string('event_type', 80).notNullable().defaultTo('page_view');
+      table.string('user_agent', 1000).nullable();
+      table.string('ip', 120).nullable();
+    });
+
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['client_id', (table) => table.string('client_id', 120).notNullable().index()],
+    ['visited_at', (table) => table.timestamp('visited_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+    ['url', (table) => table.string('url', 2000).notNullable().defaultTo('')],
+    ['event_type', (table) => table.string('event_type', 80).notNullable().defaultTo('page_view')],
+    ['user_agent', (table) => table.string('user_agent', 1000).nullable()],
+    ['ip', (table) => table.string('ip', 120).nullable()],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(VISITOR_HISTORY_TABLE, columnName);
+
+    if (!hasColumn) {
+      await db.schema.alterTable(VISITOR_HISTORY_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function ensureVisitorHistoryTables() {
+  await ensureVisitorClientTable();
+  await ensureVisitorHistoryTable();
+}
+
+async function generateAutoNickname() {
+  const result = await db.raw<{ rows?: Array<{ next_nickname_number: number | string | null }> }>(
+    `
+      select coalesce(max(cast(substring(nickname from '[0-9]+$') as integer)), 0) + 1 as next_nickname_number
+      from ${VISITOR_CLIENT_TABLE}
+      where nickname like '방문자\\_%'
+    `,
+  );
+
+  const nextNumber = Number(result.rows?.[0]?.next_nickname_number ?? 1);
+  return `방문자_${String(nextNumber).padStart(4, '0')}`;
+}
+
+export async function getVisitorClientByClientId(clientId: string) {
+  await ensureVisitorHistoryTables();
+  const row = await db(VISITOR_CLIENT_TABLE).where({ client_id: clientId }).first();
+  return row ? mapVisitorClientRow(row) : null;
+}
+
+export type VisitorClientListFilters = {
+  search?: string;
+  clientId?: string;
+  nickname?: string;
+  path?: string;
+  visitedFrom?: string;
+  visitedTo?: string;
+};
+
+export async function listVisitorClients(limit = 100, filters: VisitorClientListFilters = {}) {
+  await ensureVisitorHistoryTables();
+
+  const query = db(VISITOR_CLIENT_TABLE)
+    .select('*')
+    .orderBy('last_visited_at', 'desc')
+    .limit(Math.min(Math.max(Math.trunc(limit), 1), 500));
+
+  const normalizedSearch = filters.search?.trim() ?? '';
+  if (normalizedSearch) {
+    query.where((builder) => {
+      builder.whereILike('client_id', `%${normalizedSearch}%`).orWhereILike('nickname', `%${normalizedSearch}%`);
+    });
+  }
+
+  const normalizedClientId = filters.clientId?.trim() ?? '';
+  if (normalizedClientId) {
+    query.whereILike('client_id', `%${normalizedClientId}%`);
+  }
+
+  const normalizedNickname = filters.nickname?.trim() ?? '';
+  if (normalizedNickname) {
+    query.whereILike('nickname', `%${normalizedNickname}%`);
+  }
+
+  const normalizedPath = filters.path?.trim() ?? '';
+  const normalizedVisitedFrom = filters.visitedFrom?.trim() ?? '';
+  const normalizedVisitedTo = filters.visitedTo?.trim() ?? '';
+
+  if (normalizedPath || normalizedVisitedFrom || normalizedVisitedTo) {
+    query.whereIn(
+      'client_id',
+      db(VISITOR_HISTORY_TABLE)
+        .select('client_id')
+        .modify((historyQuery) => {
+          if (normalizedPath) {
+            historyQuery.whereILike('url', `%${normalizedPath}%`);
+          }
+
+          if (normalizedVisitedFrom) {
+            historyQuery.where('visited_at', '>=', normalizeDateBoundary(normalizedVisitedFrom, 'start'));
+          }
+
+          if (normalizedVisitedTo) {
+            historyQuery.where('visited_at', '<=', normalizeDateBoundary(normalizedVisitedTo, 'end'));
+          }
+        }),
+    );
+  }
+
+  const rows = await query;
+  return rows.map((row) => mapVisitorClientRow(row));
+}
+
+export async function listVisitorHistories(clientId: string, limit = 100) {
+  await ensureVisitorHistoryTables();
+
+  const rows = await db(VISITOR_HISTORY_TABLE)
+    .select('*')
+    .where({ client_id: clientId })
+    .orderBy('visited_at', 'desc')
+    .limit(Math.min(Math.max(Math.trunc(limit), 1), 500));
+
+  return rows.map((row) => mapVisitorHistoryRow(row));
+}
+
+export async function updateVisitorNickname(clientId: string, nickname: string) {
+  await ensureVisitorHistoryTables();
+
+  const rows = await db(VISITOR_CLIENT_TABLE)
+    .where({ client_id: clientId })
+    .update({
+      nickname,
+      updated_at: db.fn.now(),
+    })
+    .returning('*');
+
+  const row = rows[0];
+  return row ? mapVisitorClientRow(row) : null;
+}
+
+export async function trackVisit(payload: z.infer<typeof trackVisitSchema>, ip: string | null | undefined) {
+  await ensureVisitorHistoryTables();
+  const parsedPayload = trackVisitSchema.parse(payload);
+  const normalizedIp = String(ip ?? '').trim() || null;
+  const normalizedUserAgent = parsedPayload.userAgent?.trim() || null;
+
+  const existing = await db(VISITOR_CLIENT_TABLE)
+    .select('*')
+    .where({ client_id: parsedPayload.clientId })
+    .first();
+
+  if (existing) {
+    await db(VISITOR_CLIENT_TABLE)
+      .where({ client_id: parsedPayload.clientId })
+      .update({
+        last_visited_at: db.fn.now(),
+        visit_count: db.raw('coalesce(visit_count, 0) + 1'),
+        last_visited_url: parsedPayload.url,
+        last_user_agent: normalizedUserAgent,
+        last_ip: normalizedIp,
+        updated_at: db.fn.now(),
+      });
+  } else {
+    try {
+      // 최초 방문만 자동 닉네임을 발급하고 이후에는 사용자가 수정할 수 있습니다.
+      await db(VISITOR_CLIENT_TABLE).insert({
+        client_id: parsedPayload.clientId,
+        nickname: await generateAutoNickname(),
+        first_visited_at: db.fn.now(),
+        last_visited_at: db.fn.now(),
+        visit_count: 1,
+        last_visited_url: parsedPayload.url,
+        last_user_agent: normalizedUserAgent,
+        last_ip: normalizedIp,
+        created_at: db.fn.now(),
+        updated_at: db.fn.now(),
+      });
+    } catch (error) {
+      const dbError = error as { code?: string };
+
+      if (dbError.code !== '23505') {
+        throw error;
+      }
+
+      await db(VISITOR_CLIENT_TABLE)
+        .where({ client_id: parsedPayload.clientId })
+        .update({
+          last_visited_at: db.fn.now(),
+          visit_count: db.raw('coalesce(visit_count, 0) + 1'),
+          last_visited_url: parsedPayload.url,
+          last_user_agent: normalizedUserAgent,
+          last_ip: normalizedIp,
+          updated_at: db.fn.now(),
+        });
+    }
+  }
+
+  await db(VISITOR_HISTORY_TABLE).insert({
+    client_id: parsedPayload.clientId,
+    visited_at: db.fn.now(),
+    url: parsedPayload.url,
+    event_type: parsedPayload.eventType,
+    user_agent: normalizedUserAgent,
+    ip: normalizedIp,
+  });
+
+  return getVisitorClientByClientId(parsedPayload.clientId);
+}
diff --git a/etc/servers/work-server/src/services/work-server-build-service.ts b/etc/servers/work-server/src/services/work-server-build-service.ts
new file mode 100755
index 0000000..92d02ab
--- /dev/null
+++ b/etc/servers/work-server/src/services/work-server-build-service.ts
@@ -0,0 +1,138 @@
+import fs from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export type WorkServerBuildInfo = {
+  version: string;
+  buildId: string;
+  builtAt: string;
+};
+
+export type WorkServerSourceChangeInfo = {
+  changedAt: string;
+  path: string;
+};
+
+const MODULE_DIR_PATH = path.dirname(fileURLToPath(import.meta.url));
+const WORK_SERVER_ROOT_PATH = path.resolve(MODULE_DIR_PATH, '..', '..');
+const BUILD_INFO_FILE_PATH = path.join(WORK_SERVER_ROOT_PATH, 'dist', 'build-info.json');
+const SOURCE_TARGET_PATHS = [
+  path.join(WORK_SERVER_ROOT_PATH, 'src'),
+  path.join(WORK_SERVER_ROOT_PATH, 'scripts'),
+  path.join(WORK_SERVER_ROOT_PATH, 'package.json'),
+  path.join(WORK_SERVER_ROOT_PATH, 'tsconfig.json'),
+] as const;
+
+function normalizeBuildInfo(value: unknown): WorkServerBuildInfo | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+
+  const candidate = value as Partial<Record<keyof WorkServerBuildInfo, unknown>>;
+
+  if (
+    typeof candidate.version !== 'string' ||
+    typeof candidate.buildId !== 'string' ||
+    typeof candidate.builtAt !== 'string'
+  ) {
+    return null;
+  }
+
+  const builtAt = new Date(candidate.builtAt);
+
+  if (Number.isNaN(builtAt.getTime())) {
+    return null;
+  }
+
+  return {
+    version: candidate.version,
+    buildId: candidate.buildId,
+    builtAt: builtAt.toISOString(),
+  };
+}
+
+function readBuildInfoFromDiskSync(filePath: string) {
+  try {
+    if (!fs.existsSync(filePath)) {
+      return null;
+    }
+
+    return normalizeBuildInfo(JSON.parse(fs.readFileSync(filePath, 'utf8')));
+  } catch {
+    return null;
+  }
+}
+
+export async function readLatestWorkServerBuildInfo() {
+  try {
+    return normalizeBuildInfo(JSON.parse(await readFile(BUILD_INFO_FILE_PATH, 'utf8')));
+  } catch {
+    return null;
+  }
+}
+
+const runtimeWorkServerBuildInfo = readBuildInfoFromDiskSync(BUILD_INFO_FILE_PATH);
+
+export function getRuntimeWorkServerBuildInfo() {
+  return runtimeWorkServerBuildInfo;
+}
+
+async function findLatestSourceChangeInPath(targetPath: string): Promise<WorkServerSourceChangeInfo | null> {
+  try {
+    const stats = await fs.promises.stat(targetPath);
+
+    if (stats.isFile()) {
+      return {
+        changedAt: stats.mtime.toISOString(),
+        path: path.relative(WORK_SERVER_ROOT_PATH, targetPath) || path.basename(targetPath),
+      };
+    }
+
+    if (!stats.isDirectory()) {
+      return null;
+    }
+
+    const entries = await fs.promises.readdir(targetPath, { withFileTypes: true });
+    let latest: WorkServerSourceChangeInfo | null = null;
+
+    for (const entry of entries) {
+      if (entry.name === 'node_modules' || entry.name === 'dist' || entry.name === '.docker') {
+        continue;
+      }
+
+      const childPath = path.join(targetPath, entry.name);
+      const childLatest = await findLatestSourceChangeInPath(childPath);
+
+      if (!childLatest) {
+        continue;
+      }
+
+      if (!latest || childLatest.changedAt > latest.changedAt) {
+        latest = childLatest;
+      }
+    }
+
+    return latest;
+  } catch {
+    return null;
+  }
+}
+
+export async function readLatestWorkServerSourceChange() {
+  let latest: WorkServerSourceChangeInfo | null = null;
+
+  for (const targetPath of SOURCE_TARGET_PATHS) {
+    const candidate = await findLatestSourceChangeInPath(targetPath);
+
+    if (!candidate) {
+      continue;
+    }
+
+    if (!latest || candidate.changedAt > latest.changedAt) {
+      latest = candidate;
+    }
+  }
+
+  return latest;
+}
diff --git a/etc/servers/work-server/src/services/worklog-automation-service.test.ts b/etc/servers/work-server/src/services/worklog-automation-service.test.ts
new file mode 100755
index 0000000..d2cf316
--- /dev/null
+++ b/etc/servers/work-server/src/services/worklog-automation-service.test.ts
@@ -0,0 +1,119 @@
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  ensureDailyWorklogFile,
+  isWorklogCreationDue,
+  normalizeDailyCreateTime,
+  upgradeLegacyWorklogContent,
+} from './worklog-automation-utils.js';
+
+test('normalizeDailyCreateTime falls back when value is invalid', () => {
+  assert.equal(normalizeDailyCreateTime(undefined), '18:00');
+  assert.equal(normalizeDailyCreateTime('bad'), '18:00');
+  assert.equal(normalizeDailyCreateTime('09:30'), '09:30');
+});
+
+test('isWorklogCreationDue checks KST schedule once per day', () => {
+  assert.equal(isWorklogCreationDue(new Date('2026-04-07T08:59:00Z'), '18:00', false), false);
+  assert.equal(isWorklogCreationDue(new Date('2026-04-07T09:00:00Z'), '18:00', false), true);
+  assert.equal(isWorklogCreationDue(new Date('2026-04-07T09:05:00Z'), '18:00', true), false);
+});
+
+test('ensureDailyWorklogFile creates today worklog from template only once', async () => {
+  const repoPath = await mkdtemp(path.join(tmpdir(), 'worklog-automation-test-'));
+  const templatePath = path.join(repoPath, 'docs', 'templates', 'worklog-template.md');
+
+  try {
+    await mkdir(path.dirname(templatePath), { recursive: true });
+    await writeFile(templatePath, '# YYYY-MM-DD 작업일지\n\n## 오늘 작업\n\n- \n', 'utf8');
+
+    const worklogPath = await ensureDailyWorklogFile(repoPath, '2026-04-07');
+    const firstContent = await readFile(worklogPath, 'utf8');
+    assert.equal(firstContent.includes('# 2026-04-07 작업일지'), true);
+
+    await writeFile(worklogPath, '# keep\n', 'utf8');
+    await ensureDailyWorklogFile(repoPath, '2026-04-07');
+    const secondContent = await readFile(worklogPath, 'utf8');
+    assert.equal(secondContent, '# keep\n');
+  } finally {
+    await rm(repoPath, { recursive: true, force: true });
+  }
+});
+
+test('upgradeLegacyWorklogContent replaces legacy source placeholder with file scoped format', () => {
+  const legacyContent = `# 2026-04-07 작업일지
+
+## 상세 작업 내역
+
+- 
+
+## 소스
+
+- 요약 설명
+- \`path/to/file.tsx\`: 변경 또는 신규 추가 목적과 핵심 내용을 한 줄로 정리
+
+\`\`\`diff
+# 핵심 diff를 1~3개 블록으로 기록
+- before
++ after
+\`\`\`
+`;
+
+  const upgraded = upgradeLegacyWorklogContent(legacyContent);
+  assert.equal(upgraded.includes('### 파일 1: `path/to/file.tsx`'), true);
+  assert.equal(upgraded.includes('# 이 파일의 raw diff'), true);
+  assert.equal(upgraded.includes('`상세 작업 내역`에는 파일 목록이나 raw diff를 다시 쓰지 않음'), true);
+  assert.equal(upgraded.includes('`전체소스 / raw diff`'), true);
+});
+
+test('upgradeLegacyWorklogContent upgrades screenshot guidance to require full screenshot', () => {
+  const legacyContent = `# 2026-04-07 작업일지
+
+## 스크린샷
+
+- 저장소 기준 연결된 스크린샷 없음
+`;
+
+  const upgraded = upgradeLegacyWorklogContent(legacyContent);
+  assert.equal(upgraded.includes('- 전체 화면 스크린샷 1장은 필수'), true);
+  assert.equal(upgraded.includes('- 위젯/컴포넌트 단위 부분 스크린샷은 필요한 만큼 추가'), true);
+});
+
+test('upgradeLegacyWorklogContent removes obsolete auto-generated summary sections', () => {
+  const legacyContent = `# 2026-04-07 작업일지
+
+## 오늘 작업
+
+- 작업 정리
+
+## 커밋 목록 (2026-04-07, KST 기준)
+
+- \`abc1234\` example
+
+## 변경 요약
+
+- 자동 수집 요약
+
+## 변경 통계 (파일별, KST 기준)
+
+- src/example.ts (+1/-1)
+
+## 라인 통계 (KST 기준)
+
+- 추가: 1줄
+
+## 변경/신규 파일
+
+- M src/example.ts
+`;
+
+  const upgraded = upgradeLegacyWorklogContent(legacyContent);
+  assert.equal(upgraded.includes('## 커밋 목록'), false);
+  assert.equal(upgraded.includes('## 변경 요약'), false);
+  assert.equal(upgraded.includes('## 변경 통계'), false);
+  assert.equal(upgraded.includes('## 라인 통계'), false);
+  assert.equal(upgraded.includes('## 변경/신규 파일'), true);
+});
diff --git a/etc/servers/work-server/src/services/worklog-automation-service.ts b/etc/servers/work-server/src/services/worklog-automation-service.ts
new file mode 100755
index 0000000..edd4ded
--- /dev/null
+++ b/etc/servers/work-server/src/services/worklog-automation-service.ts
@@ -0,0 +1,77 @@
+import { db } from '../db/client.js';
+export {
+  DEFAULT_DAILY_CREATE_TIME,
+  ensureDailyWorklogFile,
+  getKstNowParts,
+  isValidDailyCreateTime,
+  isWorklogCreationDue,
+  normalizeDailyCreateTime,
+  renderWorklogTemplate,
+} from './worklog-automation-utils.js';
+import { DEFAULT_DAILY_CREATE_TIME, normalizeDailyCreateTime } from './worklog-automation-utils.js';
+
+export const WORKLOG_AUTOMATION_RUN_TABLE = 'worklog_automation_runs';
+
+async function ensureWorklogAutomationRunTable() {
+  const hasTable = await db.schema.hasTable(WORKLOG_AUTOMATION_RUN_TABLE);
+
+  if (!hasTable) {
+    await db.schema.createTable(WORKLOG_AUTOMATION_RUN_TABLE, (table) => {
+      table.increments('id').primary();
+      table.string('run_date', 10).notNullable().unique();
+      table.string('scheduled_time', 5).notNullable();
+      table.string('worklog_path').notNullable();
+      table.timestamp('executed_at', { useTz: true }).notNullable().defaultTo(db.fn.now());
+    });
+    return;
+  }
+
+  const requiredColumns: Array<[string, (table: any) => void]> = [
+    ['run_date', (table) => table.string('run_date', 10).notNullable().unique()],
+    ['scheduled_time', (table) => table.string('scheduled_time', 5).notNullable().defaultTo(DEFAULT_DAILY_CREATE_TIME)],
+    ['worklog_path', (table) => table.string('worklog_path').notNullable().defaultTo('')],
+    ['executed_at', (table) => table.timestamp('executed_at', { useTz: true }).notNullable().defaultTo(db.fn.now())],
+  ];
+
+  for (const [columnName, createColumn] of requiredColumns) {
+    const hasColumn = await db.schema.hasColumn(WORKLOG_AUTOMATION_RUN_TABLE, columnName);
+    if (!hasColumn) {
+      await db.schema.alterTable(WORKLOG_AUTOMATION_RUN_TABLE, (table) => {
+        createColumn(table);
+      });
+    }
+  }
+}
+
+export async function hasWorklogAutomationRunForDate(runDate: string) {
+  await ensureWorklogAutomationRunTable();
+  const row = await db(WORKLOG_AUTOMATION_RUN_TABLE).where({ run_date: runDate }).first();
+  return Boolean(row);
+}
+
+export async function markWorklogAutomationRun(args: {
+  runDate: string;
+  scheduledTime: string;
+  worklogPath: string;
+}) {
+  await ensureWorklogAutomationRunTable();
+
+  const existing = await db(WORKLOG_AUTOMATION_RUN_TABLE).where({ run_date: args.runDate }).first();
+  if (existing) {
+    await db(WORKLOG_AUTOMATION_RUN_TABLE)
+      .where({ run_date: args.runDate })
+      .update({
+        scheduled_time: args.scheduledTime,
+        worklog_path: args.worklogPath,
+        executed_at: db.fn.now(),
+      });
+    return;
+  }
+
+  await db(WORKLOG_AUTOMATION_RUN_TABLE).insert({
+    run_date: args.runDate,
+    scheduled_time: args.scheduledTime,
+    worklog_path: args.worklogPath,
+    executed_at: db.fn.now(),
+  });
+}
diff --git a/etc/servers/work-server/src/services/worklog-automation-utils.ts b/etc/servers/work-server/src/services/worklog-automation-utils.ts
new file mode 100755
index 0000000..f892817
--- /dev/null
+++ b/etc/servers/work-server/src/services/worklog-automation-utils.ts
@@ -0,0 +1,232 @@
+import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+const KST_TIME_ZONE = 'Asia/Seoul';
+export const DEFAULT_DAILY_CREATE_TIME = '18:00';
+const DEFAULT_WORKLOG_TEMPLATE = `# YYYY-MM-DD 작업일지
+
+## 오늘 작업
+
+- 
+
+## 이슈 및 해결
+
+- 
+
+## 결정 사항
+
+- 
+
+## 상세 작업 내역
+
+- 
+- 이 섹션에는 파일 목록, 경로 나열, raw diff를 직접 풀어쓰지 말고 작업 흐름과 판단만 정리
+- 파일 목록은 변경/신규 파일 섹션에, raw diff는 소스 섹션에만 기록
+
+## 스크린샷
+
+- 전체 화면 스크린샷 1장은 필수
+- 위젯/컴포넌트 단위 부분 스크린샷은 필요한 만큼 추가
+- 저장소 기준 연결된 스크린샷이 없으면 작업 종료 전 반드시 채움
+
+## 소스
+
+### 파일 1: \`path/to/file.tsx\`
+
+- 변경 또는 신규 추가 목적과 핵심 내용을 한 줄로 정리
+- \`상세 작업 내역\`에는 파일 목록이나 raw diff를 다시 쓰지 않음
+- \`소스\` 탭에서 Codex preview 스타일의 \`전체소스 / raw diff\` 전환을 제공하므로 여기에는 파일별 raw diff 위주로 남김
+
+\`\`\`diff
+# 이 파일의 raw diff
+- before
++ after
+\`\`\`
+
+### 파일 2: \`path/to/another-file.ts\`
+
+- 필요 없으면 이 섹션은 삭제
+
+## 실행 커맨드
+
+\`\`\`bash
+\`\`\`
+
+## 변경/신규 파일
+
+- 
+`;
+
+const OBSOLETE_WORKLOG_SECTION_TITLES = new Set([
+  '커밋 목록',
+  '변경 요약',
+  '변경 통계',
+  '라인 통계',
+]);
+
+type KstNowParts = {
+  dateKey: string;
+  minutesOfDay: number;
+};
+
+function extractKstParts(date: Date) {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: KST_TIME_ZONE,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).formatToParts(date);
+
+  const values = Object.fromEntries(parts.filter((part) => part.type !== 'literal').map((part) => [part.type, part.value]));
+  return {
+    year: Number(values.year ?? '0'),
+    month: Number(values.month ?? '0'),
+    day: Number(values.day ?? '0'),
+    hour: Number(values.hour ?? '0'),
+    minute: Number(values.minute ?? '0'),
+  };
+}
+
+export function isValidDailyCreateTime(value: string | undefined): value is string {
+  return typeof value === 'string' && /^\d{2}:\d{2}$/.test(value);
+}
+
+export function normalizeDailyCreateTime(value: string | undefined) {
+  return isValidDailyCreateTime(value) ? value : DEFAULT_DAILY_CREATE_TIME;
+}
+
+export function getKstNowParts(date = new Date()): KstNowParts {
+  const { year, month, day, hour, minute } = extractKstParts(date);
+  return {
+    dateKey: `${String(year).padStart(4, '0')}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+    minutesOfDay: hour * 60 + minute,
+  };
+}
+
+export function isWorklogCreationDue(now: Date, dailyCreateTime: string, alreadyExecutedToday: boolean) {
+  if (alreadyExecutedToday) {
+    return false;
+  }
+
+  const [hours, minutes] = normalizeDailyCreateTime(dailyCreateTime).split(':').map((value) => Number(value));
+  const nowParts = getKstNowParts(now);
+  return nowParts.minutesOfDay >= (hours * 60 + minutes);
+}
+
+export function renderWorklogTemplate(template: string, dateKey: string) {
+  return template.replaceAll('YYYY-MM-DD', dateKey);
+}
+
+function normalizeLevelTwoHeading(line: string) {
+  const match = line.match(/^##\s+([^\n]+)$/m);
+
+  if (!match) {
+    return '';
+  }
+
+  return match[1]?.replace(/\s+\(.*\)\s*$/u, '').trim() ?? '';
+}
+
+function stripObsoleteWorklogSections(content: string) {
+  const sections = content.split(/\n(?=##\s+)/);
+  const preservedSections = sections.filter((section) => {
+    const normalizedHeading = normalizeLevelTwoHeading(section);
+    return !OBSOLETE_WORKLOG_SECTION_TITLES.has(normalizedHeading);
+  });
+
+  return `${preservedSections.join('\n\n').replace(/\n{3,}/g, '\n\n').trimEnd()}\n`;
+}
+
+const LEGACY_SOURCE_SECTION = `## 소스
+
+- 요약 설명
+- \`path/to/file.tsx\`: 변경 또는 신규 추가 목적과 핵심 내용을 한 줄로 정리
+
+\`\`\`diff
+# 핵심 diff를 1~3개 블록으로 기록
+- before
++ after
+\`\`\``;
+
+const FILE_SCOPED_SOURCE_SECTION = `## 소스
+
+### 파일 1: \`path/to/file.tsx\`
+
+- 변경 또는 신규 추가 목적과 핵심 내용을 한 줄로 정리
+- \`상세 작업 내역\`에는 파일 목록이나 raw diff를 다시 쓰지 않음
+- \`소스\` 탭에서 Codex preview 스타일의 \`전체소스 / raw diff\` 전환을 제공하므로 여기에는 파일별 raw diff 위주로 남김
+
+\`\`\`diff
+# 이 파일의 raw diff
+- before
++ after
+\`\`\`
+
+### 파일 2: \`path/to/another-file.ts\`
+
+- 필요 없으면 이 섹션은 삭제`;
+
+export function upgradeLegacyWorklogContent(content: string) {
+  let upgradedContent = content;
+
+  if (upgradedContent.includes(LEGACY_SOURCE_SECTION)) {
+    upgradedContent = upgradedContent.replace(LEGACY_SOURCE_SECTION, FILE_SCOPED_SOURCE_SECTION);
+  }
+
+  upgradedContent = upgradedContent
+    .replace(
+      '## 상세 작업 내역\n\n- ',
+      `## 상세 작업 내역
+
+- 
+- 이 섹션에는 파일 목록, 경로 나열, raw diff를 직접 풀어쓰지 말고 작업 흐름과 판단만 정리
+- 파일 목록은 \`## 변경/신규 파일\`, raw diff는 \`## 소스\`에서만 기록`,
+    )
+    .replace(
+      '## 스크린샷\n\n- 저장소 기준 연결된 스크린샷 없음',
+      `## 스크린샷
+
+- 전체 화면 스크린샷 1장은 필수
+- 위젯/컴포넌트 단위 부분 스크린샷은 필요한 만큼 추가
+- 저장소 기준 연결된 스크린샷이 없으면 작업 종료 전 반드시 채움`,
+    )
+    .replaceAll('# 이 파일의 핵심 diff', '# 이 파일의 raw diff')
+    .replaceAll('`작업일지` 탭에는 중복 파일 목록을 다시 쓰지 않아도 됨', '`상세 작업 내역`에는 파일 목록이나 raw diff를 다시 쓰지 않음')
+    .replaceAll('`소스` 탭에서 전체소스/diff를 전환해 보므로 여기에는 파일별 raw diff 위주로 남김', '`소스` 탭에서 Codex preview 스타일의 `전체소스 / raw diff` 전환을 제공하므로 여기에는 파일별 raw diff 위주로 남김');
+
+  return stripObsoleteWorklogSections(upgradedContent);
+}
+
+async function readWorklogTemplate(repoPath: string) {
+  const templatePath = path.join(repoPath, 'docs', 'templates', 'worklog-template.md');
+
+  try {
+    return await readFile(templatePath, 'utf8');
+  } catch {
+    return DEFAULT_WORKLOG_TEMPLATE;
+  }
+}
+
+export async function ensureDailyWorklogFile(repoPath: string, dateKey: string) {
+  const worklogPath = path.join(repoPath, 'docs', 'worklogs', `${dateKey}.md`);
+
+  try {
+    await access(worklogPath);
+    const existingContent = await readFile(worklogPath, 'utf8');
+    const upgradedContent = upgradeLegacyWorklogContent(existingContent);
+
+    if (upgradedContent !== existingContent) {
+      await writeFile(worklogPath, upgradedContent, 'utf8');
+    }
+
+    return worklogPath;
+  } catch {
+    const template = await readWorklogTemplate(repoPath);
+    await mkdir(path.dirname(worklogPath), { recursive: true });
+    await writeFile(worklogPath, renderWorklogTemplate(template, dateKey), 'utf8');
+    return worklogPath;
+  }
+}
diff --git a/etc/servers/work-server/src/types/web-push.d.ts b/etc/servers/work-server/src/types/web-push.d.ts
new file mode 100755
index 0000000..b25c5f6
--- /dev/null
+++ b/etc/servers/work-server/src/types/web-push.d.ts
@@ -0,0 +1 @@
+declare module 'web-push';
diff --git a/etc/servers/work-server/src/workers/plan-worker.ts b/etc/servers/work-server/src/workers/plan-worker.ts
new file mode 100755
index 0000000..71b443d
--- /dev/null
+++ b/etc/servers/work-server/src/workers/plan-worker.ts
@@ -0,0 +1,1363 @@
+import { spawn } from 'node:child_process';
+import { constants as fsConstants } from 'node:fs';
+import { access } from 'node:fs/promises';
+import type { FastifyBaseLogger } from 'fastify';
+import { getEnv } from '../config/env.js';
+import { getAppConfigSnapshot } from '../services/app-config-service.js';
+import { createErrorLog, ERROR_LOG_VIEW_TOKEN } from '../services/error-log-service.js';
+import { sendNotifications } from '../services/notification-service.js';
+import { buildPlanNotificationData, shouldSendPlanNotification } from '../services/plan-notification-service.js';
+import {
+  ensureDailyWorklogFile,
+  getKstNowParts,
+  hasWorklogAutomationRunForDate,
+  isWorklogCreationDue,
+  markWorklogAutomationRun,
+  normalizeDailyCreateTime,
+} from '../services/worklog-automation-service.js';
+import {
+  claimNextPlanForBranch,
+  claimNextPlanForExecution,
+  claimNextPlanForMerge,
+  claimNextPlanForMainMerge,
+  formatPlanNotificationLabel,
+  isPlanLockedByWorker,
+  mapPlanRow,
+  markPlanAsCompleted,
+  markPlanAutomationFailure,
+  markPlanMainMergeFailure,
+  markPlanBranchReady,
+  markPlanReleaseMerged,
+  markPlanMerged,
+  markPlanWorkCompleted,
+  upsertAutoPlanItem,
+} from '../services/plan-service.js';
+import {
+  cleanAutomationWorktree,
+  ensureBranchExists,
+  mergeBranchToRelease,
+  mergeReleaseToMain,
+  pullMainProjectBranch,
+  pushBranch,
+} from '../services/git-service.js';
+import { registerDuePlanScheduledTasks } from '../services/plan-schedule-service.js';
+
+const STREAM_CAPTURE_LIMIT = 256 * 1024;
+const FIRST_PROGRESS_NOTIFICATION_MS = 60_000;
+const SECOND_PROGRESS_NOTIFICATION_MS = 120_000;
+const REPEATED_PROGRESS_NOTIFICATION_MS = 180_000;
+const STARTED_REQUEST_SUMMARY_LIMIT = 72;
+const ERROR_SUMMARY_MAX_LENGTH = 500;
+const ERROR_SUMMARY_LINE_PATTERN =
+  /(ERROR:|failed|failure|capacity|Read-only file system|permission|not permitted|sandbox|os error|ENOENT|EACCES|ECONN|SyntaxError|TypeError|ReferenceError)/i;
+const ERROR_SUMMARY_NOISE_PATTERN =
+  /^(exec|codex|tokens used|succeeded in \d+ms:?|[><=]{3,}|[A-Za-z]:\\|\/bin\/bash\b|\d+\s*[:|])/i;
+const PLAN_CODEX_RUNNER_MAX_ATTEMPTS = 2;
+const PLAN_CODEX_RUNNER_RETRY_DELAY_MS = 5000;
+const PLAN_CODEX_RUNNER_TRANSIENT_FAILURE_PATTERN =
+  /failed to record rollout items|failed to queue rollout items|channel closed/i;
+const PLAN_CODEX_HOME_PERMISSION_PATTERN =
+  /failed to record rollout items|failed to queue rollout items|channel closed|read-only file system|eacces|permission/i;
+const WEEKLY_DAY_TO_INDEX = {
+  sun: 0,
+  mon: 1,
+  tue: 2,
+  wed: 3,
+  thu: 4,
+  fri: 5,
+  sat: 6,
+} as const;
+
+type AutomationSnapshot = NonNullable<Awaited<ReturnType<typeof getAppConfigSnapshot>>['automation']>;
+type AutoReceiveScheduleEvaluation = {
+  due: boolean;
+  nextEligibleAt: Date | null;
+  scheduleLabel: string;
+};
+
+type WorklogAutomationSnapshot = NonNullable<Awaited<ReturnType<typeof getAppConfigSnapshot>>['worklogAutomation']>;
+
+function isValidTimeValue(value: string | undefined): value is string {
+  return typeof value === 'string' && /^\d{2}:\d{2}$/.test(value);
+}
+
+function withTime(baseDate: Date, timeValue: string) {
+  const [hours, minutes] = timeValue.split(':').map((part) => Number(part));
+  const nextDate = new Date(baseDate);
+  nextDate.setHours(hours ?? 0, minutes ?? 0, 0, 0);
+  return nextDate;
+}
+
+function getStartOfMinute(date: Date) {
+  const nextDate = new Date(date);
+  nextDate.setSeconds(0, 0);
+  return nextDate;
+}
+
+function normalizeRepeatIntervalMinutes(value: number | undefined) {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return 60;
+  }
+
+  return Math.min(1440, Math.max(1, Math.round(value)));
+}
+
+function getNextWeeklyDate(now: Date, targetDay: keyof typeof WEEKLY_DAY_TO_INDEX, timeValue: string) {
+  const candidate = withTime(now, timeValue);
+  const currentDay = now.getDay();
+  const targetDayIndex = WEEKLY_DAY_TO_INDEX[targetDay];
+  let dayOffset = targetDayIndex - currentDay;
+
+  if (dayOffset < 0 || (dayOffset === 0 && candidate.getTime() <= now.getTime())) {
+    dayOffset += 7;
+  }
+
+  candidate.setDate(candidate.getDate() + dayOffset);
+  return candidate;
+}
+
+function buildAutoWorklogPlanWorkId(dateKey: string) {
+  return `auto-worklog-${dateKey}`;
+}
+
+function stripAnsi(text: string) {
+  return text.replace(/\u001B\[[0-9;]*m/g, '');
+}
+
+function normalizeErrorSummaryLine(line: string) {
+  return stripAnsi(line)
+    .replace(/^\[plan-progress\]\s*/u, '')
+    .replace(/^\d{4}-\d{2}-\d{2}T\S+\s+ERROR\s+[^:]+:\s*/u, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function summarizeFailureOutput(output: string, fallback: string) {
+  const normalizedLines = output
+    .split('\n')
+    .map((line) => normalizeErrorSummaryLine(line))
+    .filter(Boolean)
+    .filter((line) => !ERROR_SUMMARY_NOISE_PATTERN.test(line));
+
+  const bestLine =
+    normalizedLines.filter((line) => ERROR_SUMMARY_LINE_PATTERN.test(line)).at(-1) ??
+    normalizedLines.at(-1) ??
+    fallback.trim();
+
+  const summary = bestLine.replace(/\s+/g, ' ').trim();
+  return summary.slice(0, ERROR_SUMMARY_MAX_LENGTH) || '자동 작업 실행에 실패했습니다.';
+}
+
+function isTransientPlanCodexFailure(error: unknown) {
+  const message = error instanceof Error ? error.message : String(error ?? '');
+  return PLAN_CODEX_RUNNER_TRANSIENT_FAILURE_PATTERN.test(message);
+}
+
+async function wait(ms: number) {
+  await new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+async function canAccessPath(pathValue: string | undefined, mode: number) {
+  if (!pathValue) {
+    return false;
+  }
+
+  try {
+    await access(pathValue, mode);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function appendCodexHomeHint(message: string, env: ReturnType<typeof getEnv>) {
+  if (!PLAN_CODEX_HOME_PERMISSION_PATTERN.test(message)) {
+    return message;
+  }
+
+  const codexHome = process.env.CODEX_HOME?.trim() || '(unset)';
+  const templateHome = env.PLAN_CODEX_TEMPLATE_HOME?.trim() || process.env.CODEX_HOME_TEMPLATE?.trim() || '(unset)';
+  return `${message} [hint: CODEX_HOME=${codexHome}, template=${templateHome}, writable home/volume and permissions를 확인하세요.]`;
+}
+
+export class PlanWorker {
+  private readonly workerId: string;
+  private intervalMs: number;
+  private timer: NodeJS.Timeout | null = null;
+  private running = false;
+  private lastAutoReceiveAt: Date | null = null;
+  private lastWorklogAutomationRequestAt: Date | null = null;
+
+  constructor(private readonly logger: FastifyBaseLogger) {
+    const env = getEnv();
+    this.workerId = env.PLAN_WORKER_ID || `plan-worker-${process.pid}`;
+    this.intervalMs = env.PLAN_WORKER_INTERVAL_MS;
+  }
+
+  private isLocalMainMode() {
+    return Boolean(getEnv().PLAN_LOCAL_MAIN_MODE);
+  }
+
+  start() {
+    const env = getEnv();
+
+    if (!env.PLAN_WORKER_ENABLED) {
+      this.logger.info('Plan worker is disabled');
+      return;
+    }
+
+    if (this.timer) {
+      return;
+    }
+
+    this.intervalMs = env.PLAN_WORKER_INTERVAL_MS;
+    void (async () => {
+      const codexHome = process.env.CODEX_HOME?.trim() || '';
+      const codexTemplateHome = env.PLAN_CODEX_TEMPLATE_HOME?.trim() || process.env.CODEX_HOME_TEMPLATE?.trim() || '';
+      const [codexHomeWritable, codexTemplateReadable] = await Promise.all([
+        canAccessPath(codexHome, fsConstants.W_OK),
+        canAccessPath(codexTemplateHome, fsConstants.R_OK),
+      ]);
+
+      this.logger.info(
+        {
+          workerId: this.workerId,
+          intervalMs: this.intervalMs,
+          repoPath: env.PLAN_GIT_REPO_PATH,
+          releaseBranch: env.PLAN_RELEASE_BRANCH,
+          codexHome: codexHome || null,
+          codexHomeWritable,
+          codexTemplateHome: codexTemplateHome || null,
+          codexTemplateReadable,
+        },
+        'Plan worker started',
+      );
+    })();
+
+    void this.tick();
+    this.timer = setInterval(() => {
+      void this.tick();
+    }, this.intervalMs);
+  }
+
+  async stop() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+
+  private async persistAutomationErrorLog(args: {
+    planId: number;
+    workId: string | null | undefined;
+    workerStatus: '브랜치실패' | '자동작업실패' | 'release반영실패' | 'main반영실패';
+    error: unknown;
+    detail: Record<string, unknown>;
+  }) {
+    const handledError = args.error instanceof Error ? args.error : new Error(String(args.error));
+
+    try {
+      await createErrorLog({
+        source: 'automation',
+        sourceLabel: 'Plan 자동화 워커',
+        errorType: args.workerStatus,
+        errorName: handledError.name,
+        errorMessage: handledError.message || '자동화 처리 중 오류가 발생했습니다.',
+        detail: JSON.stringify(args.detail, null, 2),
+        stackTrace: handledError.stack ?? null,
+        relatedPlanId: args.planId,
+        relatedWorkId: args.workId ?? null,
+        context: args.detail,
+      });
+    } catch (loggingError) {
+      this.logger.error({ err: loggingError, planId: args.planId }, 'Failed to persist automation error log');
+    }
+  }
+
+  private async notifyPlan(planId: number, workId: string, title: string, body: string, eventType: string) {
+    try {
+      if (!(await shouldSendPlanNotification(eventType))) {
+        this.logger.info({ planId, workId, eventType, skipped: true, reason: 'event-disabled' }, 'Notification send skipped');
+        return;
+      }
+
+      const result = await sendNotifications({
+        title,
+        body,
+        threadId: `plan-${planId}`,
+        data: buildPlanNotificationData(planId, workId, eventType),
+      });
+
+      this.logger.info(
+        {
+          planId,
+          workId,
+          eventType,
+          ios: {
+            skipped: result.ios.skipped,
+            sentCount: result.ios.sentCount,
+            failedCount: result.ios.failedCount,
+            invalidTokens: result.ios.invalidTokens ?? [],
+          },
+          web: {
+            skipped: result.web.skipped,
+            sentCount: result.web.sentCount,
+            failedCount: result.web.failedCount,
+            invalidEndpoints: result.web.invalidEndpoints,
+          },
+        },
+        'Notification send completed',
+      );
+
+      if (!result.ios.skipped && result.ios.failedCount > 0) {
+        this.logger.warn({ planId, failedCount: result.ios.failedCount }, 'iOS notification send had failures');
+      }
+
+      if (!result.web.skipped && result.web.failedCount > 0) {
+        this.logger.warn({ planId, failedCount: result.web.failedCount }, 'Web push notification send had failures');
+      }
+    } catch (error) {
+      this.logger.error({ planId, err: error }, 'Notification send failed');
+    }
+  }
+
+  private summarizeAutomationProgress(output: string) {
+    const rawLines = output
+      .split(/\r?\n/)
+      .map((line) => line.trim());
+
+    const sectionHeaders = [
+      '작업 ID',
+      '요청 요약',
+      '상세 요청',
+      '최근 조치 이력',
+      '최근 이슈 이력',
+      '규칙',
+      'Detailed Request',
+      'Request Summary',
+      'Recent Actions',
+      'Recent Issues',
+      'Rules',
+    ];
+    const excludedSections = new Set(['요청 요약', '상세 요청', 'Detailed Request', 'Request Summary']);
+    let currentSection = '';
+    const lines = rawLines.filter((line) => {
+      if (!line) {
+        return false;
+      }
+
+      const matchedHeader = sectionHeaders.find((header) => line === header || line.startsWith(`${header}:`));
+
+      if (matchedHeader) {
+        currentSection = matchedHeader;
+        return !excludedSections.has(matchedHeader);
+      }
+
+      if (/^\d+\.\s/.test(line) && currentSection === '규칙') {
+        return false;
+      }
+
+      return !excludedSections.has(currentSection);
+    });
+
+    const meaningfulLines = lines.filter((line) => {
+      if (line.length < 6) {
+        return false;
+      }
+
+      if (/^(error|warn|info|debug|trace)\b/i.test(line)) {
+        return false;
+      }
+
+      if (/^(tokens?|cost|duration|elapsed|reading prompt|thinking)\b/i.test(line)) {
+        return false;
+      }
+
+      if (/^(작업\s*ID|요청\s*요약|상세\s*요청|최근\s*조치\s*이력|최근\s*이슈\s*이력|규칙)\s*:/u.test(line)) {
+        return false;
+      }
+
+      if (/^(you are|detailed request|request summary|recent actions|recent issues|rules)\s*:/i.test(line)) {
+        return false;
+      }
+
+      if (/^[|/\\-]+$/.test(line)) {
+        return false;
+      }
+
+      return true;
+    });
+
+    const recentLines = meaningfulLines.slice(-40);
+    const explicitProgressLine = [...recentLines]
+      .reverse()
+      .find((line) => line.startsWith('[plan-progress]'));
+
+    if (explicitProgressLine) {
+      return explicitProgressLine.replace(/^\[plan-progress\]\s*/u, '').trim().slice(0, 160);
+    }
+
+    const recentCommand = [...recentLines]
+      .reverse()
+      .map((line) => this.extractAutomationCommandSummary(line))
+      .find(Boolean);
+    const recentFile = [...recentLines]
+      .reverse()
+      .flatMap((line) => {
+        const matches = line.match(/(?:[A-Za-z0-9._-]+\/)+[A-Za-z0-9._-]+\.[A-Za-z0-9._-]+/g) ?? [];
+        return matches.map((match) => match.replace(/^\.?\//, ''));
+      })
+      .find((filePath) => !filePath.startsWith('node_modules/'));
+
+    const recentActionLine = [...recentLines].reverse().find((line) => {
+      return /(수정|변경|패치|로직|구현|추가|생성|작성|분석|탐색|확인|검증|테스트|edit|modify|update|patch|implement|create|add|write|analy|inspect|search|review|test|verif)/i.test(
+        line,
+      );
+    });
+
+    const actionSummary = this.summarizeAutomationAction(recentActionLine ?? recentFile ?? '');
+
+    if (recentFile && actionSummary && recentCommand) {
+      return `${recentFile} ${actionSummary} (${recentCommand})`.slice(0, 160);
+    }
+
+    if (recentFile && actionSummary) {
+      return `${recentFile} ${actionSummary}`.slice(0, 160);
+    }
+
+    if (recentCommand && actionSummary) {
+      return `${actionSummary} (${recentCommand})`.slice(0, 160);
+    }
+
+    if (recentFile) {
+      return recentCommand ? `${recentFile} 확인 중 (${recentCommand})`.slice(0, 160) : `${recentFile} 확인 중`;
+    }
+
+    if (actionSummary) {
+      return recentCommand ? `${actionSummary} (${recentCommand})`.slice(0, 160) : actionSummary;
+    }
+
+    if (recentCommand) {
+      return `커맨드 실행 중 (${recentCommand})`.slice(0, 160);
+    }
+
+    const latestLine = [...meaningfulLines].reverse()[0];
+
+    if (!latestLine) {
+      return '관련 파일과 최근 변경 지점을 확인하는 중입니다.';
+    }
+
+    return latestLine.replace(/\s+/g, ' ').slice(0, 160);
+  }
+
+  private extractAutomationCommandSummary(line: string) {
+    const text = String(line ?? '').trim();
+
+    if (!text) {
+      return '';
+    }
+
+    const rawCommand =
+      text.match(/^Command:\s+(.+)$/i)?.[1] ??
+      text.match(/^(?:Running|Execute(?:d|ing)?|Executing)\s*:?\s+(.+)$/i)?.[1] ??
+      text.match(/^\$\s+(.+)$/)?.[1] ??
+      '';
+
+    if (!rawCommand) {
+      return '';
+    }
+
+    const normalized = rawCommand
+      .replace(/^\/bin\/(?:bash|sh|zsh)\s+-lc\s+/i, '')
+      .replace(/^(?:bash|sh|zsh)\s+-lc\s+/i, '')
+      .replace(/^['"]|['"]$/g, '')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    if (!normalized) {
+      return '';
+    }
+
+    return normalized.length > 96 ? `${normalized.slice(0, 95).trim()}…` : normalized;
+  }
+
+  private summarizeAutomationAction(line: string) {
+    const text = String(line ?? '').replace(/\s+/g, ' ').trim();
+
+    if (!text) {
+      return '';
+    }
+
+    if (this.extractAutomationCommandSummary(text)) {
+      if (/\b(git|npm|pnpm|yarn|node|npx|tsx)\b/i.test(text)) {
+        return '도구 실행 중';
+      }
+
+      return '커맨드 실행 중';
+    }
+
+    if (/(테스트|검증|확인|test|verify|check)/i.test(text)) {
+      return '검증 중';
+    }
+
+    if (/(분석|탐색|조사|읽|review|inspect|search|analy)/i.test(text)) {
+      return '코드 분석 중';
+    }
+
+    if (/(수정|변경|패치|fix|edit|modify|update|patch)/i.test(text)) {
+      return '수정 중';
+    }
+
+    if (/(로직|구현|추가|생성|작성|build|implement|create|add|write)/i.test(text)) {
+      return '로직 작성 중';
+    }
+
+    return text.slice(0, 160);
+  }
+
+  private buildProgressNotificationTitle(planId: number, planLabel: string, progressSummary: string) {
+    const workSummary = progressSummary || '작업 내용 확인 중';
+    const compactSummary = workSummary
+      .replace(/^현재 단계:\s*/u, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .slice(0, 48);
+
+    const normalizedPlanLabel = String(planLabel ?? '').trim();
+    const hasCustomLabel =
+      normalizedPlanLabel &&
+      normalizedPlanLabel !== `#${planId}` &&
+      normalizedPlanLabel !== '작업ID' &&
+      normalizedPlanLabel !== '[작업ID]' &&
+      normalizedPlanLabel.toLowerCase() !== 'undefined' &&
+      normalizedPlanLabel.toLowerCase() !== 'null';
+    const labelPrefix = hasCustomLabel ? `#${planId} ${normalizedPlanLabel}` : `#${planId}`;
+    return `[${labelPrefix}] ${compactSummary || '자동 작업 진행중'}`;
+  }
+
+  private buildExecutionCompletedBody(autoDeployToMain: boolean) {
+    return autoDeployToMain
+      ? '자동 작업이 완료되었습니다. 이후 release/main 반영이 계속 진행됩니다.'
+      : '자동 작업이 완료되었습니다. 이후 release 반영은 별도 요청으로 진행됩니다.';
+  }
+
+  private summarizeExecutionRequest(note: unknown, limit = STARTED_REQUEST_SUMMARY_LIMIT) {
+    const text = String(note ?? '')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    if (!text) {
+      return '';
+    }
+
+    if (text.length <= limit) {
+      return text;
+    }
+
+    return `${text.slice(0, Math.max(0, limit - 1)).trim()}…`;
+  }
+
+  private buildExecutionStartedBody(note: unknown) {
+    const requestSummary = this.summarizeExecutionRequest(note);
+    return requestSummary ? `자동 작업을 시작했습니다.\n요청: ${requestSummary}` : '자동 작업을 시작했습니다.';
+  }
+
+  private buildAutoWorklogPlanNote(dateKey: string, worklogAutomation: WorklogAutomationSnapshot) {
+    const worklogPath = `docs/worklogs/${dateKey}.md`;
+    const screenshotDir = `docs/assets/worklogs/${dateKey}/`;
+    const templateLabel = worklogAutomation.template === 'simple' ? '간단형' : '상세형';
+
+    return [
+      `${dateKey} 기준 업무일지 자동화 Plan입니다.`,
+      `${worklogPath} 파일에 금일 작업일지를 정리해 주세요.`,
+      `오늘 작업, 이슈 및 해결, 결정 사항, 상세 작업 내역을 최신 상태로 반영해 주세요.`,
+      `${worklogPath}의 작업일지 탭 본문과 상세 작업 내역에는 파일 목록, 경로 나열, raw diff, 중복 소스 설명을 쓰지 말고 작업 흐름과 판단만 정리해 주세요.`,
+      worklogAutomation.includeScreenshots
+        ? `${screenshotDir} 경로에 오늘 작업 기준 전체 화면 스크린샷 1장 이상을 반드시 저장하고, 위젯/컴포넌트 단위 부분 스크린샷이 있으면 함께 연결해 주세요.`
+        : `${worklogPath}의 스크린샷 섹션은 현재 상태를 유지해도 됩니다.`,
+      worklogAutomation.includeChangedFiles
+        ? `${worklogPath}의 소스 탭에서 이전 작업들도 Codex preview 스타일의 전체소스/raw diff를 볼 수 있게 변경/신규 파일 목록과 파일별 raw diff 기준 증적을 남겨 주세요.`
+        : `${worklogPath}의 파일 변경 증적은 꼭 추가하지 않아도 됩니다.`,
+      worklogAutomation.includeCommandLogs
+        ? `${worklogPath}의 실행 커맨드 섹션에 오늘 사용한 주요 명령을 정리해 주세요.`
+        : `${worklogPath}의 실행 커맨드 섹션은 비워 두어도 됩니다.`,
+      `업무일지 템플릿은 ${templateLabel} 기준으로 정리해 주세요.`,
+    ]
+      .filter(Boolean)
+      .join('\n');
+  }
+
+  private buildAutomationFinalStageTitle(planLabel: string) {
+    return `[${planLabel}] 자동화 마지막 단계`;
+  }
+
+  private async notifyAutomationFinalStage(
+    planId: number,
+    workId: string,
+    planLabel: string,
+    body: string,
+    eventType: string,
+  ) {
+    await this.notifyPlan(
+      planId,
+      workId,
+      this.buildAutomationFinalStageTitle(planLabel),
+      body,
+      eventType,
+    );
+  }
+
+  private async runCodexCommandWithProgressNotifications(
+    planId: number,
+    workId: string,
+    note: unknown,
+  ) {
+    const env = getEnv();
+    const runCodexCommandAttempt = async (attempt: number) =>
+      await new Promise<string>((resolve, reject) => {
+        let settled = false;
+        let stdout = '';
+        let stderr = '';
+        let notificationCount = 0;
+        let progressTimer: NodeJS.Timeout | null = null;
+        const planLabel = formatPlanNotificationLabel(workId, planId);
+
+        const child = spawn('node', [env.PLAN_CODEX_RUNNER_PATH], {
+          cwd: env.PLAN_GIT_REPO_PATH,
+          stdio: ['ignore', 'pipe', 'pipe'],
+          env: {
+            ...process.env,
+            PLAN_REPO_PATH: env.PLAN_LOCAL_MAIN_MODE ? env.PLAN_MAIN_PROJECT_REPO_PATH : env.PLAN_GIT_REPO_PATH,
+            PLAN_API_BASE_URL: 'http://127.0.0.1:3100/api',
+            PLAN_ACCESS_TOKEN: ERROR_LOG_VIEW_TOKEN,
+            PLAN_ITEM_ID: String(planId),
+            PLAN_CODEX_BIN: env.PLAN_CODEX_BIN,
+            PLAN_CODEX_TEMPLATE_HOME: env.PLAN_CODEX_TEMPLATE_HOME,
+            PLAN_GIT_USER_NAME: env.PLAN_GIT_USER_NAME,
+            PLAN_GIT_USER_EMAIL: env.PLAN_GIT_USER_EMAIL,
+            PLAN_LOCAL_MAIN_MODE: env.PLAN_LOCAL_MAIN_MODE ? 'true' : 'false',
+            PLAN_SKIP_WORK_COMPLETE: 'true',
+          },
+        });
+
+        const clearProgressTimer = () => {
+          if (progressTimer) {
+            clearTimeout(progressTimer);
+            progressTimer = null;
+          }
+        };
+
+        const scheduleProgressNotification = (delayMs: number) => {
+          progressTimer = setTimeout(() => {
+            void (async () => {
+              const stillOwned = await isPlanLockedByWorker(planId, this.workerId);
+
+              if (!stillOwned) {
+                clearProgressTimer();
+                return;
+              }
+
+              const mergedOutput = `${stdout}\n${stderr}`.trim();
+              const progressSummary = this.summarizeAutomationProgress(mergedOutput);
+              const elapsedMinutes =
+                notificationCount === 0 ? 1 : notificationCount === 1 ? 3 : 3 + (notificationCount - 1) * 3;
+              notificationCount += 1;
+
+              await this.notifyPlan(
+                planId,
+                workId,
+                this.buildProgressNotificationTitle(planId, planLabel, progressSummary),
+                `${elapsedMinutes}분 경과했습니다.\n현재 처리: ${progressSummary}`,
+                'work-progress',
+              );
+
+              const nextDelayMs =
+                notificationCount === 1 ? SECOND_PROGRESS_NOTIFICATION_MS : REPEATED_PROGRESS_NOTIFICATION_MS;
+              scheduleProgressNotification(nextDelayMs);
+            })();
+          }, delayMs);
+        };
+
+        child.stdout?.on('data', (chunk) => {
+          stdout = (stdout + String(chunk)).slice(-STREAM_CAPTURE_LIMIT);
+        });
+
+        child.stderr?.on('data', (chunk) => {
+          stderr = (stderr + String(chunk)).slice(-STREAM_CAPTURE_LIMIT);
+        });
+
+        child.on('error', (error) => {
+          if (settled) {
+            return;
+          }
+
+          settled = true;
+          clearProgressTimer();
+          reject(error);
+        });
+
+        child.on('close', (code, signal) => {
+          if (settled) {
+            return;
+          }
+
+          settled = true;
+          clearProgressTimer();
+
+          if (code === 0) {
+            resolve(stdout.trim());
+            return;
+          }
+
+          const details = summarizeFailureOutput(
+            `${stderr}\n${stdout}`,
+            `Codex exited with code ${code ?? 'unknown'}${signal ? ` (${signal})` : ''}`,
+          );
+          reject(new Error(details));
+        });
+
+        if (attempt > 1) {
+          this.logger.warn(
+            {
+              planId,
+              workId,
+              attempt,
+              maxAttempts: PLAN_CODEX_RUNNER_MAX_ATTEMPTS,
+            },
+            'Retrying plan codex runner after transient failure',
+          );
+        }
+
+        scheduleProgressNotification(FIRST_PROGRESS_NOTIFICATION_MS);
+      });
+
+    let lastError: unknown = null;
+
+    for (let attempt = 1; attempt <= PLAN_CODEX_RUNNER_MAX_ATTEMPTS; attempt += 1) {
+      try {
+        return await runCodexCommandAttempt(attempt);
+      } catch (error) {
+        lastError = error;
+
+        if (attempt >= PLAN_CODEX_RUNNER_MAX_ATTEMPTS || !isTransientPlanCodexFailure(error)) {
+          throw error;
+        }
+
+        await this.notifyPlan(
+          planId,
+          workId,
+          `[${formatPlanNotificationLabel(workId, planId)}] 자동화 재시도`,
+          `Codex 내부 채널 오류로 자동 작업을 다시 시도합니다. (${attempt + 1}/${PLAN_CODEX_RUNNER_MAX_ATTEMPTS})`,
+          'work-progress',
+        );
+
+        await wait(PLAN_CODEX_RUNNER_RETRY_DELAY_MS);
+      }
+    }
+
+    throw lastError instanceof Error ? lastError : new Error(String(lastError ?? '자동 작업 실행에 실패했습니다.'));
+  }
+
+  private refreshInterval(env: ReturnType<typeof getEnv>) {
+    if (this.intervalMs === env.PLAN_WORKER_INTERVAL_MS) {
+      return;
+    }
+
+    this.intervalMs = env.PLAN_WORKER_INTERVAL_MS;
+
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        void this.tick();
+      }, this.intervalMs);
+    }
+  }
+
+  private evaluateAutoReceiveSchedule(automation: AutomationSnapshot | undefined, now: Date): AutoReceiveScheduleEvaluation {
+    const scheduleType = automation?.autoReceiveScheduleType ?? 'interval';
+
+    if (scheduleType === 'daily') {
+      const dailyTime = isValidTimeValue(automation?.autoReceiveDailyTime) ? automation.autoReceiveDailyTime : '09:00';
+      const todayScheduledAt = withTime(now, dailyTime);
+      const nextEligibleAt = now.getTime() >= todayScheduledAt.getTime()
+        ? todayScheduledAt
+        : todayScheduledAt;
+      const alreadyProcessedToday =
+        this.lastAutoReceiveAt &&
+        this.lastAutoReceiveAt.getFullYear() === now.getFullYear() &&
+        this.lastAutoReceiveAt.getMonth() === now.getMonth() &&
+        this.lastAutoReceiveAt.getDate() === now.getDate() &&
+        this.lastAutoReceiveAt.getTime() >= todayScheduledAt.getTime();
+
+      return {
+        due: now.getTime() >= todayScheduledAt.getTime() && !alreadyProcessedToday,
+        nextEligibleAt:
+          now.getTime() >= todayScheduledAt.getTime()
+            ? withTime(new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1), dailyTime)
+            : todayScheduledAt,
+        scheduleLabel: `daily:${dailyTime}`,
+      };
+    }
+
+    if (scheduleType === 'weekly') {
+      const weeklyDay = automation?.autoReceiveWeeklyDay ?? 'mon';
+      const weeklyTime = isValidTimeValue(automation?.autoReceiveWeeklyTime) ? automation.autoReceiveWeeklyTime : '09:00';
+      const currentScheduledAt = getNextWeeklyDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000), weeklyDay, weeklyTime);
+      const alreadyProcessedThisWeek =
+        this.lastAutoReceiveAt !== null && this.lastAutoReceiveAt.getTime() >= currentScheduledAt.getTime();
+
+      return {
+        due: now.getTime() >= currentScheduledAt.getTime() && !alreadyProcessedThisWeek,
+        nextEligibleAt: getNextWeeklyDate(now, weeklyDay, weeklyTime),
+        scheduleLabel: `weekly:${weeklyDay}:${weeklyTime}`,
+      };
+    }
+
+    const intervalSeconds =
+      typeof automation?.autoReceiveIntervalSeconds === 'number' && Number.isFinite(automation.autoReceiveIntervalSeconds)
+        ? Math.max(1, Math.round(automation.autoReceiveIntervalSeconds))
+        : 30;
+    const lastAutoReceiveAt = this.lastAutoReceiveAt;
+    const nextEligibleAt = lastAutoReceiveAt
+      ? new Date(lastAutoReceiveAt.getTime() + intervalSeconds * 1000)
+      : getStartOfMinute(now);
+
+    return {
+      due: !lastAutoReceiveAt || now.getTime() >= nextEligibleAt.getTime(),
+      nextEligibleAt,
+      scheduleLabel: `interval:${intervalSeconds}`,
+    };
+  }
+
+  private async tick() {
+    if (this.running) {
+      return;
+    }
+
+    this.running = true;
+
+    try {
+      const env = getEnv();
+      const appConfig = await getAppConfigSnapshot();
+      const autoRefreshEnabled = appConfig.automation?.autoRefreshEnabled ?? true;
+      const autoRefreshIntervalSeconds = appConfig.automation?.autoRefreshIntervalSeconds;
+      const resolvedIntervalMs =
+        typeof autoRefreshIntervalSeconds === 'number' && Number.isFinite(autoRefreshIntervalSeconds)
+          ? Math.max(1, Math.round(autoRefreshIntervalSeconds)) * 1000
+          : env.PLAN_WORKER_INTERVAL_MS;
+
+      if (!env.PLAN_WORKER_ENABLED || !autoRefreshEnabled) {
+        return;
+      }
+
+      this.refreshInterval({
+        ...env,
+        PLAN_WORKER_INTERVAL_MS: resolvedIntervalMs,
+      });
+
+      await this.processWorklogAutomation(appConfig);
+      await this.processPlanScheduledTasks();
+      await this.processRegisteredPlans();
+      await this.processExecutablePlans(appConfig);
+      await this.processReleaseReadyPlans();
+      await this.processMainMergeReadyPlans();
+    } finally {
+      this.running = false;
+    }
+  }
+
+  private async processPlanScheduledTasks() {
+    try {
+      const registeredPlans = await registerDuePlanScheduledTasks();
+
+      if (registeredPlans.length > 0) {
+        this.logger.info({ count: registeredPlans.length }, 'Plan scheduled tasks registered');
+      }
+    } catch (error) {
+      const handledError = error instanceof Error ? error : new Error(String(error));
+      this.logger.error({ err: handledError }, 'Plan scheduled task processing failed');
+      await createErrorLog({
+        source: 'automation',
+        sourceLabel: 'Plan 스케줄',
+        errorType: 'PlanScheduleFailed',
+        errorName: handledError.name,
+        errorMessage: handledError.message,
+        stackTrace: handledError.stack ?? null,
+        context: {
+          workerId: this.workerId,
+        },
+      });
+    }
+  }
+
+  private async processRegisteredPlans() {
+    const env = getEnv();
+    const row = await claimNextPlanForBranch(this.workerId);
+
+    if (!row) {
+      return;
+    }
+
+    const item = mapPlanRow(row);
+    const planId = Number(item.id);
+    const planLabel = formatPlanNotificationLabel(String(item.workId), planId);
+    const assignedBranch = String(item.assignedBranch ?? '');
+    const releaseTarget = String(item.releaseTarget ?? env.PLAN_RELEASE_BRANCH);
+
+    try {
+      if (!this.isLocalMainMode()) {
+        await cleanAutomationWorktree(env.PLAN_GIT_REPO_PATH);
+        await ensureBranchExists(
+          {
+            repoPath: env.PLAN_GIT_REPO_PATH,
+            releaseBranch: env.PLAN_RELEASE_BRANCH,
+            mainBranch: env.PLAN_MAIN_BRANCH,
+          },
+          assignedBranch,
+          releaseTarget,
+        );
+      }
+
+      const updatedRow = await markPlanBranchReady(planId, this.workerId);
+      if (!updatedRow) {
+        this.logger.info({ planId }, 'Plan branch creation result ignored because ownership changed');
+        return;
+      }
+      this.logger.info(
+        { planId, branch: assignedBranch, localMainMode: this.isLocalMainMode() },
+        this.isLocalMainMode() ? 'Plan local main execution prepared' : 'Plan branch created',
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '브랜치 생성에 실패했습니다.';
+      await this.persistAutomationErrorLog({
+        planId,
+        workId: String(item.workId),
+        workerStatus: '브랜치실패',
+        error,
+        detail: {
+          stage: 'branch',
+          workerId: this.workerId,
+          assignedBranch,
+          releaseTarget,
+        },
+      });
+      const failureRow = await markPlanAutomationFailure(planId, this.workerId, '브랜치실패', message);
+      if (!failureRow) {
+        this.logger.info({ planId }, 'Plan branch failure ignored because ownership changed');
+        return;
+      }
+      await this.notifyAutomationFinalStage(
+        planId,
+        String(item.workId),
+        planLabel,
+        `브랜치 생성 실패\n${message}`,
+        'branch-failed',
+      );
+      this.logger.error({ planId, err: error }, 'Plan branch creation failed');
+    }
+  }
+
+  private async processReleaseReadyPlans() {
+    const env = getEnv();
+    const row = await claimNextPlanForMerge(this.workerId);
+
+    if (!row) {
+      return;
+    }
+
+    const item = mapPlanRow(row);
+    const planId = Number(item.id);
+    const planLabel = formatPlanNotificationLabel(String(item.workId), planId);
+    const assignedBranch = String(item.assignedBranch ?? '');
+    const releaseTarget = String(item.releaseTarget ?? env.PLAN_RELEASE_BRANCH);
+    const autoDeployToMain = Boolean(item.autoDeployToMain ?? true);
+
+    try {
+      if (this.isLocalMainMode()) {
+        const completedRow = await markPlanAsCompleted(
+          planId,
+          '로컬 main 직접 작업 모드에서 release/main 반영 단계를 건너뛰고 완료 처리했습니다.',
+        );
+        if (!completedRow) {
+          this.logger.info({ planId }, 'Plan local main completion ignored because ownership changed');
+          return;
+        }
+        await this.notifyAutomationFinalStage(
+          planId,
+          String(item.workId),
+          planLabel,
+          '로컬 main 직접 작업이 이미 반영되어 별도 release 반영 없이 완료 처리했습니다.',
+          'work-local-main-complete',
+        );
+        this.logger.info({ planId, branch: assignedBranch, releaseTarget }, 'Plan completed in local main mode without release merge');
+        return;
+      }
+
+      await cleanAutomationWorktree(env.PLAN_GIT_REPO_PATH);
+      await mergeBranchToRelease(
+        {
+          repoPath: env.PLAN_GIT_REPO_PATH,
+          releaseBranch: env.PLAN_RELEASE_BRANCH,
+          mainBranch: env.PLAN_MAIN_BRANCH,
+        },
+        assignedBranch,
+        releaseTarget,
+      );
+      await pushBranch(env.PLAN_GIT_REPO_PATH, releaseTarget);
+      const updatedRow = await markPlanReleaseMerged(planId, this.workerId);
+      if (!updatedRow) {
+        this.logger.info({ planId }, 'Plan release merge result ignored because ownership changed');
+        return;
+      }
+      if (!autoDeployToMain) {
+        await this.notifyAutomationFinalStage(
+          planId,
+          String(item.workId),
+          planLabel,
+          `${releaseTarget} 브랜치 반영이 완료되었습니다.`,
+          'release-merged',
+        );
+      }
+      this.logger.info(
+        { planId, branch: assignedBranch, releaseTarget },
+        'Plan branch merged to release',
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'release 브랜치 반영에 실패했습니다.';
+      await this.persistAutomationErrorLog({
+        planId,
+        workId: String(item.workId),
+        workerStatus: 'release반영실패',
+        error,
+        detail: {
+          stage: 'release-merge',
+          workerId: this.workerId,
+          assignedBranch,
+          releaseTarget,
+          autoDeployToMain,
+        },
+      });
+      const failureRow = await markPlanAutomationFailure(planId, this.workerId, 'release반영실패', message);
+      if (!failureRow) {
+        this.logger.info({ planId }, 'Plan release merge failure ignored because ownership changed');
+        return;
+      }
+      await this.notifyAutomationFinalStage(
+        planId,
+        String(item.workId),
+        planLabel,
+        `release 반영 실패\n${message}`,
+        'release-failed',
+      );
+      this.logger.error({ planId, err: error }, 'Plan release merge failed');
+    }
+  }
+
+  private async processMainMergeReadyPlans() {
+    const env = getEnv();
+    const row = await claimNextPlanForMainMerge(this.workerId);
+
+    if (!row) {
+      return;
+    }
+
+    const item = mapPlanRow(row);
+    const planId = Number(item.id);
+    const assignedBranch = String(item.assignedBranch ?? '');
+    const releaseTarget = String(item.releaseTarget ?? env.PLAN_RELEASE_BRANCH);
+    const workId = String(item.workId);
+    const planLabel = formatPlanNotificationLabel(workId, planId);
+
+    try {
+      if (this.isLocalMainMode()) {
+        const completedRow = await markPlanAsCompleted(
+          planId,
+          '로컬 main 직접 작업 모드에서 main 반영 단계를 건너뛰고 완료 처리했습니다.',
+          'main반영완료',
+        );
+        if (!completedRow) {
+          this.logger.info({ planId }, 'Plan local main main-merge completion ignored because ownership changed');
+          return;
+        }
+        await this.notifyAutomationFinalStage(
+          planId,
+          workId,
+          planLabel,
+          '로컬 main 직접 작업이 이미 반영되어 별도 main merge 없이 완료 처리했습니다.',
+          'work-local-main-complete',
+        );
+        this.logger.info({ planId, branch: assignedBranch, releaseTarget }, 'Plan completed in local main mode without main merge');
+        return;
+      }
+
+      await cleanAutomationWorktree(env.PLAN_GIT_REPO_PATH);
+      await mergeReleaseToMain(
+        {
+          repoPath: env.PLAN_GIT_REPO_PATH,
+          releaseBranch: env.PLAN_RELEASE_BRANCH,
+          mainBranch: env.PLAN_MAIN_BRANCH,
+        },
+        releaseTarget,
+      );
+      await pushBranch(env.PLAN_GIT_REPO_PATH, env.PLAN_MAIN_BRANCH);
+      await pullMainProjectBranch(env.PLAN_MAIN_PROJECT_REPO_PATH, env.PLAN_MAIN_BRANCH);
+      const mergeResult = await markPlanMerged(planId, this.workerId);
+      if (!mergeResult?.mergedRow) {
+        this.logger.info({ planId }, 'Plan main merge result ignored because ownership changed');
+        return;
+      }
+      const notificationRows = mergeResult.notificationRows.length > 0 ? mergeResult.notificationRows : [mergeResult.mergedRow];
+
+      for (const notificationRow of notificationRows) {
+        const notificationItem = mapPlanRow(notificationRow);
+        const notificationPlanId = Number(notificationItem.id);
+        const notificationWorkId = String(notificationItem.workId);
+        const notificationPlanLabel = formatPlanNotificationLabel(notificationWorkId, notificationPlanId);
+
+        await this.notifyAutomationFinalStage(
+          notificationPlanId,
+          notificationWorkId,
+          notificationPlanLabel,
+          `${env.PLAN_MAIN_BRANCH} 브랜치 반영 후 메인 프로젝트 pull까지 완료되었습니다.`,
+          'main-merged',
+        );
+      }
+      this.logger.info(
+        {
+          planId,
+          branch: assignedBranch,
+          releaseTarget,
+          mainBranch: env.PLAN_MAIN_BRANCH,
+          mainProjectRepoPath: env.PLAN_MAIN_PROJECT_REPO_PATH,
+          notifiedPlanIds: notificationRows.map((notificationRow) => Number(notificationRow.id)).filter(Number.isFinite),
+        },
+        'Plan release branch merged to main and main project synced',
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'main 브랜치 반영에 실패했습니다.';
+      await this.persistAutomationErrorLog({
+        planId,
+        workId,
+        workerStatus: 'main반영실패',
+        error,
+        detail: {
+          stage: 'main-merge',
+          workerId: this.workerId,
+          assignedBranch,
+          releaseTarget,
+          mainBranch: env.PLAN_MAIN_BRANCH,
+          mainProjectRepoPath: env.PLAN_MAIN_PROJECT_REPO_PATH,
+        },
+      });
+      const failureRows = await markPlanMainMergeFailure(releaseTarget, this.workerId, message);
+      if (!failureRows.length) {
+        this.logger.info({ planId }, 'Plan main merge failure ignored because ownership changed');
+        return;
+      }
+      await this.notifyAutomationFinalStage(
+        planId,
+        workId,
+        planLabel,
+        `main 일괄 반영 실패\n${message}`,
+        'main-failed',
+      );
+      this.logger.error({ planId, err: error }, 'Plan main merge failed');
+    }
+  }
+
+  private async processExecutablePlans(appConfig: Awaited<ReturnType<typeof getAppConfigSnapshot>> | undefined) {
+    const env = getEnv();
+    if (!env.PLAN_CODEX_ENABLED) {
+      return;
+    }
+
+    const schedule = this.evaluateAutoReceiveSchedule(appConfig?.automation, new Date());
+    if (!schedule.due) {
+      return;
+    }
+
+    const row = await claimNextPlanForExecution(this.workerId);
+
+    if (!row) {
+      return;
+    }
+
+    this.lastAutoReceiveAt = new Date();
+
+    const item = mapPlanRow(row);
+    const planId = Number(item.id);
+    const workId = String(item.workId);
+    const planLabel = formatPlanNotificationLabel(workId, planId);
+    const autoDeployToMain = Boolean(item.autoDeployToMain ?? true);
+
+    try {
+      await this.notifyPlan(
+        planId,
+        workId,
+        `[${planLabel}] 자동화 시작`,
+        this.buildExecutionStartedBody(item.note),
+        'work-started',
+      );
+
+      const output = await this.runCodexCommandWithProgressNotifications(planId, workId, item.note);
+
+      if (output.includes('처리할 Plan 항목이 없습니다.')) {
+        throw new Error('자동 작업 대상 Plan 항목을 찾지 못했습니다. 상태 전환 로직을 확인해 주세요.');
+      }
+
+      if (output.includes('"outcome": "noop-complete"')) {
+        await this.notifyAutomationFinalStage(
+          planId,
+          workId,
+          planLabel,
+          '변경 사항 없이 자동 작업이 완료되었습니다.',
+          'work-noop-complete',
+        );
+        return;
+      }
+
+      if (output.includes('"outcome": "board-post-complete"')) {
+        await this.notifyAutomationFinalStage(
+          planId,
+          workId,
+          planLabel,
+          'Plan 게시판 미접수 글 작성이 완료되었습니다.',
+          'work-board-post-complete',
+        );
+        return;
+      }
+
+      const finalCompletedRow = this.isLocalMainMode()
+        ? await markPlanAsCompleted(planId, '로컬 main 직접 작업으로 자동 작업을 완료했습니다.')
+        : await markPlanWorkCompleted(planId, this.workerId, '자동 작업을 완료했습니다.');
+      if (!finalCompletedRow) {
+        this.logger.info({ planId }, 'Plan Codex completion ignored because ownership changed');
+        return;
+      }
+      await this.notifyAutomationFinalStage(
+        planId,
+        workId,
+        planLabel,
+        this.isLocalMainMode() ? '자동 작업이 로컬 main 작업본에 직접 반영되어 완료되었습니다.' : this.buildExecutionCompletedBody(autoDeployToMain),
+        'work-completed',
+      );
+      this.logger.info({ planId }, 'Plan Codex execution completed');
+    } catch (error) {
+      const rawMessage = error instanceof Error ? error.message : '자동 작업 실행에 실패했습니다.';
+      const message = appendCodexHomeHint(rawMessage, env);
+      await this.persistAutomationErrorLog({
+        planId,
+        workId,
+        workerStatus: '자동작업실패',
+        error,
+        detail: {
+          stage: 'codex-execution',
+          workerId: this.workerId,
+          assignedBranch: item.assignedBranch ?? null,
+          autoDeployToMain,
+          releaseTarget: item.releaseTarget ?? env.PLAN_RELEASE_BRANCH,
+        },
+      });
+      const failureRow = await markPlanAutomationFailure(planId, this.workerId, '자동작업실패', message);
+      if (!failureRow) {
+        this.logger.info({ planId }, 'Plan Codex failure ignored because ownership changed');
+        return;
+      }
+      await this.notifyAutomationFinalStage(
+        planId,
+        workId,
+        planLabel,
+        `자동 작업 실패\n${message}`,
+        'work-failed',
+      );
+      this.logger.error({ planId, err: error }, 'Plan Codex execution failed');
+    }
+  }
+
+  private async processWorklogAutomation(appConfig: Awaited<ReturnType<typeof getAppConfigSnapshot>> | undefined) {
+    const env = getEnv();
+    const worklogAutomation = appConfig?.worklogAutomation;
+
+    if (!worklogAutomation?.autoCreateDailyWorklog) {
+      return;
+    }
+
+    const now = new Date();
+    const { dateKey } = getKstNowParts(now);
+    const dailyCreateTime = normalizeDailyCreateTime(worklogAutomation.dailyCreateTime);
+    const alreadyExecutedToday = await hasWorklogAutomationRunForDate(dateKey);
+    const repeatRequestEnabled = false;
+    const repeatIntervalMinutes = normalizeRepeatIntervalMinutes(worklogAutomation.repeatIntervalMinutes);
+
+    if (!isWorklogCreationDue(now, dailyCreateTime, false)) {
+      return;
+    }
+
+    if (alreadyExecutedToday && !repeatRequestEnabled) {
+      return;
+    }
+
+    if (alreadyExecutedToday && this.lastWorklogAutomationRequestAt) {
+      const nextRepeatAt = new Date(
+        this.lastWorklogAutomationRequestAt.getTime() + repeatIntervalMinutes * 60 * 1000,
+      );
+
+      if (now.getTime() < nextRepeatAt.getTime()) {
+        return;
+      }
+    }
+
+    try {
+      const worklogPath = await ensureDailyWorklogFile(env.PLAN_GIT_REPO_PATH, dateKey);
+      const autoWorklogPlanWorkId = buildAutoWorklogPlanWorkId(dateKey);
+      const upsertResult = await upsertAutoPlanItem({
+        workId: autoWorklogPlanWorkId,
+        note: this.buildAutoWorklogPlanNote(dateKey, worklogAutomation),
+        releaseTarget: env.PLAN_RELEASE_BRANCH,
+        jangsingProcessingRequired: false,
+        autoDeployToMain: true,
+        requeue: !alreadyExecutedToday,
+      });
+      this.lastWorklogAutomationRequestAt = now;
+
+      if (upsertResult.action === 'created' || upsertResult.action === 'requeued') {
+        this.logger.info(
+          { dateKey, workId: autoWorklogPlanWorkId, worklogPath, repeatRequestEnabled, repeatIntervalMinutes },
+          'Daily worklog automation plan registered',
+        );
+      }
+
+      if (!alreadyExecutedToday) {
+        await markWorklogAutomationRun({
+          runDate: dateKey,
+          scheduledTime: dailyCreateTime,
+          worklogPath,
+        });
+      }
+      this.logger.info(
+        { dateKey, worklogPath, dailyCreateTime, repeatRequestEnabled, repeatIntervalMinutes },
+        'Daily worklog automation completed',
+      );
+    } catch (error) {
+      const handledError = error instanceof Error ? error : new Error(String(error));
+      this.logger.error({ err: handledError, dateKey, dailyCreateTime }, 'Daily worklog automation failed');
+      await createErrorLog({
+        source: 'automation',
+        sourceLabel: '업무일지 자동화',
+        errorType: 'WorklogAutomationFailed',
+        errorName: handledError.name,
+        errorMessage: handledError.message,
+        stackTrace: handledError.stack ?? null,
+        context: {
+          dateKey,
+          dailyCreateTime,
+          repeatRequestEnabled,
+          repeatIntervalMinutes,
+          repoPath: env.PLAN_GIT_REPO_PATH,
+        },
+      });
+    }
+  }
+}
diff --git a/etc/servers/work-server/tsconfig.json b/etc/servers/work-server/tsconfig.json
new file mode 100755
index 0000000..c297cac
--- /dev/null
+++ b/etc/servers/work-server/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["src"]
+}
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..b955610
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#165dff" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
+    <title>AI Code App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..1f00128
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,7475 @@
+{
+  "name": "ai-code-app",
+  "version": "0.1.0-alpha.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ai-code-app",
+      "version": "0.1.0-alpha.0",
+      "dependencies": {
+        "@ant-design/icons": "^6.0.1",
+        "antd": "^5.27.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-router-dom": "^7.14.0",
+        "recharts": "^3.8.1"
+      },
+      "devDependencies": {
+        "@types/node": "^25.6.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "playwright": "^1.59.0",
+        "typescript": "^5.9.2",
+        "vite": "^8.0.3",
+        "vite-plugin-pwa": "^1.2.0"
+      },
+      "engines": {
+        "node": "22.22.2",
+        "npm": "10.9.7"
+      }
+    },
+    "node_modules/@ant-design/colors": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-8.0.1.tgz",
+      "integrity": "sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^3.0.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.24.0.tgz",
+      "integrity": "sha512-K4cYrJBsgvL+IoozUXYjbT6LHHNt+19a9zkvpBPxLjFHas1UpPM2A5MlhROb0BT8N8WoavM5VsP9MeSeNK/3mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "classnames": "^2.3.1",
+        "csstype": "^3.1.3",
+        "rc-util": "^5.35.0",
+        "stylis": "^4.3.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs-utils/-/cssinjs-utils-1.1.3.tgz",
+      "integrity": "sha512-nOoQMLW1l+xR1Co8NFVYiP8pZp3VjIIzqV6D6ShYF2ljtdwWJn5WSsH+7kvCktXL/yhEtWURKOfH5Xz/gzlwsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/cssinjs": "^1.21.0",
+        "@babel/runtime": "^7.23.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@ant-design/fast-color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-3.0.1.tgz",
+      "integrity": "sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@ant-design/icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-6.1.1.tgz",
+      "integrity": "sha512-AMT4N2y++TZETNHiM77fs4a0uPVCJGuL5MTonk13Pvv7UN7sID1cNEZOc1qNqx6zLKAOilTEFAdAoAFKa0U//Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^8.0.0",
+        "@ant-design/icons-svg": "^4.4.0",
+        "@rc-component/util": "^1.3.0",
+        "clsx": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/react-slick": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
+      "integrity": "sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "throttle-debounce": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
+    "node_modules/@apideck/better-ajv-errors": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.7.tgz",
+      "integrity": "sha512-TajUJwGWbDwkCx/CZi7tRE8PVB7simCvKJfHUsSdvps+aTM/PDPP4gkLmKnc+x3CE//y9i/nj74GqdL/hwk7Iw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsonpointer": "^5.0.1",
+        "leven": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "ajv": ">=8"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.6.tgz",
+      "integrity": "sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.6",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.28.5.tgz",
+      "integrity": "sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "regexpu-core": "^6.3.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.8.tgz",
+      "integrity": "sha512-47UwBLPpQi1NoWzLuHNjRoHlYXMwIJoBf7MFou6viC/sIHWYygpvr0B6IAyh5sBdA2nr2LPIRww8lfaUVQINBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "debug": "^4.4.3",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.22.11"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
+      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-wrap-function": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.28.6.tgz",
+      "integrity": "sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.28.6.tgz",
+      "integrity": "sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.28.5.tgz",
+      "integrity": "sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
+      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
+      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
+      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-transform-optional-chaining": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.28.6.tgz",
+      "integrity": "sha512-a0aBScVTlNaiUe35UtfxAN7A/tehvvG4/ByO6+46VPKTRSlfnAFsgKy0FUh+qAkQrDTmhDkT+IBOKlOoMUxQ0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.28.6.tgz",
+      "integrity": "sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.28.6.tgz",
+      "integrity": "sha512-jiLC0ma9XkQT3TKJ9uYvlakm66Pamywo+qwL+oL8HJOvc6TWdZXVfhqJr8CCzbSGUAbDOzlGHJC1U+vRfLQDvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
+      "integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.0.tgz",
+      "integrity": "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-remap-async-to-generator": "^7.27.1",
+        "@babel/traverse": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.28.6.tgz",
+      "integrity": "sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-remap-async-to-generator": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
+      "integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.6.tgz",
+      "integrity": "sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.28.6.tgz",
+      "integrity": "sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.28.6.tgz",
+      "integrity": "sha512-rfQ++ghVwTWTqQ7w8qyDxL1XGihjBss4CmTgGRCTAC9RIbhVpyp4fOeZtta0Lbf+dTNIVJer6ych2ibHwkZqsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.6.tgz",
+      "integrity": "sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-replace-supers": "^7.28.6",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.28.6.tgz",
+      "integrity": "sha512-bcc3k0ijhHbc2lEfpFHgx7eYw9KNXqOerKWfzbxEHUGKnS3sz9C4CNL9OiFN1297bDNfUiSO7DaLzbvHQQQ1BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/template": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.5.tgz",
+      "integrity": "sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.28.6.tgz",
+      "integrity": "sha512-SljjowuNKB7q5Oayv4FoPzeB74g3QgLt8IVJw9ADvWy3QnUb/01aw8I4AVv8wYnPvQz2GDDZ/g3GhcNyDBI4Bg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
+      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.0.tgz",
+      "integrity": "sha512-zBPcW2lFGxdiD8PUnPwJjag2J9otbcLQzvbiOzDxpYXyCuYX9agOwMPGn1prVH0a4qzhCKu24rlH4c1f7yA8rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
+      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-explicit-resource-management": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.6.tgz",
+      "integrity": "sha512-Iao5Konzx2b6g7EPqTy40UZbcdXE126tTxVFr/nAIj+WItNxjKSYTEw3RC+A2/ZetmdJsgueL1KhaMCQHkLPIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.28.6.tgz",
+      "integrity": "sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
+      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
+      "integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
+      "integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.28.6.tgz",
+      "integrity": "sha512-Nr+hEN+0geQkzhbdgQVPoqr47lZbm+5fCUmO70722xJZd0Mvb59+33QLImGj6F+DkK3xgDi1YVysP8whD6FQAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
+      "integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.28.6.tgz",
+      "integrity": "sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
+      "integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
+      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.28.6.tgz",
+      "integrity": "sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.0.tgz",
+      "integrity": "sha512-PrujnVFbOdUpw4UHiVwKvKRLMMic8+eC0CuNlxjsyZUiBjhFdPsewdXCkveh2KqBA9/waD0W1b4hXSOBQJezpQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
+      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.0.tgz",
+      "integrity": "sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
+      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.28.6.tgz",
+      "integrity": "sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.28.6.tgz",
+      "integrity": "sha512-SJR8hPynj8outz+SlStQSwvziMN4+Bq99it4tMIf5/Caq+3iOc0JtKyse8puvyXkk3eFRIA5ID/XfunGgO5i6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.6.tgz",
+      "integrity": "sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5",
+        "@babel/plugin-transform-parameters": "^7.27.7",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
+      "integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.28.6.tgz",
+      "integrity": "sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.28.6.tgz",
+      "integrity": "sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.27.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
+      "integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.28.6.tgz",
+      "integrity": "sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.28.6.tgz",
+      "integrity": "sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
+      "integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.0.tgz",
+      "integrity": "sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regexp-modifiers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.28.6.tgz",
+      "integrity": "sha512-QGWAepm9qxpaIs7UM9FvUSnCGlb8Ua1RhyM4/veAxLwt3gMat/LSGrZixyuj4I6+Kn9iwvqCyPTtbdxanYoWYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
+      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
+      "integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.28.6.tgz",
+      "integrity": "sha512-9U4QObUC0FtJl05AsUcodau/RWDytrU6uKgkxu09mLR9HLDAtUMoPuuskm5huQsoktmsYpI+bGmq+iapDcriKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
+      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
+      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
+      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.28.6.tgz",
+      "integrity": "sha512-4Wlbdl/sIZjzi/8St0evF0gEZrgOswVO6aOzqxh1kDZOl9WmLrHq2HtGhnOJZmHZYKP8WZ1MDLCt5DAWwRo57A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
+      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.28.6.tgz",
+      "integrity": "sha512-/wHc/paTUmsDYN7SZkpWxogTOBNnlx7nBQYfy6JJlCT7G3mVhltk3e++N7zV0XfgGsrqBxd4rJQt9H16I21Y1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.2.tgz",
+      "integrity": "sha512-DYD23veRYGvBFhcTY1iUvJnDNpuqNd/BzBwCvzOTKUnJjKg5kpUBh3/u9585Agdkgj+QuygG7jLfOPWMa2KVNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.6",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-import-assertions": "^7.28.6",
+        "@babel/plugin-syntax-import-attributes": "^7.28.6",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.27.1",
+        "@babel/plugin-transform-async-generator-functions": "^7.29.0",
+        "@babel/plugin-transform-async-to-generator": "^7.28.6",
+        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
+        "@babel/plugin-transform-block-scoping": "^7.28.6",
+        "@babel/plugin-transform-class-properties": "^7.28.6",
+        "@babel/plugin-transform-class-static-block": "^7.28.6",
+        "@babel/plugin-transform-classes": "^7.28.6",
+        "@babel/plugin-transform-computed-properties": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5",
+        "@babel/plugin-transform-dotall-regex": "^7.28.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0",
+        "@babel/plugin-transform-dynamic-import": "^7.27.1",
+        "@babel/plugin-transform-explicit-resource-management": "^7.28.6",
+        "@babel/plugin-transform-exponentiation-operator": "^7.28.6",
+        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
+        "@babel/plugin-transform-for-of": "^7.27.1",
+        "@babel/plugin-transform-function-name": "^7.27.1",
+        "@babel/plugin-transform-json-strings": "^7.28.6",
+        "@babel/plugin-transform-literals": "^7.27.1",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.28.6",
+        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
+        "@babel/plugin-transform-modules-amd": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.28.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.29.0",
+        "@babel/plugin-transform-modules-umd": "^7.27.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0",
+        "@babel/plugin-transform-new-target": "^7.27.1",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
+        "@babel/plugin-transform-numeric-separator": "^7.28.6",
+        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
+        "@babel/plugin-transform-object-super": "^7.27.1",
+        "@babel/plugin-transform-optional-catch-binding": "^7.28.6",
+        "@babel/plugin-transform-optional-chaining": "^7.28.6",
+        "@babel/plugin-transform-parameters": "^7.27.7",
+        "@babel/plugin-transform-private-methods": "^7.28.6",
+        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
+        "@babel/plugin-transform-property-literals": "^7.27.1",
+        "@babel/plugin-transform-regenerator": "^7.29.0",
+        "@babel/plugin-transform-regexp-modifiers": "^7.28.6",
+        "@babel/plugin-transform-reserved-words": "^7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
+        "@babel/plugin-transform-spread": "^7.28.6",
+        "@babel/plugin-transform-sticky-regex": "^7.27.1",
+        "@babel/plugin-transform-template-literals": "^7.27.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
+        "@babel/plugin-transform-unicode-property-regex": "^7.28.6",
+        "@babel/plugin-transform-unicode-regex": "^7.27.1",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.28.6",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.15",
+        "babel-plugin-polyfill-corejs3": "^0.14.0",
+        "babel-plugin-polyfill-regenerator": "^0.6.6",
+        "core-js-compat": "^3.48.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
+      "integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz",
+      "integrity": "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.122.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz",
+      "integrity": "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rc-component/async-validator": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.1.0.tgz",
+      "integrity": "sha512-n4HcR5siNUXRX23nDizbZBQPO0ZM/5oTtmKZ6/eqL0L2bo747cklFdZGRN2f+c9qWGICwDzrhW0H7tE9PptdcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4"
+      },
+      "engines": {
+        "node": ">=14.x"
+      }
+    },
+    "node_modules/@rc-component/color-picker": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-2.0.1.tgz",
+      "integrity": "sha512-WcZYwAThV/b2GISQ8F+7650r5ZZJ043E57aVBFkQ+kSY4C6wdofXgB0hBx+GPGpIU0Z81eETNoDUJMr7oy/P8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6",
+        "@babel/runtime": "^7.23.6",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/color-picker/node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-2.0.6.tgz",
+      "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@rc-component/context": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/mini-decimal": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.3.tgz",
+      "integrity": "sha512-bk/FJ09fLf+NLODMAFll6CfYrHPBioTedhW6lxDBuuWucJEqFUd4l/D/5JgIi3dina6sYahB8iuPAZTNz2pMxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@rc-component/mutate-observer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
+      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/qrcode": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/qrcode/-/qrcode-1.1.1.tgz",
+      "integrity": "sha512-LfLGNymzKdUPjXUbRP+xOhIWY4jQ+YMj5MmWAcgcAq1Ij8XP7tRmAXqyuv96XvLUBE/5cA8hLFl9eO1JQMujrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/tour": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.15.1.tgz",
+      "integrity": "sha512-Tr2t7J1DKZUpfJuDZWHxyxWpfmj8EZrqSgyMZ+BCdvKZ6r1UDsfU46M/iWAAFBy961Ssfom2kv5f3UcjIL2CmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/portal": "^1.0.0-9",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/trigger": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-2.3.1.tgz",
+      "integrity": "sha512-ORENF39PeXTzM+gQEshuk460Z8N4+6DkjpxlpE7Q3gYy1iBpLrx0FOJz3h62ryrJZ/3zCAUIkT1Pb/8hHWpb3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@rc-component/portal": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-motion": "^2.0.0",
+        "rc-resize-observer": "^1.3.1",
+        "rc-util": "^5.44.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/util": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/util/-/util-1.10.0.tgz",
+      "integrity": "sha512-aY9GLBuiUdpyfIUpAWSYer4Tu3mVaZCo5A0q9NtXcazT3MRiI3/WNHCR+DUn5VAtR6iRRf0ynCqQUcHli5UdYw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-mobile": "^5.0.0",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.12.tgz",
+      "integrity": "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.12.tgz",
+      "integrity": "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.12.tgz",
+      "integrity": "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.12.tgz",
+      "integrity": "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.12.tgz",
+      "integrity": "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.12.tgz",
+      "integrity": "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
+      "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
+      "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/@rollup/pluginutils": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
+      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.19.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
+      "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.7"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/antd": {
+      "version": "5.29.3",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.29.3.tgz",
+      "integrity": "sha512-3DdbGCa9tWAJGcCJ6rzR8EJFsv2CtyEbkVabZE14pfgUHfCicWCj0/QzQVLDYg8CPfQk9BH7fHCoTXHTy7MP/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.2.1",
+        "@ant-design/cssinjs": "^1.23.0",
+        "@ant-design/cssinjs-utils": "^1.1.3",
+        "@ant-design/fast-color": "^2.0.6",
+        "@ant-design/icons": "^5.6.1",
+        "@ant-design/react-slick": "~1.1.2",
+        "@babel/runtime": "^7.26.0",
+        "@rc-component/color-picker": "~2.0.1",
+        "@rc-component/mutate-observer": "^1.1.0",
+        "@rc-component/qrcode": "~1.1.0",
+        "@rc-component/tour": "~1.15.1",
+        "@rc-component/trigger": "^2.3.0",
+        "classnames": "^2.5.1",
+        "copy-to-clipboard": "^3.3.3",
+        "dayjs": "^1.11.11",
+        "rc-cascader": "~3.34.0",
+        "rc-checkbox": "~3.5.0",
+        "rc-collapse": "~3.9.0",
+        "rc-dialog": "~9.6.0",
+        "rc-drawer": "~7.3.0",
+        "rc-dropdown": "~4.2.1",
+        "rc-field-form": "~2.7.1",
+        "rc-image": "~7.12.0",
+        "rc-input": "~1.8.0",
+        "rc-input-number": "~9.5.0",
+        "rc-mentions": "~2.20.0",
+        "rc-menu": "~9.16.1",
+        "rc-motion": "^2.9.5",
+        "rc-notification": "~5.6.4",
+        "rc-pagination": "~5.1.0",
+        "rc-picker": "~4.11.3",
+        "rc-progress": "~4.0.0",
+        "rc-rate": "~2.13.1",
+        "rc-resize-observer": "^1.4.3",
+        "rc-segmented": "~2.7.0",
+        "rc-select": "~14.16.8",
+        "rc-slider": "~11.1.9",
+        "rc-steps": "~6.0.1",
+        "rc-switch": "~4.1.0",
+        "rc-table": "~7.54.0",
+        "rc-tabs": "~15.7.0",
+        "rc-textarea": "~1.10.2",
+        "rc-tooltip": "~6.4.0",
+        "rc-tree": "~5.13.1",
+        "rc-tree-select": "~5.27.0",
+        "rc-upload": "~4.11.0",
+        "rc-util": "^5.44.4",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "throttle-debounce": "^5.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/antd/node_modules/@ant-design/colors": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.2.1.tgz",
+      "integrity": "sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6"
+      }
+    },
+    "node_modules/antd/node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-2.0.6.tgz",
+      "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/antd/node_modules/@ant-design/icons": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.6.1.tgz",
+      "integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.4.0",
+        "@babel/runtime": "^7.24.8",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.31.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.17",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.17.tgz",
+      "integrity": "sha512-aTyf30K/rqAsNwN76zYrdtx8obu0E4KoUME29B1xj+B3WxgvWkp943vYQ+z8Mv3lw9xHXMHpvSPOBxzAkIa94w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-define-polyfill-provider": "^0.6.8",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.2.tgz",
+      "integrity": "sha512-coWpDLJ410R781Npmn/SIBZEsAetR4xVi0SxLMXPaMO4lSf1MwnkGYMtkFxew0Dn8B3/CpbpYxN0JCgg8mn67g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.8",
+        "core-js-compat": "^3.48.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.8.tgz",
+      "integrity": "sha512-M762rNHfSF1EV3SLtnCJXFoQbbIIz0OyRwnCmV0KPC7qosSfCO0QLTSuJX3ayAebubhE6oYBAYPrBA5ljowaZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.8"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.13",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.13.tgz",
+      "integrity": "sha512-BL2sTuHOdy0YT1lYieUxTw/QMtPBC3pmlJC6xk8BBYVv6vcw3SGdKemQ+Xsx9ik2F/lYDO9tqsFQH1r9PFuHKw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001784",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001784.tgz",
+      "integrity": "sha512-WU346nBTklUV9YfUl60fqRbU5ZqyXlqvo1SgigE1OAXK5bFL8LL9q1K7aap3N739l4BvNqnkm3YrGHiY9sfUQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz",
+      "integrity": "sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.330",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.330.tgz",
+      "integrity": "sha512-jFNydB5kFtYUobh4IkWUnXeyDbjf/r9gcUEXe1xcrcUxIGfTdzPXA+ld6zBRbwvgIGVzDll/LTIiDztEtckSnA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.45.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.45.1.tgz",
+      "integrity": "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
+      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "foreground-child": "^3.3.1",
+        "jackspeak": "^4.1.1",
+        "minimatch": "^10.1.1",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-mobile": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-5.0.0.tgz",
+      "integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.2.3.tgz",
+      "integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^9.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
+      "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.59.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.0.tgz",
+      "integrity": "sha512-wihGScriusvATUxmhfENxg0tj1vHEFeIwxlnPFKQTOQVd7aG08mUfvvniRP/PtQOC+2Bs52kBOC/Up1jTXeIbw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.0.tgz",
+      "integrity": "sha512-PW/X/IoZ6BMUUy8rpwHEZ8Kc0IiLIkgKYGNFaMs5KmQhcfLILNx9yCQD0rnWeWfz1PNeqcFP1BsihQhDOBCwZw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
+      "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/rc-cascader": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.34.0.tgz",
+      "integrity": "sha512-KpXypcvju9ptjW9FaN2NFcA2QH9E9LHKq169Y0eWtH4e/wHQ5Wh5qZakAgvb8EKZ736WZ3B0zLLOBsrsja5Dag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "classnames": "^2.3.1",
+        "rc-select": "~14.16.2",
+        "rc-tree": "~5.13.0",
+        "rc-util": "^5.43.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-checkbox": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.5.0.tgz",
+      "integrity": "sha512-aOAQc3E98HteIIsSqm6Xk2FPKIER6+5vyEFMZfo73TqM+VVAIqOkHoPjgKLqSNtVLWScoaM7vY2ZrGEheI79yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.25.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-collapse": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.9.0.tgz",
+      "integrity": "sha512-swDdz4QZ4dFTo4RAUMLL50qP0EY62N2kvmk2We5xYdRwcRn8WcYtuetCJpwpaCbUfUt5+huLpVxhvmnK+PHrkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dialog": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.6.0.tgz",
+      "integrity": "sha512-ApoVi9Z8PaCQg6FsUzS8yvBEQy0ZL2PkuvAgrmohPkN3okps5WZ5WQWPc1RNuiOKaAYv8B97ACdsFU5LizzCqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-8",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-drawer": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-7.3.0.tgz",
+      "integrity": "sha512-DX6CIgiBWNpJIMGFO8BAISFkxiuKitoizooj4BDyee8/SnBn0zwO2FHrNDpqqepj0E/TFTDpmEBCyFuTgC7MOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@rc-component/portal": "^1.1.1",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.6.1",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dropdown": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.2.1.tgz",
+      "integrity": "sha512-YDAlXsPv3I1n42dv1JpdM7wJ+gSUBfeyPK59ZpBD9jQhK9jVuxpjj3NmWQHOBceA1zEPVX84T2wbdb2SD0UjmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.44.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.11.0",
+        "react-dom": ">=16.11.0"
+      }
+    },
+    "node_modules/rc-field-form": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-2.7.1.tgz",
+      "integrity": "sha512-vKeSifSJ6HoLaAB+B8aq/Qgm8a3dyxROzCtKNCsBQgiverpc4kWDQihoUwzUj+zNWJOykwSY4dNX3QrGwtVb9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/async-validator": "^5.0.3",
+        "rc-util": "^5.32.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-image": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.12.0.tgz",
+      "integrity": "sha512-cZ3HTyyckPnNnUb9/DRqduqzLfrQRyi+CdHjdqgsyDpI3Ln5UX1kXnAhPBSJj9pVRzwRFgqkN7p9b6HBDjmu/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/portal": "^1.0.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~9.6.0",
+        "rc-motion": "^2.6.2",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-input": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.8.0.tgz",
+      "integrity": "sha512-KXvaTbX+7ha8a/k+eg6SYRVERK0NddX8QX7a7AnRvUa/rEH0CNMlpcBzBkhI0wp2C8C4HlMoYl8TImSN+fuHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-input-number": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-9.5.0.tgz",
+      "integrity": "sha512-bKaEvB5tHebUURAEXw35LDcnRZLq3x1k7GxfAqBMzmpHkDGzjAtnUL8y4y5N15rIFIg5IJgwr211jInl3cipag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "classnames": "^2.2.5",
+        "rc-input": "~1.8.0",
+        "rc-util": "^5.40.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-mentions": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.20.0.tgz",
+      "integrity": "sha512-w8HCMZEh3f0nR8ZEd466ATqmXFCMGMN5UFCzEUL0bM/nGw/wOS2GgRzKBcm19K++jDyuWCOJOdgcKGXU3fXfbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.6",
+        "rc-input": "~1.8.0",
+        "rc-menu": "~9.16.0",
+        "rc-textarea": "~1.10.0",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-menu": {
+      "version": "9.16.1",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.16.1.tgz",
+      "integrity": "sha512-ghHx6/6Dvp+fw8CJhDUHFHDJ84hJE3BXNCzSgLdmNiFErWSOaZNsihDAsKq9ByTALo/xkNIwtDFGIl6r+RPXBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-motion": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.5.tgz",
+      "integrity": "sha512-w+XTUrfh7ArbYEd2582uDrEhmBHwK1ZENJiSJVb7uRxdE7qJSYjbO2eksRXmndqyKqKoYPc9ClpPh5242mV1vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.44.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-notification": {
+      "version": "5.6.4",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.6.4.tgz",
+      "integrity": "sha512-KcS4O6B4qzM3KH7lkwOB7ooLPZ4b6J+VMmQgT51VZCeEcmghdeR4IrMcFq0LG+RPdnbe/ArT086tGM8Snimgiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.9.0",
+        "rc-util": "^5.20.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-overflow": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.5.0.tgz",
+      "integrity": "sha512-Lm/v9h0LymeUYJf0x39OveU52InkdRXqnn2aYXfWmo8WdOonIKB2kfau+GF0fWq6jPgtdO9yMqveGcK6aIhJmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.37.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-pagination": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-5.1.0.tgz",
+      "integrity": "sha512-8416Yip/+eclTFdHXLKTxZvn70duYVGTvUUWbckCCZoIl3jagqke3GLsFrMs0bsQBikiYpZLD9206Ej4SOdOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-picker": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-4.11.3.tgz",
+      "integrity": "sha512-MJ5teb7FlNE0NFHTncxXQ62Y5lytq6sh5nUw0iH8OkHL/TjARSEvSHpr940pWgjGANpjCwyMdvsEV55l5tYNSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.1",
+        "rc-overflow": "^1.3.2",
+        "rc-resize-observer": "^1.4.0",
+        "rc-util": "^5.43.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "date-fns": ">= 2.x",
+        "dayjs": ">= 1.x",
+        "luxon": ">= 3.x",
+        "moment": ">= 2.x",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rc-progress": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-4.0.0.tgz",
+      "integrity": "sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-rate": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.1.tgz",
+      "integrity": "sha512-QUhQ9ivQ8Gy7mtMZPAjLbxBt5y9GRp65VcUyGUMF3N3fhiftivPHdpuDIaWIMOTEprAjZPC08bls1dQB+I1F2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-resize-observer": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.3.tgz",
+      "integrity": "sha512-YZLjUbyIWox8E9i9C3Tm7ia+W7euPItNWSPX5sCcQTYbnwDb5uNpnLHQCG1f22oZWUhLw4Mv2tFmeWe68CDQRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.44.1",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-segmented": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.7.1.tgz",
+      "integrity": "sha512-izj1Nw/Dw2Vb7EVr+D/E9lUTkBe+kKC+SAFSU9zqr7WV2W5Ktaa9Gc7cB2jTqgk8GROJayltaec+DBlYKc6d+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-select": {
+      "version": "14.16.8",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.16.8.tgz",
+      "integrity": "sha512-NOV5BZa1wZrsdkKaiK7LHRuo5ZjZYMDxPP6/1+09+FB4KoNi8jcG1ZqLE3AVCxEsYMBe65OBx71wFoHRTP3LRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^2.1.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-slider": {
+      "version": "11.1.9",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.9.tgz",
+      "integrity": "sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-steps": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz",
+      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.16.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-switch": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz",
+      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-table": {
+      "version": "7.54.0",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.54.0.tgz",
+      "integrity": "sha512-/wDTkki6wBTjwylwAGjpLKYklKo9YgjZwAU77+7ME5mBoS32Q4nAwoqhA2lSge6fobLW3Tap6uc5xfwaL2p0Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/context": "^1.4.0",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.1.0",
+        "rc-util": "^5.44.3",
+        "rc-virtual-list": "^3.14.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tabs": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-15.7.0.tgz",
+      "integrity": "sha512-ZepiE+6fmozYdWf/9gVp7k56PKHB1YYoDsKeQA1CBlJ/POIhjkcYiv0AGP0w2Jhzftd3AVvZP/K+V+Lpi2ankA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "~4.2.0",
+        "rc-menu": "~9.16.0",
+        "rc-motion": "^2.6.2",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.34.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-textarea": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.10.2.tgz",
+      "integrity": "sha512-HfaeXiaSlpiSp0I/pvWpecFEHpVysZ9tpDLNkxQbMvMz6gsr7aVZ7FpWP9kt4t7DB+jJXesYS0us1uPZnlRnwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-input": "~1.8.0",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tooltip": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.4.0.tgz",
+      "integrity": "sha512-kqyivim5cp8I5RkHmpsp1Nn/Wk+1oeloMv9c7LXNgDxUpGm+RbXJGL+OPvDlcRnx9DBeOe4wyOIl4OKUERyH1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.3.1",
+        "rc-util": "^5.44.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tree": {
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.13.1.tgz",
+      "integrity": "sha512-FNhIefhftobCdUJshO7M8uZTA9F4OPGVXqGfZkkD/5soDeOhwO06T/aKTrg0WD8gRg/pyfq+ql3aMymLHCTC4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.1"
+      },
+      "engines": {
+        "node": ">=10.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-tree-select": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.27.0.tgz",
+      "integrity": "sha512-2qTBTzwIT7LRI1o7zLyrCzmo5tQanmyGbSaGTIf7sYimCklAToVVfpMC6OAldSKolcnjorBYPNSKQqJmN3TCww==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "classnames": "2.x",
+        "rc-select": "~14.16.2",
+        "rc-tree": "~5.13.0",
+        "rc-util": "^5.43.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-upload": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.11.0.tgz",
+      "integrity": "sha512-ZUyT//2JAehfHzjWowqROcwYJKnZkIUGWaTE/VogVrepSl7AFNbQf4+zGfX4zl9Vrj/Jm8scLO0R6UlPDKK4wA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.44.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.4.tgz",
+      "integrity": "sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-virtual-list": {
+      "version": "3.19.2",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.19.2.tgz",
+      "integrity": "sha512-Ys6NcjwGkuwkeaWBDqfI3xWuZ7rDiQXlH1o2zLfFzATfEgXcqpk8CkgMfbJD81McqjcJVez25a3kPxCR807evA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.0",
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
+      "integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz",
+      "integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.14.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
+      "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.2.tgz",
+      "integrity": "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz",
+      "integrity": "sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.2.2",
+        "regjsgen": "^0.8.0",
+        "regjsparser": "^0.13.0",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regjsparser": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.0.tgz",
+      "integrity": "sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jsesc": "~3.1.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.12.tgz",
+      "integrity": "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.122.0",
+        "@rolldown/pluginutils": "1.0.0-rc.12"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.12",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12"
+      }
+    },
+    "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.12.tgz",
+      "integrity": "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "2.80.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.80.0.tgz",
+      "integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.6.1.tgz",
+      "integrity": "sha512-KAkBqZl3c2GvNgNhcoyJae1aKldDW0LO279wF9bk1PnluRTETKBq0WyzRXxEhoQLk56yHaOY4JCBEKDuJIET5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.8.0-beta.0",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+      "deprecated": "The work that was done in this beta branch won't be included in future versions",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "whatwg-url": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
+      "license": "MIT"
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.46.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.1.tgz",
+      "integrity": "sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
+    "node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/type-fest": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.19.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
+      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
+      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.1.tgz",
+      "integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.2.0.tgz",
+      "integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.3.tgz",
+      "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.12",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-pwa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-1.2.0.tgz",
+      "integrity": "sha512-a2xld+SJshT9Lgcv8Ji4+srFJL4k/1bVbd1x06JIkvecpQkwkvCncD1+gSzcdm3s+owWLpMJerG3aN5jupJEVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.6",
+        "pretty-bytes": "^6.1.1",
+        "tinyglobby": "^0.2.10",
+        "workbox-build": "^7.4.0",
+        "workbox-window": "^7.4.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vite-pwa/assets-generator": "^1.0.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
+        "workbox-build": "^7.4.0",
+        "workbox-window": "^7.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@vite-pwa/assets-generator": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/workbox-background-sync": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-7.4.0.tgz",
+      "integrity": "sha512-8CB9OxKAgKZKyNMwfGZ1XESx89GryWTfI+V5yEj8sHjFH8MFelUwYXEyldEK6M6oKMmn807GoJFUEA1sC4XS9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "idb": "^7.0.1",
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-broadcast-update": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-7.4.0.tgz",
+      "integrity": "sha512-+eZQwoktlvo62cI0b+QBr40v5XjighxPq3Fzo9AWMiAosmpG5gxRHgTbGGhaJv/q/MFVxwFNGh/UwHZ/8K88lA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-build": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-7.4.0.tgz",
+      "integrity": "sha512-Ntk1pWb0caOFIvwz/hfgrov/OJ45wPEhI5PbTywQcYjyZiVhT3UrwwUPl6TRYbTm4moaFYithYnl1lvZ8UjxcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apideck/better-ajv-errors": "^0.3.1",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
+        "ajv": "^8.6.0",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^11.0.1",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.79.2",
+        "source-map": "^0.8.0-beta.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "7.4.0",
+        "workbox-broadcast-update": "7.4.0",
+        "workbox-cacheable-response": "7.4.0",
+        "workbox-core": "7.4.0",
+        "workbox-expiration": "7.4.0",
+        "workbox-google-analytics": "7.4.0",
+        "workbox-navigation-preload": "7.4.0",
+        "workbox-precaching": "7.4.0",
+        "workbox-range-requests": "7.4.0",
+        "workbox-recipes": "7.4.0",
+        "workbox-routing": "7.4.0",
+        "workbox-strategies": "7.4.0",
+        "workbox-streams": "7.4.0",
+        "workbox-sw": "7.4.0",
+        "workbox-window": "7.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/workbox-cacheable-response": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-7.4.0.tgz",
+      "integrity": "sha512-0Fb8795zg/x23ISFkAc7lbWes6vbw34DGFIMw31cwuHPgDEC/5EYm6m/ZkylLX0EnEbbOyOCLjKgFS/Z5g0HeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-core": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.4.0.tgz",
+      "integrity": "sha512-6BMfd8tYEnN4baG4emG9U0hdXM4gGuDU3ectXuVHnj71vwxTFI7WOpQJC4siTOlVtGqCUtj0ZQNsrvi6kZZTAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/workbox-expiration": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-7.4.0.tgz",
+      "integrity": "sha512-V50p4BxYhtA80eOvulu8xVfPBgZbkxJ1Jr8UUn0rvqjGhLDqKNtfrDfjJKnLz2U8fO2xGQJTx/SKXNTzHOjnHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "idb": "^7.0.1",
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-google-analytics": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-7.4.0.tgz",
+      "integrity": "sha512-MVPXQslRF6YHkzGoFw1A4GIB8GrKym/A5+jYDUSL+AeJw4ytQGrozYdiZqUW1TPQHW8isBCBtyFJergUXyNoWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-background-sync": "7.4.0",
+        "workbox-core": "7.4.0",
+        "workbox-routing": "7.4.0",
+        "workbox-strategies": "7.4.0"
+      }
+    },
+    "node_modules/workbox-navigation-preload": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-7.4.0.tgz",
+      "integrity": "sha512-etzftSgdQfjMcfPgbfaZCfM2QuR1P+4o8uCA2s4rf3chtKTq/Om7g/qvEOcZkG6v7JZOSOxVYQiOu6PbAZgU6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-precaching": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.4.0.tgz",
+      "integrity": "sha512-VQs37T6jDqf1rTxUJZXRl3yjZMf5JX/vDPhmx2CPgDDKXATzEoqyRqhYnRoxl6Kr0rqaQlp32i9rtG5zTzIlNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0",
+        "workbox-routing": "7.4.0",
+        "workbox-strategies": "7.4.0"
+      }
+    },
+    "node_modules/workbox-range-requests": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-7.4.0.tgz",
+      "integrity": "sha512-3Vq854ZNuP6Y0KZOQWLaLC9FfM7ZaE+iuQl4VhADXybwzr4z/sMmnLgTeUZLq5PaDlcJBxYXQ3U91V7dwAIfvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-recipes": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-7.4.0.tgz",
+      "integrity": "sha512-kOkWvsAn4H8GvAkwfJTbwINdv4voFoiE9hbezgB1sb/0NLyTG4rE7l6LvS8lLk5QIRIto+DjXLuAuG3Vmt3cxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-cacheable-response": "7.4.0",
+        "workbox-core": "7.4.0",
+        "workbox-expiration": "7.4.0",
+        "workbox-precaching": "7.4.0",
+        "workbox-routing": "7.4.0",
+        "workbox-strategies": "7.4.0"
+      }
+    },
+    "node_modules/workbox-routing": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.4.0.tgz",
+      "integrity": "sha512-C/ooj5uBWYAhAqwmU8HYQJdOjjDKBp9MzTQ+otpMmd+q0eF59K+NuXUek34wbL0RFrIXe/KKT+tUWcZcBqxbHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-strategies": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.4.0.tgz",
+      "integrity": "sha512-T4hVqIi5A4mHi92+5EppMX3cLaVywDp8nsyUgJhOZxcfSV/eQofcOA6/EMo5rnTNmNTpw0rUgjAI6LaVullPpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/workbox-streams": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-7.4.0.tgz",
+      "integrity": "sha512-QHPBQrey7hQbnTs5GrEVoWz7RhHJXnPT+12qqWM378orDMo5VMJLCkCM1cnCk+8Eq92lccx/VgRZ7WAzZWbSLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.4.0",
+        "workbox-routing": "7.4.0"
+      }
+    },
+    "node_modules/workbox-sw": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-7.4.0.tgz",
+      "integrity": "sha512-ltU+Kr3qWR6BtbdlMnCjobZKzeV1hN+S6UvDywBrwM19TTyqA03X66dzw1tEIdJvQ4lYKkBFox6IAEhoSEZ8Xw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/workbox-window": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-7.4.0.tgz",
+      "integrity": "sha512-/bIYdBLAVsNR3v7gYGaV4pQW3M3kEPx5E8vDxGvxo6khTrGtSSCS7QiFKv9ogzBgZiy0OXLP9zO28U/1nF1mfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2",
+        "workbox-core": "7.4.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..c5d5049
--- /dev/null
+++ b/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "ai-code-app",
+  "private": false,
+  "version": "0.1.0-alpha.0",
+  "type": "module",
+  "packageManager": "npm@10.9.7",
+  "engines": {
+    "node": "22.22.2",
+    "npm": "10.9.7"
+  },
+  "main": "./dist/package/index.js",
+  "module": "./dist/package/index.js",
+  "types": "./dist/package/index.d.ts",
+  "files": [
+    "dist/package",
+    "src/styles.css",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/package/index.d.ts",
+      "import": "./dist/package/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://repo.sm-home.cloud/repository/npm-hosted/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "capture:component": "node scripts/capture-component-screenshot.mjs",
+    "capture:menu": "node scripts/capture-menu-screenshot.mjs",
+    "capture:feature": "node scripts/capture-feature-screenshot.mjs",
+    "capture:settings": "node scripts/capture-settings-screenshot.mjs",
+    "capture:fullscreen": "node scripts/capture-fullscreen-toggle-screenshot.mjs",
+    "capture:plan-mobile": "node scripts/capture-plan-board-mobile-screenshot.mjs",
+    "plan:codex:once": "node scripts/run-plan-codex-once.mjs",
+    "server-command:runner": "node scripts/run-server-command-runner.mjs",
+    "build:app": "tsc -b && vite build --outDir app-dist",
+    "build:test-app": "VITE_EMPTY_OUT_DIR=false VITE_FILTER_PUBLIC_DIR=true VITE_DISABLE_MODULE_PRELOAD=true vite build --outDir /tmp/ai-code-test-app-dist",
+    "build:lib": "tsc -p tsconfig.lib.json",
+    "build": "npm run build:lib && npm run build:app",
+    "prepublishOnly": "npm run build:lib",
+    "preview": "vite preview",
+    "preview:app": "node scripts/serve-app-dist.mjs",
+    "preview:test-app": "APP_DIST_DIR=/tmp/ai-code-test-app-dist node scripts/serve-app-dist.mjs"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.0.1",
+    "antd": "^5.27.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.14.0",
+    "recharts": "^3.8.1"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "playwright": "^1.59.0",
+    "typescript": "^5.9.2",
+    "vite": "^8.0.3",
+    "vite-plugin-pwa": "^1.2.0"
+  }
+}
diff --git a/public/apple-touch-icon.svg b/public/apple-touch-icon.svg
new file mode 100755
index 0000000..b7e1aa8
--- /dev/null
+++ b/public/apple-touch-icon.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+  <defs>
+    <linearGradient id="bg" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#165dff" />
+      <stop offset="100%" stop-color="#28c76f" />
+    </linearGradient>
+  </defs>
+  <rect width="180" height="180" rx="44" fill="url(#bg)" />
+  <path
+    d="M54 54h72v18H72v30h48v18H72v6h54v18H54z"
+    fill="#fff"
+  />
+</svg>
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100755
index 0000000..525c588
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="bg" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#165dff" />
+      <stop offset="100%" stop-color="#28c76f" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="url(#bg)" />
+  <path
+    d="M20 20h24v6H26v10h16v6H26v2h18v6H20z"
+    fill="#fff"
+  />
+</svg>
diff --git a/public/pwa-192x192.svg b/public/pwa-192x192.svg
new file mode 100755
index 0000000..de62547
--- /dev/null
+++ b/public/pwa-192x192.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192">
+  <defs>
+    <linearGradient id="bg" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#165dff" />
+      <stop offset="100%" stop-color="#28c76f" />
+    </linearGradient>
+  </defs>
+  <rect width="192" height="192" rx="48" fill="url(#bg)" />
+  <path
+    d="M58 58h76v20H78v32h50v20H78v6h56v20H58z"
+    fill="#fff"
+  />
+</svg>
diff --git a/public/pwa-512x512.svg b/public/pwa-512x512.svg
new file mode 100755
index 0000000..53ea973
--- /dev/null
+++ b/public/pwa-512x512.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#165dff" />
+      <stop offset="100%" stop-color="#28c76f" />
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="128" fill="url(#bg)" />
+  <path
+    d="M160 160h192v52H214v84h126v52H214v16h138v52H160z"
+    fill="#fff"
+  />
+</svg>
diff --git a/scripts/capture-component-screenshot.mjs b/scripts/capture-component-screenshot.mjs
new file mode 100755
index 0000000..188a33a
--- /dev/null
+++ b/scripts/capture-component-screenshot.mjs
@@ -0,0 +1,63 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const cwd = process.cwd();
+const componentId = process.argv[2];
+const captureDate = process.argv[3] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:5174';
+
+if (!componentId) {
+  console.error('Usage: node scripts/capture-component-screenshot.mjs <component-id> [YYYY-MM-DD]');
+  process.exit(1);
+}
+
+const screenshotFileName = `${componentId}.png`;
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName,
+});
+const targetSelector = `#component-sample-${componentId}`;
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({
+  viewport: {
+    width: 1600,
+    height: 1200,
+  },
+  deviceScaleFactor: 2,
+});
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  const targetUrl = new URL(baseUrl);
+  targetUrl.searchParams.set('topMenu', 'apis');
+
+  await page.goto(targetUrl.toString(), {
+    waitUntil: 'domcontentloaded',
+  });
+
+  await page.waitForLoadState('networkidle').catch(() => {});
+
+  const target = page.locator(targetSelector).first();
+  await target.waitFor({ state: 'visible', timeout: 30000 });
+  await target.scrollIntoViewIfNeeded();
+  await target.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: componentId,
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await browser.close();
+}
diff --git a/scripts/capture-feature-screenshot.mjs b/scripts/capture-feature-screenshot.mjs
new file mode 100755
index 0000000..96b335a
--- /dev/null
+++ b/scripts/capture-feature-screenshot.mjs
@@ -0,0 +1,117 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const FEATURE_CAPTURE_PRESETS = {
+  'docs-worklogs': {
+    topMenu: 'docs',
+    screenshotFileName: 'feature-docs-worklogs.png',
+    targetSelector: '.app-main-card',
+  },
+  'play-layout': {
+    topMenu: 'play',
+    screenshotFileName: 'feature-play-layout.png',
+    targetSelector: '.app-main-card',
+    query: { playSection: 'layout' },
+  },
+  'apis-components': {
+    topMenu: 'apis',
+    screenshotFileName: 'feature-apis-components.png',
+    targetSelector: '.app-main-card',
+  },
+  'apis-widgets': {
+    topMenu: 'apis',
+    screenshotFileName: 'feature-apis-widgets.png',
+    targetSelector: '.app-main-card',
+    afterNavigation: async (page) => {
+      await page.getByRole('menuitem', { name: 'Widgets' }).click();
+    },
+  },
+  'plans-board': {
+    topMenu: 'plans',
+    screenshotFileName: 'feature-plans-board.png',
+    targetSelector: '.app-main-card',
+  },
+  'plans-charts': {
+    topMenu: 'plans',
+    screenshotFileName: 'feature-plans-charts.png',
+    targetSelector: '.app-main-card',
+    query: { planSection: 'charts' },
+  },
+  'chat-live': {
+    topMenu: 'chat',
+    screenshotFileName: 'feature-chat-live.png',
+    targetSelector: '.app-main-card, .app-chat-panel',
+  },
+  'chat-errors': {
+    topMenu: 'chat',
+    screenshotFileName: 'feature-chat-errors.png',
+    targetSelector: '.app-main-card, .app-chat-panel',
+    afterNavigation: async (page) => {
+      await page.getByRole('menuitem', { name: '에러 로그' }).click();
+    },
+  },
+};
+
+const cwd = process.cwd();
+const presetKey = process.argv[2];
+const captureDate = process.argv[3] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:5174';
+
+if (!presetKey || !(presetKey in FEATURE_CAPTURE_PRESETS)) {
+  console.error(`Usage: node scripts/capture-feature-screenshot.mjs <${Object.keys(FEATURE_CAPTURE_PRESETS).join('|')}> [YYYY-MM-DD]`);
+  process.exit(1);
+}
+
+const preset = FEATURE_CAPTURE_PRESETS[presetKey];
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName: preset.screenshotFileName,
+});
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({
+  viewport: { width: 1600, height: 1200 },
+  deviceScaleFactor: 2,
+});
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  const targetUrl = new URL(baseUrl);
+  targetUrl.searchParams.set('topMenu', preset.topMenu);
+
+  if (preset.query) {
+    for (const [key, value] of Object.entries(preset.query)) {
+      targetUrl.searchParams.set(key, value);
+    }
+  }
+
+  await page.goto(targetUrl.toString(), { waitUntil: 'networkidle' });
+
+  if (preset.afterNavigation) {
+    await preset.afterNavigation(page);
+    await page.waitForLoadState('networkidle').catch(() => {});
+  }
+
+  const target = page.locator(preset.targetSelector).first();
+  await target.waitFor({ state: 'visible', timeout: 30000 });
+  await target.scrollIntoViewIfNeeded();
+  await target.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: preset.screenshotFileName.replace('.png', ''),
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await browser.close();
+}
diff --git a/scripts/capture-fullscreen-toggle-screenshot.mjs b/scripts/capture-fullscreen-toggle-screenshot.mjs
new file mode 100755
index 0000000..6fdd5d2
--- /dev/null
+++ b/scripts/capture-fullscreen-toggle-screenshot.mjs
@@ -0,0 +1,45 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const cwd = process.cwd();
+const captureDate = process.argv[2] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:5174';
+const screenshotFileName = 'main-content-fullscreen-toggle.png';
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName,
+});
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({
+  viewport: { width: 1600, height: 1200 },
+  deviceScaleFactor: 2,
+});
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  await page.goto(baseUrl, { waitUntil: 'networkidle' });
+  await page.getByLabel('콘텐츠 최대화').click();
+
+  const target = page.locator('.app-main-content--expanded').first();
+  await target.waitFor({ state: 'visible', timeout: 30000 });
+  await target.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: 'main-content-fullscreen-toggle',
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await browser.close();
+}
diff --git a/scripts/capture-menu-screenshot.mjs b/scripts/capture-menu-screenshot.mjs
new file mode 100755
index 0000000..b7b520b
--- /dev/null
+++ b/scripts/capture-menu-screenshot.mjs
@@ -0,0 +1,61 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const cwd = process.cwd();
+const menuGroup = process.argv[2] ?? 'docs';
+const captureDate = process.argv[3] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:5174';
+
+const supportedMenuGroups = new Set(['docs', 'plans']);
+
+if (!supportedMenuGroups.has(menuGroup)) {
+  console.error('Usage: node scripts/capture-menu-screenshot.mjs [docs|plans] [YYYY-MM-DD]');
+  process.exit(1);
+}
+
+const screenshotFileName = `${menuGroup}-menu.png`;
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName,
+});
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({
+  viewport: { width: 1600, height: 1200 },
+  deviceScaleFactor: 2,
+});
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  const targetUrl = new URL(baseUrl);
+  targetUrl.searchParams.set('topMenu', menuGroup === 'docs' ? 'docs' : 'plans');
+
+  await page.goto(targetUrl.toString(), { waitUntil: 'networkidle' });
+
+  if (menuGroup === 'plans') {
+    await page.getByLabel('설정').click();
+    await page.locator('.app-header__settings-menu').first().waitFor({ state: 'visible', timeout: 30000 });
+  }
+
+  const target = page.locator('.app-shell').first();
+  await target.waitFor({ state: 'visible', timeout: 30000 });
+  await target.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: screenshotFileName.replace('.png', ''),
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await browser.close();
+}
diff --git a/scripts/capture-plan-board-mobile-screenshot.mjs b/scripts/capture-plan-board-mobile-screenshot.mjs
new file mode 100755
index 0000000..f5f2979
--- /dev/null
+++ b/scripts/capture-plan-board-mobile-screenshot.mjs
@@ -0,0 +1,50 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const cwd = process.cwd();
+const captureDate = process.argv[2] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:5174';
+const screenshotFileName = 'plan-board-mobile-memo-detail.png';
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName,
+});
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  viewport: { width: 430, height: 932 },
+  isMobile: true,
+  hasTouch: true,
+  deviceScaleFactor: 3,
+});
+const page = await context.newPage();
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  await page.goto(baseUrl, { waitUntil: 'networkidle' });
+  await page.getByText('Plans').click();
+  await page.getByRole('button', { name: '새 메모' }).click();
+
+  const overlayCard = page.locator('.plan-board-page__overlay-card').first();
+  await overlayCard.waitFor({ state: 'visible', timeout: 30000 });
+  await overlayCard.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: 'plan-board-mobile-memo-detail',
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await context.close();
+  await browser.close();
+}
diff --git a/scripts/capture-search-command-screenshot.mjs b/scripts/capture-search-command-screenshot.mjs
new file mode 100755
index 0000000..08171fe
--- /dev/null
+++ b/scripts/capture-search-command-screenshot.mjs
@@ -0,0 +1,98 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const cwd = process.cwd();
+const captureDate = process.argv[2] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:5174';
+const screenshotFileName = 'search-command.png';
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName,
+});
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  viewport: { width: 430, height: 932 },
+  isMobile: true,
+  hasTouch: true,
+  deviceScaleFactor: 3,
+});
+const page = await context.newPage();
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  await page.goto(baseUrl, { waitUntil: 'networkidle' });
+
+  await page.evaluate(() => {
+    const sensor = Array.from(document.querySelectorAll('div')).find((element) => {
+      const style = window.getComputedStyle(element);
+      return (
+        style.position === 'fixed' &&
+        style.top === '0px' &&
+        style.right === '0px' &&
+        style.touchAction === 'none' &&
+        element.childElementCount === 0
+      );
+    });
+
+    if (!sensor) {
+      throw new Error('Search gesture sensor not found.');
+    }
+
+    const rect = sensor.getBoundingClientRect();
+    const startX = rect.right - 24;
+    const startY = rect.top + 18;
+    const endY = startY + 120;
+
+    const createTouch = (clientY) =>
+      new Touch({
+        identifier: 1,
+        target: sensor,
+        clientX: startX,
+        clientY,
+        radiusX: 12,
+        radiusY: 12,
+        rotationAngle: 0,
+        force: 1,
+      });
+
+    const dispatch = (type, touches) => {
+      sensor.dispatchEvent(
+        new TouchEvent(type, {
+          bubbles: true,
+          cancelable: true,
+          touches,
+          targetTouches: touches,
+          changedTouches: touches,
+        }),
+      );
+    };
+
+    dispatch('touchstart', [createTouch(startY)]);
+    dispatch('touchmove', [createTouch(endY)]);
+    dispatch('touchend', []);
+  });
+
+  const modal = page.locator('.search-command-modal .ant-modal-content').first();
+  await modal.waitFor({ state: 'visible', timeout: 30000 });
+  await modal.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: 'search-command',
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await context.close();
+  await browser.close();
+}
diff --git a/scripts/capture-settings-screenshot.mjs b/scripts/capture-settings-screenshot.mjs
new file mode 100755
index 0000000..5b0efc7
--- /dev/null
+++ b/scripts/capture-settings-screenshot.mjs
@@ -0,0 +1,83 @@
+import process from 'node:process';
+import { chromium } from 'playwright';
+import { ensureDirectory, getKstDate, resolveCapturePaths, updateWorklogCaptureSection } from './worklog-capture-utils.mjs';
+
+const ACCESS_TOKEN = 'usr_7f3a9c2d8e1b4a6f';
+const TOKEN_ACCESS_STORAGE_KEY = 'work-app.token-access.registered-token';
+
+const SETTINGS_CAPTURE_PRESETS = {
+  automation: {
+    screenshotFileName: 'settings-app.png',
+    triggerLabel: '앱 설정',
+  },
+  notification: {
+    screenshotFileName: 'settings-notification.png',
+    triggerLabel: '알림',
+  },
+};
+
+const cwd = process.cwd();
+const presetKey = process.argv[2];
+const captureDate = process.argv[3] ?? getKstDate();
+const baseUrl = process.env.CAPTURE_BASE_URL ?? 'http://127.0.0.1:4173';
+
+if (!presetKey || !(presetKey in SETTINGS_CAPTURE_PRESETS)) {
+  console.error(`Usage: node scripts/capture-settings-screenshot.mjs <${Object.keys(SETTINGS_CAPTURE_PRESETS).join('|')}> [YYYY-MM-DD]`);
+  process.exit(1);
+}
+
+const preset = SETTINGS_CAPTURE_PRESETS[presetKey];
+const { screenshotDir, screenshotPath, worklogPath, markdownImagePath } = resolveCapturePaths({
+  cwd,
+  captureDate,
+  screenshotFileName: preset.screenshotFileName,
+});
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  viewport: { width: 1600, height: 1200 },
+  deviceScaleFactor: 2,
+});
+
+await context.addInitScript(
+  ({ tokenAccessStorageKey, accessToken }) => {
+    window.localStorage.setItem(tokenAccessStorageKey, accessToken);
+  },
+  {
+    tokenAccessStorageKey: TOKEN_ACCESS_STORAGE_KEY,
+    accessToken: ACCESS_TOKEN,
+  },
+);
+
+const page = await context.newPage();
+
+try {
+  await ensureDirectory(screenshotDir);
+
+  const targetUrl = new URL(baseUrl);
+  targetUrl.searchParams.set('topMenu', 'plans');
+
+  await page.goto(targetUrl.toString(), { waitUntil: 'networkidle' });
+  await page.getByLabel('설정').click();
+  await page.getByRole('button', { name: preset.triggerLabel }).click();
+
+  const modal = page.locator('.ant-modal-root .ant-modal-content').last();
+  await modal.waitFor({ state: 'visible', timeout: 30000 });
+  await modal.screenshot({
+    path: screenshotPath,
+    animations: 'disabled',
+  });
+
+  await updateWorklogCaptureSection({
+    worklogPath,
+    captureDate,
+    imageAlt: preset.screenshotFileName.replace('.png', ''),
+    markdownImagePath,
+  });
+
+  console.log(`Saved: ${screenshotPath}`);
+  console.log(`Linked in: ${worklogPath}`);
+} finally {
+  await context.close();
+  await browser.close();
+}
diff --git a/scripts/run-plan-codex-once.mjs b/scripts/run-plan-codex-once.mjs
new file mode 100755
index 0000000..c494981
--- /dev/null
+++ b/scripts/run-plan-codex-once.mjs
@@ -0,0 +1,1716 @@
+import { createHash } from 'node:crypto';
+import { execFile, spawn } from 'node:child_process';
+import { promisify } from 'node:util';
+import { access, cp, mkdir, mkdtemp, readFile, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+const execFileAsync = promisify(execFile);
+const EXEC_MAX_BUFFER = 20 * 1024 * 1024;
+
+const repoPath = process.env.PLAN_REPO_PATH ?? process.cwd();
+const apiBaseUrl = process.env.PLAN_API_BASE_URL ?? 'http://127.0.0.1:3100/api';
+const accessToken = process.env.PLAN_ACCESS_TOKEN?.trim() ?? '';
+const planItemId = process.env.PLAN_ITEM_ID ? Number(process.env.PLAN_ITEM_ID) : null;
+const codexBin = process.env.PLAN_CODEX_BIN ?? 'codex';
+const localMainMode = process.env.PLAN_LOCAL_MAIN_MODE === 'true';
+const skipWorkComplete = process.env.PLAN_SKIP_WORK_COMPLETE === 'true';
+const gitUserName = process.env.PLAN_GIT_USER_NAME ?? 'how2ice';
+const gitUserEmail = process.env.PLAN_GIT_USER_EMAIL ?? 'how2ice@naver.com';
+const previewBaseUrl = process.env.PLAN_PREVIEW_BASE_URL?.trim() || '';
+const previewUrlTemplate = process.env.PLAN_PREVIEW_URL_TEMPLATE?.trim() || '';
+const STREAM_CAPTURE_LIMIT = 256 * 1024;
+const PROMPT_REQUEST_SUMMARY_LIMIT = 72;
+const SOURCE_SNAPSHOT_MAX_BYTES = 200 * 1024;
+const ERROR_SUMMARY_MAX_LENGTH = 500;
+const SOURCE_SNAPSHOT_TEXT_PATTERN =
+  /\.(txt|log|csv|md|mdx|json|jsonl|ya?ml|xml|diff|patch|sh|bash|zsh|ini|cfg|conf|sql|js|jsx|ts|tsx|css|scss|less|html?|java|kt|py|rb|go|rs|svg)$/i;
+
+const ERROR_SUMMARY_LINE_PATTERN =
+  /(ERROR:|failed|failure|capacity|Read-only file system|permission|not permitted|sandbox|os error|ENOENT|EACCES|ECONN|SyntaxError|TypeError|ReferenceError)/i;
+const ERROR_SUMMARY_NOISE_PATTERN =
+  /^(exec|codex|tokens used|succeeded in \d+ms:?|[><=]{3,}|[A-Za-z]:\\|\/bin\/bash\b|\d+\s*[:|])/i;
+const CODEX_EXEC_MAX_ATTEMPTS = 2;
+const CODEX_EXEC_RETRY_DELAY_MS = 3000;
+const MAX_ERROR_LOG_PLAN_REGISTRATIONS = 6;
+const CODEX_EXEC_TRANSIENT_FAILURE_PATTERN =
+  /failed to record rollout items|failed to queue rollout items|channel closed/i;
+const CODEX_HOME_PERMISSION_PATTERN =
+  /failed to record rollout items|failed to queue rollout items|channel closed|read-only file system|eacces|permission/i;
+const CODEX_HOME_RUNTIME_PATHS = [
+  'auth.json',
+  'config.toml',
+  'rules',
+  'skills',
+  'vendor_imports',
+  'models_cache.json',
+  'version.json',
+];
+
+function parseCodexTokenUsage(output) {
+  const text = stripAnsi(String(output ?? ''));
+
+  if (!text) {
+    return null;
+  }
+
+  const lines = text.split('\n').map((line) => line.trim());
+  const lastMatchedIndex = lines.reduce((foundIndex, line, index) => {
+    return /tokens?\s+used/i.test(line) ? index : foundIndex;
+  }, -1);
+
+  if (lastMatchedIndex < 0) {
+    return null;
+  }
+
+  const matchedLine = lines[lastMatchedIndex] ?? '';
+  const usageLines = [matchedLine];
+
+  if (!/\d/.test(matchedLine)) {
+    for (let index = lastMatchedIndex + 1; index < lines.length && usageLines.length < 5; index += 1) {
+      const nextLine = lines[index]?.trim() ?? '';
+
+      if (!nextLine) {
+        if (usageLines.length > 1) {
+          break;
+        }
+        continue;
+      }
+
+      if (/^(?:\[plan-progress\]|done:|noop:|board_post:|recovered_commit:|git\s|diff --git|commit\s[0-9a-f]{7,})/i.test(nextLine)) {
+        break;
+      }
+
+      if (!/\d/.test(nextLine) && !/(input|output|total|cached|reasoning)/i.test(nextLine)) {
+        if (usageLines.length > 1) {
+          break;
+        }
+        continue;
+      }
+
+      usageLines.push(nextLine);
+    }
+  }
+
+  return usageLines
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function reportProgress(message) {
+  const text = String(message ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!text) {
+    return;
+  }
+
+  process.stderr.write(`[plan-progress] ${text}\n`);
+}
+
+function requiresSourceChange(note) {
+  const text = String(note ?? '');
+  return /(?:\/|\\).+\.[a-z0-9]+/i.test(text) || /(생성|만들어|추가|수정|변경|삭제|파일)/.test(text);
+}
+
+function extractRequestedPaths(note) {
+  const text = String(note ?? '');
+  const matches = text.match(/(?:[A-Za-z0-9._-]+[\/\\])+[A-Za-z0-9._-]+\.[A-Za-z0-9._-]+/g) ?? [];
+  return [...new Set(matches.map((item) => item.replace(/\\/g, '/')))];
+}
+
+function isAutomationEnvironmentFailure(text) {
+  const message = String(text ?? '');
+  return /bwrap|namespace 오류|샌드박스 제약|파일 쓰기 실패|sandbox/i.test(message);
+}
+
+function isBoardDraftOnlyRequest(note) {
+  const text = String(note ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!text) {
+    return false;
+  }
+
+  const mentionsBoard = /(?:plan|플랜)?\s*게시판|게시글|board/i.test(text);
+  const asksToWrite = /작성만|등록만|글\s*작성|게시글\s*작성|작성해|작성해줘|올려줘|남겨줘/.test(text);
+  const keepsUnreceived = /미접수|접수\s*하지|접수하지|자동화\s*접수\s*(?:하지|금지|안)/.test(text);
+
+  return mentionsBoard && asksToWrite && keepsUnreceived;
+}
+
+function normalizeAutomationType(value) {
+  return value === 'plan' ||
+    value === 'command_execution' ||
+    value === 'non_source_work' ||
+    value === 'auto_worker'
+    ? value
+    : value === 'plan_registration'
+      ? 'plan'
+      : value === 'general_development'
+        ? 'auto_worker'
+    : 'none';
+}
+
+function isErrorLogReviewRequest(note) {
+  const text = String(note ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!text) {
+    return false;
+  }
+
+  return /에러\s*로그|error\s*log/i.test(text) && /plan\s*게시판|plan게시판|플랜\s*게시판/i.test(text) && /등록|확인/.test(text);
+}
+
+function shouldProcessAsPlanDocument(item) {
+  return normalizeAutomationType(item?.automationType) === 'plan' && isErrorLogReviewRequest(item?.note);
+}
+
+function shouldForceNoSourceChange(item) {
+  const automationType = normalizeAutomationType(item?.automationType);
+  return automationType === 'command_execution' || automationType === 'non_source_work' || isErrorLogReviewRequest(item?.note);
+}
+
+function shouldSkipSourceChangeRequirement(item) {
+  const automationType = normalizeAutomationType(item?.automationType);
+  return automationType === 'command_execution' || automationType === 'non_source_work' || isErrorLogReviewRequest(item?.note);
+}
+
+function normalizeDateBoundary(value) {
+  if (!value) {
+    return null;
+  }
+
+  const date = value instanceof Date ? value : new Date(String(value));
+
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+
+  return date;
+}
+
+function formatIsoTimestamp(value) {
+  const date = normalizeDateBoundary(value);
+  return date ? date.toISOString() : String(value ?? '');
+}
+
+function normalizeRequestPathGroup(requestPath) {
+  const normalized = String(requestPath ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/\?.*$/u, '')
+    .replace(/\/\d+(?=\/|$)/gu, '/:id')
+    .replace(/[0-9a-f]{8,}(?=\/|$)/giu, ':id');
+
+  if (!normalized) {
+    return 'unknown';
+  }
+
+  const segments = normalized
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+    .slice(0, 3);
+
+  return segments.length > 0 ? `/${segments.join('/')}` : normalized;
+}
+
+function buildErrorLogPlanFingerprint(log) {
+  return createHash('sha1')
+    .update(
+      [
+        String(log.source ?? '').trim().toLowerCase(),
+        String(log.errorType ?? '').trim().toLowerCase(),
+        log.statusCode == null ? '' : String(log.statusCode),
+      ].join('||'),
+    )
+    .digest('hex')
+    .slice(0, 12);
+}
+
+function buildErrorLogPlanWorkId(log) {
+  return `error-fix-${buildErrorLogPlanFingerprint(log)}`;
+}
+
+function buildErrorLogPlanCandidates(logs) {
+  const grouped = new Map();
+
+  for (const log of logs) {
+    const fingerprint = createHash('sha1')
+      .update(
+        [
+          String(log.source ?? '').trim().toLowerCase(),
+          String(log.errorType ?? '').trim().toLowerCase(),
+          String(log.errorName ?? '').trim().toLowerCase(),
+          log.statusCode == null ? '' : String(log.statusCode),
+          normalizeRequestPathGroup(log.requestPath),
+        ].join('||'),
+      )
+      .digest('hex')
+      .slice(0, 12);
+    const createdAtMs = normalizeDateBoundary(log.createdAt)?.getTime() ?? 0;
+    const existing = grouped.get(fingerprint);
+    const requestPathGroup = normalizeRequestPathGroup(log.requestPath);
+    const errorMessage = String(log.errorMessage ?? '').trim();
+
+    if (!existing) {
+      grouped.set(fingerprint, {
+        sample: log,
+        count: 1,
+        firstCreatedAt: log.createdAt,
+        firstTimeMs: createdAtMs,
+        lastCreatedAt: log.createdAt,
+        lastTimeMs: createdAtMs,
+        requestPathGroup,
+        requestPaths: log.requestPath ? new Set([String(log.requestPath).trim()]) : new Set(),
+        errorMessages: errorMessage ? new Set([errorMessage]) : new Set(),
+        errorNames: log.errorName ? new Set([String(log.errorName).trim()]) : new Set(),
+        sampleLogIds: log.id != null ? [log.id] : [],
+      });
+      continue;
+    }
+
+    existing.count += 1;
+    if (log.requestPath) {
+      existing.requestPaths.add(String(log.requestPath).trim());
+    }
+    if (errorMessage) {
+      existing.errorMessages.add(errorMessage);
+    }
+    if (log.errorName) {
+      existing.errorNames.add(String(log.errorName).trim());
+    }
+    if (log.id != null && existing.sampleLogIds.length < 5) {
+      existing.sampleLogIds.push(log.id);
+    }
+
+    if (createdAtMs <= existing.firstTimeMs) {
+      existing.firstCreatedAt = log.createdAt;
+      existing.firstTimeMs = createdAtMs;
+    }
+
+    if (createdAtMs >= existing.lastTimeMs) {
+      existing.sample = log;
+      existing.lastCreatedAt = log.createdAt;
+      existing.lastTimeMs = createdAtMs;
+    }
+  }
+
+  return [...grouped.entries()]
+    .map(([fingerprint, entry]) => ({
+      fingerprint,
+      workId: buildErrorLogPlanWorkId(entry.sample),
+      source: entry.sample.source,
+      sourceLabel: entry.sample.sourceLabel,
+      errorType: entry.sample.errorType,
+      errorName: entry.sample.errorName,
+      errorMessage: entry.sample.errorMessage,
+      requestPath: entry.sample.requestPath,
+      requestPathGroup: entry.requestPathGroup,
+      requestPaths: [...entry.requestPaths].filter(Boolean).slice(0, 5),
+      statusCode: entry.sample.statusCode,
+      count: entry.count,
+      firstCreatedAt: entry.firstCreatedAt,
+      lastCreatedAt: entry.lastCreatedAt,
+      sampleLogId: entry.sample.id,
+      sampleLogIds: entry.sampleLogIds,
+      errorNames: [...entry.errorNames].filter(Boolean).slice(0, 5),
+      representativeMessages: [...entry.errorMessages].filter(Boolean).slice(0, 5),
+    }))
+    .sort((left, right) => {
+      if (right.count !== left.count) {
+        return right.count - left.count;
+      }
+
+      const leftLastTime = normalizeDateBoundary(left.lastCreatedAt)?.getTime() ?? 0;
+      const rightLastTime = normalizeDateBoundary(right.lastCreatedAt)?.getTime() ?? 0;
+
+      if (rightLastTime !== leftLastTime) {
+        return rightLastTime - leftLastTime;
+      }
+
+      return Number(right.sampleLogId ?? 0) - Number(left.sampleLogId ?? 0);
+    });
+}
+
+function mergeErrorLogPlanCandidateBucket(bucket, bucketIndex) {
+  const sortedBucket = [...bucket].sort((left, right) => {
+    if (right.count !== left.count) {
+      return right.count - left.count;
+    }
+
+    return String(left.workId ?? '').localeCompare(String(right.workId ?? ''));
+  });
+  const representative = sortedBucket[0];
+  const uniqueFingerprints = [...new Set(sortedBucket.map((candidate) => candidate.fingerprint).filter(Boolean))].sort();
+  const mergedFingerprint = createHash('sha1')
+    .update(uniqueFingerprints.join('||'))
+    .digest('hex')
+    .slice(0, 12);
+  const firstCreatedAt = sortedBucket
+    .map((candidate) => normalizeDateBoundary(candidate.firstCreatedAt)?.getTime() ?? Number.POSITIVE_INFINITY)
+    .reduce((min, value) => Math.min(min, value), Number.POSITIVE_INFINITY);
+  const lastCreatedAt = sortedBucket
+    .map((candidate) => normalizeDateBoundary(candidate.lastCreatedAt)?.getTime() ?? 0)
+    .reduce((max, value) => Math.max(max, value), 0);
+  const requestPaths = [...new Set(sortedBucket.flatMap((candidate) => candidate.requestPaths ?? []).filter(Boolean))].slice(0, 8);
+  const representativeMessages = [...new Set(sortedBucket.flatMap((candidate) => candidate.representativeMessages ?? []).filter(Boolean))].slice(0, 8);
+  const errorNames = [...new Set(sortedBucket.flatMap((candidate) => candidate.errorNames ?? []).filter(Boolean))].slice(0, 8);
+  const groupedScopes = sortedBucket
+    .slice(0, 8)
+    .map((candidate) => {
+      const parts = [candidate.sourceLabel || candidate.source, candidate.errorType];
+      if (candidate.requestPathGroup && candidate.requestPathGroup !== 'unknown') {
+        parts.push(candidate.requestPathGroup);
+      }
+      return parts.filter(Boolean).join(' / ');
+    })
+    .filter(Boolean);
+
+  return {
+    fingerprint: mergedFingerprint,
+    workId: `error-fix-bundle-${mergedFingerprint}`,
+    source: representative.source,
+    sourceLabel: representative.sourceLabel,
+    errorType: sortedBucket.length > 1 ? '다중 에러 묶음' : representative.errorType,
+    errorName: representative.errorName,
+    errorMessage: representative.errorMessage,
+    requestPath: representative.requestPath,
+    requestPathGroup: representative.requestPathGroup,
+    requestPaths,
+    statusCode: representative.statusCode,
+    count: sortedBucket.reduce((sum, candidate) => sum + Number(candidate.count ?? 0), 0),
+    firstCreatedAt: Number.isFinite(firstCreatedAt) ? new Date(firstCreatedAt).toISOString() : representative.firstCreatedAt,
+    lastCreatedAt: lastCreatedAt > 0 ? new Date(lastCreatedAt).toISOString() : representative.lastCreatedAt,
+    sampleLogId: representative.sampleLogId,
+    sampleLogIds: [...new Set(sortedBucket.flatMap((candidate) => candidate.sampleLogIds ?? []).filter((value) => value != null))].slice(0, 8),
+    errorNames,
+    representativeMessages,
+    groupedScopes,
+    groupedCandidateCount: sortedBucket.length,
+    bucketIndex,
+  };
+}
+
+function coalesceErrorLogPlanCandidates(candidates, maxGroups = MAX_ERROR_LOG_PLAN_REGISTRATIONS) {
+  const sortedCandidates = [...candidates].sort((left, right) => {
+    if (right.count !== left.count) {
+      return right.count - left.count;
+    }
+
+    return String(left.workId ?? '').localeCompare(String(right.workId ?? ''));
+  });
+
+  if (sortedCandidates.length <= maxGroups) {
+    return sortedCandidates;
+  }
+
+  const bucketSize = Math.ceil(sortedCandidates.length / maxGroups);
+  const merged = [];
+
+  for (let index = 0; index < sortedCandidates.length; index += bucketSize) {
+    const bucket = sortedCandidates.slice(index, index + bucketSize);
+    if (bucket.length === 0) {
+      continue;
+    }
+    merged.push(mergeErrorLogPlanCandidateBucket(bucket, merged.length + 1));
+  }
+
+  return merged.slice(0, maxGroups);
+}
+
+function filterLogsWithinRange(logs, rangeStart, rangeEnd) {
+  const startTime = rangeStart.getTime();
+  const endTime = rangeEnd.getTime();
+
+  return logs.filter((log) => {
+    const createdAtMs = normalizeDateBoundary(log.createdAt)?.getTime();
+    return createdAtMs != null && createdAtMs >= startTime && createdAtMs <= endTime;
+  });
+}
+
+function formatErrorLogPlanNote(candidate, rangeStart, rangeEnd) {
+  const lines = [
+    `조회 구간: ${formatIsoTimestamp(rangeStart)} ~ ${formatIsoTimestamp(rangeEnd)}`,
+    `발생 건수: ${candidate.count}건`,
+    `최근 발생: ${formatIsoTimestamp(candidate.lastCreatedAt)}`,
+    `최초 발생: ${formatIsoTimestamp(candidate.firstCreatedAt)}`,
+    `에러 유형: ${candidate.errorType}`,
+  ];
+
+  if (candidate.errorName) {
+    lines.push(`에러 이름: ${candidate.errorName}`);
+  }
+
+  if (candidate.sourceLabel || candidate.source) {
+    lines.push(`발생 위치: ${candidate.sourceLabel || candidate.source}`);
+  }
+
+  if (candidate.groupedCandidateCount && candidate.groupedCandidateCount > 1) {
+    lines.push(`묶인 에러 그룹: ${candidate.groupedCandidateCount}개`);
+  }
+
+  if (candidate.requestPathGroup && candidate.requestPathGroup !== 'unknown') {
+    lines.push(`주요 경로 그룹: ${candidate.requestPathGroup}`);
+  }
+
+  if (Array.isArray(candidate.requestPaths) && candidate.requestPaths.length > 0) {
+    lines.push(`대표 경로: ${candidate.requestPaths.join(', ')}`);
+  }
+
+  if (candidate.statusCode != null) {
+    lines.push(`상태 코드: ${candidate.statusCode}`);
+  }
+
+  if (Array.isArray(candidate.representativeMessages) && candidate.representativeMessages.length > 0) {
+    lines.push('대표 메시지:');
+    lines.push(...candidate.representativeMessages.map((message, index) => `${index + 1}. ${message}`));
+  } else {
+    lines.push(`대표 메시지: ${String(candidate.errorMessage ?? '').trim()}`);
+  }
+
+  if (Array.isArray(candidate.sampleLogIds) && candidate.sampleLogIds.length > 0) {
+    lines.push(`대표 로그 ID: ${candidate.sampleLogIds.join(', ')}`);
+  } else {
+    lines.push(`대표 로그 ID: ${candidate.sampleLogId}`);
+  }
+
+  if (Array.isArray(candidate.groupedScopes) && candidate.groupedScopes.length > 0) {
+    lines.push('묶인 에러 범위:');
+    lines.push(...candidate.groupedScopes.map((scope, index) => `${index + 1}. ${scope}`));
+  }
+  lines.push('');
+  lines.push('처리 요청:');
+  lines.push('1. 재현 경로와 영향 범위를 확인합니다.');
+  lines.push('2. 수정이 필요한 경우 별도 Plan으로 소스 작업을 진행합니다.');
+  lines.push('3. 테스트와 재발 방지 필요 여부를 검토합니다.');
+
+  return lines.join('\n');
+}
+
+function stripAnsi(text) {
+  return String(text ?? '').replace(/\u001B\[[0-9;]*m/g, '');
+}
+
+function normalizeErrorSummaryLine(line) {
+  return stripAnsi(line)
+    .replace(/^\[plan-progress\]\s*/u, '')
+    .replace(/^\d{4}-\d{2}-\d{2}T\S+\s+ERROR\s+[^:]+:\s*/u, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function summarizeFailureOutput(output, fallback) {
+  const normalizedLines = String(output ?? '')
+    .split('\n')
+    .map((line) => normalizeErrorSummaryLine(line))
+    .filter(Boolean)
+    .filter((line) => !ERROR_SUMMARY_NOISE_PATTERN.test(line));
+
+  const bestLine =
+    normalizedLines.filter((line) => ERROR_SUMMARY_LINE_PATTERN.test(line)).at(-1) ??
+    normalizedLines.at(-1) ??
+    String(fallback ?? '').trim();
+
+  const summary = bestLine.replace(/\s+/g, ' ').trim();
+  const normalizedSummary = summary.slice(0, ERROR_SUMMARY_MAX_LENGTH) || '자동 작업 실행에 실패했습니다.';
+
+  if (!CODEX_HOME_PERMISSION_PATTERN.test(normalizedSummary)) {
+    return normalizedSummary;
+  }
+
+  const codexHome = process.env.CODEX_HOME?.trim() || '(unset)';
+  const templateHome = process.env.PLAN_CODEX_TEMPLATE_HOME?.trim() || process.env.CODEX_HOME_TEMPLATE?.trim() || '(unset)';
+  return `${normalizedSummary} [hint: CODEX_HOME=${codexHome}, template=${templateHome}]`;
+}
+
+function isTransientCodexExecFailure(error) {
+  const message = error instanceof Error ? error.message : String(error ?? '');
+  return CODEX_EXEC_TRANSIENT_FAILURE_PATTERN.test(message);
+}
+
+async function wait(ms) {
+  await new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+async function prepareWritableCodexHome(tempDir) {
+  const writableCodexHome = process.env.CODEX_HOME?.trim() || path.join(tempDir, '.codex');
+  const sourceCodexHome =
+    process.env.PLAN_CODEX_TEMPLATE_HOME?.trim() ||
+    process.env.CODEX_HOME_TEMPLATE?.trim() ||
+    path.join(process.env.HOME ?? '/root', '.codex');
+
+  await mkdir(writableCodexHome, { recursive: true });
+
+  for (const relativePath of CODEX_HOME_RUNTIME_PATHS) {
+    const sourcePath = path.join(sourceCodexHome, relativePath);
+    const targetPath = path.join(writableCodexHome, relativePath);
+
+    try {
+      await access(sourcePath);
+    } catch {
+      continue;
+    }
+
+    await mkdir(path.dirname(targetPath), { recursive: true });
+    await cp(sourcePath, targetPath, { recursive: true, force: true });
+  }
+
+  return writableCodexHome;
+}
+function summarizeRequest(note, limit = PROMPT_REQUEST_SUMMARY_LIMIT) {
+  const text = String(note ?? '')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  if (!text) {
+    return '요청 내용 없음';
+  }
+
+  if (text.length <= limit) {
+    return text;
+  }
+
+  return `${text.slice(0, Math.max(0, limit - 1)).trim()}…`;
+}
+
+function escapeTemplateValue(value) {
+  return encodeURIComponent(String(value ?? '').trim());
+}
+
+function buildPreviewUrl(item, commitHash = '') {
+  if (previewUrlTemplate) {
+    return previewUrlTemplate
+      .replaceAll('{branch}', escapeTemplateValue(item.assignedBranch ?? ''))
+      .replaceAll('{commit}', escapeTemplateValue(commitHash))
+      .replaceAll('{workId}', escapeTemplateValue(item.workId ?? ''))
+      .replaceAll('{planId}', escapeTemplateValue(item.id ?? ''));
+  }
+
+  if (previewBaseUrl) {
+    return previewBaseUrl;
+  }
+
+  return null;
+}
+
+async function request(pathname, init) {
+  const headers = {
+    'Content-Type': 'application/json',
+    ...(accessToken ? { 'X-Access-Token': accessToken } : {}),
+    ...(init?.headers ?? {}),
+  };
+  const response = await fetch(`${apiBaseUrl}${pathname}`, {
+    headers,
+    ...init,
+  });
+
+  const data = await response.json().catch(() => ({}));
+
+  if (!response.ok) {
+    throw new Error(data?.message ?? `Plan API 요청에 실패했습니다: ${pathname}`);
+  }
+
+  return data;
+}
+
+async function fetchPlanActionHistories(planItemId) {
+  const data = await request(`/plan/items/${planItemId}/actions`);
+  return data.items ?? [];
+}
+
+async function fetchPlanIssueHistories(planItemId) {
+  const data = await request(`/plan/items/${planItemId}/issues`);
+  return data.items ?? [];
+}
+
+function formatRecentActionHistories(histories) {
+  if (!histories.length) {
+    return '없음';
+  }
+
+  return histories
+    .slice(0, 5)
+    .map(
+      (history, index) =>
+        `${index + 1}. [${history.actionType}] ${history.createdAt}\n${String(history.note ?? '').trim()}`,
+    )
+    .join('\n\n');
+}
+
+function formatRecentIssueHistories(histories) {
+  if (!histories.length) {
+    return '없음';
+  }
+
+  return histories
+    .slice(0, 5)
+    .map((history, index) => {
+      const actionNote = history.actionNote ? `\n조치이력:\n${String(history.actionNote).trim()}` : '';
+      return `${index + 1}. ${history.issueTag} / ${history.createdAt}\n${String(history.message ?? '').trim()}${actionNote}`;
+    })
+    .join('\n\n');
+}
+
+async function runCommand(command, args) {
+  if (command === 'git') {
+    await execFileAsync('git', ['-c', `safe.directory=${repoPath}`, '-C', repoPath, 'config', 'user.name', gitUserName], {
+      encoding: 'utf8',
+      maxBuffer: EXEC_MAX_BUFFER,
+    });
+    await execFileAsync('git', ['-c', `safe.directory=${repoPath}`, '-C', repoPath, 'config', 'user.email', gitUserEmail], {
+      encoding: 'utf8',
+      maxBuffer: EXEC_MAX_BUFFER,
+    });
+    return execFileAsync('git', ['-c', `safe.directory=${repoPath}`, ...args], {
+      cwd: repoPath,
+      encoding: 'utf8',
+      maxBuffer: EXEC_MAX_BUFFER,
+    });
+  }
+
+  return execFileAsync(command, args, {
+    cwd: repoPath,
+    encoding: 'utf8',
+    maxBuffer: EXEC_MAX_BUFFER,
+  });
+}
+
+async function hasGitChanges() {
+  const { stdout } = await runCommand('git', ['status', '--porcelain']);
+  return Boolean(stdout.trim());
+}
+
+async function getHeadCommit() {
+  const { stdout } = await runCommand('git', ['rev-parse', 'HEAD']);
+  return stdout.trim();
+}
+
+async function getHeadCommitSubject() {
+  const { stdout } = await runCommand('git', ['show', '--format=%s', '--no-patch', 'HEAD']);
+  return stdout.trim();
+}
+
+async function listHeadChangedFiles() {
+  const { stdout } = await runCommand('git', ['show', '--format=', '--name-only', '--find-renames', 'HEAD']);
+  return stdout
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+async function listChangedFiles() {
+  const { stdout } = await runCommand('git', ['status', '--short']);
+  return stdout
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function normalizeChangedPaths(changedFiles) {
+  return changedFiles
+    .map((line) => line.replace(/^[A-Z?]{1,2}\s+/, '').trim())
+    .map((line) => line.split(' -> ').at(-1) ?? line)
+    .map((line) => line.replace(/\\/g, '/'));
+}
+
+function inferSourceLanguage(filePath) {
+  const normalizedPath = String(filePath ?? '').toLowerCase();
+
+  if (normalizedPath.endsWith('.tsx')) {
+    return 'tsx';
+  }
+
+  if (normalizedPath.endsWith('.ts')) {
+    return 'typescript';
+  }
+
+  if (normalizedPath.endsWith('.jsx')) {
+    return 'jsx';
+  }
+
+  if (normalizedPath.endsWith('.js')) {
+    return 'javascript';
+  }
+
+  if (normalizedPath.endsWith('.json') || normalizedPath.endsWith('.jsonl')) {
+    return 'json';
+  }
+
+  if (normalizedPath.endsWith('.yml') || normalizedPath.endsWith('.yaml')) {
+    return 'yaml';
+  }
+
+  if (normalizedPath.endsWith('.css') || normalizedPath.endsWith('.scss') || normalizedPath.endsWith('.less')) {
+    return 'css';
+  }
+
+  if (normalizedPath.endsWith('.html') || normalizedPath.endsWith('.htm')) {
+    return 'html';
+  }
+
+  if (normalizedPath.endsWith('.diff') || normalizedPath.endsWith('.patch')) {
+    return 'diff';
+  }
+
+  if (normalizedPath.endsWith('.sh') || normalizedPath.endsWith('.bash') || normalizedPath.endsWith('.zsh')) {
+    return 'bash';
+  }
+
+  if (normalizedPath.endsWith('.py')) {
+    return 'python';
+  }
+
+  if (normalizedPath.endsWith('.md') || normalizedPath.endsWith('.mdx')) {
+    return 'markdown';
+  }
+
+  return 'text';
+}
+
+async function collectSourceFileSnapshots() {
+  const { stdout } = await runCommand('git', ['show', '--format=', '--name-status', '--find-renames', 'HEAD']);
+  const lines = stdout
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter(Boolean);
+
+  const snapshots = await Promise.all(
+    lines.map(async (line) => {
+      const columns = line.split('\t').filter(Boolean);
+
+      if (columns.length < 2) {
+        return null;
+      }
+
+      const rawStatus = columns[0] ?? '';
+      const statusCode = rawStatus.charAt(0).toUpperCase();
+      const isRename = statusCode === 'R';
+      const previousPath = isRename ? (columns[1] ?? null) : null;
+      const pathValue = isRename ? columns[2] : columns[1];
+      const normalizedPath = String(pathValue ?? '').replace(/\\/g, '/');
+
+      if (!normalizedPath) {
+        return null;
+      }
+
+      const normalizedStatus =
+        statusCode === 'A'
+          ? 'added'
+          : statusCode === 'M'
+            ? 'modified'
+            : statusCode === 'D'
+              ? 'deleted'
+              : statusCode === 'R'
+                ? 'renamed'
+                : 'unknown';
+
+      if (normalizedStatus === 'deleted') {
+        return {
+          path: normalizedPath,
+          previousPath,
+          status: normalizedStatus,
+          language: 'text',
+          content: '삭제된 파일이라 본문 스냅샷이 없습니다.',
+        };
+      }
+
+      if (!SOURCE_SNAPSHOT_TEXT_PATTERN.test(normalizedPath)) {
+        return {
+          path: normalizedPath,
+          previousPath,
+          status: 'binary',
+          language: 'text',
+          content: '텍스트 미리보기를 지원하지 않는 파일입니다.',
+        };
+      }
+
+      const absolutePath = path.resolve(repoPath, normalizedPath);
+
+      try {
+        const content = await readFile(absolutePath, 'utf8');
+
+        if (Buffer.byteLength(content, 'utf8') > SOURCE_SNAPSHOT_MAX_BYTES) {
+          return {
+            path: normalizedPath,
+            previousPath,
+            status: normalizedStatus,
+            language: inferSourceLanguage(normalizedPath),
+            content: `파일 크기가 커서 전체 스냅샷을 저장하지 않았습니다. (${Math.round(
+              Buffer.byteLength(content, 'utf8') / 1024,
+            )}KB)`,
+          };
+        }
+
+        return {
+          path: normalizedPath,
+          previousPath,
+          status: normalizedStatus,
+          language: inferSourceLanguage(normalizedPath),
+          content,
+        };
+      } catch {
+        return {
+          path: normalizedPath,
+          previousPath,
+          status: normalizedStatus,
+          language: inferSourceLanguage(normalizedPath),
+          content: '파일 스냅샷을 읽지 못했습니다.',
+        };
+      }
+    }),
+  );
+
+  return snapshots.filter(Boolean);
+}
+
+async function collectWorkingTreeSourceSnapshots(changedPaths) {
+  const uniquePaths = [...new Set((changedPaths ?? []).map((value) => String(value ?? '').trim()).filter(Boolean))];
+
+  const snapshots = await Promise.all(
+    uniquePaths.map(async (normalizedPath) => {
+      const absolutePath = path.resolve(repoPath, normalizedPath);
+
+      if (!SOURCE_SNAPSHOT_TEXT_PATTERN.test(normalizedPath)) {
+        return {
+          path: normalizedPath,
+          previousPath: null,
+          status: 'binary',
+          language: 'text',
+          content: '텍스트 미리보기를 지원하지 않는 파일입니다.',
+        };
+      }
+
+      try {
+        const content = await readFile(absolutePath, 'utf8');
+
+        if (Buffer.byteLength(content, 'utf8') > SOURCE_SNAPSHOT_MAX_BYTES) {
+          return {
+            path: normalizedPath,
+            previousPath: null,
+            status: 'modified',
+            language: inferSourceLanguage(normalizedPath),
+            content: `파일 크기가 커서 앞부분만 보관했습니다.\n\n${content.slice(0, SOURCE_SNAPSHOT_MAX_BYTES)}`,
+          };
+        }
+
+        return {
+          path: normalizedPath,
+          previousPath: null,
+          status: 'modified',
+          language: inferSourceLanguage(normalizedPath),
+          content,
+        };
+      } catch {
+        return {
+          path: normalizedPath,
+          previousPath: null,
+          status: 'deleted',
+          language: 'text',
+          content: '삭제된 파일이라 본문 스냅샷이 없습니다.',
+        };
+      }
+    }),
+  );
+
+  return snapshots.filter(Boolean);
+}
+
+async function hasLocalBranch(branchName) {
+  try {
+    await runCommand('git', ['show-ref', '--verify', '--quiet', `refs/heads/${branchName}`]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function getGitDirPath() {
+  const { stdout } = await runCommand('git', ['rev-parse', '--git-dir']);
+  const gitDir = stdout.trim() || '.git';
+  return path.resolve(repoPath, gitDir);
+}
+
+async function exists(targetPath) {
+  try {
+    await access(targetPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function tryGitCleanup(args) {
+  try {
+    await runCommand('git', args);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function clearInterruptedGitOperations() {
+  const gitDirPath = await getGitDirPath();
+  const checks = await Promise.all([
+    exists(path.join(gitDirPath, 'MERGE_HEAD')),
+    exists(path.join(gitDirPath, 'rebase-merge')),
+    exists(path.join(gitDirPath, 'rebase-apply')),
+    exists(path.join(gitDirPath, 'CHERRY_PICK_HEAD')),
+    exists(path.join(gitDirPath, 'REVERT_HEAD')),
+    exists(path.join(gitDirPath, 'BISECT_LOG')),
+  ]);
+
+  const [hasMergeHead, hasRebaseMerge, hasRebaseApply, hasCherryPickHead, hasRevertHead, hasBisectLog] = checks;
+
+  if (hasMergeHead) {
+    await tryGitCleanup(['merge', '--abort']);
+  }
+
+  if (hasRebaseMerge || hasRebaseApply) {
+    await tryGitCleanup(['rebase', '--abort']);
+  }
+
+  if (hasCherryPickHead) {
+    await tryGitCleanup(['cherry-pick', '--abort']);
+  }
+
+  if (hasRevertHead) {
+    await tryGitCleanup(['revert', '--abort']);
+  }
+
+  if (hasBisectLog) {
+    await tryGitCleanup(['bisect', 'reset']);
+  }
+}
+
+async function ensureCleanWorkingTree() {
+  if (localMainMode) {
+    reportProgress('로컬 main 직접 작업 모드라 git reset/clean은 건너뜁니다.');
+    return;
+  }
+
+  reportProgress('이전 git 중간 상태와 작업 트리를 정리하는 중입니다.');
+  await clearInterruptedGitOperations();
+  await runCommand('git', ['reset', '--hard']);
+  await runCommand('git', ['clean', '-fd']);
+}
+
+async function ensureWorkingBranch(item) {
+  if (localMainMode) {
+    reportProgress(`로컬 main 직접 작업 모드로 ${item.assignedBranch || 'main'} 작업본을 그대로 사용합니다.`);
+    return;
+  }
+
+  const branchName = item.assignedBranch;
+  const baseBranch = 'main';
+
+  if (await hasLocalBranch(branchName)) {
+    await runCommand('git', ['switch', branchName]);
+    return;
+  }
+
+  await runCommand('git', ['switch', baseBranch]);
+  await runCommand('git', ['switch', '-C', branchName, baseBranch]);
+}
+
+async function commitAndPushBranch(item, summary) {
+  if (localMainMode) {
+    throw new Error('로컬 main 직접 작업 모드에서는 commit/push를 수행하지 않습니다.');
+  }
+
+  const commitMessage = `plan(${item.workId}): ${summary}`.slice(0, 120);
+  await runCommand('git', ['add', '-A']);
+  await runCommand('git', ['commit', '-m', commitMessage]);
+  await runCommand('git', ['push', '-u', 'origin', item.assignedBranch]);
+  const { stdout } = await runCommand('git', ['rev-parse', '--short', 'HEAD']);
+  return {
+    commitHash: stdout.trim(),
+    commitMessage,
+  };
+}
+
+function parseBoardPostResult(result) {
+  const text = String(result ?? '').trim();
+
+  if (!text.startsWith('BOARD_POST:')) {
+    return null;
+  }
+
+  const rawPayload = text
+    .replace(/^BOARD_POST:\s*/u, '')
+    .replace(/^```(?:json)?\s*/u, '')
+    .replace(/\s*```$/u, '')
+    .trim();
+
+  try {
+    const parsed = JSON.parse(rawPayload);
+    const title = String(parsed?.title ?? '').trim();
+    const content = String(parsed?.content ?? '').trim();
+
+    if (!title || !content) {
+      throw new Error('게시글 제목 또는 본문이 비어 있습니다.');
+    }
+
+    return { title, content };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'JSON 파싱 실패';
+    throw new Error(`게시판 작성 결과를 해석하지 못했습니다. ${message}`);
+  }
+}
+
+function parseRecoveredCommitResult(result) {
+  const text = String(result ?? '').trim();
+
+  if (!text.startsWith('RECOVERED_COMMIT:')) {
+    return null;
+  }
+
+  const lines = text.split('\n');
+  const commitHash = lines[0]?.replace(/^RECOVERED_COMMIT:\s*/u, '').trim() ?? '';
+  const summary = lines[1]?.trim() || 'Codex가 생성한 로컬 커밋을 복구했습니다.';
+  const originalError = lines.slice(2).join('\n').replace(/^Original error:\s*/u, '').trim();
+
+  return {
+    commitHash,
+    summary,
+    originalError,
+  };
+}
+
+async function runCodexForPlan(item) {
+  reportProgress('최근 조치 이력과 이슈 이력을 조회하는 중입니다.');
+  const tempDir = await mkdtemp(path.join(tmpdir(), 'plan-codex-'));
+  const outputFile = path.join(tempDir, `plan-${item.id}.txt`);
+  const writableCodexHome = await prepareWritableCodexHome(tempDir);
+  const [recentActions, recentIssues] = await Promise.all([
+    fetchPlanActionHistories(item.id),
+    fetchPlanIssueHistories(item.id),
+  ]);
+  const requestSummary = summarizeRequest(item.note);
+
+  const prompt = [
+    '당신은 현재 저장소에서 Plan 항목을 처리하는 Codex 실행기입니다.',
+    `작업 ID: ${item.workId}`,
+    `요청 요약: ${requestSummary}`,
+    `상세 요청:\n${item.note || '(비어 있음)'}`,
+    `최근 조치 이력:\n${formatRecentActionHistories(recentActions)}`,
+    `최근 이슈 이력:\n${formatRecentIssueHistories(recentIssues)}`,
+    '규칙:',
+    '0. git commit, git push, release/main merge는 직접 실행하지 마세요. 파일 변경만 남기면 이 실행기가 커밋/푸시/반영을 처리합니다.',
+    '1. 요청이 구체적이고 실제 코드 작업이 필요하면 저장소를 수정하고 최종 답변을 반드시 "DONE: "으로 시작하세요.',
+    '2. 요청이 테스트 수준이거나 별도 작업이 불필요하면 코드를 수정하지 말고 최종 답변을 반드시 "NOOP: "으로 시작하세요.',
+    '3. 최종 답변은 한국어 한두 문장으로 간단히 작성하세요.',
+    '4. 최근 조치 이력에 재처리나 보완 지시가 있으면 그 내용을 우선 반영해 다시 작업하세요.',
+    '5. 응답 톤은 CLI처럼 짧고 직접적으로 작성하세요. 두루뭉술한 설명이나 동문서답을 피하세요.',
+    '6. 미리보기 확인이 필요한 작업이면 preview 링크가 필요한지 판단하고, 이미 정해진 preview 주소 규칙이 있으면 그 링크를 최종 답변에도 함께 적으세요.',
+    shouldForceNoSourceChange(item)
+      ? '7. 이번 요청은 선택된 자동화 처리 유형상 저장소 파일을 수정하면 안 됩니다. 필요한 조회/명령/정리만 수행하고 최종 답변은 반드시 "NOOP: "으로 시작하세요.'
+      : '',
+    isBoardDraftOnlyRequest(item.note)
+      ? '8. 이번 요청은 게시판 작성 전용입니다. 저장소 파일을 수정하지 말고, 최종 답변을 반드시 `BOARD_POST:` 다음 줄에 `{"title":"...","content":"..."}` JSON 하나만 붙여서 작성하세요. 게시글 본문에는 실제 접수 후 작업자가 바로 실행할 내용만 작성하고, 검토용/미접수/자동화 접수 대기 같은 운영 상태 문구는 넣지 마세요.'
+      : '',
+  ].join('\n');
+
+  const runCodexExecOnce = async (attempt) => {
+    if (attempt > 1) {
+      reportProgress(`Codex 내부 채널 오류로 자동 작업을 재시도합니다. (${attempt}/${CODEX_EXEC_MAX_ATTEMPTS})`);
+    }
+
+    return await new Promise((resolve, reject) => {
+      let settled = false;
+      const child = spawn(
+        codexBin,
+        [
+          'exec',
+          '--dangerously-bypass-approvals-and-sandbox',
+          '-C',
+          repoPath,
+          '-o',
+          outputFile,
+          '-',
+        ],
+        {
+          cwd: repoPath,
+          stdio: ['pipe', 'pipe', 'pipe'],
+          env: {
+            ...process.env,
+            CODEX_HOME: writableCodexHome,
+          },
+        },
+      );
+
+      let stdout = '';
+      let stderr = '';
+
+      child.stdout?.on('data', (chunk) => {
+        const text = String(chunk);
+        stdout = (stdout + text).slice(-STREAM_CAPTURE_LIMIT);
+        process.stderr.write(text);
+      });
+
+      child.stderr?.on('data', (chunk) => {
+        const text = String(chunk);
+        stderr = (stderr + text).slice(-STREAM_CAPTURE_LIMIT);
+        process.stderr.write(text);
+      });
+
+      child.stdin?.end(prompt);
+
+      child.on('error', (error) => {
+        if (settled) {
+          return;
+        }
+
+        settled = true;
+        reject(error);
+      });
+      child.on('close', (code, signal) => {
+        if (settled) {
+          return;
+        }
+
+        settled = true;
+        if (code === 0) {
+          resolve({
+            stdout,
+            stderr,
+            tokenUsage: parseCodexTokenUsage(`${stderr}\n${stdout}`),
+          });
+          return;
+        }
+
+        const details = summarizeFailureOutput(
+          `${stderr}\n${stdout}`,
+          `Codex exited with code ${code ?? 'unknown'}${signal ? ` (${signal})` : ''}`,
+        );
+        reject(new Error(details));
+      });
+    });
+  };
+
+  const runCodexExecWithRetry = async () => {
+    let lastError = null;
+
+    for (let attempt = 1; attempt <= CODEX_EXEC_MAX_ATTEMPTS; attempt += 1) {
+      try {
+        return await runCodexExecOnce(attempt);
+      } catch (error) {
+        lastError = error;
+
+        if (attempt >= CODEX_EXEC_MAX_ATTEMPTS || !isTransientCodexExecFailure(error)) {
+          throw error;
+        }
+
+        const outputText = await readFile(outputFile, 'utf8').catch(() => '');
+
+        if (outputText.trim()) {
+          reportProgress('Codex 결과 파일이 남아 있어 내부 채널 오류를 성공으로 처리합니다.');
+          return;
+        }
+
+        if (await hasGitChanges()) {
+          throw error;
+        }
+
+        await wait(CODEX_EXEC_RETRY_DELAY_MS);
+      }
+    }
+
+    throw lastError ?? new Error('Codex 자동 작업 실행에 실패했습니다.');
+  };
+
+  try {
+    reportProgress(`작업 브랜치 ${item.assignedBranch ?? item.releaseTarget ?? 'release'} 상태를 준비하는 중입니다.`);
+    await ensureWorkingBranch(item);
+    const headBeforeCodex = await getHeadCommit();
+    reportProgress('Codex 자동 작업을 실행하는 중입니다.');
+    let codexRunMetadata = { tokenUsage: null };
+    try {
+      codexRunMetadata = (await runCodexExecWithRetry()) ?? codexRunMetadata;
+    } catch (error) {
+      const headAfterCodex = await getHeadCommit();
+
+      if (headAfterCodex && headAfterCodex !== headBeforeCodex) {
+        const summary = await getHeadCommitSubject();
+        const message = error instanceof Error ? error.message : String(error);
+        return [`RECOVERED_COMMIT: ${headAfterCodex}`, summary, `Original error: ${message}`].join('\n');
+      }
+
+      throw error;
+    }
+
+    reportProgress('Codex 응답을 정리하는 중입니다.');
+    const message = (await readFile(outputFile, 'utf8')).trim();
+    return {
+      message: message || 'NOOP: 별도 작업 결과를 남기지 않았습니다.',
+      tokenUsage: codexRunMetadata.tokenUsage,
+    };
+  } finally {
+    await rm(tempDir, { recursive: true, force: true });
+  }
+}
+
+async function processErrorLogReviewPlan(item) {
+  const rangeEnd = new Date();
+  const rangeStart = new Date(rangeEnd.getTime() - 24 * 60 * 60 * 1000);
+
+  reportProgress('에러 로그 기반 Plan 게시판 등록 요청을 감지해 최근 24시간 로그를 집계하는 중입니다.');
+  const result = await request('/plan/registrations/error-logs', {
+    method: 'POST',
+    body: JSON.stringify({
+      rangeStart: rangeStart.toISOString(),
+      rangeEnd: rangeEnd.toISOString(),
+    }),
+  });
+
+  const createdBoardPosts = result?.createdBoardPosts ?? [];
+  const skippedBoardPosts = result?.skippedBoardPosts ?? [];
+  const recentLogCount = Number(result?.recentLogCount ?? 0);
+  const rawCandidateCount = Number(result?.rawCandidateCount ?? 0);
+  const candidateCount = Number(result?.candidateCount ?? 0);
+
+  const summaryLines = [
+    `조회 구간: ${rangeStart.toISOString()} ~ ${rangeEnd.toISOString()}`,
+    `조회 로그: ${recentLogCount}건`,
+    `에러 후보 원본: ${rawCandidateCount}건`,
+    `에러 후보 등록용 묶음: ${candidateCount}건`,
+    `신규 게시글 등록: ${createdBoardPosts.length}건`,
+    `중복 제외: ${skippedBoardPosts.length}건`,
+  ];
+
+  if (createdBoardPosts.length > 0) {
+    summaryLines.push('');
+    summaryLines.push('등록된 게시글:');
+    summaryLines.push(...createdBoardPosts.map((post) => `- 게시글 #${post.postId} ${post.workId} (${post.count}건)`));
+  }
+
+  if (skippedBoardPosts.length > 0) {
+    summaryLines.push('');
+    summaryLines.push('제외된 항목:');
+    summaryLines.push(...skippedBoardPosts.map((post) => `- ${post.workId}: ${post.reason}`));
+  }
+
+  const summary = summaryLines.join('\n');
+
+  await request(`/plan/items/${item.id}/actions/note`, {
+    method: 'POST',
+    body: JSON.stringify({
+      actionType: '에러로그점검',
+      actionNote: [
+        summary,
+        '',
+        'Plan 게시판 등록 전용 요청으로 처리했고, 저장소 소스 수정 이력은 남기지 않았습니다.',
+      ].join('\n'),
+    }),
+  });
+
+  await request(`/plan/items/${item.id}/actions/complete`, {
+    method: 'POST',
+    body: JSON.stringify({
+      note: createdBoardPosts.length > 0 ? `에러 로그 기반 Plan 게시글 ${createdBoardPosts.length}건을 등록했습니다.` : '등록할 신규 에러 Plan 게시글이 없었습니다.',
+    }),
+  });
+
+  return {
+    id: item.id,
+    outcome: 'error-log-review-complete',
+    createdBoardPosts,
+    skippedBoardPosts,
+  };
+}
+
+async function processPlan(item) {
+  reportProgress(`Plan ${item.workId} 요청 처리를 시작합니다.`);
+  if (shouldProcessAsPlanDocument(item)) {
+    return processErrorLogReviewPlan(item);
+  }
+
+  const baselineChangedFiles = localMainMode ? await listChangedFiles() : [];
+  const baselineChangedPathSet = new Set(normalizeChangedPaths(baselineChangedFiles));
+  const codexResult = await runCodexForPlan(item);
+  const result = codexResult.message;
+  const tokenUsage = codexResult.tokenUsage;
+  const tokenUsageLine = tokenUsage ? `토큰 사용량: ${tokenUsage}` : null;
+  const summary =
+    result.replace(/^DONE:\s*/, '').replace(/^NOOP:\s*/, '').trim() || '요청 검토를 완료했습니다.';
+  const boardPost = parseBoardPostResult(result);
+  const recoveredCommit = parseRecoveredCommitResult(result);
+
+  if (isAutomationEnvironmentFailure(summary) || isAutomationEnvironmentFailure(result)) {
+    throw new Error(
+      '자동화 실행 환경 문제로 실제 작업을 수행하지 못했습니다. 상세: ' + summary,
+    );
+  }
+
+  if (boardPost) {
+    if (!isBoardDraftOnlyRequest(item.note)) {
+      throw new Error('게시판 작성 전용 요청이 아닌데 BOARD_POST 결과가 반환되었습니다.');
+    }
+
+    reportProgress('게시판 작성 전용 요청을 Plan 게시판에 미접수 글로 등록하는 중입니다.');
+    const created = await request('/board/posts', {
+      method: 'POST',
+      body: JSON.stringify(boardPost),
+    });
+    const boardPostId = created?.item?.id ?? null;
+    const boardSummary = `Plan 게시판 미접수 글을 작성했습니다.${boardPostId ? ` 게시글 #${boardPostId}` : ''}`;
+
+    await request(`/plan/items/${item.id}/source-works`, {
+      method: 'POST',
+      body: JSON.stringify({
+        summary: boardSummary,
+        branchName: item.assignedBranch || item.releaseTarget || 'release',
+        commitHash: null,
+        changedFiles: [],
+        commandLog: [
+          `${codexBin} exec --dangerously-bypass-approvals-and-sandbox -C ${repoPath} -o <temp-output> "<plan prompt>"`,
+          tokenUsageLine,
+          `POST /api/board/posts${boardPostId ? ` -> #${boardPostId}` : ''}`,
+          'BOARD_POST: 저장소 파일 변경 없음',
+        ]
+          .filter(Boolean)
+          .join('\n'),
+        diffText: null,
+      }),
+    });
+
+    await request(`/plan/items/${item.id}/actions/note`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actionType: '게시판작성',
+        actionNote: [
+          boardSummary,
+          tokenUsageLine,
+          `제목: ${boardPost.title}`,
+          '자동화 접수는 하지 않고 미접수 상태로 남겼습니다.',
+        ]
+          .filter(Boolean)
+          .join('\n'),
+      }),
+    });
+
+    await request(`/plan/items/${item.id}/actions/complete`, {
+      method: 'POST',
+      body: JSON.stringify({
+        note: boardSummary,
+      }),
+    });
+
+    return {
+      id: item.id,
+      outcome: 'board-post-complete',
+      boardPostId,
+      result,
+    };
+  }
+
+  if (recoveredCommit) {
+    reportProgress('Codex 비정상 종료 후 남은 로컬 커밋을 복구해 원격 브랜치와 Plan 이력에 기록하는 중입니다.');
+    await runCommand('git', ['push', '-u', 'origin', item.assignedBranch]);
+    const previewUrl = buildPreviewUrl(item, recoveredCommit.commitHash);
+    const changedPaths = await listHeadChangedFiles();
+    const [{ stdout: diffText }, sourceFiles] = await Promise.all([
+      runCommand('git', ['show', '--stat', '--patch', '--format=medium', 'HEAD']),
+      collectSourceFileSnapshots(),
+    ]);
+    const recoveredSummary = [
+      recoveredCommit.summary,
+      recoveredCommit.originalError ? `Codex 종료 오류 복구: ${recoveredCommit.originalError}` : null,
+    ]
+      .filter(Boolean)
+      .join('\n');
+
+    await request(`/plan/items/${item.id}/source-works`, {
+      method: 'POST',
+      body: JSON.stringify({
+        summary: previewUrl ? `${recoveredSummary}\nPreview: ${previewUrl}` : recoveredSummary,
+        branchName: item.assignedBranch,
+        commitHash: recoveredCommit.commitHash.slice(0, 12),
+        previewUrl,
+        changedFiles: changedPaths,
+        commandLog: [
+          `${codexBin} exec --dangerously-bypass-approvals-and-sandbox -C ${repoPath} -o <temp-output> "<plan prompt>"`,
+          tokenUsageLine,
+          `RECOVERED_COMMIT: ${recoveredCommit.commitHash}`,
+          `git push -u origin ${item.assignedBranch}`,
+          'git show --stat --patch --format=medium HEAD',
+        ]
+          .filter(Boolean)
+          .join('\n'),
+        diffText: diffText.trim(),
+        sourceFiles,
+      }),
+    });
+
+    await request(`/plan/items/${item.id}/actions/note`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actionType: '소스작업복구',
+        actionNote:
+          [
+            recoveredSummary,
+            tokenUsageLine,
+            previewUrl ? `Preview: ${previewUrl}` : null,
+            changedPaths.length > 0 ? `변경 파일:\n${changedPaths.join('\n')}` : null,
+            `커밋: ${recoveredCommit.commitHash.slice(0, 12)}`,
+            `브랜치: ${item.assignedBranch}`,
+          ]
+            .filter(Boolean)
+            .join('\n\n'),
+      }),
+    });
+
+    return {
+      id: item.id,
+      outcome: 'development-complete',
+      result,
+    };
+  }
+
+  if (isBoardDraftOnlyRequest(item.note)) {
+    throw new Error('게시판 작성 전용 요청인데 자동화가 BOARD_POST 결과를 반환하지 않았습니다. 저장소 파일 변경으로 처리하지 않습니다.');
+  }
+
+  const changed = await hasGitChanges();
+
+  if (result.startsWith('NOOP:')) {
+    reportProgress('코드 변경 없이 처리 가능한 요청인지 검증하는 중입니다.');
+    if (!shouldSkipSourceChangeRequirement(item) && requiresSourceChange(item.note)) {
+      throw new Error(
+        `소스 변경이 필요한 요청인데 자동화가 작업을 수행하지 못했습니다. 응답: ${summary || 'NOOP'}`
+      );
+    }
+
+    reportProgress('NOOP 결과를 Plan 이력에 기록하는 중입니다.');
+    await request(`/plan/items/${item.id}/source-works`, {
+      method: 'POST',
+      body: JSON.stringify({
+        summary: summary || '요청을 검토하고 별도 코드 변경 없이 처리했습니다.',
+        branchName: item.assignedBranch || item.releaseTarget || 'release',
+        commitHash: null,
+        changedFiles: [],
+        commandLog: [
+          `${codexBin} exec --dangerously-bypass-approvals-and-sandbox -C ${repoPath} -o <temp-output> "<plan prompt>"`,
+          tokenUsageLine,
+          'NOOP: 별도 코드 변경 없음',
+        ]
+          .filter(Boolean)
+          .join('\n'),
+        diffText: null,
+      }),
+    });
+
+    await request(`/plan/items/${item.id}/actions/note`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actionType: '자동완료메모',
+        actionNote: [summary || '별도 코드 변경 없이 요청을 처리했습니다.', tokenUsageLine].filter(Boolean).join('\n'),
+      }),
+    });
+
+    await request(`/plan/items/${item.id}/actions/complete`, {
+      method: 'POST',
+      body: JSON.stringify({
+        note: summary || '별도 작업이 없어 완료 처리했습니다.',
+      }),
+    });
+    return {
+      id: item.id,
+      outcome: 'noop-complete',
+      result,
+    };
+  }
+
+  reportProgress('변경 파일과 요청 경로 일치 여부를 검증하는 중입니다.');
+  if (!changed) {
+    throw new Error(
+      `자동 작업 결과에 실제 변경 파일이 없습니다. 응답: ${summary || '작업 결과 요약이 비어 있습니다.'}`,
+    );
+  }
+
+  const changedFiles = await listChangedFiles();
+  const changedPaths = normalizeChangedPaths(changedFiles);
+  const effectiveChangedPaths = localMainMode
+    ? changedPaths.filter((changedPath) => !baselineChangedPathSet.has(changedPath))
+    : changedPaths;
+  const requestedPaths = extractRequestedPaths(item.note);
+
+  if (requestedPaths.length > 0) {
+    const matched = requestedPaths.some((requestedPath) =>
+      effectiveChangedPaths.some((changedPath) => changedPath === requestedPath || changedPath.endsWith('/' + requestedPath)),
+    );
+
+    if (!matched) {
+      throw new Error(
+        '요청한 파일 경로가 실제 변경 목록에 없습니다. 요청 경로: ' +
+          requestedPaths.join(', ') +
+          ' / 실제 변경: ' +
+          (effectiveChangedPaths.join(', ') || '없음'),
+      );
+    }
+  }
+
+  if (localMainMode) {
+    reportProgress('로컬 main 직접 작업 결과를 이력과 조치 메모로 저장하는 중입니다.');
+    const sourceFiles = await collectWorkingTreeSourceSnapshots(effectiveChangedPaths);
+    const diffText =
+      effectiveChangedPaths.length > 0
+        ? (await runCommand('git', ['diff', '--', ...effectiveChangedPaths]).then(({ stdout }) => stdout).catch(() => ''))
+        : '';
+    const commandLog = [
+      `${codexBin} exec --dangerously-bypass-approvals-and-sandbox -C ${repoPath} -o <temp-output> "<plan prompt>"`,
+      tokenUsageLine,
+      'local main mode: commit/push skipped',
+      effectiveChangedPaths.length > 0 ? `git diff -- ${effectiveChangedPaths.join(' ')}` : 'git diff -- 변경 파일 없음',
+    ]
+      .filter(Boolean)
+      .join('\n');
+
+    await request(`/plan/items/${item.id}/source-works`, {
+      method: 'POST',
+      body: JSON.stringify({
+        summary: summary || 'Codex 로컬 main 소스 작업 결과',
+        branchName: item.assignedBranch || 'main',
+        commitHash: null,
+        previewUrl: null,
+        changedFiles: effectiveChangedPaths,
+        commandLog,
+        diffText: diffText.trim() || null,
+        sourceFiles,
+      }),
+    });
+
+    await request(`/plan/items/${item.id}/actions/note`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actionType: '소스작업',
+        actionNote:
+          [
+            summary || 'Codex 로컬 main 작업 결과를 기록했습니다.',
+            tokenUsageLine,
+            effectiveChangedPaths.length > 0 ? `변경 파일:\n${effectiveChangedPaths.join('\n')}` : null,
+            `브랜치: ${item.assignedBranch || 'main'} (로컬 직접 작업)`,
+            '커밋과 원격 푸시는 수행하지 않았습니다.',
+          ]
+            .filter(Boolean)
+            .join('\n\n'),
+      }),
+    });
+
+    if (!skipWorkComplete) {
+      await request(`/plan/items/${item.id}/actions/complete-development`, {
+        method: 'POST',
+        body: JSON.stringify({}),
+      });
+    }
+
+    reportProgress('Plan 상태를 로컬 main 작업 완료로 반영했습니다.');
+    return {
+      id: item.id,
+      outcome: 'development-complete',
+      result,
+    };
+  }
+
+  reportProgress('변경 내용을 커밋하고 원격 브랜치로 푸시하는 중입니다.');
+  const { commitHash, commitMessage } = await commitAndPushBranch(item, summary);
+  const previewUrl = buildPreviewUrl(item, commitHash);
+  const [{ stdout: diffText }, sourceFiles] = await Promise.all([
+    runCommand('git', ['show', '--stat', '--patch', '--format=medium', 'HEAD']),
+    collectSourceFileSnapshots(),
+  ]);
+  const commandLog = [
+    `${codexBin} exec --dangerously-bypass-approvals-and-sandbox -C ${repoPath} -o <temp-output> "<plan prompt>"`,
+    tokenUsageLine,
+    'git add -A',
+    `git commit -m "${commitMessage}"`,
+    `git push -u origin ${item.assignedBranch}`,
+    'git show --stat --patch --format=medium HEAD',
+  ]
+    .filter(Boolean)
+    .join('\n');
+
+  reportProgress('소스 작업 이력과 조치 메모를 저장하는 중입니다.');
+  await request(`/plan/items/${item.id}/source-works`, {
+    method: 'POST',
+    body: JSON.stringify({
+      summary: previewUrl ? `${summary || 'Codex 소스 작업 결과'}\nPreview: ${previewUrl}` : summary || 'Codex 소스 작업 결과',
+      branchName: item.assignedBranch,
+      commitHash,
+      previewUrl,
+      changedFiles: changedPaths,
+      commandLog,
+      diffText: diffText.trim(),
+      sourceFiles,
+    }),
+  });
+
+  await request(`/plan/items/${item.id}/actions/note`, {
+      method: 'POST',
+      body: JSON.stringify({
+      actionType: '소스작업',
+      actionNote:
+        [
+          summary || 'Codex 작업 결과를 기록했습니다.',
+          tokenUsageLine,
+          previewUrl ? `Preview: ${previewUrl}` : null,
+          changedFiles.length > 0 ? `변경 파일:\n${changedFiles.join('\n')}` : null,
+          commitHash ? `커밋: ${commitHash}` : null,
+          `브랜치: ${item.assignedBranch}`,
+        ]
+          .filter(Boolean)
+          .join('\n\n'),
+      }),
+    });
+
+  if (!skipWorkComplete) {
+    await request(`/plan/items/${item.id}/actions/complete-development`, {
+      method: 'POST',
+      body: JSON.stringify({}),
+    });
+  }
+
+  reportProgress('Plan 상태를 개발 완료로 전환하는 중입니다.');
+  return {
+    id: item.id,
+    outcome: 'development-complete',
+    result,
+  };
+}
+
+async function main() {
+  const isExecutableTarget = (item) =>
+    item &&
+    item.status === '작업중' &&
+    Boolean(item.assignedBranch) &&
+    ['브랜치준비', '자동작업중'].includes(item.workerStatus);
+
+  let targets = [];
+
+  if (planItemId) {
+    const data = await request(`/plan/items/${planItemId}`);
+    const item = data.item;
+    targets = isExecutableTarget(item) ? [item] : [];
+  } else {
+    const data = await request('/plan/items');
+    targets = (data.items ?? []).filter((item) => isExecutableTarget(item));
+  }
+
+  if (targets.length === 0) {
+    console.log('처리할 Plan 항목이 없습니다.');
+    return;
+  }
+
+  for (const item of targets) {
+    await ensureCleanWorkingTree();
+    const processed = await processPlan(item);
+    console.log(JSON.stringify(processed, null, 2));
+  }
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+});
diff --git a/scripts/run-server-command-runner.mjs b/scripts/run-server-command-runner.mjs
new file mode 100644
index 0000000..82578e8
--- /dev/null
+++ b/scripts/run-server-command-runner.mjs
@@ -0,0 +1,1045 @@
+import { createServer } from 'node:http';
+import { execFile, spawn } from 'node:child_process';
+import { access, cp, mkdir, mkdtemp, readFile, rm, stat, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { promisify } from 'node:util';
+
+const execFileAsync = promisify(execFile);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, '..');
+const host = process.env.SERVER_COMMAND_RUNNER_HOST?.trim() || '0.0.0.0';
+const port = Number(process.env.SERVER_COMMAND_RUNNER_PORT?.trim() || '3211');
+const accessToken = process.env.SERVER_COMMAND_RUNNER_ACCESS_TOKEN?.trim() || 'local-server-command-runner';
+const runnerLogFile = process.env.SERVER_COMMAND_RUNNER_LOG_FILE?.trim() || '/tmp/server-command-runner.log';
+const heartbeatFile =
+  process.env.SERVER_COMMAND_RUNNER_HEARTBEAT_FILE?.trim() || path.join(projectRoot, '.server-command-runner-heartbeat.json');
+const startedAt = new Date().toISOString();
+const runnerLogMaxBytes = Math.max(256 * 1024, Number(process.env.SERVER_COMMAND_RUNNER_LOG_MAX_BYTES?.trim() || `${5 * 1024 * 1024}`));
+const runnerLogTrimToBytes = Math.max(
+  128 * 1024,
+  Math.min(
+    runnerLogMaxBytes,
+    Number(process.env.SERVER_COMMAND_RUNNER_LOG_TRIM_TO_BYTES?.trim() || `${2 * 1024 * 1024}`),
+  ),
+);
+const runnerLogTrimIntervalMs = Math.max(
+  15_000,
+  Number(process.env.SERVER_COMMAND_RUNNER_LOG_TRIM_INTERVAL_MS?.trim() || '60000'),
+);
+const cpuWatchdogEnabled = process.env.SERVER_COMMAND_CPU_WATCHDOG_ENABLED?.trim() !== 'false';
+const cpuWatchdogIntervalMs = Math.max(15_000, Number(process.env.SERVER_COMMAND_CPU_WATCHDOG_INTERVAL_MS?.trim() || '60000'));
+const cpuWatchdogThresholdPercent = Math.max(
+  10,
+  Number(process.env.SERVER_COMMAND_CPU_WATCHDOG_THRESHOLD_PERCENT?.trim() || '120'),
+);
+const cpuWatchdogConsecutiveLimit = Math.max(
+  2,
+  Math.round(Number(process.env.SERVER_COMMAND_CPU_WATCHDOG_CONSECUTIVE_LIMIT?.trim() || '8')),
+);
+const cpuWatchdogCooldownMs = Math.max(
+  60_000,
+  Number(process.env.SERVER_COMMAND_CPU_WATCHDOG_COOLDOWN_MS?.trim() || '1200000'),
+);
+const STREAM_CAPTURE_LIMIT = 256 * 1024;
+const CODEX_HOME_RUNTIME_PATHS = [
+  'auth.json',
+  'config.toml',
+  'rules',
+  'skills',
+  'vendor_imports',
+  'models_cache.json',
+  'version.json',
+];
+const activeCodexExecutions = new Map();
+
+const commandDefinitions = {
+  test: {
+    label: 'TEST',
+    scriptPath: path.join(projectRoot, 'etc', 'commands', 'server-command', 'restart-test.sh'),
+    workingDirectory: projectRoot,
+    env: {
+      MAIN_PROJECT_ROOT: projectRoot,
+      SERVER_COMMAND_COMPOSE_FILE: path.join(projectRoot, 'docker-compose.yml'),
+      SERVER_COMMAND_SERVICE: process.env.SERVER_COMMAND_TEST_SERVICE?.trim() || 'app',
+      SERVER_COMMAND_CONTAINER_NAME: process.env.SERVER_COMMAND_TEST_CONTAINER_NAME?.trim() || 'ai-code-app-app-1',
+    },
+    restartStrategy: 'deferred',
+  },
+  rel: {
+    label: 'REL',
+    scriptPath: path.join(projectRoot, 'etc', 'commands', 'server-command', 'restart-rel.sh'),
+    workingDirectory: projectRoot,
+    env: {
+      MAIN_PROJECT_ROOT: projectRoot,
+      SERVER_COMMAND_COMPOSE_FILE: path.join(projectRoot, 'docker-compose.yml'),
+      SERVER_COMMAND_SERVICE: process.env.SERVER_COMMAND_REL_SERVICE?.trim() || 'release-app',
+    },
+    restartStrategy: 'deferred',
+  },
+  'work-server': {
+    label: 'WORK-SERVER',
+    scriptPath: path.join(projectRoot, 'etc', 'commands', 'server-command', 'restart-work-server.sh'),
+    workingDirectory: projectRoot,
+    env: {
+      REPO_ROOT: projectRoot,
+    },
+    restartStrategy: 'deferred',
+  },
+  'command-runner': {
+    label: 'COMMAND-RUNNER',
+    scriptPath: path.join(projectRoot, 'etc', 'commands', 'server-command', 'restart-server-command-runner.sh'),
+    workingDirectory: projectRoot,
+    env: {
+      PROJECT_ROOT: projectRoot,
+      SERVER_COMMAND_RUNNER_NODE_BIN:
+        process.env.SERVER_COMMAND_RUNNER_NODE_BIN?.trim() || 'node',
+      SERVER_COMMAND_RUNNER_HOST: process.env.SERVER_COMMAND_RUNNER_HOST?.trim() || '127.0.0.1',
+      SERVER_COMMAND_RUNNER_PORT: process.env.SERVER_COMMAND_RUNNER_PORT?.trim() || '3211',
+      SERVER_COMMAND_RUNNER_ACCESS_TOKEN: process.env.SERVER_COMMAND_RUNNER_ACCESS_TOKEN?.trim() || accessToken,
+    },
+    restartStrategy: 'deferred',
+  },
+};
+
+function normalizeRepoPathCandidate(value) {
+  const normalized = String(value ?? '').trim();
+  return normalized ? path.resolve(normalized) : '';
+}
+
+function translateWorkspacePathToHost(inputPath) {
+  const normalizedInput = normalizeRepoPathCandidate(inputPath);
+
+  if (!normalizedInput) {
+    return normalizedInput;
+  }
+
+  const replacements = [
+    ['/workspace/main-project', projectRoot],
+    ['/workspace/auto_codex/repo', projectRoot],
+  ];
+
+  for (const [workspacePrefix, hostPrefix] of replacements) {
+    if (normalizedInput === workspacePrefix) {
+      return hostPrefix;
+    }
+
+    if (normalizedInput.startsWith(`${workspacePrefix}${path.sep}`)) {
+      return path.join(hostPrefix, normalizedInput.slice(workspacePrefix.length + 1));
+    }
+  }
+
+  return normalizedInput;
+}
+
+const cpuWatchdogTargets = [
+  {
+    name: 'test-app',
+    containerName: 'ai-code-app-app-1',
+    restartMode: 'command',
+    restartKey: 'test',
+  },
+  {
+    name: 'release-app',
+    containerName: 'ai-code-app-release',
+    restartMode: 'command',
+    restartKey: 'rel',
+  },
+  {
+    name: 'prod-app',
+    containerName: 'ai-code-app-prod',
+    restartMode: 'docker',
+  },
+  {
+    name: 'work-server',
+    containerName: 'work-server',
+    restartMode: 'command',
+    restartKey: 'work-server',
+  },
+];
+
+const cpuWatchdogState = new Map(
+  cpuWatchdogTargets.map((target) => [
+    target.containerName,
+    {
+      lastCpuPercent: null,
+      breachCount: 0,
+      lastSampleAt: null,
+      lastRestartAt: null,
+      lastRestartReason: null,
+    },
+  ]),
+);
+let cpuWatchdogBusy = false;
+
+function trimOutput(value, maxLength = 400) {
+  const normalized = value.replace(/\s+/g, ' ').trim();
+  if (!normalized) {
+    return null;
+  }
+
+  return normalized.length > maxLength ? `${normalized.slice(0, maxLength - 3)}...` : normalized;
+}
+
+function sendJson(response, statusCode, payload) {
+  response.writeHead(statusCode, {
+    'content-type': 'application/json; charset=utf-8',
+    'cache-control': 'no-store',
+  });
+  response.end(JSON.stringify(payload));
+}
+
+async function trimRunnerLogIfNeeded() {
+  try {
+    const logStat = await stat(runnerLogFile);
+
+    if (!logStat.isFile() || logStat.size <= runnerLogMaxBytes) {
+      return;
+    }
+
+    const content = await readFile(runnerLogFile, 'utf8');
+    const trimmedContent = content.slice(-runnerLogTrimToBytes);
+    const boundaryIndex = trimmedContent.indexOf('\n');
+    const nextContent = boundaryIndex >= 0 ? trimmedContent.slice(boundaryIndex + 1) : trimmedContent;
+
+    await writeFile(runnerLogFile, `[log-trimmed ${new Date().toISOString()}]\n${nextContent}`, 'utf8');
+  } catch {
+    // ignore log trim failures so the runner itself keeps serving requests
+  }
+}
+
+async function writeHeartbeat() {
+  await mkdir(path.dirname(heartbeatFile), { recursive: true });
+  await writeFile(
+    heartbeatFile,
+    JSON.stringify(
+      {
+        ok: true,
+        service: 'server-command-runner',
+        pid: process.pid,
+        host,
+        port,
+        cwd: projectRoot,
+        startedAt,
+        updatedAt: new Date().toISOString(),
+        cpuWatchdog: {
+          enabled: cpuWatchdogEnabled,
+          intervalMs: cpuWatchdogIntervalMs,
+          thresholdPercent: cpuWatchdogThresholdPercent,
+          consecutiveLimit: cpuWatchdogConsecutiveLimit,
+          cooldownMs: cpuWatchdogCooldownMs,
+          targets: cpuWatchdogTargets.map((target) => {
+            const state = cpuWatchdogState.get(target.containerName);
+            return {
+              name: target.name,
+              containerName: target.containerName,
+              restartMode: target.restartMode,
+              lastCpuPercent: state?.lastCpuPercent ?? null,
+              breachCount: state?.breachCount ?? 0,
+              lastSampleAt: state?.lastSampleAt ?? null,
+              lastRestartAt: state?.lastRestartAt ?? null,
+              lastRestartReason: state?.lastRestartReason ?? null,
+            };
+          }),
+        },
+      },
+      null,
+      2,
+    ),
+    'utf8',
+  );
+}
+
+function parseCpuPercentage(value) {
+  const numeric = Number(String(value ?? '').replace('%', '').trim());
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+async function restartContainerByDocker(containerName) {
+  await execFileAsync('docker', ['restart', containerName], {
+    cwd: projectRoot,
+    timeout: 30_000,
+    maxBuffer: 1024 * 1024,
+  });
+}
+
+async function sampleCpuWatchdog() {
+  if (!cpuWatchdogEnabled || cpuWatchdogBusy || cpuWatchdogTargets.length === 0) {
+    return;
+  }
+
+  cpuWatchdogBusy = true;
+
+  try {
+    const { stdout } = await execFileAsync(
+      'docker',
+      [
+        'stats',
+        '--no-stream',
+        '--format',
+        '{{json .}}',
+        ...cpuWatchdogTargets.map((target) => target.containerName),
+      ],
+      {
+        cwd: projectRoot,
+        timeout: 15_000,
+        maxBuffer: 1024 * 1024,
+      },
+    );
+    const now = new Date().toISOString();
+    const sampledContainers = new Set();
+
+    for (const line of stdout.split('\n')) {
+      const trimmedLine = line.trim();
+
+      if (!trimmedLine) {
+        continue;
+      }
+
+      let parsed;
+
+      try {
+        parsed = JSON.parse(trimmedLine);
+      } catch {
+        continue;
+      }
+
+      const containerName = String(parsed.Name ?? '').trim();
+      const cpuPercent = parseCpuPercentage(parsed.CPUPerc);
+      const target = cpuWatchdogTargets.find((entry) => entry.containerName === containerName);
+      const state = cpuWatchdogState.get(containerName);
+
+      if (!target || !state) {
+        continue;
+      }
+
+      sampledContainers.add(containerName);
+      state.lastCpuPercent = cpuPercent;
+      state.lastSampleAt = now;
+      state.breachCount = cpuPercent != null && cpuPercent >= cpuWatchdogThresholdPercent ? state.breachCount + 1 : 0;
+
+      const cooldownPassed =
+        !state.lastRestartAt || Date.now() - new Date(state.lastRestartAt).getTime() >= cpuWatchdogCooldownMs;
+
+      if (state.breachCount < cpuWatchdogConsecutiveLimit || !cooldownPassed) {
+        continue;
+      }
+
+      const restartReason = `cpu ${cpuPercent?.toFixed(1) ?? '?'}% sustained for ${
+        state.breachCount
+      } samples`;
+
+      process.stdout.write(
+        `[cpu-watchdog] restarting ${target.containerName} because ${restartReason} (threshold ${cpuWatchdogThresholdPercent}%)\n`,
+      );
+
+      if (target.restartMode === 'command' && target.restartKey) {
+        await runRestartCommand(target.restartKey);
+      } else {
+        await restartContainerByDocker(target.containerName);
+      }
+
+      state.breachCount = 0;
+      state.lastRestartAt = new Date().toISOString();
+      state.lastRestartReason = restartReason;
+      await writeHeartbeat().catch(() => {
+        // noop
+      });
+    }
+
+    for (const target of cpuWatchdogTargets) {
+      if (sampledContainers.has(target.containerName)) {
+        continue;
+      }
+
+      const state = cpuWatchdogState.get(target.containerName);
+
+      if (!state) {
+        continue;
+      }
+
+      state.lastCpuPercent = null;
+      state.lastSampleAt = now;
+      state.breachCount = 0;
+    }
+  } catch (error) {
+    process.stdout.write(
+      `[cpu-watchdog] sample failed: ${error instanceof Error ? error.message : String(error)}\n`,
+    );
+  } finally {
+    cpuWatchdogBusy = false;
+  }
+}
+
+void trimRunnerLogIfNeeded();
+setInterval(() => {
+  void trimRunnerLogIfNeeded();
+}, runnerLogTrimIntervalMs).unref();
+
+function sendJsonLine(response, payload) {
+  response.write(`${JSON.stringify(payload)}\n`);
+}
+
+function readRequestBody(request, maxBytes = 4 * 1024 * 1024) {
+  return new Promise((resolve, reject) => {
+    let total = 0;
+    const chunks = [];
+
+    request.on('data', (chunk) => {
+      total += chunk.length;
+
+      if (total > maxBytes) {
+        reject(new Error('요청 본문이 너무 큽니다.'));
+        request.destroy();
+        return;
+      }
+
+      chunks.push(chunk);
+    });
+
+    request.on('end', () => {
+      resolve(Buffer.concat(chunks).toString('utf8'));
+    });
+
+    request.on('error', reject);
+  });
+}
+
+function summarizeCodexOutput(output) {
+  const normalized = String(output ?? '').trim();
+
+  if (!normalized) {
+    return 'Codex 실행 결과가 비어 있습니다.';
+  }
+
+  return normalized
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter(Boolean)
+    .slice(-12)
+    .join('\n');
+}
+
+function summarizeCommand(command, limit = 180) {
+  const normalized = String(command ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.length > limit ? `${normalized.slice(0, limit - 1).trimEnd()}...` : normalized;
+}
+
+function summarizeCommandOutput(output, maxLines = 3, maxLength = 220) {
+  const lines = String(output ?? '')
+    .replace(/\r/g, '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  if (lines.length === 0) {
+    return '';
+  }
+
+  const joined = lines.slice(0, maxLines).join(' / ');
+  return joined.length > maxLength ? `${joined.slice(0, maxLength - 1).trimEnd()}...` : joined;
+}
+
+function inferCommandReason(command) {
+  const normalized = command.toLowerCase();
+
+  if (normalized.includes('rg ') || normalized.includes('ripgrep')) {
+    return '관련 파일이나 텍스트를 빠르게 찾기 위해 검색했습니다.';
+  }
+
+  if (normalized.includes('sed -n') || normalized.includes('cat ') || normalized.includes('less ')) {
+    return '해당 파일 내용을 직접 읽어 문맥을 확인했습니다.';
+  }
+
+  if (normalized.includes('ls ') || normalized === 'ls' || normalized.includes('rg --files')) {
+    return '디렉터리 구조와 대상 파일 위치를 확인했습니다.';
+  }
+
+  if (normalized.includes('git status')) {
+    return '작업 트리 상태와 변경 범위를 점검했습니다.';
+  }
+
+  if (normalized.includes('tsc ') || normalized.includes('npm test') || normalized.includes('node --test')) {
+    return '수정 후 타입이나 동작 검증을 진행했습니다.';
+  }
+
+  if (normalized.includes('curl ') || normalized.includes('fetch')) {
+    return '실제 응답이나 연결 상태를 확인했습니다.';
+  }
+
+  return '현재 요청을 해결하기 위한 다음 단계를 확인했습니다.';
+}
+
+function isIgnorableCodexDiagnosticLine(line) {
+  const normalized = String(line ?? '').trim();
+
+  if (!normalized) {
+    return true;
+  }
+
+  return (
+    /^\d{4}-\d{2}-\d{2}T\S+\s+WARN\b/.test(normalized) ||
+    normalized.includes('ignoring interface.defaultPrompt') ||
+    normalized.includes('failed to open state db') ||
+    normalized.includes('state db discrepancy') ||
+    normalized.includes('Failed to kill MCP process group') ||
+    normalized.includes('Failed to delete shell snapshot') ||
+    normalized.includes('failed to unwatch ')
+  );
+}
+
+function collectCodexTextFragments(value) {
+  if (typeof value === 'string') {
+    const normalized = value.trim();
+    return normalized ? [normalized] : [];
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => collectCodexTextFragments(item));
+  }
+
+  if (!value || typeof value !== 'object') {
+    return [];
+  }
+
+  const record = value;
+  const directTextKeys = ['text', 'delta', 'output_text', 'content', 'message'];
+
+  for (const key of directTextKeys) {
+    const fragments = collectCodexTextFragments(record[key]);
+
+    if (fragments.length > 0) {
+      return fragments;
+    }
+  }
+
+  if (typeof record.type === 'string' && record.type.includes('output_text')) {
+    const fragments = collectCodexTextFragments(record.text ?? record.delta);
+
+    if (fragments.length > 0) {
+      return fragments;
+    }
+  }
+
+  return Object.values(record).flatMap((item) => collectCodexTextFragments(item));
+}
+
+function extractCodexStreamText(parsed) {
+  const type = typeof parsed.type === 'string' ? parsed.type : '';
+
+  if (type === 'item.completed') {
+    return {
+      completedText: collectCodexTextFragments(parsed.item).join(''),
+      deltaText: '',
+    };
+  }
+
+  if (type === 'item.delta' || type === 'response.output_text.delta') {
+    return {
+      completedText: '',
+      deltaText:
+        type === 'response.output_text.delta'
+          ? collectCodexTextFragments(parsed.delta ?? parsed.text).join('')
+          : collectCodexTextFragments(parsed.delta).join(''),
+    };
+  }
+
+  if (type === 'response.completed') {
+    return {
+      completedText: collectCodexTextFragments(parsed.response).join(''),
+      deltaText: '',
+    };
+  }
+
+  return {
+    completedText: '',
+    deltaText: '',
+  };
+}
+
+function extractCodexActivityLog(parsed) {
+  const type = typeof parsed.type === 'string' ? parsed.type : '';
+  const item = parsed.item && typeof parsed.item === 'object' ? parsed.item : null;
+  const itemType = typeof item?.type === 'string' ? item.type : '';
+
+  if (!item || itemType !== 'command_execution') {
+    return '';
+  }
+
+  const command = summarizeCommand(typeof item.command === 'string' ? item.command : '');
+
+  if (!command) {
+    return '';
+  }
+
+  const reason = inferCommandReason(command);
+
+  if (type === 'item.started') {
+    return `# 이유: ${reason}\n$ ${command}`;
+  }
+
+  if (type === 'item.completed') {
+    const exitCode = typeof item.exit_code === 'number' && Number.isFinite(item.exit_code) ? Math.round(item.exit_code) : null;
+    const outputSummary = summarizeCommandOutput(typeof item.aggregated_output === 'string' ? item.aggregated_output : '');
+    const statusLabel = exitCode === null ? '# 결과: 완료' : exitCode === 0 ? '# 결과: 완료(0)' : `# 결과: 종료(${exitCode})`;
+
+    return outputSummary ? `${statusLabel}\n# 출력: ${outputSummary}` : statusLabel;
+  }
+
+  return '';
+}
+
+async function prepareWritableCodexHome(tempDir) {
+  const writableCodexHome = path.join(tempDir, '.codex');
+  const sourceCodexHome =
+    process.env.CODEX_HOME_TEMPLATE?.trim() ||
+    process.env.CODEX_HOME?.trim() ||
+    path.join(process.env.HOME ?? '/root', '.codex');
+
+  await mkdir(writableCodexHome, { recursive: true });
+
+  for (const relativePath of CODEX_HOME_RUNTIME_PATHS) {
+    const sourcePath = path.join(sourceCodexHome, relativePath);
+    const targetPath = path.join(writableCodexHome, relativePath);
+
+    try {
+      await access(sourcePath);
+    } catch {
+      continue;
+    }
+
+    await mkdir(path.dirname(targetPath), { recursive: true });
+    await cp(sourcePath, targetPath, { recursive: true, force: true });
+  }
+
+  return writableCodexHome;
+}
+
+async function validateCodexExecutionRuntime(repoPath, codexBin) {
+  const issues = [];
+
+  try {
+    const repoStat = await stat(repoPath);
+
+    if (!repoStat.isDirectory()) {
+      issues.push(`repoPath 경로가 디렉터리가 아닙니다: ${repoPath}`);
+    }
+  } catch {
+    issues.push(`repoPath 경로를 찾지 못했습니다: ${repoPath}`);
+  }
+
+  const trimmedCodexBin = String(codexBin ?? '').trim();
+  const pathCandidates =
+    trimmedCodexBin && !trimmedCodexBin.includes(path.sep)
+      ? (process.env.PATH ?? '')
+          .split(path.delimiter)
+          .map((entry) => entry.trim())
+          .filter(Boolean)
+          .map((entry) => path.join(entry, trimmedCodexBin))
+      : [trimmedCodexBin];
+
+  let codexResolved = false;
+
+  for (const candidate of pathCandidates) {
+    try {
+      await access(candidate);
+      codexResolved = true;
+      break;
+    } catch {
+      // try next candidate
+    }
+  }
+
+  if (!codexResolved) {
+    issues.push(`Codex 실행 파일을 찾지 못했습니다: ${codexBin}`);
+  }
+
+  if (issues.length > 0) {
+    throw new Error(issues.join(' / '));
+  }
+}
+
+async function runCodexLiveExecution(payload, response) {
+  const requestId = String(payload?.requestId ?? '').trim();
+  const sessionId = String(payload?.sessionId ?? '').trim();
+  const repoPath = translateWorkspacePathToHost(String(payload?.repoPath ?? '').trim() || projectRoot);
+  const prompt = String(payload?.prompt ?? '');
+  const resourceDir = translateWorkspacePathToHost(
+    String(payload?.resourceDir ?? path.join(repoPath, 'public', '.codex_chat', sessionId, 'resource')),
+  );
+  const uploadDir = translateWorkspacePathToHost(
+    String(payload?.uploadDir ?? path.join(resourceDir, 'uploads')),
+  );
+  const codexBin = process.env.SERVER_COMMAND_RUNNER_CODEX_BIN?.trim() || process.env.PLAN_CODEX_BIN?.trim() || 'codex';
+
+  if (!requestId || !sessionId || !prompt.trim()) {
+    sendJson(response, 400, {
+      message: 'requestId, sessionId, prompt는 필수입니다.',
+    });
+    return;
+  }
+
+  await validateCodexExecutionRuntime(repoPath, codexBin);
+  await mkdir(resourceDir, { recursive: true });
+  await mkdir(uploadDir, { recursive: true });
+
+  const tempDir = await mkdtemp(path.join(tmpdir(), 'command-runner-codex-'));
+  const writableCodexHome = await prepareWritableCodexHome(tempDir);
+  let stdoutTail = '';
+  let stderrTail = '';
+  let jsonLineBuffer = '';
+  let completedText = '';
+  let responseClosed = false;
+
+  response.writeHead(200, {
+    'content-type': 'application/x-ndjson; charset=utf-8',
+    'cache-control': 'no-store',
+  });
+
+  const child = spawn(
+    codexBin,
+    ['exec', '--json', '--dangerously-bypass-approvals-and-sandbox', '-C', repoPath, '-'],
+    {
+      cwd: repoPath,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      env: {
+        ...process.env,
+        CODEX_HOME: writableCodexHome,
+        CODEX_LIVE_CHAT_SESSION_ID: sessionId,
+        CODEX_LIVE_CHAT_RESOURCE_DIR: resourceDir,
+        CODEX_LIVE_CHAT_UPLOAD_DIR: uploadDir,
+      },
+    },
+  );
+
+  activeCodexExecutions.set(requestId, {
+    child,
+    tempDir,
+  });
+  sendJsonLine(response, {
+    type: 'started',
+    pid: child.pid ?? null,
+  });
+
+  const cleanup = async () => {
+    activeCodexExecutions.delete(requestId);
+    await rm(tempDir, { recursive: true, force: true }).catch(() => undefined);
+  };
+
+  const handleCodexJsonLine = (line) => {
+    let parsed;
+
+    try {
+      parsed = JSON.parse(line);
+    } catch {
+      return false;
+    }
+
+    const activityLog = extractCodexActivityLog(parsed);
+
+    if (activityLog) {
+      sendJsonLine(response, {
+        type: 'activity',
+        line: activityLog,
+      });
+    }
+
+    const { completedText: nextCompletedText, deltaText } = extractCodexStreamText(parsed);
+
+    if (nextCompletedText) {
+      completedText = nextCompletedText;
+      sendJsonLine(response, {
+        type: 'completed',
+        text: nextCompletedText,
+      });
+      return true;
+    }
+
+    if (deltaText) {
+      sendJsonLine(response, {
+        type: 'delta',
+        text: deltaText,
+      });
+      return true;
+    }
+
+    return false;
+  };
+
+  response.on('close', () => {
+    responseClosed = true;
+  });
+
+  child.stdout?.on('data', (chunk) => {
+    const text = String(chunk);
+    stdoutTail = (stdoutTail + text).slice(-STREAM_CAPTURE_LIMIT);
+    jsonLineBuffer += text;
+    const lines = jsonLineBuffer.split('\n');
+    jsonLineBuffer = lines.pop() ?? '';
+
+    for (const rawLine of lines) {
+      const line = rawLine.trim();
+
+      if (!line) {
+        continue;
+      }
+
+      if (handleCodexJsonLine(line)) {
+        continue;
+      }
+
+      if (!line.startsWith('{') && !isIgnorableCodexDiagnosticLine(line)) {
+        sendJsonLine(response, {
+          type: 'stdout',
+          line,
+        });
+      }
+    }
+  });
+
+  child.stderr?.on('data', (chunk) => {
+    const text = String(chunk);
+    stderrTail = (stderrTail + text).slice(-STREAM_CAPTURE_LIMIT);
+    text
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .forEach((line) => {
+        if (isIgnorableCodexDiagnosticLine(line)) {
+          return;
+        }
+
+        sendJsonLine(response, {
+          type: 'stderr',
+          line,
+        });
+      });
+  });
+
+  child.on('error', async (error) => {
+    if (!responseClosed) {
+      sendJsonLine(response, {
+        type: 'error',
+        message: error instanceof Error ? error.message : String(error),
+      });
+      response.end();
+    }
+
+    await cleanup();
+  });
+
+  child.on('close', async (code) => {
+    const trailingLine = jsonLineBuffer.trim();
+    if (trailingLine) {
+      handleCodexJsonLine(trailingLine);
+    }
+
+    if (!responseClosed) {
+      if (code !== 0) {
+        sendJsonLine(response, {
+          type: 'error',
+          message: summarizeCodexOutput(`${stderrTail}\n${completedText}\n${stdoutTail}`),
+        });
+      }
+
+      response.end();
+    }
+
+    await cleanup();
+  });
+
+  child.stdin?.end(prompt);
+}
+
+function isAuthorized(request) {
+  const token = String(request.headers['x-access-token'] ?? '').trim();
+  return token.length > 0 && token === accessToken;
+}
+
+async function runRestartCommand(key) {
+  const definition = commandDefinitions[key];
+  if (!definition) {
+    return {
+      statusCode: 404,
+      payload: {
+        message: '지원하지 않는 서버입니다.',
+      },
+    };
+  }
+
+  if (definition.restartStrategy === 'deferred') {
+    await new Promise((resolve, reject) => {
+      const child = spawn(
+        'sh',
+        ['-c', `sleep 1 && exec sh "${definition.scriptPath}" >/tmp/${key}-restart.log 2>&1`],
+        {
+          cwd: definition.workingDirectory,
+          detached: true,
+          stdio: 'ignore',
+          env: {
+            ...process.env,
+            ...definition.env,
+          },
+        },
+      );
+
+      child.once('error', reject);
+      child.once('spawn', () => {
+        child.unref();
+        resolve();
+      });
+    });
+
+    return {
+      statusCode: 202,
+      payload: {
+        ok: true,
+        restartState: 'accepted',
+        commandOutput: `${definition.label} 재기동 요청을 접수했습니다. 잠시 후 상태를 다시 확인해 주세요.`,
+      },
+    };
+  }
+
+  try {
+    const commandResult = await execFileAsync('sh', [definition.scriptPath], {
+      cwd: definition.workingDirectory,
+      timeout: 30000,
+      maxBuffer: 1024 * 1024,
+      env: {
+        ...process.env,
+        ...definition.env,
+      },
+    });
+
+    return {
+      statusCode: 200,
+      payload: {
+        ok: true,
+        restartState: 'completed',
+        commandOutput: trimOutput([commandResult.stdout, commandResult.stderr].filter(Boolean).join('\n')),
+      },
+    };
+  } catch (error) {
+    const failure = error instanceof Error ? error : new Error(String(error));
+    const detail = trimOutput(
+      [
+        failure instanceof Error && 'stderr' in failure ? String(failure.stderr ?? '') : '',
+        failure instanceof Error && 'stdout' in failure ? String(failure.stdout ?? '') : '',
+        failure.message,
+      ]
+        .filter(Boolean)
+        .join('\n'),
+    );
+    const code =
+      failure instanceof Error && 'code' in failure && (typeof failure.code === 'number' || typeof failure.code === 'string')
+        ? String(failure.code)
+        : null;
+
+    return {
+      statusCode: 500,
+      payload: {
+        message: `${definition.label} 재기동에 실패했습니다.${code ? ` exit:${code}` : ''}${detail ? ` ${detail}` : ''}`,
+      },
+    };
+  }
+}
+
+const server = createServer(async (request, response) => {
+  const requestUrl = new URL(request.url || '/', `http://${request.headers.host || `${host}:${port}`}`);
+
+  if (request.method === 'GET' && requestUrl.pathname === '/health') {
+    sendJson(response, 200, {
+      ok: true,
+      service: 'server-command-runner',
+      cwd: projectRoot,
+    });
+    return;
+  }
+
+  if (!isAuthorized(request)) {
+    sendJson(response, 403, {
+      message: '권한 토큰이 필요합니다.',
+    });
+    return;
+  }
+
+  const matchedPath = requestUrl.pathname.match(/^\/api\/server-commands\/([^/]+)\/actions\/restart$/);
+  if (request.method === 'POST' && matchedPath) {
+    const key = decodeURIComponent(matchedPath[1]);
+    const result = await runRestartCommand(key);
+    sendJson(response, result.statusCode, result.payload);
+    return;
+  }
+
+  if (request.method === 'POST' && requestUrl.pathname === '/api/codex-live/execute') {
+    try {
+      const rawBody = await readRequestBody(request);
+      const payload = rawBody ? JSON.parse(rawBody) : {};
+      await runCodexLiveExecution(payload, response);
+    } catch (error) {
+      sendJson(response, 500, {
+        message: error instanceof Error ? error.message : 'Codex 실행 요청을 처리하지 못했습니다.',
+      });
+    }
+    return;
+  }
+
+  const cancelMatch = requestUrl.pathname.match(/^\/api\/codex-live\/jobs\/([^/]+)\/cancel$/);
+  if (request.method === 'POST' && cancelMatch) {
+    const requestId = decodeURIComponent(cancelMatch[1]);
+    const activeExecution = activeCodexExecutions.get(requestId);
+
+    if (!activeExecution) {
+      sendJson(response, 404, {
+        cancelled: false,
+        message: '실행 중인 Codex 작업을 찾지 못했습니다.',
+      });
+      return;
+    }
+
+    try {
+      activeExecution.child.kill('SIGTERM');
+      setTimeout(() => {
+        const current = activeCodexExecutions.get(requestId);
+
+        if (current?.child && !current.child.killed) {
+          current.child.kill('SIGKILL');
+        }
+      }, 3000).unref?.();
+      sendJson(response, 200, {
+        cancelled: true,
+      });
+    } catch (error) {
+      sendJson(response, 500, {
+        cancelled: false,
+        message: error instanceof Error ? error.message : 'Codex 작업 취소에 실패했습니다.',
+      });
+    }
+    return;
+  }
+
+  sendJson(response, 404, {
+    message: '지원하지 않는 경로입니다.',
+  });
+});
+
+server.listen(port, host, () => {
+  void writeHeartbeat().catch(() => {
+    // noop
+  });
+  const heartbeatTimer = setInterval(() => {
+    void writeHeartbeat().catch(() => {
+      // noop
+    });
+  }, 10_000);
+  heartbeatTimer.unref();
+  if (cpuWatchdogEnabled) {
+    const cpuWatchdogTimer = setInterval(() => {
+      void sampleCpuWatchdog();
+    }, cpuWatchdogIntervalMs);
+    cpuWatchdogTimer.unref();
+    void sampleCpuWatchdog();
+  }
+  process.stdout.write(`server-command-runner listening on http://${host}:${port}\n`);
+});
diff --git a/scripts/serve-app-dist.mjs b/scripts/serve-app-dist.mjs
new file mode 100755
index 0000000..9c4a919
--- /dev/null
+++ b/scripts/serve-app-dist.mjs
@@ -0,0 +1,146 @@
+import { createReadStream, existsSync, statSync } from 'node:fs';
+import { extname, isAbsolute, join, normalize } from 'node:path';
+import { createServer } from 'node:http';
+import { Readable } from 'node:stream';
+
+const port = Number(process.env.PORT ?? 5173);
+const distDirName = process.env.APP_DIST_DIR ?? 'app-dist';
+const rootDir = normalize(isAbsolute(distDirName) ? distDirName : join(process.cwd(), distDirName));
+const workServerUrl = new URL(process.env.WORK_SERVER_URL ?? 'http://127.0.0.1:3100');
+const proxyPrefixes = ['/api', '/.codex_chat'];
+
+const mimeTypes = {
+  '.css': 'text/css; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.ico': 'image/x-icon',
+  '.js': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.txt': 'text/plain; charset=utf-8',
+  '.webmanifest': 'application/manifest+json; charset=utf-8',
+  '.woff2': 'font/woff2',
+};
+
+function looksLikeStaticAsset(requestedPath) {
+  const normalizedPath = requestedPath.split('?')[0] ?? requestedPath;
+  const extension = extname(normalizedPath);
+
+  return extension.length > 0;
+}
+
+function resolvePath(urlPath) {
+  const decodedPath = decodeURIComponent(urlPath.split('?')[0] || '/');
+  const requestedPath = decodedPath === '/' ? '/index.html' : decodedPath;
+  const absolutePath = normalize(join(rootDir, requestedPath));
+
+  if (!absolutePath.startsWith(rootDir)) {
+    return null;
+  }
+
+  if (existsSync(absolutePath) && statSync(absolutePath).isFile()) {
+    return absolutePath;
+  }
+
+  if (looksLikeStaticAsset(requestedPath)) {
+    return null;
+  }
+
+  return join(rootDir, 'index.html');
+}
+
+function shouldProxyRequest(urlPath = '/') {
+  return proxyPrefixes.some((prefix) => urlPath === prefix || urlPath.startsWith(`${prefix}/`));
+}
+
+function readRequestBody(request) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+
+    request.on('data', (chunk) => {
+      chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+    });
+    request.on('end', () => {
+      resolve(chunks.length > 0 ? Buffer.concat(chunks) : null);
+    });
+    request.on('error', reject);
+  });
+}
+
+async function proxyRequest(request, response) {
+  const targetUrl = new URL(request.url ?? '/', workServerUrl);
+  const headers = new Headers();
+
+  Object.entries(request.headers).forEach(([key, value]) => {
+    if (value == null || key.toLowerCase() === 'host' || key.toLowerCase() === 'connection') {
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      value.forEach((item) => headers.append(key, item));
+      return;
+    }
+
+    headers.set(key, value);
+  });
+
+  const method = request.method ?? 'GET';
+  const body = method === 'GET' || method === 'HEAD' ? undefined : await readRequestBody(request);
+
+  try {
+    const upstreamResponse = await fetch(targetUrl, {
+      method,
+      headers,
+      body,
+    });
+
+    response.writeHead(
+      upstreamResponse.status,
+      Object.fromEntries(upstreamResponse.headers.entries()),
+    );
+
+    if (!upstreamResponse.body) {
+      response.end();
+      return;
+    }
+
+    Readable.fromWeb(upstreamResponse.body).pipe(response);
+  } catch (error) {
+    response.writeHead(502, { 'Content-Type': 'application/json; charset=utf-8' });
+    response.end(
+      JSON.stringify({
+        message: error instanceof Error ? error.message : 'Failed to proxy request to work server.',
+      }),
+    );
+  }
+}
+
+const server = createServer(async (request, response) => {
+  if (shouldProxyRequest(request.url ?? '/')) {
+    await proxyRequest(request, response);
+    return;
+  }
+
+  const resolvedPath = resolvePath(request.url ?? '/');
+
+  if (!resolvedPath || !existsSync(resolvedPath)) {
+    response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+    response.end('Not Found');
+    return;
+  }
+
+  const extension = extname(resolvedPath);
+  const contentType = mimeTypes[extension] ?? 'application/octet-stream';
+
+  response.writeHead(200, {
+    'Content-Type': contentType,
+    'Cache-Control': extension === '.html' ? 'no-cache' : 'public, max-age=31536000, immutable',
+  });
+
+  createReadStream(resolvedPath).pipe(response);
+});
+
+server.listen(port, '0.0.0.0', () => {
+  console.log(`${distDirName} server listening on http://0.0.0.0:${port}`);
+});
diff --git a/scripts/worklog-capture-utils.mjs b/scripts/worklog-capture-utils.mjs
new file mode 100755
index 0000000..333c68c
--- /dev/null
+++ b/scripts/worklog-capture-utils.mjs
@@ -0,0 +1,176 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+
+const KST_DATE_FORMATTER = new Intl.DateTimeFormat('en-CA', {
+  timeZone: 'Asia/Seoul',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
+const WORKLOG_TEMPLATE = `# {date} 작업일지
+
+## 오늘 작업
+
+- 화면 캡처 추가 예정
+
+## 스크린샷
+
+- 저장소 기준 연결된 스크린샷 없음
+
+## 소스
+
+### 파일 1: \`path/to/file.tsx\`
+
+- 변경 목적과 핵심 수정 내용을 한 줄로 정리
+
+\`\`\`diff
+# 이 파일의 핵심 diff
+- before
++ after
+\`\`\`
+
+### 파일 2: \`path/to/another-file.ts\`
+
+- 필요 없으면 이 섹션은 삭제
+
+## 실행 커맨드
+
+\`\`\`bash
+\`\`\`
+
+## 변경 파일
+
+-
+`;
+
+const OBSOLETE_WORKLOG_SECTION_TITLES = new Set([
+  '커밋 목록',
+  '변경 요약',
+  '변경 통계',
+  '라인 통계',
+]);
+
+function normalizeLevelTwoHeading(section) {
+  const match = section.match(/^##\s+([^\n]+)$/m);
+
+  if (!match) {
+    return '';
+  }
+
+  return match[1]?.replace(/\s+\(.*\)\s*$/u, '').trim() ?? '';
+}
+
+function stripObsoleteWorklogSections(content) {
+  const sections = content.split(/\n(?=##\s+)/);
+  const preservedSections = sections.filter((section) => {
+    const normalizedHeading = normalizeLevelTwoHeading(section);
+    return !OBSOLETE_WORKLOG_SECTION_TITLES.has(normalizedHeading);
+  });
+
+  return `${preservedSections.join('\n\n').replace(/\n{3,}/g, '\n\n').trimEnd()}\n`;
+}
+
+export async function ensureDirectory(dirPath) {
+  await fs.mkdir(dirPath, { recursive: true });
+}
+
+export function getKstDate(date = new Date()) {
+  return KST_DATE_FORMATTER.format(date);
+}
+
+export async function ensureWorklogFile(worklogPath, captureDate) {
+  try {
+    await fs.access(worklogPath);
+    const content = await fs.readFile(worklogPath, 'utf8');
+    const normalizedContent = stripObsoleteWorklogSections(content);
+
+    if (normalizedContent !== content) {
+      await fs.writeFile(worklogPath, normalizedContent, 'utf8');
+    }
+  } catch {
+    await ensureDirectory(path.dirname(worklogPath));
+    const content = WORKLOG_TEMPLATE.replaceAll('{date}', captureDate);
+    await fs.writeFile(worklogPath, content, 'utf8');
+  }
+}
+
+export async function updateWorklogCaptureSection({
+  worklogPath,
+  captureDate,
+  imageAlt,
+  markdownImagePath,
+}) {
+  await ensureWorklogFile(worklogPath, captureDate);
+
+  const imageLine = `![${imageAlt}](${markdownImagePath})`;
+  let content = await fs.readFile(worklogPath, 'utf8');
+
+  if (content.includes(imageLine)) {
+    return;
+  }
+
+  if (!content.includes('## 스크린샷') && !content.includes('## 화면 캡처')) {
+    content += `\n\n## 스크린샷\n\n${imageLine}\n`;
+    await fs.writeFile(worklogPath, content, 'utf8');
+    return;
+  }
+
+  const sections = content.split(/\n(?=##\s+)/);
+  const screenshotSections = [];
+  const remainingSections = [];
+
+  for (const section of sections) {
+    if (/^##\s+(?:스크린샷|화면 캡처)\s*$/m.test(section)) {
+      screenshotSections.push(section);
+    } else {
+      remainingSections.push(section);
+    }
+  }
+
+  const mergedScreenshotBody = screenshotSections
+    .map((section) => section.replace(/^##\s+(?:스크린샷|화면 캡처)\s*$/m, '').trim())
+    .filter(Boolean)
+    .join('\n\n');
+
+  const screenshotLines = Array.from(
+    new Set(
+      [mergedScreenshotBody, imageLine]
+        .join('\n')
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line && line !== '- 저장소 기준 연결된 스크린샷 없음'),
+    ),
+  );
+
+  const mergedScreenshotSection = `## 스크린샷\n\n${screenshotLines.join('\n')}`.trim();
+  const sourceSectionIndex = remainingSections.findIndex((section) => /^##\s+소스\s*$/m.test(section));
+
+  if (sourceSectionIndex === -1) {
+    remainingSections.push(mergedScreenshotSection);
+  } else {
+    remainingSections.splice(Math.max(1, sourceSectionIndex), 0, mergedScreenshotSection);
+  }
+
+  content = remainingSections.join('\n\n').replace(/\n{3,}/g, '\n\n').trimEnd() + '\n';
+  await fs.writeFile(worklogPath, content, 'utf8');
+}
+
+export function resolveCapturePaths({
+  cwd = process.cwd(),
+  captureDate,
+  screenshotFileName,
+}) {
+  const screenshotDir = path.join(cwd, 'docs', 'assets', 'worklogs', captureDate);
+  const screenshotPath = path.join(screenshotDir, screenshotFileName);
+  const worklogPath = path.join(cwd, 'docs', 'worklogs', `${captureDate}.md`);
+  const markdownImagePath = `../assets/worklogs/${captureDate}/${screenshotFileName}`;
+
+  return {
+    screenshotDir,
+    screenshotPath,
+    worklogPath,
+    markdownImagePath,
+  };
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100755
index 0000000..4f9039b
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from 'react';
+import { getOrCreateClientId } from './app/main/clientIdentity';
+import { reportClientError } from './app/main/errorLogApi';
+import { AppShell } from './app/main';
+import { InitialLoadingOverlay } from './app/main/InitialLoadingOverlay';
+import { ReleasePendingMainModal } from './app/main/ReleasePendingMainModal';
+import { reportVisitorPageView } from './features/history/api';
+import { useAppStore } from './store';
+
+const CHUNK_LOAD_RETRY_SESSION_KEY = 'ai-code-app.chunk-load-retried';
+const INITIAL_LOADING_MIN_VISIBLE_MS = 450;
+
+function shouldRetryChunkLoad(errorMessage: string) {
+  return /Failed to fetch dynamically imported module|Importing a module script failed|Load failed|ChunkLoadError/i.test(
+    errorMessage,
+  );
+}
+
+function retryChunkLoadOnce(errorMessage: string) {
+  if (typeof window === 'undefined' || typeof sessionStorage === 'undefined') {
+    return false;
+  }
+
+  if (!shouldRetryChunkLoad(errorMessage)) {
+    return false;
+  }
+
+  if (sessionStorage.getItem(CHUNK_LOAD_RETRY_SESSION_KEY) === '1') {
+    return false;
+  }
+
+  sessionStorage.setItem(CHUNK_LOAD_RETRY_SESSION_KEY, '1');
+  window.location.reload();
+  return true;
+}
+
+function App() {
+  const { currentPage } = useAppStore();
+  const lastTrackedPageIdRef = useRef<string | null>(null);
+  const [showInitialLoading, setShowInitialLoading] = useState(true);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const handleError = (event: ErrorEvent) => {
+      const reportedError = event.error instanceof Error ? event.error : null;
+      const errorMessage = event.message || reportedError?.message || '클라이언트 오류가 발생했습니다.';
+
+      if (retryChunkLoadOnce(errorMessage)) {
+        return;
+      }
+
+      void reportClientError({
+        errorType: 'window.error',
+        errorName: reportedError?.name ?? null,
+        errorMessage,
+        stackTrace: reportedError?.stack ?? null,
+        requestPath: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+        context: {
+          filename: event.filename || null,
+          line: event.lineno || null,
+          column: event.colno || null,
+        },
+      });
+    };
+
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      const reportedError = reason instanceof Error ? reason : null;
+      const errorMessage =
+        reportedError?.message || (typeof reason === 'string' ? reason : '처리되지 않은 Promise 거절이 발생했습니다.');
+
+      if (retryChunkLoadOnce(errorMessage)) {
+        return;
+      }
+
+      void reportClientError({
+        errorType: 'unhandledrejection',
+        errorName: reportedError?.name ?? null,
+        errorMessage,
+        stackTrace: reportedError?.stack ?? null,
+        requestPath: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+        context: {
+          reasonType: typeof reason,
+        },
+      });
+    };
+
+    window.addEventListener('error', handleError);
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+
+    return () => {
+      window.removeEventListener('error', handleError);
+      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+    };
+  }, []);
+
+  useEffect(() => {
+    getOrCreateClientId();
+  }, []);
+
+  useEffect(() => {
+    const hideTimer = window.setTimeout(() => {
+      setShowInitialLoading(false);
+    }, INITIAL_LOADING_MIN_VISIBLE_MS);
+
+    return () => {
+      window.clearTimeout(hideTimer);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (lastTrackedPageIdRef.current === currentPage.id) {
+      return;
+    }
+
+    lastTrackedPageIdRef.current = currentPage.id;
+    void reportVisitorPageView(currentPage);
+  }, [currentPage]);
+
+  return (
+    <>
+      <AppShell />
+      <ReleasePendingMainModal />
+      {showInitialLoading ? <InitialLoadingOverlay /> : null}
+    </>
+  );
+}
+
+export default App;
diff --git a/src/app/main/AppShell.tsx b/src/app/main/AppShell.tsx
new file mode 100755
index 0000000..b30895b
--- /dev/null
+++ b/src/app/main/AppShell.tsx
@@ -0,0 +1,24 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { MainLayout } from './layout/MainLayout';
+import { ApisPage } from './pages/ApisPage';
+import { ChatPage } from './pages/ChatPage';
+import { DocsPage } from './pages/DocsPage';
+import { PlansPage } from './pages/PlansPage';
+import { buildDocsPath, buildPlansPath } from './routes';
+
+export function AppShell() {
+  return (
+    <Routes>
+      <Route path="/" element={<MainLayout />}>
+        <Route index element={<Navigate to={buildPlansPath('all')} replace />} />
+        <Route path="docs/:folder" element={<DocsPage />} />
+        <Route path="apis/:section" element={<ApisPage />} />
+        <Route path="plans/:section" element={<PlansPage />} />
+        <Route path="chat/:section" element={<ChatPage />} />
+        <Route path="play/layout" element={<Navigate to={buildPlansPath('all')} replace />} />
+        <Route path="play/layout-record/:layoutId" element={<Navigate to={buildPlansPath('all')} replace />} />
+        <Route path="*" element={<Navigate to={buildDocsPath()} replace />} />
+      </Route>
+    </Routes>
+  );
+}
diff --git a/src/app/main/ChatNotificationBridge.tsx b/src/app/main/ChatNotificationBridge.tsx
new file mode 100644
index 0000000..ec451d6
--- /dev/null
+++ b/src/app/main/ChatNotificationBridge.tsx
@@ -0,0 +1,447 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useAppStore } from '../../store';
+import { chatConnectionGateway, chatGateway } from './chatV2';
+import {
+  createNotificationMessage,
+  sendClientNotification,
+  shouldFallbackToLocalNotification,
+  showLocalClientNotification,
+} from './notificationApi';
+import {
+  getChatClientSessionId,
+  loadStoredChatMessages,
+  persistStoredChatMessages,
+} from './mainChatPanel';
+import type { ChatConversationSummary, ChatJobEvent, ChatMessage, ChatViewContext } from './mainChatPanel/types';
+
+const BACKGROUND_CONVERSATION_POLL_INTERVAL_MS = 15_000;
+
+function isStandaloneDisplayMode() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return (
+    window.matchMedia?.('(display-mode: standalone)').matches === true ||
+    (window.navigator as Navigator & { standalone?: boolean }).standalone === true
+  );
+}
+
+function createConversationPreviewText(text: string) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function createChatNotificationBody(text: string, fallback: string) {
+  const preview = createConversationPreviewText(text);
+  return preview || fallback;
+}
+
+function createChatQuestionAnswerNotificationBody(args: {
+  questionText?: string | null;
+  answerText?: string | null;
+  fallback: string;
+}) {
+  const questionPreview = createConversationPreviewText(args.questionText ?? '');
+  const answerPreview = createConversationPreviewText(args.answerText ?? '');
+
+  if (questionPreview && answerPreview) {
+    return `질문: ${questionPreview}\n답변: ${answerPreview}`;
+  }
+
+  if (answerPreview) {
+    return `답변: ${answerPreview}`;
+  }
+
+  if (questionPreview) {
+    return `질문: ${questionPreview}`;
+  }
+
+  return args.fallback;
+}
+
+function createChatQuestionOnlyNotificationPreview(questionText?: string | null, fallback?: string) {
+  const questionPreview = createConversationPreviewText(questionText ?? '');
+  return questionPreview ? `질문: ${questionPreview}` : fallback ?? '';
+}
+
+function normalizeNotificationDetailText(text?: string | null) {
+  const normalized = String(text ?? '').trim();
+  return normalized || undefined;
+}
+
+function buildChatNotificationLink(sessionId: string) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId || typeof window === 'undefined') {
+    return '';
+  }
+
+  return `${window.location.origin}/chat/live?sessionId=${encodeURIComponent(normalizedSessionId)}`;
+}
+
+async function tryShowLocalChatNotification(args: {
+  title: string;
+  body: string;
+  threadId: string;
+  data: Record<string, string>;
+}) {
+  await showLocalClientNotification({
+    title: args.title,
+    body: args.body,
+    threadId: args.threadId,
+    data: args.data,
+  }).catch(() => false);
+}
+
+function findQuestionText(messages: ChatMessage[], requestId?: string | null) {
+  if (!requestId) {
+    return '';
+  }
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index];
+
+    if (candidate.author !== 'user' || candidate.clientRequestId !== requestId) {
+      continue;
+    }
+
+    return candidate.text;
+  }
+
+  return '';
+}
+
+function findLatestCodexMessage(messages: ChatMessage[]) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index];
+
+    if (candidate.author === 'codex') {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
+export function ChatNotificationBridge() {
+  const { currentPage, focusedComponentId } = useAppStore();
+  const [sessionId] = useState(() => getChatClientSessionId());
+  const [messages, setMessages] = useState<ChatMessage[]>(() => loadStoredChatMessages(getChatClientSessionId()));
+  const [conversation, setConversation] = useState<ChatConversationSummary | null>(null);
+  const notifiedIncomingMessageKeysRef = useRef<string[]>([]);
+  const notifiedFailedJobKeysRef = useRef<string[]>([]);
+  const lastPolledCodexMessageIdBySessionRef = useRef<Record<string, number>>({});
+  const conversationPollInFlightRef = useRef(false);
+  const messagesRef = useRef(messages);
+  const currentContext: ChatViewContext = useMemo(
+    () => ({
+      pageId: currentPage.id,
+      pageTitle: currentPage.title,
+      topMenu: currentPage.topMenu,
+      focusedComponentId,
+      pageUrl: typeof window !== 'undefined' ? window.location.href : '',
+      isStandaloneMode: isStandaloneDisplayMode(),
+      pageVisibilityState:
+        typeof document !== 'undefined' && document.visibilityState === 'hidden' ? 'hidden' : 'visible',
+      chatTypeId: null,
+      chatTypeLabel: '',
+      chatTypeDescription: '',
+      chatTypeIsTemplate: false,
+    }),
+    [currentPage, focusedComponentId],
+  );
+
+  useEffect(() => {
+    messagesRef.current = messages;
+    persistStoredChatMessages(sessionId, messages);
+  }, [messages, sessionId]);
+
+  const createChatNotification = ({
+    targetSessionId,
+    conversationTitle,
+    title,
+    body,
+    previewText,
+    priority,
+    metadata,
+  }: {
+    targetSessionId: string;
+    conversationTitle?: string | null;
+    title: string;
+    body: string;
+    previewText?: string;
+    priority: 'normal' | 'high';
+    metadata?: Record<string, unknown>;
+  }) => {
+    const resolvedConversationTitle = conversationTitle || '현재 채팅방';
+    const linkUrl = buildChatNotificationLink(targetSessionId);
+    const notificationData = {
+      category: 'chat',
+      priority,
+      sessionId: targetSessionId,
+      conversationTitle: resolvedConversationTitle,
+      targetUrl: linkUrl,
+      linkUrl,
+      ...metadata,
+    };
+    const serializedNotificationData = Object.fromEntries(
+      Object.entries(notificationData).flatMap(([key, value]) => {
+        if (value == null) {
+          return [];
+        }
+
+        return [[key, String(value)]];
+      }),
+    );
+    const pushPayload = {
+      title,
+      body,
+      threadId: `chat:${targetSessionId}`,
+      data: serializedNotificationData,
+    };
+
+    return Promise.allSettled([
+      createNotificationMessage({
+        title,
+        body,
+        category: 'chat',
+        source: 'codex-live',
+        priority,
+        metadata: {
+          ...notificationData,
+          previewText,
+          linkLabel: '채팅 바로 열기',
+        },
+      }),
+      sendClientNotification(pushPayload),
+    ]).then(async ([storedResult, pushResult]) => {
+      if (pushResult.status === 'rejected') {
+        await tryShowLocalChatNotification(pushPayload);
+      } else if (shouldFallbackToLocalNotification(pushResult.value)) {
+        await tryShowLocalChatNotification(pushPayload);
+      }
+
+      if (storedResult.status === 'fulfilled') {
+        return storedResult.value;
+      }
+
+      if (pushResult.status === 'fulfilled') {
+        return pushResult.value;
+      }
+
+      throw storedResult.reason;
+    }).catch(() => undefined);
+  };
+
+  const handleIncomingMessageEvent = (incomingMessage: ChatMessage) => {
+    if (incomingMessage.author !== 'codex' || conversation?.notifyOffline !== true) {
+      return;
+    }
+
+    const notificationKey = `${sessionId}:${incomingMessage.id}:${incomingMessage.timestamp}`;
+
+    if (notifiedIncomingMessageKeysRef.current.includes(notificationKey)) {
+      return;
+    }
+
+    notifiedIncomingMessageKeysRef.current = [...notifiedIncomingMessageKeysRef.current, notificationKey].slice(-120);
+
+    const questionText = findQuestionText(messagesRef.current, incomingMessage.clientRequestId);
+
+    void createChatNotification({
+      targetSessionId: sessionId,
+      conversationTitle: conversation?.title,
+      title: 'Codex Live 새 메시지',
+      body: createChatQuestionAnswerNotificationBody({
+        questionText,
+        answerText: incomingMessage.text,
+        fallback: createChatNotificationBody(
+          incomingMessage.text,
+          `${conversation?.title || '현재 채팅방'} 채팅방에 새 응답이 도착했습니다.`,
+        ),
+      }),
+      previewText: createChatQuestionOnlyNotificationPreview(
+        questionText,
+        createChatNotificationBody(
+          incomingMessage.text,
+          `${conversation?.title || '현재 채팅방'} 채팅방에 새 응답이 도착했습니다.`,
+        ),
+      ),
+      priority: 'normal',
+      metadata: {
+        messageId: incomingMessage.id,
+        messageTimestamp: incomingMessage.timestamp,
+        questionText: normalizeNotificationDetailText(questionText),
+        answerText: normalizeNotificationDetailText(incomingMessage.text),
+      },
+    });
+  };
+
+  const handleJobEvent = (event: ChatJobEvent) => {
+    if (event.status !== 'failed' || conversation?.notifyOffline !== true) {
+      return;
+    }
+
+    const notificationKey = `${sessionId}:${event.requestId}:${event.status}`;
+
+    if (notifiedFailedJobKeysRef.current.includes(notificationKey)) {
+      return;
+    }
+
+    notifiedFailedJobKeysRef.current = [...notifiedFailedJobKeysRef.current, notificationKey].slice(-80);
+
+    const questionText = findQuestionText(messagesRef.current, event.requestId);
+
+    void createChatNotification({
+      targetSessionId: sessionId,
+      conversationTitle: conversation?.title,
+      title: 'Codex Live 요청 실패',
+      body: createChatQuestionAnswerNotificationBody({
+        questionText,
+        answerText: event.message,
+        fallback: `${conversation?.title || '현재 채팅방'} 채팅방의 요청 처리 중 오류가 발생했습니다.`,
+      }),
+      previewText: createChatQuestionOnlyNotificationPreview(
+        questionText,
+        `${conversation?.title || '현재 채팅방'} 채팅방의 요청 처리 중 오류가 발생했습니다.`,
+      ),
+      priority: 'high',
+      metadata: {
+        requestId: event.requestId,
+        status: event.status,
+        questionText: normalizeNotificationDetailText(questionText),
+        answerText: normalizeNotificationDetailText(event.message),
+      },
+    });
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const pollConversations = async (seedOnly: boolean) => {
+      if (conversationPollInFlightRef.current) {
+        return;
+      }
+
+      conversationPollInFlightRef.current = true;
+
+      try {
+        const items = await chatGateway.listConversations();
+
+        if (cancelled) {
+          return;
+        }
+
+        setConversation(items.find((item) => item.sessionId === sessionId) ?? null);
+
+        const enabledItems = items.filter((item) => item.notifyOffline === true);
+
+        if (enabledItems.length === 0) {
+          return;
+        }
+
+        const detailResults = await Promise.allSettled(
+          enabledItems.map(async (item) => ({
+            item,
+            detail: await chatGateway.getConversationDetail(item.sessionId),
+          })),
+        );
+
+        for (const result of detailResults) {
+          if (cancelled || result.status !== 'fulfilled') {
+            continue;
+          }
+
+          const { item, detail } = result.value;
+          const latestCodexMessage = findLatestCodexMessage(detail.messages);
+
+          if (!latestCodexMessage) {
+            continue;
+          }
+
+          const previousMessageId = lastPolledCodexMessageIdBySessionRef.current[item.sessionId];
+          lastPolledCodexMessageIdBySessionRef.current[item.sessionId] = latestCodexMessage.id;
+
+          if (seedOnly || previousMessageId == null || latestCodexMessage.id <= previousMessageId) {
+            continue;
+          }
+
+          const notificationKey = `${item.sessionId}:${latestCodexMessage.id}:${latestCodexMessage.timestamp}`;
+
+          if (notifiedIncomingMessageKeysRef.current.includes(notificationKey)) {
+            continue;
+          }
+
+          notifiedIncomingMessageKeysRef.current = [...notifiedIncomingMessageKeysRef.current, notificationKey].slice(-120);
+
+          const questionText = findQuestionText(detail.messages, latestCodexMessage.clientRequestId);
+
+          void createChatNotification({
+            targetSessionId: item.sessionId,
+            conversationTitle: item.title,
+            title: 'Codex Live 새 메시지',
+            body: createChatQuestionAnswerNotificationBody({
+              questionText,
+              answerText: latestCodexMessage.text,
+              fallback: createChatNotificationBody(
+                latestCodexMessage.text,
+                `${item.title || '현재 채팅방'} 채팅방에 새 응답이 도착했습니다.`,
+              ),
+            }),
+            previewText: createChatQuestionOnlyNotificationPreview(
+              questionText,
+              createChatNotificationBody(
+                latestCodexMessage.text,
+                `${item.title || '현재 채팅방'} 채팅방에 새 응답이 도착했습니다.`,
+              ),
+            ),
+            priority: 'normal',
+            metadata: {
+              messageId: latestCodexMessage.id,
+              messageTimestamp: latestCodexMessage.timestamp,
+              questionText: normalizeNotificationDetailText(questionText),
+              answerText: normalizeNotificationDetailText(latestCodexMessage.text),
+            },
+          });
+        }
+      } catch {
+        // Ignore polling errors and retry on the next cycle.
+      } finally {
+        conversationPollInFlightRef.current = false;
+      }
+    };
+
+    void pollConversations(true);
+
+    const intervalId = window.setInterval(() => {
+      void pollConversations(false);
+    }, BACKGROUND_CONVERSATION_POLL_INTERVAL_MS);
+
+    const handleResume = () => {
+      void pollConversations(false);
+    };
+
+    window.addEventListener('focus', handleResume);
+    window.addEventListener('pageshow', handleResume);
+    document.addEventListener('visibilitychange', handleResume);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(intervalId);
+      window.removeEventListener('focus', handleResume);
+      window.removeEventListener('pageshow', handleResume);
+      document.removeEventListener('visibilitychange', handleResume);
+    };
+  }, [sessionId]);
+
+  chatConnectionGateway.useConnection({
+    sessionId,
+    currentContext,
+    setMessages,
+    onMessageEvent: handleIncomingMessageEvent,
+    onJobEvent: handleJobEvent,
+  });
+
+  return null;
+}
diff --git a/src/app/main/ChatNotificationBridgeV2.tsx b/src/app/main/ChatNotificationBridgeV2.tsx
new file mode 100644
index 0000000..38dc248
--- /dev/null
+++ b/src/app/main/ChatNotificationBridgeV2.tsx
@@ -0,0 +1,258 @@
+// @ts-nocheck
+import { useEffect, useRef } from 'react';
+import {
+  createNotificationMessage,
+  sendClientNotification,
+  shouldFallbackToLocalNotification,
+  showLocalClientNotification,
+} from './notificationApi';
+import { chatGateway } from './chatV2';
+import type { ChatConversationRequest, ChatMessage } from './mainChatPanel/types';
+
+const BACKGROUND_CONVERSATION_POLL_INTERVAL_MS = 15_000;
+const MAX_NOTIFICATION_DETAIL_POLLS = 3;
+
+function createConversationPreviewText(text: string) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function createChatQuestionAnswerNotificationBody(args: {
+  questionText?: string | null;
+  answerText?: string | null;
+  fallback: string;
+}) {
+  const questionPreview = createConversationPreviewText(args.questionText ?? '');
+  const answerPreview = createConversationPreviewText(args.answerText ?? '');
+
+  if (questionPreview && answerPreview) {
+    return `질문: ${questionPreview}\n답변: ${answerPreview}`;
+  }
+
+  if (answerPreview) {
+    return `답변: ${answerPreview}`;
+  }
+
+  if (questionPreview) {
+    return `질문: ${questionPreview}`;
+  }
+
+  return args.fallback;
+}
+
+function createChatQuestionOnlyNotificationPreview(questionText?: string | null, fallback?: string) {
+  const questionPreview = createConversationPreviewText(questionText ?? '');
+  return questionPreview ? `질문: ${questionPreview}` : fallback ?? '';
+}
+
+function normalizeNotificationDetailText(text?: string | null) {
+  const normalized = String(text ?? '').trim();
+  return normalized || undefined;
+}
+
+function buildChatNotificationLink(sessionId: string) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId || typeof window === 'undefined') {
+    return '';
+  }
+
+  return `${window.location.origin}/chat/live?sessionId=${encodeURIComponent(normalizedSessionId)}`;
+}
+
+async function tryShowLocalChatNotification(args: {
+  title: string;
+  body: string;
+  threadId: string;
+  data: Record<string, string>;
+}) {
+  await showLocalClientNotification({
+    title: args.title,
+    body: args.body,
+    threadId: args.threadId,
+    data: args.data,
+  }).catch(() => false);
+}
+
+function findLatestCodexMessage(messages: ChatMessage[]) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index];
+
+    if (candidate.author === 'codex') {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
+function findQuestionText(messages: ChatMessage[], requestId?: string | null) {
+  if (!requestId) {
+    return '';
+  }
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index];
+
+    if (candidate.author !== 'user' || candidate.clientRequestId !== requestId) {
+      continue;
+    }
+
+    return candidate.text;
+  }
+
+  return '';
+}
+
+function findLatestFailedRequest(requests: ChatConversationRequest[]) {
+  for (let index = requests.length - 1; index >= 0; index -= 1) {
+    const candidate = requests[index];
+
+    if (candidate.status === 'failed') {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
+function shouldNotifyWhileAway() {
+  if (typeof document === 'undefined') {
+    return true;
+  }
+
+  if (document.visibilityState === 'hidden') {
+    return true;
+  }
+
+  if (typeof document.hasFocus === 'function') {
+    return !document.hasFocus();
+  }
+
+  return false;
+}
+
+function shouldPollConversationNotifications() {
+  if (typeof document === 'undefined') {
+    return true;
+  }
+
+  if (document.visibilityState === 'hidden') {
+    return true;
+  }
+
+  if (typeof document.hasFocus === 'function') {
+    return !document.hasFocus();
+  }
+
+  return false;
+}
+
+function getConversationActivityTime(item: { lastMessageAt?: string | null; updatedAt?: string | null }) {
+  const candidate = item.lastMessageAt || item.updatedAt || '';
+  const parsed = candidate ? Date.parse(candidate) : Number.NaN;
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+function selectNotificationPollingCandidates<
+  T extends {
+    notifyOffline: boolean;
+    hasUnreadResponse: boolean;
+    currentJobStatus: string | null;
+    currentRequestId: string | null;
+    lastMessageAt: string | null;
+    updatedAt: string;
+  },
+>(items: T[]) {
+  return items
+    .filter((item) => item.notifyOffline === true)
+    .filter((item) => item.hasUnreadResponse || item.currentJobStatus === 'started' || item.currentJobStatus === 'queued' || item.currentRequestId)
+    .sort((left, right) => getConversationActivityTime(right) - getConversationActivityTime(left))
+    .slice(0, MAX_NOTIFICATION_DETAIL_POLLS);
+}
+
+export function ChatNotificationBridgeV2() {
+  const notifiedFailedJobKeysRef = useRef<string[]>([]);
+  const lastPolledCodexMessageIdBySessionRef = useRef<Record<string, number>>({});
+  const lastFailedRequestKeyBySessionRef = useRef<Record<string, string>>({});
+
+  const createChatNotification = ({
+    targetSessionId,
+    conversationTitle,
+    title,
+    body,
+    previewText,
+    priority,
+    metadata,
+  }: {
+    targetSessionId: string;
+    conversationTitle?: string | null;
+    title: string;
+    body: string;
+    previewText?: string;
+    priority: 'normal' | 'high';
+    metadata?: Record<string, unknown>;
+  }) => {
+    const resolvedConversationTitle = conversationTitle || '현재 채팅방';
+    const linkUrl = buildChatNotificationLink(targetSessionId);
+    const notificationData = {
+      category: 'chat',
+      priority,
+      sessionId: targetSessionId,
+      conversationTitle: resolvedConversationTitle,
+      targetUrl: linkUrl,
+      linkUrl,
+      ...metadata,
+    };
+    const serializedNotificationData = Object.fromEntries(
+      Object.entries(notificationData).flatMap(([key, value]) => {
+        if (value == null) {
+          return [];
+        }
+
+        return [[key, String(value)]];
+      }),
+    );
+    const pushPayload = {
+      title,
+      body,
+      threadId: `chat:${targetSessionId}`,
+      data: serializedNotificationData,
+    };
+
+    return Promise.allSettled([
+      createNotificationMessage({
+        title,
+        body,
+        category: 'chat',
+        source: 'codex-live',
+        priority,
+        metadata: {
+          ...notificationData,
+          previewText,
+          linkLabel: '채팅 바로 열기',
+        },
+      }),
+      sendClientNotification(pushPayload),
+    ])
+      .then(async ([storedResult, pushResult]) => {
+        if (pushResult.status === 'rejected') {
+          await tryShowLocalChatNotification(pushPayload);
+        } else if (shouldFallbackToLocalNotification(pushResult.value)) {
+          await tryShowLocalChatNotification(pushPayload);
+        }
+
+        if (storedResult.status === 'fulfilled') {
+          return storedResult.value;
+        }
+
+        if (pushResult.status === 'fulfilled') {
+          return pushResult.value;
+        }
+
+        throw storedResult.reason;
+      })
+      .catch(() => undefined);
+  };
+  return null;
+}
diff --git a/src/app/main/ChatRuntimeBridge.tsx b/src/app/main/ChatRuntimeBridge.tsx
new file mode 100644
index 0000000..9bef611
--- /dev/null
+++ b/src/app/main/ChatRuntimeBridge.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useAppStore } from '../../store';
+import {
+  fetchChatRuntimeSnapshot,
+  getChatClientSessionId,
+  setSharedChatRuntimeSnapshot,
+  useChatConnection,
+} from './mainChatPanel';
+import type { ChatMessage, ChatViewContext } from './mainChatPanel/types';
+
+function isStandaloneDisplayMode() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return (
+    window.matchMedia?.('(display-mode: standalone)').matches === true ||
+    (window.navigator as Navigator & { standalone?: boolean }).standalone === true
+  );
+}
+
+export function ChatRuntimeBridge() {
+  const { currentPage, focusedComponentId } = useAppStore();
+  const [sessionId] = useState(() => getChatClientSessionId());
+  const [, setMessages] = useState<ChatMessage[]>([]);
+
+  const currentContext: ChatViewContext = useMemo(
+    () => ({
+      pageId: currentPage.id,
+      pageTitle: currentPage.title,
+      topMenu: currentPage.topMenu,
+      focusedComponentId,
+      pageUrl: typeof window !== 'undefined' ? window.location.href : '',
+      isStandaloneMode: isStandaloneDisplayMode(),
+      pageVisibilityState:
+        typeof document !== 'undefined' && document.visibilityState === 'hidden' ? 'hidden' : 'visible',
+      chatTypeId: null,
+      chatTypeLabel: '',
+      chatTypeDescription: '',
+      chatTypeIsTemplate: false,
+    }),
+    [currentPage, focusedComponentId],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void fetchChatRuntimeSnapshot()
+      .then((snapshot) => {
+        if (!cancelled) {
+          setSharedChatRuntimeSnapshot(snapshot);
+        }
+      })
+      .catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useChatConnection({
+    sessionId,
+    currentContext,
+    setMessages,
+  });
+
+  return null;
+}
diff --git a/src/app/main/ChatRuntimeBridgeV2.tsx b/src/app/main/ChatRuntimeBridgeV2.tsx
new file mode 100644
index 0000000..5dd2823
--- /dev/null
+++ b/src/app/main/ChatRuntimeBridgeV2.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useAppStore } from '../../store';
+import { getChatClientSessionId } from './mainChatPanel';
+import { chatConnectionGateway, chatGateway } from './chatV2';
+import type { ChatMessage, ChatViewContext } from './mainChatPanel/types';
+
+function isStandaloneDisplayMode() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return (
+    window.matchMedia?.('(display-mode: standalone)').matches === true ||
+    (window.navigator as Navigator & { standalone?: boolean }).standalone === true
+  );
+}
+
+export function ChatRuntimeBridgeV2() {
+  const { currentPage, focusedComponentId } = useAppStore();
+  const [sessionId] = useState(() => getChatClientSessionId());
+  const [, setMessages] = useState<ChatMessage[]>([]);
+
+  const currentContext: ChatViewContext = useMemo(
+    () => ({
+      pageId: currentPage.id,
+      pageTitle: currentPage.title,
+      topMenu: currentPage.topMenu,
+      focusedComponentId,
+      pageUrl: typeof window !== 'undefined' ? window.location.href : '',
+      isStandaloneMode: isStandaloneDisplayMode(),
+      pageVisibilityState:
+        typeof document !== 'undefined' && document.visibilityState === 'hidden' ? 'hidden' : 'visible',
+      chatTypeId: null,
+      chatTypeLabel: '',
+      chatTypeDescription: '',
+      chatTypeIsTemplate: false,
+    }),
+    [currentPage, focusedComponentId],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void chatGateway.fetchRuntimeSnapshot()
+      .then((snapshot) => {
+        if (!cancelled) {
+          chatConnectionGateway.setSharedRuntimeSnapshot(snapshot);
+        }
+      })
+      .catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  chatConnectionGateway.useConnection({
+    sessionId,
+    currentContext,
+    setMessages,
+  });
+
+  return null;
+}
diff --git a/src/app/main/ChatSourceChangesPage.tsx b/src/app/main/ChatSourceChangesPage.tsx
new file mode 100644
index 0000000..7a9643f
--- /dev/null
+++ b/src/app/main/ChatSourceChangesPage.tsx
@@ -0,0 +1,797 @@
+import { Card, Empty, Input, List, Select, Space, Spin, Tag, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { fetchPlanActionHistories, fetchPlanItems } from '../../features/planBoard/api';
+import { chatGateway } from './chatV2';
+import type { ChatMessage } from './mainChatPanel/types';
+import type { ChatConversationRequest } from './mainChatPanel/types';
+
+const { Paragraph, Text, Title } = Typography;
+
+type ChatSourceChangeEntry = {
+  id: string;
+  sessionId: string;
+  conversationTitle: string;
+  requestId: string;
+  requestTitle: string;
+  questionText: string;
+  answerText: string;
+  status: ChatConversationRequest['status'];
+  sourceChangedAt: string;
+  updatedAt: string;
+  featureTags: string[];
+  changedFiles: string[];
+  currentSourceFiles: string[];
+  diffBlocks: string[];
+  deploymentStatus: DeploymentFilterValue;
+  currentSourceStatus: CurrentSourceStatus;
+};
+
+type DeploymentFilterValue = 'all' | 'pre-deploy' | 'deployed';
+type CurrentSourceStatus = 'applied' | 'not-applied';
+type CurrentSourceFilterValue = 'all' | CurrentSourceStatus;
+
+const DEPLOYMENT_FILTER_OPTIONS: Array<{ label: string; value: DeploymentFilterValue }> = [
+  { label: '전체', value: 'all' },
+  { label: '배포 전', value: 'pre-deploy' },
+  { label: '배포됨', value: 'deployed' },
+];
+
+const CURRENT_SOURCE_FILTER_OPTIONS: Array<{ label: string; value: CurrentSourceFilterValue }> = [
+  { label: '전체', value: 'all' },
+  { label: '현재 소스 적용', value: 'applied' },
+  { label: '현재 소스 미적용', value: 'not-applied' },
+];
+
+const CURRENT_SOURCE_PREFIXES = ['src/', 'docs/', 'public/', 'scripts/', 'etc/'] as const;
+
+function formatDateTime(value: string | null | undefined) {
+  if (!value) {
+    return '미기록';
+  }
+
+  return new Date(value).toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' });
+}
+
+function createCompactText(value: string | null | undefined, limit = 88) {
+  const normalized = String(value ?? '').replace(/\s+/g, ' ').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  return normalized.length > limit ? `${normalized.slice(0, limit - 1)}…` : normalized;
+}
+
+function createRequestTitle(userText: string, fallback: string) {
+  const compact = createCompactText(userText, 72);
+  return compact || fallback;
+}
+
+function extractDiffBlocks(text: string) {
+  return Array.from(text.matchAll(/```diff[^\n]*\n([\s\S]*?)```/g))
+    .map((match) => match[1]?.trim() ?? '')
+    .filter(Boolean);
+}
+
+function hasSourceEvidenceText(text: string) {
+  const normalized = String(text ?? '').trim();
+
+  if (!normalized) {
+    return false;
+  }
+
+  return (
+    /```diff[^\n]*\n[\s\S]*?```/m.test(normalized) ||
+    /^(?:diff --git a\/[^\s]+ b\/[^\s]+|\+\+\+ b\/[^\s]+|--- a\/[^\s]+)$/m.test(normalized) ||
+    /\/workspace\/main-project\/[^\s)]+/.test(normalized) ||
+    /\/api\/chat\/resources\/[^\s)`]+/.test(normalized) ||
+    /\/?(?:public\/)?\.codex_chat\/[^\s)`]+\/resource\/[^\s)`]+/.test(normalized) ||
+    /\b(?:src|docs|etc|public|scripts)\/[A-Za-z0-9._\-\/]+(?:\.[A-Za-z0-9]+)?\b/.test(normalized)
+  );
+}
+
+function normalizeWorkspaceFilePath(value: string) {
+  const normalized = String(value ?? '')
+    .trim()
+    .replace(/\\/g, '/')
+    .replace(/^file:\/\//, '')
+    .replace(/[)>.,]+$/, '')
+    .replace(/:\d+(?::\d+)?$/, '');
+
+  if (!normalized) {
+    return '';
+  }
+
+  const resourceMarker = '/resource/';
+  const resourceIndex = normalized.lastIndexOf(resourceMarker);
+
+  if (resourceIndex >= 0) {
+    const innerPath = normalized.slice(resourceIndex + resourceMarker.length).replace(/^\/+/, '');
+    return innerPath;
+  }
+
+  const workspaceMarker = '/workspace/main-project/';
+  const workspaceIndex = normalized.lastIndexOf(workspaceMarker);
+
+  if (workspaceIndex >= 0) {
+    return normalized.slice(workspaceIndex + workspaceMarker.length);
+  }
+
+  const apiResourceMarker = '/api/chat/resources/';
+  const apiResourceIndex = normalized.lastIndexOf(apiResourceMarker);
+
+  if (apiResourceIndex >= 0) {
+    return normalized.slice(apiResourceIndex + apiResourceMarker.length).replace(/^\/+/, '');
+  }
+
+  return normalized.replace(/^\/+/, '').replace(/^\.\//, '');
+}
+
+function isCurrentSourcePath(path: string) {
+  return CURRENT_SOURCE_PREFIXES.some((prefix) => path.startsWith(prefix));
+}
+
+function extractCurrentSourceFiles(text: string) {
+  const textWithoutChatResourcePaths = text
+    .replace(/\/api\/chat\/resources\/[^\s)`]+/g, ' ')
+    .replace(/\/?(?:public\/)?\.codex_chat\/[^\s)`]+\/resource\/[^\s)`]+/g, ' ');
+
+  const diffPathMatches = Array.from(
+    text.matchAll(/^(?:diff --git a\/[^\s]+ b\/([^\s]+)|\+\+\+ b\/([^\s]+)|--- a\/([^\s]+))$/gm),
+  )
+    .flatMap((match) => [match[1], match[2], match[3]])
+    .filter((value): value is string => Boolean(value))
+    .map((item) => normalizeWorkspaceFilePath(item))
+    .filter((path) => path && isCurrentSourcePath(path));
+
+  const workspacePathMatches = [
+    ...(text.match(/\[[^\]]*]\((\/workspace\/main-project\/[^)\s]+)\)/g) ?? [])
+      .map((item) => item.replace(/^[^\(]*\(/, '').replace(/\)$/, '')),
+    ...(text.match(/\/workspace\/main-project\/[^\s)]+/g) ?? []),
+  ]
+    .map((item) => normalizeWorkspaceFilePath(item))
+    .filter((path) => path && isCurrentSourcePath(path));
+
+  const directRelativeMatches = (textWithoutChatResourcePaths.match(/\b(?:src|docs|etc|public|scripts)\/[A-Za-z0-9._\-\/]+(?:\.[A-Za-z0-9]+)?\b/g) ?? [])
+    .map((item) => normalizeWorkspaceFilePath(item))
+    .filter((path) => path && isCurrentSourcePath(path));
+
+  return Array.from(new Set([...diffPathMatches, ...workspacePathMatches, ...directRelativeMatches])).slice(0, 60);
+}
+
+function extractChangedFiles(text: string) {
+  const diffPathMatches = Array.from(
+    text.matchAll(/^(?:diff --git a\/[^\s]+ b\/([^\s]+)|\+\+\+ b\/([^\s]+)|--- a\/([^\s]+))$/gm),
+  )
+    .flatMap((match) => [match[1], match[2], match[3]])
+    .filter((value): value is string => Boolean(value));
+
+  const matches = [
+    ...(text.match(/\[[^\]]*]\((\/workspace\/main-project\/[^)\s]+)\)/g) ?? [])
+      .map((item) => item.replace(/^[^\(]*\(/, '').replace(/\)$/, '')),
+    ...(text.match(/\/workspace\/main-project\/[^\s)]+/g) ?? []),
+    ...(text.match(/\/api\/chat\/resources\/[^\s)`]+/g) ?? []),
+    ...(text.match(/\/?(?:public\/)?\.codex_chat\/[^\s)`]+\/resource\/[^\s)`]+/g) ?? []),
+    ...(text.match(/\b(?:src|docs|etc|public|scripts)\/[A-Za-z0-9._\-\/]+(?:\.[A-Za-z0-9]+)?\b/g) ?? []),
+    ...diffPathMatches,
+  ];
+
+  return Array.from(
+    new Set(
+      matches
+        .map((item) => normalizeWorkspaceFilePath(item))
+        .filter(Boolean),
+    ),
+  ).slice(0, 60);
+}
+
+function deriveFeatureTags(files: string[]) {
+  const tags = new Set<string>();
+
+  files.forEach((file) => {
+    const segments = file.split('/').filter(Boolean);
+
+    if (segments[0] === 'src' && segments[1] === 'features' && segments[2]) {
+      tags.add(`feature:${segments[2]}`);
+      return;
+    }
+
+    if (segments[0] === 'src' && segments[1] === 'components' && segments[2]) {
+      tags.add(`component:${segments[2]}`);
+      return;
+    }
+
+    if (segments[0] === 'src' && segments[1] === 'widgets' && segments[2]) {
+      tags.add(`widget:${segments[2]}`);
+      return;
+    }
+
+    if (segments[0] === 'docs' && segments[1]) {
+      tags.add(`docs:${segments[1]}`);
+      return;
+    }
+
+    if (segments[0]) {
+      tags.add(segments[0]);
+    }
+  });
+
+  return Array.from(tags);
+}
+
+function isMeaningfulSourceChangeMessage(text: string) {
+  const normalized = text.trim();
+
+  if (!normalized) {
+    return false;
+  }
+
+  if (normalized === '응답을 준비하고 있습니다...') {
+    return false;
+  }
+
+  return normalized.length >= 12 || hasSourceEvidenceText(normalized);
+}
+
+function getTimeValue(value: string | null | undefined) {
+  const parsed = new Date(value ?? '').getTime();
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function appendUniqueText(target: string[], value: string | null | undefined) {
+  const normalized = String(value ?? '').trim();
+
+  if (!normalized || target.includes(normalized)) {
+    return;
+  }
+
+  target.push(normalized);
+}
+
+function resolveDeploymentStatus(updatedAt: string, latestReleaseCompletedAt: string | null): DeploymentFilterValue {
+  if (!latestReleaseCompletedAt) {
+    return 'pre-deploy';
+  }
+
+  return getTimeValue(updatedAt) > getTimeValue(latestReleaseCompletedAt) ? 'pre-deploy' : 'deployed';
+}
+
+function isTestReleaseTarget(value: string | null | undefined) {
+  const normalized = String(value ?? '').trim().toLowerCase();
+
+  if (!normalized) {
+    return false;
+  }
+
+  return (
+    normalized === 'test' ||
+    normalized.includes('test.sm-home.cloud') ||
+    normalized.includes('/test') ||
+    normalized.startsWith('test-') ||
+    normalized.endsWith('-test') ||
+    normalized.includes(' test ')
+  );
+}
+
+function resolveSourceChangedAt(
+  request: ChatConversationRequest,
+  messages: ChatMessage[],
+  nextRequest: ChatConversationRequest | undefined,
+) {
+  const timestamps = collectRequestExplanationMessageTimestamps(request, messages, nextRequest);
+
+  return (
+    timestamps[0] ??
+    request.answeredAt ??
+    request.terminalAt ??
+    request.updatedAt ??
+    request.createdAt
+  );
+}
+
+function getDeploymentStatusLabel(value: DeploymentFilterValue) {
+  if (value === 'deployed') {
+    return 'test 배포됨';
+  }
+
+  if (value === 'pre-deploy') {
+    return 'test 배포 전';
+  }
+
+  return '전체';
+}
+
+function collectRequestExplanationTexts(
+  request: ChatConversationRequest,
+  messages: ChatMessage[],
+  nextRequest: ChatConversationRequest | undefined,
+) {
+  const texts: string[] = [];
+  appendUniqueText(texts, request.responseText);
+
+  if (request.responseMessageId != null) {
+    const matchedMessage = messages.find((message) => message.id === request.responseMessageId);
+
+    if (matchedMessage?.author === 'codex' && isMeaningfulSourceChangeMessage(String(matchedMessage.text ?? ''))) {
+      appendUniqueText(texts, matchedMessage.text);
+    }
+  }
+
+  const directMessageMatches = messages
+    .filter(
+      (message) =>
+        message.author === 'codex' &&
+        message.clientRequestId === request.requestId &&
+        isMeaningfulSourceChangeMessage(String(message.text ?? '')),
+    );
+  directMessageMatches.forEach((message) => {
+    appendUniqueText(texts, message.text);
+  });
+
+  const requestCreatedAt = getTimeValue(request.createdAt);
+  const nextRequestCreatedAt = getTimeValue(nextRequest?.createdAt);
+  const fallbackMessages = messages.filter((message) => {
+    if (message.author !== 'codex') {
+      return false;
+    }
+
+    const messageTimestamp = getTimeValue(message.timestamp);
+
+    if (requestCreatedAt > 0 && messageTimestamp > 0 && messageTimestamp < requestCreatedAt) {
+      return false;
+    }
+
+    if (nextRequestCreatedAt > 0 && messageTimestamp > 0 && messageTimestamp >= nextRequestCreatedAt) {
+      return false;
+    }
+
+    return isMeaningfulSourceChangeMessage(String(message.text ?? ''));
+  });
+
+  fallbackMessages
+    .filter((message) => message.clientRequestId === request.requestId || !message.clientRequestId)
+    .forEach((message) => {
+      appendUniqueText(texts, message.text);
+    });
+
+  appendUniqueText(texts, request.statusMessage);
+
+  return texts;
+}
+
+function collectRequestExplanationMessageTimestamps(
+  request: ChatConversationRequest,
+  messages: ChatMessage[],
+  nextRequest: ChatConversationRequest | undefined,
+) {
+  const timestamps: string[] = [];
+
+  if (request.responseMessageId != null) {
+    const matchedMessage = messages.find((message) => message.id === request.responseMessageId);
+
+    if (matchedMessage?.author === 'codex' && isMeaningfulSourceChangeMessage(String(matchedMessage.text ?? ''))) {
+      appendUniqueText(timestamps, matchedMessage.timestamp);
+    }
+  }
+
+  messages
+    .filter(
+      (message) =>
+        message.author === 'codex' &&
+        message.clientRequestId === request.requestId &&
+        isMeaningfulSourceChangeMessage(String(message.text ?? '')),
+    )
+    .forEach((message) => {
+      appendUniqueText(timestamps, message.timestamp);
+    });
+
+  const requestCreatedAt = getTimeValue(request.createdAt);
+  const nextRequestCreatedAt = getTimeValue(nextRequest?.createdAt);
+  messages
+    .filter((message) => {
+      if (message.author !== 'codex') {
+        return false;
+      }
+
+      const messageTimestamp = getTimeValue(message.timestamp);
+
+      if (requestCreatedAt > 0 && messageTimestamp > 0 && messageTimestamp < requestCreatedAt) {
+        return false;
+      }
+
+      if (nextRequestCreatedAt > 0 && messageTimestamp > 0 && messageTimestamp >= nextRequestCreatedAt) {
+        return false;
+      }
+
+      return isMeaningfulSourceChangeMessage(String(message.text ?? ''));
+    })
+    .filter((message) => message.clientRequestId === request.requestId || !message.clientRequestId)
+    .forEach((message) => {
+      appendUniqueText(timestamps, message.timestamp);
+    });
+
+  return timestamps.sort((left, right) => getTimeValue(left) - getTimeValue(right));
+}
+
+function resolveRequestExplanation(
+  request: ChatConversationRequest,
+  messages: ChatMessage[],
+  nextRequest: ChatConversationRequest | undefined,
+) {
+  return collectRequestExplanationTexts(request, messages, nextRequest).join('\n\n').trim();
+}
+
+function resolveRequestQuestion(request: ChatConversationRequest, messages: ChatMessage[]) {
+  const requestUserText = String(request.userText ?? '').trim();
+
+  if (requestUserText) {
+    return requestUserText;
+  }
+
+  if (request.userMessageId != null) {
+    const matchedMessage = messages.find((message) => message.id === request.userMessageId);
+
+    if (matchedMessage?.author === 'user') {
+      return String(matchedMessage.text ?? '').trim();
+    }
+  }
+
+  const directMatch = messages.find(
+    (message) => message.author === 'user' && message.clientRequestId === request.requestId,
+  );
+
+  return String(directMatch?.text ?? '').trim();
+}
+
+function buildSourceChangeEntry(
+  conversationTitle: string,
+  sessionId: string,
+  request: ChatConversationRequest,
+  messages: ChatMessage[],
+  nextRequest: ChatConversationRequest | undefined,
+  latestReleaseCompletedAt: string | null,
+) {
+  const questionText = resolveRequestQuestion(request, messages);
+  const answerText = resolveRequestExplanation(request, messages, nextRequest);
+  const sourceChangedAt = resolveSourceChangedAt(request, messages, nextRequest);
+  const diffBlocks = extractDiffBlocks(answerText);
+  const changedFiles = extractChangedFiles(answerText);
+  const currentSourceFiles = extractCurrentSourceFiles(answerText);
+  const featureTags = deriveFeatureTags(changedFiles);
+  const hasSourceEvidence = diffBlocks.length > 0 || changedFiles.length > 0;
+
+  if (!hasSourceEvidence) {
+    return null;
+  }
+
+  return {
+    id: `${sessionId}:${request.requestId}`,
+    sessionId,
+    conversationTitle,
+    requestId: request.requestId,
+    requestTitle: createRequestTitle(questionText, request.requestId),
+    questionText,
+    answerText,
+    status: request.status,
+    sourceChangedAt,
+    updatedAt: request.updatedAt,
+    featureTags,
+    changedFiles,
+    currentSourceFiles,
+    diffBlocks,
+    deploymentStatus: currentSourceFiles.length > 0
+      ? resolveDeploymentStatus(sourceChangedAt, latestReleaseCompletedAt)
+      : 'pre-deploy',
+    currentSourceStatus: currentSourceFiles.length > 0 ? 'applied' : 'not-applied',
+  } satisfies ChatSourceChangeEntry;
+}
+
+export function ChatSourceChangesPage() {
+  const [entries, setEntries] = useState<ChatSourceChangeEntry[]>([]);
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+  const [deploymentFilter, setDeploymentFilter] = useState<DeploymentFilterValue>('pre-deploy');
+  const [currentSourceFilter, setCurrentSourceFilter] = useState<CurrentSourceFilterValue>('all');
+  const [latestReleaseCompletedAt, setLatestReleaseCompletedAt] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadChanges = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const planItems = await fetchPlanItems('all');
+        const testPlanItems = planItems.filter((item) => isTestReleaseTarget(item.releaseTarget));
+        const actionResults = await Promise.allSettled(planItems.map((item) => fetchPlanActionHistories(item.id)));
+        const nextLatestReleaseCompletedAt =
+          actionResults
+            .flatMap((result, index) =>
+              result.status === 'fulfilled' && testPlanItems.some((item) => item.id === planItems[index]?.id)
+                ? result.value
+                : [],
+            )
+            .filter((history) => history.actionType === 'release반영완료')
+            .map((history) => history.createdAt)
+            .sort((left, right) => getTimeValue(right) - getTimeValue(left))[0] ?? null;
+        const conversations = await chatGateway.listConversations();
+        const details = await Promise.allSettled(
+          conversations.map(async (conversation) => ({
+            conversation,
+            detail: await chatGateway.getConversationDetail(conversation.sessionId),
+          })),
+        );
+
+        if (cancelled) {
+          return;
+        }
+
+        const nextEntries = details
+          .flatMap((result) => {
+            if (result.status !== 'fulfilled') {
+              return [];
+            }
+
+            const { conversation, detail } = result.value;
+            return detail.requests
+              .map((request, index, requests) =>
+                buildSourceChangeEntry(
+                  conversation.title || '새 대화',
+                  conversation.sessionId,
+                  request,
+                  detail.messages,
+                  requests[index + 1],
+                  nextLatestReleaseCompletedAt,
+                ),
+              )
+              .filter((item): item is ChatSourceChangeEntry => Boolean(item));
+          })
+          .sort((left, right) => new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime());
+
+        setLatestReleaseCompletedAt(nextLatestReleaseCompletedAt);
+        setEntries(nextEntries);
+        setSelectedEntryId((previous) => {
+          if (previous && nextEntries.some((entry) => entry.id === previous)) {
+            return previous;
+          }
+
+          return nextEntries[0]?.id ?? null;
+        });
+      } catch (error) {
+        if (!cancelled) {
+          setErrorMessage(error instanceof Error ? error.message : 'Codex Live 변경 이력을 불러오지 못했습니다.');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadChanges();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const filteredEntries = useMemo(() => {
+    const keyword = searchText.trim().toLowerCase();
+
+    return entries.filter((entry) => {
+      if (deploymentFilter !== 'all' && entry.deploymentStatus !== deploymentFilter) {
+        return false;
+      }
+
+      if (currentSourceFilter !== 'all' && entry.currentSourceStatus !== currentSourceFilter) {
+        return false;
+      }
+
+      if (!keyword) {
+        return true;
+      }
+
+      return [
+        entry.conversationTitle,
+        entry.requestTitle,
+        entry.questionText,
+        entry.answerText,
+        ...entry.featureTags,
+        ...entry.changedFiles,
+        ...entry.currentSourceFiles,
+      ]
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword);
+    });
+  }, [currentSourceFilter, deploymentFilter, entries, searchText]);
+
+  const selectedEntry = filteredEntries.find((entry) => entry.id === selectedEntryId) ?? filteredEntries[0] ?? null;
+
+  return (
+    <Space direction="vertical" size={16} className="chat-source-changes-page">
+      <Card className="chat-source-changes-page__card" bordered={false}>
+        <Space direction="vertical" size={8} style={{ width: '100%' }}>
+          <Title level={4} className="chat-source-changes-page__title">
+            Codex Live 변경 이력
+          </Title>
+          <Paragraph className="chat-source-changes-page__copy">
+            채팅 요청 중 실제 소스 수정 흔적이 남은 항목만 모아서 test 도메인 배포 반영 여부 기준으로 확인합니다.
+          </Paragraph>
+          <Input
+            value={searchText}
+            placeholder="채팅방명, 요청명, 기능, 파일 경로 검색"
+            onChange={(event) => {
+              setSearchText(event.target.value);
+            }}
+          />
+          <Space direction="vertical" size={4}>
+            <Select
+              value={deploymentFilter}
+              options={DEPLOYMENT_FILTER_OPTIONS}
+              onChange={(value) => {
+                setDeploymentFilter(value);
+              }}
+            />
+            <Select
+              value={currentSourceFilter}
+              options={CURRENT_SOURCE_FILTER_OPTIONS}
+              onChange={(values) => {
+                setCurrentSourceFilter(values);
+              }}
+            />
+            <Text type="secondary">
+              {latestReleaseCompletedAt
+                ? `최근 test 도메인 배포 완료 시각 기준: ${formatDateTime(latestReleaseCompletedAt)}`
+                : '기록된 test 도메인 배포 완료 이력이 없어 현재 항목은 모두 배포 전으로 표시됩니다.'}
+            </Text>
+          </Space>
+        </Space>
+      </Card>
+
+      {loading ? (
+        <Card className="chat-source-changes-page__card" bordered={false}>
+          <div className="chat-source-changes-page__loading">
+            <Spin />
+          </div>
+        </Card>
+      ) : errorMessage ? (
+        <Card className="chat-source-changes-page__card" bordered={false}>
+          <Text type="danger">{errorMessage}</Text>
+        </Card>
+      ) : filteredEntries.length === 0 ? (
+        <Card className="chat-source-changes-page__card" bordered={false}>
+          <Empty
+            description={
+              entries.length === 0
+                ? '소스 수정 흔적이 있는 Codex Live 요청이 아직 없습니다.'
+                : '현재 검색어 또는 필터에 맞는 변경 이력이 없습니다.'
+            }
+          />
+        </Card>
+      ) : (
+        <div className="chat-source-changes-page__grid">
+          <Card className="chat-source-changes-page__card chat-source-changes-page__list-card" bordered={false}>
+            <List
+              dataSource={filteredEntries}
+              renderItem={(entry) => (
+                <List.Item
+                  key={entry.id}
+                  className={entry.id === selectedEntry?.id ? 'chat-source-changes-page__list-item is-active' : 'chat-source-changes-page__list-item'}
+                  onClick={() => {
+                    setSelectedEntryId(entry.id);
+                  }}
+                >
+                  <Space direction="vertical" size={6} style={{ width: '100%' }}>
+                    <Space size={8} wrap>
+                      <Text strong>{entry.conversationTitle}</Text>
+                      <Tag color={entry.status === 'failed' ? 'error' : 'blue'}>{entry.status}</Tag>
+                      <Tag color={entry.currentSourceStatus === 'applied' ? 'cyan' : 'default'}>
+                        {entry.currentSourceStatus === 'applied' ? '현재 소스 적용' : '현재 소스 미적용'}
+                      </Tag>
+                      <Tag color={entry.deploymentStatus === 'deployed' ? 'green' : 'orange'}>
+                        {getDeploymentStatusLabel(entry.deploymentStatus)}
+                      </Tag>
+                    </Space>
+                    <Text>{entry.requestTitle}</Text>
+                    <Text type="secondary">{formatDateTime(entry.updatedAt)}</Text>
+                    <Space size={[6, 6]} wrap>
+                      {entry.featureTags.map((tag) => (
+                        <Tag key={`${entry.id}:${tag}`}>{tag}</Tag>
+                      ))}
+                    </Space>
+                  </Space>
+                </List.Item>
+              )}
+            />
+          </Card>
+
+          <Card className="chat-source-changes-page__card chat-source-changes-page__detail-card" bordered={false}>
+            {selectedEntry ? (
+              <Space direction="vertical" size={16} className="chat-source-changes-page__detail">
+                <Space direction="vertical" size={4}>
+                  <Title level={5} style={{ margin: 0 }}>
+                    {selectedEntry.requestTitle}
+                  </Title>
+                  <Text type="secondary">
+                    {selectedEntry.conversationTitle} · 변경 반영 시각 {formatDateTime(selectedEntry.sourceChangedAt)}
+                  </Text>
+                </Space>
+
+                <Space size={[8, 8]} wrap>
+                  <Tag color={selectedEntry.status === 'failed' ? 'error' : 'blue'}>{selectedEntry.status}</Tag>
+                  <Tag color={selectedEntry.currentSourceStatus === 'applied' ? 'cyan' : 'default'}>
+                    {selectedEntry.currentSourceStatus === 'applied' ? '현재 소스 적용' : '현재 소스 미적용'}
+                  </Tag>
+                  <Tag color={selectedEntry.deploymentStatus === 'deployed' ? 'green' : 'orange'}>
+                    {getDeploymentStatusLabel(selectedEntry.deploymentStatus)}
+                  </Tag>
+                  {selectedEntry.featureTags.map((tag) => (
+                    <Tag key={`detail:${selectedEntry.id}:${tag}`}>{tag}</Tag>
+                  ))}
+                </Space>
+
+                <Card size="small" title="질문">
+                  <Paragraph style={{ whiteSpace: 'pre-wrap', marginBottom: 0 }}>
+                    {selectedEntry.questionText || '기록된 질문이 없습니다.'}
+                  </Paragraph>
+                </Card>
+
+                <Card size="small" title="답변">
+                  <Paragraph style={{ whiteSpace: 'pre-wrap', marginBottom: 0 }}>
+                    {selectedEntry.answerText || '기록된 답변이 없습니다.'}
+                  </Paragraph>
+                </Card>
+
+                <Card size="small" title={`변경 파일 (${selectedEntry.changedFiles.length})`}>
+                  {selectedEntry.changedFiles.length ? (
+                    <Space size={[8, 8]} wrap>
+                      {selectedEntry.changedFiles.map((file) => (
+                        <Tag key={`file:${selectedEntry.id}:${file}`}>{file}</Tag>
+                      ))}
+                    </Space>
+                  ) : (
+                    <Text type="secondary">추출된 변경 파일이 없습니다.</Text>
+                  )}
+                </Card>
+
+                <Card size="small" title={`현재 소스 반영 파일 (${selectedEntry.currentSourceFiles.length})`}>
+                  {selectedEntry.currentSourceFiles.length ? (
+                    <Space size={[8, 8]} wrap>
+                      {selectedEntry.currentSourceFiles.map((file) => (
+                        <Tag key={`current-file:${selectedEntry.id}:${file}`} color="cyan">
+                          {file}
+                        </Tag>
+                      ))}
+                    </Space>
+                  ) : (
+                    <Text type="secondary">현재 소스 기준으로 바로 연결되는 파일은 아직 추출되지 않았습니다.</Text>
+                  )}
+                </Card>
+
+                <Card size="small" title={`변경 소스 / diff (${selectedEntry.diffBlocks.length})`}>
+                  {selectedEntry.diffBlocks.length ? (
+                    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+                      {selectedEntry.diffBlocks.map((block, index) => (
+                        <pre key={`diff:${selectedEntry.id}:${index}`} className="chat-source-changes-page__diff">
+                          <code>{block}</code>
+                        </pre>
+                      ))}
+                    </Space>
+                  ) : (
+                    <Text type="secondary">추출된 diff 블록이 없습니다. 설명과 파일 목록만 확인할 수 있습니다.</Text>
+                  )}
+                </Card>
+              </Space>
+            ) : (
+              <Empty description="선택된 변경 이력이 없습니다." />
+            )}
+          </Card>
+        </div>
+      )}
+    </Space>
+  );
+}
diff --git a/src/app/main/ChatTypeManagementPage.css b/src/app/main/ChatTypeManagementPage.css
new file mode 100755
index 0000000..28c2085
--- /dev/null
+++ b/src/app/main/ChatTypeManagementPage.css
@@ -0,0 +1,46 @@
+.chat-type-management-page {
+  height: 100%;
+}
+
+.chat-type-management-page .ant-card,
+.chat-type-management-page .ant-card-body,
+.chat-type-management-page__card {
+  height: 100%;
+}
+
+.chat-type-management-page__list,
+.chat-type-management-page__editor {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.chat-type-management-page__list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.chat-type-management-page__item {
+  cursor: pointer;
+  border: 1px solid #f0f0f0;
+  border-radius: 12px;
+  margin-bottom: 8px;
+  padding: 12px 16px;
+}
+
+.chat-type-management-page__item--active {
+  border-color: #1677ff;
+  background: #f0f7ff;
+}
+
+.chat-type-management-page__item-main {
+  width: 100%;
+}
+
+.chat-type-management-page__item-description.ant-typography {
+  margin: 8px 0 10px;
+}
diff --git a/src/app/main/ChatTypeManagementPage.tsx b/src/app/main/ChatTypeManagementPage.tsx
new file mode 100755
index 0000000..3b74367
--- /dev/null
+++ b/src/app/main/ChatTypeManagementPage.tsx
@@ -0,0 +1,290 @@
+import { ArrowLeftOutlined, DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, Checkbox, Empty, Form, Input, List, Space, Switch, Tag, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  canUseChatType,
+  CHAT_PERMISSION_ROLE_LABELS,
+  resolveCurrentChatPermissionRoles,
+  upsertChatType,
+  useChatTypeRegistry,
+  type ChatPermissionRole,
+  type ChatTypeRecord,
+} from './chatTypeAccess';
+import { useTokenAccess } from './tokenAccess';
+import './ChatTypeManagementPage.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+type ChatTypeFormValue = {
+  id?: string;
+  name: string;
+  description: string;
+  isTemplate: boolean;
+  permissions: ChatPermissionRole[];
+  enabled: boolean;
+};
+
+const EMPTY_FORM_VALUE: ChatTypeFormValue = {
+  name: '',
+  description: '',
+  isTemplate: false,
+  permissions: ['token-user'],
+  enabled: true,
+};
+
+function toFormValue(chatType: ChatTypeRecord | null): ChatTypeFormValue {
+  if (!chatType) {
+    return EMPTY_FORM_VALUE;
+  }
+
+  return {
+    id: chatType.id,
+    name: chatType.name,
+    description: chatType.description,
+    isTemplate: chatType.isTemplate,
+    permissions: chatType.permissions,
+    enabled: chatType.enabled,
+  };
+}
+
+export function ChatTypeManagementPage() {
+  const { hasAccess } = useTokenAccess();
+  const { chatTypes, setChatTypes } = useChatTypeRegistry();
+  const [selectedChatTypeId, setSelectedChatTypeId] = useState<string | null>(chatTypes[0]?.id ?? null);
+  const [detailMode, setDetailMode] = useState<'list' | 'detail'>('list');
+  const [isCreating, setIsCreating] = useState(false);
+  const [form] = Form.useForm<ChatTypeFormValue>();
+  const userRoles = useMemo(() => resolveCurrentChatPermissionRoles(hasAccess), [hasAccess]);
+
+  const selectedChatType = useMemo(
+    () => chatTypes.find((item) => item.id === selectedChatTypeId) ?? null,
+    [chatTypes, selectedChatTypeId],
+  );
+
+  useEffect(() => {
+    if (selectedChatTypeId && chatTypes.some((item) => item.id === selectedChatTypeId)) {
+      return;
+    }
+
+    setSelectedChatTypeId(chatTypes[0]?.id ?? null);
+  }, [chatTypes, selectedChatTypeId]);
+
+  useEffect(() => {
+    form.setFieldsValue(toFormValue(isCreating ? null : selectedChatType));
+  }, [form, isCreating, selectedChatType]);
+
+  useEffect(() => {
+    if (detailMode !== 'detail') {
+      return;
+    }
+
+    if (isCreating || selectedChatType) {
+      return;
+    }
+
+    setDetailMode('list');
+  }, [detailMode, isCreating, selectedChatType]);
+
+  const openCreateForm = () => {
+    setIsCreating(true);
+    setSelectedChatTypeId(null);
+    setDetailMode('detail');
+    form.resetFields();
+    form.setFieldsValue(EMPTY_FORM_VALUE);
+  };
+
+  const openDetail = (chatTypeId: string) => {
+    setIsCreating(false);
+    setSelectedChatTypeId(chatTypeId);
+    setDetailMode('detail');
+  };
+
+  const closeDetail = () => {
+    setIsCreating(false);
+    setDetailMode('list');
+  };
+
+  const handleDelete = () => {
+    if (!selectedChatType) {
+      return;
+    }
+
+    if (!window.confirm(`"${selectedChatType.name}" 컨텍스트를 삭제할까요?`)) {
+      return;
+    }
+
+    const nextChatTypes = chatTypes.filter((item) => item.id !== selectedChatType.id);
+    setChatTypes(nextChatTypes);
+    setSelectedChatTypeId(nextChatTypes[0]?.id ?? null);
+    setIsCreating(false);
+    setDetailMode('list');
+    form.resetFields();
+    form.setFieldsValue(EMPTY_FORM_VALUE);
+  };
+
+  if (!hasAccess) {
+    return (
+      <Card title="컨텍스트 권한 관리" className="chat-type-management-page">
+        <Alert
+          showIcon
+          type="warning"
+          message="관리 페이지는 토큰 등록 사용자만 사용할 수 있습니다."
+          description="설정 > 토큰 관리에서 권한 토큰을 등록한 뒤 컨텍스트와 권한을 관리하세요."
+        />
+      </Card>
+    );
+  }
+
+  return (
+    <div className="chat-type-management-page">
+      {detailMode === 'list' ? (
+        <Card
+          title="컨텍스트 권한 관리"
+          className="chat-type-management-page__card"
+          extra={
+            <Button icon={<PlusOutlined />} onClick={openCreateForm}>
+              신규 컨텍스트
+            </Button>
+          }
+        >
+          <div className="chat-type-management-page__list">
+            <div className="chat-type-management-page__list-header">
+              <Title level={5}>등록 컨텍스트</Title>
+              <Text type="secondary">{chatTypes.length}건</Text>
+            </div>
+
+            {chatTypes.length > 0 ? (
+              <List
+                dataSource={chatTypes}
+                renderItem={(item) => {
+                  const isCurrentUserAllowed = canUseChatType(item, userRoles);
+                  const itemClassName =
+                    item.id === selectedChatTypeId
+                      ? 'chat-type-management-page__item chat-type-management-page__item--active'
+                      : 'chat-type-management-page__item';
+
+                  return (
+                    <List.Item
+                      className={itemClassName}
+                      onClick={() => {
+                        openDetail(item.id);
+                      }}
+                      actions={[
+                        <Button
+                          key="edit"
+                          type="text"
+                          icon={<EditOutlined />}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            openDetail(item.id);
+                          }}
+                        />,
+                      ]}
+                    >
+                      <div className="chat-type-management-page__item-main">
+                        <Space size={[8, 8]} wrap>
+                          <Text strong>{item.name}</Text>
+                          <Tag color={item.enabled ? 'green' : 'default'}>{item.enabled ? '사용' : '중지'}</Tag>
+                          {item.isTemplate ? <Tag color="gold">템플릿</Tag> : null}
+                          <Tag color={isCurrentUserAllowed ? 'blue' : 'default'}>
+                            {isCurrentUserAllowed ? '현재 사용자 사용 가능' : '현재 사용자 사용 불가'}
+                          </Tag>
+                        </Space>
+                        <Paragraph className="chat-type-management-page__item-description">
+                          {item.description || '기본 문맥 설명 없음'}
+                        </Paragraph>
+                        <Space size={[6, 6]} wrap>
+                          {item.permissions.map((permission) => (
+                            <Tag key={`${item.id}-${permission}`}>{CHAT_PERMISSION_ROLE_LABELS[permission]}</Tag>
+                          ))}
+                        </Space>
+                      </div>
+                    </List.Item>
+                  );
+                }}
+              />
+            ) : (
+              <Empty description="등록된 컨텍스트가 없습니다." />
+            )}
+          </div>
+        </Card>
+      ) : (
+        <Card
+          title={isCreating ? '컨텍스트 등록' : '컨텍스트 상세'}
+          className="chat-type-management-page__card"
+          extra={
+            <Space wrap>
+              {!isCreating && selectedChatType ? (
+                <Button danger icon={<DeleteOutlined />} onClick={handleDelete}>
+                  삭제
+                </Button>
+              ) : null}
+              <Button icon={<ArrowLeftOutlined />} onClick={closeDetail}>
+                목록
+              </Button>
+            </Space>
+          }
+        >
+          <div className="chat-type-management-page__editor">
+            <div className="chat-type-management-page__list-header">
+              <Title level={5}>{isCreating ? '신규 컨텍스트 등록' : selectedChatType?.name ?? '컨텍스트 수정'}</Title>
+              <Text type="secondary">이름과 기본 문맥 설명, 권한 대상만 관리하면 채팅에 그대로 반영됩니다.</Text>
+            </div>
+
+            <Form
+              layout="vertical"
+              form={form}
+              initialValues={EMPTY_FORM_VALUE}
+              onFinish={(values) => {
+                const nextChatTypes = upsertChatType(chatTypes, values);
+                setChatTypes(nextChatTypes);
+
+                const savedChatType = nextChatTypes.find((item) => item.id === values.id || item.name === values.name);
+                setIsCreating(false);
+                setSelectedChatTypeId(savedChatType?.id ?? null);
+                setDetailMode('detail');
+              }}
+            >
+              <Form.Item name="id" hidden>
+                <Input />
+              </Form.Item>
+              <Form.Item
+                label="컨텍스트명"
+                name="name"
+                rules={[{ required: true, message: '컨텍스트명을 입력하세요.' }]}
+              >
+                <Input placeholder="예: 운영 문의" />
+              </Form.Item>
+              <Form.Item label="기본 문맥 설명" name="description">
+                <Input.TextArea
+                  autoSize={{ minRows: 4, maxRows: 8 }}
+                  placeholder="이 컨텍스트에서 기본으로 참고해야 할 문맥을 입력하세요."
+                />
+              </Form.Item>
+              <Form.Item label="템플릿 요청 여부" name="isTemplate" valuePropName="checked">
+                <Switch checkedChildren="템플릿" unCheckedChildren="일반" />
+              </Form.Item>
+              <Form.Item label="권한 대상" name="permissions">
+                <Checkbox.Group
+                  options={[
+                    { label: CHAT_PERMISSION_ROLE_LABELS['token-user'], value: 'token-user' },
+                    { label: CHAT_PERMISSION_ROLE_LABELS.guest, value: 'guest' },
+                  ]}
+                />
+              </Form.Item>
+              <Form.Item label="사용 여부" name="enabled" valuePropName="checked">
+                <Switch checkedChildren="사용" unCheckedChildren="중지" />
+              </Form.Item>
+              <Space wrap>
+                <Button type="primary" htmlType="submit">
+                  {isCreating ? '등록' : '수정 저장'}
+                </Button>
+                <Button onClick={openCreateForm}>새 입력</Button>
+              </Space>
+            </Form>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/main/HeaderMessageCenter.css b/src/app/main/HeaderMessageCenter.css
new file mode 100644
index 0000000..7b71d8b
--- /dev/null
+++ b/src/app/main/HeaderMessageCenter.css
@@ -0,0 +1,165 @@
+.header-message-center__trigger.ant-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+}
+
+.header-message-center__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.header-message-center__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+}
+
+.header-message-center__item {
+  padding: 0 !important;
+  border: none !important;
+}
+
+.header-message-center__item + .header-message-center__item {
+  margin-top: 10px;
+}
+
+.header-message-center__swipe {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  isolation: isolate;
+}
+
+.header-message-center__delete-action {
+  position: absolute;
+  inset: 0 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  border: none;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
+  color: #ffffff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.header-message-center__swipe.is-swiped .header-message-center__delete-action,
+.header-message-center__swipe.is-dragging .header-message-center__delete-action {
+  opacity: 1;
+  visibility: visible;
+}
+
+.header-message-center__item-button {
+  display: block;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  padding: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 16px;
+  background: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+  touch-action: pan-y;
+  will-change: transform;
+}
+
+.header-message-center__item-button:hover {
+  border-color: rgba(37, 99, 235, 0.32);
+  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
+  transform: translateY(-1px);
+}
+
+.header-message-center__item.is-unread .header-message-center__item-button {
+  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
+  border-color: rgba(37, 99, 235, 0.24);
+}
+
+.header-message-center__item-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  margin-bottom: 10px;
+}
+
+.header-message-center__item-time.ant-typography {
+  flex: 0 0 auto;
+}
+
+.header-message-center__item-title.ant-typography {
+  margin-bottom: 8px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.header-message-center__item-preview.ant-typography {
+  margin-bottom: 0;
+  color: #475467;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.header-message-center__swipe-hint {
+  display: none;
+}
+
+.header-message-center__detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.header-message-center__detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.header-message-center__detail-body.ant-typography {
+  margin-bottom: 0;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 768px) {
+  .header-message-center__item-button {
+    padding: 12px 12px 34px;
+  }
+
+  .header-message-center__swipe-hint {
+    position: absolute;
+    right: 14px;
+    bottom: 10px;
+    display: block;
+    color: #94a3b8;
+    font-size: 0.72rem;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .header-message-center__swipe.is-swiped .header-message-center__swipe-hint,
+  .header-message-center__swipe.is-dragging .header-message-center__swipe-hint {
+    opacity: 0;
+  }
+
+  .header-message-center__item-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
diff --git a/src/app/main/HeaderMessageCenter.tsx b/src/app/main/HeaderMessageCenter.tsx
new file mode 100644
index 0000000..c5c8021
--- /dev/null
+++ b/src/app/main/HeaderMessageCenter.tsx
@@ -0,0 +1,509 @@
+import { BellOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Alert, Badge, Button, Drawer, Empty, List, Modal, Space, Spin, Tag, Typography } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  type NotificationMessageItem,
+  type NotificationMessagePriority,
+} from './notificationApi';
+import { useNotificationController } from './chatV2/hooks/useNotificationController';
+import './HeaderMessageCenter.css';
+
+const { Paragraph, Text, Title } = Typography;
+const SWIPE_DELETE_THRESHOLD_PX = 88;
+const SWIPE_DELETE_LIMIT_PX = 132;
+const TOUCH_TAP_SLOP_PX = 10;
+
+function getNotificationLinkMetadata(metadata: Record<string, unknown> | null | undefined) {
+  if (!metadata || typeof metadata !== 'object') {
+    return null;
+  }
+
+  const linkUrl = typeof metadata.linkUrl === 'string' ? metadata.linkUrl.trim() : '';
+  const linkLabel = typeof metadata.linkLabel === 'string' ? metadata.linkLabel.trim() : '';
+
+  if (!linkUrl) {
+    return null;
+  }
+
+  return {
+    linkUrl,
+    linkLabel: linkLabel || '바로가기',
+  };
+}
+
+function formatDateTime(value: string | null) {
+  if (!value) {
+    return '-';
+  }
+
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+}
+
+function getPriorityTagColor(priority: NotificationMessagePriority) {
+  switch (priority) {
+    case 'urgent':
+      return 'red';
+    case 'high':
+      return 'volcano';
+    case 'low':
+      return 'default';
+    default:
+      return 'blue';
+  }
+}
+
+function getPriorityLabel(priority: NotificationMessagePriority) {
+  switch (priority) {
+    case 'urgent':
+      return '긴급';
+    case 'high':
+      return '높음';
+    case 'low':
+      return '낮음';
+    default:
+      return '보통';
+  }
+}
+
+function getMetadataText(metadata: Record<string, unknown> | null | undefined, key: string) {
+  if (!metadata || typeof metadata !== 'object') {
+    return '';
+  }
+
+  const value = metadata[key];
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function getFirstMetadataText(metadata: Record<string, unknown> | null | undefined, keys: string[]) {
+  for (const key of keys) {
+    const value = getMetadataText(metadata, key);
+
+    if (value) {
+      return value;
+    }
+  }
+
+  return '';
+}
+
+function extractChatDetailSections(message: NotificationMessageItem | null) {
+  if (!message || message.category !== 'chat') {
+    return null;
+  }
+
+  const questionText = getFirstMetadataText(message.metadata, ['questionText', 'userText', 'requestText', 'question']);
+  const answerText = getFirstMetadataText(message.metadata, ['answerText', 'responseText', 'replyText', 'answer']);
+
+  if (questionText || answerText) {
+    return { questionText, answerText };
+  }
+
+  const bodyLines = String(message.body ?? '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  const questionLine = bodyLines.find((line) => line.startsWith('질문:'));
+  const answerLine = bodyLines.find((line) => line.startsWith('답변:'));
+
+  const parsedQuestionText = questionLine ? questionLine.replace(/^질문:\s*/, '').trim() : '';
+  const parsedAnswerText = answerLine ? answerLine.replace(/^답변:\s*/, '').trim() : '';
+
+  if (!parsedQuestionText && !parsedAnswerText) {
+    return null;
+  }
+
+  return {
+    questionText: parsedQuestionText,
+    answerText: parsedAnswerText,
+  };
+}
+
+export function HeaderMessageCenter({ isMobileViewport }: { isMobileViewport: boolean }) {
+  const navigate = useNavigate();
+  const swipeStartXRef = useRef<number | null>(null);
+  const swipeStartYRef = useRef<number | null>(null);
+  const swipeLockedIdRef = useRef<number | null>(null);
+  const swipeMovedRef = useRef(false);
+  const touchScrollDetectedRef = useRef(false);
+  const suppressClickRef = useRef(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [swipedMessageId, setSwipedMessageId] = useState<number | null>(null);
+  const [draggingMessageId, setDraggingMessageId] = useState<number | null>(null);
+  const [dragOffsetX, setDragOffsetX] = useState(0);
+  const {
+    unreadCount,
+    detailOpen,
+    setDetailOpen,
+    messages,
+    selectedMessage,
+    listLoading,
+    detailLoading,
+    toggleReadLoading,
+    deletingMessageId,
+    listError,
+    detailError,
+    loadMessages,
+    openMessageDetail,
+    handleToggleReadState,
+    handleDeleteMessage: deleteMessage,
+  } = useNotificationController(drawerOpen);
+
+  const resetSwipeState = () => {
+    swipeStartXRef.current = null;
+    swipeStartYRef.current = null;
+    swipeLockedIdRef.current = null;
+    swipeMovedRef.current = false;
+    touchScrollDetectedRef.current = false;
+    setDraggingMessageId(null);
+    setDragOffsetX(0);
+  };
+
+  const handleDeleteMessage = async (id: number) => {
+    try {
+      await deleteMessage(id);
+      setSwipedMessageId((current) => (current === id ? null : current));
+    } finally {
+      resetSwipeState();
+    }
+  };
+
+  const handleSwipeStart = (id: number, clientX: number, clientY: number) => {
+    if (deletingMessageId === id) {
+      return;
+    }
+
+    swipeStartXRef.current = clientX;
+    swipeStartYRef.current = clientY;
+    swipeLockedIdRef.current = id;
+    swipeMovedRef.current = false;
+    touchScrollDetectedRef.current = false;
+    setDraggingMessageId(id);
+    setDragOffsetX(0);
+    setSwipedMessageId((current) => (current === id ? id : null));
+  };
+
+  const handleSwipeMove = (id: number, clientX: number, clientY: number) => {
+    if (swipeLockedIdRef.current !== id || swipeStartXRef.current === null || swipeStartYRef.current === null) {
+      return;
+    }
+
+    const deltaX = clientX - swipeStartXRef.current;
+    const deltaY = clientY - swipeStartYRef.current;
+    const absDeltaX = Math.abs(deltaX);
+    const absDeltaY = Math.abs(deltaY);
+
+    if (absDeltaY > TOUCH_TAP_SLOP_PX && absDeltaY > absDeltaX) {
+      touchScrollDetectedRef.current = true;
+      setSwipedMessageId(null);
+      setDraggingMessageId(null);
+      setDragOffsetX(0);
+      return;
+    }
+
+    const nextOffset = deltaX >= 0 ? 0 : Math.max(deltaX, -SWIPE_DELETE_LIMIT_PX);
+    if (Math.abs(nextOffset) >= 12) {
+      swipeMovedRef.current = true;
+      suppressClickRef.current = true;
+    }
+    setDraggingMessageId(id);
+    setDragOffsetX(nextOffset);
+  };
+
+  const handleSwipeEnd = (id: number) => {
+    if (swipeLockedIdRef.current !== id) {
+      return false;
+    }
+
+    if (touchScrollDetectedRef.current) {
+      resetSwipeState();
+      setSwipedMessageId(null);
+      window.setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0);
+      return false;
+    }
+
+    const shouldDelete = dragOffsetX <= -SWIPE_DELETE_THRESHOLD_PX;
+    const wasSwipeGesture = swipeMovedRef.current;
+    resetSwipeState();
+
+    if (shouldDelete) {
+      void handleDeleteMessage(id);
+      return false;
+    }
+
+    setSwipedMessageId(null);
+    window.setTimeout(() => {
+      suppressClickRef.current = false;
+    }, 0);
+    return !wasSwipeGesture;
+  };
+
+  const handleActivateMessage = (id: number) => {
+    if (suppressClickRef.current || swipeMovedRef.current) {
+      suppressClickRef.current = false;
+      return;
+    }
+
+    if (draggingMessageId === id || swipedMessageId === id) {
+      setSwipedMessageId(null);
+      resetSwipeState();
+      return;
+    }
+
+    void openMessageDetail(id);
+  };
+
+  const handleOpenLinkedPage = () => {
+    const link = getNotificationLinkMetadata(selectedMessage?.metadata);
+
+    if (!link || typeof window === 'undefined') {
+      return;
+    }
+
+    try {
+      const url = new URL(link.linkUrl, window.location.origin);
+
+      if (url.origin === window.location.origin) {
+        navigate(`${url.pathname}${url.search}${url.hash}`);
+        setDetailOpen(false);
+        setDrawerOpen(false);
+        return;
+      }
+    } catch {
+      // Fall through to full navigation for invalid or external urls.
+    }
+
+    window.location.assign(link.linkUrl);
+  };
+
+  useEffect(() => {
+    if (!drawerOpen) {
+      resetSwipeState();
+      setSwipedMessageId(null);
+    }
+  }, [drawerOpen]);
+
+  const selectedMessageLink = getNotificationLinkMetadata(selectedMessage?.metadata);
+  const selectedChatDetail = extractChatDetailSections(selectedMessage);
+
+  return (
+    <>
+      <Badge count={unreadCount} size="small" offset={[-2, 4]}>
+        <Button
+          type="text"
+          className="header-message-center__trigger"
+          icon={<BellOutlined />}
+          aria-label="알림 메시지 열기"
+          onClick={() => {
+            setDrawerOpen(true);
+          }}
+        />
+      </Badge>
+
+      <Drawer
+        title="수신 알림"
+        placement="right"
+        width={isMobileViewport ? '100%' : 420}
+        open={drawerOpen}
+        onClose={() => {
+          setDrawerOpen(false);
+        }}
+        extra={
+          <Button
+            type="text"
+            icon={<ReloadOutlined />}
+            aria-label="알림 목록 새로고침"
+            onClick={() => {
+              void loadMessages();
+            }}
+          />
+        }
+      >
+        <Space direction="vertical" size={12} style={{ width: '100%' }}>
+          <div className="header-message-center__summary">
+            <Text strong>미확인 메시지 {unreadCount}건</Text>
+            <Text type="secondary">최신순으로 최대 30건까지 표시합니다.</Text>
+          </div>
+
+          {listError ? <Alert type="error" showIcon message={listError} /> : null}
+
+          {listLoading ? (
+            <div className="header-message-center__loading">
+              <Spin />
+            </div>
+          ) : messages.length ? (
+            <List
+              itemLayout="vertical"
+              dataSource={messages}
+              renderItem={(item) => (
+                <List.Item className={`header-message-center__item ${item.read ? '' : 'is-unread'}`}>
+                  <div
+                    className={`header-message-center__swipe ${swipedMessageId === item.id ? 'is-swiped' : ''} ${draggingMessageId === item.id ? 'is-dragging' : ''}`}
+                  >
+                    <button
+                      type="button"
+                      className="header-message-center__delete-action"
+                      aria-label={`${item.title} 알림 삭제`}
+                      disabled={deletingMessageId === item.id}
+                      onClick={() => {
+                        void handleDeleteMessage(item.id);
+                      }}
+                    >
+                      {deletingMessageId === item.id ? '삭제 중' : '삭제'}
+                    </button>
+                    <button
+                      type="button"
+                      className="header-message-center__item-button"
+                      style={{
+                        transform:
+                          draggingMessageId === item.id
+                            ? `translateX(${dragOffsetX}px)`
+                            : swipedMessageId === item.id
+                              ? `translateX(-${SWIPE_DELETE_THRESHOLD_PX}px)`
+                              : undefined,
+                      }}
+                      onTouchStart={(event) => {
+                        handleSwipeStart(
+                          item.id,
+                          event.changedTouches[0]?.clientX ?? 0,
+                          event.changedTouches[0]?.clientY ?? 0,
+                        );
+                      }}
+                      onTouchMove={(event) => {
+                        handleSwipeMove(
+                          item.id,
+                          event.changedTouches[0]?.clientX ?? 0,
+                          event.changedTouches[0]?.clientY ?? 0,
+                        );
+                      }}
+                      onTouchEnd={() => {
+                        const shouldOpenDetail = handleSwipeEnd(item.id);
+
+                        if (shouldOpenDetail) {
+                          suppressClickRef.current = true;
+                          void openMessageDetail(item.id);
+                        }
+                      }}
+                      onTouchCancel={() => {
+                        handleSwipeEnd(item.id);
+                      }}
+                      onClick={() => {
+                        handleActivateMessage(item.id);
+                      }}
+                    >
+                      <div className="header-message-center__item-header">
+                        <Space size={8} wrap>
+                          <Tag color={getPriorityTagColor(item.priority)}>{getPriorityLabel(item.priority)}</Tag>
+                          <Tag>{item.category}</Tag>
+                          {!item.read ? <Tag color="gold">안읽음</Tag> : null}
+                        </Space>
+                        <Text type="secondary" className="header-message-center__item-time">
+                          {formatDateTime(item.createdAt)}
+                        </Text>
+                      </div>
+                      <Title level={5} className="header-message-center__item-title" ellipsis={{ rows: 2 }}>
+                        {item.title}
+                      </Title>
+                      <Paragraph className="header-message-center__item-preview" ellipsis={{ rows: 2 }}>
+                        {item.preview}
+                      </Paragraph>
+                    </button>
+                    <div className="header-message-center__swipe-hint">왼쪽으로 밀어 삭제</div>
+                  </div>
+                </List.Item>
+              )}
+            />
+          ) : (
+            <Empty description="수신된 알림이 없습니다." />
+          )}
+        </Space>
+      </Drawer>
+
+      <Modal
+        title="알림 상세"
+        open={detailOpen}
+        width={isMobileViewport ? 'calc(100vw - 24px)' : 680}
+        onCancel={() => {
+          setDetailOpen(false);
+        }}
+        footer={[
+          <Button key="open-link" disabled={!selectedMessageLink} onClick={handleOpenLinkedPage}>
+            {selectedMessageLink?.linkLabel ?? '바로가기'}
+          </Button>,
+          <Button key="toggle-read" loading={toggleReadLoading} disabled={!selectedMessage} onClick={() => { void handleToggleReadState(); }}>
+            {selectedMessage?.read ? '안읽음으로 변경' : '읽음 처리'}
+          </Button>,
+          <Button key="close" type="primary" onClick={() => { setDetailOpen(false); }}>
+            닫기
+          </Button>,
+        ]}
+      >
+        {detailError ? <Alert type="error" showIcon message={detailError} style={{ marginBottom: 16 }} /> : null}
+
+        {detailLoading ? (
+          <div className="header-message-center__loading">
+            <Spin />
+          </div>
+        ) : selectedMessage ? (
+          <Space direction="vertical" size={16} style={{ width: '100%' }}>
+            <Space size={8} wrap>
+              <Tag color={getPriorityTagColor(selectedMessage.priority)}>
+                {getPriorityLabel(selectedMessage.priority)}
+              </Tag>
+              <Tag>{selectedMessage.category}</Tag>
+              <Tag>{selectedMessage.source}</Tag>
+              <Tag color={selectedMessage.read ? 'green' : 'gold'}>
+                {selectedMessage.read ? '읽음' : '안읽음'}
+              </Tag>
+            </Space>
+            <div className="header-message-center__detail-meta">
+              <Text type="secondary">수신 시각 {formatDateTime(selectedMessage.createdAt)}</Text>
+              <Text type="secondary">확인 시각 {formatDateTime(selectedMessage.readAt)}</Text>
+            </div>
+            <Title level={4} style={{ margin: 0 }}>
+              {selectedMessage.title}
+            </Title>
+            {selectedChatDetail ? (
+              <Space direction="vertical" size={12} style={{ width: '100%' }}>
+                {selectedChatDetail.questionText ? (
+                  <div className="header-message-center__detail-section">
+                    <Text type="secondary">요청내용</Text>
+                    <Paragraph className="header-message-center__detail-body">
+                      {selectedChatDetail.questionText}
+                    </Paragraph>
+                  </div>
+                ) : null}
+                {selectedChatDetail.answerText ? (
+                  <div className="header-message-center__detail-section">
+                    <Text type="secondary">답변</Text>
+                    <Paragraph className="header-message-center__detail-body">
+                      {selectedChatDetail.answerText}
+                    </Paragraph>
+                  </div>
+                ) : null}
+              </Space>
+            ) : (
+              <Paragraph className="header-message-center__detail-body">
+                {selectedMessage.body}
+              </Paragraph>
+            )}
+          </Space>
+        ) : (
+          <Empty description="표시할 알림이 없습니다." />
+        )}
+      </Modal>
+    </>
+  );
+}
diff --git a/src/app/main/InitialLoadingOverlay.css b/src/app/main/InitialLoadingOverlay.css
new file mode 100755
index 0000000..adbbf78
--- /dev/null
+++ b/src/app/main/InitialLoadingOverlay.css
@@ -0,0 +1,144 @@
+.app-loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top, rgba(59, 130, 246, 0.24), transparent 30%),
+    linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.98));
+  animation: app-loading-overlay-fade 0.45s ease-out 1.45s forwards;
+}
+
+.app-loading-panel {
+  width: min(100%, 560px);
+  padding: 28px;
+  border: 1px solid rgba(96, 165, 250, 0.22);
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96)),
+    rgba(15, 23, 42, 0.92);
+  box-shadow:
+    0 24px 80px rgba(15, 23, 42, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px);
+}
+
+.app-loading-panel__eyebrow {
+  display: inline-flex;
+  margin-bottom: 10px;
+  color: rgba(147, 197, 253, 0.92);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.24em;
+}
+
+.app-loading-panel__title {
+  display: block;
+  margin-bottom: 18px;
+  color: #f8fafc;
+  font-size: clamp(26px, 5vw, 40px);
+  letter-spacing: 0.08em;
+}
+
+.app-loading-panel__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 22px;
+  color: rgba(191, 219, 254, 0.88);
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.app-loading-panel__pulse {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #38bdf8;
+  box-shadow: 0 0 0 rgba(56, 189, 248, 0.5);
+  animation: app-loading-pulse 1.2s ease-out infinite;
+}
+
+.app-loading-log {
+  display: grid;
+  gap: 10px;
+}
+
+.app-loading-log__line {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 14px;
+  padding: 12px 14px;
+  border: 1px solid rgba(96, 165, 250, 0.14);
+  border-radius: 16px;
+  background: rgba(15, 23, 42, 0.58);
+  color: #dbeafe;
+  opacity: 0;
+  transform: translateY(8px);
+  animation: app-loading-log-in 0.55s ease-out forwards;
+}
+
+.app-loading-log__time {
+  color: rgba(125, 211, 252, 0.72);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+.app-loading-log__text {
+  min-width: 0;
+  font-size: 14px;
+  letter-spacing: 0.03em;
+}
+
+@keyframes app-loading-log-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes app-loading-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.46);
+  }
+
+  70% {
+    box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
+  }
+}
+
+@keyframes app-loading-overlay-fade {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@media (max-width: 640px) {
+  .app-loading-panel {
+    padding: 22px 18px;
+    border-radius: 24px;
+  }
+
+  .app-loading-log__line {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+}
diff --git a/src/app/main/InitialLoadingOverlay.tsx b/src/app/main/InitialLoadingOverlay.tsx
new file mode 100755
index 0000000..0aac6a6
--- /dev/null
+++ b/src/app/main/InitialLoadingOverlay.tsx
@@ -0,0 +1,36 @@
+import './InitialLoadingOverlay.css';
+
+const INITIAL_LOADING_LOGS = [
+  'BOOT SEQUENCE :: app shell warmup',
+  'CONFIG SYNC :: workspace profile applied',
+  'SESSION LINK :: reconnecting realtime channel',
+  'MODULE CHECK :: dashboard widgets online',
+  'READY SIGNAL :: rendering main viewport',
+];
+
+export function InitialLoadingOverlay() {
+  return (
+    <div className="app-loading-overlay" aria-hidden="true">
+      <div className="app-loading-panel">
+        <span className="app-loading-panel__eyebrow">INITIALIZING</span>
+        <strong className="app-loading-panel__title">AI CODE APP</strong>
+        <div className="app-loading-panel__status">
+          <span className="app-loading-panel__pulse" />
+          live startup log
+        </div>
+        <div className="app-loading-log" role="presentation">
+          {INITIAL_LOADING_LOGS.map((log, index) => (
+            <div
+              key={log}
+              className="app-loading-log__line"
+              style={{ animationDelay: `${index * 0.18}s` }}
+            >
+              <span className="app-loading-log__time">0{index}:00</span>
+              <span className="app-loading-log__text">{log}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/main/MainChatPanel.css b/src/app/main/MainChatPanel.css
new file mode 100755
index 0000000..5dff55f
--- /dev/null
+++ b/src/app/main/MainChatPanel.css
@@ -0,0 +1,752 @@
+.app-chat-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: calc(100dvh - 128px);
+  max-height: calc(100dvh - 128px);
+  background:
+    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 30%),
+    radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.12), transparent 34%),
+    linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(230, 240, 252, 0.94));
+}
+
+.app-chat-panel .ant-card-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+}
+
+.app-chat-panel__stack {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  width: 100%;
+}
+
+.app-chat-panel__view-switcher {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.app-chat-panel__view-switcher .ant-btn {
+  border-radius: 999px;
+}
+
+.app-chat-panel__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+
+.app-chat-panel__meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-chat-panel__meta-row--secondary {
+  flex-wrap: wrap;
+}
+
+.app-chat-panel__meta-tag.ant-tag {
+  margin-inline-end: 0;
+  padding-inline: 10px;
+  border-radius: 999px;
+  background: rgba(248, 250, 252, 0.92);
+  border: 1px solid rgba(191, 219, 254, 0.8);
+  color: #1e3a8a;
+}
+
+.app-chat-panel__connection-dot {
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
+}
+
+.app-chat-panel__connection-dot--connected {
+  background: #2563eb;
+}
+
+.app-chat-panel__connection-dot--disconnected {
+  background: #dc2626;
+}
+
+.app-chat-panel__status-copy {
+  flex: 1;
+}
+
+.app-chat-panel__messages {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  padding: 4px 2px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.app-chat-panel__messages::-webkit-scrollbar {
+  display: none;
+}
+
+.app-chat-message {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  max-width: min(78%, 720px);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.app-chat-message--codex {
+  align-self: flex-start;
+  background: linear-gradient(180deg, #e8f1ff, #f4f8ff);
+  border: 1px solid rgba(37, 99, 235, 0.16);
+}
+
+.app-chat-message--system {
+  align-self: center;
+  max-width: min(92%, 760px);
+  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.app-chat-message--user {
+  align-self: flex-end;
+  background: linear-gradient(180deg, #e9fff3, #f3fff8);
+  border: 1px solid rgba(22, 163, 74, 0.18);
+}
+
+.app-chat-message__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-chat-message__header-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.app-chat-message__header-meta .ant-btn {
+  color: rgba(71, 85, 105, 0.88);
+}
+
+.app-chat-message__body {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.app-chat-panel__composer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-end;
+  padding: 12px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  box-shadow: 0 18px 36px rgba(148, 163, 184, 0.16);
+}
+
+.app-chat-panel__composer-type {
+  width: 100%;
+}
+
+.app-chat-panel__composer-type .ant-select {
+  width: 100%;
+}
+
+.app-chat-panel__composer .ant-input-textarea {
+  flex: 1;
+  min-width: 240px;
+}
+
+.app-chat-panel__composer .ant-btn {
+  flex: none;
+  height: 44px;
+  padding-inline: 18px;
+  border-radius: 16px;
+}
+
+.app-chat-panel__error-layout {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.app-chat-panel__error-detail-screen {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  padding: 0;
+  background:
+    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
+}
+
+.app-chat-panel__error-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-chat-panel__error-toolbar-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.app-chat-panel__error-loading,
+.app-chat-panel__error-empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+}
+
+.app-chat-panel__error-content {
+  display: grid;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
+  gap: 14px;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.app-chat-panel__error-list,
+.app-chat-panel__error-detail {
+  min-height: 0;
+  overflow-y: auto;
+  border-radius: 18px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+}
+
+.app-chat-panel__error-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  max-height: min(78vh, 1120px);
+}
+
+.app-chat-panel__error-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+  padding: 9px 10px;
+  text-align: left;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.96));
+  cursor: pointer;
+}
+
+.app-chat-panel__error-item-title {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.app-chat-panel__error-item--active {
+  border-color: rgba(37, 99, 235, 0.4);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
+}
+
+.app-chat-panel__error-item-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.app-chat-panel__error-item-message.ant-typography {
+  margin: 0;
+  color: #475569;
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 11px;
+  line-height: 1.35;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.app-chat-panel__error-item-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.app-chat-panel__error-item-badges .ant-tag {
+  margin-inline-end: 0;
+  padding-inline: 6px;
+  font-size: 10px;
+  line-height: 18px;
+}
+
+.app-chat-panel__error-detail {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  padding: 20px 24px 24px;
+}
+
+.app-chat-panel__error-detail-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  z-index: 2;
+}
+
+.app-chat-panel__error-detail-actions .ant-btn {
+  flex: 0 0 auto;
+}
+
+.app-chat-panel__error-reference-stage {
+  display: grid;
+  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.app-chat-panel__error-reference-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 720px;
+  padding-right: 2px;
+  overflow-y: auto;
+}
+
+.app-chat-panel__error-reference-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 10px 12px;
+  text-align: left;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 14px;
+  background: rgba(248, 250, 252, 0.92);
+  cursor: pointer;
+}
+
+.app-chat-panel__error-reference-item-snippet.ant-typography {
+  margin: 0;
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.45;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.app-chat-panel__error-reference-item--active {
+  border-color: rgba(37, 99, 235, 0.42);
+  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16);
+}
+
+.app-chat-panel__error-reference-item-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.app-chat-panel__error-reference-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.app-chat-panel__error-reference-main-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-chat-panel__error-reference-main-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.app-chat-panel__error-reference-main-meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(248, 250, 252, 0.9);
+}
+
+.app-chat-panel__error-reference-main-meta-item .ant-typography:last-child {
+  word-break: break-word;
+}
+
+.app-chat-panel__error-reference-main-meta-item--wide {
+  grid-column: 1 / -1;
+}
+
+.app-chat-panel__error-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 32px;
+  padding-right: 48px;
+}
+
+.app-chat-panel__error-detail-header-meta {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.app-chat-panel__error-detail-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.app-chat-panel__error-summary-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.app-chat-panel__error-summary-pill {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96));
+}
+
+.app-chat-panel__error-detail-meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 14px;
+  background: rgba(241, 245, 249, 0.9);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.app-chat-panel__error-detail-line.ant-typography {
+  margin: 0;
+}
+
+.app-chat-panel__error-tabs .ant-tabs-content-holder,
+.app-chat-panel__error-tabs .ant-tabs-content,
+.app-chat-panel__error-tabs .ant-tabs-tabpane {
+  min-height: 0;
+}
+
+.app-chat-panel__error-tab-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.app-chat-panel__error-tabs .previewer-ui {
+  height: auto;
+}
+
+.app-chat-panel__error-tabs .previewer-ui__body.previewer-ui__scroll {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+.app-chat-panel__error-detail-modal .ant-modal {
+  max-width: calc(100vw - 32px);
+}
+
+.app-chat-panel__error-detail-modal .ant-modal-content {
+  padding: 20px;
+}
+
+.app-chat-panel__error-detail--modal {
+  padding: 0;
+}
+
+.app-chat-panel__error-detail--expanded {
+  height: 100%;
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
+}
+
+.app-chat-panel__error-reference-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(248, 250, 252, 0.88);
+}
+
+.app-chat-panel__error-image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.app-chat-panel__error-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 14px;
+}
+
+.app-chat-panel__error-preview-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  border-radius: 18px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.app-chat-panel__error-preview-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-chat-panel__error-preview-frame-wrap {
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: linear-gradient(180deg, rgba(241, 245, 249, 0.8), rgba(255, 255, 255, 0.96));
+}
+
+.app-chat-panel__error-preview-frame {
+  width: 100%;
+  height: 460px;
+  border: 0;
+  background: #ffffff;
+}
+
+.app-chat-panel__error-preview-card--stage {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.app-chat-panel__error-preview-frame--stage {
+  height: min(78vh, 980px);
+}
+
+.app-chat-panel__error-preview-url.ant-typography {
+  margin: 0;
+  word-break: break-all;
+}
+
+.app-chat-panel__error-source-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(248, 250, 252, 0.82);
+}
+
+.app-chat-panel__error-source-preview pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 12px;
+  line-height: 1.55;
+  color: #334155;
+  font-family:
+    'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+@media (max-width: 1280px) {
+  .app-chat-panel__error-content {
+    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
+  }
+
+  .app-chat-panel__error-reference-stage {
+    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 960px) {
+  .app-chat-panel__error-content,
+  .app-chat-panel__error-reference-stage,
+  .app-chat-panel__error-reference-main-meta,
+  .app-chat-panel__error-summary-strip,
+  .app-chat-panel__error-detail-meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-chat-panel__error-list {
+    max-height: none;
+  }
+
+  .app-chat-panel__error-preview-frame--stage {
+    height: min(62vh, 720px);
+  }
+}
+
+.app-chat-panel__error-detail-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-chat-panel__error-detail-block pre {
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border-radius: 14px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (max-width: 1080px) {
+  .app-chat-panel {
+    position: static;
+    height: calc(100dvh - 112px);
+    max-height: calc(100dvh - 112px);
+  }
+}
+
+@media (max-width: 768px) {
+  .app-chat-panel {
+    height: calc(100dvh - 76px);
+    max-height: calc(100dvh - 76px);
+    border-radius: 0;
+  }
+
+  .app-chat-panel.ant-card .ant-card-head {
+    padding: 0 16px;
+  }
+
+  .app-chat-panel.ant-card .ant-card-body {
+    padding: 12px;
+  }
+
+  .app-chat-message {
+    max-width: 92%;
+  }
+
+  .app-chat-panel__meta-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .app-chat-message__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .app-chat-panel__error-toolbar,
+  .app-chat-panel__error-item-top,
+  .app-chat-panel__error-reference-main-top,
+  .app-chat-panel__view-switcher {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .app-chat-panel__error-detail-header {
+    align-items: flex-start;
+    padding-right: 52px;
+  }
+
+  .app-chat-panel__error-content {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-chat-panel__error-detail-meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-chat-panel__error-reference-stage {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-chat-panel__error-summary-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .app-chat-panel__error-detail-actions {
+    top: 16px;
+    right: 16px;
+  }
+
+  .app-chat-panel__error-detail-actions .ant-btn {
+    width: auto;
+  }
+
+  .app-chat-panel__error-preview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .app-chat-panel__error-preview-frame {
+    height: 320px;
+  }
+
+  .app-chat-panel__error-preview-frame--stage {
+    height: 420px;
+  }
+
+  .app-chat-panel__composer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
diff --git a/src/app/main/MainChatPanel.hotfix.css b/src/app/main/MainChatPanel.hotfix.css
new file mode 100644
index 0000000..28bcb2e
--- /dev/null
+++ b/src/app/main/MainChatPanel.hotfix.css
@@ -0,0 +1,2723 @@
+.app-chat-panel {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  height: 100%;
+  max-height: none;
+  min-height: 0;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(243, 246, 252, 0.98), rgba(235, 240, 248, 0.98)),
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 24%);
+}
+
+.app-chat-panel--maximized {
+  position: fixed;
+  inset: 12px;
+  z-index: 1200;
+  height: auto;
+  max-height: none;
+  margin: 0;
+}
+
+.app-chat-panel--tablet-app {
+  width: 100%;
+  max-width: 100%;
+  margin-inline: 0;
+  border-radius: 0;
+  overflow: hidden;
+}
+
+.app-chat-panel__preview-modal.ant-modal {
+  z-index: 1400;
+}
+
+.app-chat-panel__preview-modal.ant-modal .ant-modal-mask {
+  z-index: 1399;
+}
+
+.app-chat-panel .ant-card-head {
+  flex: 0 0 auto;
+  position: relative;
+  z-index: 4;
+  overflow: visible;
+  background: rgba(247, 249, 252, 0.82);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.app-chat-panel .ant-card-head-title {
+  padding: 10px 0;
+  overflow: visible;
+  min-width: 0;
+}
+
+.app-chat-panel .ant-card-extra {
+  padding: 8px 0;
+  flex-shrink: 0;
+}
+
+.app-chat-panel .ant-card-extra .ant-space {
+  gap: 4px !important;
+  flex-wrap: nowrap;
+}
+
+.app-chat-panel .ant-card-extra .ant-btn,
+.app-chat-panel__meta .ant-btn {
+  height: 30px;
+  padding-inline: 10px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.app-chat-panel .ant-card-extra .ant-btn-icon-only,
+.app-chat-panel__meta .ant-btn-icon-only,
+.app-chat-message__expand.ant-btn-icon-only,
+.app-chat-panel__composer-action-buttons .ant-btn-icon-only {
+  width: 30px;
+  min-width: 30px;
+  padding-inline: 0;
+}
+
+.app-chat-panel .ant-card-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+  padding: 6px;
+  overflow: hidden;
+}
+
+.app-chat-panel--maximized .ant-card-body {
+  overflow: hidden;
+}
+
+.app-chat-panel__stack {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
+.app-chat-panel__conversation-shell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+}
+
+.app-chat-panel__conversation-list {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  min-width: 220px;
+  min-height: 0;
+  border-right: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.72);
+}
+
+.app-chat-panel__conversation-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.app-chat-panel__conversation-list-search {
+  padding: 8px 8px 0;
+}
+
+.app-chat-panel__conversation-list-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  padding: 8px;
+  overflow-y: auto;
+}
+
+.app-chat-panel__conversation-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.app-chat-panel__conversation-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 2px 0;
+}
+
+.app-chat-panel__conversation-section-header--muted {
+  margin-top: 6px;
+}
+
+.app-chat-panel__conversation-section-header--processing .app-chat-panel__conversation-section-title {
+  color: #b45309;
+}
+
+.app-chat-panel__conversation-section-header--processing .app-chat-panel__conversation-section-count {
+  background: rgba(253, 230, 138, 0.92);
+  color: #92400e;
+}
+
+.app-chat-panel__conversation-section-header--unread .app-chat-panel__conversation-section-title {
+  color: #1d4ed8;
+}
+
+.app-chat-panel__conversation-section-header--unread .app-chat-panel__conversation-section-count {
+  background: linear-gradient(180deg, rgba(191, 219, 254, 0.98), rgba(147, 197, 253, 0.96));
+  color: #1e3a8a;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.16);
+}
+
+.app-chat-panel__conversation-section-title {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  color: #1d4ed8;
+}
+
+.app-chat-panel__conversation-section-header--muted .app-chat-panel__conversation-section-title {
+  color: #64748b;
+}
+
+.app-chat-panel__conversation-section-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(191, 219, 254, 0.9);
+  color: #1e40af;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.app-chat-panel__conversation-section-header--muted .app-chat-panel__conversation-section-count {
+  background: rgba(226, 232, 240, 0.88);
+  color: #475569;
+}
+
+.app-chat-panel__conversation-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+  padding: 0;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(255, 255, 255, 0.82);
+  border-radius: 14px;
+  transition:
+    transform 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background 0.18s ease;
+}
+
+.app-chat-panel__conversation-item--active {
+  border-color: rgba(59, 130, 246, 0.35);
+  background: rgba(239, 246, 255, 0.95);
+  box-shadow: 0 10px 22px rgba(59, 130, 246, 0.08);
+}
+
+.app-chat-panel__conversation-item--processing {
+  border-color: rgba(245, 158, 11, 0.34);
+  background:
+    linear-gradient(90deg, rgba(255, 247, 237, 0.98), rgba(255, 251, 235, 0.98) 32%, rgba(255, 255, 255, 0.99) 72%),
+    #fff;
+  box-shadow:
+    inset 4px 0 0 rgba(245, 158, 11, 0.92),
+    0 10px 24px rgba(245, 158, 11, 0.12);
+}
+
+.app-chat-panel__conversation-item--unread {
+  border-color: rgba(37, 99, 235, 0.7);
+  background:
+    linear-gradient(90deg, rgba(147, 197, 253, 0.98), rgba(219, 234, 254, 0.98) 22%, rgba(239, 246, 255, 0.98) 46%, rgba(255, 255, 255, 0.99) 68%),
+    #fff;
+  box-shadow:
+    inset 4px 0 0 rgba(37, 99, 235, 1),
+    0 10px 24px rgba(37, 99, 235, 0.18);
+}
+
+.app-chat-panel__conversation-item--unread-section {
+  border-color: rgba(37, 99, 235, 0.82);
+  background:
+    linear-gradient(135deg, rgba(219, 234, 254, 1), rgba(239, 246, 255, 0.99) 40%, rgba(255, 255, 255, 1) 82%),
+    #fff;
+  box-shadow:
+    inset 6px 0 0 rgba(37, 99, 235, 0.96),
+    0 14px 30px rgba(37, 99, 235, 0.2);
+}
+
+.app-chat-panel__conversation-item--general {
+  opacity: 0.94;
+}
+
+.app-chat-panel__conversation-item--unread::after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #2563eb;
+  box-shadow:
+    0 0 0 4px rgba(191, 219, 254, 0.9),
+    0 0 12px rgba(37, 99, 235, 0.45);
+}
+
+.app-chat-panel__conversation-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+}
+
+.app-chat-panel__conversation-item--unread:hover {
+  box-shadow:
+    inset 4px 0 0 rgba(37, 99, 235, 1),
+    0 14px 30px rgba(37, 99, 235, 0.18);
+}
+
+.app-chat-panel__conversation-item--active.app-chat-panel__conversation-item--unread {
+  border-color: rgba(29, 78, 216, 0.78);
+  background:
+    linear-gradient(90deg, rgba(147, 197, 253, 1), rgba(191, 219, 254, 0.99) 24%, rgba(219, 234, 254, 0.99) 46%, rgba(239, 246, 255, 1) 70%),
+    #fff;
+  box-shadow:
+    inset 4px 0 0 rgba(29, 78, 216, 1),
+    0 12px 28px rgba(37, 99, 235, 0.22);
+}
+
+.app-chat-panel__conversation-item--active.app-chat-panel__conversation-item--unread-section {
+  border-color: rgba(29, 78, 216, 0.92);
+  background:
+    linear-gradient(135deg, rgba(191, 219, 254, 1), rgba(219, 234, 254, 1) 34%, rgba(239, 246, 255, 1) 66%, rgba(255, 255, 255, 1) 88%),
+    #fff;
+  box-shadow:
+    inset 6px 0 0 rgba(29, 78, 216, 1),
+    0 16px 34px rgba(37, 99, 235, 0.24);
+}
+
+.app-chat-panel__conversation-item--active.app-chat-panel__conversation-item--processing {
+  border-color: rgba(217, 119, 6, 0.58);
+  background:
+    linear-gradient(90deg, rgba(255, 237, 213, 1), rgba(254, 243, 199, 0.99) 26%, rgba(255, 251, 235, 0.99) 52%, rgba(255, 255, 255, 1) 74%),
+    #fff;
+  box-shadow:
+    inset 4px 0 0 rgba(217, 119, 6, 0.98),
+    0 12px 28px rgba(217, 119, 6, 0.16);
+}
+
+.app-chat-panel__conversation-item--processing.app-chat-panel__conversation-item--unread {
+  border-color: rgba(147, 51, 234, 0.48);
+  background:
+    linear-gradient(90deg, rgba(237, 233, 254, 0.98), rgba(219, 234, 254, 0.98) 24%, rgba(255, 251, 235, 0.98) 56%, rgba(255, 255, 255, 0.99) 76%),
+    #fff;
+  box-shadow:
+    inset 4px 0 0 rgba(124, 58, 237, 0.94),
+    0 12px 28px rgba(124, 58, 237, 0.16);
+}
+
+.app-chat-panel__conversation-item-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 8px 9px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.app-chat-panel__conversation-item-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+
+.app-chat-panel__conversation-item-title-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+  border-radius: 10px;
+}
+
+.app-chat-panel__conversation-item-title,
+.app-chat-panel__conversation-item-id,
+.app-chat-panel__conversation-item-preview,
+.app-chat-panel__conversation-item-time {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-chat-panel__conversation-item-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.app-chat-panel__conversation-item-unread-dot {
+  width: 10px;
+  height: 10px;
+  flex: none;
+  border-radius: 999px;
+  background: #2563eb;
+  box-shadow:
+    0 0 0 4px rgba(37, 99, 235, 0.16),
+    0 0 10px rgba(37, 99, 235, 0.28);
+  margin-top: 1px;
+}
+
+.app-chat-panel__conversation-item-unread-badge {
+  display: inline-flex;
+  align-items: center;
+  max-width: 92px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(29, 78, 216, 0.3);
+  background: linear-gradient(180deg, rgba(219, 234, 254, 1), rgba(191, 219, 254, 0.96));
+  color: #1d4ed8;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  white-space: nowrap;
+  flex: none;
+  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.14);
+}
+
+.app-chat-panel__conversation-item-time {
+  flex: none;
+  font-size: 10px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.app-chat-panel__conversation-item-id {
+  font-size: 10px;
+  color: #94a3b8;
+}
+
+.app-chat-panel__conversation-item-preview {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.app-chat-panel__conversation-item-flags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-title,
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-time,
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-id {
+  color: #1d4ed8;
+}
+
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-title-wrap {
+  padding: 2px 6px 2px 0;
+  background: linear-gradient(90deg, rgba(219, 234, 254, 0.92), rgba(219, 234, 254, 0));
+}
+
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-title {
+  font-weight: 700;
+}
+
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-preview {
+  color: #1e3a8a;
+  font-weight: 600;
+}
+
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-time {
+  background: rgba(219, 234, 254, 0.9);
+  padding: 2px 6px;
+  border-radius: 999px;
+}
+
+.app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-id {
+  color: #2563eb;
+}
+
+.app-chat-panel__conversation-item-status {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 1.3;
+  color: #0f172a;
+  background: rgba(226, 232, 240, 0.72);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-chat-panel__conversation-item-status--queued {
+  color: #92400e;
+  background: rgba(253, 230, 138, 0.56);
+}
+
+.app-chat-panel__conversation-item-status--started {
+  color: #1d4ed8;
+  background: rgba(191, 219, 254, 0.62);
+}
+
+.app-chat-panel__conversation-item-status--failed {
+  color: #b91c1c;
+  background: rgba(254, 202, 202, 0.6);
+}
+
+.app-chat-panel__conversation-item-flag {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  padding: 2px 7px;
+  border-radius: 999px;
+  font-size: 10px;
+  line-height: 1.3;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.app-chat-panel__conversation-item-flag--unread {
+  color: #1d4ed8;
+  background: rgba(191, 219, 254, 0.92);
+  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
+}
+
+.app-chat-panel__conversation-item-delete.ant-btn {
+  align-self: stretch;
+  flex-shrink: 0;
+  width: 28px;
+  min-width: 28px;
+  height: auto;
+  margin-right: 4px;
+  color: #94a3b8;
+}
+
+.app-chat-panel__conversation-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-chat-panel__conversation-empty,
+.app-chat-panel__conversation-empty-list {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.app-chat-panel__conversation-empty .ant-empty,
+.app-chat-panel__conversation-empty-list .ant-empty {
+  margin: auto;
+}
+
+.app-chat-preview-card--activity {
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 10px 12px 12px;
+  gap: 8px;
+  border-color: rgba(59, 130, 246, 0.18);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94)),
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 34%);
+  box-shadow:
+    0 8px 18px rgba(15, 23, 42, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.app-chat-preview-card--activity-collapsed {
+  margin-bottom: 0;
+}
+
+.app-chat-preview-card--activity-expanded {
+  margin-bottom: 0;
+}
+
+.app-chat-preview-card__body--activity {
+  padding-top: 6px;
+}
+
+.app-chat-preview-card__body--activity-summary {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.app-chat-preview-card--activity .app-chat-preview-card__meta,
+.app-chat-preview-card--activity .app-chat-preview-card__body,
+.app-chat-preview-card--activity .app-chat-panel__preview-rich,
+.app-chat-preview-card--activity .previewer-ui__editor,
+.app-chat-preview-card--activity .previewer-ui__editor-body {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.app-chat-preview-card--activity-collapsed .app-chat-preview-card__body--activity {
+  padding-top: 2px;
+}
+
+.app-chat-preview-card--activity-expanded .app-chat-preview-card__body--activity:last-child {
+  padding-top: 8px;
+}
+
+.app-chat-preview-card__glyph--activity {
+  color: #1d4ed8;
+  background: linear-gradient(180deg, rgba(191, 219, 254, 0.98), rgba(219, 234, 254, 0.94));
+}
+
+.app-chat-activity-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.app-chat-activity-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.12);
+  color: #1d4ed8;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.app-chat-activity-card__request-id.ant-typography {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-chat-activity-card__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(191, 219, 254, 0.52);
+}
+
+.app-chat-activity-card__summary-label.ant-typography {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 700;
+  color: #1d4ed8;
+}
+
+.app-chat-message__activity-status.ant-typography {
+  display: block;
+  margin: 0;
+  width: 100%;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #0f172a;
+  font-weight: 600;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.app-chat-preview-card--activity .app-chat-preview-card__header {
+  padding: 0;
+  align-items: flex-start;
+}
+
+.app-chat-preview-card--activity .app-chat-preview-card__toggle.ant-btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: auto;
+  min-width: fit-content;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.app-chat-activity-log {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  max-height: min(40vh, 360px);
+  padding: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.82);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+}
+
+.app-chat-activity-log__item {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.app-chat-activity-log__index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.app-chat-activity-log__line {
+  margin: 0;
+  width: 100%;
+  min-width: 0;
+  color: #334155;
+  padding: 6px 0 0;
+  font: 12px/1.5 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.app-chat-panel__conversation-view,
+.app-chat-panel__conversation-view-inner {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.app-chat-panel__conversation-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 20px;
+  background: rgba(248, 250, 252, 0.92);
+}
+
+.app-chat-panel__resource-strip {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.app-chat-panel__resource-strip-list {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 12px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.app-chat-panel__resource-strip-list::-webkit-scrollbar {
+  display: none;
+}
+
+.app-chat-panel__title-input {
+  width: min(240px, 48vw);
+}
+
+.app-chat-panel__title-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  max-width: 100%;
+  position: relative;
+  z-index: 5;
+}
+
+.app-chat-panel__title-copy {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+.app-chat-panel__title-copy .ant-typography {
+  margin: 0;
+}
+
+.app-chat-panel__title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.app-chat-panel__title-heading {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
+.app-chat-panel__title-heading .ant-typography {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-chat-panel__title-cluster {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  top: -2px;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, rgba(30, 64, 175, 0.92), rgba(37, 99, 235, 0.92));
+  color: #eff6ff;
+  box-shadow: 0 10px 20px rgba(30, 64, 175, 0.14);
+  flex: 0 0 auto;
+  overflow: visible;
+  z-index: 6;
+}
+
+.app-chat-panel__title-cluster-button,
+.app-chat-panel__title-cluster-mini {
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.app-chat-panel__title-cluster-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  font-size: 17px;
+}
+
+.app-chat-panel__title-cluster-button.is-active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.app-chat-panel__title-cluster-mini {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 31px;
+  height: 31px;
+  border-radius: 999px;
+  border: 1px solid rgba(191, 219, 254, 0.9);
+  background: #ffffff;
+  color: #334155;
+  font-size: 15px;
+  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(0.72);
+  z-index: 7;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease,
+    background-color 180ms ease,
+    color 180ms ease;
+}
+
+.app-chat-panel__title-cluster-mini.is-active {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.app-chat-panel__title-cluster-mini--chat {
+  top: 50%;
+  left: 50%;
+}
+
+.app-chat-panel__title-cluster-mini--runtime {
+  top: 50%;
+  left: 50%;
+}
+
+.app-chat-panel__title-cluster-mini--error {
+  top: 50%;
+  left: 50%;
+}
+
+.app-chat-panel__title-cluster.is-open .app-chat-panel__title-cluster-mini {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.app-chat-panel__title-cluster.is-open .app-chat-panel__title-cluster-mini--chat {
+  transform: translate(calc(-50% + 48px), calc(-50% + 0px)) scale(1);
+}
+
+.app-chat-panel__title-cluster.is-open .app-chat-panel__title-cluster-mini--runtime {
+  transform: translate(calc(-50% + 38px), calc(-50% + 28px)) scale(1);
+}
+
+.app-chat-panel__title-cluster.is-open .app-chat-panel__title-cluster-mini--error {
+  transform: translate(calc(-50% + 4px), calc(-50% + 48px)) scale(1);
+}
+
+@media (max-width: 900px) {
+  .app-chat-panel__title-row {
+    gap: 6px;
+  }
+}
+
+.app-chat-panel--maximized .app-chat-panel__stack,
+.app-chat-panel--maximized .app-chat-panel__conversation-shell {
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  .app-chat-panel__conversation-shell {
+    flex-direction: column;
+  }
+
+  .app-chat-panel__conversation-list {
+    width: 100%;
+    min-width: 0;
+    border-right: 0;
+  }
+
+  .app-chat-panel__conversation-main {
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .app-chat-panel .app-chat-panel__conversation-header .ant-typography {
+    font-size: 14px;
+  }
+
+  .app-chat-panel .app-chat-panel__system-status .ant-typography {
+    font-size: 12px;
+  }
+
+  .app-chat-panel .app-chat-message {
+    max-width: min(74%, 680px);
+    padding: 10px 13px;
+  }
+
+  .app-chat-panel .app-chat-message__header .ant-typography {
+    font-size: 14px;
+  }
+
+  .app-chat-panel .app-chat-message__header-meta .ant-typography {
+    font-size: 13px;
+  }
+
+  .app-chat-panel .app-chat-message__body.ant-typography {
+    font-size: 17px !important;
+    line-height: 1.65;
+  }
+
+  .app-chat-panel .app-chat-message__status {
+    font-size: 12px;
+  }
+
+  .app-chat-panel .app-chat-message__preview-meta .ant-typography {
+    font-size: 13px;
+  }
+
+  .app-chat-panel .app-chat-panel__composer .ant-input-textarea textarea {
+    font-size: 15px;
+    line-height: 1.5;
+  }
+
+  .app-chat-panel .app-chat-panel__composer-type .ant-select-selector,
+  .app-chat-panel .app-chat-panel__conversation-item-title {
+    font-size: 13px;
+  }
+
+  .app-chat-panel .app-chat-panel__conversation-item-preview {
+    font-size: 12px;
+  }
+}
+
+.app-chat-panel__conversation-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(248, 250, 252, 0.86);
+}
+
+.app-chat-panel__conversation-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.app-chat-panel__conversation-header .ant-typography {
+  margin: 0;
+  font-size: 13px;
+}
+
+.app-chat-panel__conversation-toggle.ant-btn {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+.app-chat-panel__conversation-toolbar {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  z-index: 4;
+  display: block;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.app-chat-panel__conversation-toggle.ant-btn {
+  pointer-events: auto;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.app-chat-panel__conversation-toggle.ant-btn,
+.app-chat-panel__conversation-toggle.ant-btn:hover,
+.app-chat-panel__conversation-toggle.ant-btn:focus,
+.app-chat-panel__conversation-toggle.ant-btn:active,
+.app-chat-panel__conversation-toggle.ant-btn-default,
+.app-chat-panel__conversation-toggle.ant-btn-default:hover,
+.app-chat-panel__conversation-toggle.ant-btn-default:focus,
+.app-chat-panel__conversation-toggle.ant-btn-default:active,
+.app-chat-panel__conversation-toggle.ant-btn-text,
+.app-chat-panel__conversation-toggle.ant-btn-text:hover,
+.app-chat-panel__conversation-toggle.ant-btn-text:focus,
+.app-chat-panel__conversation-toggle.ant-btn-text:active {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.app-chat-panel__messages {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  padding: 10px 12px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.app-chat-panel__history-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 0 auto 4px;
+  padding: 0 12px;
+  overflow: hidden;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.4;
+  transition: max-height 160ms ease, opacity 160ms ease, color 160ms ease;
+}
+
+.app-chat-panel__history-loader.is-armed {
+  color: #0f172a;
+}
+
+.app-chat-panel__history-loader.is-loading {
+  color: #1d4ed8;
+}
+
+.app-chat-panel__system-status-slot {
+  min-height: 0;
+  padding: 0;
+}
+
+.app-chat-panel__system-status-slot--bottom {
+  padding: 0 12px 8px;
+}
+
+.app-chat-panel__system-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 26px;
+  margin: 0;
+  padding: 6px 8px;
+  border-left: 2px solid rgba(59, 130, 246, 0.35);
+  background: rgba(248, 250, 252, 0.82);
+  transition: opacity 140ms ease;
+}
+
+.app-chat-panel__system-status .ant-typography {
+  margin: 0;
+  font-size: 11px;
+}
+
+.app-chat-panel__system-status--hidden {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.app-chat-panel__system-status-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.app-chat-panel__system-status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: #60a5fa;
+  opacity: 0.35;
+  animation: app-chat-message-loading 1.2s ease-in-out infinite;
+}
+
+.app-chat-panel__system-status-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.app-chat-panel__system-status-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.app-chat-message {
+  --app-chat-message-fade-end: rgba(248, 250, 252, 0.96);
+  gap: 4px;
+  width: fit-content;
+  max-width: min(72%, 560px);
+  min-width: 0;
+  padding: 8px 11px;
+  border-radius: 0;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
+  align-self: flex-start;
+  margin-left: 0;
+  margin-right: 56px;
+}
+
+.app-chat-message-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.app-chat-message-stack--user {
+  align-items: flex-end;
+}
+
+.app-chat-message-stack__previews {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.app-chat-message--codex {
+  --app-chat-message-fade-end: rgba(248, 251, 255, 0.96);
+  margin-left: 8px;
+  margin-right: 64px;
+  background: linear-gradient(180deg, #edf4ff, #f8fbff);
+}
+
+.app-chat-message--system-inline {
+  --app-chat-message-fade-end: rgba(241, 245, 249, 0.96);
+  margin-left: 8px;
+  margin-right: 64px;
+  border-left: 2px solid rgba(59, 130, 246, 0.32);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
+}
+
+.app-chat-message__header-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.app-chat-message__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+}
+
+.app-chat-message__header .ant-typography {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.app-chat-message__header-meta > .ant-typography:first-child {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-chat-message__header-action {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  margin-left: auto;
+  flex: none;
+}
+
+.app-chat-message__header-meta .ant-typography {
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.app-chat-message__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.app-chat-message__status--retrying {
+  color: #0369a1;
+}
+
+.app-chat-message__status--failed {
+  color: #b91c1c;
+}
+
+.app-chat-message__retry.ant-btn,
+.app-chat-message__cancel.ant-btn {
+  height: 22px;
+  padding-inline: 4px;
+  margin-left: 2px;
+}
+
+.app-chat-message__retry.ant-btn {
+  color: #b91c1c;
+}
+
+.app-chat-message__retry.ant-btn:hover,
+.app-chat-message__retry.ant-btn:focus {
+  color: #991b1b;
+}
+
+.app-chat-message__delete.ant-btn {
+  min-width: 22px;
+  padding-inline: 2px;
+}
+
+.app-chat-message--user {
+  --app-chat-message-fade-end: rgba(238, 252, 244, 0.96);
+  align-self: flex-end;
+  margin-left: 64px;
+  margin-right: 8px;
+  background: linear-gradient(180deg, #dff7ea, #eefcf4);
+}
+
+.app-chat-message--user .app-chat-message__body,
+.app-chat-message--user .app-chat-message__expand {
+  text-align: right;
+}
+
+.app-chat-message__body {
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.app-chat-message__body--collapsed {
+  position: relative;
+  max-height: calc(1.45em * 6);
+  overflow: hidden;
+  padding-bottom: 16px;
+}
+
+.app-chat-message__body--collapsed::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 28px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--app-chat-message-fade-end) 78%);
+  pointer-events: none;
+}
+
+.app-chat-message__body--system-status {
+  color: #475569;
+}
+
+.app-chat-message__request-detail {
+  width: 100%;
+  margin-top: 2px;
+  color: #7f1d1d;
+  font-size: 11px;
+  line-height: 1.45;
+  text-align: right;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.app-chat-preview-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-width: none;
+  padding: 8px 10px 10px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.92));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+  overflow: hidden;
+  height: auto;
+}
+
+.app-chat-preview-card--collapsed {
+  gap: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.app-chat-message-stack--codex .app-chat-preview-card,
+.app-chat-message-stack--system .app-chat-preview-card {
+  margin-left: 8px;
+  margin-right: 24px;
+}
+
+.app-chat-message-stack--user .app-chat-preview-card {
+  margin-left: 24px;
+  margin-right: 8px;
+}
+
+.app-chat-preview-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+}
+
+.app-chat-preview-card--collapsed .app-chat-preview-card__header {
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.92));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.app-chat-preview-card__meta {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.app-chat-preview-card__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  color: #475569;
+  background: rgba(226, 232, 240, 0.9);
+}
+
+.app-chat-preview-card__titles {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.app-chat-preview-card__label.ant-typography,
+.app-chat-preview-card__kind.ant-typography {
+  margin: 0;
+  max-width: 100%;
+}
+
+.app-chat-preview-card__label.ant-typography {
+  font-size: 12px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  color: #0f172a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-chat-preview-card__kind.ant-typography {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-chat-preview-card__toggle.ant-btn {
+  height: 20px;
+  min-width: 20px;
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+@media (max-width: 1180px) {
+  .app-chat-panel {
+    height: 100%;
+    max-height: none;
+    border-radius: 0;
+  }
+
+  .app-chat-panel--tablet-app {
+    align-self: stretch;
+    width: 100%;
+    max-width: 100%;
+    margin-inline: 0;
+    border-radius: 0;
+    overflow: hidden;
+  }
+
+  .app-chat-panel.ant-card .ant-card-head {
+    padding: 0 14px;
+  }
+
+  .app-chat-panel.ant-card .ant-card-body {
+    padding: 10px;
+  }
+
+  .app-chat-panel__conversation-shell,
+  .app-chat-panel__conversation-main,
+  .app-chat-panel__conversation-view,
+  .app-chat-panel__conversation-view-inner,
+  .app-chat-panel__messages,
+  .app-chat-panel__composer,
+  .app-chat-panel__composer-input-shell {
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .app-chat-message {
+    width: auto;
+    max-width: calc(100% - 40px);
+    margin-right: 20px;
+  }
+
+  .app-chat-message--codex,
+  .app-chat-message--system-inline {
+    margin-left: 4px;
+    margin-right: 20px;
+  }
+
+  .app-chat-message--user {
+    margin-left: 20px;
+    margin-right: 4px;
+  }
+
+  .app-chat-message-stack--codex .app-chat-preview-card,
+  .app-chat-message-stack--system .app-chat-preview-card,
+  .app-chat-message-stack--user .app-chat-preview-card {
+    margin-left: 4px;
+    margin-right: 4px;
+    max-width: calc(100% - 8px);
+  }
+
+  .app-chat-panel__composer-queue {
+    width: min(220px, calc(100% - 88px));
+  }
+}
+
+.app-chat-preview-card__body {
+  display: flex;
+  min-height: 0;
+  border-top: 1px solid rgba(148, 163, 184, 0.18);
+  padding-top: 8px;
+  width: 100%;
+}
+
+.app-chat-panel__preview-rich {
+  width: 100%;
+  min-width: 0;
+}
+
+.app-chat-panel__preview-rich .previewer-ui__editor,
+.app-chat-panel__preview-rich .codex-diff-previewer__diff-list,
+.app-chat-panel__preview-rich .codex-diff-previewer__diff-section {
+  width: 100%;
+}
+
+.app-chat-panel__preview-rich .previewer-ui__editor {
+  border-color: rgba(15, 23, 42, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.app-chat-panel__preview-rich .previewer-ui__editor-tab {
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
+.app-chat-panel__preview-rich .previewer-ui__editor-body {
+  max-height: 420px;
+  overflow: auto;
+}
+
+.app-chat-panel__preview-rich .codex-diff-previewer__diff-toolbar {
+  display: none;
+}
+
+.app-chat-panel__preview-rich .codex-diff-previewer__diff-section {
+  border-radius: 0;
+}
+
+.app-chat-panel__preview-rich .codex-diff-previewer__file-name {
+  color: #e2e8f0;
+}
+
+.app-chat-panel__preview-rich--markdown {
+  padding: 4px 2px 0;
+}
+
+.app-chat-message__preview-image,
+.app-chat-message__preview-video,
+.app-chat-message__preview-frame {
+  width: 100%;
+  max-height: 200px;
+  min-height: 120px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  object-fit: contain;
+  background: #f8fafc;
+}
+
+.app-chat-message__preview-text {
+  width: 100%;
+  max-height: 180px;
+  margin: 0;
+  padding: 8px;
+  overflow: auto;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  font: 11px/1.5 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+.app-chat-message__expand.ant-btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: auto;
+  min-width: 0;
+  height: 26px;
+  padding-inline: 8px;
+  font-size: 12px;
+  color: #475569;
+  border-radius: 999px;
+}
+
+.app-chat-message__expand.ant-btn:hover,
+.app-chat-message__expand.ant-btn:focus {
+  color: #0f172a;
+  background: rgba(148, 163, 184, 0.12);
+}
+
+.app-chat-panel__scroll-jump {
+  position: absolute;
+  left: 50%;
+  bottom: clamp(132px, 18vh, 176px);
+  transform: translateX(-50%);
+  z-index: 3;
+}
+
+.app-chat-panel__scroll-jump .ant-btn {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 999px;
+  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.14);
+}
+
+.app-chat-panel__composer {
+  gap: 8px;
+  padding: 10px 12px 12px;
+  border-top: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 0;
+  background: rgba(248, 250, 252, 0.94);
+  box-shadow: none;
+}
+
+.app-chat-panel__composer-input-shell {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.app-chat-panel__composer-queue {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  width: min(320px, calc(100% - 112px));
+  pointer-events: auto;
+}
+
+.app-chat-panel__composer-queue-count {
+  padding: 2px 8px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+
+.app-chat-panel__composer-queue-list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  width: 100%;
+  max-height: 188px;
+  overflow-y: auto;
+}
+
+.app-chat-panel__composer-queue-chip,
+.app-chat-panel__composer-queue-more {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 10px;
+  border: 1px solid rgba(96, 165, 250, 0.2);
+  border-radius: 12px;
+  background: rgba(239, 246, 255, 0.96);
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
+  color: #1e3a8a;
+}
+
+.app-chat-panel__composer-queue-chip-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.app-chat-panel__composer-queue-chip-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+}
+
+.app-chat-panel__composer-queue-chip-actions .ant-btn {
+  color: #1d4ed8;
+}
+
+.app-chat-panel__composer-queue-order {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.12);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.app-chat-panel__composer-queue-text,
+.app-chat-panel__composer-queue-more {
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.app-chat-panel__composer-queue-text {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-chat-panel__composer .ant-input-textarea {
+  width: 100%;
+  min-width: 0;
+}
+
+.app-chat-panel__composer .ant-input-textarea textarea {
+  width: 100%;
+  font-size: 13px;
+  line-height: 1.4;
+  min-height: 88px;
+  padding: 8px 14px 12px;
+}
+
+.app-chat-panel__composer-input-shell--with-queue .ant-input-textarea textarea {
+  padding-top: 76px;
+}
+
+.app-chat-panel__composer-topline,
+.app-chat-panel__composer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.app-chat-panel__composer-topline {
+  width: 100%;
+  justify-content: stretch;
+  flex-wrap: nowrap;
+}
+
+.app-chat-panel__composer-utility-buttons {
+  flex: none;
+}
+
+.app-chat-panel__composer-type {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-chat-panel__composer-action-buttons {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.app-chat-panel__composer-utility-buttons {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.app-chat-panel__composer-file-input {
+  display: none;
+}
+
+.app-chat-panel__composer-attachment-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+}
+
+.app-chat-panel__composer-attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 4px 4px 4px 8px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.96);
+  color: #334155;
+}
+
+.app-chat-panel__composer-attachment-name {
+  max-width: min(240px, 52vw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.app-chat-panel__composer-attachment-remove.ant-btn {
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 999px;
+  color: #64748b;
+}
+
+.app-chat-panel__composer .ant-btn {
+  height: 28px;
+  padding-inline: 8px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.app-chat-panel__composer-action-buttons .ant-btn,
+.app-chat-panel__composer-type .ant-select-selector {
+  min-height: 28px;
+}
+
+.app-chat-panel__composer-action-buttons .ant-btn-icon-only {
+  width: 28px;
+  min-width: 28px;
+  padding-inline: 0;
+}
+
+.app-chat-panel__composer-type .ant-select-selector {
+  padding-block: 2px;
+}
+
+.app-chat-panel__composer-type-note,
+.app-chat-panel__composer-actions .ant-typography {
+  font-size: 12px;
+}
+
+.app-chat-panel__composer-hint,
+.app-chat-panel__composer-type-note {
+  display: block;
+}
+
+.app-chat-panel__type-option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.app-chat-panel__resource-strip {
+  position: absolute;
+  top: 38px;
+  right: 8px;
+  left: auto;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: min(240px, calc(100% - 16px));
+  max-height: min(28vh, 180px);
+  padding: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 12px;
+  background: rgba(246, 248, 252, 0.96);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
+  overflow: hidden;
+}
+
+.app-chat-panel__resource-strip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow: auto;
+}
+
+.app-chat-panel__resource-strip-empty.ant-typography {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.app-chat-panel__resource-chip {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #0f172a;
+  cursor: pointer;
+  font-size: 11px;
+  text-align: left;
+}
+
+.app-chat-panel__preview-stage {
+  display: flex;
+  min-height: 0;
+  padding: 0 18px;
+}
+
+.app-chat-panel__preview-stage--modal {
+  padding: 0;
+}
+
+.app-chat-panel__preview-stage > * {
+  width: 100%;
+}
+
+.app-chat-panel__preview-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 220px;
+}
+
+.app-chat-panel__conversation-view {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.app-chat-panel__conversation-view-inner {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-chat-panel__conversation-view-inner.is-loading {
+  pointer-events: none;
+}
+
+.app-chat-panel__conversation-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex: 1;
+  min-height: 360px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 12px;
+  padding: 32px 24px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top, rgba(191, 219, 254, 0.45), transparent 52%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.86));
+  backdrop-filter: blur(6px);
+  text-align: center;
+}
+
+.app-chat-panel__preview-image,
+.app-chat-panel__preview-video,
+.app-chat-panel__preview-frame {
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 16px;
+  background: #0f172a;
+  object-fit: contain;
+}
+
+.app-chat-panel__preview-frame {
+  background: #fff;
+}
+
+.app-chat-panel__preview-text {
+  min-height: 320px;
+  margin: 0;
+  padding: 16px;
+  overflow: auto;
+  border-radius: 16px;
+  background: #0f172a;
+  color: #dbeafe;
+  font: 13px/1.6 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+.app-chat-panel__preview-file {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  min-height: 220px;
+  padding: 18px;
+  border-radius: 16px;
+  background: rgba(248, 250, 252, 0.88);
+  border: 1px dashed rgba(148, 163, 184, 0.35);
+}
+
+.app-chat-panel__preview-modal .ant-modal-body {
+  padding-top: 12px;
+}
+
+.app-chat-panel__preview-modal {
+  z-index: 1600;
+}
+
+.app-chat-panel__delete-confirm-modal {
+  z-index: 1700 !important;
+}
+
+.app-chat-panel__delete-confirm-modal .ant-modal-content {
+  border-radius: 18px;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
+}
+
+.app-chat-panel__preview-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.app-chat-panel__preview-modal-meta {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.app-chat-panel__connection-dot--connecting {
+  background: #f59e0b;
+}
+
+@keyframes app-chat-message-loading {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+
+  40% {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 720px) {
+  .app-chat-panel {
+    height: 100%;
+    min-height: 100%;
+    border-radius: 0;
+    overflow: hidden;
+  }
+
+  .app-chat-panel .ant-card-head {
+    flex: 0 0 auto;
+    padding-inline: 8px;
+  }
+
+  .app-chat-panel .ant-card-head-wrapper {
+    min-width: 0;
+    gap: 8px;
+  }
+
+  .app-chat-panel .ant-card-head-title,
+  .app-chat-panel .ant-card-extra {
+    padding-block: 8px;
+  }
+
+  .app-chat-panel .ant-card-head-title {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .app-chat-panel .ant-card-extra {
+    flex: 0 0 auto;
+    min-width: fit-content;
+  }
+
+  .app-chat-panel .ant-card-body {
+    padding: 0;
+  }
+
+  .app-chat-panel__stack,
+  .app-chat-panel__conversation-shell,
+  .app-chat-panel__conversation-list,
+  .app-chat-panel__conversation-main {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .app-chat-panel__conversation-shell {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    box-shadow: none;
+    overscroll-behavior-y: none;
+  }
+
+  .app-chat-panel__conversation-list-header {
+    padding-inline: 10px;
+  }
+
+  .app-chat-panel__conversation-list-search {
+    padding-inline: 8px;
+  }
+
+  .app-chat-panel__conversation-list-body {
+    padding-inline: 8px;
+    padding-bottom: 8px;
+    overscroll-behavior-y: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .app-chat-panel__messages,
+  .app-chat-panel__composer,
+  .app-chat-panel__resource-strip {
+    overscroll-behavior-y: none;
+  }
+
+  .app-chat-panel__conversation-header,
+  .app-chat-panel__composer-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .app-chat-panel__composer-topline {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .app-chat-panel__conversation-badges {
+    align-items: flex-start;
+  }
+
+  .app-chat-message {
+    max-width: 100%;
+  }
+
+  .app-chat-panel__messages,
+  .app-chat-panel__composer,
+  .app-chat-panel__preview-stage,
+  .app-chat-panel__resource-strip {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .app-chat-panel__resource-strip-list {
+    overflow: auto;
+    flex-wrap: nowrap;
+    padding-bottom: 2px;
+  }
+
+  .app-chat-panel__resource-chip {
+    min-width: 160px;
+  }
+
+  .app-chat-panel__preview-image,
+  .app-chat-panel__preview-video,
+  .app-chat-panel__preview-frame,
+  .app-chat-panel__preview-text {
+    min-height: 220px;
+  }
+}
+
+.app-chat-runtime {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.app-chat-runtime__summary-strip {
+  display: block;
+}
+
+.app-chat-runtime__summary-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
+}
+
+.app-chat-runtime__summary-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.app-chat-runtime__summary-metric .ant-typography {
+  margin: 0;
+}
+
+.app-chat-runtime__summary-status.ant-typography {
+  margin-inline-start: auto;
+}
+
+.app-chat-runtime__session-strip {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+  min-width: 0;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+
+.app-chat-runtime__session-chip {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 180px;
+  padding: 10px 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(248, 250, 252, 0.88);
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.app-chat-runtime__session-chip--active {
+  border-color: rgba(37, 99, 235, 0.35);
+  background: rgba(239, 246, 255, 0.96);
+}
+
+.app-chat-runtime__content {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.app-chat-runtime__section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.82);
+  overflow: hidden;
+}
+
+.app-chat-runtime__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.app-chat-runtime__list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  min-width: 0;
+  padding: 12px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.app-chat-runtime__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+}
+
+.app-chat-runtime__job {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 14px;
+  border-radius: 18px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.96));
+}
+
+.app-chat-runtime__job--active {
+  border-color: rgba(37, 99, 235, 0.32);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
+}
+
+.app-chat-runtime__job-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-chat-runtime__job-actions {
+  justify-content: flex-end;
+}
+
+.app-chat-runtime__job-actions .ant-btn {
+  touch-action: manipulation;
+}
+
+.app-chat-runtime__job-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.app-chat-runtime__job-summary.ant-typography {
+  margin: 0;
+  color: #0f172a;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.app-chat-runtime__job-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 10px;
+}
+
+.app-chat-runtime__log-modal {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  height: calc(100dvh - 56px);
+  padding: 20px 24px 24px;
+  background:
+    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
+    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
+}
+
+.app-chat-runtime__drawer .ant-drawer-content {
+  background: transparent;
+}
+
+.app-chat-runtime__drawer .ant-drawer-header {
+  padding: 18px 24px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(18px);
+}
+
+.app-chat-runtime__drawer .ant-drawer-body {
+  display: flex;
+  min-height: 0;
+}
+
+.app-chat-runtime__log-state {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 24px;
+}
+
+.app-chat-runtime__log-viewer {
+  margin: 0;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+  border-radius: 20px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 12px;
+  line-height: 1.55;
+  font-family:
+    'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+@media (max-width: 960px) {
+  .app-chat-runtime__content,
+  .app-chat-runtime__job-meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .app-chat-runtime {
+    overflow: hidden;
+  }
+
+  .app-chat-runtime__summary-card {
+    padding: 14px;
+    border-radius: 16px;
+    align-items: flex-start;
+    gap: 10px 14px;
+  }
+
+  .app-chat-runtime__summary-metric {
+    flex: 1 1 calc(50% - 8px);
+  }
+
+  .app-chat-runtime__summary-status.ant-typography {
+    width: 100%;
+    margin-inline-start: 0;
+  }
+
+  .app-chat-runtime__session-strip {
+    margin-inline: -2px;
+    padding-inline: 2px;
+    padding-bottom: 6px;
+  }
+
+  .app-chat-runtime__session-chip {
+    min-width: min(240px, 82vw);
+    padding: 12px 14px;
+    border-radius: 16px;
+  }
+
+  .app-chat-runtime__content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    padding-right: 2px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .app-chat-runtime__section {
+    flex: 0 0 auto;
+    min-height: 320px;
+    border-radius: 18px;
+  }
+
+  .app-chat-runtime__section--recent {
+    min-height: 260px;
+  }
+
+  .app-chat-runtime__section-header {
+    padding: 14px;
+  }
+
+  .app-chat-runtime__list {
+    padding: 10px;
+    overflow-y: visible;
+  }
+
+  .app-chat-runtime__job {
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  .app-chat-runtime__job-top {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .app-chat-runtime__job-top > .ant-btn {
+    width: 100%;
+    min-height: 40px;
+    border-radius: 12px;
+  }
+
+  .app-chat-runtime__job-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .app-chat-runtime__job-actions .ant-space-item {
+    flex: 1 1 calc(50% - 4px);
+    min-width: 0;
+  }
+
+  .app-chat-runtime__job-actions .ant-btn {
+    width: 100%;
+    min-height: 40px;
+    padding-inline: 12px;
+    border-radius: 12px;
+  }
+
+  .app-chat-runtime__job-meta {
+    gap: 8px;
+  }
+
+  .app-chat-runtime__log-modal {
+    height: calc(100dvh - 52px);
+    padding: 16px;
+  }
+
+  .app-chat-runtime__drawer .ant-drawer-header {
+    padding: 14px 16px;
+  }
+
+  .app-chat-runtime__log-viewer {
+    padding: 12px;
+    font-size: 11px;
+  }
+}
+
+.chat-v2 {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.chat-v2__toolbar {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0 12px;
+}
+
+.chat-v2__chat-layout {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+}
+
+.chat-v2__conversation-list .ant-list-item {
+  padding: 0;
+  border-block-end: 0;
+}
+
+.chat-v2__conversation-item {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.chat-v2__conversation-item:hover {
+  background: rgba(15, 23, 42, 0.04);
+}
+
+.chat-v2__conversation-item:focus,
+.chat-v2__conversation-item:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.chat-v2__conversation-item--active {
+  background: rgba(22, 119, 255, 0.08);
+}
+
+.chat-v2__conversation-title {
+  color: #111827;
+  font-weight: 600;
+}
+
+.chat-v2__conversation-preview {
+  color: #6b7280;
+  font-size: 13px;
+}
+
+@media (min-width: 1181px) {
+  .app-chat-panel {
+    background:
+      linear-gradient(180deg, rgba(244, 246, 248, 0.98), rgba(238, 241, 244, 0.98)),
+      radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 28%);
+  }
+
+  .app-chat-panel .ant-card-head {
+    background: rgba(248, 249, 250, 0.9);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  }
+
+  .app-chat-panel__conversation-shell {
+    border: 1px solid rgba(148, 163, 184, 0.16);
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
+  }
+
+  .app-chat-panel__conversation-list {
+    background: rgba(246, 247, 249, 0.92);
+    border-right: 1px solid rgba(148, 163, 184, 0.12);
+  }
+
+  .app-chat-panel__conversation-section-title,
+  .app-chat-panel__conversation-section-header--unread .app-chat-panel__conversation-section-title {
+    color: #475569;
+  }
+
+  .app-chat-panel__conversation-section-count,
+  .app-chat-panel__conversation-section-header--unread .app-chat-panel__conversation-section-count {
+    background: rgba(226, 232, 240, 0.92);
+    color: #475569;
+    box-shadow: none;
+  }
+
+  .app-chat-panel__conversation-item {
+    border-color: rgba(148, 163, 184, 0.14);
+    background: rgba(255, 255, 255, 0.92);
+  }
+
+  .app-chat-panel__conversation-item--active {
+    border-color: rgba(100, 116, 139, 0.26);
+    background: rgba(248, 250, 252, 0.98);
+    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
+  }
+
+  .app-chat-panel__conversation-item--unread {
+    border-color: rgba(148, 163, 184, 0.28);
+    background:
+      linear-gradient(90deg, rgba(241, 245, 249, 0.98), rgba(248, 250, 252, 0.99) 42%, rgba(255, 255, 255, 0.99) 78%),
+      #fff;
+    box-shadow:
+      inset 4px 0 0 rgba(100, 116, 139, 0.62),
+      0 10px 24px rgba(15, 23, 42, 0.06);
+  }
+
+  .app-chat-panel__conversation-item--unread-section {
+    border-color: rgba(148, 163, 184, 0.32);
+    background:
+      linear-gradient(135deg, rgba(241, 245, 249, 1), rgba(248, 250, 252, 0.99) 46%, rgba(255, 255, 255, 1) 86%),
+      #fff;
+    box-shadow:
+      inset 6px 0 0 rgba(100, 116, 139, 0.68),
+      0 12px 26px rgba(15, 23, 42, 0.07);
+  }
+
+  .app-chat-panel__conversation-item--unread::after,
+  .app-chat-panel__conversation-item-unread-dot {
+    background: #64748b;
+    box-shadow:
+      0 0 0 4px rgba(226, 232, 240, 0.9),
+      0 0 8px rgba(100, 116, 139, 0.18);
+  }
+
+  .app-chat-panel__conversation-item--active.app-chat-panel__conversation-item--unread {
+    border-color: rgba(100, 116, 139, 0.34);
+    background:
+      linear-gradient(90deg, rgba(226, 232, 240, 1), rgba(241, 245, 249, 0.99) 34%, rgba(248, 250, 252, 1) 68%, rgba(255, 255, 255, 1) 88%),
+      #fff;
+    box-shadow:
+      inset 4px 0 0 rgba(100, 116, 139, 0.82),
+      0 12px 24px rgba(15, 23, 42, 0.08);
+  }
+
+  .app-chat-panel__conversation-item--active.app-chat-panel__conversation-item--unread-section {
+    border-color: rgba(100, 116, 139, 0.38);
+    background:
+      linear-gradient(135deg, rgba(226, 232, 240, 1), rgba(241, 245, 249, 1) 36%, rgba(248, 250, 252, 1) 68%, rgba(255, 255, 255, 1) 88%),
+      #fff;
+    box-shadow:
+      inset 6px 0 0 rgba(100, 116, 139, 0.84),
+      0 14px 28px rgba(15, 23, 42, 0.08);
+  }
+
+  .app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-title,
+  .app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-time,
+  .app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-id,
+  .app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-preview {
+    color: #334155;
+  }
+
+  .app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-title-wrap {
+    background: linear-gradient(90deg, rgba(241, 245, 249, 0.92), rgba(241, 245, 249, 0));
+  }
+
+  .app-chat-panel__conversation-item--unread .app-chat-panel__conversation-item-time {
+    background: rgba(241, 245, 249, 0.96);
+  }
+
+  .app-chat-panel__conversation-item-flag--unread,
+  .app-chat-panel__conversation-item-unread-badge {
+    color: #475569;
+    background: rgba(226, 232, 240, 0.92);
+    border-color: rgba(148, 163, 184, 0.24);
+    box-shadow: none;
+  }
+}
diff --git a/src/app/main/MainChatPanel.tsx b/src/app/main/MainChatPanel.tsx
new file mode 100644
index 0000000..3797383
--- /dev/null
+++ b/src/app/main/MainChatPanel.tsx
@@ -0,0 +1,2502 @@
+import {
+  AppstoreOutlined,
+  BellFilled,
+  BellOutlined,
+  CloseOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  ExclamationCircleOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+  LinkOutlined,
+  MessageOutlined,
+  PaperClipOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Card, Empty, Input, Modal, Space, Tag, Typography, message } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+import { useCallback, useEffect, useMemo, useRef, useState, type SetStateAction } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAppStore } from '../../store';
+import { useAppConfig } from './appConfig';
+import { chatConnectionGateway, chatGateway } from './chatV2';
+import { emitChatConversationsUpdated } from './chatV2/data/chatClientEvents';
+import { useConversationComposerController } from './chatV2/hooks/useConversationComposerController';
+import { useConversationRoomActionsController } from './chatV2/hooks/useConversationRoomActionsController';
+import { useConversationListController } from './chatV2/hooks/useConversationListController';
+import { useConversationRoomController } from './chatV2/hooks/useConversationRoomController';
+import { useRuntimeController } from './chatV2/hooks/useRuntimeController';
+import { useConversationViewController } from './chatV2/hooks/useConversationViewController';
+import { useConversationViewportController } from './chatV2/hooks/useConversationViewportController';
+import { ChatPreviewBody } from './mainChatPanel/ChatPreviewBody';
+import { normalizeChatResourceUrl } from './mainChatPanel/chatResourceUrl';
+import { setSharedActiveConversationSnapshot } from './mainChatPanel/sharedActiveConversation';
+import { canUseChatType, resolveCurrentChatPermissionRoles, useChatTypeRegistry } from './chatTypeAccess';
+import { useTokenAccess } from './tokenAccess';
+import {
+  ChatConversationView,
+  ChatRuntimeDashboard,
+  copyText,
+  createActivityLogPlaceholder,
+  createChatMessage,
+  createLocalMessage,
+  ErrorLogViewer,
+  getStoredChatSessionLastTypeId,
+  isPreparingChatReplyText,
+  setStoredChatSessionLastTypeId,
+  upsertChatMessage,
+  useErrorLogs,
+} from './mainChatPanel';
+import type {
+  ChatComposerAttachment,
+  ChatConversationDetailResponse,
+  ChatConversationRequest,
+  ChatConversationSummary,
+  ChatJobEvent,
+  ChatMessage,
+  ChatPanelView,
+  ChatRuntimeSnapshot,
+  ChatViewContext,
+  MainChatPanelProps,
+} from './mainChatPanel/types';
+import './MainChatPanel.css';
+import './MainChatPanel.hotfix.css';
+
+const { Text } = Typography;
+
+type ChatTypeOption = {
+  value: string;
+  label: string;
+  description: string;
+  isTemplate: boolean;
+  disabled?: boolean;
+};
+
+type PreviewKind = 'image' | 'video' | 'markdown' | 'code' | 'document' | 'pdf' | 'file';
+
+type PreviewItem = {
+  id: string;
+  label: string;
+  url: string;
+  kind: PreviewKind;
+  source: 'message' | 'context';
+};
+
+type PendingChatRequest = {
+  sessionId: string;
+  requestId: string;
+  text: string;
+  mode: 'queue' | 'direct';
+  chatTypeId: string;
+  chatTypeLabel: string;
+  chatTypeDescription: string;
+  chatTypeIsTemplate: boolean;
+  retryCount: number;
+  failed: boolean;
+};
+
+type PendingContextConfirm = {
+  mode: 'queue' | 'direct';
+  text: string;
+  chatTypeId: string;
+  chatTypeLabel: string;
+  chatTypeDescription: string;
+  chatTypeIsTemplate: boolean;
+  includedContextCount: number;
+  omittedContextCount: number;
+};
+
+const CHAT_MAX_RETRY_ATTEMPTS = 5;
+const CHAT_ACTIVITY_MESSAGE_PREFIX = '[[activity-log]]';
+
+function isStandaloneDisplayMode() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return (
+    window.matchMedia?.('(display-mode: standalone)').matches === true ||
+    (window.navigator as Navigator & { standalone?: boolean }).standalone === true
+  );
+}
+
+function getCachedSessionMessages(cache: Map<string, ChatMessage[]>, sessionId: string) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return [] as ChatMessage[];
+  }
+
+  const cached = cache.get(normalizedSessionId);
+
+  if (cached) {
+    return cached;
+  }
+
+  return [] as ChatMessage[];
+}
+
+function createConversationSessionId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  return `chat-session-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function isActiveChatSessionInForeground(args: {
+  sessionId: string;
+  activeSessionId: string;
+  activeView: ChatPanelView;
+  isConversationPaneClosed: boolean;
+  isMobileViewport: boolean;
+  isMobileConversationView: boolean;
+}) {
+  if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
+    return false;
+  }
+
+  if (args.sessionId !== args.activeSessionId) {
+    return false;
+  }
+
+  if (args.activeView !== 'chat' || args.isConversationPaneClosed) {
+    return false;
+  }
+
+  if (args.isMobileViewport && !args.isMobileConversationView) {
+    return false;
+  }
+
+  return true;
+}
+
+function createConversationPreviewText(text: string) {
+  const normalizedText = String(text ?? '').trim();
+  const normalized =
+    normalizedText.startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`)
+      ? normalizedText
+          .slice(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`.length)
+          .split('\n\n')
+          .map((line) => line.trim())
+          .filter(Boolean)
+          .at(-1) ?? ''
+      : normalizedText.replace(/\s+/g, ' ').trim();
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function resolveConversationListPreviewText(preview: string) {
+  const normalized = createConversationPreviewText(preview);
+
+  if (!normalized) {
+    return '대화가 아직 없습니다.';
+  }
+
+  return normalized;
+}
+
+function compareConversationItemsByLatestChat(left: ChatConversationSummary, right: ChatConversationSummary) {
+  const timeDiff = getConversationLatestActivityTime(right) - getConversationLatestActivityTime(left);
+
+  if (timeDiff !== 0) {
+    return timeDiff;
+  }
+
+  return left.sessionId.localeCompare(right.sessionId);
+}
+
+function getConversationLatestActivityTime(item: ChatConversationSummary) {
+  const latestTimestamp = item.lastMessageAt || item.updatedAt || item.createdAt;
+  const parsedTime = latestTimestamp ? new Date(latestTimestamp).getTime() : 0;
+
+  return Number.isFinite(parsedTime) ? parsedTime : 0;
+}
+
+function getLatestConversationPreviewMessage(messages: ChatMessage[]) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index];
+
+    if (candidate.author !== 'user' && candidate.author !== 'codex') {
+      continue;
+    }
+
+    const preview = createConversationPreviewText(candidate.text);
+
+    if (preview) {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
+function formatConversationListTimestamp(timestamp: string | null | undefined) {
+  if (!timestamp) {
+    return '';
+  }
+
+  const date = new Date(timestamp);
+
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  const now = new Date();
+  const isSameYear = now.getFullYear() === date.getFullYear();
+  const isSameDay =
+    isSameYear && now.getMonth() === date.getMonth() && now.getDate() === date.getDate();
+  const timeLabel = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+
+  if (isSameDay) {
+    return timeLabel;
+  }
+
+  const monthDayLabel = `${date.getMonth() + 1}/${date.getDate()}`;
+  return isSameYear ? `${monthDayLabel} ${timeLabel}` : `${date.getFullYear()}.${monthDayLabel} ${timeLabel}`;
+}
+
+function isActivityLogMessage(message: ChatMessage) {
+  return message.author === 'system' && message.text.startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`);
+}
+
+function normalizeContextMessageText(message: ChatMessage) {
+  return message.text.replace(/\s+/g, ' ').trim();
+}
+
+function summarizeRecentContext(messages: ChatMessage[], maxMessages: number, maxChars: number) {
+  const candidates = messages.filter((message) => {
+    if (message.author !== 'user' && message.author !== 'codex') {
+      return false;
+    }
+
+    return !isActivityLogMessage(message) && Boolean(normalizeContextMessageText(message));
+  });
+
+  const selected: ChatMessage[] = [];
+  let totalChars = 0;
+
+  for (let index = candidates.length - 1; index >= 0; index -= 1) {
+    const message = candidates[index];
+    const nextText = normalizeContextMessageText(message);
+    const nextChars = nextText.length;
+
+    if (
+      selected.length >= maxMessages ||
+      (selected.length > 0 && totalChars + nextChars > maxChars)
+    ) {
+      break;
+    }
+
+    selected.unshift(message);
+    totalChars += nextChars;
+  }
+
+  return {
+    includedCount: selected.length,
+    omittedCount: Math.max(0, candidates.length - selected.length),
+  };
+}
+
+function buildConversationTitleFromMessages(messages: ChatMessage[], fallbackTitle: string) {
+  if (fallbackTitle && fallbackTitle !== '새 대화') {
+    return fallbackTitle;
+  }
+
+  const firstUserMessage = messages.find((message) => message.author === 'user' && message.text.trim());
+  return firstUserMessage ? createConversationPreviewText(firstUserMessage.text) || '새 대화' : fallbackTitle || '새 대화';
+}
+
+function buildConversationTitleFromRequestText(requestText: string, fallbackTitle: string) {
+  if (fallbackTitle && fallbackTitle !== '새 대화') {
+    return fallbackTitle;
+  }
+
+  return createConversationPreviewText(requestText) || fallbackTitle || '새 대화';
+}
+
+function buildMessageSyncKey(messages: ChatMessage[]) {
+  if (messages.length === 0) {
+    return '0';
+  }
+
+  const latestMessage = messages[messages.length - 1];
+  return `${messages.length}:${latestMessage.id}:${latestMessage.text.length}:${latestMessage.timestamp}`;
+}
+
+function buildAttachmentMessageBlock(attachments: ChatComposerAttachment[]) {
+  if (attachments.length === 0) {
+    return '';
+  }
+
+  return ['첨부 파일:', ...attachments.map((attachment) => `- ${attachment.name}: ${attachment.path}`)].join('\n');
+}
+
+function getSessionIdFromSearch(search: string) {
+  const sessionId = new URLSearchParams(search).get('sessionId')?.trim() ?? '';
+  return sessionId || null;
+}
+
+function getRuntimeLogRequestIdFromSearch(search: string) {
+  const requestId = new URLSearchParams(search).get('runtimeRequestId')?.trim() ?? '';
+  return requestId || null;
+}
+
+function getRequestedChatViewFromSearch(search: string): ChatPanelView | null {
+  const view = new URLSearchParams(search).get('chatView')?.trim() ?? '';
+  return view === 'chat' || view === 'runtime' || view === 'errors' ? view : null;
+}
+
+function isRequestDeletionAllowed(status?: ChatConversationRequest['status'] | null) {
+  return status !== 'queued' && status !== 'started' && status !== 'removed';
+}
+
+function buildOutgoingMessageText(text: string, attachments: ChatComposerAttachment[]) {
+  const trimmedText = text.trim();
+  const attachmentBlock = buildAttachmentMessageBlock(attachments);
+
+  if (trimmedText && attachmentBlock) {
+    return `${trimmedText}\n\n${attachmentBlock}`;
+  }
+
+  return trimmedText || attachmentBlock;
+}
+
+function mergeComposerAttachments(previous: ChatComposerAttachment[], next: ChatComposerAttachment[]) {
+  const seen = new Set(previous.map((item) => item.path));
+
+  return [
+    ...previous,
+    ...next.filter((item) => {
+      if (seen.has(item.path)) {
+        return false;
+      }
+
+      seen.add(item.path);
+      return true;
+    }),
+  ];
+}
+
+function clearLegacyChatMessageStorage() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  // Only clear the truly legacy single-key cache. Per-session keys use the
+  // same prefix and must be preserved across remounts.
+  window.localStorage.removeItem('main-chat-panel:messages');
+}
+
+function normalizePreviewUrl(value: string) {
+  return normalizeChatResourceUrl(value);
+}
+
+function classifyPreviewKind(url: string): PreviewKind {
+  const pathname = url.toLowerCase().split('?')[0] ?? '';
+
+  if (/\.(png|jpe?g|gif|webp|svg|bmp|ico)$/i.test(pathname)) {
+    return 'image';
+  }
+
+  if (/\.(mp4|webm|mov|m4v|ogg)$/i.test(pathname)) {
+    return 'video';
+  }
+
+  if (/\.(md|markdown)$/i.test(pathname)) {
+    return 'markdown';
+  }
+
+  if (/\.(ts|tsx|js|jsx|json|css|scss|html|xml|java|kt|sql|sh|py|go|rs|c|cpp|h|hpp|yml|yaml)$/i.test(pathname)) {
+    return 'code';
+  }
+
+  if (/\.(txt|log|csv)$/i.test(pathname)) {
+    return 'document';
+  }
+
+  if (/\.pdf$/i.test(pathname)) {
+    return 'pdf';
+  }
+
+  return 'file';
+}
+
+function buildPreviewLabel(url: string, source: PreviewItem['source']) {
+  try {
+    const parsed = new URL(url);
+    const lastSegment = parsed.pathname.split('/').filter(Boolean).at(-1);
+
+    if (lastSegment) {
+      return source === 'context' ? `현재 화면 · ${lastSegment}` : lastSegment;
+    }
+
+    return source === 'context' ? '현재 화면 미리보기' : parsed.hostname;
+  } catch {
+    return source === 'context' ? '현재 화면 미리보기' : url;
+  }
+}
+
+function extractPreviewItems(messages: ChatMessage[]) {
+  const urlPattern = /(https?:\/\/[^\s)]+|\/[A-Za-z0-9._~:/?#[\]@!$&'()*+,;=%-]+)/g;
+  const seen = new Set<string>();
+  const items: PreviewItem[] = [];
+  const orderedMessages = [...messages].reverse();
+
+  orderedMessages.forEach((message) => {
+    const matches = message.text.match(urlPattern) ?? [];
+
+    matches.forEach((matchedUrl) => {
+      const normalizedUrl = normalizePreviewUrl(matchedUrl);
+      const kind = classifyPreviewKind(normalizedUrl);
+
+      if (kind === 'file') {
+        return;
+      }
+
+      if (seen.has(normalizedUrl)) {
+        return;
+      }
+
+      seen.add(normalizedUrl);
+      items.push({
+        id: `${message.id}-${normalizedUrl}`,
+        label: buildPreviewLabel(normalizedUrl, 'message'),
+        url: normalizedUrl,
+        kind,
+        source: 'message',
+      });
+    });
+  });
+
+  return items.slice(0, 12);
+}
+
+function mapSystemStatusMessage(text: string) {
+  const normalized = text.trim();
+
+  if (!normalized) {
+    return null;
+  }
+
+  if (normalized.startsWith('대기열 등록:')) {
+    const matchedQueueCount = normalized.match(/대기열 등록:\s*(\d+)건/i);
+    return matchedQueueCount?.[1] ? `대기열 ${matchedQueueCount[1]}건` : '대기열 등록됨';
+  }
+
+  if (normalized.startsWith('요청 실행 중입니다.') || normalized.startsWith('즉시 요청 실행 중입니다.')) {
+    return '요청 처리 중';
+  }
+
+  if (normalized.startsWith('생각 중입니다.')) {
+    return '요청 분석 중';
+  }
+
+  if (normalized.includes('요청 의도와 현재 화면 문맥')) {
+    return '요청 분석 중';
+  }
+
+  if (normalized.includes('DB를 직접 확인')) {
+    return 'DB 확인 중';
+  }
+
+  if (normalized.includes('API 경로와 실제 응답')) {
+    return 'API 확인 중';
+  }
+
+  if (normalized.includes('관련 소스 파일과 연결된 흐름')) {
+    return '소스 확인 중';
+  }
+
+  if (
+    normalized.startsWith('요청 처리가 끝났습니다.') ||
+    normalized.startsWith('즉시 요청 처리가 끝났습니다.') ||
+    normalized.startsWith('요청 처리 중 오류가 발생했습니다.')
+  ) {
+    return null;
+  }
+
+  return null;
+}
+
+function mapJobStatusLabel(item: Pick<ChatConversationSummary, 'currentJobStatus' | 'currentJobMessage' | 'currentQueueSize'>) {
+  if (!item.currentJobStatus) {
+    return '';
+  }
+
+  if (item.currentJobMessage?.trim()) {
+    return item.currentJobMessage.trim();
+  }
+
+  if (item.currentJobStatus === 'queued') {
+    return item.currentQueueSize > 0 ? `대기열 ${item.currentQueueSize}건` : '대기 중';
+  }
+
+  if (item.currentJobStatus === 'started') {
+    return '요청 처리 중';
+  }
+
+  if (item.currentJobStatus === 'failed') {
+    return '요청 처리 실패';
+  }
+
+  if (item.currentJobStatus === 'completed') {
+    return '완료';
+  }
+
+  return '';
+}
+
+function isConversationProcessing(item: Pick<ChatConversationSummary, 'currentJobStatus'>) {
+  return item.currentJobStatus === 'queued' || item.currentJobStatus === 'started';
+}
+
+function buildRuntimeStatusLabel(snapshot: ChatRuntimeSnapshot | null, sessionId: string) {
+  if (!snapshot) {
+    return null;
+  }
+
+  const current = snapshot.sessions.find((item) => item.sessionId === sessionId);
+
+  if (!current) {
+    return null;
+  }
+
+  if (current.runningCount > 0 && current.queuedCount > 0) {
+    return `실제 실행 ${current.runningCount}건 · 대기 ${current.queuedCount}건`;
+  }
+
+  if (current.runningCount > 0) {
+    return `실제 실행 ${current.runningCount}건`;
+  }
+
+  if (current.queuedCount > 0) {
+    return `실제 대기열 ${current.queuedCount}건`;
+  }
+
+  return null;
+}
+
+export function MainChatPanel({ initialView = 'live', lockOuterScrollOnMobile = false }: MainChatPanelProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { currentPage, focusedComponentId } = useAppStore();
+  const appConfig = useAppConfig();
+  const { hasAccess } = useTokenAccess();
+  const { chatTypes } = useChatTypeRegistry();
+  const [draft, setDraft] = useState('');
+  const [composerAttachments, setComposerAttachments] = useState<ChatComposerAttachment[]>([]);
+  const [isComposerAttachmentUploading, setIsComposerAttachmentUploading] = useState(false);
+  const userRoles = useMemo(() => resolveCurrentChatPermissionRoles(hasAccess), [hasAccess]);
+  const availableChatTypes = useMemo(
+    () => chatTypes.filter((item) => canUseChatType(item, userRoles)),
+    [chatTypes, userRoles],
+  );
+  const chatTypeOptions = useMemo<ChatTypeOption[]>(
+    () =>
+      chatTypes.map((item) => {
+        const isAllowed = canUseChatType(item, userRoles);
+
+        return {
+          value: item.id,
+          label: item.name,
+          description: item.description,
+          isTemplate: item.isTemplate,
+          disabled: !isAllowed,
+        };
+      }),
+    [chatTypes, userRoles],
+  );
+  const [selectedChatTypeId, setSelectedChatTypeId] = useState<string | null>(availableChatTypes[0]?.id ?? null);
+  const selectedChatType = availableChatTypes.find((item) => item.id === selectedChatTypeId) ?? null;
+  const requestedSessionId = getSessionIdFromSearch(location.search);
+  const requestedRuntimeLogRequestId = getRuntimeLogRequestIdFromSearch(location.search);
+  const [activeSessionId, setActiveSessionId] = useState('');
+  const sessionMessageCacheRef = useRef<Map<string, ChatMessage[]>>(new Map());
+  const [isMobileConversationView, setIsMobileConversationView] = useState(false);
+  const [isConversationPaneClosed, setIsConversationPaneClosed] = useState(true);
+  const [editingConversationTitle, setEditingConversationTitle] = useState('');
+  const [isEditingConversationTitle, setIsEditingConversationTitle] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [activeView, setActiveView] = useState<ChatPanelView>(initialView === 'errors' ? 'errors' : 'chat');
+  const [copiedMessageId, setCopiedMessageId] = useState<number | null>(null);
+  const [requestItemsState, setRequestItemsState] = useState<ChatConversationRequest[]>([]);
+  const [pendingDeleteSessionId, setPendingDeleteSessionId] = useState<string | null>(null);
+  const [isConversationContentLoading, setIsConversationContentLoading] = useState(true);
+  const [conversationLoadingLabel, setConversationLoadingLabel] = useState('대화 내용을 불러오는 중입니다.');
+  const [isDeferringAuxiliaryChatRequests, setIsDeferringAuxiliaryChatRequests] = useState(false);
+  const [hasOlderMessages, setHasOlderMessages] = useState(false);
+  const [, setOldestLoadedMessageId] = useState<number | null>(null);
+  const [isLoadingOlderMessages, setIsLoadingOlderMessages] = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [isResourceStripOpen, setIsResourceStripOpen] = useState(false);
+  const [isTitleClusterOpen, setIsTitleClusterOpen] = useState(false);
+  const [notificationToggleSessionId, setNotificationToggleSessionId] = useState<string | null>(null);
+  const [renamingConversationSessionId, setRenamingConversationSessionId] = useState<string | null>(null);
+  const [messageApi, messageContextHolder] = message.useMessage();
+  const [pendingContextConfirm, setPendingContextConfirm] = useState<PendingContextConfirm | null>(null);
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const composerRef = useRef<TextAreaRef | null>(null);
+  const titleClusterRef = useRef<HTMLDivElement | null>(null);
+  const copyFeedbackTimerRef = useRef<number | null>(null);
+  const pendingRequestsRef = useRef<PendingChatRequest[]>([]);
+  const messagesRef = useRef<ChatMessage[]>(messages);
+  const requestItemsRef = useRef<ChatConversationRequest[]>(requestItemsState);
+  const loadOlderMessagesRef = useRef<() => void | Promise<void>>(() => {});
+  const previousConnectionStateRef = useRef<'connecting' | 'connected' | 'disconnected'>('connecting');
+  const shouldRestoreConversationAfterReconnectRef = useRef(false);
+  const handledRequestedSessionIdRef = useRef('');
+  const lastChatTypeSessionIdRef = useRef('');
+  const notifiedTerminalJobKeysRef = useRef<string[]>([]);
+  const lastMarkedReadResponseIdBySessionRef = useRef<Record<string, number>>({});
+  const requestItems = Array.isArray(requestItemsState) ? requestItemsState : [];
+  const setRequestItems = useCallback((next: SetStateAction<ChatConversationRequest[]>) => {
+    setRequestItemsState((previous) => {
+      const safePrevious = Array.isArray(previous) ? previous : [];
+      const resolved =
+        typeof next === 'function'
+          ? (next as (items: ChatConversationRequest[]) => ChatConversationRequest[])(safePrevious)
+          : next;
+
+      return Array.isArray(resolved) ? resolved : [];
+    });
+  }, []);
+
+  const currentContext: ChatViewContext = {
+    pageId: currentPage.id,
+    pageTitle: currentPage.title,
+    topMenu: currentPage.topMenu,
+    focusedComponentId,
+    pageUrl: typeof window !== 'undefined' ? window.location.href : '',
+    isStandaloneMode: isStandaloneDisplayMode(),
+    pageVisibilityState:
+      typeof document !== 'undefined' && document.visibilityState === 'hidden' ? 'hidden' : 'visible',
+    chatTypeId: selectedChatType?.id ?? null,
+    chatTypeLabel: selectedChatType?.name ?? '',
+    chatTypeDescription: selectedChatType?.description ?? '',
+    chatTypeIsTemplate: selectedChatType?.isTemplate ?? false,
+  };
+  const {
+    conversationItems,
+    setConversationItems,
+    isConversationListLoading,
+    reloadConversationItems,
+    conversationSearch,
+    setConversationSearch,
+  } = useConversationListController({
+    requestedSessionId: requestedSessionId ?? '',
+  });
+  const conversationItemsRef = useRef<ChatConversationSummary[]>(conversationItems);
+  const {
+    runtimeSnapshot,
+    runtimeJobDetail,
+    handleRuntimeEvent,
+    handleRuntimeDetailEvent,
+  } = useRuntimeController({
+    activeSessionId,
+    isDeferringAuxiliaryChatRequests,
+  });
+  const handleToggleConversationNotification = async () => {
+    if (!activeConversation) {
+      return;
+    }
+
+    const sessionId = activeConversation.sessionId;
+    const nextNotifyOffline = !activeConversation.notifyOffline;
+    setNotificationToggleSessionId(sessionId);
+    setConversationItems((previous) =>
+      previous.map((entry) => (entry.sessionId === sessionId ? { ...entry, notifyOffline: nextNotifyOffline } : entry)),
+    );
+
+    try {
+      const item = await chatGateway.updateConversation(sessionId, {
+        notifyOffline: nextNotifyOffline,
+      });
+      setConversationItems((previous) => previous.map((entry) => (entry.sessionId === item.sessionId ? item : entry)));
+      messageApi.success(nextNotifyOffline ? '채팅방 알림을 켰습니다.' : '채팅방 알림을 껐습니다.');
+    } catch (error) {
+      setConversationItems((previous) =>
+        previous.map((entry) => (entry.sessionId === sessionId ? { ...entry, notifyOffline: !nextNotifyOffline } : entry)),
+      );
+      messageApi.error(error instanceof Error ? error.message : '채팅방 알림 설정 저장에 실패했습니다.');
+    } finally {
+      setNotificationToggleSessionId((current) => (current === sessionId ? null : current));
+    }
+  };
+  const handleCreateConversation = async () => {
+    const sessionId = createConversationSessionId();
+
+    try {
+      const item = await chatGateway.createConversation({
+        sessionId,
+        title: '새 대화',
+        contextLabel: selectedChatType?.name,
+        contextDescription: selectedChatType?.description,
+        notifyOffline: true,
+      });
+
+      setConversationItems((previous) => [item, ...previous.filter((entry) => entry.sessionId !== item.sessionId)]);
+      openConversationSession(item.sessionId);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '새 대화를 만들지 못했습니다.');
+    }
+  };
+  const upsertRequestItem = (request: ChatConversationRequest) => {
+    setRequestItems((previous) => {
+      const existingIndex = previous.findIndex(
+        (item) => item.sessionId === request.sessionId && item.requestId === request.requestId,
+      );
+
+      if (existingIndex < 0) {
+        return [...previous, request];
+      }
+
+      const nextItems = [...previous];
+      nextItems[existingIndex] = {
+        ...nextItems[existingIndex],
+        ...request,
+      };
+      return nextItems;
+    });
+  };
+  const syncConversationPreviewForRequest = (sessionId: string, text: string, requestedAt = new Date().toISOString()) => {
+    const nextPreview = createConversationPreviewText(text);
+
+    if (!nextPreview) {
+      return;
+    }
+
+    setConversationItems((previous) =>
+      previous.map((item) =>
+        item.sessionId === sessionId
+          ? {
+              ...item,
+              title: buildConversationTitleFromRequestText(text, item.title),
+              lastMessagePreview: nextPreview,
+              lastMessageAt: requestedAt,
+              updatedAt: requestedAt,
+            }
+          : item,
+      ),
+    );
+  };
+  const syncConversationDetailIntoState = useCallback(
+    (sessionId: string, detail: ChatConversationDetailResponse) => {
+      setConversationItems((previous) => {
+        const exists = previous.some((item) => item.sessionId === sessionId);
+
+        if (!exists) {
+          return [detail.item, ...previous];
+        }
+
+        return previous.map((item) => (item.sessionId === sessionId ? detail.item : item));
+      });
+
+      sessionMessageCacheRef.current.set(sessionId, detail.messages);
+
+      setRequestItems((previous) => {
+        const preserved = previous.filter((item) => item.sessionId !== sessionId);
+        return [...preserved, ...detail.requests];
+      });
+
+      if (sessionId === activeSessionId) {
+        setMessages(detail.messages);
+        setHasOlderMessages(detail.hasOlderMessages);
+        setOldestLoadedMessageId(detail.oldestLoadedMessageId);
+      }
+    },
+    [activeSessionId, setConversationItems, setHasOlderMessages, setMessages, setOldestLoadedMessageId, setRequestItems],
+  );
+
+  const syncConversationFromServer = useCallback(
+    async (sessionId: string) => {
+      const normalizedSessionId = sessionId.trim();
+
+      if (!normalizedSessionId) {
+        return;
+      }
+
+      try {
+        const detail = await chatGateway.getConversationDetail(normalizedSessionId, {
+          limit: normalizedSessionId === activeSessionId ? Math.max(20, messagesRef.current.length || 0) : 20,
+        });
+        syncConversationDetailIntoState(normalizedSessionId, detail);
+      } catch {
+        // Ignore background resync failures.
+      }
+    },
+    [activeSessionId, syncConversationDetailIntoState],
+  );
+
+  const handleJobEvent = (event: ChatJobEvent, eventSessionId = activeSessionId) => {
+    const sessionId = eventSessionId.trim() || activeSessionId;
+    const existingRequest =
+      requestItemsRef.current.find((item) => item.sessionId === sessionId && item.requestId === event.requestId) ?? null;
+
+    if (event.status === 'completed') {
+      pendingRequestsRef.current = pendingRequestsRef.current.filter((request) => request.requestId !== event.requestId);
+    } else if (event.status === 'failed') {
+      updatePendingMessageStatus(event.requestId, 'failed', 0);
+    }
+
+    setConversationItems((previous) =>
+      previous.map((item) =>
+        item.sessionId === sessionId
+          ? {
+              ...item,
+              currentRequestId: event.requestId,
+              currentJobStatus: event.status,
+              currentJobMessage: event.message,
+              currentQueueSize: event.status === 'queued' ? event.queueSize : 0,
+              currentStatusUpdatedAt: new Date().toISOString(),
+            }
+          : item,
+      ),
+    );
+
+    upsertRequestItem({
+      sessionId,
+      requestId: event.requestId,
+      status: event.status,
+      statusMessage: event.message,
+      userMessageId: existingRequest?.userMessageId ?? null,
+      userText: existingRequest?.userText ?? '',
+      responseMessageId: existingRequest?.responseMessageId ?? null,
+      responseText: existingRequest?.responseText ?? '',
+      hasResponse: existingRequest?.hasResponse ?? false,
+      canDelete: event.status !== 'queued' && event.status !== 'started' && !(existingRequest?.hasResponse),
+      createdAt: existingRequest?.createdAt ?? new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      answeredAt: existingRequest?.answeredAt ?? null,
+      terminalAt: event.status === 'completed' || event.status === 'failed' ? new Date().toISOString() : null,
+    });
+
+    if (event.status !== 'completed' && event.status !== 'failed') {
+      return;
+    }
+
+    const isDocumentHidden = typeof document !== 'undefined' && document.visibilityState === 'hidden';
+
+    const notificationKey = `${sessionId}:${event.requestId}:${event.status}`;
+
+    if (notifiedTerminalJobKeysRef.current.includes(notificationKey)) {
+      return;
+    }
+
+    notifiedTerminalJobKeysRef.current = [...notifiedTerminalJobKeysRef.current, notificationKey].slice(-80);
+
+    const conversationTitle =
+      activeConversation?.sessionId === sessionId
+        ? activeConversation.title
+        : conversationItemsRef.current.find((item) => item.sessionId === sessionId)?.title || '현재 채팅방';
+    const toastContent =
+      event.status === 'completed'
+        ? `${conversationTitle} 응답이 완료되었습니다.`
+        : `${conversationTitle} 요청 처리 중 오류가 발생했습니다.`;
+
+    if (!isDocumentHidden) {
+      messageApi.open({
+        key: notificationKey,
+        type: event.status === 'completed' ? 'success' : 'error',
+        content: toastContent,
+        duration: event.status === 'completed' ? 3 : 4,
+      });
+    }
+
+    window.setTimeout(() => {
+      void syncConversationFromServer(sessionId);
+    }, event.status === 'completed' ? 700 : 250);
+  };
+  const handleIncomingMessageEvent = (incomingMessage: ChatMessage, eventSessionId = activeSessionId) => {
+    const sessionId = eventSessionId.trim() || activeSessionId;
+
+    if (incomingMessage.clientRequestId) {
+      const existing =
+        requestItemsRef.current.find(
+          (item) => item.sessionId === sessionId && item.requestId === incomingMessage.clientRequestId,
+        ) ?? null;
+      const hasMeaningfulResponse =
+        incomingMessage.author === 'codex' && !isPreparingChatReplyText(incomingMessage.text);
+
+      upsertRequestItem({
+        sessionId,
+        requestId: incomingMessage.clientRequestId,
+        status:
+          incomingMessage.author === 'codex'
+            ? existing?.status === 'completed'
+              ? 'completed'
+              : 'started'
+            : existing?.status ?? 'accepted',
+        statusMessage: existing?.statusMessage ?? null,
+        userMessageId:
+          incomingMessage.author === 'user'
+            ? incomingMessage.id
+            : existing?.userMessageId ?? null,
+        userText:
+          incomingMessage.author === 'user'
+            ? incomingMessage.text
+            : existing?.userText ?? '',
+        responseMessageId:
+          incomingMessage.author === 'codex'
+            ? incomingMessage.id
+            : existing?.responseMessageId ?? null,
+        responseText:
+          incomingMessage.author === 'codex'
+            ? incomingMessage.text
+            : existing?.responseText ?? '',
+        hasResponse: hasMeaningfulResponse || existing?.hasResponse === true,
+        canDelete:
+          incomingMessage.author !== 'codex' &&
+          !(existing?.hasResponse === true) &&
+          isRequestDeletionAllowed(existing?.status),
+        createdAt: existing?.createdAt ?? new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        answeredAt:
+          incomingMessage.author === 'codex'
+            ? existing?.answeredAt ?? new Date().toISOString()
+            : existing?.answeredAt ?? null,
+        terminalAt: existing?.terminalAt ?? null,
+      });
+    }
+
+    sessionMessageCacheRef.current.set(
+      sessionId,
+      upsertChatMessage(getCachedSessionMessages(sessionMessageCacheRef.current, sessionId), incomingMessage),
+    );
+
+    const hasMeaningfulCodexResponse =
+      incomingMessage.author === 'codex' && !isPreparingChatReplyText(incomingMessage.text);
+    const isForegroundSession = isActiveChatSessionInForeground({
+      sessionId,
+      activeSessionId,
+      activeView,
+      isConversationPaneClosed,
+      isMobileViewport,
+      isMobileConversationView,
+    });
+    const responseTimestamp = new Date().toISOString();
+
+    setConversationItems((previous) =>
+      previous.map((item) =>
+        item.sessionId === sessionId
+          ? {
+              ...item,
+              title:
+                incomingMessage.author === 'user'
+                  ? buildConversationTitleFromRequestText(incomingMessage.text, item.title)
+                  : item.title,
+              lastMessagePreview: createConversationPreviewText(incomingMessage.text),
+              lastMessageAt: responseTimestamp,
+              updatedAt: responseTimestamp,
+              hasUnreadResponse:
+                hasMeaningfulCodexResponse && !isForegroundSession ? true : item.hasUnreadResponse,
+              currentRequestId:
+                incomingMessage.author === 'codex' && incomingMessage.clientRequestId
+                  ? null
+                  : item.currentRequestId,
+              currentJobStatus:
+                incomingMessage.author === 'codex' && incomingMessage.clientRequestId
+                  ? null
+                  : item.currentJobStatus,
+              currentJobMessage:
+                incomingMessage.author === 'codex' && incomingMessage.clientRequestId
+                  ? null
+                  : item.currentJobMessage,
+              currentQueueSize:
+                incomingMessage.author === 'codex' && incomingMessage.clientRequestId
+                  ? 0
+                  : item.currentQueueSize,
+            }
+          : item,
+      ),
+    );
+
+    const eventConversation = conversationItemsRef.current.find((item) => item.sessionId === sessionId) ?? null;
+
+    if (incomingMessage.author !== 'codex' || eventConversation?.notifyOffline !== true) {
+      return;
+    }
+
+    if (
+      isActiveChatSessionInForeground({
+        sessionId,
+        activeSessionId,
+        activeView,
+        isConversationPaneClosed,
+        isMobileViewport,
+        isMobileConversationView,
+      })
+    ) {
+      return;
+    }
+  };
+  const shouldBlockConversationWhileLoading = useCallback(
+    (sessionId: string) => {
+      const normalizedSessionId = sessionId.trim();
+
+      if (!normalizedSessionId) {
+        return false;
+      }
+
+      const cachedMessages = getCachedSessionMessages(sessionMessageCacheRef.current, normalizedSessionId);
+
+      if (cachedMessages.length > 0) {
+        return false;
+      }
+
+      const conversation = conversationItemsRef.current.find((item) => item.sessionId === normalizedSessionId) ?? null;
+      return !(conversation?.currentJobStatus === 'queued' || conversation?.currentJobStatus === 'started');
+    },
+    [],
+  );
+  const { socketRef, connectionState } = chatConnectionGateway.useConnection({
+    sessionId: activeSessionId,
+    currentContext,
+    setMessages,
+    onMessageEvent: handleIncomingMessageEvent,
+    onJobEvent: handleJobEvent,
+    onRuntimeEvent: handleRuntimeEvent,
+    onRuntimeDetailEvent: handleRuntimeDetailEvent,
+  });
+  const {
+    errorLogs,
+    selectedErrorLog,
+    selectedErrorLogReferenceSummary,
+    activeErrorResource,
+    errorSourceSummary,
+    isLoadingErrorLogs,
+    errorLogLoadError,
+    isErrorDetailExpanded,
+    setSelectedErrorLogId,
+    setActiveErrorResourceUrl,
+    setIsErrorDetailExpanded,
+    loadErrorLogs,
+  } = useErrorLogs({
+    activeView,
+    hasAccess,
+  });
+
+  const previewItems = useMemo(
+    () => extractPreviewItems(messages.filter((message) => !isActivityLogMessage(message))),
+    [messages],
+  );
+  const isTabletAppLayout = isMobileViewport;
+  const chatMessages = useMemo(
+    () => messages.filter((message) => message.author !== 'system' || isActivityLogMessage(message)),
+    [messages],
+  );
+  const chatMessageSyncKey = useMemo(() => buildMessageSyncKey(chatMessages), [chatMessages]);
+  const activeConversation = useMemo(
+    () => conversationItems.find((item) => item.sessionId === activeSessionId) ?? null,
+    [activeSessionId, conversationItems],
+  );
+  const activeRuntimeStatus = useMemo(
+    () => buildRuntimeStatusLabel(runtimeSnapshot, activeSessionId),
+    [runtimeSnapshot, activeSessionId],
+  );
+  const activeRuntimeQueuedRequestIds = useMemo(() => {
+    if (!runtimeSnapshot) {
+      return null;
+    }
+
+    return new Set(
+      runtimeSnapshot.queued
+        .filter((item) => item.sessionId === activeSessionId)
+        .map((item) => item.requestId),
+    );
+  }, [activeSessionId, runtimeSnapshot]);
+  const activeQueuedComposerRequests = useMemo(
+    () => {
+      const queuedItems = requestItems
+        .filter((item) => item.sessionId === activeSessionId && item.status === 'queued')
+        .sort((left, right) => left.createdAt.localeCompare(right.createdAt));
+
+      if (!activeRuntimeQueuedRequestIds) {
+        return queuedItems;
+      }
+
+      return queuedItems.filter((item) => activeRuntimeQueuedRequestIds.has(item.requestId));
+    },
+    [activeRuntimeQueuedRequestIds, activeSessionId, requestItems],
+  );
+  const activeRequestItems = useMemo(
+    () =>
+      requestItems
+        .filter((item) => item.sessionId === activeSessionId)
+        .sort((left, right) => left.createdAt.localeCompare(right.createdAt)),
+    [activeSessionId, requestItems],
+  );
+  const {
+    activeSystemStatus,
+    captureViewportRestoreSnapshot,
+    handleViewportScroll,
+    handleViewportTouchEnd,
+    handleViewportTouchMove,
+    handleViewportTouchStart,
+    isSystemStatusPending,
+    isPullToLoadArmed,
+    pendingViewportRestoreRef,
+    pullToLoadDistance,
+    queueViewportPrependRestore,
+    scrollViewportToBottom,
+    setActiveSystemStatus,
+    setIsSystemStatusPending,
+    setShowScrollToBottom,
+    shouldStickToBottomRef,
+    showScrollToBottom,
+  } = useConversationViewportController({
+    activeConversation,
+    activeQueuedComposerRequestsCount: activeQueuedComposerRequests.length,
+    activeRuntimeStatus,
+    chatMessageCount: chatMessages.length,
+    chatMessageSyncKey,
+    connectionState,
+    hasOlderMessages,
+    isConversationContentLoading,
+    isLoadingOlderMessages,
+    messages,
+    onLoadOlderMessages: () => loadOlderMessagesRef.current(),
+    runtimeSnapshot,
+    viewportRef,
+    mapJobStatusLabel,
+    mapSystemStatusMessage,
+    isActivityLogMessage,
+  });
+  const { loadOlderMessages } = useConversationRoomController({
+    activeSessionId,
+    connectionState,
+    shouldBlockConversationWhileLoading,
+    captureViewportRestoreSnapshot,
+    sessionMessageCacheRef,
+    messagesRef,
+    pendingViewportRestoreRef,
+    shouldRestoreConversationAfterReconnectRef,
+    setConversationItems,
+    setMessages,
+    setRequestItems,
+    setConversationLoadingLabel,
+    setIsConversationContentLoading,
+    setIsDeferringAuxiliaryChatRequests,
+    setHasOlderMessages,
+    setOldestLoadedMessageId,
+    setIsLoadingOlderMessages,
+    queueViewportPrependRestore,
+    viewportRef,
+  });
+  loadOlderMessagesRef.current = loadOlderMessages;
+
+  useEffect(() => {
+    setSharedActiveConversationSnapshot({
+      sessionId: activeSessionId,
+      title: activeConversation?.title || '',
+    });
+  }, [activeConversation?.title, activeSessionId]);
+
+  const activeRequestMap = useMemo(
+    () =>
+      new Map(
+        activeRequestItems.map((item) => [item.requestId, item]),
+      ),
+    [activeRequestItems],
+  );
+  const filteredConversationItems = useMemo(() => {
+    const keyword = conversationSearch.trim().toLowerCase();
+    const sortedItems = [...conversationItems].sort(compareConversationItemsByLatestChat);
+
+    if (!keyword) {
+      return sortedItems;
+    }
+
+    return sortedItems.filter((item) =>
+      [item.title, item.sessionId, item.lastMessagePreview, item.contextDescription]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(keyword)),
+    );
+  }, [conversationItems, conversationSearch]);
+  const unreadConversationItems = useMemo(
+    () => filteredConversationItems.filter((item) => item.hasUnreadResponse),
+    [filteredConversationItems],
+  );
+  const processingConversationItems = useMemo(
+    () => filteredConversationItems.filter((item) => isConversationProcessing(item) && !item.hasUnreadResponse),
+    [filteredConversationItems],
+  );
+  const generalConversationItems = useMemo(
+    () => filteredConversationItems.filter((item) => !item.hasUnreadResponse && !isConversationProcessing(item)),
+    [filteredConversationItems],
+  );
+  const pendingDeleteConversation =
+    conversationItems.find((item) => item.sessionId === pendingDeleteSessionId) ?? null;
+  const {
+    activePreview,
+    isPreviewLoading,
+    isPreviewModalOpen,
+    previewContentType,
+    previewError,
+    previewText,
+    setActivePreviewId,
+    setIsPreviewModalOpen,
+  } = useConversationViewController({
+    activeSessionId,
+    activeView,
+    previewItems,
+    selectedChatTypeId: selectedChatType?.id ?? null,
+    composerRef,
+    sessionMessageCacheRef,
+    setActiveSystemStatus,
+    setComposerAttachments,
+    setCopiedMessageId,
+    setDraft,
+    setIsResourceStripOpen,
+    setIsSystemStatusPending,
+    setMessages,
+  });
+
+  const markConversationReadLocally = (sessionId: string) => {
+    const normalizedSessionId = sessionId.trim();
+
+    if (!normalizedSessionId) {
+      return;
+    }
+
+    setConversationItems((previous) =>
+      previous.map((item) =>
+        item.sessionId === normalizedSessionId
+          ? {
+              ...item,
+              hasUnreadResponse: false,
+            }
+          : item,
+      ),
+    );
+  };
+
+  const syncActiveConversationReadState = (sessionId: string) => {
+    const normalizedSessionId = sessionId.trim();
+
+    if (!normalizedSessionId) {
+      return;
+    }
+
+    markConversationReadLocally(normalizedSessionId);
+    void Promise.allSettled([
+      chatGateway.markConversationRead(normalizedSessionId),
+      chatGateway.markRoomNotificationMessagesRead(normalizedSessionId),
+      chatGateway.dismissRoomNotifications(normalizedSessionId),
+    ]);
+  };
+
+  const renderConversationListItem = (
+    item: ChatConversationSummary,
+    section: 'processing' | 'unread' | 'general' = 'general',
+  ) => {
+    const isUnread = item.hasUnreadResponse;
+    const isProcessing = isConversationProcessing(item);
+    const isUnreadSection = section === 'unread';
+
+    return (
+      <div
+        key={item.sessionId}
+        className={`app-chat-panel__conversation-item${
+          item.sessionId === activeSessionId ? ' app-chat-panel__conversation-item--active' : ''
+        }${isUnread ? ' app-chat-panel__conversation-item--unread' : ''}${
+          isProcessing ? ' app-chat-panel__conversation-item--processing' : ''
+        }${isUnreadSection ? ' app-chat-panel__conversation-item--unread-section' : ''}${
+          section === 'general' ? ' app-chat-panel__conversation-item--general' : ''
+        }`}
+      >
+        <button
+          type="button"
+          className="app-chat-panel__conversation-item-main"
+          onClick={() => {
+            openConversationSession(item.sessionId);
+          }}
+        >
+          <span className="app-chat-panel__conversation-item-heading">
+            <span className="app-chat-panel__conversation-item-title-wrap">
+              {isUnread ? <span className="app-chat-panel__conversation-item-unread-dot" aria-hidden="true" /> : null}
+              <span className="app-chat-panel__conversation-item-title">{item.title || '새 대화'}</span>
+            </span>
+            <span className="app-chat-panel__conversation-item-time">
+              {formatConversationListTimestamp(item.lastMessageAt || item.updatedAt)}
+            </span>
+          </span>
+          <span className="app-chat-panel__conversation-item-id">{item.sessionId}</span>
+          <span className="app-chat-panel__conversation-item-flags">
+            {item.currentJobStatus ? (
+              <span
+                className={`app-chat-panel__conversation-item-status app-chat-panel__conversation-item-status--${item.currentJobStatus}`}
+              >
+                {mapJobStatusLabel(item)}
+              </span>
+            ) : null}
+            {isUnread ? (
+              <span className="app-chat-panel__conversation-item-flag app-chat-panel__conversation-item-flag--unread">
+                답변 도착
+              </span>
+            ) : null}
+          </span>
+          <span className="app-chat-panel__conversation-item-preview">
+            {resolveConversationListPreviewText(item.lastMessagePreview)}
+          </span>
+        </button>
+        <Button
+          type="text"
+          size="small"
+          className="app-chat-panel__conversation-item-delete"
+          icon={<DeleteOutlined />}
+          aria-label="대화 삭제"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setPendingDeleteSessionId(item.sessionId);
+          }}
+        />
+      </div>
+    );
+  };
+
+  const replaceChatSessionInUrl = (sessionId: string) => {
+    const nextSessionId = sessionId.trim();
+    const searchParams = new URLSearchParams(location.search);
+    const currentSessionId = searchParams.get('sessionId')?.trim() ?? '';
+
+    if (nextSessionId) {
+      if (currentSessionId === nextSessionId) {
+        return;
+      }
+
+      searchParams.set('sessionId', nextSessionId);
+    } else {
+      if (!currentSessionId) {
+        return;
+      }
+
+      searchParams.delete('sessionId');
+    }
+
+    const nextSearch = searchParams.toString();
+    navigate(
+      {
+        pathname: location.pathname,
+        search: nextSearch ? `?${nextSearch}` : '',
+      },
+      { replace: true },
+    );
+  };
+
+  const clearRequestedRuntimeLogInUrl = useCallback(() => {
+    const searchParams = new URLSearchParams(location.search);
+
+    if (!searchParams.has('runtimeRequestId') && !searchParams.has('chatView')) {
+      return;
+    }
+
+    searchParams.delete('runtimeRequestId');
+    searchParams.delete('chatView');
+
+    const nextSearch = searchParams.toString();
+    navigate(
+      {
+        pathname: location.pathname,
+        search: nextSearch ? `?${nextSearch}` : '',
+      },
+      { replace: true },
+    );
+  }, [location.pathname, location.search, navigate]);
+
+  const openConversationSession = (sessionId: string) => {
+    replaceChatSessionInUrl(sessionId);
+
+    if (sessionId === activeSessionId && !isConversationPaneClosed) {
+      if (isMobileViewport) {
+        setIsMobileConversationView(true);
+      }
+      setActiveView('chat');
+      return;
+    }
+
+    chatConnectionGateway.resetLastReceivedEventId(sessionId);
+    setConversationLoadingLabel('대화 내용을 불러오는 중입니다.');
+    setIsConversationContentLoading(shouldBlockConversationWhileLoading(sessionId));
+    setIsDeferringAuxiliaryChatRequests(true);
+    setHasOlderMessages(false);
+    setOldestLoadedMessageId(null);
+    setIsLoadingOlderMessages(false);
+    shouldStickToBottomRef.current = true;
+    setShowScrollToBottom(false);
+    setActiveSessionId(sessionId);
+    setIsConversationPaneClosed(false);
+    setActiveView('chat');
+
+    if (isMobileViewport) {
+      setIsMobileConversationView(true);
+    }
+
+    setMessages(getCachedSessionMessages(sessionMessageCacheRef.current, sessionId));
+    setActivePreviewId(null);
+    setIsPreviewModalOpen(false);
+    setActiveSystemStatus(null);
+    setIsSystemStatusPending(false);
+    setIsResourceStripOpen(false);
+    shouldStickToBottomRef.current = true;
+    setShowScrollToBottom(false);
+  };
+
+  useEffect(() => {
+    const requestedView = getRequestedChatViewFromSearch(location.search);
+
+    if (requestedView) {
+      setActiveView(requestedView);
+    }
+  }, [location.search]);
+
+  useEffect(() => {
+    if (!isTitleClusterOpen) {
+      return;
+    }
+
+    const handleWindowPointerDown = (event: PointerEvent) => {
+      if (!(event.target instanceof Node)) {
+        return;
+      }
+
+      if (titleClusterRef.current?.contains(event.target)) {
+        return;
+      }
+
+      setIsTitleClusterOpen(false);
+    };
+
+    window.addEventListener('pointerdown', handleWindowPointerDown);
+
+    return () => {
+      window.removeEventListener('pointerdown', handleWindowPointerDown);
+    };
+  }, [isTitleClusterOpen]);
+
+  useEffect(() => {
+    clearLegacyChatMessageStorage();
+  }, []);
+
+  useEffect(() => {
+    conversationItemsRef.current = conversationItems;
+  }, [conversationItems]);
+
+  useEffect(() => {
+    emitChatConversationsUpdated(conversationItems);
+  }, [conversationItems]);
+
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+
+  useEffect(() => {
+    requestItemsRef.current = requestItems;
+  }, [requestItems]);
+
+  useEffect(() => {
+    if (!activeSessionId) {
+      return;
+    }
+
+    sessionMessageCacheRef.current.set(activeSessionId, messages);
+  }, [messages]);
+
+  useEffect(() => {
+    if (
+      !isActiveChatSessionInForeground({
+        sessionId: activeSessionId,
+        activeSessionId,
+        activeView,
+        isConversationPaneClosed,
+        isMobileViewport,
+        isMobileConversationView,
+      })
+    ) {
+      return;
+    }
+
+    if (isConversationContentLoading || !shouldStickToBottomRef.current) {
+      return;
+    }
+
+    if (!messages.some((item) => item.author === 'codex' && !isPreparingChatReplyText(item.text))) {
+      return;
+    }
+
+    syncActiveConversationReadState(activeSessionId);
+  }, [
+    activeSessionId,
+    activeView,
+    isConversationContentLoading,
+    isConversationPaneClosed,
+    isMobileConversationView,
+    isMobileViewport,
+    messages,
+  ]);
+
+  const updatePendingMessageStatus = (
+    requestId: string,
+    status: 'retrying' | 'failed' | null,
+    retryCount = 0,
+  ) => {
+    setMessages((previous) =>
+      previous.map((message) =>
+        message.clientRequestId === requestId
+          ? {
+              ...message,
+              deliveryStatus: status,
+              retryCount,
+            }
+          : message,
+      ),
+    );
+  };
+
+  const sendChatRequest = (socket: WebSocket, request: PendingChatRequest) => {
+    socket.send(
+      JSON.stringify({
+        type: 'message:send',
+        payload: {
+          text: request.text,
+          chatTypeId: request.chatTypeId,
+          chatTypeLabel: request.chatTypeLabel,
+          chatTypeDescription: request.chatTypeDescription,
+          chatTypeIsTemplate: request.chatTypeIsTemplate,
+          requestId: request.requestId,
+          mode: request.mode,
+        },
+      }),
+    );
+  };
+
+  const {
+    cancelPendingRequest,
+    deleteStoredRequest,
+    handleDeleteConversation,
+    handleRenameConversation,
+    removeQueuedComposerRequest,
+    retryPendingRequest,
+  } = useConversationRoomActionsController({
+    activeSessionId,
+    requestedSessionId: requestedSessionId ?? '',
+    conversationItems,
+    activeConversation,
+    editingConversationTitle,
+    isMobileViewport,
+    pendingRequestsRef,
+    sessionMessageCacheRef,
+    socketRef,
+    setConversationItems,
+    setMessages,
+    setRequestItems,
+    setActiveSessionId,
+    setDraft,
+    setComposerAttachments,
+    setCopiedMessageId,
+    setActivePreviewId,
+    setIsPreviewModalOpen,
+    setActiveSystemStatus,
+    setIsSystemStatusPending,
+    setIsResourceStripOpen,
+    setIsConversationPaneClosed,
+    setIsMobileConversationView,
+    setRenamingConversationSessionId,
+    setEditingConversationTitle,
+    setIsEditingConversationTitle,
+    updatePendingMessageStatus,
+    sendChatRequest,
+    createLocalMessage,
+    replaceChatSessionInUrl,
+    messageApi,
+  });
+
+  useEffect(() => {
+    if (connectionState !== 'connected') {
+      return;
+    }
+
+    const socket = socketRef.current;
+
+    if (!socket || socket.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    const activePendingRequests = pendingRequestsRef.current.filter(
+      (request) => request.sessionId === activeSessionId && !request.failed,
+    );
+
+    if (activePendingRequests.length === 0) {
+      return;
+    }
+
+    pendingRequestsRef.current = pendingRequestsRef.current.flatMap((request) => {
+      if (request.sessionId !== activeSessionId || request.failed) {
+        return [request];
+      }
+
+      try {
+        sendChatRequest(socket, request);
+        updatePendingMessageStatus(request.requestId, null, request.retryCount);
+        return [];
+      } catch {
+        const nextRetryCount = request.retryCount + 1;
+
+        if (nextRetryCount >= CHAT_MAX_RETRY_ATTEMPTS) {
+          updatePendingMessageStatus(request.requestId, 'failed', nextRetryCount);
+          return [{ ...request, retryCount: nextRetryCount, failed: true }];
+        }
+
+        updatePendingMessageStatus(request.requestId, 'retrying', nextRetryCount);
+        return [{ ...request, retryCount: nextRetryCount }];
+      }
+    });
+  }, [activeSessionId, connectionState, socketRef]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(max-width: 1180px)');
+    const syncViewport = () => {
+      const matches = mediaQuery.matches;
+      setIsMobileViewport(matches);
+      setIsMobileConversationView(matches ? false : true);
+      setIsConversationPaneClosed(false);
+    };
+
+    syncViewport();
+    mediaQuery.addEventListener('change', syncViewport);
+
+    return () => {
+      mediaQuery.removeEventListener('change', syncViewport);
+    };
+  }, []);
+
+  useEffect(() => {
+    const hasSessionChanged = lastChatTypeSessionIdRef.current !== activeSessionId;
+    lastChatTypeSessionIdRef.current = activeSessionId;
+
+    if (activeSessionId) {
+      if (hasSessionChanged) {
+        const lastUsedChatTypeId = getStoredChatSessionLastTypeId(activeSessionId);
+
+        if (lastUsedChatTypeId && availableChatTypes.some((item) => item.id === lastUsedChatTypeId)) {
+          if (selectedChatTypeId !== lastUsedChatTypeId) {
+            setSelectedChatTypeId(lastUsedChatTypeId);
+          }
+          return;
+        }
+
+        const defaultChatTypeId = availableChatTypes[0]?.id ?? null;
+
+        if (selectedChatTypeId !== defaultChatTypeId) {
+          setSelectedChatTypeId(defaultChatTypeId);
+        }
+        return;
+      }
+    }
+
+    if (selectedChatTypeId && availableChatTypes.some((item) => item.id === selectedChatTypeId)) {
+      return;
+    }
+
+    setSelectedChatTypeId(availableChatTypes[0]?.id ?? null);
+  }, [activeSessionId, availableChatTypes, selectedChatTypeId]);
+
+  useEffect(() => {
+    if (!activeSessionId || !selectedChatTypeId) {
+      return;
+    }
+
+    setStoredChatSessionLastTypeId(activeSessionId, selectedChatTypeId);
+  }, [activeSessionId, selectedChatTypeId]);
+
+  useEffect(() => {
+    const nextView = initialView === 'errors' ? 'errors' : 'chat';
+
+    if (nextView === 'errors' && !hasAccess) {
+      setActiveView('chat');
+      return;
+    }
+
+    setActiveView(nextView);
+  }, [hasAccess, initialView]);
+
+  useEffect(() => {
+    return () => {
+      if (copyFeedbackTimerRef.current !== null) {
+        window.clearTimeout(copyFeedbackTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const { body, documentElement } = document;
+    const previousBodyOverflow = body.style.overflow;
+    const previousHtmlOverflow = documentElement.style.overflow;
+    const shouldLockOuterScroll = isMaximized || (lockOuterScrollOnMobile && isMobileViewport);
+
+    if (shouldLockOuterScroll) {
+      body.style.overflow = 'hidden';
+      documentElement.style.overflow = 'hidden';
+    }
+
+    return () => {
+      body.style.overflow = previousBodyOverflow;
+      documentElement.style.overflow = previousHtmlOverflow;
+    };
+  }, [isMaximized, isMobileViewport, lockOuterScrollOnMobile]);
+
+  useEffect(() => {
+    setEditingConversationTitle(activeConversation?.title ?? '');
+  }, [activeConversation?.sessionId, activeConversation?.title]);
+
+  useEffect(() => {
+    if (!requestedSessionId) {
+      handledRequestedSessionIdRef.current = '';
+      return;
+    }
+
+    if (isConversationListLoading) {
+      return;
+    }
+
+    const requestedConversationExists = conversationItems.some((item) => item.sessionId === requestedSessionId);
+
+    if (!requestedConversationExists) {
+      return;
+    }
+
+    if (requestedSessionId === activeSessionId && handledRequestedSessionIdRef.current === requestedSessionId) {
+      return;
+    }
+
+    handledRequestedSessionIdRef.current = requestedSessionId;
+
+    if (requestedSessionId === activeSessionId) {
+      if (isMobileViewport && !isConversationPaneClosed) {
+        setIsMobileConversationView(true);
+      }
+      if (!isConversationPaneClosed) {
+        setActiveView('chat');
+      }
+      return;
+    }
+
+    openConversationSession(requestedSessionId);
+  }, [activeSessionId, conversationItems, isConversationListLoading, isConversationPaneClosed, isMobileViewport, requestedSessionId]);
+
+  useEffect(() => {
+    if (requestedSessionId) {
+      return;
+    }
+
+    if (conversationItems.length === 0) {
+      setActiveSessionId('');
+      setMessages([]);
+      setRequestItems([]);
+      setIsConversationPaneClosed(false);
+      setIsMobileConversationView(false);
+      return;
+    }
+
+    if (activeSessionId) {
+      return;
+    }
+  }, [activeSessionId, conversationItems, isMobileViewport, requestedSessionId]);
+
+  useEffect(() => {
+    const previousConnectionState = previousConnectionStateRef.current;
+
+    if (previousConnectionState === 'connected' && connectionState !== 'connected') {
+      shouldRestoreConversationAfterReconnectRef.current = true;
+    }
+
+    previousConnectionStateRef.current = connectionState;
+  }, [connectionState]);
+
+  useEffect(() => {
+    if (connectionState !== 'connected') {
+      return;
+    }
+
+    if (isDeferringAuxiliaryChatRequests) {
+      return;
+    }
+
+    let isCancelled = false;
+
+    if (!activeSessionId.trim()) {
+      void chatGateway.listConversations().then((items) => {
+        if (!isCancelled) {
+          setConversationItems(items);
+        }
+      }).catch(() => {
+        // 재연결 직후 목록 재조회 실패는 현재 목록 상태를 유지한다.
+      });
+    }
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [activeSessionId, connectionState, isDeferringAuxiliaryChatRequests]);
+
+  useEffect(() => {
+    if (connectionState !== 'disconnected') {
+      return;
+    }
+
+    setConversationItems((previous) =>
+      previous.map((item) => ({
+        ...item,
+        currentRequestId: null,
+        currentJobStatus: null,
+        currentJobMessage: null,
+        currentQueueSize: 0,
+      })),
+    );
+  }, [connectionState]);
+
+  useEffect(() => {
+    if (!activeSessionId) {
+      return;
+    }
+
+    setConversationItems((previous) =>
+      previous.map((item) => {
+        if (item.sessionId !== activeSessionId) {
+          return item;
+        }
+
+        const latestMessage = getLatestConversationPreviewMessage(messages);
+        const nextPreview = latestMessage ? createConversationPreviewText(latestMessage.text) : item.lastMessagePreview;
+
+        return {
+          ...item,
+          title: buildConversationTitleFromMessages(messages, item.title),
+          lastMessagePreview: nextPreview,
+          lastMessageAt: latestMessage ? new Date().toISOString() : item.lastMessageAt,
+        };
+      }),
+    );
+  }, [activeSessionId, messages]);
+
+  useEffect(() => {
+    if (!activeConversation) {
+      return;
+    }
+
+    if (
+      !isActiveChatSessionInForeground({
+        sessionId: activeConversation.sessionId,
+        activeSessionId,
+        activeView,
+        isConversationPaneClosed,
+        isMobileViewport,
+        isMobileConversationView,
+      })
+    ) {
+      return;
+    }
+
+    if (isConversationContentLoading || !shouldStickToBottomRef.current) {
+      return;
+    }
+
+    const latestResponseMessageId = requestItems.reduce<number>(
+      (maxId, item) =>
+        item.sessionId === activeConversation.sessionId && item.hasResponse && item.responseMessageId != null
+          ? Math.max(maxId, item.responseMessageId)
+          : maxId,
+      0,
+    );
+
+    if (latestResponseMessageId <= 0) {
+      return;
+    }
+
+    if (!messages.some((item) => item.id === latestResponseMessageId && item.author === 'codex')) {
+      return;
+    }
+
+    if (lastMarkedReadResponseIdBySessionRef.current[activeConversation.sessionId] === latestResponseMessageId) {
+      return;
+    }
+
+    lastMarkedReadResponseIdBySessionRef.current[activeConversation.sessionId] = latestResponseMessageId;
+    setConversationItems((previous) =>
+      previous.map((item) =>
+        item.sessionId === activeConversation.sessionId
+          ? {
+              ...item,
+              hasUnreadResponse: false,
+            }
+          : item,
+      ),
+    );
+
+    void chatGateway.markConversationRead(activeConversation.sessionId).catch(() => {
+      delete lastMarkedReadResponseIdBySessionRef.current[activeConversation.sessionId];
+    });
+  }, [
+    activeConversation,
+    activeSessionId,
+    activeView,
+    isConversationContentLoading,
+    isConversationPaneClosed,
+    isMobileConversationView,
+    isMobileViewport,
+    messages,
+    requestItems,
+  ]);
+
+  const {
+    executeSendMessage,
+    handleComposerFilesPicked,
+    handleSend,
+    handleSendImmediate,
+  } = useConversationComposerController({
+    activeSessionId,
+    appConfigChat: appConfig.chat,
+    draft,
+    composerAttachments,
+    isComposerAttachmentUploading,
+    selectedChatType,
+    socketRef,
+    composerRef,
+    messagesRef,
+    pendingRequestsRef,
+    shouldStickToBottomRef,
+    setDraft,
+    setComposerAttachments,
+    setIsComposerAttachmentUploading,
+    setMessages,
+    setActiveSystemStatus,
+    setIsSystemStatusPending,
+    setShowScrollToBottom,
+    setPendingContextConfirm,
+    setStoredChatSessionLastTypeId,
+    upsertRequestItem,
+    syncConversationPreviewForRequest,
+    updatePendingMessageStatus,
+    createLocalMessage,
+    createChatMessage,
+    createActivityLogPlaceholder,
+    buildOutgoingMessageText,
+    summarizeRecentContext,
+    mergeComposerAttachments,
+    sendChatRequest,
+    scrollViewportToBottom,
+  });
+
+  const handleCopyMessage = async (message: ChatMessage) => {
+    await copyText(message.text);
+    setCopiedMessageId(message.id);
+
+    if (copyFeedbackTimerRef.current !== null) {
+      window.clearTimeout(copyFeedbackTimerRef.current);
+    }
+
+    copyFeedbackTimerRef.current = window.setTimeout(() => {
+      setCopiedMessageId((current) => (current === message.id ? null : current));
+      copyFeedbackTimerRef.current = null;
+    }, 2000);
+  };
+
+  if (activeView === 'errors' && !hasAccess) {
+    return (
+      <Card
+        title={<Text strong>에러 로그</Text>}
+        className="app-chat-panel"
+        styles={{ body: { height: '100%' } }}
+      >
+        <Alert
+          showIcon
+          type="warning"
+          message="권한 토큰이 없어 Codex 채팅이 숨겨졌습니다."
+          description="설정 > 토큰 관리에서 권한 토큰을 등록한 사용자만 Codex 채팅과 에러 로그를 사용할 수 있습니다."
+        />
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      {messageContextHolder}
+      <Card
+        title={
+        <div className="app-chat-panel__title-group">
+          <div
+            ref={titleClusterRef}
+            className={`app-chat-panel__title-cluster${isTitleClusterOpen ? ' is-open' : ''}`}
+          >
+            <button
+              type="button"
+              className={`app-chat-panel__title-cluster-button${activeView === 'chat' ? ' is-active' : ''}`}
+              aria-label="화면 이동 메뉴 열기"
+              onClick={() => {
+                setIsTitleClusterOpen((current) => !current);
+              }}
+            >
+              <AppstoreOutlined />
+            </button>
+            <button
+              type="button"
+              className={`app-chat-panel__title-cluster-mini app-chat-panel__title-cluster-mini--chat${
+                activeView === 'chat' ? ' is-active' : ''
+              }`}
+              aria-label="대화 보기"
+              onClick={() => {
+                setActiveView('chat');
+                setIsTitleClusterOpen(false);
+              }}
+            >
+              <MessageOutlined />
+            </button>
+            <button
+              type="button"
+              className={`app-chat-panel__title-cluster-mini app-chat-panel__title-cluster-mini--runtime${
+                activeView === 'runtime' ? ' is-active' : ''
+              }`}
+              aria-label="런타임 보기"
+              onClick={() => {
+                setActiveView('runtime');
+                setIsTitleClusterOpen(false);
+              }}
+            >
+              <PaperClipOutlined />
+            </button>
+            {hasAccess ? (
+              <button
+                type="button"
+                className={`app-chat-panel__title-cluster-mini app-chat-panel__title-cluster-mini--error${
+                  activeView === 'errors' ? ' is-active' : ''
+                }`}
+                aria-label="에러 로그 보기"
+                onClick={() => {
+                  setActiveView('errors');
+                  setIsTitleClusterOpen(false);
+                }}
+              >
+                <ExclamationCircleOutlined />
+              </button>
+            ) : null}
+          </div>
+          <div className="app-chat-panel__title-copy">
+            <div className="app-chat-panel__title-row">
+              <div className="app-chat-panel__title-heading">
+                {activeView === 'chat' ? (
+                  isEditingConversationTitle && activeConversation ? (
+                    <Input
+                      value={editingConversationTitle}
+                      size="small"
+                      className="app-chat-panel__title-input"
+                      autoFocus
+                      disabled={renamingConversationSessionId === activeConversation.sessionId}
+                      onChange={(event) => {
+                        setEditingConversationTitle(event.target.value);
+                      }}
+                      onPressEnter={() => {
+                        void handleRenameConversation();
+                      }}
+                      onBlur={() => {
+                        void handleRenameConversation();
+                      }}
+                    />
+                  ) : (
+                    <Text strong>{activeConversation?.title || 'Codex Chat'}</Text>
+                  )
+                ) : activeView === 'runtime' ? (
+                  <Text strong>Codex Live 런타임</Text>
+                ) : (
+                  <Text strong>에러 로그</Text>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+      extra={
+        activeView === 'errors' || activeView === 'runtime' ? null : (
+          <Space size={8}>
+            {activeConversation ? (
+              <Button
+                size="small"
+                loading={notificationToggleSessionId === activeConversation.sessionId}
+                icon={activeConversation.notifyOffline ? <BellFilled /> : <BellOutlined />}
+                aria-label={activeConversation.notifyOffline ? '채팅방 알림 켜짐' : '채팅방 알림 꺼짐'}
+                onClick={() => {
+                  void handleToggleConversationNotification();
+                }}
+              />
+            ) : null}
+            {activeConversation ? (
+              <Button
+                size="small"
+                loading={renamingConversationSessionId === activeConversation.sessionId}
+                icon={<EditOutlined />}
+                aria-label="대화 제목 수정"
+                onClick={() => {
+                  setEditingConversationTitle(activeConversation.title);
+                  setIsEditingConversationTitle(true);
+                }}
+              />
+            ) : null}
+            {activeConversation ? (
+              <Button
+                size="small"
+                icon={<CloseOutlined />}
+                aria-label="대화창 닫기"
+                onClick={() => {
+                  handledRequestedSessionIdRef.current = '';
+                  replaceChatSessionInUrl('');
+                  setIsConversationPaneClosed(true);
+                  if (isMobileViewport) {
+                    setIsMobileConversationView(false);
+                  }
+                }}
+              />
+            ) : null}
+            <Button
+              size="small"
+              icon={isMaximized ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+              aria-label={isMaximized ? '최대화 해제' : '최대화'}
+              onClick={() => {
+                setIsMaximized((current) => !current);
+              }}
+            />
+          </Space>
+        )
+      }
+      className={`app-chat-panel${isMaximized ? ' app-chat-panel--maximized' : ''}${
+        !isMaximized && isTabletAppLayout ? ' app-chat-panel--tablet-app' : ''
+      }`}
+      styles={{ body: { height: '100%' } }}
+    >
+      <div className="app-chat-panel__stack">
+        {activeView === 'chat' ? (
+          <>
+            {!isMobileViewport || !isMobileConversationView || isConversationPaneClosed ? (
+              <aside className="app-chat-panel__conversation-list">
+                <div className="app-chat-panel__conversation-list-header">
+                  <Text strong>대화 목록</Text>
+                  <Space size={8}>
+                    <Button
+                      size="small"
+                      icon={<ReloadOutlined />}
+                      aria-label="대화 목록 새로고침"
+                      title="대화 목록 새로고침"
+                      loading={isConversationListLoading}
+                      onClick={() => {
+                        void reloadConversationItems();
+                      }}
+                    />
+                    <Button
+                      size="small"
+                      icon={<PlusOutlined />}
+                      aria-label="새 대화 생성"
+                      title="새 대화 생성"
+                      onClick={() => {
+                        void handleCreateConversation();
+                      }}
+                    />
+                    <Text type="secondary">{isConversationListLoading ? '불러오는 중' : `${conversationItems.length}건`}</Text>
+                  </Space>
+                </div>
+                <div className="app-chat-panel__conversation-list-search">
+                  <Input
+                    size="small"
+                    value={conversationSearch}
+                    placeholder="대화 검색"
+                    prefix={<SearchOutlined />}
+                    onChange={(event) => {
+                      setConversationSearch(event.target.value);
+                    }}
+                  />
+                </div>
+                <div className="app-chat-panel__conversation-list-body">
+                  {filteredConversationItems.length > 0 ? (
+                    <>
+                      {unreadConversationItems.length > 0 ? (
+                        <div className="app-chat-panel__conversation-section">
+                          <div className="app-chat-panel__conversation-section-header app-chat-panel__conversation-section-header--unread">
+                            <span className="app-chat-panel__conversation-section-title">읽지 않은 대화</span>
+                            <span className="app-chat-panel__conversation-section-count">
+                              {unreadConversationItems.length}
+                            </span>
+                          </div>
+                          {unreadConversationItems.map((item) => renderConversationListItem(item, 'unread'))}
+                        </div>
+                      ) : null}
+                      {processingConversationItems.length > 0 ? (
+                        <div className="app-chat-panel__conversation-section">
+                          <div className="app-chat-panel__conversation-section-header app-chat-panel__conversation-section-header--processing">
+                            <span className="app-chat-panel__conversation-section-title">요청 처리중</span>
+                            <span className="app-chat-panel__conversation-section-count">
+                              {processingConversationItems.length}
+                            </span>
+                          </div>
+                          {processingConversationItems.map((item) => renderConversationListItem(item, 'processing'))}
+                        </div>
+                      ) : null}
+                      {generalConversationItems.length > 0 ? (
+                        <div className="app-chat-panel__conversation-section">
+                          {processingConversationItems.length > 0 || unreadConversationItems.length > 0 ? (
+                            <div className="app-chat-panel__conversation-section-header app-chat-panel__conversation-section-header--muted">
+                              <span className="app-chat-panel__conversation-section-title">전체 대화</span>
+                              <span className="app-chat-panel__conversation-section-count">
+                                {generalConversationItems.length}
+                              </span>
+                            </div>
+                          ) : null}
+                          {generalConversationItems.map((item) => renderConversationListItem(item, 'general'))}
+                        </div>
+                      ) : null}
+                    </>
+                  ) : (
+                    <div className="app-chat-panel__conversation-empty-list">
+                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="저장된 대화가 없습니다." />
+                    </div>
+                  )}
+                </div>
+              </aside>
+            ) : null}
+            {!isConversationPaneClosed && (!isMobileViewport || isMobileConversationView) ? (
+              <div className="app-chat-panel__conversation-main">
+                {activeConversation ? (
+                  <ChatConversationView
+                    viewportRef={viewportRef}
+                    composerRef={composerRef}
+                    visibleMessages={chatMessages}
+                    activeSystemStatus={activeSystemStatus}
+                    isSystemStatusPending={isSystemStatusPending}
+                    showScrollToBottom={showScrollToBottom}
+                    copiedMessageId={copiedMessageId}
+                    draft={draft}
+                    composerAttachments={composerAttachments}
+                    isConversationLoading={isConversationContentLoading}
+                    conversationLoadingLabel={conversationLoadingLabel}
+                    hasOlderMessages={hasOlderMessages}
+                    isLoadingOlderMessages={isLoadingOlderMessages}
+                    isPullToLoadArmed={isPullToLoadArmed}
+                    pullToLoadDistance={pullToLoadDistance}
+                    requestStateMap={activeRequestMap}
+                    selectedChatTypeId={selectedChatType?.id ?? null}
+                    queuedRequests={activeQueuedComposerRequests.map((item, index) => ({
+                      requestId: item.requestId,
+                      order: index + 1,
+                      text: item.userText,
+                    }))}
+                    chatTypeOptions={chatTypeOptions}
+                    previewItems={previewItems.map((item) => ({ id: item.id, label: item.label, kind: item.kind }))}
+                    isResourceStripOpen={isResourceStripOpen}
+                    isComposerDisabled={!selectedChatType}
+                    isComposerAttachmentUploading={isComposerAttachmentUploading}
+                    onViewportScroll={handleViewportScroll}
+                    onViewportTouchEnd={handleViewportTouchEnd}
+                    onViewportTouchMove={handleViewportTouchMove}
+                    onViewportTouchStart={handleViewportTouchStart}
+                    onDraftChange={setDraft}
+                    onPickComposerFiles={handleComposerFilesPicked}
+                    onRemoveComposerAttachment={(attachmentId) => {
+                      setComposerAttachments((previous) => previous.filter((attachment) => attachment.id !== attachmentId));
+                    }}
+                    onSelectChatType={setSelectedChatTypeId}
+                    onSend={handleSend}
+                    onSendImmediate={handleSendImmediate}
+                    onToggleResourceStrip={() => {
+                      setIsResourceStripOpen((current) => !current);
+                    }}
+                    onScrollToBottom={() => {
+                      shouldStickToBottomRef.current = true;
+                      setShowScrollToBottom(false);
+                      scrollViewportToBottom();
+                    }}
+                    onOpenPreview={(previewId) => {
+                      setActivePreviewId(previewId);
+                      setIsPreviewModalOpen(true);
+                    }}
+                    onCopyMessage={(message) => {
+                      void handleCopyMessage(message);
+                    }}
+                    onRetryMessage={(message) => {
+                      if (!message.clientRequestId) {
+                        return;
+                      }
+
+                      retryPendingRequest(message.clientRequestId);
+                    }}
+                    onCancelMessage={(message) => {
+                      if (!message.clientRequestId) {
+                        return;
+                      }
+
+                      cancelPendingRequest(message.clientRequestId);
+                    }}
+                    onDeleteRequest={(message) => {
+                      if (!message.clientRequestId) {
+                        return;
+                      }
+
+                      void deleteStoredRequest(message.clientRequestId);
+                    }}
+                    onRemoveQueuedRequest={removeQueuedComposerRequest}
+                  />
+                ) : (
+                  <div className="app-chat-panel__conversation-empty">
+                    <Empty description="선택된 대화가 없습니다. 왼쪽 목록에서 대화를 선택하세요." />
+                  </div>
+                )}
+              </div>
+            ) : null}
+          </>
+        ) : activeView === 'runtime' ? (
+          <ChatRuntimeDashboard
+            snapshot={runtimeSnapshot}
+            activeSessionId={activeSessionId}
+            connectionState={connectionState}
+            onSelectSession={openConversationSession}
+            socketRef={socketRef}
+            liveDetail={runtimeJobDetail}
+            requestedLogRequestId={requestedRuntimeLogRequestId}
+            onRequestedLogHandled={clearRequestedRuntimeLogInUrl}
+          />
+        ) : (
+          <ErrorLogViewer
+            errorLogs={errorLogs}
+            selectedErrorLog={selectedErrorLog}
+            selectedErrorLogReferenceSummary={selectedErrorLogReferenceSummary}
+            activeErrorResource={activeErrorResource}
+            isErrorDetailExpanded={isErrorDetailExpanded}
+            isLoadingErrorLogs={isLoadingErrorLogs}
+            errorLogLoadError={errorLogLoadError}
+            errorSourceSummary={errorSourceSummary}
+            onRefresh={() => {
+              void loadErrorLogs();
+            }}
+            onSelectErrorLog={setSelectedErrorLogId}
+            onSelectResource={setActiveErrorResourceUrl}
+            onToggleExpanded={setIsErrorDetailExpanded}
+          />
+        )}
+      </div>
+
+      <Modal
+        open={Boolean(pendingContextConfirm)}
+        title="최근 대화 문맥 일부만 참조됩니다"
+        okText="확인 후 전송"
+        cancelText="취소"
+        zIndex={1690}
+        onCancel={() => {
+          setPendingContextConfirm(null);
+        }}
+        onOk={() => {
+          if (!pendingContextConfirm) {
+            return;
+          }
+
+          executeSendMessage(pendingContextConfirm);
+          setPendingContextConfirm(null);
+        }}
+      >
+        <Space direction="vertical" size={8}>
+          <Text>
+            최근 대화가 길어서 이번 요청에는 최근 {pendingContextConfirm?.includedContextCount ?? 0}개만 문맥으로 넣고,
+            이전 {pendingContextConfirm?.omittedContextCount ?? 0}개는 제외합니다.
+          </Text>
+          <Text type="secondary">
+            전체 맥락이 꼭 필요하면 요청 내용을 더 구체화하거나 새로 정리한 뒤 보내는 편이 안전합니다.
+          </Text>
+        </Space>
+      </Modal>
+      <Modal
+        open={isPreviewModalOpen && Boolean(activePreview)}
+        title={activePreview ? `${activePreview.label} preview` : 'preview'}
+        footer={
+          activePreview ? (
+            <Space wrap>
+              <Button
+                href={activePreview.url}
+                target="_blank"
+                rel="noreferrer"
+                icon={<LinkOutlined />}
+              >
+                열기
+              </Button>
+              <Button href={activePreview.url} download icon={<DownloadOutlined />}>
+                다운로드
+              </Button>
+            </Space>
+          ) : null
+        }
+        onCancel={() => {
+          setIsPreviewModalOpen(false);
+        }}
+        width={960}
+        zIndex={1600}
+        className="app-chat-panel__preview-modal"
+      >
+        {activePreview ? (
+          <div className="app-chat-panel__preview-modal-body">
+            <div className="app-chat-panel__preview-modal-meta">
+              <Space size={[8, 8]} wrap>
+                <Tag icon={<PaperClipOutlined />}>{activePreview.kind}</Tag>
+                <Tag>{activePreview.source === 'context' ? '현재 화면' : '채팅 결과'}</Tag>
+              </Space>
+            </div>
+            <div className="app-chat-panel__preview-stage app-chat-panel__preview-stage--modal">
+              <ChatPreviewBody
+                target={activePreview}
+                previewText={previewText}
+                isPreviewLoading={isPreviewLoading}
+                previewError={previewError}
+                previewContentType={previewContentType}
+              />
+            </div>
+          </div>
+        ) : (
+          <Empty description="preview 항목이 없습니다." />
+        )}
+      </Modal>
+      <Modal
+        open={Boolean(pendingDeleteConversation)}
+        title="대화방을 삭제할까요?"
+        okText="삭제"
+        cancelText="취소"
+        okButtonProps={{ danger: true }}
+        zIndex={1700}
+        className="app-chat-panel__delete-confirm-modal"
+        onCancel={() => {
+          setPendingDeleteSessionId(null);
+        }}
+        onOk={async () => {
+          const targetSessionId = pendingDeleteSessionId;
+
+          if (!targetSessionId) {
+            return;
+          }
+
+          await handleDeleteConversation(targetSessionId);
+          setPendingDeleteSessionId(null);
+        }}
+      >
+        <Text>
+          {pendingDeleteConversation?.title
+            ? `"${pendingDeleteConversation.title}" 대화와 저장된 메시지가 삭제됩니다.`
+            : '이 대화와 저장된 메시지가 삭제됩니다.'}
+        </Text>
+      </Modal>
+      </Card>
+    </>
+  );
+}
diff --git a/src/app/main/MainContent.tsx b/src/app/main/MainContent.tsx
new file mode 100755
index 0000000..b98ef79
--- /dev/null
+++ b/src/app/main/MainContent.tsx
@@ -0,0 +1,328 @@
+import { CompressOutlined } from '@ant-design/icons';
+import { Button, Layout, Modal, Space, Typography } from 'antd';
+import { useMemo, useRef, useState, type ReactNode } from 'react';
+import { WindowUI, type WindowFrame } from '../../components/window';
+import { BoardPage } from '../../features/board';
+import { ComponentSamplesLayout } from '../../features/layout/component-sample-gallery';
+import { SampleWidgetsLayout } from '../../features/layout/widget-sample-gallery';
+import { HistoryPage } from '../../features/history';
+import { PlanBoardChartsPage, PlanBoardPage, PlanSchedulePage, ReleaseReviewPage } from '../../features/planBoard';
+import { useSearchLayer } from '../../layer';
+import { useAppStore } from '../../store';
+import { LayoutPlaygroundView } from '../../views/play/LayoutPlaygroundView';
+import { ChatTypeManagementPage } from './ChatTypeManagementPage';
+import { ChatSourceChangesPage } from './ChatSourceChangesPage';
+import { MainChatPanel } from './MainChatPanel';
+import { useMainLayoutContext } from './layout/MainLayoutContext';
+import {
+  HIDDEN_COMPONENT_IDS,
+  buildCascadeWindowFrames,
+  buildGridWindowFrames,
+  getDefaultWindowFrame,
+  getPlanStatusFromWindowSelection,
+} from './mainContent/windowLayout';
+import type { MainContentProps } from './types';
+
+const { Content } = Layout;
+const { Paragraph, Text, Title } = Typography;
+
+export function MainContent({
+  contentExpanded,
+  onToggleContentExpanded,
+  children,
+}: MainContentProps) {
+  const { setFocusedComponentId } = useAppStore();
+  const { windowSelections, clearWindowSelection } = useSearchLayer();
+  const {
+    componentSampleEntries,
+    widgetSampleEntries,
+    componentSamples,
+    widgetSamples,
+    initialSelectedPlanId,
+    initialSelectedWorkId,
+  } = useMainLayoutContext();
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [windowFrames, setWindowFrames] = useState<Record<string, WindowFrame>>({});
+  const [windowZIndexes, setWindowZIndexes] = useState<Record<string, number>>({});
+  const [isWindowLayoutModalOpen, setIsWindowLayoutModalOpen] = useState(false);
+  const sampleEntryMap = useMemo(
+    () =>
+      new Map(
+        [...componentSamples, ...widgetSamples].map((entry) => [
+          `${entry.modulePath.includes('/widgets/') ? 'widget' : 'component'}:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+          entry,
+        ]),
+      ),
+    [componentSamples, widgetSamples],
+  );
+  const getWindowFrame = (instanceId: string, selectionId: string, index: number): WindowFrame =>
+    windowFrames[instanceId] ?? getDefaultWindowFrame(selectionId, index);
+
+  const getWindowZIndex = (instanceId: string, index: number) => windowZIndexes[instanceId] ?? index + 1;
+
+  const activateWindow = (instanceId: string) => {
+    setWindowZIndexes((previous) => {
+      const highestZIndex = Math.max(0, ...Object.values(previous));
+      return {
+        ...previous,
+        [instanceId]: highestZIndex + 1,
+      };
+    });
+  };
+
+  const getStageSize = () => {
+    const stage = stageRef.current;
+
+    if (!stage) {
+      return null;
+    }
+
+    return {
+      width: stage.clientWidth,
+      height: stage.clientHeight,
+    };
+  };
+
+  const applyCascadeWindowLayout = () => {
+    const stageSize = getStageSize();
+
+    if (!stageSize) {
+      return;
+    }
+
+    const nextFrames = buildCascadeWindowFrames(windowSelections, stageSize);
+
+    setWindowFrames((previous) => ({
+      ...previous,
+      ...nextFrames,
+    }));
+    setIsWindowLayoutModalOpen(false);
+  };
+
+  const applyGridWindowLayout = () => {
+    const stageSize = getStageSize();
+
+    if (!stageSize) {
+      return;
+    }
+
+    const nextFrames = buildGridWindowFrames(windowSelections, stageSize);
+
+    setWindowFrames((previous) => ({
+      ...previous,
+      ...nextFrames,
+    }));
+    setIsWindowLayoutModalOpen(false);
+  };
+
+  const handleFocusCapture = (target: EventTarget | null) => {
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+
+    const focusedElement = target.closest<HTMLElement>('[data-focus-id]');
+    setFocusedComponentId(focusedElement?.dataset.focusId ?? null);
+  };
+
+  const renderWindowSelectionContent = (selectionId: string, fallbackContent: ReactNode) => {
+    if (selectionId === 'page:apis:components') {
+      return (
+        <ComponentSamplesLayout
+          entries={componentSampleEntries}
+          excludeComponentIds={HIDDEN_COMPONENT_IDS}
+        />
+      );
+    }
+
+    if (selectionId === 'page:apis:widgets') {
+      return <SampleWidgetsLayout entries={widgetSampleEntries} />;
+    }
+
+    if (selectionId === 'page:plans:release') {
+      return (
+        <PlanBoardPage
+          statusFilter="done"
+          quickFilter="release-pending-main"
+          initialSelectedPlanId={initialSelectedPlanId}
+          initialSelectedWorkId={initialSelectedWorkId}
+        />
+      );
+    }
+
+    if (selectionId === 'page:plans:board') {
+      return <BoardPage />;
+    }
+
+    if (selectionId === 'page:plans:release-review') {
+      return <ReleaseReviewPage />;
+    }
+
+    if (selectionId === 'page:plans:charts') {
+      return <PlanBoardChartsPage />;
+    }
+
+    if (selectionId === 'page:plans:schedule') {
+      return <PlanSchedulePage />;
+    }
+
+    if (selectionId === 'page:plans:history') {
+      return <HistoryPage />;
+    }
+
+    const planStatus = getPlanStatusFromWindowSelection(selectionId);
+
+    if (planStatus) {
+      return (
+        <PlanBoardPage
+          statusFilter={planStatus}
+          quickFilter={null}
+          initialSelectedPlanId={initialSelectedPlanId}
+          initialSelectedWorkId={initialSelectedWorkId}
+        />
+      );
+    }
+
+    if (selectionId === 'page:chat:live') {
+      return <MainChatPanel initialView="live" />;
+    }
+
+    if (selectionId === 'page:chat:errors') {
+      return <MainChatPanel initialView="errors" />;
+    }
+
+    if (selectionId === 'page:chat:changes') {
+      return <ChatSourceChangesPage />;
+    }
+
+    if (selectionId === 'page:chat:manage') {
+      return <ChatTypeManagementPage />;
+    }
+
+    if (selectionId === 'page:play:layout') {
+      return <LayoutPlaygroundView />;
+    }
+
+    return fallbackContent;
+  };
+
+  return (
+    <Content
+      className={contentExpanded ? 'app-main-content app-main-content--expanded' : 'app-main-content'}
+      onClickCapture={(event) => {
+        handleFocusCapture(event.target);
+      }}
+      onFocusCapture={(event) => {
+        handleFocusCapture(event.target);
+      }}
+    >
+      {contentExpanded ? (
+        <Button
+          type="text"
+          className="app-main-content__restore"
+          aria-label="전체화면 종료"
+          icon={<CompressOutlined />}
+          onClick={onToggleContentExpanded}
+        />
+      ) : null}
+      <div className="app-main-layout">{children}</div>
+      {windowSelections.length > 0 ? (
+        <div className="app-main-window-layer">
+          <div ref={stageRef} className="app-main-window-layer__stage">
+            {windowSelections.map((windowSelection, index) => {
+              const selectedWindowSample = sampleEntryMap.get(windowSelection.id) ?? null;
+              const SelectedWindowSample = selectedWindowSample?.Sample ?? null;
+              const fallbackContent = (
+                <div className="app-main-window-layer__fallback">
+                  <Text strong>{windowSelection.label}</Text>
+                  <div className="app-main-window-layer__keywords">
+                    {(windowSelection.keywords.length > 0 ? windowSelection.keywords : ['검색 선택']).map((keyword) => (
+                      <Text key={`${windowSelection.instanceId}-${keyword}`} code>
+                        {keyword}
+                      </Text>
+                    ))}
+                  </div>
+                </div>
+              );
+
+              const isWidgetWindow = windowSelection.id.startsWith('widget:');
+
+              return (
+                <WindowUI
+                  key={windowSelection.instanceId}
+                  title={windowSelection.label}
+                  subtitle={isWidgetWindow ? undefined : windowSelection.group}
+                  bodyClassName="app-main-window-layer__body"
+                  frame={getWindowFrame(windowSelection.instanceId, windowSelection.id, index)}
+                  onFrameChange={(nextFrame) => {
+                    setWindowFrames((previous) => ({
+                      ...previous,
+                      [windowSelection.instanceId]: nextFrame,
+                    }));
+                  }}
+                  zIndex={getWindowZIndex(windowSelection.instanceId, index)}
+                  onActivate={() => {
+                    activateWindow(windowSelection.instanceId);
+                  }}
+                  onOpenLayoutControls={() => {
+                    setIsWindowLayoutModalOpen(true);
+                  }}
+                  className="app-main-window-layer__window"
+                  onClose={() => {
+                    clearWindowSelection(windowSelection.instanceId);
+                  }}
+                >
+                  {SelectedWindowSample ? (
+                    <div
+                      className={`app-main-window-layer__sample ${
+                        isWidgetWindow
+                          ? 'app-main-window-layer__sample--fill'
+                          : 'app-main-window-layer__sample--intrinsic'
+                      }`}
+                    >
+                      <SelectedWindowSample
+                        disableWidgetCardWrapper={isWidgetWindow}
+                      />
+                    </div>
+                  ) : (
+                    <div className="app-main-window-layer__sample">
+                      {renderWindowSelectionContent(windowSelection.id, fallbackContent)}
+                    </div>
+                  )}
+                </WindowUI>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+      <Modal
+        title="윈도우 배치"
+        open={isWindowLayoutModalOpen}
+        onCancel={() => {
+          setIsWindowLayoutModalOpen(false);
+        }}
+        footer={null}
+      >
+        <Space direction="vertical" size={16} style={{ width: '100%' }}>
+          <div>
+            <Title level={5}>추천 배치</Title>
+            <Paragraph type="secondary" style={{ marginBottom: 12 }}>
+              주요 창을 크게 두고 나머지 창은 겹치지 않게 순서대로 정렬합니다.
+            </Paragraph>
+            <Button block onClick={applyCascadeWindowLayout}>
+              추천 배치 적용
+            </Button>
+          </div>
+          <div>
+            <Title level={5}>가득 채우기</Title>
+            <Paragraph type="secondary" style={{ marginBottom: 12 }}>
+              현재 열린 창을 작업 영역 기준 그리드로 꽉 차게 재배치합니다.
+            </Paragraph>
+            <Button block onClick={applyGridWindowLayout}>
+              가득 채우기 적용
+            </Button>
+          </div>
+        </Space>
+      </Modal>
+    </Content>
+  );
+}
diff --git a/src/app/main/MainHeader.tsx b/src/app/main/MainHeader.tsx
new file mode 100755
index 0000000..c317b83
--- /dev/null
+++ b/src/app/main/MainHeader.tsx
@@ -0,0 +1,3231 @@
+import {
+  ApiOutlined,
+  BellOutlined,
+  ClockCircleOutlined,
+  CopyOutlined,
+  DownloadOutlined,
+  FileMarkdownOutlined,
+  LoadingOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  ProfileOutlined,
+  ReloadOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Drawer,
+  Dropdown,
+  Grid,
+  Input,
+  InputNumber,
+  Layout,
+  Modal,
+  Progress,
+  Select,
+  Segmented,
+  Space,
+  Typography,
+} from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { fetchPlanItems } from '../../features/planBoard/api';
+import { isAutomationFailedItem, isReleasePendingMainItem, isWorkingPlanItem } from '../../features/planBoard/quickFilters';
+import { fetchServerCommands, restartServerCommand } from '../../features/serverCommand/api';
+import type { ServerCommandItem } from '../../features/serverCommand/types';
+import {
+  DEFAULT_APP_CONFIG,
+  saveAutomationNotificationPreferenceToServer,
+  saveAppConfigToServer,
+  setStoredAppConfig,
+  syncAppConfigFromServer,
+  useAppConfig,
+  type AppConfig,
+  type PlanCostTimeUnit,
+} from './appConfig';
+import { applyAppUpdate, getAppUpdateSnapshot, subscribeAppUpdate, type AppUpdateStatus } from './appUpdate';
+import {
+  fetchWebPushConfig,
+  registerPwaNotificationToken,
+  registerWebPushSubscription,
+  unregisterPwaNotificationToken,
+  unregisterWebPushSubscription,
+  type WebPushSubscriptionPayload,
+} from './notificationApi';
+import {
+  clearNotificationIdentity,
+  getSavedNotificationDeviceId,
+  getSavedPwaNotificationToken,
+  setSavedPwaNotificationToken,
+} from './notificationIdentity';
+import {
+  ALLOWED_REGISTRATION_TOKEN,
+  setRegisteredAccessToken,
+  useTokenAccess,
+} from './tokenAccess';
+import { chatConnectionGateway, chatGateway } from './chatV2';
+import { HeaderMessageCenter } from './HeaderMessageCenter';
+import { fetchChatRuntimeJobDetail } from './mainChatPanel';
+import {
+  getSharedActiveConversationSnapshot,
+  subscribeSharedActiveConversation,
+} from './mainChatPanel/sharedActiveConversation';
+import { buildChatPath } from './routes';
+import type { MainHeaderProps } from './types';
+import type { ChatRuntimeJobDetail, ChatRuntimeSnapshot } from './mainChatPanel/types';
+
+const { Header } = Layout;
+const { Paragraph, Text } = Typography;
+const { useBreakpoint } = Grid;
+const APP_SETTINGS_CATEGORIES = [
+  { value: 'automation', label: '작업' },
+  { value: 'workspace', label: '작업 환경' },
+] as const;
+
+const APP_SETTINGS_SECTIONS: Array<{
+  value: 'chatSettings' | 'planDefaults' | 'planCost' | 'worklogAutomation' | 'automationNotifications' | 'gestureShortcuts';
+  label: string;
+  category: (typeof APP_SETTINGS_CATEGORIES)[number]['value'];
+}> = [
+  { value: 'chatSettings', label: '채팅 문맥 설정', category: 'workspace' },
+  { value: 'planDefaults', label: '자동화 기본값', category: 'automation' },
+  { value: 'planCost', label: '비용 표시', category: 'automation' },
+  { value: 'worklogAutomation', label: '업무일지 자동화 설정', category: 'automation' },
+  { value: 'automationNotifications', label: '자동화 알림', category: 'automation' },
+  { value: 'gestureShortcuts', label: '제스처 / 단축키', category: 'workspace' },
+];
+
+const PLAN_COST_TIME_UNIT_LABELS: Record<PlanCostTimeUnit, string> = {
+  hour: '시간',
+  minute: '분',
+  second: '초',
+};
+
+type ClientNotificationPermissionState = 'unsupported' | 'default' | 'granted' | 'denied';
+type SettingsModalKey = 'appSettings' | 'notification' | 'token' | 'update';
+type AppSettingsCategoryKey = (typeof APP_SETTINGS_CATEGORIES)[number]['value'];
+type AppSettingsSectionKey = (typeof APP_SETTINGS_SECTIONS)[number]['value'];
+
+let lastPushSwRegisterAttempts: Array<{ url: string; mode: string; error: string }> = [];
+type FeedbackTone = 'success' | 'info' | 'warning' | 'error';
+type InlineFeedback = {
+  tone: FeedbackTone;
+  message: string;
+};
+
+function areChatSettingsEqual(left: AppConfig['chat'], right: AppConfig['chat']) {
+  return left.maxContextMessages === right.maxContextMessages && left.maxContextChars === right.maxContextChars;
+}
+
+function getChatSettingsDiffLabels(saved: AppConfig['chat'], draft: AppConfig['chat']) {
+  const changedLabels: string[] = [];
+
+  if (saved.maxContextMessages !== draft.maxContextMessages) {
+    changedLabels.push('최근 문맥 메시지 수');
+  }
+
+  if (saved.maxContextChars !== draft.maxContextChars) {
+    changedLabels.push('최근 문맥 글자 수');
+  }
+
+  return changedLabels;
+}
+
+function areWorklogAutomationSettingsEqual(left: AppConfig['worklogAutomation'], right: AppConfig['worklogAutomation']) {
+  return (
+    left.autoCreateDailyWorklog === right.autoCreateDailyWorklog &&
+    left.dailyCreateTime === right.dailyCreateTime &&
+    left.includeScreenshots === right.includeScreenshots &&
+    left.includeChangedFiles === right.includeChangedFiles &&
+    left.includeCommandLogs === right.includeCommandLogs &&
+    left.template === right.template
+  );
+}
+
+function getWorklogAutomationDiffLabels(saved: AppConfig['worklogAutomation'], draft: AppConfig['worklogAutomation']) {
+  const changedLabels: string[] = [];
+
+  if (saved.autoCreateDailyWorklog !== draft.autoCreateDailyWorklog) {
+    changedLabels.push('일일 작업일지 자동 생성');
+  }
+
+  if (saved.dailyCreateTime !== draft.dailyCreateTime) {
+    changedLabels.push('자동 생성 시각');
+  }
+
+  if (saved.includeScreenshots !== draft.includeScreenshots) {
+    changedLabels.push('스크린샷 포함');
+  }
+
+  if (saved.includeChangedFiles !== draft.includeChangedFiles) {
+    changedLabels.push('변경 파일 목록 포함');
+  }
+
+  if (saved.includeCommandLogs !== draft.includeCommandLogs) {
+    changedLabels.push('실행 커맨드 포함');
+  }
+
+  if (saved.template !== draft.template) {
+    changedLabels.push('기본 템플릿');
+  }
+
+  return changedLabels;
+}
+
+function arePlanDefaultSettingsEqual(left: AppConfig['planDefaults'], right: AppConfig['planDefaults']) {
+  return (
+    left.jangsingProcessingRequired === right.jangsingProcessingRequired &&
+    left.autoDeployToMain === right.autoDeployToMain &&
+    left.openEditorAfterCreate === right.openEditorAfterCreate
+  );
+}
+
+function getPlanDefaultDiffLabels(saved: AppConfig['planDefaults'], draft: AppConfig['planDefaults']) {
+  const changedLabels: string[] = [];
+
+  if (saved.jangsingProcessingRequired !== draft.jangsingProcessingRequired) {
+    changedLabels.push('기능동작확인 기본값');
+  }
+
+  if (saved.autoDeployToMain !== draft.autoDeployToMain) {
+    changedLabels.push('메인까지 자동등록');
+  }
+
+  if (saved.openEditorAfterCreate !== draft.openEditorAfterCreate) {
+    changedLabels.push('등록 후 편집기 열기');
+  }
+
+  return changedLabels;
+}
+
+function arePlanCostSettingsEqual(left: AppConfig['planCost'], right: AppConfig['planCost']) {
+  return (
+    left.baseCostPerMillionTokens === right.baseCostPerMillionTokens &&
+    left.retryCostMultiplierPercent === right.retryCostMultiplierPercent &&
+    left.hourlyCostMultiplierPercent === right.hourlyCostMultiplierPercent &&
+    left.timeCostUnit === right.timeCostUnit &&
+    left.attentionCostThresholdMultiplier === right.attentionCostThresholdMultiplier &&
+    left.warningCostThresholdMultiplier === right.warningCostThresholdMultiplier &&
+    left.highCostThresholdMultiplier === right.highCostThresholdMultiplier
+  );
+}
+
+function getPlanCostDiffLabels(saved: AppConfig['planCost'], draft: AppConfig['planCost']) {
+  const changedLabels: string[] = [];
+
+  if (saved.baseCostPerMillionTokens !== draft.baseCostPerMillionTokens) {
+    changedLabels.push('백만 토큰당 기준 비용');
+  }
+
+  if (saved.retryCostMultiplierPercent !== draft.retryCostMultiplierPercent) {
+    changedLabels.push('재처리 가산 비율');
+  }
+
+  if (saved.hourlyCostMultiplierPercent !== draft.hourlyCostMultiplierPercent) {
+    changedLabels.push('시간 가산 비율');
+  }
+
+  if (saved.timeCostUnit !== draft.timeCostUnit) {
+    changedLabels.push('시간 가산 기준 단위');
+  }
+
+  if (saved.attentionCostThresholdMultiplier !== draft.attentionCostThresholdMultiplier) {
+    changedLabels.push('관심 구간 기준');
+  }
+
+  if (saved.warningCostThresholdMultiplier !== draft.warningCostThresholdMultiplier) {
+    changedLabels.push('주의 구간 기준');
+  }
+
+  if (saved.highCostThresholdMultiplier !== draft.highCostThresholdMultiplier) {
+    changedLabels.push('높음 구간 기준');
+  }
+
+  return changedLabels;
+}
+
+function formatCostAmount(value: number) {
+  return `${new Intl.NumberFormat('ko-KR').format(value)}원`;
+}
+
+function formatPlanCostTimeMultiplierLabel(planCost: AppConfig['planCost']) {
+  return `${PLAN_COST_TIME_UNIT_LABELS[planCost.timeCostUnit]}당 ${planCost.hourlyCostMultiplierPercent}%`;
+}
+
+function getPlanCostThresholdPreview(planCost: AppConfig['planCost']) {
+  const attentionThreshold = planCost.baseCostPerMillionTokens * Math.max(0.1, planCost.attentionCostThresholdMultiplier);
+  const warningThreshold =
+    planCost.baseCostPerMillionTokens *
+    Math.max(planCost.attentionCostThresholdMultiplier, planCost.warningCostThresholdMultiplier);
+  const highThreshold =
+    planCost.baseCostPerMillionTokens * Math.max(planCost.warningCostThresholdMultiplier, planCost.highCostThresholdMultiplier);
+
+  return `안정 ${formatCostAmount(attentionThreshold)} 이하 · 관심 ${formatCostAmount(
+    warningThreshold,
+  )} 이하 · 주의 ${formatCostAmount(highThreshold)} 이하 · 높음 ${formatCostAmount(highThreshold)} 초과`;
+}
+
+function getAppSettingsSectionCategory(section: AppSettingsSectionKey): AppSettingsCategoryKey {
+  return APP_SETTINGS_SECTIONS.find((entry) => entry.value === section)?.category ?? 'automation';
+}
+
+function getAppSettingsSectionOptions(category: AppSettingsCategoryKey) {
+  return APP_SETTINGS_SECTIONS.filter((entry) => entry.category === category).map((entry) => ({
+    label: entry.label,
+    value: entry.value,
+  }));
+}
+
+function formatRuntimeTimestamp(value: string | null | undefined) {
+  if (!value) {
+    return '-';
+  }
+
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return date.toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+function formatRuntimeRelativeLabel(value: string | null | undefined) {
+  if (!value) {
+    return '-';
+  }
+
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return formatRuntimeTimestamp(value);
+  }
+
+  const diffMs = Date.now() - date.getTime();
+
+  if (diffMs <= 15_000) {
+    return '방금';
+  }
+
+  const diffSeconds = Math.floor(diffMs / 1000);
+
+  if (diffSeconds < 60) {
+    return `${diffSeconds}초 전`;
+  }
+
+  const diffMinutes = Math.floor(diffSeconds / 60);
+
+  if (diffMinutes < 60) {
+    return `${diffMinutes}분 전`;
+  }
+
+  const diffHours = Math.floor(diffMinutes / 60);
+
+  if (diffHours < 24) {
+    return `${diffHours}시간 전`;
+  }
+
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}일 전`;
+}
+
+function buildRuntimeTerminalLabel(terminalStatus: ChatRuntimeJobDetail['terminalStatus']) {
+  if (!terminalStatus) {
+    return '-';
+  }
+
+  if (terminalStatus === 'cancelled') {
+    return '취소됨';
+  }
+
+  if (terminalStatus === 'removed') {
+    return '대기열 제거됨';
+  }
+
+  if (terminalStatus === 'failed') {
+    return '실패';
+  }
+
+  return '완료';
+}
+
+const AUTOMATION_NOTIFICATION_OPTIONS: Array<{
+  key: keyof Pick<
+    AppConfig['automation'],
+    | 'notifyOnAutomationStart'
+    | 'notifyOnAutomationProgress'
+    | 'notifyOnAutomationCompletion'
+    | 'notifyOnAutomationRelease'
+    | 'notifyOnAutomationMain'
+    | 'notifyOnAutomationFailure'
+    | 'notifyOnAutomationRestart'
+    | 'notifyOnAutomationIssueResolved'
+  >;
+  label: string;
+  description: string;
+}> = [
+  {
+    key: 'notifyOnAutomationStart',
+    label: '자동화 시작',
+    description: '작업 자동화가 시작될 때 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationProgress',
+    label: '자동화 진행',
+    description: '자동 작업이 오래 걸릴 때 진행 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationCompletion',
+    label: '자동 작업 완료',
+    description: '작업완료, 변경 없음 완료, 수동 완료 처리 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationRelease',
+    label: 'release 반영 완료',
+    description: 'release 반영 완료 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationMain',
+    label: 'main 반영 완료',
+    description: 'main 반영과 메인 프로젝트 동기화 완료 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationFailure',
+    label: '자동화 실패',
+    description: '브랜치, 자동 작업, release, main 반영 실패 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationRestart',
+    label: '작업 재시작',
+    description: '재시도나 이슈 조치로 작업이 다시 큐에 들어갈 때 알림을 받습니다.',
+  },
+  {
+    key: 'notifyOnAutomationIssueResolved',
+    label: '이슈 해결 처리',
+    description: '최신 이슈가 해결 처리될 때 알림을 받습니다.',
+  },
+];
+
+function areAutomationNotificationSettingsEqual(left: AppConfig['automation'], right: AppConfig['automation']) {
+  return AUTOMATION_NOTIFICATION_OPTIONS.every((option) => left[option.key] === right[option.key]);
+}
+
+function getAutomationNotificationDiffLabels(saved: AppConfig['automation'], draft: AppConfig['automation']) {
+  return AUTOMATION_NOTIFICATION_OPTIONS.filter((option) => saved[option.key] !== draft[option.key]).map(
+    (option) => option.label,
+  );
+}
+
+function areGestureShortcutSettingsEqual(
+  left: AppConfig['gestureShortcuts'],
+  right: AppConfig['gestureShortcuts'],
+) {
+  return left.openSearch === right.openSearch && left.openWindowSearch === right.openWindowSearch;
+}
+
+function getGestureShortcutDiffLabels(saved: AppConfig['gestureShortcuts'], draft: AppConfig['gestureShortcuts']) {
+  const changedLabels: string[] = [];
+
+  if (saved.openSearch !== draft.openSearch) {
+    changedLabels.push('통합 검색 열기');
+  }
+
+  if (saved.openWindowSearch !== draft.openWindowSearch) {
+    changedLabels.push('Window UI 검색 열기');
+  }
+
+  return changedLabels;
+}
+
+function isSettingsModalAllowed(modal: SettingsModalKey, hasAccess: boolean) {
+  if (hasAccess) {
+    return true;
+  }
+
+  return modal === 'token';
+}
+
+function getSettingsModalTitle(modal: SettingsModalKey) {
+  switch (modal) {
+    case 'notification':
+      return '알림';
+    case 'token':
+      return '권한';
+    case 'update':
+      return '업데이트';
+    default:
+      return '앱 설정';
+  }
+}
+
+function getAppUpdateStatusLabel(status: AppUpdateStatus) {
+  switch (status) {
+    case 'available':
+      return '업데이트 가능';
+    case 'updating':
+      return '업데이트 중';
+    case 'ready':
+      return '최신 상태';
+    default:
+      return '확인 중';
+  }
+}
+
+function formatDateTimeLabel(value: string | null) {
+  if (!value) {
+    return '-';
+  }
+
+  const parsed = new Date(value);
+
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(parsed);
+}
+
+function getWorkServerUpdateStatusLabel(item: ServerCommandItem | null) {
+  if (!item) {
+    return '확인 전';
+  }
+
+  if (item.buildRequired) {
+    return '소스 변경 감지됨';
+  }
+
+  if (item.updateAvailable) {
+    return '새 빌드 대기 중';
+  }
+
+  if (item.availability === 'online') {
+    return '최신 빌드 실행 중';
+  }
+
+  return '상태 확인 필요';
+}
+
+function getClientNotificationPermission(): ClientNotificationPermissionState {
+  if (
+    typeof window === 'undefined' ||
+    typeof Notification === 'undefined' ||
+    typeof navigator === 'undefined' ||
+    !('serviceWorker' in navigator) ||
+    !('PushManager' in window)
+  ) {
+    return 'unsupported';
+  }
+
+  if (Notification.permission === 'granted') {
+    return 'granted';
+  }
+
+  if (Notification.permission === 'denied') {
+    return 'denied';
+  }
+
+  return 'default';
+}
+
+function getClientNotificationPermissionLabel(permission: ClientNotificationPermissionState) {
+  switch (permission) {
+    case 'granted':
+      return '허용됨';
+    case 'denied':
+      return '차단됨';
+    case 'unsupported':
+      return '미지원';
+    default:
+      return '미확인';
+  }
+}
+
+function isStandaloneDisplayMode() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return (
+    window.matchMedia?.('(display-mode: standalone)').matches === true ||
+    (window.navigator as Navigator & { standalone?: boolean }).standalone === true
+  );
+}
+
+function isAppleMobileDevice() {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+
+  return /iPhone|iPad|iPod/i.test(navigator.userAgent);
+}
+
+function hasSecureOrigin() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.isSecureContext || window.location.hostname === 'localhost';
+}
+
+function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let index = 0; index < rawData.length; index += 1) {
+    outputArray[index] = rawData.charCodeAt(index);
+  }
+
+  return outputArray;
+}
+
+function isSamePushApplicationServerKey(
+  leftKey: ArrayBuffer | null | undefined,
+  rightKey: Uint8Array,
+) {
+  if (!leftKey) {
+    return false;
+  }
+
+  const leftBytes = new Uint8Array(leftKey);
+
+  if (leftBytes.byteLength !== rightKey.byteLength) {
+    return false;
+  }
+
+  for (let index = 0; index < leftBytes.byteLength; index += 1) {
+    if (leftBytes[index] !== rightKey[index]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function serializePushSubscription(subscription: PushSubscription): WebPushSubscriptionPayload {
+  const json = subscription.toJSON();
+
+  return {
+    endpoint: subscription.endpoint,
+    expirationTime: subscription.expirationTime,
+    keys: {
+      p256dh: json.keys?.p256dh ?? '',
+      auth: json.keys?.auth ?? '',
+    },
+  };
+}
+
+async function getPushServiceWorkerRegistration() {
+  if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) {
+    return null;
+  }
+
+  const serviceWorkerUrl = import.meta.env.DEV ? '/dev-sw.js?dev-sw' : '/sw.js';
+  const resolvedServiceWorkerUrl =
+    typeof window !== 'undefined' ? new URL(serviceWorkerUrl, window.location.href).toString() : serviceWorkerUrl;
+  const timeoutMs = 30000;
+  const startedAt = Date.now();
+  let registeredRegistration: ServiceWorkerRegistration | null = null;
+
+  const waitForServiceWorkerReady = async (remainingTimeoutMs: number) => {
+    const readyStartedAt = Date.now();
+
+    while (Date.now() - readyStartedAt < remainingTimeoutMs) {
+      try {
+        const readyRegistration = await Promise.race([
+          navigator.serviceWorker.ready,
+          new Promise<null>((resolve) => {
+            window.setTimeout(() => resolve(null), 1000);
+          }),
+        ]);
+
+        if (readyRegistration) {
+          return readyRegistration;
+        }
+      } catch {
+        // keep polling until timeout
+      }
+
+      await new Promise((resolve) => {
+        window.setTimeout(resolve, 300);
+      });
+    }
+
+    return null;
+  };
+
+  const resolveUsableRegistration = async (registration: ServiceWorkerRegistration | null | undefined) => {
+    if (!registration) {
+      return null;
+    }
+
+    if (registration.active || registration.waiting) {
+      return registration;
+    }
+
+    const installingWorker = registration.installing;
+
+    if (!installingWorker) {
+      return registration;
+    }
+
+    const remainingTimeoutMs = Math.max(1500, timeoutMs - (Date.now() - startedAt));
+
+    await new Promise<void>((resolve) => {
+      let completed = false;
+
+      const finish = () => {
+        if (completed) {
+          return;
+        }
+
+        completed = true;
+        window.clearTimeout(timeoutId);
+        installingWorker.removeEventListener('statechange', onStateChange);
+        resolve();
+      };
+
+      const onStateChange = () => {
+        if (
+          installingWorker.state === 'activated' ||
+          installingWorker.state === 'installed' ||
+          Boolean(registration.active) ||
+          Boolean(registration.waiting)
+        ) {
+          finish();
+        }
+      };
+
+      const timeoutId = window.setTimeout(finish, remainingTimeoutMs);
+      installingWorker.addEventListener('statechange', onStateChange);
+      onStateChange();
+    });
+
+    if (registration.active || registration.waiting) {
+      return registration;
+    }
+
+    const readyRegistration = await waitForServiceWorkerReady(remainingTimeoutMs);
+    return readyRegistration ?? registration;
+  };
+
+  const tryRegister = async (url: string, mode: string, options?: RegistrationOptions) => {
+    try {
+      registeredRegistration = await navigator.serviceWorker.register(url, options);
+      return true;
+    } catch (error) {
+      lastPushSwRegisterAttempts = [
+        ...lastPushSwRegisterAttempts,
+        {
+          url,
+          mode,
+          error: error instanceof Error ? error.message : 'unknown error',
+        },
+      ];
+      return false;
+    }
+  };
+
+  const devOptionsModule = { type: 'module', scope: '/', updateViaCache: 'none' } as const;
+  const devOptionsClassic = { scope: '/', updateViaCache: 'none' } as const;
+
+  if (import.meta.env.DEV) {
+    lastPushSwRegisterAttempts = [];
+    const registered =
+      (await tryRegister(resolvedServiceWorkerUrl, 'module', devOptionsModule)) ||
+      (await tryRegister(resolvedServiceWorkerUrl, 'classic', devOptionsClassic));
+
+    if (!registered) {
+      // registerSW helper in main.tsx may already be handling this path; if manual registration fails,
+      // continue and try to resolve an existing active registration below.
+    }
+  } else {
+    await tryRegister(resolvedServiceWorkerUrl, 'default');
+  }
+
+  const usableRegisteredRegistration = await resolveUsableRegistration(registeredRegistration);
+
+  if (usableRegisteredRegistration) {
+    return usableRegisteredRegistration;
+  }
+
+  while (Date.now() - startedAt < timeoutMs) {
+    const existingRegistration = await navigator.serviceWorker.getRegistration();
+    const usableExistingRegistration = await resolveUsableRegistration(existingRegistration);
+
+    if (usableExistingRegistration) {
+      return usableExistingRegistration;
+    }
+
+    const scopedRegistration = await navigator.serviceWorker.getRegistration('/');
+    const usableScopedRegistration = await resolveUsableRegistration(scopedRegistration);
+
+    if (usableScopedRegistration) {
+      return usableScopedRegistration;
+    }
+
+    const registrations = await navigator.serviceWorker.getRegistrations();
+
+    for (const registration of registrations) {
+      const usableRegistration = await resolveUsableRegistration(registration);
+
+      if (usableRegistration) {
+        return usableRegistration;
+      }
+    }
+
+    try {
+      const remainingTimeoutMs = Math.max(1500, timeoutMs - (Date.now() - startedAt));
+      const readyRegistration = await waitForServiceWorkerReady(remainingTimeoutMs);
+      const usableReadyRegistration = await resolveUsableRegistration(readyRegistration);
+
+      if (usableReadyRegistration) {
+        return usableReadyRegistration;
+      }
+    } catch {
+      // keep polling until timeout
+    }
+
+    await new Promise((resolve) => {
+      window.setTimeout(resolve, 250);
+    });
+  }
+
+  const registrations = await navigator.serviceWorker.getRegistrations();
+
+  for (const registration of registrations) {
+    const usableRegistration = await resolveUsableRegistration(registration);
+
+    if (usableRegistration) {
+      return usableRegistration;
+    }
+  }
+
+  if (import.meta.env.DEV) {
+    try {
+      await Promise.all(registrations.map((registration) => registration.unregister()));
+      await waitForDuration(300);
+
+      await tryRegister(resolvedServiceWorkerUrl, 'module', devOptionsModule);
+      if (!registeredRegistration) {
+        await tryRegister(resolvedServiceWorkerUrl, 'classic', devOptionsClassic);
+      }
+
+      const remainingTimeoutMs = Math.max(1500, timeoutMs - (Date.now() - startedAt));
+      const readyRegistration = await waitForServiceWorkerReady(remainingTimeoutMs);
+      const usableReadyRegistration = await resolveUsableRegistration(readyRegistration ?? registeredRegistration);
+
+      if (usableReadyRegistration) {
+        return usableReadyRegistration;
+      }
+    } catch {
+      // ignore and fallthrough to null
+    }
+  }
+
+  return null;
+}
+
+function waitForDuration(durationMs: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, durationMs);
+  });
+}
+
+async function copyText(text: string) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  if (typeof document === 'undefined') {
+    throw new Error('클립보드 API를 사용할 수 없습니다.');
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
+
+export function MainHeader({
+  activeTopMenu,
+  sidebarCollapsed,
+  contentExpanded,
+  isMobileViewport,
+  onToggleSidebar,
+  onToggleContentExpanded,
+  onChangeTopMenu,
+  onOpenPlanQuickFilter,
+}: MainHeaderProps) {
+  void contentExpanded;
+  void onToggleContentExpanded;
+  const screens = useBreakpoint();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+  const [activeSettingsModal, setActiveSettingsModal] = useState<SettingsModalKey>('appSettings');
+  const [activeAppSettingsCategory, setActiveAppSettingsCategory] = useState<AppSettingsCategoryKey>('automation');
+  const [activeAppSettingsSection, setActiveAppSettingsSection] = useState<AppSettingsSectionKey>('planDefaults');
+  const [notificationEnabled, setNotificationEnabled] = useState(false);
+  const [notificationLoading, setNotificationLoading] = useState(false);
+  const [notificationFeedback, setNotificationFeedback] = useState<InlineFeedback | null>(null);
+  const [notificationCopyFeedback, setNotificationCopyFeedback] = useState<InlineFeedback | null>(null);
+  const [registeredPwaNotificationToken, setRegisteredPwaNotificationToken] = useState(() =>
+    getSavedPwaNotificationToken(),
+  );
+  const [pwaNotificationTokenInput, setPwaNotificationTokenInput] = useState(() => getSavedPwaNotificationToken());
+  const [pwaNotificationTokenSaving, setPwaNotificationTokenSaving] = useState(false);
+  const [pwaNotificationTokenFeedback, setPwaNotificationTokenFeedback] = useState<InlineFeedback | null>(null);
+  const [pwaNotificationTokenCopyFeedback, setPwaNotificationTokenCopyFeedback] = useState<InlineFeedback | null>(null);
+  const [clientNotificationPermission, setClientNotificationPermission] = useState<ClientNotificationPermissionState>(
+    () => getClientNotificationPermission(),
+  );
+  const [webPushConfigured, setWebPushConfigured] = useState(false);
+  const [isStandaloneMode, setIsStandaloneMode] = useState(false);
+  const [appUpdateStatus, setAppUpdateStatus] = useState<AppUpdateStatus>(() => getAppUpdateSnapshot().status);
+  const [appUpdateSupported, setAppUpdateSupported] = useState<boolean>(() => getAppUpdateSnapshot().supported);
+  const [appUpdateProgressPercent, setAppUpdateProgressPercent] = useState<number | null>(
+    () => getAppUpdateSnapshot().progressPercent,
+  );
+  const [appUpdateCurrentTaskLabel, setAppUpdateCurrentTaskLabel] = useState<string | null>(
+    () => getAppUpdateSnapshot().currentTaskLabel,
+  );
+  const [chatConnection, setChatConnection] = useState(() => chatConnectionGateway.getSnapshot());
+  const [chatRuntimeSnapshot, setChatRuntimeSnapshot] = useState<ChatRuntimeSnapshot | null>(() =>
+    chatConnectionGateway.getSharedRuntimeSnapshot(),
+  );
+  const [activeConversationSnapshot, setActiveConversationSnapshot] = useState(() =>
+    getSharedActiveConversationSnapshot(),
+  );
+  const [isRuntimeModalOpen, setIsRuntimeModalOpen] = useState(false);
+  const [runtimeConversationTitles, setRuntimeConversationTitles] = useState<Record<string, string>>({});
+  const [isRuntimeLogDrawerOpen, setIsRuntimeLogDrawerOpen] = useState(false);
+  const [runtimeLogLoading, setRuntimeLogLoading] = useState(false);
+  const [runtimeLogError, setRuntimeLogError] = useState('');
+  const [runtimeLogDetail, setRuntimeLogDetail] = useState<ChatRuntimeJobDetail | null>(null);
+  const [appUpdateFeedback, setAppUpdateFeedback] = useState<InlineFeedback | null>(null);
+  const [appUpdateCopyFeedback, setAppUpdateCopyFeedback] = useState<InlineFeedback | null>(null);
+  const previousAppUpdateStatusRef = useRef<AppUpdateStatus>(getAppUpdateSnapshot().status);
+  const [workServerStatus, setWorkServerStatus] = useState<ServerCommandItem | null>(null);
+  const [workServerStatusLoading, setWorkServerStatusLoading] = useState(false);
+  const [workServerRestarting, setWorkServerRestarting] = useState(false);
+  const [workServerUpdateFeedback, setWorkServerUpdateFeedback] = useState<InlineFeedback | null>(null);
+  const [workServerUpdateCopyFeedback, setWorkServerUpdateCopyFeedback] = useState<InlineFeedback | null>(null);
+  const { registeredToken, hasAccess } = useTokenAccess();
+  const appConfig = useAppConfig();
+  const [appConfigDraft, setAppConfigDraft] = useState<AppConfig>(appConfig);
+  const [appConfigFeedback, setAppConfigFeedback] = useState<InlineFeedback | null>(null);
+  const [appConfigSaving, setAppConfigSaving] = useState(false);
+  const [appConfigCopyFeedback, setAppConfigCopyFeedback] = useState<InlineFeedback | null>(null);
+  const [tokenInput, setTokenInput] = useState('');
+  const [tokenFeedback, setTokenFeedback] = useState<InlineFeedback | null>(null);
+  const [planShortcutCounts, setPlanShortcutCounts] = useState({
+    working: 0,
+    releasePendingMain: 0,
+    automationFailed: 0,
+  });
+  const headerTopMenu = !hasAccess ? 'docs' : activeTopMenu === 'apis' ? 'docs' : activeTopMenu === 'chat' ? 'plans' : activeTopMenu;
+  const notificationStatusClassName = notificationEnabled
+    ? 'app-header__status-dot--active'
+    : 'app-header__status-dot--inactive';
+  const appUpdateStatusClassName =
+    appUpdateStatus === 'available'
+      ? 'app-header__status-dot--warning'
+      : appUpdateStatus === 'updating'
+        ? 'app-header__status-dot--progress'
+        : 'app-header__status-dot--active';
+  const chatConnectionStatusClassName =
+    chatConnection.connectionState === 'connected'
+      ? 'app-header__status-dot--active'
+      : chatConnection.connectionState === 'connecting'
+        ? 'app-header__status-dot--progress'
+        : 'app-header__status-dot--inactive';
+  const appPendingUpdateCount = appUpdateStatus === 'available' ? 1 : 0;
+  const workServerPendingUpdateCount =
+    workServerStatus && (workServerStatus.updateAvailable || workServerStatus.buildRequired) ? 1 : 0;
+  const totalPendingUpdateCount = appPendingUpdateCount + workServerPendingUpdateCount;
+  const settingsStatusClassName =
+    totalPendingUpdateCount >= 2
+      ? 'app-header__status-dot--inactive'
+      : totalPendingUpdateCount === 1
+        ? 'app-header__status-dot--warning'
+        : 'app-header__status-dot--active';
+  const settingsStatusLabel =
+    totalPendingUpdateCount >= 2 ? '모든 업데이트 존재' : totalPendingUpdateCount === 1 ? '업데이트 1건 존재' : '최신 상태';
+  const runningRuntimeCount = chatRuntimeSnapshot?.runningCount ?? 0;
+  const queuedRuntimeCount = chatRuntimeSnapshot?.queuedCount ?? 0;
+  const runtimeSessionCount = chatRuntimeSnapshot?.sessionCount ?? 0;
+  const runningRuntimeBadgeLabel = runningRuntimeCount > 99 ? '99+' : String(runningRuntimeCount);
+  const hasPendingRuntimeWork = runningRuntimeCount > 0 || queuedRuntimeCount > 0;
+  const chatConnectionLabelParts = [
+    chatConnection.connectionState === 'connected'
+      ? 'Codex 채팅 실시간 연결됨'
+      : chatConnection.connectionState === 'connecting'
+        ? 'Codex 채팅 연결 중'
+        : 'Codex 채팅 오프라인',
+  ];
+
+  if (runningRuntimeCount > 0) {
+    chatConnectionLabelParts.push(`실행 ${runningRuntimeCount}건`);
+  }
+
+  if (queuedRuntimeCount > 0) {
+    chatConnectionLabelParts.push(`대기 ${queuedRuntimeCount}건`);
+  }
+
+  const chatConnectionLabel = chatConnectionLabelParts.join(' · ');
+  const connectionIndicatorClassName = `app-header__connection-indicator app-header__connection-indicator--${chatConnection.connectionState}${
+    hasPendingRuntimeWork ? ' app-header__connection-indicator--busy' : ''
+  }`;
+  const connectionCountBadgeClassName = `app-header__connection-count-badge app-header__connection-count-badge--${chatConnection.connectionState}`;
+  const getConversationLabel = (sessionId: string) => {
+    if (sessionId === activeConversationSnapshot.sessionId && activeConversationSnapshot.title) {
+      return activeConversationSnapshot.title;
+    }
+
+    return runtimeConversationTitles[sessionId] || sessionId;
+  };
+  const navigateToConversation = (sessionId: string) => {
+    const searchParams = new URLSearchParams(location.search);
+    searchParams.set('topMenu', 'chat');
+    searchParams.set('sessionId', sessionId);
+    navigate({
+      pathname: buildChatPath('live'),
+      search: `?${searchParams.toString()}`,
+    });
+    setIsRuntimeModalOpen(false);
+  };
+  const openRuntimeLog = async (requestId: string) => {
+    setIsRuntimeModalOpen(false);
+    setIsRuntimeLogDrawerOpen(true);
+    setRuntimeLogLoading(true);
+    setRuntimeLogError('');
+
+    try {
+      const detail = await fetchChatRuntimeJobDetail(requestId);
+      setRuntimeLogDetail(detail);
+    } catch (error) {
+      setRuntimeLogDetail(null);
+      setRuntimeLogError(error instanceof Error ? error.message : '실행 로그를 불러오지 못했습니다.');
+    } finally {
+      setRuntimeLogLoading(false);
+    }
+  };
+  const canApplyAppUpdate = appUpdateSupported && appUpdateStatus === 'available';
+  const canRefreshWorkServerStatus = hasAccess && !workServerRestarting && !workServerStatusLoading;
+  const canApplyWorkServerUpdate =
+    hasAccess &&
+    !workServerRestarting &&
+    !workServerStatusLoading;
+  const chatSettingsDirty = !areChatSettingsEqual(appConfig.chat, appConfigDraft.chat);
+  const worklogAutomationSettingsDirty = !areWorklogAutomationSettingsEqual(
+    appConfig.worklogAutomation,
+    appConfigDraft.worklogAutomation,
+  );
+  const chatSettingsDiffLabels = getChatSettingsDiffLabels(appConfig.chat, appConfigDraft.chat);
+  const planDefaultSettingsDirty = !arePlanDefaultSettingsEqual(appConfig.planDefaults, appConfigDraft.planDefaults);
+  const planDefaultDiffLabels = getPlanDefaultDiffLabels(appConfig.planDefaults, appConfigDraft.planDefaults);
+  const planCostSettingsDirty = !arePlanCostSettingsEqual(appConfig.planCost, appConfigDraft.planCost);
+  const planCostDiffLabels = getPlanCostDiffLabels(appConfig.planCost, appConfigDraft.planCost);
+  const worklogAutomationDiffLabels = getWorklogAutomationDiffLabels(
+    appConfig.worklogAutomation,
+    appConfigDraft.worklogAutomation,
+  );
+  const automationNotificationSettingsDirty = !areAutomationNotificationSettingsEqual(
+    appConfig.automation,
+    appConfigDraft.automation,
+  );
+  const automationNotificationDiffLabels = getAutomationNotificationDiffLabels(
+    appConfig.automation,
+    appConfigDraft.automation,
+  );
+  const gestureShortcutSettingsDirty = !areGestureShortcutSettingsEqual(
+    appConfig.gestureShortcuts,
+    appConfigDraft.gestureShortcuts,
+  );
+  const gestureShortcutDiffLabels = getGestureShortcutDiffLabels(
+    appConfig.gestureShortcuts,
+    appConfigDraft.gestureShortcuts,
+  );
+  const activeAppSettingsSectionOptions = getAppSettingsSectionOptions(activeAppSettingsCategory);
+  const syncRegisteredWebPushStatus = async () => {
+    const permission = getClientNotificationPermission();
+    setClientNotificationPermission(permission);
+    setIsStandaloneMode(isStandaloneDisplayMode());
+
+    if (permission === 'unsupported') {
+      setNotificationEnabled(false);
+      return;
+    }
+
+    try {
+      const config = await fetchWebPushConfig();
+      setWebPushConfigured(Boolean(config.enabled && config.publicKey));
+
+      if (!config.enabled || !config.publicKey) {
+        setNotificationEnabled(false);
+        return;
+      }
+
+      if (Notification.permission !== 'granted') {
+        setNotificationEnabled(false);
+        return;
+      }
+
+      const registration = await getPushServiceWorkerRegistration();
+
+      if (!registration) {
+        setNotificationEnabled(false);
+        return;
+      }
+
+      let subscription = await registration.pushManager.getSubscription();
+
+      if (!subscription) {
+        setNotificationEnabled(false);
+        return;
+      }
+
+      const expectedApplicationServerKey = urlBase64ToUint8Array(config.publicKey);
+
+      if (!isSamePushApplicationServerKey(subscription.options.applicationServerKey, expectedApplicationServerKey)) {
+        await unregisterWebPushSubscription(subscription.endpoint).catch(() => undefined);
+        await subscription.unsubscribe().catch(() => undefined);
+
+        subscription = await registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: expectedApplicationServerKey,
+        });
+      }
+
+      await registerWebPushSubscription(serializePushSubscription(subscription), getSavedNotificationDeviceId());
+      setNotificationEnabled(true);
+      setNotificationFeedback(null);
+    } catch {
+      setNotificationEnabled(false);
+    }
+  };
+
+  useEffect(() => {
+    void syncRegisteredWebPushStatus();
+  }, []);
+
+  useEffect(() => {
+    const handleSync = () => {
+      void syncRegisteredWebPushStatus();
+    };
+
+    window.addEventListener('focus', handleSync);
+    window.addEventListener('pageshow', handleSync);
+    document.addEventListener('visibilitychange', handleSync);
+    if ('serviceWorker' in navigator) {
+      void navigator.serviceWorker.ready
+        .then(() => {
+          void syncRegisteredWebPushStatus();
+        })
+        .catch(() => undefined);
+    }
+
+    return () => {
+      window.removeEventListener('focus', handleSync);
+      window.removeEventListener('pageshow', handleSync);
+      document.removeEventListener('visibilitychange', handleSync);
+    };
+  }, []);
+
+  useEffect(() => {
+    return chatConnectionGateway.subscribe(() => {
+      setChatConnection(chatConnectionGateway.getSnapshot());
+      setChatRuntimeSnapshot(chatConnectionGateway.getSharedRuntimeSnapshot());
+    });
+  }, []);
+
+  useEffect(() => {
+    return subscribeSharedActiveConversation(() => {
+      setActiveConversationSnapshot(getSharedActiveConversationSnapshot());
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isRuntimeModalOpen) {
+      return;
+    }
+
+    let cancelled = false;
+    void chatGateway.listConversations()
+      .then((items) => {
+        if (cancelled) {
+          return;
+        }
+
+        setRuntimeConversationTitles(
+          items.reduce<Record<string, string>>((acc, item) => {
+            acc[item.sessionId] = item.title?.trim() || item.sessionId;
+            return acc;
+          }, {}),
+        );
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setRuntimeConversationTitles({});
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isRuntimeModalOpen]);
+
+  useEffect(() => {
+    return subscribeAppUpdate((nextSnapshot) => {
+      setAppUpdateSupported(nextSnapshot.supported);
+      setAppUpdateStatus(nextSnapshot.status);
+      setAppUpdateProgressPercent(nextSnapshot.progressPercent);
+      setAppUpdateCurrentTaskLabel(nextSnapshot.currentTaskLabel);
+    });
+  }, []);
+
+  useEffect(() => {
+    const previousStatus = previousAppUpdateStatusRef.current;
+
+    if (appUpdateStatus === 'available' && previousStatus !== 'available') {
+      setAppUpdateFeedback({
+        tone: 'info',
+        message: import.meta.env.DEV
+          ? '개발 서버 변경 사항이 준비되었습니다. 설정 > 업데이트에서 앱 업데이트 적용을 누르면 반영됩니다.'
+          : '새 앱 버전이 준비되었습니다. 설정 > 업데이트에서 앱 업데이트 적용을 누르세요.',
+      });
+    } else if (appUpdateStatus !== 'available' && previousStatus === 'available') {
+      setAppUpdateFeedback(null);
+    }
+
+    previousAppUpdateStatusRef.current = appUpdateStatus;
+  }, [appUpdateStatus]);
+
+  useEffect(() => {
+    setTokenInput(registeredToken);
+  }, [registeredToken]);
+
+  useEffect(() => {
+    setAppConfigDraft(appConfig);
+  }, [appConfig]);
+
+  useEffect(() => {
+    if (getAppSettingsSectionCategory(activeAppSettingsSection) === activeAppSettingsCategory) {
+      return;
+    }
+
+    const firstSection = APP_SETTINGS_SECTIONS.find((entry) => entry.category === activeAppSettingsCategory);
+
+    if (firstSection) {
+      setActiveAppSettingsSection(firstSection.value);
+    }
+  }, [activeAppSettingsCategory, activeAppSettingsSection]);
+
+  useEffect(() => {
+    if (!isSettingsModalAllowed(activeSettingsModal, hasAccess)) {
+      setActiveSettingsModal('token');
+    }
+  }, [activeSettingsModal, hasAccess]);
+
+  useEffect(() => {
+    if (!hasAccess) {
+      setWorkServerStatus(null);
+      return;
+    }
+
+    void refreshWorkServerStatus(true);
+  }, [hasAccess]);
+
+  useEffect(() => {
+    if (!settingsModalOpen || activeSettingsModal !== 'update' || !hasAccess) {
+      return;
+    }
+
+    void refreshWorkServerStatus(true);
+  }, [activeSettingsModal, hasAccess, settingsModalOpen]);
+
+  const ensureClientNotificationPermission = async () => {
+    const currentPermission = getClientNotificationPermission();
+    setClientNotificationPermission(currentPermission);
+
+    if (currentPermission === 'unsupported') {
+      setNotificationFeedback({ tone: 'error', message: '현재 브라우저에서는 Web Push를 지원하지 않습니다.' });
+      return false;
+    }
+
+    if (!hasSecureOrigin()) {
+      setNotificationFeedback({ tone: 'error', message: '알림은 HTTPS 또는 localhost 환경에서만 사용할 수 있습니다.' });
+      return false;
+    }
+
+    if (isAppleMobileDevice() && !isStandaloneDisplayMode()) {
+      setNotificationFeedback({
+        tone: 'warning',
+        message: '아이폰에서는 홈 화면에 추가한 뒤 실행한 PWA에서만 웹 푸시를 사용할 수 있습니다.',
+      });
+      return false;
+    }
+
+    if (currentPermission === 'denied') {
+      setNotificationFeedback({
+        tone: 'warning',
+        message: '브라우저 또는 기기 설정에서 알림 권한을 먼저 허용해 주세요.',
+      });
+      return false;
+    }
+
+    if (currentPermission === 'granted') {
+      setNotificationFeedback(null);
+      return true;
+    }
+
+    try {
+      const permission = await Notification.requestPermission();
+      const nextPermission =
+        permission === 'granted' ? 'granted' : permission === 'denied' ? 'denied' : 'default';
+      setClientNotificationPermission(nextPermission);
+
+      if (nextPermission !== 'granted') {
+        setNotificationFeedback({ tone: 'warning', message: '알림 권한이 허용되지 않아 알림을 켤 수 없습니다.' });
+        return false;
+      }
+
+      setNotificationFeedback(null);
+      return true;
+    } catch {
+      setNotificationFeedback({ tone: 'error', message: '알림 권한 요청 중 오류가 발생했습니다.' });
+      return false;
+    }
+  };
+
+  const syncNotificationEnabled = async (nextEnabled: boolean) => {
+    setNotificationCopyFeedback(null);
+
+    if (nextEnabled) {
+      const permissionGranted = await ensureClientNotificationPermission();
+
+      if (!permissionGranted) {
+        setNotificationEnabled(false);
+        return;
+      }
+    }
+
+    setNotificationLoading(true);
+
+    try {
+      const config = await fetchWebPushConfig();
+      setWebPushConfigured(Boolean(config.enabled && config.publicKey));
+
+      if (!config.enabled || !config.publicKey) {
+        throw new Error('서버 Web Push 설정이 비어 있습니다. VAPID 설정을 먼저 확인해 주세요.');
+      }
+
+      let registration = await getPushServiceWorkerRegistration();
+
+      if (!registration) {
+        await waitForDuration(1500);
+        registration = await getPushServiceWorkerRegistration();
+      }
+
+      if (!registration) {
+        if (nextEnabled) {
+          if (import.meta.env.DEV) {
+            const serviceWorkerUrl = '/dev-sw.js?dev-sw';
+            let swFetchStatus = 'unknown';
+
+            try {
+              const response = await fetch(serviceWorkerUrl, { cache: 'no-store' });
+              swFetchStatus = `${response.status} ${response.statusText}`;
+            } catch {
+              swFetchStatus = 'fetch failed';
+            }
+
+            let registrationSummary = 'none';
+
+            try {
+              const registrations = await navigator.serviceWorker.getRegistrations();
+              registrationSummary =
+                registrations.length === 0
+                  ? 'none'
+                  : registrations
+                      .map((item) => {
+                        const states = [
+                          item.active ? `active:${item.active.state}` : 'active:none',
+                          item.waiting ? `waiting:${item.waiting.state}` : 'waiting:none',
+                          item.installing ? `installing:${item.installing.state}` : 'installing:none',
+                        ];
+                        return `${item.scope} [${states.join(', ')}]`;
+                      })
+                      .join(' | ');
+            } catch {
+              registrationSummary = 'read failed';
+            }
+
+            throw new Error(
+              [
+                '알림 서비스워커 준비가 아직 끝나지 않았습니다.',
+                `dev-sw 응답: ${swFetchStatus}`,
+                `등록 상태: ${registrationSummary}`,
+                `등록 시도: ${
+                  lastPushSwRegisterAttempts.length === 0
+                    ? 'none'
+                    : lastPushSwRegisterAttempts
+                        .map((attempt) => `${attempt.mode} ${attempt.url} -> ${attempt.error}`)
+                        .join(' | ')
+                }`,
+                `secureContext: ${window.isSecureContext ? 'yes' : 'no'}`,
+                `permission: ${Notification.permission}`,
+              ].join(' '),
+            );
+          }
+
+          throw new Error('알림 서비스워커 준비가 아직 끝나지 않았습니다. 잠시 후 다시 시도해 주세요.');
+        }
+
+        setNotificationEnabled(false);
+        setNotificationFeedback({ tone: 'success', message: '이 기기의 웹 푸시 알림을 해제했습니다.' });
+        return;
+      }
+
+      if (nextEnabled) {
+        let subscription = await registration.pushManager.getSubscription();
+        const expectedApplicationServerKey = urlBase64ToUint8Array(config.publicKey);
+
+        if (
+          subscription &&
+          !isSamePushApplicationServerKey(subscription.options.applicationServerKey, expectedApplicationServerKey)
+        ) {
+          await unregisterWebPushSubscription(subscription.endpoint).catch(() => undefined);
+          await subscription.unsubscribe().catch(() => undefined);
+          subscription = null;
+        }
+
+        if (!subscription) {
+          subscription = await registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: expectedApplicationServerKey,
+          });
+        }
+
+        await registerWebPushSubscription(serializePushSubscription(subscription), getSavedNotificationDeviceId());
+        setNotificationEnabled(true);
+        setNotificationFeedback({ tone: 'success', message: '이 기기의 웹 푸시 알림을 서버에 등록했습니다.' });
+        return;
+      }
+
+      const subscription = await registration.pushManager.getSubscription();
+
+      if (subscription) {
+        await unregisterWebPushSubscription(subscription.endpoint);
+        await subscription.unsubscribe();
+      }
+
+      setNotificationEnabled(false);
+      setNotificationFeedback({ tone: 'success', message: '이 기기의 웹 푸시 알림을 해제했습니다.' });
+    } catch (error) {
+      setNotificationEnabled(!nextEnabled);
+      setNotificationFeedback({
+        tone: 'error',
+        message: error instanceof Error ? error.message : '알림 설정 저장에 실패했습니다.',
+      });
+    } finally {
+      setNotificationLoading(false);
+    }
+  };
+
+  const handleRegisterPwaNotificationToken = async () => {
+    const trimmedToken = pwaNotificationTokenInput.trim();
+    setPwaNotificationTokenCopyFeedback(null);
+
+    if (!trimmedToken) {
+      setPwaNotificationTokenFeedback({ tone: 'warning', message: '등록할 PWA 알림 토큰을 입력해 주세요.' });
+      return;
+    }
+
+    setPwaNotificationTokenSaving(true);
+
+    try {
+      await registerPwaNotificationToken({
+        token: trimmedToken,
+        deviceId: getSavedNotificationDeviceId(),
+      });
+
+      if (registeredPwaNotificationToken && registeredPwaNotificationToken !== trimmedToken) {
+        await unregisterPwaNotificationToken(registeredPwaNotificationToken);
+      }
+
+      setSavedPwaNotificationToken(trimmedToken);
+      setRegisteredPwaNotificationToken(trimmedToken);
+      void syncAppConfigFromServer();
+      setPwaNotificationTokenFeedback({ tone: 'success', message: 'PWA 알림 토큰을 서버에 등록했습니다.' });
+    } catch (error) {
+      setPwaNotificationTokenFeedback({
+        tone: 'error',
+        message: error instanceof Error ? error.message : 'PWA 알림 토큰 등록에 실패했습니다.',
+      });
+    } finally {
+      setPwaNotificationTokenSaving(false);
+    }
+  };
+
+  const handleClearPwaNotificationToken = async () => {
+    const tokenToRemove = registeredPwaNotificationToken || pwaNotificationTokenInput.trim();
+    setPwaNotificationTokenCopyFeedback(null);
+
+    if (!tokenToRemove) {
+      setPwaNotificationTokenFeedback({ tone: 'info', message: '제거할 PWA 알림 토큰이 없습니다.' });
+      return;
+    }
+
+    setPwaNotificationTokenSaving(true);
+
+    try {
+      await unregisterPwaNotificationToken(tokenToRemove);
+      setSavedPwaNotificationToken('');
+      setRegisteredPwaNotificationToken('');
+      setPwaNotificationTokenInput('');
+      void syncAppConfigFromServer();
+      setPwaNotificationTokenFeedback({ tone: 'success', message: 'PWA 알림 토큰을 제거했습니다.' });
+    } catch (error) {
+      setPwaNotificationTokenFeedback({
+        tone: 'error',
+        message: error instanceof Error ? error.message : 'PWA 알림 토큰 제거에 실패했습니다.',
+      });
+    } finally {
+      setPwaNotificationTokenSaving(false);
+    }
+  };
+
+  const handleApplyAppUpdate = async () => {
+    setAppUpdateCopyFeedback(null);
+
+    if (!appUpdateSupported) {
+      setAppUpdateFeedback({ tone: 'warning', message: '현재 환경에서는 앱 업데이트를 지원하지 않습니다.' });
+      return;
+    }
+
+    if (appUpdateStatus === 'updating') {
+      return;
+    }
+
+    try {
+      const applied = await applyAppUpdate();
+
+      if (!applied) {
+        setAppUpdateFeedback({ tone: 'info', message: '현재 적용할 앱 업데이트가 없습니다.' });
+        return;
+      }
+
+      setAppUpdateFeedback({ tone: 'success', message: '앱 업데이트를 적용합니다.' });
+    } catch (error) {
+      setAppUpdateFeedback({
+        tone: 'error',
+        message: error instanceof Error ? error.message : '앱 업데이트 적용에 실패했습니다.',
+      });
+    }
+  };
+
+  const refreshWorkServerStatus = async (silent = false) => {
+    if (!hasAccess) {
+      setWorkServerStatus(null);
+      if (!silent) {
+        setWorkServerUpdateFeedback({ tone: 'warning', message: '워크서버 업데이트 확인은 권한 토큰 등록 후 사용할 수 있습니다.' });
+      }
+      return null;
+    }
+
+    setWorkServerStatusLoading(true);
+
+    try {
+      const items = await fetchServerCommands();
+      const nextWorkServerStatus = items.find((item) => item.key === 'work-server') ?? null;
+      setWorkServerStatus(nextWorkServerStatus);
+
+      if (!silent) {
+        setWorkServerUpdateFeedback(null);
+      }
+
+      return nextWorkServerStatus;
+    } catch (error) {
+      if (!silent) {
+        setWorkServerUpdateFeedback({
+          tone: 'error',
+          message: error instanceof Error ? error.message : '워크서버 업데이트 상태를 불러오지 못했습니다.',
+        });
+      }
+      return null;
+    } finally {
+      setWorkServerStatusLoading(false);
+    }
+  };
+
+  const waitForWorkServerRestart = async () => {
+    for (let attempt = 0; attempt < 12; attempt += 1) {
+      await waitForDuration(2500);
+
+      try {
+        const nextStatus = await refreshWorkServerStatus(true);
+
+        if (!nextStatus) {
+          continue;
+        }
+
+        if (nextStatus.availability === 'online' && !nextStatus.updateAvailable && !nextStatus.buildRequired) {
+          setWorkServerUpdateFeedback({
+            tone: 'success',
+            message: '워크서버가 재시작되었고 최신 빌드가 적용되었습니다.',
+          });
+          return;
+        }
+
+        if (nextStatus.availability === 'online' && nextStatus.buildRequired) {
+          setWorkServerUpdateFeedback({
+            tone: 'info',
+            message:
+              nextStatus.updateSummary ?? '워크서버는 재시작되었지만 최신 소스 기준으로 다시 빌드가 필요합니다.',
+          });
+          return;
+        }
+      } catch {
+        // 서버가 재시작 중이면 일시적으로 실패할 수 있어 다음 주기까지 기다립니다.
+      }
+    }
+
+    setWorkServerUpdateFeedback({
+      tone: 'info',
+      message: '워크서버 재시작 요청은 접수했습니다. 잠시 후 업데이트 상태를 다시 확인해 주세요.',
+    });
+  };
+
+  const handleApplyWorkServerUpdate = async () => {
+    setWorkServerUpdateCopyFeedback(null);
+
+    if (!hasAccess) {
+      setWorkServerUpdateFeedback({ tone: 'warning', message: '워크서버 업데이트 적용은 권한 토큰 등록 후 사용할 수 있습니다.' });
+      return;
+    }
+
+    if (workServerRestarting || workServerStatusLoading) {
+      return;
+    }
+
+    let nextStatus = workServerStatus;
+
+    if (!nextStatus || (!nextStatus.updateAvailable && !nextStatus.buildRequired)) {
+      nextStatus = await refreshWorkServerStatus(true);
+      setWorkServerStatus(nextStatus);
+    }
+
+    if (!nextStatus) {
+      setWorkServerUpdateFeedback({ tone: 'warning', message: '워크서버 상태를 먼저 확인해 주세요.' });
+      return;
+    }
+
+    if (!nextStatus.updateAvailable && !nextStatus.buildRequired) {
+      setWorkServerUpdateFeedback({ tone: 'info', message: '현재 적용할 Work 서버 업데이트가 없습니다.' });
+      return;
+    }
+
+    setWorkServerUpdateFeedback(null);
+    setWorkServerRestarting(true);
+
+    try {
+      const result = await restartServerCommand('work-server');
+      setWorkServerStatus(result.item);
+      setWorkServerUpdateFeedback({
+        tone: 'success',
+        message:
+          result.restartState === 'accepted'
+            ? '워크서버 재시작 요청을 접수했습니다. 최신 빌드 적용 여부를 확인하는 중입니다.'
+            : '워크서버를 다시 시작했습니다. 최신 빌드 적용 여부를 확인하는 중입니다.',
+      });
+      await waitForWorkServerRestart();
+    } catch (error) {
+      setWorkServerUpdateFeedback({
+        tone: 'error',
+        message: error instanceof Error ? error.message : '워크서버 재시작에 실패했습니다.',
+      });
+    } finally {
+      setWorkServerRestarting(false);
+    }
+  };
+
+  const openSettingsModal = (
+    modal: SettingsModalKey,
+    nextAppSettingsSection: AppSettingsSectionKey = 'planDefaults',
+  ) => {
+    setSettingsOpen(false);
+    setActiveSettingsModal(isSettingsModalAllowed(modal, hasAccess) ? modal : 'token');
+    setActiveAppSettingsCategory(getAppSettingsSectionCategory(nextAppSettingsSection));
+    setActiveAppSettingsSection(nextAppSettingsSection);
+    setAppConfigDraft(appConfig);
+    setAppConfigFeedback(null);
+    setSettingsModalOpen(true);
+  };
+
+  const updateAppConfigDraft = (updater: (current: AppConfig) => AppConfig) => {
+    setAppConfigDraft((current) => updater(current));
+  };
+
+  const handleSaveAppConfig = async () => {
+    if (appConfigSaving) {
+      return;
+    }
+
+    setAppConfigSaving(true);
+    setAppConfigFeedback(null);
+    setAppConfigCopyFeedback(null);
+
+    try {
+      const savedConfig =
+        activeAppSettingsSection === 'automationNotifications'
+          ? await saveAutomationNotificationPreferenceToServer(appConfigDraft)
+          : await saveAppConfigToServer(appConfigDraft);
+      setStoredAppConfig(savedConfig);
+      setAppConfigFeedback({
+        tone: 'success',
+        message:
+          activeAppSettingsSection === 'automationNotifications'
+            ? '자동화 알림 설정을 알림 토큰과 클라이언트별로 저장했습니다.'
+            : '앱 설정을 DB에 저장했습니다.',
+      });
+    } catch (error) {
+      setAppConfigDraft(appConfig);
+      setAppConfigFeedback({
+        tone: 'error',
+        message: error instanceof Error ? error.message : '앱 설정 저장에 실패했습니다.',
+      });
+    } finally {
+      setAppConfigSaving(false);
+    }
+  };
+
+  const handleResetNotificationIdentity = () => {
+    Modal.confirm({
+      title: '알림 클라이언트 초기화',
+      content: '현재 클라이언트의 알림 토큰/클라이언트 ID를 초기화합니다. 다시 접속하면 새로 등록됩니다.',
+      okText: '초기화',
+      cancelText: '취소',
+      onOk: () => {
+        clearNotificationIdentity();
+        window.location.reload();
+      },
+    });
+  };
+
+  const handleResetAppConfig = () => {
+    setAppConfigDraft(DEFAULT_APP_CONFIG);
+    setAppConfigFeedback({ tone: 'info', message: '추천 기본값으로 되돌렸습니다. 저장 후 반영됩니다.' });
+    setAppConfigCopyFeedback(null);
+  };
+
+  useEffect(() => {
+    void syncAppConfigFromServer().then((synced) => {
+      if (!synced) {
+        setAppConfigFeedback({ tone: 'warning', message: '서버 설정을 불러오지 못해 로컬 설정을 사용합니다.' });
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!hasAccess || !settingsOpen) {
+      setPlanShortcutCounts({
+        working: 0,
+        releasePendingMain: 0,
+        automationFailed: 0,
+      });
+      return;
+    }
+
+    let cancelled = false;
+
+    void fetchPlanItems('all')
+      .then((items) => {
+        if (cancelled) {
+          return;
+        }
+
+        setPlanShortcutCounts({
+          working: items.filter(isWorkingPlanItem).length,
+          releasePendingMain: items.filter(isReleasePendingMainItem).length,
+          automationFailed: items.filter(isAutomationFailedItem).length,
+        });
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setPlanShortcutCounts({
+            working: 0,
+            releasePendingMain: 0,
+            automationFailed: 0,
+          });
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hasAccess, settingsOpen]);
+
+  const renderFeedback = (
+    feedback: InlineFeedback | null,
+    copyFeedback: InlineFeedback | null,
+    setCopyFeedback: (feedback: InlineFeedback | null) => void,
+  ) => {
+    if (!feedback) {
+      return null;
+    }
+
+    return (
+      <Space direction="vertical" size={8} style={{ width: '100%' }}>
+        <Alert
+          showIcon
+          type={feedback.tone}
+          message={feedback.message}
+          action={
+            <Button
+              type="text"
+              size="small"
+              aria-label="메시지 복사"
+              icon={<CopyOutlined />}
+              onClick={() => {
+                void copyText(feedback.message)
+                  .then(() => {
+                    setCopyFeedback({ tone: 'success', message: '메시지를 복사했습니다.' });
+                  })
+                  .catch(() => {
+                    setCopyFeedback({ tone: 'error', message: '메시지 복사에 실패했습니다.' });
+                  });
+              }}
+            />
+          }
+        />
+        {copyFeedback ? <Alert showIcon type={copyFeedback.tone} message={copyFeedback.message} /> : null}
+      </Space>
+    );
+  };
+
+  const handleRegisterToken = () => {
+    const trimmedToken = tokenInput.trim();
+
+    if (!trimmedToken) {
+      setTokenFeedback({ tone: 'warning', message: '등록할 토큰을 입력해 주세요.' });
+      return;
+    }
+
+    if (trimmedToken !== ALLOWED_REGISTRATION_TOKEN) {
+      setTokenFeedback({ tone: 'error', message: '허용되지 않은 토큰입니다.' });
+      return;
+    }
+
+    setRegisteredAccessToken(trimmedToken);
+    setTokenFeedback({ tone: 'success', message: '권한 토큰을 등록했습니다.' });
+  };
+
+  const handleClearToken = () => {
+    setRegisteredAccessToken('');
+    setTokenInput('');
+    setTokenFeedback({ tone: 'info', message: '권한 토큰을 제거했습니다.' });
+  };
+
+  const settingsTriggerButton = (
+    <Button
+      type="text"
+      aria-label={`설정 · ${settingsStatusLabel}`}
+      icon={
+        <span className="app-header__settings-icon" aria-hidden="true">
+          <SettingOutlined />
+          <span className={`app-header__status-dot ${settingsStatusClassName}`} />
+        </span>
+      }
+    />
+  );
+
+  const tokenTriggerButton = (
+    <Button
+      type="text"
+      aria-label={`권한 · ${hasAccess ? '허용됨' : '차단됨'}`}
+      icon={
+        <span className="app-header__settings-icon" aria-hidden="true">
+          <ProfileOutlined />
+          <span
+            className={`app-header__status-dot ${
+              hasAccess ? 'app-header__status-dot--active' : 'app-header__status-dot--inactive'
+            }`}
+          />
+        </span>
+      }
+      onClick={() => {
+        openSettingsModal('token');
+      }}
+    />
+  );
+
+  const worklogAutomationPanel = (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Alert
+        showIcon
+        type="info"
+        message="업무일지 자동화 기본값을 설정합니다."
+        description="현재는 앱 설정의 기준값을 저장하는 단계이며, 자동 생성/캡처 흐름에서 공통 기본값으로 사용하기 위한 설정입니다."
+      />
+      <Alert
+        showIcon
+        type={worklogAutomationSettingsDirty ? 'warning' : 'success'}
+        message={
+          worklogAutomationSettingsDirty
+            ? 'DB 저장값과 편집 중인 업무일지 자동화 설정이 다릅니다.'
+            : '업무일지 자동화 설정이 현재 DB 저장값과 같습니다.'
+        }
+        description={
+          worklogAutomationSettingsDirty
+            ? `변경 항목: ${worklogAutomationDiffLabels.join(', ')} / DB 저장값 기준: ${
+                appConfig.worklogAutomation.autoCreateDailyWorklog ? '자동 생성 On' : '자동 생성 Off'
+              }, 실행 시각 ${appConfig.worklogAutomation.dailyCreateTime}, 템플릿 ${
+                appConfig.worklogAutomation.template === 'detailed' ? '상세형' : '간단형'
+              } / 편집 중: ${
+                appConfigDraft.worklogAutomation.autoCreateDailyWorklog ? '자동 생성 On' : '자동 생성 Off'
+              }, 실행 시각 ${appConfigDraft.worklogAutomation.dailyCreateTime}, 템플릿 ${
+                appConfigDraft.worklogAutomation.template === 'detailed' ? '상세형' : '간단형'
+              }`
+            : `DB 저장값 기준: ${
+                appConfig.worklogAutomation.autoCreateDailyWorklog ? '자동 생성 On' : '자동 생성 Off'
+              }, 실행 시각 ${appConfig.worklogAutomation.dailyCreateTime}, 템플릿 ${
+                appConfig.worklogAutomation.template === 'detailed' ? '상세형' : '간단형'
+              }`
+        }
+      />
+      {appConfigFeedback ? (
+        <Space direction="vertical" size={8} style={{ width: '100%' }}>
+          <Alert
+            showIcon
+            type={appConfigFeedback.tone}
+            message={appConfigFeedback.message}
+            action={
+              <Button
+                type="text"
+                size="small"
+                aria-label="메시지 복사"
+                icon={<CopyOutlined />}
+                onClick={() => {
+                  void copyText(appConfigFeedback.message)
+                    .then(() => {
+                      setAppConfigCopyFeedback({ tone: 'success', message: '메시지를 복사했습니다.' });
+                    })
+                    .catch(() => {
+                      setAppConfigCopyFeedback({ tone: 'error', message: '메시지 복사에 실패했습니다.' });
+                    });
+                }}
+              />
+            }
+          />
+          {appConfigCopyFeedback ? (
+            <Alert showIcon type={appConfigCopyFeedback.tone} message={appConfigCopyFeedback.message} />
+          ) : null}
+        </Space>
+      ) : null}
+      <Checkbox
+        checked={appConfigDraft.worklogAutomation.autoCreateDailyWorklog}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            worklogAutomation: {
+              ...current.worklogAutomation,
+              autoCreateDailyWorklog: event.target.checked,
+            },
+          }));
+        }}
+      >
+        일일 업무일지 파일 자동 생성
+      </Checkbox>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>자동 생성 시각</Text>
+        <Input
+          type="time"
+          value={appConfigDraft.worklogAutomation.dailyCreateTime}
+          onChange={(event) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              worklogAutomation: {
+                ...current.worklogAutomation,
+                dailyCreateTime: event.target.value || DEFAULT_APP_CONFIG.worklogAutomation.dailyCreateTime,
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">설정한 시각 이후 서버 워커가 오늘자 업무일지 요청을 자동 등록합니다.</Text>
+      </Space>
+      <Text type="secondary">반복 등록은 별도 서버 작업으로 관리합니다.</Text>
+      <Checkbox
+        checked={appConfigDraft.worklogAutomation.includeScreenshots}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            worklogAutomation: {
+              ...current.worklogAutomation,
+              includeScreenshots: event.target.checked,
+            },
+          }));
+        }}
+      >
+        자동 캡처 스크린샷 포함
+      </Checkbox>
+      <Checkbox
+        checked={appConfigDraft.worklogAutomation.includeChangedFiles}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            worklogAutomation: {
+              ...current.worklogAutomation,
+              includeChangedFiles: event.target.checked,
+            },
+          }));
+        }}
+      >
+        변경 파일 목록 자동 포함
+      </Checkbox>
+      <Checkbox
+        checked={appConfigDraft.worklogAutomation.includeCommandLogs}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            worklogAutomation: {
+              ...current.worklogAutomation,
+              includeCommandLogs: event.target.checked,
+            },
+          }));
+        }}
+      >
+        실행 커맨드 로그 자동 포함
+      </Checkbox>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>기본 템플릿</Text>
+        <Segmented
+          block
+          value={appConfigDraft.worklogAutomation.template}
+          options={[
+            { label: '상세형', value: 'detailed' },
+            { label: '간단형', value: 'simple' },
+          ]}
+          onChange={(value) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              worklogAutomation: {
+                ...current.worklogAutomation,
+                template: value as AppConfig['worklogAutomation']['template'],
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">
+          상세형은 스크린샷, 소스, 실행 커맨드, 변경 파일 중심으로 남기고 간단형은 핵심 작업 요약 위주로 정리합니다.
+        </Text>
+      </Space>
+      <Space wrap>
+        <Button type="primary" onClick={handleSaveAppConfig} loading={appConfigSaving}>
+          설정 저장
+        </Button>
+        <Button onClick={handleResetAppConfig}>추천값 불러오기</Button>
+        <Button onClick={handleResetNotificationIdentity}>클라이언트 초기화</Button>
+      </Space>
+    </Space>
+  );
+
+  const chatSettingsPanel = (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Alert
+        type={chatSettingsDirty ? 'warning' : 'success'}
+        showIcon
+        message={chatSettingsDirty ? '채팅 문맥 설정에 저장되지 않은 변경이 있습니다.' : '채팅 문맥 설정이 저장되었습니다.'}
+        description={
+          chatSettingsDirty
+            ? `변경 항목: ${chatSettingsDiffLabels.join(', ')} / DB 저장값 기준: 최근 ${appConfig.chat.maxContextMessages}개, ${appConfig.chat.maxContextChars}자 / 편집 중: 최근 ${appConfigDraft.chat.maxContextMessages}개, ${appConfigDraft.chat.maxContextChars}자`
+            : `현재 저장값: 최근 ${appConfig.chat.maxContextMessages}개 메시지, 최대 ${appConfig.chat.maxContextChars}자까지 채팅 문맥으로 참조`
+        }
+      />
+
+      <div>
+        <Text strong>최근 문맥 메시지 수</Text>
+        <Paragraph type="secondary">최근 대화 중 몇 개의 메시지를 채팅 문맥으로 참조할지 설정합니다.</Paragraph>
+        <InputNumber
+          min={1}
+          max={50}
+          value={appConfigDraft.chat.maxContextMessages}
+          onChange={(value) => {
+            setAppConfigDraft((current) => ({
+              ...current,
+              chat: {
+                ...current.chat,
+                maxContextMessages:
+                  typeof value === 'number' && Number.isFinite(value)
+                    ? Math.min(50, Math.max(1, Math.round(value)))
+                    : DEFAULT_APP_CONFIG.chat.maxContextMessages,
+              },
+            }));
+          }}
+        />
+      </div>
+
+      <div>
+        <Text strong>최근 문맥 글자 수</Text>
+        <Paragraph type="secondary">최근 대화 전체에서 참조할 최대 글자 수입니다. 초과하면 전송 전에 확인 모달이 표시됩니다.</Paragraph>
+        <InputNumber
+          min={500}
+          max={20000}
+          step={100}
+          value={appConfigDraft.chat.maxContextChars}
+          onChange={(value) => {
+            setAppConfigDraft((current) => ({
+              ...current,
+              chat: {
+                ...current.chat,
+                maxContextChars:
+                  typeof value === 'number' && Number.isFinite(value)
+                    ? Math.min(20_000, Math.max(500, Math.round(value)))
+                    : DEFAULT_APP_CONFIG.chat.maxContextChars,
+              },
+            }));
+          }}
+        />
+      </div>
+    </Space>
+  );
+
+  const planDefaultsPanel = (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Alert
+        showIcon
+        type="info"
+        message="작업 자동화 기본값을 설정합니다."
+        description="새 작업 요청을 등록할 때 기본으로 채워지는 자동화 옵션입니다."
+      />
+      <Alert
+        showIcon
+        type={planDefaultSettingsDirty ? 'warning' : 'success'}
+        message={
+          planDefaultSettingsDirty
+            ? 'DB 저장값과 편집 중인 자동화 기본값이 다릅니다.'
+            : '자동화 기본값이 현재 DB 저장값과 같습니다.'
+        }
+        description={
+          planDefaultSettingsDirty
+            ? `변경 항목: ${planDefaultDiffLabels.join(', ')} / DB 저장값 기준: 기능동작확인 ${
+                appConfig.planDefaults.jangsingProcessingRequired ? '완료' : '오동작'
+              }, ${appConfig.planDefaults.autoDeployToMain ? '메인까지 자동등록' : 'release만 반영'}, 등록 후 편집기 ${
+                appConfig.planDefaults.openEditorAfterCreate ? '열기' : '닫기'
+              } / 편집 중: 기능동작확인 ${
+                appConfigDraft.planDefaults.jangsingProcessingRequired ? '완료' : '오동작'
+              }, ${
+                appConfigDraft.planDefaults.autoDeployToMain ? '메인까지 자동등록' : 'release만 반영'
+              }, 등록 후 편집기 ${appConfigDraft.planDefaults.openEditorAfterCreate ? '열기' : '닫기'}`
+            : `DB 저장값 기준: 기능동작확인 ${
+                appConfig.planDefaults.jangsingProcessingRequired ? '완료' : '오동작'
+              }, ${appConfig.planDefaults.autoDeployToMain ? '메인까지 자동등록' : 'release만 반영'}, 등록 후 편집기 ${
+                appConfig.planDefaults.openEditorAfterCreate ? '열기' : '닫기'
+              }`
+        }
+      />
+      {renderFeedback(appConfigFeedback, appConfigCopyFeedback, setAppConfigCopyFeedback)}
+      <Checkbox
+        checked={appConfigDraft.planDefaults.jangsingProcessingRequired}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            planDefaults: {
+              ...current.planDefaults,
+              jangsingProcessingRequired: event.target.checked,
+            },
+          }));
+        }}
+      >
+        기능동작확인 기본값을 완료로 설정
+      </Checkbox>
+      <Checkbox
+        checked={appConfigDraft.planDefaults.autoDeployToMain}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            planDefaults: {
+              ...current.planDefaults,
+              autoDeployToMain: event.target.checked,
+            },
+          }));
+        }}
+      >
+        메인까지 자동등록
+      </Checkbox>
+      <Checkbox
+        checked={appConfigDraft.planDefaults.openEditorAfterCreate}
+        onChange={(event) => {
+          updateAppConfigDraft((current) => ({
+            ...current,
+            planDefaults: {
+              ...current.planDefaults,
+              openEditorAfterCreate: event.target.checked,
+            },
+          }));
+        }}
+      >
+        새 항목 등록 후 편집기 자동 열기
+      </Checkbox>
+      <Space wrap>
+        <Button type="primary" onClick={handleSaveAppConfig} loading={appConfigSaving}>
+          설정 저장
+        </Button>
+        <Button onClick={handleResetAppConfig}>추천값 불러오기</Button>
+      </Space>
+    </Space>
+  );
+
+  const planCostPanel = (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Alert
+        showIcon
+        type="info"
+        message="자동화 비용 표시 기준을 설정합니다."
+        description="진행 중 작업과 완료된 작업 모두 누적 토큰 사용량, 재처리 횟수, 종료 시각 기준 처리 시간을 반영해 예상 비용을 계산합니다. 재처리/시간 가산 비율과 상태 구간 기준값은 아래에서 직접 조정할 수 있습니다."
+      />
+      <Alert
+        showIcon
+        type={planCostSettingsDirty ? 'warning' : 'success'}
+        message={
+          planCostSettingsDirty ? 'DB 저장값과 편집 중인 비용 설정이 다릅니다.' : '비용 설정이 현재 DB 저장값과 같습니다.'
+        }
+        description={
+          planCostSettingsDirty
+            ? `변경 항목: ${planCostDiffLabels.join(', ')} / DB 저장값 기준: 백만 토큰당 ${formatCostAmount(
+                appConfig.planCost.baseCostPerMillionTokens,
+              )}, 재처리 ${appConfig.planCost.retryCostMultiplierPercent}%, ${formatPlanCostTimeMultiplierLabel(appConfig.planCost)}, 관심 ${appConfig.planCost.attentionCostThresholdMultiplier}배, 주의 ${appConfig.planCost.warningCostThresholdMultiplier}배, 높음 ${appConfig.planCost.highCostThresholdMultiplier}배 / 편집 중: 백만 토큰당 ${formatCostAmount(appConfigDraft.planCost.baseCostPerMillionTokens)}, 재처리 ${appConfigDraft.planCost.retryCostMultiplierPercent}%, ${formatPlanCostTimeMultiplierLabel(appConfigDraft.planCost)}, 관심 ${appConfigDraft.planCost.attentionCostThresholdMultiplier}배, 주의 ${appConfigDraft.planCost.warningCostThresholdMultiplier}배, 높음 ${appConfigDraft.planCost.highCostThresholdMultiplier}배`
+            : `DB 저장값 기준: 백만 토큰당 ${formatCostAmount(appConfig.planCost.baseCostPerMillionTokens)}, 재처리 ${appConfig.planCost.retryCostMultiplierPercent}%, ${formatPlanCostTimeMultiplierLabel(appConfig.planCost)}, 관심 ${appConfig.planCost.attentionCostThresholdMultiplier}배, 주의 ${appConfig.planCost.warningCostThresholdMultiplier}배, 높음 ${appConfig.planCost.highCostThresholdMultiplier}배`
+        }
+      />
+      {renderFeedback(appConfigFeedback, appConfigCopyFeedback, setAppConfigCopyFeedback)}
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>백만 토큰당 기준 비용</Text>
+        <InputNumber
+          min={100}
+          max={1000000}
+          step={100}
+          style={{ width: '100%' }}
+          addonAfter="원"
+          value={appConfigDraft.planCost.baseCostPerMillionTokens}
+          onChange={(value) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              planCost: {
+                ...current.planCost,
+                baseCostPerMillionTokens: typeof value === 'number' ? value : current.planCost.baseCostPerMillionTokens,
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">
+          예: {formatCostAmount(appConfigDraft.planCost.baseCostPerMillionTokens)} 기준이면 누적 토큰 100만개에서 재처리
+          가산 전 기본 비용이 동일하게 계산됩니다.
+        </Text>
+      </Space>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>재처리 가산 비율</Text>
+        <InputNumber
+          min={0}
+          max={500}
+          step={1}
+          style={{ width: '100%' }}
+          addonAfter="%"
+          value={appConfigDraft.planCost.retryCostMultiplierPercent}
+          onChange={(value) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              planCost: {
+                ...current.planCost,
+                retryCostMultiplierPercent:
+                  typeof value === 'number' ? value : current.planCost.retryCostMultiplierPercent,
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">재처리 1회마다 기본 비용에 가산할 비율입니다.</Text>
+      </Space>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>시간 가산 비율</Text>
+        <Select
+          style={{ width: '100%' }}
+          value={appConfigDraft.planCost.timeCostUnit}
+          options={[
+            { value: 'hour', label: '시간 기준' },
+            { value: 'minute', label: '분 기준' },
+            { value: 'second', label: '초 기준' },
+          ]}
+          onChange={(value) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              planCost: {
+                ...current.planCost,
+                timeCostUnit: value,
+              },
+            }));
+          }}
+        />
+        <InputNumber
+          min={0}
+          max={500}
+          step={1}
+          style={{ width: '100%' }}
+          addonAfter="%"
+          value={appConfigDraft.planCost.hourlyCostMultiplierPercent}
+          onChange={(value) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              planCost: {
+                ...current.planCost,
+                hourlyCostMultiplierPercent:
+                  typeof value === 'number' ? value : current.planCost.hourlyCostMultiplierPercent,
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">
+          종료 시각 기준 처리시간 {PLAN_COST_TIME_UNIT_LABELS[appConfigDraft.planCost.timeCostUnit]}마다 기본 비용에 가산할
+          비율입니다.
+        </Text>
+      </Space>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>상태 구간 기준 배수</Text>
+        <Space direction={screens.sm ? 'horizontal' : 'vertical'} size={8} style={{ width: '100%' }}>
+          <InputNumber
+            min={0.1}
+            max={100}
+            step={0.1}
+            style={{ width: screens.sm ? '33.33%' : '100%' }}
+            addonBefore="관심"
+            addonAfter="배"
+            value={appConfigDraft.planCost.attentionCostThresholdMultiplier}
+            onChange={(value) => {
+              updateAppConfigDraft((current) => ({
+                ...current,
+                planCost: {
+                  ...current.planCost,
+                  attentionCostThresholdMultiplier:
+                    typeof value === 'number' ? value : current.planCost.attentionCostThresholdMultiplier,
+                },
+              }));
+            }}
+          />
+          <InputNumber
+            min={0.1}
+            max={100}
+            step={0.1}
+            style={{ width: screens.sm ? '33.33%' : '100%' }}
+            addonBefore="주의"
+            addonAfter="배"
+            value={appConfigDraft.planCost.warningCostThresholdMultiplier}
+            onChange={(value) => {
+              updateAppConfigDraft((current) => ({
+                ...current,
+                planCost: {
+                  ...current.planCost,
+                  warningCostThresholdMultiplier:
+                    typeof value === 'number' ? value : current.planCost.warningCostThresholdMultiplier,
+                },
+              }));
+            }}
+          />
+          <InputNumber
+            min={0.1}
+            max={100}
+            step={0.1}
+            style={{ width: screens.sm ? '33.33%' : '100%' }}
+            addonBefore="높음"
+            addonAfter="배"
+            value={appConfigDraft.planCost.highCostThresholdMultiplier}
+            onChange={(value) => {
+              updateAppConfigDraft((current) => ({
+                ...current,
+                planCost: {
+                  ...current.planCost,
+                  highCostThresholdMultiplier:
+                    typeof value === 'number' ? value : current.planCost.highCostThresholdMultiplier,
+                },
+              }));
+            }}
+          />
+        </Space>
+        <Text type="secondary">기준 비용 대비 몇 배부터 관심, 주의, 높음 상태로 표시할지 설정합니다.</Text>
+        <Text type="secondary">현재 편집값 기준: {getPlanCostThresholdPreview(appConfigDraft.planCost)}</Text>
+      </Space>
+      <Space wrap>
+        <Button type="primary" onClick={handleSaveAppConfig} loading={appConfigSaving}>
+          설정 저장
+        </Button>
+        <Button onClick={handleResetAppConfig}>추천값 불러오기</Button>
+      </Space>
+    </Space>
+  );
+
+  const automationNotificationPanel = (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Alert
+        showIcon
+        type="info"
+        message="자동화 알림을 항목별로 설정합니다."
+        description="알림 사용이 켜진 기기에서만 Web Push를 받을 수 있습니다."
+      />
+      <Alert
+        showIcon
+        type={automationNotificationSettingsDirty ? 'warning' : 'success'}
+        message={
+          automationNotificationSettingsDirty
+            ? 'DB 저장값과 편집 중인 자동화 알림 설정이 다릅니다.'
+            : '자동화 알림 설정이 현재 DB 저장값과 같습니다.'
+        }
+        description={
+          automationNotificationSettingsDirty
+            ? `변경 항목: ${automationNotificationDiffLabels.join(', ')}`
+            : `알림 항목: ${AUTOMATION_NOTIFICATION_OPTIONS.map((option) => option.label).join(', ')}`
+        }
+      />
+      {appConfigFeedback ? (
+        <Space direction="vertical" size={8} style={{ width: '100%' }}>
+          <Alert
+            showIcon
+            type={appConfigFeedback.tone}
+            message={appConfigFeedback.message}
+            action={
+              <Button
+                type="text"
+                size="small"
+                aria-label="메시지 복사"
+                icon={<CopyOutlined />}
+                onClick={() => {
+                  void copyText(appConfigFeedback.message)
+                    .then(() => {
+                      setAppConfigCopyFeedback({ tone: 'success', message: '메시지를 복사했습니다.' });
+                    })
+                    .catch(() => {
+                      setAppConfigCopyFeedback({ tone: 'error', message: '메시지 복사에 실패했습니다.' });
+                    });
+                }}
+              />
+            }
+          />
+          {appConfigCopyFeedback ? (
+            <Alert showIcon type={appConfigCopyFeedback.tone} message={appConfigCopyFeedback.message} />
+          ) : null}
+        </Space>
+      ) : null}
+      <Space direction="vertical" size={10} style={{ width: '100%' }}>
+        {AUTOMATION_NOTIFICATION_OPTIONS.map((option) => (
+          <Checkbox
+            key={option.key}
+            checked={appConfigDraft.automation[option.key]}
+            onChange={(event) => {
+              updateAppConfigDraft((current) => ({
+                ...current,
+                automation: {
+                  ...current.automation,
+                  [option.key]: event.target.checked,
+                },
+              }));
+            }}
+          >
+            <Space direction="vertical" size={0}>
+              <Text>{option.label}</Text>
+              <Text type="secondary">{option.description}</Text>
+            </Space>
+          </Checkbox>
+        ))}
+      </Space>
+      <Space wrap>
+        <Button type="primary" onClick={handleSaveAppConfig} loading={appConfigSaving}>
+          설정 저장
+        </Button>
+        <Button onClick={handleResetAppConfig}>추천값 불러오기</Button>
+      </Space>
+    </Space>
+  );
+
+  const gestureShortcutsPanel = (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Alert
+        showIcon
+        type="info"
+        message="모바일 제스처와 같은 액션을 키보드 단축키로도 실행합니다."
+        description="저장 후 즉시 반영됩니다. `Mod`는 macOS에서는 Command, Windows/Linux에서는 Ctrl로 처리합니다."
+      />
+      <Alert
+        showIcon
+        type={gestureShortcutSettingsDirty ? 'warning' : 'success'}
+        message={
+          gestureShortcutSettingsDirty
+            ? 'DB 저장값과 편집 중인 제스처 단축키 설정이 다릅니다.'
+            : '제스처 단축키 설정이 현재 DB 저장값과 같습니다.'
+        }
+        description={
+          gestureShortcutSettingsDirty
+            ? `변경 항목: ${gestureShortcutDiffLabels.join(', ')} / DB 저장값 기준: 통합 검색 ${appConfig.gestureShortcuts.openSearch}, Window UI 검색 ${appConfig.gestureShortcuts.openWindowSearch} / 편집 중: 통합 검색 ${appConfigDraft.gestureShortcuts.openSearch}, Window UI 검색 ${appConfigDraft.gestureShortcuts.openWindowSearch}`
+            : `DB 저장값 기준: 통합 검색 ${appConfig.gestureShortcuts.openSearch}, Window UI 검색 ${appConfig.gestureShortcuts.openWindowSearch}`
+        }
+      />
+      {appConfigFeedback ? (
+        <Space direction="vertical" size={8} style={{ width: '100%' }}>
+          <Alert
+            showIcon
+            type={appConfigFeedback.tone}
+            message={appConfigFeedback.message}
+            action={
+              <Button
+                type="text"
+                size="small"
+                aria-label="메시지 복사"
+                icon={<CopyOutlined />}
+                onClick={() => {
+                  void copyText(appConfigFeedback.message)
+                    .then(() => {
+                      setAppConfigCopyFeedback({ tone: 'success', message: '메시지를 복사했습니다.' });
+                    })
+                    .catch(() => {
+                      setAppConfigCopyFeedback({ tone: 'error', message: '메시지 복사에 실패했습니다.' });
+                    });
+                }}
+              />
+            }
+          />
+          {appConfigCopyFeedback ? (
+            <Alert showIcon type={appConfigCopyFeedback.tone} message={appConfigCopyFeedback.message} />
+          ) : null}
+        </Space>
+      ) : null}
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>상단 우측 당기기 액션</Text>
+        <Input
+          value={appConfigDraft.gestureShortcuts.openSearch}
+          placeholder={DEFAULT_APP_CONFIG.gestureShortcuts.openSearch}
+          onChange={(event) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              gestureShortcuts: {
+                ...current.gestureShortcuts,
+                openSearch: event.target.value,
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">통합 검색을 엽니다. 예: `Mod+K`, `Alt+/`</Text>
+      </Space>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Text strong>오른쪽 가운데 왼쪽 당기기 액션</Text>
+        <Input
+          value={appConfigDraft.gestureShortcuts.openWindowSearch}
+          placeholder={DEFAULT_APP_CONFIG.gestureShortcuts.openWindowSearch}
+          onChange={(event) => {
+            updateAppConfigDraft((current) => ({
+              ...current,
+              gestureShortcuts: {
+                ...current.gestureShortcuts,
+                openWindowSearch: event.target.value,
+              },
+            }));
+          }}
+        />
+        <Text type="secondary">선택한 항목을 `Window UI`로 여는 검색을 엽니다. 예: `Mod+Shift+K`</Text>
+      </Space>
+      <Space wrap>
+        <Button type="primary" onClick={handleSaveAppConfig} loading={appConfigSaving}>
+          설정 저장
+        </Button>
+        <Button onClick={handleResetAppConfig}>추천값 불러오기</Button>
+      </Space>
+    </Space>
+  );
+
+  const settingsMenu = (
+    <div className="app-header__settings-menu">
+      {hasAccess ? (
+        <>
+          <button
+            type="button"
+            className="app-header__settings-item"
+            onClick={() => {
+              setSettingsOpen(false);
+              onOpenPlanQuickFilter('working');
+            }}
+          >
+            <span className="app-header__settings-icon">
+              <ProfileOutlined />
+              <span
+                className={`app-header__status-dot ${
+                  planShortcutCounts.working > 0
+                    ? 'app-header__status-dot--active'
+                    : 'app-header__status-dot--inactive'
+                }`}
+                aria-hidden="true"
+              />
+            </span>
+            <span className="app-header__settings-label">
+              작업중 항목
+              <Text type="secondary"> {planShortcutCounts.working}건</Text>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="app-header__settings-item"
+            onClick={() => {
+              setSettingsOpen(false);
+              onOpenPlanQuickFilter('release-pending-main');
+            }}
+          >
+            <span className="app-header__settings-icon">
+              <ProfileOutlined />
+              <span
+                className={`app-header__status-dot ${
+                  planShortcutCounts.releasePendingMain > 0
+                    ? 'app-header__status-dot--warning'
+                    : 'app-header__status-dot--inactive'
+                }`}
+                aria-hidden="true"
+              />
+            </span>
+            <span className="app-header__settings-label">
+              release 상태 작업
+              <Text type="secondary"> {planShortcutCounts.releasePendingMain}건</Text>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="app-header__settings-item"
+            onClick={() => {
+              setSettingsOpen(false);
+              onOpenPlanQuickFilter('automation-failed');
+            }}
+          >
+            <span className="app-header__settings-icon">
+              <ReloadOutlined />
+              <span
+                className={`app-header__status-dot ${
+                  planShortcutCounts.automationFailed > 0
+                    ? 'app-header__status-dot--warning'
+                    : 'app-header__status-dot--inactive'
+                }`}
+                aria-hidden="true"
+              />
+            </span>
+            <span className="app-header__settings-label">
+              자동화 실패
+              <Text type="secondary"> {planShortcutCounts.automationFailed}건</Text>
+            </span>
+          </button>
+        </>
+      ) : null}
+      <button
+        type="button"
+        className="app-header__settings-item"
+        disabled={!hasAccess}
+        onClick={() => {
+          openSettingsModal('appSettings', 'planDefaults');
+        }}
+        >
+        <span className="app-header__settings-icon">
+          <SettingOutlined />
+          <span className={`app-header__status-dot ${settingsStatusClassName}`} aria-hidden="true" />
+        </span>
+        <span className="app-header__settings-label">앱 설정</span>
+      </button>
+      <button
+        type="button"
+        className="app-header__settings-item"
+        disabled={!hasAccess}
+        onClick={() => {
+          openSettingsModal('notification');
+        }}
+      >
+        <span className="app-header__settings-icon">
+          <BellOutlined />
+          <span
+            className={`app-header__status-dot ${notificationStatusClassName}`}
+            aria-hidden="true"
+          />
+        </span>
+        <span className="app-header__settings-label">알림</span>
+      </button>
+      <button
+        type="button"
+        className="app-header__settings-item"
+        onClick={() => {
+          openSettingsModal('token');
+        }}
+      >
+        <span className="app-header__settings-icon">
+          <ProfileOutlined />
+          <span
+            className={`app-header__status-dot ${
+              hasAccess ? 'app-header__status-dot--active' : 'app-header__status-dot--inactive'
+            }`}
+            aria-hidden="true"
+          />
+        </span>
+        <span className="app-header__settings-label">권한</span>
+      </button>
+      <button
+        type="button"
+        className="app-header__settings-item"
+        onClick={() => {
+          openSettingsModal('update');
+        }}
+      >
+        <span className="app-header__settings-icon">
+          {appUpdateStatus === 'updating' ? <ReloadOutlined spin /> : <DownloadOutlined />}
+          <span
+            className={`app-header__status-dot ${appUpdateStatusClassName}`}
+            aria-hidden="true"
+          />
+        </span>
+        <span className="app-header__settings-label">업데이트</span>
+      </button>
+    </div>
+  );
+
+  return (
+    <>
+      <Header className="app-header">
+        <Space size={12} className="app-header__row">
+          <Space size={12} className="app-header__menu-side">
+            <Button
+              type="text"
+              icon={sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={onToggleSidebar}
+            />
+            <Segmented
+              value={headerTopMenu}
+              options={
+                hasAccess
+                  ? [
+                      { label: 'Docs', value: 'docs', icon: <FileMarkdownOutlined /> },
+                      { label: '작업', value: 'plans', icon: <ProfileOutlined /> },
+                    ]
+                  : [{ label: 'Docs', value: 'docs', icon: <FileMarkdownOutlined /> }]
+              }
+              onChange={(value) => {
+                onChangeTopMenu(value as 'docs' | 'plans');
+                if (isMobileViewport && sidebarCollapsed) {
+                  onToggleSidebar();
+                }
+              }}
+            />
+          </Space>
+
+          <Space size={4} className="app-header__actions">
+            {hasAccess ? (
+              <>
+                <button
+                  type="button"
+                  className={connectionIndicatorClassName}
+                  aria-label={chatConnectionLabel}
+                  title={chatConnectionLabel}
+                  onClick={() => {
+                    setIsRuntimeModalOpen(true);
+                  }}
+                >
+                  <span className="app-header__settings-icon" aria-hidden="true">
+                    <ApiOutlined />
+                    <span className={`app-header__status-dot ${chatConnectionStatusClassName}`} />
+                  </span>
+                  {runningRuntimeCount > 0 ? (
+                    <span
+                      className={connectionCountBadgeClassName}
+                      aria-label={`실행 중 요청 ${runningRuntimeCount}건`}
+                      title={`실행 중 요청 ${runningRuntimeCount}건`}
+                    >
+                      {runningRuntimeBadgeLabel}
+                    </span>
+                  ) : null}
+                </button>
+                <HeaderMessageCenter isMobileViewport={isMobileViewport} />
+                <Dropdown
+                  trigger={['click']}
+                  open={settingsOpen}
+                  onOpenChange={setSettingsOpen}
+                  placement="bottomRight"
+                  popupRender={() => settingsMenu}
+                >
+                  {settingsTriggerButton}
+                </Dropdown>
+              </>
+            ) : (
+              tokenTriggerButton
+            )}
+          </Space>
+        </Space>
+      </Header>
+
+      <Modal
+        title="Codex 런타임"
+        open={isRuntimeModalOpen}
+        footer={null}
+        onCancel={() => {
+          setIsRuntimeModalOpen(false);
+        }}
+      >
+        <Space direction="vertical" size={12} style={{ width: '100%' }}>
+          <div className="app-header__runtime-summary">
+            <div className="app-header__runtime-summary-card" title="실행 중 요청">
+              <LoadingOutlined />
+              <Text type="secondary">실행</Text>
+              <Text strong>{runningRuntimeCount}</Text>
+            </div>
+            <div className="app-header__runtime-summary-card" title="대기 요청">
+              <ClockCircleOutlined />
+              <Text type="secondary">대기</Text>
+              <Text strong>{queuedRuntimeCount}</Text>
+            </div>
+            <div className="app-header__runtime-summary-card" title="활성 세션">
+              <ProfileOutlined />
+              <Text type="secondary">활성</Text>
+              <Text strong>{runtimeSessionCount}</Text>
+            </div>
+          </div>
+          <Alert
+            type={
+              chatConnection.connectionState === 'connected'
+                ? 'success'
+                : chatConnection.connectionState === 'connecting'
+                  ? 'info'
+                  : 'warning'
+            }
+            showIcon
+            message={
+              chatConnection.connectionState === 'connected'
+                ? '웹소켓으로 실시간 반영 중입니다.'
+                : chatConnection.connectionState === 'connecting'
+                  ? '웹소켓을 다시 연결하는 중입니다.'
+                  : '웹소켓 연결이 끊겨 최신 상태가 지연될 수 있습니다.'
+            }
+            description={
+              chatRuntimeSnapshot?.generatedAt
+                ? `마지막 반영 ${formatRuntimeRelativeLabel(chatRuntimeSnapshot.generatedAt)}`
+                : '아직 수신된 런타임 정보가 없습니다.'
+            }
+          />
+          <div className="app-header__runtime-list">
+            <Text strong>실행 중 요청</Text>
+            {chatRuntimeSnapshot && chatRuntimeSnapshot.running.length > 0 ? (
+              chatRuntimeSnapshot.running.map((item) => (
+                <div key={item.requestId} className="app-header__runtime-list-item">
+                  <div className="app-header__runtime-list-row">
+                    <div className="app-header__runtime-list-copy">
+                      <Text strong>{getConversationLabel(item.sessionId)}</Text>
+                      <Text className="app-header__runtime-summary-text">{item.summary || '요약 없음'}</Text>
+                      <div className="app-header__runtime-meta">
+                        <span className="app-header__runtime-badge">
+                          <LoadingOutlined />
+                          실행
+                        </span>
+                        <span className="app-header__runtime-badge">{formatRuntimeRelativeLabel(item.startedAt)}</span>
+                      </div>
+                    </div>
+                    <Space size={8} wrap>
+                      <Button
+                        size="small"
+                        type="default"
+                        onClick={() => {
+                          void openRuntimeLog(item.requestId);
+                        }}
+                      >
+                        로그 보기
+                      </Button>
+                      <Button size="small" type="default" onClick={() => navigateToConversation(item.sessionId)}>
+                        이동
+                      </Button>
+                    </Space>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <Text type="secondary">현재 실행 중인 요청이 없습니다.</Text>
+            )}
+          </div>
+          <div className="app-header__runtime-list">
+            <Text strong>대기 요청</Text>
+            {chatRuntimeSnapshot && chatRuntimeSnapshot.queued.length > 0 ? (
+              chatRuntimeSnapshot.queued.map((item) => (
+                <div key={item.requestId} className="app-header__runtime-list-item">
+                  <div className="app-header__runtime-list-row">
+                    <div className="app-header__runtime-list-copy">
+                      <Text strong>{getConversationLabel(item.sessionId)}</Text>
+                      <Text className="app-header__runtime-summary-text">{item.summary || '요약 없음'}</Text>
+                      <div className="app-header__runtime-meta">
+                        <span className="app-header__runtime-badge">
+                          <ClockCircleOutlined />
+                          대기
+                        </span>
+                        <span className="app-header__runtime-badge">{formatRuntimeRelativeLabel(item.enqueuedAt)}</span>
+                      </div>
+                    </div>
+                    <Button size="small" type="default" onClick={() => navigateToConversation(item.sessionId)}>
+                      이동
+                    </Button>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <Text type="secondary">현재 대기 중인 요청이 없습니다.</Text>
+            )}
+          </div>
+          <div className="app-header__runtime-list">
+            <Text strong>최근 작업</Text>
+            {chatRuntimeSnapshot && chatRuntimeSnapshot.recent.length > 0 ? (
+              chatRuntimeSnapshot.recent.map((item) => (
+                <div key={`recent-${item.requestId}-${item.lastUpdatedAt}`} className="app-header__runtime-list-item">
+                  <div className="app-header__runtime-list-row">
+                    <div className="app-header__runtime-list-copy">
+                      <Text strong>{getConversationLabel(item.sessionId)}</Text>
+                      <Text className="app-header__runtime-summary-text">{item.summary || '요약 없음'}</Text>
+                      <div className="app-header__runtime-meta">
+                        <span className="app-header__runtime-badge">{buildRuntimeTerminalLabel(item.terminalStatus)}</span>
+                        <span className="app-header__runtime-badge">
+                          {formatRuntimeRelativeLabel(item.lastUpdatedAt)}
+                        </span>
+                      </div>
+                    </div>
+                    <Space size={8} wrap>
+                      <Button
+                        size="small"
+                        type="default"
+                        onClick={() => {
+                          void openRuntimeLog(item.requestId);
+                        }}
+                      >
+                        로그 보기
+                      </Button>
+                      <Button size="small" type="default" onClick={() => navigateToConversation(item.sessionId)}>
+                        이동
+                      </Button>
+                    </Space>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <Text type="secondary">최근 종료된 작업이 없습니다.</Text>
+            )}
+          </div>
+        </Space>
+      </Modal>
+
+      <Drawer
+        open={isRuntimeLogDrawerOpen}
+        title="실행 로그"
+        placement="right"
+        width="100vw"
+        onClose={() => {
+          setIsRuntimeLogDrawerOpen(false);
+          setRuntimeLogDetail(null);
+          setRuntimeLogError('');
+        }}
+        styles={{
+          body: {
+            padding: 24,
+          },
+        }}
+      >
+        {runtimeLogLoading ? (
+          <Text type="secondary">로그를 불러오는 중입니다.</Text>
+        ) : runtimeLogError ? (
+          <Text type="danger">{runtimeLogError}</Text>
+        ) : runtimeLogDetail ? (
+          <Space direction="vertical" size={12} style={{ width: '100%' }}>
+            {runtimeLogDetail.item?.sessionId ? (
+              <Button
+                size="small"
+                type="default"
+                style={{ alignSelf: 'flex-start' }}
+                onClick={() => {
+                  navigateToConversation(runtimeLogDetail.item?.sessionId ?? '');
+                  setIsRuntimeLogDrawerOpen(false);
+                }}
+              >
+                채팅방 이동
+              </Button>
+            ) : null}
+            <div className="app-chat-runtime__job-meta">
+              <Text type="secondary">요청: {runtimeLogDetail.item?.requestId ?? '-'}</Text>
+              <Text type="secondary">세션: {runtimeLogDetail.item?.sessionId ?? '-'}</Text>
+              <Text type="secondary">마지막 갱신: {formatRuntimeTimestamp(runtimeLogDetail.lastUpdatedAt)}</Text>
+              <Text type="secondary">
+                종료 상태: {buildRuntimeTerminalLabel(runtimeLogDetail.terminalStatus)}
+              </Text>
+            </div>
+            <Paragraph className="app-chat-runtime__job-summary">
+              {runtimeLogDetail.item?.summary ?? '요약 없음'}
+            </Paragraph>
+            <pre className="app-chat-runtime__log-viewer">
+              {runtimeLogDetail.logs.length > 0 ? runtimeLogDetail.logs.join('\n') : '아직 기록된 로그가 없습니다.'}
+            </pre>
+          </Space>
+        ) : (
+          <Text type="secondary">표시할 로그가 없습니다.</Text>
+        )}
+      </Drawer>
+
+      <Modal
+        title={getSettingsModalTitle(activeSettingsModal)}
+        open={settingsModalOpen}
+        footer={null}
+        confirmLoading={notificationLoading}
+        onCancel={() => {
+          setSettingsModalOpen(false);
+        }}
+      >
+        <Space direction="vertical" size={12} style={{ width: '100%' }}>
+          {activeSettingsModal === 'appSettings' ? (
+            <>
+              <Segmented
+                block
+                value={activeAppSettingsCategory}
+                options={[...APP_SETTINGS_CATEGORIES]}
+                onChange={(value) => {
+                  setActiveAppSettingsCategory(value as AppSettingsCategoryKey);
+                }}
+              />
+              <Select
+                value={activeAppSettingsSection}
+                options={activeAppSettingsSectionOptions}
+                onChange={(value) => {
+                  setActiveAppSettingsSection(value);
+                }}
+              />
+              {activeAppSettingsSection === 'planDefaults' ? planDefaultsPanel : null}
+              {activeAppSettingsSection === 'planCost' ? planCostPanel : null}
+              {activeAppSettingsSection === 'chatSettings' ? chatSettingsPanel : null}
+              {activeAppSettingsSection === 'worklogAutomation' ? worklogAutomationPanel : null}
+              {activeAppSettingsSection === 'automationNotifications' ? automationNotificationPanel : null}
+              {activeAppSettingsSection === 'gestureShortcuts' ? gestureShortcutsPanel : null}
+            </>
+          ) : null}
+          {activeSettingsModal === 'notification' ? (
+            <Space direction="vertical" size={12} style={{ width: '100%' }}>
+              <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+                알림을 `On`으로 바꾸면 현재 기기의 브라우저 권한을 확인한 뒤 Web Push 구독을 생성하고 서버에 자동 등록합니다.
+              </Paragraph>
+              <Text type="secondary">클라이언트 알림 권한 상태: {getClientNotificationPermissionLabel(clientNotificationPermission)}</Text>
+              <Text type="secondary">PWA 실행 상태: {isStandaloneMode ? '홈 화면 앱' : '브라우저 탭'}</Text>
+              <Text type="secondary">서버 Web Push 설정: {webPushConfigured ? '준비됨' : '미설정'}</Text>
+              {isAppleMobileDevice() && !isStandaloneMode ? (
+                <Text type="warning">아이폰에서는 홈 화면에 추가한 뒤 연 PWA에서만 웹 푸시를 사용할 수 있습니다.</Text>
+              ) : null}
+              {clientNotificationPermission === 'denied' ? (
+                <Text type="warning">브라우저 또는 기기 설정에서 이 사이트의 알림 권한을 허용한 뒤 다시 시도해 주세요.</Text>
+              ) : null}
+              {clientNotificationPermission === 'unsupported' ? (
+                <Text type="warning">현재 환경에서는 Web Push 알림 등록을 지원하지 않습니다.</Text>
+              ) : null}
+              {!hasSecureOrigin() ? (
+                <Text type="warning">알림은 HTTPS 또는 localhost 환경에서만 사용할 수 있습니다.</Text>
+              ) : null}
+              {renderFeedback(notificationFeedback, notificationCopyFeedback, setNotificationCopyFeedback)}
+              <Checkbox
+                checked={notificationEnabled}
+                disabled={notificationLoading}
+                onChange={(event) => {
+                  void syncNotificationEnabled(event.target.checked);
+                }}
+              >
+                알림 사용
+              </Checkbox>
+              <Space direction="vertical" size={6} style={{ width: '100%' }}>
+                <Text strong>PWA 토큰 등록</Text>
+                <Text type="secondary">
+                  PWA에서 전달받은 알림 토큰은 권한 토큰과 별도로 등록합니다.
+                </Text>
+                <Text type="secondary">PWA 토큰 상태: {registeredPwaNotificationToken ? '등록됨' : '미등록'}</Text>
+                <Input.TextArea
+                  value={pwaNotificationTokenInput}
+                  placeholder="PWA에서 받은 알림 토큰 입력"
+                  autoSize={{ minRows: 2, maxRows: 4 }}
+                  onChange={(event) => {
+                    setPwaNotificationTokenInput(event.target.value);
+                  }}
+                />
+                {renderFeedback(
+                  pwaNotificationTokenFeedback,
+                  pwaNotificationTokenCopyFeedback,
+                  setPwaNotificationTokenCopyFeedback,
+                )}
+                <Space wrap>
+                  <Button
+                    type="primary"
+                    loading={pwaNotificationTokenSaving}
+                    onClick={() => {
+                      void handleRegisterPwaNotificationToken();
+                    }}
+                  >
+                    PWA 토큰 등록
+                  </Button>
+                  <Button
+                    disabled={pwaNotificationTokenSaving || !registeredPwaNotificationToken}
+                    onClick={() => {
+                      void handleClearPwaNotificationToken();
+                    }}
+                  >
+                    PWA 토큰 제거
+                  </Button>
+                </Space>
+              </Space>
+            </Space>
+          ) : null}
+          {activeSettingsModal === 'token' ? (
+            <Space direction="vertical" size={6} style={{ width: '100%' }}>
+              <Text strong>토큰 관리</Text>
+              <Text type="secondary">
+                관리자에게 전달받은 권한 토큰을 등록한 사용자만 Codex 채팅과 새 메모 등록을 사용할 수 있습니다.
+              </Text>
+              <Text type="secondary">권한 상태: {hasAccess ? '허용됨' : '차단됨'}</Text>
+              <Input.Password
+                value={tokenInput}
+                placeholder="권한 토큰 입력"
+                onChange={(event) => {
+                  setTokenInput(event.target.value);
+                }}
+              />
+              {tokenFeedback ? <Alert showIcon type={tokenFeedback.tone} message={tokenFeedback.message} /> : null}
+              <Space wrap>
+                <Button type="primary" onClick={handleRegisterToken}>
+                  토큰 등록
+                </Button>
+                <Button onClick={handleClearToken} disabled={!registeredToken}>
+                  토큰 제거
+                </Button>
+              </Space>
+            </Space>
+          ) : null}
+          {activeSettingsModal === 'update' ? (
+            <Space direction="vertical" size={6} style={{ width: '100%' }}>
+              <Text strong>앱 업데이트</Text>
+              <Text type="secondary">앱 업데이트 상태: {appUpdateSupported ? getAppUpdateStatusLabel(appUpdateStatus) : '미지원'}</Text>
+              {import.meta.env.DEV ? (
+                <Text type="secondary">
+                  개발 모드에서는 실시간 반영 대신 변경 감지 후 수동 업데이트 버튼으로 화면에 반영합니다.
+                </Text>
+              ) : null}
+              {renderFeedback(appUpdateFeedback, appUpdateCopyFeedback, setAppUpdateCopyFeedback)}
+              {appUpdateStatus === 'updating' ? (
+                <div className="app-header__update-progress" role="status" aria-live="polite">
+                  <div className="app-header__update-progress-copy">
+                    <Text strong>업데이트 적용 중</Text>
+                    <Text type="secondary">
+                      {appUpdateCurrentTaskLabel ?? '새 버전을 내려받고 적용하는 중입니다. 잠시만 기다려 주세요.'}
+                    </Text>
+                  </div>
+                  <div className="app-header__update-progress-task">
+                    <Text type="secondary">진행 작업</Text>
+                    <Text>{appUpdateCurrentTaskLabel ?? '새 버전 반영 준비'}</Text>
+                  </div>
+                  <Progress
+                    percent={appUpdateProgressPercent ?? 0}
+                    size="small"
+                    showInfo={false}
+                    status="active"
+                    strokeColor="#2563eb"
+                    trailColor="rgba(37, 99, 235, 0.12)"
+                  />
+                </div>
+              ) : null}
+              <Button
+                block
+                icon={appUpdateStatus === 'updating' ? <ReloadOutlined spin /> : <DownloadOutlined />}
+                disabled={!canApplyAppUpdate && appUpdateStatus !== 'updating'}
+                onClick={() => {
+                  void handleApplyAppUpdate();
+                }}
+              >
+                {appUpdateStatus === 'updating'
+                  ? '업데이트 진행 중'
+                  : appUpdateStatus === 'ready'
+                    ? '적용할 앱 업데이트 없음'
+                  : import.meta.env.DEV
+                    ? '개발 변경 반영'
+                    : '앱 업데이트 적용'}
+              </Button>
+              <Text strong style={{ marginTop: 8 }}>
+                Work 서버 업데이트
+              </Text>
+              <Text type="secondary">
+                상태: {getWorkServerUpdateStatusLabel(workServerStatus)}
+              </Text>
+              <Text type="secondary">
+                실행 중 빌드: {formatDateTimeLabel(workServerStatus?.runningBuiltAt ?? null)}
+              </Text>
+              <Text type="secondary">
+                최신 빌드: {formatDateTimeLabel(workServerStatus?.latestBuiltAt ?? null)}
+              </Text>
+              <Text type="secondary">
+                최근 소스 변경: {formatDateTimeLabel(workServerStatus?.latestSourceChangeAt ?? null)}
+              </Text>
+              {workServerStatus?.latestSourceChangePath ? (
+                <Text type="secondary">변경 기준 파일: {workServerStatus.latestSourceChangePath}</Text>
+              ) : null}
+              {!hasAccess ? (
+                <Text type="warning">워크서버 업데이트 확인과 적용은 권한 토큰 등록 후 사용할 수 있습니다.</Text>
+              ) : null}
+              {workServerStatus?.updateSummary ? <Text type="secondary">{workServerStatus.updateSummary}</Text> : null}
+              {renderFeedback(
+                workServerUpdateFeedback,
+                workServerUpdateCopyFeedback,
+                setWorkServerUpdateCopyFeedback,
+              )}
+              <Space direction={screens.xs ? 'vertical' : 'horizontal'} style={{ width: '100%' }}>
+                <Button
+                  block={screens.xs}
+                  icon={workServerStatusLoading ? <ReloadOutlined spin /> : <ReloadOutlined />}
+                  loading={workServerStatusLoading}
+                  onClick={() => {
+                    void refreshWorkServerStatus();
+                  }}
+                  disabled={!canRefreshWorkServerStatus}
+                >
+                  업데이트 확인
+                </Button>
+                <Button
+                  type="primary"
+                  block={screens.xs}
+                  icon={workServerRestarting ? <ReloadOutlined spin /> : <DownloadOutlined />}
+                  loading={workServerRestarting}
+                  onClick={() => {
+                    void handleApplyWorkServerUpdate();
+                  }}
+                  disabled={!canApplyWorkServerUpdate}
+                >
+                  {workServerRestarting
+                    ? '워크서버 재시작 중'
+                    : workServerStatusLoading
+                      ? '상태 확인 중'
+                      : workServerStatus == null
+                        ? 'Work 서버 상태 확인 후 적용'
+                        : workServerStatus.updateAvailable || workServerStatus.buildRequired
+                        ? 'Work 서버 업데이트 적용'
+                        : '적용할 Work 서버 업데이트 없음'}
+                </Button>
+              </Space>
+            </Space>
+          ) : null}
+        </Space>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/app/main/MainLayout.css b/src/app/main/MainLayout.css
new file mode 100755
index 0000000..2967456
--- /dev/null
+++ b/src/app/main/MainLayout.css
@@ -0,0 +1,727 @@
+.app-shell {
+  min-height: 100dvh;
+  width: 100%;
+  overflow-x: hidden;
+  background: transparent;
+}
+
+.app-shell:has(.app-chat-panel) {
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+}
+
+.app-shell:has(.app-chat-panel) > .ant-layout {
+  min-height: 0;
+  height: calc(100dvh - 60px);
+  overflow: hidden;
+}
+
+.app-shell--docs-api {
+  background:
+    radial-gradient(circle at top left, rgba(22, 93, 255, 0.12), transparent 26%),
+    linear-gradient(180deg, #f8fbff 0%, #eff5ff 45%, #ffffff 100%);
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  padding: 0 18px;
+  background: rgba(255, 255, 255, 0.82);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+  backdrop-filter: blur(18px);
+}
+
+.app-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+}
+
+.app-header__menu-side {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.app-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.app-header__row .ant-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+}
+
+.app-header__connection-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: visible;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #182230;
+  font: inherit;
+  cursor: pointer;
+}
+
+.app-header__connection-indicator:hover {
+  background: #f3f7ff;
+}
+
+.app-header__connection-indicator--connected {
+  border-color: rgba(22, 163, 74, 0.2);
+}
+
+.app-header__connection-indicator--connecting {
+  border-color: rgba(37, 99, 235, 0.24);
+  background: rgba(239, 246, 255, 0.92);
+}
+
+.app-header__connection-indicator--disconnected {
+  border-color: rgba(220, 38, 38, 0.22);
+  background: rgba(254, 242, 242, 0.92);
+}
+
+.app-header__connection-indicator--busy {
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
+}
+
+.app-header__connection-count-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  background: #2563eb;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24);
+}
+
+.app-header__connection-indicator--busy .app-header__connection-count-badge {
+  animation: app-header-connection-badge-pulse 1.8s ease-in-out infinite;
+}
+
+.app-header__connection-count-badge--connecting {
+  background: #2563eb;
+}
+
+.app-header__connection-count-badge--disconnected {
+  background: #dc2626;
+  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.22);
+}
+
+@keyframes app-header-connection-badge-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24);
+  }
+
+  50% {
+    transform: scale(1.08);
+    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
+  }
+}
+
+.app-header__settings-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 132px;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: 14px;
+  background: #ffffff;
+  color: #182230;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.app-header__settings-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-header__settings-item:hover {
+  background: #f3f7ff;
+}
+
+.app-header__settings-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+}
+
+.app-header__status-dot {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+}
+
+.app-header__status-dot--active {
+  background: #16a34a;
+}
+
+.app-header__status-dot--inactive {
+  background: #dc2626;
+}
+
+.app-header__status-dot--warning {
+  background: #f59e0b;
+}
+
+.app-header__status-dot--progress {
+  background: #2563eb;
+}
+
+.app-header__settings-label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.app-header__update-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  border: 1px solid rgba(37, 99, 235, 0.16);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 245, 255, 0.96)),
+    rgba(255, 255, 255, 0.96);
+}
+
+.app-header__update-progress-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.app-header__update-progress-task {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(37, 99, 235, 0.08);
+}
+
+.app-header__update-progress .ant-progress {
+  margin: 0;
+}
+
+.app-header__runtime-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.app-header__runtime-summary-card {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(239, 245, 255, 0.92));
+}
+
+.app-header__runtime-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-header__runtime-list-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.app-header__runtime-list-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.app-header__runtime-list-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.app-header__runtime-list-copy .ant-typography {
+  margin-bottom: 0;
+}
+
+.app-header__runtime-summary-text.ant-typography {
+  color: #475467;
+  font-size: 13px;
+}
+
+.app-header__runtime-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.app-header__runtime-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.app-header__menu-side .ant-segmented {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-sider.ant-layout-sider {
+  background: rgba(255, 255, 255, 0.72);
+  border-right: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.app-sider--mobile.ant-layout-sider {
+  position: fixed;
+  inset: 72px 0 0;
+  z-index: 40;
+  width: 100% !important;
+  max-width: 100%;
+  height: calc(100vh - 72px);
+  border-right: 0;
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.app-sider__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  padding: 12px 10px;
+}
+
+.app-sider__intro {
+  width: 100%;
+  padding: 0 4px;
+}
+
+.app-main-content.ant-layout-content {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: calc(100dvh - 60px);
+  width: 100%;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.app-main-content.ant-layout-content:has(.app-chat-panel) {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-main-content--expanded.ant-layout-content {
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.app-main-panel {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+}
+
+.app-main-panel--play {
+  min-height: 100%;
+}
+
+.app-main-panel--play > * {
+  min-width: 0;
+  min-height: 100%;
+  width: 100%;
+}
+
+.app-main-panel:has(.app-chat-panel) {
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+.app-main-layout:has(.app-chat-panel) {
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+.app-main-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
+  gap: 16px;
+  flex: 1;
+  min-height: 100%;
+  min-width: 0;
+  padding: 16px;
+  width: 100%;
+}
+
+@media (max-width: 720px) {
+  html,
+  body,
+  #root {
+    height: 100dvh;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .app-shell,
+  .app-main-content.ant-layout-content,
+  .app-main-panel,
+  .app-main-layout {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .app-shell,
+  .app-main-content.ant-layout-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .app-main-panel,
+  .app-main-layout {
+    overflow: visible;
+  }
+
+  .app-main-panel:has(.app-chat-panel),
+  .app-main-layout:has(.app-chat-panel) {
+    overflow: hidden;
+  }
+
+  .app-header {
+    padding-inline: 8px;
+  }
+
+  .app-header__row {
+    gap: 8px;
+  }
+
+  .app-header__actions {
+    gap: 4px;
+  }
+
+  .app-main-layout {
+    gap: 0;
+    padding: 0;
+  }
+}
+
+.app-main-layout > * {
+  min-width: 0;
+}
+
+.app-main-layout--single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.app-main-content--expanded .app-main-panel,
+.app-main-content--expanded .app-main-card {
+  min-height: 100%;
+}
+
+.app-main-content__restore.ant-btn {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 30;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  backdrop-filter: blur(16px);
+}
+
+.app-main-card {
+  border-radius: 20px;
+  width: 100%;
+}
+
+.app-main-card.ant-card,
+.app-chat-panel.ant-card {
+  border: 0;
+  box-shadow: none;
+}
+
+.app-main-card.ant-card {
+  min-height: 100%;
+}
+
+.app-main-card.ant-card {
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.app-main-card.ant-card .ant-card-head {
+  min-height: auto;
+  padding: 16px 20px 0;
+  border-bottom: 0;
+}
+
+.app-main-card.ant-card .ant-card-body {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  min-width: 0;
+  padding: 12px 20px 20px;
+}
+
+.app-main-copy.ant-typography {
+  margin-bottom: 20px;
+}
+
+.app-main-window-layer {
+  position: absolute;
+  inset: 16px;
+  z-index: 25;
+  pointer-events: none;
+}
+
+.app-main-window-layer__stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: calc(100dvh - 92px);
+  overflow: hidden;
+  border-radius: 24px;
+}
+
+.app-main-window-layer__window {
+  pointer-events: auto;
+}
+
+.app-main-window-layer__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  min-height: 100%;
+  padding: 0 !important;
+  overflow: auto;
+}
+
+.app-main-window-layer__fallback {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.app-main-window-layer__sample {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.app-main-window-layer__sample > * {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.app-main-window-layer__sample--intrinsic {
+  display: block;
+  flex: 0 0 auto;
+  overflow: visible;
+  padding: 20px;
+}
+
+.app-main-window-layer__sample--intrinsic > * {
+  flex: 0 0 auto;
+  min-height: auto;
+}
+
+.app-main-window-layer__sample--fill {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.app-main-window-layer__sample--fill > * {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.app-main-window-layer__keywords {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.app-main-stack {
+  width: 100%;
+  min-width: 0;
+}
+
+@media (max-width: 1080px) {
+  .app-main-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 1180px) {
+  .app-main-panel:has(.app-chat-panel) {
+    height: calc(100dvh - 60px);
+    min-height: calc(100dvh - 60px);
+    overflow: hidden;
+  }
+
+  .app-main-layout:has(.app-chat-panel) {
+    height: calc(100dvh - 60px);
+    min-height: calc(100dvh - 60px);
+    padding: 0;
+    gap: 0;
+    overflow: hidden;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-shell:has(.app-chat-panel) > .ant-layout {
+    height: calc(100dvh - 52px);
+  }
+
+  .app-header {
+    padding: 6px 10px;
+    height: 52px;
+  }
+
+  .app-header__row {
+    gap: 8px;
+  }
+
+  .app-header__menu-side {
+    gap: 8px;
+  }
+
+  .app-header__row .ant-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  .app-header__runtime-summary {
+    gap: 8px;
+  }
+
+  .app-sider.ant-layout-sider {
+    position: static;
+  }
+
+  .app-sider--mobile.ant-layout-sider {
+    position: fixed;
+    inset: 52px 0 0;
+    height: calc(100vh - 52px);
+  }
+
+  .app-main-content.ant-layout-content {
+    padding: 0;
+    min-height: calc(100dvh - 52px);
+  }
+
+  .app-main-layout {
+    min-height: calc(100dvh - 52px);
+    padding: 8px;
+    gap: 8px;
+  }
+
+  .app-main-window-layer {
+    inset: 8px;
+  }
+
+  .app-main-window-layer__stage {
+    min-height: calc(100dvh - 68px);
+    border-radius: 18px;
+  }
+
+  .app-main-card {
+    border-radius: 16px;
+  }
+
+  .app-main-card.ant-card {
+    background: rgba(255, 255, 255, 0.82);
+  }
+
+  .app-main-card.ant-card .ant-card-head {
+    padding: 14px 16px 0;
+  }
+
+  .app-main-card.ant-card .ant-card-head-title {
+    white-space: normal;
+  }
+
+  .app-main-card.ant-card .ant-card-body {
+    padding: 10px 16px 16px;
+  }
+
+  .app-main-panel:has(.app-chat-panel) {
+    height: calc(100dvh - 76px);
+    min-height: calc(100dvh - 76px);
+  }
+}
diff --git a/src/app/main/MainSidebar.tsx b/src/app/main/MainSidebar.tsx
new file mode 100755
index 0000000..5883b0c
--- /dev/null
+++ b/src/app/main/MainSidebar.tsx
@@ -0,0 +1,119 @@
+import { Layout, Menu, Space, Tag, Typography } from 'antd';
+import type { MainSidebarProps } from './types';
+
+const { Sider } = Layout;
+const { Text } = Typography;
+
+export function MainSidebar({
+  activeTopMenu,
+  hasAccess,
+  sidebarCollapsed,
+  isMobileViewport,
+  openKeys: controlledOpenKeys,
+  apiMenuItems,
+  docsMenuItems,
+  planMenuItems,
+  chatMenuItems,
+  playMenuItems,
+  selectedApiMenu,
+  selectedDocsMenu,
+  selectedPlanMenu,
+  selectedChatMenu,
+  selectedPlayMenu,
+  introColor,
+  introTag,
+  introDescription,
+  onOpenKeysChange,
+  onSelectApiMenu,
+  onSelectDocsMenu,
+  onSelectPlanMenu,
+  onSelectChatMenu,
+  onSelectPlayMenu,
+}: MainSidebarProps) {
+  const effectiveTopMenu = !hasAccess ? 'docs' : activeTopMenu;
+  const isDocsGroup = effectiveTopMenu === 'docs' || effectiveTopMenu === 'apis';
+  const visibleOpenKeys = sidebarCollapsed
+    ? []
+    : controlledOpenKeys.length
+      ? controlledOpenKeys
+      : isDocsGroup
+        ? !hasAccess
+          ? ['docs-group']
+          : ['docs-group', 'api-group']
+        : effectiveTopMenu === 'play'
+          ? ['play-group', 'play-layout-group']
+          : ['plan-group', 'codex-live-group', 'app-log-group', 'chat-manage-group'];
+  const selectedKeys =
+    effectiveTopMenu === 'docs'
+      ? [selectedDocsMenu]
+      : effectiveTopMenu === 'apis'
+        ? [selectedApiMenu]
+        : effectiveTopMenu === 'plans'
+          ? [selectedPlanMenu]
+          : effectiveTopMenu === 'play'
+            ? [selectedPlayMenu]
+            : [selectedChatMenu];
+  const sidebarItems =
+    isDocsGroup
+      ? !hasAccess
+        ? [...(docsMenuItems ?? [])]
+        : [...(docsMenuItems ?? []), ...(apiMenuItems ?? [])]
+      : effectiveTopMenu === 'play'
+        ? [...(playMenuItems ?? [])]
+        : [...(planMenuItems ?? []), ...(chatMenuItems ?? [])];
+
+  return (
+    <Sider
+      width={isMobileViewport ? '100%' : 260}
+      collapsed={sidebarCollapsed}
+      collapsedWidth={isMobileViewport ? 0 : 72}
+      className={isMobileViewport ? 'app-sider app-sider--mobile' : 'app-sider'}
+      theme="light"
+    >
+      <div className="app-sider__inner">
+        <Space direction="vertical" size={8} className="app-sider__intro">
+          <Tag color={introColor}>{introTag}</Tag>
+          {!sidebarCollapsed ? (
+            <Text type="secondary">{introDescription}</Text>
+          ) : null}
+        </Space>
+
+        <Menu
+          mode="inline"
+          inlineCollapsed={sidebarCollapsed}
+          selectedKeys={selectedKeys}
+          openKeys={visibleOpenKeys}
+          items={sidebarItems}
+          onOpenChange={(keys) => {
+            onOpenKeysChange(keys as string[]);
+          }}
+          onClick={({ key, keyPath }) => {
+            if (keyPath.includes('docs-group')) {
+              onSelectDocsMenu(key);
+              return;
+            }
+
+            if (keyPath.includes('api-group')) {
+              onSelectApiMenu(key as MainSidebarProps['selectedApiMenu']);
+              return;
+            }
+
+            if (keyPath.includes('plan-group') || keyPath.includes('server-group')) {
+              onSelectPlanMenu(key as MainSidebarProps['selectedPlanMenu']);
+              return;
+            }
+
+            if (keyPath.includes('codex-live-group') || keyPath.includes('app-log-group') || keyPath.includes('chat-manage-group')) {
+              onSelectChatMenu(key as MainSidebarProps['selectedChatMenu']);
+              return;
+            }
+
+            if (keyPath.includes('play-group') || keyPath.includes('play-layout-group')) {
+              onSelectPlayMenu(key as MainSidebarProps['selectedPlayMenu']);
+            }
+          }}
+        />
+      </div>
+    </Sider>
+  );
+}
diff --git a/src/app/main/MainView.tsx b/src/app/main/MainView.tsx
new file mode 100755
index 0000000..2b8ff3c
--- /dev/null
+++ b/src/app/main/MainView.tsx
@@ -0,0 +1,5 @@
+import { AppShell } from './AppShell';
+
+export function MainView() {
+  return <AppShell />;
+}
diff --git a/src/app/main/ReleasePendingMainModal.tsx b/src/app/main/ReleasePendingMainModal.tsx
new file mode 100755
index 0000000..06cb8f4
--- /dev/null
+++ b/src/app/main/ReleasePendingMainModal.tsx
@@ -0,0 +1,173 @@
+import { Button, List, Modal, Space, Tag, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { fetchPlanItems } from '../../features/planBoard/api';
+import { isReleasePendingMainItem, normalizeWorkerStatus } from '../../features/planBoard/quickFilters';
+import type { PlanItem } from '../../features/planBoard/types';
+
+const { Paragraph, Text, Title } = Typography;
+
+const RELEASE_PENDING_MAIN_MODAL_SESSION_KEY = 'work-server.release-pending-main-modal:dismissed';
+type PendingMainItem = Pick<PlanItem, 'id' | 'workId' | 'note' | 'status' | 'workerStatus' | 'updatedAt'>;
+
+function isReleaseServer() {
+  if (import.meta.env.VITE_RELEASE_SERVER === 'true') {
+    return true;
+  }
+
+  const explicitStage = (import.meta.env.VITE_DEPLOY_STAGE ?? import.meta.env.VITE_APP_STAGE ?? '').trim().toLowerCase();
+  if (explicitStage === 'release') {
+    return true;
+  }
+
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.location.hostname.toLowerCase().includes('release');
+}
+
+function summarizeNote(note: string) {
+  const normalized = note.replace(/\s+/g, ' ').trim();
+
+  if (!normalized) {
+    return '요약 메모가 없습니다.';
+  }
+
+  if (normalized.length <= 72) {
+    return normalized;
+  }
+
+  return `${normalized.slice(0, 72)}...`;
+}
+
+function describePendingReason(item: PendingMainItem) {
+  const normalizedWorkerStatus = normalizeWorkerStatus(item.workerStatus);
+
+  if (normalizedWorkerStatus === 'main반영중') {
+    return 'release 반영 후 main 병합을 진행 중입니다.';
+  }
+
+  if (normalizedWorkerStatus === 'main반영실패') {
+    return 'main 반영 단계에서 실패했습니다. 재시도가 필요합니다.';
+  }
+
+  if (normalizedWorkerStatus === 'main반영대기') {
+    return 'release 반영은 끝났고 main 반영 순서를 기다리는 중입니다.';
+  }
+
+  return 'release 반영은 완료됐지만 main에는 아직 적용되지 않았습니다.';
+}
+
+function formatUpdatedAt(value: string) {
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: 'Asia/Seoul',
+  });
+}
+
+export function ReleasePendingMainModal() {
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState<PendingMainItem[]>([]);
+
+  useEffect(() => {
+    if (!isReleaseServer() || typeof window === 'undefined') {
+      return;
+    }
+
+    if (window.sessionStorage.getItem(RELEASE_PENDING_MAIN_MODAL_SESSION_KEY) === 'true') {
+      return;
+    }
+
+    let cancelled = false;
+
+    void fetchPlanItems('all')
+      .then((planItems) => {
+        if (cancelled) {
+          return;
+        }
+
+        const nextItems = planItems
+          .filter(isReleasePendingMainItem)
+          .sort((left, right) => new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime())
+          .slice(0, 12)
+          .map((item) => ({
+            id: item.id,
+            workId: item.workId,
+            note: item.note,
+            status: item.status,
+            workerStatus: item.workerStatus,
+            updatedAt: item.updatedAt,
+          }));
+
+        if (nextItems.length === 0) {
+          window.sessionStorage.setItem(RELEASE_PENDING_MAIN_MODAL_SESSION_KEY, 'true');
+          return;
+        }
+
+        setItems(nextItems);
+        setOpen(true);
+      })
+      .catch(() => {
+        // Keep startup resilient even when the plan API is temporarily unavailable.
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const title = useMemo(() => `main 미반영 항목 ${items.length}건`, [items.length]);
+
+  const handleClose = () => {
+    if (typeof window !== 'undefined') {
+      window.sessionStorage.setItem(RELEASE_PENDING_MAIN_MODAL_SESSION_KEY, 'true');
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={handleClose}
+      title={title}
+      width={720}
+      destroyOnClose
+      rootClassName="release-pending-main-modal"
+      footer={[
+        <Button key="confirm" type="primary" onClick={handleClose}>
+          확인
+        </Button>,
+      ]}
+    >
+      <Space direction="vertical" size={16} className="release-pending-main-modal__body">
+        <div>
+          <Title level={5} className="release-pending-main-modal__title">
+            release 서버 기준으로 main에 아직 반영되지 않은 작업입니다.
+          </Title>
+          <Paragraph type="secondary" className="release-pending-main-modal__copy">
+            최신 반영 순서대로 최대 12건까지 표시합니다.
+          </Paragraph>
+        </div>
+        <List
+          dataSource={items}
+          className="release-pending-main-modal__list"
+          renderItem={(item) => (
+            <List.Item className="release-pending-main-modal__item">
+              <Space direction="vertical" size={8} className="release-pending-main-modal__item-body">
+                <Space size={[8, 8]} wrap>
+                  <Text strong>{item.workId.trim() || `#${item.id}`}</Text>
+                  <Tag color={item.workerStatus === 'main반영실패' ? 'error' : 'gold'}>
+                    {item.workerStatus ?? item.status}
+                  </Tag>
+                  <Text type="secondary">{formatUpdatedAt(item.updatedAt)}</Text>
+                </Space>
+                <Text className="release-pending-main-modal__summary">{summarizeNote(item.note)}</Text>
+                <Text type="secondary">{describePendingReason(item)}</Text>
+              </Space>
+            </List.Item>
+          )}
+        />
+      </Space>
+    </Modal>
+  );
+}
diff --git a/src/app/main/appConfig.ts b/src/app/main/appConfig.ts
new file mode 100755
index 0000000..d0f0720
--- /dev/null
+++ b/src/app/main/appConfig.ts
@@ -0,0 +1,654 @@
+import { useSyncExternalStore } from 'react';
+import { appendClientIdHeader } from './clientIdentity';
+import { getAutomationNotificationPreferenceTarget } from './notificationIdentity';
+
+const APP_CONFIG_STORAGE_KEY = 'work-server.app-config';
+const APP_CONFIG_EVENT = 'work-server:app-config';
+const APP_CONFIG_API_PATH = '/app-config';
+const AUTOMATION_NOTIFICATION_PREFERENCE_API_PATH = '/notifications/preferences/automation';
+const APP_CONFIG_REQUEST_TIMEOUT_MS = 8000;
+let cachedConfig: AppConfig | null = null;
+let cachedRawConfig: string | null = null;
+
+export type AutomationScheduleType = 'interval' | 'daily' | 'weekly';
+export type WeeklyScheduleDay = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+export type PlanCostTimeUnit = 'hour' | 'minute' | 'second';
+
+export type AppConfig = {
+  chat: {
+    maxContextMessages: number;
+    maxContextChars: number;
+  };
+  automation: {
+    autoRefreshEnabled: boolean;
+    autoRefreshIntervalSeconds: number;
+    autoReceiveScheduleType: AutomationScheduleType;
+    autoReceiveIntervalSeconds: number;
+    autoReceiveDailyTime: string;
+    autoReceiveWeeklyDay: WeeklyScheduleDay;
+    autoReceiveWeeklyTime: string;
+    notifyOnAutomationStart: boolean;
+    notifyOnAutomationProgress: boolean;
+    notifyOnAutomationCompletion: boolean;
+    notifyOnAutomationRelease: boolean;
+    notifyOnAutomationMain: boolean;
+    notifyOnAutomationFailure: boolean;
+    notifyOnAutomationRestart: boolean;
+    notifyOnAutomationIssueResolved: boolean;
+  };
+  worklogAutomation: {
+    autoCreateDailyWorklog: boolean;
+    dailyCreateTime: string;
+    repeatRequestEnabled: boolean;
+    repeatIntervalMinutes: number;
+    includeScreenshots: boolean;
+    includeChangedFiles: boolean;
+    includeCommandLogs: boolean;
+    template: 'simple' | 'detailed';
+  };
+  planDefaults: {
+    jangsingProcessingRequired: boolean;
+    autoDeployToMain: boolean;
+    openEditorAfterCreate: boolean;
+  };
+  planCost: {
+    baseCostPerMillionTokens: number;
+    retryCostMultiplierPercent: number;
+    hourlyCostMultiplierPercent: number;
+    timeCostUnit: PlanCostTimeUnit;
+    attentionCostThresholdMultiplier: number;
+    warningCostThresholdMultiplier: number;
+    highCostThresholdMultiplier: number;
+  };
+  gestureShortcuts: {
+    openSearch: string;
+    openWindowSearch: string;
+  };
+};
+
+export const DEFAULT_APP_CONFIG: AppConfig = {
+  chat: {
+    maxContextMessages: 12,
+    maxContextChars: 3200,
+  },
+  automation: {
+    autoRefreshEnabled: true,
+    autoRefreshIntervalSeconds: 5,
+    autoReceiveScheduleType: 'interval',
+    autoReceiveIntervalSeconds: 30,
+    autoReceiveDailyTime: '09:00',
+    autoReceiveWeeklyDay: 'mon',
+    autoReceiveWeeklyTime: '09:00',
+    notifyOnAutomationStart: true,
+    notifyOnAutomationProgress: true,
+    notifyOnAutomationCompletion: true,
+    notifyOnAutomationRelease: true,
+    notifyOnAutomationMain: true,
+    notifyOnAutomationFailure: true,
+    notifyOnAutomationRestart: true,
+    notifyOnAutomationIssueResolved: true,
+  },
+  worklogAutomation: {
+    autoCreateDailyWorklog: false,
+    dailyCreateTime: '18:00',
+    repeatRequestEnabled: false,
+    repeatIntervalMinutes: 60,
+    includeScreenshots: true,
+    includeChangedFiles: true,
+    includeCommandLogs: true,
+    template: 'detailed',
+  },
+  planDefaults: {
+    jangsingProcessingRequired: true,
+    autoDeployToMain: true,
+    openEditorAfterCreate: true,
+  },
+  planCost: {
+    baseCostPerMillionTokens: 10000,
+    retryCostMultiplierPercent: 15,
+    hourlyCostMultiplierPercent: 0,
+    timeCostUnit: 'hour',
+    attentionCostThresholdMultiplier: 1,
+    warningCostThresholdMultiplier: 2,
+    highCostThresholdMultiplier: 4,
+  },
+  gestureShortcuts: {
+    openSearch: 'Mod+K',
+    openWindowSearch: 'Mod+Shift+K',
+  },
+};
+
+const WEEKLY_DAY_LABELS: Record<WeeklyScheduleDay, string> = {
+  mon: '월요일',
+  tue: '화요일',
+  wed: '수요일',
+  thu: '목요일',
+  fri: '금요일',
+  sat: '토요일',
+  sun: '일요일',
+};
+
+const AUTOMATION_NOTIFICATION_KEYS = [
+  'notifyOnAutomationStart',
+  'notifyOnAutomationProgress',
+  'notifyOnAutomationCompletion',
+  'notifyOnAutomationRelease',
+  'notifyOnAutomationMain',
+  'notifyOnAutomationFailure',
+  'notifyOnAutomationRestart',
+  'notifyOnAutomationIssueResolved',
+] as const;
+
+type AutomationNotificationSettings = Pick<AppConfig['automation'], (typeof AUTOMATION_NOTIFICATION_KEYS)[number]>;
+
+function clampIntervalSeconds(value: number, fallback: number) {
+  if (!Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.min(3600, Math.max(1, Math.round(value)));
+}
+
+function normalizeTimeValue(value: string, fallback: string) {
+  if (/^\d{2}:\d{2}$/.test(value)) {
+    return value;
+  }
+
+  return fallback;
+}
+
+function normalizeScheduleType(value: string | undefined): AutomationScheduleType {
+  if (value === 'daily' || value === 'weekly') {
+    return value;
+  }
+
+  return 'interval';
+}
+
+function normalizeWeeklyDay(value: string | undefined): WeeklyScheduleDay {
+  if (value && value in WEEKLY_DAY_LABELS) {
+    return value as WeeklyScheduleDay;
+  }
+
+  return DEFAULT_APP_CONFIG.automation.autoReceiveWeeklyDay;
+}
+
+function normalizeWorklogTemplate(value: string | undefined): AppConfig['worklogAutomation']['template'] {
+  if (value === 'simple') {
+    return 'simple';
+  }
+
+  return 'detailed';
+}
+
+function normalizeShortcutValue(value: string | undefined, fallback: string) {
+  const trimmed = value?.trim();
+
+  if (!trimmed) {
+    return fallback;
+  }
+
+  return trimmed
+    .split('+')
+    .map((token) => token.trim())
+    .filter(Boolean)
+    .join('+');
+}
+
+function normalizePlanCostValue(value: number | undefined, fallback: number) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.min(1_000_000, Math.max(100, Math.round(value)));
+}
+
+function normalizePlanCostMultiplierValue(value: number | undefined, fallback: number) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.min(100, Math.max(0.1, Math.round(value * 10) / 10));
+}
+
+function normalizePlanCostPercentValue(value: number | undefined, fallback: number) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.min(500, Math.max(0, Math.round(value)));
+}
+
+function normalizePlanCostTimeUnit(value: string | undefined): PlanCostTimeUnit {
+  if (value === 'minute' || value === 'second') {
+    return value;
+  }
+
+  return 'hour';
+}
+
+function normalizeChatContextMessageLimit(value: number | undefined, fallback: number) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.min(50, Math.max(1, Math.round(value)));
+}
+
+function normalizeChatContextCharLimit(value: number | undefined, fallback: number) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.min(20_000, Math.max(500, Math.round(value)));
+}
+
+function normalizeConfig(raw?: Partial<AppConfig>): AppConfig {
+  const chat = raw?.chat;
+  const automation = raw?.automation;
+  const worklogAutomation = raw?.worklogAutomation;
+  const planDefaults = raw?.planDefaults;
+  const planCost = raw?.planCost;
+  const gestureShortcuts = raw?.gestureShortcuts;
+
+  return {
+    chat: {
+      maxContextMessages: normalizeChatContextMessageLimit(
+        chat?.maxContextMessages,
+        DEFAULT_APP_CONFIG.chat.maxContextMessages,
+      ),
+      maxContextChars: normalizeChatContextCharLimit(chat?.maxContextChars, DEFAULT_APP_CONFIG.chat.maxContextChars),
+    },
+    automation: {
+      autoRefreshEnabled: automation?.autoRefreshEnabled ?? DEFAULT_APP_CONFIG.automation.autoRefreshEnabled,
+      autoRefreshIntervalSeconds: clampIntervalSeconds(
+        automation?.autoRefreshIntervalSeconds ?? DEFAULT_APP_CONFIG.automation.autoRefreshIntervalSeconds,
+        DEFAULT_APP_CONFIG.automation.autoRefreshIntervalSeconds,
+      ),
+      autoReceiveScheduleType: normalizeScheduleType(automation?.autoReceiveScheduleType),
+      autoReceiveIntervalSeconds: clampIntervalSeconds(
+        automation?.autoReceiveIntervalSeconds ?? DEFAULT_APP_CONFIG.automation.autoReceiveIntervalSeconds,
+        DEFAULT_APP_CONFIG.automation.autoReceiveIntervalSeconds,
+      ),
+      autoReceiveDailyTime: normalizeTimeValue(
+        automation?.autoReceiveDailyTime ?? DEFAULT_APP_CONFIG.automation.autoReceiveDailyTime,
+        DEFAULT_APP_CONFIG.automation.autoReceiveDailyTime,
+      ),
+      autoReceiveWeeklyDay: normalizeWeeklyDay(automation?.autoReceiveWeeklyDay),
+      autoReceiveWeeklyTime: normalizeTimeValue(
+        automation?.autoReceiveWeeklyTime ?? DEFAULT_APP_CONFIG.automation.autoReceiveWeeklyTime,
+        DEFAULT_APP_CONFIG.automation.autoReceiveWeeklyTime,
+      ),
+      notifyOnAutomationStart: automation?.notifyOnAutomationStart ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationStart,
+      notifyOnAutomationProgress:
+        automation?.notifyOnAutomationProgress ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationProgress,
+      notifyOnAutomationCompletion:
+        automation?.notifyOnAutomationCompletion ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationCompletion,
+      notifyOnAutomationRelease:
+        automation?.notifyOnAutomationRelease ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationRelease,
+      notifyOnAutomationMain: automation?.notifyOnAutomationMain ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationMain,
+      notifyOnAutomationFailure:
+        automation?.notifyOnAutomationFailure ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationFailure,
+      notifyOnAutomationRestart:
+        automation?.notifyOnAutomationRestart ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationRestart,
+      notifyOnAutomationIssueResolved:
+        automation?.notifyOnAutomationIssueResolved ?? DEFAULT_APP_CONFIG.automation.notifyOnAutomationIssueResolved,
+    },
+    worklogAutomation: {
+      autoCreateDailyWorklog:
+        worklogAutomation?.autoCreateDailyWorklog ?? DEFAULT_APP_CONFIG.worklogAutomation.autoCreateDailyWorklog,
+      dailyCreateTime: normalizeTimeValue(
+        worklogAutomation?.dailyCreateTime ?? DEFAULT_APP_CONFIG.worklogAutomation.dailyCreateTime,
+        DEFAULT_APP_CONFIG.worklogAutomation.dailyCreateTime,
+      ),
+      repeatRequestEnabled: false,
+      repeatIntervalMinutes: DEFAULT_APP_CONFIG.worklogAutomation.repeatIntervalMinutes,
+      includeScreenshots:
+        worklogAutomation?.includeScreenshots ?? DEFAULT_APP_CONFIG.worklogAutomation.includeScreenshots,
+      includeChangedFiles:
+        worklogAutomation?.includeChangedFiles ?? DEFAULT_APP_CONFIG.worklogAutomation.includeChangedFiles,
+      includeCommandLogs:
+        worklogAutomation?.includeCommandLogs ?? DEFAULT_APP_CONFIG.worklogAutomation.includeCommandLogs,
+      template: normalizeWorklogTemplate(worklogAutomation?.template),
+    },
+    planDefaults: {
+      jangsingProcessingRequired:
+        planDefaults?.jangsingProcessingRequired ?? DEFAULT_APP_CONFIG.planDefaults.jangsingProcessingRequired,
+      autoDeployToMain: planDefaults?.autoDeployToMain ?? DEFAULT_APP_CONFIG.planDefaults.autoDeployToMain,
+      openEditorAfterCreate: planDefaults?.openEditorAfterCreate ?? DEFAULT_APP_CONFIG.planDefaults.openEditorAfterCreate,
+    },
+    planCost: {
+      baseCostPerMillionTokens: normalizePlanCostValue(
+        planCost?.baseCostPerMillionTokens,
+        DEFAULT_APP_CONFIG.planCost.baseCostPerMillionTokens,
+      ),
+      retryCostMultiplierPercent: normalizePlanCostPercentValue(
+        planCost?.retryCostMultiplierPercent,
+        DEFAULT_APP_CONFIG.planCost.retryCostMultiplierPercent,
+      ),
+      hourlyCostMultiplierPercent: normalizePlanCostPercentValue(
+        planCost?.hourlyCostMultiplierPercent,
+        DEFAULT_APP_CONFIG.planCost.hourlyCostMultiplierPercent,
+      ),
+      timeCostUnit: normalizePlanCostTimeUnit(planCost?.timeCostUnit),
+      attentionCostThresholdMultiplier: normalizePlanCostMultiplierValue(
+        planCost?.attentionCostThresholdMultiplier,
+        DEFAULT_APP_CONFIG.planCost.attentionCostThresholdMultiplier,
+      ),
+      warningCostThresholdMultiplier: normalizePlanCostMultiplierValue(
+        planCost?.warningCostThresholdMultiplier,
+        DEFAULT_APP_CONFIG.planCost.warningCostThresholdMultiplier,
+      ),
+      highCostThresholdMultiplier: normalizePlanCostMultiplierValue(
+        planCost?.highCostThresholdMultiplier,
+        DEFAULT_APP_CONFIG.planCost.highCostThresholdMultiplier,
+      ),
+    },
+    gestureShortcuts: {
+      openSearch: normalizeShortcutValue(
+        gestureShortcuts?.openSearch,
+        DEFAULT_APP_CONFIG.gestureShortcuts.openSearch,
+      ),
+      openWindowSearch: normalizeShortcutValue(
+        gestureShortcuts?.openWindowSearch,
+        DEFAULT_APP_CONFIG.gestureShortcuts.openWindowSearch,
+      ),
+    },
+  };
+}
+
+function pickAutomationNotificationSettings(automation: AppConfig['automation']): AutomationNotificationSettings {
+  return AUTOMATION_NOTIFICATION_KEYS.reduce((picked, key) => {
+    picked[key] = automation[key];
+    return picked;
+  }, {} as AutomationNotificationSettings);
+}
+
+function mergeAutomationNotificationSettings(
+  config: AppConfig,
+  automation?: Partial<AutomationNotificationSettings> | null,
+) {
+  if (!automation) {
+    return config;
+  }
+
+  return normalizeConfig({
+    ...config,
+    automation: {
+      ...config.automation,
+      ...automation,
+    },
+  });
+}
+
+function emitConfigChange() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.dispatchEvent(new Event(APP_CONFIG_EVENT));
+}
+
+function resolveAppConfigApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function resolveAppConfigFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const APP_CONFIG_API_BASE_URL = resolveAppConfigApiBaseUrl();
+const APP_CONFIG_FALLBACK_BASE_URL = resolveAppConfigFallbackBaseUrl();
+
+class AppConfigApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'AppConfigApiError';
+    this.status = status;
+  }
+}
+
+async function requestAppConfigOnce<T>(baseUrl: string, path: string, init?: RequestInit): Promise<T> {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), APP_CONFIG_REQUEST_TIMEOUT_MS);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new AppConfigApiError('서버 응답이 지연됩니다.', 408);
+    }
+    throw error;
+  }
+
+  clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new AppConfigApiError(payload.message || '요청 처리에 실패했습니다.', response.status);
+    } catch {
+      throw new AppConfigApiError(text || '요청 처리에 실패했습니다.', response.status);
+    }
+  }
+
+  const contentType = response.headers.get('content-type') ?? '';
+  if (!contentType.toLowerCase().includes('application/json')) {
+    const text = await response.text();
+    throw new AppConfigApiError(text ? '서버 응답이 JSON이 아닙니다.' : '서버 응답을 확인할 수 없습니다.', 502);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function requestAppConfig<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestAppConfigOnce<T>(APP_CONFIG_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      APP_CONFIG_FALLBACK_BASE_URL &&
+      APP_CONFIG_FALLBACK_BASE_URL !== APP_CONFIG_API_BASE_URL &&
+      (error instanceof AppConfigApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && /404|not found|Failed to fetch|Load failed|NetworkError/i.test(error.message));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestAppConfigOnce<T>(APP_CONFIG_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+export async function fetchAppConfigFromServer() {
+  try {
+    const response = await requestAppConfig<{ ok: boolean; config: Partial<AppConfig> }>(APP_CONFIG_API_PATH);
+    const config = normalizeConfig(response.config);
+    const preference = await fetchAutomationNotificationPreferenceFromServer();
+    return mergeAutomationNotificationSettings(config, preference);
+  } catch {
+    return null;
+  }
+}
+
+async function fetchAutomationNotificationPreferenceFromServer() {
+  try {
+    const target = getAutomationNotificationPreferenceTarget();
+    const query = target ? `?${new URLSearchParams(target).toString()}` : '';
+    const response = await requestAppConfig<{
+      ok: boolean;
+      automation?: Partial<AutomationNotificationSettings> | null;
+    }>(`${AUTOMATION_NOTIFICATION_PREFERENCE_API_PATH}${query}`);
+    return response.automation ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function saveAppConfigToServer(config: AppConfig) {
+  const response = await requestAppConfig<{ ok: boolean; config: Partial<AppConfig> }>(APP_CONFIG_API_PATH, {
+    method: 'PUT',
+    body: JSON.stringify({ config }),
+  });
+
+  return normalizeConfig(response.config);
+}
+
+export async function saveAutomationNotificationPreferenceToServer(config: AppConfig) {
+  const target = getAutomationNotificationPreferenceTarget();
+  const response = await requestAppConfig<{
+    ok: boolean;
+    automation: Partial<AutomationNotificationSettings>;
+  }>(AUTOMATION_NOTIFICATION_PREFERENCE_API_PATH, {
+    method: 'PUT',
+    body: JSON.stringify({
+      ...(target ?? {}),
+      automation: pickAutomationNotificationSettings(config.automation),
+    }),
+  });
+
+  return mergeAutomationNotificationSettings(config, response.automation);
+}
+
+export async function syncAppConfigFromServer() {
+  const config = await fetchAppConfigFromServer();
+
+  if (!config) {
+    return false;
+  }
+
+  setStoredAppConfig(config);
+  return true;
+}
+
+export function getStoredAppConfig(): AppConfig {
+  if (typeof window === 'undefined') {
+    return DEFAULT_APP_CONFIG;
+  }
+
+  try {
+    const raw = window.localStorage.getItem(APP_CONFIG_STORAGE_KEY);
+
+    if (!raw) {
+      cachedConfig = DEFAULT_APP_CONFIG;
+      cachedRawConfig = null;
+      return DEFAULT_APP_CONFIG;
+    }
+
+    if (raw === cachedRawConfig && cachedConfig) {
+      return cachedConfig;
+    }
+
+    const normalized = normalizeConfig(JSON.parse(raw) as Partial<AppConfig>);
+    cachedConfig = normalized;
+    cachedRawConfig = raw;
+    return normalized;
+  } catch {
+    cachedConfig = DEFAULT_APP_CONFIG;
+    cachedRawConfig = null;
+    return DEFAULT_APP_CONFIG;
+  }
+}
+
+export function setStoredAppConfig(config: AppConfig) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalized = normalizeConfig(config);
+  const raw = JSON.stringify(normalized);
+  cachedConfig = normalized;
+  cachedRawConfig = raw;
+  window.localStorage.setItem(APP_CONFIG_STORAGE_KEY, raw);
+  emitConfigChange();
+}
+
+export function updateStoredAppConfig(updater: (current: AppConfig) => AppConfig) {
+  const current = getStoredAppConfig();
+  const next = updater(current);
+  setStoredAppConfig(next);
+}
+
+function subscribeToAppConfig(callback: () => void) {
+  if (typeof window === 'undefined') {
+    return () => undefined;
+  }
+
+  const handleChange = () => {
+    callback();
+  };
+
+  window.addEventListener(APP_CONFIG_EVENT, handleChange);
+  window.addEventListener('storage', handleChange);
+
+  return () => {
+    window.removeEventListener(APP_CONFIG_EVENT, handleChange);
+    window.removeEventListener('storage', handleChange);
+  };
+}
+
+export function useAppConfig() {
+  return useSyncExternalStore(subscribeToAppConfig, getStoredAppConfig, () => DEFAULT_APP_CONFIG);
+}
+
+export function describeAutoReceiveSchedule(config: AppConfig) {
+  const automation = config.automation;
+
+  if (automation.autoReceiveScheduleType === 'daily') {
+    return `매일 ${automation.autoReceiveDailyTime}`;
+  }
+
+  if (automation.autoReceiveScheduleType === 'weekly') {
+    return `매주 ${WEEKLY_DAY_LABELS[automation.autoReceiveWeeklyDay]} ${automation.autoReceiveWeeklyTime}`;
+  }
+
+  return `${automation.autoReceiveIntervalSeconds}초마다`;
+}
+
+export function getWeeklyScheduleOptions() {
+  return Object.entries(WEEKLY_DAY_LABELS).map(([value, label]) => ({
+    value: value as WeeklyScheduleDay,
+    label,
+  }));
+}
diff --git a/src/app/main/appUpdate.ts b/src/app/main/appUpdate.ts
new file mode 100755
index 0000000..531d7c3
--- /dev/null
+++ b/src/app/main/appUpdate.ts
@@ -0,0 +1,513 @@
+import { registerSW } from 'virtual:pwa-register';
+
+export type AppUpdateStatus = 'idle' | 'available' | 'updating' | 'ready';
+
+export type AppUpdateSnapshot = {
+  supported: boolean;
+  status: AppUpdateStatus;
+  progressPercent: number | null;
+  currentTaskLabel: string | null;
+};
+
+type Listener = (snapshot: AppUpdateSnapshot) => void;
+type ServiceWorkerUpdater = (reloadPage?: boolean) => Promise<void>;
+
+const UPDATE_APPLY_TIMEOUT_MS = 15000;
+const UPDATE_DISCOVERY_TIMEOUT_MS = 6000;
+const REGISTRATION_LOOKUP_TIMEOUT_MS = 10000;
+const DEV_UPDATE_POLL_INTERVAL_MS = 4000;
+const DEV_UPDATE_ENDPOINT_PATH = '/__app-update';
+const APP_UPDATE_CACHE_BUST_PARAM = '__appUpdatedAt';
+
+let initialized = false;
+let snapshot: AppUpdateSnapshot = {
+  supported: false,
+  status: 'idle',
+  progressPercent: null,
+  currentTaskLabel: null,
+};
+const listeners = new Set<Listener>();
+let devUpdateToken: string | null = null;
+let devUpdatePollTimerId: number | null = null;
+let serviceWorkerUpdater: ServiceWorkerUpdater | null = null;
+
+function isAppUpdateSupported() {
+  return typeof window !== 'undefined' && typeof navigator !== 'undefined' && 'serviceWorker' in navigator;
+}
+
+function isAppUpdateDisabled() {
+  return import.meta.env.VITE_DISABLE_APP_UPDATE === 'true';
+}
+
+function isDevelopmentUpdateMode() {
+  return import.meta.env.DEV;
+}
+
+function emit() {
+  for (const listener of listeners) {
+    listener(snapshot);
+  }
+}
+
+function buildAppUpdateReloadUrl() {
+  const targetUrl = new URL(window.location.href);
+  targetUrl.searchParams.set(APP_UPDATE_CACHE_BUST_PARAM, `${Date.now()}`);
+  return targetUrl.toString();
+}
+
+function reloadAppWithCacheBuster() {
+  window.location.replace(buildAppUpdateReloadUrl());
+}
+
+async function resetServiceWorkersAndReload() {
+  if (!isAppUpdateSupported()) {
+    reloadAppWithCacheBuster();
+    return;
+  }
+
+  try {
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    await Promise.all(
+      registrations.map((registration) =>
+        registration.unregister().catch(() => false),
+      ),
+    );
+  } catch {
+    // ignore and continue reload
+  }
+
+  if (typeof window !== 'undefined' && 'caches' in window) {
+    try {
+      const cacheKeys = await caches.keys();
+      await Promise.all(cacheKeys.map((cacheKey) => caches.delete(cacheKey).catch(() => false)));
+    } catch {
+      // ignore and continue reload
+    }
+  }
+
+  reloadAppWithCacheBuster();
+}
+
+async function unregisterServiceWorkers() {
+  if (!isAppUpdateSupported()) {
+    return;
+  }
+
+  try {
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    await Promise.all(registrations.map((registration) => registration.unregister().catch(() => false)));
+  } catch {
+    // ignore cleanup failure
+  }
+}
+
+async function fetchDevelopmentUpdateToken() {
+  const response = await fetch(DEV_UPDATE_ENDPOINT_PATH, {
+    cache: 'no-store',
+    headers: {
+      Accept: 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error('개발 업데이트 상태를 확인하지 못했습니다.');
+  }
+
+  const payload = (await response.json()) as { token?: string };
+  return typeof payload.token === 'string' && payload.token ? payload.token : null;
+}
+
+async function pollDevelopmentUpdateStatus() {
+  try {
+    const nextToken = await fetchDevelopmentUpdateToken();
+
+    if (!nextToken) {
+      return;
+    }
+
+    if (!devUpdateToken) {
+      devUpdateToken = nextToken;
+      snapshot = {
+        supported: true,
+        status: 'ready',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+      return;
+    }
+
+    if (nextToken !== devUpdateToken && snapshot.status !== 'available' && snapshot.status !== 'updating') {
+      snapshot = {
+        supported: true,
+        status: 'available',
+        progressPercent: null,
+        currentTaskLabel: '개발 서버의 변경 사항이 준비되었습니다. 설정의 업데이트 버튼으로 반영할 수 있습니다.',
+      };
+      emit();
+    }
+  } catch {
+    if (snapshot.status === 'idle') {
+      snapshot = {
+        supported: true,
+        status: 'ready',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+    }
+  }
+}
+
+function startDevelopmentUpdatePolling() {
+  void pollDevelopmentUpdateStatus();
+
+  if (devUpdatePollTimerId !== null) {
+    window.clearInterval(devUpdatePollTimerId);
+  }
+
+  devUpdatePollTimerId = window.setInterval(() => {
+    void pollDevelopmentUpdateStatus();
+  }, DEV_UPDATE_POLL_INTERVAL_MS);
+}
+
+async function getAppServiceWorkerRegistration() {
+  if (!isAppUpdateSupported()) {
+    return null;
+  }
+
+  const serviceWorkerUrl = import.meta.env.DEV ? '/dev-sw.js?dev-sw' : '/sw.js';
+  let registeredRegistration: ServiceWorkerRegistration | null = null;
+
+  try {
+    registeredRegistration = await navigator.serviceWorker.register(
+      serviceWorkerUrl,
+      import.meta.env.DEV ? { type: 'module' } : undefined,
+    );
+  } catch {
+    // 기존 등록이 있거나 설치 중 충돌이 있어도 아래 조회 흐름으로 이어갑니다.
+  }
+
+  if (registeredRegistration) {
+    return registeredRegistration;
+  }
+
+  const startedAt = Date.now();
+
+  while (Date.now() - startedAt < REGISTRATION_LOOKUP_TIMEOUT_MS) {
+    const directRegistration = await navigator.serviceWorker.getRegistration();
+
+    if (directRegistration) {
+      return directRegistration;
+    }
+
+    try {
+      const readyRegistration = await Promise.race([
+        navigator.serviceWorker.ready,
+        new Promise<null>((resolve) => {
+          window.setTimeout(() => resolve(null), 750);
+        }),
+      ]);
+
+      if (readyRegistration) {
+        return readyRegistration;
+      }
+    } catch {
+      // keep polling until timeout
+    }
+
+    await new Promise((resolve) => {
+      window.setTimeout(resolve, 250);
+    });
+  }
+
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  return registrations[0] ?? null;
+}
+
+function waitForControllerActivation(timeoutMs: number) {
+  return new Promise<boolean>((resolve) => {
+    let completed = false;
+
+    const cleanup = () => {
+      if (completed) {
+        return;
+      }
+
+      completed = true;
+      navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
+      window.clearTimeout(timeoutId);
+    };
+
+    const onControllerChange = () => {
+      cleanup();
+      resolve(true);
+    };
+
+    const timeoutId = window.setTimeout(() => {
+      cleanup();
+      resolve(false);
+    }, timeoutMs);
+
+    navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
+  });
+}
+
+function waitForWaitingServiceWorker(registration: ServiceWorkerRegistration, timeoutMs: number) {
+  return new Promise<ServiceWorker | null>((resolve) => {
+    if (registration.waiting) {
+      resolve(registration.waiting);
+      return;
+    }
+
+    let completed = false;
+    let currentInstallingWorker: ServiceWorker | null = registration.installing ?? null;
+
+    const cleanup = () => {
+      if (completed) {
+        return;
+      }
+
+      completed = true;
+      window.clearTimeout(timeoutId);
+      registration.removeEventListener('updatefound', onUpdateFound);
+      currentInstallingWorker?.removeEventListener('statechange', onStateChange);
+    };
+
+    const resolveWith = (worker: ServiceWorker | null) => {
+      cleanup();
+      resolve(worker);
+    };
+
+    const onStateChange = () => {
+      const waitingWorker = registration.waiting;
+
+      if (waitingWorker) {
+        resolveWith(waitingWorker);
+      }
+    };
+
+    const onUpdateFound = () => {
+      currentInstallingWorker?.removeEventListener('statechange', onStateChange);
+      currentInstallingWorker = registration.installing ?? null;
+      currentInstallingWorker?.addEventListener('statechange', onStateChange);
+    };
+
+    const timeoutId = window.setTimeout(() => {
+      resolveWith(registration.waiting ?? null);
+    }, timeoutMs);
+
+    registration.addEventListener('updatefound', onUpdateFound);
+
+    if (currentInstallingWorker) {
+      currentInstallingWorker.addEventListener('statechange', onStateChange);
+    }
+  });
+}
+
+export function initializeAppUpdate() {
+  if (initialized || typeof window === 'undefined') {
+    return;
+  }
+
+  initialized = true;
+  if (isAppUpdateDisabled()) {
+    snapshot = {
+      supported: false,
+      status: 'idle',
+      progressPercent: null,
+      currentTaskLabel: null,
+    };
+    void unregisterServiceWorkers();
+    emit();
+    return;
+  }
+
+  const supported = isDevelopmentUpdateMode() ? true : isAppUpdateSupported();
+  snapshot = {
+    supported,
+    status: supported ? 'ready' : 'idle',
+    progressPercent: null,
+    currentTaskLabel: null,
+  };
+
+  if (isDevelopmentUpdateMode()) {
+    startDevelopmentUpdatePolling();
+    emit();
+    return;
+  }
+
+  if (!snapshot.supported) {
+    emit();
+    return;
+  }
+
+  serviceWorkerUpdater = registerSW({
+    immediate: true,
+    onNeedRefresh() {
+      snapshot = {
+        supported: true,
+        status: 'available',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+    },
+    onRegistered() {
+      snapshot = {
+        supported: true,
+        status: 'ready',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+    },
+    onRegisterError() {
+      snapshot = {
+        supported: isAppUpdateSupported(),
+        status: isAppUpdateSupported() ? 'ready' : 'idle',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+    },
+  });
+
+  emit();
+}
+
+export function subscribeAppUpdate(listener: Listener) {
+  listeners.add(listener);
+  listener(snapshot);
+
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function getAppUpdateSnapshot() {
+  return snapshot;
+}
+
+export async function applyAppUpdate() {
+  if (isDevelopmentUpdateMode()) {
+    if (snapshot.status !== 'available') {
+      snapshot = {
+        supported: true,
+        status: 'ready',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+      return false;
+    }
+
+    snapshot = {
+      supported: true,
+      status: 'updating',
+      progressPercent: 100,
+      currentTaskLabel: '개발 서버 변경 사항을 적용하기 위해 화면을 새로고침합니다.',
+    };
+    emit();
+    reloadAppWithCacheBuster();
+    return true;
+  }
+
+  if (!isAppUpdateSupported()) {
+    return false;
+  }
+
+  snapshot = {
+    supported: true,
+    status: 'updating',
+    progressPercent: 20,
+    currentTaskLabel: '새 버전 적용을 준비하고 있습니다.',
+  };
+  emit();
+
+  try {
+    if (serviceWorkerUpdater && snapshot.status === 'available') {
+      try {
+        await serviceWorkerUpdater(true);
+        return true;
+      } catch {
+        // Fall back to manual service worker activation below when the helper path fails.
+      }
+    }
+
+    const registration = await getAppServiceWorkerRegistration();
+
+    if (!registration) {
+      snapshot = {
+        supported: true,
+        status: 'ready',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+      return false;
+    }
+
+    let waitingWorker = registration.waiting;
+
+    if (!waitingWorker) {
+      snapshot = {
+        supported: true,
+        status: 'updating',
+        progressPercent: 45,
+        currentTaskLabel: '새 버전 서비스 워커를 확인하고 있습니다.',
+      };
+      emit();
+
+      await registration.update();
+      waitingWorker = await waitForWaitingServiceWorker(registration, UPDATE_DISCOVERY_TIMEOUT_MS);
+    }
+
+    if (!waitingWorker) {
+      snapshot = {
+        supported: true,
+        status: 'ready',
+        progressPercent: null,
+        currentTaskLabel: null,
+      };
+      emit();
+      return false;
+    }
+
+    snapshot = {
+      supported: true,
+      status: 'updating',
+      progressPercent: 80,
+      currentTaskLabel: '서비스 워커를 새 버전으로 교체하고 있습니다.',
+    };
+    emit();
+
+    const activationPromise = waitForControllerActivation(UPDATE_APPLY_TIMEOUT_MS);
+    waitingWorker.postMessage({ type: 'SKIP_WAITING' });
+    const activated = await activationPromise;
+
+    if (!activated) {
+      snapshot = {
+        supported: true,
+        status: 'updating',
+        progressPercent: 95,
+        currentTaskLabel: '서비스 워커 재적용이 지연되어 캐시를 정리한 뒤 다시 불러옵니다.',
+      };
+      emit();
+      await resetServiceWorkersAndReload();
+      return true;
+    }
+
+    reloadAppWithCacheBuster();
+    return true;
+  } catch (error) {
+    snapshot = {
+      supported: true,
+      status: 'available',
+      progressPercent: null,
+      currentTaskLabel: null,
+    };
+    emit();
+    throw error;
+  }
+}
diff --git a/src/app/main/chatTypeAccess.ts b/src/app/main/chatTypeAccess.ts
new file mode 100755
index 0000000..d87aa63
--- /dev/null
+++ b/src/app/main/chatTypeAccess.ts
@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+
+export type ChatPermissionRole = 'guest' | 'token-user';
+
+export type ChatTypeRecord = {
+  id: string;
+  name: string;
+  description: string;
+  isTemplate: boolean;
+  permissions: ChatPermissionRole[];
+  enabled: boolean;
+  updatedAt: string;
+};
+
+export type ChatTypeInput = {
+  id?: string;
+  name: string;
+  description?: string;
+  isTemplate?: boolean;
+  permissions: ChatPermissionRole[];
+  enabled?: boolean;
+};
+
+const CHAT_TYPE_STORAGE_KEY = 'work-app.chat-types';
+const CHAT_TYPE_SYNC_EVENT = 'work-app:chat-types-changed';
+
+export const CHAT_PERMISSION_ROLE_LABELS: Record<ChatPermissionRole, string> = {
+  guest: '게스트',
+  'token-user': '토큰 사용자',
+};
+
+const DEFAULT_CHAT_TYPES: ChatTypeRecord[] = [
+  {
+    id: 'general-request',
+    name: '일반 요청',
+    description: '일반 Codex Live 요청입니다. 현재 로컬 main 작업본 기준으로 바로 확인하고 필요 시 소스를 수정합니다.',
+    isTemplate: false,
+    permissions: ['token-user'],
+    enabled: true,
+    updatedAt: '2026-04-20T00:00:00.000Z',
+  },
+  {
+    id: 'api-request-template',
+    name: 'API요청',
+    description: 'API요청만 진행 (자동화, 작업요청, 스케줄 등 호출 가능한 API)',
+    isTemplate: true,
+    permissions: ['token-user'],
+    enabled: true,
+    updatedAt: '2026-04-16T00:00:00.000Z',
+  },
+];
+
+function normalizeText(value: string | null | undefined) {
+  return value?.trim() ?? '';
+}
+
+function normalizePermissions(permissions: ChatPermissionRole[] | null | undefined): ChatPermissionRole[] {
+  const nextPermissions = Array.from(
+    new Set(
+      (permissions ?? []).filter(
+        (permission): permission is ChatPermissionRole => permission === 'guest' || permission === 'token-user',
+      ),
+    ),
+  );
+  return nextPermissions.length > 0 ? nextPermissions : (['token-user'] as ChatPermissionRole[]);
+}
+
+function normalizeChatType(record: Partial<ChatTypeRecord>): ChatTypeRecord | null {
+  const name = normalizeText(record.name);
+
+  if (!name) {
+    return null;
+  }
+
+  const id =
+    normalizeText(record.id) ||
+    `chat-type-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+
+  return {
+    id,
+    name,
+    description: normalizeText(record.description),
+    isTemplate: record.isTemplate === true,
+    permissions: normalizePermissions(record.permissions),
+    enabled: record.enabled !== false,
+    updatedAt: typeof record.updatedAt === 'string' && record.updatedAt ? record.updatedAt : new Date().toISOString(),
+  };
+}
+
+function ensureDefaultChatTypes(chatTypes: ChatTypeRecord[]) {
+  const defaultsById = new Map(DEFAULT_CHAT_TYPES.map((item) => [item.id, item]));
+  const merged = chatTypes.map((item) => {
+    const defaultItem = defaultsById.get(item.id);
+
+    if (!defaultItem) {
+      return item;
+    }
+
+    const storedUpdatedAt = Date.parse(item.updatedAt);
+    const defaultUpdatedAt = Date.parse(defaultItem.updatedAt);
+
+    if (Number.isFinite(storedUpdatedAt) && Number.isFinite(defaultUpdatedAt) && storedUpdatedAt >= defaultUpdatedAt) {
+      return item;
+    }
+
+    return {
+      ...item,
+      ...defaultItem,
+    };
+  });
+
+  const existingIds = new Set(merged.map((item) => item.id));
+  const missingDefaults = DEFAULT_CHAT_TYPES.filter((item) => !existingIds.has(item.id));
+
+  return [...merged, ...missingDefaults].sort((left, right) => left.name.localeCompare(right.name, 'ko-KR'));
+}
+
+export function loadChatTypes() {
+  if (typeof window === 'undefined') {
+    return DEFAULT_CHAT_TYPES;
+  }
+
+  try {
+    const raw = window.localStorage.getItem(CHAT_TYPE_STORAGE_KEY);
+
+    if (!raw) {
+      return DEFAULT_CHAT_TYPES;
+    }
+
+    const parsed = JSON.parse(raw) as Partial<ChatTypeRecord>[];
+
+    if (!Array.isArray(parsed)) {
+      return DEFAULT_CHAT_TYPES;
+    }
+
+    const normalized = parsed
+      .map((item) => normalizeChatType(item))
+      .filter((item): item is ChatTypeRecord => Boolean(item));
+
+    const resolved = normalized.length > 0 ? ensureDefaultChatTypes(normalized) : DEFAULT_CHAT_TYPES;
+
+    if (JSON.stringify(resolved) !== JSON.stringify(normalized)) {
+      window.localStorage.setItem(CHAT_TYPE_STORAGE_KEY, JSON.stringify(resolved));
+    }
+
+    return resolved;
+  } catch {
+    return DEFAULT_CHAT_TYPES;
+  }
+}
+
+export function saveChatTypes(chatTypes: ChatTypeRecord[]) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.setItem(CHAT_TYPE_STORAGE_KEY, JSON.stringify(chatTypes));
+  window.dispatchEvent(new CustomEvent(CHAT_TYPE_SYNC_EVENT));
+}
+
+export function upsertChatType(chatTypes: ChatTypeRecord[], input: ChatTypeInput) {
+  const nextRecord = normalizeChatType({
+    id: input.id,
+    name: input.name,
+    description: input.description,
+    isTemplate: input.isTemplate,
+    permissions: input.permissions,
+    enabled: input.enabled,
+    updatedAt: new Date().toISOString(),
+  });
+
+  if (!nextRecord) {
+    return chatTypes;
+  }
+
+  const nextChatTypes = chatTypes.filter((item) => item.id !== nextRecord.id);
+  nextChatTypes.push(nextRecord);
+  nextChatTypes.sort((left, right) => left.name.localeCompare(right.name, 'ko-KR'));
+  return nextChatTypes;
+}
+
+export function resolveCurrentChatPermissionRoles(hasTokenAccess: boolean): ChatPermissionRole[] {
+  return hasTokenAccess ? ['token-user'] : ['guest'];
+}
+
+export function canUseChatType(chatType: ChatTypeRecord, roles: ChatPermissionRole[]) {
+  return chatType.enabled && chatType.permissions.some((permission) => roles.includes(permission));
+}
+
+export function useChatTypeRegistry() {
+  const [chatTypes, setChatTypes] = useState<ChatTypeRecord[]>(() => loadChatTypes());
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const syncChatTypes = () => {
+      setChatTypes(loadChatTypes());
+    };
+
+    window.addEventListener('storage', syncChatTypes);
+    window.addEventListener(CHAT_TYPE_SYNC_EVENT, syncChatTypes);
+
+    return () => {
+      window.removeEventListener('storage', syncChatTypes);
+      window.removeEventListener(CHAT_TYPE_SYNC_EVENT, syncChatTypes);
+    };
+  }, []);
+
+  return {
+    chatTypes,
+    setChatTypes: (nextChatTypes: ChatTypeRecord[]) => {
+      saveChatTypes(nextChatTypes);
+      setChatTypes(nextChatTypes);
+    },
+  };
+}
diff --git a/src/app/main/chatV2/ChatWorkspaceV2.tsx b/src/app/main/chatV2/ChatWorkspaceV2.tsx
new file mode 100644
index 0000000..15ce055
--- /dev/null
+++ b/src/app/main/chatV2/ChatWorkspaceV2.tsx
@@ -0,0 +1,116 @@
+import { Segmented } from 'antd';
+import type { ReactNode } from 'react';
+import { ConversationListPane } from './components/ConversationListPane';
+import { ConversationRoomPane } from './components/ConversationRoomPane';
+import { ErrorPane } from './components/ErrorPane';
+import { RuntimePane } from './components/RuntimePane';
+import type {
+  ChatWorkspaceSelection,
+  ConversationListState,
+  ConversationRoomState,
+  ErrorPaneState,
+  RuntimePaneState,
+  ChatWorkspaceView,
+} from './types';
+
+type ChatWorkspaceV2Props = {
+  selection: ChatWorkspaceSelection;
+  conversationList: ConversationListState;
+  conversationRoom: ConversationRoomState;
+  runtimePane: RuntimePaneState;
+  errorPane: ErrorPaneState;
+  onSelectView: (view: ChatWorkspaceView) => void;
+  onSearchConversation: (value: string) => void;
+  onSelectConversation: (sessionId: string) => void;
+  onCreateConversation: () => void;
+  showToolbar?: boolean;
+  chatListPane?: ReactNode;
+  chatRoomPane?: ReactNode;
+  runtimePaneContent?: ReactNode;
+  errorPaneContent?: ReactNode;
+};
+
+export function ChatWorkspaceV2({
+  selection,
+  conversationList,
+  conversationRoom,
+  runtimePane,
+  errorPane,
+  onSelectView,
+  onSearchConversation,
+  onSelectConversation,
+  onCreateConversation,
+  showToolbar = true,
+  chatListPane,
+  chatRoomPane,
+  runtimePaneContent,
+  errorPaneContent,
+}: ChatWorkspaceV2Props) {
+  return (
+    <div className="chat-v2">
+      {showToolbar ? (
+        <div className="chat-v2__toolbar">
+          <Segmented
+            value={selection.activeView}
+            options={[
+              { label: '채팅', value: 'chat' },
+              { label: '런타임', value: 'runtime' },
+              { label: '에러', value: 'errors' },
+            ]}
+            onChange={(value) => {
+              onSelectView(value as ChatWorkspaceView);
+            }}
+          />
+        </div>
+      ) : null}
+
+      {selection.activeView === 'chat' ? (
+        <div className="chat-v2__chat-layout">
+          {chatListPane ?? (
+            <ConversationListPane
+              items={conversationList.items}
+              isLoading={conversationList.isLoading}
+              errorMessage={conversationList.errorMessage}
+              searchText={conversationList.searchText}
+              activeSessionId={selection.activeSessionId}
+              onSearchChange={onSearchConversation}
+              onSelectSession={onSelectConversation}
+              onCreateConversation={onCreateConversation}
+            />
+          )}
+          {chatRoomPane ?? (
+            <ConversationRoomPane
+              sessionId={conversationRoom.sessionId}
+              messages={conversationRoom.messages}
+              requests={conversationRoom.requests}
+              isLoading={conversationRoom.isLoading}
+              loadingLabel={conversationRoom.loadingLabel}
+              errorMessage={conversationRoom.errorMessage}
+            />
+          )}
+        </div>
+      ) : null}
+
+      {selection.activeView === 'runtime' ? (
+        runtimePaneContent ?? (
+          <RuntimePane
+            snapshot={runtimePane.snapshot}
+            isLoading={runtimePane.isLoading}
+            errorMessage={runtimePane.errorMessage}
+          />
+        )
+      ) : null}
+
+      {selection.activeView === 'errors' ? (
+        errorPaneContent ?? (
+          <ErrorPane
+            items={errorPane.items}
+            selectedItem={errorPane.selectedItem}
+            isLoading={errorPane.isLoading}
+            errorMessage={errorPane.errorMessage}
+          />
+        )
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/app/main/chatV2/components/ConversationListPane.tsx b/src/app/main/chatV2/components/ConversationListPane.tsx
new file mode 100644
index 0000000..08e34d9
--- /dev/null
+++ b/src/app/main/chatV2/components/ConversationListPane.tsx
@@ -0,0 +1,87 @@
+import { Button, Empty, Input, List, Spin, Typography } from 'antd';
+import type { ChatConversationSummary } from '../../mainChatPanel/types';
+
+const { Text } = Typography;
+
+type ConversationListPaneProps = {
+  items: ChatConversationSummary[];
+  isLoading: boolean;
+  errorMessage: string;
+  searchText: string;
+  activeSessionId: string;
+  onSearchChange: (value: string) => void;
+  onSelectSession: (sessionId: string) => void;
+  onCreateConversation: () => void;
+};
+
+export function ConversationListPane({
+  items,
+  isLoading,
+  errorMessage,
+  searchText,
+  activeSessionId,
+  onSearchChange,
+  onSelectSession,
+  onCreateConversation,
+}: ConversationListPaneProps) {
+  return (
+    <section className="chat-v2__pane chat-v2__pane--list">
+      <div className="chat-v2__pane-header">
+        <div>
+          <Text strong>채팅 목록</Text>
+          <br />
+          <Text type="secondary">{items.length}개 대화</Text>
+        </div>
+        <Button type="primary" onClick={onCreateConversation}>
+          새 채팅
+        </Button>
+      </div>
+
+      <Input.Search
+        value={searchText}
+        placeholder="채팅방 검색"
+        allowClear
+        onChange={(event) => {
+          onSearchChange(event.target.value);
+        }}
+      />
+
+      {isLoading ? (
+        <div className="chat-v2__state">
+          <Spin />
+        </div>
+      ) : errorMessage ? (
+        <div className="chat-v2__state">
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      ) : items.length === 0 ? (
+        <div className="chat-v2__state">
+          <Empty description="대화가 없습니다." />
+        </div>
+      ) : (
+        <List
+          className="chat-v2__conversation-list"
+          dataSource={items}
+          renderItem={(item) => (
+            <List.Item>
+              <button
+                type="button"
+                className={
+                  item.sessionId === activeSessionId
+                    ? 'chat-v2__conversation-item chat-v2__conversation-item--active'
+                    : 'chat-v2__conversation-item'
+                }
+                onClick={() => {
+                  onSelectSession(item.sessionId);
+                }}
+              >
+                <span className="chat-v2__conversation-title">{item.title || item.sessionId}</span>
+                <span className="chat-v2__conversation-preview">{item.lastMessagePreview || '대화가 아직 없습니다.'}</span>
+              </button>
+            </List.Item>
+          )}
+        />
+      )}
+    </section>
+  );
+}
diff --git a/src/app/main/chatV2/components/ConversationRoomPane.tsx b/src/app/main/chatV2/components/ConversationRoomPane.tsx
new file mode 100644
index 0000000..012cf4a
--- /dev/null
+++ b/src/app/main/chatV2/components/ConversationRoomPane.tsx
@@ -0,0 +1,85 @@
+import { Empty, Spin, Typography } from 'antd';
+import type { ChatConversationRequest, ChatMessage } from '../../mainChatPanel/types';
+
+const { Text } = Typography;
+
+type ConversationRoomPaneProps = {
+  sessionId: string;
+  messages: ChatMessage[];
+  requests: ChatConversationRequest[];
+  isLoading: boolean;
+  loadingLabel: string;
+  errorMessage: string;
+};
+
+export function ConversationRoomPane({
+  sessionId,
+  messages,
+  requests,
+  isLoading,
+  loadingLabel,
+  errorMessage,
+}: ConversationRoomPaneProps) {
+  if (!sessionId) {
+    return (
+      <section className="chat-v2__pane chat-v2__pane--room">
+        <div className="chat-v2__state">
+          <Empty description="채팅방을 선택해 주세요." />
+        </div>
+      </section>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <section className="chat-v2__pane chat-v2__pane--room">
+        <div className="chat-v2__state">
+          <Spin />
+          <Text type="secondary">{loadingLabel}</Text>
+        </div>
+      </section>
+    );
+  }
+
+  if (errorMessage) {
+    return (
+      <section className="chat-v2__pane chat-v2__pane--room">
+        <div className="chat-v2__state">
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="chat-v2__pane chat-v2__pane--room">
+      <div className="chat-v2__pane-header">
+        <div>
+          <Text strong>{sessionId}</Text>
+          <br />
+          <Text type="secondary">
+            메시지 {messages.length}개 · 요청 {requests.length}개
+          </Text>
+        </div>
+      </div>
+
+      <div className="chat-v2__room-stream">
+        {messages.length === 0 ? (
+          <div className="chat-v2__state">
+            <Empty description="메시지가 없습니다." />
+          </div>
+        ) : (
+          messages.map((message) => (
+            <article key={`${message.id}-${message.timestamp}`} className={`chat-v2__message chat-v2__message--${message.author}`}>
+              <div className="chat-v2__message-meta">
+                <Text strong>{message.author}</Text>
+                <Text type="secondary">{message.timestamp}</Text>
+              </div>
+              <div className="chat-v2__message-body">{message.text}</div>
+            </article>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/main/chatV2/components/ErrorPane.tsx b/src/app/main/chatV2/components/ErrorPane.tsx
new file mode 100644
index 0000000..17ef90c
--- /dev/null
+++ b/src/app/main/chatV2/components/ErrorPane.tsx
@@ -0,0 +1,56 @@
+import { Empty, Spin, Typography } from 'antd';
+import type { ErrorLogItem } from '../../errorLogApi';
+
+const { Text } = Typography;
+
+type ErrorPaneProps = {
+  items: ErrorLogItem[];
+  selectedItem: ErrorLogItem | null;
+  isLoading: boolean;
+  errorMessage: string;
+};
+
+export function ErrorPane({ items, selectedItem, isLoading, errorMessage }: ErrorPaneProps) {
+  return (
+    <section className="chat-v2__pane chat-v2__pane--errors">
+      <div className="chat-v2__pane-header">
+        <Text strong>에러 로그</Text>
+      </div>
+
+      {isLoading ? (
+        <div className="chat-v2__state">
+          <Spin />
+        </div>
+      ) : errorMessage ? (
+        <div className="chat-v2__state">
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      ) : items.length === 0 ? (
+        <div className="chat-v2__state">
+          <Empty description="에러 로그가 없습니다." />
+        </div>
+      ) : (
+        <div className="chat-v2__error-layout">
+          <div className="chat-v2__error-list">
+            {items.map((item) => (
+              <article key={item.id} className="chat-v2__error-item">
+                <Text strong>{item.errorType}</Text>
+                <Text type="secondary">{item.errorMessage}</Text>
+              </article>
+            ))}
+          </div>
+          <div className="chat-v2__error-detail">
+            {selectedItem ? (
+              <>
+                <Text strong>{selectedItem.errorType}</Text>
+                <Text>{selectedItem.errorMessage}</Text>
+              </>
+            ) : (
+              <Empty description="에러를 선택해 주세요." />
+            )}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/app/main/chatV2/components/RuntimePane.tsx b/src/app/main/chatV2/components/RuntimePane.tsx
new file mode 100644
index 0000000..fc36a11
--- /dev/null
+++ b/src/app/main/chatV2/components/RuntimePane.tsx
@@ -0,0 +1,49 @@
+import { Empty, Spin, Typography } from 'antd';
+import type { ChatRuntimeSnapshot } from '../../mainChatPanel/types';
+
+const { Text } = Typography;
+
+type RuntimePaneProps = {
+  snapshot: ChatRuntimeSnapshot | null;
+  isLoading: boolean;
+  errorMessage: string;
+};
+
+export function RuntimePane({ snapshot, isLoading, errorMessage }: RuntimePaneProps) {
+  return (
+    <section className="chat-v2__pane chat-v2__pane--runtime">
+      <div className="chat-v2__pane-header">
+        <Text strong>런타임</Text>
+      </div>
+
+      {isLoading ? (
+        <div className="chat-v2__state">
+          <Spin />
+        </div>
+      ) : errorMessage ? (
+        <div className="chat-v2__state">
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      ) : !snapshot ? (
+        <div className="chat-v2__state">
+          <Empty description="런타임 데이터가 없습니다." />
+        </div>
+      ) : (
+        <div className="chat-v2__summary-grid">
+          <div className="chat-v2__summary-card">
+            <Text type="secondary">실행 중</Text>
+            <Text strong>{snapshot.runningCount}</Text>
+          </div>
+          <div className="chat-v2__summary-card">
+            <Text type="secondary">대기 중</Text>
+            <Text strong>{snapshot.queuedCount}</Text>
+          </div>
+          <div className="chat-v2__summary-card">
+            <Text type="secondary">세션 수</Text>
+            <Text strong>{snapshot.sessionCount}</Text>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/app/main/chatV2/data/chatClientEvents.ts b/src/app/main/chatV2/data/chatClientEvents.ts
new file mode 100644
index 0000000..831c030
--- /dev/null
+++ b/src/app/main/chatV2/data/chatClientEvents.ts
@@ -0,0 +1,34 @@
+import type { ChatConversationSummary } from '../../mainChatPanel/types';
+
+export const CHAT_CONVERSATIONS_UPDATED_EVENT = 'work-server.chat-conversations-updated';
+
+type ChatConversationsUpdatedDetail = {
+  items: ChatConversationSummary[];
+};
+
+export function emitChatConversationsUpdated(items: ChatConversationSummary[]) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.dispatchEvent(
+    new CustomEvent<ChatConversationsUpdatedDetail>(CHAT_CONVERSATIONS_UPDATED_EVENT, {
+      detail: { items },
+    }),
+  );
+}
+
+export function readChatConversationsUpdatedEvent(
+  event: Event,
+): ChatConversationsUpdatedDetail | null {
+  if (!(event instanceof CustomEvent)) {
+    return null;
+  }
+
+  const detail = event.detail;
+  if (!detail || typeof detail !== 'object' || !Array.isArray((detail as { items?: unknown[] }).items)) {
+    return null;
+  }
+
+  return detail as ChatConversationsUpdatedDetail;
+}
diff --git a/src/app/main/chatV2/data/chatConnectionGateway.ts b/src/app/main/chatV2/data/chatConnectionGateway.ts
new file mode 100644
index 0000000..da2c056
--- /dev/null
+++ b/src/app/main/chatV2/data/chatConnectionGateway.ts
@@ -0,0 +1,17 @@
+import {
+  getChatConnectionSnapshot,
+  getSharedChatRuntimeSnapshot,
+  setSharedChatRuntimeSnapshot,
+  subscribeChatConnection,
+  useChatConnection,
+} from '../../mainChatPanel/useChatConnection';
+import { resetLastReceivedChatEventId } from '../../mainChatPanel/chatUtils';
+
+export const chatConnectionGateway = {
+  useConnection: useChatConnection,
+  subscribe: subscribeChatConnection,
+  getSnapshot: getChatConnectionSnapshot,
+  getSharedRuntimeSnapshot: getSharedChatRuntimeSnapshot,
+  setSharedRuntimeSnapshot: setSharedChatRuntimeSnapshot,
+  resetLastReceivedEventId: resetLastReceivedChatEventId,
+};
diff --git a/src/app/main/chatV2/data/chatGateway.ts b/src/app/main/chatV2/data/chatGateway.ts
new file mode 100644
index 0000000..3610581
--- /dev/null
+++ b/src/app/main/chatV2/data/chatGateway.ts
@@ -0,0 +1,83 @@
+import {
+  createChatConversationRoom,
+  deleteChatConversationRequest,
+  deleteChatConversationRoom,
+  fetchChatConversationDetail,
+  fetchChatConversations,
+  fetchChatRuntimeJobDetail,
+  fetchChatRuntimeSnapshot,
+  markChatConversationResponsesRead,
+  renameChatConversationRoom,
+  updateChatConversationRoom,
+  uploadChatComposerFile,
+} from '../../mainChatPanel';
+import {
+  dismissChatWebPushNotifications,
+  markChatNotificationMessagesAsRead,
+} from '../../notificationApi';
+import type {
+  ChatComposerAttachment,
+  ChatConversationDetailResponse,
+  ChatConversationSummary,
+  ChatRuntimeJobDetail,
+  ChatRuntimeSnapshot,
+} from '../../mainChatPanel/types';
+
+export type ChatGateway = {
+  listConversations: () => Promise<ChatConversationSummary[]>;
+  getConversationDetail: (
+    sessionId: string,
+    options?: {
+      limit?: number;
+      beforeMessageId?: number | null;
+    },
+  ) => Promise<ChatConversationDetailResponse>;
+  createConversation: (args: {
+    sessionId: string;
+    title: string;
+    contextLabel?: string;
+    contextDescription?: string;
+    notifyOffline?: boolean;
+  }) => Promise<ChatConversationSummary>;
+  renameConversation: (sessionId: string, title: string) => Promise<ChatConversationSummary>;
+  updateConversation: (
+    sessionId: string,
+    payload: Partial<
+      Pick<ChatConversationSummary, 'title' | 'notifyOffline' | 'hasUnreadResponse'>
+    >,
+  ) => Promise<ChatConversationSummary>;
+  deleteConversation: (sessionId: string) => Promise<void>;
+  deleteConversationRequest: (sessionId: string, requestId: string) => Promise<void>;
+  markConversationRead: (sessionId: string) => Promise<void>;
+  fetchRuntimeSnapshot: () => Promise<ChatRuntimeSnapshot>;
+  fetchRuntimeJobDetail: (requestId: string) => Promise<ChatRuntimeJobDetail>;
+  uploadComposerFile: (sessionId: string, file: File) => Promise<ChatComposerAttachment>;
+  dismissRoomNotifications: (sessionId: string) => Promise<void>;
+  markRoomNotificationMessagesRead: (sessionId: string) => Promise<void>;
+};
+
+export const chatGateway: ChatGateway = {
+  listConversations: fetchChatConversations,
+  getConversationDetail: fetchChatConversationDetail,
+  createConversation: createChatConversationRoom,
+  renameConversation: renameChatConversationRoom,
+  updateConversation: updateChatConversationRoom,
+  deleteConversation: async (sessionId) => {
+    await deleteChatConversationRoom(sessionId);
+  },
+  deleteConversationRequest: async (sessionId, requestId) => {
+    await deleteChatConversationRequest(sessionId, requestId);
+  },
+  markConversationRead: async (sessionId) => {
+    await markChatConversationResponsesRead(sessionId);
+  },
+  fetchRuntimeSnapshot: fetchChatRuntimeSnapshot,
+  fetchRuntimeJobDetail: fetchChatRuntimeJobDetail,
+  uploadComposerFile: uploadChatComposerFile,
+  dismissRoomNotifications: async (sessionId) => {
+    await dismissChatWebPushNotifications(sessionId);
+  },
+  markRoomNotificationMessagesRead: async (sessionId) => {
+    await markChatNotificationMessagesAsRead(sessionId);
+  },
+};
diff --git a/src/app/main/chatV2/hooks/useConversationComposerController.ts b/src/app/main/chatV2/hooks/useConversationComposerController.ts
new file mode 100644
index 0000000..08306b3
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationComposerController.ts
@@ -0,0 +1,403 @@
+import { useCallback } from 'react';
+import { chatGateway } from '../data/chatGateway';
+import type { ChatComposerAttachment, ChatConversationRequest, ChatMessage } from '../../mainChatPanel/types';
+
+type PendingChatRequest = {
+  sessionId: string;
+  requestId: string;
+  text: string;
+  mode: 'queue' | 'direct';
+  chatTypeId: string;
+  chatTypeLabel: string;
+  chatTypeDescription: string;
+  chatTypeIsTemplate: boolean;
+  retryCount: number;
+  failed: boolean;
+};
+
+type PendingContextConfirm = {
+  mode: 'queue' | 'direct';
+  text: string;
+  chatTypeId: string;
+  chatTypeLabel: string;
+  chatTypeDescription: string;
+  chatTypeIsTemplate: boolean;
+  includedContextCount: number;
+  omittedContextCount: number;
+};
+
+type SelectedChatType = {
+  id: string;
+  name: string;
+  description: string;
+  isTemplate: boolean;
+} | null;
+
+type RecentContextSummary = {
+  includedCount: number;
+  omittedCount: number;
+};
+
+type UseConversationComposerControllerOptions = {
+  activeSessionId: string;
+  appConfigChat: {
+    maxContextMessages: number;
+    maxContextChars: number;
+  };
+  draft: string;
+  composerAttachments: ChatComposerAttachment[];
+  isComposerAttachmentUploading: boolean;
+  selectedChatType: SelectedChatType;
+  socketRef: { current: WebSocket | null };
+  composerRef: { current: { focus: (options?: { cursor?: 'start' | 'end' | 'all' }) => void } | null };
+  messagesRef: { current: ChatMessage[] };
+  pendingRequestsRef: { current: PendingChatRequest[] };
+  shouldStickToBottomRef: { current: boolean };
+  setDraft: (value: string) => void;
+  setComposerAttachments: React.Dispatch<React.SetStateAction<ChatComposerAttachment[]>>;
+  setIsComposerAttachmentUploading: (value: boolean) => void;
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+  setActiveSystemStatus: (value: string | null) => void;
+  setIsSystemStatusPending: (value: boolean) => void;
+  setShowScrollToBottom: (value: boolean) => void;
+  setPendingContextConfirm: (value: PendingContextConfirm | null) => void;
+  setStoredChatSessionLastTypeId: (sessionId: string, chatTypeId: string) => void;
+  upsertRequestItem: (request: ChatConversationRequest) => void;
+  syncConversationPreviewForRequest: (sessionId: string, text: string, requestedAt?: string) => void;
+  updatePendingMessageStatus: (requestId: string, status: 'retrying' | 'failed' | null, retryCount?: number) => void;
+  createLocalMessage: (text: string) => ChatMessage;
+  createChatMessage: (author: 'user' | 'codex' | 'system', text: string, requestId?: string | null) => ChatMessage;
+  createActivityLogPlaceholder: (requestId: string, lines: string[]) => ChatMessage | null;
+  buildOutgoingMessageText: (text: string, attachments: ChatComposerAttachment[]) => string;
+  summarizeRecentContext: (messages: ChatMessage[], maxMessages: number, maxChars: number) => RecentContextSummary;
+  mergeComposerAttachments: (
+    previous: ChatComposerAttachment[],
+    next: ChatComposerAttachment[],
+  ) => ChatComposerAttachment[];
+  sendChatRequest: (socket: WebSocket, request: PendingChatRequest) => void;
+  scrollViewportToBottom: () => void;
+};
+
+export function useConversationComposerController({
+  activeSessionId,
+  appConfigChat,
+  draft,
+  composerAttachments,
+  isComposerAttachmentUploading,
+  selectedChatType,
+  socketRef,
+  composerRef,
+  messagesRef,
+  pendingRequestsRef,
+  shouldStickToBottomRef,
+  setDraft,
+  setComposerAttachments,
+  setIsComposerAttachmentUploading,
+  setMessages,
+  setActiveSystemStatus,
+  setIsSystemStatusPending,
+  setShowScrollToBottom,
+  setPendingContextConfirm,
+  setStoredChatSessionLastTypeId,
+  upsertRequestItem,
+  syncConversationPreviewForRequest,
+  updatePendingMessageStatus,
+  createLocalMessage,
+  createChatMessage,
+  createActivityLogPlaceholder,
+  buildOutgoingMessageText,
+  summarizeRecentContext,
+  mergeComposerAttachments,
+  sendChatRequest,
+  scrollViewportToBottom,
+}: UseConversationComposerControllerOptions) {
+  const handleComposerFilesPicked = useCallback(
+    async (files: File[]) => {
+      if (files.length === 0 || isComposerAttachmentUploading) {
+        return;
+      }
+
+      setIsComposerAttachmentUploading(true);
+      const uploadResults = await Promise.allSettled(
+        files.map((file) => chatGateway.uploadComposerFile(activeSessionId, file)),
+      );
+      const uploadedItems: ChatComposerAttachment[] = [];
+      const failedFileNames: string[] = [];
+
+      uploadResults.forEach((result, index) => {
+        if (result.status === 'fulfilled') {
+          uploadedItems.push(result.value);
+          return;
+        }
+
+        failedFileNames.push(files[index]?.name || `파일 ${index + 1}`);
+      });
+
+      if (uploadedItems.length > 0) {
+        setComposerAttachments((previous) => mergeComposerAttachments(previous, uploadedItems));
+        shouldStickToBottomRef.current = true;
+        setShowScrollToBottom(false);
+      }
+
+      if (failedFileNames.length > 0) {
+        setMessages((previous) => [
+          ...previous.slice(-39),
+          createLocalMessage(`파일 업로드에 실패했습니다: ${failedFileNames.join(', ')}`),
+        ]);
+      }
+
+      setIsComposerAttachmentUploading(false);
+    },
+    [
+      activeSessionId,
+      createLocalMessage,
+      isComposerAttachmentUploading,
+      mergeComposerAttachments,
+      setComposerAttachments,
+      setIsComposerAttachmentUploading,
+      setMessages,
+      setShowScrollToBottom,
+      shouldStickToBottomRef,
+    ],
+  );
+
+  const focusComposerAfterSend = useCallback(() => {
+    window.setTimeout(() => {
+      composerRef.current?.focus({ cursor: 'end' });
+      scrollViewportToBottom();
+    }, 0);
+  }, [composerRef, scrollViewportToBottom]);
+
+  const executeSendMessage = useCallback(
+    (request: PendingContextConfirm) => {
+      const { mode, text, chatTypeId, chatTypeLabel, chatTypeDescription, chatTypeIsTemplate } = request;
+      const requestId = `client-${Date.now().toString(36)}`;
+      const outgoingRequest: PendingChatRequest = {
+        sessionId: activeSessionId,
+        requestId,
+        text,
+        mode,
+        chatTypeId,
+        chatTypeLabel,
+        chatTypeDescription,
+        chatTypeIsTemplate,
+        retryCount: 0,
+        failed: false,
+      };
+
+      setStoredChatSessionLastTypeId(activeSessionId, chatTypeId);
+
+      if (mode === 'queue') {
+        const queuedAt = new Date().toISOString();
+        const optimisticUserMessage: ChatMessage = {
+          ...createChatMessage('user', text, requestId),
+          deliveryStatus: null,
+          retryCount: 0,
+        };
+        const optimisticActivityMessage = createActivityLogPlaceholder(requestId, [
+          '# 상태: 요청을 접수했습니다.',
+          '# 진행: 대기열 등록을 준비하고 있습니다.',
+        ]);
+        upsertRequestItem({
+          sessionId: activeSessionId,
+          requestId,
+          status: 'queued',
+          statusMessage: '대기열 등록',
+          userMessageId: optimisticUserMessage.id,
+          userText: text,
+          responseMessageId: null,
+          responseText: '',
+          hasResponse: false,
+          canDelete: false,
+          createdAt: queuedAt,
+          updatedAt: queuedAt,
+          answeredAt: null,
+          terminalAt: null,
+        });
+        syncConversationPreviewForRequest(activeSessionId, text, queuedAt);
+
+        shouldStickToBottomRef.current = true;
+        setShowScrollToBottom(false);
+        setMessages((previous) => {
+          const nextMessages = [...previous, optimisticUserMessage];
+          return optimisticActivityMessage ? [...nextMessages, optimisticActivityMessage] : nextMessages;
+        });
+        setActiveSystemStatus('대기열 등록 중...');
+        setIsSystemStatusPending(true);
+      } else {
+        const optimisticUserMessage: ChatMessage = {
+          ...createChatMessage('user', text, requestId),
+          deliveryStatus: null,
+          retryCount: 0,
+        };
+        const optimisticActivityMessage = createActivityLogPlaceholder(requestId, [
+          '# 상태: 즉시 요청을 접수했습니다.',
+          '# 진행: 즉시 실행 대기 중입니다.',
+        ]);
+        upsertRequestItem({
+          sessionId: activeSessionId,
+          requestId,
+          status: 'accepted',
+          statusMessage: '요청을 접수했습니다.',
+          userMessageId: optimisticUserMessage.id,
+          userText: text,
+          responseMessageId: null,
+          responseText: '',
+          hasResponse: false,
+          canDelete: true,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          answeredAt: null,
+          terminalAt: null,
+        });
+
+        shouldStickToBottomRef.current = true;
+        setShowScrollToBottom(false);
+        setMessages((previous) => {
+          const nextMessages = [...previous, optimisticUserMessage];
+          return optimisticActivityMessage ? [...nextMessages, optimisticActivityMessage] : nextMessages;
+        });
+        setActiveSystemStatus('즉시 응답 준비 중...');
+        setIsSystemStatusPending(true);
+      }
+
+      if (!socketRef.current || socketRef.current.readyState !== WebSocket.OPEN) {
+        setActiveSystemStatus('전송 재시도 중...');
+        pendingRequestsRef.current = [
+          ...pendingRequestsRef.current.filter((pending) => pending.requestId !== requestId),
+          outgoingRequest,
+        ];
+        if (mode === 'direct') {
+          updatePendingMessageStatus(requestId, 'retrying', 0);
+        }
+        setDraft('');
+        setComposerAttachments([]);
+        focusComposerAfterSend();
+        return;
+      }
+
+      try {
+        sendChatRequest(socketRef.current, outgoingRequest);
+      } catch {
+        setActiveSystemStatus('전송 재시도 중...');
+        pendingRequestsRef.current = [
+          ...pendingRequestsRef.current.filter((pending) => pending.requestId !== requestId),
+          outgoingRequest,
+        ];
+        if (mode === 'direct') {
+          updatePendingMessageStatus(requestId, 'retrying', 0);
+        }
+      }
+
+      setDraft('');
+      setComposerAttachments([]);
+      focusComposerAfterSend();
+    },
+    [
+      activeSessionId,
+      createActivityLogPlaceholder,
+      createChatMessage,
+      focusComposerAfterSend,
+      pendingRequestsRef,
+      sendChatRequest,
+      setActiveSystemStatus,
+      setComposerAttachments,
+      setDraft,
+      setIsSystemStatusPending,
+      setMessages,
+      setShowScrollToBottom,
+      setStoredChatSessionLastTypeId,
+      shouldStickToBottomRef,
+      socketRef,
+      syncConversationPreviewForRequest,
+      updatePendingMessageStatus,
+      upsertRequestItem,
+    ],
+  );
+
+  const sendMessage = useCallback(
+    (mode: 'queue' | 'direct') => {
+      if (isComposerAttachmentUploading) {
+        return;
+      }
+
+      const trimmed = buildOutgoingMessageText(draft, composerAttachments).trim();
+
+      if (!trimmed) {
+        return;
+      }
+
+      if (!selectedChatType) {
+        setMessages((previous) => [
+          ...previous.slice(-39),
+          createLocalMessage('현재 사용자에게 허용된 컨텍스트가 없습니다. 관리 페이지에서 컨텍스트 권한을 확인하세요.'),
+        ]);
+        return;
+      }
+
+      if (!selectedChatType.isTemplate) {
+        const recentContext = summarizeRecentContext(
+          messagesRef.current,
+          appConfigChat.maxContextMessages,
+          appConfigChat.maxContextChars,
+        );
+
+        if (recentContext.omittedCount > 0) {
+          setPendingContextConfirm({
+            mode,
+            text: trimmed,
+            chatTypeId: selectedChatType.id,
+            chatTypeLabel: selectedChatType.name,
+            chatTypeDescription: selectedChatType.description,
+            chatTypeIsTemplate: false,
+            includedContextCount: recentContext.includedCount,
+            omittedContextCount: recentContext.omittedCount,
+          });
+          return;
+        }
+      }
+
+      executeSendMessage({
+        mode,
+        text: trimmed,
+        chatTypeId: selectedChatType.id,
+        chatTypeLabel: selectedChatType.name,
+        chatTypeDescription: selectedChatType.description,
+        chatTypeIsTemplate: selectedChatType.isTemplate,
+        includedContextCount: 0,
+        omittedContextCount: 0,
+      });
+    },
+    [
+      appConfigChat.maxContextChars,
+      appConfigChat.maxContextMessages,
+      buildOutgoingMessageText,
+      composerAttachments,
+      createLocalMessage,
+      draft,
+      executeSendMessage,
+      isComposerAttachmentUploading,
+      messagesRef,
+      selectedChatType,
+      setMessages,
+      setPendingContextConfirm,
+      summarizeRecentContext,
+    ],
+  );
+
+  const handleSend = useCallback(() => {
+    sendMessage('queue');
+  }, [sendMessage]);
+
+  const handleSendImmediate = useCallback(() => {
+    sendMessage('direct');
+  }, [sendMessage]);
+
+  return {
+    executeSendMessage,
+    handleComposerFilesPicked,
+    handleSend,
+    handleSendImmediate,
+    sendMessage,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useConversationListController.ts b/src/app/main/chatV2/hooks/useConversationListController.ts
new file mode 100644
index 0000000..77a4338
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationListController.ts
@@ -0,0 +1 @@
+export { useConversationListData as useConversationListController } from './useConversationListData';
diff --git a/src/app/main/chatV2/hooks/useConversationListData.ts b/src/app/main/chatV2/hooks/useConversationListData.ts
new file mode 100644
index 0000000..a939282
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationListData.ts
@@ -0,0 +1,135 @@
+import { useEffect, useState, type Dispatch, type SetStateAction } from 'react';
+import type { ChatConversationSummary } from '../../mainChatPanel/types';
+import {
+  CHAT_CONVERSATIONS_UPDATED_EVENT,
+  readChatConversationsUpdatedEvent,
+} from '../data/chatClientEvents';
+import { chatGateway } from '../data/chatGateway';
+
+type UseConversationListDataOptions = {
+  requestedSessionId: string;
+};
+
+type UseConversationListDataResult = {
+  conversationItems: ChatConversationSummary[];
+  setConversationItems: Dispatch<SetStateAction<ChatConversationSummary[]>>;
+  isConversationListLoading: boolean;
+  reloadConversationItems: () => Promise<void>;
+  conversationSearch: string;
+  setConversationSearch: Dispatch<SetStateAction<string>>;
+};
+
+export function useConversationListData({
+  requestedSessionId,
+}: UseConversationListDataOptions): UseConversationListDataResult {
+  const [conversationItems, setConversationItems] = useState<ChatConversationSummary[]>([]);
+  const [isConversationListLoading, setIsConversationListLoading] = useState(false);
+  const [conversationSearch, setConversationSearch] = useState('');
+
+  const loadConversationItems = async () => {
+    setIsConversationListLoading(true);
+
+    try {
+      const items = await chatGateway.listConversations();
+      setConversationItems(items);
+    } catch {
+      setConversationItems([]);
+    } finally {
+      setIsConversationListLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    void chatGateway
+      .listConversations()
+      .then((items) => {
+        if (!isCancelled) {
+          setConversationItems(items);
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setConversationItems([]);
+        }
+      })
+      .finally(() => {
+        if (!isCancelled) {
+          setIsConversationListLoading(false);
+        }
+      });
+
+    setIsConversationListLoading(true);
+
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!requestedSessionId || isConversationListLoading) {
+      return;
+    }
+
+    if (conversationItems.some((item) => item.sessionId === requestedSessionId)) {
+      return;
+    }
+
+    let isCancelled = false;
+
+    const loadRequestedConversation = async () => {
+      try {
+        const response = await chatGateway.getConversationDetail(requestedSessionId);
+
+        if (isCancelled || response.item.sessionId !== requestedSessionId) {
+          return;
+        }
+
+        setConversationItems((previous) => {
+          const exists = previous.some((item) => item.sessionId === response.item.sessionId);
+          if (!exists) {
+            return [response.item, ...previous];
+          }
+
+          return previous.map((item) => (item.sessionId === response.item.sessionId ? response.item : item));
+        });
+      } catch {
+        // 유효하지 않은 세션은 이후 기본 빈 상태 흐름이 유지된다.
+      }
+    };
+
+    void loadRequestedConversation();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [conversationItems, isConversationListLoading, requestedSessionId]);
+
+  useEffect(() => {
+    const handleConversationsUpdated = (event: Event) => {
+      const detail = readChatConversationsUpdatedEvent(event);
+
+      if (!detail) {
+        return;
+      }
+
+      setConversationItems(detail.items);
+    };
+
+    window.addEventListener(CHAT_CONVERSATIONS_UPDATED_EVENT, handleConversationsUpdated as EventListener);
+
+    return () => {
+      window.removeEventListener(CHAT_CONVERSATIONS_UPDATED_EVENT, handleConversationsUpdated as EventListener);
+    };
+  }, []);
+
+  return {
+    conversationItems,
+    setConversationItems,
+    isConversationListLoading,
+    reloadConversationItems: loadConversationItems,
+    conversationSearch,
+    setConversationSearch,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useConversationRoomActionsController.ts b/src/app/main/chatV2/hooks/useConversationRoomActionsController.ts
new file mode 100644
index 0000000..29445ff
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationRoomActionsController.ts
@@ -0,0 +1,370 @@
+import { useCallback } from 'react';
+import { removeChatRuntimeJob } from '../../mainChatPanel';
+import { chatConnectionGateway } from '../data/chatConnectionGateway';
+import { chatGateway } from '../data/chatGateway';
+import type {
+  ChatComposerAttachment,
+  ChatConversationRequest,
+  ChatConversationSummary,
+  ChatMessage,
+} from '../../mainChatPanel/types';
+
+type PendingChatRequest = {
+  sessionId: string;
+  requestId: string;
+  text: string;
+  mode: 'queue' | 'direct';
+  chatTypeId: string;
+  chatTypeLabel: string;
+  chatTypeDescription: string;
+  chatTypeIsTemplate: boolean;
+  retryCount: number;
+  failed: boolean;
+};
+
+type UseConversationRoomActionsControllerOptions = {
+  activeSessionId: string;
+  requestedSessionId: string;
+  conversationItems: ChatConversationSummary[];
+  activeConversation: ChatConversationSummary | null;
+  editingConversationTitle: string;
+  isMobileViewport: boolean;
+  pendingRequestsRef: { current: PendingChatRequest[] };
+  sessionMessageCacheRef: { current: Map<string, ChatMessage[]> };
+  socketRef: { current: WebSocket | null };
+  setConversationItems: React.Dispatch<React.SetStateAction<ChatConversationSummary[]>>;
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+  setRequestItems: React.Dispatch<React.SetStateAction<ChatConversationRequest[]>>;
+  setActiveSessionId: (value: string) => void;
+  setDraft: (value: string) => void;
+  setComposerAttachments: React.Dispatch<React.SetStateAction<ChatComposerAttachment[]>>;
+  setCopiedMessageId: (value: number | null) => void;
+  setActivePreviewId: (value: string | null) => void;
+  setIsPreviewModalOpen: (value: boolean) => void;
+  setActiveSystemStatus: (value: string | null) => void;
+  setIsSystemStatusPending: (value: boolean) => void;
+  setIsResourceStripOpen: (value: boolean) => void;
+  setIsConversationPaneClosed: (value: boolean) => void;
+  setIsMobileConversationView: (value: boolean) => void;
+  setRenamingConversationSessionId: (value: string | null | ((current: string | null) => string | null)) => void;
+  setEditingConversationTitle: (value: string) => void;
+  setIsEditingConversationTitle: (value: boolean) => void;
+  updatePendingMessageStatus: (requestId: string, status: 'retrying' | 'failed' | null, retryCount?: number) => void;
+  sendChatRequest: (socket: WebSocket, request: PendingChatRequest) => void;
+  createLocalMessage: (text: string) => ChatMessage;
+  replaceChatSessionInUrl: (sessionId: string) => void;
+  messageApi: {
+    error: (content: string) => void;
+  };
+};
+
+export function useConversationRoomActionsController({
+  activeSessionId,
+  requestedSessionId,
+  conversationItems,
+  activeConversation,
+  editingConversationTitle,
+  isMobileViewport,
+  pendingRequestsRef,
+  sessionMessageCacheRef,
+  socketRef,
+  setConversationItems,
+  setMessages,
+  setRequestItems,
+  setActiveSessionId,
+  setDraft,
+  setComposerAttachments,
+  setCopiedMessageId,
+  setActivePreviewId,
+  setIsPreviewModalOpen,
+  setActiveSystemStatus,
+  setIsSystemStatusPending,
+  setIsResourceStripOpen,
+  setIsConversationPaneClosed,
+  setIsMobileConversationView,
+  setRenamingConversationSessionId,
+  setEditingConversationTitle,
+  setIsEditingConversationTitle,
+  updatePendingMessageStatus,
+  sendChatRequest,
+  createLocalMessage,
+  replaceChatSessionInUrl,
+  messageApi,
+}: UseConversationRoomActionsControllerOptions) {
+  const removeOptimisticRequestMessages = useCallback(
+    (requestId: string) => {
+      setMessages((previous) => previous.filter((message) => message.clientRequestId !== requestId));
+    },
+    [setMessages],
+  );
+
+  const retryPendingRequest = useCallback(
+    (requestId: string) => {
+      const currentRequest = pendingRequestsRef.current.find(
+        (request) => request.requestId === requestId && request.sessionId === activeSessionId,
+      );
+
+      if (!currentRequest) {
+        setMessages((previous) => [
+          ...previous.slice(-39),
+          createLocalMessage('재전송할 요청 정보를 찾지 못했습니다. 같은 내용을 다시 보내 주세요.'),
+        ]);
+        return;
+      }
+
+      const resetRequest: PendingChatRequest = {
+        ...currentRequest,
+        retryCount: 0,
+        failed: false,
+      };
+
+      setActiveSystemStatus('전송 재시도 중...');
+      setIsSystemStatusPending(true);
+
+      const socket = socketRef.current;
+
+      if (!socket || socket.readyState !== WebSocket.OPEN) {
+        updatePendingMessageStatus(requestId, 'retrying', 0);
+        pendingRequestsRef.current = [
+          ...pendingRequestsRef.current.filter((request) => request.requestId !== requestId),
+          resetRequest,
+        ];
+        return;
+      }
+
+      try {
+        sendChatRequest(socket, resetRequest);
+        updatePendingMessageStatus(requestId, null, 0);
+        pendingRequestsRef.current = pendingRequestsRef.current.filter((request) => request.requestId !== requestId);
+      } catch {
+        updatePendingMessageStatus(requestId, 'retrying', 0);
+        pendingRequestsRef.current = [
+          ...pendingRequestsRef.current.filter((request) => request.requestId !== requestId),
+          resetRequest,
+        ];
+      }
+    },
+    [
+      activeSessionId,
+      createLocalMessage,
+      pendingRequestsRef,
+      sendChatRequest,
+      setActiveSystemStatus,
+      setIsSystemStatusPending,
+      setMessages,
+      socketRef,
+      updatePendingMessageStatus,
+    ],
+  );
+
+  const cancelPendingRequest = useCallback(
+    (requestId: string) => {
+      const currentRequest = pendingRequestsRef.current.find(
+        (request) => request.requestId === requestId && request.sessionId === activeSessionId,
+      );
+
+      if (!currentRequest) {
+        removeOptimisticRequestMessages(requestId);
+        setActiveSystemStatus('미접수 요청을 화면에서 제거했습니다.');
+        setIsSystemStatusPending(false);
+        return;
+      }
+
+      pendingRequestsRef.current = pendingRequestsRef.current.filter((request) => request.requestId !== requestId);
+      removeOptimisticRequestMessages(requestId);
+      setRequestItems((previous) =>
+        previous.filter((item) => !(item.sessionId === activeSessionId && item.requestId === requestId)),
+      );
+      setActiveSystemStatus('실패한 요청을 취소했습니다.');
+      setIsSystemStatusPending(false);
+    },
+    [
+      activeSessionId,
+      pendingRequestsRef,
+      removeOptimisticRequestMessages,
+      setActiveSystemStatus,
+      setIsSystemStatusPending,
+      setRequestItems,
+    ],
+  );
+
+  const removeQueuedComposerRequest = useCallback(
+    async (requestId: string) => {
+      try {
+        await removeChatRuntimeJob(requestId);
+        setRequestItems((previous) =>
+          previous.map((item) =>
+            item.sessionId === activeSessionId && item.requestId === requestId
+              ? {
+                  ...item,
+                  status: 'removed',
+                  statusMessage: '대기열에서 제거되었습니다.',
+                  terminalAt: new Date().toISOString(),
+                  updatedAt: new Date().toISOString(),
+                }
+              : item,
+          ),
+        );
+        setActiveSystemStatus('대기 요청을 삭제했습니다.');
+        setIsSystemStatusPending(false);
+      } catch (error) {
+        setMessages((previous) => [
+          ...previous.slice(-39),
+          createLocalMessage(error instanceof Error ? error.message : '대기 요청 제거 중 오류가 발생했습니다.'),
+        ]);
+      }
+    },
+    [activeSessionId, createLocalMessage, setActiveSystemStatus, setIsSystemStatusPending, setMessages, setRequestItems],
+  );
+
+  const deleteStoredRequest = useCallback(
+    async (requestId: string) => {
+      try {
+        await chatGateway.deleteConversationRequest(activeSessionId, requestId);
+        setMessages((previous) => previous.filter((message) => message.clientRequestId !== requestId));
+        setRequestItems((previous) =>
+          previous.filter((item) => !(item.sessionId === activeSessionId && item.requestId === requestId)),
+        );
+        setConversationItems((previous) =>
+          previous.map((item) =>
+            item.sessionId === activeSessionId
+              ? {
+                  ...item,
+                  currentRequestId: item.currentRequestId === requestId ? null : item.currentRequestId,
+                  currentJobStatus: item.currentRequestId === requestId ? null : item.currentJobStatus,
+                  currentJobMessage: item.currentRequestId === requestId ? null : item.currentJobMessage,
+                  currentQueueSize: item.currentRequestId === requestId ? 0 : item.currentQueueSize,
+                }
+              : item,
+          ),
+        );
+        setActiveSystemStatus('요청을 삭제했습니다.');
+        setIsSystemStatusPending(false);
+      } catch (error) {
+        setMessages((previous) => [
+          ...previous.slice(-39),
+          createLocalMessage(error instanceof Error ? error.message : '요청 삭제 중 오류가 발생했습니다.'),
+        ]);
+      }
+    },
+    [
+      activeSessionId,
+      createLocalMessage,
+      setActiveSystemStatus,
+      setConversationItems,
+      setIsSystemStatusPending,
+      setMessages,
+      setRequestItems,
+    ],
+  );
+
+  const handleRenameConversation = useCallback(async () => {
+    if (!activeConversation) {
+      return;
+    }
+
+    const sessionId = activeConversation.sessionId;
+    const previousTitle = activeConversation.title;
+    const trimmedTitle = editingConversationTitle.trim();
+
+    if (!trimmedTitle || trimmedTitle === previousTitle) {
+      setIsEditingConversationTitle(false);
+      setEditingConversationTitle(previousTitle);
+      return;
+    }
+
+    setRenamingConversationSessionId(sessionId);
+    setConversationItems((previous) =>
+      previous.map((entry) => (entry.sessionId === sessionId ? { ...entry, title: trimmedTitle } : entry)),
+    );
+    setEditingConversationTitle(trimmedTitle);
+    setIsEditingConversationTitle(false);
+
+    try {
+      const item = await chatGateway.renameConversation(sessionId, trimmedTitle);
+      setConversationItems((previous) => previous.map((entry) => (entry.sessionId === item.sessionId ? item : entry)));
+      setEditingConversationTitle(item.title);
+    } catch (error) {
+      setConversationItems((previous) =>
+        previous.map((entry) => (entry.sessionId === sessionId ? { ...entry, title: previousTitle } : entry)),
+      );
+      setEditingConversationTitle(previousTitle);
+      messageApi.error(error instanceof Error ? error.message : '채팅방 이름 변경에 실패했습니다.');
+    } finally {
+      setRenamingConversationSessionId((current) => (current === sessionId ? null : current));
+    }
+  }, [
+    activeConversation,
+    editingConversationTitle,
+    messageApi,
+    setConversationItems,
+    setEditingConversationTitle,
+    setIsEditingConversationTitle,
+    setRenamingConversationSessionId,
+  ]);
+
+  const handleDeleteConversation = useCallback(
+    async (sessionId: string) => {
+      try {
+        await chatGateway.deleteConversation(sessionId);
+        const remaining = conversationItems.filter((entry) => entry.sessionId !== sessionId);
+        sessionMessageCacheRef.current.delete(sessionId);
+        setConversationItems(remaining);
+
+        if (sessionId === activeSessionId) {
+          replaceChatSessionInUrl('');
+          chatConnectionGateway.resetLastReceivedEventId('');
+          setActiveSessionId('');
+          setMessages([]);
+          setRequestItems([]);
+          setDraft('');
+          setComposerAttachments([]);
+          setCopiedMessageId(null);
+          setActivePreviewId(null);
+          setIsPreviewModalOpen(false);
+          setActiveSystemStatus(null);
+          setIsSystemStatusPending(false);
+          setIsResourceStripOpen(false);
+          setIsConversationPaneClosed(false);
+          setIsMobileConversationView(!isMobileViewport);
+        } else if (requestedSessionId === sessionId) {
+          replaceChatSessionInUrl(activeSessionId);
+        }
+      } catch (error) {
+        messageApi.error(error instanceof Error ? error.message : '대화방 삭제 중 오류가 발생했습니다.');
+      }
+    },
+    [
+      activeSessionId,
+      conversationItems,
+      isMobileViewport,
+      messageApi,
+      replaceChatSessionInUrl,
+      requestedSessionId,
+      sessionMessageCacheRef,
+      setActivePreviewId,
+      setActiveSessionId,
+      setActiveSystemStatus,
+      setComposerAttachments,
+      setConversationItems,
+      setCopiedMessageId,
+      setDraft,
+      setIsConversationPaneClosed,
+      setIsMobileConversationView,
+      setIsPreviewModalOpen,
+      setIsResourceStripOpen,
+      setIsSystemStatusPending,
+      setMessages,
+      setRequestItems,
+    ],
+  );
+
+  return {
+    cancelPendingRequest,
+    deleteStoredRequest,
+    handleDeleteConversation,
+    handleRenameConversation,
+    removeQueuedComposerRequest,
+    retryPendingRequest,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useConversationRoomController.ts b/src/app/main/chatV2/hooks/useConversationRoomController.ts
new file mode 100644
index 0000000..2bf5eba
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationRoomController.ts
@@ -0,0 +1 @@
+export { useConversationRoomData as useConversationRoomController } from './useConversationRoomData';
diff --git a/src/app/main/chatV2/hooks/useConversationRoomData.ts b/src/app/main/chatV2/hooks/useConversationRoomData.ts
new file mode 100644
index 0000000..9ac8a47
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationRoomData.ts
@@ -0,0 +1,307 @@
+import { useEffect, type Dispatch, type MutableRefObject, type SetStateAction } from 'react';
+import { mergeRecoveredChatMessages } from '../../mainChatPanel/chatUtils';
+import { chatGateway } from '../data/chatGateway';
+import type {
+  ChatConversationRequest,
+  ChatConversationSummary,
+  ChatMessage,
+} from '../../mainChatPanel/types';
+
+const INITIAL_CONVERSATION_MESSAGE_LIMIT = 3;
+const OLDER_CONVERSATION_MESSAGE_PAGE_SIZE = 20;
+
+function getCachedSessionMessages(cache: Map<string, ChatMessage[]>, sessionId: string) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return [] as ChatMessage[];
+  }
+
+  return cache.get(normalizedSessionId) ?? [];
+}
+
+function getBestAvailableSessionMessages(
+  cache: Map<string, ChatMessage[]>,
+  sessionId: string,
+  currentSessionId: string,
+  currentMessages: ChatMessage[],
+) {
+  const cachedMessages = getCachedSessionMessages(cache, sessionId);
+
+  if (sessionId !== currentSessionId || currentMessages.length === 0) {
+    return cachedMessages;
+  }
+
+  return mergeRecoveredChatMessages(cachedMessages, currentMessages);
+}
+
+type UseConversationRoomDataOptions = {
+  activeSessionId: string;
+  connectionState: 'connecting' | 'connected' | 'disconnected';
+  shouldBlockConversationWhileLoading: (sessionId: string) => boolean;
+  captureViewportRestoreSnapshot: () => void;
+  sessionMessageCacheRef: MutableRefObject<Map<string, ChatMessage[]>>;
+  messagesRef: MutableRefObject<ChatMessage[]>;
+  pendingViewportRestoreRef: MutableRefObject<boolean>;
+  shouldRestoreConversationAfterReconnectRef: MutableRefObject<boolean>;
+  setConversationItems: Dispatch<SetStateAction<ChatConversationSummary[]>>;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  setRequestItems: Dispatch<SetStateAction<ChatConversationRequest[]>>;
+  setConversationLoadingLabel: Dispatch<SetStateAction<string>>;
+  setIsConversationContentLoading: Dispatch<SetStateAction<boolean>>;
+  setIsDeferringAuxiliaryChatRequests: Dispatch<SetStateAction<boolean>>;
+  setHasOlderMessages: Dispatch<SetStateAction<boolean>>;
+  setOldestLoadedMessageId: Dispatch<SetStateAction<number | null>>;
+  setIsLoadingOlderMessages: Dispatch<SetStateAction<boolean>>;
+  queueViewportPrependRestore: (previousScrollHeight: number, previousScrollTop: number) => void;
+  viewportRef: MutableRefObject<HTMLDivElement | null>;
+};
+
+export function useConversationRoomData({
+  activeSessionId,
+  connectionState,
+  shouldBlockConversationWhileLoading,
+  captureViewportRestoreSnapshot,
+  sessionMessageCacheRef,
+  messagesRef,
+  pendingViewportRestoreRef,
+  shouldRestoreConversationAfterReconnectRef,
+  setConversationItems,
+  setMessages,
+  setRequestItems,
+  setConversationLoadingLabel,
+  setIsConversationContentLoading,
+  setIsDeferringAuxiliaryChatRequests,
+  setHasOlderMessages,
+  setOldestLoadedMessageId,
+  setIsLoadingOlderMessages,
+  queueViewportPrependRestore,
+  viewportRef,
+}: UseConversationRoomDataOptions) {
+  useEffect(() => {
+    if (!activeSessionId.trim()) {
+      setMessages([]);
+      setRequestItems([]);
+      setIsConversationContentLoading(false);
+      setIsLoadingOlderMessages(false);
+      setHasOlderMessages(false);
+      setOldestLoadedMessageId(null);
+      return;
+    }
+
+    let isCancelled = false;
+    const requestedSessionId = activeSessionId;
+
+    const loadConversationDetail = async () => {
+      captureViewportRestoreSnapshot();
+      pendingViewportRestoreRef.current = true;
+      setConversationLoadingLabel('대화 내용을 불러오는 중입니다.');
+      setIsConversationContentLoading(shouldBlockConversationWhileLoading(requestedSessionId));
+      setIsDeferringAuxiliaryChatRequests(true);
+
+      try {
+        const response = await chatGateway.getConversationDetail(requestedSessionId, {
+          limit: INITIAL_CONVERSATION_MESSAGE_LIMIT,
+        });
+
+        if (!isCancelled && response.item.sessionId === requestedSessionId) {
+          setConversationItems((previous) => {
+            const exists = previous.some((item) => item.sessionId === response.item.sessionId);
+            if (!exists) {
+              return [response.item, ...previous];
+            }
+
+            return previous.map((item) => (item.sessionId === response.item.sessionId ? response.item : item));
+          });
+
+          const baseMessages = getBestAvailableSessionMessages(
+            sessionMessageCacheRef.current,
+            requestedSessionId,
+            activeSessionId,
+            messagesRef.current,
+          );
+          const nextMessages = mergeRecoveredChatMessages(baseMessages, response.messages);
+          sessionMessageCacheRef.current.set(requestedSessionId, nextMessages);
+          setMessages(nextMessages);
+          setRequestItems(response.requests);
+          setHasOlderMessages(response.hasOlderMessages);
+          setOldestLoadedMessageId(response.oldestLoadedMessageId);
+        }
+      } catch {
+        if (!isCancelled) {
+          const cachedMessages = getBestAvailableSessionMessages(
+            sessionMessageCacheRef.current,
+            requestedSessionId,
+            activeSessionId,
+            messagesRef.current,
+          );
+
+          if (cachedMessages.length > 0) {
+            setMessages(cachedMessages);
+          }
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsConversationContentLoading(false);
+          setIsDeferringAuxiliaryChatRequests(false);
+        }
+      }
+    };
+
+    void loadConversationDetail();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [
+    activeSessionId,
+    captureViewportRestoreSnapshot,
+    messagesRef,
+    pendingViewportRestoreRef,
+    sessionMessageCacheRef,
+    setConversationItems,
+    setConversationLoadingLabel,
+    setIsConversationContentLoading,
+    setIsDeferringAuxiliaryChatRequests,
+    setHasOlderMessages,
+    setMessages,
+    setOldestLoadedMessageId,
+    setRequestItems,
+    shouldBlockConversationWhileLoading,
+  ]);
+
+  useEffect(() => {
+    if (connectionState !== 'connected' || !shouldRestoreConversationAfterReconnectRef.current) {
+      return;
+    }
+
+    let isCancelled = false;
+    const requestedSessionId = activeSessionId;
+
+    const restoreConversationAfterReconnect = async () => {
+      setIsDeferringAuxiliaryChatRequests(true);
+
+      try {
+        const response = await chatGateway.getConversationDetail(requestedSessionId, {
+          limit: Math.max(INITIAL_CONVERSATION_MESSAGE_LIMIT, messagesRef.current.length || 0),
+        });
+
+        if (!isCancelled && response.item.sessionId === requestedSessionId) {
+          const baseMessages = getBestAvailableSessionMessages(
+            sessionMessageCacheRef.current,
+            requestedSessionId,
+            activeSessionId,
+            messagesRef.current,
+          );
+          const nextMessages = mergeRecoveredChatMessages(baseMessages, response.messages);
+          const hasMessageDiff = nextMessages !== baseMessages;
+
+          if (hasMessageDiff) {
+            captureViewportRestoreSnapshot();
+            pendingViewportRestoreRef.current = true;
+            setConversationLoadingLabel('채팅방을 다시 연결하고 내용을 복구하는 중입니다.');
+            setIsConversationContentLoading(true);
+          }
+
+          setConversationItems((previous) => {
+            const exists = previous.some((item) => item.sessionId === response.item.sessionId);
+            if (!exists) {
+              return [response.item, ...previous];
+            }
+
+            return previous.map((item) => (item.sessionId === response.item.sessionId ? response.item : item));
+          });
+          setRequestItems(response.requests);
+          setHasOlderMessages(response.hasOlderMessages);
+          setOldestLoadedMessageId(response.oldestLoadedMessageId);
+
+          if (hasMessageDiff) {
+            sessionMessageCacheRef.current.set(requestedSessionId, nextMessages);
+            setMessages(nextMessages);
+            window.requestAnimationFrame(() => {
+              if (!isCancelled) {
+                setIsConversationContentLoading(false);
+              }
+            });
+          }
+        }
+      } catch {
+        if (!isCancelled) {
+          setIsConversationContentLoading(false);
+        }
+      } finally {
+        if (!isCancelled) {
+          shouldRestoreConversationAfterReconnectRef.current = false;
+          if (!pendingViewportRestoreRef.current) {
+            setIsConversationContentLoading(false);
+          }
+          setIsDeferringAuxiliaryChatRequests(false);
+        }
+      }
+    };
+
+    void restoreConversationAfterReconnect();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [
+    activeSessionId,
+    captureViewportRestoreSnapshot,
+    connectionState,
+    messagesRef,
+    pendingViewportRestoreRef,
+    sessionMessageCacheRef,
+    setConversationItems,
+    setConversationLoadingLabel,
+    setIsConversationContentLoading,
+    setIsDeferringAuxiliaryChatRequests,
+    setHasOlderMessages,
+    setMessages,
+    setOldestLoadedMessageId,
+    setRequestItems,
+    shouldRestoreConversationAfterReconnectRef,
+  ]);
+
+  const loadOlderMessages = async () => {
+    const requestedSessionId = activeSessionId.trim();
+    const oldestVisibleMessageId = messagesRef.current[0]?.id ?? null;
+
+    if (!requestedSessionId || oldestVisibleMessageId == null) {
+      return;
+    }
+
+    setIsLoadingOlderMessages(true);
+
+    try {
+      const response = await chatGateway.getConversationDetail(requestedSessionId, {
+        limit: OLDER_CONVERSATION_MESSAGE_PAGE_SIZE,
+        beforeMessageId: oldestVisibleMessageId,
+      });
+
+      if (response.item.sessionId !== requestedSessionId || response.messages.length === 0) {
+        setHasOlderMessages(response.hasOlderMessages);
+        setOldestLoadedMessageId(response.oldestLoadedMessageId);
+        return;
+      }
+
+      const viewport = viewportRef.current;
+      const previousScrollHeight = viewport?.scrollHeight ?? 0;
+      const previousScrollTop = viewport?.scrollTop ?? 0;
+      const nextMessages = mergeRecoveredChatMessages(messagesRef.current, response.messages);
+
+      queueViewportPrependRestore(previousScrollHeight, previousScrollTop);
+      sessionMessageCacheRef.current.set(requestedSessionId, nextMessages);
+      setMessages(nextMessages);
+      setRequestItems(response.requests);
+      setHasOlderMessages(response.hasOlderMessages);
+      setOldestLoadedMessageId(response.oldestLoadedMessageId);
+    } finally {
+      setIsLoadingOlderMessages(false);
+    }
+  };
+
+  return {
+    loadOlderMessages,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useConversationViewController.ts b/src/app/main/chatV2/hooks/useConversationViewController.ts
new file mode 100644
index 0000000..9dfc517
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationViewController.ts
@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ChatComposerAttachment, ChatMessage } from '../../mainChatPanel/types';
+
+type PreviewItem = {
+  id: string;
+  label: string;
+  url: string;
+  kind: 'image' | 'video' | 'markdown' | 'code' | 'document' | 'pdf' | 'file';
+  source: 'message' | 'context';
+};
+
+type UseConversationViewControllerOptions = {
+  activeSessionId: string;
+  activeView: 'chat' | 'runtime' | 'errors';
+  previewItems: PreviewItem[];
+  selectedChatTypeId: string | null;
+  composerRef: { current: { focus: (options?: { cursor?: 'start' | 'end' | 'all' }) => void } | null };
+  sessionMessageCacheRef: { current: Map<string, ChatMessage[]> };
+  setActiveSystemStatus: (value: string | null) => void;
+  setComposerAttachments: React.Dispatch<React.SetStateAction<ChatComposerAttachment[]>>;
+  setCopiedMessageId: (value: number | null) => void;
+  setDraft: React.Dispatch<React.SetStateAction<string>>;
+  setIsResourceStripOpen: (value: boolean) => void;
+  setIsSystemStatusPending: (value: boolean) => void;
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+};
+
+export function useConversationViewController({
+  activeSessionId,
+  activeView,
+  composerRef,
+  previewItems,
+  selectedChatTypeId,
+  sessionMessageCacheRef,
+  setActiveSystemStatus,
+  setComposerAttachments,
+  setCopiedMessageId,
+  setDraft,
+  setIsResourceStripOpen,
+  setIsSystemStatusPending,
+  setMessages,
+}: UseConversationViewControllerOptions) {
+  const previousSessionIdRef = useRef(activeSessionId);
+  const [activePreviewId, setActivePreviewId] = useState<string | null>(null);
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
+  const [previewText, setPreviewText] = useState('');
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [previewError, setPreviewError] = useState('');
+  const [previewContentType, setPreviewContentType] = useState('');
+
+  const activePreview = previewItems.find((item) => item.id === activePreviewId) ?? previewItems[0] ?? null;
+
+  useEffect(() => {
+    const hasSessionChanged = previousSessionIdRef.current !== activeSessionId;
+
+    if (!hasSessionChanged) {
+      return;
+    }
+
+    previousSessionIdRef.current = activeSessionId;
+
+    setMessages(sessionMessageCacheRef.current.get(activeSessionId)?.slice() ?? []);
+    setDraft('');
+    setComposerAttachments([]);
+    setCopiedMessageId(null);
+    setActivePreviewId(null);
+    setIsPreviewModalOpen(false);
+    setActiveSystemStatus(null);
+    setIsSystemStatusPending(false);
+    setIsResourceStripOpen(false);
+  }, [
+    activeSessionId,
+    sessionMessageCacheRef,
+    setActiveSystemStatus,
+    setComposerAttachments,
+    setCopiedMessageId,
+    setDraft,
+    setIsResourceStripOpen,
+    setIsSystemStatusPending,
+    setMessages,
+  ]);
+
+  useEffect(() => {
+    if (!activePreviewId) {
+      return;
+    }
+
+    if (previewItems.some((item) => item.id === activePreviewId)) {
+      return;
+    }
+
+    setActivePreviewId(null);
+    setIsPreviewModalOpen(false);
+  }, [activePreviewId, previewItems]);
+
+  useEffect(() => {
+    if (!isPreviewModalOpen || !activePreview) {
+      setPreviewText('');
+      setPreviewError('');
+      setPreviewContentType('');
+      setIsPreviewLoading(false);
+      return;
+    }
+
+    if (activePreview.kind === 'image' || activePreview.kind === 'video' || activePreview.kind === 'pdf') {
+      setPreviewText('');
+      setPreviewError('');
+      setPreviewContentType('');
+      setIsPreviewLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    setIsPreviewLoading(true);
+    setPreviewError('');
+    setPreviewContentType('');
+
+    fetch(activePreview.url, {
+      cache: 'no-store',
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`${response.status} ${response.statusText}`);
+        }
+
+        setPreviewContentType(response.headers.get('content-type') ?? '');
+        const text = await response.text();
+        setPreviewText(text.slice(0, 20000));
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+
+        setPreviewText('');
+        setPreviewContentType('');
+        setPreviewError(error instanceof Error ? error.message : 'preview를 가져오지 못했습니다.');
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) {
+          setIsPreviewLoading(false);
+        }
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, [activePreview, isPreviewModalOpen]);
+
+  useEffect(() => {
+    if (activeView !== 'chat') {
+      return;
+    }
+
+    composerRef.current?.focus({ cursor: 'end' });
+  }, [activeView, composerRef, selectedChatTypeId]);
+
+  useEffect(() => {
+    if (activeView !== 'chat') {
+      return undefined;
+    }
+
+    const handleWindowKeyDown = (event: KeyboardEvent) => {
+      const isTextEntryTarget =
+        event.target instanceof HTMLElement &&
+        (event.target.isContentEditable ||
+          ['input', 'textarea', 'select'].includes(event.target.tagName.toLowerCase()) ||
+          event.target.closest('[contenteditable="true"]'));
+
+      if (event.metaKey || event.ctrlKey || event.altKey || isTextEntryTarget) {
+        return;
+      }
+
+      if (event.key === '/') {
+        event.preventDefault();
+        composerRef.current?.focus({ cursor: 'end' });
+        return;
+      }
+
+      if (event.key.length === 1) {
+        event.preventDefault();
+        composerRef.current?.focus({ cursor: 'end' });
+        setDraft((previous) => previous + event.key);
+      }
+    };
+
+    window.addEventListener('keydown', handleWindowKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleWindowKeyDown);
+    };
+  }, [activeView, composerRef, setDraft]);
+
+  return {
+    activePreview,
+    activePreviewId,
+    isPreviewLoading,
+    isPreviewModalOpen,
+    previewContentType,
+    previewError,
+    previewText,
+    setActivePreviewId,
+    setIsPreviewModalOpen,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useConversationViewportController.ts b/src/app/main/chatV2/hooks/useConversationViewportController.ts
new file mode 100644
index 0000000..20b0a93
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useConversationViewportController.ts
@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useRef, useState, type TouchEvent } from 'react';
+import type {
+  ChatConversationSummary,
+  ChatMessage,
+  ChatRuntimeSnapshot,
+} from '../../mainChatPanel/types';
+
+type UseConversationViewportControllerOptions = {
+  activeConversation: ChatConversationSummary | null;
+  activeQueuedComposerRequestsCount: number;
+  activeRuntimeStatus: string | null;
+  chatMessageCount: number;
+  chatMessageSyncKey: string;
+  connectionState: 'connecting' | 'connected' | 'disconnected';
+  isConversationContentLoading: boolean;
+  messages: ChatMessage[];
+  runtimeSnapshot: ChatRuntimeSnapshot | null;
+  viewportRef: { current: HTMLDivElement | null };
+  hasOlderMessages: boolean;
+  isLoadingOlderMessages: boolean;
+  onLoadOlderMessages: () => void | Promise<void>;
+  mapJobStatusLabel: (
+    item: Pick<ChatConversationSummary, 'currentJobStatus' | 'currentJobMessage' | 'currentQueueSize'>,
+  ) => string;
+  mapSystemStatusMessage: (text: string) => string | null;
+  isActivityLogMessage: (message: ChatMessage) => boolean;
+};
+
+export function useConversationViewportController({
+  activeConversation,
+  activeQueuedComposerRequestsCount,
+  activeRuntimeStatus,
+  chatMessageCount,
+  chatMessageSyncKey,
+  connectionState,
+  isConversationContentLoading,
+  messages,
+  runtimeSnapshot,
+  viewportRef,
+  hasOlderMessages,
+  isLoadingOlderMessages,
+  onLoadOlderMessages,
+  mapJobStatusLabel,
+  mapSystemStatusMessage,
+  isActivityLogMessage,
+}: UseConversationViewportControllerOptions) {
+  const [activeSystemStatus, setActiveSystemStatus] = useState<string | null>(null);
+  const [isSystemStatusPending, setIsSystemStatusPending] = useState(false);
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  const systemStatusTimerRef = useRef<number | null>(null);
+  const restoreAutoScrollFrameRef = useRef<number | null>(null);
+  const shouldStickToBottomRef = useRef(true);
+  const pendingViewportRestoreRef = useRef(false);
+  const pendingPrependRestoreRef = useRef<{
+    previousScrollHeight: number;
+    previousScrollTop: number;
+  } | null>(null);
+  const viewportRestoreSnapshotRef = useRef<{
+    shouldStickToBottom: boolean;
+    offsetFromBottom: number;
+  } | null>(null);
+  const touchStartYRef = useRef<number | null>(null);
+  const touchPullActiveRef = useRef(false);
+  const [pullToLoadDistance, setPullToLoadDistance] = useState(0);
+  const [isPullToLoadArmed, setIsPullToLoadArmed] = useState(false);
+
+  const clearSystemStatusTimer = useCallback(() => {
+    if (systemStatusTimerRef.current !== null) {
+      window.clearTimeout(systemStatusTimerRef.current);
+      systemStatusTimerRef.current = null;
+    }
+  }, []);
+
+  const scrollViewportToBottom = useCallback(
+    (behavior: ScrollBehavior = 'smooth') => {
+      const viewport = viewportRef.current;
+
+      if (!viewport) {
+        return;
+      }
+
+      viewport.scrollTo({
+        top: viewport.scrollHeight,
+        behavior,
+      });
+    },
+    [viewportRef],
+  );
+
+  const scheduleViewportBottomSync = useCallback(
+    (frameCount = 6) => {
+      if (restoreAutoScrollFrameRef.current !== null) {
+        window.cancelAnimationFrame(restoreAutoScrollFrameRef.current);
+        restoreAutoScrollFrameRef.current = null;
+      }
+
+      const run = (remainingFrames: number) => {
+        restoreAutoScrollFrameRef.current = window.requestAnimationFrame(() => {
+          if (!shouldStickToBottomRef.current || isConversationContentLoading) {
+            restoreAutoScrollFrameRef.current = null;
+            return;
+          }
+
+          setShowScrollToBottom(false);
+          scrollViewportToBottom('auto');
+
+          if (remainingFrames <= 1) {
+            restoreAutoScrollFrameRef.current = null;
+            return;
+          }
+
+          run(remainingFrames - 1);
+        });
+      };
+
+      run(frameCount);
+    },
+    [isConversationContentLoading, scrollViewportToBottom],
+  );
+
+  const handleViewportScroll = useCallback(() => {
+    const viewport = viewportRef.current;
+
+    if (!viewport) {
+      return;
+    }
+
+    const remainingDistance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    const isNearBottom = remainingDistance <= 24;
+
+    shouldStickToBottomRef.current = isNearBottom;
+    setShowScrollToBottom(!isNearBottom);
+  }, [viewportRef]);
+
+  const captureViewportRestoreSnapshot = useCallback(() => {
+    const viewport = viewportRef.current;
+
+    if (!viewport) {
+      viewportRestoreSnapshotRef.current = {
+        shouldStickToBottom: shouldStickToBottomRef.current,
+        offsetFromBottom: 0,
+      };
+      return;
+    }
+
+    viewportRestoreSnapshotRef.current = {
+      shouldStickToBottom: shouldStickToBottomRef.current,
+      offsetFromBottom: Math.max(0, viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight),
+    };
+  }, [viewportRef]);
+
+  const queueViewportPrependRestore = useCallback((previousScrollHeight: number, previousScrollTop: number) => {
+    pendingPrependRestoreRef.current = {
+      previousScrollHeight,
+      previousScrollTop,
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!shouldStickToBottomRef.current) {
+      return;
+    }
+
+    scrollViewportToBottom(chatMessageCount > 1 ? 'smooth' : 'auto');
+  }, [chatMessageCount, chatMessageSyncKey, scrollViewportToBottom]);
+
+  useEffect(() => {
+    if (isConversationContentLoading || !shouldStickToBottomRef.current) {
+      return;
+    }
+
+    scheduleViewportBottomSync();
+
+    return () => {
+      if (restoreAutoScrollFrameRef.current !== null) {
+        window.cancelAnimationFrame(restoreAutoScrollFrameRef.current);
+        restoreAutoScrollFrameRef.current = null;
+      }
+    };
+  }, [activeConversation?.sessionId, chatMessageSyncKey, isConversationContentLoading, scheduleViewportBottomSync]);
+
+  useEffect(() => {
+    const pendingPrependRestore = pendingPrependRestoreRef.current;
+
+    if (!pendingPrependRestore) {
+      return;
+    }
+
+    pendingPrependRestoreRef.current = null;
+
+    const frameId = window.requestAnimationFrame(() => {
+      const viewport = viewportRef.current;
+
+      if (!viewport) {
+        return;
+      }
+
+      const nextScrollTop =
+        pendingPrependRestore.previousScrollTop + (viewport.scrollHeight - pendingPrependRestore.previousScrollHeight);
+      viewport.scrollTop = Math.max(0, nextScrollTop);
+      handleViewportScroll();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [chatMessageCount, chatMessageSyncKey, handleViewportScroll, viewportRef]);
+
+  useEffect(() => {
+    if (isConversationContentLoading || !pendingViewportRestoreRef.current) {
+      return;
+    }
+
+    const restoreSnapshot = viewportRestoreSnapshotRef.current;
+
+    pendingViewportRestoreRef.current = false;
+    viewportRestoreSnapshotRef.current = null;
+
+    const frameId = window.requestAnimationFrame(() => {
+      const viewport = viewportRef.current;
+
+      if (!viewport) {
+        return;
+      }
+
+      if (!restoreSnapshot || restoreSnapshot.shouldStickToBottom) {
+        shouldStickToBottomRef.current = true;
+        setShowScrollToBottom(false);
+        scrollViewportToBottom('auto');
+        return;
+      }
+
+      shouldStickToBottomRef.current = false;
+      viewport.scrollTop = Math.max(
+        0,
+        viewport.scrollHeight - viewport.clientHeight - restoreSnapshot.offsetFromBottom,
+      );
+      handleViewportScroll();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [
+    chatMessageCount,
+    handleViewportScroll,
+    isConversationContentLoading,
+    scrollViewportToBottom,
+    viewportRef,
+  ]);
+
+  const handleViewportTouchStart = useCallback((event: TouchEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current;
+
+    if (!viewport || viewport.scrollTop > 0 || !hasOlderMessages || isLoadingOlderMessages) {
+      touchStartYRef.current = null;
+      touchPullActiveRef.current = false;
+      return;
+    }
+
+    touchStartYRef.current = event.touches[0]?.clientY ?? null;
+    touchPullActiveRef.current = true;
+  }, [hasOlderMessages, isLoadingOlderMessages, viewportRef]);
+
+  const handleViewportTouchMove = useCallback((event: TouchEvent<HTMLDivElement>) => {
+    if (!touchPullActiveRef.current || touchStartYRef.current == null) {
+      return;
+    }
+
+    const viewport = viewportRef.current;
+    const currentY = event.touches[0]?.clientY ?? null;
+
+    if (!viewport || currentY == null || viewport.scrollTop > 0) {
+      touchPullActiveRef.current = false;
+      touchStartYRef.current = null;
+      setPullToLoadDistance(0);
+      setIsPullToLoadArmed(false);
+      return;
+    }
+
+    const deltaY = Math.max(0, currentY - touchStartYRef.current);
+    const nextDistance = Math.min(96, deltaY * 0.45);
+
+    if (nextDistance > 0) {
+      event.preventDefault();
+    }
+
+    setPullToLoadDistance(nextDistance);
+    setIsPullToLoadArmed(nextDistance >= 52);
+  }, [viewportRef]);
+
+  const resetPullToLoad = useCallback(() => {
+    touchPullActiveRef.current = false;
+    touchStartYRef.current = null;
+    setPullToLoadDistance(0);
+    setIsPullToLoadArmed(false);
+  }, []);
+
+  const handleViewportTouchEnd = useCallback(() => {
+    const shouldLoadOlder = touchPullActiveRef.current && isPullToLoadArmed && hasOlderMessages && !isLoadingOlderMessages;
+
+    resetPullToLoad();
+
+    if (shouldLoadOlder) {
+      void onLoadOlderMessages();
+    }
+  }, [hasOlderMessages, isLoadingOlderMessages, isPullToLoadArmed, onLoadOlderMessages, resetPullToLoad]);
+
+  useEffect(() => {
+    if (connectionState === 'disconnected') {
+      clearSystemStatusTimer();
+      setActiveSystemStatus('워크서버 연결이 끊어졌습니다. 실제 처리 상태를 다시 확인하는 중입니다.');
+      setIsSystemStatusPending(false);
+      return clearSystemStatusTimer;
+    }
+
+    if (activeRuntimeStatus) {
+      clearSystemStatusTimer();
+      setActiveSystemStatus(activeRuntimeStatus);
+      setIsSystemStatusPending(true);
+      return clearSystemStatusTimer;
+    }
+
+    if (activeConversation?.currentJobStatus && !runtimeSnapshot) {
+      clearSystemStatusTimer();
+      setActiveSystemStatus(mapJobStatusLabel(activeConversation));
+      setIsSystemStatusPending(
+        activeConversation.currentJobStatus === 'queued' || activeConversation.currentJobStatus === 'started',
+      );
+      return clearSystemStatusTimer;
+    }
+
+    if (activeQueuedComposerRequestsCount > 0) {
+      clearSystemStatusTimer();
+      setActiveSystemStatus(`실제 대기열 ${activeQueuedComposerRequestsCount}건`);
+      setIsSystemStatusPending(true);
+      return clearSystemStatusTimer;
+    }
+
+    clearSystemStatusTimer();
+    setActiveSystemStatus(null);
+    setIsSystemStatusPending(false);
+
+    const latestMessage = messages[messages.length - 1];
+
+    if (!latestMessage || isActivityLogMessage(latestMessage) || latestMessage.author !== 'system') {
+      return clearSystemStatusTimer;
+    }
+
+    const isTerminalStatus =
+      latestMessage.text.startsWith('요청 처리가 끝났습니다.') ||
+      latestMessage.text.startsWith('즉시 요청 처리가 끝났습니다.') ||
+      latestMessage.text.startsWith('요청 처리 중 오류가 발생했습니다.');
+
+    const nextStatus = mapSystemStatusMessage(latestMessage.text);
+    if (!nextStatus || isTerminalStatus) {
+      return clearSystemStatusTimer;
+    }
+
+    setActiveSystemStatus(nextStatus);
+    setIsSystemStatusPending(true);
+
+    return clearSystemStatusTimer;
+  }, [
+    activeConversation,
+    activeQueuedComposerRequestsCount,
+    activeRuntimeStatus,
+    clearSystemStatusTimer,
+    connectionState,
+    isActivityLogMessage,
+    mapJobStatusLabel,
+    mapSystemStatusMessage,
+    messages,
+    runtimeSnapshot,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      clearSystemStatusTimer();
+
+      if (restoreAutoScrollFrameRef.current !== null) {
+        window.cancelAnimationFrame(restoreAutoScrollFrameRef.current);
+      }
+    };
+  }, [clearSystemStatusTimer]);
+
+  return {
+    activeSystemStatus,
+    captureViewportRestoreSnapshot,
+    handleViewportScroll,
+    isSystemStatusPending,
+    pendingViewportRestoreRef,
+    scrollViewportToBottom,
+    setActiveSystemStatus,
+    setIsSystemStatusPending,
+    setShowScrollToBottom,
+    shouldStickToBottomRef,
+    showScrollToBottom,
+    handleViewportTouchEnd,
+    handleViewportTouchMove,
+    handleViewportTouchStart,
+    isPullToLoadArmed,
+    pullToLoadDistance,
+    queueViewportPrependRestore,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useNotificationCenterData.ts b/src/app/main/chatV2/hooks/useNotificationCenterData.ts
new file mode 100644
index 0000000..3f9ec9c
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useNotificationCenterData.ts
@@ -0,0 +1,171 @@
+import { useEffect, useState } from 'react';
+import {
+  NOTIFICATION_MESSAGES_UPDATED_EVENT,
+  deleteNotificationMessage,
+  fetchNotificationMessage,
+  fetchNotificationMessages,
+  updateNotificationMessageReadState,
+  type NotificationMessageItem,
+} from '../../notificationApi';
+import { useUnreadCounts } from './useUnreadCounts';
+
+function mergeMessageItem(items: NotificationMessageItem[], nextItem: NotificationMessageItem) {
+  const hasItem = items.some((item) => item.id === nextItem.id);
+
+  if (!hasItem) {
+    return [nextItem, ...items];
+  }
+
+  return items.map((item) => (item.id === nextItem.id ? nextItem : item));
+}
+
+export function useNotificationCenterData(drawerOpen: boolean) {
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [messages, setMessages] = useState<NotificationMessageItem[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<NotificationMessageItem | null>(null);
+  const [listLoading, setListLoading] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [toggleReadLoading, setToggleReadLoading] = useState(false);
+  const [deletingMessageId, setDeletingMessageId] = useState<number | null>(null);
+  const [listError, setListError] = useState<string | null>(null);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const { notificationUnreadCount: unreadCount, refreshNotificationUnreadCount } = useUnreadCounts();
+
+  const refreshUnreadCount = async () => {
+    await refreshNotificationUnreadCount();
+  };
+
+  const loadMessages = async () => {
+    setListLoading(true);
+    setListError(null);
+
+    try {
+      const response = await fetchNotificationMessages({ limit: 30 });
+      setMessages(response.items);
+    } catch (error) {
+      setListError(error instanceof Error ? error.message : '알림 목록을 불러오지 못했습니다.');
+    } finally {
+      setListLoading(false);
+    }
+  };
+
+  const applyUpdatedMessage = (nextItem: NotificationMessageItem) => {
+    setSelectedMessage(nextItem);
+    setMessages((current) => {
+      const wasUnread = current.find((item) => item.id === nextItem.id)?.read === false;
+      const nextItems = mergeMessageItem(current, nextItem);
+
+      if (wasUnread !== nextItem.read) {
+        void refreshNotificationUnreadCount();
+      }
+
+      return nextItems;
+    });
+  };
+
+  const openMessageDetail = async (id: number) => {
+    setDetailOpen(true);
+    setDetailLoading(true);
+    setDetailError(null);
+    setSelectedMessage(null);
+
+    try {
+      const detail = await fetchNotificationMessage(id);
+      setSelectedMessage(detail);
+
+      if (!detail.read) {
+        const updated = await updateNotificationMessageReadState(id, true);
+        applyUpdatedMessage(updated);
+      }
+    } catch (error) {
+      setDetailError(error instanceof Error ? error.message : '알림 상세를 불러오지 못했습니다.');
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const handleToggleReadState = async () => {
+    if (!selectedMessage) {
+      return;
+    }
+
+    setToggleReadLoading(true);
+
+    try {
+      const updated = await updateNotificationMessageReadState(selectedMessage.id, !selectedMessage.read);
+      applyUpdatedMessage(updated);
+    } catch (error) {
+      setDetailError(error instanceof Error ? error.message : '읽음 상태를 변경하지 못했습니다.');
+    } finally {
+      setToggleReadLoading(false);
+    }
+  };
+
+  const handleDeleteMessage = async (id: number) => {
+    if (deletingMessageId === id) {
+      return;
+    }
+
+    setDeletingMessageId(id);
+    setListError(null);
+
+    try {
+      await deleteNotificationMessage(id);
+      setMessages((current) => current.filter((item) => item.id !== id));
+      void refreshNotificationUnreadCount();
+
+      if (selectedMessage?.id === id) {
+        setSelectedMessage(null);
+        setDetailOpen(false);
+      }
+    } catch (error) {
+      setListError(error instanceof Error ? error.message : '알림을 삭제하지 못했습니다.');
+    } finally {
+      setDeletingMessageId((current) => (current === id ? null : current));
+    }
+  };
+
+  useEffect(() => {
+    void refreshUnreadCount();
+
+    const handleMessagesUpdated = () => {
+      void refreshUnreadCount();
+
+      if (drawerOpen) {
+        void loadMessages();
+      }
+    };
+
+    window.addEventListener(NOTIFICATION_MESSAGES_UPDATED_EVENT, handleMessagesUpdated);
+
+    return () => {
+      window.removeEventListener(NOTIFICATION_MESSAGES_UPDATED_EVENT, handleMessagesUpdated);
+    };
+  }, [drawerOpen, refreshNotificationUnreadCount]);
+
+  useEffect(() => {
+    if (!drawerOpen) {
+      return;
+    }
+
+    void loadMessages();
+  }, [drawerOpen]);
+
+  return {
+    unreadCount,
+    detailOpen,
+    setDetailOpen,
+    messages,
+    selectedMessage,
+    listLoading,
+    detailLoading,
+    toggleReadLoading,
+    deletingMessageId,
+    listError,
+    detailError,
+    loadMessages,
+    openMessageDetail,
+    handleToggleReadState,
+    handleDeleteMessage,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useNotificationController.ts b/src/app/main/chatV2/hooks/useNotificationController.ts
new file mode 100644
index 0000000..2fc2700
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useNotificationController.ts
@@ -0,0 +1 @@
+export { useNotificationCenterData as useNotificationController } from './useNotificationCenterData';
diff --git a/src/app/main/chatV2/hooks/useRuntimeController.ts b/src/app/main/chatV2/hooks/useRuntimeController.ts
new file mode 100644
index 0000000..3da3aae
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useRuntimeController.ts
@@ -0,0 +1 @@
+export { useRuntimeData as useRuntimeController } from './useRuntimeData';
diff --git a/src/app/main/chatV2/hooks/useRuntimeData.ts b/src/app/main/chatV2/hooks/useRuntimeData.ts
new file mode 100644
index 0000000..872f7f6
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useRuntimeData.ts
@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import { chatConnectionGateway } from '../data/chatConnectionGateway';
+import { chatGateway } from '../data/chatGateway';
+import type { ChatRuntimeJobDetail, ChatRuntimeSnapshot } from '../../mainChatPanel/types';
+
+type UseRuntimeDataOptions = {
+  activeSessionId: string;
+  isDeferringAuxiliaryChatRequests: boolean;
+};
+
+export function useRuntimeData({
+  activeSessionId,
+  isDeferringAuxiliaryChatRequests,
+}: UseRuntimeDataOptions) {
+  const [runtimeSnapshot, setRuntimeSnapshot] = useState<ChatRuntimeSnapshot | null>(null);
+  const [runtimeJobDetail, setRuntimeJobDetail] = useState<ChatRuntimeJobDetail | null>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    const loadRuntimeSnapshot = async () => {
+      try {
+        const snapshot = await chatGateway.fetchRuntimeSnapshot();
+
+        if (!isCancelled) {
+          setRuntimeSnapshot(snapshot);
+          chatConnectionGateway.setSharedRuntimeSnapshot(snapshot);
+        }
+      } catch {
+        if (!isCancelled) {
+          setRuntimeSnapshot(null);
+          chatConnectionGateway.setSharedRuntimeSnapshot(null);
+        }
+      }
+    };
+
+    void loadRuntimeSnapshot();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!activeSessionId.trim()) {
+      return;
+    }
+
+    if (isDeferringAuxiliaryChatRequests) {
+      return;
+    }
+
+    let isCancelled = false;
+
+    const syncRuntimeSnapshotForActiveSession = async () => {
+      try {
+        const snapshot = await chatGateway.fetchRuntimeSnapshot();
+
+        if (!isCancelled) {
+          setRuntimeSnapshot(snapshot);
+          chatConnectionGateway.setSharedRuntimeSnapshot(snapshot);
+        }
+      } catch {
+        if (!isCancelled) {
+          setRuntimeSnapshot(null);
+          chatConnectionGateway.setSharedRuntimeSnapshot(null);
+        }
+      }
+    };
+
+    void syncRuntimeSnapshotForActiveSession();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [activeSessionId, isDeferringAuxiliaryChatRequests]);
+
+  const handleRuntimeEvent = (snapshot: ChatRuntimeSnapshot) => {
+    setRuntimeSnapshot(snapshot);
+    chatConnectionGateway.setSharedRuntimeSnapshot(snapshot);
+  };
+
+  const handleRuntimeDetailEvent = (detail: ChatRuntimeJobDetail) => {
+    setRuntimeJobDetail(detail);
+  };
+
+  return {
+    runtimeSnapshot,
+    runtimeJobDetail,
+    setRuntimeSnapshot,
+    handleRuntimeEvent,
+    handleRuntimeDetailEvent,
+  };
+}
diff --git a/src/app/main/chatV2/hooks/useUnreadCounts.ts b/src/app/main/chatV2/hooks/useUnreadCounts.ts
new file mode 100644
index 0000000..78e506f
--- /dev/null
+++ b/src/app/main/chatV2/hooks/useUnreadCounts.ts
@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+import {
+  fetchNotificationMessages,
+  NOTIFICATION_MESSAGES_UPDATED_EVENT,
+} from '../../notificationApi';
+import {
+  CHAT_CONVERSATIONS_UPDATED_EVENT,
+  readChatConversationsUpdatedEvent,
+} from '../data/chatClientEvents';
+import { chatGateway } from '../data/chatGateway';
+
+type UseUnreadCountsResult = {
+  chatUnreadCount: number;
+  notificationUnreadCount: number;
+  refreshChatUnreadCount: () => Promise<void>;
+  refreshNotificationUnreadCount: () => Promise<void>;
+};
+
+type SharedUnreadCountsState = {
+  chatUnreadCount: number;
+  notificationUnreadCount: number;
+  hasLoaded: boolean;
+  chatRequestPromise: Promise<void> | null;
+  notificationRequestPromise: Promise<void> | null;
+  subscribers: Set<() => void>;
+};
+
+const sharedUnreadCountsState: SharedUnreadCountsState = {
+  chatUnreadCount: 0,
+  notificationUnreadCount: 0,
+  hasLoaded: false,
+  chatRequestPromise: null,
+  notificationRequestPromise: null,
+  subscribers: new Set(),
+};
+
+function emitUnreadCounts() {
+  sharedUnreadCountsState.subscribers.forEach((listener) => {
+    listener();
+  });
+}
+
+function subscribeUnreadCounts(listener: () => void) {
+  sharedUnreadCountsState.subscribers.add(listener);
+
+  return () => {
+    sharedUnreadCountsState.subscribers.delete(listener);
+  };
+}
+
+async function refreshChatUnreadCount() {
+  if (sharedUnreadCountsState.chatRequestPromise) {
+    return sharedUnreadCountsState.chatRequestPromise;
+  }
+
+  sharedUnreadCountsState.chatRequestPromise = (async () => {
+    try {
+      const items = await chatGateway.listConversations();
+      sharedUnreadCountsState.chatUnreadCount = items.filter((item) => item.hasUnreadResponse).length;
+    } catch {
+      sharedUnreadCountsState.chatUnreadCount = 0;
+    } finally {
+      sharedUnreadCountsState.chatRequestPromise = null;
+      emitUnreadCounts();
+    }
+  })();
+
+  return sharedUnreadCountsState.chatRequestPromise;
+}
+
+async function refreshNotificationUnreadCount() {
+  if (sharedUnreadCountsState.notificationRequestPromise) {
+    return sharedUnreadCountsState.notificationRequestPromise;
+  }
+
+  sharedUnreadCountsState.notificationRequestPromise = (async () => {
+    try {
+      const response = await fetchNotificationMessages({ limit: 1 });
+      sharedUnreadCountsState.notificationUnreadCount = response.unreadCount;
+    } catch {
+      // Keep the previous badge count when the server is temporarily unavailable.
+    } finally {
+      sharedUnreadCountsState.notificationRequestPromise = null;
+      emitUnreadCounts();
+    }
+  })();
+
+  return sharedUnreadCountsState.notificationRequestPromise;
+}
+
+export function useUnreadCounts(): UseUnreadCountsResult {
+  const [chatUnreadCount, setChatUnreadCount] = useState(sharedUnreadCountsState.chatUnreadCount);
+  const [notificationUnreadCount, setNotificationUnreadCount] = useState(sharedUnreadCountsState.notificationUnreadCount);
+
+  useEffect(() => {
+    return subscribeUnreadCounts(() => {
+      setChatUnreadCount(sharedUnreadCountsState.chatUnreadCount);
+      setNotificationUnreadCount(sharedUnreadCountsState.notificationUnreadCount);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (sharedUnreadCountsState.hasLoaded) {
+      return;
+    }
+
+    sharedUnreadCountsState.hasLoaded = true;
+    void refreshChatUnreadCount();
+    void refreshNotificationUnreadCount();
+  }, []);
+
+  useEffect(() => {
+    const handleNotificationMessagesUpdated = () => {
+      void refreshNotificationUnreadCount();
+    };
+
+    const handleChatConversationsUpdated = (event: Event) => {
+      const detail = readChatConversationsUpdatedEvent(event);
+
+      if (!detail) {
+        return;
+      }
+
+      sharedUnreadCountsState.chatUnreadCount = detail.items.filter((item) => item.hasUnreadResponse).length;
+      emitUnreadCounts();
+    };
+
+    window.addEventListener(NOTIFICATION_MESSAGES_UPDATED_EVENT, handleNotificationMessagesUpdated);
+    window.addEventListener(CHAT_CONVERSATIONS_UPDATED_EVENT, handleChatConversationsUpdated as EventListener);
+
+    return () => {
+      window.removeEventListener(NOTIFICATION_MESSAGES_UPDATED_EVENT, handleNotificationMessagesUpdated);
+      window.removeEventListener(CHAT_CONVERSATIONS_UPDATED_EVENT, handleChatConversationsUpdated as EventListener);
+    };
+  }, []);
+
+  return {
+    chatUnreadCount,
+    notificationUnreadCount,
+    refreshChatUnreadCount,
+    refreshNotificationUnreadCount,
+  };
+}
diff --git a/src/app/main/chatV2/index.ts b/src/app/main/chatV2/index.ts
new file mode 100644
index 0000000..e1d38d4
--- /dev/null
+++ b/src/app/main/chatV2/index.ts
@@ -0,0 +1,11 @@
+export { ChatWorkspaceV2 } from './ChatWorkspaceV2';
+export { chatConnectionGateway } from './data/chatConnectionGateway';
+export { chatGateway } from './data/chatGateway';
+export type {
+  ChatWorkspaceSelection,
+  ChatWorkspaceView,
+  ConversationListState,
+  ConversationRoomState,
+  RuntimePaneState,
+  ErrorPaneState,
+} from './types';
diff --git a/src/app/main/chatV2/types.ts b/src/app/main/chatV2/types.ts
new file mode 100644
index 0000000..76e61cf
--- /dev/null
+++ b/src/app/main/chatV2/types.ts
@@ -0,0 +1,45 @@
+import type {
+  ChatConversationSummary,
+  ChatMessage,
+  ChatConversationRequest,
+  ChatRuntimeSnapshot,
+} from '../mainChatPanel/types';
+import type { ErrorLogItem } from '../errorLogApi';
+
+export type ChatWorkspaceView = 'chat' | 'runtime' | 'errors';
+
+export type ChatWorkspaceSelection = {
+  activeSessionId: string;
+  activeView: ChatWorkspaceView;
+  isConversationPaneClosed: boolean;
+  isMobileConversationView: boolean;
+};
+
+export type ConversationListState = {
+  items: ChatConversationSummary[];
+  isLoading: boolean;
+  errorMessage: string;
+  searchText: string;
+};
+
+export type ConversationRoomState = {
+  sessionId: string;
+  messages: ChatMessage[];
+  requests: ChatConversationRequest[];
+  isLoading: boolean;
+  loadingLabel: string;
+  errorMessage: string;
+};
+
+export type RuntimePaneState = {
+  snapshot: ChatRuntimeSnapshot | null;
+  isLoading: boolean;
+  errorMessage: string;
+};
+
+export type ErrorPaneState = {
+  items: ErrorLogItem[];
+  selectedItem: ErrorLogItem | null;
+  isLoading: boolean;
+  errorMessage: string;
+};
diff --git a/src/app/main/clientIdentity.ts b/src/app/main/clientIdentity.ts
new file mode 100755
index 0000000..33e787f
--- /dev/null
+++ b/src/app/main/clientIdentity.ts
@@ -0,0 +1,102 @@
+import type { AppPageDescriptor } from '../../store/appStore/types';
+
+export const CLIENT_ID_STORAGE_KEY = 'work-app.visitor.client-id';
+
+function generateFallbackClientId() {
+  return `client-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function generateClientId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  return generateFallbackClientId();
+}
+
+export function getClientId() {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  return window.localStorage.getItem(CLIENT_ID_STORAGE_KEY)?.trim() ?? '';
+}
+
+export function clearClientId() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.removeItem(CLIENT_ID_STORAGE_KEY);
+}
+
+export function getOrCreateClientId() {
+  const existingClientId = getClientId();
+
+  if (existingClientId) {
+    return existingClientId;
+  }
+
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const nextClientId = generateClientId();
+  window.localStorage.setItem(CLIENT_ID_STORAGE_KEY, nextClientId);
+  return nextClientId;
+}
+
+export function appendClientIdHeader(headersInit?: HeadersInit) {
+  const headers = new Headers(headersInit);
+  const clientId = getOrCreateClientId();
+
+  if (clientId && !headers.has('X-Client-Id')) {
+    headers.set('X-Client-Id', clientId);
+  }
+
+  return headers;
+}
+
+export function buildTrackedPageUrl(page: AppPageDescriptor) {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const url = new URL(window.location.href);
+
+  if (page.topMenu === 'plans') {
+    url.searchParams.set('topMenu', 'plans');
+    url.searchParams.set('planFilter', page.section);
+    url.searchParams.delete('planSection');
+  } else {
+    url.searchParams.set('topMenu', page.topMenu);
+    url.searchParams.delete('planSection');
+    url.searchParams.delete('planFilter');
+  }
+
+  if (page.topMenu === 'docs') {
+    url.searchParams.set('docsSection', page.section);
+  } else {
+    url.searchParams.delete('docsSection');
+  }
+
+  if (page.topMenu === 'apis') {
+    url.searchParams.set('apiSection', page.section);
+  } else {
+    url.searchParams.delete('apiSection');
+  }
+
+  if (page.topMenu === 'chat') {
+    url.searchParams.set('chatSection', page.section);
+  } else {
+    url.searchParams.delete('chatSection');
+  }
+
+  if (page.topMenu === 'play') {
+    url.searchParams.set('playSection', page.section);
+  } else {
+    url.searchParams.delete('playSection');
+  }
+
+  return url.toString();
+}
diff --git a/src/app/main/errorLogApi.ts b/src/app/main/errorLogApi.ts
new file mode 100755
index 0000000..de8c20d
--- /dev/null
+++ b/src/app/main/errorLogApi.ts
@@ -0,0 +1,160 @@
+import { appendClientIdHeader } from './clientIdentity';
+import { getRegisteredAccessToken } from './tokenAccess';
+
+export type ErrorLogItem = {
+  id: number;
+  source: 'server' | 'client' | string;
+  sourceLabel: string | null;
+  errorType: string;
+  errorName: string | null;
+  errorMessage: string;
+  detail: string | null;
+  stackTrace: string | null;
+  statusCode: number | null;
+  requestMethod: string | null;
+  requestPath: string | null;
+  relatedPlanId: number | null;
+  relatedWorkId: string | null;
+  context: Record<string, unknown> | null;
+  createdAt: string;
+};
+
+export type ReportClientErrorPayload = {
+  errorType: string;
+  errorName?: string | null;
+  errorMessage: string;
+  detail?: string | null;
+  stackTrace?: string | null;
+  statusCode?: number | null;
+  requestMethod?: string | null;
+  requestPath?: string | null;
+  context?: Record<string, unknown> | null;
+};
+
+class ErrorLogApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'ErrorLogApiError';
+    this.status = status;
+  }
+}
+
+function resolveErrorLogApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function resolveWorkServerFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const ERROR_LOG_API_BASE_URL = resolveErrorLogApiBaseUrl();
+const ERROR_LOG_API_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && ERROR_LOG_API_BASE_URL === '/api'
+    ? resolveWorkServerFallbackBaseUrl()
+    : null;
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit): Promise<T> {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...init,
+    headers,
+    cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new ErrorLogApiError(payload.message || '에러 로그 요청에 실패했습니다.', response.status);
+    } catch {
+      throw new ErrorLogApiError(text || '에러 로그 요청에 실패했습니다.', response.status);
+    }
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(ERROR_LOG_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      ERROR_LOG_API_FALLBACK_BASE_URL &&
+      ERROR_LOG_API_FALLBACK_BASE_URL !== ERROR_LOG_API_BASE_URL &&
+      (error instanceof ErrorLogApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && /404|Failed to fetch|NetworkError/i.test(error.message));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(ERROR_LOG_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+export async function fetchErrorLogs(limit = 50) {
+  const token = getRegisteredAccessToken();
+  const response = await request<{ ok: boolean; items: ErrorLogItem[] }>(`/error-logs?limit=${limit}`, {
+    headers: {
+      'X-Access-Token': token,
+    },
+  });
+
+  return response.items;
+}
+
+export async function reportClientError(payload: ReportClientErrorPayload) {
+  try {
+    await request('/error-logs/report', {
+      method: 'POST',
+      body: JSON.stringify({
+        source: 'client',
+        sourceLabel: '프론트엔드',
+        errorType: payload.errorType,
+        errorName: payload.errorName ?? null,
+        errorMessage: payload.errorMessage,
+        detail: payload.detail ?? null,
+        stackTrace: payload.stackTrace ?? null,
+        statusCode: payload.statusCode ?? null,
+        requestMethod: payload.requestMethod ?? null,
+        requestPath: payload.requestPath ?? null,
+        context: payload.context ?? null,
+      }),
+    });
+  } catch {
+    // ignore client-side logging failures
+  }
+}
diff --git a/src/app/main/index.ts b/src/app/main/index.ts
new file mode 100755
index 0000000..f098238
--- /dev/null
+++ b/src/app/main/index.ts
@@ -0,0 +1 @@
+export { AppShell } from './AppShell';
diff --git a/src/app/main/layout/MainLayout.tsx b/src/app/main/layout/MainLayout.tsx
new file mode 100755
index 0000000..e808751
--- /dev/null
+++ b/src/app/main/layout/MainLayout.tsx
@@ -0,0 +1,469 @@
+import { Layout } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useGestureLayer, useGesturePageState, useSearchLayer } from '../../../layer';
+import { useAppStore } from '../../../store';
+import { useTokenAccess } from '../tokenAccess';
+import { useAppConfig } from '../appConfig';
+import { ChatNotificationBridgeV2 } from '../ChatNotificationBridgeV2';
+import { ChatRuntimeBridgeV2 } from '../ChatRuntimeBridgeV2';
+import { useUnreadCounts } from '../chatV2/hooks/useUnreadCounts';
+import { matchesShortcut, isTypingTarget, scrollToElement } from '../mainView/utils';
+import { MainContent } from '../MainContent';
+import { MainHeader } from '../MainHeader';
+import { MainSidebar } from '../MainSidebar';
+import { buildSearchOptions } from './buildSearchOptions';
+import { MainLayoutContextProvider } from './MainLayoutContext';
+import { useMainLayoutData } from './useMainLayoutData';
+import '../MainLayout.css';
+import {
+  buildApiMenuItems,
+  buildApisPath,
+  buildChatMenuItems,
+  buildChatPath,
+  buildDocsMenuItems,
+  buildDocsPath,
+  buildPlanMenuItems,
+  buildPlansPath,
+  buildPlayMenuItems,
+  buildPlayPath,
+  buildSavedLayoutPath,
+  DOCS_DEFAULT_FOLDER,
+  PLAN_MENU_ANCHOR_IDS,
+  renderSidebarIntro,
+  resolveCurrentPageDescriptor,
+  resolvePlanOpenKeys,
+  resolvePlanQuickFilterMenu,
+  resolvePlayOpenKeys,
+  resolveSavedLayoutIdFromMenuKey,
+  resolveTopMenuPath,
+  type ApiSectionKey,
+  type ChatSectionKey,
+  type PlanSectionKey,
+  type PlaySidebarKey,
+  type TopMenuKey,
+} from '../routes';
+
+function parseRoute(pathname: string): {
+  topMenu: TopMenuKey;
+  docsMenu: string;
+  apiMenu: ApiSectionKey;
+  planMenu: PlanSectionKey;
+  chatMenu: ChatSectionKey;
+  playMenu: PlaySidebarKey;
+} {
+  const segments = pathname.split('/').filter(Boolean);
+  const [top, first, second] = segments;
+
+  if (top === 'docs') {
+    return {
+      topMenu: 'docs',
+      docsMenu: first || DOCS_DEFAULT_FOLDER,
+      apiMenu: 'components',
+      planMenu: 'all',
+      chatMenu: 'live',
+      playMenu: 'layout',
+    };
+  }
+
+  if (top === 'apis' && (first === 'components' || first === 'widgets')) {
+    return {
+      topMenu: 'apis',
+      docsMenu: DOCS_DEFAULT_FOLDER,
+      apiMenu: first,
+      planMenu: 'all',
+      chatMenu: 'live',
+      playMenu: 'layout',
+    };
+  }
+
+  if (
+    top === 'plans' &&
+    (first === 'all' ||
+      first === 'in-progress' ||
+      first === 'done' ||
+      first === 'error' ||
+      first === 'release' ||
+      first === 'release-review' ||
+      first === 'board' ||
+      first === 'charts' ||
+      first === 'schedule' ||
+      first === 'history' ||
+      first === 'server-command')
+  ) {
+    return {
+      topMenu: 'plans',
+      docsMenu: DOCS_DEFAULT_FOLDER,
+      apiMenu: 'components',
+      planMenu: first,
+      chatMenu: 'live',
+      playMenu: 'layout',
+    };
+  }
+
+  if (top === 'chat' && (first === 'live' || first === 'changes' || first === 'errors' || first === 'manage')) {
+    return {
+      topMenu: 'chat',
+      docsMenu: DOCS_DEFAULT_FOLDER,
+      apiMenu: 'components',
+      planMenu: 'all',
+      chatMenu: first,
+      playMenu: 'layout',
+    };
+  }
+
+  if (top === 'play' && first === 'layout') {
+    return {
+      topMenu: 'play',
+      docsMenu: DOCS_DEFAULT_FOLDER,
+      apiMenu: 'components',
+      planMenu: 'all',
+      chatMenu: 'live',
+      playMenu: first,
+    };
+  }
+
+  if (top === 'play' && first === 'layout-record' && second) {
+    return {
+      topMenu: 'play',
+      docsMenu: DOCS_DEFAULT_FOLDER,
+      apiMenu: 'components',
+      planMenu: 'all',
+      chatMenu: 'live',
+      playMenu: `layout-record:${second}`,
+    };
+  }
+
+  return {
+    topMenu: 'plans',
+    docsMenu: DOCS_DEFAULT_FOLDER,
+    apiMenu: 'components',
+    planMenu: 'all',
+    chatMenu: 'live',
+    playMenu: 'layout',
+  };
+}
+
+function isRestrictedTopMenu(topMenu: TopMenuKey, hasAccess: boolean) {
+  return !hasAccess && topMenu !== 'docs';
+}
+
+function resolveSidebarOpenKeys(topMenu: TopMenuKey, hasAccess: boolean) {
+  if (!hasAccess) {
+    return ['docs-group'];
+  }
+
+  if (topMenu === 'docs' || topMenu === 'apis') {
+    return ['docs-group', 'api-group'];
+  }
+
+  return topMenu === 'play' ? resolvePlayOpenKeys() : resolvePlanOpenKeys();
+}
+
+export function MainLayout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { setCurrentPage, setFocusedComponentId } = useAppStore();
+  const { hasAccess } = useTokenAccess();
+  const appConfig = useAppConfig();
+  const { openSearch, setOptions: setSearchOptions } = useSearchLayer();
+  const layoutData = useMainLayoutData();
+  const routeState = useMemo(() => parseRoute(location.pathname), [location.pathname]);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [contentExpanded, setContentExpanded] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+  const [sidebarOpenKeys, setSidebarOpenKeys] = useState<string[]>(resolveSidebarOpenKeys(routeState.topMenu, hasAccess));
+  const [activePlanQuickFilter, setActivePlanQuickFilter] = useState<
+    'working' | 'release-pending-main' | 'automation-failed' | null
+  >(routeState.planMenu === 'release' ? 'release-pending-main' : null);
+  const [planQuickFilterRequestKey, setPlanQuickFilterRequestKey] = useState(routeState.planMenu === 'release' ? 1 : 0);
+  const { componentSampleEntries, widgetSampleEntries, componentSamples, widgetSamples, docsDocuments, savedLayouts, setSavedLayouts, docFolders } = layoutData;
+  const { chatUnreadCount } = useUnreadCounts();
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const updateViewport = () => {
+      setIsMobileViewport(mediaQuery.matches);
+    };
+
+    updateViewport();
+    mediaQuery.addEventListener('change', updateViewport);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateViewport);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isMobileViewport) {
+      setSidebarCollapsed(true);
+    }
+  }, [isMobileViewport]);
+
+  useEffect(() => {
+    setSidebarOpenKeys(resolveSidebarOpenKeys(routeState.topMenu, hasAccess));
+  }, [hasAccess, routeState.topMenu]);
+
+  useEffect(() => {
+    if (docFolders.length > 0 && routeState.topMenu === 'docs' && !docFolders.includes(routeState.docsMenu)) {
+      navigate(buildDocsPath(docFolders[0]), { replace: true });
+    }
+  }, [docFolders, navigate, routeState.docsMenu, routeState.topMenu]);
+
+  useEffect(() => {
+    const savedLayoutId = resolveSavedLayoutIdFromMenuKey(routeState.playMenu);
+
+    if (savedLayoutId && !savedLayouts.some((record) => record.id === savedLayoutId)) {
+      navigate(buildPlayPath('layout'), { replace: true });
+    }
+  }, [navigate, routeState.playMenu, savedLayouts]);
+
+  useEffect(() => {
+    if (!isRestrictedTopMenu(routeState.topMenu, hasAccess)) {
+      return;
+    }
+
+    navigate(`${buildDocsPath(DOCS_DEFAULT_FOLDER)}${location.search}`, { replace: true });
+  }, [hasAccess, location.search, navigate, routeState.topMenu]);
+
+  useEffect(() => {
+    if (routeState.topMenu !== 'plans') {
+      setActivePlanQuickFilter(null);
+      return;
+    }
+
+    if (routeState.planMenu === 'release') {
+      setActivePlanQuickFilter('release-pending-main');
+      return;
+    }
+
+    setActivePlanQuickFilter((current) => (current === 'working' || current === 'automation-failed' ? current : null));
+  }, [routeState.planMenu, routeState.topMenu]);
+
+  useGesturePageState('anyway');
+  useGestureLayer({
+    id: 'main-layout',
+    enabled: !(isMobileViewport && routeState.topMenu === 'docs' && routeState.docsMenu === 'worklogs'),
+    gestures: [
+      {
+        id: 'mobile-top-right-pull-alert',
+        activeStates: ['anyway'],
+        mobileOnly: true,
+        trigger: 'pull-down-top-right',
+        onTrigger: () => {
+          openSearch();
+        },
+      },
+      {
+        id: 'mobile-middle-right-search-window',
+        activeStates: ['anyway'],
+        mobileOnly: true,
+        trigger: 'pull-left-middle-right',
+        onTrigger: () => {
+          openSearch('window');
+        },
+      },
+    ],
+  });
+
+  useEffect(() => {
+    const handleWindowKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat || isTypingTarget(event.target)) {
+        return;
+      }
+
+      if (matchesShortcut(event, appConfig.gestureShortcuts.openWindowSearch)) {
+        event.preventDefault();
+        openSearch('window');
+        return;
+      }
+
+      if (matchesShortcut(event, appConfig.gestureShortcuts.openSearch)) {
+        event.preventDefault();
+        openSearch();
+      }
+    };
+
+    window.addEventListener('keydown', handleWindowKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleWindowKeyDown);
+    };
+  }, [appConfig.gestureShortcuts.openSearch, appConfig.gestureShortcuts.openWindowSearch, openSearch]);
+
+  const selectedDocs = useMemo(
+    () => docsDocuments.filter((document) => document.folder === routeState.docsMenu),
+    [docsDocuments, routeState.docsMenu],
+  );
+
+  const searchOptions = useMemo(
+    () =>
+      buildSearchOptions({
+        componentSamples,
+        widgetSamples,
+        docFolders,
+        docsDocuments,
+        hasAccess,
+        navigateTo: (path) => {
+          navigate(path);
+        },
+        setFocusedComponentId,
+        requestPlanQuickFilter: (filter) => {
+          setActivePlanQuickFilter(filter);
+          setPlanQuickFilterRequestKey((previous) => previous + 1);
+        },
+      }),
+    [componentSamples, docFolders, docsDocuments, hasAccess, navigate, setFocusedComponentId, widgetSamples],
+  );
+
+  useEffect(() => {
+    setSearchOptions(searchOptions);
+  }, [searchOptions, setSearchOptions]);
+
+  useEffect(() => {
+    setCurrentPage(
+      resolveCurrentPageDescriptor({
+        topMenu: routeState.topMenu,
+        docsMenu: routeState.docsMenu,
+        apiMenu: routeState.apiMenu,
+        planMenu: routeState.planMenu,
+        chatMenu: routeState.chatMenu,
+        playMenu: routeState.playMenu,
+        savedLayouts,
+      }),
+    );
+  }, [routeState, savedLayouts, setCurrentPage]);
+
+  const currentDocsFolder = docFolders.includes(routeState.docsMenu) ? routeState.docsMenu : docFolders[0] ?? DOCS_DEFAULT_FOLDER;
+  const sidebarIntro = renderSidebarIntro(routeState.topMenu);
+  const apiMenuItems = useMemo(() => buildApiMenuItems(), []);
+  const docsMenuItems = useMemo(() => buildDocsMenuItems(docFolders), [docFolders]);
+  const planMenuItems = useMemo(() => buildPlanMenuItems(hasAccess), [hasAccess]);
+  const chatMenuItems = useMemo(() => buildChatMenuItems(hasAccess, chatUnreadCount), [chatUnreadCount, hasAccess]);
+  const playMenuItems = useMemo(() => buildPlayMenuItems(savedLayouts), [savedLayouts]);
+  const initialSelectedPlanId = Number(searchParams.get('planId'));
+  const initialSelectedWorkId = searchParams.get('workId');
+
+  return (
+    <MainLayoutContextProvider
+      value={{
+        topMenu: routeState.topMenu,
+        selectedDocsMenu: routeState.docsMenu,
+        selectedApiMenu: routeState.apiMenu,
+        selectedPlanMenu: routeState.planMenu,
+        selectedChatMenu: routeState.chatMenu,
+        selectedPlayMenu: routeState.playMenu,
+        activePlanQuickFilter,
+        planQuickFilterRequestKey,
+        initialSelectedPlanId: Number.isFinite(initialSelectedPlanId) ? initialSelectedPlanId : null,
+        initialSelectedWorkId,
+        selectedDocs,
+        docsDocuments,
+        componentSampleEntries,
+        widgetSampleEntries,
+        componentSamples,
+        widgetSamples,
+        savedLayouts,
+        setSavedLayouts,
+        searchOptions,
+      }}
+    >
+      <Layout className="app-shell app-shell--docs-api">
+        <ChatRuntimeBridgeV2 />
+        <ChatNotificationBridgeV2 />
+        {contentExpanded ? null : (
+          <MainHeader
+            activeTopMenu={routeState.topMenu}
+            sidebarCollapsed={sidebarCollapsed}
+            contentExpanded={contentExpanded}
+            isMobileViewport={isMobileViewport}
+            onToggleSidebar={() => {
+              setSidebarCollapsed((previous) => !previous);
+            }}
+            onToggleContentExpanded={() => {
+              setContentExpanded((previous) => !previous);
+            }}
+            onChangeTopMenu={(menu) => {
+              navigate(resolveTopMenuPath(menu, currentDocsFolder));
+              setSidebarCollapsed(false);
+            }}
+            onOpenPlanQuickFilter={(filter) => {
+              const targetPlanMenu = resolvePlanQuickFilterMenu(filter);
+              setActivePlanQuickFilter(filter);
+              setPlanQuickFilterRequestKey((previous) => previous + 1);
+              navigate(buildPlansPath(targetPlanMenu));
+              setSidebarCollapsed(isMobileViewport);
+              scrollToElement(PLAN_MENU_ANCHOR_IDS[targetPlanMenu] ?? 'plan-menu-all');
+            }}
+          />
+        )}
+
+        <Layout>
+          {contentExpanded || (isMobileViewport && sidebarCollapsed) ? null : (
+            <MainSidebar
+              activeTopMenu={routeState.topMenu}
+              hasAccess={hasAccess}
+              sidebarCollapsed={sidebarCollapsed}
+              isMobileViewport={isMobileViewport}
+              openKeys={sidebarOpenKeys}
+              apiMenuItems={apiMenuItems}
+              docsMenuItems={docsMenuItems}
+              planMenuItems={planMenuItems}
+              chatMenuItems={chatMenuItems}
+              playMenuItems={playMenuItems}
+              selectedApiMenu={routeState.apiMenu}
+              selectedDocsMenu={routeState.docsMenu}
+              selectedPlanMenu={routeState.planMenu}
+              selectedChatMenu={routeState.chatMenu}
+              selectedPlayMenu={routeState.playMenu}
+              onOpenKeysChange={setSidebarOpenKeys}
+              onSelectApiMenu={(key) => {
+                navigate(buildApisPath(key as ApiSectionKey));
+                if (isMobileViewport) {
+                  setSidebarCollapsed(true);
+                }
+              }}
+              onSelectDocsMenu={(key) => {
+                navigate(buildDocsPath(key));
+                if (isMobileViewport) {
+                  setSidebarCollapsed(true);
+                }
+              }}
+              onSelectPlanMenu={(key) => {
+                setActivePlanQuickFilter(key === 'release' ? 'release-pending-main' : null);
+                setPlanQuickFilterRequestKey((previous) => previous + 1);
+                navigate(buildPlansPath(key));
+                if (isMobileViewport) {
+                  setSidebarCollapsed(true);
+                }
+              }}
+              onSelectChatMenu={(key) => {
+                navigate(buildChatPath(key));
+                if (isMobileViewport) {
+                  setSidebarCollapsed(true);
+                }
+              }}
+              onSelectPlayMenu={(key) => {
+                const savedLayoutId = resolveSavedLayoutIdFromMenuKey(key);
+                navigate(savedLayoutId ? buildSavedLayoutPath(savedLayoutId) : buildPlayPath(key as 'layout'));
+                if (isMobileViewport) {
+                  setSidebarCollapsed(true);
+                }
+              }}
+              introColor={sidebarIntro.color}
+              introTag={sidebarIntro.tag}
+              introDescription={sidebarIntro.description}
+            />
+          )}
+
+          {isMobileViewport && !sidebarCollapsed ? null : (
+            <MainContent contentExpanded={contentExpanded} onToggleContentExpanded={() => setContentExpanded((previous) => !previous)}>
+              <Outlet />
+            </MainContent>
+          )}
+        </Layout>
+      </Layout>
+    </MainLayoutContextProvider>
+  );
+}
diff --git a/src/app/main/layout/MainLayoutContext.ts b/src/app/main/layout/MainLayoutContext.ts
new file mode 100755
index 0000000..af32def
--- /dev/null
+++ b/src/app/main/layout/MainLayoutContext.ts
@@ -0,0 +1,48 @@
+import { createContext, useContext } from 'react';
+import type { SearchKeywordOption } from '../../../components/search';
+import type { MarkdownDocument } from '../../../components/markdownPreview';
+import type { LoadedSampleEntry, SampleEntry } from '../../../samples/registry';
+import type { SavedLayoutRecord } from '../../../views/play/layoutStorage';
+import type {
+  ApiSectionKey,
+  ChatSectionKey,
+  PlanSectionKey,
+  PlaySidebarKey,
+  TopMenuKey,
+} from '../routes';
+
+export type MainLayoutContextValue = {
+  topMenu: TopMenuKey;
+  selectedDocsMenu: string;
+  selectedApiMenu: ApiSectionKey;
+  selectedPlanMenu: PlanSectionKey;
+  selectedChatMenu: ChatSectionKey;
+  selectedPlayMenu: PlaySidebarKey;
+  activePlanQuickFilter: 'working' | 'release-pending-main' | 'automation-failed' | null;
+  planQuickFilterRequestKey: number;
+  initialSelectedPlanId: number | null;
+  initialSelectedWorkId: string | null;
+  selectedDocs: MarkdownDocument[];
+  docsDocuments: MarkdownDocument[];
+  componentSampleEntries: SampleEntry[];
+  widgetSampleEntries: SampleEntry[];
+  componentSamples: LoadedSampleEntry[];
+  widgetSamples: LoadedSampleEntry[];
+  savedLayouts: SavedLayoutRecord[];
+  setSavedLayouts: (layouts: SavedLayoutRecord[]) => void;
+  searchOptions: SearchKeywordOption[];
+};
+
+const MainLayoutContext = createContext<MainLayoutContextValue | null>(null);
+
+export const MainLayoutContextProvider = MainLayoutContext.Provider;
+
+export function useMainLayoutContext() {
+  const context = useContext(MainLayoutContext);
+
+  if (!context) {
+    throw new Error('useMainLayoutContext must be used within MainLayoutContextProvider.');
+  }
+
+  return context;
+}
diff --git a/src/app/main/layout/buildSearchOptions.ts b/src/app/main/layout/buildSearchOptions.ts
new file mode 100755
index 0000000..073baea
--- /dev/null
+++ b/src/app/main/layout/buildSearchOptions.ts
@@ -0,0 +1,280 @@
+import type { SearchKeywordOption } from '../../../components/search';
+import type { LoadedSampleEntry } from '../../../samples/registry';
+import {
+  buildApisPath,
+  buildChatPath,
+  buildDocsPath,
+  buildPlansPath,
+  getDocsSectionLabel,
+  PLAN_FILTER_LABELS,
+  PLAN_GROUP_LABEL,
+  PLAN_SIDEBAR_LABELS,
+} from '../routes';
+import { compactKeywords, scrollToElement } from '../mainView/utils';
+
+type BuildSearchOptionsParams = {
+  componentSamples: LoadedSampleEntry[];
+  widgetSamples: LoadedSampleEntry[];
+  docFolders: string[];
+  docsDocuments: Array<{
+    id: string;
+    title: string;
+    folder: string;
+    preview?: string;
+  }>;
+  hasAccess: boolean;
+  navigateTo: (path: string) => void;
+  setFocusedComponentId: (value: string | null) => void;
+  requestPlanQuickFilter: (filter: 'working' | 'release-pending-main' | 'automation-failed' | null) => void;
+};
+
+export function buildSearchOptions({
+  componentSamples,
+  widgetSamples,
+  docFolders,
+  docsDocuments,
+  hasAccess,
+  navigateTo,
+  setFocusedComponentId,
+  requestPlanQuickFilter,
+}: BuildSearchOptionsParams): SearchKeywordOption[] {
+  const onSelectWindow = () => {
+    setFocusedComponentId(null);
+  };
+
+  return [
+    {
+      id: 'page:apis:components',
+      label: 'APIs / Components',
+      group: 'Page',
+      keywords: ['api', 'components', '컴포넌트'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildApisPath('components'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:apis:widgets',
+      label: 'APIs / Widgets',
+      group: 'Page',
+      keywords: ['api', 'widgets', '위젯'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildApisPath('widgets'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:plans:all',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_FILTER_LABELS.all}`,
+      group: 'Page',
+      keywords: ['plans', 'automation', '자동화', '실행', '현황', 'worker'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildPlansPath('all'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    ...(hasAccess
+      ? [
+          {
+            id: 'page:plans:board',
+            label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS.board}`,
+            group: 'Page',
+            keywords: ['plans', 'plan', '플랜', '게시판', 'board', '요청', '작업 요청', '접수', '계획'],
+            onSelect: () => {
+              requestPlanQuickFilter(null);
+              navigateTo(buildPlansPath('board'));
+              setFocusedComponentId(null);
+            },
+            onSelectWindow,
+          } satisfies SearchKeywordOption,
+          {
+            id: 'page:plans:server-command',
+            label: `Servers / ${PLAN_SIDEBAR_LABELS['server-command']}`,
+            group: 'Page',
+            keywords: ['plans', 'plan', 'server', 'command', 'server command', '서버', '명령', '재기동'],
+            onSelect: () => {
+              requestPlanQuickFilter(null);
+              navigateTo(buildPlansPath('server-command'));
+              setFocusedComponentId(null);
+            },
+            onSelectWindow,
+          } satisfies SearchKeywordOption,
+        ]
+      : []),
+    {
+      id: 'page:plans:release-review',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS['release-review']}`,
+      group: 'Page',
+      keywords: ['release', 'review', '검수', '릴리즈', 'release 검수'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildPlansPath('release-review'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:plans:charts',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS.charts}`,
+      group: 'Page',
+      keywords: ['plans', 'plan', '차트', 'chart', '스케줄 차트'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildPlansPath('charts'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:plans:schedule',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS.schedule}`,
+      group: 'Page',
+      keywords: ['plans', 'plan', '스케줄', 'schedule', '반복 작업'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildPlansPath('schedule'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    ...(hasAccess
+      ? [
+          {
+            id: 'page:plans:history',
+            label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS.history}`,
+            group: 'Page',
+            keywords: ['plans', 'plan', '히스토리', 'history', '방문자 이력'],
+            onSelect: () => {
+              requestPlanQuickFilter(null);
+              navigateTo(buildPlansPath('history'));
+              setFocusedComponentId(null);
+            },
+            onSelectWindow,
+          } satisfies SearchKeywordOption,
+        ]
+      : []),
+    {
+      id: 'page:chat:live',
+      label: 'Codex Live / Codex Live',
+      group: 'Page',
+      keywords: ['codex live', 'chat', 'codex', '채팅', '대화', '메시지'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildChatPath('live'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:chat:changes',
+      label: 'Codex Live / 변경 이력',
+      group: 'Page',
+      keywords: ['codex live', 'changes', 'source', 'diff', '변경', '소스', '채팅 변경', '채팅 diff'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildChatPath('changes'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:chat:errors',
+      label: '앱로그 / 에러 로그',
+      group: 'Page',
+      keywords: ['app log', 'applog', '앱로그', 'error', 'errors', '에러', '로그'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildChatPath('errors'));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    ...(hasAccess
+      ? [
+          {
+            id: 'page:chat:manage',
+            label: '채팅 관리 / 유형 권한 관리',
+            group: 'Page',
+            keywords: ['chat manage', 'chat type', 'permission', '권한', '채팅 유형', '채팅 관리'],
+            onSelect: () => {
+              requestPlanQuickFilter(null);
+              navigateTo(buildChatPath('manage'));
+              setFocusedComponentId(null);
+            },
+            onSelectWindow,
+          } satisfies SearchKeywordOption,
+        ]
+      : []),
+    ...docFolders.map((folder) => ({
+      id: `docs-folder:${folder}`,
+      label: `Docs / ${getDocsSectionLabel(folder)}`,
+      group: 'Docs Folder',
+      keywords: [folder, 'docs', '문서'],
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildDocsPath(folder));
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    })),
+    ...docsDocuments.map((document) => ({
+      id: `doc:${document.id}`,
+      label: document.title,
+      group: `Docs / ${getDocsSectionLabel(document.folder)}`,
+      keywords: [document.folder, document.id, document.title],
+      description: document.preview,
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildDocsPath(document.folder));
+        setFocusedComponentId(`doc:${document.id}`);
+        scrollToElement(`document-preview-${document.id}`);
+      },
+      onSelectWindow,
+    })),
+    ...componentSamples.map((entry) => ({
+      id: `component:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+      label: entry.sampleMeta.title,
+      group: 'Component',
+      keywords: compactKeywords([
+        entry.sampleMeta.componentId,
+        entry.sampleMeta.id,
+        entry.sampleMeta.category,
+        entry.sampleMeta.kind,
+        entry.sampleMeta.variantLabel ?? '',
+      ]),
+      description: entry.sampleMeta.description,
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildApisPath('components'));
+        setFocusedComponentId(`component:${entry.sampleMeta.componentId}`);
+        scrollToElement(`component-sample-${entry.sampleMeta.componentId}`);
+      },
+      onSelectWindow,
+    })),
+    ...widgetSamples.map((entry) => ({
+      id: `widget:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+      label: entry.sampleMeta.title,
+      group: 'Widget',
+      keywords: compactKeywords([
+        entry.sampleMeta.componentId,
+        entry.sampleMeta.id,
+        entry.sampleMeta.category,
+        entry.sampleMeta.kind,
+        entry.sampleMeta.variantLabel ?? '',
+      ]),
+      description: entry.sampleMeta.description,
+      onSelect: () => {
+        requestPlanQuickFilter(null);
+        navigateTo(buildApisPath('widgets'));
+        setFocusedComponentId(`widget:${entry.sampleMeta.componentId}`);
+      },
+      onSelectWindow,
+    })),
+  ];
+}
diff --git a/src/app/main/layout/useMainLayoutData.ts b/src/app/main/layout/useMainLayoutData.ts
new file mode 100755
index 0000000..1e04de0
--- /dev/null
+++ b/src/app/main/layout/useMainLayoutData.ts
@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from 'react';
+import { resolveMarkdownDocuments } from '../../../components/markdownPreview';
+import { resolveSampleEntries, type LoadedSampleEntry } from '../../../samples/registry';
+import { listSavedLayouts, type SavedLayoutRecord } from '../../../views/play/layoutStorage';
+import { docsMarkdownEntries } from '../../manifests/docs.manifest';
+import { componentSampleEntries, widgetSampleEntries } from '../../manifests/samples.manifest';
+import { DOCS_DEFAULT_FOLDER } from '../routes';
+
+const DOCS_FOLDER_ORDER = ['worklogs', 'features', 'components', 'templates'] as const;
+
+export function useMainLayoutData() {
+  const [componentSamples, setComponentSamples] = useState<LoadedSampleEntry[]>([]);
+  const [widgetSamples, setWidgetSamples] = useState<LoadedSampleEntry[]>([]);
+  const [docsDocuments, setDocsDocuments] = useState<Awaited<ReturnType<typeof resolveMarkdownDocuments>>>([]);
+  const [savedLayouts, setSavedLayouts] = useState<SavedLayoutRecord[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void resolveMarkdownDocuments(docsMarkdownEntries, '/docs/').then((documents) => {
+      if (mounted) {
+        setDocsDocuments(documents);
+      }
+    });
+
+    void resolveSampleEntries(componentSampleEntries, '/components/').then((loadedEntries) => {
+      if (mounted) {
+        setComponentSamples(loadedEntries);
+      }
+    });
+
+    void resolveSampleEntries(widgetSampleEntries, '/widgets/').then((loadedEntries) => {
+      if (mounted) {
+        setWidgetSamples(loadedEntries);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void listSavedLayouts()
+      .then((layouts) => {
+        if (mounted) {
+          setSavedLayouts(layouts);
+        }
+      })
+      .catch(() => {
+        if (mounted) {
+          setSavedLayouts([]);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const docFolders = useMemo(
+    () =>
+      Array.from(new Set(docsDocuments.map((document) => document.folder))).sort((left, right) => {
+        const leftIndex = DOCS_FOLDER_ORDER.indexOf(left as (typeof DOCS_FOLDER_ORDER)[number]);
+        const rightIndex = DOCS_FOLDER_ORDER.indexOf(right as (typeof DOCS_FOLDER_ORDER)[number]);
+
+        if (leftIndex >= 0 || rightIndex >= 0) {
+          if (leftIndex < 0) {
+            return 1;
+          }
+
+          if (rightIndex < 0) {
+            return -1;
+          }
+
+          return leftIndex - rightIndex;
+        }
+
+        if (left === DOCS_DEFAULT_FOLDER) {
+          return -1;
+        }
+
+        if (right === DOCS_DEFAULT_FOLDER) {
+          return 1;
+        }
+
+        return left.localeCompare(right);
+      }),
+    [docsDocuments],
+  );
+
+  return {
+    componentSampleEntries,
+    widgetSampleEntries,
+    componentSamples,
+    widgetSamples,
+    docsDocuments,
+    savedLayouts,
+    setSavedLayouts,
+    docFolders,
+  };
+}
diff --git a/src/app/main/mainChatPanel/ChatConversationView.tsx b/src/app/main/mainChatPanel/ChatConversationView.tsx
new file mode 100755
index 0000000..d9e5dad
--- /dev/null
+++ b/src/app/main/mainChatPanel/ChatConversationView.tsx
@@ -0,0 +1,1149 @@
+import {
+  CloseOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownOutlined,
+  ExclamationCircleOutlined,
+  LinkOutlined,
+  MessageOutlined,
+  PaperClipOutlined,
+  PlusOutlined,
+  RedoOutlined,
+  SendOutlined,
+  SyncOutlined,
+  ThunderboltOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Input, Select, Spin } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type RefObject, type TouchEvent } from 'react';
+import { ChatPreviewBody } from './ChatPreviewBody';
+import { normalizeChatResourceUrl } from './chatResourceUrl';
+import type { ChatComposerAttachment, ChatConversationRequest, ChatMessage } from './types';
+
+const KST_TIME_ZONE = 'Asia/Seoul';
+const KST_TIMESTAMP_PATTERN = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
+const KST_DATE_TIME_FORMATTER = new Intl.DateTimeFormat('sv-SE', {
+  timeZone: KST_TIME_ZONE,
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: false,
+});
+
+type ChatTypeOption = {
+  value: string;
+  label: string;
+  description: string;
+  disabled?: boolean;
+};
+
+type PreviewOption = {
+  id: string;
+  label: string;
+  kind: string;
+};
+
+type QueuedRequestOption = {
+  requestId: string;
+  order: number;
+  text: string;
+};
+
+type InlinePreviewKind = 'image' | 'video' | 'markdown' | 'code' | 'document' | 'pdf' | 'file';
+
+type InlinePreviewTarget = {
+  url: string;
+  label: string;
+  kind: InlinePreviewKind;
+};
+
+type PreviewFetchError = Error & {
+  status?: number;
+};
+
+const INLINE_PREVIEW_URL_PATTERN = /(https?:\/\/[^\s)]+|\/[A-Za-z0-9._~:/?#[\]@!$&'()*+,;=%-]+)/g;
+const CHAT_ACTIVITY_MESSAGE_PREFIX = '[[activity-log]]';
+const COLLAPSIBLE_MESSAGE_LINE_COUNT = 6;
+const COLLAPSIBLE_MESSAGE_CHAR_COUNT = 280;
+
+function normalizeInlinePreviewUrl(value: string) {
+  return normalizeChatResourceUrl(value);
+}
+
+function classifyInlinePreviewKind(url: string): InlinePreviewKind {
+  const pathname = url.toLowerCase().split('?')[0] ?? '';
+
+  if (/\.(png|jpe?g|gif|webp|svg|bmp|ico)$/i.test(pathname)) {
+    return 'image';
+  }
+
+  if (/\.(mp4|webm|mov|m4v|ogg)$/i.test(pathname)) {
+    return 'video';
+  }
+
+  if (/\.(md|markdown)$/i.test(pathname)) {
+    return 'markdown';
+  }
+
+  if (/\.(ts|tsx|js|jsx|json|css|scss|html|xml|java|kt|sql|sh|py|go|rs|c|cpp|h|hpp|yml|yaml)$/i.test(pathname)) {
+    return 'code';
+  }
+
+  if (/\.(txt|log|csv)$/i.test(pathname)) {
+    return 'document';
+  }
+
+  if (/\.pdf$/i.test(pathname)) {
+    return 'pdf';
+  }
+
+  return 'file';
+}
+
+function buildInlinePreviewLabel(url: string) {
+  try {
+    const parsed = new URL(url);
+    return parsed.pathname.split('/').filter(Boolean).at(-1) || parsed.hostname;
+  } catch {
+    return url;
+  }
+}
+
+async function createPreviewFetchError(response: Response): Promise<PreviewFetchError> {
+  const contentType = response.headers.get('content-type')?.toLowerCase() ?? '';
+  let responseMessage = '';
+
+  try {
+    if (contentType.includes('application/json')) {
+      const payload = (await response.json()) as { message?: string };
+      responseMessage = String(payload.message ?? '').trim();
+    } else {
+      responseMessage = (await response.text()).trim();
+    }
+  } catch {
+    responseMessage = '';
+  }
+
+  const statusLabel =
+    response.status === 403
+      ? '이 문서는 현재 권한으로 열 수 없습니다.'
+      : response.status === 404
+        ? '이 문서를 찾을 수 없습니다.'
+        : response.status === 401
+          ? '이 문서를 열기 위한 인증이 필요합니다.'
+          : `preview 요청이 실패했습니다. (${response.status})`;
+  const detail = responseMessage && responseMessage !== response.statusText ? responseMessage : response.statusText.trim();
+  const error = new Error(detail ? `${statusLabel} ${detail}` : statusLabel) as PreviewFetchError;
+  error.status = response.status;
+  return error;
+}
+
+function extractInlinePreviewTargets(text: string): InlinePreviewTarget[] {
+  const matches = text.match(INLINE_PREVIEW_URL_PATTERN) ?? [];
+  const seen = new Set<string>();
+  const targets: InlinePreviewTarget[] = [];
+
+  for (const matchedUrl of matches) {
+    const normalizedUrl = normalizeInlinePreviewUrl(matchedUrl);
+    const kind = classifyInlinePreviewKind(normalizedUrl);
+
+    if (kind === 'file') {
+      continue;
+    }
+
+    if (seen.has(normalizedUrl)) {
+      continue;
+    }
+
+    seen.add(normalizedUrl);
+    targets.push({
+      url: normalizedUrl,
+      label: buildInlinePreviewLabel(normalizedUrl),
+      kind,
+    });
+  }
+
+  return targets;
+}
+
+function summarizeQueuedText(text: string) {
+  const normalized = text.replace(/\s+/g, ' ').trim();
+  return normalized.length > 32 ? `${normalized.slice(0, 32).trimEnd()}...` : normalized;
+}
+
+function isActivityLogMessage(message: ChatMessage) {
+  return message.author === 'system' && message.text.startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`);
+}
+
+function extractActivityLines(message: ChatMessage) {
+  return message.text
+    .slice(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`.length)
+    .split('\n\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function summarizeActivityLines(lines: string[]) {
+  const latestLine = lines.at(-1) ?? '';
+  return latestLine;
+}
+
+function isLikelyCollapsibleMessage(text: string) {
+  const normalizedText = String(text ?? '').trim();
+
+  if (!normalizedText) {
+    return false;
+  }
+
+  if (normalizedText.length > COLLAPSIBLE_MESSAGE_CHAR_COUNT) {
+    return true;
+  }
+
+  const visualLines = normalizedText
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  return visualLines.length > COLLAPSIBLE_MESSAGE_LINE_COUNT;
+}
+
+function formatChatTimestamp(timestamp: string) {
+  const normalized = String(timestamp ?? '').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  if (KST_TIMESTAMP_PATTERN.test(normalized)) {
+    return normalized;
+  }
+
+  const parsed = new Date(normalized);
+
+  if (Number.isNaN(parsed.getTime())) {
+    return normalized;
+  }
+
+  return KST_DATE_TIME_FORMATTER.format(parsed).replace(',', '');
+}
+
+function formatRequestStatusLabel(request: ChatConversationRequest | undefined) {
+  switch (request?.status) {
+    case 'accepted':
+      return '접수됨';
+    case 'queued':
+      return '대기중';
+    case 'started':
+      return request.hasResponse ? '응답작성중' : '처리중';
+    case 'completed':
+      return '완료';
+    case 'failed':
+      return '실패';
+    case 'cancelled':
+      return '취소됨';
+    case 'removed':
+      return '삭제됨';
+    default:
+      return null;
+  }
+}
+
+function isTerminalRequestStatus(status: ChatConversationRequest['status'] | undefined) {
+  return status === 'completed' || status === 'failed' || status === 'cancelled' || status === 'removed';
+}
+
+function getRequestDetailText(request: ChatConversationRequest | undefined) {
+  if (!request) {
+    return '';
+  }
+
+  const normalizedStatusMessage = String(request.statusMessage ?? '').trim();
+
+  if (!normalizedStatusMessage) {
+    return '';
+  }
+
+  if (request.status === 'failed') {
+    return normalizedStatusMessage.startsWith('실패')
+      ? normalizedStatusMessage
+      : `실패 사유: ${normalizedStatusMessage}`;
+  }
+
+  if (request.status === 'cancelled') {
+    return normalizedStatusMessage.startsWith('취소')
+      ? normalizedStatusMessage
+      : `취소 사유: ${normalizedStatusMessage}`;
+  }
+
+  if (request.status === 'removed') {
+    return normalizedStatusMessage;
+  }
+
+  return '';
+}
+
+function InlineMessagePreview({
+  target,
+  isExpanded,
+  onToggle,
+}: {
+  target: InlinePreviewTarget;
+  isExpanded: boolean;
+  onToggle: () => void;
+}) {
+  const [textPreview, setTextPreview] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [previewError, setPreviewError] = useState('');
+  const [previewContentType, setPreviewContentType] = useState('');
+
+  useEffect(() => {
+    if (!isExpanded) {
+      return;
+    }
+
+    if (target.kind === 'image' || target.kind === 'video' || target.kind === 'pdf') {
+      return;
+    }
+
+    const controller = new AbortController();
+    setIsLoading(true);
+    setPreviewError('');
+    setPreviewContentType('');
+
+    fetch(target.url, {
+      cache: 'no-store',
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw await createPreviewFetchError(response);
+        }
+
+        setPreviewContentType(response.headers.get('content-type') ?? '');
+        const text = await response.text();
+        setTextPreview(text.slice(0, 1600));
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+
+        setTextPreview('');
+        setPreviewContentType('');
+        setPreviewError(error instanceof Error ? error.message : 'preview를 불러오지 못했습니다.');
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, [isExpanded, target.kind, target.url]);
+
+  return (
+    <section className={`app-chat-preview-card${isExpanded ? ' app-chat-preview-card--expanded' : ' app-chat-preview-card--collapsed'}`}>
+      <div className="app-chat-preview-card__header">
+        <div className="app-chat-preview-card__meta">
+          <span className="app-chat-preview-card__glyph" aria-hidden="true">
+            <LinkOutlined />
+          </span>
+          <div className="app-chat-preview-card__titles">
+            <span className="app-chat-preview-card__label">{target.label}</span>
+            <span className="app-chat-preview-card__kind">{target.kind}</span>
+          </div>
+        </div>
+        <Button
+          type="link"
+          size="small"
+          className="app-chat-preview-card__toggle"
+          icon={isExpanded ? <UpOutlined /> : <DownOutlined />}
+          aria-label={isExpanded ? 'preview 접기' : 'preview 펼치기'}
+          onClick={onToggle}
+        />
+      </div>
+
+      {isExpanded ? (
+        <div className="app-chat-preview-card__body">
+          <ChatPreviewBody
+            target={target}
+            previewText={textPreview}
+            isPreviewLoading={isLoading}
+            previewError={previewError}
+            previewContentType={previewContentType}
+          />
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+type ChatConversationViewProps = {
+  viewportRef: RefObject<HTMLDivElement | null>;
+  composerRef: RefObject<TextAreaRef | null>;
+  visibleMessages: ChatMessage[];
+  activeSystemStatus: string | null;
+  isSystemStatusPending: boolean;
+  showScrollToBottom: boolean;
+  copiedMessageId: number | null;
+  draft: string;
+  composerAttachments: ChatComposerAttachment[];
+  requestStateMap: Map<string, ChatConversationRequest>;
+  isConversationLoading: boolean;
+  conversationLoadingLabel: string;
+  hasOlderMessages: boolean;
+  isLoadingOlderMessages: boolean;
+  isPullToLoadArmed: boolean;
+  pullToLoadDistance: number;
+  selectedChatTypeId: string | null;
+  queuedRequests: QueuedRequestOption[];
+  chatTypeOptions: ChatTypeOption[];
+  previewItems: PreviewOption[];
+  isResourceStripOpen: boolean;
+  isComposerDisabled: boolean;
+  isComposerAttachmentUploading: boolean;
+  onViewportScroll: () => void;
+  onViewportTouchEnd: () => void;
+  onViewportTouchMove: (event: TouchEvent<HTMLDivElement>) => void;
+  onViewportTouchStart: (event: TouchEvent<HTMLDivElement>) => void;
+  onDraftChange: (value: string) => void;
+  onPickComposerFiles: (files: File[]) => void | Promise<void>;
+  onRemoveComposerAttachment: (attachmentId: string) => void;
+  onSelectChatType: (value: string) => void;
+  onSend: () => void;
+  onSendImmediate: () => void;
+  onScrollToBottom: () => void;
+  onToggleResourceStrip: () => void;
+  onOpenPreview: (previewId: string) => void;
+  onCopyMessage: (message: ChatMessage) => void;
+  onRetryMessage: (message: ChatMessage) => void;
+  onCancelMessage: (message: ChatMessage) => void;
+  onDeleteRequest: (message: ChatMessage) => void;
+  onRemoveQueuedRequest: (requestId: string) => void;
+};
+
+export function ChatConversationView({
+  viewportRef,
+  composerRef,
+  visibleMessages,
+  activeSystemStatus,
+  isSystemStatusPending,
+  showScrollToBottom,
+  copiedMessageId,
+  draft,
+  composerAttachments,
+  requestStateMap,
+  isConversationLoading,
+  conversationLoadingLabel,
+  hasOlderMessages,
+  isLoadingOlderMessages,
+  isPullToLoadArmed,
+  pullToLoadDistance,
+  selectedChatTypeId,
+  queuedRequests,
+  chatTypeOptions,
+  previewItems,
+  isResourceStripOpen,
+  isComposerDisabled,
+  isComposerAttachmentUploading,
+  onViewportScroll,
+  onViewportTouchEnd,
+  onViewportTouchMove,
+  onViewportTouchStart,
+  onDraftChange,
+  onPickComposerFiles,
+  onRemoveComposerAttachment,
+  onSelectChatType,
+  onSend,
+  onSendImmediate,
+  onScrollToBottom,
+  onToggleResourceStrip,
+  onOpenPreview,
+  onCopyMessage,
+  onRetryMessage,
+  onCancelMessage,
+  onDeleteRequest,
+  onRemoveQueuedRequest,
+}: ChatConversationViewProps) {
+  const [expandedMessageIds, setExpandedMessageIds] = useState<number[]>([]);
+  const [expandedPreviewKey, setExpandedPreviewKey] = useState<string | null>(null);
+  const [collapsedActivityRequestIds, setCollapsedActivityRequestIds] = useState<string[]>([]);
+  const [collapsibleMessageIds, setCollapsibleMessageIds] = useState<number[]>([]);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const activitySectionRefs = useRef(new Map<string, HTMLElement>());
+  const messageBodyRefs = useRef(new Map<number, HTMLDivElement>());
+  const autoCollapsedActivityRequestIdsRef = useRef(new Set<string>());
+
+  const orderedMessages = useMemo(() => {
+    const lastActivityIndexByKey = new Map<string, number>();
+
+    visibleMessages.forEach((message, index) => {
+      if (!isActivityLogMessage(message)) {
+        return;
+      }
+
+      const activityKey = message.clientRequestId?.trim() || `activity-${message.id}`;
+      lastActivityIndexByKey.set(activityKey, index);
+    });
+
+    return visibleMessages.filter((message, index) => {
+      if (!isActivityLogMessage(message)) {
+        return true;
+      }
+
+      const activityKey = message.clientRequestId?.trim() || `activity-${message.id}`;
+      return lastActivityIndexByKey.get(activityKey) === index;
+    });
+  }, [visibleMessages]);
+
+  const setActivitySectionRef = (requestId: string, element: HTMLElement | null) => {
+    if (element) {
+      activitySectionRefs.current.set(requestId, element);
+      return;
+    }
+
+    activitySectionRefs.current.delete(requestId);
+  };
+
+  const setMessageBodyRef = (messageId: number, element: HTMLDivElement | null) => {
+    if (element) {
+      messageBodyRefs.current.set(messageId, element);
+      return;
+    }
+
+    messageBodyRefs.current.delete(messageId);
+  };
+
+  const scrollActivitySectionIntoView = (requestId: string) => {
+    const section = activitySectionRefs.current.get(requestId);
+    if (!section || typeof window === 'undefined') {
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      section.scrollIntoView({
+        block: 'nearest',
+        behavior: 'smooth',
+      });
+    });
+  };
+
+  useEffect(() => {
+    const requestIdsToCollapse = new Set<string>();
+
+    orderedMessages.forEach((message) => {
+      if (!isActivityLogMessage(message)) {
+        return;
+      }
+
+      const requestId = message.clientRequestId?.trim();
+
+      if (!requestId || autoCollapsedActivityRequestIdsRef.current.has(requestId)) {
+        return;
+      }
+
+      const requestState = requestStateMap.get(requestId);
+      const hasCodexResponse = orderedMessages.some(
+        (candidate) => candidate.clientRequestId === requestId && candidate.author === 'codex' && candidate.text.trim().length > 0,
+      );
+
+      if (isTerminalRequestStatus(requestState?.status) || hasCodexResponse) {
+        requestIdsToCollapse.add(requestId);
+      }
+    });
+
+    if (requestIdsToCollapse.size === 0) {
+      return;
+    }
+
+    requestIdsToCollapse.forEach((requestId) => {
+      autoCollapsedActivityRequestIdsRef.current.add(requestId);
+    });
+
+    setCollapsedActivityRequestIds((current) => {
+      const next = new Set(current);
+      requestIdsToCollapse.forEach((requestId) => {
+        next.add(requestId);
+      });
+      return Array.from(next);
+    });
+  }, [orderedMessages, requestStateMap]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    let frameId = 0;
+    let resizeObserver: ResizeObserver | null = null;
+
+    const measureCollapsibleMessages = () => {
+      const nextIds: number[] = [];
+
+      orderedMessages.forEach((message) => {
+        if (message.author !== 'user' && message.author !== 'codex') {
+          return;
+        }
+
+        if (isLikelyCollapsibleMessage(message.text)) {
+          nextIds.push(message.id);
+          return;
+        }
+
+        const element = messageBodyRefs.current.get(message.id);
+
+        if (!element) {
+          return;
+        }
+
+        const computedStyle = window.getComputedStyle(element);
+        const rawLineHeight = Number.parseFloat(computedStyle.lineHeight);
+        const lineHeight = Number.isFinite(rawLineHeight) ? rawLineHeight : 12 * 1.45;
+        const collapsedMaxHeight = lineHeight * COLLAPSIBLE_MESSAGE_LINE_COUNT;
+        const fullHeight = element.scrollHeight;
+
+        if (fullHeight > collapsedMaxHeight + 4) {
+          nextIds.push(message.id);
+        }
+      });
+
+      setCollapsibleMessageIds((current) => {
+        if (current.length === nextIds.length && current.every((id, index) => id === nextIds[index])) {
+          return current;
+        }
+
+        return nextIds;
+      });
+    };
+
+    const scheduleMeasure = () => {
+      window.cancelAnimationFrame(frameId);
+      frameId = window.requestAnimationFrame(measureCollapsibleMessages);
+    };
+
+    scheduleMeasure();
+    window.addEventListener('resize', scheduleMeasure);
+
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        scheduleMeasure();
+      });
+
+      orderedMessages.forEach((message) => {
+        const element = messageBodyRefs.current.get(message.id);
+
+        if (element) {
+          resizeObserver?.observe(element);
+        }
+      });
+    }
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.removeEventListener('resize', scheduleMeasure);
+      resizeObserver?.disconnect();
+    };
+  }, [orderedMessages, expandedMessageIds]);
+
+  const handleComposerFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = '';
+
+    if (files.length === 0) {
+      return;
+    }
+
+    void onPickComposerFiles(files);
+  };
+
+  const renderActivityCard = (message: ChatMessage) => {
+    const requestId = message.clientRequestId?.trim() || String(message.id);
+    const isExpanded = !collapsedActivityRequestIds.includes(requestId);
+    const lines = extractActivityLines(message);
+    const liveStatusLine = summarizeActivityLines(lines) || '활동 로그를 불러오는 중입니다.';
+    const activityCountLabel = `${lines.length}개 로그`;
+
+    return (
+      <div key={`activity-${message.id}`} className="app-chat-message-stack app-chat-message-stack--system">
+        <section
+          ref={(element) => {
+            setActivitySectionRef(requestId, element);
+          }}
+          className={`app-chat-preview-card app-chat-preview-card--activity${
+            isExpanded ? ' app-chat-preview-card--activity-expanded' : ' app-chat-preview-card--activity-collapsed'
+          }`}
+        >
+          <div className="app-chat-preview-card__header">
+            <div className="app-chat-preview-card__meta">
+              <span className="app-chat-preview-card__glyph app-chat-preview-card__glyph--activity" aria-hidden="true">
+                <MessageOutlined />
+              </span>
+              <div className="app-chat-preview-card__titles">
+                <div className="app-chat-activity-card__title-row">
+                  <span className="app-chat-preview-card__label">활동 로그</span>
+                  <span className="app-chat-activity-card__badge">{activityCountLabel}</span>
+                </div>
+                <span className="app-chat-preview-card__kind app-chat-activity-card__request-id">{requestId}</span>
+              </div>
+            </div>
+            <Button
+              type="link"
+              size="small"
+              className="app-chat-preview-card__toggle"
+              icon={isExpanded ? <UpOutlined /> : <DownOutlined />}
+              aria-label={isExpanded ? '활동 로그 접기' : '활동 로그 펼치기'}
+              iconPosition="end"
+              onClick={() => {
+                setCollapsedActivityRequestIds((current) => {
+                  if (current.includes(requestId)) {
+                    scrollActivitySectionIntoView(requestId);
+                    return current.filter((currentRequestId) => currentRequestId !== requestId);
+                  }
+
+                  return [...current, requestId];
+                });
+              }}
+            >
+              {isExpanded ? '접기' : '펼치기'}
+            </Button>
+          </div>
+          <div className="app-chat-preview-card__body app-chat-preview-card__body--activity app-chat-preview-card__body--activity-summary">
+            <div className="app-chat-activity-card__summary" aria-label="실시간 상태">
+              <span className="app-chat-activity-card__summary-label">현재 상태</span>
+              <span className="app-chat-message__activity-status">{liveStatusLine}</span>
+            </div>
+          </div>
+          {isExpanded ? (
+            <div className="app-chat-preview-card__body app-chat-preview-card__body--activity">
+              <div className="app-chat-activity-log" role="log" aria-live="polite" aria-label="활동 로그 상세">
+                {lines.map((line, lineIndex) => (
+                  <div key={`${requestId}-${lineIndex}`} className="app-chat-activity-log__item">
+                    <span className="app-chat-activity-log__index" aria-hidden="true">
+                      {lineIndex + 1}
+                    </span>
+                    <p className="app-chat-activity-log__line">{line}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </section>
+      </div>
+    );
+  };
+
+  return (
+    <div className="app-chat-panel__conversation-view">
+      {isConversationLoading ? (
+        <div className="app-chat-panel__conversation-loading" aria-live="polite">
+          <Spin size="large" />
+          <strong>{conversationLoadingLabel}</strong>
+          <span>재접속 중에는 채팅방 내용을 다시 맞춘 뒤 자연스럽게 표시합니다.</span>
+        </div>
+      ) : null}
+
+      <div className={`app-chat-panel__conversation-view-inner${isConversationLoading ? ' is-loading' : ''}`}>
+        <div className="app-chat-panel__conversation-toolbar">
+          <Button
+            type={isResourceStripOpen ? 'default' : 'text'}
+            size="small"
+            className="app-chat-panel__conversation-toggle"
+            icon={<PaperClipOutlined />}
+            aria-label={isResourceStripOpen ? '채팅 리소스 숨기기' : '채팅 리소스 보기'}
+            onClick={onToggleResourceStrip}
+          />
+        </div>
+
+        {isResourceStripOpen ? (
+          <div className="app-chat-panel__resource-strip">
+            {previewItems.length > 0 ? (
+              <div className="app-chat-panel__resource-strip-list">
+                {previewItems.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className="app-chat-panel__resource-chip"
+                    onClick={() => {
+                      onOpenPreview(item.id);
+                    }}
+                  >
+                    <span>{item.label}</span>
+                    <span>{item.kind}</span>
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <span className="app-chat-panel__resource-strip-empty">
+                현재 대화에 바로 열 수 있는 리소스가 없습니다.
+              </span>
+            )}
+          </div>
+        ) : null}
+
+        <div
+          ref={viewportRef}
+          className="app-chat-panel__messages"
+          onScroll={onViewportScroll}
+          onTouchEnd={onViewportTouchEnd}
+          onTouchMove={onViewportTouchMove}
+          onTouchStart={onViewportTouchStart}
+        >
+        {hasOlderMessages || isLoadingOlderMessages || pullToLoadDistance > 0 ? (
+          <div
+            className={`app-chat-panel__history-loader${
+              isLoadingOlderMessages ? ' is-loading' : ''
+            }${isPullToLoadArmed ? ' is-armed' : ''}`}
+            style={{
+              maxHeight: `${Math.max(isLoadingOlderMessages ? 52 : 0, pullToLoadDistance)}px`,
+              opacity: isLoadingOlderMessages || pullToLoadDistance > 0 ? 1 : 0.72,
+            }}
+          >
+            <Spin size="small" spinning={isLoadingOlderMessages} />
+            <span>
+              {isLoadingOlderMessages
+                ? '이전 대화를 동기화하는 중입니다.'
+                : isPullToLoadArmed
+                  ? '손을 놓으면 이전 대화를 더 불러옵니다.'
+                  : hasOlderMessages
+                    ? '최상단에서 아래로 끌어당겨 이전 대화를 불러오세요.'
+                    : '이전 대화가 없습니다.'}
+            </span>
+          </div>
+        ) : null}
+        {orderedMessages.map((message) => {
+          const canCollapseMessage = collapsibleMessageIds.includes(message.id);
+          const isExpandedMessage = expandedMessageIds.includes(message.id);
+          const shouldTruncateMessage = canCollapseMessage && !isExpandedMessage;
+          const messageBodyClassName = `app-chat-message__body${shouldTruncateMessage ? ' app-chat-message__body--collapsed' : ''}`;
+
+          if (isActivityLogMessage(message)) {
+            return renderActivityCard(message);
+          }
+
+          const inlinePreviewTargets = extractInlinePreviewTargets(message.text);
+          const requestState = message.clientRequestId ? requestStateMap.get(message.clientRequestId) : undefined;
+          const requestStatusLabel = formatRequestStatusLabel(requestState);
+          const requestDetailText = getRequestDetailText(requestState);
+
+          return (
+            <div key={message.id} className={`app-chat-message-stack app-chat-message-stack--${message.author}`}>
+              <article className={`app-chat-message app-chat-message--${message.author}`}>
+                <div className="app-chat-message__header">
+                  <div className="app-chat-message__header-meta">
+                    <strong>{message.author === 'codex' ? 'Codex' : message.author === 'user' ? 'You' : 'System'}</strong>
+                    <span>{formatChatTimestamp(message.timestamp)}</span>
+                    {message.author === 'user' && requestStatusLabel ? (
+                      <span className="app-chat-message__status" aria-label={`요청 상태 ${requestStatusLabel}`}>
+                        <span>{requestStatusLabel}</span>
+                      </span>
+                    ) : null}
+                    {message.author === 'user' && message.deliveryStatus === 'retrying' ? (
+                      <span className="app-chat-message__status app-chat-message__status--retrying" aria-label="재전송 중">
+                        <SyncOutlined spin />
+                        <span>{message.retryCount && message.retryCount > 0 ? `재시도 ${message.retryCount}` : '재전송 대기'}</span>
+                      </span>
+                    ) : null}
+                    {message.author === 'user' && message.deliveryStatus === 'failed' ? (
+                      <span className="app-chat-message__status app-chat-message__status--failed" aria-label="전송 실패">
+                        <ExclamationCircleOutlined />
+                        <span>전송 실패</span>
+                      </span>
+                    ) : null}
+                    {message.author === 'user' &&
+                    (message.deliveryStatus === 'retrying' || message.deliveryStatus === 'failed') ? (
+                      <Button
+                        type="link"
+                        size="small"
+                        danger
+                        className="app-chat-message__cancel"
+                        icon={<CloseOutlined />}
+                        onClick={() => {
+                          onCancelMessage(message);
+                        }}
+                      >
+                        취소
+                      </Button>
+                    ) : null}
+                    {message.author === 'user' && message.deliveryStatus === 'failed' ? (
+                      <>
+                        <Button
+                          type="link"
+                          size="small"
+                          className="app-chat-message__retry"
+                          icon={<RedoOutlined />}
+                          onClick={() => {
+                            onRetryMessage(message);
+                          }}
+                        >
+                          재전송
+                        </Button>
+                      </>
+                    ) : null}
+                    {message.author === 'user' &&
+                    requestState?.canDelete &&
+                    requestState.status !== 'accepted' ? (
+                      <Button
+                        type="link"
+                        size="small"
+                        className="app-chat-message__retry app-chat-message__delete"
+                        icon={<DeleteOutlined />}
+                        aria-label="메시지 삭제"
+                        onClick={() => {
+                          onDeleteRequest(message);
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                  {message.author !== 'system' ? (
+                    <Button
+                      type="text"
+                      size="small"
+                      className="app-chat-message__header-action"
+                      icon={<CopyOutlined />}
+                      aria-label={copiedMessageId === message.id ? '복사됨' : message.author === 'user' ? '내 메시지 복사' : '답변 복사'}
+                      onClick={() => {
+                        onCopyMessage(message);
+                      }}
+                    />
+                  ) : null}
+                </div>
+                <div
+                  ref={(element) => {
+                    setMessageBodyRef(message.id, element);
+                  }}
+                  className={messageBodyClassName}
+                >
+                  {message.text}
+                </div>
+                {message.author === 'user' && requestDetailText ? (
+                  <div className="app-chat-message__request-detail" role="status" aria-live="polite">
+                    {requestDetailText}
+                  </div>
+                ) : null}
+                {canCollapseMessage ? (
+                  <Button
+                    type="text"
+                    size="small"
+                    className="app-chat-message__expand"
+                    icon={isExpandedMessage ? <UpOutlined /> : <DownOutlined />}
+                    aria-label={isExpandedMessage ? '메시지 접기' : '메시지 펼치기'}
+                    onClick={() => {
+                      setExpandedMessageIds((current) =>
+                        current.includes(message.id) ? current.filter((id) => id !== message.id) : [...current, message.id],
+                      );
+                    }}
+                  >
+                    {isExpandedMessage ? '접기' : '펼치기'}
+                  </Button>
+                ) : null}
+              </article>
+              {inlinePreviewTargets.length > 0 ? (
+                <div className="app-chat-message-stack__previews">
+                  {inlinePreviewTargets.map((target) => (
+                    <InlineMessagePreview
+                      key={`${message.id}-${target.url}`}
+                      target={target}
+                      isExpanded={expandedPreviewKey === `${message.id}-${target.url}`}
+                      onToggle={() => {
+                        const nextKey = `${message.id}-${target.url}`;
+                        setExpandedPreviewKey((current) => (current === nextKey ? null : nextKey));
+                      }}
+                    />
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+
+      </div>
+
+      <div className="app-chat-panel__system-status-slot app-chat-panel__system-status-slot--bottom">
+        <div
+          className={`app-chat-panel__system-status${
+            activeSystemStatus ? '' : ' app-chat-panel__system-status--hidden'
+          }${isSystemStatusPending ? ' app-chat-panel__system-status--pending' : ''}`}
+        >
+          <span>{activeSystemStatus ?? ''}</span>
+          {activeSystemStatus && isSystemStatusPending ? (
+            <div className="app-chat-panel__system-status-dots" aria-label="처리 중">
+              <span className="app-chat-panel__system-status-dot" />
+              <span className="app-chat-panel__system-status-dot" />
+              <span className="app-chat-panel__system-status-dot" />
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {showScrollToBottom ? (
+        <div className="app-chat-panel__scroll-jump">
+          <Button type="primary" shape="circle" icon={<DownOutlined />} aria-label="최하단으로 이동" onClick={onScrollToBottom} />
+        </div>
+      ) : null}
+
+      <div className="app-chat-panel__composer">
+        <div className="app-chat-panel__composer-topline">
+          <div className="app-chat-panel__composer-utility-buttons">
+            <Button
+              icon={<PlusOutlined />}
+              aria-label="파일 첨부"
+              onClick={() => {
+                fileInputRef.current?.click();
+              }}
+              disabled={isComposerDisabled}
+              loading={isComposerAttachmentUploading}
+            />
+          </div>
+          <div className="app-chat-panel__composer-type">
+            <Select
+              value={selectedChatTypeId ?? undefined}
+              placeholder="컨텍스트를 선택하세요."
+              options={chatTypeOptions.map((option) => ({
+                value: option.value,
+                disabled: option.disabled,
+                label: (
+                  <div className="app-chat-panel__type-option">
+                    <span>{option.label}</span>
+                  </div>
+                ),
+              }))}
+              getPopupContainer={(triggerNode) => triggerNode.closest('.app-chat-panel') ?? document.body}
+              disabled={chatTypeOptions.length === 0}
+              onChange={onSelectChatType}
+            />
+          </div>
+          <div className="app-chat-panel__composer-actions">
+            <div className="app-chat-panel__composer-action-buttons">
+              <Button
+                icon={<ThunderboltOutlined />}
+                aria-label="즉시 요청"
+                onClick={onSendImmediate}
+                disabled={isComposerDisabled || isComposerAttachmentUploading}
+              />
+              <Button
+                type="primary"
+                icon={<SendOutlined />}
+                aria-label="큐로 보내기"
+                onClick={onSend}
+                disabled={isComposerDisabled || isComposerAttachmentUploading}
+              />
+            </div>
+          </div>
+        </div>
+
+        {chatTypeOptions.length === 0 ? (
+          <Alert
+            showIcon
+            type="warning"
+            message="사용 가능한 컨텍스트가 없습니다."
+            description="관리 페이지에서 현재 사용자 권한에 맞는 컨텍스트를 등록하거나 권한을 부여하세요."
+          />
+        ) : null}
+
+        <div
+          className={`app-chat-panel__composer-input-shell${
+            queuedRequests.length > 0 ? ' app-chat-panel__composer-input-shell--with-queue' : ''
+          }`}
+        >
+          {queuedRequests.length > 0 ? (
+            <div className="app-chat-panel__composer-queue" aria-live="polite">
+              <div className="app-chat-panel__composer-queue-count">
+                <span>대기열 {queuedRequests.length}건</span>
+              </div>
+              <div className="app-chat-panel__composer-queue-list">
+                {queuedRequests.map((item) => (
+                  <div key={item.requestId} className="app-chat-panel__composer-queue-chip">
+                    <div className="app-chat-panel__composer-queue-chip-main">
+                      <span className="app-chat-panel__composer-queue-order">{item.order}</span>
+                      <span className="app-chat-panel__composer-queue-text">{summarizeQueuedText(item.text)}</span>
+                    </div>
+                    <div className="app-chat-panel__composer-queue-chip-actions">
+                      <Button
+                        type="text"
+                        size="small"
+                        danger
+                        icon={<CloseOutlined />}
+                        aria-label="대기 요청 취소"
+                        onClick={() => {
+                          onRemoveQueuedRequest(item.requestId);
+                        }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <Input.TextArea
+            ref={composerRef}
+            value={draft}
+            autoSize={{ minRows: 3, maxRows: 8 }}
+            placeholder={
+              isComposerDisabled
+                ? '권한이 있는 컨텍스트가 없어 입력할 수 없습니다.'
+                : '메시지를 입력하세요. Ctrl+Enter로 전송하고, 실시간 응답과 preview 링크를 이 대화에서 바로 이어서 다룰 수 있습니다.'
+            }
+            disabled={isComposerDisabled}
+            onChange={(event) => {
+              onDraftChange(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key !== 'Enter' || event.nativeEvent.isComposing) {
+                return;
+              }
+
+              if (!event.ctrlKey) {
+                event.stopPropagation();
+                return;
+              }
+
+              if (isComposerAttachmentUploading) {
+                return;
+              }
+
+              event.preventDefault();
+              event.stopPropagation();
+              onSend();
+            }}
+          />
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="app-chat-panel__composer-file-input"
+            onChange={handleComposerFileChange}
+          />
+        </div>
+
+        {composerAttachments.length > 0 ? (
+          <div className="app-chat-panel__composer-attachment-strip" aria-live="polite">
+            {composerAttachments.map((attachment) => (
+              <div key={attachment.id} className="app-chat-panel__composer-attachment-chip">
+                <span className="app-chat-panel__composer-attachment-name">{attachment.name}</span>
+                <Button
+                  type="text"
+                  size="small"
+                  className="app-chat-panel__composer-attachment-remove"
+                  icon={<CloseOutlined />}
+                  aria-label={`${attachment.name} 첨부 제거`}
+                  onClick={() => {
+                    onRemoveComposerAttachment(attachment.id);
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/main/mainChatPanel/ChatPreviewBody.tsx b/src/app/main/mainChatPanel/ChatPreviewBody.tsx
new file mode 100755
index 0000000..c8d37f6
--- /dev/null
+++ b/src/app/main/mainChatPanel/ChatPreviewBody.tsx
@@ -0,0 +1,303 @@
+import { DownloadOutlined, EyeOutlined } from '@ant-design/icons';
+import { Alert, Button, Empty, Space, Spin, Typography } from 'antd';
+import { InlineImage } from '../../../components/common/InlineImage';
+import { MarkdownPreviewContent } from '../../../components/markdownPreview/MarkdownPreviewContent';
+import { CodexDiffBlock } from '../../../components/previewer';
+import { inferCodeLanguage, renderEditorBlock } from '../../../components/previewer/renderers';
+import '../../../components/previewer/PreviewerUI.css';
+
+const { Paragraph, Text } = Typography;
+
+export type ChatPreviewKind = 'image' | 'video' | 'markdown' | 'code' | 'document' | 'pdf' | 'file';
+
+export type ChatPreviewTarget = {
+  label: string;
+  url: string;
+  kind: ChatPreviewKind;
+};
+
+function resolvePreviewErrorMessage(previewError: string) {
+  const normalized = previewError.trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  if (/^\s*403\b/.test(normalized) || normalized.includes('권한으로 열 수 없습니다')) {
+    return '권한이 없거나 허용되지 않은 경로입니다. 세션 리소스 경로와 접근 권한을 확인해 주세요.';
+  }
+
+  if (/^\s*404\b/.test(normalized) || normalized.includes('찾을 수 없습니다')) {
+    return '파일이 이동되었거나 아직 세션 리소스 경로에 생성되지 않았습니다. 경로를 다시 확인해 주세요.';
+  }
+
+  if (/^\s*401\b/.test(normalized) || normalized.includes('인증이 필요합니다')) {
+    return '인증 정보가 없어서 문서를 열 수 없습니다.';
+  }
+
+  return normalized;
+}
+
+function resolvePreviewExtension(target: ChatPreviewTarget) {
+  const raw = target.label || target.url;
+  const normalized = raw.toLowerCase().split('?')[0] ?? '';
+  const match = normalized.match(/\.([a-z0-9]+)$/i);
+  return match?.[1] ?? '';
+}
+
+function resolveCodeLanguage(target: ChatPreviewTarget, previewText: string) {
+  const extension = resolvePreviewExtension(target);
+
+  if (extension === 'tsx' || extension === 'ts') {
+    return 'typescript';
+  }
+
+  if (extension === 'jsx' || extension === 'js' || extension === 'mjs' || extension === 'cjs') {
+    return 'javascript';
+  }
+
+  if (extension === 'json') {
+    return 'json';
+  }
+
+  if (extension === 'css') {
+    return 'css';
+  }
+
+  if (extension === 'scss') {
+    return 'scss';
+  }
+
+  if (extension === 'html' || extension === 'htm') {
+    return 'html';
+  }
+
+  if (extension === 'md' || extension === 'markdown') {
+    return 'markdown';
+  }
+
+  if (extension === 'java') {
+    return 'java';
+  }
+
+  if (extension === 'kt') {
+    return 'kotlin';
+  }
+
+  if (extension === 'py') {
+    return 'python';
+  }
+
+  if (extension === 'go') {
+    return 'go';
+  }
+
+  if (extension === 'rs') {
+    return 'rust';
+  }
+
+  if (extension === 'sql') {
+    return 'sql';
+  }
+
+  if (extension === 'sh' || extension === 'bash' || extension === 'zsh') {
+    return 'bash';
+  }
+
+  if (extension === 'yml' || extension === 'yaml') {
+    return 'yaml';
+  }
+
+  if (extension === 'xml') {
+    return 'xml';
+  }
+
+  if (extension === 'diff' || extension === 'patch') {
+    return 'diff';
+  }
+
+  if (/^(diff --git|@@\s|--- a\/|\+\+\+ b\/)/m.test(previewText)) {
+    return 'diff';
+  }
+
+  return inferCodeLanguage(extension || 'text');
+}
+
+function isAppRouteUrl(url: string) {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(url, window.location.href);
+    const pathname = parsed.pathname.toLowerCase();
+    const hasKnownFileExtension = /\.[a-z0-9]+$/i.test(pathname);
+    return parsed.origin === window.location.origin && !hasKnownFileExtension;
+  } catch {
+    return false;
+  }
+}
+
+function canRenderFramePreview(url: string) {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(url, window.location.href);
+    return parsed.origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+type ChatPreviewBodyProps = {
+  target: ChatPreviewTarget | null;
+  previewText: string;
+  isPreviewLoading: boolean;
+  previewError: string;
+  previewContentType?: string;
+};
+
+function isHtmlFallbackPreview(target: ChatPreviewTarget, previewText: string, previewContentType: string | undefined) {
+  const extension = resolvePreviewExtension(target);
+  const normalizedContentType = previewContentType?.toLowerCase() ?? '';
+  const normalizedPreview = previewText.trimStart().toLowerCase();
+
+  if (extension === 'html' || extension === 'htm' || target.kind === 'markdown') {
+    return false;
+  }
+
+  const looksLikeHtml =
+    normalizedContentType.includes('text/html') ||
+    normalizedPreview.startsWith('<!doctype html') ||
+    normalizedPreview.startsWith('<html') ||
+    normalizedPreview.includes('<head') ||
+    normalizedPreview.includes('<body');
+
+  return looksLikeHtml;
+}
+
+export function ChatPreviewBody({
+  target,
+  previewText,
+  isPreviewLoading,
+  previewError,
+  previewContentType,
+}: ChatPreviewBodyProps) {
+  if (!target) {
+    return <Empty description="preview 가능한 링크가 아직 없습니다." />;
+  }
+
+  if (isPreviewLoading) {
+    return (
+      <div className="app-chat-panel__preview-loading">
+        <Spin size="small" />
+        <Text type="secondary">preview를 불러오는 중입니다.</Text>
+      </div>
+    );
+  }
+
+  if (previewError) {
+    return (
+      <Alert
+        showIcon
+        type="warning"
+        message="preview를 불러오지 못했습니다."
+        description={resolvePreviewErrorMessage(previewError)}
+      />
+    );
+  }
+
+  if (isHtmlFallbackPreview(target, previewText, previewContentType)) {
+    return (
+      <Alert
+        showIcon
+        type="info"
+        message="실제 소스 파일 대신 앱 HTML 화면이 반환되었습니다."
+        description={`${target.label} 경로가 raw 파일이 아니라 현재 앱의 fallback HTML을 돌려주고 있습니다. 정적 파일 경로 또는 실제 다운로드 경로를 사용해야 코드 preview가 정확하게 표시됩니다.`}
+      />
+    );
+  }
+
+  if (target.kind === 'image') {
+    return (
+      <InlineImage
+        src={target.url}
+        alt={target.label}
+        className="app-chat-panel__preview-image"
+        fallbackText="이미지 preview를 불러오지 못했습니다."
+      />
+    );
+  }
+
+  if (target.kind === 'video') {
+    return <video src={target.url} className="app-chat-panel__preview-video" controls playsInline />;
+  }
+
+  if (target.kind === 'pdf') {
+    return <iframe title={target.label} src={target.url} className="app-chat-panel__preview-frame" />;
+  }
+
+  if (target.kind === 'markdown') {
+    return (
+      <div className="app-chat-panel__preview-rich app-chat-panel__preview-rich--markdown">
+        <MarkdownPreviewContent content={previewText || '# Preview\n\n표시할 preview 본문이 없습니다.'} maxBlocks={12} />
+      </div>
+    );
+  }
+
+  if (target.kind === 'code' || target.kind === 'document') {
+    const resolvedLanguage = resolveCodeLanguage(target, previewText);
+
+    if (resolvedLanguage === 'diff') {
+      return (
+        <div className="app-chat-panel__preview-rich app-chat-panel__preview-rich--code">
+          <CodexDiffBlock
+            diffText={previewText || ''}
+            summary={`${target.label} 기준 raw diff preview입니다.`}
+            showToolbar={false}
+            className="app-chat-panel__preview-diff"
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div className="app-chat-panel__preview-rich app-chat-panel__preview-rich--code">
+        {renderEditorBlock(previewText || '표시할 preview 본문이 없습니다.', resolvedLanguage, 'code')}
+      </div>
+    );
+  }
+
+  if (isAppRouteUrl(target.url)) {
+    return (
+      <Alert
+        showIcon
+        type="info"
+        message="앱 화면 경로는 preview iframe으로 열지 않습니다."
+        description="현재 화면 문맥은 이미 WebSocket으로 서버에 전달됩니다. 이 경로를 다시 열면 앱만 새로 렌더링되어 preview처럼 보이지 않을 수 있습니다."
+      />
+    );
+  }
+
+  if (canRenderFramePreview(target.url)) {
+    return <iframe title={target.label} src={target.url} className="app-chat-panel__preview-frame" />;
+  }
+
+  return (
+    <div className="app-chat-panel__preview-file">
+      <Paragraph>
+        브라우저에서 직접 렌더링하지 않는 형식입니다. 아래 버튼으로 새 탭에서 열거나 바로 다운로드할 수 있습니다.
+      </Paragraph>
+      <Space wrap>
+        <Button href={target.url} target="_blank" rel="noreferrer" icon={<EyeOutlined />}>
+          새 탭 열기
+        </Button>
+        <Button href={target.url} download icon={<DownloadOutlined />}>
+          다운로드
+        </Button>
+      </Space>
+    </div>
+  );
+}
diff --git a/src/app/main/mainChatPanel/ChatRuntimeDashboard.tsx b/src/app/main/mainChatPanel/ChatRuntimeDashboard.tsx
new file mode 100755
index 0000000..c753392
--- /dev/null
+++ b/src/app/main/mainChatPanel/ChatRuntimeDashboard.tsx
@@ -0,0 +1,497 @@
+import { ClockCircleOutlined, EyeOutlined, LoadingOutlined, StopOutlined } from '@ant-design/icons';
+import { Button, Drawer, Empty, Modal, Space, Typography } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import {
+  cancelChatRuntimeJob,
+  fetchChatRuntimeJobDetail,
+  removeChatRuntimeJob,
+} from './chatUtils';
+import type { ChatRuntimeJobDetail, ChatRuntimeJobItem, ChatRuntimeSnapshot } from './types';
+
+const { Paragraph, Text } = Typography;
+
+function formatRuntimeTime(value: string | null) {
+  if (!value) {
+    return '-';
+  }
+
+  const parsed = new Date(value);
+
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  return parsed.toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+function buildTerminalLabel(terminalStatus: ChatRuntimeJobDetail['terminalStatus']) {
+  if (!terminalStatus) {
+    return '';
+  }
+
+  if (terminalStatus === 'cancelled') {
+    return '취소됨';
+  }
+
+  if (terminalStatus === 'removed') {
+    return '대기열 제거됨';
+  }
+
+  if (terminalStatus === 'failed') {
+    return '실패';
+  }
+
+  return '완료';
+}
+
+function RuntimeJobList({
+  title,
+  emptyDescription,
+  items,
+  activeSessionId,
+  onSelectSession,
+  onOpenLog,
+  onCancelJob,
+  onRemoveJob,
+  pendingActionRequestId,
+}: {
+  title: string;
+  emptyDescription: string;
+  items: ChatRuntimeJobItem[];
+  activeSessionId: string;
+  onSelectSession: (sessionId: string) => void;
+  onOpenLog: (requestId: string) => void;
+  onCancelJob: (requestId: string) => void;
+  onRemoveJob: (requestId: string) => void;
+  pendingActionRequestId: string | null;
+}) {
+  return (
+    <section className="app-chat-runtime__section">
+      <div className="app-chat-runtime__section-header">
+        <Text strong>{title}</Text>
+        <Text type="secondary">{items.length}건</Text>
+      </div>
+
+      {items.length === 0 ? (
+        <div className="app-chat-runtime__empty">
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyDescription} />
+        </div>
+      ) : (
+        <div className="app-chat-runtime__list">
+          {items.map((item) => (
+            <article
+              key={`${item.status}-${item.requestId}`}
+              className={`app-chat-runtime__job${item.sessionId === activeSessionId ? ' app-chat-runtime__job--active' : ''}`}
+            >
+              <div className="app-chat-runtime__job-top">
+                <div className="app-chat-runtime__job-headline">
+                  <Text strong>{item.status === 'running' ? '실행 중' : '대기 중'}</Text>
+                  <Text type="secondary">{item.mode === 'direct' ? '즉시' : '큐'}</Text>
+                </div>
+                <Space size={8} wrap className="app-chat-runtime__job-actions">
+                  <Button
+                    size="small"
+                    icon={<EyeOutlined />}
+                    onClick={() => {
+                      onSelectSession(item.sessionId);
+                    }}
+                  >
+                    세션 보기
+                  </Button>
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      onOpenLog(item.requestId);
+                    }}
+                  >
+                    로그
+                  </Button>
+                  {item.status === 'running' ? (
+                    <Button
+                      size="small"
+                      danger
+                      icon={<StopOutlined />}
+                      loading={pendingActionRequestId === item.requestId}
+                      onClick={() => {
+                        onCancelJob(item.requestId);
+                      }}
+                    >
+                      취소
+                    </Button>
+                  ) : (
+                    <Button
+                      size="small"
+                      danger
+                      loading={pendingActionRequestId === item.requestId}
+                      onClick={() => {
+                        onRemoveJob(item.requestId);
+                      }}
+                    >
+                      제거
+                    </Button>
+                  )}
+                </Space>
+              </div>
+              <Text className="app-chat-runtime__job-summary">{item.summary || '요약 없음'}</Text>
+              <div className="app-chat-runtime__job-meta">
+                <Text type="secondary">세션: {item.sessionId}</Text>
+                <Text type="secondary">요청: {item.requestId}</Text>
+                <Text type="secondary">대기 시작: {formatRuntimeTime(item.enqueuedAt)}</Text>
+                <Text type="secondary">실행 시작: {formatRuntimeTime(item.startedAt)}</Text>
+                <Text type="secondary">PID: {item.pid ?? '-'}</Text>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function RecentRuntimeList({
+  items,
+  onSelectSession,
+  onOpenLog,
+}: {
+  items: ChatRuntimeSnapshot['recent'];
+  onSelectSession: (sessionId: string) => void;
+  onOpenLog: (requestId: string) => void;
+}) {
+  return (
+    <section className="app-chat-runtime__section app-chat-runtime__section--recent">
+      <div className="app-chat-runtime__section-header">
+        <Text strong>최근 작업</Text>
+        <Text type="secondary">{items.length}건</Text>
+      </div>
+      {items.length === 0 ? (
+        <div className="app-chat-runtime__empty">
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="아직 종료된 작업 이력이 없습니다." />
+        </div>
+      ) : (
+        <div className="app-chat-runtime__list">
+          {items.map((item) => (
+            <article key={`recent-${item.requestId}-${item.lastUpdatedAt}`} className="app-chat-runtime__job">
+              <div className="app-chat-runtime__job-top">
+                <div className="app-chat-runtime__job-headline">
+                  <Text strong>{buildTerminalLabel(item.terminalStatus)}</Text>
+                  <Text type="secondary">{item.mode === 'direct' ? '즉시' : '큐'}</Text>
+                </div>
+                <Button
+                  size="small"
+                  onClick={() => {
+                    onOpenLog(item.requestId);
+                  }}
+                >
+                  로그
+                </Button>
+                <Button
+                  size="small"
+                  onClick={() => {
+                    onSelectSession(item.sessionId);
+                  }}
+                >
+                  채팅방 이동
+                </Button>
+              </div>
+              <Text className="app-chat-runtime__job-summary">{item.summary || '요약 없음'}</Text>
+              <div className="app-chat-runtime__job-meta">
+                <Text type="secondary">세션: {item.sessionId}</Text>
+                <Text type="secondary">요청: {item.requestId}</Text>
+                <Text type="secondary">종료 시각: {formatRuntimeTime(item.lastUpdatedAt)}</Text>
+                <Text type="secondary">PID: {item.pid ?? '-'}</Text>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function ChatRuntimeDashboard({
+  snapshot,
+  activeSessionId,
+  connectionState,
+  onSelectSession,
+  socketRef,
+  liveDetail,
+  requestedLogRequestId,
+  onRequestedLogHandled,
+}: {
+  snapshot: ChatRuntimeSnapshot | null;
+  activeSessionId: string;
+  connectionState: 'connecting' | 'connected' | 'disconnected';
+  onSelectSession: (sessionId: string) => void;
+  socketRef: { current: WebSocket | null };
+  liveDetail: ChatRuntimeJobDetail | null;
+  requestedLogRequestId?: string | null;
+  onRequestedLogHandled?: () => void;
+}) {
+  const sessions = snapshot?.sessions ?? [];
+  const [selectedDetail, setSelectedDetail] = useState<ChatRuntimeJobDetail | null>(null);
+  const [isLogModalOpen, setIsLogModalOpen] = useState(false);
+  const [logLoadError, setLogLoadError] = useState('');
+  const [isLogLoading, setIsLogLoading] = useState(false);
+  const [pendingActionRequestId, setPendingActionRequestId] = useState<string | null>(null);
+  const logViewerRef = useRef<HTMLPreElement | null>(null);
+
+  const loadLogDetail = async (requestId: string) => {
+    setIsLogLoading(true);
+    setLogLoadError('');
+
+    try {
+      const detail = await fetchChatRuntimeJobDetail(requestId);
+      setSelectedDetail(detail);
+    } catch (error) {
+      setSelectedDetail(null);
+      setLogLoadError(error instanceof Error ? error.message : '실행 로그를 불러오지 못했습니다.');
+    } finally {
+      setIsLogLoading(false);
+    }
+  };
+
+  const openLog = async (requestId: string) => {
+    setIsLogModalOpen(true);
+    await loadLogDetail(requestId);
+  };
+
+  const handleCancel = async (requestId: string) => {
+    const confirmed = await new Promise<boolean>((resolve) => {
+      Modal.confirm({
+        title: '실행 중 요청을 취소할까요?',
+        content: '이미 실행 중인 Codex 프로세스에 종료 신호를 보냅니다.',
+        okText: '취소 실행',
+        cancelText: '닫기',
+        onOk: () => resolve(true),
+        onCancel: () => resolve(false),
+      });
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    setPendingActionRequestId(requestId);
+
+    try {
+      await cancelChatRuntimeJob(requestId);
+    } finally {
+      setPendingActionRequestId(null);
+    }
+  };
+
+  const handleRemove = async (requestId: string) => {
+    const confirmed = await new Promise<boolean>((resolve) => {
+      Modal.confirm({
+        title: '대기열 요청을 제거할까요?',
+        content: '아직 실행되지 않은 대기 요청만 제거됩니다.',
+        okText: '제거',
+        cancelText: '닫기',
+        onOk: () => resolve(true),
+        onCancel: () => resolve(false),
+      });
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    setPendingActionRequestId(requestId);
+
+    try {
+      await removeChatRuntimeJob(requestId);
+    } finally {
+      setPendingActionRequestId(null);
+    }
+  };
+
+  useEffect(() => {
+    if (!isLogModalOpen || !selectedDetail?.item?.requestId || !liveDetail?.item?.requestId) {
+      return;
+    }
+
+    if (selectedDetail.item.requestId !== liveDetail.item.requestId) {
+      return;
+    }
+
+    setSelectedDetail(liveDetail);
+  }, [isLogModalOpen, liveDetail, selectedDetail?.item?.requestId]);
+
+  useEffect(() => {
+    const socket = socketRef.current;
+
+    if (!socket || socket.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    socket.send(
+      JSON.stringify({
+        type: 'runtime:watch',
+        payload: {
+          requestId: isLogModalOpen ? selectedDetail?.item?.requestId ?? null : null,
+        },
+      }),
+    );
+  }, [isLogModalOpen, selectedDetail?.item?.requestId, socketRef]);
+
+  useEffect(() => {
+    if (!isLogModalOpen || !logViewerRef.current) {
+      return;
+    }
+
+    logViewerRef.current.scrollTop = logViewerRef.current.scrollHeight;
+  }, [isLogModalOpen, selectedDetail?.logs]);
+
+  useEffect(() => {
+    const requestId = requestedLogRequestId?.trim();
+
+    if (!requestId) {
+      return;
+    }
+
+    setIsLogModalOpen(true);
+    void loadLogDetail(requestId).finally(() => {
+      onRequestedLogHandled?.();
+    });
+  }, [onRequestedLogHandled, requestedLogRequestId]);
+
+  return (
+    <>
+      <div className="app-chat-runtime">
+        <div className="app-chat-runtime__summary-strip">
+          <div className="app-chat-runtime__summary-card">
+            <div className="app-chat-runtime__summary-metric">
+              <LoadingOutlined />
+              <Text type="secondary">실행 중</Text>
+              <Text strong>{snapshot?.runningCount ?? 0}건</Text>
+            </div>
+            <div className="app-chat-runtime__summary-metric">
+              <ClockCircleOutlined />
+              <Text type="secondary">대기열</Text>
+              <Text strong>{snapshot?.queuedCount ?? 0}건</Text>
+            </div>
+            <div className="app-chat-runtime__summary-metric">
+              <EyeOutlined />
+              <Text type="secondary">활성 세션</Text>
+              <Text strong>{snapshot?.sessionCount ?? 0}개</Text>
+            </div>
+            <Text type="secondary" className="app-chat-runtime__summary-status">
+              {connectionState === 'connected' ? '실시간' : connectionState === 'connecting' ? '재연결 중' : '연결 끊김'}
+            </Text>
+          </div>
+        </div>
+
+        <div className="app-chat-runtime__session-strip">
+          {sessions.length === 0 ? (
+            <Text type="secondary">현재 활성 큐/실행 세션이 없습니다.</Text>
+          ) : (
+            sessions.map((session) => (
+              <button
+                key={session.sessionId}
+                type="button"
+                className={`app-chat-runtime__session-chip${
+                  session.sessionId === activeSessionId ? ' app-chat-runtime__session-chip--active' : ''
+                }`}
+                onClick={() => {
+                  onSelectSession(session.sessionId);
+                }}
+              >
+                <span>{session.sessionId}</span>
+                <span>{`실행 ${session.runningCount} · 대기 ${session.queuedCount}`}</span>
+              </button>
+            ))
+          )}
+        </div>
+
+        <div className="app-chat-runtime__content">
+          <RuntimeJobList
+            title="실제 실행 중인 요청"
+            emptyDescription="현재 실행 중인 Codex 요청이 없습니다."
+            items={snapshot?.running ?? []}
+            activeSessionId={activeSessionId}
+            onSelectSession={onSelectSession}
+            onOpenLog={openLog}
+            onCancelJob={handleCancel}
+            onRemoveJob={handleRemove}
+            pendingActionRequestId={pendingActionRequestId}
+          />
+          <RuntimeJobList
+            title="실제 대기열"
+            emptyDescription="현재 대기 중인 요청이 없습니다."
+            items={snapshot?.queued ?? []}
+            activeSessionId={activeSessionId}
+            onSelectSession={onSelectSession}
+            onOpenLog={openLog}
+            onCancelJob={handleCancel}
+            onRemoveJob={handleRemove}
+            pendingActionRequestId={pendingActionRequestId}
+          />
+          <RecentRuntimeList items={snapshot?.recent ?? []} onSelectSession={onSelectSession} onOpenLog={openLog} />
+        </div>
+      </div>
+
+      <Drawer
+        open={isLogModalOpen}
+        title="실행 로그"
+        placement="right"
+        width="100vw"
+        rootClassName="app-chat-runtime__drawer"
+        styles={{
+          body: {
+            padding: 0,
+          },
+        }}
+        onClose={() => {
+          setIsLogModalOpen(false);
+          setSelectedDetail(null);
+        }}
+      >
+        {isLogLoading ? (
+          <div className="app-chat-runtime__log-state">
+            <Text type="secondary">로그를 불러오는 중입니다.</Text>
+          </div>
+        ) : logLoadError ? (
+          <div className="app-chat-runtime__log-state">
+            <Text type="danger">{logLoadError}</Text>
+          </div>
+        ) : selectedDetail ? (
+          <div className="app-chat-runtime__log-modal">
+            {selectedDetail.item?.sessionId ? (
+              <Button
+                size="small"
+                style={{ alignSelf: 'flex-start' }}
+                onClick={() => {
+                  onSelectSession(selectedDetail.item?.sessionId ?? '');
+                  setIsLogModalOpen(false);
+                }}
+              >
+                채팅방 이동
+              </Button>
+            ) : null}
+            <div className="app-chat-runtime__job-meta">
+              <Text type="secondary">요청: {selectedDetail.item?.requestId ?? '-'}</Text>
+              <Text type="secondary">세션: {selectedDetail.item?.sessionId ?? '-'}</Text>
+              <Text type="secondary">마지막 갱신: {formatRuntimeTime(selectedDetail.lastUpdatedAt)}</Text>
+              <Text type="secondary">종료 상태: {buildTerminalLabel(selectedDetail.terminalStatus) || '-'}</Text>
+            </div>
+            <Paragraph className="app-chat-runtime__job-summary">
+              {selectedDetail.item?.summary ?? '요약 없음'}
+            </Paragraph>
+            <pre ref={logViewerRef} className="app-chat-runtime__log-viewer">
+              {selectedDetail.logs.length > 0 ? selectedDetail.logs.join('\n') : '아직 기록된 로그가 없습니다.'}
+            </pre>
+          </div>
+        ) : (
+          <div className="app-chat-runtime__log-state">
+            <Text type="secondary">표시할 로그가 없습니다.</Text>
+          </div>
+        )}
+      </Drawer>
+    </>
+  );
+}
diff --git a/src/app/main/mainChatPanel/ErrorLogViewer.tsx b/src/app/main/mainChatPanel/ErrorLogViewer.tsx
new file mode 100755
index 0000000..6bdccb9
--- /dev/null
+++ b/src/app/main/mainChatPanel/ErrorLogViewer.tsx
@@ -0,0 +1,327 @@
+import { CloseOutlined, ExpandOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button, Empty, Space, Spin, Tag, Typography } from 'antd';
+import { PreviewerUI } from '../../../components/previewer';
+import type { ErrorLogItem } from '../errorLogApi';
+import {
+  buildErrorListPreviewLine,
+  buildErrorMetaRows,
+  buildErrorReferenceSummary,
+  formatErrorLogTime,
+  formatErrorSummary,
+  getErrorResourceKindLabel,
+  getErrorSourceColor,
+  getErrorSourceLabel,
+  renderErrorTabs,
+} from './errorLogUtils';
+import type { ErrorReferenceResource, ErrorReferenceSummary } from './types';
+
+const { Paragraph, Text } = Typography;
+
+type ErrorLogViewerProps = {
+  errorLogs: ErrorLogItem[];
+  selectedErrorLog: ErrorLogItem | null;
+  selectedErrorLogReferenceSummary: ErrorReferenceSummary | null;
+  activeErrorResource: ErrorReferenceResource | null;
+  isErrorDetailExpanded: boolean;
+  isLoadingErrorLogs: boolean;
+  errorLogLoadError: string;
+  errorSourceSummary: Record<string, number>;
+  onRefresh: () => void;
+  onSelectErrorLog: (id: number) => void;
+  onSelectResource: (url: string) => void;
+  onToggleExpanded: (expanded: boolean) => void;
+};
+
+function ErrorDetailContent({
+  selectedErrorLog,
+  selectedErrorLogReferenceSummary,
+  activeErrorResource,
+  onSelectResource,
+}: {
+  selectedErrorLog: ErrorLogItem;
+  selectedErrorLogReferenceSummary: ErrorReferenceSummary | null;
+  activeErrorResource: ErrorReferenceResource | null;
+  onSelectResource: (url: string) => void;
+}) {
+  return (
+    <>
+      {selectedErrorLogReferenceSummary ? (
+        <div className="app-chat-panel__error-summary-strip">
+          <div className="app-chat-panel__error-summary-pill">
+            <Text type="secondary">preview</Text>
+            <Text strong>{selectedErrorLogReferenceSummary.previewCount}</Text>
+          </div>
+          <div className="app-chat-panel__error-summary-pill">
+            <Text type="secondary">image</Text>
+            <Text strong>{selectedErrorLogReferenceSummary.imageCount}</Text>
+          </div>
+          <div className="app-chat-panel__error-summary-pill">
+            <Text type="secondary">link</Text>
+            <Text strong>{selectedErrorLogReferenceSummary.linkCount}</Text>
+          </div>
+          <div className="app-chat-panel__error-summary-pill">
+            <Text type="secondary">참조 합계</Text>
+            <Text strong>{selectedErrorLogReferenceSummary.resources.length}</Text>
+          </div>
+        </div>
+      ) : null}
+
+      {selectedErrorLogReferenceSummary?.resources.length ? (
+        <div className="app-chat-panel__error-reference-stage">
+          <div className="app-chat-panel__error-reference-rail">
+            {selectedErrorLogReferenceSummary.resources.map((resource, index) => (
+              <button
+                key={`${selectedErrorLog.id}-${resource.url}`}
+                type="button"
+                className={
+                  resource.url === activeErrorResource?.url
+                    ? 'app-chat-panel__error-reference-item app-chat-panel__error-reference-item--active'
+                    : 'app-chat-panel__error-reference-item'
+                }
+                onClick={() => {
+                  onSelectResource(resource.url);
+                }}
+              >
+                <div className="app-chat-panel__error-reference-item-top">
+                  <Text strong>{index + 1}</Text>
+                  <Tag>{getErrorResourceKindLabel(resource.kind)}</Tag>
+                </div>
+                <Text strong>{resource.label}</Text>
+                <Text type="secondary">{resource.sourcePath}</Text>
+                <Text type="secondary" className="app-chat-panel__error-reference-item-snippet">
+                  {resource.sourcePreview}
+                </Text>
+              </button>
+            ))}
+          </div>
+
+          {activeErrorResource ? (
+            <div className="app-chat-panel__error-reference-main">
+              <div className="app-chat-panel__error-reference-main-top">
+                <div>
+                  <Text strong>{activeErrorResource.label}</Text>
+                  <br />
+                  <Text type="secondary">
+                    {getErrorResourceKindLabel(activeErrorResource.kind)} · {activeErrorResource.sourcePath}
+                  </Text>
+                </div>
+                <Button size="small" type="primary" href={activeErrorResource.url} target="_blank" rel="noreferrer">
+                  새 탭에서 열기
+                </Button>
+              </div>
+
+              <div className="app-chat-panel__error-reference-main-meta">
+                <div className="app-chat-panel__error-reference-main-meta-item">
+                  <Text type="secondary">종류</Text>
+                  <Text>{getErrorResourceKindLabel(activeErrorResource.kind)}</Text>
+                </div>
+                <div className="app-chat-panel__error-reference-main-meta-item">
+                  <Text type="secondary">추출 경로</Text>
+                  <Text>{activeErrorResource.sourcePath}</Text>
+                </div>
+                <div className="app-chat-panel__error-reference-main-meta-item app-chat-panel__error-reference-main-meta-item--wide">
+                  <Text type="secondary">URL</Text>
+                  <Text>{activeErrorResource.url}</Text>
+                </div>
+              </div>
+
+              {activeErrorResource.kind === 'image' ? (
+                <PreviewerUI
+                  type="image"
+                  title={activeErrorResource.label}
+                  description={activeErrorResource.url}
+                  value={activeErrorResource.url}
+                  imageAlt={activeErrorResource.label}
+                  height={420}
+                />
+              ) : activeErrorResource.kind === 'preview' ? (
+                <div className="app-chat-panel__error-preview-card app-chat-panel__error-preview-card--stage">
+                  <div className="app-chat-panel__error-preview-frame-wrap">
+                    <iframe
+                      className="app-chat-panel__error-preview-frame app-chat-panel__error-preview-frame--stage"
+                      src={activeErrorResource.url}
+                      title={activeErrorResource.label}
+                      loading="lazy"
+                      referrerPolicy="no-referrer"
+                    />
+                  </div>
+                </div>
+              ) : (
+                <PreviewerUI
+                  type="text"
+                  title={activeErrorResource.label}
+                  description="외부 링크 참조"
+                  value={activeErrorResource.url}
+                  height="auto"
+                />
+              )}
+
+              <Text type="secondary" className="app-chat-panel__error-preview-url">
+                {activeErrorResource.url}
+              </Text>
+
+              <div className="app-chat-panel__error-source-preview">
+                <Text strong>참조 추출 위치</Text>
+                <Text type="secondary">{activeErrorResource.sourcePath}</Text>
+                <pre>{activeErrorResource.sourcePreview}</pre>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="app-chat-panel__error-detail-meta">
+        {buildErrorMetaRows(selectedErrorLog).map((row) => (
+          <div key={`${selectedErrorLog.id}-${row.label}`} className="app-chat-panel__error-detail-meta-row">
+            <Text type="secondary">{row.label}</Text>
+            <Text>{row.value}</Text>
+          </div>
+        ))}
+      </div>
+
+      <Paragraph className="app-chat-panel__error-detail-line">
+        <Text strong>에러 내용</Text>
+        <br />
+        {selectedErrorLog.errorMessage}
+      </Paragraph>
+
+      {renderErrorTabs(selectedErrorLog)}
+    </>
+  );
+}
+
+export function ErrorLogViewer({
+  errorLogs,
+  selectedErrorLog,
+  selectedErrorLogReferenceSummary,
+  activeErrorResource,
+  isErrorDetailExpanded,
+  isLoadingErrorLogs,
+  errorLogLoadError,
+  errorSourceSummary,
+  onRefresh,
+  onSelectErrorLog,
+  onSelectResource,
+  onToggleExpanded,
+}: ErrorLogViewerProps) {
+  const errorDetailHeader = selectedErrorLog ? (
+    <div className="app-chat-panel__error-detail-header">
+      <div className="app-chat-panel__error-detail-header-meta">
+        <Space size={[8, 8]} wrap>
+          <Tag color={getErrorSourceColor(selectedErrorLog.source)}>{getErrorSourceLabel(selectedErrorLog)}</Tag>
+          <Tag>{selectedErrorLog.errorType}</Tag>
+          {selectedErrorLog.errorName ? <Tag>{selectedErrorLog.errorName}</Tag> : null}
+          {selectedErrorLog.statusCode ? <Tag>{selectedErrorLog.statusCode}</Tag> : null}
+          {selectedErrorLog.relatedPlanId ? <Tag>Plan #{selectedErrorLog.relatedPlanId}</Tag> : null}
+          {selectedErrorLog.relatedWorkId ? <Tag>{selectedErrorLog.relatedWorkId}</Tag> : null}
+        </Space>
+        <Text type="secondary">로그 #{selectedErrorLog.id}</Text>
+      </div>
+      <div className="app-chat-panel__error-detail-actions">
+        {isErrorDetailExpanded ? (
+          <Button type="text" size="small" icon={<CloseOutlined />} aria-label="상세영역 닫기" onClick={() => onToggleExpanded(false)} />
+        ) : (
+          <Button type="text" size="small" icon={<ExpandOutlined />} aria-label="상세영역 최대화" onClick={() => onToggleExpanded(true)} />
+        )}
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <div className="app-chat-panel__error-layout">
+      {isErrorDetailExpanded && selectedErrorLog ? (
+        <div className="app-chat-panel__error-detail-screen">
+          <div className="app-chat-panel__error-detail app-chat-panel__error-detail--expanded">
+            {errorDetailHeader}
+            <ErrorDetailContent
+              selectedErrorLog={selectedErrorLog}
+              selectedErrorLogReferenceSummary={selectedErrorLogReferenceSummary}
+              activeErrorResource={activeErrorResource}
+              onSelectResource={onSelectResource}
+            />
+          </div>
+        </div>
+      ) : null}
+
+      <div className="app-chat-panel__error-toolbar">
+        <div className="app-chat-panel__error-toolbar-copy">
+          <Text strong>최근 에러 로그 50건</Text>
+          <Text type="secondary">프론트엔드, 워크서버 API, 작업 자동화 워커 오류를 함께 봅니다.</Text>
+        </div>
+        <Space size={[8, 8]} wrap>
+          {Object.entries(errorSourceSummary).map(([label, count]) => (
+            <Tag key={label}>{label} {count}</Tag>
+          ))}
+          <Button size="small" icon={<ReloadOutlined />} loading={isLoadingErrorLogs} onClick={onRefresh}>
+            새로고침
+          </Button>
+        </Space>
+      </div>
+
+      {errorLogLoadError ? <Alert showIcon type="error" message={errorLogLoadError} /> : null}
+
+      {isLoadingErrorLogs ? (
+        <div className="app-chat-panel__error-loading">
+          <Spin />
+        </div>
+      ) : errorLogs.length === 0 ? (
+        <div className="app-chat-panel__error-empty">
+          <Empty description="저장된 에러 로그가 없습니다." />
+        </div>
+      ) : (
+        <div className="app-chat-panel__error-content">
+          <div className="app-chat-panel__error-list">
+            {errorLogs.map((item) => {
+              const referenceSummary = buildErrorReferenceSummary(item);
+
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={
+                    item.id === selectedErrorLog?.id
+                      ? 'app-chat-panel__error-item app-chat-panel__error-item--active'
+                      : 'app-chat-panel__error-item'
+                  }
+                  onClick={() => {
+                    onSelectErrorLog(item.id);
+                  }}
+                >
+                  <div className="app-chat-panel__error-item-top">
+                    <Text type="secondary">{formatErrorLogTime(item.createdAt)}</Text>
+                    <Tag bordered={false} color={getErrorSourceColor(item.source)}>
+                      {getErrorSourceLabel(item)}
+                    </Tag>
+                  </div>
+                  <Text strong className="app-chat-panel__error-item-title">{formatErrorSummary(item)}</Text>
+                  <Text type="secondary" className="app-chat-panel__error-item-message">
+                    {buildErrorListPreviewLine(item, referenceSummary)}
+                  </Text>
+                  <div className="app-chat-panel__error-item-badges">
+                    {referenceSummary.previewCount ? <Tag bordered={false}>preview {referenceSummary.previewCount}</Tag> : null}
+                    {referenceSummary.imageCount ? <Tag bordered={false}>image {referenceSummary.imageCount}</Tag> : null}
+                    {referenceSummary.linkCount ? <Tag bordered={false}>link {referenceSummary.linkCount}</Tag> : null}
+                    {item.statusCode ? <Tag bordered={false}>{item.statusCode}</Tag> : null}
+                    {item.requestMethod ? <Tag bordered={false}>{item.requestMethod}</Tag> : null}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {selectedErrorLog ? (
+            <div className="app-chat-panel__error-detail">
+              {errorDetailHeader}
+              <ErrorDetailContent
+                selectedErrorLog={selectedErrorLog}
+                selectedErrorLogReferenceSummary={selectedErrorLogReferenceSummary}
+                activeErrorResource={activeErrorResource}
+                onSelectResource={onSelectResource}
+              />
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/main/mainChatPanel/chatResourceUrl.ts b/src/app/main/mainChatPanel/chatResourceUrl.ts
new file mode 100644
index 0000000..ddddc4c
--- /dev/null
+++ b/src/app/main/mainChatPanel/chatResourceUrl.ts
@@ -0,0 +1,38 @@
+const CHAT_API_RESOURCE_MARKER = '/api/chat/resources/';
+const CHAT_PUBLIC_RESOURCE_MARKER = '/.codex_chat/';
+
+function extractEmbeddedResourcePath(value: string) {
+  const normalized = String(value ?? '').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  const apiMarkerIndex = normalized.lastIndexOf(CHAT_API_RESOURCE_MARKER);
+
+  if (apiMarkerIndex >= 0) {
+    return normalized.slice(apiMarkerIndex);
+  }
+
+  const publicMarkerIndex = normalized.lastIndexOf(CHAT_PUBLIC_RESOURCE_MARKER);
+
+  if (publicMarkerIndex >= 0) {
+    return normalized.slice(publicMarkerIndex);
+  }
+
+  return normalized;
+}
+
+export function normalizeChatResourceUrl(value: string) {
+  const normalized = extractEmbeddedResourcePath(value);
+
+  if (typeof window === 'undefined') {
+    return normalized;
+  }
+
+  try {
+    return new URL(normalized, window.location.href).toString();
+  } catch {
+    return normalized;
+  }
+}
diff --git a/src/app/main/mainChatPanel/chatUtils.ts b/src/app/main/mainChatPanel/chatUtils.ts
new file mode 100644
index 0000000..d2a4673
--- /dev/null
+++ b/src/app/main/mainChatPanel/chatUtils.ts
@@ -0,0 +1,1283 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { appendClientIdHeader, getOrCreateClientId } from '../clientIdentity';
+import { getRegisteredAccessToken } from '../tokenAccess';
+import { reportClientError } from '../errorLogApi';
+import type {
+  ChatActivityEvent,
+  ChatConversationActivityLog,
+  ChatConversationDetailResponse,
+  ChatComposerAttachment,
+  ChatConversationRequest,
+  ChatConversationSummary,
+  ChatJobEvent,
+  ChatMessage,
+  ChatRuntimeJobDetail,
+  ChatRuntimeSnapshot,
+  ChatServerEvent,
+  ChatViewContext,
+} from './types';
+
+const CONNECT_TIMEOUT_MS = 8000;
+const CHAT_SESSION_ID_KEY = 'main-chat-panel:session-id';
+const CHAT_LAST_EVENT_ID_STORAGE_PREFIX = 'main-chat-panel:last-event-id:';
+const CHAT_NOTIFY_OFFLINE_STORAGE_PREFIX = 'main-chat-panel:notify-offline:';
+const CHAT_SESSION_MESSAGES_STORAGE_PREFIX = 'main-chat-panel:messages:';
+const CHAT_SESSION_LAST_TYPE_STORAGE_PREFIX = 'main-chat-panel:last-chat-type:';
+const CHAT_INTRO_MESSAGE = '요청은 기본적으로 순차 처리됩니다. 급한 요청만 즉시 실행을 사용하세요.';
+const CHAT_ACTIVITY_MESSAGE_PREFIX = '[[activity-log]]';
+const KST_TIME_ZONE = 'Asia/Seoul';
+const CHAT_CONVERSATION_LIST_CACHE_WINDOW_MS = 1500;
+let localMessageSequence = 0;
+let cachedChatConversationList: ChatConversationSummary[] | null = null;
+let cachedChatConversationListAt = 0;
+let chatConversationListRequestPromise: Promise<ChatConversationSummary[]> | null = null;
+
+export const CHAT_CONNECTION = {
+  reconnectDelayMs: 3000,
+  connectTimeoutMs: CONNECT_TIMEOUT_MS,
+  sessionIdKey: CHAT_SESSION_ID_KEY,
+  lastEventIdStoragePrefix: CHAT_LAST_EVENT_ID_STORAGE_PREFIX,
+  notifyOfflineStoragePrefix: CHAT_NOTIFY_OFFLINE_STORAGE_PREFIX,
+  sessionMessagesStoragePrefix: CHAT_SESSION_MESSAGES_STORAGE_PREFIX,
+  sessionLastTypeStoragePrefix: CHAT_SESSION_LAST_TYPE_STORAGE_PREFIX,
+  introMessage: CHAT_INTRO_MESSAGE,
+} as const;
+
+function buildNotifyOfflineStorageKey(sessionId: string, clientId?: string | null) {
+  const normalizedSessionId = sessionId.trim() || 'default';
+  const normalizedClientId = clientId?.trim() || getOrCreateClientId() || 'default-client';
+  return `${CHAT_CONNECTION.notifyOfflineStoragePrefix}${normalizedSessionId}:${normalizedClientId}`;
+}
+
+function buildLastEventIdStorageKey(sessionId: string) {
+  const normalizedSessionId = sessionId.trim() || 'default';
+  return `${CHAT_CONNECTION.lastEventIdStoragePrefix}${normalizedSessionId}`;
+}
+
+function buildSessionMessagesStorageKey(sessionId: string) {
+  const normalizedSessionId = sessionId.trim() || 'default';
+  return `${CHAT_CONNECTION.sessionMessagesStoragePrefix}${normalizedSessionId}`;
+}
+
+function buildSessionLastChatTypeStorageKey(sessionId: string) {
+  const normalizedSessionId = sessionId.trim() || 'default';
+  return `${CHAT_CONNECTION.sessionLastTypeStoragePrefix}${normalizedSessionId}`;
+}
+
+function createBrowserSessionId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  return `chat-session-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function clearStoredChatClientConversationState() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const keysToRemove: string[] = [];
+
+  for (let index = 0; index < window.localStorage.length; index += 1) {
+    const key = window.localStorage.key(index);
+
+    if (!key) {
+      continue;
+    }
+
+    if (
+      key === CHAT_CONNECTION.sessionIdKey ||
+      key.startsWith(CHAT_CONNECTION.lastEventIdStoragePrefix) ||
+      key.startsWith(CHAT_CONNECTION.notifyOfflineStoragePrefix) ||
+      key.startsWith(CHAT_CONNECTION.sessionMessagesStoragePrefix) ||
+      key.startsWith(CHAT_CONNECTION.sessionLastTypeStoragePrefix)
+    ) {
+      keysToRemove.push(key);
+    }
+  }
+
+  keysToRemove.forEach((key) => {
+    window.localStorage.removeItem(key);
+  });
+}
+
+function normalizeChatConversationRequest(item: ChatConversationRequest): ChatConversationRequest {
+  const hasResponse = item.hasResponse === true;
+
+  return {
+    ...item,
+    hasResponse,
+    canDelete:
+      item.canDelete === true || (!hasResponse && item.status !== 'queued' && item.status !== 'started' && item.status !== 'removed'),
+  };
+}
+
+export function isPreparingChatReplyText(text?: string | null) {
+  const normalized = String(text ?? '').replace(/\s+/g, ' ').trim();
+  return normalized.startsWith('응답을 준비하고 있습니다');
+}
+
+export function getChatClientSessionId() {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const existing = window.localStorage.getItem(CHAT_CONNECTION.sessionIdKey)?.trim();
+
+  if (existing) {
+    return existing;
+  }
+
+  const nextSessionId = createBrowserSessionId();
+  window.localStorage.setItem(CHAT_CONNECTION.sessionIdKey, nextSessionId);
+  return nextSessionId;
+}
+
+export function setChatClientSessionId(sessionId: string) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return;
+  }
+
+  window.localStorage.setItem(CHAT_CONNECTION.sessionIdKey, normalizedSessionId);
+}
+
+export function getLastReceivedChatEventId(sessionId: string) {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return 0;
+  }
+
+  const raw = window.localStorage.getItem(buildLastEventIdStorageKey(normalizedSessionId));
+  const parsed = raw ? Number(raw) : NaN;
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+}
+
+export function persistLastReceivedChatEventId(sessionId: string, eventId: number) {
+  if (typeof window === 'undefined' || !Number.isFinite(eventId) || eventId <= 0) {
+    return;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return;
+  }
+
+  const currentEventId = getLastReceivedChatEventId(normalizedSessionId);
+
+  if (eventId <= currentEventId) {
+    return;
+  }
+
+  window.localStorage.setItem(buildLastEventIdStorageKey(normalizedSessionId), String(eventId));
+}
+
+export function resetLastReceivedChatEventId(sessionId: string) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return;
+  }
+
+  window.localStorage.removeItem(buildLastEventIdStorageKey(normalizedSessionId));
+}
+
+export function getStoredChatOfflineNotificationSetting(sessionId: string, clientId?: string | null) {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const raw = window.localStorage.getItem(buildNotifyOfflineStorageKey(sessionId, clientId));
+
+  if (raw === null) {
+    return null;
+  }
+
+  return raw === 'true';
+}
+
+export function setStoredChatOfflineNotificationSetting(sessionId: string, enabled: boolean, clientId?: string | null) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.setItem(buildNotifyOfflineStorageKey(sessionId, clientId), enabled ? 'true' : 'false');
+}
+
+export function clearStoredChatOfflineNotificationSetting(sessionId: string, clientId?: string | null) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.removeItem(buildNotifyOfflineStorageKey(sessionId, clientId));
+}
+
+function resolveSyncedChatOfflineNotificationSetting(
+  sessionId: string,
+  serverValue: boolean,
+  clientId?: string | null,
+) {
+  const storedValue = getStoredChatOfflineNotificationSetting(sessionId, clientId);
+
+  if (storedValue == null) {
+    setStoredChatOfflineNotificationSetting(sessionId, serverValue, clientId);
+    return serverValue;
+  }
+
+  if (storedValue !== serverValue) {
+    setStoredChatOfflineNotificationSetting(sessionId, serverValue, clientId);
+  }
+
+  return serverValue;
+}
+
+export function loadStoredChatMessages(sessionId: string) {
+  if (typeof window === 'undefined') {
+    return [] as ChatMessage[];
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return [] as ChatMessage[];
+  }
+
+  try {
+    const raw = window.localStorage.getItem(buildSessionMessagesStorageKey(normalizedSessionId));
+
+    if (!raw) {
+      return [] as ChatMessage[];
+    }
+
+    const parsed = JSON.parse(raw) as ChatMessage[];
+
+    if (!Array.isArray(parsed)) {
+      return [] as ChatMessage[];
+    }
+
+    return parsed
+      .filter((message) =>
+        Boolean(message) &&
+        (message.author === 'codex' || message.author === 'system' || message.author === 'user') &&
+        typeof message.text === 'string' &&
+        typeof message.timestamp === 'string' &&
+        typeof message.id === 'number',
+      )
+      .filter((message) => message.author !== 'system' || isActivityLogMessage(message));
+  } catch {
+    return [] as ChatMessage[];
+  }
+}
+
+export function getStoredChatSessionLastTypeId(sessionId: string) {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return null;
+  }
+
+  const raw = window.localStorage.getItem(buildSessionLastChatTypeStorageKey(normalizedSessionId))?.trim() ?? '';
+  return raw || null;
+}
+
+export function setStoredChatSessionLastTypeId(sessionId: string, chatTypeId: string) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+  const normalizedChatTypeId = chatTypeId.trim();
+
+  if (!normalizedSessionId || !normalizedChatTypeId) {
+    return;
+  }
+
+  window.localStorage.setItem(
+    buildSessionLastChatTypeStorageKey(normalizedSessionId),
+    normalizedChatTypeId,
+  );
+}
+
+export function persistStoredChatMessages(sessionId: string, messages: ChatMessage[]) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return;
+  }
+
+  window.localStorage.setItem(
+    buildSessionMessagesStorageKey(normalizedSessionId),
+    JSON.stringify(messages.filter((message) => message.author !== 'system' || isActivityLogMessage(message))),
+  );
+}
+
+export function clearStoredChatMessages(sessionId: string) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return;
+  }
+
+  window.localStorage.removeItem(buildSessionMessagesStorageKey(normalizedSessionId));
+}
+
+export function formatTime(date: Date) {
+  return new Intl.DateTimeFormat('sv-SE', {
+    timeZone: KST_TIME_ZONE,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  })
+    .format(date)
+    .replace(',', '');
+}
+
+function createLocalMessageId() {
+  localMessageSequence = (localMessageSequence + 1) % 1_000;
+  return Date.now() * 1_000 + localMessageSequence;
+}
+
+function hashRequestId(value: string) {
+  let hash = 0;
+
+  for (const character of value) {
+    hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  }
+
+  return Math.abs(hash) + 1_000_000;
+}
+
+export function createLocalMessage(text: string): ChatMessage {
+  return {
+    id: createLocalMessageId(),
+    author: 'system',
+    text,
+    timestamp: formatTime(new Date()),
+  };
+}
+
+export function createChatMessage(author: ChatMessage['author'], text: string, clientRequestId?: string | null): ChatMessage {
+  return {
+    id: createLocalMessageId(),
+    author,
+    text,
+    timestamp: formatTime(new Date()),
+    clientRequestId: clientRequestId?.trim() || null,
+  };
+}
+
+export function createActivityLogPlaceholder(requestId: string, lines?: string[]) {
+  const normalizedRequestId = requestId.trim();
+
+  if (!normalizedRequestId) {
+    return null;
+  }
+
+  const normalizedLines = (lines ?? []).map((line) => line.trim()).filter(Boolean);
+  const fallbackLine = '요청을 접수했습니다. 활동 로그를 준비하고 있습니다.';
+
+  return {
+    id: hashRequestId(normalizedRequestId),
+    author: 'system' as const,
+    text: `${CHAT_ACTIVITY_MESSAGE_PREFIX}\n${(normalizedLines.length > 0 ? normalizedLines : [fallbackLine]).join('\n\n')}`,
+    timestamp: formatTime(new Date()),
+    clientRequestId: normalizedRequestId,
+  };
+}
+
+function isActivityLogMessage(message: ChatMessage) {
+  return message.author === 'system' && message.text.startsWith(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`);
+}
+
+function extractActivityLogLines(text: string) {
+  return text
+    .slice(`${CHAT_ACTIVITY_MESSAGE_PREFIX}\n`.length)
+    .split('\n\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function getActivityLogLines(message?: ChatMessage) {
+  if (!message || !isActivityLogMessage(message)) {
+    return [];
+  }
+
+  return extractActivityLogLines(message.text);
+}
+
+function mergeActivityLines(existingLines: string[], incomingLines: string[]) {
+  const merged: string[] = [];
+
+  for (const line of [...existingLines, ...incomingLines]) {
+    const normalized = line.trim();
+
+    if (!normalized || merged.at(-1) === normalized) {
+      continue;
+    }
+
+    merged.push(normalized);
+  }
+
+  return merged;
+}
+
+function buildActivityMessageIndex(messages: ChatMessage[]) {
+  const indexByRequestId = new Map<string, number>();
+
+  messages.forEach((message, index) => {
+    const requestId = message.clientRequestId?.trim();
+
+    if (!requestId || !isActivityLogMessage(message)) {
+      return;
+    }
+
+    indexByRequestId.set(requestId, index);
+  });
+
+  return indexByRequestId;
+}
+
+function findActivityAnchorIndex(messages: ChatMessage[], requestId: string) {
+  let fallbackUserIndex = -1;
+
+  for (let index = 0; index < messages.length; index += 1) {
+    const message = messages[index];
+
+    if (message.clientRequestId?.trim() !== requestId) {
+      continue;
+    }
+
+    if (isActivityLogMessage(message)) {
+      return index;
+    }
+
+    if (message.author === 'user') {
+      fallbackUserIndex = index;
+    }
+  }
+
+  return fallbackUserIndex >= 0 ? fallbackUserIndex + 1 : messages.length;
+}
+
+function upsertActivityLogMessage(messages: ChatMessage[], activityMessage: ChatMessage) {
+  const requestId = activityMessage.clientRequestId?.trim();
+
+  if (!requestId) {
+    return messages;
+  }
+
+  const existingIndex = messages.findIndex(
+    (message) => isActivityLogMessage(message) && message.clientRequestId?.trim() === requestId,
+  );
+
+  if (existingIndex >= 0) {
+    const nextMessages = [...messages];
+    nextMessages[existingIndex] = activityMessage;
+    return nextMessages;
+  }
+
+  const insertIndex = findActivityAnchorIndex(messages, requestId);
+  return [...messages.slice(0, insertIndex), activityMessage, ...messages.slice(insertIndex)];
+}
+
+export function hydrateActivityLogMessages(messages: ChatMessage[], activityLogs: ChatConversationActivityLog[]) {
+  if (activityLogs.length === 0) {
+    return messages;
+  }
+
+  let nextMessages = [...messages];
+
+  for (const activityLog of activityLogs) {
+    const requestId = activityLog.requestId?.trim();
+
+    if (!requestId) {
+      continue;
+    }
+
+    const placeholder = createActivityLogPlaceholder(requestId, activityLog.lines);
+
+    if (!placeholder) {
+      continue;
+    }
+
+    const existingMessage = nextMessages.find(
+      (message) => isActivityLogMessage(message) && message.clientRequestId?.trim() === requestId,
+    );
+    const mergedLines = mergeActivityLines(getActivityLogLines(existingMessage), activityLog.lines);
+    const nextActivityMessage = {
+      ...(existingMessage ?? placeholder),
+      ...placeholder,
+      text: createActivityLogPlaceholder(requestId, mergedLines)?.text ?? placeholder.text,
+      timestamp: activityLog.updatedAt?.trim() || existingMessage?.timestamp || placeholder.timestamp,
+    };
+    nextMessages = upsertActivityLogMessage(nextMessages, nextActivityMessage);
+  }
+
+  return nextMessages;
+}
+
+export function appendActivityEventToMessages(previous: ChatMessage[], event: ChatActivityEvent) {
+  const requestId = event.requestId.trim();
+
+  if (!requestId) {
+    return previous;
+  }
+
+  const activityMessageIndex = buildActivityMessageIndex(previous);
+  const existingIndex = activityMessageIndex.get(requestId);
+  const existingMessage = existingIndex == null ? undefined : previous[existingIndex];
+  const mergedLines = mergeActivityLines(getActivityLogLines(existingMessage), [event.line]);
+  const nextMessage = createActivityLogPlaceholder(requestId, mergedLines);
+
+  if (!nextMessage) {
+    return previous;
+  }
+
+  const nextActivityMessage =
+    existingIndex == null
+      ? nextMessage
+      : {
+          ...existingMessage,
+          ...nextMessage,
+        };
+  return upsertActivityLogMessage(previous, nextActivityMessage);
+}
+
+export function createIntroMessage(chatTypeLabel?: string, chatTypeDescription?: string) {
+  const contextLabelLine = chatTypeLabel ? `선택 컨텍스트: ${chatTypeLabel}` : '';
+  const contextDescriptionLine = chatTypeDescription ? `기본 문맥: ${chatTypeDescription}` : '';
+
+  return createChatMessage(
+    'codex',
+    [CHAT_CONNECTION.introMessage, contextLabelLine, contextDescriptionLine].filter(Boolean).join('\n'),
+  );
+}
+
+export function buildOfflineReply(context: ChatViewContext, input: string) {
+  const normalized = input.toLowerCase();
+  const typeLine = context.chatTypeLabel ? `- 컨텍스트: ${context.chatTypeLabel}` : '';
+  const descriptionLine = context.chatTypeDescription ? `- 기본 문맥: ${context.chatTypeDescription}` : '';
+
+  if (normalized.includes('preview') || normalized.includes('링크') || normalized.includes('url')) {
+    return ['결과', `- preview: ${context.pageUrl}`, typeLine, descriptionLine].filter(Boolean).join('\n');
+  }
+
+  if (input.includes('계획') || normalized.includes('plan')) {
+    return ['결과', '- Plan 상세 조회는 서버 연결 후 가능합니다.', typeLine, descriptionLine].filter(Boolean).join('\n');
+  }
+
+  return ['결과', `- 현재 화면: ${context.pageTitle}`, '- 서버 연결 후 더 정확한 정보를 줄 수 있습니다.', typeLine, descriptionLine]
+    .filter(Boolean)
+    .join('\n');
+}
+
+export function resolveChatWebSocketUrl(sessionId?: string, lastEventId?: number, clientId?: string) {
+  const configuredBaseUrl = import.meta.env.VITE_WORK_SERVER_URL;
+  const resolvedClientId = clientId || getOrCreateClientId();
+
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  if (configuredBaseUrl) {
+    const normalizedUrl = new URL(configuredBaseUrl, window.location.origin);
+    normalizedUrl.protocol = normalizedUrl.protocol === 'https:' ? 'wss:' : 'ws:';
+    const trimmedPathname = normalizedUrl.pathname.replace(/\/+$/, '');
+    normalizedUrl.pathname = trimmedPathname.endsWith('/api')
+      ? `${trimmedPathname.slice(0, -4) || ''}/ws/chat`
+      : `${trimmedPathname || ''}/ws/chat`;
+    normalizedUrl.search = '';
+    normalizedUrl.hash = '';
+    if (sessionId) {
+      normalizedUrl.searchParams.set('sessionId', sessionId);
+    }
+    if (resolvedClientId) {
+      normalizedUrl.searchParams.set('clientId', resolvedClientId);
+    }
+    if (Number.isFinite(lastEventId) && (lastEventId ?? 0) > 0) {
+      normalizedUrl.searchParams.set('lastEventId', String(lastEventId));
+    }
+    return normalizedUrl.toString();
+  }
+
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const url = new URL(`${protocol}//${window.location.host}/ws/chat`);
+
+  if (sessionId) {
+    url.searchParams.set('sessionId', sessionId);
+  }
+  if (resolvedClientId) {
+    url.searchParams.set('clientId', resolvedClientId);
+  }
+  if (Number.isFinite(lastEventId) && (lastEventId ?? 0) > 0) {
+    url.searchParams.set('lastEventId', String(lastEventId));
+  }
+
+  return url.toString();
+}
+
+function resolveWorkServerHealthUrl() {
+  const configuredBaseUrl = import.meta.env.VITE_WORK_SERVER_URL;
+
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const normalizedUrl = configuredBaseUrl
+    ? new URL(configuredBaseUrl, window.location.origin)
+    : new URL(window.location.origin);
+  const trimmedPathname = normalizedUrl.pathname.replace(/\/+$/, '');
+  normalizedUrl.pathname = trimmedPathname.endsWith('/api')
+    ? `${trimmedPathname.slice(0, -4) || ''}/health`
+    : `${trimmedPathname || ''}/health`;
+  normalizedUrl.search = '';
+  normalizedUrl.hash = '';
+  return normalizedUrl.toString();
+}
+
+export async function diagnoseConnectionFailure(targetUrl: string, closeEvent?: CloseEvent) {
+  const diagnostics: string[] = [];
+
+  if (typeof navigator !== 'undefined' && !navigator.onLine) {
+    diagnostics.push('브라우저가 오프라인 상태입니다.');
+  }
+
+  if (typeof window !== 'undefined' && window.location.protocol === 'https:' && targetUrl.startsWith('ws://')) {
+    diagnostics.push('HTTPS 화면에서 비보안 `ws://` 연결이 차단되었을 수 있습니다.');
+  }
+
+  if (closeEvent) {
+    diagnostics.push(`종료 코드 ${closeEvent.code}${closeEvent.reason ? ` (${closeEvent.reason})` : ''}`);
+  }
+
+  const healthUrl = resolveWorkServerHealthUrl();
+
+  if (healthUrl) {
+    try {
+      const response = await fetch(healthUrl, {
+        cache: 'no-store',
+      });
+
+      if (response.ok) {
+        diagnostics.push(`헬스체크 성공: ${healthUrl}`);
+        diagnostics.push(`HTTP 서버는 응답 중입니다. WebSocket 연결 대상: ${targetUrl}`);
+        diagnostics.push('WebSocket 업그레이드 또는 프록시 설정을 확인해 주세요.');
+      } else {
+        diagnostics.push(`헬스체크 실패: ${response.status} ${response.statusText}`);
+      }
+    } catch (error) {
+      diagnostics.push(
+        `헬스체크 요청 실패: ${error instanceof Error ? error.message : '서버에 도달하지 못했습니다.'}`,
+      );
+    }
+  }
+
+  return diagnostics.join(' / ');
+}
+
+export async function copyText(text: string) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  if (typeof document === 'undefined') {
+    throw new Error('클립보드를 사용할 수 없습니다.');
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  try {
+    const copied = document.execCommand('copy');
+
+    if (!copied) {
+      throw new Error('복사 명령이 거부되었습니다.');
+    }
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+function resolveChatApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+async function requestChatApi<T>(path: string, init?: RequestInit): Promise<T> {
+  const headers = appendClientIdHeader(init?.headers);
+  const accessToken = getRegisteredAccessToken();
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = window.setTimeout(() => controller.abort(), 8000);
+
+  if (accessToken && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', accessToken);
+  }
+
+  if (init?.body != null && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${resolveChatApiBaseUrl()}/chat${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    window.clearTimeout(timeoutId);
+
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new Error('채팅 서버 응답이 지연됩니다.');
+    }
+
+    throw error;
+  }
+
+  window.clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(text || '채팅 API 요청에 실패했습니다.');
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function readFileAsBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      if (typeof reader.result !== 'string') {
+        reject(new Error('파일 내용을 읽지 못했습니다.'));
+        return;
+      }
+
+      const commaIndex = reader.result.indexOf(',');
+      resolve(commaIndex >= 0 ? reader.result.slice(commaIndex + 1) : reader.result);
+    };
+
+    reader.onerror = () => {
+      reject(reader.error ?? new Error('파일 내용을 읽지 못했습니다.'));
+    };
+
+    reader.readAsDataURL(file);
+  });
+}
+
+export async function fetchChatConversations() {
+  const now = Date.now();
+
+  if (
+    cachedChatConversationList &&
+    now - cachedChatConversationListAt < CHAT_CONVERSATION_LIST_CACHE_WINDOW_MS
+  ) {
+    return cachedChatConversationList;
+  }
+
+  if (chatConversationListRequestPromise) {
+    return chatConversationListRequestPromise;
+  }
+
+  const clientId = getOrCreateClientId();
+  chatConversationListRequestPromise = requestChatApi<{ ok: boolean; items: ChatConversationSummary[] }>('/conversations')
+    .then((response) => {
+      const items = response.items.map((item) => ({
+        ...item,
+        notifyOffline: resolveSyncedChatOfflineNotificationSetting(item.sessionId, item.notifyOffline, clientId),
+      }));
+
+      cachedChatConversationList = items;
+      cachedChatConversationListAt = Date.now();
+      return items;
+    })
+    .finally(() => {
+      chatConversationListRequestPromise = null;
+    });
+
+  return chatConversationListRequestPromise;
+}
+
+export async function fetchChatConversationDetail(
+  sessionId: string,
+  options: {
+    limit?: number;
+    beforeMessageId?: number | null;
+  } = {},
+) {
+  const clientId = getOrCreateClientId();
+  const query = new URLSearchParams();
+
+  if (options.limit != null) {
+    query.set('limit', String(options.limit));
+  }
+
+  if (Number.isFinite(options.beforeMessageId) && (options.beforeMessageId ?? 0) > 0) {
+    query.set('beforeMessageId', String(options.beforeMessageId));
+  }
+
+  const response = await requestChatApi<ChatConversationDetailResponse>(
+    `/conversations/${encodeURIComponent(sessionId)}${query.toString() ? `?${query.toString()}` : ''}`,
+  );
+  const visibleRequestIds = new Set(
+    response.messages
+      .map((message) => message.clientRequestId?.trim() ?? '')
+      .filter(Boolean),
+  );
+  return {
+    ...response,
+    messages: hydrateActivityLogMessages(
+      response.messages,
+      response.activityLogs.filter((item) => visibleRequestIds.has(item.requestId?.trim() ?? '')),
+    ).filter(
+      (message) => message.author !== 'system' || isActivityLogMessage(message),
+    ),
+    item: {
+      ...response.item,
+      notifyOffline: resolveSyncedChatOfflineNotificationSetting(
+        response.item.sessionId,
+        response.item.notifyOffline,
+        clientId,
+      ),
+    },
+    requests: response.requests.map((item) => normalizeChatConversationRequest(item)),
+  };
+}
+
+export async function fetchChatRuntimeSnapshot() {
+  const response = await requestChatApi<{ ok: boolean; item: ChatRuntimeSnapshot }>('/runtime');
+  return response.item;
+}
+
+export async function fetchChatRuntimeJobDetail(requestId: string) {
+  const response = await requestChatApi<{ ok: boolean; item: ChatRuntimeJobDetail }>(
+    `/runtime/jobs/${encodeURIComponent(requestId)}`,
+  );
+  return response.item;
+}
+
+export async function cancelChatRuntimeJob(requestId: string) {
+  const response = await requestChatApi<{ ok: boolean; cancelled: boolean }>(
+    `/runtime/jobs/${encodeURIComponent(requestId)}/cancel`,
+    {
+      method: 'POST',
+    },
+  );
+  return response.cancelled;
+}
+
+export async function removeChatRuntimeJob(requestId: string) {
+  const response = await requestChatApi<{ ok: boolean; removed: boolean }>(
+    `/runtime/jobs/${encodeURIComponent(requestId)}/remove`,
+    {
+      method: 'POST',
+    },
+  );
+  return response.removed;
+}
+
+export async function uploadChatComposerFile(sessionId: string, file: File) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    throw new Error('채팅 세션이 준비되지 않았습니다.');
+  }
+
+  const contentBase64 = await readFileAsBase64(file);
+  const response = await requestChatApi<{ ok: boolean; item: ChatComposerAttachment }>('/attachments', {
+    method: 'POST',
+    body: JSON.stringify({
+      sessionId: normalizedSessionId,
+      fileName: file.name,
+      mimeType: file.type,
+      contentBase64,
+    }),
+  });
+
+  return response.item;
+}
+
+export async function createChatConversationRoom(args: {
+  sessionId: string;
+  title?: string;
+  contextLabel?: string;
+  contextDescription?: string;
+  notifyOffline?: boolean;
+}) {
+  const clientId = getOrCreateClientId();
+  const notifyOffline = args.notifyOffline ?? true;
+  const response = await requestChatApi<{ ok: boolean; item: ChatConversationSummary }>('/conversations', {
+    method: 'POST',
+    body: JSON.stringify({
+      sessionId: args.sessionId,
+      title: args.title ?? '새 대화',
+      contextLabel: args.contextLabel ?? null,
+      contextDescription: args.contextDescription ?? null,
+      notifyOffline,
+      clientId,
+    }),
+  });
+
+  return {
+    ...response.item,
+    notifyOffline: resolveSyncedChatOfflineNotificationSetting(response.item.sessionId, response.item.notifyOffline, clientId),
+  };
+}
+
+export async function renameChatConversationRoom(sessionId: string, title: string) {
+  const response = await requestChatApi<{ ok: boolean; item: ChatConversationSummary }>(
+    `/conversations/${encodeURIComponent(sessionId)}`,
+    {
+      method: 'PATCH',
+      body: JSON.stringify({
+        title,
+      }),
+    },
+  );
+
+  return response.item;
+}
+
+export async function updateChatConversationRoom(
+  sessionId: string,
+  payload: {
+    title?: string;
+    notifyOffline?: boolean;
+  },
+) {
+  const clientId = getOrCreateClientId();
+  const response = await requestChatApi<{ ok: boolean; item: ChatConversationSummary }>(
+    `/conversations/${encodeURIComponent(sessionId)}`,
+    {
+      method: 'PATCH',
+      body: JSON.stringify(payload),
+    },
+  );
+
+  return {
+    ...response.item,
+    notifyOffline: resolveSyncedChatOfflineNotificationSetting(response.item.sessionId, response.item.notifyOffline, clientId),
+  };
+}
+
+export async function markChatConversationResponsesRead(sessionId: string) {
+  const response = await requestChatApi<{
+    ok: boolean;
+    sessionId: string;
+    lastReadResponseMessageId: number | null;
+  }>(`/conversations/${encodeURIComponent(sessionId)}/read`, {
+    method: 'POST',
+  });
+
+  return response;
+}
+
+export async function deleteChatConversationRoom(sessionId: string) {
+  const response = await requestChatApi<{ ok: boolean; deleted: boolean; sessionId: string }>(
+    `/conversations/${encodeURIComponent(sessionId)}`,
+    {
+      method: 'DELETE',
+    },
+  );
+
+  return response;
+}
+
+export async function deleteChatConversationRequest(sessionId: string, requestId: string) {
+  const response = await requestChatApi<{ ok: boolean; deleted: boolean; sessionId: string; requestId: string }>(
+    `/conversations/${encodeURIComponent(sessionId)}/requests/${encodeURIComponent(requestId)}`,
+    {
+      method: 'DELETE',
+    },
+  );
+
+  return response;
+}
+
+type HandleChatServerEventOptions = {
+  eventData: string;
+  currentPageUrl: string;
+  expectedSessionId?: string;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  onMessageEvent?: (message: ChatMessage, sessionId: string) => void;
+  onJobEvent?: (event: ChatJobEvent, sessionId: string) => void;
+  onRuntimeEvent?: (snapshot: ChatRuntimeSnapshot) => void;
+  onRuntimeDetailEvent?: (detail: ChatRuntimeJobDetail) => void;
+  onActivityEvent?: (event: ChatActivityEvent) => void;
+  onEventReceived?: (eventId: number, sessionId: string) => void;
+};
+
+function areChatMessagesEquivalent(left: ChatMessage[], right: ChatMessage[]) {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((message, index) => {
+    const other = right[index];
+
+    return (
+      other &&
+      message.id === other.id &&
+      message.author === other.author &&
+      message.text === other.text &&
+      message.timestamp === other.timestamp
+    );
+  });
+}
+
+export function upsertChatMessage(previous: ChatMessage[], incoming: ChatMessage) {
+  const existingIndex = previous.findIndex(
+    (message) =>
+      message.id === incoming.id ||
+      Boolean(
+        incoming.clientRequestId &&
+          message.clientRequestId &&
+          incoming.author === 'user' &&
+          message.author === 'user' &&
+          incoming.clientRequestId === message.clientRequestId,
+      ),
+  );
+
+  if (existingIndex < 0) {
+    return [...previous, incoming];
+  }
+
+  const nextMessages = [...previous];
+  const existingMessage = nextMessages[existingIndex];
+  const nextText =
+    isActivityLogMessage(existingMessage) && isActivityLogMessage(incoming)
+      ? createActivityLogPlaceholder(
+          incoming.clientRequestId ?? existingMessage.clientRequestId ?? '',
+          mergeActivityLines(getActivityLogLines(existingMessage), getActivityLogLines(incoming)),
+        )?.text ?? incoming.text
+      : incoming.text;
+  nextMessages[existingIndex] = {
+    ...existingMessage,
+    ...incoming,
+    text: nextText,
+    deliveryStatus: null,
+    retryCount: 0,
+  };
+  return nextMessages;
+}
+
+function isSameChatMessage(left: ChatMessage, right: ChatMessage) {
+  if (left.id === right.id) {
+    return true;
+  }
+
+  if (isActivityLogMessage(left) && isActivityLogMessage(right)) {
+    return Boolean(left.clientRequestId && right.clientRequestId && left.clientRequestId === right.clientRequestId);
+  }
+
+  return Boolean(
+    left.author === 'user' &&
+      right.author === 'user' &&
+      left.clientRequestId &&
+      right.clientRequestId &&
+      left.clientRequestId === right.clientRequestId,
+  );
+}
+
+function buildComparableChatMessageKey(message: ChatMessage) {
+  if (isActivityLogMessage(message) && message.clientRequestId) {
+    return `activity:${message.clientRequestId}`;
+  }
+
+  if (message.author === 'user' && message.clientRequestId) {
+    return `user-request:${message.clientRequestId}`;
+  }
+
+  return `id:${message.id}`;
+}
+
+export function mergeRecoveredChatMessages(previous: ChatMessage[], incoming: ChatMessage[]) {
+  if (previous.length === 0) {
+    return incoming;
+  }
+
+  if (areChatMessagesEquivalent(previous, incoming)) {
+    return previous;
+  }
+
+  const previousBuckets = new Map<string, ChatMessage[]>();
+
+  previous.forEach((message) => {
+    const key = buildComparableChatMessageKey(message);
+    const bucket = previousBuckets.get(key);
+
+    if (bucket) {
+      bucket.push(message);
+      return;
+    }
+
+    previousBuckets.set(key, [message]);
+  });
+
+  const consumeExistingMessage = (target: ChatMessage) => {
+    const key = buildComparableChatMessageKey(target);
+    const bucket = previousBuckets.get(key);
+
+    if (!bucket || bucket.length === 0) {
+      return null;
+    }
+
+    const matchIndex = bucket.findIndex((message) => isSameChatMessage(message, target));
+
+    if (matchIndex < 0) {
+      return null;
+    }
+
+    const [matched] = bucket.splice(matchIndex, 1);
+
+    if (bucket.length === 0) {
+      previousBuckets.delete(key);
+    }
+
+    return matched;
+  };
+
+  const mergedServerMessages = incoming.map((serverMessage) => {
+    const existingMessage = consumeExistingMessage(serverMessage);
+
+    if (!existingMessage) {
+      return serverMessage;
+    }
+
+    return {
+      ...existingMessage,
+      ...serverMessage,
+      deliveryStatus: null,
+      retryCount: 0,
+    };
+  });
+
+  const unmatchedLocalMessages = Array.from(previousBuckets.values()).flat();
+  const nextMessages = [...mergedServerMessages, ...unmatchedLocalMessages];
+
+  return areChatMessagesEquivalent(previous, nextMessages) ? previous : nextMessages;
+}
+
+export async function handleChatServerEvent({
+  eventData,
+  currentPageUrl,
+  expectedSessionId,
+  setMessages,
+  onMessageEvent,
+  onJobEvent,
+  onRuntimeEvent,
+  onRuntimeDetailEvent,
+  onActivityEvent,
+  onEventReceived,
+}: HandleChatServerEventOptions) {
+  try {
+    const payload = JSON.parse(eventData) as ChatServerEvent;
+
+    // Ignore late events from a previously selected conversation so they don't
+    // overwrite or interleave with the active thread.
+    if (expectedSessionId && payload.sessionId !== expectedSessionId) {
+      return;
+    }
+
+    onEventReceived?.(payload.eventId, payload.sessionId);
+
+    if (payload.type === 'chat:init') {
+      setMessages((previous) => mergeRecoveredChatMessages(previous, payload.payload.messages));
+      return;
+    }
+
+    if (payload.type === 'chat:message') {
+      onMessageEvent?.(payload.payload, payload.sessionId);
+      setMessages((previous) => upsertChatMessage(previous, payload.payload));
+      return;
+    }
+
+    if (payload.type === 'chat:message:update') {
+      setMessages((previous) => upsertChatMessage(previous, payload.payload));
+      return;
+    }
+
+    if (payload.type === 'chat:job') {
+      onJobEvent?.(payload.payload, payload.sessionId);
+      return;
+    }
+
+    if (payload.type === 'chat:runtime') {
+      onRuntimeEvent?.(payload.payload);
+      return;
+    }
+
+    if (payload.type === 'chat:runtime:detail') {
+      onRuntimeDetailEvent?.(payload.payload);
+      return;
+    }
+
+    if (payload.type === 'chat:activity') {
+      onActivityEvent?.(payload.payload);
+      setMessages((previous) => appendActivityEventToMessages(previous, payload.payload));
+      return;
+    }
+
+    if (payload.type === 'chat:error') {
+      setMessages((previous) => [...previous, createLocalMessage(payload.payload.message)]);
+    }
+  } catch {
+    await reportClientError({
+      errorType: 'chat:message-parse',
+      errorMessage: '채팅 응답 JSON 파싱에 실패했습니다.',
+      requestPath: currentPageUrl || null,
+      context: {
+        rawMessage: eventData.slice(0, 2000),
+      },
+    });
+    setMessages((previous) => [
+      ...previous,
+      createLocalMessage('채팅 응답을 해석하지 못했습니다. 연결을 다시 확인합니다.'),
+    ]);
+  }
+}
diff --git a/src/app/main/mainChatPanel/errorLogUtils.tsx b/src/app/main/mainChatPanel/errorLogUtils.tsx
new file mode 100755
index 0000000..3fe6686
--- /dev/null
+++ b/src/app/main/mainChatPanel/errorLogUtils.tsx
@@ -0,0 +1,468 @@
+import { Button, Tabs, Typography } from 'antd';
+import type { ErrorLogItem } from '../errorLogApi';
+import { PreviewerUI } from '../../../components/previewer';
+import type { ErrorReferenceCandidate, ErrorReferenceResource, ErrorReferenceSummary } from './errorLogUtils.types';
+
+const { Text } = Typography;
+const URL_PATTERN = /https?:\/\/[^\s)]+/gi;
+const IMAGE_URL_PATTERN = /\.(?:png|jpe?g|gif|webp|svg|bmp)(?:[?#].*)?$/i;
+const PREVIEW_KEY_PATTERN = /(preview|deploy|vercel|netlify|storybook|localhost|127\.0\.0\.1|pageUrl)/i;
+
+export function formatErrorLogTime(value: string) {
+  const parsed = new Date(value);
+
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    dateStyle: 'short',
+    timeStyle: 'medium',
+  }).format(parsed);
+}
+
+export function getErrorSourceColor(source: string) {
+  if (source === 'automation') {
+    return 'volcano';
+  }
+
+  if (source === 'server') {
+    return 'blue';
+  }
+
+  return 'gold';
+}
+
+export function getErrorSourceLabel(item: ErrorLogItem) {
+  return item.sourceLabel || item.source;
+}
+
+export function formatErrorSummary(item: ErrorLogItem) {
+  const label = item.errorName || item.errorType;
+  const planLabel =
+    item.relatedPlanId || item.relatedWorkId
+      ? [item.relatedPlanId ? `#${item.relatedPlanId}` : null, item.relatedWorkId].filter(Boolean).join(' ')
+      : null;
+
+  return planLabel ? `${label} · ${planLabel}` : label;
+}
+
+export function formatCompactPath(value: string | null | undefined) {
+  if (!value) {
+    return '';
+  }
+
+  if (value.length <= 42) {
+    return value;
+  }
+
+  return `...${value.slice(-39)}`;
+}
+
+export function stringifyErrorDetail(value: unknown) {
+  if (value == null) {
+    return '';
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function buildErrorMetaRows(item: ErrorLogItem) {
+  return [
+    { label: '발생 시각', value: formatErrorLogTime(item.createdAt) },
+    { label: '출처', value: getErrorSourceLabel(item) },
+    { label: '유형', value: item.errorType },
+    item.errorName ? { label: '이름', value: item.errorName } : null,
+    item.statusCode ? { label: '상태 코드', value: String(item.statusCode) } : null,
+    item.requestMethod || item.requestPath
+      ? { label: '요청', value: [item.requestMethod, item.requestPath].filter(Boolean).join(' ') }
+      : null,
+    item.relatedPlanId ? { label: '작업', value: `#${item.relatedPlanId}` } : null,
+    item.relatedWorkId ? { label: '작업 ID', value: item.relatedWorkId } : null,
+  ].filter(Boolean) as Array<{ label: string; value: string }>;
+}
+
+function collectReferenceCandidates(value: unknown, path = 'context'): ErrorReferenceCandidate[] {
+  if (value == null) {
+    return [];
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    return trimmed ? [{ path, value: trimmed }] : [];
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return [{ path, value: String(value) }];
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap((entry, index) => collectReferenceCandidates(entry, `${path}[${index}]`));
+  }
+
+  if (typeof value === 'object') {
+    return Object.entries(value).flatMap(([key, entry]) => collectReferenceCandidates(entry, `${path}.${key}`));
+  }
+
+  return [];
+}
+
+function formatReferenceLabel(path: string, kind: ErrorReferenceResource['kind'], index: number) {
+  const pathLabel = path.split('.').pop()?.replace(/\[\d+\]/g, '') || '참조';
+
+  if (kind === 'preview') {
+    return `${pathLabel} preview ${index}`;
+  }
+
+  if (kind === 'image') {
+    return `${pathLabel} image ${index}`;
+  }
+
+  return `${pathLabel} link ${index}`;
+}
+
+function buildReferenceSourcePreview(sourceText: string, url: string) {
+  const normalized = sourceText.replace(/\s+/g, ' ').trim();
+
+  if (!normalized) {
+    return url;
+  }
+
+  const matchIndex = normalized.indexOf(url);
+
+  if (matchIndex < 0) {
+    return normalized.length > 220 ? `${normalized.slice(0, 220)}...` : normalized;
+  }
+
+  const start = Math.max(0, matchIndex - 96);
+  const end = Math.min(normalized.length, matchIndex + url.length + 96);
+  const prefix = start > 0 ? '... ' : '';
+  const suffix = end < normalized.length ? ' ...' : '';
+
+  return `${prefix}${normalized.slice(start, end)}${suffix}`;
+}
+
+function buildErrorReferenceResources(item: ErrorLogItem): ErrorReferenceResource[] {
+  const sourceTexts: ErrorReferenceCandidate[] = [
+    { path: 'errorMessage', value: item.errorMessage },
+    item.detail ? { path: 'detail', value: item.detail } : null,
+    item.stackTrace ? { path: 'stackTrace', value: item.stackTrace } : null,
+    item.requestPath ? { path: 'requestPath', value: item.requestPath } : null,
+    ...(item.context ? collectReferenceCandidates(item.context) : []),
+  ].filter(Boolean) as ErrorReferenceCandidate[];
+
+  const seen = new Set<string>();
+  const resources: ErrorReferenceResource[] = [];
+
+  sourceTexts.forEach(({ path, value }) => {
+    const matches = value.match(URL_PATTERN) ?? [];
+
+    matches.forEach((rawUrl) => {
+      const url = rawUrl.replace(/[),.;]+$/g, '');
+
+      if (!url || seen.has(url)) {
+        return;
+      }
+
+      const kind = IMAGE_URL_PATTERN.test(url)
+        ? 'image'
+        : PREVIEW_KEY_PATTERN.test(path) || PREVIEW_KEY_PATTERN.test(url)
+          ? 'preview'
+          : 'link';
+
+      seen.add(url);
+      resources.push({
+        url,
+        label: formatReferenceLabel(path, kind, resources.length + 1),
+        kind,
+        sourcePath: path,
+        sourcePreview: buildReferenceSourcePreview(value, url),
+      });
+    });
+
+    if (!matches.length && /^https?:\/\//i.test(value.trim()) && !seen.has(value.trim())) {
+      const url = value.trim();
+      const kind = IMAGE_URL_PATTERN.test(url)
+        ? 'image'
+        : PREVIEW_KEY_PATTERN.test(path) || PREVIEW_KEY_PATTERN.test(url)
+          ? 'preview'
+          : 'link';
+
+      seen.add(url);
+      resources.push({
+        url,
+        label: formatReferenceLabel(path, kind, resources.length + 1),
+        kind,
+        sourcePath: path,
+        sourcePreview: buildReferenceSourcePreview(value, url),
+      });
+    }
+  });
+
+  return resources;
+}
+
+export function buildErrorReferenceSummary(item: ErrorLogItem): ErrorReferenceSummary {
+  const resources = buildErrorReferenceResources(item);
+  const previewCount = resources.filter((resource) => resource.kind === 'preview').length;
+  const imageCount = resources.filter((resource) => resource.kind === 'image').length;
+  const linkCount = resources.filter((resource) => resource.kind === 'link').length;
+  return { resources, previewCount, imageCount, linkCount };
+}
+
+export function getDefaultErrorResource(resources: ErrorReferenceResource[]) {
+  return resources.find((resource) => resource.kind === 'preview')
+    ?? resources.find((resource) => resource.kind === 'image')
+    ?? resources[0]
+    ?? null;
+}
+
+export function getErrorResourceKindLabel(kind: ErrorReferenceResource['kind']) {
+  if (kind === 'preview') {
+    return 'preview';
+  }
+
+  if (kind === 'image') {
+    return 'image';
+  }
+
+  return 'link';
+}
+
+export function buildErrorListPreviewLine(item: ErrorLogItem, summary: ErrorReferenceSummary) {
+  const compactMessage = item.errorMessage.replace(/\s+/g, ' ').trim();
+  const focusLabel = item.requestPath || compactMessage;
+  const referenceTotal = summary.resources.length;
+
+  return [formatCompactPath(focusLabel), referenceTotal ? `참조 ${referenceTotal}` : null].filter(Boolean).join(' · ');
+}
+
+function buildErrorOverviewText(item: ErrorLogItem) {
+  return [
+    `에러: ${item.errorMessage}`,
+    ...buildErrorMetaRows(item).map((row) => `${row.label}: ${row.value}`),
+  ].join('\n');
+}
+
+export function buildErrorDetailTabs(item: ErrorLogItem) {
+  const resources = buildErrorReferenceSummary(item).resources;
+  const imageResources = resources.filter((resource) => resource.kind === 'image');
+  const previewResources = resources.filter((resource) => resource.kind === 'preview');
+  const linkResources = resources.filter((resource) => resource.kind === 'link');
+  const tabs = [
+    {
+      key: 'overview',
+      label: '개요',
+      children: (
+        <div className="app-chat-panel__error-tab-stack">
+          {previewResources.length ? (
+            <div className="app-chat-panel__error-reference-list">
+              {previewResources.map((resource) => (
+                <Button
+                  key={resource.url}
+                  type="link"
+                  href={resource.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ paddingInline: 0, justifyContent: 'flex-start' }}
+                >
+                  {resource.label}: {resource.url}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+          <PreviewerUI
+            type="text"
+            title={formatErrorSummary(item)}
+            description="선택한 로그의 핵심 정보"
+            value={buildErrorOverviewText(item)}
+            height="auto"
+          />
+          {linkResources.length || imageResources.length ? (
+            <div className="app-chat-panel__error-reference-list">
+              {linkResources.map((resource) => (
+                <Button
+                  key={resource.url}
+                  type="link"
+                  href={resource.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ paddingInline: 0, justifyContent: 'flex-start' }}
+                >
+                  {resource.label}: {resource.url}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ),
+    },
+  ];
+
+  if (item.detail) {
+    tabs.push({
+      key: 'detail',
+      label: '상세',
+      children: (
+        <PreviewerUI
+          type="code"
+          title="Error Detail"
+          description="상세 에러 데이터"
+          value={stringifyErrorDetail(item.detail)}
+          language="json"
+          height="auto"
+        />
+      ),
+    });
+  }
+
+  if (item.context) {
+    tabs.push({
+      key: 'context',
+      label: '컨텍스트',
+      children: (
+        <PreviewerUI
+          type="json"
+          title="Error Context"
+          description="추가 컨텍스트 데이터"
+          value={item.context}
+          height="auto"
+        />
+      ),
+    });
+  }
+
+  if (item.stackTrace) {
+    tabs.push({
+      key: 'stack',
+      label: '스택',
+      children: (
+        <PreviewerUI
+          type="code"
+          title="Stack Trace"
+          description="에러 스택"
+          value={item.stackTrace}
+          language="bash"
+          height="auto"
+        />
+      ),
+    });
+  }
+
+  if (imageResources.length || linkResources.length) {
+    tabs.push({
+      key: 'references',
+      label: '참조',
+      children: (
+        <div className="app-chat-panel__error-tab-stack">
+          {imageResources.length ? (
+            <div className="app-chat-panel__error-image-grid">
+              {imageResources.map((resource) => (
+                <PreviewerUI
+                  key={resource.url}
+                  type="image"
+                  title={resource.label}
+                  description={`${resource.sourcePath} · ${resource.url}`}
+                  value={resource.url}
+                  imageAlt={resource.label}
+                  height={320}
+                />
+              ))}
+            </div>
+          ) : null}
+          {previewResources.length ? (
+            <div className="app-chat-panel__error-reference-list">
+              {previewResources.map((resource) => (
+                <Button
+                  key={resource.url}
+                  type="link"
+                  href={resource.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ paddingInline: 0, justifyContent: 'flex-start' }}
+                >
+                  {resource.label}: {resource.url}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+          {linkResources.length ? (
+            <div className="app-chat-panel__error-reference-list">
+              {linkResources.map((resource) => (
+                <Button
+                  key={resource.url}
+                  type="link"
+                  href={resource.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ paddingInline: 0, justifyContent: 'flex-start' }}
+                >
+                  {resource.label}: {resource.url}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ),
+    });
+  }
+
+  if (previewResources.length) {
+    tabs.push({
+      key: 'preview',
+      label: '미리보기',
+      children: (
+        <div className="app-chat-panel__error-preview-grid">
+          {previewResources.map((resource) => (
+            <section key={resource.url} className="app-chat-panel__error-preview-card">
+              <div className="app-chat-panel__error-preview-card-top">
+                <div>
+                  <Text strong>{resource.label}</Text>
+                  <br />
+                  <Text type="secondary">{resource.sourcePath}</Text>
+                </div>
+                <Button size="small" type="primary" href={resource.url} target="_blank" rel="noreferrer">
+                  열기
+                </Button>
+              </div>
+              <div className="app-chat-panel__error-preview-frame-wrap">
+                <iframe
+                  className="app-chat-panel__error-preview-frame"
+                  src={resource.url}
+                  title={resource.label}
+                  loading="lazy"
+                  referrerPolicy="no-referrer"
+                />
+              </div>
+              <Text type="secondary" className="app-chat-panel__error-preview-url">
+                {resource.url}
+              </Text>
+            </section>
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  return tabs;
+}
+
+export function buildErrorSourceSummary(errorLogs: ErrorLogItem[]) {
+  return errorLogs.reduce<Record<string, number>>((acc, item) => {
+    const key = getErrorSourceLabel(item);
+    acc[key] = (acc[key] ?? 0) + 1;
+    return acc;
+  }, {});
+}
+
+export function renderErrorTabs(item: ErrorLogItem) {
+  return <Tabs className="app-chat-panel__error-tabs" items={buildErrorDetailTabs(item)} />;
+}
diff --git a/src/app/main/mainChatPanel/errorLogUtils.types.ts b/src/app/main/mainChatPanel/errorLogUtils.types.ts
new file mode 100755
index 0000000..dc1d91d
--- /dev/null
+++ b/src/app/main/mainChatPanel/errorLogUtils.types.ts
@@ -0,0 +1,8 @@
+import type { ErrorReferenceResource, ErrorReferenceSummary } from './types';
+
+export type { ErrorReferenceResource, ErrorReferenceSummary };
+
+export type ErrorReferenceCandidate = {
+  path: string;
+  value: string;
+};
diff --git a/src/app/main/mainChatPanel/index.ts b/src/app/main/mainChatPanel/index.ts
new file mode 100644
index 0000000..b5a9c34
--- /dev/null
+++ b/src/app/main/mainChatPanel/index.ts
@@ -0,0 +1,42 @@
+export { ChatConversationView } from './ChatConversationView';
+export { ChatRuntimeDashboard } from './ChatRuntimeDashboard';
+export { ErrorLogViewer } from './ErrorLogViewer';
+export {
+  buildOfflineReply,
+  clearStoredChatClientConversationState,
+  copyText,
+  createActivityLogPlaceholder,
+  createChatConversationRoom,
+  createChatMessage,
+  createIntroMessage,
+  createLocalMessage,
+  cancelChatRuntimeJob,
+  deleteChatConversationRequest,
+  deleteChatConversationRoom,
+  fetchChatConversationDetail,
+  fetchChatConversations,
+  fetchChatRuntimeJobDetail,
+  fetchChatRuntimeSnapshot,
+  getStoredChatSessionLastTypeId,
+  isPreparingChatReplyText,
+  getChatClientSessionId,
+  loadStoredChatMessages,
+  markChatConversationResponsesRead,
+  mergeRecoveredChatMessages,
+  persistStoredChatMessages,
+  renameChatConversationRoom,
+  removeChatRuntimeJob,
+  resetLastReceivedChatEventId,
+  setStoredChatSessionLastTypeId,
+  setChatClientSessionId,
+  uploadChatComposerFile,
+  upsertChatMessage,
+  updateChatConversationRoom,
+} from './chatUtils';
+export {
+  getSharedChatRuntimeSnapshot,
+  setSharedChatRuntimeSnapshot,
+  subscribeChatConnection,
+  useChatConnection,
+} from './useChatConnection';
+export { useErrorLogs } from './useErrorLogs';
diff --git a/src/app/main/mainChatPanel/sharedActiveConversation.ts b/src/app/main/mainChatPanel/sharedActiveConversation.ts
new file mode 100644
index 0000000..bac1379
--- /dev/null
+++ b/src/app/main/mainChatPanel/sharedActiveConversation.ts
@@ -0,0 +1,44 @@
+type SharedActiveConversationSnapshot = {
+  sessionId: string;
+  title: string;
+};
+
+const sharedActiveConversation = {
+  sessionId: '',
+  title: '',
+  subscribers: new Set<() => void>(),
+};
+
+function emitSharedActiveConversation() {
+  sharedActiveConversation.subscribers.forEach((listener) => {
+    listener();
+  });
+}
+
+export function getSharedActiveConversationSnapshot(): SharedActiveConversationSnapshot {
+  return {
+    sessionId: sharedActiveConversation.sessionId,
+    title: sharedActiveConversation.title,
+  };
+}
+
+export function subscribeSharedActiveConversation(listener: () => void) {
+  sharedActiveConversation.subscribers.add(listener);
+
+  return () => {
+    sharedActiveConversation.subscribers.delete(listener);
+  };
+}
+
+export function setSharedActiveConversationSnapshot(snapshot: SharedActiveConversationSnapshot) {
+  const nextSessionId = snapshot.sessionId.trim();
+  const nextTitle = snapshot.title.trim();
+
+  if (sharedActiveConversation.sessionId === nextSessionId && sharedActiveConversation.title === nextTitle) {
+    return;
+  }
+
+  sharedActiveConversation.sessionId = nextSessionId;
+  sharedActiveConversation.title = nextTitle;
+  emitSharedActiveConversation();
+}
diff --git a/src/app/main/mainChatPanel/types.ts b/src/app/main/mainChatPanel/types.ts
new file mode 100755
index 0000000..ead78e4
--- /dev/null
+++ b/src/app/main/mainChatPanel/types.ts
@@ -0,0 +1,251 @@
+import type { ErrorLogItem } from '../errorLogApi';
+
+export type ChatMessage = {
+  id: number;
+  author: 'codex' | 'system' | 'user';
+  text: string;
+  timestamp: string;
+  clientRequestId?: string | null;
+  deliveryStatus?: 'retrying' | 'failed' | null;
+  retryCount?: number;
+};
+
+export type ChatComposerAttachment = {
+  id: string;
+  name: string;
+  path: string;
+  publicUrl: string;
+  size: number;
+  mimeType: string;
+};
+
+export type ChatViewContext = {
+  pageId: string;
+  pageTitle: string;
+  topMenu: string;
+  focusedComponentId: string | null;
+  pageUrl: string;
+  isStandaloneMode: boolean;
+  pageVisibilityState: 'visible' | 'hidden';
+  chatTypeId: string | null;
+  chatTypeLabel: string;
+  chatTypeDescription: string;
+  chatTypeIsTemplate: boolean;
+};
+
+export type ChatConversationSummary = {
+  sessionId: string;
+  clientId: string | null;
+  title: string;
+  contextLabel: string | null;
+  contextDescription: string | null;
+  notifyOffline: boolean;
+  hasUnreadResponse: boolean;
+  currentRequestId: string | null;
+  currentJobStatus: ChatJobStatus | null;
+  currentJobMessage: string | null;
+  currentQueueSize: number;
+  currentStatusUpdatedAt: string | null;
+  lastMessagePreview: string;
+  createdAt: string;
+  updatedAt: string;
+  lastMessageAt: string | null;
+};
+
+export type ChatConversationRequestStatus =
+  | 'accepted'
+  | 'queued'
+  | 'started'
+  | 'completed'
+  | 'failed'
+  | 'cancelled'
+  | 'removed';
+
+export type ChatConversationRequest = {
+  sessionId: string;
+  requestId: string;
+  status: ChatConversationRequestStatus;
+  statusMessage: string | null;
+  userMessageId: number | null;
+  userText: string;
+  responseMessageId: number | null;
+  responseText: string;
+  hasResponse: boolean;
+  canDelete: boolean;
+  createdAt: string;
+  updatedAt: string;
+  answeredAt: string | null;
+  terminalAt: string | null;
+};
+
+export type ChatConversationActivityLog = {
+  sessionId: string;
+  requestId: string;
+  lines: string[];
+  updatedAt: string | null;
+};
+
+export type ChatActivityEvent = {
+  requestId: string;
+  line: string;
+  lineCount: number;
+};
+
+export type ChatPanelView = 'chat' | 'runtime' | 'errors';
+
+export type ChatJobMode = 'queue' | 'direct';
+export type ChatJobStatus = 'queued' | 'started' | 'completed' | 'failed';
+
+export type ChatRuntimeJobStatus = 'queued' | 'running';
+
+export type ChatJobEvent = {
+  requestId: string;
+  status: ChatJobStatus;
+  mode: ChatJobMode;
+  queueSize: number;
+  message: string;
+};
+
+export type ChatRuntimeJobItem = {
+  requestId: string;
+  sessionId: string;
+  mode: ChatJobMode;
+  status: ChatRuntimeJobStatus;
+  summary: string;
+  enqueuedAt: string;
+  startedAt: string | null;
+  pid: number | null;
+};
+
+export type ChatRuntimeSessionSummary = {
+  sessionId: string;
+  runningCount: number;
+  queuedCount: number;
+  latestRequestId: string | null;
+  latestStatus: ChatRuntimeJobStatus | null;
+};
+
+export type ChatRuntimeSnapshot = {
+  generatedAt: string;
+  runningCount: number;
+  queuedCount: number;
+  sessionCount: number;
+  running: ChatRuntimeJobItem[];
+  queued: ChatRuntimeJobItem[];
+  sessions: ChatRuntimeSessionSummary[];
+  recent: Array<ChatRuntimeJobItem & { terminalStatus: ChatRuntimeTerminalStatus; lastUpdatedAt: string }>;
+};
+
+export type ChatRuntimeTerminalStatus = 'completed' | 'failed' | 'cancelled' | 'removed';
+
+export type ChatRuntimeJobDetail = {
+  item: ChatRuntimeJobItem | null;
+  logs: string[];
+  lastUpdatedAt: string | null;
+  terminalStatus: ChatRuntimeTerminalStatus | null;
+  availableActions: {
+    cancel: boolean;
+    remove: boolean;
+  };
+};
+
+export type ErrorReferenceResource = {
+  url: string;
+  label: string;
+  kind: 'image' | 'link' | 'preview';
+  sourcePath: string;
+  sourcePreview: string;
+};
+
+export type ErrorReferenceSummary = {
+  resources: ErrorReferenceResource[];
+  previewCount: number;
+  imageCount: number;
+  linkCount: number;
+};
+
+export type MainChatPanelProps = {
+  initialView?: 'live' | 'errors';
+  lockOuterScrollOnMobile?: boolean;
+};
+
+export type ChatServerEvent =
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:init';
+      payload: {
+        messages: ChatMessage[];
+      };
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:message';
+      payload: ChatMessage;
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:message:update';
+      payload: ChatMessage;
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:status';
+      payload: {
+        connectedAt: string;
+      };
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:error';
+      payload: {
+        message: string;
+      };
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:job';
+      payload: ChatJobEvent;
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:runtime';
+      payload: ChatRuntimeSnapshot;
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:runtime:detail';
+      payload: ChatRuntimeJobDetail;
+    }
+  | {
+      eventId: number;
+      sessionId: string;
+      type: 'chat:activity';
+      payload: ChatActivityEvent;
+    };
+
+export type ChatConversationDetailResponse = {
+  ok: boolean;
+  item: ChatConversationSummary;
+  messages: ChatMessage[];
+  requests: ChatConversationRequest[];
+  activityLogs: ChatConversationActivityLog[];
+  oldestLoadedMessageId: number | null;
+  hasOlderMessages: boolean;
+};
+
+export type ErrorLogViewerState = {
+  errorLogs: ErrorLogItem[];
+  selectedErrorLogId: number | null;
+  isLoadingErrorLogs: boolean;
+  errorLogLoadError: string;
+  activeErrorResourceUrl: string;
+  isErrorDetailExpanded: boolean;
+};
diff --git a/src/app/main/mainChatPanel/useChatConnection.ts b/src/app/main/mainChatPanel/useChatConnection.ts
new file mode 100755
index 0000000..9fda2c4
--- /dev/null
+++ b/src/app/main/mainChatPanel/useChatConnection.ts
@@ -0,0 +1,689 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
+import {
+  CHAT_CONNECTION,
+  diagnoseConnectionFailure,
+  getLastReceivedChatEventId,
+  handleChatServerEvent,
+  persistLastReceivedChatEventId,
+  resolveChatWebSocketUrl,
+} from './chatUtils';
+import type {
+  ChatActivityEvent,
+  ChatJobEvent,
+  ChatMessage,
+  ChatRuntimeJobDetail,
+  ChatRuntimeSnapshot,
+  ChatViewContext,
+} from './types';
+
+const DISCONNECT_UI_DELAY_MS = 1500;
+const PRESENCE_PING_INTERVAL_MS = 20_000;
+const BACKGROUND_SOCKET_REFRESH_THRESHOLD_MS = 15_000;
+
+type ConnectionState = 'connecting' | 'connected' | 'disconnected';
+
+type UseChatConnectionOptions = {
+  sessionId: string;
+  currentContext: ChatViewContext;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  onMessageEvent?: (message: ChatMessage, sessionId: string) => void;
+  onJobEvent?: (event: ChatJobEvent, sessionId: string) => void;
+  onRuntimeEvent?: (snapshot: ChatRuntimeSnapshot) => void;
+  onRuntimeDetailEvent?: (detail: ChatRuntimeJobDetail) => void;
+  onActivityEvent?: (event: ChatActivityEvent) => void;
+};
+
+type SharedChatConnectionState = {
+  connectionState: ConnectionState;
+  connectionErrorDetail: string;
+  runtimeSnapshot: ChatRuntimeSnapshot | null;
+};
+
+type SharedChatConnection = SharedChatConnectionState & {
+  socketRef: { current: WebSocket | null };
+  reconnectTimerId: number | null;
+  disconnectUiTimerId: number | null;
+  connectTimeoutId: number | null;
+  sessionId: string;
+  currentContext: ChatViewContext | null;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>> | null;
+  onMessageEvent?: ((message: ChatMessage, sessionId: string) => void) | undefined;
+  onJobEvent?: ((event: ChatJobEvent, sessionId: string) => void) | undefined;
+  onRuntimeEvent?: ((snapshot: ChatRuntimeSnapshot) => void) | undefined;
+  onRuntimeDetailEvent?: ((detail: ChatRuntimeJobDetail) => void) | undefined;
+  onActivityEvent?: ((event: ChatActivityEvent) => void) | undefined;
+  lastEventId: number;
+  websocketUrl: string;
+  subscribers: Set<() => void>;
+  pingSubscriberCount: number;
+  consumerCount: number;
+  pingIntervalId: number | null;
+  visibilityHandlerInstalled: boolean;
+  pageShowHandlerInstalled: boolean;
+  focusHandlerInstalled: boolean;
+  onlineHandlerInstalled: boolean;
+  hasConnectedOnce: boolean;
+  suppressDisconnectNotification: boolean;
+  lastBackgroundAt: number | null;
+};
+
+const sharedChatConnection: SharedChatConnection = {
+  connectionState: 'connecting',
+  connectionErrorDetail: '',
+  runtimeSnapshot: null,
+  socketRef: { current: null },
+  reconnectTimerId: null,
+  disconnectUiTimerId: null,
+  connectTimeoutId: null,
+  sessionId: '',
+  currentContext: null,
+  setMessages: null,
+  onMessageEvent: undefined,
+  onJobEvent: undefined,
+  onRuntimeEvent: undefined,
+  onRuntimeDetailEvent: undefined,
+  onActivityEvent: undefined,
+  lastEventId: 0,
+  websocketUrl: '',
+  subscribers: new Set(),
+  pingSubscriberCount: 0,
+  consumerCount: 0,
+  pingIntervalId: null,
+  visibilityHandlerInstalled: false,
+  pageShowHandlerInstalled: false,
+  focusHandlerInstalled: false,
+  onlineHandlerInstalled: false,
+  hasConnectedOnce: false,
+  suppressDisconnectNotification: false,
+  lastBackgroundAt: null,
+};
+
+function emitSharedState() {
+  sharedChatConnection.subscribers.forEach((listener) => {
+    listener();
+  });
+}
+
+function getSnapshot(): SharedChatConnectionState {
+  return {
+    connectionState: sharedChatConnection.connectionState,
+    connectionErrorDetail: sharedChatConnection.connectionErrorDetail,
+    runtimeSnapshot: sharedChatConnection.runtimeSnapshot,
+  };
+}
+
+export function getChatConnectionSnapshot() {
+  return getSnapshot();
+}
+
+export function subscribeChatConnection(listener: () => void) {
+  sharedChatConnection.subscribers.add(listener);
+
+  return () => {
+    sharedChatConnection.subscribers.delete(listener);
+  };
+}
+
+export function getSharedChatRuntimeSnapshot() {
+  return sharedChatConnection.runtimeSnapshot;
+}
+
+export function setSharedChatRuntimeSnapshot(snapshot: ChatRuntimeSnapshot | null) {
+  if (sharedChatConnection.runtimeSnapshot === snapshot) {
+    return;
+  }
+
+  sharedChatConnection.runtimeSnapshot = snapshot;
+  emitSharedState();
+}
+
+function setSharedConnectionState(nextState: ConnectionState) {
+  if (sharedChatConnection.connectionState === nextState) {
+    return;
+  }
+
+  sharedChatConnection.connectionState = nextState;
+  emitSharedState();
+}
+
+function setSharedConnectionError(detail: string) {
+  if (sharedChatConnection.connectionErrorDetail === detail) {
+    return;
+  }
+
+  sharedChatConnection.connectionErrorDetail = detail;
+  emitSharedState();
+}
+
+function clearReconnectTimer() {
+  if (sharedChatConnection.reconnectTimerId !== null) {
+    window.clearTimeout(sharedChatConnection.reconnectTimerId);
+    sharedChatConnection.reconnectTimerId = null;
+  }
+}
+
+function clearDisconnectUiTimer() {
+  if (sharedChatConnection.disconnectUiTimerId !== null) {
+    window.clearTimeout(sharedChatConnection.disconnectUiTimerId);
+    sharedChatConnection.disconnectUiTimerId = null;
+  }
+}
+
+function clearConnectTimeout() {
+  if (sharedChatConnection.connectTimeoutId !== null) {
+    window.clearTimeout(sharedChatConnection.connectTimeoutId);
+    sharedChatConnection.connectTimeoutId = null;
+  }
+}
+
+function sendContextUpdate(context: ChatViewContext | null = sharedChatConnection.currentContext) {
+  const socket = sharedChatConnection.socketRef.current;
+
+  if (!socket || socket.readyState !== WebSocket.OPEN || !context) {
+    return;
+  }
+
+  const liveVisibilityState =
+    typeof document !== 'undefined' && document.visibilityState === 'hidden' ? 'hidden' : 'visible';
+  const livePageUrl = typeof window !== 'undefined' ? window.location.href : context.pageUrl;
+
+  socket.send(
+    JSON.stringify({
+      type: 'context:update',
+      payload: {
+        pageId: context.pageId,
+        pageTitle: context.pageTitle,
+        topMenu: context.topMenu,
+        focusedComponentId: context.focusedComponentId,
+        pageUrl: livePageUrl,
+        isStandaloneMode: context.isStandaloneMode,
+        pageVisibilityState: liveVisibilityState,
+        chatTypeId: context.chatTypeId,
+        chatTypeLabel: context.chatTypeLabel,
+        chatTypeDescription: context.chatTypeDescription,
+        chatTypeIsTemplate: context.chatTypeIsTemplate,
+      },
+    }),
+  );
+}
+
+function sendPresencePing() {
+  const socket = sharedChatConnection.socketRef.current;
+
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    return;
+  }
+
+  socket.send(
+    JSON.stringify({
+      type: 'presence:ping',
+      payload: {
+        at: Date.now(),
+      },
+    }),
+  );
+}
+
+function refreshSharedSocket() {
+  const socket = sharedChatConnection.socketRef.current;
+
+  if (socket && socket.readyState === WebSocket.CONNECTING) {
+    return;
+  }
+
+  disconnectSharedSocket();
+  connectSharedSocket();
+}
+
+function sendEventReceived(eventId: number) {
+  const socket = sharedChatConnection.socketRef.current;
+
+  if (!socket || socket.readyState !== WebSocket.OPEN || !Number.isFinite(eventId) || eventId <= 0) {
+    return;
+  }
+
+  socket.send(
+    JSON.stringify({
+      type: 'event:received',
+      payload: {
+        eventId,
+      },
+    }),
+  );
+}
+
+function stopPresenceMonitoring() {
+  if (sharedChatConnection.pingIntervalId !== null) {
+    window.clearInterval(sharedChatConnection.pingIntervalId);
+    sharedChatConnection.pingIntervalId = null;
+  }
+
+  if (sharedChatConnection.visibilityHandlerInstalled) {
+    window.removeEventListener('visibilitychange', handleVisibilityChange);
+    sharedChatConnection.visibilityHandlerInstalled = false;
+  }
+
+  if (sharedChatConnection.pageShowHandlerInstalled) {
+    window.removeEventListener('pageshow', handlePageShow);
+    sharedChatConnection.pageShowHandlerInstalled = false;
+  }
+
+  if (sharedChatConnection.focusHandlerInstalled) {
+    window.removeEventListener('focus', handleWindowFocus);
+    sharedChatConnection.focusHandlerInstalled = false;
+  }
+
+  if (sharedChatConnection.onlineHandlerInstalled) {
+    window.removeEventListener('online', handleWindowOnline);
+    sharedChatConnection.onlineHandlerInstalled = false;
+  }
+}
+
+function shouldRefreshSocketAfterResume() {
+  if (typeof document !== 'undefined' && document.visibilityState !== 'visible') {
+    return false;
+  }
+
+  const socket = sharedChatConnection.socketRef.current;
+
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    return true;
+  }
+
+  if (sharedChatConnection.lastBackgroundAt === null) {
+    return false;
+  }
+
+  return Date.now() - sharedChatConnection.lastBackgroundAt >= BACKGROUND_SOCKET_REFRESH_THRESHOLD_MS;
+}
+
+function handleVisibilityChange() {
+  if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
+    sharedChatConnection.lastBackgroundAt = Date.now();
+    sendContextUpdate(sharedChatConnection.currentContext);
+    sendPresencePing();
+    return;
+  }
+
+  if (shouldRefreshSocketAfterResume()) {
+    refreshSharedSocket();
+    return;
+  }
+
+  sendPresencePing();
+  sendContextUpdate(sharedChatConnection.currentContext);
+}
+
+function handlePageShow() {
+  if (shouldRefreshSocketAfterResume()) {
+    refreshSharedSocket();
+    return;
+  }
+
+  sendPresencePing();
+  sendContextUpdate(sharedChatConnection.currentContext);
+}
+
+function handleWindowFocus() {
+  if (shouldRefreshSocketAfterResume()) {
+    refreshSharedSocket();
+    return;
+  }
+
+  sendPresencePing();
+}
+
+function handleWindowOnline() {
+  refreshSharedSocket();
+}
+
+function startPresenceMonitoring() {
+  if (sharedChatConnection.pingSubscriberCount <= 0 || sharedChatConnection.connectionState !== 'connected') {
+    stopPresenceMonitoring();
+    return;
+  }
+
+  sharedChatConnection.lastBackgroundAt = null;
+  sendPresencePing();
+
+  if (sharedChatConnection.pingIntervalId === null) {
+    sharedChatConnection.pingIntervalId = window.setInterval(() => {
+      sendPresencePing();
+    }, PRESENCE_PING_INTERVAL_MS);
+  }
+
+  if (!sharedChatConnection.visibilityHandlerInstalled) {
+    window.addEventListener('visibilitychange', handleVisibilityChange);
+    sharedChatConnection.visibilityHandlerInstalled = true;
+  }
+
+  if (!sharedChatConnection.pageShowHandlerInstalled) {
+    window.addEventListener('pageshow', handlePageShow);
+    sharedChatConnection.pageShowHandlerInstalled = true;
+  }
+
+  if (!sharedChatConnection.focusHandlerInstalled) {
+    window.addEventListener('focus', handleWindowFocus);
+    sharedChatConnection.focusHandlerInstalled = true;
+  }
+
+  if (!sharedChatConnection.onlineHandlerInstalled) {
+    window.addEventListener('online', handleWindowOnline);
+    sharedChatConnection.onlineHandlerInstalled = true;
+  }
+}
+
+function scheduleReconnect() {
+  if (sharedChatConnection.reconnectTimerId !== null || !sharedChatConnection.sessionId) {
+    return;
+  }
+
+  sharedChatConnection.reconnectTimerId = window.setTimeout(() => {
+    sharedChatConnection.reconnectTimerId = null;
+    connectSharedSocket();
+  }, CHAT_CONNECTION.reconnectDelayMs);
+}
+
+function handleSharedDisconnect(message?: string, detail?: string) {
+  setSharedConnectionError(detail ?? '');
+  clearDisconnectUiTimer();
+
+  if (sharedChatConnection.connectionState !== 'connected') {
+    setSharedConnectionState('disconnected');
+  } else {
+    sharedChatConnection.disconnectUiTimerId = window.setTimeout(() => {
+      sharedChatConnection.disconnectUiTimerId = null;
+
+      if (sharedChatConnection.socketRef.current?.readyState === WebSocket.OPEN) {
+        return;
+      }
+
+      setSharedConnectionState('disconnected');
+    }, DISCONNECT_UI_DELAY_MS);
+  }
+
+  if (message) {
+    scheduleReconnect();
+  }
+}
+
+function disconnectSharedSocket() {
+  clearReconnectTimer();
+  clearConnectTimeout();
+  clearDisconnectUiTimer();
+  stopPresenceMonitoring();
+
+  const socket = sharedChatConnection.socketRef.current;
+  sharedChatConnection.suppressDisconnectNotification = true;
+  sharedChatConnection.socketRef.current = null;
+  socket?.close();
+}
+
+function releaseSharedConnectionConsumer() {
+  sharedChatConnection.consumerCount = Math.max(0, sharedChatConnection.consumerCount - 1);
+
+  if (sharedChatConnection.consumerCount > 0) {
+    return;
+  }
+
+  sharedChatConnection.currentContext = null;
+  sharedChatConnection.setMessages = null;
+  sharedChatConnection.onMessageEvent = undefined;
+  sharedChatConnection.onJobEvent = undefined;
+  sharedChatConnection.onRuntimeEvent = undefined;
+  sharedChatConnection.onRuntimeDetailEvent = undefined;
+  setSharedChatRuntimeSnapshot(null);
+  disconnectSharedSocket();
+  setSharedConnectionError('');
+  setSharedConnectionState('disconnected');
+}
+
+function connectSharedSocket() {
+  if (!sharedChatConnection.sessionId || !sharedChatConnection.setMessages) {
+    return;
+  }
+
+  const currentSocket = sharedChatConnection.socketRef.current;
+
+  if (currentSocket && (currentSocket.readyState === WebSocket.OPEN || currentSocket.readyState === WebSocket.CONNECTING)) {
+    return;
+  }
+
+  clearReconnectTimer();
+  clearConnectTimeout();
+  clearDisconnectUiTimer();
+
+  if (sharedChatConnection.connectionState !== 'connected') {
+    setSharedConnectionState('connecting');
+  }
+
+  sharedChatConnection.websocketUrl = resolveChatWebSocketUrl(sharedChatConnection.sessionId, sharedChatConnection.lastEventId);
+
+  let socket: WebSocket;
+
+  try {
+    socket = new WebSocket(sharedChatConnection.websocketUrl);
+  } catch {
+    handleSharedDisconnect(
+      `워크서버 WebSocket 주소가 올바르지 않습니다. 대상: ${sharedChatConnection.websocketUrl || '/ws/chat'} 자동으로 다시 연결합니다.`,
+      'WebSocket 객체를 생성하지 못했습니다. 대상 주소 형식과 환경변수를 확인해 주세요.',
+    );
+    return;
+  }
+
+  sharedChatConnection.socketRef.current = socket;
+  sharedChatConnection.suppressDisconnectNotification = false;
+  let disconnectHandled = false;
+
+  const reportDisconnect = (message?: string, closeEvent?: CloseEvent) => {
+    if (disconnectHandled) {
+      return;
+    }
+
+    disconnectHandled = true;
+
+    const wasSuppressed = sharedChatConnection.suppressDisconnectNotification;
+
+    if (sharedChatConnection.socketRef.current === socket) {
+      sharedChatConnection.socketRef.current = null;
+    }
+
+    sharedChatConnection.suppressDisconnectNotification = false;
+
+    if (wasSuppressed) {
+      setSharedConnectionError('');
+      return;
+    }
+
+    if (closeEvent?.code === 1000 && !message) {
+      setSharedConnectionError('');
+      return;
+    }
+
+    void diagnoseConnectionFailure(sharedChatConnection.websocketUrl, closeEvent).then((detail) => {
+      handleSharedDisconnect(message, detail);
+    });
+  };
+
+  sharedChatConnection.connectTimeoutId = window.setTimeout(() => {
+    if (sharedChatConnection.socketRef.current !== socket || socket.readyState === WebSocket.OPEN) {
+      return;
+    }
+
+    sharedChatConnection.socketRef.current = null;
+    socket.close();
+    reportDisconnect(
+      `워크서버 연결 시간이 초과되었습니다. 대상: ${sharedChatConnection.websocketUrl || '/ws/chat'} 자동으로 다시 연결합니다.`,
+    );
+  }, CHAT_CONNECTION.connectTimeoutMs);
+
+  socket.addEventListener('open', () => {
+    clearConnectTimeout();
+    clearDisconnectUiTimer();
+    sharedChatConnection.hasConnectedOnce = true;
+    sharedChatConnection.suppressDisconnectNotification = false;
+    setSharedConnectionState('connected');
+    setSharedConnectionError('');
+    sendContextUpdate(sharedChatConnection.currentContext);
+    startPresenceMonitoring();
+  });
+
+  socket.addEventListener('message', (event) => {
+    const setMessages = sharedChatConnection.setMessages;
+
+    if (!setMessages) {
+      return;
+    }
+
+    void handleChatServerEvent({
+      eventData: String(event.data),
+      currentPageUrl: sharedChatConnection.currentContext?.pageUrl ?? '',
+      expectedSessionId: sharedChatConnection.sessionId,
+      setMessages,
+      onMessageEvent: sharedChatConnection.onMessageEvent,
+      onJobEvent: sharedChatConnection.onJobEvent,
+      onRuntimeEvent: sharedChatConnection.onRuntimeEvent,
+      onRuntimeDetailEvent: sharedChatConnection.onRuntimeDetailEvent,
+      onActivityEvent: sharedChatConnection.onActivityEvent,
+      onEventReceived: (eventId) => {
+        sharedChatConnection.lastEventId = eventId;
+        persistLastReceivedChatEventId(sharedChatConnection.sessionId, eventId);
+        sendEventReceived(eventId);
+      },
+    });
+
+    try {
+      const parsedEvent = JSON.parse(String(event.data)) as ChatRuntimeEventEnvelope | null;
+
+      if (parsedEvent?.type === 'chat:runtime') {
+        setSharedChatRuntimeSnapshot(parsedEvent.payload);
+      }
+    } catch {
+      // ignore malformed payloads here; detailed parsing is already handled downstream
+    }
+  });
+
+  socket.addEventListener('close', (event) => {
+    clearConnectTimeout();
+    stopPresenceMonitoring();
+    reportDisconnect(
+      event.code === 1000 ? undefined : '워크서버 연결이 끊어졌습니다. 자동으로 다시 연결합니다.',
+      event,
+    );
+  });
+
+  socket.addEventListener('error', () => {
+    clearConnectTimeout();
+    stopPresenceMonitoring();
+    reportDisconnect('워크서버 WebSocket 연결에 실패했습니다. 자동으로 다시 연결합니다.');
+  });
+}
+
+type ChatRuntimeEventEnvelope = {
+  type: 'chat:runtime';
+  payload: ChatRuntimeSnapshot;
+};
+
+function ensureSharedConnection(options: UseChatConnectionOptions) {
+  const sessionChanged = sharedChatConnection.sessionId !== options.sessionId;
+
+  sharedChatConnection.currentContext = options.currentContext;
+  sharedChatConnection.setMessages = options.setMessages;
+  sharedChatConnection.onMessageEvent = options.onMessageEvent;
+  sharedChatConnection.onJobEvent = options.onJobEvent;
+  sharedChatConnection.onRuntimeEvent = options.onRuntimeEvent;
+  sharedChatConnection.onRuntimeDetailEvent = options.onRuntimeDetailEvent;
+  sharedChatConnection.onActivityEvent = options.onActivityEvent;
+
+  if (sessionChanged) {
+    sharedChatConnection.sessionId = options.sessionId;
+    sharedChatConnection.lastEventId = getLastReceivedChatEventId(options.sessionId);
+    sharedChatConnection.hasConnectedOnce = false;
+    disconnectSharedSocket();
+  }
+
+  connectSharedSocket();
+}
+
+export function useChatConnection({
+  sessionId,
+  currentContext,
+  setMessages,
+  onMessageEvent,
+  onJobEvent,
+  onRuntimeEvent,
+  onRuntimeDetailEvent,
+  onActivityEvent,
+}: UseChatConnectionOptions) {
+  const [snapshot, setSnapshot] = useState<SharedChatConnectionState>(() => getSnapshot());
+
+  useEffect(() => {
+    sharedChatConnection.consumerCount += 1;
+
+    return () => {
+      releaseSharedConnectionConsumer();
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleSnapshotChange = () => {
+      setSnapshot(getSnapshot());
+    };
+
+    const unsubscribe = subscribeChatConnection(handleSnapshotChange);
+    ensureSharedConnection({
+      sessionId,
+      currentContext,
+      setMessages,
+      onMessageEvent,
+      onJobEvent,
+      onRuntimeEvent,
+      onRuntimeDetailEvent,
+      onActivityEvent,
+    });
+    handleSnapshotChange();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [sessionId, setMessages]);
+
+  useEffect(() => {
+    sharedChatConnection.currentContext = currentContext;
+    sharedChatConnection.setMessages = setMessages;
+    sharedChatConnection.onMessageEvent = onMessageEvent;
+    sharedChatConnection.onJobEvent = onJobEvent;
+    sharedChatConnection.onRuntimeEvent = onRuntimeEvent;
+    sharedChatConnection.onRuntimeDetailEvent = onRuntimeDetailEvent;
+    sharedChatConnection.onActivityEvent = onActivityEvent;
+    sendContextUpdate(currentContext);
+  }, [
+    currentContext,
+    onMessageEvent,
+    onJobEvent,
+    onRuntimeEvent,
+    onRuntimeDetailEvent,
+    onActivityEvent,
+    setMessages,
+  ]);
+
+  useEffect(() => {
+    sharedChatConnection.pingSubscriberCount += 1;
+    startPresenceMonitoring();
+
+    return () => {
+      sharedChatConnection.pingSubscriberCount = Math.max(0, sharedChatConnection.pingSubscriberCount - 1);
+
+      if (sharedChatConnection.pingSubscriberCount === 0) {
+        stopPresenceMonitoring();
+      }
+    };
+  }, []);
+
+  return {
+    connectionState: snapshot.connectionState,
+    connectionErrorDetail: snapshot.connectionErrorDetail,
+    socketRef: sharedChatConnection.socketRef,
+  };
+}
diff --git a/src/app/main/mainChatPanel/useErrorLogs.ts b/src/app/main/mainChatPanel/useErrorLogs.ts
new file mode 100755
index 0000000..9c520ca
--- /dev/null
+++ b/src/app/main/mainChatPanel/useErrorLogs.ts
@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fetchErrorLogs } from '../errorLogApi';
+import { buildErrorReferenceSummary, buildErrorSourceSummary, getDefaultErrorResource } from './errorLogUtils';
+import type { ChatPanelView } from './types';
+
+type UseErrorLogsOptions = {
+  activeView: ChatPanelView;
+  hasAccess: boolean;
+};
+
+export function useErrorLogs({ activeView, hasAccess }: UseErrorLogsOptions) {
+  const [errorLogs, setErrorLogs] = useState<Awaited<ReturnType<typeof fetchErrorLogs>>>([]);
+  const [selectedErrorLogId, setSelectedErrorLogId] = useState<number | null>(null);
+  const [isLoadingErrorLogs, setIsLoadingErrorLogs] = useState(false);
+  const [errorLogLoadError, setErrorLogLoadError] = useState('');
+  const [activeErrorResourceUrl, setActiveErrorResourceUrl] = useState('');
+  const [isErrorDetailExpanded, setIsErrorDetailExpanded] = useState(false);
+
+  const loadErrorLogs = async () => {
+    if (!hasAccess || isLoadingErrorLogs) {
+      return;
+    }
+
+    setIsLoadingErrorLogs(true);
+    setErrorLogLoadError('');
+
+    try {
+      const items = await fetchErrorLogs(50);
+      setErrorLogs(items);
+      setSelectedErrorLogId((current) => current ?? items[0]?.id ?? null);
+    } catch (error) {
+      setErrorLogLoadError(error instanceof Error ? error.message : '에러 로그를 불러오지 못했습니다.');
+    } finally {
+      setIsLoadingErrorLogs(false);
+    }
+  };
+
+  useEffect(() => {
+    if (activeView !== 'errors' || !hasAccess) {
+      return;
+    }
+
+    void loadErrorLogs();
+  }, [activeView, hasAccess]);
+
+  const selectedErrorLog = useMemo(
+    () => errorLogs.find((item) => item.id === selectedErrorLogId) ?? errorLogs[0] ?? null,
+    [errorLogs, selectedErrorLogId],
+  );
+  const selectedErrorLogReferenceSummary = useMemo(
+    () => (selectedErrorLog ? buildErrorReferenceSummary(selectedErrorLog) : null),
+    [selectedErrorLog],
+  );
+  const activeErrorResource = useMemo(
+    () =>
+      selectedErrorLogReferenceSummary?.resources.find((resource) => resource.url === activeErrorResourceUrl)
+      ?? getDefaultErrorResource(selectedErrorLogReferenceSummary?.resources ?? []),
+    [activeErrorResourceUrl, selectedErrorLogReferenceSummary],
+  );
+  const errorSourceSummary = useMemo(() => buildErrorSourceSummary(errorLogs), [errorLogs]);
+
+  useEffect(() => {
+    const nextUrl = getDefaultErrorResource(selectedErrorLogReferenceSummary?.resources ?? [])?.url ?? '';
+    setActiveErrorResourceUrl(nextUrl);
+  }, [selectedErrorLog?.id, selectedErrorLogReferenceSummary]);
+
+  return {
+    errorLogs,
+    selectedErrorLog,
+    selectedErrorLogId,
+    selectedErrorLogReferenceSummary,
+    activeErrorResource,
+    errorSourceSummary,
+    isLoadingErrorLogs,
+    errorLogLoadError,
+    activeErrorResourceUrl,
+    isErrorDetailExpanded,
+    setSelectedErrorLogId,
+    setActiveErrorResourceUrl,
+    setIsErrorDetailExpanded,
+    loadErrorLogs,
+  };
+}
diff --git a/src/app/main/mainContent/windowLayout.ts b/src/app/main/mainContent/windowLayout.ts
new file mode 100755
index 0000000..8e8653b
--- /dev/null
+++ b/src/app/main/mainContent/windowLayout.ts
@@ -0,0 +1,125 @@
+import type { WindowFrame } from '../../../components/window';
+import type { PlanFilterStatus } from '../../../features/planBoard';
+
+const WINDOW_LAYOUT_GAP = 18;
+const MIN_WINDOW_WIDTH = 360;
+const MIN_WINDOW_HEIGHT = 220;
+
+export type WindowStageSize = {
+  width: number;
+  height: number;
+};
+
+export type WindowLayoutSelection = {
+  instanceId: string;
+};
+
+export const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];
+
+export function getPlanStatusFromWindowSelection(selectionId: string): PlanFilterStatus | null {
+  if (selectionId === 'page:plans:all') {
+    return 'all';
+  }
+
+  if (selectionId === 'plan-status:in-progress') {
+    return 'in-progress';
+  }
+
+  if (selectionId === 'plan-status:error') {
+    return 'error';
+  }
+
+  if (selectionId === 'plan-status:done') {
+    return 'done';
+  }
+
+  return null;
+}
+
+export function getDefaultWindowFrame(selectionId: string, index: number): WindowFrame {
+  const isSampleSelection = selectionId.startsWith('component:') || selectionId.startsWith('widget:');
+
+  // Page windows need enough room for nested layouts, while sample windows start compact.
+  if (selectionId.startsWith('page:')) {
+    return {
+      x: 20 + (index % 4) * 24,
+      y: 16 + (index % 4) * 24,
+      width: 960,
+      height: 720,
+    };
+  }
+
+  if (isSampleSelection) {
+    return {
+      x: 48 + (index % 5) * 24,
+      y: 36 + (index % 5) * 24,
+      width: 480,
+      height: 360,
+    };
+  }
+
+  return {
+    x: 36 + (index % 5) * 28,
+    y: 24 + (index % 5) * 28,
+    width: 720,
+    height: 520,
+  };
+}
+
+export function buildCascadeWindowFrames(
+  selections: WindowLayoutSelection[],
+  stageSize: WindowStageSize,
+): Record<string, WindowFrame> {
+  // Keep the first window prominent and offset the rest without pushing them outside the stage.
+  return Object.fromEntries(
+    selections.map((selection, index) => {
+      const width = Math.min(stageSize.width - 64, index === 0 ? 920 : 680);
+      const height = Math.min(stageSize.height - 64, index === 0 ? 680 : 460);
+      const x = Math.min(28 + (index % 6) * 36, Math.max(0, stageSize.width - width));
+      const y = Math.min(24 + (index % 6) * 32, Math.max(0, stageSize.height - height));
+
+      return [
+        selection.instanceId,
+        {
+          x,
+          y,
+          width: Math.max(MIN_WINDOW_WIDTH, width),
+          height: Math.max(MIN_WINDOW_HEIGHT, height),
+        },
+      ];
+    }),
+  );
+}
+
+export function buildGridWindowFrames(
+  selections: WindowLayoutSelection[],
+  stageSize: WindowStageSize,
+): Record<string, WindowFrame> {
+  if (selections.length === 0) {
+    return {};
+  }
+
+  // Square-ish grids preserve usable window sizes across mixed page and sample selections.
+  const count = selections.length;
+  const columns = Math.max(1, Math.ceil(Math.sqrt(count)));
+  const rows = Math.max(1, Math.ceil(count / columns));
+  const cellWidth = (stageSize.width - WINDOW_LAYOUT_GAP * (columns + 1)) / columns;
+  const cellHeight = (stageSize.height - WINDOW_LAYOUT_GAP * (rows + 1)) / rows;
+
+  return Object.fromEntries(
+    selections.map((selection, index) => {
+      const column = index % columns;
+      const row = Math.floor(index / columns);
+
+      return [
+        selection.instanceId,
+        {
+          x: Math.max(0, WINDOW_LAYOUT_GAP + column * (cellWidth + WINDOW_LAYOUT_GAP)),
+          y: Math.max(0, WINDOW_LAYOUT_GAP + row * (cellHeight + WINDOW_LAYOUT_GAP)),
+          width: Math.max(MIN_WINDOW_WIDTH, cellWidth),
+          height: Math.max(MIN_WINDOW_HEIGHT, cellHeight),
+        },
+      ];
+    }),
+  );
+}
diff --git a/src/app/main/mainView/constants.tsx b/src/app/main/mainView/constants.tsx
new file mode 100755
index 0000000..af84966
--- /dev/null
+++ b/src/app/main/mainView/constants.tsx
@@ -0,0 +1,114 @@
+import type { PlanFilterStatus, PlanQuickFilter } from '../../../features/planBoard';
+import type { PlanSidebarKey, PlaySidebarKey } from '../types';
+
+export const PLAN_GROUP_LABEL = '작업';
+
+export const PLAN_FILTER_LABELS: Record<PlanFilterStatus, string> = {
+  all: '자동화 현황',
+  'in-progress': '실행 중 (0)',
+  done: '완료',
+  error: '실패 (0)',
+};
+
+export const DOCS_DEFAULT_FOLDER = 'worklogs';
+
+export const DOCS_FOLDER_LABELS: Record<string, string> = {
+  worklogs: '작업일지',
+  features: '기능문서',
+  components: '컴포넌트문서',
+  templates: '문서템플릿',
+};
+
+export const PLAN_SIDEBAR_LABELS: Record<PlanSidebarKey, string> = {
+  ...PLAN_FILTER_LABELS,
+  release: 'release (0)',
+  'release-review': 'release 검수',
+  board: '작업 요청',
+  charts: '차트',
+  schedule: '스케줄',
+  history: '이력',
+  'server-command': 'Command',
+};
+
+export const PLAN_BASE_OPEN_KEYS = ['plan-group', 'server-group', 'codex-live-group', 'app-log-group'] as const;
+export const PLAY_BASE_OPEN_KEYS = ['play-group', 'play-layout-group'] as const;
+export const PLAY_LAYOUT_RECORD_PREFIX = 'layout-record:' as const;
+export const PLAN_MENU_STATUS_ORDER: PlanFilterStatus[] = ['all', 'in-progress', 'error', 'done'];
+
+export const PLAY_SIDEBAR_LABELS: Record<Extract<PlaySidebarKey, 'layout'>, string> = {
+  layout: 'Layout Editor',
+};
+
+export const PLAN_MENU_ANCHOR_IDS: Partial<Record<PlanSidebarKey, string>> = {
+  all: 'plan-menu-all',
+  'in-progress': 'plan-menu-in-progress',
+  release: 'plan-menu-release',
+  'release-review': 'plan-menu-release-review',
+  done: 'plan-menu-done',
+  error: 'plan-menu-error',
+  board: 'plan-menu-board',
+  charts: 'plan-menu-charts',
+  schedule: 'plan-menu-schedule',
+  history: 'plan-menu-history',
+  'server-command': 'plan-menu-server-command',
+};
+
+export function resolvePlanOpenKeys() {
+  return [...PLAN_BASE_OPEN_KEYS];
+}
+
+export function resolvePlayOpenKeys() {
+  return [...PLAY_BASE_OPEN_KEYS];
+}
+
+export function resolveSavedLayoutMenuKey(layoutId: string): PlaySidebarKey {
+  return `${PLAY_LAYOUT_RECORD_PREFIX}${layoutId}`;
+}
+
+export function resolveSavedLayoutIdFromMenuKey(key: PlaySidebarKey) {
+  return key.startsWith(PLAY_LAYOUT_RECORD_PREFIX) ? key.slice(PLAY_LAYOUT_RECORD_PREFIX.length) : null;
+}
+
+export function resolvePlaySidebarLabel(selectedPlayMenu: PlaySidebarKey, savedLayouts: Array<{ id: string; name: string }>) {
+  const savedLayoutId = resolveSavedLayoutIdFromMenuKey(selectedPlayMenu);
+
+  if (selectedPlayMenu === 'layout') {
+    return PLAY_SIDEBAR_LABELS[selectedPlayMenu];
+  }
+
+  return savedLayouts.find((record) => record.id === savedLayoutId)?.name ?? 'Saved Layout';
+}
+
+export function renderPlanMenuLabel(menu: PlanSidebarKey, label: string) {
+  const anchorId = PLAN_MENU_ANCHOR_IDS[menu];
+
+  if (!anchorId) {
+    return label;
+  }
+
+  return <span id={anchorId}>{label}</span>;
+}
+
+export function resolvePlanQuickFilterMenu(filter: PlanQuickFilter): Extract<PlanSidebarKey, 'in-progress' | 'release' | 'error'> {
+  if (filter === 'working') {
+    return 'in-progress';
+  }
+
+  return filter === 'release-pending-main' ? 'release' : 'error';
+}
+
+export function resolvePlanMenuState(menu: PlanSidebarKey) {
+  if (menu === 'release') {
+    return {
+      quickFilter: 'release-pending-main' as PlanQuickFilter,
+    };
+  }
+
+  return {
+    quickFilter: null,
+  };
+}
+
+export function getDocsSectionLabel(section: string) {
+  return DOCS_FOLDER_LABELS[section] ?? section;
+}
diff --git a/src/app/main/mainView/index.ts b/src/app/main/mainView/index.ts
new file mode 100755
index 0000000..0323ed2
--- /dev/null
+++ b/src/app/main/mainView/index.ts
@@ -0,0 +1,5 @@
+export * from './constants';
+export * from './navigation';
+export * from './searchOptions';
+export * from './useMainViewData';
+export * from './utils';
diff --git a/src/app/main/mainView/navigation.ts b/src/app/main/mainView/navigation.ts
new file mode 100755
index 0000000..9acfd24
--- /dev/null
+++ b/src/app/main/mainView/navigation.ts
@@ -0,0 +1,54 @@
+import { PLAN_FILTER_STATUSES, type PlanFilterStatus } from '../../../features/planBoard';
+import type { PlanSidebarKey, PlaySidebarKey, TopMenuKey } from '../types';
+import { resolveSavedLayoutMenuKey } from './constants';
+
+export type MainViewInitialNavigation = {
+  activeTopMenu: TopMenuKey;
+  selectedPlanMenu: PlanSidebarKey;
+  selectedPlayMenu: PlaySidebarKey;
+  initialSelectedPlanId: number | null;
+  initialSelectedWorkId: string | null;
+};
+
+export function resolveInitialNavigation(): MainViewInitialNavigation {
+  if (typeof window === 'undefined') {
+    return {
+      activeTopMenu: 'plans',
+      selectedPlanMenu: 'all',
+      selectedPlayMenu: 'layout',
+      initialSelectedPlanId: null,
+      initialSelectedWorkId: null,
+    };
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  const topMenuParam = params.get('topMenu');
+  const requestedTopMenu: TopMenuKey =
+    topMenuParam === 'docs' || topMenuParam === 'apis' || topMenuParam === 'plans' || topMenuParam === 'chat' || topMenuParam === 'play'
+      ? topMenuParam
+      : 'plans';
+  const planFilterParam = params.get('planFilter');
+  const selectedPlanMenu =
+    planFilterParam === 'release'
+      ? 'release'
+      : planFilterParam && PLAN_FILTER_STATUSES.includes(planFilterParam as PlanFilterStatus)
+        ? (planFilterParam as PlanFilterStatus)
+        : 'all';
+  const planIdParam = params.get('planId');
+  const parsedPlanId = planIdParam ? Number(planIdParam) : null;
+  const playSectionParam = params.get('playSection');
+  const playLayoutIdParam = params.get('playLayoutId');
+
+  return {
+    activeTopMenu: requestedTopMenu,
+    selectedPlanMenu,
+    selectedPlayMenu:
+      playSectionParam === 'layout'
+        ? 'layout'
+        : playSectionParam === 'layout-record' && playLayoutIdParam
+          ? resolveSavedLayoutMenuKey(playLayoutIdParam)
+          : 'layout',
+    initialSelectedPlanId: Number.isFinite(parsedPlanId) ? parsedPlanId : null,
+    initialSelectedWorkId: params.get('workId'),
+  };
+}
diff --git a/src/app/main/mainView/searchOptions.ts b/src/app/main/mainView/searchOptions.ts
new file mode 100755
index 0000000..6209581
--- /dev/null
+++ b/src/app/main/mainView/searchOptions.ts
@@ -0,0 +1,226 @@
+import type { SearchKeywordOption } from '../../../components/search';
+import type { LoadedSampleEntry } from '../../../samples/registry';
+import type { ChatSidebarKey, PlanSidebarKey, TopMenuKey } from '../types';
+import { compactKeywords, scrollToElement } from './utils';
+import { PLAN_FILTER_LABELS, PLAN_GROUP_LABEL, PLAN_SIDEBAR_LABELS } from './constants';
+
+type SearchOptionBuilderParams = {
+  componentSamples: LoadedSampleEntry[];
+  widgetSamples: LoadedSampleEntry[];
+  docFolders: string[];
+  docsDocuments: Array<{
+    id: string;
+    title: string;
+    folder: string;
+    preview?: string;
+  }>;
+  hasAccess: boolean;
+  setActiveTopMenu: (menu: TopMenuKey) => void;
+  setSelectedApiMenu: (key: string) => void;
+  setSelectedDocsMenu: (key: string) => void;
+  setSelectedPlanMenu: (key: PlanSidebarKey) => void;
+  setSelectedChatMenu: (key: ChatSidebarKey) => void;
+  setFocusedComponentId: (value: string | null) => void;
+};
+
+export function buildMainViewSearchOptions({
+  componentSamples,
+  widgetSamples,
+  docFolders,
+  docsDocuments,
+  hasAccess,
+  setActiveTopMenu,
+  setSelectedApiMenu,
+  setSelectedDocsMenu,
+  setSelectedPlanMenu,
+  setSelectedChatMenu,
+  setFocusedComponentId,
+}: SearchOptionBuilderParams): SearchKeywordOption[] {
+  const onSelectWindow = () => {
+    setFocusedComponentId(null);
+  };
+
+  return [
+    {
+      id: 'page:apis:components',
+      label: 'APIs / Components',
+      group: 'Page',
+      keywords: ['api', 'components', '컴포넌트'],
+      onSelect: () => {
+        setActiveTopMenu('apis');
+        setSelectedApiMenu('components');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:apis:widgets',
+      label: 'APIs / Widgets',
+      group: 'Page',
+      keywords: ['api', 'widgets', '위젯'],
+      onSelect: () => {
+        setActiveTopMenu('apis');
+        setSelectedApiMenu('widgets');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:plans:all',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_FILTER_LABELS.all}`,
+      group: 'Page',
+      keywords: ['plans', 'automation', '자동화', '실행', '현황', 'worker'],
+      onSelect: () => {
+        setActiveTopMenu('plans');
+        setSelectedPlanMenu('all');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:plans:board',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS.board}`,
+      group: 'Page',
+      keywords: ['plans', 'plan', '플랜', '게시판', 'board', '요청', '작업 요청', '접수', '계획'],
+      onSelect: () => {
+        setActiveTopMenu('plans');
+        setSelectedPlanMenu('board');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:plans:release-review',
+      label: `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS['release-review']}`,
+      group: 'Page',
+      keywords: ['release', 'review', '검수', '릴리즈', 'release 검수'],
+      onSelect: () => {
+        setActiveTopMenu('plans');
+        setSelectedPlanMenu('release-review');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    ...(hasAccess
+      ? [
+          {
+            id: 'page:plans:server-command',
+            label: `Servers / ${PLAN_SIDEBAR_LABELS['server-command']}`,
+            group: 'Page',
+            keywords: ['plans', 'plan', 'server', 'command', 'server command', '서버', '명령', '재기동'],
+            onSelect: () => {
+              setActiveTopMenu('plans');
+              setSelectedPlanMenu('server-command');
+              setFocusedComponentId(null);
+            },
+            onSelectWindow,
+          } satisfies SearchKeywordOption,
+        ]
+      : []),
+    {
+      id: 'page:chat:live',
+      label: 'Codex Live / Codex Live',
+      group: 'Page',
+      keywords: ['codex live', 'chat', 'codex', '채팅', '대화', '메시지'],
+      onSelect: () => {
+        setActiveTopMenu('chat');
+        setSelectedChatMenu('live');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    {
+      id: 'page:chat:errors',
+      label: '앱로그 / 에러 로그',
+      group: 'Page',
+      keywords: ['app log', 'applog', '앱로그', 'error', 'errors', '에러', '로그'],
+      onSelect: () => {
+        setActiveTopMenu('chat');
+        setSelectedChatMenu('errors');
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    },
+    ...(hasAccess
+      ? [
+          {
+            id: 'page:chat:manage',
+            label: '채팅 관리 / 유형 권한 관리',
+            group: 'Page',
+            keywords: ['chat manage', 'chat type', 'permission', '권한', '채팅 유형', '채팅 관리'],
+            onSelect: () => {
+              setActiveTopMenu('chat');
+              setSelectedChatMenu('manage');
+              setFocusedComponentId(null);
+            },
+            onSelectWindow,
+          } satisfies SearchKeywordOption,
+        ]
+      : []),
+    ...docFolders.map((folder) => ({
+      id: `docs-folder:${folder}`,
+      label: `Docs / ${folder}`,
+      group: 'Docs Folder',
+      keywords: [folder, 'docs', '문서'],
+      onSelect: () => {
+        setActiveTopMenu('docs');
+        setSelectedDocsMenu(folder);
+        setFocusedComponentId(null);
+      },
+      onSelectWindow,
+    })),
+    ...docsDocuments.map((document) => ({
+      id: `doc:${document.id}`,
+      label: document.title,
+      group: `Docs / ${document.folder}`,
+      keywords: [document.folder, document.id, document.title],
+      description: document.preview,
+      onSelect: () => {
+        setActiveTopMenu('docs');
+        setSelectedDocsMenu(document.folder);
+        setFocusedComponentId(`doc:${document.id}`);
+        scrollToElement(`document-preview-${document.id}`);
+      },
+      onSelectWindow,
+    })),
+    ...componentSamples.map((entry) => ({
+      id: `component:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+      label: entry.sampleMeta.title,
+      group: 'Component',
+      keywords: compactKeywords([
+        entry.sampleMeta.componentId,
+        entry.sampleMeta.id,
+        entry.sampleMeta.category,
+        entry.sampleMeta.kind,
+        entry.sampleMeta.variantLabel ?? '',
+      ]),
+      description: entry.sampleMeta.description,
+      onSelect: () => {
+        setActiveTopMenu('apis');
+        setSelectedApiMenu('components');
+        setFocusedComponentId(`component:${entry.sampleMeta.componentId}`);
+        scrollToElement(`component-sample-${entry.sampleMeta.componentId}`);
+      },
+      onSelectWindow,
+    })),
+    ...widgetSamples.map((entry) => ({
+      id: `widget:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+      label: entry.sampleMeta.title,
+      group: 'Widget',
+      keywords: compactKeywords([
+        entry.sampleMeta.componentId,
+        entry.sampleMeta.id,
+        entry.sampleMeta.category,
+        entry.sampleMeta.kind,
+        entry.sampleMeta.variantLabel ?? '',
+      ]),
+      description: entry.sampleMeta.description,
+      onSelect: () => {
+        setActiveTopMenu('apis');
+        setSelectedApiMenu('widgets');
+        setFocusedComponentId(`widget:${entry.sampleMeta.componentId}`);
+      },
+      onSelectWindow,
+    })),
+  ];
+}
diff --git a/src/app/main/mainView/useMainViewData.ts b/src/app/main/mainView/useMainViewData.ts
new file mode 100755
index 0000000..6de003d
--- /dev/null
+++ b/src/app/main/mainView/useMainViewData.ts
@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useState } from 'react';
+import { resolveMarkdownDocuments } from '../../../components/markdownPreview';
+import { resolveSampleEntries, type LoadedSampleEntry } from '../../../samples/registry';
+import { listSavedLayouts, type SavedLayoutRecord } from '../../../views/play/layoutStorage';
+import { docsMarkdownEntries } from '../../manifests/docs.manifest';
+import { componentSampleEntries, widgetSampleEntries } from '../../manifests/samples.manifest';
+import { DOCS_DEFAULT_FOLDER } from './constants';
+
+export function useMainViewData() {
+  const [componentSamples, setComponentSamples] = useState<LoadedSampleEntry[]>([]);
+  const [widgetSamples, setWidgetSamples] = useState<LoadedSampleEntry[]>([]);
+  const [docsDocuments, setDocsDocuments] = useState<Awaited<ReturnType<typeof resolveMarkdownDocuments>>>([]);
+  const [savedLayouts, setSavedLayouts] = useState<SavedLayoutRecord[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void resolveMarkdownDocuments(docsMarkdownEntries, '/docs/').then((documents) => {
+      if (mounted) {
+        setDocsDocuments(documents);
+      }
+    });
+
+    void resolveSampleEntries(componentSampleEntries, '/components/').then((loadedEntries) => {
+      if (mounted) {
+        setComponentSamples(loadedEntries);
+      }
+    });
+
+    void resolveSampleEntries(widgetSampleEntries, '/widgets/').then((loadedEntries) => {
+      if (mounted) {
+        setWidgetSamples(loadedEntries);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void listSavedLayouts()
+      .then((layouts) => {
+        if (mounted) {
+          setSavedLayouts(layouts);
+        }
+      })
+      .catch(() => {
+        if (mounted) {
+          setSavedLayouts([]);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const docFolders = useMemo(
+    () =>
+      Array.from(new Set(docsDocuments.map((document) => document.folder))).sort((left, right) => {
+        if (left === DOCS_DEFAULT_FOLDER) {
+          return -1;
+        }
+
+        if (right === DOCS_DEFAULT_FOLDER) {
+          return 1;
+        }
+
+        return left.localeCompare(right);
+      }),
+    [docsDocuments],
+  );
+
+  return {
+    componentSamples,
+    widgetSamples,
+    docsDocuments,
+    savedLayouts,
+    setSavedLayouts,
+    docFolders,
+  };
+}
diff --git a/src/app/main/mainView/utils.ts b/src/app/main/mainView/utils.ts
new file mode 100755
index 0000000..af42c18
--- /dev/null
+++ b/src/app/main/mainView/utils.ts
@@ -0,0 +1,60 @@
+export function isTypingTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  return Boolean(target.closest('input, textarea, select, [contenteditable="true"], .ant-input, .ant-select'));
+}
+
+export function matchesShortcut(event: KeyboardEvent, shortcut: string) {
+  const tokens = shortcut
+    .split('+')
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean);
+
+  if (tokens.length === 0) {
+    return false;
+  }
+
+  const expectsCtrl = tokens.includes('ctrl') || tokens.includes('control');
+  const expectsMeta = tokens.includes('meta') || tokens.includes('cmd') || tokens.includes('command');
+  const expectsShift = tokens.includes('shift');
+  const expectsAlt = tokens.includes('alt') || tokens.includes('option');
+  const expectsMod = tokens.includes('mod');
+  const keyToken = tokens.find((token) => !['ctrl', 'control', 'meta', 'cmd', 'command', 'shift', 'alt', 'option', 'mod'].includes(token));
+
+  if (event.ctrlKey !== expectsCtrl && !(expectsMod && event.ctrlKey && !event.metaKey)) {
+    return false;
+  }
+
+  if (event.metaKey !== expectsMeta && !(expectsMod && event.metaKey && !event.ctrlKey)) {
+    return false;
+  }
+
+  if (event.shiftKey !== expectsShift || event.altKey !== expectsAlt) {
+    return false;
+  }
+
+  if (!expectsCtrl && !expectsMeta && !expectsMod && (event.ctrlKey || event.metaKey)) {
+    return false;
+  }
+
+  if (!keyToken) {
+    return expectsCtrl || expectsMeta || expectsMod || expectsShift || expectsAlt;
+  }
+
+  return event.key.toLowerCase() === keyToken;
+}
+
+export function scrollToElement(elementId: string) {
+  window.setTimeout(() => {
+    document.getElementById(elementId)?.scrollIntoView({
+      block: 'start',
+      behavior: 'smooth',
+    });
+  }, 80);
+}
+
+export function compactKeywords(values: Array<string | undefined>) {
+  return values.filter((value): value is string => Boolean(value));
+}
diff --git a/src/app/main/notificationApi.ts b/src/app/main/notificationApi.ts
new file mode 100755
index 0000000..7be4e19
--- /dev/null
+++ b/src/app/main/notificationApi.ts
@@ -0,0 +1,813 @@
+import { appendClientIdHeader } from './clientIdentity';
+
+function resolveNotificationApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+const NOTIFICATION_API_BASE_URL = resolveNotificationApiBaseUrl();
+const NOTIFICATION_API_REQUEST_TIMEOUT_MS = 8000;
+const NOTIFICATION_MESSAGES_CACHE_WINDOW_MS = 1500;
+type NotificationMessagesResponse = {
+  ok: boolean;
+  items: NotificationMessageItem[];
+  unreadCount: number;
+};
+
+const notificationMessagesCache = new Map<
+  string,
+  {
+    fetchedAt: number;
+    value: NotificationMessagesResponse | null;
+    promise: Promise<NotificationMessagesResponse> | null;
+  }
+>();
+
+function resolveNotificationApiFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const NOTIFICATION_API_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && NOTIFICATION_API_BASE_URL === '/api'
+    ? resolveNotificationApiFallbackBaseUrl()
+    : null;
+
+class NotificationApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'NotificationApiError';
+    this.status = status;
+  }
+}
+
+export type WebPushSubscriptionPayload = {
+  endpoint: string;
+  expirationTime?: number | null;
+  keys: {
+    p256dh: string;
+    auth: string;
+  };
+};
+
+export type ClientNotificationPayload = {
+  title: string;
+  body: string;
+  data?: Record<string, string>;
+  threadId?: string;
+};
+
+export type ClientNotificationSendResult = {
+  ok: boolean;
+  ios: {
+    ok: boolean;
+    skipped: boolean;
+    reason?: string;
+    sentCount: number;
+    failedCount: number;
+  };
+  web: {
+    ok: boolean;
+    skipped: boolean;
+    reason?: string;
+    sentCount: number;
+    failedCount: number;
+  };
+};
+
+export type PwaNotificationTokenPayload = {
+  token: string;
+  deviceId?: string;
+};
+
+export type NotificationMessagePriority = 'low' | 'normal' | 'high' | 'urgent';
+export type NotificationMessageListStatus = 'all' | 'unread';
+export const NOTIFICATION_MESSAGES_UPDATED_EVENT = 'work-server.notification-messages-updated';
+
+export type NotificationMessageItem = {
+  id: number;
+  title: string;
+  body: string;
+  preview: string;
+  category: string;
+  source: string;
+  priority: NotificationMessagePriority;
+  read: boolean;
+  readAt: string | null;
+  metadata: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type CreateNotificationMessagePayload = {
+  title: string;
+  body: string;
+  category?: string;
+  source?: string;
+  priority?: NotificationMessagePriority;
+  metadata?: Record<string, unknown>;
+};
+
+type NotificationMessageRow = {
+  id: number | string;
+  title: string;
+  body: string;
+  category: string;
+  source: string;
+  priority: NotificationMessagePriority | string;
+  is_read: boolean;
+  read_at: string | null;
+  metadata_json: Record<string, unknown> | string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+const NOTIFICATION_MESSAGE_TABLE = 'notification_messages';
+
+let notificationMessageTableSetupPromise: Promise<void> | null = null;
+
+function emitNotificationMessagesUpdated() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.dispatchEvent(new CustomEvent(NOTIFICATION_MESSAGES_UPDATED_EVENT));
+}
+
+function createNotificationPreview(body: string) {
+  const normalized = body
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/!\[[^\]]*\]\([^)]+\)/g, ' ')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1')
+    .replace(/[#>*_`~-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return normalized.length > 140 ? `${normalized.slice(0, 137).trimEnd()}...` : normalized;
+}
+
+function mapNotificationMessageRow(row: NotificationMessageRow): NotificationMessageItem {
+  const body = String(row.body ?? '');
+  let metadata: Record<string, unknown> = {};
+
+  if (typeof row.metadata_json === 'string') {
+    try {
+      const parsed = JSON.parse(row.metadata_json) as Record<string, unknown>;
+      metadata = parsed && typeof parsed === 'object' ? parsed : {};
+    } catch {
+      metadata = {};
+    }
+  } else if (row.metadata_json && typeof row.metadata_json === 'object') {
+    metadata = row.metadata_json;
+  }
+
+  const metadataPreview =
+    typeof metadata.previewText === 'string'
+      ? metadata.previewText
+      : typeof metadata.listPreviewText === 'string'
+        ? metadata.listPreviewText
+        : '';
+
+  return {
+    id: Number(row.id ?? 0),
+    title: String(row.title ?? ''),
+    body,
+    preview: createNotificationPreview(metadataPreview || body),
+    category: String(row.category ?? 'general'),
+    source: String(row.source ?? 'system'),
+    priority:
+      row.priority === 'low' || row.priority === 'high' || row.priority === 'urgent' ? row.priority : 'normal',
+    read: Boolean(row.is_read),
+    readAt: row.read_at ?? null,
+    metadata,
+    createdAt: String(row.created_at ?? ''),
+    updatedAt: String(row.updated_at ?? ''),
+  };
+}
+
+async function ensureNotificationMessageTableViaCrud() {
+  if (!notificationMessageTableSetupPromise) {
+    notificationMessageTableSetupPromise = (async () => {
+      const tables = await request<{ items: Array<{ table_name: string }> }>('/schema/tables');
+      const hasTable = tables.items.some((item) => item.table_name === NOTIFICATION_MESSAGE_TABLE);
+
+      if (hasTable) {
+        return;
+      }
+
+      await request('/ddl/raw', {
+        method: 'POST',
+        body: JSON.stringify({
+          sql: `
+            create table if not exists ${NOTIFICATION_MESSAGE_TABLE} (
+              id integer generated by default as identity primary key,
+              title varchar(200) not null,
+              body text not null,
+              category varchar(60) not null default 'general',
+              source varchar(80) not null default 'system',
+              priority varchar(20) not null default 'normal',
+              is_read boolean not null default false,
+              read_at timestamptz null,
+              metadata_json jsonb not null default '{}'::jsonb,
+              created_at timestamptz not null default now(),
+              updated_at timestamptz not null default now()
+            );
+          `,
+        }),
+      });
+    })().catch((error) => {
+      notificationMessageTableSetupPromise = null;
+      throw error;
+    });
+  }
+
+  return notificationMessageTableSetupPromise;
+}
+
+async function fetchNotificationMessagesViaCrud(params?: {
+  status?: NotificationMessageListStatus;
+  limit?: number;
+}) {
+  await ensureNotificationMessageTableViaCrud();
+
+  const limit = typeof params?.limit === 'number' ? Math.min(100, Math.max(1, Math.round(params.limit))) : 20;
+  const where =
+    params?.status === 'unread'
+      ? [
+          {
+            field: 'is_read',
+            operator: 'eq' as const,
+            value: false,
+          },
+        ]
+      : [];
+
+  const [itemsResponse, unreadCountResponse] = await Promise.all([
+    request<{
+      ok: boolean;
+      rows: NotificationMessageRow[];
+    }>(`/crud/${NOTIFICATION_MESSAGE_TABLE}/select`, {
+      method: 'POST',
+      body: JSON.stringify({
+        where,
+        orderBy: [
+          { field: 'is_read', direction: 'asc' },
+          { field: 'created_at', direction: 'desc' },
+          { field: 'id', direction: 'desc' },
+        ],
+        limit,
+      }),
+    }),
+    request<{
+      result?: {
+        rows?: Array<{ count?: string | number }>;
+      };
+    }>('/ddl/raw', {
+      method: 'POST',
+      body: JSON.stringify({
+        sql: `select count(*)::int as count from ${NOTIFICATION_MESSAGE_TABLE} where is_read = false;`,
+      }),
+    }),
+  ]);
+
+  return {
+    ok: true,
+    items: itemsResponse.rows.map((row) => mapNotificationMessageRow(row)),
+    unreadCount: Number(unreadCountResponse.result?.rows?.[0]?.count ?? 0),
+  };
+}
+
+async function fetchNotificationMessageViaCrud(id: number) {
+  await ensureNotificationMessageTableViaCrud();
+  const response = await request<{
+    ok: boolean;
+    rows: NotificationMessageRow[];
+  }>(`/crud/${NOTIFICATION_MESSAGE_TABLE}/select`, {
+    method: 'POST',
+    body: JSON.stringify({
+      where: [{ field: 'id', operator: 'eq', value: id }],
+      limit: 1,
+    }),
+  });
+
+  const row = response.rows[0];
+
+  if (!row) {
+    throw new NotificationApiError('알림 메시지를 찾을 수 없습니다.', 404);
+  }
+
+  return mapNotificationMessageRow(row);
+}
+
+async function createNotificationMessageViaCrud(payload: CreateNotificationMessagePayload) {
+  await ensureNotificationMessageTableViaCrud();
+  const response = await request<{
+    ok: boolean;
+    rows: NotificationMessageRow[];
+  }>(`/crud/${NOTIFICATION_MESSAGE_TABLE}/insert`, {
+    method: 'POST',
+    body: JSON.stringify({
+      rows: [
+        {
+          title: payload.title,
+          body: payload.body,
+          category: payload.category ?? 'general',
+          source: payload.source ?? 'system',
+          priority: payload.priority ?? 'normal',
+          metadata_json: payload.metadata ?? {},
+        },
+      ],
+    }),
+  });
+
+  const row = response.rows[0];
+
+  if (!row) {
+    throw new NotificationApiError('알림 메시지를 저장하지 못했습니다.', 500);
+  }
+
+  const item = mapNotificationMessageRow(row);
+  emitNotificationMessagesUpdated();
+  return item;
+}
+
+async function updateNotificationMessageReadStateViaCrud(id: number, read: boolean) {
+  await ensureNotificationMessageTableViaCrud();
+  const response = await request<{
+    ok: boolean;
+    rows: NotificationMessageRow[];
+  }>(`/crud/${NOTIFICATION_MESSAGE_TABLE}/update`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      data: {
+        is_read: read,
+        read_at: read ? new Date().toISOString() : null,
+        updated_at: new Date().toISOString(),
+      },
+      where: [{ field: 'id', operator: 'eq', value: id }],
+    }),
+  });
+
+  const row = response.rows[0];
+
+  if (!row) {
+    throw new NotificationApiError('상태를 변경할 알림 메시지를 찾을 수 없습니다.', 404);
+  }
+
+  const item = mapNotificationMessageRow(row);
+  emitNotificationMessagesUpdated();
+  return item;
+}
+
+async function deleteNotificationMessageViaCrud(id: number) {
+  await ensureNotificationMessageTableViaCrud();
+  const response = await request<{
+    ok: boolean;
+    rows?: Array<{ id?: number | string }>;
+    deleted?: number;
+  }>(`/crud/${NOTIFICATION_MESSAGE_TABLE}/delete`, {
+    method: 'DELETE',
+    body: JSON.stringify({
+      where: [{ field: 'id', operator: 'eq', value: id }],
+    }),
+  });
+
+  const deletedCount =
+    typeof response.deleted === 'number'
+      ? response.deleted
+      : Array.isArray(response.rows)
+        ? response.rows.length
+        : 0;
+
+  if (!deletedCount) {
+    throw new NotificationApiError('삭제할 알림 메시지를 찾을 수 없습니다.', 404);
+  }
+
+  emitNotificationMessagesUpdated();
+}
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit): Promise<T> {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), NOTIFICATION_API_REQUEST_TIMEOUT_MS);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new NotificationApiError('알림 서버 응답이 지연됩니다.', 408);
+    }
+    throw error;
+  }
+
+  clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new NotificationApiError(payload.message || '알림 요청 처리에 실패했습니다.', response.status);
+    } catch {
+      throw new NotificationApiError(text || '알림 요청 처리에 실패했습니다.', response.status);
+    }
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(NOTIFICATION_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      NOTIFICATION_API_FALLBACK_BASE_URL &&
+      NOTIFICATION_API_FALLBACK_BASE_URL !== NOTIFICATION_API_BASE_URL &&
+      (error instanceof NotificationApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && /404|not found|Failed to fetch|Load failed|NetworkError/i.test(error.message));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(NOTIFICATION_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+export async function fetchWebPushConfig() {
+  try {
+    return await request<{ enabled: boolean; publicKey: string }>('/notifications/webpush/config');
+  } catch (error) {
+    if (error instanceof NotificationApiError && error.status === 404) {
+      return {
+        enabled: false,
+        publicKey: '',
+      };
+    }
+
+    throw error;
+  }
+}
+
+export async function fetchNotificationMessages(params?: {
+  status?: NotificationMessageListStatus;
+  limit?: number;
+}) {
+  const searchParams = new URLSearchParams();
+
+  if (params?.status) {
+    searchParams.set('status', params.status);
+  }
+
+  if (typeof params?.limit === 'number') {
+    searchParams.set('limit', String(params.limit));
+  }
+
+  const query = searchParams.toString();
+  const cacheKey = query || '__default__';
+  const cachedEntry = notificationMessagesCache.get(cacheKey);
+  const now = Date.now();
+
+  if (cachedEntry?.value && now - cachedEntry.fetchedAt < NOTIFICATION_MESSAGES_CACHE_WINDOW_MS) {
+    return cachedEntry.value;
+  }
+
+  if (cachedEntry?.promise) {
+    return cachedEntry.promise;
+  }
+
+  const requestPromise = (async () => {
+    try {
+      const response = await request<NotificationMessagesResponse>(`/notifications/messages${query ? `?${query}` : ''}`);
+
+      notificationMessagesCache.set(cacheKey, {
+        fetchedAt: Date.now(),
+        value: response,
+        promise: null,
+      });
+
+      return response;
+    } catch (error) {
+      if (error instanceof NotificationApiError && error.status === 404) {
+        const response = await fetchNotificationMessagesViaCrud(params);
+        notificationMessagesCache.set(cacheKey, {
+          fetchedAt: Date.now(),
+          value: response,
+          promise: null,
+        });
+        return response;
+      }
+
+      throw error;
+    } finally {
+      const currentEntry = notificationMessagesCache.get(cacheKey);
+
+      if (currentEntry?.promise) {
+        notificationMessagesCache.set(cacheKey, {
+          fetchedAt: currentEntry.fetchedAt,
+          value: currentEntry.value,
+          promise: null,
+        });
+      }
+    }
+  })();
+
+  notificationMessagesCache.set(cacheKey, {
+    fetchedAt: cachedEntry?.fetchedAt ?? 0,
+    value: cachedEntry?.value ?? null,
+    promise: requestPromise,
+  });
+
+  return requestPromise;
+}
+
+export async function fetchNotificationMessage(id: number) {
+  try {
+    const response = await request<{ ok: boolean; item: NotificationMessageItem }>(`/notifications/messages/${id}`);
+    return response.item;
+  } catch (error) {
+    if (error instanceof NotificationApiError && error.status === 404) {
+      return fetchNotificationMessageViaCrud(id);
+    }
+
+    throw error;
+  }
+}
+
+export async function createNotificationMessage(payload: CreateNotificationMessagePayload) {
+  try {
+    const response = await request<{ ok: boolean; item: NotificationMessageItem }>('/notifications/messages', {
+      method: 'POST',
+      body: JSON.stringify({
+        title: payload.title,
+        body: payload.body,
+        category: payload.category ?? 'general',
+        source: payload.source ?? 'system',
+        priority: payload.priority ?? 'normal',
+        metadata: payload.metadata ?? {},
+      }),
+    });
+
+    emitNotificationMessagesUpdated();
+    return response.item;
+  } catch (error) {
+    if (error instanceof NotificationApiError && error.status === 404) {
+      return createNotificationMessageViaCrud(payload);
+    }
+
+    throw error;
+  }
+}
+
+export async function updateNotificationMessageReadState(id: number, read: boolean) {
+  try {
+    const response = await request<{ ok: boolean; item: NotificationMessageItem }>(`/notifications/messages/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify({
+        read,
+      }),
+    });
+
+    emitNotificationMessagesUpdated();
+    return response.item;
+  } catch (error) {
+    if (error instanceof NotificationApiError && error.status === 404) {
+      return updateNotificationMessageReadStateViaCrud(id, read);
+    }
+
+    throw error;
+  }
+}
+
+export async function deleteNotificationMessage(id: number) {
+  try {
+    await request<{ ok: boolean; deleted: boolean }>(`/notifications/messages/${id}`, {
+      method: 'DELETE',
+    });
+    emitNotificationMessagesUpdated();
+  } catch (error) {
+    if (error instanceof NotificationApiError && error.status === 404) {
+      return deleteNotificationMessageViaCrud(id);
+    }
+
+    throw error;
+  }
+}
+
+function getNotificationMetadataText(metadata: Record<string, unknown> | null | undefined, key: string) {
+  if (!metadata || typeof metadata !== 'object') {
+    return '';
+  }
+
+  const value = metadata[key];
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+export async function markChatNotificationMessagesAsRead(sessionId: string) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId) {
+    return 0;
+  }
+
+  const response = await fetchNotificationMessages({
+    status: 'unread',
+    limit: 100,
+  });
+
+  const targetIds = response.items
+    .filter(
+      (item) =>
+        item.read !== true &&
+        item.category === 'chat' &&
+        getNotificationMetadataText(item.metadata, 'sessionId') === normalizedSessionId,
+    )
+    .map((item) => item.id);
+
+  if (targetIds.length === 0) {
+    return 0;
+  }
+
+  await Promise.allSettled(targetIds.map((id) => updateNotificationMessageReadState(id, true)));
+  return targetIds.length;
+}
+
+export async function dismissChatWebPushNotifications(sessionId: string) {
+  const normalizedSessionId = sessionId.trim();
+
+  if (!normalizedSessionId || typeof navigator === 'undefined' || !('serviceWorker' in navigator)) {
+    return 0;
+  }
+
+  try {
+    const registration = (await navigator.serviceWorker.getRegistration()) ?? (await navigator.serviceWorker.ready);
+    const notifications = await registration?.getNotifications();
+
+    if (!notifications || notifications.length === 0) {
+      return 0;
+    }
+
+    let dismissedCount = 0;
+
+    notifications.forEach((notification) => {
+      const notificationData =
+        notification.data && typeof notification.data === 'object'
+          ? (notification.data as Record<string, unknown>)
+          : null;
+      const notificationCategory = getNotificationMetadataText(notificationData, 'category');
+      const notificationType = getNotificationMetadataText(notificationData, 'type');
+      const notificationThreadId = getNotificationMetadataText(notificationData, 'threadId');
+
+      if (
+        (
+          notificationCategory === 'chat' ||
+          notificationType.startsWith('chat') ||
+          notificationThreadId.startsWith('chat:')
+        ) &&
+        getNotificationMetadataText(notificationData, 'sessionId') === normalizedSessionId
+      ) {
+        notification.close();
+        dismissedCount += 1;
+      }
+    });
+
+    return dismissedCount;
+  } catch {
+    return 0;
+  }
+}
+
+export async function registerWebPushSubscription(
+  subscription: WebPushSubscriptionPayload,
+  deviceId?: string,
+) {
+  return request<{ ok: boolean; endpoint: string }>('/notifications/subscriptions/web', {
+    method: 'PUT',
+    body: JSON.stringify({
+      subscription,
+      deviceId,
+      userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
+      enabled: true,
+    }),
+  });
+}
+
+export async function unregisterWebPushSubscription(endpoint: string) {
+  return request<{ ok: boolean; endpoint: string; removed: boolean }>('/notifications/subscriptions/web', {
+    method: 'DELETE',
+    body: JSON.stringify({
+      endpoint,
+    }),
+  });
+}
+
+export async function registerPwaNotificationToken(payload: PwaNotificationTokenPayload) {
+  return request<{ ok: boolean; token: string }>('/notifications/tokens/ios', {
+    method: 'PUT',
+    body: JSON.stringify({
+      token: payload.token,
+      deviceId: payload.deviceId,
+      enabled: true,
+    }),
+  });
+}
+
+export async function unregisterPwaNotificationToken(token: string) {
+  return request<{ ok: boolean; token: string; removed: boolean }>('/notifications/tokens/ios', {
+    method: 'DELETE',
+    body: JSON.stringify({
+      token,
+    }),
+  });
+}
+
+export function shouldFallbackToLocalNotification(result: ClientNotificationSendResult) {
+  return (
+    result.web.skipped === true ||
+    result.web.ok !== true ||
+    result.web.sentCount < 1 ||
+    result.web.failedCount > 0
+  );
+}
+
+export async function showLocalClientNotification(payload: ClientNotificationPayload) {
+  if (
+    typeof window === 'undefined' ||
+    typeof Notification === 'undefined' ||
+    Notification.permission !== 'granted'
+  ) {
+    return false;
+  }
+
+  const notificationOptions = {
+    body: payload.body,
+    data: payload.data ?? {},
+    tag: payload.threadId ?? payload.data?.notificationKey ?? undefined,
+    badge: '/pwa-192x192.svg',
+    icon: '/pwa-192x192.svg',
+  };
+
+  try {
+    if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
+      const registration = (await navigator.serviceWorker.getRegistration()) ?? (await navigator.serviceWorker.ready);
+
+      if (registration?.showNotification) {
+        await registration.showNotification(payload.title, notificationOptions);
+        return true;
+      }
+    }
+  } catch {
+    // Fall back to the Notification constructor below.
+  }
+
+  try {
+    new Notification(payload.title, notificationOptions);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function sendClientNotification(payload: ClientNotificationPayload) {
+  return request<ClientNotificationSendResult>('/notifications/send', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
diff --git a/src/app/main/notificationIdentity.ts b/src/app/main/notificationIdentity.ts
new file mode 100755
index 0000000..d062c6a
--- /dev/null
+++ b/src/app/main/notificationIdentity.ts
@@ -0,0 +1,95 @@
+import { clearClientId, getOrCreateClientId } from './clientIdentity';
+
+export const NOTIFICATION_DEVICE_ID_STORAGE_KEY = 'work-server.notification.device-id';
+export const PWA_NOTIFICATION_TOKEN_STORAGE_KEY = 'work-server.notification.pwa-token';
+
+export type AutomationNotificationPreferenceTarget = {
+  targetKind: 'client' | 'ios-token' | 'ios-token-client';
+  targetId: string;
+};
+
+export function buildScopedPwaNotificationTargetId(token: string, clientId: string) {
+  return [token.trim(), clientId.trim()].filter(Boolean).join('::client::');
+}
+
+export function getSavedNotificationDeviceId() {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const clientId = getOrCreateClientId();
+  if (clientId) {
+    window.localStorage.setItem(NOTIFICATION_DEVICE_ID_STORAGE_KEY, clientId);
+    return clientId;
+  }
+
+  const saved = window.localStorage.getItem(NOTIFICATION_DEVICE_ID_STORAGE_KEY);
+
+  if (saved) {
+    return saved;
+  }
+
+  const generated = `web-${Date.now()}`;
+  window.localStorage.setItem(NOTIFICATION_DEVICE_ID_STORAGE_KEY, generated);
+  return generated;
+}
+
+export function getSavedPwaNotificationToken() {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  return window.localStorage.getItem(PWA_NOTIFICATION_TOKEN_STORAGE_KEY)?.trim() ?? '';
+}
+
+export function setSavedPwaNotificationToken(token: string | null | undefined) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedToken = token?.trim() ?? '';
+
+  if (normalizedToken) {
+    window.localStorage.setItem(PWA_NOTIFICATION_TOKEN_STORAGE_KEY, normalizedToken);
+  } else {
+    window.localStorage.removeItem(PWA_NOTIFICATION_TOKEN_STORAGE_KEY);
+  }
+}
+
+export function clearNotificationIdentity() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.removeItem(NOTIFICATION_DEVICE_ID_STORAGE_KEY);
+  window.localStorage.removeItem(PWA_NOTIFICATION_TOKEN_STORAGE_KEY);
+  clearClientId();
+}
+
+export function getAutomationNotificationPreferenceTarget(): AutomationNotificationPreferenceTarget | null {
+  const pwaToken = getSavedPwaNotificationToken();
+  const clientId = getSavedNotificationDeviceId();
+
+  if (pwaToken && clientId) {
+    return {
+      targetKind: 'ios-token-client',
+      targetId: buildScopedPwaNotificationTargetId(pwaToken, clientId),
+    };
+  }
+
+  if (pwaToken) {
+    return {
+      targetKind: 'ios-token',
+      targetId: pwaToken,
+    };
+  }
+
+  if (!clientId) {
+    return null;
+  }
+
+  return {
+    targetKind: 'client',
+    targetId: clientId,
+  };
+}
diff --git a/src/app/main/pages/ApisPage.tsx b/src/app/main/pages/ApisPage.tsx
new file mode 100755
index 0000000..7cea608
--- /dev/null
+++ b/src/app/main/pages/ApisPage.tsx
@@ -0,0 +1,33 @@
+import { Card, Typography } from 'antd';
+import { ComponentSamplesLayout } from '../../../features/layout/component-sample-gallery';
+import { SampleWidgetsLayout } from '../../../features/layout/widget-sample-gallery';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+
+const { Paragraph } = Typography;
+const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];
+
+export function ApisPage() {
+  const { selectedApiMenu, componentSampleEntries, widgetSampleEntries } = useMainLayoutContext();
+
+  return (
+    <div className="app-main-panel">
+      <Card
+        title={selectedApiMenu === 'components' ? 'APIs / Components' : 'APIs / Widgets'}
+        className="app-main-card"
+        bordered={false}
+      >
+        <Paragraph className="app-main-copy">
+          {selectedApiMenu === 'components'
+            ? '공통 UI 컴포넌트 샘플과 확장 샘플을 확인합니다.'
+            : '공통 위젯 샘플을 확인합니다.'}
+        </Paragraph>
+
+        {selectedApiMenu === 'components' ? (
+          <ComponentSamplesLayout entries={componentSampleEntries} excludeComponentIds={HIDDEN_COMPONENT_IDS} />
+        ) : (
+          <SampleWidgetsLayout entries={widgetSampleEntries} />
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/main/pages/ChatPage.tsx b/src/app/main/pages/ChatPage.tsx
new file mode 100755
index 0000000..12977ee
--- /dev/null
+++ b/src/app/main/pages/ChatPage.tsx
@@ -0,0 +1,20 @@
+import { ChatTypeManagementPage } from '../ChatTypeManagementPage';
+import { MainChatPanel } from '../MainChatPanel';
+import { ChatSourceChangesPage } from '../ChatSourceChangesPage';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+
+export function ChatPage() {
+  const { selectedChatMenu } = useMainLayoutContext();
+
+  return (
+    <div className="app-main-panel">
+      {selectedChatMenu === 'manage' ? (
+        <ChatTypeManagementPage />
+      ) : selectedChatMenu === 'changes' ? (
+        <ChatSourceChangesPage />
+      ) : (
+        <MainChatPanel initialView={selectedChatMenu} lockOuterScrollOnMobile />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/main/pages/DocsPage.tsx b/src/app/main/pages/DocsPage.tsx
new file mode 100755
index 0000000..bae0dd1
--- /dev/null
+++ b/src/app/main/pages/DocsPage.tsx
@@ -0,0 +1,29 @@
+import { Card, Space, Typography } from 'antd';
+import { MarkdownPreviewCard } from '../../../components/markdownPreview';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+import { getDocsSectionLabel } from '../routes';
+
+const { Text } = Typography;
+
+export function DocsPage() {
+  const { selectedDocsMenu, selectedDocs } = useMainLayoutContext();
+
+  return (
+    <div className="app-main-panel">
+      <Card
+        title={`Docs / ${getDocsSectionLabel(selectedDocsMenu)}`}
+        extra={<Text code>{selectedDocs.length} docs</Text>}
+        className="app-main-card"
+        bordered={false}
+      >
+        <Space direction="vertical" size={16} className="app-main-stack">
+          {selectedDocs.map((document) => (
+            <div key={document.id} id={`document-preview-${document.id}`} data-focus-id={`doc:${document.id}`}>
+              <MarkdownPreviewCard document={document} />
+            </div>
+          ))}
+        </Space>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/main/pages/PlansPage.tsx b/src/app/main/pages/PlansPage.tsx
new file mode 100755
index 0000000..aac44a3
--- /dev/null
+++ b/src/app/main/pages/PlansPage.tsx
@@ -0,0 +1,75 @@
+import { BoardPage } from '../../../features/board';
+import { HistoryPage } from '../../../features/history';
+import { PlanBoardChartsPage, PlanBoardPage, PlanSchedulePage, ReleaseReviewPage } from '../../../features/planBoard';
+import { ServerCommandPage } from '../../../features/serverCommand';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+
+export function PlansPage() {
+  const {
+    selectedPlanMenu,
+    activePlanQuickFilter,
+    planQuickFilterRequestKey,
+    initialSelectedPlanId,
+    initialSelectedWorkId,
+  } = useMainLayoutContext();
+
+  if (selectedPlanMenu === 'board') {
+    return (
+      <div className="app-main-panel">
+        <BoardPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'charts') {
+    return (
+      <div className="app-main-panel">
+        <PlanBoardChartsPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'schedule') {
+    return (
+      <div className="app-main-panel">
+        <PlanSchedulePage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'release-review') {
+    return (
+      <div className="app-main-panel">
+        <ReleaseReviewPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'history') {
+    return (
+      <div className="app-main-panel">
+        <HistoryPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'server-command') {
+    return (
+      <div className="app-main-panel">
+        <ServerCommandPage />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-main-panel">
+      <PlanBoardPage
+        statusFilter={selectedPlanMenu === 'release' ? 'done' : selectedPlanMenu}
+        quickFilter={activePlanQuickFilter}
+        quickFilterRequestKey={planQuickFilterRequestKey}
+        initialSelectedPlanId={initialSelectedPlanId}
+        initialSelectedWorkId={initialSelectedWorkId}
+      />
+    </div>
+  );
+}
diff --git a/src/app/main/pages/PlayPage.tsx b/src/app/main/pages/PlayPage.tsx
new file mode 100755
index 0000000..876889d
--- /dev/null
+++ b/src/app/main/pages/PlayPage.tsx
@@ -0,0 +1,17 @@
+import { LayoutPlaygroundView } from '../../../views/play/LayoutPlaygroundView';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+import { resolveSavedLayoutIdFromMenuKey } from '../routes';
+
+export function PlayPage() {
+  const { selectedPlayMenu, setSavedLayouts } = useMainLayoutContext();
+  const selectedSavedLayoutId = resolveSavedLayoutIdFromMenuKey(selectedPlayMenu);
+
+  return (
+    <div className="app-main-panel app-main-panel--play">
+      {selectedPlayMenu === 'layout' ? <LayoutPlaygroundView onSavedLayoutsChange={setSavedLayouts} /> : null}
+      {selectedSavedLayoutId ? (
+        <LayoutPlaygroundView savedLayoutViewId={selectedSavedLayoutId} onSavedLayoutsChange={setSavedLayouts} />
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/app/main/routes.tsx b/src/app/main/routes.tsx
new file mode 100755
index 0000000..6fa5a8d
--- /dev/null
+++ b/src/app/main/routes.tsx
@@ -0,0 +1,382 @@
+import { AppstoreOutlined, FileMarkdownOutlined, MessageOutlined, ProfileOutlined } from '@ant-design/icons';
+import { Badge } from 'antd';
+import type { MenuProps } from 'antd';
+import type { ReactNode } from 'react';
+import type { PlanFilterStatus } from '../../features/planBoard';
+
+export type TopMenuKey = 'docs' | 'apis' | 'plans' | 'chat' | 'play';
+export type HeaderTopMenuKey = 'docs' | 'plans' | 'play';
+export type ApiSectionKey = 'components' | 'widgets';
+export type PlanSectionKey = PlanFilterStatus | 'release' | 'release-review' | 'board' | 'charts' | 'schedule' | 'history' | 'server-command';
+export type ChatSectionKey = 'live' | 'changes' | 'errors' | 'manage';
+export type PlaySectionKey = 'layout';
+export type PlaySidebarKey = PlaySectionKey | `layout-record:${string}`;
+
+export const DOCS_DEFAULT_FOLDER = 'worklogs';
+export const PLAY_LAYOUT_RECORD_PREFIX = 'layout-record:' as const;
+export const PLAN_MENU_STATUS_ORDER: PlanFilterStatus[] = ['all', 'in-progress', 'error', 'done'];
+export const PLAN_GROUP_LABEL = '작업';
+
+export const DOCS_FOLDER_LABELS: Record<string, string> = {
+  worklogs: '작업일지',
+  features: '기능문서',
+  components: '컴포넌트문서',
+  templates: '문서템플릿',
+};
+
+export const PLAN_FILTER_LABELS: Record<PlanFilterStatus, string> = {
+  all: '자동화 현황',
+  'in-progress': '실행 중 (0)',
+  done: '완료',
+  error: '실패 (0)',
+};
+
+export const PLAN_SIDEBAR_LABELS: Record<PlanSectionKey, string> = {
+  ...PLAN_FILTER_LABELS,
+  release: 'release (0)',
+  'release-review': 'release 검수',
+  board: '작업 요청',
+  charts: '차트',
+  schedule: '스케줄',
+  history: '이력',
+  'server-command': 'Command',
+};
+
+export const PLAY_SIDEBAR_LABELS: Record<PlaySectionKey, string> = {
+  layout: 'Layout Editor',
+};
+
+export const PLAN_MENU_ANCHOR_IDS: Partial<Record<PlanSectionKey, string>> = {
+  all: 'plan-menu-all',
+  'in-progress': 'plan-menu-in-progress',
+  release: 'plan-menu-release',
+  'release-review': 'plan-menu-release-review',
+  done: 'plan-menu-done',
+  error: 'plan-menu-error',
+  board: 'plan-menu-board',
+  charts: 'plan-menu-charts',
+  schedule: 'plan-menu-schedule',
+  history: 'plan-menu-history',
+  'server-command': 'plan-menu-server-command',
+};
+
+export function getDocsSectionLabel(section: string) {
+  return DOCS_FOLDER_LABELS[section] ?? section;
+}
+
+export function resolveSavedLayoutMenuKey(layoutId: string): PlaySidebarKey {
+  return `${PLAY_LAYOUT_RECORD_PREFIX}${layoutId}`;
+}
+
+export function resolveSavedLayoutIdFromMenuKey(key: PlaySidebarKey) {
+  return key.startsWith(PLAY_LAYOUT_RECORD_PREFIX) ? key.slice(PLAY_LAYOUT_RECORD_PREFIX.length) : null;
+}
+
+export function resolvePlaySidebarLabel(selectedPlayMenu: PlaySidebarKey, savedLayouts: Array<{ id: string; name: string }>) {
+  const savedLayoutId = resolveSavedLayoutIdFromMenuKey(selectedPlayMenu);
+
+  if (selectedPlayMenu === 'layout') {
+    return PLAY_SIDEBAR_LABELS[selectedPlayMenu];
+  }
+
+  return savedLayouts.find((record) => record.id === savedLayoutId)?.name ?? 'Saved Layout';
+}
+
+export function renderPlanMenuLabel(menu: PlanSectionKey, label: string) {
+  const anchorId = PLAN_MENU_ANCHOR_IDS[menu];
+
+  if (!anchorId) {
+    return label;
+  }
+
+  return <span id={anchorId}>{label}</span>;
+}
+
+export function buildDocsPath(folder = DOCS_DEFAULT_FOLDER) {
+  return `/docs/${folder}`;
+}
+
+export function buildApisPath(section: ApiSectionKey = 'components') {
+  return `/apis/${section}`;
+}
+
+export function buildPlansPath(section: PlanSectionKey = 'all') {
+  return `/plans/${section}`;
+}
+
+export function buildChatPath(section: ChatSectionKey = 'live') {
+  return `/chat/${section}`;
+}
+
+export function buildPlayPath(section: PlaySectionKey = 'layout') {
+  return `/play/${section}`;
+}
+
+export function buildSavedLayoutPath(layoutId: string) {
+  return `/play/layout-record/${layoutId}`;
+}
+
+type RenderMenuLabelParams = {
+  key: string;
+  label: string;
+};
+
+function renderMenuLabel({ key, label }: RenderMenuLabelParams) {
+  return <span id={key}>{label}</span>;
+}
+
+export function buildDocsMenuItems(docFolders: string[]): MenuProps['items'] {
+  return [
+    {
+      key: 'docs-group',
+      icon: <FileMarkdownOutlined />,
+      label: 'Docs',
+      children: docFolders.map((folder) => ({
+        key: folder,
+        label: DOCS_FOLDER_LABELS[folder] ?? folder,
+      })),
+    },
+  ];
+}
+
+export function buildApiMenuItems(): MenuProps['items'] {
+  return [
+    {
+      key: 'api-group',
+      icon: <AppstoreOutlined />,
+      label: 'APIs',
+      children: [
+        { key: 'components', label: 'Components' },
+        { key: 'widgets', label: 'Widgets' },
+      ],
+    },
+  ];
+}
+
+export function buildPlanMenuItems(hasAccess = true): MenuProps['items'] {
+  if (!hasAccess) {
+    return [];
+  }
+
+  return [
+    {
+      key: 'plan-group',
+      icon: <ProfileOutlined />,
+      label: PLAN_GROUP_LABEL,
+      children: [
+        {
+          key: 'all',
+          label: renderPlanMenuLabel('all', PLAN_FILTER_LABELS.all),
+        },
+        {
+          key: 'board',
+          label: renderPlanMenuLabel('board', PLAN_SIDEBAR_LABELS.board),
+        },
+        {
+          key: 'release-review',
+          label: renderPlanMenuLabel('release-review', PLAN_SIDEBAR_LABELS['release-review']),
+        },
+        {
+          key: 'charts',
+          label: renderPlanMenuLabel('charts', PLAN_SIDEBAR_LABELS.charts),
+        },
+        {
+          key: 'schedule',
+          label: renderPlanMenuLabel('schedule', PLAN_SIDEBAR_LABELS.schedule),
+        },
+        {
+          key: 'history',
+          label: renderPlanMenuLabel('history', PLAN_SIDEBAR_LABELS.history),
+        },
+      ],
+    },
+    {
+      key: 'server-group',
+      icon: <ProfileOutlined />,
+      label: 'Servers',
+      children: [
+        {
+          key: 'server-command',
+          label: renderPlanMenuLabel('server-command', PLAN_SIDEBAR_LABELS['server-command']),
+        },
+      ],
+    },
+  ];
+}
+
+function renderChatUnreadLabel(label: string, unreadCount: number) {
+  if (unreadCount <= 0) {
+    return label;
+  }
+
+  return (
+    <Badge count={unreadCount} size="small" offset={[10, 0]}>
+      <span>{label}</span>
+    </Badge>
+  );
+}
+
+export function buildChatMenuItems(hasAccess = true, unreadCount = 0): MenuProps['items'] {
+  return [
+    {
+      key: 'codex-live-group',
+      icon: <MessageOutlined />,
+      label: renderChatUnreadLabel('Codex Live', unreadCount),
+      children: [
+        { key: 'live', label: renderChatUnreadLabel('Codex Live', unreadCount) },
+        { key: 'changes', label: '변경 이력' },
+      ],
+    },
+    {
+      key: 'app-log-group',
+      icon: <MessageOutlined />,
+      label: '앱로그',
+      children: [{ key: 'errors', label: '에러 로그' }],
+    },
+    ...(hasAccess
+      ? [
+          {
+            key: 'chat-manage-group',
+            icon: <MessageOutlined />,
+            label: '채팅 관리',
+            children: [{ key: 'manage', label: '유형 권한 관리' }],
+          },
+        ]
+      : []),
+  ];
+}
+
+export function buildPlayMenuItems(savedLayouts: Array<{ id: string; name: string }>): MenuProps['items'] {
+  return [
+    {
+      key: 'play-group',
+      icon: <AppstoreOutlined />,
+      label: 'Play',
+      children: [
+        {
+          key: 'play-layout-group',
+          label: 'Layout',
+          children: [
+            { key: 'layout', label: 'Layout Editor' },
+            ...(savedLayouts.length
+              ? savedLayouts.map((record) => ({
+                  key: resolveSavedLayoutMenuKey(record.id),
+                  label: record.name,
+                }))
+              : [{ key: 'saved-layout-empty', label: '저장된 레이아웃 없음', disabled: true }]),
+          ],
+        },
+      ],
+    },
+  ];
+}
+
+export function resolvePlanOpenKeys() {
+  return ['plan-group', 'server-group', 'codex-live-group', 'app-log-group', 'chat-manage-group'];
+}
+
+export function resolvePlayOpenKeys() {
+  return ['play-group', 'play-layout-group'];
+}
+
+export function resolvePlanQuickFilterMenu(filter: 'working' | 'release-pending-main' | 'automation-failed') {
+  if (filter === 'working') {
+    return 'in-progress' as const;
+  }
+
+  return filter === 'release-pending-main' ? ('release' as const) : ('error' as const);
+}
+
+export function renderSidebarIntro(activeTopMenu: TopMenuKey) {
+  const isDocsGroup = activeTopMenu === 'docs' || activeTopMenu === 'apis';
+
+  return {
+    color: isDocsGroup ? 'gold' : activeTopMenu === 'play' ? 'cyan' : 'green',
+    tag: isDocsGroup ? 'Docs' : activeTopMenu === 'play' ? 'Play' : '자동화',
+    description: isDocsGroup
+      ? '사이드바에서 Docs와 APIs를 함께 탐색합니다.'
+      : activeTopMenu === 'play'
+        ? '사이드바에서 Play 화면을 탐색합니다.'
+        : '사이드바에서 작업, Codex Live, 앱로그를 함께 전환합니다.',
+  };
+}
+
+export function resolveCurrentPageDescriptor(params: {
+  topMenu: TopMenuKey;
+  docsMenu: string;
+  apiMenu: ApiSectionKey;
+  planMenu: PlanSectionKey;
+  chatMenu: ChatSectionKey;
+  playMenu: PlaySidebarKey;
+  savedLayouts: Array<{ id: string; name: string }>;
+}) {
+  const { topMenu, docsMenu, apiMenu, planMenu, chatMenu, playMenu, savedLayouts } = params;
+
+  if (topMenu === 'docs') {
+    return {
+      id: `docs:${docsMenu}`,
+      title: `Docs / ${getDocsSectionLabel(docsMenu)}`,
+      topMenu,
+      section: docsMenu,
+    };
+  }
+
+  if (topMenu === 'apis') {
+    return {
+      id: `apis:${apiMenu}`,
+      title: apiMenu === 'components' ? 'APIs / Components' : 'APIs / Widgets',
+      topMenu,
+      section: apiMenu,
+    };
+  }
+
+  if (topMenu === 'plans') {
+    const title = planMenu === 'server-command' ? `Servers / ${PLAN_SIDEBAR_LABELS[planMenu]}` : `${PLAN_GROUP_LABEL} / ${PLAN_SIDEBAR_LABELS[planMenu]}`;
+
+    return {
+      id: `plans:${planMenu}`,
+      title,
+      topMenu,
+      section: planMenu,
+    };
+  }
+
+  if (topMenu === 'chat') {
+    return {
+      id: `app-log:${chatMenu}`,
+      title:
+        chatMenu === 'errors'
+          ? '앱로그 / 에러 로그'
+          : chatMenu === 'changes'
+            ? 'Codex Live / 변경 이력'
+          : chatMenu === 'manage'
+            ? '채팅 관리 / 유형 권한 관리'
+            : 'Codex Live / Codex Live',
+      topMenu,
+      section: chatMenu,
+    };
+  }
+
+  return {
+    id: `play:${playMenu}`,
+    title: `Play / ${resolvePlaySidebarLabel(playMenu, savedLayouts)}`,
+    topMenu,
+    section: playMenu,
+  };
+}
+
+export function resolveTopMenuPath(menu: HeaderTopMenuKey, currentDocsFolder: string) {
+  if (menu === 'docs') {
+    return buildDocsPath(currentDocsFolder);
+  }
+
+  return menu === 'plans' ? buildPlansPath('all') : buildPlayPath('layout');
+}
+
+export function createPageWindowId(topMenu: TopMenuKey, section: string) {
+  return `page:${topMenu}:${section}`;
+}
+
+export function renderMenuAnchor(label: string, anchorId: string): ReactNode {
+  return renderMenuLabel({ key: anchorId, label });
+}
diff --git a/src/app/main/tokenAccess.ts b/src/app/main/tokenAccess.ts
new file mode 100755
index 0000000..285e24b
--- /dev/null
+++ b/src/app/main/tokenAccess.ts
@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+
+export const TOKEN_ACCESS_STORAGE_KEY = 'work-app.token-access.registered-token';
+export const TOKEN_ACCESS_SYNC_EVENT = 'work-app:token-access-changed';
+export const ALLOWED_REGISTRATION_TOKEN = 'usr_7f3a9c2d8e1b4a6f';
+
+function normalizeToken(value: string | null | undefined) {
+  return value?.trim() ?? '';
+}
+
+export function isAllowedRegistrationToken(token: string | null | undefined) {
+  return normalizeToken(token) === ALLOWED_REGISTRATION_TOKEN;
+}
+
+export function getRegisteredAccessToken() {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  return normalizeToken(window.localStorage.getItem(TOKEN_ACCESS_STORAGE_KEY));
+}
+
+export function hasRegisteredAccessTokenAccess() {
+  return isAllowedRegistrationToken(getRegisteredAccessToken());
+}
+
+export function setRegisteredAccessToken(token: string | null | undefined) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const normalizedToken = normalizeToken(token);
+
+  if (normalizedToken) {
+    window.localStorage.setItem(TOKEN_ACCESS_STORAGE_KEY, normalizedToken);
+  } else {
+    window.localStorage.removeItem(TOKEN_ACCESS_STORAGE_KEY);
+  }
+
+  window.dispatchEvent(new CustomEvent(TOKEN_ACCESS_SYNC_EVENT));
+}
+
+export function useTokenAccess() {
+  const [registeredToken, setRegisteredToken] = useState(() => getRegisteredAccessToken());
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const syncRegisteredToken = () => {
+      setRegisteredToken(getRegisteredAccessToken());
+    };
+
+    window.addEventListener('storage', syncRegisteredToken);
+    window.addEventListener(TOKEN_ACCESS_SYNC_EVENT, syncRegisteredToken);
+
+    return () => {
+      window.removeEventListener('storage', syncRegisteredToken);
+      window.removeEventListener(TOKEN_ACCESS_SYNC_EVENT, syncRegisteredToken);
+    };
+  }, []);
+
+  return {
+    registeredToken,
+    hasAccess: isAllowedRegistrationToken(registeredToken),
+  };
+}
diff --git a/src/app/main/types.ts b/src/app/main/types.ts
new file mode 100755
index 0000000..f3ba623
--- /dev/null
+++ b/src/app/main/types.ts
@@ -0,0 +1,63 @@
+import type { MenuProps } from 'antd';
+import type { ReactNode } from 'react';
+import type { PlanQuickFilter } from '../../features/planBoard';
+import type {
+  ApiSectionKey,
+  ChatSectionKey,
+  HeaderTopMenuKey,
+  PlanSectionKey,
+  PlaySidebarKey,
+  TopMenuKey,
+} from './routes';
+export type {
+  HeaderTopMenuKey,
+  PlaySidebarKey,
+  TopMenuKey,
+} from './routes';
+
+export type PlanSidebarKey = PlanSectionKey;
+export type ChatSidebarKey = ChatSectionKey;
+
+export type MainHeaderProps = {
+  activeTopMenu: TopMenuKey;
+  sidebarCollapsed: boolean;
+  contentExpanded: boolean;
+  isMobileViewport: boolean;
+  onToggleSidebar: () => void;
+  onToggleContentExpanded: () => void;
+  onChangeTopMenu: (menu: HeaderTopMenuKey) => void;
+  onOpenPlanQuickFilter: (filter: PlanQuickFilter) => void;
+};
+
+export type MainSidebarProps = {
+  activeTopMenu: TopMenuKey;
+  hasAccess: boolean;
+  sidebarCollapsed: boolean;
+  isMobileViewport: boolean;
+  openKeys: string[];
+  apiMenuItems: MenuProps['items'];
+  docsMenuItems: MenuProps['items'];
+  planMenuItems: MenuProps['items'];
+  chatMenuItems: MenuProps['items'];
+  playMenuItems: MenuProps['items'];
+  selectedApiMenu: ApiSectionKey;
+  selectedDocsMenu: string;
+  selectedPlanMenu: PlanSidebarKey;
+  selectedChatMenu: ChatSidebarKey;
+  selectedPlayMenu: PlaySidebarKey;
+  introColor: string;
+  introTag: string;
+  introDescription: string;
+  onOpenKeysChange: (keys: string[]) => void;
+  onSelectApiMenu: (key: ApiSectionKey) => void;
+  onSelectDocsMenu: (key: string) => void;
+  onSelectPlanMenu: (key: PlanSidebarKey) => void;
+  onSelectChatMenu: (key: ChatSidebarKey) => void;
+  onSelectPlayMenu: (key: PlaySidebarKey) => void;
+};
+
+export type MainContentProps = {
+  contentExpanded: boolean;
+  onToggleContentExpanded: () => void;
+  children: ReactNode;
+};
diff --git a/src/app/manifests/docs.manifest.ts b/src/app/manifests/docs.manifest.ts
new file mode 100755
index 0000000..03f0186
--- /dev/null
+++ b/src/app/manifests/docs.manifest.ts
@@ -0,0 +1,35 @@
+import type { MarkdownDocumentEntry } from '../../components/markdownPreview';
+
+const docsMarkdownModules = import.meta.glob('/docs/**/*.md', {
+  query: '?raw',
+  import: 'default',
+}) as Record<string, () => Promise<string>>;
+
+const featureMarkdownModules = import.meta.glob('../../features/**/*.md', {
+  query: '?raw',
+  import: 'default',
+}) as Record<string, () => Promise<string>>;
+
+function createMarkdownEntries(
+  modules: Record<string, () => Promise<string>>,
+): MarkdownDocumentEntry[] {
+  const sortedPaths = Object.keys(modules).sort((left, right) => {
+    const isLeftWorklog = left.includes('/docs/worklogs/');
+    const isRightWorklog = right.includes('/docs/worklogs/');
+
+    if (isLeftWorklog && isRightWorklog) {
+      return right.localeCompare(left);
+    }
+
+    return left.localeCompare(right);
+  });
+
+  return sortedPaths.map((path, index) => ({
+    path,
+    load: modules[path],
+    order: index,
+  }));
+}
+
+export const docsMarkdownEntries = createMarkdownEntries(docsMarkdownModules);
+export const featureMarkdownEntries = createMarkdownEntries(featureMarkdownModules);
diff --git a/src/app/manifests/samples.manifest.ts b/src/app/manifests/samples.manifest.ts
new file mode 100755
index 0000000..8e02c66
--- /dev/null
+++ b/src/app/manifests/samples.manifest.ts
@@ -0,0 +1,26 @@
+import type { SampleEntry } from '../../samples/registry';
+import type { SampleModule } from '../../widgets/core';
+
+const componentSampleModules = import.meta.glob('../../components/**/samples/*.tsx') as Record<
+  string,
+  () => Promise<SampleModule>
+>;
+
+const widgetSampleModules = import.meta.glob('../../widgets/**/samples/*.tsx') as Record<
+  string,
+  () => Promise<SampleModule>
+>;
+
+function createSampleEntries(
+  modules: Record<string, () => Promise<SampleModule>>,
+): SampleEntry[] {
+  return Object.entries(modules)
+    .map(([modulePath, load]) => ({
+      modulePath,
+      load,
+    }))
+    .sort((left, right) => left.modulePath.localeCompare(right.modulePath));
+}
+
+export const componentSampleEntries = createSampleEntries(componentSampleModules);
+export const widgetSampleEntries = createSampleEntries(widgetSampleModules);
diff --git a/src/components/common/InlineImage.tsx b/src/components/common/InlineImage.tsx
new file mode 100755
index 0000000..99e3031
--- /dev/null
+++ b/src/components/common/InlineImage.tsx
@@ -0,0 +1,41 @@
+import { PictureOutlined } from '@ant-design/icons';
+import type { ImgHTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
+
+type InlineImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  fallbackText?: string;
+};
+
+export function InlineImage({ alt, className, fallbackText, onError, src, ...rest }: InlineImageProps) {
+  const [hasError, setHasError] = useState(!src);
+
+  useEffect(() => {
+    setHasError(!src);
+  }, [src]);
+
+  if (hasError) {
+    return (
+      <div
+        className={['inline-image-fallback', className].filter(Boolean).join(' ')}
+        role="img"
+        aria-label={alt || fallbackText || '이미지를 불러오지 못했습니다.'}
+      >
+        <PictureOutlined />
+        <span>{fallbackText || '이미지를 불러오지 못했습니다.'}</span>
+      </div>
+    );
+  }
+
+  return (
+    <img
+      {...rest}
+      alt={alt}
+      className={className}
+      src={src}
+      onError={(event) => {
+        setHasError(true);
+        onError?.(event);
+      }}
+    />
+  );
+}
diff --git a/src/components/dashboard/multiProgress/MultiProgressUI.tsx b/src/components/dashboard/multiProgress/MultiProgressUI.tsx
new file mode 100755
index 0000000..170f182
--- /dev/null
+++ b/src/components/dashboard/multiProgress/MultiProgressUI.tsx
@@ -0,0 +1,51 @@
+import { Flex, Typography } from 'antd';
+
+const { Text } = Typography;
+
+export type MultiProgressItem = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+export type MultiProgressUIProps = {
+  label: string;
+  meta?: string;
+  data: MultiProgressItem[];
+};
+
+export function MultiProgressUI({ label, meta, data }: MultiProgressUIProps) {
+  return (
+    <Flex vertical gap={12} className="dashboard-multi-progress-ui">
+      <div className="dashboard-multi-progress-ui__header">
+        <div className="dashboard-multi-progress-ui__copy">
+          <Text className="dashboard-multi-progress-ui__label">{label}</Text>
+          {meta ? <Text type="secondary">{meta}</Text> : null}
+        </div>
+      </div>
+
+      <div className="dashboard-multi-progress-ui__bar">
+        {data.map((item) => (
+          <div
+            key={item.label}
+            className="dashboard-multi-progress-ui__segment"
+            style={{ width: `${item.percent}%`, backgroundColor: item.color }}
+          />
+        ))}
+      </div>
+
+      <Flex vertical gap={8}>
+        {data.map((item) => (
+          <div key={item.label} className="dashboard-multi-progress-ui__legend">
+            <span
+              className="dashboard-multi-progress-ui__swatch"
+              style={{ backgroundColor: item.color }}
+            />
+            <Text>{item.label}</Text>
+            <Text className="dashboard-multi-progress-ui__percent">{item.percent}%</Text>
+          </div>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/components/dashboard/multiProgress/index.ts b/src/components/dashboard/multiProgress/index.ts
new file mode 100755
index 0000000..6fc11d8
--- /dev/null
+++ b/src/components/dashboard/multiProgress/index.ts
@@ -0,0 +1,2 @@
+export { MultiProgressUI } from './MultiProgressUI';
+export type { MultiProgressItem, MultiProgressUIProps } from './MultiProgressUI';
diff --git a/src/components/dashboard/multiProgress/plugins/index.ts b/src/components/dashboard/multiProgress/plugins/index.ts
new file mode 100755
index 0000000..90da222
--- /dev/null
+++ b/src/components/dashboard/multiProgress/plugins/index.ts
@@ -0,0 +1 @@
+export { createMultiProgressMetaPlugin, createMultiProgressSortPlugin } from './multi-progress.plugin';
diff --git a/src/components/dashboard/multiProgress/plugins/multi-progress.plugin.ts b/src/components/dashboard/multiProgress/plugins/multi-progress.plugin.ts
new file mode 100755
index 0000000..abe8a51
--- /dev/null
+++ b/src/components/dashboard/multiProgress/plugins/multi-progress.plugin.ts
@@ -0,0 +1,16 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { MultiProgressUIProps } from '../types';
+
+export function createMultiProgressMetaPlugin(meta: string): PropsPlugin<MultiProgressUIProps> {
+  return (props) => ({
+    ...props,
+    meta,
+  });
+}
+
+export function createMultiProgressSortPlugin(): PropsPlugin<MultiProgressUIProps> {
+  return (props) => ({
+    ...props,
+    data: [...props.data].sort((left, right) => right.percent - left.percent),
+  });
+}
diff --git a/src/components/dashboard/multiProgress/samples/BaseSample.tsx b/src/components/dashboard/multiProgress/samples/BaseSample.tsx
new file mode 100755
index 0000000..755b7a8
--- /dev/null
+++ b/src/components/dashboard/multiProgress/samples/BaseSample.tsx
@@ -0,0 +1,28 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { MultiProgressUI } from '../MultiProgressUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-multi-progress-base',
+  componentId: 'dashboard-multi-progress',
+  title: 'Dashboard Multi Progress',
+  description: '여러 단계 진행률을 하나의 막대와 범례로 함께 보여주는 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 11,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <MultiProgressUI
+      label="오늘 처리 현황"
+      meta="입고 / 피킹 / 출고"
+      data={[
+        { label: '입고', percent: 28, color: '#165dff' },
+        { label: '피킹', percent: 34, color: '#52c41a' },
+        { label: '출고', percent: 38, color: '#fa8c16' },
+      ]}
+    />
+  );
+}
diff --git a/src/components/dashboard/multiProgress/samples/Sample.tsx b/src/components/dashboard/multiProgress/samples/Sample.tsx
new file mode 100755
index 0000000..d433069
--- /dev/null
+++ b/src/components/dashboard/multiProgress/samples/Sample.tsx
@@ -0,0 +1,36 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import { MultiProgressUI } from '../MultiProgressUI';
+import {
+  createMultiProgressMetaPlugin,
+  createMultiProgressSortPlugin,
+} from '../plugins';
+import type { MultiProgressUIProps } from '../types';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-multi-progress',
+  componentId: 'dashboard-multi-progress',
+  title: 'Dashboard Multi Progress',
+  description: '여러 상태 비중을 하나의 bar와 범례로 표현하는 대시보드 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 11,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const props = plugins<MultiProgressUIProps>(
+    {
+      label: '배송 상태 비중',
+      data: [
+        { label: '배송 완료', percent: 54, color: '#28c76f' },
+        { label: '배송 중', percent: 28, color: '#00cfe8' },
+        { label: '지연', percent: 18, color: '#ea5455' },
+      ],
+    },
+    [createMultiProgressMetaPlugin('오늘 기준'), createMultiProgressSortPlugin()],
+  );
+
+  return <MultiProgressUI {...props} />;
+}
diff --git a/src/components/dashboard/multiProgress/types/index.ts b/src/components/dashboard/multiProgress/types/index.ts
new file mode 100755
index 0000000..35c4612
--- /dev/null
+++ b/src/components/dashboard/multiProgress/types/index.ts
@@ -0,0 +1 @@
+export type { MultiProgressItem, MultiProgressUIProps } from './multi-progress';
diff --git a/src/components/dashboard/multiProgress/types/multi-progress.ts b/src/components/dashboard/multiProgress/types/multi-progress.ts
new file mode 100755
index 0000000..8e439ed
--- /dev/null
+++ b/src/components/dashboard/multiProgress/types/multi-progress.ts
@@ -0,0 +1,11 @@
+export type MultiProgressItem = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+export type MultiProgressUIProps = {
+  label: string;
+  meta?: string;
+  data: MultiProgressItem[];
+};
diff --git a/src/components/dashboard/progress/ProgressUI.tsx b/src/components/dashboard/progress/ProgressUI.tsx
new file mode 100755
index 0000000..e13111f
--- /dev/null
+++ b/src/components/dashboard/progress/ProgressUI.tsx
@@ -0,0 +1,26 @@
+import { Flex, Progress, Typography } from 'antd';
+import type { ProgressUIProps } from './types';
+
+const { Text } = Typography;
+
+export function ProgressUI({ label, meta, data }: ProgressUIProps) {
+  return (
+    <Flex vertical gap={8} className="dashboard-progress-ui">
+      <div className="dashboard-progress-ui__header">
+        <div className="dashboard-progress-ui__copy">
+          <Text className="dashboard-progress-ui__label">{label}</Text>
+          {meta ? <Text type="secondary">{meta}</Text> : null}
+        </div>
+        <Text className="dashboard-progress-ui__percent">{data.percent}%</Text>
+      </div>
+
+      <Progress
+        percent={data.percent}
+        size="small"
+        showInfo={false}
+        strokeColor={data.color}
+        className="dashboard-progress-ui__bar"
+      />
+    </Flex>
+  );
+}
diff --git a/src/components/dashboard/progress/index.ts b/src/components/dashboard/progress/index.ts
new file mode 100755
index 0000000..81c08d5
--- /dev/null
+++ b/src/components/dashboard/progress/index.ts
@@ -0,0 +1,3 @@
+export { ProgressUI } from './ProgressUI';
+export { createProgressColorPlugin, createProgressMetaPlugin } from './plugins';
+export type { ProgressUIData, ProgressUIProps } from './types';
diff --git a/src/components/dashboard/progress/plugins/index.ts b/src/components/dashboard/progress/plugins/index.ts
new file mode 100755
index 0000000..a028912
--- /dev/null
+++ b/src/components/dashboard/progress/plugins/index.ts
@@ -0,0 +1 @@
+export { createProgressColorPlugin, createProgressMetaPlugin } from './progress.plugin';
diff --git a/src/components/dashboard/progress/plugins/progress.plugin.ts b/src/components/dashboard/progress/plugins/progress.plugin.ts
new file mode 100755
index 0000000..a83cd4c
--- /dev/null
+++ b/src/components/dashboard/progress/plugins/progress.plugin.ts
@@ -0,0 +1,19 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { ProgressUIProps } from '../types';
+
+export function createProgressMetaPlugin(meta: string): PropsPlugin<ProgressUIProps> {
+  return (props) => ({
+    ...props,
+    meta,
+  });
+}
+
+export function createProgressColorPlugin(color: string): PropsPlugin<ProgressUIProps> {
+  return (props) => ({
+    ...props,
+    data: {
+      ...props.data,
+      color,
+    },
+  });
+}
diff --git a/src/components/dashboard/progress/samples/BaseSample.tsx b/src/components/dashboard/progress/samples/BaseSample.tsx
new file mode 100755
index 0000000..37379a6
--- /dev/null
+++ b/src/components/dashboard/progress/samples/BaseSample.tsx
@@ -0,0 +1,27 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { ProgressUI } from '../ProgressUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-progress-base',
+  componentId: 'dashboard-progress',
+  title: 'Dashboard Progress',
+  description: '라벨, 메타, 진행률을 함께 표현하는 대시보드 progress 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 10,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <ProgressUI
+      label="배송 완료"
+      meta="오늘 기준"
+      data={{
+        percent: 72,
+        color: '#165dff',
+      }}
+    />
+  );
+}
diff --git a/src/components/dashboard/progress/samples/Sample.tsx b/src/components/dashboard/progress/samples/Sample.tsx
new file mode 100755
index 0000000..13bf39f
--- /dev/null
+++ b/src/components/dashboard/progress/samples/Sample.tsx
@@ -0,0 +1,32 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import { ProgressUI } from '../ProgressUI';
+import { createProgressColorPlugin, createProgressMetaPlugin } from '../plugins';
+import type { ProgressUIProps } from '../types';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-progress',
+  componentId: 'dashboard-progress',
+  title: 'Dashboard Progress',
+  description: '라벨, 메타, 진행률을 함께 표현하는 대시보드 progress 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 10,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const props = plugins<ProgressUIProps>(
+    {
+      label: '배송 완료',
+      data: {
+        percent: 72,
+        color: '#28c76f',
+      },
+    },
+    [createProgressMetaPlugin('오늘 기준'), createProgressColorPlugin('#165dff')],
+  );
+
+  return <ProgressUI {...props} />;
+}
diff --git a/src/components/dashboard/progress/types/index.ts b/src/components/dashboard/progress/types/index.ts
new file mode 100755
index 0000000..d654123
--- /dev/null
+++ b/src/components/dashboard/progress/types/index.ts
@@ -0,0 +1 @@
+export type { ProgressUIData, ProgressUIProps } from './progress';
diff --git a/src/components/dashboard/progress/types/progress.ts b/src/components/dashboard/progress/types/progress.ts
new file mode 100755
index 0000000..9d1a851
--- /dev/null
+++ b/src/components/dashboard/progress/types/progress.ts
@@ -0,0 +1,10 @@
+export type ProgressUIData = {
+  percent: number;
+  color: string;
+};
+
+export type ProgressUIProps = {
+  label: string;
+  meta?: string;
+  data: ProgressUIData;
+};
diff --git a/src/components/dataListTable/DataListTable.css b/src/components/dataListTable/DataListTable.css
new file mode 100755
index 0000000..5976a0c
--- /dev/null
+++ b/src/components/dataListTable/DataListTable.css
@@ -0,0 +1,42 @@
+.data-list-table {
+  width: 100%;
+}
+
+.data-list-table__toolbar {
+  width: 100%;
+}
+
+.data-list-table__search {
+  width: min(100%, 320px);
+}
+
+.data-list-table__filter {
+  min-width: 160px;
+}
+
+.data-list-table__mobile {
+  display: none;
+}
+
+.data-list-table__card {
+  padding: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 8px;
+  background: #fff;
+}
+
+@media (max-width: 720px) {
+  .data-list-table__desktop--with-mobile {
+    display: none;
+  }
+
+  .data-list-table__mobile {
+    display: grid;
+    gap: 12px;
+  }
+
+  .data-list-table__search,
+  .data-list-table__filter {
+    width: 100%;
+  }
+}
diff --git a/src/components/dataListTable/DataListTable.tsx b/src/components/dataListTable/DataListTable.tsx
new file mode 100755
index 0000000..2eb2374
--- /dev/null
+++ b/src/components/dataListTable/DataListTable.tsx
@@ -0,0 +1,204 @@
+import { Input, Pagination, Select, Space, Table, Typography } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { ReactNode } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { EmptyState, ErrorState, LoadingState } from '../stateKit';
+import './DataListTable.css';
+
+const { Text } = Typography;
+
+export type DataListFilterOption<T> = {
+  value: string;
+  label: ReactNode;
+  predicate: (item: T) => boolean;
+};
+
+export type DataListTableProps<T extends object> = {
+  data: T[];
+  columns: ColumnsType<T>;
+  getRowKey: (item: T) => React.Key;
+  searchPlaceholder?: string;
+  searchFields?: ReadonlyArray<keyof T | ((item: T) => string)>;
+  searchPredicate?: (item: T, keyword: string) => boolean;
+  filters?: ReadonlyArray<DataListFilterOption<T>>;
+  pageSize?: number;
+  loading?: boolean;
+  error?: ReactNode;
+  emptyTitle?: ReactNode;
+  emptyDescription?: ReactNode;
+  retryLabel?: ReactNode;
+  onRetry?: () => void;
+  mobileCardRender?: (item: T) => ReactNode;
+  tableProps?: Omit<
+    TableProps<T>,
+    'columns' | 'dataSource' | 'rowKey' | 'pagination' | 'loading'
+  >;
+};
+
+function normalizeSearchText(text: string) {
+  return text.trim().toLowerCase();
+}
+
+function resolveFieldText<T extends object>(
+  item: T,
+  field: keyof T | ((item: T) => string),
+) {
+  if (typeof field === 'function') {
+    return field(item);
+  }
+
+  const value = item[field];
+
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  return String(value);
+}
+
+function filterBySearch<T extends object>(
+  items: T[],
+  keyword: string,
+  searchFields?: DataListTableProps<T>['searchFields'],
+  searchPredicate?: DataListTableProps<T>['searchPredicate'],
+) {
+  const normalizedKeyword = normalizeSearchText(keyword);
+
+  if (!normalizedKeyword) {
+    return items;
+  }
+
+  if (searchPredicate) {
+    return items.filter((item) => searchPredicate(item, normalizedKeyword));
+  }
+
+  if (!searchFields?.length) {
+    return items;
+  }
+
+  return items.filter((item) =>
+    searchFields.some((field) =>
+      normalizeSearchText(resolveFieldText(item, field)).includes(normalizedKeyword),
+    ),
+  );
+}
+
+export function DataListTable<T extends object>({
+  data,
+  columns,
+  getRowKey,
+  searchPlaceholder = '검색어를 입력하세요',
+  searchFields,
+  searchPredicate,
+  filters = [],
+  pageSize = 10,
+  loading,
+  error,
+  emptyTitle = '표시할 항목이 없습니다.',
+  emptyDescription,
+  retryLabel,
+  onRetry,
+  mobileCardRender,
+  tableProps,
+}: DataListTableProps<T>) {
+  const [keyword, setKeyword] = useState('');
+  const [activeFilter, setActiveFilter] = useState<string | undefined>();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const filteredData = useMemo(() => {
+    const searchedItems = filterBySearch(data, keyword, searchFields, searchPredicate);
+    const filter = filters.find((item) => item.value === activeFilter);
+
+    return filter ? searchedItems.filter(filter.predicate) : searchedItems;
+  }, [activeFilter, data, filters, keyword, searchFields, searchPredicate]);
+
+  const pagedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredData.slice(startIndex, startIndex + pageSize);
+  }, [currentPage, filteredData, pageSize]);
+  const pageCount = Math.max(1, Math.ceil(filteredData.length / pageSize));
+
+  useEffect(() => {
+    setCurrentPage((previousPage) => Math.min(previousPage, pageCount));
+  }, [pageCount]);
+
+  if (error) {
+    return <ErrorState message={error} retryLabel={retryLabel} onRetry={onRetry} />;
+  }
+
+  if (loading) {
+    return <LoadingState variant="list" rows={Math.min(pageSize, 5)} />;
+  }
+
+  return (
+    <Space direction="vertical" size={16} className="data-list-table">
+      <Space wrap className="data-list-table__toolbar">
+        <Input.Search
+          allowClear
+          value={keyword}
+          placeholder={searchPlaceholder}
+          className="data-list-table__search"
+          onChange={(event) => {
+            setKeyword(event.target.value);
+            setCurrentPage(1);
+          }}
+        />
+        {filters.length ? (
+          <Select
+            allowClear
+            value={activeFilter}
+            placeholder="필터"
+            className="data-list-table__filter"
+            options={filters.map((filter) => ({
+              value: filter.value,
+              label: filter.label,
+            }))}
+            onChange={(nextFilter) => {
+              setActiveFilter(nextFilter);
+              setCurrentPage(1);
+            }}
+          />
+        ) : null}
+        <Text type="secondary">{filteredData.length}건</Text>
+      </Space>
+
+      {filteredData.length ? (
+        <>
+          <Table<T>
+            {...tableProps}
+            className={[
+              'data-list-table__desktop',
+              mobileCardRender ? 'data-list-table__desktop--with-mobile' : '',
+              tableProps?.className ?? '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            columns={columns}
+            dataSource={pagedData}
+            rowKey={getRowKey}
+            pagination={false}
+          />
+          {mobileCardRender ? (
+            <div className="data-list-table__mobile">
+              {pagedData.map((item) => (
+                <article key={getRowKey(item)} className="data-list-table__card">
+                  {mobileCardRender(item)}
+                </article>
+              ))}
+            </div>
+          ) : null}
+          {filteredData.length > pageSize ? (
+            <Pagination
+              current={currentPage}
+              pageSize={pageSize}
+              total={filteredData.length}
+              onChange={setCurrentPage}
+            />
+          ) : null}
+        </>
+      ) : (
+        <EmptyState title={emptyTitle} description={emptyDescription} />
+      )}
+    </Space>
+  );
+}
diff --git a/src/components/dataListTable/index.ts b/src/components/dataListTable/index.ts
new file mode 100755
index 0000000..3234d54
--- /dev/null
+++ b/src/components/dataListTable/index.ts
@@ -0,0 +1 @@
+export * from './DataListTable';
diff --git a/src/components/dataListTable/samples/BaseSample.tsx b/src/components/dataListTable/samples/BaseSample.tsx
new file mode 100755
index 0000000..60fb1f4
--- /dev/null
+++ b/src/components/dataListTable/samples/BaseSample.tsx
@@ -0,0 +1,97 @@
+import { Space, Typography } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import type { SampleMeta } from '../../../widgets/core';
+import { StatusBadgeUI } from '../../status-badge';
+import { DataListTable } from '../DataListTable';
+
+const { Text } = Typography;
+
+type BoardItem = {
+  id: string;
+  title: string;
+  owner: string;
+  status: 'ready' | 'working' | 'done';
+  progress: number;
+};
+
+const data: BoardItem[] = [
+  { id: 'board-1', title: '컴포넌트 구성 추가 제안', owner: 'Board', status: 'working', progress: 45 },
+  { id: 'plan-1', title: 'Plan 목록 정리', owner: 'Plan', status: 'ready', progress: 15 },
+  { id: 'docs-1', title: 'Docs preview 연결', owner: 'Docs', status: 'done', progress: 100 },
+];
+
+const columns: ColumnsType<BoardItem> = [
+  {
+    title: '제목',
+    dataIndex: 'title',
+    sorter: (left, right) => left.title.localeCompare(right.title),
+  },
+  {
+    title: '담당',
+    dataIndex: 'owner',
+    filters: Array.from(new Set(data.map((item) => item.owner))).map((owner) => ({
+      text: owner,
+      value: owner,
+    })),
+    onFilter: (value, record) => record.owner === value,
+  },
+  {
+    title: '상태',
+    dataIndex: 'status',
+    render: (status: BoardItem['status']) => (
+      <StatusBadgeUI
+        label={status}
+        tone={status === 'done' ? 'success' : status === 'working' ? 'processing' : 'default'}
+      />
+    ),
+  },
+  {
+    title: '진행률',
+    dataIndex: 'progress',
+    sorter: (left, right) => left.progress - right.progress,
+    render: (progress: number) => `${progress}%`,
+  },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'data-list-table-base',
+  componentId: 'data-list-table',
+  title: 'Data List Table',
+  description: '검색, 필터, 정렬, 페이지네이션과 모바일 카드 전환을 함께 제공하는 목록형 화면 컴포넌트입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 40,
+  features: ['docs', 'component-sample'],
+};
+
+export function Sample() {
+  return (
+    <DataListTable
+      data={data}
+      columns={columns}
+      getRowKey={(item) => item.id}
+      searchFields={['title', 'owner', 'status']}
+      searchPlaceholder="제목, 담당, 상태 검색"
+      pageSize={2}
+      filters={[
+        {
+          value: 'active',
+          label: '진행 중',
+          predicate: (item) => item.status !== 'done',
+        },
+      ]}
+      mobileCardRender={(item) => (
+        <Space direction="vertical" size={6}>
+          <Text strong>{item.title}</Text>
+          <Text type="secondary">{item.owner}</Text>
+          <StatusBadgeUI
+            label={item.status}
+            tone={item.status === 'done' ? 'success' : item.status === 'working' ? 'processing' : 'default'}
+          />
+          <Text>{item.progress}%</Text>
+        </Space>
+      )}
+    />
+  );
+}
diff --git a/src/components/dataStatePanel/DataStatePanel.css b/src/components/dataStatePanel/DataStatePanel.css
new file mode 100755
index 0000000..452ec4f
--- /dev/null
+++ b/src/components/dataStatePanel/DataStatePanel.css
@@ -0,0 +1,162 @@
+.data-state-panel.ant-card {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top left, rgba(125, 211, 252, 0.18), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
+  box-shadow:
+    0 18px 40px rgba(15, 23, 42, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.68);
+}
+
+.data-state-panel .ant-card-body {
+  padding: 22px;
+}
+
+.data-state-panel__inner {
+  min-width: 0;
+}
+
+.data-state-panel__hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  min-width: 0;
+}
+
+.data-state-panel__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 10px 24px rgba(15, 23, 42, 0.08);
+  color: #0f172a;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.data-state-panel__copy {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.data-state-panel__title.ant-typography,
+.data-state-panel__title--compact.ant-typography {
+  margin: 0;
+}
+
+.data-state-panel__description.ant-typography {
+  margin: 0;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.data-state-panel__content {
+  min-width: 0;
+}
+
+.data-state-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.data-state-panel__skeleton .ant-skeleton {
+  width: 100%;
+}
+
+.data-state-panel--compact {
+  border-radius: 18px;
+}
+
+.data-state-panel--compact .ant-card-body {
+  padding: 16px;
+}
+
+.data-state-panel--compact .data-state-panel__hero {
+  gap: 12px;
+}
+
+.data-state-panel--compact .data-state-panel__icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.data-state-panel--loading {
+  background:
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.96) 100%);
+}
+
+.data-state-panel--loading .data-state-panel__icon {
+  color: #2563eb;
+}
+
+.data-state-panel--empty {
+  background:
+    radial-gradient(circle at top left, rgba(226, 232, 240, 0.56), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
+}
+
+.data-state-panel--empty .data-state-panel__icon {
+  color: #475569;
+}
+
+.data-state-panel--error {
+  background:
+    radial-gradient(circle at top left, rgba(254, 202, 202, 0.48), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 242, 242, 0.94) 100%);
+}
+
+.data-state-panel--error .data-state-panel__icon {
+  color: #dc2626;
+}
+
+.data-state-panel--ready {
+  background:
+    radial-gradient(circle at top left, rgba(187, 247, 208, 0.46), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.94) 100%);
+}
+
+.data-state-panel--ready .data-state-panel__icon {
+  color: #16a34a;
+}
+
+@media (max-width: 768px) {
+  .data-state-panel.ant-card {
+    border-radius: 20px;
+  }
+
+  .data-state-panel .ant-card-body {
+    padding: 18px;
+  }
+
+  .data-state-panel__hero {
+    gap: 12px;
+  }
+
+  .data-state-panel__icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 14px;
+    font-size: 18px;
+  }
+
+  .data-state-panel__actions {
+    width: 100%;
+  }
+
+  .data-state-panel__actions .ant-btn {
+    flex: 1 1 140px;
+  }
+}
diff --git a/src/components/dataStatePanel/DataStatePanel.tsx b/src/components/dataStatePanel/DataStatePanel.tsx
new file mode 100755
index 0000000..440459b
--- /dev/null
+++ b/src/components/dataStatePanel/DataStatePanel.tsx
@@ -0,0 +1,158 @@
+import {
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  InboxOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+import { Card, Flex, Skeleton, Typography } from 'antd';
+import type { CardProps } from 'antd';
+import type { ReactNode } from 'react';
+import './DataStatePanel.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+export type DataStatePanelStatus = 'loading' | 'empty' | 'error' | 'ready';
+
+export type DataStatePanelProps = {
+  state: DataStatePanelStatus;
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  compact?: boolean;
+  icon?: ReactNode;
+  loadingRows?: number;
+  className?: string;
+  cardProps?: Omit<CardProps, 'children' | 'className'>;
+};
+
+function getDefaultIcon(state: DataStatePanelStatus) {
+  switch (state) {
+    case 'loading':
+      return <LoadingOutlined />;
+    case 'empty':
+      return <InboxOutlined />;
+    case 'error':
+      return <ExclamationCircleOutlined />;
+    case 'ready':
+      return <CheckCircleOutlined />;
+    default:
+      return null;
+  }
+}
+
+function getDefaultTitle(state: DataStatePanelStatus) {
+  switch (state) {
+    case 'loading':
+      return '데이터를 불러오는 중입니다.';
+    case 'empty':
+      return '표시할 데이터가 없습니다.';
+    case 'error':
+      return '데이터를 불러오지 못했습니다.';
+    case 'ready':
+      return '데이터를 확인할 수 있습니다.';
+    default:
+      return undefined;
+  }
+}
+
+function getDefaultDescription(state: DataStatePanelStatus) {
+  switch (state) {
+    case 'loading':
+      return '응답을 정리하는 동안 패널 레이아웃을 유지합니다.';
+    case 'empty':
+      return '조건을 조정하거나 새 항목을 추가하면 이 영역이 채워집니다.';
+    case 'error':
+      return '네트워크 또는 권한 상태를 확인한 뒤 다시 시도하세요.';
+    case 'ready':
+      return undefined;
+    default:
+      return undefined;
+  }
+}
+
+function getSkeletonWidths(compact: boolean, rows: number) {
+  if (compact) {
+    return Array.from({ length: rows }, (_, index) => (index === rows - 1 ? '84%' : '100%'));
+  }
+
+  return Array.from({ length: rows }, (_, index) => {
+    if (index === rows - 1) {
+      return '74%';
+    }
+
+    return '100%';
+  });
+}
+
+function renderLoadingBody(compact: boolean, rows: number) {
+  return (
+    <div className="data-state-panel__skeleton">
+      <Skeleton
+        active
+        title={{ width: compact ? '52%' : '38%' }}
+        paragraph={{ rows, width: getSkeletonWidths(compact, rows) }}
+      />
+    </div>
+  );
+}
+
+export function DataStatePanel({
+  state,
+  title,
+  description,
+  actions,
+  children,
+  compact = false,
+  icon,
+  loadingRows = compact ? 2 : 3,
+  className,
+  cardProps,
+}: DataStatePanelProps) {
+  const resolvedTitle = title ?? getDefaultTitle(state);
+  const resolvedDescription = description ?? getDefaultDescription(state);
+  const panelClassName = [
+    'data-state-panel',
+    `data-state-panel--${state}`,
+    compact ? 'data-state-panel--compact' : '',
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Card {...cardProps} className={panelClassName}>
+      <Flex vertical gap={compact ? 14 : 18} className="data-state-panel__inner">
+        <div className="data-state-panel__hero">
+          <span className="data-state-panel__icon" aria-hidden="true">
+            {icon ?? getDefaultIcon(state)}
+          </span>
+          <Flex vertical gap={4} className="data-state-panel__copy">
+            {resolvedTitle ? (
+              compact ? (
+                <Text strong className="data-state-panel__title data-state-panel__title--compact">
+                  {resolvedTitle}
+                </Text>
+              ) : (
+                <Title level={5} className="data-state-panel__title">
+                  {resolvedTitle}
+                </Title>
+              )
+            ) : null}
+            {resolvedDescription ? (
+              <Paragraph className="data-state-panel__description" type="secondary">
+                {resolvedDescription}
+              </Paragraph>
+            ) : null}
+          </Flex>
+        </div>
+
+        {state === 'loading' ? renderLoadingBody(compact, loadingRows) : children ? (
+          <div className="data-state-panel__content">{children}</div>
+        ) : null}
+
+        {actions ? <div className="data-state-panel__actions">{actions}</div> : null}
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/dataStatePanel/index.ts b/src/components/dataStatePanel/index.ts
new file mode 100755
index 0000000..f2283dc
--- /dev/null
+++ b/src/components/dataStatePanel/index.ts
@@ -0,0 +1,2 @@
+export { DataStatePanel } from './DataStatePanel';
+export type { DataStatePanelProps, DataStatePanelStatus } from './DataStatePanel';
diff --git a/src/components/dataStatePanel/samples/BaseSample.css b/src/components/dataStatePanel/samples/BaseSample.css
new file mode 100755
index 0000000..69d0df8
--- /dev/null
+++ b/src/components/dataStatePanel/samples/BaseSample.css
@@ -0,0 +1,26 @@
+.data-state-panel-sample-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 12px;
+}
+
+.data-state-panel-sample-mobile {
+  margin-top: 12px;
+}
+
+.data-state-panel-sample-mobile__frame {
+  width: min(100%, 360px);
+  padding: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(226, 232, 240, 0.48) 0%, rgba(248, 250, 252, 0.9) 100%);
+  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 900px) {
+  .data-state-panel-sample-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/src/components/dataStatePanel/samples/BaseSample.tsx b/src/components/dataStatePanel/samples/BaseSample.tsx
new file mode 100755
index 0000000..1df1974
--- /dev/null
+++ b/src/components/dataStatePanel/samples/BaseSample.tsx
@@ -0,0 +1,131 @@
+import { Button, Flex, Space, Tag, Typography } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { DataStatePanel } from '../DataStatePanel';
+import './BaseSample.css';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'data-state-panel-base',
+  componentId: 'data-state-panel',
+  title: 'Data State Panel',
+  description:
+    'loading, empty, error, ready 상태를 공통 카드로 표현하고 title, description, actions 슬롯과 compact 변형을 함께 제공하는 상태 패널입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 38,
+  features: ['docs', 'component-sample'],
+};
+
+function ReadyContent() {
+  return (
+    <Flex vertical gap={10}>
+      <Space wrap>
+        <Tag color="green">ready</Tag>
+        <Tag color="blue">12 records</Tag>
+        <Tag color="gold">synced 2m ago</Tag>
+      </Space>
+      <Paragraph style={{ marginBottom: 0 }}>
+        추천 결과가 준비되면 본문 슬롯에 표, 설명, 메타 정보를 바로 넣을 수 있습니다.
+      </Paragraph>
+    </Flex>
+  );
+}
+
+export function Sample() {
+  return (
+    <Flex vertical gap={24}>
+      <div>
+        <Text strong>Default States</Text>
+        <div className="data-state-panel-sample-grid">
+          <DataStatePanel
+            state="loading"
+            title="추천 데이터를 정리하고 있습니다."
+            description="패널 높이를 유지한 상태로 로딩 스켈레톤을 보여줍니다."
+            actions={<Button>백그라운드 실행 보기</Button>}
+          />
+          <DataStatePanel
+            state="empty"
+            title="추천 결과가 아직 없습니다."
+            description="필터를 완화하거나 수집 범위를 넓히면 추천 항목이 표시됩니다."
+            actions={
+              <>
+                <Button type="primary">조건 다시 계산</Button>
+                <Button>데이터 추가</Button>
+              </>
+            }
+          />
+          <DataStatePanel
+            state="error"
+            title="추천 결과를 가져오지 못했습니다."
+            description="API 응답이 지연되었거나 권한 검증에 실패했습니다."
+            actions={
+              <>
+                <Button type="primary" danger>
+                  다시 시도
+                </Button>
+                <Button>로그 확인</Button>
+              </>
+            }
+          />
+          <DataStatePanel
+            state="ready"
+            title="추천 결과 12건"
+            description="상태가 ready면 children 슬롯에 실제 데이터 내용을 배치합니다."
+            actions={
+              <>
+                <Button type="primary">결과 적용</Button>
+                <Button>CSV 다운로드</Button>
+              </>
+            }
+          >
+            <ReadyContent />
+          </DataStatePanel>
+        </div>
+      </div>
+
+      <div>
+        <Text strong>Compact + Mobile Sample</Text>
+        <div className="data-state-panel-sample-mobile">
+          <div className="data-state-panel-sample-mobile__frame">
+            <Flex vertical gap={12}>
+              <DataStatePanel
+                state="loading"
+                compact
+                title="모바일 패널 동기화 중"
+                description="작은 카드에서도 같은 정보 구조를 유지합니다."
+              />
+              <DataStatePanel
+                state="ready"
+                compact
+                title="오늘의 추천 3건"
+                description="액션은 모바일에서 자동 줄바꿈됩니다."
+                actions={
+                  <>
+                    <Button type="primary" size="small">
+                      적용
+                    </Button>
+                    <Button size="small">상세</Button>
+                  </>
+                }
+              >
+                <Space direction="vertical" size={6}>
+                  <Text strong>Data State Panel</Text>
+                  <Text type="secondary">공통 상태 UI를 카드 단위로 재사용</Text>
+                </Space>
+              </DataStatePanel>
+              <DataStatePanel
+                state="empty"
+                compact
+                title="표시할 카드가 없습니다."
+                description="모바일 컬럼이나 보조 패널에 그대로 넣을 수 있습니다."
+                actions={<Button size="small">필터 초기화</Button>}
+              />
+            </Flex>
+          </div>
+        </div>
+      </div>
+    </Flex>
+  );
+}
diff --git a/src/components/embeddedMap/EmbeddedMapUI.css b/src/components/embeddedMap/EmbeddedMapUI.css
new file mode 100755
index 0000000..0cda5d2
--- /dev/null
+++ b/src/components/embeddedMap/EmbeddedMapUI.css
@@ -0,0 +1,154 @@
+.embedded-map-ui {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  min-width: 0;
+}
+
+.embedded-map-ui__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.embedded-map-ui__copy {
+  min-width: 0;
+}
+
+.embedded-map-ui__copy .ant-typography {
+  margin-bottom: 0;
+}
+
+.embedded-map-ui__frame {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34%),
+    linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
+  box-shadow:
+    0 18px 40px rgba(15, 23, 42, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.embedded-map-ui__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+  border: 0;
+  background: #e2e8f0;
+}
+
+.embedded-map-ui__canvas--locked {
+  pointer-events: none;
+}
+
+.embedded-map-ui__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.embedded-map-ui__overlay-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.embedded-map-ui__radius {
+  fill: rgba(56, 189, 248, 0.18);
+  stroke: rgba(2, 132, 199, 0.92);
+  stroke-width: 0.45;
+}
+
+.embedded-map-ui__link {
+  stroke: rgba(249, 115, 22, 0.72);
+  stroke-width: 0.5;
+  stroke-dasharray: 1.2 1;
+}
+
+.embedded-map-ui__marker {
+  stroke: rgba(15, 23, 42, 0.9);
+  stroke-width: 0.5;
+}
+
+.embedded-map-ui__marker--primary {
+  fill: #0ea5e9;
+}
+
+.embedded-map-ui__marker--secondary {
+  fill: #f97316;
+}
+
+.embedded-map-ui__label {
+  position: absolute;
+  transform: translate(-50%, calc(-100% - 14px));
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
+  white-space: nowrap;
+}
+
+.embedded-map-ui__label--primary {
+  background: rgba(14, 165, 233, 0.96);
+  color: #082f49;
+}
+
+.embedded-map-ui__label--secondary {
+  background: rgba(249, 115, 22, 0.94);
+  color: #431407;
+}
+
+.embedded-map-ui__lock-badge {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: rgba(15, 23, 42, 0.82);
+  color: #f8fafc;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+}
+
+.embedded-map-ui__slot {
+  position: absolute;
+  inset: 0;
+}
+
+.embedded-map-ui__footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.embedded-map-ui__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+@media (max-width: 768px) {
+  .embedded-map-ui__header,
+  .embedded-map-ui__footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .embedded-map-ui__frame {
+    border-radius: 18px;
+  }
+
+  .embedded-map-ui__label {
+    max-width: 45vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/src/components/embeddedMap/EmbeddedMapUI.tsx b/src/components/embeddedMap/EmbeddedMapUI.tsx
new file mode 100755
index 0000000..a96b5e5
--- /dev/null
+++ b/src/components/embeddedMap/EmbeddedMapUI.tsx
@@ -0,0 +1,247 @@
+import type { ReactNode } from 'react';
+import { EnvironmentOutlined, ExportOutlined } from '@ant-design/icons';
+import { Button, Space, Tag, Typography } from 'antd';
+import './EmbeddedMapUI.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+export type EmbeddedMapUIProps = {
+  latitude: number;
+  longitude: number;
+  zoom?: number;
+  height?: number;
+  title?: string;
+  address?: string;
+  description?: string;
+  markerLabel?: string;
+  className?: string;
+  radiusMeters?: number;
+  lockViewport?: boolean;
+  secondaryMarker?: {
+    latitude: number;
+    longitude: number;
+    label?: string;
+  } | null;
+  overlay?: ReactNode;
+};
+
+type Bounds = {
+  minLatitude: number;
+  maxLatitude: number;
+  minLongitude: number;
+  maxLongitude: number;
+};
+
+function clampZoom(zoom: number) {
+  return Math.min(18, Math.max(8, zoom));
+}
+
+function metersToLatitudeDegrees(meters: number) {
+  return meters / 111320;
+}
+
+function metersToLongitudeDegrees(meters: number, latitude: number) {
+  const safeLatitude = Math.max(-89.9999, Math.min(89.9999, latitude));
+  const denominator = 111320 * Math.cos((safeLatitude * Math.PI) / 180);
+  return meters / Math.max(denominator, 0.000001);
+}
+
+function createViewUrl(latitude: number, longitude: number, zoom: number) {
+  const params = new URLSearchParams({
+    mlon: String(longitude),
+    mlat: String(latitude),
+  });
+
+  return `https://www.openstreetmap.org/?${params.toString()}#map=${clampZoom(zoom)}/${latitude}/${longitude}`;
+}
+
+function createBounds(
+  latitude: number,
+  longitude: number,
+  radiusMeters: number | undefined,
+  secondaryMarker: EmbeddedMapUIProps['secondaryMarker'],
+): Bounds {
+  const coverageMeters = Math.max(radiusMeters ?? 0, secondaryMarker ? 180 : 120, 120) * 1.8;
+  const latitudePadding = metersToLatitudeDegrees(coverageMeters);
+  const longitudePadding = metersToLongitudeDegrees(coverageMeters, latitude);
+
+  let minLatitude = latitude - latitudePadding;
+  let maxLatitude = latitude + latitudePadding;
+  let minLongitude = longitude - longitudePadding;
+  let maxLongitude = longitude + longitudePadding;
+
+  if (secondaryMarker) {
+    const extraLatitudePadding = metersToLatitudeDegrees(coverageMeters * 0.35);
+    const extraLongitudePadding = metersToLongitudeDegrees(
+      coverageMeters * 0.35,
+      (latitude + secondaryMarker.latitude) / 2,
+    );
+
+    minLatitude = Math.min(minLatitude, secondaryMarker.latitude - extraLatitudePadding);
+    maxLatitude = Math.max(maxLatitude, secondaryMarker.latitude + extraLatitudePadding);
+    minLongitude = Math.min(minLongitude, secondaryMarker.longitude - extraLongitudePadding);
+    maxLongitude = Math.max(maxLongitude, secondaryMarker.longitude + extraLongitudePadding);
+  }
+
+  return {
+    minLatitude,
+    maxLatitude,
+    minLongitude,
+    maxLongitude,
+  };
+}
+
+function createEmbedUrl(bounds: Bounds, latitude: number, longitude: number) {
+  const params = new URLSearchParams({
+    bbox: [
+      bounds.minLongitude,
+      bounds.minLatitude,
+      bounds.maxLongitude,
+      bounds.maxLatitude,
+    ].join(','),
+    layer: 'mapnik',
+    marker: `${latitude},${longitude}`,
+  });
+
+  return `https://www.openstreetmap.org/export/embed.html?${params.toString()}`;
+}
+
+function projectPoint(latitude: number, longitude: number, bounds: Bounds) {
+  const xRatio =
+    (longitude - bounds.minLongitude) / Math.max(bounds.maxLongitude - bounds.minLongitude, 0.000001);
+  const yRatio =
+    (bounds.maxLatitude - latitude) / Math.max(bounds.maxLatitude - bounds.minLatitude, 0.000001);
+
+  return {
+    x: Math.min(1, Math.max(0, xRatio)) * 100,
+    y: Math.min(1, Math.max(0, yRatio)) * 100,
+  };
+}
+
+function calculateCircleSizePercent(radiusMeters: number, bounds: Bounds, latitude: number) {
+  const diameterLongitudeDegrees = metersToLongitudeDegrees(radiusMeters * 2, latitude);
+  return (diameterLongitudeDegrees / Math.max(bounds.maxLongitude - bounds.minLongitude, 0.000001)) * 100;
+}
+
+export function EmbeddedMapUI({
+  latitude,
+  longitude,
+  zoom = 15,
+  height = 360,
+  title = '현장 위치',
+  address,
+  description = '모바일과 데스크톱에서 바로 확인할 수 있는 내장 지도입니다.',
+  markerLabel = '현장',
+  className,
+  radiusMeters,
+  lockViewport = false,
+  secondaryMarker,
+  overlay,
+}: EmbeddedMapUIProps) {
+  const resolvedZoom = clampZoom(zoom);
+  const viewUrl = createViewUrl(latitude, longitude, resolvedZoom);
+  const bounds = createBounds(latitude, longitude, radiusMeters, secondaryMarker);
+  const embedUrl = createEmbedUrl(bounds, latitude, longitude);
+  const primaryPoint = projectPoint(latitude, longitude, bounds);
+  const secondaryPoint = secondaryMarker
+    ? projectPoint(secondaryMarker.latitude, secondaryMarker.longitude, bounds)
+    : null;
+  const radiusPercent =
+    radiusMeters && radiusMeters > 0 ? calculateCircleSizePercent(radiusMeters, bounds, latitude) : null;
+
+  return (
+    <div className={['embedded-map-ui', className].filter(Boolean).join(' ')}>
+      <div className="embedded-map-ui__header">
+        <div className="embedded-map-ui__copy">
+          <Space size={8} wrap>
+            <Tag color="cyan" icon={<EnvironmentOutlined />}>
+              {markerLabel}
+            </Tag>
+            <Text type="secondary">{`${latitude.toFixed(5)}, ${longitude.toFixed(5)}`}</Text>
+          </Space>
+          <Title level={4}>{title}</Title>
+          <Paragraph>{description}</Paragraph>
+          {address ? <Text type="secondary">{address}</Text> : null}
+        </div>
+        <Button href={viewUrl} target="_blank" rel="noreferrer" icon={<ExportOutlined />}>
+          외부 지도로 열기
+        </Button>
+      </div>
+
+      <div className="embedded-map-ui__frame" style={{ height }}>
+        <iframe
+          className={[
+            'embedded-map-ui__canvas',
+            lockViewport ? 'embedded-map-ui__canvas--locked' : null,
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          src={embedUrl}
+          title={title}
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+        />
+        <div className="embedded-map-ui__overlay">
+          <svg
+            className="embedded-map-ui__overlay-svg"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+          >
+            {radiusPercent ? (
+              <circle
+                className="embedded-map-ui__radius"
+                cx={primaryPoint.x}
+                cy={primaryPoint.y}
+                r={Math.max(2, radiusPercent / 2)}
+              />
+            ) : null}
+            {secondaryPoint ? (
+              <>
+                <line
+                  className="embedded-map-ui__link"
+                  x1={primaryPoint.x}
+                  y1={primaryPoint.y}
+                  x2={secondaryPoint.x}
+                  y2={secondaryPoint.y}
+                />
+                <circle className="embedded-map-ui__marker embedded-map-ui__marker--secondary" cx={secondaryPoint.x} cy={secondaryPoint.y} r="1.8" />
+              </>
+            ) : null}
+            <circle className="embedded-map-ui__marker embedded-map-ui__marker--primary" cx={primaryPoint.x} cy={primaryPoint.y} r="2.2" />
+          </svg>
+          <div
+            className="embedded-map-ui__label embedded-map-ui__label--primary"
+            style={{ left: `${primaryPoint.x}%`, top: `${primaryPoint.y}%` }}
+          >
+            {markerLabel}
+          </div>
+          {secondaryPoint ? (
+            <div
+              className="embedded-map-ui__label embedded-map-ui__label--secondary"
+              style={{ left: `${secondaryPoint.x}%`, top: `${secondaryPoint.y}%` }}
+            >
+              {secondaryMarker?.label ?? '보조 위치'}
+            </div>
+          ) : null}
+          {lockViewport ? (
+            <div className="embedded-map-ui__lock-badge">반경 오버레이 고정</div>
+          ) : null}
+          {overlay ? <div className="embedded-map-ui__slot">{overlay}</div> : null}
+        </div>
+      </div>
+
+      <div className="embedded-map-ui__footer">
+        <div className="embedded-map-ui__meta">
+          <Tag bordered={false}>Zoom {resolvedZoom}</Tag>
+          <Tag bordered={false}>Radius {radiusMeters ? `${Math.round(radiusMeters)}m` : 'Off'}</Tag>
+          <Tag bordered={false}>{lockViewport ? 'Viewport Locked' : 'Viewport Free'}</Tag>
+          <Tag bordered={false}>Embed Map</Tag>
+        </div>
+        <Text type="secondary">
+          OpenStreetMap 임베드와 좌표 오버레이로 앱 내부에서 위치를 확인합니다. 반경 오버레이 사용 시 지도 이동은 잠금 처리합니다.
+        </Text>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/embeddedMap/index.ts b/src/components/embeddedMap/index.ts
new file mode 100755
index 0000000..b5043f6
--- /dev/null
+++ b/src/components/embeddedMap/index.ts
@@ -0,0 +1,2 @@
+export { EmbeddedMapUI } from './EmbeddedMapUI';
+export type { EmbeddedMapUIProps } from './EmbeddedMapUI';
diff --git a/src/components/embeddedMap/samples/BaseSample.tsx b/src/components/embeddedMap/samples/BaseSample.tsx
new file mode 100755
index 0000000..18f9077
--- /dev/null
+++ b/src/components/embeddedMap/samples/BaseSample.tsx
@@ -0,0 +1,29 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { EmbeddedMapUI } from '../EmbeddedMapUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'embedded-map-ui-base',
+  componentId: 'embedded-map-ui',
+  title: 'Embedded Map UI',
+  description: '앱 내부에 지도를 직접 내장해 모바일과 데스크톱에서 같은 위치 정보를 바로 보여주는 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 70,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <EmbeddedMapUI
+      title="서울역 출발 허브"
+      address="서울 중구 한강대로 405"
+      description="출발 허브와 주변 도로 상태를 앱 안에서 바로 확인합니다."
+      latitude={37.55472}
+      longitude={126.97083}
+      zoom={15}
+      height={320}
+      markerLabel="출발"
+    />
+  );
+}
diff --git a/src/components/embeddedMap/samples/Sample.tsx b/src/components/embeddedMap/samples/Sample.tsx
new file mode 100755
index 0000000..0b152b3
--- /dev/null
+++ b/src/components/embeddedMap/samples/Sample.tsx
@@ -0,0 +1,52 @@
+import { Card, Flex, Typography } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { EmbeddedMapUI } from '../EmbeddedMapUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'embedded-map-ui',
+  componentId: 'embedded-map-ui',
+  title: 'Embedded Map UI',
+  description: '앱 내부에 지도를 직접 내장해 모바일과 데스크톱에서 같은 위치 정보를 바로 보여주는 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 70,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <Card title="Embedded Map UI Sample" extra={<Text code>components/embeddedMap</Text>}>
+      <Paragraph>
+        배송지나 현장 위치를 상세 화면 안에서 바로 보여줄 수 있도록 iframe 기반 지도를 제공합니다.
+        모바일에서는 세로로 자연스럽게 줄고, 외부 지도 열기 링크도 함께 제공합니다.
+      </Paragraph>
+
+      <Flex vertical gap={20}>
+        <EmbeddedMapUI
+          title="서울역 출발 허브"
+          address="서울 중구 한강대로 405"
+          description="출발 허브와 주변 도로 상태를 앱 안에서 바로 확인하는 예시입니다."
+          latitude={37.55472}
+          longitude={126.97083}
+          zoom={15}
+          height={320}
+          markerLabel="출발"
+        />
+
+        <EmbeddedMapUI
+          title="모바일 배송지 확인"
+          address="서울 강남구 테헤란로 521"
+          description="상세 카드 안에서 바로 열어 기사나 운영자가 휴대폰에서도 위치를 확인할 수 있습니다."
+          latitude={37.50632}
+          longitude={127.05323}
+          zoom={16}
+          height={280}
+          markerLabel="도착"
+        />
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/emptyIllustrationCard/EmptyIllustrationCard.css b/src/components/emptyIllustrationCard/EmptyIllustrationCard.css
new file mode 100755
index 0000000..d461355
--- /dev/null
+++ b/src/components/emptyIllustrationCard/EmptyIllustrationCard.css
@@ -0,0 +1,131 @@
+.empty-illustration-card {
+  --empty-card-border: rgba(148, 163, 184, 0.22);
+  --empty-card-bg: linear-gradient(145deg, #fffdf8 0%, #fff4e4 55%, #eef5ff 100%);
+  --empty-card-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  gap: 24px;
+  align-items: center;
+  padding: 28px;
+  border: 1px solid var(--empty-card-border);
+  border-radius: 24px;
+  background: var(--empty-card-bg);
+  box-shadow: var(--empty-card-shadow);
+  overflow: hidden;
+}
+
+.empty-illustration-card--compact {
+  grid-template-columns: 132px minmax(0, 1fr);
+  gap: 18px;
+  padding: 20px;
+  border-radius: 18px;
+}
+
+.empty-illustration-card__visual {
+  display: flex;
+  justify-content: center;
+}
+
+.empty-illustration-card__art {
+  position: relative;
+  width: min(100%, 220px);
+  aspect-ratio: 1 / 1;
+}
+
+.empty-illustration-card__art-device {
+  position: absolute;
+  inset: 18% 20% 22%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 247, 237, 0.92));
+  box-shadow: 0 18px 40px rgba(249, 115, 22, 0.12);
+  backdrop-filter: blur(6px);
+}
+
+.empty-illustration-card__art-line {
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.28);
+}
+
+.empty-illustration-card__art-line--strong {
+  width: 72%;
+  background: linear-gradient(90deg, rgba(249, 115, 22, 0.9), rgba(251, 191, 36, 0.85));
+}
+
+.empty-illustration-card__art-line--short {
+  width: 48%;
+}
+
+.empty-illustration-card__art-orb,
+.empty-illustration-card__art-ring {
+  position: absolute;
+  border-radius: 999px;
+}
+
+.empty-illustration-card__art-orb--orange {
+  top: 8%;
+  right: 10%;
+  width: 46px;
+  height: 46px;
+  background: radial-gradient(circle at 30% 30%, #fdba74, #f97316 68%);
+  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.2);
+}
+
+.empty-illustration-card__art-orb--blue {
+  bottom: 10%;
+  left: 12%;
+  width: 34px;
+  height: 34px;
+  background: radial-gradient(circle at 30% 30%, #bfdbfe, #2563eb 72%);
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
+}
+
+.empty-illustration-card__art-ring {
+  inset: 4%;
+  border: 1px dashed rgba(59, 130, 246, 0.2);
+}
+
+.empty-illustration-card__content {
+  min-width: 0;
+}
+
+.empty-illustration-card__eyebrow.ant-typography {
+  margin: 0;
+  color: #c2410c;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.empty-illustration-card__title.ant-typography {
+  margin: 0;
+  color: #111827;
+}
+
+.empty-illustration-card__description.ant-typography {
+  margin: 0;
+  color: rgba(55, 65, 81, 0.82);
+}
+
+.empty-illustration-card__actions {
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  .empty-illustration-card,
+  .empty-illustration-card--compact {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 18px;
+  }
+
+  .empty-illustration-card__art {
+    width: min(100%, 180px);
+  }
+}
diff --git a/src/components/emptyIllustrationCard/EmptyIllustrationCard.tsx b/src/components/emptyIllustrationCard/EmptyIllustrationCard.tsx
new file mode 100755
index 0000000..b6bacb3
--- /dev/null
+++ b/src/components/emptyIllustrationCard/EmptyIllustrationCard.tsx
@@ -0,0 +1,84 @@
+import { Button, Flex, Typography } from 'antd';
+import type { ButtonProps } from 'antd';
+import type { ReactNode } from 'react';
+import './EmptyIllustrationCard.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+export type EmptyIllustrationCardVariant = 'default' | 'compact';
+
+export type EmptyIllustrationCardProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  ctaLabel?: ReactNode;
+  onCtaClick?: ButtonProps['onClick'];
+  ctaProps?: Omit<ButtonProps, 'children' | 'onClick'>;
+  variant?: EmptyIllustrationCardVariant;
+  illustration?: ReactNode;
+  eyebrow?: ReactNode;
+  extra?: ReactNode;
+  className?: string;
+};
+
+function DefaultIllustration() {
+  return (
+    <div className="empty-illustration-card__art" aria-hidden="true">
+      <div className="empty-illustration-card__art-device">
+        <span className="empty-illustration-card__art-line empty-illustration-card__art-line--strong" />
+        <span className="empty-illustration-card__art-line" />
+        <span className="empty-illustration-card__art-line empty-illustration-card__art-line--short" />
+      </div>
+      <div className="empty-illustration-card__art-orb empty-illustration-card__art-orb--orange" />
+      <div className="empty-illustration-card__art-orb empty-illustration-card__art-orb--blue" />
+      <div className="empty-illustration-card__art-ring" />
+    </div>
+  );
+}
+
+export function EmptyIllustrationCard({
+  title,
+  description,
+  ctaLabel,
+  onCtaClick,
+  ctaProps,
+  variant = 'default',
+  illustration,
+  eyebrow,
+  extra,
+  className,
+}: EmptyIllustrationCardProps) {
+  const rootClassName = [
+    'empty-illustration-card',
+    `empty-illustration-card--${variant}`,
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <section className={rootClassName}>
+      <div className="empty-illustration-card__visual">{illustration ?? <DefaultIllustration />}</div>
+      <Flex vertical gap={variant === 'compact' ? 10 : 14} className="empty-illustration-card__content">
+        {eyebrow ? <Text className="empty-illustration-card__eyebrow">{eyebrow}</Text> : null}
+        <Flex vertical gap={6}>
+          <Title level={variant === 'compact' ? 5 : 4} className="empty-illustration-card__title">
+            {title}
+          </Title>
+          {description ? (
+            <Paragraph className="empty-illustration-card__description">{description}</Paragraph>
+          ) : null}
+        </Flex>
+        {ctaLabel || extra ? (
+          <Flex gap={10} wrap="wrap" className="empty-illustration-card__actions">
+            {ctaLabel ? (
+              <Button type="primary" onClick={onCtaClick} {...ctaProps}>
+                {ctaLabel}
+              </Button>
+            ) : null}
+            {extra}
+          </Flex>
+        ) : null}
+      </Flex>
+    </section>
+  );
+}
diff --git a/src/components/emptyIllustrationCard/index.ts b/src/components/emptyIllustrationCard/index.ts
new file mode 100755
index 0000000..d491046
--- /dev/null
+++ b/src/components/emptyIllustrationCard/index.ts
@@ -0,0 +1 @@
+export * from './EmptyIllustrationCard';
diff --git a/src/components/emptyIllustrationCard/samples/BaseSample.tsx b/src/components/emptyIllustrationCard/samples/BaseSample.tsx
new file mode 100755
index 0000000..dbd9731
--- /dev/null
+++ b/src/components/emptyIllustrationCard/samples/BaseSample.tsx
@@ -0,0 +1,34 @@
+import { Flex } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { EmptyIllustrationCard } from '../EmptyIllustrationCard';
+
+export const sampleMeta: SampleMeta = {
+  id: 'empty-illustration-card-base',
+  componentId: 'empty-illustration-card',
+  title: 'Empty Illustration Card',
+  description: '일러스트 영역과 제목, 설명, CTA를 함께 배치하는 empty 상태 카드입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 38,
+  features: ['docs', 'component-sample'],
+};
+
+export function Sample() {
+  return (
+    <Flex vertical gap={16}>
+      <EmptyIllustrationCard
+        eyebrow="No content"
+        title="아직 등록된 자동화 작업이 없습니다."
+        description="새 작업을 추가하면 우선순위와 진행 상태를 이 카드에서 바로 안내할 수 있습니다."
+        ctaLabel="작업 등록"
+      />
+      <EmptyIllustrationCard
+        variant="compact"
+        title="검색 결과가 없습니다."
+        description="필터를 조정하거나 다른 키워드로 다시 찾아보세요."
+        ctaLabel="필터 초기화"
+      />
+    </Flex>
+  );
+}
diff --git a/src/components/evidenceAttachmentStrip/EvidenceAttachmentStrip.css b/src/components/evidenceAttachmentStrip/EvidenceAttachmentStrip.css
new file mode 100755
index 0000000..3a4a349
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/EvidenceAttachmentStrip.css
@@ -0,0 +1,173 @@
+.evidence-attachment-strip {
+  width: 100%;
+}
+
+.evidence-attachment-strip__header {
+  margin-bottom: 12px;
+}
+
+.evidence-attachment-strip__description.ant-typography {
+  margin-bottom: 0;
+}
+
+.evidence-attachment-strip__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.evidence-attachment-strip__card.ant-card {
+  height: 100%;
+  border-radius: 18px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
+}
+
+.evidence-attachment-strip__card .ant-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.evidence-attachment-strip__actions {
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
+.evidence-attachment-strip__card-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.evidence-attachment-strip__meta {
+  min-width: 0;
+}
+
+.evidence-attachment-strip__meta-row {
+  align-items: center;
+}
+
+.evidence-attachment-strip__title {
+  min-width: 0;
+}
+
+.evidence-attachment-strip__description-text.ant-typography {
+  display: block;
+  margin-bottom: 0;
+  overflow-wrap: anywhere;
+}
+
+.evidence-attachment-strip__badge {
+  flex: 0 0 auto;
+  margin-inline-end: 0;
+}
+
+.evidence-attachment-strip__summary {
+  justify-content: space-between;
+}
+
+.evidence-attachment-strip__overflow.ant-typography {
+  margin-bottom: 0;
+}
+
+.evidence-attachment-strip__empty.ant-empty {
+  margin: 0;
+  padding: 24px 12px;
+  border-radius: 18px;
+  border: 1px dashed rgba(148, 163, 184, 0.28);
+  background: rgba(248, 250, 252, 0.78);
+}
+
+.evidence-attachment-preview-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.evidence-attachment-preview-body--compact {
+  min-height: 220px;
+}
+
+.evidence-attachment-preview-body__image {
+  width: 100%;
+  max-height: calc(100vh - 320px);
+  border-radius: 14px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  object-fit: contain;
+  background: linear-gradient(180deg, rgba(241, 245, 249, 0.9), rgba(226, 232, 240, 0.92));
+}
+
+.evidence-attachment-preview-body__image--compact {
+  height: 220px;
+  max-height: 220px;
+}
+
+.evidence-attachment-preview-body__frame-wrap {
+  width: 100%;
+  height: calc(100vh - 320px);
+  min-height: 480px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.evidence-attachment-preview-body__frame-wrap--compact {
+  height: 220px;
+  min-height: 220px;
+}
+
+.evidence-attachment-preview-body__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.evidence-attachment-preview-body__media-wrap,
+.evidence-attachment-preview-body__audio-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 220px;
+  padding: 18px;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: linear-gradient(180deg, rgba(241, 245, 249, 0.84), rgba(255, 255, 255, 0.96));
+}
+
+.evidence-attachment-preview-body__media {
+  width: 100%;
+  max-height: min(72vh, 720px);
+  border-radius: 12px;
+  background: #020617;
+}
+
+.evidence-attachment-preview-body__audio {
+  width: min(100%, 720px);
+}
+
+.evidence-attachment-preview-body__previewer {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.evidence-attachment-preview-body__previewer .previewer-ui {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+@media (max-width: 767px) {
+  .evidence-attachment-strip__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/src/components/evidenceAttachmentStrip/EvidenceAttachmentStrip.tsx b/src/components/evidenceAttachmentStrip/EvidenceAttachmentStrip.tsx
new file mode 100755
index 0000000..5373d53
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/EvidenceAttachmentStrip.tsx
@@ -0,0 +1,377 @@
+import {
+  AudioOutlined,
+  CodeOutlined,
+  CopyOutlined,
+  EyeOutlined,
+  FileImageOutlined,
+  FileMarkdownOutlined,
+  FilePdfOutlined,
+  FileTextOutlined,
+  LinkOutlined,
+  PlayCircleOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Empty, Flex, Space, Tag, Typography, message } from 'antd';
+import type { ReactNode } from 'react';
+import { InlineImage } from '../common/InlineImage';
+import { PreviewerUI } from '../previewer';
+import type {
+  EvidenceAttachmentItem,
+  EvidenceAttachmentKind,
+  EvidenceAttachmentPreviewBodyProps,
+  EvidenceAttachmentStripProps,
+} from './types';
+import './EvidenceAttachmentStrip.css';
+
+const { Paragraph, Text } = Typography;
+
+function getAttachmentTypeLabel(kind: EvidenceAttachmentKind) {
+  switch (kind) {
+    case 'image':
+      return 'Image';
+    case 'markdown':
+      return 'Markdown';
+    case 'code':
+      return 'Code';
+    case 'text':
+      return 'Text';
+    case 'json':
+      return 'JSON';
+    case 'preview':
+      return 'Preview';
+    case 'video':
+      return 'Video';
+    case 'audio':
+      return 'Audio';
+    case 'pdf':
+      return 'PDF';
+    case 'empty':
+      return 'Empty';
+    default:
+      return 'Attachment';
+  }
+}
+
+function getAttachmentTypeColor(kind: EvidenceAttachmentKind) {
+  switch (kind) {
+    case 'image':
+      return 'green';
+    case 'markdown':
+      return 'geekblue';
+    case 'code':
+      return 'cyan';
+    case 'text':
+      return 'blue';
+    case 'json':
+      return 'volcano';
+    case 'preview':
+      return 'purple';
+    case 'video':
+      return 'magenta';
+    case 'audio':
+      return 'gold';
+    case 'pdf':
+      return 'red';
+    case 'empty':
+      return 'default';
+    default:
+      return 'default';
+  }
+}
+
+function getAttachmentTypeIcon(kind: EvidenceAttachmentKind): ReactNode {
+  switch (kind) {
+    case 'image':
+      return <FileImageOutlined />;
+    case 'markdown':
+      return <FileMarkdownOutlined />;
+    case 'code':
+      return <CodeOutlined />;
+    case 'text':
+      return <FileTextOutlined />;
+    case 'json':
+      return <CodeOutlined />;
+    case 'preview':
+      return <LinkOutlined />;
+    case 'video':
+      return <PlayCircleOutlined />;
+    case 'audio':
+      return <AudioOutlined />;
+    case 'pdf':
+      return <FilePdfOutlined />;
+    case 'empty':
+      return <FileTextOutlined />;
+    default:
+      return <FileTextOutlined />;
+  }
+}
+
+async function copyAttachmentValue(attachment: EvidenceAttachmentItem) {
+  const copyValue = attachment.copyValue ?? attachment.value;
+
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(copyValue);
+    return;
+  }
+
+  if (typeof document === 'undefined') {
+    throw new Error('clipboard-unavailable');
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = copyValue;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
+
+function resolvePreviewerType(kind: EvidenceAttachmentKind) {
+  switch (kind) {
+    case 'markdown':
+      return 'markdown';
+    case 'code':
+      return 'code';
+    case 'json':
+      return 'json';
+    case 'empty':
+      return 'empty';
+    default:
+      return 'text';
+  }
+}
+
+export function EvidenceAttachmentPreviewBody({
+  attachment,
+  compact = false,
+  height,
+}: EvidenceAttachmentPreviewBodyProps) {
+  const previewHeight = height ?? (compact ? 220 : 'calc(100dvh - 280px)');
+
+  if (attachment.kind === 'image') {
+    return (
+      <InlineImage
+        className={[
+          'evidence-attachment-preview-body__image',
+          compact ? 'evidence-attachment-preview-body__image--compact' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        src={attachment.value}
+        alt={typeof attachment.title === 'string' ? attachment.title : 'attachment'}
+        fallbackText="첨부 이미지를 불러오지 못했습니다."
+      />
+    );
+  }
+
+  if (attachment.kind === 'preview' || attachment.kind === 'pdf') {
+    return (
+      <div
+        className={[
+          'evidence-attachment-preview-body__frame-wrap',
+          compact ? 'evidence-attachment-preview-body__frame-wrap--compact' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <iframe
+          className="evidence-attachment-preview-body__frame"
+          src={attachment.value}
+          title={typeof attachment.title === 'string' ? attachment.title : 'attachment-preview'}
+          loading="lazy"
+          referrerPolicy="no-referrer"
+        />
+      </div>
+    );
+  }
+
+  if (attachment.kind === 'video') {
+    return (
+      <div className="evidence-attachment-preview-body__media-wrap">
+        <video className="evidence-attachment-preview-body__media" src={attachment.value} controls preload="metadata" />
+      </div>
+    );
+  }
+
+  if (attachment.kind === 'audio') {
+    return (
+      <div className="evidence-attachment-preview-body__audio-wrap">
+        <audio className="evidence-attachment-preview-body__audio" src={attachment.value} controls preload="metadata" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={[
+        'evidence-attachment-preview-body',
+        compact ? 'evidence-attachment-preview-body--compact' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <div className="evidence-attachment-preview-body__previewer">
+        <PreviewerUI
+          type={resolvePreviewerType(attachment.kind)}
+          title={attachment.title}
+          description={attachment.description}
+          showHeader={false}
+          copyable={false}
+          maximizable={false}
+          value={attachment.value}
+          language={attachment.language}
+          format={attachment.format}
+          height={previewHeight}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function EvidenceAttachmentStrip({
+  attachments,
+  onPreview,
+  onCopy,
+  maxVisible,
+  compact = false,
+  emptyText = '표시할 첨부 자료가 없습니다.',
+  title,
+  description,
+  className,
+  previewBodyHeight,
+}: EvidenceAttachmentStripProps) {
+  const visibleAttachments =
+    typeof maxVisible === 'number' && maxVisible >= 0 ? attachments.slice(0, maxVisible) : attachments;
+  const overflowCount = Math.max(0, attachments.length - visibleAttachments.length);
+
+  async function handleCopy(attachment: EvidenceAttachmentItem) {
+    try {
+      if (onCopy) {
+        await onCopy(attachment);
+        return;
+      }
+
+      await copyAttachmentValue(attachment);
+      message.success('복사했습니다.');
+    } catch {
+      message.error('복사에 실패했습니다.');
+    }
+  }
+
+  if (attachments.length === 0) {
+    return (
+      <div className={['evidence-attachment-strip', className].filter(Boolean).join(' ')}>
+        {title || description ? (
+          <div className="evidence-attachment-strip__header">
+            {title ? <Text strong>{title}</Text> : null}
+            {description ? (
+              <Paragraph type="secondary" className="evidence-attachment-strip__description">
+                {description}
+              </Paragraph>
+            ) : null}
+          </div>
+        ) : null}
+        <Empty className="evidence-attachment-strip__empty" description={emptyText} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={['evidence-attachment-strip', className].filter(Boolean).join(' ')}>
+      {title || description ? (
+        <Flex vertical gap={4} className="evidence-attachment-strip__header">
+          {title ? <Text strong>{title}</Text> : null}
+          {description ? (
+            <Paragraph type="secondary" className="evidence-attachment-strip__description">
+              {description}
+            </Paragraph>
+          ) : null}
+        </Flex>
+      ) : null}
+
+      <div className="evidence-attachment-strip__grid">
+        {visibleAttachments.map((attachment) => (
+          <Card
+            key={attachment.key}
+            size="small"
+            className="evidence-attachment-strip__card"
+            extra={
+              <Space size={4} className="evidence-attachment-strip__actions">
+                <Button
+                  aria-label="복사"
+                  size="small"
+                  type="text"
+                  icon={<CopyOutlined />}
+                  onClick={() => {
+                    void handleCopy(attachment);
+                  }}
+                />
+                {attachment.linkUrl ? (
+                  <Button
+                    type="link"
+                    size="small"
+                    href={attachment.linkUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{ paddingInline: 0 }}
+                    icon={<LinkOutlined />}
+                  >
+                    링크
+                  </Button>
+                ) : null}
+                {onPreview ? (
+                  <Button
+                    size="small"
+                    icon={<EyeOutlined />}
+                    onClick={() => {
+                      void onPreview(attachment);
+                    }}
+                  >
+                    미리보기
+                  </Button>
+                ) : null}
+              </Space>
+            }
+          >
+            <Flex vertical gap={10} className="evidence-attachment-strip__card-copy">
+              <div className="evidence-attachment-strip__meta">
+                <Flex gap={8} className="evidence-attachment-strip__meta-row">
+                  <Tag
+                    color={getAttachmentTypeColor(attachment.kind)}
+                    icon={getAttachmentTypeIcon(attachment.kind)}
+                    className="evidence-attachment-strip__badge"
+                  >
+                    {getAttachmentTypeLabel(attachment.kind)}
+                  </Tag>
+                </Flex>
+                <Text strong className="evidence-attachment-strip__title">
+                  {attachment.title}
+                </Text>
+                {attachment.description ? (
+                  <Text type="secondary" className="evidence-attachment-strip__description-text">
+                    {attachment.description}
+                  </Text>
+                ) : null}
+              </div>
+              <EvidenceAttachmentPreviewBody
+                attachment={attachment}
+                compact={compact}
+                height={previewBodyHeight}
+              />
+            </Flex>
+          </Card>
+        ))}
+      </div>
+
+      {overflowCount > 0 ? (
+        <Flex align="center" className="evidence-attachment-strip__summary">
+          <Text type="secondary" className="evidence-attachment-strip__overflow">
+            {`추가 첨부 ${overflowCount}건은 상세 미리보기에서 확인하세요.`}
+          </Text>
+        </Flex>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/evidenceAttachmentStrip/index.ts b/src/components/evidenceAttachmentStrip/index.ts
new file mode 100755
index 0000000..4d23a64
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/index.ts
@@ -0,0 +1,8 @@
+export { EvidenceAttachmentPreviewBody, EvidenceAttachmentStrip } from './EvidenceAttachmentStrip';
+export type {
+  EvidenceAttachmentActionHandler,
+  EvidenceAttachmentItem,
+  EvidenceAttachmentKind,
+  EvidenceAttachmentPreviewBodyProps,
+  EvidenceAttachmentStripProps,
+} from './types';
diff --git a/src/components/evidenceAttachmentStrip/samples/BaseSample.tsx b/src/components/evidenceAttachmentStrip/samples/BaseSample.tsx
new file mode 100755
index 0000000..fc13751
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/samples/BaseSample.tsx
@@ -0,0 +1,75 @@
+import { App } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import {
+  type EvidenceAttachmentItem,
+  EvidenceAttachmentStrip,
+} from '../index';
+
+export const sampleMeta: SampleMeta = {
+  id: 'evidence-attachment-strip-ui-base',
+  componentId: 'evidence-attachment-strip-ui',
+  title: 'Evidence Attachment Strip UI',
+  description:
+    '스크린샷, 문서, 로그, 링크를 같은 카드 스트립으로 정리하고 링크 열기, 복사, 미리보기 액션을 공통 제공하는 첨부 UI입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 58,
+  features: ['docs', 'component-sample'],
+};
+
+const baseAttachments: EvidenceAttachmentItem[] = [
+  {
+    key: 'image',
+    kind: 'image',
+    title: 'widget-gps-sample.png',
+    description: 'docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
+    linkUrl: '/docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
+    value: '/docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
+  },
+  {
+    key: 'markdown',
+    kind: 'markdown',
+    title: '2026-04-09.md',
+    description: 'docs/worklogs/2026-04-09.md',
+    linkUrl: '/docs/worklogs/2026-04-09.md',
+    value: '# Worklog\n- Evidence Attachment Strip UI 정리\n- 작업일지 카드 미리보기 제공',
+  },
+  {
+    key: 'preview',
+    kind: 'preview',
+    title: 'Release Preview',
+    description: 'https://release.example.local/plan/board-post-14',
+    linkUrl: 'https://release.example.local/plan/board-post-14',
+    value: 'https://release.example.local/plan/board-post-14',
+  },
+  {
+    key: 'code',
+    kind: 'code',
+    title: 'commands.log',
+    description: '실행 로그',
+    language: 'bash',
+    value: 'npm run build\nnpm run preview',
+  },
+];
+
+export function Sample() {
+  const { message } = App.useApp();
+
+  return (
+    <EvidenceAttachmentStrip
+      title="산출물 Preview"
+      description="작업일지, 이미지, 링크, 로그를 같은 패턴으로 정리합니다."
+      attachments={baseAttachments}
+      compact
+      onPreview={(attachment) => {
+        message.info(`${String(attachment.title)} 미리보기 진입`);
+      }}
+      onCopy={async (attachment) => {
+        await navigator.clipboard.writeText(attachment.copyValue ?? attachment.value);
+        message.success(`${String(attachment.title)} 복사`);
+      }}
+      maxVisible={3}
+    />
+  );
+}
diff --git a/src/components/evidenceAttachmentStrip/samples/Sample.tsx b/src/components/evidenceAttachmentStrip/samples/Sample.tsx
new file mode 100755
index 0000000..17d3f1c
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/samples/Sample.tsx
@@ -0,0 +1,144 @@
+import { App, Card, Flex, Modal, Space, Switch, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../widgets/core';
+import {
+  type EvidenceAttachmentItem,
+  EvidenceAttachmentPreviewBody,
+  EvidenceAttachmentStrip,
+} from '../index';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'evidence-attachment-strip-ui-showcase',
+  componentId: 'evidence-attachment-strip-ui',
+  title: 'Evidence Attachment Strip Showcase',
+  description: '지원 타입별 카드와 모바일 compact 배치를 함께 확인하는 샘플입니다.',
+  category: 'Components',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 59,
+  features: ['docs', 'component-sample'],
+};
+
+const showcaseAttachments: EvidenceAttachmentItem[] = [
+  {
+    key: 'image',
+    kind: 'image',
+    title: '화면 캡처',
+    description: '스크린샷 산출물',
+    linkUrl: '/docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
+    value: '/docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
+  },
+  {
+    key: 'markdown',
+    kind: 'markdown',
+    title: '작업일지',
+    description: '마크다운 문서',
+    value: '# Summary\n- Preview strip 적용\n- 공통 액션 정리',
+  },
+  {
+    key: 'code',
+    kind: 'code',
+    title: 'patch.diff',
+    description: '코드 변경',
+    language: 'diff',
+    value: '- old card grid\n+ EvidenceAttachmentStrip',
+  },
+  {
+    key: 'text',
+    kind: 'text',
+    title: 'memo.txt',
+    description: '단순 텍스트',
+    value: 'Plan/Board 공통 UI 후보 검토 메모',
+  },
+  {
+    key: 'json',
+    kind: 'json',
+    title: 'meta.json',
+    description: '메타 정보',
+    value: '{\n  "kind": "json",\n  "count": 4\n}',
+  },
+  {
+    key: 'video',
+    kind: 'video',
+    title: 'demo.mp4',
+    description: '비디오 산출물',
+    linkUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+    value: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+  },
+  {
+    key: 'audio',
+    kind: 'audio',
+    title: 'voice.ogg',
+    description: '오디오 산출물',
+    linkUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
+    value: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
+  },
+  {
+    key: 'pdf',
+    kind: 'pdf',
+    title: 'sample.pdf',
+    description: 'PDF 문서',
+    linkUrl: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
+    value: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
+  },
+  {
+    key: 'empty',
+    kind: 'empty',
+    title: 'unsupported.bin',
+    description: '지원하지 않는 형식',
+    value: '미리보기를 지원하지 않는 형식입니다.',
+  },
+];
+
+export function Sample() {
+  const { message } = App.useApp();
+  const [compact, setCompact] = useState(false);
+  const [selectedAttachment, setSelectedAttachment] = useState<EvidenceAttachmentItem | null>(null);
+
+  return (
+    <Flex vertical gap={16}>
+      <Card
+        title="Evidence Attachment Strip UI"
+        extra={
+          <Space align="center">
+            <Text type="secondary">Compact</Text>
+            <Switch checked={compact} onChange={setCompact} />
+          </Space>
+        }
+      >
+        <Paragraph>
+          Plan/Board 상세 화면에서 반복되는 산출물 카드 그리드를 공통 컴포넌트로 치환하는 예시입니다.
+        </Paragraph>
+        <EvidenceAttachmentStrip
+          title="지원 타입 전체"
+          description="이미지, markdown, preview, 코드, 텍스트, json, video, audio, pdf, empty"
+          attachments={showcaseAttachments}
+          compact={compact}
+          onPreview={(attachment) => {
+            setSelectedAttachment(attachment);
+          }}
+          onCopy={async (attachment) => {
+            await navigator.clipboard.writeText(attachment.copyValue ?? attachment.value);
+            message.success(`${String(attachment.title)} 복사`);
+          }}
+        />
+      </Card>
+
+      <Modal
+        open={Boolean(selectedAttachment)}
+        title={selectedAttachment?.title ?? 'Attachment Preview'}
+        footer={null}
+        width={1080}
+        onCancel={() => {
+          setSelectedAttachment(null);
+        }}
+      >
+        {selectedAttachment ? (
+          <EvidenceAttachmentPreviewBody attachment={selectedAttachment} />
+        ) : null}
+      </Modal>
+    </Flex>
+  );
+}
diff --git a/src/components/evidenceAttachmentStrip/types/evidence-attachment-strip.ts b/src/components/evidenceAttachmentStrip/types/evidence-attachment-strip.ts
new file mode 100755
index 0000000..93ca5f7
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/types/evidence-attachment-strip.ts
@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import type { PreviewerFormat } from '../../previewer/types';
+
+export type EvidenceAttachmentKind =
+  | 'image'
+  | 'markdown'
+  | 'code'
+  | 'text'
+  | 'json'
+  | 'preview'
+  | 'video'
+  | 'audio'
+  | 'pdf'
+  | 'empty';
+
+export type EvidenceAttachmentItem = {
+  key: string;
+  kind: EvidenceAttachmentKind;
+  title: ReactNode;
+  description?: ReactNode;
+  value: string;
+  linkUrl?: string;
+  language?: string;
+  format?: PreviewerFormat;
+  copyValue?: string;
+};
+
+export type EvidenceAttachmentActionHandler = (
+  attachment: EvidenceAttachmentItem,
+) => void | Promise<void>;
+
+export type EvidenceAttachmentPreviewBodyProps = {
+  attachment: EvidenceAttachmentItem;
+  compact?: boolean;
+  height?: number | string;
+};
+
+export type EvidenceAttachmentStripProps = {
+  attachments: EvidenceAttachmentItem[];
+  onPreview?: EvidenceAttachmentActionHandler;
+  onCopy?: EvidenceAttachmentActionHandler;
+  maxVisible?: number;
+  compact?: boolean;
+  emptyText?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  className?: string;
+  previewBodyHeight?: number | string;
+};
diff --git a/src/components/evidenceAttachmentStrip/types/index.ts b/src/components/evidenceAttachmentStrip/types/index.ts
new file mode 100755
index 0000000..9f99d71
--- /dev/null
+++ b/src/components/evidenceAttachmentStrip/types/index.ts
@@ -0,0 +1,7 @@
+export type {
+  EvidenceAttachmentActionHandler,
+  EvidenceAttachmentItem,
+  EvidenceAttachmentKind,
+  EvidenceAttachmentPreviewBodyProps,
+  EvidenceAttachmentStripProps,
+} from './evidence-attachment-strip';
diff --git a/src/components/formField/FormField.css b/src/components/formField/FormField.css
new file mode 100755
index 0000000..b94e059
--- /dev/null
+++ b/src/components/formField/FormField.css
@@ -0,0 +1,7 @@
+.form-field {
+  margin-bottom: 16px;
+}
+
+.form-field--disabled {
+  opacity: 0.72;
+}
diff --git a/src/components/formField/FormField.tsx b/src/components/formField/FormField.tsx
new file mode 100755
index 0000000..c4486d8
--- /dev/null
+++ b/src/components/formField/FormField.tsx
@@ -0,0 +1,89 @@
+import { Form, Typography } from 'antd';
+import type { FormItemProps } from 'antd';
+import type { ReactElement, ReactNode } from 'react';
+import { cloneElement, isValidElement } from 'react';
+import './FormField.css';
+
+const { Text } = Typography;
+
+export type FormFieldRenderState = {
+  disabled?: boolean;
+  status?: 'error' | 'warning';
+  required?: boolean;
+};
+
+export type FormFieldProps = Omit<FormItemProps, 'children' | 'help' | 'required'> & {
+  label: ReactNode;
+  required?: boolean;
+  help?: ReactNode;
+  error?: ReactNode;
+  disabled?: boolean;
+  children: ReactNode | ((state: FormFieldRenderState) => ReactNode);
+};
+
+function renderChild(
+  children: FormFieldProps['children'],
+  state: FormFieldRenderState,
+) {
+  if (typeof children === 'function') {
+    return children(state);
+  }
+
+  if (!isValidElement(children)) {
+    return children;
+  }
+
+  const child = children as ReactElement<Record<string, unknown>>;
+
+  return cloneElement(child, {
+    disabled: child.props.disabled ?? state.disabled,
+    status: child.props.status ?? state.status,
+  });
+}
+
+export function FormField({
+  label,
+  required,
+  help,
+  error,
+  disabled,
+  children,
+  validateStatus,
+  extra,
+  className,
+  ...restProps
+}: FormFieldProps) {
+  const status = error ? 'error' : validateStatus;
+  const childStatus = status === 'error' || status === 'warning' ? status : undefined;
+  const mergedClassName = [
+    'form-field',
+    disabled ? 'form-field--disabled' : '',
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Form.Item
+      {...restProps}
+      className={mergedClassName}
+      label={label}
+      required={required}
+      validateStatus={status}
+      help={error ?? help}
+      extra={
+        extra ? (
+          extra
+        ) : required ? (
+          <Text type="secondary">필수 입력 항목입니다.</Text>
+        ) : undefined
+      }
+    >
+      {renderChild(children, {
+        disabled,
+        status: childStatus,
+        required,
+      })}
+    </Form.Item>
+  );
+}
diff --git a/src/components/formField/index.ts b/src/components/formField/index.ts
new file mode 100755
index 0000000..dfeb374
--- /dev/null
+++ b/src/components/formField/index.ts
@@ -0,0 +1 @@
+export * from './FormField';
diff --git a/src/components/formField/samples/BaseSample.tsx b/src/components/formField/samples/BaseSample.tsx
new file mode 100755
index 0000000..87bec6a
--- /dev/null
+++ b/src/components/formField/samples/BaseSample.tsx
@@ -0,0 +1,49 @@
+import { Form } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../widgets/core';
+import { InputUI } from '../../inputs/primitives/input';
+import { SelectUI } from '../../inputs/select';
+import { FormField } from '../FormField';
+
+const options = [
+  { code: 'plan', value: 'Plan' },
+  { code: 'board', value: 'Board' },
+  { code: 'settings', value: 'Settings' },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'form-field-base',
+  componentId: 'form-field',
+  title: 'Form Field Wrapper',
+  description: 'label, required, help, error, disabled 상태를 입력 컴포넌트 앞단에서 통일하는 필드 래퍼입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 30,
+  features: ['docs', 'component-sample'],
+};
+
+export function Sample() {
+  const [title, setTitle] = useState('');
+  const error = title.trim() ? undefined : '제목을 입력하세요.';
+
+  return (
+    <Form layout="vertical">
+      <FormField label="게시글 제목" required help="저장 전 검증 메시지를 같은 위치에 표시합니다." error={error}>
+        <InputUI
+          value={title}
+          placeholder="제목 입력"
+          onChange={(event) => {
+            setTitle(event.target.value);
+          }}
+        />
+      </FormField>
+      <FormField label="연결 화면">
+        <SelectUI data={options} defaultValue="plan" />
+      </FormField>
+      <FormField label="잠긴 필드" disabled>
+        <InputUI defaultValue="자동화 접수 후 수정할 수 없습니다." />
+      </FormField>
+    </Form>
+  );
+}
diff --git a/src/components/inputs/checkCombo/CheckComboUI.tsx b/src/components/inputs/checkCombo/CheckComboUI.tsx
new file mode 100755
index 0000000..e040f0e
--- /dev/null
+++ b/src/components/inputs/checkCombo/CheckComboUI.tsx
@@ -0,0 +1,78 @@
+import { Checkbox, Flex, Select } from 'antd';
+import type { SelectProps } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import type { CheckComboUIProps, SelectOptionItem } from './types';
+
+function normalizeKeyword(text: string) {
+  return text.trim().toLowerCase();
+}
+
+export function CheckComboUI({
+  data,
+  value,
+  defaultValue,
+  onChange,
+  showSearch = true,
+  allowClear = true,
+  placeholder = '항목을 선택하세요',
+  ...restProps
+}: CheckComboUIProps) {
+  const [selectedCodes, setSelectedCodes] = useState<string[]>(() => value ?? defaultValue ?? []);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedCodes(value);
+    }
+  }, [value]);
+
+  const options = useMemo<SelectProps['options']>(
+    () =>
+      data.map((item) => ({
+        value: item.code,
+        label: item.value,
+        item,
+      })),
+    [data],
+  );
+
+  const itemMap = useMemo(
+    () =>
+      new Map<string, SelectOptionItem>(data.map((item) => [item.code, item])),
+    [data],
+  );
+
+  const selectedCodeSet = useMemo(() => new Set(selectedCodes), [selectedCodes]);
+
+  return (
+    <Select
+      {...restProps}
+      mode="multiple"
+      value={selectedCodes}
+      showSearch={showSearch}
+      allowClear={allowClear}
+      placeholder={placeholder}
+      options={options}
+      optionFilterProp="label"
+      maxTagCount="responsive"
+      filterOption={(input, option) =>
+        normalizeKeyword(String(option?.label ?? '')).includes(normalizeKeyword(input))
+      }
+      optionRender={(option) => (
+        <Flex align="center" gap={8}>
+          <Checkbox checked={selectedCodeSet.has(String(option.value))} />
+          <span>{String(option.label)}</span>
+        </Flex>
+      )}
+      onChange={(nextCodes) => {
+        const normalizedCodes = (nextCodes ?? []) as string[];
+        setSelectedCodes(normalizedCodes);
+        onChange?.(
+          normalizedCodes,
+          normalizedCodes
+            .map((code) => itemMap.get(code))
+            .filter((item): item is SelectOptionItem => item !== undefined),
+        );
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/checkCombo/index.ts b/src/components/inputs/checkCombo/index.ts
new file mode 100755
index 0000000..02dedc7
--- /dev/null
+++ b/src/components/inputs/checkCombo/index.ts
@@ -0,0 +1,6 @@
+export { CheckComboUI } from './CheckComboUI';
+export {
+  createCheckComboPlaceholderPlugin,
+  createCheckComboSortPlugin,
+} from './plugins';
+export type { CheckComboUIProps, SelectOptionItem } from './types';
diff --git a/src/components/inputs/checkCombo/plugins/check-combo.plugin.ts b/src/components/inputs/checkCombo/plugins/check-combo.plugin.ts
new file mode 100755
index 0000000..1dec3ee
--- /dev/null
+++ b/src/components/inputs/checkCombo/plugins/check-combo.plugin.ts
@@ -0,0 +1,18 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { CheckComboUIProps } from '../types';
+
+export function createCheckComboPlaceholderPlugin(
+  placeholder: string,
+): PropsPlugin<CheckComboUIProps> {
+  return (props) => ({
+    ...props,
+    placeholder,
+  });
+}
+
+export function createCheckComboSortPlugin(): PropsPlugin<CheckComboUIProps> {
+  return (props) => ({
+    ...props,
+    data: [...props.data].sort((left, right) => left.value.localeCompare(right.value)),
+  });
+}
diff --git a/src/components/inputs/checkCombo/plugins/index.ts b/src/components/inputs/checkCombo/plugins/index.ts
new file mode 100755
index 0000000..63716de
--- /dev/null
+++ b/src/components/inputs/checkCombo/plugins/index.ts
@@ -0,0 +1,4 @@
+export {
+  createCheckComboPlaceholderPlugin,
+  createCheckComboSortPlugin,
+} from './check-combo.plugin';
diff --git a/src/components/inputs/checkCombo/samples/BaseSample.tsx b/src/components/inputs/checkCombo/samples/BaseSample.tsx
new file mode 100755
index 0000000..41eebba
--- /dev/null
+++ b/src/components/inputs/checkCombo/samples/BaseSample.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../widgets/core';
+import { CheckComboUI } from '../CheckComboUI';
+
+const data = [
+  { code: 'WH-001', value: '서울 물류센터' },
+  { code: 'WH-002', value: '김포 물류센터' },
+  { code: 'WH-003', value: '부산 물류센터' },
+  { code: 'WH-004', value: '대전 허브센터' },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'check-combo-input-base',
+  componentId: 'check-combo-input',
+  title: 'Check Combo Input',
+  description: 'code/value 데이터를 받아 code[]를 값으로 유지하는 체크형 combo input 샘플입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 42,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState<string[]>(['WH-001', 'WH-003']);
+
+  return (
+    <CheckComboUI
+      data={data}
+      value={value}
+      placeholder="센터명을 검색하고 다중 선택하세요"
+      onChange={(nextCodes) => {
+        setValue(nextCodes);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/checkCombo/samples/Sample.tsx b/src/components/inputs/checkCombo/samples/Sample.tsx
new file mode 100755
index 0000000..c90485a
--- /dev/null
+++ b/src/components/inputs/checkCombo/samples/Sample.tsx
@@ -0,0 +1,72 @@
+import { Card, Flex, Typography } from 'antd';
+import { useMemo, useState } from 'react';
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import {
+  createCheckComboPlaceholderPlugin,
+  createCheckComboSortPlugin,
+} from '../plugins';
+import { CheckComboUI } from '../CheckComboUI';
+import type { CheckComboUIProps, SelectOptionItem } from '../types';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'check-combo-input',
+  componentId: 'check-combo-input',
+  title: 'Check Combo Input',
+  description: 'code/value 데이터를 받아 code[]를 값으로 유지하는 체크형 combo input 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 42,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [selectedCodes, setSelectedCodes] = useState<string[]>(['WH-001', 'WH-003']);
+
+  const data = useMemo<SelectOptionItem[]>(
+    () => [
+      { code: 'WH-001', value: '서울 물류센터' },
+      { code: 'WH-002', value: '김포 물류센터' },
+      { code: 'WH-003', value: '부산 물류센터' },
+      { code: 'WH-004', value: '대전 허브센터' },
+    ],
+    [],
+  );
+
+  const comboProps = plugins<CheckComboUIProps>(
+    {
+      data,
+      value: selectedCodes,
+      onChange: (nextCodes) => {
+        setSelectedCodes(nextCodes);
+      },
+    },
+    [
+      createCheckComboPlaceholderPlugin('센터명을 검색하고 다중 선택하세요'),
+      createCheckComboSortPlugin(),
+    ],
+  );
+
+  const selectedValues = data
+    .filter((item) => selectedCodes.includes(item.code))
+    .map((item) => item.value)
+    .join(', ');
+
+  return (
+    <Card title="Check Combo Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        여러 항목을 체크박스 형태로 선택합니다. 실제 값은 <Text strong>code[]</Text>를
+        유지하고, 검색과 표시 텍스트는 <Text strong>value</Text> 기준으로 동작합니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <CheckComboUI {...comboProps} />
+        <Text>선택 codes: {selectedCodes.join(', ') || '-'}</Text>
+        <Text>선택 values: {selectedValues || '-'}</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/checkCombo/types/check-combo.ts b/src/components/inputs/checkCombo/types/check-combo.ts
new file mode 100755
index 0000000..c430f9a
--- /dev/null
+++ b/src/components/inputs/checkCombo/types/check-combo.ts
@@ -0,0 +1,16 @@
+import type { SelectProps } from 'antd';
+
+export type SelectOptionItem = {
+  code: string;
+  value: string;
+};
+
+export type CheckComboUIProps = Omit<
+  SelectProps,
+  'mode' | 'options' | 'value' | 'defaultValue' | 'onChange'
+> & {
+  data: SelectOptionItem[];
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (codes: string[], items: SelectOptionItem[]) => void;
+};
diff --git a/src/components/inputs/checkCombo/types/index.ts b/src/components/inputs/checkCombo/types/index.ts
new file mode 100755
index 0000000..931351c
--- /dev/null
+++ b/src/components/inputs/checkCombo/types/index.ts
@@ -0,0 +1 @@
+export type { CheckComboUIProps, SelectOptionItem } from './check-combo';
diff --git a/src/components/inputs/composite/multiInput/MultiInputUI.tsx b/src/components/inputs/composite/multiInput/MultiInputUI.tsx
new file mode 100755
index 0000000..2c0dbd3
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/MultiInputUI.tsx
@@ -0,0 +1,111 @@
+import { Flex } from 'antd';
+import type { InputProps, InputRef } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { InputUI } from '../../primitives/input';
+import { createMultiSegmentValidatorPlugin } from './plugins';
+import type { MultiInputParts } from './types';
+
+type MultiInputChangeEvent = Parameters<NonNullable<InputProps['onChange']>>[0];
+
+export type MultiInputUIProps = {
+  value?: string;
+  defaultValue?: string;
+  onChange?: InputProps['onChange'];
+  disabled?: boolean;
+  size?: InputProps['size'];
+  status?: InputProps['status'];
+  variant?: InputProps['variant'];
+  allowClear?: boolean;
+};
+
+function splitValue(value?: string): MultiInputParts {
+  const digits = (value ?? '').replace(/\D/g, '').slice(0, 11);
+  return [digits.slice(0, 3), digits.slice(3, 7), digits.slice(7, 11)];
+}
+
+function createChangeEvent(value: string): MultiInputChangeEvent {
+  return {
+    target: { value },
+    currentTarget: { value },
+  } as MultiInputChangeEvent;
+}
+
+export const MultiInputUI = forwardRef<InputRef, MultiInputUIProps>(function MultiInputUI(
+  { value, defaultValue, onChange, disabled, size, status, variant, allowClear },
+  ref,
+) {
+  const firstRef = useRef<InputRef>(null);
+  const secondRef = useRef<InputRef>(null);
+  const thirdRef = useRef<InputRef>(null);
+  const [parts, setParts] = useState<MultiInputParts>(() => splitValue(value ?? defaultValue));
+
+  useImperativeHandle(ref, () => firstRef.current as InputRef, []);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setParts(splitValue(value));
+    }
+  }, [value]);
+
+  const updatePart = (index: 0 | 1 | 2, nextPart: string) => {
+    setParts((previousParts) => {
+      const nextParts: MultiInputParts = [...previousParts] as MultiInputParts;
+      nextParts[index] = nextPart.replace(/\D/g, '').slice(0, index === 0 ? 3 : 4);
+      onChange?.(createChangeEvent(nextParts.join('')));
+      return nextParts;
+    });
+  };
+
+  const commonProps = {
+    disabled,
+    size,
+    status,
+    variant,
+    allowClear,
+    inputMode: 'numeric' as const,
+  };
+
+  return (
+    <Flex gap="small" align="center">
+      <InputUI
+        {...commonProps}
+        ref={firstRef}
+        value={parts[0]}
+        maxLength={3}
+        placeholder="010"
+        commitPlugins={[createMultiSegmentValidatorPlugin(3)]}
+        onChange={(event) => {
+          updatePart(0, event.target.value);
+          if (event.target.value.length === 3) {
+            secondRef.current?.focus();
+          }
+        }}
+      />
+      <InputUI
+        {...commonProps}
+        ref={secondRef}
+        value={parts[1]}
+        maxLength={4}
+        placeholder="1234"
+        commitPlugins={[createMultiSegmentValidatorPlugin(4)]}
+        onChange={(event) => {
+          updatePart(1, event.target.value);
+          if (event.target.value.length === 4) {
+            thirdRef.current?.focus();
+          }
+        }}
+      />
+      <InputUI
+        {...commonProps}
+        ref={thirdRef}
+        value={parts[2]}
+        maxLength={4}
+        placeholder="5678"
+        commitPlugins={[createMultiSegmentValidatorPlugin(4)]}
+        onChange={(event) => {
+          updatePart(2, event.target.value);
+        }}
+      />
+    </Flex>
+  );
+});
diff --git a/src/components/inputs/composite/multiInput/index.ts b/src/components/inputs/composite/multiInput/index.ts
new file mode 100755
index 0000000..24f218c
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/index.ts
@@ -0,0 +1,4 @@
+export { MultiInputUI } from './MultiInputUI';
+export type { MultiInputUIProps } from './MultiInputUI';
+export * from './plugins';
+export * from './types';
diff --git a/src/components/inputs/composite/multiInput/plugins/index.ts b/src/components/inputs/composite/multiInput/plugins/index.ts
new file mode 100755
index 0000000..d5b0fe9
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/plugins/index.ts
@@ -0,0 +1,4 @@
+export {
+  createMultiInputValidatorPlugin,
+  createMultiSegmentValidatorPlugin,
+} from './multi-input.plugin';
diff --git a/src/components/inputs/composite/multiInput/plugins/multi-input.plugin.ts b/src/components/inputs/composite/multiInput/plugins/multi-input.plugin.ts
new file mode 100755
index 0000000..68f3ec0
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/plugins/multi-input.plugin.ts
@@ -0,0 +1,15 @@
+import type { InputCommitPlugin } from '../../../primitives/input';
+
+export const createMultiInputValidatorPlugin =
+  (): InputCommitPlugin =>
+  ({ nextValue }) => {
+    const digits = nextValue.replace(/\D/g, '');
+    return digits.length === 10 || digits.length === 11;
+  };
+
+export const createMultiSegmentValidatorPlugin =
+  (segmentLength: 3 | 4): InputCommitPlugin =>
+  ({ nextValue }) => {
+    const digits = nextValue.replace(/\D/g, '');
+    return digits.length === segmentLength;
+  };
diff --git a/src/components/inputs/composite/multiInput/samples/BaseSample.tsx b/src/components/inputs/composite/multiInput/samples/BaseSample.tsx
new file mode 100755
index 0000000..d152864
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/samples/BaseSample.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { MultiInputUI } from '../MultiInputUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'multi-input-base',
+  componentId: 'multi-input',
+  title: 'Multi Input',
+  description: '하나의 값을 여러 입력칸으로 나누어 편집하는 복합 입력 컴포넌트입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 30,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('01012345678');
+
+  return (
+    <MultiInputUI
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/composite/multiInput/samples/Sample.tsx b/src/components/inputs/composite/multiInput/samples/Sample.tsx
new file mode 100755
index 0000000..8a9b73f
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/samples/Sample.tsx
@@ -0,0 +1,41 @@
+import { Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { MultiInputUI } from '../MultiInputUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'multi-input',
+  componentId: 'multi-input',
+  title: 'Multi Input',
+  description: '3자리 / 4자리 / 4자리 입력을 조합하는 기본형 multi input 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 30,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('01012345678');
+
+  return (
+    <Card title="Multi Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        값을 <Text strong>3자리 / 4자리 / 4자리</Text> 입력으로 나누어 조합합니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <MultiInputUI
+          value={value}
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+        />
+        <Text>확정 값: {value}</Text>
+        <Text type="secondary">각 칸은 정해진 자리수일 때만 확정되고 다음 칸으로 이동합니다.</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/composite/multiInput/types/index.ts b/src/components/inputs/composite/multiInput/types/index.ts
new file mode 100755
index 0000000..fc73400
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/types/index.ts
@@ -0,0 +1 @@
+export type { MultiInputParts, MultiInputValue } from './multi-input';
diff --git a/src/components/inputs/composite/multiInput/types/multi-input.ts b/src/components/inputs/composite/multiInput/types/multi-input.ts
new file mode 100755
index 0000000..e8e453b
--- /dev/null
+++ b/src/components/inputs/composite/multiInput/types/multi-input.ts
@@ -0,0 +1,2 @@
+export type MultiInputValue = string;
+export type MultiInputParts = [string, string, string];
diff --git a/src/components/inputs/popup/PopupUI.tsx b/src/components/inputs/popup/PopupUI.tsx
new file mode 100755
index 0000000..59381d0
--- /dev/null
+++ b/src/components/inputs/popup/PopupUI.tsx
@@ -0,0 +1,66 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Flex, Input } from 'antd';
+import type { InputProps } from 'antd';
+import { InputUI } from '../primitives/input';
+import type { PopupUIProps } from './types';
+
+export function PopupUI({
+  type = 'default',
+  value,
+  defaultValue,
+  resultValue,
+  onChange,
+  onButtonClick,
+  buttonText = '검색',
+  buttonDisabled,
+  inputPlaceholder,
+  resultPlaceholder = '선택 결과',
+  disabled,
+  size,
+  status,
+  variant,
+  allowClear,
+}: PopupUIProps) {
+  const sharedInputProps: Pick<
+    InputProps,
+    'disabled' | 'size' | 'status' | 'variant' | 'allowClear'
+  > = {
+    disabled,
+    size,
+    status,
+    variant,
+    allowClear,
+  };
+
+  return (
+    <Flex gap={0} align="stretch" className={`popup-input-ui popup-input-ui--${type}`}>
+      <InputUI
+        {...sharedInputProps}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        placeholder={inputPlaceholder}
+        className="popup-input-ui__input"
+      />
+
+      <Button
+        type="primary"
+        size={size}
+        disabled={disabled || buttonDisabled}
+        onClick={onButtonClick}
+        className="popup-input-ui__button"
+        icon={type === 'search' ? <SearchOutlined /> : undefined}
+      >
+        {type === 'search' ? null : buttonText}
+      </Button>
+
+      <Input
+        {...sharedInputProps}
+        readOnly
+        value={resultValue}
+        placeholder={resultPlaceholder}
+        className="popup-input-ui__result"
+      />
+    </Flex>
+  );
+}
diff --git a/src/components/inputs/popup/index.ts b/src/components/inputs/popup/index.ts
new file mode 100755
index 0000000..286b676
--- /dev/null
+++ b/src/components/inputs/popup/index.ts
@@ -0,0 +1,6 @@
+export { PopupUI } from './PopupUI';
+export {
+  createPopupButtonTextPlugin,
+  createPopupResultPlaceholderPlugin,
+} from './plugins';
+export type { PopupUIProps } from './types';
diff --git a/src/components/inputs/popup/plugins/index.ts b/src/components/inputs/popup/plugins/index.ts
new file mode 100755
index 0000000..f9fc7ee
--- /dev/null
+++ b/src/components/inputs/popup/plugins/index.ts
@@ -0,0 +1,4 @@
+export {
+  createPopupButtonTextPlugin,
+  createPopupResultPlaceholderPlugin,
+} from './popup.plugin';
diff --git a/src/components/inputs/popup/plugins/popup.plugin.ts b/src/components/inputs/popup/plugins/popup.plugin.ts
new file mode 100755
index 0000000..03f9559
--- /dev/null
+++ b/src/components/inputs/popup/plugins/popup.plugin.ts
@@ -0,0 +1,18 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { PopupUIProps } from '../types';
+
+export function createPopupButtonTextPlugin(buttonText: string): PropsPlugin<PopupUIProps> {
+  return (props) => ({
+    ...props,
+    buttonText,
+  });
+}
+
+export function createPopupResultPlaceholderPlugin(
+  resultPlaceholder: string,
+): PropsPlugin<PopupUIProps> {
+  return (props) => ({
+    ...props,
+    resultPlaceholder,
+  });
+}
diff --git a/src/components/inputs/popup/samples/BaseSample.tsx b/src/components/inputs/popup/samples/BaseSample.tsx
new file mode 100755
index 0000000..c04266c
--- /dev/null
+++ b/src/components/inputs/popup/samples/BaseSample.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../widgets/core';
+import { PopupUI } from '../PopupUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'popup-input-base',
+  componentId: 'popup-input',
+  title: 'Popup Input',
+  description: '검색 버튼과 결과 필드를 함께 제공하는 팝업형 입력 컴포넌트입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 40,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('납품처');
+  const [result, setResult] = useState('서울 물류센터');
+
+  return (
+    <PopupUI
+      type="search"
+      value={value}
+      resultValue={result}
+      inputPlaceholder="검색어 입력"
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+      onButtonClick={() => {
+        setResult(value ? `${value} 선택 결과` : '선택 결과 없음');
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/popup/samples/Sample.tsx b/src/components/inputs/popup/samples/Sample.tsx
new file mode 100755
index 0000000..7e1e668
--- /dev/null
+++ b/src/components/inputs/popup/samples/Sample.tsx
@@ -0,0 +1,60 @@
+import { Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import { createPopupButtonTextPlugin, createPopupResultPlaceholderPlugin } from '../plugins';
+import { PopupUI } from '../PopupUI';
+import type { PopupUIProps } from '../types';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'popup-input',
+  componentId: 'popup-input',
+  title: 'Popup Input',
+  description: '[input][button][readonly input] 형태의 popup input 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 40,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [keyword, setKeyword] = useState('납품처');
+  const [result, setResult] = useState('서울 물류센터');
+
+  const popupProps = plugins<PopupUIProps>(
+    {
+      type: 'search',
+      value: keyword,
+      resultValue: result,
+      inputPlaceholder: '검색어 입력',
+      onChange: (event) => {
+        setKeyword(event.target.value);
+      },
+      onButtonClick: () => {
+        setResult(keyword ? `${keyword} 선택 결과` : '선택 결과 없음');
+      },
+    },
+    [
+      createPopupButtonTextPlugin('팝업'),
+      createPopupResultPlaceholderPlugin('팝업 선택값'),
+    ],
+  );
+
+  return (
+    <Card title="Popup Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        검색 타입 popup input 샘플입니다. 첫 번째 input에 검색어를 입력하고 돋보기 버튼을 누르면,
+        마지막 readonly input에 선택 결과를 표시합니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <PopupUI {...popupProps} />
+        <Text>검색 값: {keyword}</Text>
+        <Text>선택 값: {result}</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/popup/types/index.ts b/src/components/inputs/popup/types/index.ts
new file mode 100755
index 0000000..3111bcd
--- /dev/null
+++ b/src/components/inputs/popup/types/index.ts
@@ -0,0 +1 @@
+export type { PopupUIProps } from './popup';
diff --git a/src/components/inputs/popup/types/popup.ts b/src/components/inputs/popup/types/popup.ts
new file mode 100755
index 0000000..0e2a504
--- /dev/null
+++ b/src/components/inputs/popup/types/popup.ts
@@ -0,0 +1,19 @@
+import type { InputProps } from 'antd';
+
+export type PopupUIProps = {
+  type?: 'default' | 'search';
+  value?: string;
+  defaultValue?: string;
+  resultValue?: string;
+  onChange?: InputProps['onChange'];
+  onButtonClick?: () => void;
+  buttonText?: string;
+  buttonDisabled?: boolean;
+  inputPlaceholder?: string;
+  resultPlaceholder?: string;
+  disabled?: boolean;
+  size?: InputProps['size'];
+  status?: InputProps['status'];
+  variant?: InputProps['variant'];
+  allowClear?: boolean;
+};
diff --git a/src/components/inputs/primitives/input/InputUI.tsx b/src/components/inputs/primitives/input/InputUI.tsx
new file mode 100755
index 0000000..5022d23
--- /dev/null
+++ b/src/components/inputs/primitives/input/InputUI.tsx
@@ -0,0 +1,88 @@
+import { Input } from 'antd';
+import type { InputProps, InputRef } from 'antd';
+import type { FocusEvent, KeyboardEvent } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
+import type { InputCommitPlugin, InputCommitTiming } from './types';
+
+type AntdInputChangeEvent = Parameters<NonNullable<InputProps['onChange']>>[0];
+
+export type InputUIProps = Omit<InputProps, 'onChange'> & {
+  onChange?: InputProps['onChange'];
+  commitPlugins?: ReadonlyArray<InputCommitPlugin>;
+};
+
+function normalizeValue(value: InputProps['value'] | InputProps['defaultValue']) {
+  if (value === undefined || value === null) {
+    return '';
+  }
+
+  return String(value);
+}
+
+function toCommittedChangeEvent(
+  event: KeyboardEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>,
+): AntdInputChangeEvent {
+  return {
+    ...event,
+    target: event.currentTarget,
+    currentTarget: event.currentTarget,
+  } as AntdInputChangeEvent;
+}
+
+export const InputUI = forwardRef<InputRef, InputUIProps>(function InputUI(
+  { value, defaultValue, onChange, onBlur, onPressEnter, commitPlugins = [], ...restProps },
+  ref,
+) {
+  const [draftValue, setDraftValue] = useState(() => normalizeValue(value ?? defaultValue));
+  const [committedValue, setCommittedValue] = useState(() => normalizeValue(value ?? defaultValue));
+
+  useEffect(() => {
+    if (value !== undefined) {
+      const normalizedValue = normalizeValue(value);
+
+      setDraftValue(normalizedValue);
+      setCommittedValue(normalizedValue);
+    }
+  }, [value]);
+
+  const tryCommit = (
+    event: KeyboardEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>,
+    timing: InputCommitTiming,
+  ) => {
+    const nextValue = event.currentTarget.value;
+    const isValid = commitPlugins.every((plugin) =>
+      plugin({
+        nextValue,
+        previousValue: committedValue,
+        timing,
+      }),
+    );
+
+    if (!isValid) {
+      setDraftValue(committedValue);
+      return;
+    }
+
+    setCommittedValue(nextValue);
+    onChange?.(toCommittedChangeEvent(event));
+  };
+
+  return (
+    <Input
+      {...restProps}
+      ref={ref}
+      value={draftValue}
+      onChange={(event) => {
+        setDraftValue(event.target.value);
+      }}
+      onPressEnter={(event) => {
+        tryCommit(event, 'press-enter');
+        onPressEnter?.(event);
+      }}
+      onBlur={(event) => {
+        tryCommit(event, 'blur');
+        onBlur?.(event);
+      }}
+    />
+  );
+});
diff --git a/src/components/inputs/primitives/input/index.ts b/src/components/inputs/primitives/input/index.ts
new file mode 100755
index 0000000..75547f4
--- /dev/null
+++ b/src/components/inputs/primitives/input/index.ts
@@ -0,0 +1,4 @@
+export { InputUI } from './InputUI';
+export type { InputUIProps, InputUIProps as DeferredInputProps } from './InputUI';
+export * from './plugins';
+export * from './types';
diff --git a/src/components/inputs/primitives/input/plugins/index.ts b/src/components/inputs/primitives/input/plugins/index.ts
new file mode 100755
index 0000000..4c2b1e6
--- /dev/null
+++ b/src/components/inputs/primitives/input/plugins/index.ts
@@ -0,0 +1 @@
+export { createValidInputPlugin, trimInputValuePlugin } from './input.plugin';
diff --git a/src/components/inputs/primitives/input/plugins/input.plugin.ts b/src/components/inputs/primitives/input/plugins/input.plugin.ts
new file mode 100755
index 0000000..95a834c
--- /dev/null
+++ b/src/components/inputs/primitives/input/plugins/input.plugin.ts
@@ -0,0 +1,22 @@
+import type { PropsPlugin } from '../../../../../types/component-plugin';
+import type { InputUIProps } from '../InputUI';
+import type { InputValidator } from '../types';
+
+export const trimInputValuePlugin =
+  (): PropsPlugin<InputUIProps> =>
+  (props) => ({
+    ...props,
+    onBlur: (event) => {
+      event.target.value = event.target.value.trim();
+      props.onBlur?.(event);
+    },
+  });
+
+export const createValidInputPlugin =
+  (onValid: InputValidator) =>
+  ({ nextValue, previousValue, timing }: Parameters<InputValidator>[0]) =>
+    onValid({
+      nextValue,
+      previousValue,
+      timing,
+    });
diff --git a/src/components/inputs/primitives/input/samples/BaseSample.tsx b/src/components/inputs/primitives/input/samples/BaseSample.tsx
new file mode 100755
index 0000000..fd2b341
--- /dev/null
+++ b/src/components/inputs/primitives/input/samples/BaseSample.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { InputUI } from '../InputUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'input-base',
+  componentId: 'input',
+  title: 'Base Input',
+  description: '입력 중에는 draft 상태를 유지하고 Enter 또는 blur 시점에 값을 확정하는 기본형 InputUI 샘플입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 20,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('초기값');
+
+  return (
+    <InputUI
+      value={value}
+      placeholder="입력 후 Enter 또는 blur"
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/primitives/input/samples/Sample.tsx b/src/components/inputs/primitives/input/samples/Sample.tsx
new file mode 100755
index 0000000..5e293e8
--- /dev/null
+++ b/src/components/inputs/primitives/input/samples/Sample.tsx
@@ -0,0 +1,47 @@
+import { Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { InputUI } from '../InputUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'deferred-input',
+  componentId: 'input',
+  title: 'Base Input',
+  description: '입력 중에는 draft 상태만 유지하고 Enter 또는 blur 시점에만 값을 확정하는 기본형 InputUI 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 20,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [committedValue, setCommittedValue] = useState('초기값');
+  const [commitCount, setCommitCount] = useState(0);
+
+  return (
+    <Card title="Base Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        입력 중에는 내부 값만 바뀌고, <Text strong>Enter</Text> 또는 <Text strong>blur</Text>{' '}
+        시점에만 외부 값이 갱신됩니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <InputUI
+          placeholder="입력 후 Enter 또는 blur"
+          value={committedValue}
+          onChange={(event) => {
+            setCommittedValue(event.target.value);
+            setCommitCount((count) => count + 1);
+          }}
+        />
+        <Text>확정 값: {committedValue}</Text>
+        <Text type="secondary">확정 횟수: {commitCount}</Text>
+      </Flex>
+    </Card>
+  );
+}
+
+export const InputSample = Sample;
diff --git a/src/components/inputs/primitives/input/samples/ValidInputSample.tsx b/src/components/inputs/primitives/input/samples/ValidInputSample.tsx
new file mode 100755
index 0000000..f3a2cba
--- /dev/null
+++ b/src/components/inputs/primitives/input/samples/ValidInputSample.tsx
@@ -0,0 +1,63 @@
+import { Card, Divider, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { createValidInputPlugin } from '../plugins';
+import { InputUI } from '../InputUI';
+
+const { Paragraph, Text, Title } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'valid-input',
+  componentId: 'input',
+  title: 'Valid Input',
+  description: 'InputUI에 validation plugin을 추가해 유효할 때만 값을 확정하는 확장 샘플입니다.',
+  category: 'Inputs',
+  kind: 'plugin',
+  variantLabel: 'Validation Plugin',
+  order: 21,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [validValue, setValidValue] = useState('hello');
+  const [uppercaseValue, setUppercaseValue] = useState('ABC');
+  const minLengthPlugin = createValidInputPlugin(({ nextValue }) => nextValue.trim().length >= 3);
+  const uppercasePlugin = createValidInputPlugin(({ nextValue }) => /^[A-Z]+$/.test(nextValue));
+
+  return (
+    <Card title="Validation Plugin Sample" extra={<Text code>samples/ValidInputSample.tsx</Text>}>
+      <Paragraph>
+        <Text strong>`InputUI`</Text> 하나만 사용하고, 검증은{' '}
+        <Text strong>`createValidInputPlugin`</Text>으로 주입합니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <Title level={5}>Minimum Length Validation</Title>
+        <InputUI
+          placeholder="3글자 이상만 반영"
+          value={validValue}
+          commitPlugins={[minLengthPlugin]}
+          onChange={(event) => {
+            setValidValue(event.target.value);
+          }}
+        />
+        <Text>유효성 통과 값: {validValue}</Text>
+        <Text type="secondary">3글자 미만 입력은 이전 값으로 유지됩니다.</Text>
+
+        <Divider />
+
+        <Title level={5}>Uppercase Validation</Title>
+        <InputUI
+          placeholder="영문 대문자만 반영"
+          value={uppercaseValue}
+          commitPlugins={[uppercasePlugin]}
+          onChange={(event) => {
+            setUppercaseValue(event.target.value);
+          }}
+        />
+        <Text>대문자 유효성 값: {uppercaseValue}</Text>
+        <Text type="secondary">소문자, 숫자, 공백이 포함되면 이전 값으로 복원됩니다.</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/primitives/input/types/index.ts b/src/components/inputs/primitives/input/types/index.ts
new file mode 100755
index 0000000..b493fef
--- /dev/null
+++ b/src/components/inputs/primitives/input/types/index.ts
@@ -0,0 +1,6 @@
+export type {
+  InputCommitContext,
+  InputCommitPlugin,
+  InputCommitTiming,
+  InputValidator,
+} from './input';
diff --git a/src/components/inputs/primitives/input/types/input.ts b/src/components/inputs/primitives/input/types/input.ts
new file mode 100755
index 0000000..259fcf1
--- /dev/null
+++ b/src/components/inputs/primitives/input/types/input.ts
@@ -0,0 +1,11 @@
+export type InputCommitTiming = 'press-enter' | 'blur';
+
+export type InputCommitContext = {
+  nextValue: string;
+  previousValue: string;
+  timing: InputCommitTiming;
+};
+
+export type InputCommitPlugin = (context: InputCommitContext) => boolean;
+
+export type InputValidator = (context: InputCommitContext) => boolean;
diff --git a/src/components/inputs/select/SelectUI.tsx b/src/components/inputs/select/SelectUI.tsx
new file mode 100755
index 0000000..9e4c7f2
--- /dev/null
+++ b/src/components/inputs/select/SelectUI.tsx
@@ -0,0 +1,54 @@
+import { Select } from 'antd';
+import type { SelectProps } from 'antd';
+import { useMemo } from 'react';
+import type { SelectOptionItem, SelectUIProps } from './types';
+
+function normalizeKeyword(text: string) {
+  return text.trim().toLowerCase();
+}
+
+export function SelectUI({
+  data,
+  value,
+  defaultValue,
+  onChange,
+  showSearch = true,
+  allowClear = true,
+  placeholder = '항목을 선택하세요',
+  ...restProps
+}: SelectUIProps) {
+  const options = useMemo<SelectProps<string>['options']>(
+    () =>
+      data.map((item) => ({
+        value: item.code,
+        label: item.value,
+        item,
+      })),
+    [data],
+  );
+
+  const itemMap = useMemo(
+    () =>
+      new Map<string, SelectOptionItem>(data.map((item) => [item.code, item])),
+    [data],
+  );
+
+  return (
+    <Select<string>
+      {...restProps}
+      value={value}
+      defaultValue={defaultValue}
+      showSearch={showSearch}
+      allowClear={allowClear}
+      placeholder={placeholder}
+      options={options}
+      optionFilterProp="label"
+      filterOption={(input, option) =>
+        normalizeKeyword(String(option?.label ?? '')).includes(normalizeKeyword(input))
+      }
+      onChange={(nextCode) => {
+        onChange?.(nextCode, nextCode ? itemMap.get(nextCode) : undefined);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/select/index.ts b/src/components/inputs/select/index.ts
new file mode 100755
index 0000000..7770d66
--- /dev/null
+++ b/src/components/inputs/select/index.ts
@@ -0,0 +1,3 @@
+export { SelectUI } from './SelectUI';
+export { createSelectPlaceholderPlugin, createSelectSortPlugin } from './plugins';
+export type { SelectOptionItem, SelectUIProps } from './types';
diff --git a/src/components/inputs/select/plugins/index.ts b/src/components/inputs/select/plugins/index.ts
new file mode 100755
index 0000000..1b9f7f0
--- /dev/null
+++ b/src/components/inputs/select/plugins/index.ts
@@ -0,0 +1 @@
+export { createSelectPlaceholderPlugin, createSelectSortPlugin } from './select.plugin';
diff --git a/src/components/inputs/select/plugins/select.plugin.ts b/src/components/inputs/select/plugins/select.plugin.ts
new file mode 100755
index 0000000..25ea456
--- /dev/null
+++ b/src/components/inputs/select/plugins/select.plugin.ts
@@ -0,0 +1,16 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { SelectUIProps } from '../types';
+
+export function createSelectPlaceholderPlugin(placeholder: string): PropsPlugin<SelectUIProps> {
+  return (props) => ({
+    ...props,
+    placeholder,
+  });
+}
+
+export function createSelectSortPlugin(): PropsPlugin<SelectUIProps> {
+  return (props) => ({
+    ...props,
+    data: [...props.data].sort((left, right) => left.value.localeCompare(right.value)),
+  });
+}
diff --git a/src/components/inputs/select/samples/BaseSample.tsx b/src/components/inputs/select/samples/BaseSample.tsx
new file mode 100755
index 0000000..ac1746e
--- /dev/null
+++ b/src/components/inputs/select/samples/BaseSample.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../widgets/core';
+import { SelectUI } from '../SelectUI';
+
+const data = [
+  { code: 'WH-001', value: '서울 물류센터' },
+  { code: 'WH-002', value: '김포 물류센터' },
+  { code: 'WH-003', value: '부산 물류센터' },
+  { code: 'WH-004', value: '대전 허브센터' },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'select-input-base',
+  componentId: 'select-input',
+  title: 'Select Input',
+  description: 'code/value 데이터를 받아 code를 값으로 유지하는 필터형 select combo 샘플입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 41,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState<string | undefined>('WH-001');
+
+  return (
+    <SelectUI
+      data={data}
+      value={value}
+      placeholder="센터명을 검색하세요"
+      onChange={(nextCode) => {
+        setValue(nextCode);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/select/samples/Sample.tsx b/src/components/inputs/select/samples/Sample.tsx
new file mode 100755
index 0000000..6c19e10
--- /dev/null
+++ b/src/components/inputs/select/samples/Sample.tsx
@@ -0,0 +1,63 @@
+import { Card, Flex, Typography } from 'antd';
+import { useMemo, useState } from 'react';
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import { createSelectPlaceholderPlugin, createSelectSortPlugin } from '../plugins';
+import { SelectUI } from '../SelectUI';
+import type { SelectOptionItem, SelectUIProps } from '../types';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'select-input',
+  componentId: 'select-input',
+  title: 'Select Input',
+  description: 'code/value 데이터를 받아 code를 값으로 유지하는 필터형 select combo 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 41,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [selectedCode, setSelectedCode] = useState<string | undefined>('WH-001');
+
+  const data = useMemo<SelectOptionItem[]>(
+    () => [
+      { code: 'WH-001', value: '서울 물류센터' },
+      { code: 'WH-002', value: '김포 물류센터' },
+      { code: 'WH-003', value: '부산 물류센터' },
+      { code: 'WH-004', value: '대전 허브센터' },
+    ],
+    [],
+  );
+
+  const selectProps = plugins<SelectUIProps>(
+    {
+      data,
+      value: selectedCode,
+      onChange: (nextCode) => {
+        setSelectedCode(nextCode);
+      },
+    },
+    [createSelectPlaceholderPlugin('센터명을 검색하세요'), createSelectSortPlugin()],
+  );
+
+  const selectedItem = data.find((item) => item.code === selectedCode);
+
+  return (
+    <Card title="Select Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        `value`는 실제 저장값인 <Text strong>code</Text>를 유지하고, 드롭다운 표시 및 검색은
+        <Text strong> value</Text> 기준으로 동작합니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <SelectUI {...selectProps} />
+        <Text>선택 code: {selectedCode ?? '-'}</Text>
+        <Text>선택 value: {selectedItem?.value ?? '-'}</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/select/types/index.ts b/src/components/inputs/select/types/index.ts
new file mode 100755
index 0000000..9377ed9
--- /dev/null
+++ b/src/components/inputs/select/types/index.ts
@@ -0,0 +1 @@
+export type { SelectOptionItem, SelectUIProps } from './select';
diff --git a/src/components/inputs/select/types/select.ts b/src/components/inputs/select/types/select.ts
new file mode 100755
index 0000000..c0768d2
--- /dev/null
+++ b/src/components/inputs/select/types/select.ts
@@ -0,0 +1,16 @@
+import type { SelectProps } from 'antd';
+
+export type SelectOptionItem = {
+  code: string;
+  value: string;
+};
+
+export type SelectUIProps = Omit<
+  SelectProps<string>,
+  'options' | 'value' | 'defaultValue' | 'onChange'
+> & {
+  data: SelectOptionItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (code?: string, item?: SelectOptionItem) => void;
+};
diff --git a/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.css b/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.css
new file mode 100755
index 0000000..089635a
--- /dev/null
+++ b/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.css
@@ -0,0 +1,16 @@
+.button-editable-input {
+  width: 100%;
+}
+
+.button-editable-input__field--readonly.ant-input,
+.button-editable-input__field--readonly.ant-input-affix-wrapper,
+.button-editable-input__field--readonly.ant-input-outlined {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: #f5f5f5;
+}
+
+.button-editable-input__button--readonly.ant-btn {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
diff --git a/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx b/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx
new file mode 100755
index 0000000..f5c7e6a
--- /dev/null
+++ b/src/components/inputs/specialized/buttonEditableInput/ButtonEditableInputUI.tsx
@@ -0,0 +1,96 @@
+import { Button, Flex } from 'antd';
+import type { InputRef } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import './ButtonEditableInputUI.css';
+import { InputUI } from '../../primitives/input';
+import { createValidInputPlugin } from '../../primitives/input/plugins';
+import type { InputCommitPlugin, InputUIProps, InputValidator } from '../../primitives/input';
+
+export type ButtonEditableInputUIProps = Omit<
+  InputUIProps,
+  'commitPlugins' | 'readOnly'
+> & {
+  onValid?: InputValidator;
+  commitPlugins?: ReadonlyArray<InputCommitPlugin>;
+  editButtonLabel?: string;
+  confirmButtonLabel?: string;
+};
+
+export const ButtonEditableInputUI = forwardRef<InputRef, ButtonEditableInputUIProps>(
+  function ButtonEditableInputUI(
+    {
+      onValid,
+      commitPlugins = [],
+      editButtonLabel = '수정',
+      confirmButtonLabel = '확인',
+      disabled,
+      onBlur,
+      onPressEnter,
+      ...restProps
+    },
+    ref,
+  ) {
+    const inputRef = useRef<InputRef>(null);
+    const [isEditing, setIsEditing] = useState(false);
+
+    useImperativeHandle(ref, () => inputRef.current as InputRef, []);
+
+    useEffect(() => {
+      if (!isEditing) {
+        return;
+      }
+
+      inputRef.current?.focus({
+        cursor: 'all',
+      });
+    }, [isEditing]);
+
+    const mergedCommitPlugins = onValid
+      ? [createValidInputPlugin(onValid), ...commitPlugins]
+      : [...commitPlugins];
+    const inputClassName = [restProps.className, !isEditing ? 'button-editable-input__field--readonly' : '']
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <Flex gap="small" align="center" className="button-editable-input">
+        <InputUI
+          {...restProps}
+          ref={inputRef}
+          className={inputClassName}
+          disabled={disabled}
+          readOnly={!isEditing}
+          commitPlugins={mergedCommitPlugins}
+          onBlur={(event) => {
+            setIsEditing(false);
+            onBlur?.(event);
+          }}
+          onPressEnter={(event) => {
+            setIsEditing(false);
+            onPressEnter?.(event);
+          }}
+        />
+        <Button
+          disabled={disabled}
+          className={!isEditing ? 'button-editable-input__button--readonly' : undefined}
+          onMouseDown={(event) => {
+            if (isEditing) {
+              event.preventDefault();
+            }
+          }}
+          onClick={() => {
+            if (!isEditing) {
+              setIsEditing(true);
+              return;
+            }
+
+            setIsEditing(false);
+            inputRef.current?.blur();
+          }}
+        >
+          {isEditing ? confirmButtonLabel : editButtonLabel}
+        </Button>
+      </Flex>
+    );
+  },
+);
diff --git a/src/components/inputs/specialized/buttonEditableInput/index.ts b/src/components/inputs/specialized/buttonEditableInput/index.ts
new file mode 100755
index 0000000..04b1973
--- /dev/null
+++ b/src/components/inputs/specialized/buttonEditableInput/index.ts
@@ -0,0 +1,2 @@
+export { ButtonEditableInputUI } from './ButtonEditableInputUI';
+export type { ButtonEditableInputUIProps } from './ButtonEditableInputUI';
diff --git a/src/components/inputs/specialized/buttonEditableInput/samples/BaseSample.tsx b/src/components/inputs/specialized/buttonEditableInput/samples/BaseSample.tsx
new file mode 100755
index 0000000..202dd99
--- /dev/null
+++ b/src/components/inputs/specialized/buttonEditableInput/samples/BaseSample.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { ButtonEditableInputUI } from '../ButtonEditableInputUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'button-editable-input-base',
+  componentId: 'button-editable-input',
+  title: 'Button Editable Input',
+  description: '버튼을 눌러 읽기 전용 입력값을 수정 가능한 상태로 전환하는 컴포넌트입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 50,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('운영팀 공용 메모');
+
+  return (
+    <ButtonEditableInputUI
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/specialized/buttonEditableInput/samples/Sample.tsx b/src/components/inputs/specialized/buttonEditableInput/samples/Sample.tsx
new file mode 100755
index 0000000..1424846
--- /dev/null
+++ b/src/components/inputs/specialized/buttonEditableInput/samples/Sample.tsx
@@ -0,0 +1,44 @@
+import { Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { ButtonEditableInputUI } from '../ButtonEditableInputUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'button-editable-input',
+  componentId: 'button-editable-input',
+  title: 'Button Editable Input',
+  description:
+    '기본적으로 readonly 상태를 유지하다가 버튼 클릭 시에만 편집할 수 있고, 유효하지 않으면 이전 값으로 복원되는 입력 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 50,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [postalCode, setPostalCode] = useState('04524');
+
+  return (
+    <Card title="Button Editable Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        버튼을 눌러 편집을 활성화하고, <Text strong>5자리 숫자</Text>일 때만 값이 확정됩니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <ButtonEditableInputUI
+          value={postalCode}
+          placeholder="우편번호 5자리"
+          onValid={({ nextValue }) => /^\d{5}$/.test(nextValue)}
+          onChange={(event) => {
+            setPostalCode(event.target.value);
+          }}
+        />
+        <Text>확정 우편번호: {postalCode}</Text>
+        <Text type="secondary">유효하지 않으면 이전 값으로 되돌아가고 다시 readonly 상태가 됩니다.</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/specialized/emailInput/EmailInputUI.tsx b/src/components/inputs/specialized/emailInput/EmailInputUI.tsx
new file mode 100755
index 0000000..751bf8c
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/EmailInputUI.tsx
@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import type { InputRef } from 'antd';
+import { InputUI } from '../../primitives/input';
+import { createEmailValidatorPlugin } from './plugins';
+import type { InputUIProps } from '../../primitives/input';
+
+export type EmailInputUIProps = InputUIProps;
+
+export const EmailInputUI = forwardRef<InputRef, EmailInputUIProps>(function EmailInputUI(
+  {
+    commitPlugins = [],
+    inputMode = 'email',
+    placeholder = '이메일을 입력하세요',
+    autoComplete = 'email',
+    ...restProps
+  },
+  ref,
+) {
+  return (
+    <InputUI
+      {...restProps}
+      ref={ref}
+      inputMode={inputMode}
+      placeholder={placeholder}
+      autoComplete={autoComplete}
+      commitPlugins={[createEmailValidatorPlugin(), ...commitPlugins]}
+    />
+  );
+});
diff --git a/src/components/inputs/specialized/emailInput/index.ts b/src/components/inputs/specialized/emailInput/index.ts
new file mode 100755
index 0000000..d1e51a4
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/index.ts
@@ -0,0 +1,4 @@
+export { EmailInputUI } from './EmailInputUI';
+export type { EmailInputUIProps } from './EmailInputUI';
+export * from './plugins';
+export * from './types';
diff --git a/src/components/inputs/specialized/emailInput/plugins/email-input.plugin.ts b/src/components/inputs/specialized/emailInput/plugins/email-input.plugin.ts
new file mode 100755
index 0000000..7c579d7
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/plugins/email-input.plugin.ts
@@ -0,0 +1,8 @@
+import type { InputCommitPlugin } from '../../../primitives/input';
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export const createEmailValidatorPlugin =
+  (): InputCommitPlugin =>
+  ({ nextValue }) =>
+    emailPattern.test(nextValue.trim());
diff --git a/src/components/inputs/specialized/emailInput/plugins/index.ts b/src/components/inputs/specialized/emailInput/plugins/index.ts
new file mode 100755
index 0000000..141b5a2
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/plugins/index.ts
@@ -0,0 +1 @@
+export { createEmailValidatorPlugin } from './email-input.plugin';
diff --git a/src/components/inputs/specialized/emailInput/samples/BaseSample.tsx b/src/components/inputs/specialized/emailInput/samples/BaseSample.tsx
new file mode 100755
index 0000000..2037368
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/samples/BaseSample.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { EmailInputUI } from '../EmailInputUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'email-input-base',
+  componentId: 'email-input',
+  title: 'Email Input',
+  description: '이메일 형식을 검증하는 입력 컴포넌트입니다.',
+  category: 'Inputs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 40,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState('ops@example.com');
+
+  return (
+    <EmailInputUI
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+      }}
+    />
+  );
+}
diff --git a/src/components/inputs/specialized/emailInput/samples/Sample.tsx b/src/components/inputs/specialized/emailInput/samples/Sample.tsx
new file mode 100755
index 0000000..ebb1b07
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/samples/Sample.tsx
@@ -0,0 +1,41 @@
+import { Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+import type { SampleMeta } from '../../../../../widgets/core';
+import { EmailInputUI } from '../EmailInputUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'email-input',
+  componentId: 'email-input',
+  title: 'Email Input',
+  description: '이메일 형식을 검증하는 기본형 이메일 입력 샘플입니다.',
+  category: 'Inputs',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 40,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const [email, setEmail] = useState('hello@example.com');
+
+  return (
+    <Card title="Email Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        <Text strong>이메일 형식</Text>일 때만 값이 확정됩니다.
+      </Paragraph>
+
+      <Flex vertical gap="small">
+        <EmailInputUI
+          value={email}
+          onChange={(event) => {
+            setEmail(event.target.value);
+          }}
+        />
+        <Text>확정 이메일: {email}</Text>
+        <Text type="secondary">형식이 맞지 않으면 이전 값으로 유지됩니다.</Text>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/inputs/specialized/emailInput/types/email-input.ts b/src/components/inputs/specialized/emailInput/types/email-input.ts
new file mode 100755
index 0000000..cdaca5c
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/types/email-input.ts
@@ -0,0 +1 @@
+export type EmailValue = string;
diff --git a/src/components/inputs/specialized/emailInput/types/index.ts b/src/components/inputs/specialized/emailInput/types/index.ts
new file mode 100755
index 0000000..2fbbe2c
--- /dev/null
+++ b/src/components/inputs/specialized/emailInput/types/index.ts
@@ -0,0 +1 @@
+export type { EmailValue } from './email-input';
diff --git a/src/components/markdownPreview/MarkdownPreviewCard.tsx b/src/components/markdownPreview/MarkdownPreviewCard.tsx
new file mode 100755
index 0000000..3ce5228
--- /dev/null
+++ b/src/components/markdownPreview/MarkdownPreviewCard.tsx
@@ -0,0 +1,263 @@
+import { Card, Tabs, Typography } from 'antd';
+import type { MarkdownDocument } from './markdown-document';
+import { MarkdownPreviewContent } from './MarkdownPreviewContent';
+import { WorklogSourcePreview } from './WorklogSourcePreview';
+
+const { Paragraph, Text, Title } = Typography;
+
+const ARTIFACT_SECTION_TITLE_PATTERN =
+  /^(##|###)\s+(스크린샷|화면 캡처|산출물|확인 경로|참고 링크|preview|source|소스|실행 커맨드|변경 파일|신규 파일|변경\/신규 파일)/i;
+const INLINE_ARTIFACT_PATTERN = /!\[[^\]]*\]\(([^)]+)\)|\[[^\]]+\]\(([^)]+)\)|`([^`]+\.(?:png|jpg|jpeg|gif|webp|svg|md|ts|tsx|js|jsx|css|json|mjs))`|(https?:\/\/\S+)/gi;
+
+export type MarkdownPreviewCardProps = {
+  document: MarkdownDocument;
+};
+
+type WorklogSections = {
+  mainContent: string;
+  artifactSections: ArtifactSection[];
+};
+
+type ArtifactSection = {
+  key: string;
+  label: string;
+  content: string;
+  count: number;
+};
+
+type WorklogTabItem = {
+  key: string;
+  label: string;
+  count?: number;
+  content: string;
+};
+
+function finalizeArtifactSection(section: ArtifactSection) {
+  return {
+    ...section,
+    content: section.content.trim(),
+  };
+}
+
+function mergeArtifactSections(sections: ArtifactSection[]) {
+  const mergedSections: ArtifactSection[] = [];
+
+  for (const section of sections) {
+    const normalizedSection = finalizeArtifactSection(section);
+    const existingSection = mergedSections.find((item) => item.label === normalizedSection.label);
+
+    if (!existingSection) {
+      mergedSections.push({
+        ...normalizedSection,
+        key: `${mergedSections.length}-${normalizedSection.label.toLowerCase()}`,
+      });
+      continue;
+    }
+
+    const existingBody = existingSection.content.replace(/^#{2,3}\s+.+\n?/u, '').trim();
+    const nextBody = normalizedSection.content.replace(/^#{2,3}\s+.+\n?/u, '').trim();
+    const mergedBody = [existingBody, nextBody].filter(Boolean).join('\n\n').trim();
+    existingSection.content = `## ${existingSection.label}${mergedBody ? `\n\n${mergedBody}` : ''}`;
+  }
+
+  mergedSections.forEach((section) => {
+    section.count = section.content.match(INLINE_ARTIFACT_PATTERN)?.length ?? 0;
+  });
+
+  return mergedSections.filter((section) => section.content);
+}
+
+function normalizeArtifactSectionLabel(rawTitle: string) {
+  const normalizedTitle = rawTitle.trim().toLowerCase();
+
+  if (normalizedTitle === '화면 캡처' || normalizedTitle === '스크린샷') {
+    return '스크린샷';
+  }
+
+  if (normalizedTitle === 'source' || normalizedTitle === '소스') {
+    return '소스';
+  }
+
+  if (normalizedTitle === 'preview') {
+    return 'Preview';
+  }
+
+  if (normalizedTitle === '실행 커맨드') {
+    return '커맨드';
+  }
+
+  if (
+    normalizedTitle === '변경 파일' ||
+    normalizedTitle === '신규 파일' ||
+    normalizedTitle === '변경/신규 파일'
+  ) {
+    return '파일';
+  }
+
+  return rawTitle.trim();
+}
+
+function splitWorklogContent(content: string): WorklogSections {
+  const lines = content.split('\n');
+  const mainLines: string[] = [];
+  const artifactSections: ArtifactSection[] = [];
+  let currentSection: ArtifactSection | null = null;
+  let inCodeFence = false;
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+    const isFenceLine = /^```/.test(trimmedLine);
+
+    if (isFenceLine) {
+      inCodeFence = !inCodeFence;
+      if (currentSection) {
+        currentSection.content += `${line}\n`;
+      } else {
+        mainLines.push(line);
+      }
+      continue;
+    }
+
+    const match = inCodeFence ? null : trimmedLine.match(ARTIFACT_SECTION_TITLE_PATTERN);
+    const isHeading = !inCodeFence && /^#{2,3}\s+/.test(trimmedLine);
+
+    if (match) {
+      if (currentSection) {
+        artifactSections.push(finalizeArtifactSection(currentSection));
+      }
+
+      const rawTitle = match[2] ?? '자료';
+      currentSection = {
+        key: `${artifactSections.length}-${rawTitle.toLowerCase()}`,
+        label: normalizeArtifactSectionLabel(rawTitle),
+        content: `${line}\n`,
+        count: 0,
+      };
+      continue;
+    }
+
+    if (isHeading) {
+      if (currentSection) {
+        artifactSections.push(finalizeArtifactSection(currentSection));
+      }
+      currentSection = null;
+      mainLines.push(line);
+      continue;
+    }
+
+    if (currentSection) {
+      currentSection.content += `${line}\n`;
+    } else {
+      mainLines.push(line);
+    }
+  }
+
+  if (currentSection) {
+    artifactSections.push(finalizeArtifactSection(currentSection));
+  }
+
+  return {
+    mainContent: mainLines.join('\n').trim(),
+    artifactSections: mergeArtifactSections(artifactSections),
+  };
+}
+
+function isRepoPathBullet(line: string) {
+  return /^-\s+.*`(?:src|docs|scripts|etc|public|\.github)\/[^`]+`/.test(line);
+}
+
+function sanitizeDetailedWorklogSection(content: string) {
+  const lines = content.split('\n');
+  const sanitizedLines: string[] = [];
+  let inDetailedSection = false;
+  let inCodeFence = false;
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+
+    if (!inCodeFence && /^##\s+상세 작업 내역\b/.test(trimmedLine)) {
+      inDetailedSection = true;
+      sanitizedLines.push(line);
+      continue;
+    }
+
+    if (!inCodeFence && inDetailedSection && /^##\s+/.test(trimmedLine)) {
+      inDetailedSection = false;
+    }
+
+    if (/^```/.test(trimmedLine)) {
+      if (inDetailedSection) {
+        inCodeFence = !inCodeFence;
+        continue;
+      }
+
+      sanitizedLines.push(line);
+      continue;
+    }
+
+    if (inDetailedSection) {
+      if (isRepoPathBullet(trimmedLine)) {
+        continue;
+      }
+      if (/^(diff --git|@@\s|--- a\/|\+\+\+ b\/)/.test(trimmedLine)) {
+        continue;
+      }
+    }
+
+    sanitizedLines.push(line);
+  }
+
+  return sanitizedLines.join('\n').replace(/\n{3,}/g, '\n\n').trim();
+}
+
+export function MarkdownPreviewCard({ document }: MarkdownPreviewCardProps) {
+  const isWorklog = document.folder === 'worklogs';
+  const { mainContent, artifactSections } = splitWorklogContent(document.content);
+  const filesSection = artifactSections.find((section) => section.label === '파일');
+  const visibleArtifactSections = isWorklog
+    ? artifactSections.filter((section) => section.label !== '파일')
+    : artifactSections;
+  const worklogTabs: WorklogTabItem[] = isWorklog
+    ? [
+        {
+          key: 'worklog-main',
+          label: '작업일지',
+          content: sanitizeDetailedWorklogSection(mainContent || document.content),
+        },
+        ...visibleArtifactSections,
+      ]
+    : [];
+
+  return (
+    <Card className="feature-markdown-card">
+      <Title level={4}>{document.title}</Title>
+      {isWorklog ? (
+        <Tabs
+          className="feature-markdown-card__tabs"
+          items={worklogTabs.map((section) => ({
+            key: section.key,
+            label: `${section.label}${section.count && section.count > 0 ? ` (${section.count})` : ''}`,
+            children:
+              section.label === '소스' ? (
+                <WorklogSourcePreview
+                  sourceSectionContent={section.content}
+                  filesSectionContent={filesSection?.content}
+                />
+              ) : section.content ? (
+                <MarkdownPreviewContent content={section.content} documentPath={document.path} />
+              ) : (
+                <Paragraph type="secondary" className="feature-markdown-card__artifacts-copy">
+                  기록된 내용이 없습니다.
+                </Paragraph>
+              ),
+          }))}
+        />
+      ) : (
+        <MarkdownPreviewContent content={document.content} documentPath={document.path} />
+      )}
+      <Text type="secondary" code>
+        {document.path}
+      </Text>
+    </Card>
+  );
+}
diff --git a/src/components/markdownPreview/MarkdownPreviewContent.tsx b/src/components/markdownPreview/MarkdownPreviewContent.tsx
new file mode 100755
index 0000000..7f381cc
--- /dev/null
+++ b/src/components/markdownPreview/MarkdownPreviewContent.tsx
@@ -0,0 +1,219 @@
+import { Typography } from 'antd';
+import { InlineImage } from '../common/InlineImage';
+import { CodexDiffBlock } from '../previewer';
+import { inferCodeLanguage, renderEditorBlock } from '../previewer/renderers';
+
+const { Paragraph, Text, Title } = Typography;
+const docsAssetUrls = import.meta.glob('/docs/assets/**/*.{png,jpg,jpeg,gif,webp,svg}', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>;
+
+type MarkdownPreviewContentProps = {
+  content: string;
+  documentPath?: string;
+  maxBlocks?: number;
+};
+
+function resolveRelativePath(basePath: string, targetPath: string) {
+  const baseSegments = basePath.split('/').filter(Boolean);
+  baseSegments.pop();
+
+  for (const segment of targetPath.split('/').filter(Boolean)) {
+    if (segment === '.') {
+      continue;
+    }
+
+    if (segment === '..') {
+      baseSegments.pop();
+      continue;
+    }
+
+    baseSegments.push(segment);
+  }
+
+  return `/${baseSegments.join('/')}`;
+}
+
+function resolveImageSource(documentPath: string | undefined, imagePath: string) {
+  if (/^(https?:)?\/\//.test(imagePath) || imagePath.startsWith('data:')) {
+    return imagePath;
+  }
+
+  const normalizedPath = imagePath.startsWith('/')
+    ? imagePath
+    : resolveRelativePath(documentPath ?? '/', imagePath);
+
+  return docsAssetUrls[normalizedPath] ?? normalizedPath;
+}
+
+function resolveLinkHref(documentPath: string | undefined, href: string) {
+  if (/^(https?:)?\/\//.test(href) || href.startsWith('mailto:') || href.startsWith('#')) {
+    return href;
+  }
+
+  const normalizedPath = href.startsWith('/')
+    ? href
+    : resolveRelativePath(documentPath ?? '/', href);
+
+  return docsAssetUrls[normalizedPath] ?? normalizedPath;
+}
+
+function renderInline(text: string, documentPath?: string) {
+  const parts = text.split(/(`[^`]+`|\[[^\]]+\]\([^)]+\))/g);
+
+  return parts.map((part, index) => {
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return (
+        <Text code key={`${part}-${index}`}>
+          {part.slice(1, -1)}
+        </Text>
+      );
+    }
+
+    const markdownLinkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+
+    if (markdownLinkMatch) {
+      const [, label, href] = markdownLinkMatch;
+      return (
+        <a
+          key={`${part}-${index}`}
+          href={resolveLinkHref(documentPath, href.trim())}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {label.trim()}
+        </a>
+      );
+    }
+
+    return part;
+  });
+}
+
+export function MarkdownPreviewContent({
+  content,
+  documentPath,
+  maxBlocks,
+}: MarkdownPreviewContentProps) {
+  const lines = content.split('\n');
+  const blocks: React.ReactNode[] = [];
+  let index = 0;
+  const hasBlockLimit = Number.isFinite(maxBlocks);
+
+  while (index < lines.length && (!hasBlockLimit || blocks.length < (maxBlocks ?? 0))) {
+    const line = lines[index].trimEnd();
+
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('### ')) {
+      blocks.push(
+        <Title level={5} key={`h3-${index}`}>
+          {line.slice(4)}
+        </Title>,
+      );
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('## ')) {
+      blocks.push(
+        <Title level={4} key={`h2-${index}`}>
+          {line.slice(3)}
+        </Title>,
+      );
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('# ')) {
+      blocks.push(
+        <Title level={3} key={`h1-${index}`}>
+          {line.slice(2)}
+        </Title>,
+      );
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('- ')) {
+      const items: string[] = [];
+
+      while (index < lines.length && lines[index].trim().startsWith('- ')) {
+        items.push(lines[index].trim().slice(2));
+        index += 1;
+      }
+
+      blocks.push(
+        <ul className="markdown-preview__list" key={`ul-${index}`}>
+          {items.map((item, itemIndex) => (
+            <li key={`${item}-${itemIndex}`}>{renderInline(item, documentPath)}</li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+
+    if (line.startsWith('```')) {
+      const codeLanguage = inferCodeLanguage(line.slice(3).trim() || 'text');
+      const codeLines: string[] = [];
+      index += 1;
+
+      while (index < lines.length && !lines[index].trim().startsWith('```')) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+
+      index += 1;
+      blocks.push(
+        codeLanguage === 'diff' ? (
+          <div className="markdown-preview__code" key={`code-${index}`}>
+            <CodexDiffBlock diffText={codeLines.join('\n')} />
+          </div>
+        ) : (
+          <div className="markdown-preview__code" key={`code-${index}`}>
+            {renderEditorBlock(codeLines.join('\n'), codeLanguage, 'code')}
+          </div>
+        ),
+      );
+      continue;
+    }
+
+    const imageMatch = line.match(/^!\[(.*)\]\((.+)\)$/);
+
+    if (imageMatch) {
+      const [, alt, src] = imageMatch;
+      blocks.push(
+        <InlineImage
+          key={`img-${index}`}
+          className="markdown-preview__image"
+          src={resolveImageSource(documentPath, src.trim())}
+          alt={alt.trim() || 'markdown image'}
+          fallbackText="문서 이미지를 불러오지 못했습니다."
+        />,
+      );
+      index += 1;
+      continue;
+    }
+
+    const paragraphLines: string[] = [line];
+    index += 1;
+
+    while (index < lines.length && lines[index].trim() && !/^#{1,3}\s/.test(lines[index].trim())) {
+      if (lines[index].trim().startsWith('- ') || lines[index].trim().startsWith('```')) {
+        break;
+      }
+      paragraphLines.push(lines[index].trim());
+      index += 1;
+    }
+
+    blocks.push(
+      <Paragraph key={`p-${index}`}>{renderInline(paragraphLines.join(' '), documentPath)}</Paragraph>,
+    );
+  }
+
+  return <div className="markdown-preview">{blocks}</div>;
+}
diff --git a/src/components/markdownPreview/MarkdownPreviewList.tsx b/src/components/markdownPreview/MarkdownPreviewList.tsx
new file mode 100755
index 0000000..6a18a5f
--- /dev/null
+++ b/src/components/markdownPreview/MarkdownPreviewList.tsx
@@ -0,0 +1,55 @@
+import { Empty, Flex } from 'antd';
+import { useEffect, useState } from 'react';
+import { MarkdownPreviewCard } from './MarkdownPreviewCard';
+import type { MarkdownDocument } from './markdown-document';
+import type { MarkdownDocumentEntry } from './registry';
+import { resolveMarkdownDocuments } from './registry';
+
+export type MarkdownPreviewListProps = {
+  entries: MarkdownDocumentEntry[];
+  basePath?: string;
+  documents?: MarkdownDocument[];
+  emptyDescription?: string;
+};
+
+export function MarkdownPreviewList({
+  entries,
+  basePath,
+  documents,
+  emptyDescription = '표시할 markdown 문서가 없습니다.',
+}: MarkdownPreviewListProps) {
+  const [resolvedDocuments, setResolvedDocuments] = useState<MarkdownDocument[]>(documents ?? []);
+
+  useEffect(() => {
+    if (documents) {
+      setResolvedDocuments(documents);
+      return;
+    }
+
+    let mounted = true;
+
+    void resolveMarkdownDocuments(entries, basePath).then((loadedDocuments) => {
+      if (mounted) {
+        setResolvedDocuments(loadedDocuments);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [basePath, documents, entries]);
+
+  if (resolvedDocuments.length === 0) {
+    return <Empty description={emptyDescription} />;
+  }
+
+  return (
+    <Flex vertical gap={16} className="feature-markdown-list">
+      {resolvedDocuments.map((document) => (
+        <div key={document.id} className="feature-markdown-list__item">
+          <MarkdownPreviewCard document={document} />
+        </div>
+      ))}
+    </Flex>
+  );
+}
diff --git a/src/components/markdownPreview/WorklogSourcePreview.tsx b/src/components/markdownPreview/WorklogSourcePreview.tsx
new file mode 100755
index 0000000..e7b9f73
--- /dev/null
+++ b/src/components/markdownPreview/WorklogSourcePreview.tsx
@@ -0,0 +1,267 @@
+import { Empty } from 'antd';
+import { CodexDiffPreviewer } from '../previewer';
+import type { CodexDiffPreviewerFile, CodexDiffPreviewerFileStatus } from '../previewer';
+
+const repoTextModules = {
+  ...import.meta.glob('/src/**/*.{ts,tsx,js,jsx,css,scss,html,json,md,mjs,yml,yaml}', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+  ...import.meta.glob('/docs/**/*.{ts,tsx,js,jsx,css,scss,html,json,md,mjs,yml,yaml}', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+  ...import.meta.glob('/scripts/**/*.{ts,tsx,js,jsx,css,scss,html,json,md,mjs,yml,yaml,sh}', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+  ...import.meta.glob('/etc/**/*.{ts,tsx,js,jsx,css,scss,html,json,md,mjs,yml,yaml,sh}', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+  ...import.meta.glob('/.github/**/*.{json,md,mjs,yml,yaml}', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+  ...import.meta.glob('/{README.md,package.json,package-lock.json,docker-compose.yml,.gitignore}', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+} as Record<string, string>;
+
+const repoImageModules = {
+  ...import.meta.glob('/src/**/*.{png,jpg,jpeg,gif,webp,svg,avif}', {
+    eager: true,
+    import: 'default',
+  }),
+  ...import.meta.glob('/docs/**/*.{png,jpg,jpeg,gif,webp,svg,avif}', {
+    eager: true,
+    import: 'default',
+  }),
+} as Record<string, string>;
+
+type WorklogSourcePreviewProps = {
+  sourceSectionContent: string;
+  filesSectionContent?: string;
+};
+
+type ParsedChangedFile = {
+  path: string;
+  previousPath: string | null;
+  status: CodexDiffPreviewerFileStatus;
+};
+
+const BINARY_FILE_PATTERN =
+  /\.(?:png|jpe?g|gif|webp|svg|ico|pdf|zip|gz|tar|woff2?|ttf|eot|mp3|mp4|mov|avi|webm)$/i;
+const IMAGE_FILE_PATTERN = /\.(?:png|jpe?g|gif|webp|svg|avif)$/i;
+
+function stripSectionHeading(content: string) {
+  return content.replace(/^#{2,3}\s+.+\n?/, '').trim();
+}
+
+function normalizeRepoPath(path: string) {
+  return path.replace(/^`|`$/g, '').replace(/^\/+/, '').trim();
+}
+
+function inferLanguageFromPath(path: string) {
+  const extension = path.split('.').pop()?.toLowerCase();
+
+  switch (extension) {
+    case 'ts':
+      return 'ts';
+    case 'tsx':
+      return 'tsx';
+    case 'js':
+      return 'js';
+    case 'jsx':
+      return 'jsx';
+    case 'css':
+      return 'css';
+    case 'scss':
+      return 'scss';
+    case 'html':
+      return 'html';
+    case 'json':
+      return 'json';
+    case 'md':
+      return 'md';
+    case 'mjs':
+      return 'js';
+    case 'yml':
+    case 'yaml':
+      return 'yaml';
+    case 'sh':
+      return 'bash';
+    default:
+      return 'text';
+  }
+}
+
+function parseChangedFiles(filesSectionContent?: string) {
+  if (!filesSectionContent?.trim()) {
+    return [];
+  }
+
+  return stripSectionHeading(filesSectionContent)
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.startsWith('- '))
+    .map((line) => line.slice(2).trim())
+    .map<ParsedChangedFile | null>((line) => {
+      const renamedMatch = line.match(/^R\s+(.+?)\s+->\s+(.+)$/);
+      if (renamedMatch) {
+        return {
+          path: normalizeRepoPath(renamedMatch[2]),
+          previousPath: normalizeRepoPath(renamedMatch[1]),
+          status: 'renamed',
+        };
+      }
+
+      const statusMatch = line.match(/^([A-Z])\s+(.+)$/);
+      if (statusMatch) {
+        const [, rawStatus, rawPath] = statusMatch;
+        const normalizedPath = normalizeRepoPath(rawPath);
+        return {
+          path: normalizedPath,
+          previousPath: null,
+          status:
+            rawStatus === 'A'
+              ? 'added'
+              : rawStatus === 'M'
+                ? 'modified'
+                : rawStatus === 'D'
+                  ? 'deleted'
+                  : rawStatus === 'R'
+                    ? 'renamed'
+                    : BINARY_FILE_PATTERN.test(normalizedPath)
+                      ? 'binary'
+                      : 'unknown',
+        };
+      }
+
+      if (!line || /^저장소 기준/.test(line)) {
+        return null;
+      }
+
+      const normalizedPath = normalizeRepoPath(line);
+      return normalizedPath
+        ? {
+            path: normalizedPath,
+            previousPath: null,
+            status: BINARY_FILE_PATTERN.test(normalizedPath) ? 'binary' : 'unknown',
+          }
+        : null;
+    })
+    .filter((file): file is ParsedChangedFile => Boolean(file));
+}
+
+function parseSourcePaths(sourceSectionContent: string) {
+  const body = stripSectionHeading(sourceSectionContent);
+  const headingPaths = body
+    .split('\n')
+    .map((line) => line.trim())
+    .map((line) => line.match(/^###\s+파일\s+\d+:\s+`([^`]+)`$/)?.[1] ?? null)
+    .filter((path): path is string => Boolean(path));
+  const inlinePaths = Array.from(
+    body.matchAll(/`((?:src|docs|scripts|etc|public|\.github)\/[^`\n]+?\.[a-z0-9]+)`/gi),
+  ).map((match) => match[1]);
+  const diffPaths = Array.from(body.matchAll(/^diff --git a\/(.+?) b\/(.+)$/gm)).flatMap((match) => [
+    match[1],
+    match[2],
+  ]);
+
+  return Array.from(new Set([...headingPaths, ...inlinePaths, ...diffPaths])).map((path) => ({
+    path: normalizeRepoPath(path),
+    previousPath: null,
+    status: 'unknown' as const,
+  }));
+}
+
+function parseRawDiffText(sourceSectionContent: string) {
+  const matches = Array.from(sourceSectionContent.matchAll(/```diff\s*\n([\s\S]*?)\n```/g));
+  return matches.map((match) => match[1].trimEnd()).filter(Boolean).join('\n\n');
+}
+
+function buildPreviewFiles(entries: ParsedChangedFile[]): CodexDiffPreviewerFile[] {
+  return entries.map((entry) => {
+    const normalizedPath = `/${entry.path}`;
+    const isPublicFile = entry.path.startsWith('public/');
+    const publicAssetUrl = isPublicFile ? `/${entry.path.slice('public/'.length)}` : null;
+    const rawContent = repoTextModules[normalizedPath];
+    const imageUrl = repoImageModules[normalizedPath] ?? (IMAGE_FILE_PATTERN.test(entry.path) ? publicAssetUrl : null);
+    const isBinary = entry.status === 'binary' || BINARY_FILE_PATTERN.test(entry.path);
+    const isImage = IMAGE_FILE_PATTERN.test(entry.path);
+
+    return {
+      path: entry.path,
+      previousPath: entry.previousPath,
+      status: isBinary ? 'binary' : entry.status,
+      previewType:
+        isImage && imageUrl
+          ? 'image'
+          : entry.status === 'deleted'
+            ? 'empty'
+            : 'code',
+      language: inferLanguageFromPath(entry.path),
+      content: isImage && imageUrl
+        ? imageUrl
+        : isBinary
+          ? '바이너리 파일은 전체 소스를 표시하지 않습니다.'
+        : isPublicFile
+          ? 'public 디렉터리 파일은 번들 import 없이 정적 URL로만 제공되어 전체 소스 미리보기를 표시하지 않습니다.'
+        : rawContent ??
+            (entry.status === 'deleted'
+              ? '삭제된 파일이라 현재 저장소에서 전체 소스를 불러올 수 없습니다.'
+              : isImage
+                ? '이미지 파일 URL을 현재 저장소에서 찾지 못했습니다.'
+                : '현재 저장소에서 파일 내용을 불러올 수 없습니다.'),
+    };
+  });
+}
+
+function mergeSourceEntries(changedFiles: ParsedChangedFile[], sourcePaths: ParsedChangedFile[]) {
+  const merged = new Map<string, ParsedChangedFile>();
+
+  for (const entry of sourcePaths) {
+    merged.set(entry.path, entry);
+  }
+
+  for (const entry of changedFiles) {
+    merged.set(entry.path, entry);
+  }
+
+  return Array.from(merged.values());
+}
+
+export function WorklogSourcePreview({
+  sourceSectionContent,
+  filesSectionContent,
+}: WorklogSourcePreviewProps) {
+  const diffText = parseRawDiffText(sourceSectionContent);
+  const changedFiles = parseChangedFiles(filesSectionContent);
+  const sourcePaths = mergeSourceEntries(changedFiles, parseSourcePaths(sourceSectionContent));
+  const files = buildPreviewFiles(sourcePaths);
+  const description = diffText
+    ? '변경 파일 기준 전체 소스와 raw diff를 Codex preview 스타일로 전환해 표시합니다.'
+    : '변경 파일 기준 전체 소스를 Codex preview 스타일로 표시합니다. raw diff는 작업일지 `## 소스` 섹션의 diff 코드블록을 그대로 사용합니다.';
+
+  if (!files.length && !diffText) {
+    return <Empty description="기록된 소스 미리보기가 없습니다." />;
+  }
+
+  return (
+    <CodexDiffPreviewer
+      title="작업 소스"
+      description={description}
+      files={files}
+      diffText={diffText || null}
+      height="auto"
+    />
+  );
+}
diff --git a/src/components/markdownPreview/index.ts b/src/components/markdownPreview/index.ts
new file mode 100755
index 0000000..5b1bba2
--- /dev/null
+++ b/src/components/markdownPreview/index.ts
@@ -0,0 +1,8 @@
+export { MarkdownPreviewCard } from './MarkdownPreviewCard';
+export type { MarkdownPreviewCardProps } from './MarkdownPreviewCard';
+export { MarkdownPreviewList } from './MarkdownPreviewList';
+export type { MarkdownPreviewListProps } from './MarkdownPreviewList';
+export { MarkdownPreviewContent } from './MarkdownPreviewContent';
+export { resolveMarkdownDocuments } from './registry';
+export type { MarkdownDocument } from './markdown-document';
+export type { MarkdownDocumentEntry } from './registry';
diff --git a/src/components/markdownPreview/markdown-document.ts b/src/components/markdownPreview/markdown-document.ts
new file mode 100755
index 0000000..dfc7223
--- /dev/null
+++ b/src/components/markdownPreview/markdown-document.ts
@@ -0,0 +1,8 @@
+export type MarkdownDocument = {
+  id: string;
+  title: string;
+  preview: string;
+  path: string;
+  content: string;
+  folder: string;
+};
diff --git a/src/components/markdownPreview/registry.ts b/src/components/markdownPreview/registry.ts
new file mode 100755
index 0000000..fca5cd9
--- /dev/null
+++ b/src/components/markdownPreview/registry.ts
@@ -0,0 +1,63 @@
+import type { MarkdownDocument } from './markdown-document';
+
+export type MarkdownDocumentEntry = {
+  id?: string;
+  title?: string;
+  folder?: string;
+  path: string;
+  order?: number;
+  load: () => Promise<string>;
+};
+
+function extractTitle(markdown: string, fallback: string) {
+  const heading = markdown.match(/^#\s+(.+)$/m);
+  return heading?.[1]?.trim() || fallback;
+}
+
+function extractPreview(markdown: string) {
+  const normalized = markdown
+    .replace(/^#.+$/gm, '')
+    .replace(/^##.+$/gm, '')
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/`/g, '')
+    .replace(/\n+/g, ' ')
+    .trim();
+
+  return normalized.slice(0, 180);
+}
+
+export async function resolveMarkdownDocuments(
+  entries: MarkdownDocumentEntry[],
+  basePath?: string,
+) {
+  const filteredEntries = basePath
+    ? entries.filter((entry) => entry.path.includes(basePath))
+    : entries;
+
+  const loadedDocuments = await Promise.all(
+    filteredEntries.map(async (entry) => {
+      const content = await entry.load();
+      const fallback = entry.path.split('/').at(-1)?.replace(/\.md$/, '') || 'document';
+      const relativePath = basePath ? entry.path.split(basePath)[1] || '' : entry.path;
+      const folder = entry.folder ?? (relativePath.split('/').filter(Boolean)[0] || 'root');
+
+      return {
+        id: entry.id ?? entry.path.replace(/[^\w-]+/g, '-'),
+        title: entry.title ?? extractTitle(content, fallback),
+        preview: extractPreview(content),
+        path: entry.path,
+        content,
+        folder,
+      } satisfies MarkdownDocument;
+    }),
+  );
+
+  return loadedDocuments.sort(
+    (left, right) =>
+      ((filteredEntries.find((entry) => entry.path === left.path)?.order ??
+        Number.MAX_SAFE_INTEGER) -
+        (filteredEntries.find((entry) => entry.path === right.path)?.order ??
+          Number.MAX_SAFE_INTEGER)) ||
+      left.title.localeCompare(right.title),
+  );
+}
diff --git a/src/components/markdownPreview/samples/MarkdownPreviewCardBaseSample.tsx b/src/components/markdownPreview/samples/MarkdownPreviewCardBaseSample.tsx
new file mode 100755
index 0000000..4e01fe5
--- /dev/null
+++ b/src/components/markdownPreview/samples/MarkdownPreviewCardBaseSample.tsx
@@ -0,0 +1,29 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { MarkdownPreviewCard } from '../MarkdownPreviewCard';
+
+export const sampleMeta: SampleMeta = {
+  id: 'markdown-preview-card-base',
+  componentId: 'markdown-preview-card',
+  title: 'Markdown Preview Card',
+  description: 'markdown 문서를 카드 레이아웃으로 감싸서 렌더링하는 컴포넌트입니다.',
+  category: 'Docs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 84,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <MarkdownPreviewCard
+      document={{
+        id: 'guide-1',
+        title: '운영 가이드',
+        preview: '입고와 출고 절차 요약',
+        path: '/docs/guides/operations.md',
+        folder: 'guides',
+        content: `# 운영 가이드\n## 입고\n- 입고 검수\n- 적치 확정`,
+      }}
+    />
+  );
+}
diff --git a/src/components/markdownPreview/samples/MarkdownPreviewContentBaseSample.tsx b/src/components/markdownPreview/samples/MarkdownPreviewContentBaseSample.tsx
new file mode 100755
index 0000000..f6e3bf2
--- /dev/null
+++ b/src/components/markdownPreview/samples/MarkdownPreviewContentBaseSample.tsx
@@ -0,0 +1,23 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { MarkdownPreviewContent } from '../MarkdownPreviewContent';
+
+export const sampleMeta: SampleMeta = {
+  id: 'markdown-preview-content-base',
+  componentId: 'markdown-preview-content',
+  title: 'Markdown Preview Content',
+  description: '단일 markdown 본문을 렌더링하는 콘텐츠 컴포넌트입니다.',
+  category: 'Docs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 83,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <MarkdownPreviewContent
+      documentPath="/docs/guides/sample.md"
+      content={`# 운영 가이드\n## 오늘 처리\n- 입고 검수\n- 피킹 확인\n\n\`\`\`ts\nconst ready = true;\n\`\`\``}
+    />
+  );
+}
diff --git a/src/components/markdownPreview/samples/MarkdownPreviewListBaseSample.tsx b/src/components/markdownPreview/samples/MarkdownPreviewListBaseSample.tsx
new file mode 100755
index 0000000..6b9b2c1
--- /dev/null
+++ b/src/components/markdownPreview/samples/MarkdownPreviewListBaseSample.tsx
@@ -0,0 +1,40 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { MarkdownPreviewList } from '../MarkdownPreviewList';
+
+export const sampleMeta: SampleMeta = {
+  id: 'markdown-preview-list-base',
+  componentId: 'markdown-preview-list',
+  title: 'Markdown Preview List',
+  description: '여러 markdown 문서를 목록 형태로 렌더링하는 컴포넌트입니다.',
+  category: 'Docs',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 85,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <MarkdownPreviewList
+      entries={[]}
+      documents={[
+        {
+          id: 'guide-1',
+          title: '입고 작업 가이드',
+          preview: '입고 절차',
+          path: '/docs/guides/inbound.md',
+          folder: 'guides',
+          content: `# 입고 작업 가이드\n- 검수\n- 적치`,
+        },
+        {
+          id: 'guide-2',
+          title: '출고 작업 가이드',
+          preview: '출고 절차',
+          path: '/docs/guides/outbound.md',
+          folder: 'guides',
+          content: `# 출고 작업 가이드\n- 피킹\n- 패킹`,
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/components/navigation/SectionMenuLayout.tsx b/src/components/navigation/SectionMenuLayout.tsx
new file mode 100755
index 0000000..3262351
--- /dev/null
+++ b/src/components/navigation/SectionMenuLayout.tsx
@@ -0,0 +1,49 @@
+import { Card, Typography } from 'antd';
+import type { ReactNode } from 'react';
+
+const { Link, Text, Title } = Typography;
+
+export type SectionMenuItem = {
+  key: string;
+  label: string;
+  href: string;
+  description?: string;
+};
+
+export type SectionMenuLayoutProps = {
+  title: string;
+  description?: string;
+  items: SectionMenuItem[];
+  children: ReactNode;
+};
+
+export function SectionMenuLayout({
+  title,
+  description,
+  items,
+  children,
+}: SectionMenuLayoutProps) {
+  return (
+    <div className="section-menu-layout">
+      <aside className="section-menu-layout__sidebar">
+        <Card className="section-menu-layout__nav-card" bordered={false}>
+          <Title level={5}>{title}</Title>
+          {description ? <Text type="secondary">{description}</Text> : null}
+
+          <nav className="section-menu-layout__nav" aria-label={title}>
+            {items.map((item) => (
+              <Link key={item.key} href={item.href} className="section-menu-layout__link">
+                <span className="section-menu-layout__link-label">{item.label}</span>
+                {item.description ? (
+                  <span className="section-menu-layout__link-copy">{item.description}</span>
+                ) : null}
+              </Link>
+            ))}
+          </nav>
+        </Card>
+      </aside>
+
+      <div className="section-menu-layout__content">{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/navigation/folder-tree-nav.tsx b/src/components/navigation/folder-tree-nav.tsx
new file mode 100755
index 0000000..10d72b5
--- /dev/null
+++ b/src/components/navigation/folder-tree-nav.tsx
@@ -0,0 +1,78 @@
+import { Button, Typography } from 'antd';
+import { Fragment, useMemo, useState } from 'react';
+
+const { Link, Text } = Typography;
+
+export type FolderTreeLeaf = {
+  id: string;
+  label: string;
+  href: string;
+};
+
+export type FolderTreeGroup = {
+  id: string;
+  label: string;
+  items: FolderTreeLeaf[];
+};
+
+export type FolderTreeNavProps = {
+  groups: FolderTreeGroup[];
+  title?: string;
+  defaultExpandedIds?: string[];
+};
+
+export function FolderTreeNav({
+  groups,
+  title = 'Folders',
+  defaultExpandedIds = [],
+}: FolderTreeNavProps) {
+  const [expandedIds, setExpandedIds] = useState<string[]>(defaultExpandedIds);
+  const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds]);
+
+  const toggleGroup = (groupId: string) => {
+    setExpandedIds((previous) =>
+      previous.includes(groupId)
+        ? previous.filter((id) => id !== groupId)
+        : [...previous, groupId],
+    );
+  };
+
+  return (
+    <div className="folder-tree-nav">
+      <Text strong>{title}</Text>
+      <div className="folder-tree-nav__groups">
+        {groups.map((group) => {
+          const isExpanded = expandedSet.has(group.id);
+
+          return (
+            <Fragment key={group.id}>
+              <div className="folder-tree-nav__group-row">
+                <Button
+                  type="text"
+                  size="small"
+                  className="folder-tree-nav__toggle"
+                  onClick={() => {
+                    toggleGroup(group.id);
+                  }}
+                >
+                  {isExpanded ? '-' : '+'}
+                </Button>
+                <Link href={`#${group.id}`}>{group.label}</Link>
+              </div>
+
+              {isExpanded ? (
+                <div className="folder-tree-nav__children">
+                  {group.items.map((item) => (
+                    <Link key={item.id} href={item.href} className="folder-tree-nav__child-link">
+                      {item.label}
+                    </Link>
+                  ))}
+                </div>
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts
new file mode 100755
index 0000000..0f4a8b8
--- /dev/null
+++ b/src/components/navigation/index.ts
@@ -0,0 +1,4 @@
+export { FolderTreeNav } from './folder-tree-nav';
+export { SectionMenuLayout } from './SectionMenuLayout';
+export type { FolderTreeGroup, FolderTreeLeaf, FolderTreeNavProps } from './folder-tree-nav';
+export type { SectionMenuItem, SectionMenuLayoutProps } from './SectionMenuLayout';
diff --git a/src/components/navigation/samples/FolderTreeNavBaseSample.tsx b/src/components/navigation/samples/FolderTreeNavBaseSample.tsx
new file mode 100755
index 0000000..6841475
--- /dev/null
+++ b/src/components/navigation/samples/FolderTreeNavBaseSample.tsx
@@ -0,0 +1,41 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { FolderTreeNav } from '../folder-tree-nav';
+
+export const sampleMeta: SampleMeta = {
+  id: 'folder-tree-nav-base',
+  componentId: 'folder-tree-nav',
+  title: 'Folder Tree Nav',
+  description: '그룹별 문서 링크를 트리 형태로 펼치고 접을 수 있는 네비게이션 컴포넌트입니다.',
+  category: 'Navigation',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 80,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <FolderTreeNav
+      title="Documents"
+      defaultExpandedIds={['guides']}
+      groups={[
+        {
+          id: 'guides',
+          label: 'Guides',
+          items: [
+            { id: 'intro', label: 'Introduction', href: '#intro' },
+            { id: 'deploy', label: 'Deployment', href: '#deploy' },
+          ],
+        },
+        {
+          id: 'apis',
+          label: 'APIs',
+          items: [
+            { id: 'search', label: 'Search API', href: '#search' },
+            { id: 'widgets', label: 'Widget API', href: '#widgets' },
+          ],
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/components/navigation/samples/SectionMenuLayoutBaseSample.tsx b/src/components/navigation/samples/SectionMenuLayoutBaseSample.tsx
new file mode 100755
index 0000000..8f1bd45
--- /dev/null
+++ b/src/components/navigation/samples/SectionMenuLayoutBaseSample.tsx
@@ -0,0 +1,38 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { SectionMenuLayout } from '../SectionMenuLayout';
+
+export const sampleMeta: SampleMeta = {
+  id: 'section-menu-layout-base',
+  componentId: 'section-menu-layout',
+  title: 'Section Menu Layout',
+  description: '좌측 섹션 메뉴와 우측 본문 영역을 함께 구성하는 레이아웃 컴포넌트입니다.',
+  category: 'Navigation',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 81,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <SectionMenuLayout
+      title="Operations Guide"
+      description="입고와 출고 절차를 빠르게 이동합니다."
+      items={[
+        { key: 'inbound', label: 'Inbound', href: '#inbound', description: '입고 절차' },
+        { key: 'outbound', label: 'Outbound', href: '#outbound', description: '출고 절차' },
+      ]}
+    >
+      <div style={{ display: 'grid', gap: 16 }}>
+        <section id="inbound">
+          <h3>Inbound</h3>
+          <p>입고 검수와 적치 절차를 확인합니다.</p>
+        </section>
+        <section id="outbound">
+          <h3>Outbound</h3>
+          <p>피킹과 출고 마감 절차를 확인합니다.</p>
+        </section>
+      </div>
+    </SectionMenuLayout>
+  );
+}
diff --git a/src/components/previewer/CodexDiffBlock.tsx b/src/components/previewer/CodexDiffBlock.tsx
new file mode 100755
index 0000000..4aee6c5
--- /dev/null
+++ b/src/components/previewer/CodexDiffBlock.tsx
@@ -0,0 +1,262 @@
+import { DownOutlined, RightOutlined } from '@ant-design/icons';
+import { Button, Empty, Space, Tag, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { renderEditorBlock } from './renderers';
+import './CodexDiffPreviewer.css';
+
+const { Text } = Typography;
+
+export type CodexDiffFileStatus = 'added' | 'modified' | 'deleted' | 'renamed' | 'binary' | 'unknown';
+
+export type CodexDiffSection = {
+  key: string;
+  path: string;
+  previousPath: string | null;
+  status: CodexDiffFileStatus;
+  diff: string;
+};
+
+export const CODEX_DIFF_STATUS_LABEL_MAP: Record<CodexDiffFileStatus, string> = {
+  added: '신규',
+  modified: '변경',
+  deleted: '삭제',
+  renamed: '이동',
+  binary: '바이너리',
+  unknown: '기타',
+};
+
+type CodexDiffBlockProps = {
+  diffText?: string | null;
+  summary?: string;
+  emptyDescription?: string;
+  showToolbar?: boolean;
+  className?: string;
+};
+
+function inferDiffSectionStatus(lines: string[]): CodexDiffFileStatus {
+  if (lines.some((line) => line.startsWith('rename from '))) {
+    return 'renamed';
+  }
+
+  if (lines.some((line) => line.startsWith('new file mode '))) {
+    return 'added';
+  }
+
+  if (lines.some((line) => line.startsWith('deleted file mode '))) {
+    return 'deleted';
+  }
+
+  if (lines.some((line) => /^Binary files\b/.test(line) || line.startsWith('GIT binary patch'))) {
+    return 'binary';
+  }
+
+  if (lines.some((line) => line.startsWith('@@ ') || line.startsWith('@@@ '))) {
+    return 'modified';
+  }
+
+  return 'unknown';
+}
+
+function resolveDiffPath(lines: string[]) {
+  const renameTo = lines.find((line) => line.startsWith('rename to '))?.slice('rename to '.length).trim();
+  const renameFrom = lines.find((line) => line.startsWith('rename from '))?.slice('rename from '.length).trim() ?? null;
+  const plusLine = lines.find((line) => line.startsWith('+++ '));
+  const diffLine = lines.find((line) => line.startsWith('diff --git '));
+
+  if (renameTo) {
+    return {
+      path: renameTo,
+      previousPath: renameFrom,
+    };
+  }
+
+  if (plusLine) {
+    const rawPath = plusLine.slice(4).trim();
+    if (rawPath !== '/dev/null') {
+      return {
+        path: rawPath.replace(/^b\//, ''),
+        previousPath: renameFrom,
+      };
+    }
+  }
+
+  if (diffLine) {
+    const match = diffLine.match(/^diff --git a\/(.+?) b\/(.+)$/);
+    if (match) {
+      return {
+        path: match[2],
+        previousPath: match[1] === match[2] ? renameFrom : match[1],
+      };
+    }
+  }
+
+  return {
+    path: renameTo ?? renameFrom ?? 'raw.diff',
+    previousPath: renameFrom && renameFrom !== renameTo ? renameFrom : null,
+  };
+}
+
+export function parseCodexDiffSections(diffText: string | null | undefined): CodexDiffSection[] {
+  if (!diffText?.trim()) {
+    return [];
+  }
+
+  const normalized = diffText.replace(/\r\n/g, '\n');
+  const lines = normalized.split('\n');
+  const sections: CodexDiffSection[] = [];
+  let current: string[] = [];
+
+  const flush = () => {
+    if (!current.length) {
+      return;
+    }
+
+    const { path, previousPath } = resolveDiffPath(current);
+    sections.push({
+      key: `${sections.length}:${path}`,
+      path,
+      previousPath,
+      status: inferDiffSectionStatus(current),
+      diff: current.join('\n').trimEnd(),
+    });
+    current = [];
+  };
+
+  for (const line of lines) {
+    if (line.startsWith('diff --git ') && current.length) {
+      flush();
+    }
+
+    current.push(line);
+  }
+
+  flush();
+
+  return sections.length
+    ? sections
+    : [
+        {
+          key: '0:raw.diff',
+          path: 'raw.diff',
+          previousPath: null,
+          status: 'unknown',
+          diff: normalized.trimEnd(),
+        },
+      ];
+}
+
+function resolveTagColor(status: CodexDiffFileStatus) {
+  if (status === 'added') {
+    return 'green';
+  }
+
+  if (status === 'modified') {
+    return 'blue';
+  }
+
+  if (status === 'deleted') {
+    return 'red';
+  }
+
+  if (status === 'renamed') {
+    return 'gold';
+  }
+
+  return 'default';
+}
+
+export function CodexDiffBlock({
+  diffText,
+  summary,
+  emptyDescription = '표시할 diff가 없습니다.',
+  showToolbar = true,
+  className,
+}: CodexDiffBlockProps) {
+  const diffSections = useMemo(() => parseCodexDiffSections(diffText), [diffText]);
+  const [expandedDiffPaths, setExpandedDiffPaths] = useState<string[]>(() => diffSections.slice(0, 1).map((section) => section.path));
+
+  useEffect(() => {
+    setExpandedDiffPaths((currentPaths) => {
+      const availablePaths = new Set(diffSections.map((section) => section.path));
+      const nextPaths = currentPaths.filter((path) => availablePaths.has(path));
+
+      if (nextPaths.length > 0) {
+        return nextPaths;
+      }
+
+      return diffSections[0] ? [diffSections[0].path] : [];
+    });
+  }, [diffSections]);
+
+  if (!diffSections.length) {
+    return <Empty description={emptyDescription} />;
+  }
+
+  return (
+    <div className={className ?? 'codex-diff-previewer__diff-list'}>
+      <div className="codex-diff-previewer__diff-toolbar">
+        <Text type="secondary">
+          {summary ?? `파일 ${diffSections.length}개 기준으로 diff를 분리해 표시합니다.`}
+        </Text>
+        {showToolbar ? (
+          <Space size={8} wrap>
+            <Button
+              size="small"
+              onClick={() => {
+                setExpandedDiffPaths(diffSections.map((section) => section.path));
+              }}
+            >
+              전체 펼치기
+            </Button>
+            <Button
+              size="small"
+              onClick={() => {
+                setExpandedDiffPaths([]);
+              }}
+            >
+              전체 접기
+            </Button>
+          </Space>
+        ) : null}
+      </div>
+
+      {diffSections.map((section) => {
+        const isExpanded = expandedDiffPaths.includes(section.path);
+        const displayPath = section.previousPath ? `${section.previousPath} -> ${section.path}` : section.path;
+
+        return (
+          <section className="codex-diff-previewer__diff-section" key={section.key}>
+            <button
+              type="button"
+              className="codex-diff-previewer__diff-toggle"
+              onClick={() => {
+                setExpandedDiffPaths((currentPaths) =>
+                  currentPaths.includes(section.path)
+                    ? currentPaths.filter((path) => path !== section.path)
+                    : [...currentPaths, section.path],
+                );
+              }}
+            >
+              <Space align="center" size={10} className="codex-diff-previewer__diff-toggle-main">
+                {isExpanded ? <DownOutlined /> : <RightOutlined />}
+                <span className="codex-diff-previewer__file-name">{section.path.split('/').pop() ?? section.path}</span>
+                <Tag bordered={false} color={resolveTagColor(section.status)}>
+                  {CODEX_DIFF_STATUS_LABEL_MAP[section.status]}
+                </Tag>
+              </Space>
+              <Text type="secondary" className="codex-diff-previewer__file-path">
+                {displayPath}
+              </Text>
+            </button>
+
+            {isExpanded ? (
+              <div className="codex-diff-previewer__diff-body">
+                {renderEditorBlock(section.diff, 'diff', 'code')}
+              </div>
+            ) : null}
+          </section>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/previewer/CodexDiffPreviewer.css b/src/components/previewer/CodexDiffPreviewer.css
new file mode 100755
index 0000000..f15f48a
--- /dev/null
+++ b/src/components/previewer/CodexDiffPreviewer.css
@@ -0,0 +1,129 @@
+.codex-diff-previewer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.codex-diff-previewer__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.codex-diff-previewer__title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #f5f5f5;
+  margin-bottom: 4px;
+}
+
+.codex-diff-previewer__stats {
+  justify-content: flex-end;
+}
+
+.codex-diff-previewer__file-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f8fafc;
+}
+
+.codex-diff-previewer__file-path {
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.codex-diff-previewer__diff-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.codex-diff-previewer__diff-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.codex-diff-previewer__diff-section {
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(15, 23, 42, 0.56);
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.codex-diff-previewer__diff-section--expanded {
+  position: fixed;
+  inset: 16px;
+  z-index: 1250;
+  border-radius: 20px;
+  background: #0f172a;
+  box-shadow:
+    0 28px 72px rgba(15, 23, 42, 0.38),
+    0 12px 28px rgba(15, 23, 42, 0.2);
+}
+
+.codex-diff-previewer__diff-toggle {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 88px 14px 16px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.codex-diff-previewer__diff-toggle:hover {
+  background: rgba(13, 49, 60, 0.38);
+}
+
+.codex-diff-previewer__diff-toggle-main {
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.codex-diff-previewer__diff-body {
+  padding: 0;
+}
+
+.codex-diff-previewer__diff-section--expanded .codex-diff-previewer__diff-body {
+  height: calc(100vh - 68px);
+  overflow: auto;
+}
+
+.codex-diff-previewer__diff-actions {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 1;
+}
+
+.codex-diff-previewer__diff-actions .ant-btn {
+  color: rgba(226, 232, 240, 0.88);
+}
+
+.codex-diff-previewer__diff-actions .ant-btn:hover {
+  color: #ffffff;
+  background: rgba(148, 163, 184, 0.16);
+}
+
+@media (max-width: 960px) {
+  .codex-diff-previewer__diff-toggle {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-right: 72px;
+  }
+
+  .codex-diff-previewer__diff-actions {
+    top: 12px;
+    right: 10px;
+  }
+}
diff --git a/src/components/previewer/CodexDiffPreviewer.tsx b/src/components/previewer/CodexDiffPreviewer.tsx
new file mode 100755
index 0000000..1959789
--- /dev/null
+++ b/src/components/previewer/CodexDiffPreviewer.tsx
@@ -0,0 +1,335 @@
+import {
+  CopyOutlined,
+  DownOutlined,
+  FileImageOutlined,
+  FileTextOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+  RightOutlined,
+} from '@ant-design/icons';
+import { Button, Empty, Segmented, Space, Tag, Typography, message } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  CODEX_DIFF_STATUS_LABEL_MAP,
+  CodexDiffBlock,
+  type CodexDiffFileStatus,
+} from './CodexDiffBlock';
+import { PreviewerUI } from './PreviewerUI';
+import './CodexDiffPreviewer.css';
+
+const { Text } = Typography;
+
+export type CodexDiffPreviewerFileStatus = CodexDiffFileStatus;
+
+export type CodexDiffPreviewerFile = {
+  path: string;
+  previousPath: string | null;
+  status: CodexDiffPreviewerFileStatus;
+  previewType?: 'code' | 'image' | 'empty';
+  language: string;
+  content: string;
+};
+
+type CodexDiffPreviewerProps = {
+  title?: string;
+  description?: string;
+  files: CodexDiffPreviewerFile[];
+  diffText?: string | null;
+  height?: number | string;
+  mode?: 'auto' | 'source' | 'diff';
+  showModeSwitch?: boolean;
+};
+
+function buildStatusCount(files: CodexDiffPreviewerFile[]) {
+  return files.reduce<Record<CodexDiffPreviewerFile['status'], number>>(
+    (counts, file) => ({
+      ...counts,
+      [file.status]: (counts[file.status] ?? 0) + 1,
+    }),
+    {
+      added: 0,
+      modified: 0,
+      deleted: 0,
+      renamed: 0,
+      binary: 0,
+      unknown: 0,
+    },
+  );
+}
+
+function resolvePreviewType(file: CodexDiffPreviewerFile) {
+  return file.previewType ?? 'code';
+}
+
+function resolveTagColor(status: CodexDiffPreviewerFileStatus) {
+  if (status === 'added') {
+    return 'green';
+  }
+
+  if (status === 'modified') {
+    return 'blue';
+  }
+
+  if (status === 'deleted') {
+    return 'red';
+  }
+
+  if (status === 'renamed') {
+    return 'gold';
+  }
+
+  return 'default';
+}
+
+export function CodexDiffPreviewer({
+  title = 'Codex Diff Preview',
+  description = '변경 및 신규 소스 전체 미리보기',
+  files,
+  diffText,
+  height = 'calc(100vh - 280px)',
+  mode = 'auto',
+  showModeSwitch = true,
+}: CodexDiffPreviewerProps) {
+  const [messageApi, contextHolder] = message.useMessage();
+  const [activeMode, setActiveMode] = useState<'source' | 'diff'>(files.length > 0 ? 'source' : 'diff');
+  const [expandedSourcePaths, setExpandedSourcePaths] = useState<string[]>(() => files.slice(0, 1).map((file) => file.path));
+  const [expandedPreviewPath, setExpandedPreviewPath] = useState<string | null>(null);
+  const statusCount = useMemo(() => buildStatusCount(files), [files]);
+  const canShowSource = files.length > 0;
+  const canShowDiff = Boolean(diffText);
+  const resolvedMode = mode === 'auto' ? activeMode : mode;
+
+  async function copyText(text: string) {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    if (typeof document === 'undefined') {
+      throw new Error('클립보드 API를 사용할 수 없습니다.');
+    }
+
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', 'true');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+  }
+
+  async function handleCopy(content: string) {
+    try {
+      await copyText(content);
+      messageApi.success('복사했습니다.');
+    } catch {
+      messageApi.error('복사에 실패했습니다.');
+    }
+  }
+
+  function handleFullscreen(path: string) {
+    setExpandedPreviewPath((currentPath) => (currentPath === path ? null : path));
+  }
+
+  useEffect(() => {
+    if (!canShowSource) {
+      if (diffText) {
+        setActiveMode('diff');
+      }
+      return;
+    }
+
+    setExpandedSourcePaths((currentPaths) => {
+      const availablePaths = new Set(files.map((file) => file.path));
+      const nextPaths = currentPaths.filter((path) => availablePaths.has(path));
+
+      if (nextPaths.length > 0) {
+        return nextPaths;
+      }
+
+      return files[0] ? [files[0].path] : [];
+    });
+  }, [canShowSource, diffText, files]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined' || !expandedPreviewPath) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setExpandedPreviewPath(null);
+      }
+    };
+
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [expandedPreviewPath]);
+
+  useEffect(() => {
+    if (mode === 'source' && canShowSource) {
+      setActiveMode('source');
+      return;
+    }
+
+    if (mode === 'diff' && canShowDiff) {
+      setActiveMode('diff');
+    }
+  }, [canShowDiff, canShowSource, mode]);
+
+  if (!files.length && !diffText) {
+    return <Empty description="기록된 소스 미리보기가 없습니다." />;
+  }
+
+  return (
+    <>
+      {contextHolder}
+      <div className="codex-diff-previewer">
+      <div className="codex-diff-previewer__header">
+        <div>
+          <div className="codex-diff-previewer__title">{title}</div>
+          <Text type="secondary">{description}</Text>
+        </div>
+        <Space wrap size={[6, 6]} className="codex-diff-previewer__stats">
+          {files.length ? <Tag bordered={false}>전체 {files.length}</Tag> : null}
+          {statusCount.added ? <Tag color="green">{`신규 ${statusCount.added}`}</Tag> : null}
+          {statusCount.modified ? <Tag color="blue">{`변경 ${statusCount.modified}`}</Tag> : null}
+          {statusCount.renamed ? <Tag color="gold">{`이동 ${statusCount.renamed}`}</Tag> : null}
+          {statusCount.deleted ? <Tag color="red">{`삭제 ${statusCount.deleted}`}</Tag> : null}
+          {statusCount.binary ? <Tag>{`바이너리 ${statusCount.binary}`}</Tag> : null}
+        </Space>
+      </div>
+
+      {showModeSwitch && canShowSource && canShowDiff ? (
+        <Segmented
+          value={activeMode}
+          onChange={(value) => {
+            setActiveMode(value as 'source' | 'diff');
+          }}
+          options={[
+            { label: '전체소스', value: 'source' },
+            { label: 'raw diff', value: 'diff' },
+          ]}
+        />
+      ) : null}
+
+      {resolvedMode === 'diff' && diffText ? (
+        <CodexDiffBlock diffText={diffText} />
+      ) : canShowSource ? (
+        <div className="codex-diff-previewer__diff-list">
+          <div className="codex-diff-previewer__diff-toolbar">
+            <Text type="secondary">{`파일 ${files.length}개 기준으로 전체 소스를 분리해 표시합니다.`}</Text>
+            <Space size={8} wrap>
+              <Button
+                size="small"
+                onClick={() => {
+                  setExpandedSourcePaths(files.map((file) => file.path));
+                }}
+              >
+                전체 펼치기
+              </Button>
+              <Button
+                size="small"
+                onClick={() => {
+                  setExpandedSourcePaths([]);
+                }}
+              >
+                전체 접기
+              </Button>
+            </Space>
+          </div>
+
+          {files.map((file) => {
+            const isExpanded = expandedSourcePaths.includes(file.path);
+            const isPreviewExpanded = expandedPreviewPath === file.path;
+            const displayPath = file.previousPath ? `${file.previousPath} -> ${file.path}` : file.path;
+
+            return (
+              <section
+                className={[
+                  'codex-diff-previewer__diff-section',
+                  isPreviewExpanded ? 'codex-diff-previewer__diff-section--expanded' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                key={file.path}
+              >
+                <button
+                  type="button"
+                  className="codex-diff-previewer__diff-toggle"
+                  onClick={() => {
+                    setExpandedSourcePaths((currentPaths) =>
+                      currentPaths.includes(file.path)
+                        ? currentPaths.filter((path) => path !== file.path)
+                        : [...currentPaths, file.path],
+                    );
+                  }}
+                >
+                  <Space align="center" size={10} className="codex-diff-previewer__diff-toggle-main">
+                    {isExpanded ? <DownOutlined /> : <RightOutlined />}
+                    {resolvePreviewType(file) === 'image' ? <FileImageOutlined /> : <FileTextOutlined />}
+                    <span className="codex-diff-previewer__file-name">{file.path.split('/').pop() ?? file.path}</span>
+                    <Tag bordered={false} color={resolveTagColor(file.status)}>
+                      {CODEX_DIFF_STATUS_LABEL_MAP[file.status]}
+                    </Tag>
+                  </Space>
+                  <Text type="secondary" className="codex-diff-previewer__file-path">
+                    {displayPath}
+                  </Text>
+                </button>
+                <Space size={4} className="codex-diff-previewer__diff-actions">
+                  <Button
+                    size="small"
+                    type="text"
+                    aria-label="복사"
+                    icon={<CopyOutlined />}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      void handleCopy(file.content);
+                    }}
+                  />
+                  <Button
+                    size="small"
+                    type="text"
+                    aria-label={isPreviewExpanded ? '최대화 해제' : '최대화'}
+                    icon={isPreviewExpanded ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleFullscreen(file.path);
+                    }}
+                  />
+                </Space>
+
+                {isExpanded ? (
+                  <div className="codex-diff-previewer__diff-body">
+                    <PreviewerUI
+                      type={resolvePreviewType(file)}
+                      showHeader={false}
+                      value={file.content}
+                      language={file.language}
+                      imageAlt={file.path.split('/').pop() ?? file.path}
+                      height={isPreviewExpanded ? 'calc(100vh - 120px)' : height}
+                      copyable={false}
+                      maximizable={false}
+                    />
+                  </div>
+                ) : null}
+              </section>
+            );
+          })}
+        </div>
+      ) : (
+        <Empty description="표시할 소스 파일이 없습니다." />
+      )}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/previewer/PreviewerUI.css b/src/components/previewer/PreviewerUI.css
new file mode 100755
index 0000000..9cf0867
--- /dev/null
+++ b/src/components/previewer/PreviewerUI.css
@@ -0,0 +1,297 @@
+.previewer-ui {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 18px;
+  background: #fff;
+}
+
+.previewer-ui__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.previewer-ui__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.previewer-ui__title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.previewer-ui__description {
+  color: rgba(71, 85, 105, 0.86);
+  font-size: 12px;
+}
+
+.previewer-ui__body {
+  position: relative;
+  min-height: 0;
+  padding: 16px;
+}
+
+.previewer-ui__scroll {
+  overflow: auto;
+}
+
+.previewer-ui__text,
+.previewer-ui__markdown,
+.previewer-ui__empty {
+  color: #182230;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.previewer-ui__pre {
+  margin: 0;
+  padding: 16px;
+  overflow: auto;
+  color: #dbe7ff;
+  font-size: 13px;
+  line-height: 1.65;
+  background: linear-gradient(180deg, #0f172a 0%, #111f39 100%);
+}
+
+.previewer-ui__image {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  border-radius: 12px;
+  object-fit: contain;
+  background: #f8fafc;
+}
+
+.previewer-ui__toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.previewer-ui__floating-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin: -4px -4px 12px;
+  padding: 4px;
+}
+
+.previewer-ui--headerless {
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+}
+
+.previewer-ui--headerless .previewer-ui__body {
+  padding: 0;
+}
+
+.previewer-ui--expanded {
+  position: fixed;
+  inset: 16px;
+  z-index: 1200;
+  height: auto;
+  border-radius: 20px;
+  box-shadow:
+    0 24px 64px rgba(15, 23, 42, 0.28),
+    0 12px 28px rgba(15, 23, 42, 0.16);
+}
+
+.previewer-ui--expanded .previewer-ui__body {
+  height: calc(100vh - 32px - 53px) !important;
+}
+
+.previewer-ui__language-select {
+  min-width: 108px;
+}
+
+.previewer-ui__markdown h1,
+.previewer-ui__markdown h2,
+.previewer-ui__markdown h3 {
+  margin-top: 0;
+}
+
+.previewer-ui__markdown code {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(22, 93, 255, 0.08);
+}
+
+.previewer-ui__markdown pre code {
+  display: block;
+  padding: 0;
+  background: transparent;
+}
+
+.previewer-ui__markdown pre {
+  margin: 0;
+  padding: 14px;
+  overflow: auto;
+  color: #dbe7ff;
+  background: linear-gradient(180deg, #0f172a 0%, #111f39 100%);
+  border-radius: 14px;
+}
+
+.previewer-ui__editor {
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid rgba(15, 23, 42, 0.45);
+  border-radius: 0;
+  background: #1e1e1e;
+}
+
+.previewer-ui__editor-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: #252526;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.previewer-ui__editor-dots {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.previewer-ui__editor-dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.previewer-ui__editor-dots span:nth-child(1) {
+  background: #ff5f56;
+}
+
+.previewer-ui__editor-dots span:nth-child(2) {
+  background: #ffbd2e;
+}
+
+.previewer-ui__editor-dots span:nth-child(3) {
+  background: #27c93f;
+}
+
+.previewer-ui__editor-tab {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.previewer-ui__editor-body {
+  padding: 12px 0;
+}
+
+.previewer-ui--headerless .previewer-ui__editor {
+  border-width: 0;
+  border-radius: 0;
+}
+
+.previewer-ui__line {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  align-items: start;
+  gap: 0;
+  min-height: 24px;
+}
+
+.previewer-ui__line--diff-added {
+  background: rgba(46, 160, 67, 0.12);
+}
+
+.previewer-ui__line--diff-removed {
+  background: rgba(248, 81, 73, 0.12);
+}
+
+.previewer-ui__line--diff-hunk {
+  background: rgba(56, 139, 253, 0.12);
+}
+
+.previewer-ui__line-number {
+  padding: 0 12px 0 16px;
+  color: #6e7681;
+  font-size: 12px;
+  line-height: 24px;
+  text-align: right;
+  user-select: none;
+}
+
+.previewer-ui__line-code {
+  padding: 0 16px;
+  overflow-wrap: anywhere;
+  color: #d4d4d4;
+  font-size: 13px;
+  line-height: 24px;
+  white-space: pre-wrap;
+}
+
+.previewer-ui__token--keyword {
+  color: #569cd6;
+}
+
+.previewer-ui__token--string {
+  color: #ce9178;
+}
+
+.previewer-ui__token--number {
+  color: #b5cea8;
+}
+
+.previewer-ui__token--boolean,
+.previewer-ui__token--null {
+  color: #569cd6;
+}
+
+.previewer-ui__token--property {
+  color: #9cdcfe;
+}
+
+.previewer-ui__token--comment {
+  color: #6a9955;
+}
+
+.previewer-ui__token--operator,
+.previewer-ui__token--punctuation {
+  color: #d4d4d4;
+}
+
+.previewer-ui__token--tag {
+  color: #569cd6;
+}
+
+.previewer-ui__token--attribute {
+  color: #9cdcfe;
+}
+
+.previewer-ui__token--selector {
+  color: #d7ba7d;
+}
+
+.previewer-ui__token--command {
+  color: #4fc1ff;
+}
+
+.previewer-ui__token--path {
+  color: #ce9178;
+}
+
+.previewer-ui__token--option {
+  color: #c586c0;
+}
diff --git a/src/components/previewer/PreviewerUI.tsx b/src/components/previewer/PreviewerUI.tsx
new file mode 100755
index 0000000..cc0624d
--- /dev/null
+++ b/src/components/previewer/PreviewerUI.tsx
@@ -0,0 +1,342 @@
+import { CopyOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { Button, Empty, Select, message } from 'antd';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import { InlineImage } from '../common/InlineImage';
+import { CodexDiffBlock } from './CodexDiffBlock';
+import type { PreviewerUIProps } from './types';
+import { inferCodeLanguage, renderEditorBlock } from './renderers';
+import './PreviewerUI.css';
+
+function stringifyValue(value: unknown) {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (value === undefined || value === null) {
+    return '';
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function normalizeJsonValue(value: unknown) {
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function renderMarkdown(markdown: string) {
+  const lines = markdown.split('\n');
+  const blocks: ReactNode[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index].trimEnd();
+
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('### ')) {
+      blocks.push(<h3 key={`h3-${index}`}>{line.slice(4)}</h3>);
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('## ')) {
+      blocks.push(<h2 key={`h2-${index}`}>{line.slice(3)}</h2>);
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('# ')) {
+      blocks.push(<h1 key={`h1-${index}`}>{line.slice(2)}</h1>);
+      index += 1;
+      continue;
+    }
+
+    if (line.startsWith('- ')) {
+      const items: string[] = [];
+
+      while (index < lines.length && lines[index].trim().startsWith('- ')) {
+        items.push(lines[index].trim().slice(2));
+        index += 1;
+      }
+
+      blocks.push(
+        <ul key={`list-${index}`}>
+          {items.map((item, itemIndex) => (
+            <li key={`${item}-${itemIndex}`}>{item}</li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+
+    if (line.startsWith('```')) {
+      const codeLanguage = inferCodeLanguage(line.slice(3).trim() || 'text');
+      const codeLines: string[] = [];
+      index += 1;
+
+      while (index < lines.length && !lines[index].trim().startsWith('```')) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+
+      index += 1;
+      blocks.push(
+        codeLanguage === 'diff' ? (
+          <div key={`code-${index}`}>
+            <CodexDiffBlock diffText={codeLines.join('\n')} />
+          </div>
+        ) : (
+          <div key={`code-${index}`}>{renderEditorBlock(codeLines.join('\n'), codeLanguage, 'code')}</div>
+        ),
+      );
+      continue;
+    }
+
+    blocks.push(<p key={`p-${index}`}>{line}</p>);
+    index += 1;
+  }
+
+  return blocks;
+}
+
+async function copyText(text: string) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  if (typeof document === 'undefined') {
+    throw new Error('클립보드 API를 사용할 수 없습니다.');
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
+
+function resolveCopyValue({ type, value }: Pick<PreviewerUIProps, 'type' | 'value'>) {
+  switch (type) {
+    case 'json':
+      return stringifyValue(normalizeJsonValue(value));
+    case 'image':
+      return String(value ?? '');
+    default:
+      return stringifyValue(value);
+  }
+}
+
+function renderContent({
+  type,
+  value,
+  language,
+  format,
+  imageAlt,
+}: Pick<PreviewerUIProps, 'type' | 'value' | 'language' | 'format' | 'imageAlt'>) {
+  const textValue = stringifyValue(value);
+  const lines = textValue.split('\n').map((line) => line.trim()).filter(Boolean);
+  const detectedFormat =
+    format && format !== 'auto'
+      ? format
+      : lines.length > 0 && lines.every((line) => /^([A-Za-z]:\\|\.{0,2}\/|\/)?[\w@./-]+(?:\/[\w@./-]+)*$/.test(line))
+        ? 'paths'
+        : lines.length > 0 &&
+            lines.filter((line) => /^(?:[$>#]\s*)?[a-z0-9_.-]+(?:\s+.+)?$/i.test(line) || /^#/.test(line)).length >=
+              Math.max(1, Math.ceil(lines.length * 0.6))
+          ? 'terminal'
+          : 'plain';
+
+  switch (type) {
+    case 'text':
+      if (detectedFormat === 'terminal') {
+        return renderEditorBlock(textValue, 'bash', 'code');
+      }
+
+      if (detectedFormat === 'paths') {
+        return renderEditorBlock(textValue, 'paths', 'code');
+      }
+
+      return <div className="previewer-ui__text">{textValue}</div>;
+    case 'json':
+      return renderEditorBlock(stringifyValue(normalizeJsonValue(value)), 'json', 'json');
+    case 'code':
+      return renderEditorBlock(textValue, language ?? 'text', 'code');
+    case 'image':
+      return (
+        <InlineImage
+          className="previewer-ui__image"
+          src={String(value ?? '')}
+          alt={imageAlt ?? 'preview'}
+          fallbackText="이미지 preview를 불러오지 못했습니다."
+        />
+      );
+    case 'markdown':
+      return <div className="previewer-ui__markdown">{renderMarkdown(textValue)}</div>;
+    case 'empty':
+      return (
+        <div className="previewer-ui__empty">
+          <Empty description={textValue || '표시할 데이터가 없습니다.'} />
+        </div>
+      );
+    default:
+      return <div className="previewer-ui__text">{textValue}</div>;
+  }
+}
+
+export function PreviewerUI({
+  type,
+  title = 'Preview',
+  description,
+  showHeader = true,
+  value,
+  copyValue,
+  copyable = true,
+  maximizable = true,
+  language = 'text',
+  format = 'auto',
+  languageOptions,
+  onLanguageChange,
+  imageAlt,
+  height = 280,
+  toolbar,
+  className,
+}: PreviewerUIProps) {
+  const [messageApi, contextHolder] = message.useMessage();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasLanguageSelector = type === 'code' && languageOptions && languageOptions.length > 0;
+  const resolvedCopyValue = copyValue ?? resolveCopyValue({ type, value });
+  const canCopy = copyable && resolvedCopyValue.trim().length > 0;
+  const shouldShowActions = hasLanguageSelector || canCopy || maximizable || Boolean(toolbar);
+
+  useEffect(() => {
+    if (!isExpanded || typeof document === 'undefined') {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsExpanded(false);
+      }
+    };
+
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isExpanded]);
+
+  async function handleCopy() {
+    if (!canCopy) {
+      return;
+    }
+
+    try {
+      await copyText(resolvedCopyValue);
+      messageApi.success('복사했습니다.');
+    } catch {
+      messageApi.error('복사에 실패했습니다.');
+    }
+  }
+
+  async function toggleFullscreen() {
+    if (!maximizable) {
+      return;
+    }
+
+    setIsExpanded((previous) => !previous);
+  }
+
+  const actionContent = (
+    <>
+      {hasLanguageSelector ? (
+        <Select
+          size="small"
+          value={language}
+          options={languageOptions}
+          onChange={onLanguageChange}
+          className="previewer-ui__language-select"
+        />
+      ) : null}
+      {canCopy ? (
+        <Button
+          size="small"
+          type="text"
+          aria-label="복사"
+          icon={<CopyOutlined />}
+          onClick={() => void handleCopy()}
+        />
+      ) : null}
+      {maximizable ? (
+        <Button
+          size="small"
+          type="text"
+          aria-label={isExpanded ? '최대화 해제' : '최대화'}
+          icon={isExpanded ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+          onClick={() => void toggleFullscreen()}
+        />
+      ) : null}
+      {toolbar}
+    </>
+  );
+
+  return (
+    <>
+      {contextHolder}
+      <div
+        className={[
+          'previewer-ui',
+          !showHeader ? 'previewer-ui--headerless' : '',
+          isExpanded ? 'previewer-ui--expanded' : '',
+          className ?? '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {showHeader ? (
+          <div className="previewer-ui__header">
+            <div className="previewer-ui__meta">
+              <div className="previewer-ui__title">{title}</div>
+              {description ? <div className="previewer-ui__description">{description}</div> : null}
+            </div>
+            {shouldShowActions ? <div className="previewer-ui__toolbar">{actionContent}</div> : null}
+          </div>
+        ) : null}
+        <div className="previewer-ui__body previewer-ui__scroll" style={{ height }}>
+          {!showHeader && shouldShowActions ? <div className="previewer-ui__floating-toolbar">{actionContent}</div> : null}
+          {renderContent({
+            type,
+            value,
+            language,
+            format,
+            imageAlt,
+          })}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/previewer/index.ts b/src/components/previewer/index.ts
new file mode 100755
index 0000000..bc660f0
--- /dev/null
+++ b/src/components/previewer/index.ts
@@ -0,0 +1,10 @@
+export {
+  CodexDiffBlock,
+  CODEX_DIFF_STATUS_LABEL_MAP,
+  parseCodexDiffSections,
+} from './CodexDiffBlock';
+export type { CodexDiffFileStatus, CodexDiffSection } from './CodexDiffBlock';
+export { CodexDiffPreviewer } from './CodexDiffPreviewer';
+export type { CodexDiffPreviewerFile, CodexDiffPreviewerFileStatus } from './CodexDiffPreviewer';
+export { PreviewerUI } from './PreviewerUI';
+export type { PreviewerLanguageOption, PreviewerType, PreviewerUIProps } from './types';
diff --git a/src/components/previewer/renderers.tsx b/src/components/previewer/renderers.tsx
new file mode 100755
index 0000000..f500a53
--- /dev/null
+++ b/src/components/previewer/renderers.tsx
@@ -0,0 +1,315 @@
+import type { ReactNode } from 'react';
+
+type TokenKind =
+  | 'plain'
+  | 'keyword'
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'null'
+  | 'property'
+  | 'comment'
+  | 'operator'
+  | 'punctuation'
+  | 'tag'
+  | 'attribute'
+  | 'selector'
+  | 'command'
+  | 'path'
+  | 'option';
+
+type Token = {
+  kind: TokenKind;
+  value: string;
+};
+
+type EditorLineTone = 'default' | 'diff-added' | 'diff-removed' | 'diff-hunk';
+
+function tokenizeJson(input: string): Token[] {
+  const pattern =
+    /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false)\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}\[\],:]/g;
+  const tokens: Token[] = [];
+  let lastIndex = 0;
+
+  input.replace(pattern, (match, quoted, colon, booleanValue, offset) => {
+    if (offset > lastIndex) {
+      tokens.push({ kind: 'plain', value: input.slice(lastIndex, offset) });
+    }
+
+    if (quoted) {
+      tokens.push({ kind: colon ? 'property' : 'string', value: quoted });
+      if (colon) {
+        tokens.push({ kind: 'punctuation', value: ':' });
+      }
+    } else if (booleanValue) {
+      tokens.push({ kind: 'boolean', value: match });
+    } else if (match === 'null') {
+      tokens.push({ kind: 'null', value: match });
+    } else if (/^-?\d/.test(match)) {
+      tokens.push({ kind: 'number', value: match });
+    } else {
+      tokens.push({ kind: 'punctuation', value: match });
+    }
+
+    lastIndex = offset + match.length;
+    return match;
+  });
+
+  if (lastIndex < input.length) {
+    tokens.push({ kind: 'plain', value: input.slice(lastIndex) });
+  }
+
+  return tokens;
+}
+
+function tokenizeShell(input: string): Token[] {
+  const trimmed = input.trimStart();
+
+  if (!trimmed) {
+    return [];
+  }
+
+  if (trimmed.startsWith('#')) {
+    return [{ kind: 'comment', value: input }];
+  }
+
+  const promptMatch = input.match(/^(\s*[$>#]\s+)/);
+  const prompt = promptMatch?.[1] ?? '';
+  const body = prompt ? input.slice(prompt.length) : input;
+  const bodyMatch = body.match(/^([A-Za-z0-9_./:-]+)(.*)$/);
+
+  if (!bodyMatch) {
+    return [{ kind: 'plain', value: input }];
+  }
+
+  const [, command, rest] = bodyMatch;
+  const tokens: Token[] = [];
+
+  if (prompt) {
+    tokens.push({ kind: 'operator', value: prompt });
+  }
+
+  tokens.push({ kind: 'command', value: command });
+
+  if (!rest) {
+    return tokens;
+  }
+
+  const parts = rest.split(/(\s+)/);
+
+  parts.forEach((part) => {
+    if (!part) {
+      return;
+    }
+
+    if (/^\s+$/.test(part)) {
+      tokens.push({ kind: 'plain', value: part });
+      return;
+    }
+
+    if (/^--?[A-Za-z0-9][A-Za-z0-9-]*$/.test(part)) {
+      tokens.push({ kind: 'option', value: part });
+      return;
+    }
+
+    if (/^(["'`]).*\1$/.test(part)) {
+      tokens.push({ kind: 'string', value: part });
+      return;
+    }
+
+    if (/^-?\d+(?:\.\d+)?$/.test(part)) {
+      tokens.push({ kind: 'number', value: part });
+      return;
+    }
+
+    if (/^(?:[./~]|[A-Za-z]:\\|\/)[^\s]*$/.test(part) || /^[\w.-]+\/[^\s]+$/.test(part)) {
+      tokens.push({ kind: 'path', value: part });
+      return;
+    }
+
+    if (/^(?:\|\||&&|[|<>])$/.test(part)) {
+      tokens.push({ kind: 'operator', value: part });
+      return;
+    }
+
+    tokens.push({ kind: 'plain', value: part });
+  });
+
+  return tokens;
+}
+
+function tokenizePathLine(input: string): Token[] {
+  if (!input.trim()) {
+    return [];
+  }
+
+  const bulletMatch = input.match(/^(\s*[-*]\s+)(.*)$/);
+
+  if (bulletMatch) {
+    return [
+      { kind: 'operator', value: bulletMatch[1] },
+      { kind: 'path', value: bulletMatch[2] },
+    ];
+  }
+
+  return [{ kind: 'path', value: input }];
+}
+
+function tokenizeGenericCode(input: string, language: string): Token[] {
+  const commentPattern =
+    language === 'html'
+      ? /<!--[\s\S]*?-->/y
+      : language === 'python'
+        ? /#.*|""".*?"""|'''.*?'''/y
+        : /\/\/.*|\/\*[\s\S]*?\*\//y;
+  const stringPattern = /(["'`])(?:\\.|(?!\1)[\s\S])*\1/y;
+  const numberPattern = /\b\d+(?:\.\d+)?\b/y;
+  const keywordPattern =
+    /\b(const|let|var|function|return|if|else|for|while|switch|case|break|continue|import|from|export|default|async|await|type|interface|extends|implements|new|class|try|catch|finally|throw|public|private|protected|true|false|null|undefined|select|from|where|order|by|group|insert|into|update|delete|join|left|right|inner|outer|limit|and|or|not|as|if|then|fi|do|done|export|set)\b/y;
+  const tagPattern = /<\/?[A-Za-z][^>\s/]*/y;
+  const attributePattern = /\b[A-Za-z-:]+(?==)/y;
+  const selectorPattern = /[.#]?[A-Za-z_][A-Za-z0-9_-]*(?=\s*\{)/y;
+  const operatorPattern = /=>|===|!==|==|!=|<=|>=|\+\+|--|&&|\|\||[=+\-*/%<>!&|?:]/y;
+  const punctuationPattern = /[()[\]{}.,;]/y;
+  const plainPattern = /\s+|[A-Za-z_$][\w$-]*/y;
+
+  const tokens: Token[] = [];
+  let index = 0;
+
+  while (index < input.length) {
+    const sliceIndex = index;
+    const patterns: Array<[RegExp, TokenKind]> = [
+      [commentPattern, 'comment'],
+      [stringPattern, 'string'],
+      [numberPattern, 'number'],
+      [keywordPattern, language === 'css' ? 'selector' : 'keyword'],
+      [tagPattern, 'tag'],
+      [attributePattern, 'attribute'],
+      [selectorPattern, 'selector'],
+      [operatorPattern, 'operator'],
+      [punctuationPattern, 'punctuation'],
+      [plainPattern, 'plain'],
+    ];
+
+    let matched = false;
+
+    for (const [pattern, kind] of patterns) {
+      pattern.lastIndex = sliceIndex;
+      const result = pattern.exec(input);
+
+      if (result && result.index === sliceIndex) {
+        tokens.push({ kind, value: result[0] });
+        index += result[0].length;
+        matched = true;
+        break;
+      }
+    }
+
+    if (!matched) {
+      tokens.push({ kind: 'plain', value: input[index] });
+      index += 1;
+    }
+  }
+
+  return tokens;
+}
+
+export function inferCodeLanguage(language: string | undefined) {
+  const normalized = (language ?? 'text').toLowerCase();
+
+  if (normalized === 'sh' || normalized === 'shell') {
+    return 'bash';
+  }
+
+  if (normalized === 'ts') {
+    return 'typescript';
+  }
+
+  if (normalized === 'js') {
+    return 'javascript';
+  }
+
+  if (normalized === 'md') {
+    return 'markdown';
+  }
+
+  return normalized;
+}
+
+function tokenizeCode(input: string, language: string): Token[] {
+  if (language === 'json') {
+    return tokenizeJson(input);
+  }
+
+  if (language === 'bash' || language === 'zsh') {
+    return tokenizeShell(input);
+  }
+
+  if (language === 'paths') {
+    return tokenizePathLine(input);
+  }
+
+  return tokenizeGenericCode(input, language);
+}
+
+function getLineTone(line: string, language: string): EditorLineTone {
+  if (language !== 'diff') {
+    return 'default';
+  }
+
+  if (line.startsWith('@@')) {
+    return 'diff-hunk';
+  }
+
+  if (line.startsWith('+')) {
+    return 'diff-added';
+  }
+
+  if (line.startsWith('-')) {
+    return 'diff-removed';
+  }
+
+  return 'default';
+}
+
+function renderTokens(tokens: Token[]) {
+  return tokens.map((token, index) => (
+    <span key={`${token.kind}-${index}`} className={`previewer-ui__token previewer-ui__token--${token.kind}`}>
+      {token.value}
+    </span>
+  ));
+}
+
+export function renderEditorBlock(value: string, language: string, mode: 'code' | 'json'): ReactNode {
+  const normalizedLanguage = mode === 'json' ? 'json' : inferCodeLanguage(language);
+  const lines = value.split('\n');
+
+  return (
+    <div className="previewer-ui__editor">
+      <div className="previewer-ui__editor-bar">
+        <div className="previewer-ui__editor-dots">
+          <span />
+          <span />
+          <span />
+        </div>
+        <div className="previewer-ui__editor-tab">{normalizedLanguage.toUpperCase()}</div>
+      </div>
+      <div className="previewer-ui__editor-body">
+        {lines.map((line, lineIndex) => {
+          const tokens = tokenizeCode(line, normalizedLanguage);
+          const lineTone = getLineTone(line, normalizedLanguage);
+
+          return (
+            <div
+              key={`line-${lineIndex}`}
+              className={`previewer-ui__line${lineTone !== 'default' ? ` previewer-ui__line--${lineTone}` : ''}`}
+            >
+              <span className="previewer-ui__line-number">{lineIndex + 1}</span>
+              <code className="previewer-ui__line-code">{tokens.length === 0 ? ' ' : renderTokens(tokens)}</code>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/previewer/samples/BaseSample.tsx b/src/components/previewer/samples/BaseSample.tsx
new file mode 100755
index 0000000..7fc2353
--- /dev/null
+++ b/src/components/previewer/samples/BaseSample.tsx
@@ -0,0 +1,26 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { PreviewerUI } from '../PreviewerUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'previewer-ui-base',
+  componentId: 'previewer-ui',
+  title: 'Previewer UI',
+  description: 'text, json, code, image를 공통 레이아웃으로 렌더링하는 preview 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 70,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <PreviewerUI
+      type="code"
+      title="Code Preview"
+      description="TypeScript sample"
+      language="typescript"
+      value={`type WindowState = {\n  id: string;\n  title: string;\n};`}
+    />
+  );
+}
diff --git a/src/components/previewer/samples/CodexDiffBaseSample.tsx b/src/components/previewer/samples/CodexDiffBaseSample.tsx
new file mode 100755
index 0000000..119ae56
--- /dev/null
+++ b/src/components/previewer/samples/CodexDiffBaseSample.tsx
@@ -0,0 +1,44 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { CodexDiffPreviewer } from '../CodexDiffPreviewer';
+
+const sampleDiff = `diff --git a/src/components/previewer/CodexDiffBlock.tsx b/src/components/previewer/CodexDiffBlock.tsx
+new file mode 100644
+index 0000000..1111111
+--- /dev/null
++++ b/src/components/previewer/CodexDiffBlock.tsx
+@@ -0,0 +1,3 @@
++export function CodexDiffBlock() {
++  return null;
++}`;
+
+export const sampleMeta: SampleMeta = {
+  id: 'codex-diff-previewer-base',
+  componentId: 'codex-diff-previewer',
+  title: 'Codex Diff Previewer',
+  description: '변경 파일 전체 소스와 raw diff를 함께 보여주는 codex 스타일 diff preview 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 71,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <CodexDiffPreviewer
+      title="작업 소스"
+      description="변경 및 신규 파일 미리보기"
+      files={[
+        {
+          path: 'src/components/previewer/CodexDiffBlock.tsx',
+          previousPath: null,
+          status: 'added',
+          language: 'tsx',
+          content: `export function CodexDiffBlock() {\n  return null;\n}`,
+        },
+      ]}
+      diffText={sampleDiff}
+      height={320}
+    />
+  );
+}
diff --git a/src/components/previewer/samples/CodexDiffSample.tsx b/src/components/previewer/samples/CodexDiffSample.tsx
new file mode 100755
index 0000000..8df15c7
--- /dev/null
+++ b/src/components/previewer/samples/CodexDiffSample.tsx
@@ -0,0 +1,70 @@
+import { Flex, Typography } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { CodexDiffPreviewer } from '../CodexDiffPreviewer';
+
+const { Paragraph } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'codex-diff-previewer',
+  componentId: 'codex-diff-previewer',
+  title: 'Codex Diff Previewer',
+  description: '변경 파일 전체 소스와 raw diff 아코디언을 함께 보여주는 codex 스타일 diff preview 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 71,
+  features: ['docs'],
+};
+
+const sampleDiff = `diff --git a/src/components/previewer/CodexDiffBlock.tsx b/src/components/previewer/CodexDiffBlock.tsx
+new file mode 100644
+index 0000000..1111111
+--- /dev/null
++++ b/src/components/previewer/CodexDiffBlock.tsx
+@@ -0,0 +1,8 @@
++export function CodexDiffBlock() {
++  return null;
++}
+diff --git a/src/components/markdownPreview/MarkdownPreviewContent.tsx b/src/components/markdownPreview/MarkdownPreviewContent.tsx
+index 2222222..3333333 100644
+--- a/src/components/markdownPreview/MarkdownPreviewContent.tsx
++++ b/src/components/markdownPreview/MarkdownPreviewContent.tsx
+@@ -12,6 +12,10 @@ export function MarkdownPreviewContent() {
+   if (codeLanguage === 'diff') {
++    return <CodexDiffBlock diffText={value} />;
++  }
++
+   return renderEditorBlock(value, codeLanguage, 'code');
+ }`;
+
+export function Sample() {
+  return (
+    <Flex vertical gap={16}>
+      <Paragraph>
+        변경 파일 목록과 raw diff를 같은 화면에서 전환해 보도록 만든 공통 preview입니다. 작업일지 `## 소스`와 일반 문서의 `diff` 코드블록 표현을 같은 스타일로 맞출 때 사용합니다.
+      </Paragraph>
+      <CodexDiffPreviewer
+        title="작업 소스"
+        description="변경/신규 파일 기준 전체 소스와 raw diff를 함께 표시합니다."
+        files={[
+          {
+            path: 'src/components/previewer/CodexDiffBlock.tsx',
+            previousPath: null,
+            status: 'added',
+            language: 'tsx',
+            content: `export function CodexDiffBlock() {\n  return null;\n}`,
+          },
+          {
+            path: 'src/components/markdownPreview/MarkdownPreviewContent.tsx',
+            previousPath: null,
+            status: 'modified',
+            language: 'tsx',
+            content: `if (codeLanguage === 'diff') {\n  return <CodexDiffBlock diffText={value} />;\n}`,
+          },
+        ]}
+        diffText={sampleDiff}
+        height={360}
+      />
+    </Flex>
+  );
+}
diff --git a/src/components/previewer/samples/Sample.tsx b/src/components/previewer/samples/Sample.tsx
new file mode 100755
index 0000000..63216c9
--- /dev/null
+++ b/src/components/previewer/samples/Sample.tsx
@@ -0,0 +1,172 @@
+import { Button, Flex, Tabs, Typography } from 'antd';
+import { useMemo, useState } from 'react';
+import type { SampleMeta } from '../../../widgets/core';
+import { PreviewerUI } from '../PreviewerUI';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'previewer-ui',
+  componentId: 'previewer-ui',
+  title: 'Previewer UI',
+  description:
+    'text, json, code, image를 공통 레이아웃으로 렌더링하고 markdown, empty 같은 추가 preview 타입도 지원하는 공통 previewer 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 70,
+  features: ['docs'],
+};
+
+const sampleImage =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420">
+      <defs>
+        <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#165dff"/>
+          <stop offset="100%" stop-color="#28c76f"/>
+        </linearGradient>
+      </defs>
+      <rect width="800" height="420" rx="32" fill="url(#bg)"/>
+      <rect x="66" y="72" width="668" height="276" rx="24" fill="rgba(255,255,255,0.16)"/>
+      <circle cx="120" cy="122" r="14" fill="#fff"/>
+      <circle cx="162" cy="122" r="14" fill="#fff" opacity="0.72"/>
+      <rect x="110" y="174" width="240" height="24" rx="12" fill="#fff"/>
+      <rect x="110" y="214" width="430" height="18" rx="9" fill="#fff" opacity="0.78"/>
+      <rect x="110" y="246" width="360" height="18" rx="9" fill="#fff" opacity="0.6"/>
+      <rect x="560" y="176" width="120" height="96" rx="18" fill="rgba(255,255,255,0.24)"/>
+    </svg>
+  `);
+
+export function Sample() {
+  const [activeKey, setActiveKey] = useState('text');
+  const [codeLanguage, setCodeLanguage] = useState('typescript');
+  const codeExamples = useMemo(
+    () => ({
+      typescript: `type WindowState = {\n  id: string;\n  title: string;\n  active: boolean;\n};\n\nconst activateWindow = (windows: WindowState[], id: string) =>\n  windows.map((window) => ({\n    ...window,\n    active: window.id === id,\n  }));`,
+      json: `{\n  "status": "ok",\n  "activeWindow": "inventory-board",\n  "layout": "grid",\n  "windows": [\n    {\n      "id": "inventory-board",\n      "zIndex": 4\n    }\n  ]\n}`,
+      html: `<section class="window-panel">\n  <header class="window-panel__header">\n    <h1>Inventory Board</h1>\n    <button type="button">Open</button>\n  </header>\n  <main class="window-panel__body">\n    <p>입고 검수 대기 12건</p>\n  </main>\n</section>`,
+      css: `.window-panel {\n  display: grid;\n  gap: 12px;\n  padding: 16px;\n  border-radius: 18px;\n  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);\n}\n\n.window-panel__header {\n  display: flex;\n  justify-content: space-between;\n}`,
+      bash: `npm run build\ndocker compose restart app\nnpm run capture:component -- previewer-ui 2026-04-02`,
+      sql: `select\n  window_id,\n  title,\n  z_index,\n  updated_at\nfrom ui_window_state\nwhere active = true\norder by z_index desc;`,
+      yaml: `previewer:\n  type: code\n  language: typescript\n  height: 320\n  toolbar:\n    copy: true\n    download: false`,
+    }),
+    [],
+  );
+  const previewItems = useMemo(
+    () => [
+      {
+        key: 'text',
+        label: 'Text',
+        node: (
+          <PreviewerUI
+            type="text"
+            title="Text Preview"
+            description="로그, 설명, 사용자 메시지를 바로 읽을 수 있는 기본 text preview"
+            value={'배송 지연 알림\n- 부산 센터 출고 지연\n- 오후 3시 재처리 예정'}
+          />
+        ),
+      },
+      {
+        key: 'json',
+        label: 'JSON',
+        node: (
+          <PreviewerUI
+            type="json"
+            title="JSON Preview"
+            description="응답 payload, 설정 객체, 샘플 데이터를 JSON 형태로 표시"
+            value={{
+              status: 'ok',
+              warehouse: 'ICN-01',
+              pendingTasks: 12,
+              operators: ['Kim', 'Lee', 'Park'],
+            }}
+          />
+        ),
+      },
+      {
+        key: 'code',
+        label: 'Code',
+        node: (
+          <PreviewerUI
+            type="code"
+            title="Code Preview"
+            description="언어를 선택하면 VSCode 스타일로 토큰 색상을 적용해 코드 미리보기"
+            language={codeLanguage}
+            languageOptions={[
+              { label: 'TypeScript', value: 'typescript' },
+              { label: 'JSON', value: 'json' },
+              { label: 'HTML', value: 'html' },
+              { label: 'CSS', value: 'css' },
+              { label: 'Bash', value: 'bash' },
+              { label: 'SQL', value: 'sql' },
+              { label: 'YAML', value: 'yaml' },
+            ]}
+            onLanguageChange={setCodeLanguage}
+            value={codeExamples[codeLanguage as keyof typeof codeExamples]}
+          />
+        ),
+      },
+      {
+        key: 'image',
+        label: 'Image',
+        node: (
+          <PreviewerUI
+            type="image"
+            title="Image Preview"
+            description="썸네일, 캡처 이미지, 리치 미디어 미리보기"
+            value={sampleImage}
+            imageAlt="preview sample"
+          />
+        ),
+      },
+      {
+        key: 'markdown',
+        label: 'Markdown',
+        node: (
+          <PreviewerUI
+            type="markdown"
+            title="Markdown Preview"
+            description="작업일지, 가이드 문서를 가볍게 확인하는 markdown preview"
+            value={`# 작업 메모\n## 오늘 처리\n- 입고 검수\n- 피킹 대기 해소\n\n\`\`\`ts\nconst ready = true;\n\`\`\``}
+          />
+        ),
+      },
+      {
+        key: 'empty',
+        label: 'Empty',
+        node: (
+          <PreviewerUI
+            type="empty"
+            title="Empty Preview"
+            description="데이터가 없을 때도 동일한 레이아웃에서 빈 상태를 표현"
+            value="선택된 파일이 없습니다."
+            toolbar={<Button size="small">업로드</Button>}
+          />
+        ),
+      },
+    ],
+    [activeKey, codeExamples, codeLanguage],
+  );
+
+  return (
+    <Flex vertical gap={16}>
+      <Paragraph>
+        공통 previewer 하나로 <Text strong>text</Text>, <Text strong>json</Text>, <Text strong>code</Text>,{' '}
+        <Text strong>image</Text>를 처리하고, 추가로 유용한 <Text strong>markdown</Text>,{' '}
+        <Text strong>empty</Text> 타입도 함께 제공합니다.
+      </Paragraph>
+
+      <Tabs
+        activeKey={activeKey}
+        onChange={setActiveKey}
+        items={previewItems.map((item) => ({
+          key: item.key,
+          label: item.label,
+          children: item.node,
+        }))}
+      />
+    </Flex>
+  );
+}
diff --git a/src/components/previewer/types/index.ts b/src/components/previewer/types/index.ts
new file mode 100755
index 0000000..5758724
--- /dev/null
+++ b/src/components/previewer/types/index.ts
@@ -0,0 +1 @@
+export type { PreviewerFormat, PreviewerLanguageOption, PreviewerType, PreviewerUIProps } from './previewer';
diff --git a/src/components/previewer/types/previewer.ts b/src/components/previewer/types/previewer.ts
new file mode 100755
index 0000000..35aa5a7
--- /dev/null
+++ b/src/components/previewer/types/previewer.ts
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+export type PreviewerType = 'text' | 'json' | 'code' | 'image' | 'markdown' | 'empty';
+export type PreviewerFormat = 'auto' | 'plain' | 'terminal' | 'paths';
+
+export type PreviewerLanguageOption = {
+  label: string;
+  value: string;
+};
+
+export type PreviewerUIProps = {
+  type: PreviewerType;
+  title?: ReactNode;
+  description?: ReactNode;
+  showHeader?: boolean;
+  value?: unknown;
+  copyValue?: string;
+  copyable?: boolean;
+  maximizable?: boolean;
+  language?: string;
+  format?: PreviewerFormat;
+  languageOptions?: PreviewerLanguageOption[];
+  onLanguageChange?: (language: string) => void;
+  imageAlt?: string;
+  height?: number | string;
+  toolbar?: ReactNode;
+  className?: string;
+};
diff --git a/src/components/processFlow/ProcessFlowUI.css b/src/components/processFlow/ProcessFlowUI.css
new file mode 100755
index 0000000..a72d68e
--- /dev/null
+++ b/src/components/processFlow/ProcessFlowUI.css
@@ -0,0 +1,186 @@
+.process-flow {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+
+.process-flow--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.process-flow--vertical {
+  flex-direction: column;
+}
+
+.process-flow__item {
+  display: flex;
+  min-width: 0;
+}
+
+.process-flow--horizontal .process-flow__item {
+  flex: 1 1 180px;
+  align-items: center;
+}
+
+.process-flow--vertical .process-flow__item {
+  flex-direction: column;
+}
+
+.process-flow__step {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--process-flow-border, rgba(148, 163, 184, 0.28));
+  border-radius: 18px;
+  background: var(--process-flow-background, linear-gradient(180deg, #ffffff 0%, #f8fafc 100%));
+  color: var(--process-flow-text, #0f172a);
+  box-shadow: var(--process-flow-shadow, none);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.process-flow__step--button {
+  border: 1px solid var(--process-flow-border, rgba(148, 163, 184, 0.28));
+  cursor: pointer;
+  text-align: left;
+}
+
+.process-flow__step--button:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    var(--process-flow-shadow, none),
+    0 14px 28px rgba(15, 23, 42, 0.08);
+}
+
+.process-flow__step--current {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
+    0 20px 36px rgba(22, 93, 255, 0.14);
+}
+
+.process-flow__step--compact {
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 14px;
+}
+
+.process-flow__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: var(--process-flow-accent-soft, rgba(148, 163, 184, 0.16));
+  color: var(--process-flow-accent, #64748b);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.process-flow__step--compact .process-flow__marker {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+}
+
+.process-flow__content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.process-flow__label-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.process-flow__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.process-flow__status {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--process-flow-accent-soft, rgba(148, 163, 184, 0.16));
+  color: var(--process-flow-accent, #64748b);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.process-flow__description {
+  color: rgba(71, 85, 105, 0.9);
+  font-size: 12px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.process-flow__step--compact .process-flow__description {
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.process-flow__connector {
+  flex: 1 1 auto;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.process-flow--horizontal .process-flow__connector {
+  height: 2px;
+  margin: 0 10px;
+  border-radius: 999px;
+  background: var(--process-flow-connector, rgba(148, 163, 184, 0.32));
+}
+
+.process-flow--vertical .process-flow__connector {
+  width: 2px;
+  height: 20px;
+  margin: 8px 0 8px 16px;
+  border-radius: 999px;
+  background: var(--process-flow-connector, rgba(148, 163, 184, 0.32));
+}
+
+@media (max-width: 720px) {
+  .process-flow--horizontal {
+    flex-direction: column;
+  }
+
+  .process-flow--horizontal .process-flow__item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .process-flow--horizontal .process-flow__connector {
+    width: 2px;
+    height: 18px;
+    margin: 8px 0 8px 16px;
+  }
+
+  .process-flow__step {
+    padding: 12px 14px;
+  }
+
+  .process-flow__label-row {
+    flex-wrap: wrap;
+  }
+}
diff --git a/src/components/processFlow/ProcessFlowUI.tsx b/src/components/processFlow/ProcessFlowUI.tsx
new file mode 100755
index 0000000..603811a
--- /dev/null
+++ b/src/components/processFlow/ProcessFlowUI.tsx
@@ -0,0 +1,257 @@
+import {
+  CheckOutlined,
+  ClockCircleOutlined,
+  CloseOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+import type { CSSProperties, ReactNode } from 'react';
+import type {
+  ProcessFlowDirection,
+  ProcessFlowStatusAppearance,
+  ProcessFlowStep,
+  ProcessFlowStepStatus,
+  ProcessFlowUIProps,
+} from './types';
+import './ProcessFlowUI.css';
+
+const defaultStatusLabels: Record<ProcessFlowStepStatus, string> = {
+  complete: '완료',
+  current: '진행중',
+  failed: '실패',
+  pending: '대기',
+};
+
+const defaultStatusIcons: Record<ProcessFlowStepStatus, ReactNode> = {
+  complete: <CheckOutlined />,
+  current: <LoadingOutlined />,
+  failed: <CloseOutlined />,
+  pending: <ClockCircleOutlined />,
+};
+
+const defaultStatusAppearance: Record<ProcessFlowStepStatus, ProcessFlowStatusAppearance> = {
+  complete: {
+    accent: '#16a34a',
+    accentSoft: 'rgba(22, 163, 74, 0.14)',
+    border: 'rgba(34, 197, 94, 0.22)',
+    background: 'linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.78) 100%)',
+    text: '#14532d',
+    connector: 'rgba(34, 197, 94, 0.32)',
+    shadow: '0 10px 24px rgba(34, 197, 94, 0.08)',
+  },
+  current: {
+    accent: '#165dff',
+    accentSoft: 'rgba(22, 93, 255, 0.12)',
+    border: 'rgba(22, 93, 255, 0.24)',
+    background: 'linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(219, 234, 254, 0.84) 100%)',
+    text: '#102a56',
+    connector: 'rgba(22, 93, 255, 0.28)',
+    shadow: '0 12px 28px rgba(22, 93, 255, 0.12)',
+  },
+  failed: {
+    accent: '#dc2626',
+    accentSoft: 'rgba(220, 38, 38, 0.12)',
+    border: 'rgba(239, 68, 68, 0.24)',
+    background: 'linear-gradient(180deg, rgba(254, 242, 242, 0.98) 0%, rgba(254, 226, 226, 0.84) 100%)',
+    text: '#7f1d1d',
+    connector: 'rgba(239, 68, 68, 0.28)',
+    shadow: '0 10px 24px rgba(220, 38, 38, 0.1)',
+  },
+  pending: {
+    accent: '#64748b',
+    accentSoft: 'rgba(100, 116, 139, 0.12)',
+    border: 'rgba(148, 163, 184, 0.24)',
+    background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%)',
+    text: '#334155',
+    connector: 'rgba(148, 163, 184, 0.32)',
+    shadow: 'none',
+  },
+};
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(' ');
+}
+
+function resolveStepStatus(
+  step: ProcessFlowStep,
+  index: number,
+  currentIndex: number,
+): ProcessFlowStepStatus {
+  if (step.status) {
+    return step.status;
+  }
+
+  if (currentIndex < 0) {
+    return 'pending';
+  }
+
+  if (index < currentIndex) {
+    return 'complete';
+  }
+
+  if (index === currentIndex) {
+    return 'current';
+  }
+
+  return 'pending';
+}
+
+function resolveAppearance(
+  status: ProcessFlowStepStatus,
+  statusStyles?: ProcessFlowUIProps['statusStyles'],
+): ProcessFlowStatusAppearance {
+  return {
+    ...defaultStatusAppearance[status],
+    ...(statusStyles?.[status] ?? {}),
+  };
+}
+
+function resolveStatusLabel(
+  status: ProcessFlowStepStatus,
+  statusLabels?: ProcessFlowUIProps['statusLabels'],
+) {
+  return statusLabels?.[status] ?? defaultStatusLabels[status];
+}
+
+function buildStepStyle(appearance: ProcessFlowStatusAppearance): CSSProperties {
+  return {
+    '--process-flow-accent': appearance.accent,
+    '--process-flow-accent-soft': appearance.accentSoft,
+    '--process-flow-border': appearance.border,
+    '--process-flow-background': appearance.background,
+    '--process-flow-text': appearance.text,
+    '--process-flow-connector': appearance.connector,
+    '--process-flow-shadow': appearance.shadow ?? 'none',
+  } as CSSProperties;
+}
+
+type StepNodeProps = {
+  step: ProcessFlowStep;
+  index: number;
+  compact: boolean;
+  appearance: ProcessFlowStatusAppearance;
+  status: ProcessFlowStepStatus;
+  statusLabel: string;
+  icon: ReactNode;
+  onStepClick?: ProcessFlowUIProps['onStepClick'];
+};
+
+function StepNode({
+  step,
+  index,
+  compact,
+  appearance,
+  status,
+  statusLabel,
+  icon,
+  onStepClick,
+}: StepNodeProps) {
+  const className = joinClassNames(
+    'process-flow__step',
+    compact && 'process-flow__step--compact',
+    onStepClick && 'process-flow__step--button',
+    status === 'current' && 'process-flow__step--current',
+  );
+  const style = buildStepStyle(appearance);
+
+  if (onStepClick) {
+    return (
+      <button
+        type="button"
+        className={className}
+        style={style}
+        onClick={() => onStepClick(step, index)}
+        aria-current={status === 'current' ? 'step' : undefined}
+      >
+        <span className="process-flow__marker" aria-hidden="true">
+          {icon}
+        </span>
+        <span className="process-flow__content">
+          <span className="process-flow__label-row">
+            <span className="process-flow__label">{step.label}</span>
+            <span className="process-flow__status">{statusLabel}</span>
+          </span>
+          {step.description ? (
+            <span className="process-flow__description">{step.description}</span>
+          ) : null}
+        </span>
+      </button>
+    );
+  }
+
+  return (
+    <div className={className} style={style} aria-current={status === 'current' ? 'step' : undefined}>
+      <span className="process-flow__marker" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="process-flow__content">
+        <span className="process-flow__label-row">
+          <span className="process-flow__label">{step.label}</span>
+          <span className="process-flow__status">{statusLabel}</span>
+        </span>
+        {step.description ? (
+          <span className="process-flow__description">{step.description}</span>
+        ) : null}
+      </span>
+    </div>
+  );
+}
+
+export function ProcessFlowUI({
+  steps,
+  currentStepKey,
+  direction = 'horizontal',
+  compact = false,
+  showConnector = true,
+  onStepClick,
+  statusIcons,
+  statusStyles,
+  statusLabels,
+  className,
+  style,
+}: ProcessFlowUIProps) {
+  const currentIndex = currentStepKey ? steps.findIndex((step) => step.key === currentStepKey) : -1;
+
+  return (
+    <div
+      className={joinClassNames(
+        'process-flow',
+        direction === 'vertical' ? 'process-flow--vertical' : 'process-flow--horizontal',
+        className,
+      )}
+      style={style}
+      role="list"
+      aria-label={`process-flow-${direction as ProcessFlowDirection}`}
+    >
+      {steps.map((step, index) => {
+        const status = resolveStepStatus(step, index, currentIndex);
+        const appearance = resolveAppearance(status, statusStyles);
+        const isLast = index === steps.length - 1;
+        const icon = statusIcons?.[status] ?? defaultStatusIcons[status];
+        const statusLabel = resolveStatusLabel(status, statusLabels);
+
+        return (
+          <div
+            key={step.key}
+            className="process-flow__item"
+            style={buildStepStyle(appearance)}
+            role="listitem"
+          >
+            <StepNode
+              step={step}
+              index={index}
+              compact={compact}
+              appearance={appearance}
+              status={status}
+              statusLabel={statusLabel}
+              icon={icon}
+              onStepClick={onStepClick}
+            />
+            {showConnector && !isLast ? (
+              <span className="process-flow__connector" aria-hidden="true" />
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/processFlow/index.ts b/src/components/processFlow/index.ts
new file mode 100755
index 0000000..28efb68
--- /dev/null
+++ b/src/components/processFlow/index.ts
@@ -0,0 +1,8 @@
+export { ProcessFlowUI } from './ProcessFlowUI';
+export type {
+  ProcessFlowDirection,
+  ProcessFlowStatusAppearance,
+  ProcessFlowStep,
+  ProcessFlowStepStatus,
+  ProcessFlowUIProps,
+} from './types';
diff --git a/src/components/processFlow/samples/BaseSample.tsx b/src/components/processFlow/samples/BaseSample.tsx
new file mode 100755
index 0000000..8b02846
--- /dev/null
+++ b/src/components/processFlow/samples/BaseSample.tsx
@@ -0,0 +1,83 @@
+import { Card, Flex, Typography } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { ProcessFlowUI } from '../ProcessFlowUI';
+
+const { Text } = Typography;
+
+const planSteps = [
+  { key: 'created', label: '등록', description: '게시판 요청이 접수되었습니다.' },
+  { key: 'working', label: '작업중', description: '컴포넌트 구현과 문서를 작성합니다.' },
+  { key: 'done', label: '작업완료', description: '기능 구현이 끝나고 검토를 기다립니다.' },
+  { key: 'released', label: '릴리즈완료', description: 'release 반영 후 검증 대기 상태입니다.' },
+  { key: 'completed', label: '완료', description: 'main 동기화까지 끝난 최종 상태입니다.' },
+];
+
+const releaseSteps = [
+  { key: 'hotfix', label: 'hotfix 생성', status: 'complete' as const },
+  { key: 'release', label: 'release 반영', status: 'current' as const },
+  { key: 'verify', label: '검증', status: 'pending' as const },
+  { key: 'main', label: 'main 동기화', status: 'pending' as const },
+];
+
+const failedSteps = [
+  { key: 'board', label: 'Board 접수', status: 'complete' as const },
+  { key: 'plan', label: 'Plan 생성', status: 'complete' as const },
+  { key: 'apply', label: '자동 반영', status: 'failed' as const, description: '충돌로 재시도가 필요합니다.' },
+  { key: 'summary', label: '상태 요약', status: 'pending' as const },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'process-flow-ui-base',
+  componentId: 'process-flow-ui',
+  title: 'Process Flow UI',
+  description: '단계형 진행 상태를 가로/세로 흐름으로 공통 표시하는 Stepper 컴포넌트입니다.',
+  category: 'Navigation',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 63,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <Flex vertical gap={16}>
+      <Card size="small" title="Plan 상세 흐름">
+        <ProcessFlowUI steps={planSteps} currentStepKey="working" />
+      </Card>
+
+      <Flex gap={16} wrap="wrap">
+        <Card
+          size="small"
+          title="Release 반영 대기"
+          style={{ flex: '1 1 280px', minWidth: 260 }}
+        >
+          <Flex vertical gap={10}>
+            <Text type="secondary">세로 모드로 배치하면 긴 설명과 운영 단계가 더 읽기 쉽습니다.</Text>
+            <ProcessFlowUI
+              steps={releaseSteps}
+              direction="vertical"
+              compact
+              statusLabels={{
+                complete: '반영됨',
+                current: '진행중',
+                failed: '실패',
+                pending: '대기',
+              }}
+            />
+          </Flex>
+        </Card>
+
+        <Card
+          size="small"
+          title="Board 자동화 실패 예시"
+          style={{ flex: '1 1 280px', minWidth: 260 }}
+        >
+          <Flex vertical gap={10}>
+            <Text type="secondary">상태별 색상과 라벨만으로 현재 위치와 다음 작업을 빠르게 구분합니다.</Text>
+            <ProcessFlowUI steps={failedSteps} compact />
+          </Flex>
+        </Card>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/components/processFlow/types/index.ts b/src/components/processFlow/types/index.ts
new file mode 100755
index 0000000..3104afb
--- /dev/null
+++ b/src/components/processFlow/types/index.ts
@@ -0,0 +1,7 @@
+export type {
+  ProcessFlowDirection,
+  ProcessFlowStatusAppearance,
+  ProcessFlowStep,
+  ProcessFlowStepStatus,
+  ProcessFlowUIProps,
+} from './process-flow';
diff --git a/src/components/processFlow/types/process-flow.ts b/src/components/processFlow/types/process-flow.ts
new file mode 100755
index 0000000..30654dc
--- /dev/null
+++ b/src/components/processFlow/types/process-flow.ts
@@ -0,0 +1,36 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export type ProcessFlowStepStatus = 'complete' | 'current' | 'failed' | 'pending';
+
+export type ProcessFlowDirection = 'horizontal' | 'vertical';
+
+export type ProcessFlowStep = {
+  key: string;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: ProcessFlowStepStatus;
+};
+
+export type ProcessFlowStatusAppearance = {
+  accent: string;
+  accentSoft: string;
+  border: string;
+  background: string;
+  text: string;
+  connector: string;
+  shadow?: string;
+};
+
+export type ProcessFlowUIProps = {
+  steps: ProcessFlowStep[];
+  currentStepKey?: string;
+  direction?: ProcessFlowDirection;
+  compact?: boolean;
+  showConnector?: boolean;
+  onStepClick?: (step: ProcessFlowStep, index: number) => void;
+  statusIcons?: Partial<Record<ProcessFlowStepStatus, ReactNode>>;
+  statusStyles?: Partial<Record<ProcessFlowStepStatus, Partial<ProcessFlowStatusAppearance>>>;
+  statusLabels?: Partial<Record<ProcessFlowStepStatus, string>>;
+  className?: string;
+  style?: CSSProperties;
+};
diff --git a/src/components/queryFilterBuilder/QueryFilterBuilderUI.css b/src/components/queryFilterBuilder/QueryFilterBuilderUI.css
new file mode 100755
index 0000000..dd2d6f0
--- /dev/null
+++ b/src/components/queryFilterBuilder/QueryFilterBuilderUI.css
@@ -0,0 +1,54 @@
+.query-filter-builder {
+  width: 100%;
+}
+
+.query-filter-builder__toolbar {
+  width: 100%;
+}
+
+.query-filter-builder__preset {
+  min-width: 180px;
+}
+
+.query-filter-builder__rows {
+  width: 100%;
+}
+
+.query-filter-builder__row {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(132px, 0.8fr) minmax(180px, 1.4fr) auto;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.query-filter-builder__row--compact {
+  grid-template-columns: minmax(120px, 1fr) minmax(112px, 0.8fr) minmax(140px, 1.2fr) auto;
+}
+
+.query-filter-builder__field,
+.query-filter-builder__operator,
+.query-filter-builder__value {
+  min-width: 0;
+}
+
+.query-filter-builder__summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+@media (max-width: 720px) {
+  .query-filter-builder__toolbar {
+    align-items: stretch;
+  }
+
+  .query-filter-builder__preset {
+    width: 100%;
+  }
+
+  .query-filter-builder__row,
+  .query-filter-builder__row--compact {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/queryFilterBuilder/QueryFilterBuilderUI.tsx b/src/components/queryFilterBuilder/QueryFilterBuilderUI.tsx
new file mode 100755
index 0000000..2a92794
--- /dev/null
+++ b/src/components/queryFilterBuilder/QueryFilterBuilderUI.tsx
@@ -0,0 +1,179 @@
+import { Button, Empty, Flex, Input, Select, Space, Tag, Typography } from 'antd';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { useMemo } from 'react';
+import type {
+  QueryFilterBuilderProps,
+  QueryFilterCondition,
+  QueryFilterField,
+  QueryFilterOperator,
+} from './types';
+import './QueryFilterBuilderUI.css';
+
+const { Text } = Typography;
+
+function createCondition(
+  fields: QueryFilterField[],
+  operators: QueryFilterOperator[],
+): QueryFilterCondition {
+  return {
+    id: `filter-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    field: fields[0]?.value ?? '',
+    operator: operators[0]?.value ?? '',
+    value: '',
+  };
+}
+
+function cloneConditions(conditions: QueryFilterCondition[]) {
+  return conditions.map((condition) => ({ ...condition }));
+}
+
+export function QueryFilterBuilderUI({
+  fields,
+  operators,
+  value,
+  onChange,
+  presets = [],
+  compact = false,
+  disabled = false,
+  addLabel = '조건 추가',
+  emptyText = '등록된 필터 조건이 없습니다.',
+}: QueryFilterBuilderProps) {
+  const fieldOptions = useMemo(
+    () => fields.map((field) => ({ value: field.value, label: field.label })),
+    [fields],
+  );
+  const operatorOptions = useMemo(
+    () => operators.map((operator) => ({ value: operator.value, label: operator.label })),
+    [operators],
+  );
+  const fieldMap = useMemo(
+    () => new Map(fields.map((field) => [field.value, field])),
+    [fields],
+  );
+  const operatorMap = useMemo(
+    () => new Map(operators.map((operator) => [operator.value, operator])),
+    [operators],
+  );
+
+  const updateCondition = (
+    id: string,
+    patch: Partial<Omit<QueryFilterCondition, 'id'>>,
+  ) => {
+    onChange(
+      value.map((condition) =>
+        condition.id === id ? { ...condition, ...patch } : condition,
+      ),
+    );
+  };
+
+  const removeCondition = (id: string) => {
+    onChange(value.filter((condition) => condition.id !== id));
+  };
+
+  return (
+    <Space direction="vertical" size={compact ? 8 : 12} className="query-filter-builder">
+      <Flex wrap gap={8} align="center" justify="space-between" className="query-filter-builder__toolbar">
+        <Space wrap size={8}>
+          {presets.length ? (
+            <Select
+              allowClear
+              disabled={disabled}
+              className="query-filter-builder__preset"
+              placeholder="프리셋 선택"
+              options={presets.map((preset) => ({
+                value: preset.value,
+                label: preset.label,
+              }))}
+              onChange={(presetValue) => {
+                const preset = presets.find((item) => item.value === presetValue);
+                if (preset) {
+                  onChange(cloneConditions(preset.conditions));
+                }
+              }}
+            />
+          ) : null}
+          <Text type="secondary">{value.length}개 조건</Text>
+        </Space>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          disabled={disabled || fields.length === 0 || operators.length === 0}
+          onClick={() => {
+            onChange([...value, createCondition(fields, operators)]);
+          }}
+        >
+          {addLabel}
+        </Button>
+      </Flex>
+
+      {value.length ? (
+        <Space direction="vertical" size={compact ? 6 : 8} className="query-filter-builder__rows">
+          {value.map((condition) => {
+            const field = fieldMap.get(condition.field);
+
+            return (
+              <div
+                key={condition.id}
+                className={[
+                  'query-filter-builder__row',
+                  compact ? 'query-filter-builder__row--compact' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                <Select
+                  disabled={disabled}
+                  className="query-filter-builder__field"
+                  value={condition.field}
+                  options={fieldOptions}
+                  placeholder="필드"
+                  onChange={(nextField) => updateCondition(condition.id, { field: nextField })}
+                />
+                <Select
+                  disabled={disabled}
+                  className="query-filter-builder__operator"
+                  value={condition.operator}
+                  options={operatorOptions}
+                  placeholder="연산자"
+                  onChange={(nextOperator) =>
+                    updateCondition(condition.id, { operator: nextOperator })
+                  }
+                />
+                <Input
+                  disabled={disabled}
+                  className="query-filter-builder__value"
+                  value={condition.value}
+                  placeholder={field?.placeholder ?? '값 입력'}
+                  onChange={(event) =>
+                    updateCondition(condition.id, { value: event.target.value })
+                  }
+                />
+                <Button
+                  danger
+                  disabled={disabled}
+                  aria-label="필터 조건 삭제"
+                  icon={<DeleteOutlined />}
+                  onClick={() => removeCondition(condition.id)}
+                />
+              </div>
+            );
+          })}
+        </Space>
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyText} />
+      )}
+
+      {compact && value.length ? (
+        <div className="query-filter-builder__summary">
+          {value.map((condition) => (
+            <Tag key={condition.id}>
+              {fieldMap.get(condition.field)?.label ?? condition.field}{' '}
+              {operatorMap.get(condition.operator)?.label ?? condition.operator}{' '}
+              {condition.value || '값 없음'}
+            </Tag>
+          ))}
+        </div>
+      ) : null}
+    </Space>
+  );
+}
diff --git a/src/components/queryFilterBuilder/index.ts b/src/components/queryFilterBuilder/index.ts
new file mode 100755
index 0000000..2ee74eb
--- /dev/null
+++ b/src/components/queryFilterBuilder/index.ts
@@ -0,0 +1,2 @@
+export { QueryFilterBuilderUI } from './QueryFilterBuilderUI';
+export * from './types';
diff --git a/src/components/queryFilterBuilder/samples/BaseSample.tsx b/src/components/queryFilterBuilder/samples/BaseSample.tsx
new file mode 100755
index 0000000..5f0595d
--- /dev/null
+++ b/src/components/queryFilterBuilder/samples/BaseSample.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import type { SampleMeta } from '../../../widgets/core';
+import { QueryFilterBuilderUI } from '../QueryFilterBuilderUI';
+import type { QueryFilterCondition } from '../types';
+
+const fields = [
+  { value: 'title', label: '제목', placeholder: '게시글 제목' },
+  { value: 'status', label: '상태', placeholder: 'ready, working, done' },
+  { value: 'owner', label: '담당 영역', placeholder: 'Plan, Board, History' },
+];
+
+const operators = [
+  { value: 'contains', label: '포함' },
+  { value: 'equals', label: '일치' },
+  { value: 'startsWith', label: '시작' },
+];
+
+const initialValue: QueryFilterCondition[] = [
+  { id: 'condition-title', field: 'title', operator: 'contains', value: '컴포넌트' },
+  { id: 'condition-owner', field: 'owner', operator: 'equals', value: 'Plan' },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'query-filter-builder-base',
+  componentId: 'query-filter-builder',
+  title: 'Query Filter Builder',
+  description: '복수 조건 검색 필터를 행 단위로 추가하고 프리셋으로 재사용하는 컴포넌트입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 45,
+  features: ['docs', 'component-sample'],
+};
+
+export function Sample() {
+  const [value, setValue] = useState<QueryFilterCondition[]>(initialValue);
+
+  return (
+    <QueryFilterBuilderUI
+      fields={fields}
+      operators={operators}
+      value={value}
+      onChange={setValue}
+      presets={[
+        {
+          value: 'plan-open',
+          label: 'Plan 진행 건',
+          conditions: [
+            { id: 'preset-status', field: 'status', operator: 'equals', value: 'working' },
+            { id: 'preset-owner', field: 'owner', operator: 'equals', value: 'Plan' },
+          ],
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/components/queryFilterBuilder/types/index.ts b/src/components/queryFilterBuilder/types/index.ts
new file mode 100755
index 0000000..4faa3fa
--- /dev/null
+++ b/src/components/queryFilterBuilder/types/index.ts
@@ -0,0 +1 @@
+export * from './query-filter-builder';
diff --git a/src/components/queryFilterBuilder/types/query-filter-builder.ts b/src/components/queryFilterBuilder/types/query-filter-builder.ts
new file mode 100755
index 0000000..b9f7728
--- /dev/null
+++ b/src/components/queryFilterBuilder/types/query-filter-builder.ts
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+export type QueryFilterField = {
+  value: string;
+  label: ReactNode;
+  placeholder?: string;
+};
+
+export type QueryFilterOperator = {
+  value: string;
+  label: ReactNode;
+};
+
+export type QueryFilterCondition = {
+  id: string;
+  field: string;
+  operator: string;
+  value: string;
+};
+
+export type QueryFilterPreset = {
+  value: string;
+  label: ReactNode;
+  conditions: QueryFilterCondition[];
+};
+
+export type QueryFilterBuilderProps = {
+  fields: QueryFilterField[];
+  operators: QueryFilterOperator[];
+  value: QueryFilterCondition[];
+  onChange: (value: QueryFilterCondition[]) => void;
+  presets?: QueryFilterPreset[];
+  compact?: boolean;
+  disabled?: boolean;
+  addLabel?: ReactNode;
+  emptyText?: ReactNode;
+};
diff --git a/src/components/search/SearchCommandModal.tsx b/src/components/search/SearchCommandModal.tsx
new file mode 100755
index 0000000..a943596
--- /dev/null
+++ b/src/components/search/SearchCommandModal.tsx
@@ -0,0 +1,194 @@
+import { AutoComplete, Input, Modal, Space, Tag, Typography } from 'antd';
+import type { InputRef } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { SearchKeywordOption } from './types';
+import type { SearchOpenMode } from '../../layer/search/types';
+
+const { Text, Title } = Typography;
+
+export type SearchCommandModalProps = {
+  open: boolean;
+  options: SearchKeywordOption[];
+  mode: SearchOpenMode;
+  onClose: () => void;
+  onSelectOption: (option: SearchKeywordOption) => void;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  submitHint?: string;
+};
+
+export function SearchCommandModal({
+  open,
+  options,
+  mode,
+  onClose,
+  onSelectOption,
+  title,
+  description,
+  placeholder,
+  submitHint,
+}: SearchCommandModalProps) {
+  const inputRef = useRef<InputRef | null>(null);
+  const selectionLockRef = useRef(false);
+  const [query, setQuery] = useState('');
+  const [isMobileViewport, setIsMobileViewport] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    return window.innerWidth <= 768;
+  });
+
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+    }
+  }, [open]);
+
+  const submitOption = (option: SearchKeywordOption | undefined) => {
+    if (!option || selectionLockRef.current) {
+      return;
+    }
+
+    selectionLockRef.current = true;
+    onSelectOption(option);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const updateViewport = () => {
+      setIsMobileViewport(mediaQuery.matches);
+    };
+
+    updateViewport();
+    mediaQuery.addEventListener('change', updateViewport);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateViewport);
+    };
+  }, []);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+
+    const matchedOptions = normalizedQuery.length === 0
+      ? options.slice(0, 8)
+      : options.filter((option) => {
+          const haystacks = [
+            option.label,
+            option.group,
+            option.description ?? '',
+            ...(option.keywords ?? []),
+          ];
+
+          return haystacks.some((value) => value.toLowerCase().includes(normalizedQuery));
+        }).slice(0, 12);
+
+    return matchedOptions.map((option) => ({
+      value: option.id,
+      label: (
+        <Space direction="vertical" size={2} className="search-command__option">
+          <Space size={8}>
+            <Text strong>{option.label}</Text>
+            <Tag>{option.group}</Tag>
+          </Space>
+          {option.description && !isMobileViewport ? (
+            <Text type="secondary" className="search-command__option-copy">
+              {option.description}
+            </Text>
+          ) : null}
+        </Space>
+      ),
+    }));
+  }, [options, query]);
+
+  return (
+    <Modal
+      open={open}
+      footer={null}
+      onCancel={onClose}
+      forceRender
+      keyboard
+      maskClosable
+      centered={false}
+      width={minWidth()}
+      className="search-command-modal"
+      style={{ top: 18 }}
+      styles={{ body: { padding: 18 } }}
+      destroyOnClose
+      afterOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          return;
+        }
+
+        selectionLockRef.current = false;
+        window.requestAnimationFrame(() => {
+          inputRef.current?.focus({
+            cursor: 'all',
+          });
+          inputRef.current?.input?.focus();
+        });
+      }}
+    >
+      <Space direction="vertical" size={14} className="search-command">
+        <div className="search-command__header">
+          <Title level={4} className="search-command__title">
+            {title ?? (mode === 'window' ? '윈도우 검색' : '통합 검색')}
+          </Title>
+          <Text type="secondary" className="search-command__description">
+            {(isMobileViewport ? description?.split('.').filter(Boolean)[0] : description)
+              ?? (mode === 'window'
+                ? isMobileViewport ? '선택 항목을 창으로 엽니다.' : '선택한 항목을 Window UI 콘텐츠로 바로 엽니다.'
+                : '키워드로 문서, API, 컴포넌트, 위젯을 빠르게 찾을 수 있습니다.')}
+          </Text>
+        </div>
+        <AutoComplete
+          popupClassName="search-command__dropdown"
+          className="search-command__autocomplete"
+          options={filteredOptions}
+          value={query}
+          onSearch={setQuery}
+          onChange={setQuery}
+          onSelect={(value) => {
+            submitOption(options.find((option) => option.id === value));
+          }}
+        >
+          <Input
+            id="app-search-command-input"
+            ref={(element) => {
+              inputRef.current = element;
+            }}
+            size="large"
+            autoFocus
+            placeholder={placeholder ?? '검색어를 입력하세요'}
+            allowClear
+            onPressEnter={() => {
+              const firstOption = filteredOptions[0];
+              submitOption(options.find((option) => option.id === firstOption?.value));
+            }}
+          />
+        </AutoComplete>
+        <Text type="secondary">
+          {(isMobileViewport ? submitHint?.split('.').filter(Boolean)[0] : submitHint)
+            ?? (mode === 'window'
+              ? isMobileViewport ? '선택하면 창이 열립니다.' : '선택하거나 Enter를 누르면 Window UI 콘텐츠가 열립니다.'
+              : '선택하거나 Enter를 누르면 바로 이동합니다.')}
+        </Text>
+      </Space>
+    </Modal>
+  );
+}
+
+function minWidth() {
+  if (typeof window === 'undefined') {
+    return 560;
+  }
+
+  return Math.min(560, window.innerWidth - 24);
+}
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
new file mode 100755
index 0000000..e327d3b
--- /dev/null
+++ b/src/components/search/index.ts
@@ -0,0 +1,2 @@
+export * from './SearchCommandModal';
+export * from './types';
diff --git a/src/components/search/samples/BaseSample.tsx b/src/components/search/samples/BaseSample.tsx
new file mode 100755
index 0000000..dad0d2f
--- /dev/null
+++ b/src/components/search/samples/BaseSample.tsx
@@ -0,0 +1,45 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { SearchCommandModal } from '../SearchCommandModal';
+
+const options = [
+  {
+    id: 'component-select',
+    label: 'Select Input',
+    group: 'Component',
+    description: '센터 선택용 select 컴포넌트',
+    keywords: ['select', 'input', 'filter'],
+    onSelect: () => {},
+  },
+  {
+    id: 'widget-dashboard',
+    label: 'Dashboard Report',
+    group: 'Widget',
+    description: '대시보드 리포트 위젯',
+    keywords: ['report', 'dashboard'],
+    onSelect: () => {},
+  },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'search-command-modal-base',
+  componentId: 'search-command-modal',
+  title: 'Search Command Modal',
+  description: '키워드 검색으로 문서, 컴포넌트, 위젯을 빠르게 찾는 커맨드 모달입니다.',
+  category: 'Search',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 82,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <SearchCommandModal
+      open
+      options={options}
+      mode="navigate"
+      onClose={() => {}}
+      onSelectOption={() => {}}
+    />
+  );
+}
diff --git a/src/components/search/types.ts b/src/components/search/types.ts
new file mode 100755
index 0000000..bd1acd5
--- /dev/null
+++ b/src/components/search/types.ts
@@ -0,0 +1,9 @@
+export type SearchKeywordOption = {
+  id: string;
+  label: string;
+  group: string;
+  keywords?: string[];
+  description?: string;
+  onSelect: () => void;
+  onSelectWindow?: () => void;
+};
diff --git a/src/components/stateKit/StateKit.css b/src/components/stateKit/StateKit.css
new file mode 100755
index 0000000..219ee6a
--- /dev/null
+++ b/src/components/stateKit/StateKit.css
@@ -0,0 +1,19 @@
+.state-kit-loading {
+  width: 100%;
+}
+
+.state-kit-loading--card {
+  padding: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.state-kit-loading--list {
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.state-kit-loading--body {
+  padding: 18px 0;
+}
diff --git a/src/components/stateKit/StateKit.tsx b/src/components/stateKit/StateKit.tsx
new file mode 100755
index 0000000..8e94717
--- /dev/null
+++ b/src/components/stateKit/StateKit.tsx
@@ -0,0 +1,130 @@
+import { Alert, Button, Empty, Flex, Skeleton, Typography } from 'antd';
+import type { ButtonProps, SkeletonProps } from 'antd';
+import type { ReactNode } from 'react';
+import './StateKit.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+export type EmptyStateProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  actionLabel?: ReactNode;
+  onAction?: ButtonProps['onClick'];
+  extra?: ReactNode;
+};
+
+export type ErrorStateProps = {
+  title?: ReactNode;
+  message: ReactNode;
+  retryLabel?: ReactNode;
+  onRetry?: ButtonProps['onClick'];
+  extra?: ReactNode;
+};
+
+export type LoadingStateVariant = 'card' | 'list' | 'body';
+
+export type LoadingStateProps = {
+  variant?: LoadingStateVariant;
+  rows?: number;
+  active?: boolean;
+};
+
+export function EmptyState({
+  title,
+  description,
+  actionLabel,
+  onAction,
+  extra,
+}: EmptyStateProps) {
+  return (
+    <Empty
+      image={Empty.PRESENTED_IMAGE_SIMPLE}
+      description={
+        <Flex vertical gap={4} align="center">
+          <Text strong>{title}</Text>
+          {description ? <Paragraph type="secondary">{description}</Paragraph> : null}
+        </Flex>
+      }
+    >
+      {actionLabel ? (
+        <Button type="primary" onClick={onAction}>
+          {actionLabel}
+        </Button>
+      ) : null}
+      {extra}
+    </Empty>
+  );
+}
+
+export function ErrorState({
+  title = '처리 중 문제가 발생했습니다.',
+  message,
+  retryLabel = '다시 시도',
+  onRetry,
+  extra,
+}: ErrorStateProps) {
+  return (
+    <Alert
+      type="error"
+      showIcon
+      message={title}
+      description={
+        <Flex vertical gap={12} align="flex-start">
+          <Text>{message}</Text>
+          <Flex gap={8} wrap="wrap">
+            {onRetry ? <Button onClick={onRetry}>{retryLabel}</Button> : null}
+            {extra}
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+}
+
+function resolveLoadingProps(variant: LoadingStateVariant): SkeletonProps {
+  if (variant === 'list') {
+    return {
+      title: false,
+      paragraph: { rows: 1 },
+    };
+  }
+
+  if (variant === 'body') {
+    return {
+      title: true,
+      paragraph: { rows: 5 },
+    };
+  }
+
+  return {
+    title: true,
+    paragraph: { rows: 3 },
+  };
+}
+
+export function LoadingState({
+  variant = 'card',
+  rows = variant === 'list' ? 4 : 1,
+  active = true,
+}: LoadingStateProps) {
+  const skeletonProps = resolveLoadingProps(variant);
+
+  return (
+    <Flex vertical gap={variant === 'list' ? 8 : 16}>
+      {Array.from({ length: rows }, (_, index) => (
+        <div key={index} className={`state-kit-loading state-kit-loading--${variant}`}>
+          <Skeleton active={active} {...skeletonProps} />
+        </div>
+      ))}
+    </Flex>
+  );
+}
+
+export function StateKitIntro() {
+  return (
+    <Flex vertical gap={4}>
+      <Title level={5}>State Kit</Title>
+      <Text type="secondary">빈 상태, 오류, 로딩 상태를 같은 규칙으로 조립합니다.</Text>
+    </Flex>
+  );
+}
diff --git a/src/components/stateKit/index.ts b/src/components/stateKit/index.ts
new file mode 100755
index 0000000..64d6980
--- /dev/null
+++ b/src/components/stateKit/index.ts
@@ -0,0 +1 @@
+export * from './StateKit';
diff --git a/src/components/stateKit/samples/BaseSample.tsx b/src/components/stateKit/samples/BaseSample.tsx
new file mode 100755
index 0000000..655af98
--- /dev/null
+++ b/src/components/stateKit/samples/BaseSample.tsx
@@ -0,0 +1,29 @@
+import { Flex } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { EmptyState, ErrorState, LoadingState } from '../StateKit';
+
+export const sampleMeta: SampleMeta = {
+  id: 'state-kit-base',
+  componentId: 'state-kit',
+  title: 'State Kit',
+  description: '빈 상태, 오류, 로딩 스켈레톤을 화면별로 같은 규칙으로 배치하는 공통 상태 키트입니다.',
+  category: 'Common',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 35,
+  features: ['docs', 'component-sample'],
+};
+
+export function Sample() {
+  return (
+    <Flex vertical gap={16}>
+      <EmptyState
+        title="아직 게시글이 없습니다."
+        description="첫 글을 등록하면 목록과 상세 패널에서 바로 확인할 수 있습니다."
+        actionLabel="게시글 작성"
+      />
+      <ErrorState message="저장된 Plan 목록을 불러오지 못했습니다." />
+      <LoadingState variant="list" rows={3} />
+    </Flex>
+  );
+}
diff --git a/src/components/status-badge/StatusBadgeUI.tsx b/src/components/status-badge/StatusBadgeUI.tsx
new file mode 100755
index 0000000..ac81131
--- /dev/null
+++ b/src/components/status-badge/StatusBadgeUI.tsx
@@ -0,0 +1,14 @@
+import { Tag } from 'antd';
+import type { StatusBadgeProps, StatusTone } from './types';
+
+const toneColorMap: Record<StatusTone, string> = {
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+  processing: 'processing',
+  default: 'default',
+};
+
+export function StatusBadgeUI({ label, tone = 'default' }: StatusBadgeProps) {
+  return <Tag color={toneColorMap[tone]}>{label}</Tag>;
+}
diff --git a/src/components/status-badge/index.ts b/src/components/status-badge/index.ts
new file mode 100755
index 0000000..c670953
--- /dev/null
+++ b/src/components/status-badge/index.ts
@@ -0,0 +1,3 @@
+export { StatusBadgeUI } from './StatusBadgeUI';
+export * from './types';
+export * from './plugins';
diff --git a/src/components/status-badge/plugins/index.ts b/src/components/status-badge/plugins/index.ts
new file mode 100755
index 0000000..8c24248
--- /dev/null
+++ b/src/components/status-badge/plugins/index.ts
@@ -0,0 +1,6 @@
+export {
+  createStatusBadgeTonePlugin,
+  emphasizeDonePlugin,
+  mapStatusBadgeInputToProps,
+  type StatusBadgePluginOptions,
+} from './status-badge.plugin';
diff --git a/src/components/status-badge/plugins/status-badge.plugin.ts b/src/components/status-badge/plugins/status-badge.plugin.ts
new file mode 100755
index 0000000..4c981e2
--- /dev/null
+++ b/src/components/status-badge/plugins/status-badge.plugin.ts
@@ -0,0 +1,43 @@
+import type {
+  ComponentPlugin,
+  ComponentPluginFactory,
+  PropsPlugin,
+} from '../../../types/component-plugin';
+import type { StatusBadgePluginInput, StatusBadgeProps, StatusTone } from '../types';
+
+export type StatusBadgePluginOptions = {
+  fallbackTone?: StatusTone;
+};
+
+const statusToneMap: Record<NonNullable<StatusBadgePluginInput['status']>, StatusTone> = {
+  ready: 'default',
+  working: 'processing',
+  blocked: 'error',
+  done: 'success',
+};
+
+export const mapStatusBadgeInputToProps: ComponentPlugin<
+  StatusBadgePluginInput,
+  StatusBadgeProps
+> = (input) => ({
+  label: input.text,
+  tone: input.status ? statusToneMap[input.status] : 'default',
+});
+
+export const createStatusBadgeTonePlugin: ComponentPluginFactory<
+  [options?: StatusBadgePluginOptions],
+  StatusBadgeProps,
+  StatusBadgeProps
+> =
+  (options) =>
+  (props) => ({
+    ...props,
+    tone: props.tone === 'default' ? options?.fallbackTone ?? 'default' : props.tone,
+  });
+
+export const emphasizeDonePlugin =
+  (input: StatusBadgePluginInput): PropsPlugin<StatusBadgeProps> =>
+  (props) => ({
+    ...props,
+    label: input.status === 'done' ? `${props.label} 완료` : props.label,
+  });
diff --git a/src/components/status-badge/samples/BaseSample.tsx b/src/components/status-badge/samples/BaseSample.tsx
new file mode 100755
index 0000000..9a04be3
--- /dev/null
+++ b/src/components/status-badge/samples/BaseSample.tsx
@@ -0,0 +1,18 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { StatusBadgeUI } from '../StatusBadgeUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'status-badge-base',
+  componentId: 'status-badge',
+  title: 'Status Badge',
+  description: '상태 텍스트를 배지 UI로 변환하는 컴포넌트 샘플입니다.',
+  category: 'Display',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 10,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return <StatusBadgeUI label="배포 완료" tone="success" />;
+}
diff --git a/src/components/status-badge/samples/Sample.tsx b/src/components/status-badge/samples/Sample.tsx
new file mode 100755
index 0000000..da30f5a
--- /dev/null
+++ b/src/components/status-badge/samples/Sample.tsx
@@ -0,0 +1,54 @@
+import { Card, Flex, Typography } from 'antd';
+import { plugins } from '../../../types/component-plugin';
+import { StatusBadgeUI } from '../StatusBadgeUI';
+import {
+  createStatusBadgeTonePlugin,
+  emphasizeDonePlugin,
+  mapStatusBadgeInputToProps,
+} from '../plugins';
+import type { SampleMeta } from '../../../widgets/core';
+
+const { Paragraph, Text } = Typography;
+
+const sampleInputs = [
+  { text: '기본 상태', status: 'ready' as const },
+  { text: '진행 중', status: 'working' as const },
+  { text: '이슈 발생', status: 'blocked' as const },
+  { text: '배포 완료', status: 'done' as const },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'status-badge',
+  componentId: 'status-badge',
+  title: 'Status Badge',
+  description: '상태 텍스트를 배지 UI로 변환하는 컴포넌트 샘플입니다.',
+  category: 'Display',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 10,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const tonePlugin = createStatusBadgeTonePlugin({ fallbackTone: 'warning' });
+
+  return (
+    <Card title="StatusBadge Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        대표 샘플은 기본 입력을 UI props로 변환한 뒤, 여러 props 플러그인을 배열로 합성해
+        최종 렌더링에 반영하는 흐름을 보여줍니다.
+      </Paragraph>
+
+      <Flex gap="small" wrap>
+        {sampleInputs.map((input) => {
+          const baseProps = mapStatusBadgeInputToProps(input);
+          const finalProps = plugins(baseProps, [tonePlugin, emphasizeDonePlugin(input)]);
+
+          return <StatusBadgeUI key={`${input.text}-${input.status}`} {...finalProps} />;
+        })}
+      </Flex>
+    </Card>
+  );
+}
+
+export const StatusBadgeSample = Sample;
diff --git a/src/components/status-badge/types/index.ts b/src/components/status-badge/types/index.ts
new file mode 100755
index 0000000..ed64b54
--- /dev/null
+++ b/src/components/status-badge/types/index.ts
@@ -0,0 +1,5 @@
+export type {
+  StatusBadgePluginInput,
+  StatusBadgeProps,
+  StatusTone,
+} from './status-badge';
diff --git a/src/components/status-badge/types/status-badge.ts b/src/components/status-badge/types/status-badge.ts
new file mode 100755
index 0000000..37e65e0
--- /dev/null
+++ b/src/components/status-badge/types/status-badge.ts
@@ -0,0 +1,11 @@
+export type StatusTone = 'success' | 'warning' | 'error' | 'processing' | 'default';
+
+export type StatusBadgeProps = {
+  label: string;
+  tone?: StatusTone;
+};
+
+export type StatusBadgePluginInput = {
+  text: string;
+  status?: 'ready' | 'working' | 'blocked' | 'done';
+};
diff --git a/src/components/stepper/StepperUI.tsx b/src/components/stepper/StepperUI.tsx
new file mode 100755
index 0000000..2bca794
--- /dev/null
+++ b/src/components/stepper/StepperUI.tsx
@@ -0,0 +1,6 @@
+import { ProcessFlowUI } from '../processFlow';
+import type { StepperUIProps } from './types';
+
+export function StepperUI(props: StepperUIProps) {
+  return <ProcessFlowUI {...props} />;
+}
diff --git a/src/components/stepper/index.ts b/src/components/stepper/index.ts
new file mode 100755
index 0000000..070b73c
--- /dev/null
+++ b/src/components/stepper/index.ts
@@ -0,0 +1,9 @@
+export { StepperUI, StepperUI as Stepper } from './StepperUI';
+export type {
+  StepperUIProps as StepperProps,
+  StepperDirection,
+  StepperStatusAppearance,
+  StepperStep,
+  StepperStepStatus,
+  StepperUIProps,
+} from './types';
diff --git a/src/components/stepper/samples/BaseSample.tsx b/src/components/stepper/samples/BaseSample.tsx
new file mode 100755
index 0000000..bc9d9e5
--- /dev/null
+++ b/src/components/stepper/samples/BaseSample.tsx
@@ -0,0 +1,61 @@
+import { Card, Flex, Typography } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { StepperUI } from '../StepperUI';
+
+const { Text } = Typography;
+
+const orderSteps = [
+  { key: 'draft', label: '초안', description: '요청 초안을 등록하고 범위를 정리합니다.' },
+  { key: 'review', label: '검토', description: '의존성과 화면 반영 범위를 확인합니다.' },
+  { key: 'build', label: '구현', description: '컴포넌트와 샘플, 문서를 함께 작성합니다.' },
+  { key: 'verify', label: '확인', description: '빌드와 화면 구성을 점검합니다.' },
+  { key: 'done', label: '완료', description: 'release 반영 대기 상태로 넘깁니다.' },
+];
+
+const supportSteps = [
+  { key: 'ticket', label: '접수', status: 'complete' as const },
+  { key: 'assign', label: '담당 지정', status: 'complete' as const },
+  { key: 'fix', label: '수정중', status: 'current' as const },
+  { key: 'deploy', label: '배포 대기', status: 'pending' as const },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'stepper-base',
+  componentId: 'stepper',
+  title: 'Stepper',
+  description: '단계 진행 상태를 가로 또는 세로 흐름으로 표현하는 stepper 컴포넌트입니다.',
+  category: 'Navigation',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 64,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <Flex vertical gap={16}>
+      <Card size="small" title="기본 Stepper">
+        <StepperUI steps={orderSteps} currentStepKey="build" />
+      </Card>
+
+      <Card size="small" title="Compact Vertical Stepper">
+        <Flex vertical gap={10}>
+          <Text type="secondary">
+            운영 상태처럼 짧은 단계를 좁은 폭에 배치할 때는 세로 모드가 읽기 쉽습니다.
+          </Text>
+          <StepperUI
+            steps={supportSteps}
+            direction="vertical"
+            compact
+            statusLabels={{
+              complete: '완료',
+              current: '진행중',
+              failed: '실패',
+              pending: '대기',
+            }}
+          />
+        </Flex>
+      </Card>
+    </Flex>
+  );
+}
diff --git a/src/components/stepper/types.ts b/src/components/stepper/types.ts
new file mode 100755
index 0000000..e2fb66b
--- /dev/null
+++ b/src/components/stepper/types.ts
@@ -0,0 +1,13 @@
+import type {
+  ProcessFlowDirection,
+  ProcessFlowStatusAppearance,
+  ProcessFlowStep,
+  ProcessFlowStepStatus,
+  ProcessFlowUIProps,
+} from '../processFlow';
+
+export type StepperStepStatus = ProcessFlowStepStatus;
+export type StepperDirection = ProcessFlowDirection;
+export type StepperStep = ProcessFlowStep;
+export type StepperStatusAppearance = ProcessFlowStatusAppearance;
+export type StepperUIProps = ProcessFlowUIProps;
diff --git a/src/components/timelinePanel/TimelinePanelUI.css b/src/components/timelinePanel/TimelinePanelUI.css
new file mode 100755
index 0000000..3268340
--- /dev/null
+++ b/src/components/timelinePanel/TimelinePanelUI.css
@@ -0,0 +1,236 @@
+.timeline-panel {
+  --timeline-panel-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
+  --timeline-panel-border: rgba(148, 163, 184, 0.18);
+  --timeline-panel-text: #0f172a;
+  --timeline-panel-muted: #64748b;
+  --timeline-panel-rail: rgba(148, 163, 184, 0.3);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px;
+  border: 1px solid var(--timeline-panel-border);
+  border-radius: 20px;
+  background: var(--timeline-panel-surface);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
+  color: var(--timeline-panel-text);
+}
+
+.timeline-panel--compact {
+  gap: 14px;
+  padding: 16px;
+  border-radius: 16px;
+}
+
+.timeline-panel__header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.timeline-panel__eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #2563eb;
+}
+
+.timeline-panel__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--timeline-panel-text);
+}
+
+.timeline-panel__description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--timeline-panel-muted);
+}
+
+.timeline-panel__list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.timeline-panel__item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 108px 40px minmax(0, 1fr);
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.timeline-panel--compact .timeline-panel__item {
+  grid-template-columns: 88px 34px minmax(0, 1fr);
+  gap: 12px;
+}
+
+.timeline-panel__time {
+  padding-top: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: var(--timeline-panel-muted);
+}
+
+.timeline-panel__track {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+}
+
+.timeline-panel__track::after {
+  content: '';
+  position: absolute;
+  top: 18px;
+  bottom: -26px;
+  left: calc(50% - 1px);
+  width: 2px;
+  border-radius: 999px;
+  background: var(--timeline-panel-rail);
+}
+
+.timeline-panel__item:last-child .timeline-panel__track::after {
+  display: none;
+}
+
+.timeline-panel__icon {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--timeline-panel-accent-border);
+  border-radius: 14px;
+  background: var(--timeline-panel-accent-soft);
+  color: var(--timeline-panel-accent);
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
+.timeline-panel--compact .timeline-panel__icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+}
+
+.timeline-panel__card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--timeline-panel-accent-border);
+  border-radius: 16px;
+  background: var(--timeline-panel-card-background);
+}
+
+.timeline-panel--compact .timeline-panel__card {
+  gap: 8px;
+  padding: 12px 14px;
+  border-radius: 14px;
+}
+
+.timeline-panel__row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.timeline-panel__title-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.timeline-panel__item-title {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--timeline-panel-text);
+}
+
+.timeline-panel__item-meta {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--timeline-panel-muted);
+}
+
+.timeline-panel__badge {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
+  padding: 5px 10px;
+  border: 1px solid var(--timeline-panel-accent-border);
+  border-radius: 999px;
+  background: var(--timeline-panel-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--timeline-panel-accent);
+}
+
+.timeline-panel__description-text {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #334155;
+}
+
+.timeline-panel__empty {
+  border: 1px dashed rgba(148, 163, 184, 0.32);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.78);
+}
+
+@media (max-width: 640px) {
+  .timeline-panel {
+    padding: 16px;
+    border-radius: 16px;
+  }
+
+  .timeline-panel__item,
+  .timeline-panel--compact .timeline-panel__item {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .timeline-panel__time {
+    padding-top: 0;
+    padding-left: 46px;
+  }
+
+  .timeline-panel__track {
+    position: absolute;
+    top: 26px;
+    left: 0;
+    bottom: 0;
+    width: 36px;
+    justify-content: flex-start;
+  }
+
+  .timeline-panel__track::after {
+    top: 28px;
+    bottom: -20px;
+  }
+
+  .timeline-panel__card {
+    margin-left: 46px;
+  }
+
+  .timeline-panel__row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
diff --git a/src/components/timelinePanel/TimelinePanelUI.tsx b/src/components/timelinePanel/TimelinePanelUI.tsx
new file mode 100755
index 0000000..c6fcef6
--- /dev/null
+++ b/src/components/timelinePanel/TimelinePanelUI.tsx
@@ -0,0 +1,182 @@
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  ExclamationCircleOutlined,
+  PauseCircleOutlined,
+  PlayCircleOutlined,
+} from '@ant-design/icons';
+import { Empty } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
+import './TimelinePanelUI.css';
+
+export type TimelineEventStatus = 'completed' | 'inProgress' | 'warning' | 'blocked' | 'planned';
+
+export type TimelinePanelEvent = {
+  id: string;
+  title: ReactNode;
+  timeLabel: ReactNode;
+  description?: ReactNode;
+  status?: TimelineEventStatus;
+  badgeLabel?: ReactNode;
+  meta?: ReactNode;
+  icon?: ReactNode;
+};
+
+export type TimelinePanelUIProps = {
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  events: TimelinePanelEvent[];
+  compact?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  emptyTitle?: ReactNode;
+  emptyDescription?: ReactNode;
+};
+
+type TimelineAppearance = {
+  accent: string;
+  accentSoft: string;
+  accentBorder: string;
+  cardBackground: string;
+  badgeLabel: string;
+  icon: ReactNode;
+};
+
+const appearanceMap: Record<TimelineEventStatus, TimelineAppearance> = {
+  completed: {
+    accent: '#15803d',
+    accentSoft: 'rgba(34, 197, 94, 0.14)',
+    accentBorder: 'rgba(34, 197, 94, 0.2)',
+    cardBackground: 'linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.82) 100%)',
+    badgeLabel: '완료',
+    icon: <CheckCircleOutlined />,
+  },
+  inProgress: {
+    accent: '#2563eb',
+    accentSoft: 'rgba(37, 99, 235, 0.14)',
+    accentBorder: 'rgba(59, 130, 246, 0.22)',
+    cardBackground: 'linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(219, 234, 254, 0.84) 100%)',
+    badgeLabel: '진행중',
+    icon: <PlayCircleOutlined />,
+  },
+  warning: {
+    accent: '#c2410c',
+    accentSoft: 'rgba(249, 115, 22, 0.14)',
+    accentBorder: 'rgba(249, 115, 22, 0.22)',
+    cardBackground: 'linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(254, 215, 170, 0.54) 100%)',
+    badgeLabel: '주의',
+    icon: <ExclamationCircleOutlined />,
+  },
+  blocked: {
+    accent: '#b91c1c',
+    accentSoft: 'rgba(239, 68, 68, 0.14)',
+    accentBorder: 'rgba(239, 68, 68, 0.2)',
+    cardBackground: 'linear-gradient(180deg, rgba(254, 242, 242, 0.98) 0%, rgba(254, 226, 226, 0.82) 100%)',
+    badgeLabel: '차단',
+    icon: <PauseCircleOutlined />,
+  },
+  planned: {
+    accent: '#475569',
+    accentSoft: 'rgba(148, 163, 184, 0.16)',
+    accentBorder: 'rgba(148, 163, 184, 0.22)',
+    cardBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.92) 100%)',
+    badgeLabel: '예정',
+    icon: <ClockCircleOutlined />,
+  },
+};
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(' ');
+}
+
+function buildItemStyle(appearance: TimelineAppearance): CSSProperties {
+  return {
+    '--timeline-panel-accent': appearance.accent,
+    '--timeline-panel-accent-soft': appearance.accentSoft,
+    '--timeline-panel-accent-border': appearance.accentBorder,
+    '--timeline-panel-card-background': appearance.cardBackground,
+  } as CSSProperties;
+}
+
+export function TimelinePanelUI({
+  eyebrow = 'Timeline Panel',
+  title = '운영 타임라인',
+  description,
+  events,
+  compact = false,
+  className,
+  style,
+  emptyTitle = '표시할 이벤트가 없습니다.',
+  emptyDescription = '조건에 맞는 이벤트가 쌓이면 이 영역에 시간순으로 표시됩니다.',
+}: TimelinePanelUIProps) {
+  return (
+    <section
+      className={joinClassNames(
+        'timeline-panel',
+        compact && 'timeline-panel--compact',
+        className,
+      )}
+      style={style}
+    >
+      {(eyebrow || title || description) ? (
+        <header className="timeline-panel__header">
+          {eyebrow ? <span className="timeline-panel__eyebrow">{eyebrow}</span> : null}
+          {title ? <h3 className="timeline-panel__title">{title}</h3> : null}
+          {description ? <p className="timeline-panel__description">{description}</p> : null}
+        </header>
+      ) : null}
+
+      {events.length > 0 ? (
+        <div className="timeline-panel__list" role="list" aria-label="timeline-events">
+          {events.map((event) => {
+            const appearance = appearanceMap[event.status ?? 'planned'];
+            const badgeLabel = event.badgeLabel ?? appearance.badgeLabel;
+            const icon = event.icon ?? appearance.icon;
+
+            return (
+              <article
+                key={event.id}
+                className="timeline-panel__item"
+                style={buildItemStyle(appearance)}
+                role="listitem"
+              >
+                <div className="timeline-panel__time">{event.timeLabel}</div>
+                <div className="timeline-panel__track" aria-hidden="true">
+                  <span className="timeline-panel__icon">{icon}</span>
+                </div>
+                <div className="timeline-panel__card">
+                  <div className="timeline-panel__row">
+                    <div className="timeline-panel__title-wrap">
+                      <div className="timeline-panel__item-title">{event.title}</div>
+                      {event.meta ? <div className="timeline-panel__item-meta">{event.meta}</div> : null}
+                    </div>
+                    <span className="timeline-panel__badge">
+                      {icon}
+                      {badgeLabel}
+                    </span>
+                  </div>
+                  {event.description ? (
+                    <p className="timeline-panel__description-text">{event.description}</p>
+                  ) : null}
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="timeline-panel__empty">
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description={
+              <div>
+                <strong>{emptyTitle}</strong>
+                <div>{emptyDescription}</div>
+              </div>
+            }
+          />
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/components/timelinePanel/index.ts b/src/components/timelinePanel/index.ts
new file mode 100755
index 0000000..e1e43b3
--- /dev/null
+++ b/src/components/timelinePanel/index.ts
@@ -0,0 +1 @@
+export * from './TimelinePanelUI';
diff --git a/src/components/timelinePanel/samples/BaseSample.tsx b/src/components/timelinePanel/samples/BaseSample.tsx
new file mode 100755
index 0000000..5ee9e3b
--- /dev/null
+++ b/src/components/timelinePanel/samples/BaseSample.tsx
@@ -0,0 +1,107 @@
+import { Card, Flex, Typography } from 'antd';
+import type { SampleMeta } from '../../../widgets/core';
+import { TimelinePanelUI, type TimelinePanelEvent } from '../TimelinePanelUI';
+
+const { Text } = Typography;
+
+const timelineEvents: TimelinePanelEvent[] = [
+  {
+    id: 'requested',
+    timeLabel: '09:10',
+    title: '추천 컴포넌트 요청 접수',
+    meta: 'Plan Board · #new-comp-timeline-panel',
+    description: 'release 기준 자동화 작업이 접수되어 신규 패널 스펙과 샘플 범위를 정리합니다.',
+    status: 'completed',
+  },
+  {
+    id: 'design',
+    timeLabel: '10:00',
+    title: '레이아웃 시안 확정',
+    meta: 'UI Review · 모바일 우선 점검',
+    description: '상태 배지와 아이콘, 컴팩트 변형, 빈 상태 배치를 동일한 규칙으로 묶습니다.',
+    status: 'inProgress',
+  },
+  {
+    id: 'mobile',
+    timeLabel: '11:20',
+    title: '모바일 세로 레이아웃 검토',
+    meta: 'Viewport · 360px',
+    description: '좁은 폭에서는 시간 레이블과 카드가 세로로 자연스럽게 재배치되도록 확인합니다.',
+    status: 'warning',
+    badgeLabel: '모바일 점검',
+  },
+  {
+    id: 'release',
+    timeLabel: '13:00',
+    title: 'release 반영 대기',
+    meta: 'Ops Queue · 검증 전',
+    description: '샘플과 스타일 정리가 끝나면 release 검증 큐로 이동합니다.',
+    status: 'planned',
+  },
+];
+
+export const sampleMeta: SampleMeta = {
+  id: 'timeline-panel-base',
+  componentId: 'timeline-panel',
+  title: 'Timeline Panel',
+  description: '시간순 이벤트 목록을 상태 배지와 함께 보여주는 패널형 타임라인 컴포넌트입니다.',
+  category: 'Display',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 64,
+  features: ['docs', 'component-sample'],
+};
+
+export function Sample() {
+  return (
+    <Flex vertical gap={16}>
+      <Card size="small" title="기본 타임라인">
+        <TimelinePanelUI
+          eyebrow="Release Timeline"
+          title="추천 컴포넌트 자동화 진행"
+          description="시간순 이벤트, 상태 배지, 설명 텍스트를 한 패널에 모아 운영 흐름을 빠르게 읽게 합니다."
+          events={timelineEvents}
+        />
+      </Card>
+
+      <Flex gap={16} wrap="wrap" align="stretch">
+        <Card size="small" title="Compact 변형" style={{ flex: '1 1 320px', minWidth: 280 }}>
+          <TimelinePanelUI
+            eyebrow="Compact"
+            title="간결한 이력 보기"
+            description="보조 설명과 카드 여백을 줄여 대시보드 사이드 패널에도 맞춥니다."
+            events={timelineEvents.slice(0, 3)}
+            compact
+          />
+        </Card>
+
+        <Card size="small" title="Empty 상태" style={{ flex: '1 1 320px', minWidth: 280 }}>
+          <TimelinePanelUI
+            eyebrow="Empty State"
+            title="오늘 이벤트 없음"
+            description="필터 결과가 없을 때도 패널 구조를 유지한 채 안내 메시지를 보여줍니다."
+            events={[]}
+            emptyTitle="기록된 이벤트가 없습니다."
+            emptyDescription="새 작업이 생성되면 시간순 항목이 자동으로 채워집니다."
+          />
+        </Card>
+      </Flex>
+
+      <Card size="small" title="모바일 세로 레이아웃 샘플">
+        <Flex vertical gap={10}>
+          <Text type="secondary">
+            아래 패널은 모바일 폭을 가정한 컨테이너에 배치한 예시입니다. 좁은 화면에서는 시간축이 좌측에 고정되고 콘텐츠 카드가 세로로 정렬됩니다.
+          </Text>
+          <div style={{ width: '100%', maxWidth: 360 }}>
+            <TimelinePanelUI
+              eyebrow="Mobile"
+              title="세로 레이아웃"
+              description="모바일에서 읽기 순서가 끊기지 않도록 자동 스택합니다."
+              events={timelineEvents}
+            />
+          </div>
+        </Flex>
+      </Card>
+    </Flex>
+  );
+}
diff --git a/src/components/window/WindowUI.css b/src/components/window/WindowUI.css
new file mode 100755
index 0000000..48860d1
--- /dev/null
+++ b/src/components/window/WindowUI.css
@@ -0,0 +1,443 @@
+.window-ui {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(15, 23, 42, 0.14);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow:
+    0 24px 60px rgba(15, 23, 42, 0.16),
+    0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.window-ui--maximized {
+  border-radius: 22px;
+}
+
+.window-ui--minimized {
+  overflow: visible;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.window-ui--dragging,
+.window-ui--resizing {
+  cursor: grabbing;
+}
+
+.window-ui__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 10px 13px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 245, 249, 0.96) 100%);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.window-ui__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.window-ui__title-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.window-ui__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.window-ui__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(71, 85, 105, 0.82);
+  font-size: 12px;
+}
+
+.window-ui__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.window-ui__controls--minimized {
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.window-ui__control.ant-btn {
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 999px;
+  touch-action: manipulation;
+  font-size: 11px;
+}
+
+.window-ui__control--layout.ant-btn {
+  color: #0f766e;
+  background: rgba(20, 184, 166, 0.14);
+  border-color: rgba(13, 148, 136, 0.16);
+}
+
+.window-ui__control--minimize.ant-btn {
+  color: #c77d15;
+  background: rgba(251, 191, 36, 0.18);
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+.window-ui__control--close.ant-btn {
+  color: #c2410c;
+  background: rgba(251, 146, 60, 0.16);
+  border-color: rgba(249, 115, 22, 0.18);
+}
+
+.window-ui__control--maximize.ant-btn {
+  color: #165dff;
+  background: rgba(22, 93, 255, 0.12);
+  border-color: rgba(22, 93, 255, 0.16);
+}
+
+.window-ui__body {
+  flex: 1;
+  min-height: 0;
+  padding: 18px;
+  overflow: auto;
+  touch-action: auto;
+}
+
+.window-ui__minimized-shell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.window-ui__minimized-bubble {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.96), rgba(219, 234, 254, 0.94) 56%, rgba(59, 130, 246, 0.84));
+  box-shadow:
+    0 18px 32px rgba(37, 99, 235, 0.26),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
+  color: #0f172a;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.window-ui__minimized-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow:
+    inset 0 0 0 1px rgba(147, 197, 253, 0.7),
+    0 8px 16px rgba(15, 23, 42, 0.12);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.window-ui__minimized-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 208px;
+  margin-top: 10px;
+  padding: 10px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow:
+    0 18px 44px rgba(15, 23, 42, 0.14),
+    0 6px 18px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(14px);
+}
+
+.window-ui__minimized-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.window-ui__minimized-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.window-ui__resize-handle {
+  position: absolute;
+  z-index: 2;
+  touch-action: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.window-ui__resize-handle--n,
+.window-ui__resize-handle--s {
+  left: 8px;
+  right: 8px;
+  height: 28px;
+}
+
+.window-ui__resize-handle--n {
+  top: -14px;
+  cursor: ns-resize;
+}
+
+.window-ui__resize-handle--s {
+  bottom: -14px;
+  cursor: ns-resize;
+}
+
+.window-ui__resize-handle--e,
+.window-ui__resize-handle--w {
+  top: 8px;
+  bottom: 8px;
+  width: 28px;
+}
+
+.window-ui__resize-handle--e {
+  right: -14px;
+  cursor: ew-resize;
+}
+
+.window-ui__resize-handle--w {
+  left: -14px;
+  cursor: ew-resize;
+}
+
+.window-ui__resize-handle--ne,
+.window-ui__resize-handle--nw,
+.window-ui__resize-handle--se,
+.window-ui__resize-handle--sw {
+  width: 34px;
+  height: 34px;
+}
+
+.window-ui__resize-handle--ne {
+  top: -14px;
+  right: -14px;
+  cursor: nesw-resize;
+}
+
+.window-ui__resize-handle--nw {
+  top: -14px;
+  left: -14px;
+  cursor: nwse-resize;
+}
+
+.window-ui__resize-handle--se {
+  right: -14px;
+  bottom: -14px;
+  cursor: nwse-resize;
+}
+
+.window-ui__resize-handle--sw {
+  left: -14px;
+  bottom: -14px;
+  cursor: nesw-resize;
+}
+
+.window-ui__resize-grip {
+  display: none;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.14);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
+  pointer-events: none;
+}
+
+.window-ui-sample {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.window-ui-sample__actions {
+  align-items: center;
+}
+
+.window-ui-sample__stage {
+  position: relative;
+  min-height: 560px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top left, rgba(22, 93, 255, 0.12), transparent 24%),
+    linear-gradient(180deg, #eff6ff 0%, #f8fafc 48%, #ffffff 100%);
+}
+
+.window-ui-sample__desktop {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
+  background-size: 32px 32px;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.window-ui-sample__footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: rgba(71, 85, 105, 0.84);
+  font-size: 12px;
+}
+
+@media (width <= 768px) {
+  .window-ui {
+    border-radius: 20px;
+  }
+
+  .window-ui--mobile {
+    max-width: 100%;
+  }
+
+  .window-ui--mobile .window-ui__header {
+    min-height: 54px;
+    padding: 12px 14px;
+  }
+
+  .window-ui--mobile .window-ui__body {
+    padding: 16px;
+  }
+
+  .window-ui--mobile .window-ui__control.ant-btn {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle {
+    z-index: 3;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--n,
+  .window-ui--mobile .window-ui__resize-handle--s {
+    left: 14px;
+    right: 14px;
+    height: 40px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--n {
+    top: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--s {
+    bottom: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--e,
+  .window-ui--mobile .window-ui__resize-handle--w {
+    top: 14px;
+    bottom: 14px;
+    width: 40px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--e {
+    right: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--w {
+    left: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--ne,
+  .window-ui--mobile .window-ui__resize-handle--nw,
+  .window-ui--mobile .window-ui__resize-handle--se,
+  .window-ui--mobile .window-ui__resize-handle--sw {
+    width: 48px;
+    height: 48px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--ne {
+    top: -20px;
+    right: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--nw {
+    top: -20px;
+    left: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--se {
+    right: -20px;
+    bottom: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--sw {
+    left: -20px;
+    bottom: -20px;
+  }
+
+  .window-ui--mobile .window-ui__resize-grip {
+    display: block;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--n .window-ui__resize-grip,
+  .window-ui--mobile .window-ui__resize-handle--s .window-ui__resize-grip {
+    width: 56px;
+    height: 6px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--e .window-ui__resize-grip,
+  .window-ui--mobile .window-ui__resize-handle--w .window-ui__resize-grip {
+    width: 6px;
+    height: 56px;
+  }
+
+  .window-ui--mobile .window-ui__resize-handle--ne .window-ui__resize-grip,
+  .window-ui--mobile .window-ui__resize-handle--nw .window-ui__resize-grip,
+  .window-ui--mobile .window-ui__resize-handle--se .window-ui__resize-grip,
+  .window-ui--mobile .window-ui__resize-handle--sw .window-ui__resize-grip {
+    width: 18px;
+    height: 18px;
+  }
+
+  .window-ui-sample__stage {
+    min-height: 620px;
+    border-radius: 24px;
+  }
+
+  .window-ui-sample__footer {
+    flex-direction: column;
+  }
+}
diff --git a/src/components/window/WindowUI.tsx b/src/components/window/WindowUI.tsx
new file mode 100755
index 0000000..09d079b
--- /dev/null
+++ b/src/components/window/WindowUI.tsx
@@ -0,0 +1,648 @@
+
+import {
+  AppstoreOutlined,
+  CloseOutlined,
+  EllipsisOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+  MinusOutlined,
+} from '@ant-design/icons';
+import { Button, Typography } from 'antd';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { WindowFrame, WindowUIProps } from './types';
+import './WindowUI.css';
+
+const { Text } = Typography;
+
+const HEADER_HEIGHT = 48;
+const MOBILE_BREAKPOINT = 768;
+const MINIMIZED_SIZE = 52;
+const DRAG_CLICK_THRESHOLD = 4;
+const DEFAULT_FRAME: WindowFrame = {
+  x: 32,
+  y: 32,
+  width: 520,
+  height: 340,
+};
+
+type DragState = {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  frame: WindowFrame;
+  moved: boolean;
+};
+
+type ResizeDirection = 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+
+type ResizeState = DragState & {
+  direction: ResizeDirection;
+  moved: boolean;
+};
+
+type ResizeTapRecord = {
+  direction: ResizeDirection;
+  at: number;
+  x: number;
+  y: number;
+};
+
+const DOUBLE_TAP_DELAY = 320;
+const DOUBLE_TAP_MOVE_TOLERANCE = 18;
+const RESIZE_MOVE_THRESHOLD = 4;
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function mergeFrame(defaultFrame?: Partial<WindowFrame>): WindowFrame {
+  return {
+    x: defaultFrame?.x ?? DEFAULT_FRAME.x,
+    y: defaultFrame?.y ?? DEFAULT_FRAME.y,
+    width: defaultFrame?.width ?? DEFAULT_FRAME.width,
+    height: defaultFrame?.height ?? DEFAULT_FRAME.height,
+  };
+}
+
+function getParentRect(element: HTMLDivElement | null) {
+  return element?.parentElement?.getBoundingClientRect() ?? null;
+}
+
+function getVisibleParentBounds(element: HTMLDivElement | null) {
+  const parentRect = getParentRect(element);
+
+  if (!parentRect) {
+    return null;
+  }
+
+  if (typeof window === 'undefined') {
+    return {
+      x: 0,
+      y: 0,
+      width: parentRect.width,
+      height: parentRect.height,
+    };
+  }
+
+  const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+  const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+  const visibleLeft = Math.max(parentRect.left, 0);
+  const visibleTop = Math.max(parentRect.top, 0);
+  const visibleRight = Math.min(parentRect.right, viewportWidth);
+  const visibleBottom = Math.min(parentRect.bottom, viewportHeight);
+  const width = Math.max(0, visibleRight - visibleLeft);
+  const height = Math.max(0, visibleBottom - visibleTop);
+
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+
+  return {
+    x: visibleLeft - parentRect.left,
+    y: visibleTop - parentRect.top,
+    width,
+    height,
+  };
+}
+
+export function WindowUI({
+  title,
+  subtitle,
+  children,
+  bodyClassName,
+  defaultFrame,
+  frame: controlledFrame,
+  onFrameChange,
+  onOpenLayoutControls,
+  zIndex,
+  onActivate,
+  minWidth = 360,
+  minHeight = 220,
+  className,
+  onClose,
+}: WindowUIProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [frame, setFrame] = useState<WindowFrame>(() => mergeFrame(defaultFrame));
+  const [restoreFrame, setRestoreFrame] = useState<WindowFrame | null>(null);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [isMinimizeMenuOpen, setIsMinimizeMenuOpen] = useState(false);
+  const dragStateRef = useRef<DragState | null>(null);
+  const resizeStateRef = useRef<ResizeState | null>(null);
+  const resizeTapRef = useRef<ResizeTapRecord | null>(null);
+  const frameRef = useRef(frame);
+
+  useEffect(() => {
+    frameRef.current = frame;
+  }, [frame]);
+
+  useEffect(() => {
+    if (controlledFrame) {
+      setFrame(controlledFrame);
+    }
+  }, [controlledFrame]);
+
+  const updateFrame = (nextFrame: WindowFrame | ((previousFrame: WindowFrame) => WindowFrame)) => {
+    setFrame((previousFrame) => {
+      const resolvedFrame =
+        typeof nextFrame === 'function' ? nextFrame(previousFrame) : nextFrame;
+
+      onFrameChange?.(resolvedFrame);
+      return resolvedFrame;
+    });
+  };
+
+  useEffect(() => {
+    const root = rootRef.current;
+    const parentElement = root?.parentElement;
+
+    if (!parentElement) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      const parentRect = getParentRect(rootRef.current);
+
+      if (!parentRect) {
+        return;
+      }
+
+      updateFrame((previousFrame) => {
+        setIsMobileViewport(parentRect.width <= MOBILE_BREAKPOINT);
+
+        if (isMaximized) {
+          return {
+            x: 0,
+            y: 0,
+            width: parentRect.width,
+            height: parentRect.height,
+          };
+        }
+
+        const nextWidth = Math.min(previousFrame.width, parentRect.width);
+        const nextHeight = Math.min(previousFrame.height, parentRect.height);
+
+        return {
+          ...previousFrame,
+          width: nextWidth,
+          height: nextHeight,
+          x: clamp(previousFrame.x, 0, Math.max(0, parentRect.width - nextWidth)),
+          y: clamp(
+            previousFrame.y,
+            0,
+            Math.max(0, parentRect.height - (isMinimized ? HEADER_HEIGHT : nextHeight)),
+          ),
+        };
+      });
+    });
+
+    resizeObserver.observe(parentElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isMaximized, isMinimized]);
+
+  useEffect(() => {
+    const parentRect = getParentRect(rootRef.current);
+
+    if (!parentRect) {
+      return;
+    }
+
+    const mobile = parentRect.width <= MOBILE_BREAKPOINT;
+    setIsMobileViewport(mobile);
+
+    updateFrame((previousFrame) => ({
+      ...previousFrame,
+      width: mobile ? Math.min(parentRect.width, previousFrame.width) : previousFrame.width,
+      x: mobile ? clamp(previousFrame.x, 0, Math.max(0, parentRect.width - previousFrame.width)) : previousFrame.x,
+      y: clamp(
+        previousFrame.y,
+        0,
+        Math.max(0, parentRect.height - (isMinimized ? HEADER_HEIGHT : previousFrame.height)),
+      ),
+    }));
+  }, [isMinimized]);
+
+  const toggleMaximize = () => {
+    const parentRect = getParentRect(rootRef.current);
+
+    if (!parentRect) {
+      return;
+    }
+
+    if (isMaximized) {
+      updateFrame(restoreFrame ?? mergeFrame(defaultFrame));
+      setIsMaximized(false);
+      return;
+    }
+
+    setRestoreFrame(frameRef.current);
+    setIsMinimized(false);
+    setIsMaximized(true);
+    updateFrame({
+      x: 0,
+      y: 0,
+      width: parentRect.width,
+      height: parentRect.height,
+    });
+  };
+
+  const fillFrameToDirection = (direction: ResizeDirection) => {
+    const parentRect = getParentRect(rootRef.current);
+    const visibleBounds = getVisibleParentBounds(rootRef.current);
+
+    if (!parentRect || !visibleBounds) {
+      return;
+    }
+
+    const currentFrame = frameRef.current;
+    const visibleRight = visibleBounds.x + visibleBounds.width;
+    const visibleBottom = visibleBounds.y + visibleBounds.height;
+    let nextX = currentFrame.x;
+    let nextY = currentFrame.y;
+    let nextWidth = currentFrame.width;
+    let nextHeight = currentFrame.height;
+
+    if (direction.includes('w')) {
+      nextWidth += nextX - visibleBounds.x;
+      nextX = visibleBounds.x;
+    }
+
+    if (direction.includes('n')) {
+      nextHeight += nextY - visibleBounds.y;
+      nextY = visibleBounds.y;
+    }
+
+    if (direction.includes('e')) {
+      nextWidth = visibleRight - nextX;
+    }
+
+    if (direction.includes('s')) {
+      nextHeight = visibleBottom - nextY;
+    }
+
+    updateFrame({
+      x: clamp(nextX, 0, Math.max(0, parentRect.width - minWidth)),
+      y: clamp(nextY, 0, Math.max(0, parentRect.height - minHeight)),
+      width: clamp(nextWidth, minWidth, parentRect.width - nextX),
+      height: clamp(nextHeight, minHeight, parentRect.height - nextY),
+    });
+  };
+
+  const onHeaderPointerDown = (event: ReactPointerEvent<HTMLElement>) => {
+    onActivate?.();
+
+    if (isMaximized) {
+      return;
+    }
+
+    const root = rootRef.current;
+
+    if (!root) {
+      return;
+    }
+
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      frame: frameRef.current,
+      moved: false,
+    };
+
+    setIsMinimizeMenuOpen(false);
+    setIsDragging(true);
+    root.setPointerCapture(event.pointerId);
+  };
+
+  const onResizePointerDown =
+    (direction: ResizeDirection) => (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (isMaximized || isMinimized) {
+        return;
+      }
+
+      const root = rootRef.current;
+
+      if (!root) {
+        return;
+      }
+
+      event.stopPropagation();
+      onActivate?.();
+
+      resizeStateRef.current = {
+        direction,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        frame: frameRef.current,
+        moved: false,
+      };
+
+      setIsResizing(true);
+      root.setPointerCapture(event.pointerId);
+    };
+
+  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const parentRect = getParentRect(rootRef.current);
+
+    if (!parentRect) {
+      return;
+    }
+
+    if (dragStateRef.current && dragStateRef.current.pointerId === event.pointerId) {
+      const deltaX = event.clientX - dragStateRef.current.startX;
+      const deltaY = event.clientY - dragStateRef.current.startY;
+      const nextWidth = isMinimized ? MINIMIZED_SIZE : frameRef.current.width;
+      const nextHeight = isMinimized ? MINIMIZED_SIZE : frameRef.current.height;
+
+      if (
+        !dragStateRef.current.moved &&
+        (Math.abs(deltaX) > DRAG_CLICK_THRESHOLD || Math.abs(deltaY) > DRAG_CLICK_THRESHOLD)
+      ) {
+        dragStateRef.current.moved = true;
+      }
+
+      updateFrame({
+        ...frameRef.current,
+        x: isMobileViewport
+          ? 0
+          : clamp(dragStateRef.current.frame.x + deltaX, 0, Math.max(0, parentRect.width - nextWidth)),
+        y: clamp(
+          dragStateRef.current.frame.y + deltaY,
+          0,
+          Math.max(0, parentRect.height - nextHeight),
+        ),
+      });
+    }
+
+    if (resizeStateRef.current && resizeStateRef.current.pointerId === event.pointerId) {
+      const { direction, frame: initialFrame, startX, startY } = resizeStateRef.current;
+      const deltaX = event.clientX - startX;
+      const deltaY = event.clientY - startY;
+
+      if (
+        !resizeStateRef.current.moved &&
+        (Math.abs(deltaX) > RESIZE_MOVE_THRESHOLD || Math.abs(deltaY) > RESIZE_MOVE_THRESHOLD)
+      ) {
+        resizeStateRef.current.moved = true;
+      }
+
+      let nextX = initialFrame.x;
+      let nextY = initialFrame.y;
+      let nextWidth = initialFrame.width;
+      let nextHeight = initialFrame.height;
+
+      if (direction.includes('e')) {
+        nextWidth = clamp(initialFrame.width + deltaX, minWidth, parentRect.width - initialFrame.x);
+      }
+
+      if (direction.includes('s')) {
+        nextHeight = clamp(
+          initialFrame.height + deltaY,
+          minHeight,
+          parentRect.height - initialFrame.y,
+        );
+      }
+
+      if (direction.includes('w')) {
+        const maxX = initialFrame.x + initialFrame.width - minWidth;
+        nextX = clamp(initialFrame.x + deltaX, 0, maxX);
+        nextWidth = initialFrame.width - (nextX - initialFrame.x);
+      }
+
+      if (direction.includes('n')) {
+        const maxY = initialFrame.y + initialFrame.height - minHeight;
+        nextY = clamp(initialFrame.y + deltaY, 0, maxY);
+        nextHeight = initialFrame.height - (nextY - initialFrame.y);
+      }
+
+      nextWidth = Math.min(nextWidth, parentRect.width - nextX);
+      nextHeight = Math.min(nextHeight, parentRect.height - nextY);
+
+      updateFrame({
+        x: nextX,
+        y: nextY,
+        width: nextWidth,
+        height: nextHeight,
+      });
+    }
+  };
+
+  const onPointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (dragStateRef.current?.pointerId === event.pointerId) {
+      const wasMinimizedDrag = isMinimized && !dragStateRef.current.moved;
+      dragStateRef.current = null;
+      setIsDragging(false);
+
+      if (wasMinimizedDrag) {
+        setIsMinimizeMenuOpen((previous) => !previous);
+      }
+    }
+
+    if (resizeStateRef.current?.pointerId === event.pointerId) {
+      const resizeState = resizeStateRef.current;
+      resizeStateRef.current = null;
+      setIsResizing(false);
+
+      if (!resizeState.moved) {
+        const now = Date.now();
+        const previousTap = resizeTapRef.current;
+        const isDoubleTap =
+          previousTap &&
+          previousTap.direction === resizeState.direction &&
+          now - previousTap.at <= DOUBLE_TAP_DELAY &&
+          Math.abs(previousTap.x - event.clientX) <= DOUBLE_TAP_MOVE_TOLERANCE &&
+          Math.abs(previousTap.y - event.clientY) <= DOUBLE_TAP_MOVE_TOLERANCE;
+
+        if (isDoubleTap) {
+          resizeTapRef.current = null;
+          fillFrameToDirection(resizeState.direction);
+        } else {
+          resizeTapRef.current = {
+            direction: resizeState.direction,
+            at: now,
+            x: event.clientX,
+            y: event.clientY,
+          };
+        }
+      }
+    }
+
+    rootRef.current?.releasePointerCapture(event.pointerId);
+  };
+
+  const renderControlButtons = () => (
+    <>
+      {onOpenLayoutControls ? (
+        <Button
+          type="text"
+          aria-label="윈도우 배치 컨트롤"
+          className="window-ui__control window-ui__control--layout"
+          icon={<AppstoreOutlined />}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={onOpenLayoutControls}
+        />
+      ) : null}
+      {onClose ? (
+        <Button
+          type="text"
+          aria-label="창 닫기"
+          className="window-ui__control window-ui__control--close"
+          icon={<CloseOutlined />}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={onClose}
+        />
+      ) : null}
+      <Button
+        type="text"
+        aria-label={isMinimized ? '창 복원' : '창 최소화'}
+        className="window-ui__control window-ui__control--minimize"
+        icon={isMinimized ? <EllipsisOutlined /> : <MinusOutlined />}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={() => {
+          setIsMinimizeMenuOpen(false);
+          setIsMinimized((previous) => !previous);
+        }}
+      />
+      <Button
+        type="text"
+        aria-label={isMaximized ? '창 복원' : '창 최대화'}
+        className="window-ui__control window-ui__control--maximize"
+        icon={isMaximized ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={toggleMaximize}
+      />
+    </>
+  );
+
+  const minimizedLabel =
+    typeof title === 'string' && title.trim().length > 0 ? title.trim().slice(0, 1).toUpperCase() : 'W';
+
+  const minimizedTitle = typeof title === 'string' ? title : minimizedLabel;
+
+  return (
+    <div
+      ref={rootRef}
+      className={[
+        'window-ui',
+        isMaximized ? 'window-ui--maximized' : '',
+        isMobileViewport ? 'window-ui--mobile' : '',
+        isMinimized ? 'window-ui--minimized' : '',
+        isDragging ? 'window-ui--dragging' : '',
+        isResizing ? 'window-ui--resizing' : '',
+        className ?? '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={{
+        left: frame.x,
+        top: frame.y,
+        width: isMinimized
+          ? MINIMIZED_SIZE
+          : isMobileViewport && !isMaximized
+            ? Math.min(frame.width, getParentRect(rootRef.current)?.width ?? frame.width)
+            : frame.width,
+        height: isMinimized ? MINIMIZED_SIZE : frame.height,
+        zIndex,
+      }}
+      onPointerDown={() => {
+        onActivate?.();
+      }}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+    >
+      {isMinimized ? (
+        <div className="window-ui__minimized-shell">
+          <button
+            type="button"
+            className="window-ui__minimized-bubble"
+            aria-label={`${title} 최소화 아이콘`}
+            onPointerDown={(event) => {
+              event.stopPropagation();
+              onHeaderPointerDown(event);
+            }}
+            onDoubleClick={(event) => {
+              event.stopPropagation();
+              setIsMinimizeMenuOpen(false);
+              setIsMinimized(false);
+            }}
+          >
+            <span className="window-ui__minimized-label">{minimizedLabel}</span>
+          </button>
+
+          {isMinimizeMenuOpen ? (
+            <div
+              className="window-ui__minimized-menu"
+              onPointerDown={(event) => {
+                event.stopPropagation();
+              }}
+            >
+              <div className="window-ui__minimized-header">
+                <div className="window-ui__minimized-meta">
+                  <Text strong className="window-ui__title-text">
+                    {minimizedTitle}
+                  </Text>
+                  {subtitle ? <div className="window-ui__subtitle">{subtitle}</div> : null}
+                </div>
+                <div className="window-ui__controls window-ui__controls--minimized">
+                  {renderControlButtons()}
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      ) : (
+        <>
+          <div
+            className="window-ui__header"
+            onPointerDown={onHeaderPointerDown}
+            onDoubleClick={toggleMaximize}
+          >
+            <div className="window-ui__title">
+              <div className="window-ui__title-copy">
+                <Text strong className="window-ui__title-text">
+                  {title}
+                </Text>
+                {subtitle ? <div className="window-ui__subtitle">{subtitle}</div> : null}
+              </div>
+            </div>
+
+            <div className="window-ui__controls">{renderControlButtons()}</div>
+          </div>
+
+          <div className={['window-ui__body', bodyClassName ?? ''].filter(Boolean).join(' ')}>
+            {children}
+          </div>
+        </>
+      )}
+
+      {isMaximized || isMinimized
+        ? null
+        : ['n', 'e', 's', 'w', 'ne', 'nw', 'se', 'sw'].map((direction) => (
+            <div
+              key={direction}
+              className={`window-ui__resize-handle window-ui__resize-handle--${direction}`}
+              onPointerDown={onResizePointerDown(direction as ResizeDirection)}
+            >
+              <div className="window-ui__resize-grip" aria-hidden="true" />
+            </div>
+          ))}
+    </div>
+  );
+}
diff --git a/src/components/window/index.ts b/src/components/window/index.ts
new file mode 100755
index 0000000..e63aac8
--- /dev/null
+++ b/src/components/window/index.ts
@@ -0,0 +1,2 @@
+export { WindowUI } from './WindowUI';
+export type { WindowFrame, WindowUIProps } from './types';
diff --git a/src/components/window/samples/BaseSample.tsx b/src/components/window/samples/BaseSample.tsx
new file mode 100755
index 0000000..e6ba0d5
--- /dev/null
+++ b/src/components/window/samples/BaseSample.tsx
@@ -0,0 +1,32 @@
+import type { SampleMeta } from '../../../widgets/core';
+import { WindowUI } from '../WindowUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'window-ui-base',
+  componentId: 'window-ui',
+  title: 'Window UI',
+  description: '모달 스타일의 헤더 작업줄과 콘텐츠 영역을 가지며, 부모 영역 안에서 드래그와 리사이즈가 가능한 윈도우 컴포넌트입니다.',
+  category: 'Overlay',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 60,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <div style={{ position: 'relative', height: 420, overflow: 'hidden', borderRadius: 16 }}>
+      <WindowUI
+        title="Inventory Board"
+        subtitle="입고 / 피킹 / 출고 현황"
+        defaultFrame={{ x: 24, y: 24, width: 360, height: 240 }}
+      >
+        <div style={{ display: 'grid', gap: 8 }}>
+          <div>입고 검수 대기 12건</div>
+          <div>피킹 완료 대기 7건</div>
+          <div>출고 마감 임박 3건</div>
+        </div>
+      </WindowUI>
+    </div>
+  );
+}
diff --git a/src/components/window/samples/Sample.tsx b/src/components/window/samples/Sample.tsx
new file mode 100755
index 0000000..c7a128c
--- /dev/null
+++ b/src/components/window/samples/Sample.tsx
@@ -0,0 +1,357 @@
+import {
+  AppstoreOutlined,
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  BorderVerticleOutlined,
+  ColumnWidthOutlined,
+  SplitCellsOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Flex, Tag, Typography } from 'antd';
+import { useMemo, useRef, useState } from 'react';
+import type { SampleMeta } from '../../../widgets/core';
+import { WindowUI } from '../WindowUI';
+import type { WindowFrame } from '../types';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'window-ui',
+  componentId: 'window-ui',
+  title: 'Window UI',
+  description:
+    '모달 스타일의 헤더 작업줄과 콘텐츠 영역을 가지며, 부모 영역 안에서 드래그/리사이즈/최소화/최대화가 가능한 윈도우 컴포넌트입니다.',
+  category: 'Overlay',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 60,
+  features: ['docs'],
+};
+
+type DemoWindow = {
+  id: string;
+  title: string;
+  subtitle: string;
+  tone: string;
+  zIndex: number;
+  frame: WindowFrame;
+  tasks: string[];
+};
+
+type StageSize = {
+  width: number;
+  height: number;
+};
+
+function createDefaultWindows(): DemoWindow[] {
+  return [
+    {
+      id: 'inventory-board',
+      title: 'Inventory Board',
+      subtitle: '입고 / 피킹 / 출고 현황',
+      tone: 'blue',
+      zIndex: 1,
+      frame: { x: 24, y: 24, width: 420, height: 300 },
+      tasks: ['입고 검수 대기 12건', '피킹 완료 대기 7건', '출고 마감 임박 3건'],
+    },
+    {
+      id: 'dispatch-board',
+      title: 'Dispatch Planner',
+      subtitle: '배차 / 배송 계획',
+      tone: 'green',
+      zIndex: 2,
+      frame: { x: 280, y: 96, width: 420, height: 280 },
+      tasks: ['배차 미확정 5건', '긴급 배송 2건', '도착 지연 4건'],
+    },
+    {
+      id: 'monitor-board',
+      title: 'Ops Monitor',
+      subtitle: '실시간 경보 / 작업 로그',
+      tone: 'gold',
+      zIndex: 3,
+      frame: { x: 140, y: 250, width: 420, height: 260 },
+      tasks: ['예외 이벤트 3건', '승인 대기 8건', '작업 메모 14건'],
+    },
+  ];
+}
+
+function arrangeHorizontally(previous: DemoWindow[], stageSize: StageSize): DemoWindow[] {
+  const width = stageSize.width / previous.length;
+  const height = stageSize.height;
+
+  return previous.map((windowItem, index) => ({
+    ...windowItem,
+    frame: {
+      x: index * width,
+      y: 0,
+      width,
+      height,
+    },
+  }));
+}
+
+function arrangeVertically(previous: DemoWindow[], stageSize: StageSize): DemoWindow[] {
+  const width = stageSize.width;
+  const height = stageSize.height / previous.length;
+
+  return previous.map((windowItem, index) => ({
+    ...windowItem,
+    frame: {
+      x: 0,
+      y: index * height,
+      width,
+      height,
+    },
+  }));
+}
+
+function arrangeGrid(previous: DemoWindow[], stageSize: StageSize): DemoWindow[] {
+  const columns = 2;
+  const rows = Math.ceil(previous.length / columns);
+  const width = stageSize.width / columns;
+  const height = stageSize.height / rows;
+
+  return previous.map((windowItem, index) => {
+    const column = index % columns;
+    const row = Math.floor(index / columns);
+
+    return {
+      ...windowItem,
+      frame: {
+        x: column * width,
+        y: row * height,
+        width,
+        height,
+      },
+    };
+  });
+}
+
+function arrangeRecommended(previous: DemoWindow[], stageSize: StageSize): DemoWindow[] {
+  const primaryWidth = stageSize.width * 0.62;
+  const secondaryWidth = stageSize.width - primaryWidth;
+  const topHeight = stageSize.height * 0.48;
+  const bottomHeight = stageSize.height - topHeight;
+
+  return [
+    {
+      ...previous[0],
+      frame: { x: 0, y: 0, width: primaryWidth, height: stageSize.height },
+    },
+    {
+      ...previous[1],
+      frame: { x: primaryWidth, y: 0, width: secondaryWidth, height: topHeight },
+    },
+    {
+      ...previous[2],
+      frame: { x: primaryWidth, y: topHeight, width: secondaryWidth, height: bottomHeight },
+    },
+  ];
+}
+
+export function Sample() {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [windows, setWindows] = useState<DemoWindow[]>(() => createDefaultWindows());
+  const [activeLayoutKey, setActiveLayoutKey] = useState<string | null>(null);
+
+  const getStageSize = (): StageSize => {
+    const rect = stageRef.current?.getBoundingClientRect();
+
+    return {
+      width: rect?.width ?? 1000,
+      height: rect?.height ?? 560,
+    };
+  };
+
+  const actionButtons = useMemo(
+    () => [
+      {
+        key: 'recommended',
+        label: '추천 배치',
+        icon: <AppstoreOutlined />,
+        apply: arrangeRecommended,
+      },
+      {
+        key: 'horizontal',
+        label: '가로 분할',
+        icon: <ColumnWidthOutlined />,
+        apply: arrangeHorizontally,
+      },
+      {
+        key: 'vertical',
+        label: '세로 분할',
+        icon: <BorderVerticleOutlined />,
+        apply: arrangeVertically,
+      },
+      {
+        key: 'grid',
+        label: '그리드',
+        icon: <SplitCellsOutlined />,
+        apply: arrangeGrid,
+      },
+    ],
+    [],
+  );
+
+  const applyLayout = (layoutKey: string, nextWindows: DemoWindow[]) => {
+    const selectedLayout = actionButtons.find((action) => action.key === layoutKey);
+
+    if (!selectedLayout) {
+      return nextWindows;
+    }
+
+    return selectedLayout.apply(nextWindows, getStageSize());
+  };
+
+  const moveWindow = (windowId: string, direction: 'up' | 'down') => {
+    setWindows((previous) => {
+      const currentIndex = previous.findIndex((item) => item.id === windowId);
+
+      if (currentIndex < 0) {
+        return previous;
+      }
+
+      const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
+
+      if (targetIndex < 0 || targetIndex >= previous.length) {
+        return previous;
+      }
+
+      const reordered = [...previous];
+      const [selectedWindow] = reordered.splice(currentIndex, 1);
+      reordered.splice(targetIndex, 0, selectedWindow);
+
+      return activeLayoutKey ? applyLayout(activeLayoutKey, reordered) : reordered;
+    });
+  };
+
+  const activateWindow = (windowId: string) => {
+    setWindows((previous) => {
+      const highestZIndex = Math.max(...previous.map((item) => item.zIndex));
+
+      return previous.map((item) =>
+        item.id === windowId
+          ? {
+              ...item,
+              zIndex: highestZIndex + 1,
+            }
+          : item,
+      );
+    });
+  };
+
+  return (
+    <Card title="Window UI Sample" extra={<Text code>samples/Sample.tsx</Text>}>
+      <Paragraph>
+        헤더를 드래그하면 부모 영역 안에서 이동하고, 헤더 더블클릭 또는 우측 버튼으로 최대화/복원이
+        가능합니다. 최소화 버튼은 작업줄 형태로 콘텐츠를 접고, 멀티 윈도우일 때는 추천 배치 버튼으로
+        가로/세로/그리드 정렬도 가능합니다. 배치 후에는 아래 순서 편집 UI에서 창 순서를 다시 지정할 수
+        있습니다.
+      </Paragraph>
+
+      <div className="window-ui-sample">
+        <Flex wrap gap="small" className="window-ui-sample__actions">
+          {actionButtons.map((action) => (
+            <Button
+              key={action.key}
+              icon={action.icon}
+              onClick={() => {
+                setActiveLayoutKey(action.key);
+                setWindows((previous) => applyLayout(action.key, previous));
+              }}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </Flex>
+
+        {activeLayoutKey ? (
+          <Card size="small" title="배치 순서 편집">
+            <Flex vertical gap="small">
+              {windows.map((windowItem, index) => (
+                <Flex key={windowItem.id} align="center" justify="space-between" gap="small">
+                  <Flex align="center" gap="small">
+                    <Tag color="blue">{index + 1}</Tag>
+                    <Text strong>{windowItem.title}</Text>
+                    <Text type="secondary">{windowItem.subtitle}</Text>
+                  </Flex>
+                  <Flex gap="small">
+                    <Button
+                      icon={<ArrowUpOutlined />}
+                      disabled={index === 0}
+                      onClick={() => {
+                        moveWindow(windowItem.id, 'up');
+                      }}
+                    >
+                      위로
+                    </Button>
+                    <Button
+                      icon={<ArrowDownOutlined />}
+                      disabled={index === windows.length - 1}
+                      onClick={() => {
+                        moveWindow(windowItem.id, 'down');
+                      }}
+                    >
+                      아래로
+                    </Button>
+                  </Flex>
+                </Flex>
+              ))}
+            </Flex>
+          </Card>
+        ) : null}
+
+        <div ref={stageRef} className="window-ui-sample__stage">
+          <div className="window-ui-sample__desktop" />
+
+          {windows.map((windowItem) => (
+            <WindowUI
+              key={windowItem.id}
+              title={windowItem.title}
+              subtitle={windowItem.subtitle}
+              frame={windowItem.frame}
+              zIndex={windowItem.zIndex}
+              onActivate={() => {
+                activateWindow(windowItem.id);
+              }}
+              onFrameChange={(nextFrame) => {
+                setWindows((previous) =>
+                  previous.map((item) =>
+                    item.id === windowItem.id ? { ...item, frame: nextFrame } : item,
+                  ),
+                );
+              }}
+            >
+              <Flex vertical gap={14}>
+                <Tag color={windowItem.tone}>{windowItem.title}</Tag>
+                <Paragraph>
+                  부모 컨테이너 안에서만 움직이도록 제한되어 있고, 추천 배치 버튼으로 여러 창을 빠르게
+                  균등 분할할 수 있습니다.
+                </Paragraph>
+                <Card size="small" title="Active Tasks">
+                  <Flex vertical gap={10}>
+                    {windowItem.tasks.map((task) => (
+                      <Text key={task}>{task}</Text>
+                    ))}
+                  </Flex>
+                </Card>
+                <Card size="small" title="Window Controls">
+                  <Flex vertical gap={10}>
+                    <Text>드래그: 헤더 작업줄</Text>
+                    <Text>리사이즈: 모서리/변 가장자리</Text>
+                    <Text>배치: 추천 / 가로 / 세로 / 그리드</Text>
+                  </Flex>
+                </Card>
+              </Flex>
+            </WindowUI>
+          ))}
+        </div>
+
+        <div className="window-ui-sample__footer">
+          <span>부모 기준 제한 이동</span>
+          <span>최소화 / 최대화 / 복원 지원</span>
+          <span>헤더 더블클릭 + 다중 창 균등 분할 지원</span>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/window/types/index.ts b/src/components/window/types/index.ts
new file mode 100755
index 0000000..ac02ad0
--- /dev/null
+++ b/src/components/window/types/index.ts
@@ -0,0 +1 @@
+export type { WindowFrame, WindowUIProps } from './window';
diff --git a/src/components/window/types/window.ts b/src/components/window/types/window.ts
new file mode 100755
index 0000000..f08dd74
--- /dev/null
+++ b/src/components/window/types/window.ts
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export type WindowFrame = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type WindowUIProps = {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  children: ReactNode;
+  onOpenLayoutControls?: () => void;
+  bodyClassName?: string;
+  defaultFrame?: Partial<WindowFrame>;
+  frame?: WindowFrame;
+  onFrameChange?: (frame: WindowFrame) => void;
+  zIndex?: number;
+  onActivate?: () => void;
+  minWidth?: number;
+  minHeight?: number;
+  className?: string;
+  onClose?: () => void;
+};
diff --git a/src/data/dashboard-report-presets.ts b/src/data/dashboard-report-presets.ts
new file mode 100755
index 0000000..443d1d0
--- /dev/null
+++ b/src/data/dashboard-report-presets.ts
@@ -0,0 +1,144 @@
+import type { DashboardReportCardWidgetProps } from '../widgets/dashboard-report-card/DashboardReportCardWidget';
+
+export const wmsInboundOutboundCardPreset: DashboardReportCardWidgetProps = {
+  id: 'wms-inbound-outbound-report',
+  title: '입/출고 진행 현황',
+  moduleLabel: 'WMS 대시보드',
+  sectionLayout: 'vertical',
+  sections: [
+    {
+      kind: 'grouped-progress-list',
+      legend: '입고 / 출고',
+      title: '입고/출고 진행 상태',
+      groups: [
+        {
+          legend: '입고',
+          items: [
+            { label: '미입고', percent: 24, color: '#ff9f43' },
+            { label: '검수', percent: 18, color: '#7367f0' },
+            { label: '적치', percent: 32, color: '#00cfe8' },
+            { label: '확정', percent: 26, color: '#28c76f' },
+          ],
+        },
+        {
+          legend: '출고',
+          items: [
+            { label: '미출고', percent: 21, color: '#ff9f43' },
+            { label: '할당', percent: 17, color: '#7367f0' },
+            { label: '피킹', percent: 34, color: '#00cfe8' },
+            { label: '확정', percent: 28, color: '#28c76f' },
+          ],
+        },
+      ],
+    },
+    {
+      kind: 'line-chart',
+      legend: '재고 추이',
+      title: '현재일 -6일까지 재고 수량',
+      points: [
+        { label: 'D-6', value: 720 },
+        { label: 'D-5', value: 680 },
+        { label: 'D-4', value: 740 },
+        { label: 'D-3', value: 760 },
+        { label: 'D-2', value: 790 },
+        { label: 'D-1', value: 810 },
+        { label: 'Today', value: 845 },
+      ],
+    },
+  ],
+};
+
+export const wmsInventoryTrendCardPreset: DashboardReportCardWidgetProps = {
+  id: 'wms-inventory-trend-report',
+  title: '재고 상태 분석',
+  moduleLabel: 'WMS 대시보드',
+  sectionLayout: 'vertical',
+  sections: [
+    {
+      kind: 'segmented-progress',
+      legend: '재고 상태',
+      title: '재고 상태 비중',
+      segments: [
+        { label: '정상 재고', percent: 58, color: '#28c76f' },
+        { label: '보류 재고', percent: 24, color: '#ff9f43' },
+        { label: '점검 재고', percent: 18, color: '#7367f0' },
+      ],
+    },
+    {
+      kind: 'pie-chart',
+      legend: '보관 기간',
+      title: '보관기간별 재고',
+      totalLabel: '총재고',
+      segments: [
+        { label: '1주 이내', percent: 18, color: '#165dff' },
+        { label: '2주 이내', percent: 22, color: '#00cfe8' },
+        { label: '1개월 이내', percent: 27, color: '#28c76f' },
+        { label: '3개월 초과', percent: 33, color: '#ff9f43' },
+      ],
+    },
+  ],
+};
+
+export const tmsDeliveryFlowCardPreset: DashboardReportCardWidgetProps = {
+  id: 'tms-delivery-flow-report',
+  title: '배송 진행 현황',
+  moduleLabel: 'TMS 대시보드',
+  sectionLayout: 'vertical',
+  sections: [
+    {
+      kind: 'progress-list',
+      legend: '배송 상태',
+      title: '배송 진행 상태',
+      items: [
+        { label: '배차대기', percent: 12, color: '#ff9f43' },
+        { label: '배차완료', percent: 18, color: '#7367f0' },
+        { label: '배송중', percent: 34, color: '#00cfe8' },
+        { label: '배송완료', percent: 28, color: '#28c76f' },
+        { label: '지연', percent: 8, color: '#ea5455' },
+      ],
+    },
+    {
+      kind: 'line-chart',
+      legend: '배송 건수',
+      title: '일별 배송 건수',
+      points: [
+        { label: 'D-6', value: 120 },
+        { label: 'D-5', value: 138 },
+        { label: 'D-4', value: 145 },
+        { label: 'D-3', value: 152 },
+        { label: 'D-2', value: 160 },
+        { label: 'D-1', value: 149 },
+        { label: 'Today', value: 168 },
+      ],
+    },
+  ],
+};
+
+export const tmsDeliveryMetricsCardPreset: DashboardReportCardWidgetProps = {
+  id: 'tms-delivery-metrics-report',
+  title: '배송 실적 지표',
+  moduleLabel: 'TMS 대시보드',
+  sectionLayout: 'vertical',
+  sections: [
+    {
+      kind: 'metrics',
+      legend: '배송 지표',
+      title: '평균/최대/SLA',
+      metrics: [
+        { label: '평균 배송 시간', value: '2시간 14분' },
+        { label: '최대 배송 시간', value: '5시간 48분' },
+        { label: 'SLA 준수율', value: '96.4%' },
+      ],
+    },
+    {
+      kind: 'pie-chart',
+      legend: '정시 비율',
+      title: '정시 배송 / 지연 배송',
+      totalLabel: '총배송',
+      segments: [
+        { label: '정시 배송', percent: 91, color: '#28c76f' },
+        { label: '지연 배송', percent: 9, color: '#ea5455' },
+      ],
+    },
+  ],
+};
diff --git a/src/features/board/BoardPage.tsx b/src/features/board/BoardPage.tsx
new file mode 100755
index 0000000..3df800e
--- /dev/null
+++ b/src/features/board/BoardPage.tsx
@@ -0,0 +1,795 @@
+import {
+  ArrowLeftOutlined,
+  CheckSquareOutlined,
+  CompressOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  EyeOutlined,
+  ExpandOutlined,
+  FileTextOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
+  SaveOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Checkbox, Empty, Flex, Input, List, Segmented, Select, Space, Spin, Tag, Typography, message } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { MarkdownPreviewContent } from '../../components/markdownPreview';
+import {
+  createBoardPost,
+  deleteBoardPost,
+  fetchBoardPosts,
+  receiveBoardPostAutomation,
+  setupBoard,
+  updateBoardPost,
+} from './api';
+import type { BoardAutomationType, BoardDraft, BoardPost } from './types';
+
+const { Paragraph, Text, Title } = Typography;
+const { TextArea } = Input;
+
+const EMPTY_DRAFT: BoardDraft = {
+  id: null,
+  title: '',
+  content: '',
+  automationType: 'none',
+};
+
+const BOARD_AUTOMATION_TYPE_OPTIONS: Array<{ label: string; value: BoardAutomationType }> = [
+  { label: '선택 안함', value: 'none' },
+  { label: 'Plan', value: 'plan' },
+  { label: 'Command 실행', value: 'command_execution' },
+  { label: '비 소스작업', value: 'non_source_work' },
+  { label: 'autoWorker', value: 'auto_worker' },
+];
+
+const BOARD_AUTOMATION_TYPE_LABELS = new Map(
+  BOARD_AUTOMATION_TYPE_OPTIONS.map((option) => [option.value, option.label] as const),
+);
+
+function formatDateTime(value: string) {
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: 'Asia/Seoul',
+  });
+}
+
+async function copyText(value: string) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(value);
+    return;
+  }
+
+  const textArea = document.createElement('textarea');
+  textArea.value = value;
+  textArea.setAttribute('readonly', '');
+  textArea.style.position = 'fixed';
+  textArea.style.left = '-9999px';
+  document.body.appendChild(textArea);
+  textArea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textArea);
+}
+
+function resolveBoardAutomationStatus(
+  draftId: number | null,
+  automationReceived: boolean,
+  draftDirty: boolean,
+  errorMessage: string | null,
+) {
+  if (errorMessage) {
+    return {
+      color: 'error',
+      label: '접수 실패',
+      description: errorMessage,
+    };
+  }
+
+  if (!draftId) {
+    return {
+      color: 'default',
+      label: '저장 필요',
+      description: '저장 후 자동화 접수 가능',
+    };
+  }
+
+  if (draftDirty) {
+    return {
+      color: 'warning',
+      label: '저장 필요',
+      description: '변경 내용을 저장한 뒤 접수',
+    };
+  }
+
+  if (automationReceived) {
+    return {
+      color: 'processing',
+      label: '접수완료',
+      description: '연결된 Plan에서 작업 상태 확인',
+    };
+  }
+
+  return {
+    color: 'default',
+    label: '대기',
+    description: '자동화 접수 전',
+  };
+}
+
+function getBoardPostAutomationReceiveError(item: BoardPost, dirtyDraftId: number | null) {
+  if (item.id === dirtyDraftId) {
+    return '변경 내용을 저장한 뒤 자동화 접수하세요.';
+  }
+
+  if (item.automationReceivedAt || item.automationPlanItemId) {
+    return '이미 자동화 접수된 게시글입니다.';
+  }
+
+  return null;
+}
+
+export function BoardPage() {
+  const [messageApi, contextHolder] = message.useMessage();
+  const [items, setItems] = useState<BoardPost[]>([]);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+  const [draft, setDraft] = useState<BoardDraft>(EMPTY_DRAFT);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [automationReceiving, setAutomationReceiving] = useState(false);
+  const [automationReceiveError, setAutomationReceiveError] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
+  const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
+  const [contentExpanded, setContentExpanded] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(max-width: 960px)');
+    const update = () => {
+      setIsMobileViewport(mediaQuery.matches);
+      if (!mediaQuery.matches) {
+        setMobileDetailOpen(false);
+      }
+    };
+
+    update();
+    mediaQuery.addEventListener('change', update);
+
+    return () => {
+      mediaQuery.removeEventListener('change', update);
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        await setupBoard();
+        const nextItems = await fetchBoardPosts();
+
+        if (cancelled) {
+          return;
+        }
+
+        setItems(nextItems);
+        setSelectedId((previous) => previous ?? nextItems[0]?.id ?? null);
+      } catch (error) {
+        if (!cancelled) {
+          setErrorMessage(error instanceof Error ? error.message : '게시판을 불러오지 못했습니다.');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const selectedItem = useMemo(
+    () => items.find((item) => item.id === selectedId) ?? null,
+    [items, selectedId],
+  );
+  const showMobileDetailOnly = isMobileViewport && mobileDetailOpen;
+  const automationReceived = Boolean(selectedItem?.automationReceivedAt || selectedItem?.automationPlanItemId);
+  const isDraftLocked = automationReceived;
+  const draftDirty = Boolean(
+    selectedItem &&
+      (
+        draft.title !== selectedItem.title ||
+        draft.content !== selectedItem.content ||
+        draft.automationType !== selectedItem.automationType
+      ),
+  );
+  const dirtyDraftId = draftDirty && draft.id ? draft.id : null;
+  const automationStatus = resolveBoardAutomationStatus(draft.id, automationReceived, draftDirty, automationReceiveError);
+  const automationTypeLabel = BOARD_AUTOMATION_TYPE_LABELS.get(draft.automationType) ?? draft.automationType;
+  const receivableIds = useMemo(
+    () =>
+      items
+        .filter((item) => !getBoardPostAutomationReceiveError(item, dirtyDraftId))
+        .map((item) => item.id),
+    [dirtyDraftId, items],
+  );
+  const receivableIdSet = useMemo(() => new Set(receivableIds), [receivableIds]);
+  const checkedReceivableCount = checkedIds.filter((id) => receivableIdSet.has(id)).length;
+  const allReceivableChecked = receivableIds.length > 0 && checkedReceivableCount === receivableIds.length;
+  const partiallyChecked = checkedReceivableCount > 0 && checkedReceivableCount < receivableIds.length;
+
+  useEffect(() => {
+    if (selectedItem) {
+      setDraft({
+        id: selectedItem.id,
+        title: selectedItem.title,
+        content: selectedItem.content,
+        automationType: selectedItem.automationType,
+      });
+      setAutomationReceiveError(null);
+      return;
+    }
+
+    setDraft(EMPTY_DRAFT);
+    setAutomationReceiveError(null);
+  }, [selectedItem]);
+
+  useEffect(() => {
+    const itemIdSet = new Set(items.map((item) => item.id));
+    setCheckedIds((previous) => previous.filter((id) => itemIdSet.has(id)));
+  }, [items]);
+
+  const handleCreateDraft = () => {
+    setSelectedId(null);
+    setDraft(EMPTY_DRAFT);
+    setAutomationReceiveError(null);
+    setMobileDetailOpen(isMobileViewport);
+  };
+
+  const handleSave = async () => {
+    const normalizedTitle = draft.title.trim();
+    const normalizedContent = draft.content.trim();
+
+    if (!normalizedTitle) {
+      messageApi.warning('제목을 입력하세요.');
+      return;
+    }
+
+    if (!normalizedContent) {
+      messageApi.warning('본문을 입력하세요.');
+      return;
+    }
+
+    setSaving(true);
+    setAutomationReceiveError(null);
+
+    try {
+      const savedItem = draft.id
+        ? await updateBoardPost({
+            ...draft,
+            title: normalizedTitle,
+            content: normalizedContent,
+          })
+        : await createBoardPost({
+            ...draft,
+            title: normalizedTitle,
+            content: normalizedContent,
+          });
+
+      setItems((previous) => {
+        const filtered = previous.filter((item) => item.id !== savedItem.id);
+        return [savedItem, ...filtered];
+      });
+      setSelectedId(savedItem.id);
+      setMobileDetailOpen(isMobileViewport);
+      messageApi.success(draft.id ? '게시글을 수정했습니다.' : '게시글을 등록했습니다.');
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '게시글 저장에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!draft.id) {
+      handleCreateDraft();
+      return;
+    }
+
+    setDeleting(true);
+
+    try {
+      await deleteBoardPost(draft.id);
+      setItems((previous) => previous.filter((item) => item.id !== draft.id));
+      setSelectedId((previous) => (previous === draft.id ? null : previous));
+      setDraft(EMPTY_DRAFT);
+      setMobileDetailOpen(false);
+      messageApi.success('게시글을 삭제했습니다.');
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '게시글 삭제에 실패했습니다.');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const handleCopyContent = async () => {
+    if (!draft.content.trim()) {
+      messageApi.warning('복사할 본문이 없습니다.');
+      return;
+    }
+
+    try {
+      await copyText(draft.content);
+      messageApi.success('본문을 복사했습니다.');
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '본문 복사에 실패했습니다.');
+    }
+  };
+
+  const handleAutomationReceive = async () => {
+    if (!draft.id) {
+      messageApi.warning('저장된 게시글만 자동화 접수할 수 있습니다.');
+      return;
+    }
+
+    if (draftDirty) {
+      messageApi.warning('변경 내용을 저장한 뒤 자동화 접수하세요.');
+      return;
+    }
+
+    if (automationReceived) {
+      messageApi.info('이미 자동화 접수된 게시글입니다.');
+      return;
+    }
+
+    setAutomationReceiving(true);
+    setAutomationReceiveError(null);
+
+    try {
+      const result = await receiveBoardPostAutomation(draft.id);
+      setItems((previous) => previous.map((item) => (item.id === result.item.id ? result.item : item)));
+      messageApi.success(
+        result.alreadyReceived
+          ? '이미 자동화 접수된 게시글입니다.'
+          : `자동화 접수했습니다. Plan #${result.planItemId}`,
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '자동화 접수에 실패했습니다.';
+      setAutomationReceiveError(message);
+      messageApi.error(message);
+    } finally {
+      setAutomationReceiving(false);
+    }
+  };
+
+  const handleBulkAutomationReceive = async () => {
+    if (!checkedIds.length) {
+      messageApi.warning('접수할 게시글을 선택하세요.');
+      return;
+    }
+
+    const targetItems = items.filter((item) => checkedIds.includes(item.id));
+    const receivableItems = targetItems.filter((item) => !getBoardPostAutomationReceiveError(item, dirtyDraftId));
+
+    if (!receivableItems.length) {
+      messageApi.warning('선택한 게시글 중 자동화 접수할 수 있는 항목이 없습니다.');
+      return;
+    }
+
+    setAutomationReceiving(true);
+    setAutomationReceiveError(null);
+
+    const updatedItems = new Map<number, BoardPost>();
+    const alreadyReceivedIds: number[] = [];
+    const failedItems: Array<{ id: number; message: string }> = [];
+
+    try {
+      for (const item of receivableItems) {
+        try {
+          const result = await receiveBoardPostAutomation(item.id);
+          updatedItems.set(result.item.id, result.item);
+
+          if (result.alreadyReceived) {
+            alreadyReceivedIds.push(item.id);
+          }
+        } catch (error) {
+          failedItems.push({
+            id: item.id,
+            message: error instanceof Error ? error.message : '자동화 접수에 실패했습니다.',
+          });
+        }
+      }
+
+      if (updatedItems.size > 0) {
+        setItems((previous) => previous.map((item) => updatedItems.get(item.id) ?? item));
+      }
+
+      setCheckedIds((previous) => previous.filter((id) => !updatedItems.has(id)));
+
+      const receivedCount = updatedItems.size - alreadyReceivedIds.length;
+      const summaryParts = [
+        receivedCount > 0 ? `${receivedCount}건 접수` : null,
+        alreadyReceivedIds.length > 0 ? `${alreadyReceivedIds.length}건 기존 접수` : null,
+        failedItems.length > 0 ? `${failedItems.length}건 실패` : null,
+      ].filter(Boolean);
+
+      if (failedItems.length > 0) {
+        messageApi.warning(`선택 접수 결과: ${summaryParts.join(', ')}.`);
+      } else {
+        messageApi.success(`선택한 게시글을 처리했습니다. ${summaryParts.join(', ')}.`);
+      }
+
+      if (selectedItem) {
+        const selectedFailure = failedItems.find((entry) => entry.id === selectedItem.id);
+        setAutomationReceiveError(selectedFailure?.message ?? null);
+      }
+    } finally {
+      setAutomationReceiving(false);
+    }
+  };
+
+  return (
+    <Space direction="vertical" size={16} className="board-page">
+      {contextHolder}
+      <Card className="board-page__card" bordered={false}>
+        <Flex justify="space-between" align="center" gap={16} wrap>
+          <div>
+            <Title level={4} className="board-page__title">
+              Plan
+            </Title>
+            <Paragraph className="board-page__copy">
+              마크다운 본문을 입력하고 즉시 프리뷰를 확인한 뒤 DB에 저장합니다.
+            </Paragraph>
+          </div>
+          <Space wrap>
+            <Button icon={<PlusOutlined />} onClick={handleCreateDraft}>
+              새 글
+            </Button>
+            <Button
+              type="primary"
+              icon={<SaveOutlined />}
+              loading={saving}
+              disabled={isDraftLocked}
+              onClick={() => {
+                void handleSave();
+              }}
+            >
+              저장
+            </Button>
+          </Space>
+        </Flex>
+      </Card>
+
+      {errorMessage ? (
+        <Card className="board-page__card" bordered={false}>
+          <Text type="danger">{errorMessage}</Text>
+        </Card>
+      ) : null}
+
+      <div className="board-page__grid">
+        <Card
+          title={`게시글 목록 (${items.length})`}
+          className={`board-page__card board-page__list-card${
+            showMobileDetailOnly ? ' board-page__list-card--mobile-hidden' : ''
+          }`}
+          bordered={false}
+          extra={
+            <Space size={8} wrap>
+              {loading ? <Spin size="small" /> : null}
+              <Text type="secondary" className="board-page__bulk-count">
+                선택 {checkedReceivableCount}건
+              </Text>
+              <Checkbox
+                indeterminate={partiallyChecked}
+                checked={allReceivableChecked}
+                disabled={!receivableIds.length}
+                onChange={(event) => {
+                  setCheckedIds((previous) => {
+                    if (event.target.checked) {
+                      return Array.from(new Set([...previous, ...receivableIds]));
+                    }
+
+                    return previous.filter((id) => !receivableIdSet.has(id));
+                  });
+                }}
+              >
+                대기 전체
+              </Checkbox>
+              <Button
+                icon={<CheckSquareOutlined />}
+                loading={automationReceiving}
+                disabled={!checkedReceivableCount}
+                onClick={() => {
+                  void handleBulkAutomationReceive();
+                }}
+              >
+                선택 접수
+              </Button>
+            </Space>
+          }
+        >
+          {loading ? (
+            <div className="board-page__loading">
+              <Spin />
+            </div>
+          ) : items.length ? (
+            <List
+              dataSource={items}
+              renderItem={(item) => (
+                  <List.Item
+                    className={item.id === selectedId ? 'board-page__list-item is-active' : 'board-page__list-item'}
+                    onClick={() => {
+                      setSelectedId(item.id);
+                      if (isMobileViewport) {
+                        setMobileDetailOpen(true);
+                      }
+                    }}
+                  >
+                  <List.Item.Meta
+                    avatar={
+                      <Checkbox
+                        checked={checkedIds.includes(item.id)}
+                        disabled={Boolean(getBoardPostAutomationReceiveError(item, dirtyDraftId))}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                        }}
+                        onChange={(event) => {
+                          setCheckedIds((previous) =>
+                            event.target.checked
+                              ? Array.from(new Set([...previous, item.id]))
+                              : previous.filter((checkedId) => checkedId !== item.id),
+                          );
+                        }}
+                      />
+                    }
+                    title={
+                      <Flex justify="space-between" align="center" gap={8}>
+                        <Flex align="center" gap={8} className="board-page__list-title">
+                          <FileTextOutlined className="board-page__list-icon" />
+                          <Text strong>{item.title}</Text>
+                        </Flex>
+                        <Space size={6} wrap>
+                          {item.id === dirtyDraftId ? <Tag color="warning">저장 필요</Tag> : null}
+                          <Tag color={item.automationReceivedAt || item.automationPlanItemId ? 'processing' : 'default'}>
+                            {item.automationReceivedAt || item.automationPlanItemId ? '접수완료' : '대기'}
+                          </Tag>
+                        </Space>
+                      </Flex>
+                    }
+                    description={
+                      <Space direction="vertical" size={4}>
+                        <Text type="secondary" className="board-page__list-preview">
+                          {item.preview || '본문 미리보기가 없습니다.'}
+                        </Text>
+                        <Text type="secondary">수정 {formatDateTime(item.updatedAt)}</Text>
+                      </Space>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          ) : (
+            <Empty description="등록된 게시글이 없습니다." />
+          )}
+        </Card>
+
+        <div
+          className={`board-page__editor-column${
+            isMobileViewport && !mobileDetailOpen ? ' board-page__editor-column--mobile-hidden' : ''
+          }`}
+        >
+          <Card
+            title={draft.id ? `게시글 #${draft.id}` : '새 게시글'}
+            className="board-page__card board-page__editor-card"
+            bordered={false}
+            extra={
+              <Space wrap>
+                {isMobileViewport && mobileDetailOpen ? (
+                  <Button
+                    icon={<ArrowLeftOutlined />}
+                    onClick={() => {
+                      setMobileDetailOpen(false);
+                    }}
+                  >
+                    목록
+                  </Button>
+                ) : null}
+                {draft.id ? <Tag color={automationStatus.color}>{automationStatus.label}</Tag> : null}
+                {draft.id && selectedItem?.automationPlanItemId ? (
+                  <Button
+                    href={`/plans/all?planId=${selectedItem.automationPlanItemId}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    연결자동화
+                  </Button>
+                ) : null}
+                {draft.id ? (
+                  <Button
+                    icon={<PlayCircleOutlined />}
+                    loading={automationReceiving}
+                    disabled={automationReceived && !automationReceiveError}
+                    onClick={() => {
+                      void handleAutomationReceive();
+                    }}
+                  >
+                    {automationReceived ? '자동화 접수됨' : automationReceiveError ? '접수 재시도' : '자동화 접수'}
+                  </Button>
+                ) : null}
+                {draft.id ? (
+                  <Button
+                    danger
+                    icon={<DeleteOutlined />}
+                    loading={deleting}
+                    disabled={isDraftLocked}
+                    onClick={() => {
+                      void handleDelete();
+                    }}
+                  >
+                    삭제
+                  </Button>
+                ) : null}
+              </Space>
+            }
+          >
+            <Space direction="vertical" size={16} className="board-page__editor">
+              <Input
+                size="large"
+                placeholder="제목을 입력하세요"
+                value={draft.title}
+                readOnly={isDraftLocked}
+                onChange={(event) => {
+                  setDraft((previous) => ({
+                    ...previous,
+                    title: event.target.value,
+                  }));
+                }}
+              />
+              <Flex gap={8} wrap>
+                <Tag color={automationStatus.color}>{automationStatus.label}</Tag>
+                {automationStatus.description ? <Text type="secondary">{automationStatus.description}</Text> : null}
+              </Flex>
+              <div className="board-page__automation-field">
+                <Text strong>자동화 처리</Text>
+                {automationReceived ? (
+                  <div className="board-page__automation-readonly" aria-readonly="true">
+                    <Text>{automationTypeLabel}</Text>
+                    <Tag color="processing">접수 후 읽기전용</Tag>
+                  </div>
+                ) : (
+                    <Select
+                      className="board-page__automation-select"
+                      value={draft.automationType}
+                    options={BOARD_AUTOMATION_TYPE_OPTIONS}
+                    popupClassName="board-page__automation-select-popup"
+                    getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+                      disabled={isDraftLocked}
+                      onChange={(automationType) => {
+                        setDraft((previous) => ({
+                          ...previous,
+                        automationType,
+                      }));
+                    }}
+                  />
+                )}
+              </div>
+              <div className={`board-page__editor-frame${contentExpanded ? ' board-page__editor-frame--expanded' : ''}`}>
+                {contentExpanded ? (
+                  <Flex justify="space-between" align="center" gap={12} className="board-page__editor-toolbar">
+                    <Text strong>본문 전체화면</Text>
+                    <Space size={8}>
+                      <Button
+                        size="small"
+                        icon={<CopyOutlined />}
+                        aria-label="본문 복사"
+                        title="본문 복사"
+                        onClick={() => {
+                          void handleCopyContent();
+                        }}
+                      >
+                        복사
+                      </Button>
+                      <Button
+                        size="small"
+                        icon={<CompressOutlined />}
+                        aria-label="본문 최대화 해제"
+                        onClick={() => {
+                          setContentExpanded(false);
+                        }}
+                      >
+                        닫기
+                      </Button>
+                    </Space>
+                  </Flex>
+                ) : null}
+                <Segmented
+                  className="board-page__mobile-toggle"
+                  options={[
+                    { label: '편집', value: 'edit', icon: <FileTextOutlined /> },
+                    { label: '미리보기', value: 'preview', icon: <EyeOutlined /> },
+                  ]}
+                  value={mobileView}
+                  onChange={(value) => {
+                    setMobileView(value as 'edit' | 'preview');
+                  }}
+                />
+                <Flex justify="space-between" align="center" gap={8}>
+                  <Text type="secondary">본문</Text>
+                  <Space size={8}>
+                    <Button
+                      icon={<CopyOutlined />}
+                      aria-label="본문 복사"
+                      title="본문 복사"
+                      onClick={() => {
+                        void handleCopyContent();
+                      }}
+                    />
+                    <Button
+                      icon={contentExpanded ? <CompressOutlined /> : <ExpandOutlined />}
+                      aria-label={contentExpanded ? '본문 최대화 해제' : '본문 최대화'}
+                      title={contentExpanded ? '본문 최대화 해제' : '본문 최대화'}
+                      onClick={() => {
+                        setContentExpanded((previous) => !previous);
+                      }}
+                    />
+                  </Space>
+                </Flex>
+                <div
+                  className={`board-page__preview-grid${contentExpanded ? ' board-page__preview-grid--expanded' : ''}`}
+                >
+                  <div
+                    className={`board-page__pane${mobileView === 'preview' ? ' board-page__pane--mobile-hidden' : ''}${
+                      contentExpanded ? ' board-page__pane--expanded' : ''
+                    }`}
+                  >
+                    <TextArea
+                      value={draft.content}
+                      placeholder={'# 제목\n\n마크다운 본문을 입력하세요.\n\n- 목록\n- 코드블록\n- 링크'}
+                      readOnly={isDraftLocked}
+                      onChange={(event) => {
+                        setDraft((previous) => ({
+                          ...previous,
+                          content: event.target.value,
+                        }));
+                      }}
+                      className={`board-page__textarea${contentExpanded ? ' board-page__textarea--expanded' : ''}`}
+                    />
+                  </div>
+                  <div
+                    className={`board-page__pane${mobileView === 'edit' ? ' board-page__pane--mobile-hidden' : ''}${
+                      contentExpanded ? ' board-page__pane--expanded' : ''
+                    }`}
+                  >
+                    <div className={`board-page__preview${contentExpanded ? ' board-page__preview--expanded' : ''}`}>
+                      <div className="board-page__preview-content">
+                      {draft.content.trim() ? (
+                        <MarkdownPreviewContent content={draft.content} />
+                      ) : (
+                        <Empty description="미리보기할 본문이 없습니다." image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                      )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {isDraftLocked ? (
+                  <Text type="secondary">자동화 접수된 작업메모는 게시판에서 수정하거나 삭제할 수 없습니다.</Text>
+                ) : null}
+              </div>
+            </Space>
+          </Card>
+        </div>
+      </div>
+    </Space>
+  );
+}
diff --git a/src/features/board/api.ts b/src/features/board/api.ts
new file mode 100755
index 0000000..caa335e
--- /dev/null
+++ b/src/features/board/api.ts
@@ -0,0 +1,214 @@
+import { appendClientIdHeader } from '../../app/main/clientIdentity';
+import { getRegisteredAccessToken } from '../../app/main/tokenAccess';
+import type { BoardAutomationType, BoardDraft, BoardPost } from './types';
+
+class BoardApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'BoardApiError';
+    this.status = status;
+  }
+}
+
+function normalizeBoardAutomationType(value: unknown): BoardAutomationType {
+  return value === 'plan' ||
+    value === 'command_execution' ||
+    value === 'non_source_work' ||
+    value === 'auto_worker'
+    ? value
+    : value === 'plan_registration'
+      ? 'plan'
+      : value === 'general_development'
+        ? 'auto_worker'
+    : 'none';
+}
+
+function resolveBoardApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function resolveBoardFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const BOARD_API_BASE_URL = resolveBoardApiBaseUrl();
+const BOARD_API_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && BOARD_API_BASE_URL === '/api'
+    ? resolveBoardFallbackBaseUrl()
+    : null;
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit) {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = globalThis.setTimeout(() => controller.abort(), 8000);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const token = getRegisteredAccessToken();
+  if (token && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', token);
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    globalThis.clearTimeout(timeoutId);
+
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new BoardApiError('게시판 서버 응답이 지연됩니다.', 408);
+    }
+
+    throw error;
+  }
+
+  globalThis.clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+    let message = text || '게시판 요청에 실패했습니다.';
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      message = payload.message || message;
+    } catch {
+      // Keep the plain text fallback when the response body is not JSON.
+    }
+
+    throw new BoardApiError(message, response.status);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(BOARD_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      BOARD_API_FALLBACK_BASE_URL &&
+      BOARD_API_FALLBACK_BASE_URL !== BOARD_API_BASE_URL &&
+      (error instanceof BoardApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && /404|Failed to fetch|NetworkError/i.test(error.message));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(BOARD_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+export async function setupBoard() {
+  return request<{ ok: boolean; table: string }>('/board/setup', {
+    method: 'POST',
+    body: JSON.stringify({}),
+  });
+}
+
+export async function fetchBoardPosts() {
+  const response = await request<{ ok: boolean; items: BoardPost[] }>('/board/posts');
+  return response.items.map((item) => ({
+    ...item,
+    automationType: normalizeBoardAutomationType(item.automationType),
+  }));
+}
+
+export async function createBoardPost(draft: BoardDraft) {
+  const response = await request<{ ok: boolean; item: BoardPost }>('/board/posts', {
+    method: 'POST',
+    body: JSON.stringify({
+      title: draft.title,
+      content: draft.content,
+      automationType: draft.automationType,
+    }),
+  });
+
+  return {
+    ...response.item,
+    automationType: normalizeBoardAutomationType(response.item.automationType),
+  };
+}
+
+export async function updateBoardPost(draft: BoardDraft) {
+  if (!draft.id) {
+    throw new Error('수정할 게시글 ID가 없습니다.');
+  }
+
+  const response = await request<{ ok: boolean; item: BoardPost }>(`/board/posts/${draft.id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      title: draft.title,
+      content: draft.content,
+      automationType: draft.automationType,
+    }),
+  });
+
+  return {
+    ...response.item,
+    automationType: normalizeBoardAutomationType(response.item.automationType),
+  };
+}
+
+export async function receiveBoardPostAutomation(id: number) {
+  const response = await request<{
+    ok: boolean;
+    item: BoardPost;
+    planItemId: number | null;
+    alreadyReceived: boolean;
+  }>(`/board/posts/${id}/actions/automation-receive`, {
+    method: 'POST',
+    body: JSON.stringify({}),
+  });
+
+  return {
+    item: {
+      ...response.item,
+      automationType: normalizeBoardAutomationType(response.item.automationType),
+    },
+    planItemId: response.planItemId,
+    alreadyReceived: response.alreadyReceived,
+  };
+}
+
+export async function deleteBoardPost(id: number) {
+  const response = await request<{ ok: boolean; id: number }>(`/board/posts/${id}`, {
+    method: 'DELETE',
+  });
+
+  return response.id;
+}
diff --git a/src/features/board/index.ts b/src/features/board/index.ts
new file mode 100755
index 0000000..d3d9a49
--- /dev/null
+++ b/src/features/board/index.ts
@@ -0,0 +1,2 @@
+export { BoardPage } from './BoardPage';
+export type { BoardDraft, BoardPost } from './types';
diff --git a/src/features/board/types.ts b/src/features/board/types.ts
new file mode 100755
index 0000000..2ab6df4
--- /dev/null
+++ b/src/features/board/types.ts
@@ -0,0 +1,28 @@
+export const BOARD_AUTOMATION_TYPES = [
+  'none',
+  'plan',
+  'command_execution',
+  'non_source_work',
+  'auto_worker',
+] as const;
+
+export type BoardAutomationType = (typeof BOARD_AUTOMATION_TYPES)[number];
+
+export type BoardPost = {
+  id: number;
+  title: string;
+  content: string;
+  preview: string;
+  automationType: BoardAutomationType;
+  automationPlanItemId: number | null;
+  automationReceivedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type BoardDraft = {
+  id: number | null;
+  title: string;
+  content: string;
+  automationType: BoardAutomationType;
+};
diff --git a/src/features/dashboard/TmsDashboardFeatureSamples.tsx b/src/features/dashboard/TmsDashboardFeatureSamples.tsx
new file mode 100755
index 0000000..79243e8
--- /dev/null
+++ b/src/features/dashboard/TmsDashboardFeatureSamples.tsx
@@ -0,0 +1,29 @@
+import { Card, Flex, Typography } from 'antd';
+import { DashboardReportCardWidget } from '../../widgets/dashboard-report-card/DashboardReportCardWidget';
+import {
+  tmsDeliveryFlowCardPreset,
+  tmsDeliveryMetricsCardPreset,
+} from '../../data/dashboard-report-presets';
+
+const { Paragraph, Title } = Typography;
+
+export function TmsDashboardFeatureSamples() {
+  return (
+    <Card className="feature-dashboard-card" bordered={false}>
+      <Title level={4}>TMS Dashboard Feature</Title>
+      <Paragraph type="secondary">
+        프로젝트에서 사용하는 TMS 전용 샘플입니다. 배송 현황과 배송 실적 지표를 함께
+        보여줍니다.
+      </Paragraph>
+
+      <Flex gap={16} wrap className="feature-dashboard-card__grid">
+        <div className="feature-dashboard-card__item">
+          <DashboardReportCardWidget {...tmsDeliveryFlowCardPreset} />
+        </div>
+        <div className="feature-dashboard-card__item">
+          <DashboardReportCardWidget {...tmsDeliveryMetricsCardPreset} />
+        </div>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/features/dashboard/WmsDashboardFeatureSamples.tsx b/src/features/dashboard/WmsDashboardFeatureSamples.tsx
new file mode 100755
index 0000000..a2c3d2e
--- /dev/null
+++ b/src/features/dashboard/WmsDashboardFeatureSamples.tsx
@@ -0,0 +1,29 @@
+import { Card, Flex, Typography } from 'antd';
+import { DashboardReportCardWidget } from '../../widgets/dashboard-report-card/DashboardReportCardWidget';
+import {
+  wmsInboundOutboundCardPreset,
+  wmsInventoryTrendCardPreset,
+} from '../../data/dashboard-report-presets';
+
+const { Paragraph, Title } = Typography;
+
+export function WmsDashboardFeatureSamples() {
+  return (
+    <Card className="feature-dashboard-card" bordered={false}>
+      <Title level={4}>WMS Dashboard Feature</Title>
+      <Paragraph type="secondary">
+        프로젝트에서 사용하는 WMS 전용 샘플입니다. 입출고 진행 현황과 재고 추이를 함께
+        확인할 수 있습니다.
+      </Paragraph>
+
+      <Flex gap={16} wrap className="feature-dashboard-card__grid">
+        <div className="feature-dashboard-card__item">
+          <DashboardReportCardWidget {...wmsInboundOutboundCardPreset} />
+        </div>
+        <div className="feature-dashboard-card__item">
+          <DashboardReportCardWidget {...wmsInventoryTrendCardPreset} />
+        </div>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/features/history/HistoryPage.tsx b/src/features/history/HistoryPage.tsx
new file mode 100755
index 0000000..c3ff88f
--- /dev/null
+++ b/src/features/history/HistoryPage.tsx
@@ -0,0 +1,398 @@
+import { Button, Card, Descriptions, Empty, Flex, Input, List, Space, Spin, Table, Tag, Typography, message } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { useTokenAccess } from '../../app/main/tokenAccess';
+import { fetchVisitorClients, fetchVisitorDetail, updateVisitorNickname, type VisitorClientSearchFilters } from './api';
+import type { VisitHistory, VisitorClient } from './types';
+
+const { Paragraph, Text, Title } = Typography;
+
+function formatDateTime(value: string | null | undefined) {
+  if (!value) {
+    return '미기록';
+  }
+
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: 'Asia/Seoul',
+  });
+}
+
+function formatCompactText(value: string | null | undefined) {
+  if (!value) {
+    return '-';
+  }
+
+  return value.length > 88 ? `${value.slice(0, 85)}...` : value;
+}
+
+function normalizeVisitorFilters(filters: VisitorClientSearchFilters) {
+  return Object.fromEntries(
+    Object.entries(filters)
+      .map(([key, value]) => [key, value?.trim() ?? ''])
+      .filter(([, value]) => Boolean(value)),
+  ) as VisitorClientSearchFilters;
+}
+
+export function HistoryPage() {
+  const { hasAccess } = useTokenAccess();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [searchFilters, setSearchFilters] = useState<VisitorClientSearchFilters>({});
+  const [filterInputs, setFilterInputs] = useState<VisitorClientSearchFilters>({});
+  const [visitors, setVisitors] = useState<VisitorClient[]>([]);
+  const [selectedClientId, setSelectedClientId] = useState<string | null>(null);
+  const [selectedClient, setSelectedClient] = useState<VisitorClient | null>(null);
+  const [visits, setVisits] = useState<VisitHistory[]>([]);
+  const [nicknameInput, setNicknameInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [savingNickname, setSavingNickname] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!hasAccess) {
+      setVisitors([]);
+      setSelectedClientId(null);
+      setSelectedClient(null);
+      setVisits([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const loadVisitors = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const nextVisitors = await fetchVisitorClients(searchFilters);
+
+        if (cancelled) {
+          return;
+        }
+
+        setVisitors(nextVisitors);
+        setSelectedClientId((previous) => {
+          if (previous && nextVisitors.some((item) => item.clientId === previous)) {
+            return previous;
+          }
+
+          return nextVisitors[0]?.clientId ?? null;
+        });
+      } catch (error) {
+        if (!cancelled) {
+          setErrorMessage(error instanceof Error ? error.message : '방문자 목록을 불러오지 못했습니다.');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadVisitors();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hasAccess, searchFilters]);
+
+  useEffect(() => {
+    if (!hasAccess || !selectedClientId) {
+      setSelectedClient(null);
+      setVisits([]);
+      setNicknameInput('');
+      return;
+    }
+
+    let cancelled = false;
+
+    const loadDetail = async () => {
+      setDetailLoading(true);
+
+      try {
+        const detail = await fetchVisitorDetail(selectedClientId);
+
+        if (cancelled) {
+          return;
+        }
+
+        setSelectedClient(detail.client);
+        setVisits(detail.visits);
+        setNicknameInput(detail.client.nickname);
+      } catch (error) {
+        if (!cancelled) {
+          messageApi.error(error instanceof Error ? error.message : '방문 상세를 불러오지 못했습니다.');
+          setSelectedClient(null);
+          setVisits([]);
+          setNicknameInput('');
+        }
+      } finally {
+        if (!cancelled) {
+          setDetailLoading(false);
+        }
+      }
+    };
+
+    void loadDetail();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hasAccess, messageApi, selectedClientId]);
+
+  const visitColumns = useMemo(
+    () => [
+      {
+        title: '방문시각',
+        dataIndex: 'visitedAt',
+        key: 'visitedAt',
+        render: (value: string) => formatDateTime(value),
+      },
+      {
+        title: '이벤트',
+        dataIndex: 'eventType',
+        key: 'eventType',
+        render: (value: string) => <Tag color="blue">{value}</Tag>,
+      },
+      {
+        title: 'URL',
+        dataIndex: 'url',
+        key: 'url',
+        render: (value: string) => (
+          <Typography.Link href={value} target="_blank" rel="noreferrer">
+            {formatCompactText(value)}
+          </Typography.Link>
+        ),
+      },
+      {
+        title: 'IP',
+        dataIndex: 'ip',
+        key: 'ip',
+        render: (value: string | null) => value ?? '-',
+      },
+    ],
+    [],
+  );
+
+  const handleSaveNickname = async () => {
+    if (!selectedClientId) {
+      return;
+    }
+
+    const normalizedNickname = nicknameInput.trim();
+
+    if (!normalizedNickname) {
+      messageApi.warning('닉네임을 입력해 주세요.');
+      return;
+    }
+
+    setSavingNickname(true);
+
+    try {
+      const updatedClient = await updateVisitorNickname(selectedClientId, normalizedNickname);
+      setSelectedClient(updatedClient);
+      setNicknameInput(updatedClient.nickname);
+      setVisitors((previous) =>
+        previous.map((item) => (item.clientId === updatedClient.clientId ? updatedClient : item)),
+      );
+      messageApi.success('닉네임을 수정했습니다.');
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '닉네임 수정에 실패했습니다.');
+    } finally {
+      setSavingNickname(false);
+    }
+  };
+
+  if (!hasAccess) {
+    return (
+      <Card className="history-page__card" bordered={false}>
+        <Paragraph className="app-main-copy">
+          토큰 등록 사용자만 방문 이력 메뉴를 사용할 수 있습니다.
+        </Paragraph>
+      </Card>
+    );
+  }
+
+  return (
+    <Space direction="vertical" size={16} className="history-page">
+      {contextHolder}
+      <Card className="history-page__card" bordered={false}>
+        <Flex justify="space-between" align="center" gap={16} wrap>
+          <div>
+            <Title level={4} className="history-page__title">
+              방문자 이력
+            </Title>
+            <Paragraph className="history-page__copy">
+              `client master / visit history` 구조로 비로그인 방문자를 식별하고 상세 이력을 조회합니다.
+            </Paragraph>
+          </div>
+        </Flex>
+        <div className="history-page__filter-grid">
+          <Input
+            allowClear
+            placeholder="clientId"
+            value={filterInputs.clientId}
+            onChange={(event) => {
+              setFilterInputs((previous) => ({ ...previous, clientId: event.target.value }));
+            }}
+          />
+          <Input
+            allowClear
+            placeholder="닉네임"
+            value={filterInputs.nickname}
+            onChange={(event) => {
+              setFilterInputs((previous) => ({ ...previous, nickname: event.target.value }));
+            }}
+          />
+          <Input
+            allowClear
+            placeholder="방문 경로"
+            value={filterInputs.path}
+            onChange={(event) => {
+              setFilterInputs((previous) => ({ ...previous, path: event.target.value }));
+            }}
+          />
+          <Input
+            allowClear
+            placeholder="시작일 YYYY-MM-DD"
+            value={filterInputs.visitedFrom}
+            onChange={(event) => {
+              setFilterInputs((previous) => ({ ...previous, visitedFrom: event.target.value }));
+            }}
+          />
+          <Input
+            allowClear
+            placeholder="종료일 YYYY-MM-DD"
+            value={filterInputs.visitedTo}
+            onChange={(event) => {
+              setFilterInputs((previous) => ({ ...previous, visitedTo: event.target.value }));
+            }}
+          />
+          <Space>
+            <Button
+              type="primary"
+              onClick={() => {
+                setSearchFilters(normalizeVisitorFilters(filterInputs));
+              }}
+            >
+              검색
+            </Button>
+            <Button
+              onClick={() => {
+                setFilterInputs({});
+                setSearchFilters({});
+              }}
+            >
+              초기화
+            </Button>
+          </Space>
+        </div>
+      </Card>
+
+      {errorMessage ? (
+        <Card className="history-page__card" bordered={false}>
+          <Text type="danger">{errorMessage}</Text>
+        </Card>
+      ) : null}
+
+      <div className="history-page__grid">
+        <Card
+          title={`전체 방문자 목록 (${visitors.length})`}
+          className="history-page__card history-page__list-card"
+          extra={loading ? <Spin size="small" /> : null}
+          bordered={false}
+        >
+          {loading ? (
+            <div className="history-page__loading">
+              <Spin />
+            </div>
+          ) : visitors.length ? (
+            <List
+              dataSource={visitors}
+              renderItem={(item) => (
+                <List.Item
+                  className={item.clientId === selectedClientId ? 'history-page__list-item is-active' : 'history-page__list-item'}
+                  onClick={() => {
+                    setSelectedClientId(item.clientId);
+                  }}
+                >
+                  <Space direction="vertical" size={4}>
+                    <Text strong>{item.nickname}</Text>
+                    <Text type="secondary">{item.clientId}</Text>
+                    <Text type="secondary">누적 방문 {item.visitCount}회</Text>
+                    <Text type="secondary">최근 방문 {formatDateTime(item.lastVisitedAt)}</Text>
+                  </Space>
+                </List.Item>
+              )}
+            />
+          ) : (
+            <Empty description="조회된 방문자가 없습니다." />
+          )}
+        </Card>
+
+        <Card
+          title="특정 clientId 상세 조회"
+          className="history-page__card history-page__detail-card"
+          extra={detailLoading ? <Spin size="small" /> : null}
+          bordered={false}
+        >
+          {!selectedClientId ? (
+            <Empty description="방문자를 선택해 주세요." />
+          ) : detailLoading && !selectedClient ? (
+            <div className="history-page__loading">
+              <Spin />
+            </div>
+          ) : selectedClient ? (
+            <Space direction="vertical" size={16} className="history-page__detail">
+              <Descriptions
+                column={1}
+                size="small"
+                items={[
+                  { key: 'clientId', label: 'clientId', children: selectedClient.clientId },
+                  { key: 'firstVisitedAt', label: '최초 방문', children: formatDateTime(selectedClient.firstVisitedAt) },
+                  { key: 'lastVisitedAt', label: '최근 방문', children: formatDateTime(selectedClient.lastVisitedAt) },
+                  { key: 'visitCount', label: '방문 수', children: `${selectedClient.visitCount}회` },
+                  {
+                    key: 'lastVisitedUrl',
+                    label: '최근 URL',
+                    children: selectedClient.lastVisitedUrl ? (
+                      <Typography.Link href={selectedClient.lastVisitedUrl} target="_blank" rel="noreferrer">
+                        {formatCompactText(selectedClient.lastVisitedUrl)}
+                      </Typography.Link>
+                    ) : (
+                      '-'
+                    ),
+                  },
+                  { key: 'lastUserAgent', label: 'User-Agent', children: formatCompactText(selectedClient.lastUserAgent) },
+                  { key: 'lastIp', label: 'IP', children: selectedClient.lastIp ?? '-' },
+                ]}
+              />
+
+              <Flex gap={8} wrap>
+                <Input
+                  value={nicknameInput}
+                  onChange={(event) => {
+                    setNicknameInput(event.target.value);
+                  }}
+                  placeholder="닉네임 수정"
+                />
+                <Button type="primary" onClick={handleSaveNickname} loading={savingNickname}>
+                  닉네임 수정
+                </Button>
+              </Flex>
+
+              <Table<VisitHistory>
+                rowKey="id"
+                columns={visitColumns}
+                dataSource={visits}
+                pagination={{ pageSize: 8, showSizeChanger: false }}
+                scroll={{ x: 720 }}
+              />
+            </Space>
+          ) : (
+            <Empty description="방문 상세를 불러오지 못했습니다." />
+          )}
+        </Card>
+      </div>
+    </Space>
+  );
+}
diff --git a/src/features/history/api.ts b/src/features/history/api.ts
new file mode 100755
index 0000000..e052062
--- /dev/null
+++ b/src/features/history/api.ts
@@ -0,0 +1,202 @@
+import { appendClientIdHeader, buildTrackedPageUrl, getOrCreateClientId } from '../../app/main/clientIdentity';
+import { getRegisteredAccessToken } from '../../app/main/tokenAccess';
+import type { AppPageDescriptor } from '../../store/appStore/types';
+import type { VisitHistory, VisitorClient } from './types';
+
+export type VisitorClientSearchFilters = {
+  search?: string;
+  clientId?: string;
+  nickname?: string;
+  path?: string;
+  visitedFrom?: string;
+  visitedTo?: string;
+};
+
+class HistoryApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'HistoryApiError';
+    this.status = status;
+  }
+}
+
+function resolveHistoryApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function resolveHistoryFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const HISTORY_API_BASE_URL = resolveHistoryApiBaseUrl();
+const HISTORY_API_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && HISTORY_API_BASE_URL === '/api'
+    ? resolveHistoryFallbackBaseUrl()
+    : null;
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit) {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = globalThis.setTimeout(() => controller.abort(), 8000);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    globalThis.clearTimeout(timeoutId);
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new HistoryApiError('서버 응답이 지연됩니다.', 408);
+    }
+    throw error;
+  }
+
+  globalThis.clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new HistoryApiError(payload.message || '방문 이력 요청에 실패했습니다.', response.status);
+    } catch {
+      throw new HistoryApiError(text || '방문 이력 요청에 실패했습니다.', response.status);
+    }
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(HISTORY_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      HISTORY_API_FALLBACK_BASE_URL &&
+      HISTORY_API_FALLBACK_BASE_URL !== HISTORY_API_BASE_URL &&
+      (error instanceof HistoryApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && /404|Failed to fetch|NetworkError/i.test(error.message));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(HISTORY_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+function buildAdminHeaders() {
+  const headers = appendClientIdHeader();
+  const token = getRegisteredAccessToken();
+
+  if (token && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', token);
+  }
+
+  return headers;
+}
+
+export async function reportVisitorPageView(page: AppPageDescriptor) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const clientId = getOrCreateClientId();
+
+  if (!clientId) {
+    return;
+  }
+
+  try {
+    await request('/history/track', {
+      method: 'POST',
+      body: JSON.stringify({
+        clientId,
+        url: buildTrackedPageUrl(page),
+        eventType: 'page_view',
+        userAgent: window.navigator.userAgent,
+      }),
+    });
+  } catch {
+    // 방문 이력 적재 실패는 사용자 흐름을 막지 않습니다.
+  }
+}
+
+export async function fetchVisitorClients(filters: VisitorClientSearchFilters = {}) {
+  const query = new URLSearchParams();
+
+  Object.entries(filters).forEach(([key, value]) => {
+    const normalizedValue = value?.trim();
+
+    if (normalizedValue) {
+      query.set(key, normalizedValue);
+    }
+  });
+
+  const suffix = query.toString() ? `?${query.toString()}` : '';
+  const response = await request<{ ok: boolean; items: VisitorClient[] }>(`/history/visitors${suffix}`, {
+    headers: buildAdminHeaders(),
+  });
+  return response.items;
+}
+
+export async function fetchVisitorDetail(clientId: string) {
+  const response = await request<{ ok: boolean; client: VisitorClient; visits: VisitHistory[] }>(
+    `/history/visitors/${encodeURIComponent(clientId)}`,
+    {
+      headers: buildAdminHeaders(),
+    },
+  );
+
+  return response;
+}
+
+export async function updateVisitorNickname(clientId: string, nickname: string) {
+  const response = await request<{ ok: boolean; client: VisitorClient }>(
+    `/history/visitors/${encodeURIComponent(clientId)}/nickname`,
+    {
+      method: 'PATCH',
+      headers: buildAdminHeaders(),
+      body: JSON.stringify({
+        nickname,
+      }),
+    },
+  );
+
+  return response.client;
+}
diff --git a/src/features/history/index.ts b/src/features/history/index.ts
new file mode 100755
index 0000000..1b46c02
--- /dev/null
+++ b/src/features/history/index.ts
@@ -0,0 +1 @@
+export { HistoryPage } from './HistoryPage';
diff --git a/src/features/history/types.ts b/src/features/history/types.ts
new file mode 100755
index 0000000..5625c60
--- /dev/null
+++ b/src/features/history/types.ts
@@ -0,0 +1,22 @@
+export type VisitorClient = {
+  clientId: string;
+  nickname: string;
+  firstVisitedAt: string;
+  lastVisitedAt: string;
+  visitCount: number;
+  lastVisitedUrl: string | null;
+  lastUserAgent: string | null;
+  lastIp: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type VisitHistory = {
+  id: number;
+  clientId: string;
+  visitedAt: string;
+  url: string;
+  eventType: string;
+  userAgent: string | null;
+  ip: string | null;
+};
diff --git a/src/features/layout/README.md b/src/features/layout/README.md
new file mode 100755
index 0000000..fbb79f8
--- /dev/null
+++ b/src/features/layout/README.md
@@ -0,0 +1,14 @@
+# Layout Feature
+
+프로젝트 종속적인 레이아웃은 `src/features/layout` 아래에서 관리합니다.
+
+## 포함 항목
+
+- 컴포넌트 샘플 레이아웃
+- 위젯 샘플 레이아웃
+- Markdown preview 리스트 레이아웃
+
+## 규칙
+
+- 공통 레이아웃 시스템이 아니라 현재 프로젝트 화면에 종속되면 `features/layout`에 배치
+- 공통 재사용 가능성이 높으면 `components` 또는 `widgets`로 승격 검토
diff --git a/src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx b/src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
new file mode 100755
index 0000000..005a27b
--- /dev/null
+++ b/src/features/layout/component-sample-gallery/ComponentSamplesLayout.tsx
@@ -0,0 +1,178 @@
+import { Anchor, Card, Empty, Flex, Space, Tag, Typography } from 'antd';
+import { createElement, useEffect, useMemo, useState } from 'react';
+import type { LoadedSampleEntry, SampleEntry } from '../../../samples/registry';
+import { resolveSampleEntries } from '../../../samples/registry';
+
+const { Paragraph, Text, Title } = Typography;
+
+export type ComponentSamplesLayoutProps = {
+  entries: SampleEntry[];
+  pathFilter?: string;
+  excludeComponentIds?: string[];
+  includeComponentIds?: string[];
+};
+
+export function ComponentSamplesLayout({
+  entries,
+  pathFilter = '/components/',
+  excludeComponentIds = [],
+  includeComponentIds = [],
+}: ComponentSamplesLayoutProps) {
+  const [sampleEntries, setSampleEntries] = useState<LoadedSampleEntry[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void resolveSampleEntries(entries, pathFilter).then((loadedEntries) => {
+      if (mounted) {
+        setSampleEntries(loadedEntries);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [entries, pathFilter]);
+  const groupedComponents = useMemo(() => {
+    const excludedComponentIdSet = new Set(excludeComponentIds);
+    const includedComponentIdSet = includeComponentIds.length ? new Set(includeComponentIds) : null;
+    const componentMap = new Map<
+      string,
+      {
+        componentId: string;
+        title: string;
+        description: string;
+        category: string;
+        baseSample?: (typeof sampleEntries)[number];
+        pluginSamples: (typeof sampleEntries)[number][];
+        featureSamples: (typeof sampleEntries)[number][];
+      }
+    >();
+
+    sampleEntries.forEach((entry) => {
+      if (excludedComponentIdSet.has(entry.sampleMeta.componentId)) {
+        return;
+      }
+
+      if (includedComponentIdSet && !includedComponentIdSet.has(entry.sampleMeta.componentId)) {
+        return;
+      }
+
+      const existingGroup = componentMap.get(entry.sampleMeta.componentId) ?? {
+        componentId: entry.sampleMeta.componentId,
+        title: entry.sampleMeta.title,
+        description: entry.sampleMeta.description,
+        category: entry.sampleMeta.category,
+        pluginSamples: [],
+        featureSamples: [],
+      };
+
+      if (entry.sampleMeta.kind === 'base') {
+        existingGroup.baseSample = entry;
+        existingGroup.title = entry.sampleMeta.title;
+        existingGroup.description = entry.sampleMeta.description;
+        existingGroup.category = entry.sampleMeta.category;
+      } else if (entry.sampleMeta.kind === 'feature') {
+        existingGroup.featureSamples.push(entry);
+      } else {
+        existingGroup.pluginSamples.push(entry);
+      }
+
+      componentMap.set(entry.sampleMeta.componentId, existingGroup);
+    });
+
+    return Array.from(componentMap.values());
+  }, [excludeComponentIds, includeComponentIds, sampleEntries]);
+
+  if (groupedComponents.length === 0) {
+    return <Empty description="표시할 컴포넌트 샘플이 없습니다." />;
+  }
+
+  return (
+    <div className="component-samples-layout">
+      <aside className="component-samples-layout__sidebar">
+        <Card title="Components" className="component-samples-layout__nav-card">
+          <Anchor
+            affix={false}
+            items={groupedComponents.map((componentGroup) => ({
+              key: componentGroup.componentId,
+              href: `#component-sample-${componentGroup.componentId}`,
+              title: componentGroup.title,
+            }))}
+          />
+        </Card>
+      </aside>
+
+      <div className="component-samples-layout__content">
+        <Flex vertical gap={20} className="component-samples-layout__stack">
+          {groupedComponents.map((componentGroup) => (
+            <Card
+              key={componentGroup.componentId}
+              id={`component-sample-${componentGroup.componentId}`}
+              data-focus-id={`component:${componentGroup.componentId}`}
+              title={componentGroup.title}
+              extra={<Tag color="blue">{componentGroup.category}</Tag>}
+              className="component-samples-layout__card"
+            >
+              <Space direction="vertical" size={16} className="component-samples-layout__section">
+                <div>
+                  <Paragraph>{componentGroup.description}</Paragraph>
+                  <Text type="secondary" code>
+                    {componentGroup.componentId}
+                  </Text>
+                </div>
+
+                {componentGroup.baseSample ? (
+                  <div className="component-samples-layout__sample-block">
+                    <Title level={5}>Base Sample</Title>
+                    <div>{createElement(componentGroup.baseSample.Sample)}</div>
+                  </div>
+                ) : null}
+
+                {componentGroup.pluginSamples.length > 0 ? (
+                  <div className="component-samples-layout__sample-block">
+                    <Title level={5}>Plugin Samples</Title>
+                    <Flex vertical gap={16}>
+                      {componentGroup.pluginSamples.map(({ modulePath, Sample, sampleMeta }) => (
+                        <Card
+                          key={modulePath}
+                          size="small"
+                          data-focus-id={`component:${componentGroup.componentId}:${sampleMeta.id}`}
+                          title={sampleMeta.title}
+                          extra={<Text code>{sampleMeta.variantLabel ?? sampleMeta.id}</Text>}
+                        >
+                          <Paragraph>{sampleMeta.description}</Paragraph>
+                          {createElement(Sample)}
+                        </Card>
+                      ))}
+                    </Flex>
+                  </div>
+                ) : null}
+
+                {componentGroup.featureSamples.length > 0 ? (
+                  <div className="component-samples-layout__sample-block">
+                    <Title level={5}>Feature Samples</Title>
+                    <Flex vertical gap={16}>
+                      {componentGroup.featureSamples.map(({ modulePath, Sample, sampleMeta }) => (
+                        <Card
+                          key={modulePath}
+                          size="small"
+                          data-focus-id={`component:${componentGroup.componentId}:${sampleMeta.id}`}
+                          title={sampleMeta.title}
+                          extra={<Text code>{sampleMeta.variantLabel ?? sampleMeta.id}</Text>}
+                        >
+                          <Paragraph>{sampleMeta.description}</Paragraph>
+                          {createElement(Sample)}
+                        </Card>
+                      ))}
+                    </Flex>
+                  </div>
+                ) : null}
+              </Space>
+            </Card>
+          ))}
+        </Flex>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/layout/component-sample-gallery/index.ts b/src/features/layout/component-sample-gallery/index.ts
new file mode 100755
index 0000000..b1db674
--- /dev/null
+++ b/src/features/layout/component-sample-gallery/index.ts
@@ -0,0 +1,2 @@
+export { ComponentSamplesLayout } from './ComponentSamplesLayout';
+export type { ComponentSamplesLayoutProps } from './ComponentSamplesLayout';
diff --git a/src/features/layout/dashboard-feature-gallery/DashboardFeatureGalleryLayout.tsx b/src/features/layout/dashboard-feature-gallery/DashboardFeatureGalleryLayout.tsx
new file mode 100755
index 0000000..10abb80
--- /dev/null
+++ b/src/features/layout/dashboard-feature-gallery/DashboardFeatureGalleryLayout.tsx
@@ -0,0 +1,12 @@
+import { Flex } from 'antd';
+import { TmsDashboardFeatureSamples } from '../../dashboard/TmsDashboardFeatureSamples';
+import { WmsDashboardFeatureSamples } from '../../dashboard/WmsDashboardFeatureSamples';
+
+export function DashboardFeatureGalleryLayout() {
+  return (
+    <Flex vertical gap={20} className="feature-dashboard-gallery">
+      <WmsDashboardFeatureSamples />
+      <TmsDashboardFeatureSamples />
+    </Flex>
+  );
+}
diff --git a/src/features/layout/dashboard-feature-gallery/index.ts b/src/features/layout/dashboard-feature-gallery/index.ts
new file mode 100755
index 0000000..fed5e44
--- /dev/null
+++ b/src/features/layout/dashboard-feature-gallery/index.ts
@@ -0,0 +1 @@
+export { DashboardFeatureGalleryLayout } from './DashboardFeatureGalleryLayout';
diff --git a/src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx b/src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx
new file mode 100755
index 0000000..e6401a1
--- /dev/null
+++ b/src/features/layout/dashboard-report-gallery/DashboardReportGalleryLayout.tsx
@@ -0,0 +1,39 @@
+import { Empty, Flex } from 'antd';
+import { createElement, useEffect, useState } from 'react';
+import { widgetSampleEntries } from '../../../app/manifests/samples.manifest';
+import type { LoadedSampleEntry } from '../../../samples/registry';
+import { resolveSampleEntries } from '../../../samples/registry';
+
+export function DashboardReportGalleryLayout() {
+  const [dashboardSamples, setDashboardSamples] = useState<LoadedSampleEntry[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void resolveSampleEntries(widgetSampleEntries, '/widgets/').then((loadedEntries) => {
+      if (mounted) {
+        setDashboardSamples(
+          loadedEntries.filter((entry) => entry.sampleMeta.componentId === 'dashboard-report-card'),
+        );
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (dashboardSamples.length === 0) {
+    return <Empty description="표시할 대시보드 카드 샘플이 없습니다." />;
+  }
+
+  return (
+    <Flex gap={20} wrap className="dashboard-widget-grid">
+      {dashboardSamples.map(({ modulePath, Sample }) => (
+        <div key={modulePath} className="dashboard-widget-grid__item">
+          {createElement(Sample)}
+        </div>
+      ))}
+    </Flex>
+  );
+}
diff --git a/src/features/layout/dashboard-report-gallery/index.ts b/src/features/layout/dashboard-report-gallery/index.ts
new file mode 100755
index 0000000..ffbf732
--- /dev/null
+++ b/src/features/layout/dashboard-report-gallery/index.ts
@@ -0,0 +1 @@
+export { DashboardReportGalleryLayout } from './DashboardReportGalleryLayout';
diff --git a/src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx b/src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx
new file mode 100755
index 0000000..d18a4cb
--- /dev/null
+++ b/src/features/layout/docs-markdown-preview/DocsMarkdownPreviewLayout.tsx
@@ -0,0 +1,87 @@
+import { Card, Empty, Flex, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { docsMarkdownEntries } from '../../../app/manifests/docs.manifest';
+import { FolderTreeNav } from '../../../components/navigation';
+import {
+  MarkdownPreviewCard,
+  resolveMarkdownDocuments,
+  type MarkdownDocument,
+} from '../../../components/markdownPreview';
+
+const { Text } = Typography;
+
+export function DocsMarkdownPreviewLayout() {
+  const [documents, setDocuments] = useState<MarkdownDocument[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void resolveMarkdownDocuments(docsMarkdownEntries, '/docs/').then((loadedDocuments) => {
+      if (mounted) {
+        setDocuments(loadedDocuments);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  const grouped = useMemo(() => {
+    const folderMap = new Map<string, typeof documents>();
+
+    documents.forEach((document) => {
+      const bucket = folderMap.get(document.folder) ?? [];
+      bucket.push(document);
+      folderMap.set(document.folder, bucket);
+    });
+
+    return Array.from(folderMap.entries()).sort((left, right) => left[0].localeCompare(right[0]));
+  }, [documents]);
+
+  if (documents.length === 0) {
+    return <Empty description="표시할 docs markdown 문서가 없습니다." />;
+  }
+
+  return (
+    <div className="docs-markdown-layout">
+      <aside className="docs-markdown-layout__sidebar">
+        <Card title="Docs Folders" className="component-samples-layout__nav-card">
+          <FolderTreeNav
+            title="Docs Tree"
+            groups={grouped.map(([folder, folderDocuments]) => ({
+              id: `docs-folder-${folder}`,
+              label: folder,
+              items: folderDocuments.map((document) => ({
+                id: document.id,
+                label: document.title,
+                href: `#doc-item-${document.id}`,
+              })),
+            }))}
+          />
+        </Card>
+      </aside>
+
+      <div className="docs-markdown-layout__content">
+        <Flex vertical gap={20}>
+          {grouped.map(([folder, folderDocuments]) => (
+            <section key={folder} id={`docs-folder-${folder}`}>
+              <Card title={folder} extra={<Text code>{folderDocuments.length} docs</Text>}>
+                <Flex vertical gap={16}>
+                  {folderDocuments.map((document) => (
+                    <div
+                      key={document.id}
+                      id={`doc-item-${document.id}`}
+                      className="feature-markdown-list__item"
+                    >
+                      <MarkdownPreviewCard document={document} />
+                    </div>
+                  ))}
+                </Flex>
+              </Card>
+            </section>
+          ))}
+        </Flex>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/layout/docs-markdown-preview/index.ts b/src/features/layout/docs-markdown-preview/index.ts
new file mode 100755
index 0000000..f125ac4
--- /dev/null
+++ b/src/features/layout/docs-markdown-preview/index.ts
@@ -0,0 +1 @@
+export { DocsMarkdownPreviewLayout } from './DocsMarkdownPreviewLayout';
diff --git a/src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx b/src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx
new file mode 100755
index 0000000..8aa5aa0
--- /dev/null
+++ b/src/features/layout/feature-markdown-preview/FeatureMarkdownPreviewListLayout.tsx
@@ -0,0 +1,12 @@
+import { featureMarkdownEntries } from '../../../app/manifests/docs.manifest';
+import { MarkdownPreviewList } from '../../../components/markdownPreview';
+
+export function FeatureMarkdownPreviewListLayout() {
+  return (
+    <MarkdownPreviewList
+      entries={featureMarkdownEntries}
+      basePath="/features/"
+      emptyDescription="표시할 feature markdown 문서가 없습니다."
+    />
+  );
+}
diff --git a/src/features/layout/feature-markdown-preview/index.ts b/src/features/layout/feature-markdown-preview/index.ts
new file mode 100755
index 0000000..4d6e143
--- /dev/null
+++ b/src/features/layout/feature-markdown-preview/index.ts
@@ -0,0 +1 @@
+export { FeatureMarkdownPreviewListLayout } from './FeatureMarkdownPreviewListLayout';
diff --git a/src/features/layout/widget-registry-gallery/WidgetRegistryLayout.tsx b/src/features/layout/widget-registry-gallery/WidgetRegistryLayout.tsx
new file mode 100755
index 0000000..0bd4dc1
--- /dev/null
+++ b/src/features/layout/widget-registry-gallery/WidgetRegistryLayout.tsx
@@ -0,0 +1,33 @@
+import { Card, Empty, Flex, List, Tag, Typography } from 'antd';
+import { registeredWidgets } from '../../../widgets/registry';
+import { resolveWidgetFeatures } from '../../../widgets/core';
+
+const { Paragraph, Text } = Typography;
+
+export function WidgetRegistryLayout() {
+  if (registeredWidgets.length === 0) {
+    return <Empty description="등록된 위젯이 없습니다." />;
+  }
+
+  return (
+    <Flex gap={20} wrap className="sample-widgets-layout">
+      {registeredWidgets.map((widget) => (
+        <div key={widget.id} className="sample-widgets-layout__item">
+          <Card title={widget.title} extra={<Text code>{widget.id}</Text>}>
+            <Paragraph>{widget.description}</Paragraph>
+            <List
+              size="small"
+              dataSource={resolveWidgetFeatures(widget.features)}
+              renderItem={(feature) => (
+                <List.Item>
+                  <Tag color="blue">{feature.label}</Tag>
+                  <span>{feature.description}</span>
+                </List.Item>
+              )}
+            />
+          </Card>
+        </div>
+      ))}
+    </Flex>
+  );
+}
diff --git a/src/features/layout/widget-registry-gallery/index.ts b/src/features/layout/widget-registry-gallery/index.ts
new file mode 100755
index 0000000..f656858
--- /dev/null
+++ b/src/features/layout/widget-registry-gallery/index.ts
@@ -0,0 +1 @@
+export { WidgetRegistryLayout } from './WidgetRegistryLayout';
diff --git a/src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx b/src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx
new file mode 100755
index 0000000..9e7f4ef
--- /dev/null
+++ b/src/features/layout/widget-sample-gallery/SampleWidgetsLayout.tsx
@@ -0,0 +1,56 @@
+import { Empty, Flex } from 'antd';
+import { createElement, useEffect, useState } from 'react';
+import type { LoadedSampleEntry, SampleEntry } from '../../../samples/registry';
+import { resolveSampleEntries } from '../../../samples/registry';
+
+export type SampleWidgetsLayoutProps = {
+  entries: SampleEntry[];
+  pathFilter?: string;
+  includeComponentIds?: string[];
+};
+
+export function SampleWidgetsLayout({
+  entries,
+  pathFilter = '/widgets/',
+  includeComponentIds = [],
+}: SampleWidgetsLayoutProps) {
+  const [sampleEntries, setSampleEntries] = useState<LoadedSampleEntry[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void resolveSampleEntries(entries, pathFilter).then((loadedEntries) => {
+      if (mounted) {
+        setSampleEntries(loadedEntries);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [entries, pathFilter]);
+
+  const visibleEntries =
+    includeComponentIds.length > 0
+      ? sampleEntries.filter((entry) => includeComponentIds.includes(entry.sampleMeta.componentId))
+      : sampleEntries;
+
+  if (visibleEntries.length === 0) {
+    return <Empty description="표시할 위젯 샘플이 없습니다." />;
+  }
+
+  return (
+    <Flex gap={20} wrap className="sample-widgets-layout">
+      {visibleEntries.map(({ modulePath, Sample, sampleMeta }) => (
+        <div
+          key={modulePath}
+          id={`widget-sample-${sampleMeta.componentId}`}
+          className="sample-widgets-layout__item"
+          data-focus-id={`widget:${sampleMeta.componentId}`}
+        >
+          <div className="sample-widgets-layout__item">{createElement(Sample)}</div>
+        </div>
+      ))}
+    </Flex>
+  );
+}
diff --git a/src/features/layout/widget-sample-gallery/index.ts b/src/features/layout/widget-sample-gallery/index.ts
new file mode 100755
index 0000000..34f6d4d
--- /dev/null
+++ b/src/features/layout/widget-sample-gallery/index.ts
@@ -0,0 +1,2 @@
+export { SampleWidgetsLayout } from './SampleWidgetsLayout';
+export type { SampleWidgetsLayoutProps } from './SampleWidgetsLayout';
diff --git a/src/features/markdownPreview/FeatureMarkdownPreviewCard.tsx b/src/features/markdownPreview/FeatureMarkdownPreviewCard.tsx
new file mode 100755
index 0000000..9695ae0
--- /dev/null
+++ b/src/features/markdownPreview/FeatureMarkdownPreviewCard.tsx
@@ -0,0 +1,3 @@
+import { MarkdownPreviewCard } from '../../components/markdownPreview';
+
+export const FeatureMarkdownPreviewCard = MarkdownPreviewCard;
diff --git a/src/features/markdownPreview/index.ts b/src/features/markdownPreview/index.ts
new file mode 100755
index 0000000..a867b29
--- /dev/null
+++ b/src/features/markdownPreview/index.ts
@@ -0,0 +1 @@
+export { FeatureMarkdownPreviewCard } from './FeatureMarkdownPreviewCard';
diff --git a/src/features/overview.md b/src/features/overview.md
new file mode 100755
index 0000000..3fea88a
--- /dev/null
+++ b/src/features/overview.md
@@ -0,0 +1,9 @@
+# Features Overview
+
+이 영역은 현재 프로젝트에 종속된 기능과 화면 구성을 관리합니다.
+
+## 목적
+
+- 공통 `components`, `widgets`와 분리된 프로젝트 전용 기능 관리
+- 기능별 문서, 화면 조합, 레이아웃을 한 곳에서 정리
+- 향후 `dashboard`, `sampleBoard`, `docsViewer` 같은 프로젝트 전용 기능 확장
diff --git a/src/features/planBoard/PlanBoardPage.tsx b/src/features/planBoard/PlanBoardPage.tsx
new file mode 100755
index 0000000..dca9ff5
--- /dev/null
+++ b/src/features/planBoard/PlanBoardPage.tsx
@@ -0,0 +1,3834 @@
+import {
+  ArrowLeftOutlined,
+  CloseOutlined,
+  CopyOutlined,
+  DownOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  Empty,
+  Flex,
+  Grid,
+  Input,
+  List,
+  Modal,
+  Segmented,
+  Select,
+  Space,
+  Spin,
+  Tag,
+  Tabs,
+  Typography,
+  message,
+} from 'antd';
+import { memo, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useAppConfig, type AppConfig } from '../../app/main/appConfig';
+import { useTokenAccess } from '../../app/main/tokenAccess';
+import './planBoard.css';
+import {
+  type EvidenceAttachmentItem,
+  EvidenceAttachmentPreviewBody,
+  EvidenceAttachmentStrip,
+} from '../../components/evidenceAttachmentStrip';
+import { CodexDiffPreviewer, PreviewerUI } from '../../components/previewer';
+import {
+  appendPlanActionHistory,
+  appendPlanIssueAction,
+  createPlanItem,
+  deletePlanItem,
+  type PlanApiRequestMeta,
+  fetchPlanActionHistories,
+  fetchPlanIssueHistories,
+  fetchPlanItemsWithLatestSourceWorks,
+  fetchReleaseReviewBoardItems,
+  fetchPlanSourceWorkHistories,
+  fetchPlanSourceWorkHistory,
+  runPlanAction,
+  setupPlanBoard,
+  updatePlanItemJangsingProcessingRequired,
+  updatePlanItem,
+} from './api';
+import {
+  getPlanQuickFilterLabel,
+  isAutomationFailedItem,
+  isReleasePendingMainItem,
+  isWorkingPlanItem,
+  type PlanQuickFilter,
+} from './quickFilters';
+import { PlanListDetailLayout } from './PlanListDetailLayout';
+import { maskNotePreviewByWord } from './noteMasking';
+import type {
+  PlanActionHistory,
+  PlanActionType,
+  PlanAutomationType,
+  PlanAutomationUsageSnapshot,
+  PlanDraft,
+  PlanFilterStatus,
+  PlanIssueHistory,
+  PlanItem,
+  PlanReleaseReviewBoardItem,
+  PlanSourceWorkHistory,
+} from './types';
+
+const { Paragraph, Text, Title } = Typography;
+const { TextArea } = Input;
+
+const statusTagColorMap: Record<PlanDraft['status'], string> = {
+  등록: 'default',
+  작업중: 'processing',
+  작업완료: 'cyan',
+  릴리즈완료: 'geekblue',
+  완료: 'success',
+};
+const ACTIVE_WORKER_STATUSES = new Set([
+  '브랜치생성중',
+  '자동작업중',
+  'release반영중',
+  'main반영중',
+]);
+const AUTO_REFRESH_CANDIDATE_WORKER_STATUSES = new Set([
+  ...ACTIVE_WORKER_STATUSES,
+  '브랜치준비',
+  'release반영대기',
+  'main반영대기',
+]);
+const AUTO_REFRESH_LONG_PRESS_MS = 700;
+
+const COLLAPSIBLE_DETAIL_MAX_LINES = 4;
+const COLLAPSIBLE_DETAIL_MAX_CHARS = 180;
+const PLAN_LIST_PAGE_SIZE = 10;
+type WorkerStateFilter = 'all' | 'active' | 'waiting' | 'failed' | 'done' | 'idle';
+type ReleaseStateFilter = 'all' | 'pending' | 'merged' | 'failed';
+type MainStateFilter = 'all' | 'pending' | 'merged' | 'failed' | 'not-targeted';
+type IssueStateFilter = 'all' | 'open' | 'none';
+type CostStateFilter = 'all' | 'recorded' | 'none' | 'stable' | 'attention' | 'warning' | 'high';
+const WORKER_STATE_FILTER_OPTIONS: Array<{ label: string; value: WorkerStateFilter }> = [
+  { label: '작업자 전체', value: 'all' },
+  { label: '진행중', value: 'active' },
+  { label: '대기', value: 'waiting' },
+  { label: '실패', value: 'failed' },
+  { label: '완료', value: 'done' },
+  { label: '미시작', value: 'idle' },
+];
+const RELEASE_STATE_FILTER_OPTIONS: Array<{ label: string; value: ReleaseStateFilter }> = [
+  { label: 'release 전체', value: 'all' },
+  { label: 'release 대기/진행', value: 'pending' },
+  { label: 'release 완료', value: 'merged' },
+  { label: 'release 실패', value: 'failed' },
+];
+const MAIN_STATE_FILTER_OPTIONS: Array<{ label: string; value: MainStateFilter }> = [
+  { label: 'main 전체', value: 'all' },
+  { label: 'main 대기/진행', value: 'pending' },
+  { label: 'main 완료', value: 'merged' },
+  { label: 'main 실패', value: 'failed' },
+  { label: 'main 미대상', value: 'not-targeted' },
+];
+const PLAN_AUTOMATION_TYPE_OPTIONS: Array<{ label: string; value: PlanAutomationType }> = [
+  { label: '선택 안함', value: 'none' },
+  { label: '작업 요청 등록', value: 'plan' },
+  { label: 'Command 실행', value: 'command_execution' },
+  { label: '비 소스작업', value: 'non_source_work' },
+  { label: 'autoWorker', value: 'auto_worker' },
+];
+const PLAN_AUTOMATION_TYPE_LABELS = new Map(
+  PLAN_AUTOMATION_TYPE_OPTIONS.map((option) => [option.value, option.label] as const),
+);
+const ISSUE_STATE_FILTER_OPTIONS: Array<{ label: string; value: IssueStateFilter }> = [
+  { label: '이슈 전체', value: 'all' },
+  { label: '열린 이슈', value: 'open' },
+  { label: '이슈 없음', value: 'none' },
+];
+const COST_STATE_FILTER_OPTIONS: Array<{ label: string; value: CostStateFilter }> = [
+  { label: '비용상태 전체', value: 'all' },
+  { label: '비용 기록 있음', value: 'recorded' },
+  { label: '비용 기록 없음', value: 'none' },
+  { label: '안정', value: 'stable' },
+  { label: '관심', value: 'attention' },
+  { label: '주의', value: 'warning' },
+  { label: '높음', value: 'high' },
+];
+type ReviewListIndicator = {
+  status: PlanReleaseReviewBoardItem['review']['status'];
+  checkedCount: number;
+  totalCount: number;
+};
+
+function isPlanItemRequestLocked(item: Pick<PlanItem, 'startedAt'> | null | undefined) {
+  return Boolean(item?.startedAt);
+}
+
+const NON_RETRY_NOTIFICATION_PATTERNS = [
+  '다시 실행하지 않았습니다.',
+  '재처리는 요청하지 않았습니다.',
+  '자동 재처리 대상은 없습니다.',
+] as const;
+const TOKEN_ACCESS_REQUIRED_MESSAGE = '설정 > 토큰 관리에서 권한 토큰을 등록한 사용자만 자동화 조회 외 기능을 사용할 수 있습니다.';
+
+function formatPlanNotificationLabel(item: Pick<PlanItem, 'id' | 'workId'>) {
+  const normalizedWorkId = item.workId.trim().replace(/^\[|\]$/g, '').replace(/\s+/g, '').toLowerCase();
+
+  if (!normalizedWorkId || normalizedWorkId === '작업id' || normalizedWorkId === 'workid') {
+    return `#${item.id}`;
+  }
+
+  return item.workId;
+}
+
+function formatPlanListLabel(item: Pick<PlanItem, 'id' | 'workId'>) {
+  const normalizedWorkId = item.workId.trim().replace(/^\[|\]$/g, '').replace(/\s+/g, '').toLowerCase();
+
+  if (!normalizedWorkId || normalizedWorkId === '작업id' || normalizedWorkId === 'workid') {
+    return `#${item.id}`;
+  }
+
+  return `#${item.id} ${item.workId}`;
+}
+
+function formatPlanDateTime(value: string | null | undefined) {
+  if (!value) {
+    return '미기록';
+  }
+
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: 'Asia/Seoul',
+  });
+}
+
+function formatResponseBytes(value: number | null | undefined) {
+  const bytes = Number(value ?? 0);
+
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return '0 B';
+  }
+
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  }
+
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+
+  return `${Math.round(bytes)} B`;
+}
+
+function getReleaseReviewListTagColor(status: PlanReleaseReviewBoardItem['review']['status']) {
+  if (status === 'approved') {
+    return 'success';
+  }
+
+  if (status === 'changes-requested') {
+    return 'error';
+  }
+
+  if (status === 'reviewing') {
+    return 'processing';
+  }
+
+  return 'default';
+}
+
+function getReleaseReviewListTagLabel(review: ReviewListIndicator) {
+  const progressLabel = review.totalCount > 0 ? ` ${review.checkedCount}/${review.totalCount}` : '';
+
+  if (review.status === 'approved') {
+    return `검수완료${progressLabel}`;
+  }
+
+  if (review.status === 'changes-requested') {
+    return `수정필요${progressLabel}`;
+  }
+
+  if (review.status === 'reviewing') {
+    return `검수중${progressLabel}`;
+  }
+
+  return review.totalCount > 0 ? `검수대기 ${review.checkedCount}/${review.totalCount}` : '검수대기';
+}
+
+function resolvePlanHistorySuccessMessage(message: string | undefined, fallback: string) {
+  if (!message) {
+    return fallback;
+  }
+
+  if (NON_RETRY_NOTIFICATION_PATTERNS.some((pattern) => message.includes(pattern))) {
+    return fallback;
+  }
+
+  return message;
+}
+
+function resolveProtectedText(text: string | null | undefined, masked: boolean) {
+  if (!masked) {
+    return text?.trim() ? text : '내용이 없습니다.';
+  }
+
+  return maskNotePreviewByWord(text ?? '');
+}
+
+function isCollapsibleDetailText(value: string) {
+  const trimmedValue = value.trim();
+
+  if (!trimmedValue) {
+    return false;
+  }
+
+  return trimmedValue.length > COLLAPSIBLE_DETAIL_MAX_CHARS || trimmedValue.split(/\r?\n/).length > COLLAPSIBLE_DETAIL_MAX_LINES;
+}
+
+function ExpandableDetailText({
+  text,
+  type,
+}: {
+  text: string;
+  type?: 'secondary' | 'success' | 'warning' | 'danger';
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsible = isCollapsibleDetailText(text);
+
+  return (
+    <div className="plan-board-page__detail-text">
+      <Paragraph
+        className={`plan-board-page__detail-text-body${!expanded && collapsible ? ' plan-board-page__detail-text-body--collapsed' : ''}`}
+        type={type}
+      >
+        {text}
+      </Paragraph>
+      {collapsible ? (
+        <Button
+          type="text"
+          size="small"
+          className="plan-board-page__detail-text-toggle"
+          aria-label={expanded ? '접기' : '펼치기'}
+          icon={expanded ? <UpOutlined /> : <DownOutlined />}
+          onClick={() => {
+            setExpanded((previous) => !previous);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+type ActionButton = {
+  key: PlanActionType;
+  label: string;
+};
+
+function createEmptyDraft(appConfig: AppConfig): PlanDraft {
+  return {
+    id: null,
+    workId: '',
+    note: '',
+    automationType: 'none',
+    status: '등록',
+    jangsingProcessingRequired: appConfig.planDefaults.jangsingProcessingRequired,
+    autoDeployToMain: appConfig.planDefaults.autoDeployToMain,
+    repeatRequestEnabled: false,
+    repeatIntervalMinutes: 60,
+  };
+}
+
+export type PlanBoardPageProps = {
+  statusFilter: PlanFilterStatus;
+  quickFilter?: PlanQuickFilter | null;
+  quickFilterRequestKey?: number;
+  initialSelectedPlanId?: number | null;
+  initialSelectedWorkId?: string | null;
+};
+
+export function PlanBoardPage({
+  statusFilter,
+  quickFilter = null,
+  quickFilterRequestKey = 0,
+  initialSelectedPlanId = null,
+  initialSelectedWorkId = null,
+}: PlanBoardPageProps) {
+  const { hasAccess } = useTokenAccess();
+  const appConfig = useAppConfig();
+  const autoRefreshIntervalMs = appConfig.automation.autoRefreshIntervalSeconds * 1000;
+  const [messageApi, contextHolder] = message.useMessage();
+  const screens = Grid.useBreakpoint();
+  const [items, setItems] = useState<PlanItem[]>([]);
+  const [reviewIndicatorsByPlanId, setReviewIndicatorsByPlanId] = useState<Record<number, ReviewListIndicator>>({});
+  const [listRequestMeta, setListRequestMeta] = useState<PlanApiRequestMeta | null>(null);
+  const [issueHistories, setIssueHistories] = useState<PlanIssueHistory[]>([]);
+  const [actionHistories, setActionHistories] = useState<PlanActionHistory[]>([]);
+  const [sourceWorkHistories, setSourceWorkHistories] = useState<PlanSourceWorkHistory[]>([]);
+  const [selectedSourceWork, setSelectedSourceWork] = useState<PlanSourceWorkHistory | null>(null);
+  const [draft, setDraft] = useState<PlanDraft>(() => createEmptyDraft(appConfig));
+  const [noteInputValue, setNoteInputValue] = useState('');
+  const [actionNote, setActionNote] = useState('');
+  const [issueActionNote, setIssueActionNote] = useState('');
+  const [resolveLatestIssue, setResolveLatestIssue] = useState(false);
+  const [retryLatestIssue, setRetryLatestIssue] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [workerStateFilter, setWorkerStateFilter] = useState<WorkerStateFilter>('all');
+  const [releaseStateFilter, setReleaseStateFilter] = useState<ReleaseStateFilter>('all');
+  const [mainStateFilter, setMainStateFilter] = useState<MainStateFilter>('all');
+  const [issueStateFilter, setIssueStateFilter] = useState<IssueStateFilter>('all');
+  const [costStateFilter, setCostStateFilter] = useState<CostStateFilter>('all');
+  const [currentListPage, setCurrentListPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [jangsingProcessingSavingId, setJangsingProcessingSavingId] = useState<number | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [suppressAutoOpen, setSuppressAutoOpen] = useState(false);
+  const [sourceViewerOpen, setSourceViewerOpen] = useState(false);
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(appConfig.automation.autoRefreshEnabled);
+  const [autoRefreshRemainingMs, setAutoRefreshRemainingMs] = useState(autoRefreshIntervalMs);
+  const [pendingSelection, setPendingSelection] = useState<{
+    planId: number | null;
+    workId: string | null;
+  }>({
+    planId: initialSelectedPlanId,
+    workId: initialSelectedWorkId,
+  });
+  const draftRef = useRef(draft);
+  const savingRef = useRef(saving);
+  const previousWorkerStatusMapRef = useRef<Map<number, string | null>>(new Map());
+  const notifiedAutomationStartKeysRef = useRef<Set<string>>(new Set());
+  const notifiedAutomationFailureKeysRef = useRef<Set<string>>(new Set());
+  const hasLoadedItemsRef = useRef(false);
+  const hasPendingAutomation = useMemo(
+    () => items.some((item) => shouldAutoRefreshAutomation(item.workerStatus)),
+    [items],
+  );
+  const isAutoRefreshRunning = hasPendingAutomation && autoRefreshEnabled;
+  const autoRefreshCountdownSeconds = Math.max(1, Math.ceil(autoRefreshRemainingMs / 1000));
+
+  draftRef.current = draft;
+  savingRef.current = saving;
+
+  useEffect(() => {
+    setNoteInputValue(draft.note);
+  }, [draft.id, draft.note]);
+
+  function updateDraft(nextDraft: PlanDraft | ((previous: PlanDraft) => PlanDraft)) {
+    setDraft((previous) => {
+      const resolvedDraft = typeof nextDraft === 'function' ? nextDraft(previous) : nextDraft;
+      draftRef.current = resolvedDraft;
+      return resolvedDraft;
+    });
+  }
+
+  async function notifyAutomationStarted(item: PlanItem) {
+    if (!appConfig.automation.notifyOnAutomationStart) {
+      return;
+    }
+
+    const presentation = getAutomationStatusPresentation(item);
+    const body = `${formatPlanNotificationLabel(item)} 자동화 시작: ${presentation.description ?? presentation.label}`;
+
+    messageApi.info(body);
+  }
+
+  async function notifyAutomationFailed(item: PlanItem) {
+    if (!appConfig.automation.notifyOnAutomationFailure) {
+      return;
+    }
+
+    messageApi.error(`${formatPlanNotificationLabel(item)} 자동화 실패`);
+  }
+
+  function isAutomationFailureStatus(status: PlanItem['workerStatus']) {
+    return (
+      status === '브랜치실패' ||
+      status === '자동작업실패' ||
+      status === 'release반영실패' ||
+      status === 'main반영실패'
+    );
+  }
+
+  function syncAutomationStartNotifications(nextItems: PlanItem[]) {
+    const nextWorkerStatusMap = new Map<number, string | null>();
+
+    nextItems.forEach((item) => {
+      nextWorkerStatusMap.set(item.id, item.workerStatus);
+    });
+
+    if (!hasLoadedItemsRef.current) {
+      previousWorkerStatusMapRef.current = nextWorkerStatusMap;
+      hasLoadedItemsRef.current = true;
+      return;
+    }
+
+    nextItems.forEach((item) => {
+      const previousWorkerStatus = previousWorkerStatusMapRef.current.get(item.id) ?? null;
+      const automationBecameActive =
+        isAutomationInProgress(item.workerStatus) && !isAutomationInProgress(previousWorkerStatus);
+      const notificationKey = `${item.id}:${item.startedAt ?? item.updatedAt}:${item.workerStatus ?? 'idle'}`;
+      const failureBecameActive =
+        isAutomationFailureStatus(item.workerStatus) && !isAutomationFailureStatus(previousWorkerStatus);
+      const failureNotificationKey = `fail:${item.id}:${item.updatedAt}:${item.workerStatus ?? 'idle'}`;
+
+      if (!automationBecameActive || notifiedAutomationStartKeysRef.current.has(notificationKey)) {
+        if (!failureBecameActive || notifiedAutomationFailureKeysRef.current.has(failureNotificationKey)) {
+          return;
+        }
+      }
+
+      if (automationBecameActive && !notifiedAutomationStartKeysRef.current.has(notificationKey)) {
+        notifiedAutomationStartKeysRef.current.add(notificationKey);
+        void notifyAutomationStarted(item);
+      }
+
+      if (failureBecameActive && !notifiedAutomationFailureKeysRef.current.has(failureNotificationKey)) {
+        notifiedAutomationFailureKeysRef.current.add(failureNotificationKey);
+        void notifyAutomationFailed(item);
+      }
+    });
+
+    previousWorkerStatusMapRef.current = nextWorkerStatusMap;
+  }
+
+  const filteredItems = useMemo(() => {
+    const keyword = searchKeyword.trim().toLocaleLowerCase('ko-KR');
+
+    return items
+      .filter((item) => {
+        if (quickFilter === 'release-pending-main') {
+          return isReleasePendingMainItem(item);
+        }
+
+        if (quickFilter === 'automation-failed') {
+          return isAutomationFailedItem(item);
+        }
+
+        if (quickFilter === 'working') {
+          return isWorkingPlanItem(item);
+        }
+
+        if (statusFilter === 'all') {
+          return true;
+        }
+
+        if (statusFilter === 'in-progress') {
+          return !isReleaseCompletedPlanItem(item);
+        }
+
+        if (statusFilter === 'done') {
+          return isReleaseCompletedPlanItem(item);
+        }
+
+        return item.hasOpenIssues && !isReleaseCompletedPlanItem(item);
+      })
+      .filter((item) => matchesWorkerStateFilter(item, workerStateFilter))
+      .filter((item) => matchesReleaseStateFilter(item, releaseStateFilter))
+      .filter((item) => matchesMainStateFilter(item, mainStateFilter))
+      .filter((item) => matchesIssueStateFilter(item, issueStateFilter))
+      .filter((item) =>
+        matchesCostStateFilter(item, costStateFilter, buildAutomationUsageSummaryFromSnapshot(item.usageSnapshot, appConfig)),
+      )
+      .filter((item) => {
+        if (!keyword) {
+          return true;
+        }
+
+        const searchableText = [
+          item.workId,
+          item.note,
+          item.status,
+          item.assignedBranch,
+          item.releaseTarget,
+          item.workerStatus,
+          ...(item.issueTags ?? []),
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLocaleLowerCase('ko-KR');
+
+        return searchableText.includes(keyword);
+      })
+      .sort((left, right) => {
+        if (statusFilter === 'in-progress') {
+          const automationPriorityDiff = comparePlanItemsByAutomationPriority(left, right);
+
+          if (automationPriorityDiff !== 0) {
+            return automationPriorityDiff;
+          }
+        }
+
+        return comparePlanItemsByRecent(left, right);
+      });
+  }, [
+    items,
+    costStateFilter,
+    issueStateFilter,
+    mainStateFilter,
+    quickFilter,
+    releaseStateFilter,
+    searchKeyword,
+    statusFilter,
+    workerStateFilter,
+  ]);
+
+  const selectedItem = useMemo(
+    () => items.find((item) => item.id === draft.id) ?? null,
+    [draft.id, items],
+  );
+  const selectedReleaseReviewNote = typeof selectedItem?.releaseReviewNote === 'string' ? selectedItem.releaseReviewNote : '';
+
+  const actionButtons = useMemo<ActionButton[]>(() => {
+    if (!selectedItem) {
+      return [];
+    }
+
+    const needsWorkRetryBecauseBranchMissing =
+      (selectedItem.status === '작업완료' || selectedItem.status === '릴리즈완료') &&
+      (selectedItem.workerStatus === 'release반영실패' || selectedItem.workerStatus === 'main반영실패') &&
+      Boolean(selectedItem.lastError?.includes('브랜치를 찾을 수 없습니다'));
+    const canRetryWork =
+      (selectedItem.status === '작업중' &&
+        (selectedItem.workerStatus === '자동작업실패' || Boolean(selectedItem.lastError))) ||
+      needsWorkRetryBecauseBranchMissing;
+    const canRetryReleaseMerge =
+      selectedItem.status === '작업완료' &&
+      selectedItem.workerStatus === 'release반영실패' &&
+      !needsWorkRetryBecauseBranchMissing;
+
+    const buttons: ActionButton[] = [];
+
+    if (selectedItem.workerStatus === '브랜치실패') {
+      buttons.push({ key: 'retry-branch', label: '브랜치 재시도' });
+    }
+
+    if (selectedItem.status === '등록' && selectedItem.workerStatus !== '브랜치생성중') {
+      buttons.push({ key: 'start-work', label: '작업시작' });
+    }
+
+    if (canRetryWork) {
+      buttons.push({ key: 'retry-work', label: '작업 재처리' });
+    }
+
+    if (selectedItem.status === '작업중') {
+      buttons.push({ key: 'complete-development', label: '작업완료 처리' });
+    }
+
+    if (canRetryReleaseMerge) {
+      buttons.push({ key: 'retry-merge', label: 'release 반영 재시도' });
+    }
+
+    if (
+      selectedItem.status === '릴리즈완료' ||
+      (selectedItem.status === '작업완료' && selectedItem.workerStatus === 'release반영실패')
+    ) {
+      buttons.push({ key: 'cancel-release', label: '작업취소' });
+    }
+
+    buttons.push({
+      key: 'request-main-merge',
+      label:
+        selectedItem.workerStatus === 'main반영실패'
+          ? 'main 일괄 반영 재시도'
+          : 'main 일괄 반영 요청',
+    });
+
+    return buttons;
+  }, [selectedItem]);
+
+  const combinedHistories = useMemo(() => {
+    return [
+      ...actionHistories.map((history) => ({
+        id: `action-${history.id}`,
+        createdAt: history.createdAt,
+        kind: 'action' as const,
+        action: history,
+      })),
+      ...issueHistories.map((history) => ({
+        id: `issue-${history.id}`,
+        createdAt: history.createdAt,
+        kind: 'issue' as const,
+        issue: history,
+      })),
+    ].sort((left, right) => {
+      const timeDiff = new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime();
+
+      if (timeDiff !== 0) {
+        return timeDiff;
+      }
+
+      return left.id.localeCompare(right.id);
+    });
+  }, [actionHistories, issueHistories]);
+
+  useEffect(() => {
+    void loadItems(statusFilter);
+  }, [hasAccess, statusFilter]);
+
+  useEffect(() => {
+    if (!quickFilter) {
+      return;
+    }
+
+    setSearchKeyword('');
+    setCurrentListPage(1);
+  }, [quickFilter, quickFilterRequestKey]);
+
+  useEffect(() => {
+    setCurrentListPage(1);
+  }, [costStateFilter, issueStateFilter, mainStateFilter, releaseStateFilter, searchKeyword, statusFilter, workerStateFilter]);
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil(filteredItems.length / PLAN_LIST_PAGE_SIZE));
+
+    setCurrentListPage((previous) => Math.min(previous, totalPages));
+  }, [filteredItems.length]);
+
+  useEffect(() => {
+    if (!hasAccess) {
+      setEditorOpen(false);
+      setSourceViewerOpen(false);
+      setSelectedSourceWork(null);
+    }
+  }, [hasAccess]);
+
+  useEffect(() => {
+    setPendingSelection({
+      planId: initialSelectedPlanId,
+      workId: initialSelectedWorkId,
+    });
+  }, [initialSelectedPlanId, initialSelectedWorkId]);
+
+  useEffect(() => {
+    setAutoRefreshEnabled(appConfig.automation.autoRefreshEnabled);
+    setAutoRefreshRemainingMs(autoRefreshIntervalMs);
+  }, [appConfig.automation.autoRefreshEnabled, autoRefreshIntervalMs]);
+
+  useEffect(() => {
+    if (!hasPendingAutomation || !autoRefreshEnabled) {
+      setAutoRefreshRemainingMs(autoRefreshIntervalMs);
+      return;
+    }
+
+    let cancelled = false;
+    const startedAt = Date.now();
+
+    setAutoRefreshRemainingMs(autoRefreshIntervalMs);
+
+    const countdownTimer = window.setInterval(() => {
+      const elapsed = Date.now() - startedAt;
+      const remaining = Math.max(autoRefreshIntervalMs - elapsed, 0);
+      setAutoRefreshRemainingMs(remaining);
+    }, 1000);
+
+    const refreshTimer = window.setTimeout(() => {
+      if (cancelled || savingRef.current) {
+        return;
+      }
+
+      setAutoRefreshRemainingMs(autoRefreshIntervalMs);
+      void loadItems(statusFilter);
+    }, autoRefreshIntervalMs);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(countdownTimer);
+      window.clearTimeout(refreshTimer);
+    };
+  }, [autoRefreshEnabled, autoRefreshIntervalMs, hasPendingAutomation, items, statusFilter]);
+
+  useEffect(() => {
+    if (!draft.id) {
+      setIssueHistories([]);
+      setActionHistories([]);
+      setSourceWorkHistories([]);
+      setActionNote('');
+      setIssueActionNote('');
+      setResolveLatestIssue(false);
+      setRetryLatestIssue(false);
+      return;
+    }
+
+    if (!hasAccess) {
+      setIssueHistories([]);
+      setActionHistories([]);
+      setSourceWorkHistories([]);
+      setActionNote('');
+      setIssueActionNote('');
+      setResolveLatestIssue(false);
+      setRetryLatestIssue(false);
+      return;
+    }
+
+    void Promise.all([
+      loadIssueHistories(draft.id),
+      loadActionHistories(draft.id),
+      loadSourceWorkHistories(draft.id),
+    ]);
+  }, [draft.id, hasAccess]);
+
+  useEffect(() => {
+    if (pendingSelection.planId || pendingSelection.workId) {
+      const matchedItem = items.find((item) => {
+        if (pendingSelection.planId && item.id === pendingSelection.planId) {
+          return true;
+        }
+
+        if (pendingSelection.workId && item.workId === pendingSelection.workId) {
+          return true;
+        }
+
+        return false;
+      });
+
+      if (matchedItem) {
+        if (draft.id !== matchedItem.id || !editorOpen) {
+          handleSelectItem(matchedItem);
+        }
+
+        setPendingSelection({ planId: null, workId: null });
+      }
+
+      return;
+    }
+
+    if (suppressAutoOpen || searchKeyword.trim() || filteredItems.length === 0 || editorOpen) {
+      return;
+    }
+  }, [
+    draft.id,
+    editorOpen,
+    filteredItems,
+    items,
+    pendingSelection.planId,
+    pendingSelection.workId,
+    searchKeyword,
+    suppressAutoOpen,
+    hasAccess,
+  ]);
+
+  async function loadItems(filter: PlanFilterStatus) {
+    setLoading(true);
+    setErrorMessage(null);
+
+    try {
+      const {
+        items: nextItems,
+        meta,
+      } = await fetchPlanItemsWithLatestSourceWorks(filter);
+      let nextReleaseReviews: PlanReleaseReviewBoardItem[] = [];
+
+      try {
+        nextReleaseReviews = await fetchReleaseReviewBoardItems();
+      } catch {
+        nextReleaseReviews = [];
+      }
+
+      syncAutomationStartNotifications(nextItems);
+      setItems(nextItems);
+      setListRequestMeta(meta);
+      setReviewIndicatorsByPlanId(
+        Object.fromEntries(
+          nextReleaseReviews.map((item) => {
+            const targetIds = item.review.metadata.pageSelectionIds ?? [];
+            const checkedIds = item.review.metadata.checkedPageSelectionIds ?? [];
+
+            return [
+              item.planItem.id,
+              {
+                status: item.review.status,
+                checkedCount: checkedIds.filter((selectionId) => targetIds.includes(selectionId)).length,
+                totalCount: targetIds.length,
+              } satisfies ReviewListIndicator,
+            ];
+          }),
+        ),
+      );
+      if (draft.id) {
+        const nextSelectedItem = nextItems.find((item) => item.id === draft.id);
+        const currentSelectedItem = items.find((item) => item.id === draft.id);
+        const shouldPreserveEditableDraft = editorOpen && !isPlanItemRequestLocked(currentSelectedItem);
+
+        if (nextSelectedItem) {
+          if (!shouldPreserveEditableDraft) {
+            setDraft(toDraft(nextSelectedItem));
+          }
+        } else {
+          setDraft(createEmptyDraft(appConfig));
+          setEditorOpen(false);
+          setSourceViewerOpen(false);
+        }
+      }
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : '작업 목록을 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function loadIssueHistories(planItemId: number) {
+    try {
+      setIssueHistories(await fetchPlanIssueHistories(planItemId));
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '이슈 이력을 불러오지 못했습니다.');
+      setIssueHistories([]);
+    }
+  }
+
+  async function loadActionHistories(planItemId: number) {
+    try {
+      setActionHistories(await fetchPlanActionHistories(planItemId));
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '조치 이력을 불러오지 못했습니다.');
+      setActionHistories([]);
+    }
+  }
+
+  async function loadSourceWorkHistories(planItemId: number) {
+    try {
+      setSourceWorkHistories(await fetchPlanSourceWorkHistories(planItemId));
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '소스 작업 이력을 불러오지 못했습니다.');
+      setSourceWorkHistories([]);
+    }
+  }
+
+  function handleCreateNew() {
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    setDraft(createEmptyDraft(appConfig));
+    setResolveLatestIssue(false);
+    setRetryLatestIssue(true);
+    setEditorOpen(true);
+    setSuppressAutoOpen(false);
+    setSourceViewerOpen(false);
+  }
+
+  function handleSelectItem(item: PlanItem) {
+    setDraft(toDraft(item));
+    setResolveLatestIssue(false);
+    setRetryLatestIssue(true);
+    setEditorOpen(true);
+    setSuppressAutoOpen(false);
+    setSourceViewerOpen(false);
+  }
+
+  function clearNotificationSelectionParams() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    let changed = false;
+
+    if (params.has('planId')) {
+      params.delete('planId');
+      changed = true;
+    }
+
+    if (params.has('workId')) {
+      params.delete('workId');
+      changed = true;
+    }
+
+    if (changed) {
+      const nextSearch = params.toString();
+      const nextUrl = `${window.location.pathname}${nextSearch ? `?${nextSearch}` : ''}`;
+      window.history.replaceState(window.history.state, '', nextUrl);
+    }
+  }
+
+  function closeEditor() {
+    setEditorOpen(false);
+    setSourceViewerOpen(false);
+    setSelectedSourceWork(null);
+    setSuppressAutoOpen(true);
+    clearNotificationSelectionParams();
+    if (!draft.id) {
+      setDraft(createEmptyDraft(appConfig));
+    }
+  }
+
+  async function handleOpenSourceWork(sourceWorkId: number) {
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    if (!draft.id) {
+      return;
+    }
+
+    try {
+      const item = await fetchPlanSourceWorkHistory(draft.id, sourceWorkId);
+      setSelectedSourceWork(item);
+      setSourceViewerOpen(true);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '소스 작업 상세를 불러오지 못했습니다.');
+    }
+  }
+
+  async function handleSetup() {
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    try {
+      await setupPlanBoard();
+      messageApi.success('작업 테이블을 생성했습니다.');
+      await loadItems(statusFilter);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '테이블 생성에 실패했습니다.');
+    }
+  }
+
+  async function handleSave() {
+    if (savingRef.current) {
+      return;
+    }
+
+    const nextDraft = {
+      ...draftRef.current,
+      note: noteInputValue,
+    };
+
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    if (isPlanItemRequestLocked(selectedItem)) {
+      messageApi.warning('자동화 접수된 항목은 수정할 수 없습니다.');
+      return;
+    }
+
+    savingRef.current = true;
+    setSaving(true);
+
+    try {
+      const isNewItem = !nextDraft.id;
+      const savedItem =
+        nextDraft.id && selectedItem && isFunctionCheckEditableStatus(selectedItem.status)
+          ? await updatePlanItemJangsingProcessingRequired(nextDraft.id, nextDraft.jangsingProcessingRequired)
+          : nextDraft.id
+            ? await updatePlanItem(nextDraft)
+            : await createPlanItem(nextDraft);
+      messageApi.success(
+        nextDraft.id
+          ? isFunctionCheckEditableStatus(savedItem.status)
+            ? '기능동작확인을 수정했습니다.'
+            : '작업 항목을 수정했습니다.'
+          : '작업 항목을 등록했습니다.',
+      );
+      await loadItems(statusFilter);
+      updateDraft(toDraft(savedItem));
+      setEditorOpen(!isNewItem || appConfig.planDefaults.openEditorAfterCreate);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '저장에 실패했습니다.');
+    } finally {
+      savingRef.current = false;
+      setSaving(false);
+    }
+  }
+
+  function handleNoteChange(note: string) {
+    setNoteInputValue(note);
+    draftRef.current = {
+      ...draftRef.current,
+      note,
+    };
+  }
+
+  async function handleDelete() {
+    if (savingRef.current || !draftRef.current.id) {
+      return;
+    }
+
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    if (isPlanItemRequestLocked(selectedItem)) {
+      messageApi.warning('자동화 접수된 항목은 삭제할 수 없습니다.');
+      return;
+    }
+
+    if (!window.confirm('선택한 작업 메모를 삭제할까요?')) {
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      await deletePlanItem(draftRef.current.id);
+      messageApi.success('작업 항목을 삭제했습니다.');
+      updateDraft(createEmptyDraft(appConfig));
+      setEditorOpen(false);
+      await loadItems(statusFilter);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '삭제에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleAction(action: PlanActionType) {
+    if (savingRef.current || !draftRef.current.id) {
+      return;
+    }
+
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const response = await runPlanAction(draftRef.current.id, action);
+      messageApi.success(response.message ?? getActionSuccessMessage(action));
+      await loadItems(statusFilter);
+      updateDraft(toDraft(response.item));
+      await Promise.all([
+        loadActionHistories(response.item.id),
+        loadIssueHistories(response.item.id),
+        loadSourceWorkHistories(response.item.id),
+      ]);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '작업 요청에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleIssueAction() {
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    if (savingRef.current || !draftRef.current.id || !issueActionNote.trim()) {
+      messageApi.warning('조치 내용을 입력해 주세요.');
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const response = await appendPlanIssueAction(
+        draftRef.current.id,
+        issueActionNote,
+        resolveLatestIssue,
+        retryLatestIssue,
+      );
+      messageApi.success(resolvePlanHistorySuccessMessage(
+        response.message,
+        resolveLatestIssue ? '이슈 조치 및 해결 기록을 남겼습니다.' : '이슈 조치 기록을 남겼습니다.',
+      ));
+      setIssueActionNote('');
+      setResolveLatestIssue(false);
+      setRetryLatestIssue(false);
+      await Promise.all([
+        loadIssueHistories(draftRef.current.id),
+        loadActionHistories(draftRef.current.id),
+        loadItems(statusFilter),
+      ]);
+      if (response.planItem) {
+        updateDraft(toDraft(response.planItem));
+      }
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '이슈 조치 기록 저장에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleActionNote() {
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    if (savingRef.current || !draftRef.current.id || !actionNote.trim()) {
+      messageApi.warning('추가 조치 내용을 입력해 주세요.');
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const response = await appendPlanActionHistory(draftRef.current.id, actionNote);
+      messageApi.success(resolvePlanHistorySuccessMessage(response.message, '조치 이력을 추가했습니다.'));
+      setActionNote('');
+      await Promise.all([
+        loadItems(statusFilter),
+        loadActionHistories(draftRef.current.id),
+        loadIssueHistories(draftRef.current.id),
+      ]);
+      if (response.planItem) {
+        updateDraft(toDraft(response.planItem));
+      }
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '조치 이력 저장에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleCopyText(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      messageApi.success('복사했습니다.');
+    } catch {
+      messageApi.error('복사에 실패했습니다.');
+    }
+  }
+
+  async function handleJangsingProcessingChange(id: number, jangsingProcessingRequired: boolean) {
+    if (jangsingProcessingSavingId === id) {
+      return;
+    }
+
+    if (!hasAccess) {
+      messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+      return;
+    }
+
+    const currentItem = items.find((item) => item.id === id);
+
+    if (!currentItem || currentItem.jangsingProcessingRequired === jangsingProcessingRequired) {
+      return;
+    }
+
+    if (isPlanItemRequestLocked(currentItem)) {
+      messageApi.warning('자동화 접수된 항목은 기능동작확인을 수정할 수 없습니다.');
+      return;
+    }
+
+    if (!isFunctionCheckEditableStatus(currentItem.status)) {
+      messageApi.warning('기능동작확인은 작업완료 건만 수정할 수 있습니다.');
+      return;
+    }
+
+    setJangsingProcessingSavingId(id);
+
+    try {
+      const updatedItem = await updatePlanItemJangsingProcessingRequired(id, jangsingProcessingRequired);
+      setItems((previous) =>
+        previous.map((item) => (item.id === id ? updatedItem : item)).sort(comparePlanItemsByRecent),
+      );
+
+      if (draftRef.current.id === id) {
+        updateDraft(toDraft(updatedItem));
+      }
+
+      messageApi.success(`기능동작확인을 ${getFunctionCheckLabel(jangsingProcessingRequired)}로 변경했습니다.`);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '기능동작확인 저장에 실패했습니다.');
+    } finally {
+      setJangsingProcessingSavingId(null);
+    }
+  }
+
+  function handleAutoRefreshToggle() {
+    setAutoRefreshEnabled((previous) => {
+      const next = !previous;
+      messageApi.success(next ? '자동조회를 다시 시작합니다.' : '자동조회를 중지했습니다.');
+      return next;
+    });
+    setAutoRefreshRemainingMs(autoRefreshIntervalMs);
+  }
+
+  const hasIssueHistory = issueHistories.length > 0;
+  const currentDraftItem = draft.id ? items.find((item) => item.id === draft.id) ?? selectedItem : selectedItem;
+  const requestReceived = isPlanItemRequestLocked(currentDraftItem);
+  const isRequestLocked = !hasAccess || requestReceived;
+  const isRestrictedClient = !hasAccess;
+  const isCreating = !draft.id;
+  const canEditFunctionCheck = Boolean(
+    hasAccess && selectedItem && !isRequestLocked && isFunctionCheckEditableStatus(selectedItem.status),
+  );
+  const canSave = hasAccess && !isRequestLocked;
+  const automationTypeLabel = PLAN_AUTOMATION_TYPE_LABELS.get(draft.automationType) ?? draft.automationType;
+  const latestActionHistory = actionHistories[0] ?? null;
+  const latestIssueHistory = issueHistories[0] ?? null;
+  const releaseCompletedTimestamps = useMemo(
+    () =>
+      actionHistories
+        .filter((history) => history.actionType === 'release반영완료')
+        .slice()
+        .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime())
+        .map((history) => history.createdAt),
+    [actionHistories],
+  );
+  const latestReleaseCompletedAt = releaseCompletedTimestamps[0] ?? null;
+  const previousReleaseCompletedAt = releaseCompletedTimestamps[1] ?? null;
+  const sourceWorkHistoriesAfterLatestRelease = useMemo(
+    () => sourceWorkHistories.filter((history) => isHistoryAfterReference(history.createdAt, latestReleaseCompletedAt)),
+    [latestReleaseCompletedAt, sourceWorkHistories],
+  );
+  const sourceWorkHistoriesForLatestReleasedCycle = useMemo(() => {
+    if (!latestReleaseCompletedAt) {
+      return [];
+    }
+
+    return sourceWorkHistories.filter((history) => {
+      if (!history.createdAt) {
+        return false;
+      }
+
+      const createdAt = new Date(history.createdAt).getTime();
+      const upperBound = new Date(latestReleaseCompletedAt).getTime();
+
+      if (Number.isNaN(createdAt) || Number.isNaN(upperBound) || createdAt > upperBound) {
+        return false;
+      }
+
+      if (!previousReleaseCompletedAt) {
+        return true;
+      }
+
+      return createdAt > new Date(previousReleaseCompletedAt).getTime();
+    });
+  }, [latestReleaseCompletedAt, previousReleaseCompletedAt, sourceWorkHistories]);
+  const shouldShowCompletedCycleUsage =
+    isMainCompletedPlanItem(selectedItem) &&
+    sourceWorkHistoriesAfterLatestRelease.length === 0 &&
+    sourceWorkHistoriesForLatestReleasedCycle.length > 0;
+  const currentReleaseSourceWorkHistories = shouldShowCompletedCycleUsage
+    ? sourceWorkHistoriesForLatestReleasedCycle
+    : sourceWorkHistoriesAfterLatestRelease;
+  const currentReleaseUsagePrefix = shouldShowCompletedCycleUsage
+    ? '최근 완료 배포 기준'
+    : latestReleaseCompletedAt
+      ? '이번 반영 배포 이후'
+      : '현재 누적 기준';
+  const currentReleaseUsageSummary = useMemo(
+    () => buildAutomationUsageSummary(currentReleaseSourceWorkHistories, appConfig),
+    [appConfig, currentReleaseSourceWorkHistories],
+  );
+  const currentReleaseUsageSummaryByHistoryId = useMemo(
+    () => buildAutomationUsageSummaryByHistoryId(currentReleaseSourceWorkHistories, appConfig),
+    [appConfig, currentReleaseSourceWorkHistories],
+  );
+  const usageSummaryByPlanId = useMemo(
+    () =>
+      Object.fromEntries(
+        items.flatMap((item) => {
+          const summary = buildAutomationUsageSummaryFromSnapshot(item.usageSnapshot, appConfig);
+          return summary ? [[item.id, summary]] : [];
+        }),
+      ) as Record<number, AutomationUsageSummary>,
+    [appConfig, items],
+  );
+  const currentReleaseSourceWorkHistoryIdSet = useMemo(
+    () => new Set(currentReleaseSourceWorkHistories.map((history) => history.id)),
+    [currentReleaseSourceWorkHistories],
+  );
+  const selectedSourceWorkUsageSummary =
+    selectedSourceWork && currentReleaseSourceWorkHistoryIdSet.has(selectedSourceWork.id)
+      ? currentReleaseUsageSummaryByHistoryId.get(selectedSourceWork.id) ?? null
+      : null;
+  const memoRows = screens.md ? 18 : 9;
+  return (
+    <div className="plan-board-page">
+      {contextHolder}
+
+      <Card className="plan-board-page__overview" bordered={false}>
+        <Flex justify="space-between" align="center" gap={12} wrap>
+          <div>
+            <Title level={4}>자동화</Title>
+            <Paragraph className="plan-board-page__intro">
+              작업 메모와 이력, 증적을 확인하고 필요한 내용을 수동으로 정리합니다.
+            </Paragraph>
+          </div>
+
+          <Space wrap>
+            <Space size={8} className="plan-board-page__auto-refresh-control">
+              <LongPressButton
+                onClick={() => void loadItems(statusFilter)}
+                onLongPress={() => {
+                  if (!hasAccess) {
+                    messageApi.error(TOKEN_ACCESS_REQUIRED_MESSAGE);
+                    return;
+                  }
+
+                  handleAutoRefreshToggle();
+                }}
+                longPressMs={AUTO_REFRESH_LONG_PRESS_MS}
+                loading={loading}
+                title="길게 눌러 자동조회 On/Off"
+                className={`plan-board-page__auto-refresh-button${
+                  isAutoRefreshRunning ? ' plan-board-page__auto-refresh-button--active' : ''
+                }`}
+              >
+                조회
+              </LongPressButton>
+              {isAutoRefreshRunning ? (
+                <Text className="plan-board-page__auto-refresh-countdown">
+                  자동 조회까지 {autoRefreshCountdownSeconds}초
+                </Text>
+              ) : null}
+            </Space>
+            {listRequestMeta ? (
+              <Text type="secondary">
+                최근 조회 {formatResponseBytes(listRequestMeta.responseBytes)} · {listRequestMeta.durationMs}ms
+              </Text>
+            ) : null}
+            <Button onClick={handleCreateNew} disabled={isRestrictedClient}>
+              새 메모
+            </Button>
+            <Button onClick={() => void handleSetup()} disabled={isRestrictedClient}>
+              테이블 생성
+            </Button>
+          </Space>
+        </Flex>
+      </Card>
+
+      {isRestrictedClient ? (
+        <Alert
+          showIcon
+          type="warning"
+          className="plan-board-page__alert"
+          message="권한 토큰이 없어 자동화 조회만 사용할 수 있습니다."
+          description={TOKEN_ACCESS_REQUIRED_MESSAGE}
+        />
+      ) : null}
+
+      {loading ? (
+        <Alert
+          showIcon
+          type="info"
+          className="plan-board-page__alert"
+          message="자동화 현황 데이터를 불러오는 중입니다."
+          description={
+            <Space size={8}>
+              <Spin size="small" />
+              <span>서버 설정과 연결 상태를 확인하고 있습니다.</span>
+            </Space>
+          }
+        />
+      ) : null}
+
+      {errorMessage ? (
+        <Alert
+          showIcon
+          type="warning"
+          className="plan-board-page__alert"
+          message="작업 요청 메뉴를 아직 사용할 수 없습니다."
+          description={<ExpandableDetailText text={errorMessage} />}
+          action={
+            <Button
+              type="text"
+              size="small"
+              aria-label="오류 메시지 복사"
+              icon={<CopyOutlined />}
+              disabled={!hasAccess}
+              onClick={() => void handleCopyText(errorMessage)}
+            />
+          }
+        />
+      ) : null}
+
+      <PlanListDetailLayout
+        listTitle={`작업 목록 / ${getPlanQuickFilterLabel(quickFilter) ?? getPlanFilterLabel(statusFilter)}`}
+        listExtra={<Text code>{filteredItems.length} items</Text>}
+        listContent={
+          <>
+            {quickFilter ? (
+              <Alert
+                showIcon
+                type={quickFilter === 'automation-failed' ? 'error' : 'info'}
+                className="plan-board-page__alert"
+                message={`${getPlanQuickFilterLabel(quickFilter)} 목록을 표시합니다.`}
+                description={
+                  quickFilter === 'automation-failed'
+                    ? '브랜치 생성, 작업, release/main 반영 단계에서 실패한 항목만 추렸습니다.'
+                    : quickFilter === 'working'
+                      ? '현재 상태가 작업중인 항목만 추렸습니다.'
+                      : 'release 반영은 끝났지만 main 반영이 남아 있거나 실패한 항목만 추렸습니다.'
+                }
+              />
+            ) : null}
+            {selectedItem?.lastError ? (
+              <Alert
+                showIcon
+                type="error"
+                className="plan-board-page__alert"
+                message="현재 선택된 작업에 오류가 있습니다."
+                description={<ExpandableDetailText text={resolveProtectedText(selectedItem.lastError, !hasAccess)} type="danger" />}
+                action={
+                  <Button
+                    type="text"
+                    size="small"
+                    aria-label="오류 메시지 복사"
+                    icon={<CopyOutlined />}
+                    disabled={!hasAccess}
+                    onClick={() => void handleCopyText(selectedItem.lastError ?? '')}
+                  />
+                }
+              />
+            ) : null}
+
+            <Input.Search
+              allowClear
+              value={searchKeyword}
+              placeholder="작업 ID, 메모 내용, 브랜치, 이슈 태그 검색"
+              disabled={isRestrictedClient}
+              onChange={(event) => {
+                setSearchKeyword(event.target.value);
+              }}
+            />
+            <Flex gap={8} wrap className="plan-board-page__list-filter-bar">
+              <Select
+                size="small"
+                value={workerStateFilter}
+                options={WORKER_STATE_FILTER_OPTIONS}
+                disabled={isRestrictedClient}
+                onChange={setWorkerStateFilter}
+              />
+              <Select
+                size="small"
+                value={releaseStateFilter}
+                options={RELEASE_STATE_FILTER_OPTIONS}
+                disabled={isRestrictedClient}
+                onChange={setReleaseStateFilter}
+              />
+              <Select
+                size="small"
+                value={mainStateFilter}
+                options={MAIN_STATE_FILTER_OPTIONS}
+                disabled={isRestrictedClient}
+                onChange={setMainStateFilter}
+              />
+              <Select
+                size="small"
+                value={issueStateFilter}
+                options={ISSUE_STATE_FILTER_OPTIONS}
+                disabled={isRestrictedClient}
+                onChange={setIssueStateFilter}
+              />
+              <Select
+                size="small"
+                value={costStateFilter}
+                options={COST_STATE_FILTER_OPTIONS}
+                disabled={isRestrictedClient}
+                onChange={setCostStateFilter}
+              />
+            </Flex>
+
+            <PlanItemList
+              activeDraftId={draft.id}
+              currentPage={currentListPage}
+              editorOpen={editorOpen}
+              hasAccess={hasAccess}
+              items={filteredItems}
+              jangsingProcessingSavingId={jangsingProcessingSavingId}
+              reviewIndicatorsByPlanId={reviewIndicatorsByPlanId}
+              searchKeyword={searchKeyword}
+              usageSummaryByPlanId={usageSummaryByPlanId}
+              onChangePage={setCurrentListPage}
+              onChangeJangsingProcessing={handleJangsingProcessingChange}
+              onSelectItem={handleSelectItem}
+            />
+          </>
+        }
+        desktopDetailOpen={editorOpen}
+        mobileDetailOpen={editorOpen}
+        mobileLayoutMode="detail-only"
+        detailTitle={draft.id ? `상세 #${draft.id}` : '새 메모'}
+        detailActions={
+          <>
+            {hasAccess && draft.id ? (
+              <Button danger onClick={() => void handleDelete()} loading={saving} disabled={!canSave}>
+                삭제
+              </Button>
+            ) : null}
+            {hasAccess && !sourceViewerOpen ? (
+              <Button
+                type="primary"
+                onClick={() => void handleSave()}
+                loading={saving}
+                disabled={Boolean(draft.id && !canSave)}
+              >
+                저장
+              </Button>
+            ) : null}
+          </>
+        }
+        onCloseDetail={closeEditor}
+        showDesktopClose
+        emptyDetailTitle="상세 보기"
+        detailContent={
+          !sourceViewerOpen ? (
+            <>
+              {selectedItem ? (
+                <Alert
+                  type={selectedItem.hasOpenIssues ? 'warning' : 'info'}
+                  showIcon
+                  message="작업 정보"
+                  description={
+                    <Space direction="vertical" size={4}>
+                      <Text>상태: {selectedItem.status}</Text>
+                      <Text>등록일: {formatPlanDateTime(selectedItem.createdAt)}</Text>
+                      <Text>접수 시각: {formatPlanDateTime(selectedItem.startedAt)}</Text>
+                      <Text>작업완료 시각: {formatPlanDateTime(selectedItem.completedAt)}</Text>
+                      <Text>최종 반영 시각: {formatPlanDateTime(selectedItem.mergedAt)}</Text>
+                      <Text>최근 수정: {formatPlanDateTime(selectedItem.updatedAt)}</Text>
+                      <Text>브랜치: {selectedItem.assignedBranch ?? '-'}</Text>
+                      <AutomationStatusBar item={selectedItem} usageSummary={currentReleaseUsageSummary} />
+                      {currentReleaseUsageSummary ? (
+                        <Space size={[8, 4]} wrap>
+                          <Text>
+                            {currentReleaseUsagePrefix} 소스 작업: {currentReleaseSourceWorkHistories.length}건
+                          </Text>
+                          <Text>{currentReleaseUsageSummary.costLabel}</Text>
+                          <Text>{currentReleaseUsageSummary.tokenLabel}</Text>
+                          {currentReleaseUsageSummary?.tierColor && currentReleaseUsageSummary.tierLabel ? (
+                            <Tag color={currentReleaseUsageSummary.tierColor}>{currentReleaseUsageSummary.tierLabel}</Tag>
+                          ) : null}
+                          {currentReleaseUsageSummary.description ? (
+                            <Text type="secondary">{currentReleaseUsageSummary.description}</Text>
+                          ) : null}
+                        </Space>
+                      ) : null}
+                      <Text>릴리즈 브랜치: {selectedItem.releaseTarget ?? 'release'}</Text>
+                      <Text>메인 자동등록: {selectedItem.autoDeployToMain ? '예' : '아니오'}</Text>
+                      <Text>원본 요청 수정 가능: {isPlanItemRequestLocked(selectedItem) ? '아니오' : '예'}</Text>
+                      {latestActionHistory ? (
+                        <Flex align="start" gap={8} wrap>
+                          <Text style={{ flex: 1 }}>
+                            최근 조치: [{latestActionHistory.actionType}] {resolveProtectedText(latestActionHistory.note, !hasAccess)}
+                          </Text>
+                          <Button
+                            size="small"
+                            icon={<CopyOutlined />}
+                            disabled={!hasAccess}
+                            onClick={() =>
+                              void handleCopyText(`[${latestActionHistory.actionType}] ${latestActionHistory.note}`)
+                            }
+                          />
+                        </Flex>
+                      ) : null}
+                      {selectedItem.lastError ? (
+                        <Flex align="start" gap={8} wrap>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <Text type="danger">최근 오류:</Text>
+                            <ExpandableDetailText text={resolveProtectedText(selectedItem.lastError, !hasAccess)} type="danger" />
+                          </div>
+                          <Button
+                            size="small"
+                            icon={<CopyOutlined />}
+                            disabled={!hasAccess}
+                            onClick={() => void handleCopyText(selectedItem.lastError ?? '')}
+                          />
+                        </Flex>
+                      ) : null}
+                      {latestIssueHistory ? (
+                        <Flex align="start" gap={8} wrap>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <Text>최근 이슈: {latestIssueHistory.issueTag}</Text>
+                            <ExpandableDetailText text={resolveProtectedText(latestIssueHistory.message, !hasAccess)} />
+                          </div>
+                          <Button
+                            size="small"
+                            icon={<CopyOutlined />}
+                            disabled={!hasAccess}
+                            onClick={() =>
+                              void handleCopyText(`${latestIssueHistory.issueTag} ${latestIssueHistory.message}`)
+                            }
+                          />
+                        </Flex>
+                      ) : null}
+                    </Space>
+                  }
+                />
+              ) : null}
+
+              {selectedItem ? (
+                <PlanDetailSection title="작업 체크리스트" defaultOpen>
+                  <PlanWorkChecklist
+                    item={selectedItem}
+                    sourceWorkCount={sourceWorkHistories.length}
+                    hasOpenIssues={selectedItem.hasOpenIssues}
+                  />
+                </PlanDetailSection>
+              ) : null}
+
+              {selectedItem ? (
+                <PlanDetailSection title="릴리즈 준비 요약" defaultOpen>
+                  <ReleaseReadySummary
+                    hasAccess={hasAccess}
+                    item={selectedItem}
+                    sourceWorkHistories={sourceWorkHistories}
+                    issueHistories={issueHistories}
+                  />
+                </PlanDetailSection>
+              ) : null}
+
+              <Space wrap className="plan-board-page__action-bar">
+                {actionButtons.map((action) => (
+                  <Button
+                    key={action.key}
+                    onClick={() => void handleAction(action.key)}
+                    loading={saving}
+                    disabled={isRestrictedClient}
+                  >
+                    {action.label}
+                  </Button>
+                ))}
+              </Space>
+
+              <div className="plan-board-page__form">
+                <div>
+                  <Text strong>작업 상태</Text>
+                  <div>
+                    <Tag color={statusTagColorMap[draft.status]}>{draft.status}</Tag>
+                  </div>
+                </div>
+
+                {!isCreating ? (
+                  <div>
+                    <Text strong>기능동작확인</Text>
+                    <div>
+                      {canEditFunctionCheck ? (
+                        <Segmented
+                          options={FUNCTION_CHECK_OPTIONS}
+                          value={getFunctionCheckLabel(draft.jangsingProcessingRequired)}
+                          onChange={(value) => {
+                            updateDraft((previous) => ({
+                              ...previous,
+                              jangsingProcessingRequired: value === '완료',
+                            }));
+                          }}
+                        />
+                      ) : (
+                        <Text type="secondary">작업완료 이후에만 선택할 수 있습니다.</Text>
+                      )}
+                    </div>
+                  </div>
+                ) : null}
+
+                <div>
+                  <Text strong>작업 ID</Text>
+                  <Input
+                    value={draft.workId}
+                    placeholder="예: 기능확인-기본"
+                    readOnly={isRequestLocked}
+                    onChange={(event) => {
+                      const workId = event.target.value;
+                      updateDraft((previous) => ({
+                        ...previous,
+                        workId,
+                      }));
+                    }}
+                  />
+                </div>
+
+                <div>
+                  <Text strong>자동화 처리</Text>
+                  {requestReceived ? (
+                    <div className="plan-board-page__readonly-field" aria-readonly="true">
+                      <Text>{automationTypeLabel}</Text>
+                      <Tag color="processing">접수 후 읽기전용</Tag>
+                    </div>
+                  ) : (
+                    <Select
+                      className="plan-board-page__select plan-board-page__select--automation"
+                      value={draft.automationType}
+                      options={PLAN_AUTOMATION_TYPE_OPTIONS}
+                      popupClassName="plan-board-page__select-popup"
+                      getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+                      disabled={!hasAccess}
+                      onChange={(automationType) => {
+                        updateDraft((previous) => ({
+                          ...previous,
+                          automationType,
+                        }));
+                      }}
+                    />
+                  )}
+                </div>
+
+                <div>
+                  <Flex justify="space-between" align="center" gap={8} wrap>
+                    <Text strong>메모</Text>
+                    <Button
+                      size="small"
+                      icon={<CopyOutlined />}
+                      disabled={!hasAccess}
+                      onClick={() => void handleCopyText(noteInputValue)}
+                    >
+                      복사
+                    </Button>
+                  </Flex>
+                  <div className="plan-board-page__notepad-frame">
+                    <TextArea
+                      value={hasAccess ? noteInputValue : maskNotePreviewByWord(noteInputValue)}
+                      rows={memoRows}
+                      placeholder={hasAccess ? '작업 내용을 자유롭게 입력하세요.' : '권한 토큰 등록 후 편집할 수 있습니다.'}
+                      className={`plan-board-page__notepad${isRequestLocked ? ' plan-board-page__notepad--readonly' : ''}`}
+                      readOnly={isRequestLocked}
+                      onChange={(event) => {
+                        handleNoteChange(event.target.value);
+                      }}
+                    />
+                  </div>
+                  {isRequestLocked ? (
+                    <Text type="secondary">
+                      {hasAccess ? '자동화 접수된 항목은 본문을 수정할 수 없습니다.' : '조회 화면에서는 작업 메모를 40% 마스킹해 표시합니다.'}
+                    </Text>
+                  ) : null}
+                </div>
+
+                {selectedReleaseReviewNote.trim() ? (
+                  <div>
+                    <Flex justify="space-between" align="center" gap={8} wrap>
+                      <Text strong>release 검수 메모</Text>
+                      <Button
+                        size="small"
+                        type="text"
+                        icon={<CopyOutlined />}
+                        aria-label="release 검수 메모 복사"
+                        disabled={!hasAccess}
+                        onClick={() => void handleCopyText(selectedReleaseReviewNote)}
+                      />
+                    </Flex>
+                    <div className="plan-board-page__notepad-frame">
+                      <TextArea
+                        value={hasAccess ? selectedReleaseReviewNote : maskNotePreviewByWord(selectedReleaseReviewNote)}
+                        rows={4}
+                        className="plan-board-page__notepad plan-board-page__notepad--readonly"
+                        readOnly
+                      />
+                    </div>
+                  </div>
+                ) : null}
+
+                <div>
+                  <Checkbox
+                    checked={draft.autoDeployToMain ?? true}
+                    disabled={isRequestLocked}
+                    onChange={(event) => {
+                      const autoDeployToMain = event.target.checked;
+                      updateDraft((previous) => ({
+                        ...previous,
+                        autoDeployToMain,
+                      }));
+                    }}
+                  >
+                    메인까지 자동등록
+                  </Checkbox>
+                  {isCreating ? (
+                    <div style={{ marginTop: 8 }}>
+                      <Text type="secondary">
+                        앱 기본값: {appConfig.planDefaults.autoDeployToMain ? '메인까지 자동등록' : 'release만 반영'}
+                      </Text>
+                    </div>
+                  ) : null}
+                </div>
+
+                <div>
+                  <Text strong>접수 / 처리 시각</Text>
+                  <Space direction="vertical" size={4} style={{ display: 'flex' }}>
+                    <Text>등록일: {formatPlanDateTime(selectedItem?.createdAt ?? null)}</Text>
+                    <Text>접수 시각: {formatPlanDateTime(selectedItem?.startedAt ?? null)}</Text>
+                    <Text>작업완료 시각: {formatPlanDateTime(selectedItem?.completedAt ?? null)}</Text>
+                    <Text>최종 반영 시각: {formatPlanDateTime(selectedItem?.mergedAt ?? null)}</Text>
+                    <Text>최근 수정: {formatPlanDateTime(selectedItem?.updatedAt ?? null)}</Text>
+                    {currentReleaseUsageSummary ? (
+                      <Space size={[8, 4]} wrap>
+                        <Text>
+                          {currentReleaseUsagePrefix}: 소스 작업 {currentReleaseSourceWorkHistories.length}건
+                        </Text>
+                        <Text>{currentReleaseUsageSummary.costLabel}</Text>
+                        <Text>{currentReleaseUsageSummary.tokenLabel}</Text>
+                        {currentReleaseUsageSummary?.tierColor && currentReleaseUsageSummary.tierLabel ? (
+                          <Tag color={currentReleaseUsageSummary.tierColor}>{currentReleaseUsageSummary.tierLabel}</Tag>
+                        ) : null}
+                        {currentReleaseUsageSummary.description ? (
+                          <Text type="secondary">{currentReleaseUsageSummary.description}</Text>
+                        ) : null}
+                      </Space>
+                    ) : null}
+                  </Space>
+                </div>
+
+                <PlanDetailSection title="소스 작업 내역">
+                  {sourceWorkHistories.length ? (
+                    <List
+                      dataSource={sourceWorkHistories}
+                      renderItem={(history) => {
+                        const isCurrentReleaseHistory = currentReleaseSourceWorkHistoryIdSet.has(history.id);
+                        const usageSummary = isCurrentReleaseHistory
+                          ? currentReleaseUsageSummaryByHistoryId.get(history.id) ?? null
+                          : null;
+
+                        return (
+                          <List.Item key={`source-action-${history.id}`}>
+                            <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                              <Flex justify="space-between" align="start" gap={8}>
+                                <Space direction="vertical" size={2}>
+                                  <Text strong>{resolveProtectedText(history.summary, !hasAccess)}</Text>
+                                  <Text type="secondary">{history.branchName}</Text>
+                                  {usageSummary ? (
+                                    <Space size={[8, 4]} wrap>
+                                      <Text type="secondary">
+                                        {currentReleaseUsagePrefix} {usageSummary.costLabel}
+                                      </Text>
+                                      <Text type="secondary">{usageSummary.tokenLabel}</Text>
+                                      {usageSummary.tierColor && usageSummary.tierLabel ? (
+                                        <Tag color={usageSummary.tierColor}>{usageSummary.tierLabel}</Tag>
+                                      ) : null}
+                                      {usageSummary.description ? (
+                                        <Text type="secondary">{usageSummary.description}</Text>
+                                      ) : null}
+                                    </Space>
+                                  ) : null}
+                                </Space>
+                                <Text type="secondary">
+                                  {new Date(history.createdAt).toLocaleString('ko-KR')}
+                                </Text>
+                              </Flex>
+                              <Flex justify="end">
+                                <Button disabled={!hasAccess} onClick={() => void handleOpenSourceWork(history.id)}>
+                                  미리보기
+                                </Button>
+                              </Flex>
+                            </Space>
+                          </List.Item>
+                        );
+                      }}
+                    />
+                  ) : (
+                    <Empty description="기록된 소스 작업 이력이 없습니다." />
+                  )}
+                </PlanDetailSection>
+
+                <PlanDetailSection title="조치 / 이슈 이력">
+                  {combinedHistories.length ? (
+                    <List
+                      dataSource={combinedHistories}
+                      renderItem={(history) => (
+                        <List.Item key={history.id}>
+                          <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                            <Flex justify="space-between" align="start" gap={8}>
+                              {history.kind === 'action' ? (
+                                <Tag color="blue">{history.action.actionType}</Tag>
+                              ) : (
+                                <Tag color={history.issue.resolved ? 'default' : 'error'}>
+                                  이슈 {history.issue.issueTag}
+                                </Tag>
+                              )}
+                              <Text type="secondary">
+                                {new Date(history.createdAt).toLocaleString('ko-KR')}
+                              </Text>
+                            </Flex>
+                            {history.kind === 'action' ? (
+                              <Text>{resolveProtectedText(history.action.note, !hasAccess)}</Text>
+                            ) : (
+                              <>
+                                <ExpandableDetailText text={resolveProtectedText(history.issue.message, !hasAccess)} />
+                                <Flex justify="end">
+                                  <Button
+                                    size="small"
+                                    icon={<CopyOutlined />}
+                                    disabled={!hasAccess}
+                                    onClick={() => void handleCopyText(history.issue.message)}
+                                  >
+                                    에러 복사
+                                  </Button>
+                                </Flex>
+                                {history.issue.actionNote ? (
+                                  <Alert
+                                    type={history.issue.resolved ? 'success' : 'info'}
+                                    showIcon
+                                    message={history.issue.resolved ? '조치 완료' : '조치 기록'}
+                                    description={
+                                      <pre className="plan-board-page__viewer-pre">
+                                        {resolveProtectedText(history.issue.actionNote, !hasAccess)}
+                                      </pre>
+                                    }
+                                  />
+                                ) : null}
+                              </>
+                            )}
+                          </Space>
+                        </List.Item>
+                      )}
+                    />
+                  ) : (
+                    <Empty description="조치 및 이력 기록이 없습니다." />
+                  )}
+                </PlanDetailSection>
+
+                {isRequestLocked ? (
+                  <Card size="small" title="추가 조치 기록">
+                    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+                      <TextArea
+                        value={actionNote}
+                        rows={4}
+                        placeholder="작업시작 이후의 추가 조치사항을 기록하세요."
+                        disabled={!hasAccess}
+                        onChange={(event) => {
+                          setActionNote(event.target.value);
+                        }}
+                      />
+                      <Flex justify="end">
+                        <Button onClick={() => void handleActionNote()} loading={saving} disabled={!hasAccess}>
+                          조치 이력 추가
+                        </Button>
+                      </Flex>
+                    </Space>
+                  </Card>
+                ) : null}
+
+                <div>
+                  <Text strong>이슈 태그</Text>
+                  <div>
+                    {selectedItem?.issueTags.length ? (
+                      <Space wrap size={[4, 4]}>
+                        {selectedItem.issueTags.map((issueTag) => (
+                          <Tag key={`detail-${issueTag}`} color={selectedItem.hasOpenIssues ? 'error' : 'default'}>
+                            {issueTag}
+                          </Tag>
+                        ))}
+                      </Space>
+                    ) : (
+                      <Text type="secondary">현재 기록된 이슈가 없습니다.</Text>
+                    )}
+                  </div>
+                </div>
+
+                {hasIssueHistory ? (
+                  <Card size="small" title="이슈 조치 기록">
+                    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+                      <TextArea
+                        value={issueActionNote}
+                        rows={4}
+                        placeholder="오류 원인 분석, 조치 내용, 재시도 결과를 기록하세요."
+                        disabled={!hasAccess}
+                        onChange={(event) => {
+                          setIssueActionNote(event.target.value);
+                        }}
+                      />
+                      <Checkbox
+                        checked={resolveLatestIssue}
+                        disabled={!hasAccess}
+                        onChange={(event) => {
+                          setResolveLatestIssue(event.target.checked);
+                        }}
+                      >
+                        최신 이슈를 해결 처리
+                      </Checkbox>
+                      <Checkbox
+                        checked={retryLatestIssue}
+                        disabled={!hasAccess}
+                        onChange={(event) => {
+                          setRetryLatestIssue(event.target.checked);
+                        }}
+                      >
+                        재처리 요청
+                      </Checkbox>
+                      <Flex justify="end">
+                        <Button onClick={() => void handleIssueAction()} loading={saving} disabled={!hasAccess}>
+                          조치 기록 저장
+                        </Button>
+                      </Flex>
+                    </Space>
+                  </Card>
+                ) : null}
+              </div>
+            </>
+          ) : (
+            <div className="plan-board-page__overlay-body">
+              <Flex justify="space-between" align="start" gap={12} wrap>
+                <div>
+                  <Title level={5} className="plan-board-page__viewer-heading">
+                    {resolveProtectedText(selectedSourceWork?.summary, !hasAccess)}
+                  </Title>
+                  <Text type="secondary">{selectedSourceWork?.branchName}</Text>
+                  {selectedSourceWorkUsageSummary ? (
+                    <Space size={[8, 4]} wrap>
+                      <Text type="secondary">
+                        {currentReleaseUsagePrefix} {selectedSourceWorkUsageSummary.costLabel}
+                      </Text>
+                      <Text type="secondary">{selectedSourceWorkUsageSummary.tokenLabel}</Text>
+                      {selectedSourceWorkUsageSummary.tierColor && selectedSourceWorkUsageSummary.tierLabel ? (
+                        <Tag color={selectedSourceWorkUsageSummary.tierColor}>
+                          {selectedSourceWorkUsageSummary.tierLabel}
+                        </Tag>
+                      ) : null}
+                      {selectedSourceWorkUsageSummary.description ? (
+                        <Text type="secondary">{selectedSourceWorkUsageSummary.description}</Text>
+                      ) : null}
+                    </Space>
+                  ) : null}
+                </div>
+                <Space>
+                  <Button
+                    icon={<ArrowLeftOutlined />}
+                    aria-label="상세로 돌아가기"
+                    onClick={() => setSourceViewerOpen(false)}
+                  />
+                  <Button onClick={closeEditor}>닫기</Button>
+                </Space>
+              </Flex>
+
+              <Tabs
+                className="plan-board-page__viewer-tabs"
+                items={buildSourceViewerTabs(selectedSourceWork, {
+                  hasAccess,
+                  note: selectedItem?.note ?? '',
+                  noteMasked: Boolean(selectedItem?.noteMasked || !hasAccess),
+                })}
+              />
+            </div>
+          )
+        }
+      />
+
+    </div>
+  );
+}
+
+const PlanItemList = memo(
+  function PlanItemList({
+    activeDraftId,
+    currentPage,
+    editorOpen,
+    hasAccess,
+    items,
+    jangsingProcessingSavingId,
+    reviewIndicatorsByPlanId,
+    searchKeyword,
+    usageSummaryByPlanId,
+    onChangePage,
+    onChangeJangsingProcessing,
+    onSelectItem,
+  }: {
+    activeDraftId: number | null;
+    currentPage: number;
+    editorOpen: boolean;
+    hasAccess: boolean;
+    items: PlanItem[];
+    jangsingProcessingSavingId: number | null;
+    reviewIndicatorsByPlanId: Record<number, ReviewListIndicator>;
+    searchKeyword: string;
+    usageSummaryByPlanId: Record<number, AutomationUsageSummary>;
+    onChangePage: (page: number) => void;
+    onChangeJangsingProcessing: (id: number, jangsingProcessingRequired: boolean) => void;
+    onSelectItem: (item: PlanItem) => void;
+  }) {
+    if (items.length === 0) {
+      return <Empty description={searchKeyword.trim() ? '검색 결과가 없습니다.' : '등록된 작업 항목이 없습니다.'} />;
+    }
+
+    return (
+      <List
+        className="plan-board-page__list"
+        dataSource={items}
+        pagination={{
+          align: 'center',
+          current: currentPage,
+          pageSize: PLAN_LIST_PAGE_SIZE,
+          showSizeChanger: false,
+          onChange: hasAccess ? onChangePage : undefined,
+        }}
+        renderItem={(item) => (
+          (() => {
+            const reviewIndicator = reviewIndicatorsByPlanId[item.id];
+            const usageSummary = usageSummaryByPlanId[item.id] ?? null;
+
+            return (
+              <List.Item
+                key={item.id}
+                className={`plan-board-page__list-item${
+                  activeDraftId === item.id && editorOpen ? ' plan-board-page__list-item--active' : ''
+                }`}
+                onClick={() => {
+                  onSelectItem(item);
+                }}
+              >
+                <div className="plan-board-page__list-body">
+                  <Flex justify="space-between" align="start" gap={8}>
+                    <Text strong>{formatPlanListLabel(item)}</Text>
+                    <Space size={[6, 6]} wrap className="plan-board-page__list-tags">
+                      {reviewIndicator ? (
+                        <Tag color={getReleaseReviewListTagColor(reviewIndicator.status)}>
+                          {getReleaseReviewListTagLabel(reviewIndicator)}
+                        </Tag>
+                      ) : null}
+                      <Tag color={statusTagColorMap[item.status]}>{item.status}</Tag>
+                    </Space>
+                  </Flex>
+                  <Flex justify="space-between" align="center" gap={8} wrap>
+                    <Text type="secondary">기능동작확인</Text>
+                    {isFunctionCheckEditableStatus(item.status) ? (
+                      <Space size={6} wrap>
+                        <Segmented
+                          size="small"
+                          options={FUNCTION_CHECK_OPTIONS}
+                          value={getFunctionCheckLabel(item.jangsingProcessingRequired)}
+                          disabled={!hasAccess || jangsingProcessingSavingId === item.id || isPlanItemRequestLocked(item)}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                          }}
+                          onChange={(value) => {
+                            onChangeJangsingProcessing(item.id, value === '완료');
+                          }}
+                        />
+                      </Space>
+                    ) : (
+                      <Text type="secondary">작업완료 후 선택</Text>
+                    )}
+                  </Flex>
+                  <AutomationStatusBar item={item} usageSummary={usageSummary} compact />
+                  {item.assignedBranch ? <Text type="secondary">브랜치: {item.assignedBranch}</Text> : null}
+                  {item.issueTags.length > 0 ? (
+                    <Space wrap size={[4, 4]}>
+                      {item.issueTags.map((issueTag) => (
+                        <Tag key={`${item.id}-${issueTag}`} color={item.hasOpenIssues ? 'error' : 'default'}>
+                          {issueTag}
+                        </Tag>
+                      ))}
+                    </Space>
+                  ) : null}
+                  <Paragraph ellipsis={{ rows: 2 }} className="plan-board-page__list-note">
+                    {item.noteMasked || !hasAccess ? maskNotePreviewByWord(item.note) : item.note}
+                  </Paragraph>
+                  <Flex justify="space-between" align="center" gap={8} wrap>
+                    <Space size={8} wrap>
+                      {item.noteMasked ? <Tag bordered={false}>요청내용 마스킹</Tag> : null}
+                      <Text type="secondary">등록 {formatPlanDateTime(item.createdAt)}</Text>
+                    </Space>
+                    <Text type="secondary">수정 {formatPlanDateTime(item.updatedAt)}</Text>
+                  </Flex>
+                </div>
+              </List.Item>
+            );
+          })()
+        )}
+      />
+    );
+  },
+  (previous, next) =>
+    previous.items === next.items &&
+    previous.jangsingProcessingSavingId === next.jangsingProcessingSavingId &&
+    previous.reviewIndicatorsByPlanId === next.reviewIndicatorsByPlanId &&
+    previous.searchKeyword === next.searchKeyword &&
+    previous.currentPage === next.currentPage &&
+    previous.activeDraftId === next.activeDraftId &&
+    previous.editorOpen === next.editorOpen &&
+    previous.hasAccess === next.hasAccess,
+);
+
+function LongPressButton({
+  children,
+  className,
+  loading,
+  longPressMs,
+  onClick,
+  onLongPress,
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  loading?: boolean;
+  longPressMs: number;
+  onClick: () => void;
+  onLongPress: () => void;
+  title?: string;
+}) {
+  const [longPressTriggered, setLongPressTriggered] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  const clearPressTimer = () => {
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  useEffect(() => clearPressTimer, []);
+
+  return (
+    <Button
+      className={className}
+      loading={loading}
+      title={title}
+      onClick={() => {
+        if (longPressTriggered) {
+          setLongPressTriggered(false);
+          return;
+        }
+
+        onClick();
+      }}
+      onPointerDown={(event) => {
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+          return;
+        }
+
+        timerRef.current = window.setTimeout(() => {
+          setLongPressTriggered(true);
+          onLongPress();
+        }, longPressMs);
+      }}
+      onPointerUp={() => {
+        clearPressTimer();
+        window.setTimeout(() => {
+          setLongPressTriggered(false);
+        }, 0);
+      }}
+      onPointerLeave={() => {
+        clearPressTimer();
+      }}
+      onPointerCancel={() => {
+        clearPressTimer();
+        setLongPressTriggered(false);
+      }}
+    >
+      {children}
+    </Button>
+  );
+}
+
+function getActionSuccessMessage(action: PlanActionType) {
+  if (action === 'start-work') {
+    return '작업을 시작했습니다.';
+  }
+
+  if (action === 'complete-development') {
+    return '작업완료로 전환했습니다. release 반영 자동화를 대기합니다.';
+  }
+
+  if (action === 'retry-branch') {
+    return '브랜치 재시도를 요청했습니다.';
+  }
+
+  if (action === 'retry-work') {
+    return '자동 작업 재처리를 요청했습니다.';
+  }
+
+  if (action === 'retry-merge') {
+    return 'release 반영 재시도를 요청했습니다.';
+  }
+
+  if (action === 'cancel-release') {
+    return 'release 배포 내역을 롤백하고 작업취소로 완료 처리했습니다.';
+  }
+
+  return '이슈 브랜치 기준으로 main 반영을 요청했습니다.';
+}
+
+const FUNCTION_CHECK_OPTIONS = ['완료', '오동작'];
+
+function buildSourceViewerTabs(
+  sourceWork: PlanSourceWorkHistory | null,
+  planContext?: {
+    hasAccess?: boolean;
+    note: string;
+    noteMasked: boolean;
+  },
+) {
+  if (!sourceWork) {
+    return [];
+  }
+
+  const normalizedPreviewUrl = normalizeReleasePreviewUrl(sourceWork.previewUrl);
+  const hasAccess = Boolean(planContext?.hasAccess);
+
+  const summaryItems = [
+    `요청 요약: ${resolveProtectedText(sourceWork.summary, !hasAccess)}`,
+    `브랜치: ${sourceWork.branchName}`,
+    `Preview: ${normalizedPreviewUrl ?? '없음'}`,
+    `기록 시각: ${new Date(sourceWork.createdAt).toLocaleString('ko-KR')}`,
+  ];
+
+  return [
+    {
+      key: 'summary',
+      label: '작업란',
+      children: (
+        <div className="plan-board-page__viewer-stack">
+          <ol className="plan-board-page__summary-list">
+            {summaryItems.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ol>
+          <div>
+            <Text strong>요청 메모</Text>
+            <Paragraph className="plan-board-page__memo-pre">
+              {resolvePlanNoteDetail(planContext?.note ?? '', Boolean(planContext?.noteMasked))}
+            </Paragraph>
+          </div>
+          {sourceWork.changedFiles.length ? (
+            <div className="plan-board-page__file-tags">
+              {sourceWork.changedFiles.map((file) => (
+                <Tag key={`viewer-summary-${file}`}>{file}</Tag>
+              ))}
+            </div>
+          ) : null}
+          {normalizedPreviewUrl ? (
+            <Button
+              type="link"
+              href={hasAccess ? normalizedPreviewUrl : undefined}
+              target="_blank"
+              rel="noreferrer"
+              disabled={!hasAccess}
+              style={{ paddingInline: 0 }}
+            >
+              Preview 링크 열기
+            </Button>
+          ) : null}
+        </div>
+      ),
+    },
+    {
+      key: 'source',
+      label: '전체소스',
+      children: (
+        <CodexDiffPreviewer
+          files={sourceWork.sourceFiles}
+          diffText={sourceWork.diffText}
+          height="auto"
+          mode="source"
+          showModeSwitch={false}
+        />
+      ),
+    },
+    {
+      key: 'diff',
+      label: 'diff',
+      children: (
+        <CodexDiffPreviewer
+          files={sourceWork.sourceFiles}
+          diffText={sourceWork.diffText}
+          height="auto"
+          mode="diff"
+          showModeSwitch={false}
+        />
+      ),
+    },
+    {
+      key: 'commands',
+      label: '커맨드',
+      children: (
+        <PreviewerUI
+          type="code"
+          title="Command Log"
+          description="자동화 실행 커맨드"
+          value={sourceWork.commandLog || '기록된 실행 커맨드가 없습니다.'}
+          language="bash"
+          height="auto"
+        />
+      ),
+    },
+    {
+      key: 'evidence',
+      label: '증적',
+      children: <WorklogEvidenceTab sourceWork={sourceWork} />,
+    },
+    {
+      key: 'files',
+      label: '파일',
+      children: sourceWork.changedFiles.length ? (
+        <List
+          dataSource={sourceWork.changedFiles}
+          renderItem={(file) => (
+            <List.Item key={`viewer-file-row-${file}`}>
+              <Text code>{file}</Text>
+            </List.Item>
+          )}
+        />
+      ) : (
+        <Empty description="기록된 파일이 없습니다." />
+      ),
+    },
+  ];
+}
+
+function resolvePlanNoteDetail(note: string, masked: boolean) {
+  if (!masked) {
+    return note || '메모가 없습니다.';
+  }
+
+  return maskNotePreviewByWord(note);
+}
+
+export function WorklogEvidenceTab({
+  sourceWork,
+}: {
+  sourceWork: PlanSourceWorkHistory;
+}) {
+  const normalizedPreviewUrl = normalizeReleasePreviewUrl(sourceWork.previewUrl);
+  const worklogPaths = useMemo(() => {
+    const explicitWorklogPaths = sourceWork.changedFiles.filter((file) => /^docs\/worklogs\/.+\.md$/i.test(file));
+    const inferredWorklogPaths = sourceWork.changedFiles
+      .map((file) => file.match(/^docs\/assets\/worklogs\/(\d{4}-\d{2}-\d{2})\//i)?.[1] ?? null)
+      .filter((value): value is string => Boolean(value))
+      .map((captureDate) => `docs/worklogs/${captureDate}.md`);
+
+    return Array.from(new Set([...explicitWorklogPaths, ...inferredWorklogPaths]));
+  }, [sourceWork.changedFiles]);
+  const screenshotPaths = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          sourceWork.changedFiles.filter((file) =>
+            /^docs\/assets\/worklogs\/.+\.(png|jpe?g|gif|webp|svg)$/i.test(file),
+          ),
+        ),
+      ),
+    [sourceWork.changedFiles],
+  );
+  const artifactPaths = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          sourceWork.changedFiles.filter(
+            (file) =>
+              /^docs\/assets\/worklogs\/.+/i.test(file) &&
+              !/^docs\/assets\/worklogs\/.+\.(png|jpe?g|gif|webp|svg)$/i.test(file),
+          ),
+        ),
+      ),
+    [sourceWork.changedFiles],
+  );
+  const fetchableTextPaths = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          [...worklogPaths, ...artifactPaths].filter((path) => isFetchableTextArtifactPath(path)),
+        ),
+      ),
+    [artifactPaths, worklogPaths],
+  );
+  const fetchableTextPathsKey = fetchableTextPaths.join('\n');
+  const [worklogContents, setWorklogContents] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+  const [previewModalItem, setPreviewModalItem] = useState<EvidenceAttachmentItem | null>(null);
+
+  async function handleCopyText(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      message.success('복사했습니다.');
+    } catch {
+      message.error('복사에 실패했습니다.');
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!fetchableTextPaths.length) {
+      setWorklogContents({});
+      return;
+    }
+
+    setLoading(true);
+
+    void Promise.all(
+      fetchableTextPaths.map(async (path) => {
+        try {
+          const response = await fetch(toPublicAssetPath(path), { cache: 'no-store' });
+
+          if (!response.ok) {
+            throw new Error(`작업일지 로드 실패: ${path}`);
+          }
+
+          return [path, await response.text()] as const;
+        } catch {
+          return [path, '작업일지 내용을 불러오지 못했습니다.'] as const;
+        }
+      }),
+    )
+      .then((entries) => {
+        if (cancelled) {
+          return;
+        }
+
+        setWorklogContents(Object.fromEntries(entries));
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchableTextPathsKey]);
+
+  const previewItems: EvidenceAttachmentItem[] = [
+    ...worklogPaths.map((path) => ({
+      key: `worklog:${path}`,
+      kind: 'markdown' as const,
+      title: path.split('/').pop() ?? path,
+      description: path,
+      linkUrl: toPublicAssetPath(path),
+      value: worklogContents[path] ?? (loading ? '작업일지 내용을 불러오는 중입니다.' : '작업일지 내용을 불러오지 못했습니다.'),
+    })),
+    ...screenshotPaths.map((path) => ({
+      key: `screenshot:${path}`,
+      kind: 'image' as const,
+      title: path.split('/').pop() ?? path,
+      description: path,
+      linkUrl: toPublicAssetPath(path),
+      value: toPublicAssetPath(path),
+    })),
+    ...artifactPaths.map((path) =>
+      buildArtifactPreviewItem(path, worklogContents[path], loading),
+    ),
+    ...(normalizedPreviewUrl
+      ? [
+          {
+            key: `preview:${sourceWork.id}`,
+            kind: 'preview' as const,
+            title: 'Preview 링크',
+            description: normalizedPreviewUrl,
+            linkUrl: normalizedPreviewUrl,
+            value: normalizedPreviewUrl,
+          },
+        ]
+      : []),
+    ...(sourceWork.commandLog
+      ? [
+          {
+            key: `commands:${sourceWork.id}`,
+            kind: 'code' as const,
+            title: '실행 커맨드',
+            description: '자동화 실행 로그',
+            value: sourceWork.commandLog,
+            language: 'bash',
+          },
+        ]
+      : []),
+  ];
+
+  if (previewItems.length === 0 && !sourceWork.sourceFiles.length && !sourceWork.diffText) {
+    return <Empty description="연결된 작업일지 산출물이 없습니다." />;
+  }
+
+  return (
+    <>
+      <Space direction="vertical" size={16} style={{ width: '100%' }}>
+        {sourceWork.sourceFiles.length || sourceWork.diffText ? (
+          <CodexDiffPreviewer
+            title="작업 소스"
+            description="변경 파일 기준 전체 소스와 raw diff를 Codex preview 스타일로 전환해 표시합니다."
+            files={sourceWork.sourceFiles}
+            diffText={sourceWork.diffText}
+            height="auto"
+          />
+        ) : null}
+        {previewItems.length ? (
+          <EvidenceAttachmentStrip
+            title="산출물 Preview"
+            attachments={previewItems}
+            compact
+            onPreview={(attachment) => {
+              setPreviewModalItem(attachment);
+            }}
+            onCopy={(attachment) => handleCopyText(attachment.copyValue ?? attachment.value)}
+          />
+        ) : null}
+      </Space>
+
+      <Modal
+        open={Boolean(previewModalItem)}
+        title={previewModalItem?.title ?? 'Preview'}
+        footer={null}
+        width={1120}
+        rootClassName="plan-board-page__evidence-modal"
+        onCancel={() => {
+          setPreviewModalItem(null);
+        }}
+        closeIcon={<CloseOutlined />}
+      >
+        {previewModalItem ? (
+          <div className="plan-board-page__evidence-modal-shell">
+            <Flex justify="space-between" align="center" gap={12} wrap className="plan-board-page__evidence-modal-toolbar">
+              <Text type="secondary">{previewModalItem.description}</Text>
+              <Space size={8}>
+                <Button
+                  aria-label="복사"
+                  icon={<CopyOutlined />}
+                  onClick={() => void handleCopyText(previewModalItem.value)}
+                />
+                {previewModalItem.linkUrl ? (
+                  <Button type="link" href={previewModalItem.linkUrl} target="_blank" rel="noreferrer">
+                    링크 열기
+                  </Button>
+                ) : null}
+                <Button
+                  icon={<CloseOutlined />}
+                  onClick={() => {
+                    setPreviewModalItem(null);
+                  }}
+                >
+                  닫기
+                </Button>
+              </Space>
+            </Flex>
+            <div className="plan-board-page__evidence-modal-body">
+              <EvidenceAttachmentPreviewBody attachment={previewModalItem} />
+            </div>
+          </div>
+        ) : null}
+      </Modal>
+    </>
+  );
+}
+
+function toPublicAssetPath(path: string) {
+  const normalizedPath = path.trim().replace(/^\.?\//, '');
+
+  return normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`;
+}
+
+function normalizeReleasePreviewUrl(url: string | null) {
+  return url;
+}
+
+const IMAGE_ARTIFACT_PATTERN = /\.(png|jpe?g|gif|webp|svg)$/i;
+const VIDEO_ARTIFACT_PATTERN = /\.(mp4|webm|mov|m4v|ogv)$/i;
+const AUDIO_ARTIFACT_PATTERN = /\.(mp3|wav|m4a|aac|flac|oga|ogg)$/i;
+const PDF_ARTIFACT_PATTERN = /\.pdf$/i;
+const HTML_ARTIFACT_PATTERN = /\.(html?)$/i;
+const MARKDOWN_ARTIFACT_PATTERN = /\.(md|mdx)$/i;
+const JSON_ARTIFACT_PATTERN = /\.(json|jsonl)$/i;
+const TEXT_ARTIFACT_PATTERN =
+  /\.(txt|log|csv|yaml|yml|xml|diff|patch|sh|bash|zsh|ini|cfg|conf|sql|js|jsx|ts|tsx|css|scss|less|java|kt|py|rb|go|rs)$/i;
+
+function buildArtifactPreviewItem(path: string, content: string | undefined, loading: boolean): EvidenceAttachmentItem {
+  const publicPath = toPublicAssetPath(path);
+  const fileName = path.split('/').pop() ?? path;
+
+  if (IMAGE_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'image',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: publicPath,
+    };
+  }
+
+  if (VIDEO_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'video',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: publicPath,
+    };
+  }
+
+  if (AUDIO_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'audio',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: publicPath,
+    };
+  }
+
+  if (PDF_ARTIFACT_PATTERN.test(path) || HTML_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'pdf',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: publicPath,
+    };
+  }
+
+  if (MARKDOWN_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'markdown',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: content ?? (loading ? '파일 내용을 불러오는 중입니다.' : '파일 내용을 불러오지 못했습니다.'),
+    };
+  }
+
+  if (JSON_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'json',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: content ?? (loading ? '파일 내용을 불러오는 중입니다.' : '파일 내용을 불러오지 못했습니다.'),
+    };
+  }
+
+  if (TEXT_ARTIFACT_PATTERN.test(path)) {
+    return {
+      key: `artifact:${path}`,
+      kind: 'code',
+      title: fileName,
+      description: path,
+      linkUrl: publicPath,
+      value: content ?? (loading ? '파일 내용을 불러오는 중입니다.' : '파일 내용을 불러오지 못했습니다.'),
+      language: inferArtifactLanguage(path),
+    };
+  }
+
+  return {
+    key: `artifact:${path}`,
+    kind: 'empty',
+    title: fileName,
+    description: path,
+    linkUrl: publicPath,
+    value: '미리보기를 지원하지 않는 형식입니다. 링크로 원본 파일을 열어 확인하세요.',
+  };
+}
+
+function isFetchableTextArtifactPath(path: string) {
+  return MARKDOWN_ARTIFACT_PATTERN.test(path) || JSON_ARTIFACT_PATTERN.test(path) || TEXT_ARTIFACT_PATTERN.test(path);
+}
+
+function inferArtifactLanguage(path: string) {
+  const normalizedPath = path.toLowerCase();
+
+  if (normalizedPath.endsWith('.tsx')) {
+    return 'tsx';
+  }
+
+  if (normalizedPath.endsWith('.ts')) {
+    return 'typescript';
+  }
+
+  if (normalizedPath.endsWith('.jsx')) {
+    return 'jsx';
+  }
+
+  if (normalizedPath.endsWith('.js')) {
+    return 'javascript';
+  }
+
+  if (normalizedPath.endsWith('.json') || normalizedPath.endsWith('.jsonl')) {
+    return 'json';
+  }
+
+  if (normalizedPath.endsWith('.yml') || normalizedPath.endsWith('.yaml')) {
+    return 'yaml';
+  }
+
+  if (normalizedPath.endsWith('.html') || normalizedPath.endsWith('.htm')) {
+    return 'html';
+  }
+
+  if (normalizedPath.endsWith('.css') || normalizedPath.endsWith('.scss') || normalizedPath.endsWith('.less')) {
+    return 'css';
+  }
+
+  if (normalizedPath.endsWith('.diff') || normalizedPath.endsWith('.patch')) {
+    return 'diff';
+  }
+
+  if (normalizedPath.endsWith('.sh') || normalizedPath.endsWith('.bash') || normalizedPath.endsWith('.zsh')) {
+    return 'bash';
+  }
+
+  if (normalizedPath.endsWith('.py')) {
+    return 'python';
+  }
+
+  if (normalizedPath.endsWith('.md') || normalizedPath.endsWith('.mdx')) {
+    return 'markdown';
+  }
+
+  return 'text';
+}
+
+function toDraft(item: PlanItem): PlanDraft {
+  return {
+    id: item.id,
+    workId: item.workId,
+    note: item.note,
+    automationType: item.automationType,
+    status: item.status,
+    jangsingProcessingRequired: item.jangsingProcessingRequired,
+    autoDeployToMain: item.autoDeployToMain,
+    repeatRequestEnabled: item.repeatRequestEnabled,
+    repeatIntervalMinutes: item.repeatIntervalMinutes,
+  };
+}
+
+function isFunctionCheckEditableStatus(status: PlanItem['status'] | PlanDraft['status']) {
+  return isCompletedPlanStatus(status);
+}
+
+function isCompletedPlanStatus(status: PlanItem['status'] | PlanDraft['status']) {
+  return status === '작업완료' || status === '릴리즈완료' || status === '완료';
+}
+
+function isReleaseCompletedPlanItem(item: Pick<PlanItem, 'status' | 'mergedAt'>) {
+  return item.status === '릴리즈완료' || item.status === '완료' || Boolean(item.mergedAt);
+}
+
+function isMainCompletedPlanItem(item: Pick<PlanItem, 'status' | 'workerStatus' | 'autoDeployToMain'> | null | undefined) {
+  if (!item || !item.autoDeployToMain) {
+    return false;
+  }
+
+  return item.status === '완료' || item.workerStatus?.replace(/\s+/g, '') === 'main반영완료';
+}
+
+function PlanDetailSection({
+  children,
+  defaultOpen = false,
+  title,
+}: {
+  children: ReactNode;
+  defaultOpen?: boolean;
+  title: string;
+}) {
+  return (
+    <details className="plan-board-page__detail-section" open={defaultOpen}>
+      <summary className="plan-board-page__detail-section-summary">
+        <Text strong>{title}</Text>
+        <Text type="secondary">접기/펼치기</Text>
+      </summary>
+      <div className="plan-board-page__detail-section-body">{children}</div>
+    </details>
+  );
+}
+
+function PlanWorkChecklist({
+  hasOpenIssues,
+  item,
+  sourceWorkCount,
+}: {
+  hasOpenIssues: boolean;
+  item: PlanItem;
+  sourceWorkCount: number;
+}) {
+  const workerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+  const checklist = [
+    {
+      key: 'implementation',
+      label: '구현 변경 기록',
+      checked: sourceWorkCount > 0 || workerStatus === '자동완료' || item.status !== '등록',
+      note: sourceWorkCount > 0 ? `${sourceWorkCount}개 소스 작업 증적` : '소스 작업 증적 대기',
+    },
+    {
+      key: 'verification',
+      label: '기능동작확인',
+      checked: item.status === '작업완료' || item.status === '릴리즈완료' || item.status === '완료',
+      note: getFunctionCheckLabel(item.jangsingProcessingRequired),
+    },
+    {
+      key: 'release',
+      label: 'release 반영',
+      checked: item.status === '릴리즈완료' || item.status === '완료' || Boolean(item.mergedAt),
+      note: workerStatus === 'release반영실패' ? 'release 반영 실패' : item.releaseTarget ?? 'release',
+    },
+    {
+      key: 'main',
+      label: 'main 동기화',
+      checked: item.status === '완료' || workerStatus === 'main반영완료' || !item.autoDeployToMain,
+      note: getMainChecklistNote(item),
+    },
+    {
+      key: 'issues',
+      label: '열린 이슈 없음',
+      checked: !hasOpenIssues,
+      note: hasOpenIssues ? '조치 필요' : '정상',
+    },
+  ];
+
+  return (
+    <Space direction="vertical" size={8} className="plan-board-page__checklist">
+      {checklist.map((entry) => (
+        <Flex key={entry.key} justify="space-between" align="center" gap={8} wrap>
+          <Checkbox checked={entry.checked} disabled>
+            {entry.label}
+          </Checkbox>
+          <Text type={entry.checked ? 'secondary' : 'warning'}>{entry.note}</Text>
+        </Flex>
+      ))}
+    </Space>
+  );
+}
+
+function ReleaseReadySummary({
+  hasAccess,
+  issueHistories,
+  item,
+  sourceWorkHistories,
+}: {
+  hasAccess: boolean;
+  issueHistories: PlanIssueHistory[];
+  item: PlanItem;
+  sourceWorkHistories: PlanSourceWorkHistory[];
+}) {
+  const changedFiles = Array.from(new Set(sourceWorkHistories.flatMap((history) => history.changedFiles)));
+  const unresolvedIssueCount = issueHistories.filter((history) => !history.resolved).length;
+  const workerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+  const releaseBlocked =
+    Boolean(item.lastError) ||
+    item.hasOpenIssues ||
+    workerStatus === 'release반영실패' ||
+    workerStatus === 'main반영실패' ||
+    (item.status === '작업중' && sourceWorkHistories.length === 0);
+
+  return (
+    <Space direction="vertical" size={12} className="plan-board-page__release-summary">
+      <Flex gap={8} wrap>
+        <Tag color={releaseBlocked ? 'error' : 'success'}>
+          {releaseBlocked ? '추가 확인 필요' : 'release 반영 가능'}
+        </Tag>
+        <Tag>{`변경 파일 ${changedFiles.length}개`}</Tag>
+        <Tag color={unresolvedIssueCount ? 'warning' : 'default'}>{`미해결 이슈 ${unresolvedIssueCount}개`}</Tag>
+      </Flex>
+      <Space direction="vertical" size={4}>
+        <Text>테스트/검증: {getFunctionCheckLabel(item.jangsingProcessingRequired)}</Text>
+        <Text>release 상태: {getReleaseSummaryNote(item)}</Text>
+        <Text>main 상태: {getMainChecklistNote(item)}</Text>
+      </Space>
+      {changedFiles.length ? (
+        <div className="plan-board-page__file-tags">
+          {changedFiles.slice(0, 20).map((file) => (
+            <Tag key={`release-summary-${file}`}>{file}</Tag>
+          ))}
+          {changedFiles.length > 20 ? <Tag>{`+${changedFiles.length - 20}`}</Tag> : null}
+        </div>
+      ) : (
+        <Text type="secondary">기록된 변경 파일이 없습니다.</Text>
+      )}
+      {item.lastError ? <ExpandableDetailText text={resolveProtectedText(item.lastError, !hasAccess)} type="danger" /> : null}
+    </Space>
+  );
+}
+
+function getReleaseSummaryNote(item: PlanItem) {
+  const workerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+
+  if (workerStatus === 'release반영실패') {
+    return 'release 반영 실패';
+  }
+
+  if (item.status === '릴리즈완료' || item.status === '완료' || item.mergedAt) {
+    return `반영 완료 (${formatPlanDateTime(item.mergedAt)})`;
+  }
+
+  if (workerStatus === 'release반영중') {
+    return 'release 반영 중';
+  }
+
+  if (workerStatus === 'release반영대기' || item.status === '작업완료') {
+    return 'release 반영 대기';
+  }
+
+  return 'release 반영 전';
+}
+
+function getMainChecklistNote(item: PlanItem) {
+  const workerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+
+  if (!item.autoDeployToMain) {
+    return 'main 자동등록 미대상';
+  }
+
+  if (workerStatus === 'main반영실패') {
+    return 'main 반영 실패';
+  }
+
+  if (item.status === '완료' || workerStatus === 'main반영완료') {
+    return `main 반영 완료 (${formatPlanDateTime(item.mergedAt)})`;
+  }
+
+  if (workerStatus === 'main반영중') {
+    return 'main 반영 중';
+  }
+
+  if (workerStatus === 'main반영대기' || item.status === '릴리즈완료') {
+    return 'main 반영 대기';
+  }
+
+  return 'main 반영 전';
+}
+
+function matchesWorkerStateFilter(item: PlanItem, filter: WorkerStateFilter) {
+  if (filter === 'all') {
+    return true;
+  }
+
+  const normalizedWorkerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+
+  if (filter === 'active') {
+    return isAutomationInProgress(item.workerStatus);
+  }
+
+  if (filter === 'waiting') {
+    return normalizedWorkerStatus.endsWith('대기') || normalizedWorkerStatus === '브랜치준비';
+  }
+
+  if (filter === 'failed') {
+    return isAutomationFailedItem(item) || Boolean(item.lastError);
+  }
+
+  if (filter === 'done') {
+    return normalizedWorkerStatus === '자동완료' || normalizedWorkerStatus.endsWith('완료');
+  }
+
+  return !normalizedWorkerStatus;
+}
+
+function matchesReleaseStateFilter(item: PlanItem, filter: ReleaseStateFilter) {
+  if (filter === 'all') {
+    return true;
+  }
+
+  const normalizedWorkerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+
+  if (filter === 'pending') {
+    return item.status === '작업완료' || normalizedWorkerStatus === 'release반영대기' || normalizedWorkerStatus === 'release반영중';
+  }
+
+  if (filter === 'merged') {
+    return item.status === '릴리즈완료' || item.status === '완료' || Boolean(item.mergedAt);
+  }
+
+  return normalizedWorkerStatus === 'release반영실패';
+}
+
+function matchesMainStateFilter(item: PlanItem, filter: MainStateFilter) {
+  if (filter === 'all') {
+    return true;
+  }
+
+  const normalizedWorkerStatus = item.workerStatus?.replace(/\s+/g, '') ?? '';
+
+  if (filter === 'pending') {
+    return item.status === '릴리즈완료' || normalizedWorkerStatus === 'main반영대기' || normalizedWorkerStatus === 'main반영중';
+  }
+
+  if (filter === 'merged') {
+    return item.status === '완료' || normalizedWorkerStatus === 'main반영완료';
+  }
+
+  if (filter === 'failed') {
+    return normalizedWorkerStatus === 'main반영실패';
+  }
+
+  return !item.autoDeployToMain && item.status !== '완료';
+}
+
+function matchesIssueStateFilter(item: PlanItem, filter: IssueStateFilter) {
+  if (filter === 'all') {
+    return true;
+  }
+
+  if (filter === 'open') {
+    return item.hasOpenIssues;
+  }
+
+  return !item.hasOpenIssues;
+}
+
+function matchesCostStateFilter(item: PlanItem, filter: CostStateFilter, usageSummary: AutomationUsageSummary | null) {
+  void item;
+
+  if (filter === 'all') {
+    return true;
+  }
+
+  if (filter === 'recorded') {
+    return Boolean(usageSummary);
+  }
+
+  if (filter === 'none') {
+    return !usageSummary;
+  }
+
+  if (!usageSummary?.tierLabel) {
+    return false;
+  }
+
+  if (filter === 'stable') {
+    return usageSummary.tierLabel === '안정';
+  }
+
+  if (filter === 'attention') {
+    return usageSummary.tierLabel === '관심';
+  }
+
+  if (filter === 'warning') {
+    return usageSummary.tierLabel === '주의';
+  }
+
+  return usageSummary.tierLabel === '높음';
+}
+
+function getFunctionCheckLabel(jangsingProcessingRequired: boolean) {
+  return jangsingProcessingRequired ? '완료' : '오동작';
+}
+
+function comparePlanItemsByRecent(left: PlanItem, right: PlanItem) {
+  return right.id - left.id;
+}
+
+function comparePlanItemsByAutomationPriority(left: PlanItem, right: PlanItem) {
+  const leftPriority = isAutomationInProgress(left.workerStatus) ? 0 : 1;
+  const rightPriority = isAutomationInProgress(right.workerStatus) ? 0 : 1;
+
+  return leftPriority - rightPriority;
+}
+
+function getPlanFilterLabel(statusFilter: PlanFilterStatus) {
+  if (statusFilter === 'all') {
+    return '전체';
+  }
+
+  if (statusFilter === 'in-progress') {
+    return '작업중';
+  }
+
+  if (statusFilter === 'done') {
+    return '완료';
+  }
+
+  return '오류';
+}
+
+function isAutomationInProgress(workerStatus: string | null) {
+  return workerStatus ? ACTIVE_WORKER_STATUSES.has(workerStatus) : false;
+}
+
+function shouldAutoRefreshAutomation(workerStatus: string | null) {
+  return workerStatus ? AUTO_REFRESH_CANDIDATE_WORKER_STATUSES.has(workerStatus) : false;
+}
+
+function formatElapsedDuration(timestamp: string | null) {
+  if (!timestamp) {
+    return null;
+  }
+
+  const elapsedMs = Date.now() - new Date(timestamp).getTime();
+
+  if (!Number.isFinite(elapsedMs) || elapsedMs < 0) {
+    return null;
+  }
+
+  const totalMinutes = Math.floor(elapsedMs / 60000);
+
+  if (totalMinutes < 1) {
+    return '1분 미만 경과';
+  }
+
+  if (totalMinutes < 60) {
+    return `${totalMinutes}분 경과`;
+  }
+
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  if (minutes === 0) {
+    return `${hours}시간 경과`;
+  }
+
+  return `${hours}시간 ${minutes}분 경과`;
+}
+
+function describeAutomationWork(workerStatus: string | null) {
+  if (!workerStatus) {
+    return null;
+  }
+
+  const normalizedStatus = workerStatus.replace(/\s+/g, '');
+
+  if (normalizedStatus === '브랜치생성중') {
+    return '작업 브랜치를 만들고 자동 작업 준비를 진행하고 있습니다.';
+  }
+
+  if (normalizedStatus === '자동작업중') {
+    return '요청 내용을 반영해 코드와 관련 파일을 수정하고 결과를 확인하고 있습니다.';
+  }
+
+  if (normalizedStatus === 'release반영중') {
+    return '작업 결과를 release 브랜치에 병합하고 반영 상태를 확인하고 있습니다.';
+  }
+
+  if (normalizedStatus === 'main반영중') {
+    return 'release 브랜치에 쌓인 반영 결과를 main 브랜치에 일괄 적용하고 있습니다.';
+  }
+
+  if (normalizedStatus === '브랜치준비') {
+    return '브랜치 생성 작업이 시작되기 전 대기 중입니다.';
+  }
+
+  if (normalizedStatus === 'release반영대기') {
+    return '개발 작업이 끝나서 release 반영 순서를 기다리고 있습니다.';
+  }
+
+  if (normalizedStatus === 'main반영대기') {
+    return 'release 브랜치 기준 main 일괄 반영 순서를 기다리고 있습니다.';
+  }
+
+  if (normalizedStatus === '브랜치실패') {
+    return '브랜치 생성 단계에서 문제가 발생해 재시도가 필요합니다.';
+  }
+
+  if (normalizedStatus === '자동작업실패') {
+    return '코드 수정 또는 검증 단계에서 문제가 발생해 확인이 필요합니다.';
+  }
+
+  if (normalizedStatus === 'release반영실패') {
+    return 'release 브랜치 반영 단계에서 문제가 발생했습니다.';
+  }
+
+  if (normalizedStatus === 'main반영실패') {
+    return 'main 브랜치 일괄 반영 단계에서 문제가 발생했습니다.';
+  }
+
+  if (normalizedStatus === '자동완료' || normalizedStatus.endsWith('완료')) {
+    return '자동화 단계 처리가 완료되었습니다.';
+  }
+
+  if (workerStatus.includes('검증')) {
+    return `${workerStatus} 단계로 결과를 점검하고 필요한 후속 수정을 확인하고 있습니다.`;
+  }
+
+  if (workerStatus.includes('수정')) {
+    return `${workerStatus} 단계로 요청 내용을 반영하는 작업을 진행하고 있습니다.`;
+  }
+
+  return `${workerStatus} 단계 작업을 진행하고 있습니다.`;
+}
+
+type AutomationTone = 'idle' | 'active' | 'success' | 'error';
+type AutomationPresentation = {
+  label: string;
+  description: string | null;
+  tone: AutomationTone;
+  active: boolean;
+};
+
+function getAutomationStatusPresentation(item: Pick<PlanItem, 'status' | 'workerStatus' | 'lastError'>) {
+  const workerStatus = item.workerStatus;
+  const description = describeAutomationWork(workerStatus);
+
+  if (!workerStatus) {
+    return {
+      label: '자동화 대기',
+      description: item.status === '완료' ? '모든 자동화 단계가 끝난 상태입니다.' : '자동화 작업이 아직 시작되지 않았습니다.',
+      tone: item.status === '완료' ? 'success' : 'idle',
+      active: false,
+    } satisfies AutomationPresentation;
+  }
+
+  if (workerStatus.includes('실패') || item.lastError) {
+    return {
+      label: `자동화 상태: ${workerStatus}`,
+      description,
+      tone: 'error',
+      active: false,
+    } satisfies AutomationPresentation;
+  }
+
+  if (isAutomationInProgress(workerStatus)) {
+    return {
+      label: `자동화 진행중: ${workerStatus}`,
+      description,
+      tone: 'active',
+      active: true,
+    } satisfies AutomationPresentation;
+  }
+
+  if (workerStatus === '자동완료' || workerStatus.endsWith('완료') || item.status === '완료') {
+    return {
+      label: `자동화 상태: ${workerStatus}`,
+      description,
+      tone: 'success',
+      active: false,
+    } satisfies AutomationPresentation;
+  }
+
+  return {
+    label: `자동화 상태: ${workerStatus}`,
+    description,
+    tone: 'idle',
+    active: false,
+  } satisfies AutomationPresentation;
+}
+
+function extractAutomationTokenUsageText(sourceWork: Pick<PlanSourceWorkHistory, 'summary' | 'commandLog'> | null | undefined) {
+  const candidates = [sourceWork?.commandLog, sourceWork?.summary];
+
+  for (const candidate of candidates) {
+    if (!candidate) {
+      continue;
+    }
+
+    const line = candidate
+      .split('\n')
+      .map((entry) => entry.trim())
+      .find((entry) => /^토큰 사용량:\s*/.test(entry));
+
+    if (line) {
+      return line.replace(/^토큰 사용량:\s*/u, '').trim();
+    }
+  }
+
+  return null;
+}
+
+function isHistoryAfterReference(createdAt: string | null | undefined, referenceAt: string | null | undefined) {
+  if (!createdAt) {
+    return false;
+  }
+
+  if (!referenceAt) {
+    return true;
+  }
+
+  return new Date(createdAt).getTime() > new Date(referenceAt).getTime();
+}
+
+function parseTokenMetricValue(valueText: string, unitText: string | undefined) {
+  const normalized = Number(valueText.replace(/,/g, ''));
+
+  if (!Number.isFinite(normalized)) {
+    return null;
+  }
+
+  const unit = unitText?.toLowerCase() ?? '';
+
+  if (unit === 'k') {
+    return Math.round(normalized * 1_000);
+  }
+
+  if (unit === 'm') {
+    return Math.round(normalized * 1_000_000);
+  }
+
+  return Math.round(normalized);
+}
+
+function parseAutomationTokenUsageMetrics(tokenUsageText: string) {
+  const normalizedText = tokenUsageText
+    .replace(/^tokens?\s+used\s*:?\s*/iu, '')
+    .replace(/\(([^)]+)\)/g, ', $1')
+    .trim();
+  const metrics = new Map<string, number>();
+
+  for (const match of normalizedText.matchAll(/(\d[\d,]*(?:\.\d+)?)\s*([km]?)\s*(input|output|total|cached|reasoning)\b/giu)) {
+    const label = match[3]?.toLowerCase() ?? '';
+    const value = parseTokenMetricValue(match[1] ?? '', match[2]);
+
+    if (!label || value === null) {
+      continue;
+    }
+
+    metrics.set(label, value);
+  }
+
+  for (const match of normalizedText.matchAll(/\b(input|output|total|cached|reasoning)\s*[:=]?\s*(\d[\d,]*(?:\.\d+)?)\s*([km]?)/giu)) {
+    const label = match[1]?.toLowerCase() ?? '';
+    const value = parseTokenMetricValue(match[2] ?? '', match[3]);
+
+    if (!label || value === null) {
+      continue;
+    }
+
+    metrics.set(label, value);
+  }
+
+  if (metrics.size > 0) {
+    return metrics;
+  }
+
+  const fallbackMatch = normalizedText.match(/(\d[\d,]*(?:\.\d+)?)\s*([km]?)/i);
+
+  if (!fallbackMatch) {
+    return null;
+  }
+
+  const fallbackValue = parseTokenMetricValue(fallbackMatch[1], fallbackMatch[2]);
+
+  if (fallbackValue === null) {
+    return null;
+  }
+
+  return new Map([['total', fallbackValue]]);
+}
+
+function formatTokenMetricValue(value: number) {
+  return new Intl.NumberFormat('ko-KR').format(value);
+}
+
+function formatCostMetricValue(value: number) {
+  return `${new Intl.NumberFormat('ko-KR').format(Math.round(value))}원`;
+}
+
+function summarizeAutomationTokenUsage(
+  sourceWorks: Array<Pick<PlanSourceWorkHistory, 'summary' | 'commandLog'>>,
+) {
+  const totals = new Map<string, number>();
+
+  sourceWorks.forEach((sourceWork) => {
+    const tokenUsageText = extractAutomationTokenUsageText(sourceWork);
+
+    if (!tokenUsageText) {
+      return;
+    }
+
+    const metrics = parseAutomationTokenUsageMetrics(tokenUsageText);
+
+    if (!metrics) {
+      return;
+    }
+
+    metrics.forEach((value, key) => {
+      totals.set(key, (totals.get(key) ?? 0) + value);
+    });
+  });
+
+  if (totals.size === 0) {
+    return null;
+  }
+
+  const entries: Array<[string, string]> = [
+    ['total', '총'],
+    ['input', '입력'],
+    ['output', '출력'],
+    ['cached', '캐시'],
+    ['reasoning', '추론'],
+  ];
+
+  return entries
+    .filter(([key]) => totals.has(key))
+    .map(([key, label]) => `${label} ${formatTokenMetricValue(totals.get(key) ?? 0)}`)
+    .join(' · ');
+}
+
+type AutomationUsageSummary = {
+  costLabel: string;
+  tokenLabel: string;
+  description: string | null;
+  tierColor: 'success' | 'processing' | 'warning' | 'error' | null;
+  tierLabel: string | null;
+};
+
+function formatProcessingDurationLabel(durationSeconds: number | null | undefined) {
+  const normalized = Number(durationSeconds ?? 0);
+
+  if (!Number.isFinite(normalized) || normalized <= 0) {
+    return null;
+  }
+
+  if (normalized < 60) {
+    return `처리 ${Math.round(normalized)}초`;
+  }
+
+  if (normalized < 3600) {
+    return `처리 ${Math.round(normalized / 60)}분`;
+  }
+
+  return `처리 ${(normalized / 3600).toFixed(1)}시간`;
+}
+
+function summarizeAutomationUsageSnapshotTokens(snapshot: PlanAutomationUsageSnapshot) {
+  const tokenTotals = snapshot.tokenTotals ?? {
+    total: snapshot.totalTokens,
+    input: 0,
+    output: 0,
+    cached: 0,
+    reasoning: 0,
+  };
+  const entries = [
+    [Number(tokenTotals.total ?? snapshot.totalTokens ?? 0), '총'],
+    [Number(tokenTotals.input ?? 0), '입력'],
+    [Number(tokenTotals.output ?? 0), '출력'],
+    [Number(tokenTotals.cached ?? 0), '캐시'],
+    [Number(tokenTotals.reasoning ?? 0), '추론'],
+  ] as Array<[number, string]>;
+  const validEntries = entries.filter(([value]) => Number.isFinite(value) && value > 0);
+
+  if (validEntries.length === 0) {
+    return null;
+  }
+
+  return validEntries
+    .map(([value, label]) => `${label} ${formatTokenMetricValue(value)}`)
+    .join(' · ');
+}
+
+function buildAutomationUsageSummaryFromSnapshot(
+  snapshot: PlanAutomationUsageSnapshot | null | undefined,
+  appConfig: Pick<AppConfig, 'planCost'>,
+): AutomationUsageSummary | null {
+  if (!snapshot) {
+    return null;
+  }
+
+  const tokenSummaryText = summarizeAutomationUsageSnapshotTokens(snapshot);
+  const estimatedCost = estimateAutomationCost(
+    Math.max(0, Number(snapshot.totalTokens ?? 0)),
+    Math.max(0, Number(snapshot.retryCount ?? 0)),
+    snapshot.processingDurationSeconds,
+    appConfig.planCost.baseCostPerMillionTokens,
+    appConfig.planCost.retryCostMultiplierPercent,
+    appConfig.planCost.hourlyCostMultiplierPercent,
+    appConfig.planCost.timeCostUnit,
+  );
+  const tier = getAutomationCostTier(
+    estimatedCost,
+    appConfig.planCost.baseCostPerMillionTokens,
+    appConfig.planCost.attentionCostThresholdMultiplier,
+    appConfig.planCost.warningCostThresholdMultiplier,
+    appConfig.planCost.highCostThresholdMultiplier,
+  );
+  const descriptionParts = [
+    snapshot.retryCount > 0 ? `재처리 ${snapshot.retryCount}회 포함` : null,
+    snapshot.sourceWorkCount > 0 ? `증적 ${snapshot.sourceWorkCount}건` : null,
+    formatProcessingDurationLabel(snapshot.processingDurationSeconds),
+  ].filter(Boolean);
+
+  if (!tokenSummaryText && snapshot.sourceWorkCount === 0 && !snapshot.processingDurationSeconds) {
+    return null;
+  }
+
+  return {
+    costLabel: `예상 비용 ${formatCostMetricValue(estimatedCost)}`,
+    tokenLabel: tokenSummaryText ? `누적 토큰 사용량 ${tokenSummaryText}` : '누적 토큰 사용량 기록 없음',
+    description: descriptionParts.length > 0 ? descriptionParts.join(' · ') : null,
+    tierColor: tier.color,
+    tierLabel: tier.label,
+  };
+}
+
+function getAutomationTotalTokenCount(metrics: Map<string, number>) {
+  const total = metrics.get('total');
+
+  if (typeof total === 'number' && Number.isFinite(total)) {
+    return total;
+  }
+
+  return ['input', 'output', 'cached', 'reasoning'].reduce((sum, key) => sum + (metrics.get(key) ?? 0), 0);
+}
+
+function estimateAutomationCost(
+  totalTokens: number,
+  retryCount: number,
+  processingDurationSeconds: number | null | undefined,
+  baseCostPerMillionTokens: number,
+  retryCostMultiplierPercent: number,
+  hourlyCostMultiplierPercent: number,
+  timeCostUnit: AppConfig['planCost']['timeCostUnit'],
+) {
+  if (totalTokens <= 0) {
+    return 0;
+  }
+
+  const durationSeconds = Math.max(0, Number(processingDurationSeconds ?? 0));
+  const durationUnits =
+    timeCostUnit === 'second' ? durationSeconds : timeCostUnit === 'minute' ? durationSeconds / 60 : durationSeconds / 3600;
+  const additiveMultiplier =
+    1 + retryCount * (retryCostMultiplierPercent / 100) + durationUnits * (hourlyCostMultiplierPercent / 100);
+
+  return (totalTokens / 1_000_000) * baseCostPerMillionTokens * additiveMultiplier;
+}
+
+function getAutomationCostTier(
+  cost: number,
+  baseCostPerMillionTokens: number,
+  attentionCostThresholdMultiplier: number,
+  warningCostThresholdMultiplier: number,
+  highCostThresholdMultiplier: number,
+) {
+  const attentionThreshold = baseCostPerMillionTokens * Math.max(0.1, attentionCostThresholdMultiplier);
+  const warningThreshold = baseCostPerMillionTokens * Math.max(attentionCostThresholdMultiplier, warningCostThresholdMultiplier);
+  const highThreshold = baseCostPerMillionTokens * Math.max(warningCostThresholdMultiplier, highCostThresholdMultiplier);
+
+  if (cost <= attentionThreshold) {
+    return { color: 'success', label: '안정' } as const;
+  }
+
+  if (cost <= warningThreshold) {
+    return { color: 'processing', label: '관심' } as const;
+  }
+
+  if (cost <= highThreshold) {
+    return { color: 'warning', label: '주의' } as const;
+  }
+
+  return { color: 'error', label: '높음' } as const;
+}
+
+function buildAutomationUsageSummary(
+  sourceWorks: Array<Pick<PlanSourceWorkHistory, 'summary' | 'commandLog' | 'createdAt'>>,
+  appConfig: Pick<AppConfig, 'planCost'>,
+): AutomationUsageSummary | null {
+  const tokenSummaryText = summarizeAutomationTokenUsage(sourceWorks);
+
+  if (!tokenSummaryText) {
+    return null;
+  }
+
+  const totals = new Map<string, number>();
+
+  sourceWorks.forEach((sourceWork) => {
+    const tokenUsageText = extractAutomationTokenUsageText(sourceWork);
+
+    if (!tokenUsageText) {
+      return;
+    }
+
+    const metrics = parseAutomationTokenUsageMetrics(tokenUsageText);
+
+    if (!metrics) {
+      return;
+    }
+
+    metrics.forEach((value, key) => {
+      totals.set(key, (totals.get(key) ?? 0) + value);
+    });
+  });
+
+  const totalTokens = getAutomationTotalTokenCount(totals);
+  const retryCount = Math.max(0, sourceWorks.length - 1);
+  const processingDurationSeconds =
+    sourceWorks.length > 1
+      ? Math.max(
+          0,
+          Math.round(
+            (new Date(sourceWorks[sourceWorks.length - 1].createdAt).getTime() - new Date(sourceWorks[0].createdAt).getTime()) /
+              1_000,
+          ),
+        )
+      : null;
+  const estimatedCost = estimateAutomationCost(
+    totalTokens,
+    retryCount,
+    processingDurationSeconds,
+    appConfig.planCost.baseCostPerMillionTokens,
+    appConfig.planCost.retryCostMultiplierPercent,
+    appConfig.planCost.hourlyCostMultiplierPercent,
+    appConfig.planCost.timeCostUnit,
+  );
+  const tier = getAutomationCostTier(
+    estimatedCost,
+    appConfig.planCost.baseCostPerMillionTokens,
+    appConfig.planCost.attentionCostThresholdMultiplier,
+    appConfig.planCost.warningCostThresholdMultiplier,
+    appConfig.planCost.highCostThresholdMultiplier,
+  );
+
+  return {
+    costLabel: `예상 비용 ${formatCostMetricValue(estimatedCost)}`,
+    tokenLabel: `누적 토큰 사용량 ${tokenSummaryText}`,
+    description: [retryCount > 0 ? `재처리 ${retryCount}회 포함` : null, formatProcessingDurationLabel(processingDurationSeconds)]
+      .filter(Boolean)
+      .join(' · ') || null,
+    tierColor: tier.color,
+    tierLabel: tier.label,
+  };
+}
+
+function buildAutomationUsageSummaryByHistoryId(
+  sourceWorks: PlanSourceWorkHistory[],
+  appConfig: Pick<AppConfig, 'planCost'>,
+) {
+  const summaries = new Map<number, AutomationUsageSummary>();
+  const orderedSourceWorks = sourceWorks
+    .slice()
+    .sort((left, right) => new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime());
+  const cumulativeSourceWorks: Array<Pick<PlanSourceWorkHistory, 'summary' | 'commandLog' | 'createdAt'>> = [];
+
+  orderedSourceWorks.forEach((sourceWork) => {
+    cumulativeSourceWorks.push(sourceWork);
+    const summary = buildAutomationUsageSummary(cumulativeSourceWorks, appConfig);
+
+    if (summary) {
+      summaries.set(sourceWork.id, summary);
+    }
+  });
+
+  return summaries;
+}
+
+function AutomationStatusBar({
+  item,
+  usageSummary,
+  compact = false,
+}: {
+  item: Pick<PlanItem, 'status' | 'workerStatus' | 'lastError' | 'startedAt'>;
+  usageSummary?: AutomationUsageSummary | null;
+  compact?: boolean;
+}) {
+  const [elapsedLabel, setElapsedLabel] = useState(() => formatElapsedDuration(item.startedAt));
+
+  useEffect(() => {
+    setElapsedLabel(formatElapsedDuration(item.startedAt));
+
+    if (!item.startedAt || !isAutomationInProgress(item.workerStatus)) {
+      return;
+    }
+
+    const intervalId = window.setInterval(() => {
+      setElapsedLabel(formatElapsedDuration(item.startedAt));
+    }, 30000);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [item.startedAt, item.workerStatus]);
+
+  const presentation = getAutomationStatusPresentation(item);
+  const classes = [
+    'plan-board-page__automation-status',
+    `plan-board-page__automation-status--${presentation.tone}`,
+    compact ? 'plan-board-page__automation-status--compact' : '',
+    presentation.active ? 'plan-board-page__automation-status--active' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes}>
+      <span className="plan-board-page__automation-status-fill" />
+      <div className="plan-board-page__automation-status-copy">
+        <Text className="plan-board-page__automation-status-text">{presentation.label}</Text>
+        {presentation.description || elapsedLabel ? (
+          <Text className="plan-board-page__automation-status-description" type="secondary">
+            {[presentation.description, presentation.active ? elapsedLabel : null].filter(Boolean).join(' · ')}
+          </Text>
+        ) : null}
+        {usageSummary ? (
+          <Space size={[8, 4]} wrap>
+            <Text className="plan-board-page__automation-status-description" type="secondary">
+              {usageSummary.costLabel}
+            </Text>
+            <Text className="plan-board-page__automation-status-description" type="secondary">
+              {usageSummary.tokenLabel}
+            </Text>
+            {usageSummary.tierColor && usageSummary.tierLabel ? (
+              <Tag color={usageSummary.tierColor}>{usageSummary.tierLabel}</Tag>
+            ) : null}
+            {usageSummary.description ? (
+              <Text className="plan-board-page__automation-status-description" type="secondary">
+                {usageSummary.description}
+              </Text>
+            ) : null}
+          </Space>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/planBoard/PlanListDetailLayout.tsx b/src/features/planBoard/PlanListDetailLayout.tsx
new file mode 100755
index 0000000..d44c992
--- /dev/null
+++ b/src/features/planBoard/PlanListDetailLayout.tsx
@@ -0,0 +1,191 @@
+import { ArrowLeftOutlined, CloseOutlined } from '@ant-design/icons';
+import { Button, Card, Empty, Flex, Space, Typography } from 'antd';
+import { createPortal } from 'react-dom';
+import { useEffect, useState, type ReactNode } from 'react';
+
+const { Title } = Typography;
+
+type PlanListDetailLayoutProps = {
+  listTitle: ReactNode;
+  listExtra?: ReactNode;
+  listContent: ReactNode;
+  classNamePrefix?: string;
+  desktopLayout?: 'split' | 'stacked';
+  mobileLayoutMode?: 'overlay' | 'detail-only';
+  desktopDetailOpen: boolean;
+  mobileDetailOpen: boolean;
+  detailTitle: ReactNode;
+  detailActions?: ReactNode;
+  detailContent: ReactNode;
+  onCloseDetail: () => void;
+  closeLabel?: string;
+  showDesktopClose?: boolean;
+  emptyDetailTitle?: ReactNode;
+  emptyDetailContent?: ReactNode;
+};
+
+function useBodyScrollLock(locked: boolean) {
+  useEffect(() => {
+    if (typeof document === 'undefined' || !locked) {
+      return;
+    }
+
+    const scrollY = window.scrollY;
+    const previousBodyOverflow = document.body.style.overflow;
+    const previousBodyTouchAction = document.body.style.touchAction;
+    const previousBodyPosition = document.body.style.position;
+    const previousBodyTop = document.body.style.top;
+    const previousBodyWidth = document.body.style.width;
+    const previousHtmlOverflow = document.documentElement.style.overflow;
+
+    document.body.style.overflow = 'hidden';
+    document.body.style.touchAction = 'manipulation';
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = '100%';
+    document.documentElement.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = previousBodyOverflow;
+      document.body.style.touchAction = previousBodyTouchAction;
+      document.body.style.position = previousBodyPosition;
+      document.body.style.top = previousBodyTop;
+      document.body.style.width = previousBodyWidth;
+      document.documentElement.style.overflow = previousHtmlOverflow;
+      window.scrollTo(0, scrollY);
+    };
+  }, [locked]);
+}
+
+function useMobileOverlayEnabled() {
+  const [mobileOverlayEnabled, setMobileOverlayEnabled] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(max-width: 960px)');
+    const update = () => {
+      setMobileOverlayEnabled(mediaQuery.matches);
+    };
+
+    update();
+    mediaQuery.addEventListener('change', update);
+
+    return () => {
+      mediaQuery.removeEventListener('change', update);
+    };
+  }, []);
+
+  return mobileOverlayEnabled;
+}
+
+export function PlanListDetailLayout({
+  listTitle,
+  listExtra,
+  listContent,
+  classNamePrefix = 'plan-board-page',
+  desktopLayout = 'split',
+  mobileLayoutMode = 'overlay',
+  desktopDetailOpen,
+  mobileDetailOpen,
+  detailTitle,
+  detailActions,
+  detailContent,
+  onCloseDetail,
+  closeLabel = '뒤로가기',
+  showDesktopClose = false,
+  emptyDetailTitle = '상세 보기',
+  emptyDetailContent,
+}: PlanListDetailLayoutProps) {
+  const mobileOverlayEnabled = useMobileOverlayEnabled();
+  const showMobileDetail = mobileOverlayEnabled && mobileDetailOpen;
+  const showMobileOverlay = showMobileDetail && mobileLayoutMode === 'overlay';
+  const showMobileDetailOnly = showMobileDetail && mobileLayoutMode === 'detail-only';
+
+  useBodyScrollLock(showMobileOverlay || showMobileDetailOnly);
+
+  const resolvedEmptyDetailContent = emptyDetailContent ?? <Empty description="목록에서 항목을 선택하세요." />;
+  const detailCardOpen = desktopDetailOpen;
+  const detailCardTitle = detailCardOpen ? detailTitle : emptyDetailTitle;
+  const detailCardContent = detailCardOpen ? detailContent : resolvedEmptyDetailContent;
+  const detailCardActions = detailCardOpen ? detailActions : null;
+  const splitClassName = `${classNamePrefix}__split${
+    desktopLayout === 'stacked' ? ` ${classNamePrefix}__split--stacked` : ''
+  }${showMobileDetailOnly ? ` ${classNamePrefix}__split--mobile-detail-only` : ''}`;
+  const listCardClassName = `${classNamePrefix}__list-card${
+    showMobileDetailOnly ? ` ${classNamePrefix}__list-card--mobile-hidden` : ''
+  }`;
+  const detailCardClassName = `${classNamePrefix}__editor-card ${classNamePrefix}__detail-card${
+    showMobileOverlay ? ` ${classNamePrefix}__detail-card--mobile-hidden` : ''
+  }${showMobileDetailOnly ? ` ${classNamePrefix}__detail-card--mobile-only` : ''}`;
+  const detailActionsClassName = `${classNamePrefix}__detail-actions`;
+  const detailEmptyClassName = `${classNamePrefix}__detail-empty`;
+  const overlayClassName = `${classNamePrefix}__overlay`;
+  const overlayCardClassName = `${classNamePrefix}__overlay-card`;
+  const overlayHeaderClassName = `${classNamePrefix}__overlay-header`;
+  const overlayTitleClassName = `${classNamePrefix}__overlay-title`;
+  const overlayBodyClassName = `${classNamePrefix}__overlay-body`;
+  const mobileOverlayNode =
+    showMobileOverlay && typeof document !== 'undefined'
+      ? createPortal(
+          <div className={overlayClassName}>
+            <Card className={overlayCardClassName} bordered={false}>
+              <Flex justify="space-between" align="center" gap={12} className={overlayHeaderClassName}>
+                <Space>
+                  <Button icon={<ArrowLeftOutlined />} onClick={onCloseDetail}>
+                    {closeLabel}
+                  </Button>
+                  <Title level={5} className={overlayTitleClassName}>
+                    {detailTitle}
+                  </Title>
+                </Space>
+
+                {detailActions ? <Space wrap>{detailActions}</Space> : null}
+              </Flex>
+
+              <div className={overlayBodyClassName}>{detailContent}</div>
+            </Card>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <>
+      <div className={splitClassName}>
+        <Card title={listTitle} className={listCardClassName} extra={listExtra} bordered={false}>
+          {listContent}
+        </Card>
+
+        <Card
+          title={detailCardTitle}
+          className={detailCardClassName}
+          extra={
+            detailCardOpen && (detailCardActions || showDesktopClose || showMobileDetailOnly) ? (
+              <Space wrap className={detailActionsClassName}>
+                {detailCardActions}
+                {showMobileDetailOnly ? (
+                  <Button icon={<ArrowLeftOutlined />} onClick={onCloseDetail}>
+                    {closeLabel}
+                  </Button>
+                ) : null}
+                {showDesktopClose && !showMobileDetailOnly ? (
+                  <Button icon={<CloseOutlined />} onClick={onCloseDetail}>
+                    닫기
+                  </Button>
+                ) : null}
+              </Space>
+            ) : null
+          }
+          bordered={false}
+        >
+          <div className={!detailCardOpen ? detailEmptyClassName : undefined}>{detailCardContent}</div>
+        </Card>
+      </div>
+
+      {mobileOverlayNode}
+    </>
+  );
+}
diff --git a/src/features/planBoard/PlanSchedulePage.tsx b/src/features/planBoard/PlanSchedulePage.tsx
new file mode 100755
index 0000000..9048779
--- /dev/null
+++ b/src/features/planBoard/PlanSchedulePage.tsx
@@ -0,0 +1,871 @@
+import { CopyOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  Empty,
+  Flex,
+  Input,
+  InputNumber,
+  List,
+  Segmented,
+  Select,
+  Space,
+  Tabs,
+  Tag,
+  Typography,
+  message,
+} from 'antd';
+import { memo, useEffect, useMemo, useState, type Dispatch, type SetStateAction } from 'react';
+import { useTokenAccess } from '../../app/main/tokenAccess';
+import './planBoard.css';
+import './planSchedule.css';
+import { maskNotePreviewByWord } from './noteMasking';
+import { PlanListDetailLayout } from './PlanListDetailLayout';
+import type { PlanAutomationType } from './types';
+import {
+  createPlanScheduledTask,
+  deletePlanScheduledTask,
+  fetchPlanScheduledTasks,
+  setupPlanBoard,
+  updatePlanScheduledTask,
+  type PlanScheduleMode,
+  type PlanScheduleRepeatUnit,
+  type PlanScheduledTask,
+  type PlanScheduledTaskDraft,
+} from './api';
+
+const { Paragraph, Text, Title } = Typography;
+const { TextArea } = Input;
+const FUNCTION_CHECK_OPTIONS = ['완료', '오동작'];
+const SCHEDULE_MODE_TAB_ITEMS: { key: PlanScheduleMode; label: string }[] = [
+  { key: 'interval', label: '반복 주기' },
+  { key: 'daily', label: '매일 시간' },
+];
+const REPEAT_UNIT_OPTIONS: { label: string; value: PlanScheduleRepeatUnit }[] = [
+  { label: '분', value: 'minute' },
+  { label: '시간', value: 'hour' },
+  { label: '일', value: 'day' },
+  { label: '주', value: 'week' },
+  { label: '월', value: 'month' },
+];
+const REPEAT_UNIT_LABELS: Record<PlanScheduleRepeatUnit, string> = {
+  minute: '분',
+  hour: '시간',
+  day: '일',
+  week: '주',
+  month: '개월',
+};
+const REPEAT_PRESET_OPTIONS: { label: string; value: number; unit: PlanScheduleRepeatUnit }[] = [
+  { label: '10분', value: 10, unit: 'minute' },
+  { label: '30분', value: 30, unit: 'minute' },
+  { label: '1시간', value: 1, unit: 'hour' },
+  { label: '6시간', value: 6, unit: 'hour' },
+  { label: '매일 1회', value: 1, unit: 'day' },
+  { label: '매주 1회', value: 1, unit: 'week' },
+  { label: '매월 1회', value: 1, unit: 'month' },
+];
+const HOUR_OPTIONS = Array.from({ length: 24 }, (_, hour) => ({
+  label: `${String(hour).padStart(2, '0')}시`,
+  value: String(hour).padStart(2, '0'),
+}));
+const MINUTE_OPTIONS = Array.from({ length: 60 }, (_, minute) => ({
+  label: `${String(minute).padStart(2, '0')}분`,
+  value: String(minute).padStart(2, '0'),
+}));
+const DEFAULT_DAILY_RUN_TIME = '09:00';
+const KST_TIME_ZONE = 'Asia/Seoul';
+const DAY_MS = 24 * 60 * 60 * 1000;
+const PLAN_AUTOMATION_TYPE_OPTIONS: Array<{ label: string; value: PlanAutomationType }> = [
+  { label: '선택 안함', value: 'none' },
+  { label: '작업 요청 등록', value: 'plan' },
+  { label: 'Command 실행', value: 'command_execution' },
+  { label: '비 소스작업', value: 'non_source_work' },
+  { label: 'autoWorker', value: 'auto_worker' },
+];
+
+function getRepeatIntervalMinutes(value: number, unit: PlanScheduleRepeatUnit) {
+  const normalizedValue = Math.max(1, Math.round(Number(value) || 1));
+
+  if (unit === 'day') {
+    return normalizedValue * 24 * 60;
+  }
+
+  if (unit === 'week') {
+    return normalizedValue * 7 * 24 * 60;
+  }
+
+  if (unit === 'month') {
+    return normalizedValue * 30 * 24 * 60;
+  }
+
+  if (unit === 'hour') {
+    return normalizedValue * 60;
+  }
+
+  return normalizedValue;
+}
+
+function getRepeatIntervalValueMax(unit: PlanScheduleRepeatUnit) {
+  if (unit === 'month') {
+    return 12;
+  }
+
+  if (unit === 'week') {
+    return 52;
+  }
+
+  if (unit === 'day') {
+    return 365;
+  }
+
+  if (unit === 'hour') {
+    return 8760;
+  }
+
+  return 525600;
+}
+
+function normalizeRepeatIntervalValue(value: number, unit: PlanScheduleRepeatUnit) {
+  const roundedValue = Math.max(1, Math.round(Number(value) || 1));
+  return Math.min(getRepeatIntervalValueMax(unit), roundedValue);
+}
+
+function formatRepeatInterval(value: number, unit: PlanScheduleRepeatUnit, fallbackMinutes: number) {
+  if (!value || !unit) {
+    return `${fallbackMinutes}분마다`;
+  }
+
+  return `${value}${REPEAT_UNIT_LABELS[unit]}마다`;
+}
+
+function normalizeScheduleMode(value: PlanScheduleMode | null | undefined): PlanScheduleMode {
+  return value === 'daily' ? 'daily' : 'interval';
+}
+
+function normalizeDailyRunTime(value: string | null | undefined) {
+  return typeof value === 'string' && /^([01]\d|2[0-3]):[0-5]\d$/.test(value) ? value : DEFAULT_DAILY_RUN_TIME;
+}
+
+function updateDailyRunTime(value: string, part: 'hour' | 'minute', nextPartValue: string) {
+  const [hour, minute] = normalizeDailyRunTime(value).split(':');
+  return part === 'hour' ? `${nextPartValue}:${minute}` : `${hour}:${nextPartValue}`;
+}
+
+function formatScheduleCycle(item: PlanScheduledTask) {
+  const scheduleMode = normalizeScheduleMode(item.scheduleMode);
+
+  if (scheduleMode === 'daily') {
+    return `매일 ${normalizeDailyRunTime(item.dailyRunTime)} 실행`;
+  }
+
+  return formatRepeatInterval(item.repeatIntervalValue, item.repeatIntervalUnit, item.repeatIntervalMinutes);
+}
+
+function getValidDate(value: string | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function getKstDateTimeParts(value: Date) {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: KST_TIME_ZONE,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+    hourCycle: 'h23',
+  }).formatToParts(value);
+  const partMap = Object.fromEntries(parts.map((part) => [part.type, part.value]));
+
+  return {
+    year: Number(partMap.year),
+    month: Number(partMap.month),
+    day: Number(partMap.day),
+    hour: Number(partMap.hour),
+    minute: Number(partMap.minute),
+  };
+}
+
+function getKstDateKey(value: Date) {
+  const parts = getKstDateTimeParts(value);
+  return `${parts.year}-${String(parts.month).padStart(2, '0')}-${String(parts.day).padStart(2, '0')}`;
+}
+
+function createDateFromKstParts(year: number, month: number, day: number, hour: number, minute: number) {
+  return new Date(Date.UTC(year, month - 1, day, hour - 9, minute, 0, 0));
+}
+
+function resolveNextPlanScheduleRunAt(item: PlanScheduledTask, now = new Date()) {
+  if (!item.enabled) {
+    return null;
+  }
+
+  const lastRegisteredAt = getValidDate(item.lastRegisteredAt);
+
+  if (!lastRegisteredAt && item.immediateRunEnabled) {
+    return now;
+  }
+
+  if (normalizeScheduleMode(item.scheduleMode) === 'daily') {
+    const [hour, minute] = normalizeDailyRunTime(item.dailyRunTime).split(':').map((value) => Number(value));
+    const nowParts = getKstDateTimeParts(now);
+    const scheduledToday = createDateFromKstParts(nowParts.year, nowParts.month, nowParts.day, hour, minute);
+    const lastRegisteredToday = lastRegisteredAt ? getKstDateKey(lastRegisteredAt) === getKstDateKey(now) : false;
+
+    if (!lastRegisteredToday && scheduledToday.getTime() <= now.getTime()) {
+      return now;
+    }
+
+    if (!lastRegisteredToday) {
+      return scheduledToday;
+    }
+
+    return new Date(scheduledToday.getTime() + DAY_MS);
+  }
+
+  const baseAt = lastRegisteredAt ?? getValidDate(item.createdAt) ?? now;
+  const nextRunAt = new Date(baseAt.getTime() + item.repeatIntervalMinutes * 60 * 1000);
+
+  return nextRunAt.getTime() <= now.getTime() ? now : nextRunAt;
+}
+
+function createEmptyScheduleDraft(defaultReleaseTarget = 'release'): PlanScheduledTaskDraft {
+  return {
+    id: null,
+    workId: '',
+    note: '',
+    automationType: 'none',
+    releaseTarget: defaultReleaseTarget,
+    jangsingProcessingRequired: true,
+    autoDeployToMain: true,
+    enabled: true,
+    immediateRunEnabled: true,
+    scheduleMode: 'interval',
+    repeatIntervalValue: 60,
+    repeatIntervalUnit: 'minute',
+    repeatIntervalMinutes: 60,
+    dailyRunTime: DEFAULT_DAILY_RUN_TIME,
+  };
+}
+
+function toDraft(item: PlanScheduledTask): PlanScheduledTaskDraft {
+  const repeatIntervalUnit = item.repeatIntervalUnit ?? 'minute';
+  const repeatIntervalValue = normalizeRepeatIntervalValue(
+    item.repeatIntervalValue ?? item.repeatIntervalMinutes,
+    repeatIntervalUnit,
+  );
+
+  return {
+    id: item.id,
+    workId: item.workId,
+    note: item.note,
+    automationType: item.automationType,
+    releaseTarget: item.releaseTarget,
+    jangsingProcessingRequired: item.jangsingProcessingRequired,
+    autoDeployToMain: item.autoDeployToMain,
+    enabled: item.enabled,
+    immediateRunEnabled: item.immediateRunEnabled,
+    scheduleMode: normalizeScheduleMode(item.scheduleMode),
+    repeatIntervalValue,
+    repeatIntervalUnit,
+    repeatIntervalMinutes: item.repeatIntervalMinutes ?? getRepeatIntervalMinutes(repeatIntervalValue, repeatIntervalUnit),
+    dailyRunTime: normalizeDailyRunTime(item.dailyRunTime),
+  };
+}
+
+function formatPlanScheduleDateTime(value: string | Date | null | undefined) {
+  if (!value) {
+    return '미등록';
+  }
+
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: KST_TIME_ZONE,
+  });
+}
+
+function formatNextPlanScheduleRunAt(item: PlanScheduledTask) {
+  if (!item.enabled) {
+    return '중지';
+  }
+
+  return formatPlanScheduleDateTime(resolveNextPlanScheduleRunAt(item));
+}
+
+function validateScheduleDraft(draft: PlanScheduledTaskDraft, items: PlanScheduledTask[]) {
+  const messages: string[] = [];
+  const workId = draft.workId.trim();
+  const note = draft.note.trim();
+
+  if (!workId) {
+    messages.push('작업 ID를 입력하세요.');
+  } else if (items.some((item) => item.id !== draft.id && item.workId.trim() === workId)) {
+    messages.push('같은 작업 ID의 스케줄이 이미 있습니다.');
+  }
+
+  if (!note) {
+    messages.push('반복 등록할 작업 메모를 입력하세요.');
+  }
+
+  if (draft.scheduleMode === 'interval' && getRepeatIntervalMinutes(draft.repeatIntervalValue, draft.repeatIntervalUnit) < 10) {
+    messages.push('반복 주기는 최소 10분 이상으로 설정하세요.');
+  }
+
+  if (!draft.enabled) {
+    messages.push('비활성 스케줄은 자동 등록되지 않습니다.');
+  }
+
+  return messages;
+}
+
+export function PlanSchedulePage() {
+  const { hasAccess } = useTokenAccess();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [items, setItems] = useState<PlanScheduledTask[]>([]);
+  const [draft, setDraft] = useState(() => createEmptyScheduleDraft());
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const selectedItem = useMemo(
+    () => items.find((item) => item.id === draft.id) ?? null,
+    [draft.id, items],
+  );
+  const validationMessages = useMemo(() => validateScheduleDraft(draft, items), [draft, items]);
+
+  async function loadItems() {
+    setLoading(true);
+    setErrorMessage(null);
+
+    try {
+      setItems(await fetchPlanScheduledTasks());
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : '스케줄 목록을 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void loadItems();
+  }, [hasAccess]);
+
+  async function handleSetup() {
+    if (!hasAccess) {
+      messageApi.error('설정 > 토큰 관리에서 권한 토큰을 등록한 사용자만 사용할 수 있습니다.');
+      return;
+    }
+
+    try {
+      await setupPlanBoard();
+      messageApi.success('작업 스케줄 테이블을 준비했습니다.');
+      await loadItems();
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '테이블 생성에 실패했습니다.');
+    }
+  }
+
+  async function handleSave() {
+    if (!hasAccess) {
+      messageApi.error('설정 > 토큰 관리에서 권한 토큰을 등록한 사용자만 사용할 수 있습니다.');
+      return;
+    }
+
+    const blockingMessages = validationMessages.filter((message) => message !== '비활성 스케줄은 자동 등록되지 않습니다.');
+
+    if (blockingMessages.length) {
+      messageApi.warning(blockingMessages[0]);
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const repeatIntervalValue = normalizeRepeatIntervalValue(draft.repeatIntervalValue, draft.repeatIntervalUnit);
+      const draftToSave = {
+        ...draft,
+        repeatIntervalValue,
+        repeatIntervalMinutes: getRepeatIntervalMinutes(repeatIntervalValue, draft.repeatIntervalUnit),
+      };
+      const savedItem = draft.id ? await updatePlanScheduledTask(draftToSave) : await createPlanScheduledTask(draftToSave);
+      messageApi.success(draft.id ? '스케줄을 수정했습니다.' : '스케줄을 등록했습니다.');
+      setDraft(toDraft(savedItem));
+      await loadItems();
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '스케줄 저장에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!draft.id) {
+      return;
+    }
+
+    if (!hasAccess) {
+      messageApi.error('설정 > 토큰 관리에서 권한 토큰을 등록한 사용자만 사용할 수 있습니다.');
+      return;
+    }
+
+    if (!window.confirm('선택한 스케줄을 삭제할까요?')) {
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      await deletePlanScheduledTask(draft.id);
+      messageApi.success('스케줄을 삭제했습니다.');
+      setDraft(createEmptyScheduleDraft(draft.releaseTarget));
+      setEditorOpen(false);
+      await loadItems();
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '스케줄 삭제에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleCopyText(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      messageApi.success('복사했습니다.');
+    } catch {
+      messageApi.error('복사에 실패했습니다.');
+    }
+  }
+
+  function handleCreateNew() {
+    setDraft(createEmptyScheduleDraft(draft.releaseTarget));
+    setEditorOpen(true);
+  }
+
+  function handleSelectItem(item: PlanScheduledTask) {
+    setDraft(toDraft(item));
+    setEditorOpen(true);
+  }
+
+  function closeEditor() {
+    setEditorOpen(false);
+  }
+
+  return (
+    <div className="plan-schedule-page">
+      {contextHolder}
+      <Card className="plan-schedule-page__overview" bordered={false}>
+        <Flex justify="space-between" align="center" gap={12} wrap>
+          <div>
+            <Title level={4}>자동화 Schedule</Title>
+            <Paragraph className="plan-schedule-page__intro">
+              반복 작업 내용을 스케줄로 등록하고 활성 상태와 반복 주기를 관리합니다.
+            </Paragraph>
+          </div>
+          <Space wrap>
+            <Button onClick={() => void loadItems()} loading={loading}>
+              조회
+            </Button>
+            <Button onClick={handleCreateNew} disabled={!hasAccess}>
+              새 스케줄
+            </Button>
+            <Button onClick={() => void handleSetup()} disabled={!hasAccess}>
+              테이블 생성
+            </Button>
+          </Space>
+        </Flex>
+      </Card>
+
+      {!hasAccess ? (
+        <Alert
+          showIcon
+          type="warning"
+          className="plan-schedule-page__alert"
+          message="권한 토큰이 없어 작업 스케줄은 조회만 사용할 수 있습니다."
+          description="설정 > 토큰 관리에서 권한 토큰을 등록하기 전에는 조회 외 버튼과 입력을 사용할 수 없고, 작업 메모는 단어별로 마스킹됩니다."
+        />
+      ) : null}
+
+      {errorMessage ? (
+        <Alert
+          showIcon
+          type="error"
+          className="plan-schedule-page__alert"
+          message="스케줄을 사용할 수 없습니다."
+          description={errorMessage}
+        />
+      ) : null}
+
+      <PlanListDetailLayout
+        classNamePrefix="plan-schedule-page"
+        listTitle="스케줄 목록"
+        listExtra={<Text code>{items.length} items</Text>}
+        listContent={
+          <PlanScheduleList
+            activeDraftId={draft.id}
+            editorOpen={editorOpen}
+            hasAccess={hasAccess}
+            items={items}
+            loading={loading}
+            onSelectItem={handleSelectItem}
+          />
+        }
+        desktopDetailOpen={editorOpen}
+        mobileDetailOpen={editorOpen}
+        detailTitle={draft.id ? `스케줄 #${draft.id}` : '새 스케줄'}
+        detailActions={
+          <>
+            {draft.id ? (
+              <Button danger onClick={() => void handleDelete()} loading={saving} disabled={!hasAccess}>
+                삭제
+              </Button>
+            ) : null}
+            <Button type="primary" onClick={() => void handleSave()} loading={saving} disabled={!hasAccess}>
+              저장
+            </Button>
+          </>
+        }
+        onCloseDetail={closeEditor}
+        showDesktopClose
+        emptyDetailTitle="스케줄 상세"
+        detailContent={
+          <PlanScheduleDetail
+            draft={draft}
+            hasAccess={hasAccess}
+            selectedItem={selectedItem}
+            validationMessages={validationMessages}
+            onChangeDraft={setDraft}
+            onCopyText={handleCopyText}
+          />
+        }
+      />
+    </div>
+  );
+}
+
+const PlanScheduleList = memo(function PlanScheduleList({
+  activeDraftId,
+  editorOpen,
+  hasAccess,
+  items,
+  loading,
+  onSelectItem,
+}: {
+  activeDraftId: number | null;
+  editorOpen: boolean;
+  hasAccess: boolean;
+  items: PlanScheduledTask[];
+  loading: boolean;
+  onSelectItem: (item: PlanScheduledTask) => void;
+}) {
+  return (
+    <List
+      className="plan-schedule-page__list"
+      loading={loading}
+      dataSource={items}
+      locale={{ emptyText: <Empty description="등록된 스케줄이 없습니다." /> }}
+      renderItem={(item) => (
+        <List.Item
+          key={item.id}
+          className={`plan-schedule-page__list-item${
+            editorOpen && activeDraftId === item.id ? ' plan-schedule-page__list-item--active' : ''
+          }`}
+          onClick={() => onSelectItem(item)}
+        >
+          <div className="plan-schedule-page__list-body">
+            <Flex justify="space-between" align="start" gap={8}>
+              <Text strong>{item.workId || `스케줄 #${item.id}`}</Text>
+              <Tag color={item.enabled ? 'green' : 'default'}>{item.enabled ? '적용' : '중지'}</Tag>
+            </Flex>
+            <Paragraph ellipsis={{ rows: 2 }} className="plan-schedule-page__list-note">
+              {item.note ? (hasAccess ? item.note : maskNotePreviewByWord(item.note)) : '작업 내용이 없습니다.'}
+            </Paragraph>
+            <Space wrap size={8}>
+              <Tag>{formatScheduleCycle(item)}</Tag>
+              <Tag color="blue">다음 실행 {formatNextPlanScheduleRunAt(item)}</Tag>
+              <Tag>{item.immediateRunEnabled ? '즉시실행' : '주기 후 실행'}</Tag>
+              <Tag>{item.autoDeployToMain ? 'main 자동등록' : 'release만'}</Tag>
+              <Tag>기능동작확인 {item.jangsingProcessingRequired ? '완료' : '오동작'}</Tag>
+            </Space>
+            <Flex justify="space-between" align="center" gap={8} wrap style={{ marginTop: 10 }}>
+              <Text type="secondary">최근 등록 {formatPlanScheduleDateTime(item.lastRegisteredAt)}</Text>
+              <Text type="secondary">수정 {formatPlanScheduleDateTime(item.updatedAt)}</Text>
+            </Flex>
+          </div>
+        </List.Item>
+      )}
+    />
+  );
+});
+
+function PlanScheduleDetail({
+  draft,
+  hasAccess,
+  selectedItem,
+  validationMessages,
+  onChangeDraft,
+  onCopyText,
+}: {
+  draft: PlanScheduledTaskDraft;
+  hasAccess: boolean;
+  selectedItem: PlanScheduledTask | null;
+  validationMessages: string[];
+  onChangeDraft: Dispatch<SetStateAction<PlanScheduledTaskDraft>>;
+  onCopyText: (text: string) => Promise<void>;
+}) {
+  return (
+    <Space direction="vertical" size={14} style={{ width: '100%' }}>
+      {selectedItem ? (
+        <Alert
+          showIcon
+          type="info"
+          className="plan-schedule-page__alert"
+          message="등록 정보"
+          description={
+            <Space direction="vertical" size={4}>
+              <Text>다음 실행: {formatNextPlanScheduleRunAt(selectedItem)}</Text>
+              <Text>최근 작업 등록: {formatPlanScheduleDateTime(selectedItem.lastRegisteredAt)}</Text>
+              <Text>생성: {formatPlanScheduleDateTime(selectedItem.createdAt)}</Text>
+              <Text>수정: {formatPlanScheduleDateTime(selectedItem.updatedAt)}</Text>
+            </Space>
+          }
+        />
+      ) : null}
+
+      {validationMessages.length ? (
+        <Alert
+          showIcon
+          type={validationMessages.some((message) => message !== '비활성 스케줄은 자동 등록되지 않습니다.') ? 'warning' : 'info'}
+          className="plan-schedule-page__alert"
+          message="스케줄 등록 검증"
+          description={
+            <Space direction="vertical" size={2}>
+              {validationMessages.map((message) => (
+                <Text key={message}>{message}</Text>
+              ))}
+            </Space>
+          }
+        />
+      ) : null}
+
+      <div className="plan-schedule-page__form">
+        <div>
+          <Text strong>작업 ID</Text>
+          <Input
+            value={draft.workId}
+            placeholder="예: 반복-정리"
+            disabled={!hasAccess}
+            onChange={(event) => onChangeDraft((previous) => ({ ...previous, workId: event.target.value }))}
+          />
+        </div>
+        <div>
+          <Flex justify="space-between" align="center" gap={8} wrap>
+            <Text strong>작업 메모</Text>
+            <Space size={8}>
+              <Button size="small" icon={<CopyOutlined />} onClick={() => void onCopyText(draft.note)}>
+                복사
+              </Button>
+            </Space>
+          </Flex>
+          <div className="plan-schedule-page__notepad-frame">
+            <TextArea
+              value={hasAccess ? draft.note : maskNotePreviewByWord(draft.note)}
+              rows={10}
+              placeholder={hasAccess ? '반복 등록할 작업 내용을 입력하세요.' : '권한 토큰 등록 후 편집할 수 있습니다.'}
+              className="plan-schedule-page__notepad"
+              disabled={!hasAccess}
+              onChange={(event) => onChangeDraft((previous) => ({ ...previous, note: event.target.value }))}
+            />
+          </div>
+          {!hasAccess ? <Text type="secondary">조회 화면에서는 작업 메모를 단어별 마스킹으로 표시합니다.</Text> : null}
+        </div>
+        <div>
+          <Text strong>release 브랜치</Text>
+          <Input
+            value={draft.releaseTarget}
+            placeholder="release"
+            disabled={!hasAccess}
+            onChange={(event) =>
+              onChangeDraft((previous) => ({ ...previous, releaseTarget: event.target.value || 'release' }))
+            }
+          />
+        </div>
+        <div>
+          <Text strong>자동화 처리</Text>
+          <Select
+            className="plan-schedule-page__select plan-schedule-page__select--automation"
+            value={draft.automationType}
+            options={PLAN_AUTOMATION_TYPE_OPTIONS}
+            popupClassName="plan-schedule-page__select-popup"
+            getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+            disabled={!hasAccess}
+            onChange={(automationType) => onChangeDraft((previous) => ({ ...previous, automationType }))}
+          />
+        </div>
+        <div>
+          <Checkbox
+            checked={draft.enabled}
+            disabled={!hasAccess}
+            onChange={(event) => onChangeDraft((previous) => ({ ...previous, enabled: event.target.checked }))}
+          >
+            적용
+          </Checkbox>
+        </div>
+        <div>
+          <Text strong>반복 주기</Text>
+          <Tabs
+            size="small"
+            items={SCHEDULE_MODE_TAB_ITEMS.map((item) => ({
+              ...item,
+              disabled: !hasAccess,
+            }))}
+            activeKey={draft.scheduleMode}
+            onChange={(key) => onChangeDraft((previous) => ({ ...previous, scheduleMode: key as PlanScheduleMode }))}
+          />
+          {draft.scheduleMode === 'daily' ? (
+            <Space align="center" wrap>
+              <Text>매일</Text>
+              <Select
+                style={{ width: 96 }}
+                options={HOUR_OPTIONS}
+                value={normalizeDailyRunTime(draft.dailyRunTime).split(':')[0]}
+                popupClassName="plan-schedule-page__select-popup"
+                getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+                disabled={!hasAccess}
+                onChange={(value) =>
+                  onChangeDraft((previous) => ({
+                    ...previous,
+                    dailyRunTime: updateDailyRunTime(previous.dailyRunTime, 'hour', value),
+                    repeatIntervalValue: 1,
+                    repeatIntervalUnit: 'day',
+                    repeatIntervalMinutes: getRepeatIntervalMinutes(1, 'day'),
+                  }))
+                }
+              />
+              <Select
+                style={{ width: 96 }}
+                options={MINUTE_OPTIONS}
+                value={normalizeDailyRunTime(draft.dailyRunTime).split(':')[1]}
+                popupClassName="plan-schedule-page__select-popup"
+                getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+                disabled={!hasAccess}
+                onChange={(value) =>
+                  onChangeDraft((previous) => ({
+                    ...previous,
+                    dailyRunTime: updateDailyRunTime(previous.dailyRunTime, 'minute', value),
+                    repeatIntervalValue: 1,
+                    repeatIntervalUnit: 'day',
+                    repeatIntervalMinutes: getRepeatIntervalMinutes(1, 'day'),
+                  }))
+                }
+              />
+              <Text type="secondary">에 작업 메모로 등록</Text>
+            </Space>
+          ) : (
+            <>
+              <Space align="center" wrap>
+                <InputNumber
+                  min={1}
+                  max={getRepeatIntervalValueMax(draft.repeatIntervalUnit)}
+                  value={draft.repeatIntervalValue}
+                  disabled={!hasAccess}
+                  onChange={(value) => {
+                    const repeatIntervalValue = normalizeRepeatIntervalValue(
+                      Number(value) || 1,
+                      draft.repeatIntervalUnit,
+                    );
+                    onChangeDraft((previous) => ({
+                      ...previous,
+                      repeatIntervalValue,
+                      repeatIntervalMinutes: getRepeatIntervalMinutes(repeatIntervalValue, previous.repeatIntervalUnit),
+                    }));
+                  }}
+                />
+                <Select
+                  style={{ width: 96 }}
+                  options={REPEAT_UNIT_OPTIONS}
+                  value={draft.repeatIntervalUnit}
+                  popupClassName="plan-schedule-page__select-popup"
+                  getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+                  disabled={!hasAccess}
+                  onChange={(value) =>
+                    onChangeDraft((previous) => ({
+                      ...previous,
+                      repeatIntervalValue: normalizeRepeatIntervalValue(previous.repeatIntervalValue, value),
+                      repeatIntervalUnit: value,
+                      repeatIntervalMinutes: getRepeatIntervalMinutes(
+                        normalizeRepeatIntervalValue(previous.repeatIntervalValue, value),
+                        value,
+                      ),
+                    }))
+                  }
+                />
+                <Text type="secondary">마다 작업 메모로 등록</Text>
+              </Space>
+              <Space size={6} wrap style={{ marginTop: 8 }}>
+                {REPEAT_PRESET_OPTIONS.map((option) => (
+                  <Button
+                    key={`${option.value}-${option.unit}`}
+                    size="small"
+                    disabled={!hasAccess}
+                    onClick={() =>
+                      onChangeDraft((previous) => ({
+                        ...previous,
+                        scheduleMode: option.unit === 'day' && option.value === 1 ? 'daily' : 'interval',
+                        repeatIntervalValue: option.value,
+                        repeatIntervalUnit: option.unit,
+                        repeatIntervalMinutes: getRepeatIntervalMinutes(option.value, option.unit),
+                      }))
+                    }
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </Space>
+            </>
+          )}
+        </div>
+        <div>
+          <Checkbox
+            checked={draft.immediateRunEnabled}
+            disabled={!hasAccess}
+            onChange={(event) =>
+              onChangeDraft((previous) => ({ ...previous, immediateRunEnabled: event.target.checked }))
+            }
+          >
+            즉시실행 여부
+          </Checkbox>
+        </div>
+        <div>
+          <Checkbox
+            checked={draft.autoDeployToMain}
+            disabled={!hasAccess}
+            onChange={(event) => onChangeDraft((previous) => ({ ...previous, autoDeployToMain: event.target.checked }))}
+          >
+            메인까지 자동등록
+          </Checkbox>
+        </div>
+        <div>
+          <Text strong>기능동작확인</Text>
+          <Segmented
+            options={FUNCTION_CHECK_OPTIONS}
+            value={draft.jangsingProcessingRequired ? '완료' : '오동작'}
+            disabled={!hasAccess}
+            onChange={(value) =>
+              onChangeDraft((previous) => ({
+                ...previous,
+                jangsingProcessingRequired: value === '완료',
+              }))
+            }
+          />
+        </div>
+      </div>
+    </Space>
+  );
+}
diff --git a/src/features/planBoard/ReleaseReviewPage.tsx b/src/features/planBoard/ReleaseReviewPage.tsx
new file mode 100755
index 0000000..226e199
--- /dev/null
+++ b/src/features/planBoard/ReleaseReviewPage.tsx
@@ -0,0 +1,773 @@
+import {
+  CloseOutlined,
+  ExpandOutlined,
+  EyeOutlined,
+  LinkOutlined,
+  ReloadOutlined,
+  SaveOutlined,
+  ShrinkOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Card, Checkbox, Empty, Flex, Input, Space, Spin, Tag, Typography, message } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { componentSampleEntries, widgetSampleEntries } from '../../app/manifests/samples.manifest';
+import { useTokenAccess } from '../../app/main/tokenAccess';
+import { buildPlansPath } from '../../app/main/routes';
+import { ComponentSamplesLayout } from '../layout/component-sample-gallery';
+import { SampleWidgetsLayout } from '../layout/widget-sample-gallery';
+import { fetchReleaseReviewBoardItems, updatePlanReleaseReview } from './api';
+import { maskNotePreviewByWord } from './noteMasking';
+import { isReleasePendingMainItem, normalizeWorkerStatus } from './quickFilters';
+import type { PlanItem, PlanReleaseReviewBoardItem, PlanReleaseReviewStatus } from './types';
+
+const { Paragraph, Text, Title } = Typography;
+const { TextArea } = Input;
+
+type ReviewMenuTarget = {
+  id: string;
+  label: string;
+  description: string;
+  targetType: 'component' | 'widget';
+  targetId: string;
+};
+
+type ReviewOverlayTarget = ReviewMenuTarget & {
+  planItemId: number;
+  planLabel: string;
+};
+
+type ReleaseReviewFilter = 'all' | 'pending-main' | 'approved' | 'changes-requested';
+
+const RELEASE_REVIEW_FILTER_OPTIONS: Array<{ label: string; value: ReleaseReviewFilter }> = [
+  { label: '전체', value: 'all' },
+  { label: 'main 대기', value: 'pending-main' },
+  { label: '검수완료', value: 'approved' },
+  { label: '수정필요', value: 'changes-requested' },
+];
+const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];
+
+function formatPlanLabel(item: Pick<PlanItem, 'id' | 'workId'>) {
+  const normalizedWorkId = item.workId.trim();
+  return normalizedWorkId ? `${normalizedWorkId} · #${item.id}` : `#${item.id}`;
+}
+
+function formatDateTime(value: string | null | undefined) {
+  if (!value) {
+    return '미기록';
+  }
+
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: 'Asia/Seoul',
+  });
+}
+
+function summarizeNote(note: string | null | undefined) {
+  if (!note) {
+    return '';
+  }
+
+  return note.replace(/\s+/g, ' ').trim();
+}
+
+function resolveProtectedText(text: string | null | undefined, hasAccess: boolean) {
+  const normalizedText = summarizeNote(text);
+  return hasAccess ? normalizedText : maskNotePreviewByWord(normalizedText);
+}
+
+function normalizeStringArray(value: unknown) {
+  return Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : [];
+}
+
+function getReviewStatusTagColor(status: PlanReleaseReviewStatus) {
+  if (status === 'approved') {
+    return 'success';
+  }
+
+  if (status === 'changes-requested') {
+    return 'error';
+  }
+
+  if (status === 'reviewing') {
+    return 'processing';
+  }
+
+  return 'default';
+}
+
+function getReviewStatusLabel(status: PlanReleaseReviewStatus) {
+  if (status === 'approved') {
+    return '검수완료';
+  }
+
+  if (status === 'changes-requested') {
+    return '수정필요';
+  }
+
+  if (status === 'reviewing') {
+    return '검수중';
+  }
+
+  return '미검수';
+}
+
+function matchesReleaseReviewFilter(item: PlanReleaseReviewBoardItem, filter: ReleaseReviewFilter) {
+  if (filter === 'pending-main') {
+    return isReleasePendingMainItem(item.planItem);
+  }
+
+  if (filter === 'approved') {
+    return item.review.status === 'approved';
+  }
+
+  if (filter === 'changes-requested') {
+    return item.review.status === 'changes-requested';
+  }
+
+  return true;
+}
+
+function buildPlanPath(section: 'release-review' | 'release', item: Pick<PlanItem, 'id' | 'workId'>) {
+  const params = new URLSearchParams();
+  params.set('planId', String(item.id));
+
+  if (item.workId.trim()) {
+    params.set('workId', item.workId.trim());
+  }
+
+  return `${buildPlansPath(section)}?${params.toString()}`;
+}
+
+function buildRelatedMenuTargets(item: PlanReleaseReviewBoardItem) {
+  const componentTargets = normalizeStringArray(item.review.metadata.componentIds).map(
+    (componentId) =>
+      ({
+        id: `component:${componentId}`,
+        label: `컴포넌트 · ${componentId}`,
+        description: '이번 자동화에서 개발된 컴포넌트 샘플만 바로 확인합니다.',
+        targetType: 'component',
+        targetId: componentId,
+      }) satisfies ReviewMenuTarget,
+  );
+  const widgetTargets = normalizeStringArray(item.review.metadata.widgetIds).map(
+    (widgetId) =>
+      ({
+        id: `widget:${widgetId}`,
+        label: `위젯 · ${widgetId}`,
+        description: '이번 자동화에서 개발된 위젯 샘플만 바로 확인합니다.',
+        targetType: 'widget',
+        targetId: widgetId,
+      }) satisfies ReviewMenuTarget,
+  );
+
+  return [...componentTargets, ...widgetTargets];
+}
+
+function buildCheckedMenuIds(item: PlanReleaseReviewBoardItem) {
+  return new Set(normalizeStringArray(item.review.metadata.checkedPageSelectionIds));
+}
+
+function deriveReviewStatus(args: {
+  checkedIds: string[];
+  targetIds: string[];
+  reviewNote: string;
+  currentStatus: PlanReleaseReviewStatus;
+}) {
+  if (args.currentStatus === 'changes-requested' && args.checkedIds.length < args.targetIds.length) {
+    return 'changes-requested';
+  }
+
+  if (args.targetIds.length > 0 && args.checkedIds.length === args.targetIds.length) {
+    return 'approved';
+  }
+
+  if (args.checkedIds.length > 0 || args.reviewNote.trim()) {
+    return 'reviewing';
+  }
+
+  return 'pending';
+}
+
+export function ReleaseReviewPage() {
+  const { hasAccess } = useTokenAccess();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [items, setItems] = useState<PlanReleaseReviewBoardItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [filter, setFilter] = useState<ReleaseReviewFilter>('pending-main');
+  const [reviewNoteDrafts, setReviewNoteDrafts] = useState<Record<number, string>>({});
+  const [savingByPlanId, setSavingByPlanId] = useState<Record<number, boolean>>({});
+  const [overlayTarget, setOverlayTarget] = useState<ReviewOverlayTarget | null>(null);
+  const [overlayMinimized, setOverlayMinimized] = useState(false);
+  const cardRefs = useRef<Record<number, HTMLDivElement | null>>({});
+
+  const selectedPlanId = useMemo(() => {
+    const value = Number(searchParams.get('planId'));
+    return Number.isFinite(value) ? value : null;
+  }, [searchParams]);
+
+  const selectedWorkId = useMemo(() => {
+    const value = searchParams.get('workId')?.trim();
+    return value ? value : null;
+  }, [searchParams]);
+
+  async function loadReleaseReviews(cancelledRef?: { current: boolean }) {
+    setLoading(true);
+    setErrorMessage(null);
+
+    try {
+      const nextItems = await fetchReleaseReviewBoardItems();
+
+      if (cancelledRef?.current) {
+        return;
+      }
+
+      setItems(nextItems);
+      setReviewNoteDrafts(
+        Object.fromEntries(nextItems.map((item) => [item.planItem.id, item.review.reviewNote ?? ''])),
+      );
+    } catch (error) {
+      if (cancelledRef?.current) {
+        return;
+      }
+
+      setErrorMessage(error instanceof Error ? error.message : 'release 검수 목록을 불러오지 못했습니다.');
+    } finally {
+      if (!cancelledRef?.current) {
+        setLoading(false);
+      }
+    }
+  }
+
+  useEffect(() => {
+    const cancelledRef = { current: false };
+    void loadReleaseReviews(cancelledRef);
+
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, []);
+
+  const filteredItems = useMemo(() => {
+    const keyword = searchKeyword.trim().toLocaleLowerCase('ko-KR');
+
+    return items
+      .filter((item) => matchesReleaseReviewFilter(item, filter))
+      .filter((item) => {
+        if (!keyword) {
+          return true;
+        }
+
+        try {
+          const relatedTargets = buildRelatedMenuTargets(item);
+          const searchable = [
+            item.planItem.workId,
+            item.planItem.note,
+            item.planItem.status,
+            item.planItem.workerStatus,
+            item.planItem.assignedBranch,
+            item.review.reviewNote,
+            item.review.metadata.summary,
+            item.latestSourceWork?.summary,
+            ...relatedTargets.flatMap((target) => [target.label, target.description]),
+            ...normalizeStringArray(item.latestSourceWork?.changedFiles),
+          ]
+            .filter(Boolean)
+            .join(' ')
+            .toLocaleLowerCase('ko-KR');
+
+          return searchable.includes(keyword);
+        } catch (error) {
+          console.error('release review search filter failed', item.planItem.id, error);
+          return false;
+        }
+      });
+  }, [filter, items, searchKeyword]);
+
+  const highlightedPlanId = useMemo(() => {
+    if (selectedPlanId) {
+      return selectedPlanId;
+    }
+
+    if (!selectedWorkId) {
+      return null;
+    }
+
+    return items.find((item) => item.planItem.workId.trim() === selectedWorkId)?.planItem.id ?? null;
+  }, [items, selectedPlanId, selectedWorkId]);
+
+  useEffect(() => {
+    if (!highlightedPlanId) {
+      return;
+    }
+
+    cardRefs.current[highlightedPlanId]?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  }, [filteredItems, highlightedPlanId]);
+
+  function patchReview(
+    planItemId: number,
+    updater: (current: PlanReleaseReviewBoardItem) => PlanReleaseReviewBoardItem,
+  ) {
+    setItems((previous) => previous.map((item) => (item.planItem.id === planItemId ? updater(item) : item)));
+  }
+
+  async function handleSaveReview(
+    planItemId: number,
+    payload: {
+      status?: PlanReleaseReviewStatus;
+      reviewNote?: string;
+      metadata?: PlanReleaseReviewBoardItem['review']['metadata'];
+    },
+    successMessage: string,
+  ) {
+    setSavingByPlanId((previous) => ({
+      ...previous,
+      [planItemId]: true,
+    }));
+
+    try {
+      const review = await updatePlanReleaseReview(planItemId, payload);
+      patchReview(planItemId, (current) => ({
+        ...current,
+        review: {
+          ...review,
+          metadata: {
+            ...current.review.metadata,
+            ...review.metadata,
+          },
+        },
+      }));
+      setReviewNoteDrafts((previous) => ({
+        ...previous,
+        [planItemId]: review.reviewNote ?? '',
+      }));
+      messageApi.success(successMessage);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '검수 정보 저장에 실패했습니다.');
+    } finally {
+      setSavingByPlanId((previous) => ({
+        ...previous,
+        [planItemId]: false,
+      }));
+    }
+  }
+
+  async function handleCopyLink(path: string) {
+    try {
+      await navigator.clipboard.writeText(`${window.location.origin}${path}`);
+      messageApi.success('링크를 복사했습니다.');
+    } catch {
+      messageApi.error('링크 복사에 실패했습니다.');
+    }
+  }
+
+  function handleOpenOverlay(target: ReviewMenuTarget, item: PlanReleaseReviewBoardItem) {
+    setOverlayTarget({
+      ...target,
+      planItemId: item.planItem.id,
+      planLabel: formatPlanLabel(item.planItem),
+    });
+    setOverlayMinimized(false);
+  }
+
+  return (
+    <div className="release-review-page">
+      {contextHolder}
+      <Space direction="vertical" size={16} className="release-review-page__stack">
+        <Flex align="center" justify="space-between" gap={12} wrap>
+          <div>
+            <Title level={4} className="release-review-page__title">
+              release 검수 보드
+            </Title>
+            <Paragraph type="secondary" className="release-review-page__copy">
+              관련 메뉴를 한 줄씩 확인하고, 필요한 화면만 내부 전체화면으로 열어 최소화/최대화하며 검수할 수 있습니다.
+            </Paragraph>
+          </div>
+          <Space wrap>
+            <Button disabled={!hasAccess} onClick={() => navigate(buildPlansPath('release'))}>
+              main 대기 목록
+            </Button>
+            <Button
+              onClick={() => {
+                void loadReleaseReviews();
+              }}
+              icon={<ReloadOutlined />}
+            >
+              새로고침
+            </Button>
+          </Space>
+        </Flex>
+
+        <Alert
+          type={hasAccess ? 'info' : 'warning'}
+          showIcon
+          message={
+            hasAccess
+              ? '관련 메뉴는 내부 전체화면으로 열리며, 체크박스는 서버에 저장됩니다.'
+              : '권한 토큰이 없어 release 검수 보드는 조회만 사용할 수 있습니다.'
+          }
+          description={
+            hasAccess
+              ? undefined
+              : '새로고침 외 버튼과 입력은 비활성화되며, 요청/메모 내용은 40% 마스킹으로 표시됩니다.'
+          }
+        />
+
+        <Flex gap={12} wrap className="release-review-page__toolbar">
+          <Input.Search
+            allowClear
+            placeholder="작업 ID, 검수 메모, 관련 메뉴 설명, 변경 파일로 검색"
+            value={searchKeyword}
+            disabled={!hasAccess}
+            onChange={(event) => {
+              setSearchKeyword(event.target.value);
+            }}
+            className="release-review-page__search"
+          />
+          <Space.Compact>
+            {RELEASE_REVIEW_FILTER_OPTIONS.map((option) => (
+              <Button
+                key={option.value}
+                type={filter === option.value ? 'primary' : 'default'}
+                disabled={!hasAccess}
+                onClick={() => {
+                  setFilter(option.value);
+                }}
+              >
+                {option.label}
+              </Button>
+            ))}
+          </Space.Compact>
+        </Flex>
+
+        {errorMessage ? <Alert type="error" showIcon message={errorMessage} /> : null}
+
+        {loading ? (
+          <div className="release-review-page__loading">
+            <Spin />
+          </div>
+        ) : filteredItems.length === 0 ? (
+          <Empty description="release 검수 대상이 없습니다." />
+        ) : (
+          <div className="release-review-page__grid">
+            {filteredItems.map((item) => {
+              const planItem = item.planItem;
+              const detailPath = buildPlanPath('release', planItem);
+              const reviewPath = buildPlanPath('release-review', planItem);
+              const previewUrl = item.latestSourceWork?.previewUrl ?? null;
+              const changedFiles = item.latestSourceWork?.changedFiles?.slice(0, 8) ?? [];
+              const isSaving = Boolean(savingByPlanId[planItem.id]);
+              const reviewNoteDraft = reviewNoteDrafts[planItem.id] ?? '';
+              const relatedMenuTargets = buildRelatedMenuTargets(item);
+              const checkedMenuIds = buildCheckedMenuIds(item);
+              const checkedCount = relatedMenuTargets.filter((target) => checkedMenuIds.has(target.id)).length;
+
+              return (
+                <div
+                  key={planItem.id}
+                  ref={(node) => {
+                    cardRefs.current[planItem.id] = node;
+                  }}
+                  className={
+                    highlightedPlanId === planItem.id
+                      ? 'release-review-page__card-shell release-review-page__card-shell--selected'
+                      : 'release-review-page__card-shell'
+                  }
+                >
+                  <Card
+                    size="small"
+                    className="release-review-page__card"
+                    title={
+                      <Space size={[8, 8]} wrap>
+                        <Text strong>{formatPlanLabel(planItem)}</Text>
+                        <Tag color={planItem.status === '완료' ? 'success' : 'geekblue'}>{planItem.status}</Tag>
+                        {planItem.workerStatus ? (
+                          <Tag color={normalizeWorkerStatus(planItem.workerStatus).includes('실패') ? 'error' : 'gold'}>
+                            {planItem.workerStatus}
+                          </Tag>
+                        ) : null}
+                        <Tag color={getReviewStatusTagColor(item.review.status)}>{getReviewStatusLabel(item.review.status)}</Tag>
+                        <Tag>{`메뉴 ${checkedCount}/${relatedMenuTargets.length}`}</Tag>
+                      </Space>
+                    }
+                    extra={<Text type="secondary">{formatDateTime(planItem.updatedAt)}</Text>}
+                  >
+                    <Space direction="vertical" size={12} className="release-review-page__card-body">
+                      <div>
+                        <Text strong>검수 요약</Text>
+                        <Paragraph className="release-review-page__summary" ellipsis={{ rows: 3, expandable: true, symbol: '더보기' }}>
+                          {resolveProtectedText(item.review.metadata.summary || planItem.note, hasAccess)}
+                        </Paragraph>
+                        <Paragraph className="release-review-page__history-summary" ellipsis={{ rows: 2, expandable: true, symbol: '더보기' }}>
+                          원본 요청: {resolveProtectedText(planItem.note, hasAccess)}
+                        </Paragraph>
+                      </div>
+
+                      <Space size={[8, 8]} wrap>
+                        {planItem.assignedBranch ? <Tag>{planItem.assignedBranch}</Tag> : null}
+                        {planItem.releaseTarget ? <Tag color="blue">{planItem.releaseTarget}</Tag> : null}
+                        {planItem.autoDeployToMain ? <Tag color="green">main 자동반영</Tag> : <Tag>main 수동반영</Tag>}
+                        {previewUrl ? <Tag color="purple">Preview 연결됨</Tag> : <Tag>Preview 없음</Tag>}
+                      </Space>
+
+                      <Flex gap={8} wrap>
+                        <Button
+                          type="primary"
+                          icon={<EyeOutlined />}
+                          disabled={!hasAccess}
+                          onClick={() => {
+                            navigate(detailPath);
+                          }}
+                        >
+                          자동화 상세
+                        </Button>
+                        <Button
+                          icon={<LinkOutlined />}
+                          disabled={!hasAccess}
+                          onClick={() => {
+                            void handleCopyLink(reviewPath);
+                          }}
+                        >
+                          검수 링크
+                        </Button>
+                        <Button
+                          href={previewUrl ?? undefined}
+                          target="_blank"
+                          rel="noreferrer"
+                          disabled={!hasAccess || !previewUrl}
+                        >
+                          Preview
+                        </Button>
+                        <Button
+                          danger
+                          disabled={!hasAccess || isSaving}
+                          onClick={() => {
+                            void handleSaveReview(
+                              planItem.id,
+                              {
+                                status: 'changes-requested',
+                                reviewNote: reviewNoteDraft,
+                                metadata: item.review.metadata,
+                              },
+                              '검수 상태를 수정필요로 저장했습니다.',
+                            );
+                          }}
+                        >
+                          수정 필요
+                        </Button>
+                      </Flex>
+
+                      <div className="release-review-page__menu-section">
+                        <Text strong>관련 메뉴 체크</Text>
+                        {relatedMenuTargets.length ? (
+                          <div className="release-review-page__menu-list">
+                            {relatedMenuTargets.map((target) => {
+                              const checked = checkedMenuIds.has(target.id);
+
+                              return (
+                                <div key={`${planItem.id}:${target.id}`} className="release-review-page__menu-item">
+                                  <Checkbox
+                                    checked={checked}
+                                    disabled={!hasAccess || isSaving}
+                                    onChange={(event) => {
+                                      const nextCheckedIds = relatedMenuTargets
+                                        .map((menuTarget) => menuTarget.id)
+                                        .filter((menuTargetId) =>
+                                          menuTargetId === target.id ? event.target.checked : checkedMenuIds.has(menuTargetId),
+                                        );
+
+                                      void handleSaveReview(
+                                        planItem.id,
+                                        {
+                                          reviewNote: reviewNoteDraft,
+                                          status: deriveReviewStatus({
+                                            checkedIds: nextCheckedIds,
+                                            targetIds: relatedMenuTargets.map((menuTarget) => menuTarget.id),
+                                            reviewNote: reviewNoteDraft,
+                                            currentStatus: item.review.status,
+                                          }),
+                                          metadata: {
+                                            ...item.review.metadata,
+                                            checkedPageSelectionIds: nextCheckedIds,
+                                          },
+                                        },
+                                        event.target.checked
+                                          ? `${target.label} 검수를 체크했습니다.`
+                                          : `${target.label} 검수를 해제했습니다.`,
+                                      );
+                                    }}
+                                  >
+                                    <span className="release-review-page__menu-label">{target.label}</span>
+                                  </Checkbox>
+                                  <Text type="secondary" className="release-review-page__menu-description">
+                                    {target.description}
+                                  </Text>
+                                  <Button
+                                    size="small"
+                                    disabled={!hasAccess}
+                                    onClick={() => {
+                                      handleOpenOverlay(target, item);
+                                    }}
+                                  >
+                                    전체화면 열기
+                                  </Button>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        ) : (
+                          <Paragraph className="release-review-page__empty-copy" type="secondary">
+                            연결된 관련 메뉴가 아직 없습니다.
+                          </Paragraph>
+                        )}
+                      </div>
+
+                      <div className="release-review-page__memo">
+                        <Text strong>검수 메모</Text>
+                        <TextArea
+                          rows={3}
+                          value={hasAccess ? reviewNoteDraft : maskNotePreviewByWord(reviewNoteDraft)}
+                          placeholder="확인 결과나 수정 필요 사항을 남기세요."
+                          disabled={!hasAccess}
+                          onChange={(event) => {
+                            setReviewNoteDrafts((previous) => ({
+                              ...previous,
+                              [planItem.id]: event.target.value,
+                            }));
+                          }}
+                        />
+                        <Flex justify="space-between" align="center" gap={8} wrap>
+                          <Text type="secondary">
+                            확인자 {item.review.checkedByNickname ?? item.review.checkedByClientId ?? '미기록'} · {formatDateTime(item.review.checkedAt)}
+                          </Text>
+                          <Button
+                            type="primary"
+                            icon={<SaveOutlined />}
+                            loading={isSaving}
+                            disabled={!hasAccess}
+                            onClick={() => {
+                              void handleSaveReview(
+                                planItem.id,
+                                {
+                                  reviewNote: reviewNoteDraft,
+                                  status: deriveReviewStatus({
+                                    checkedIds: Array.from(checkedMenuIds),
+                                    targetIds: relatedMenuTargets.map((target) => target.id),
+                                    reviewNote: reviewNoteDraft,
+                                    currentStatus: item.review.status,
+                                  }),
+                                  metadata: item.review.metadata,
+                                },
+                                '검수 메모를 저장했습니다.',
+                              );
+                            }}
+                          >
+                            메모 저장
+                          </Button>
+                        </Flex>
+                      </div>
+
+                      {item.latestSourceWork ? (
+                        <Space direction="vertical" size={8} className="release-review-page__history">
+                          <Flex gap={8} wrap>
+                            <Text type="secondary">최근 작업란: {formatDateTime(item.latestSourceWork.createdAt)}</Text>
+                            <Text type="secondary">브랜치 {item.latestSourceWork.branchName}</Text>
+                          </Flex>
+                          <Paragraph className="release-review-page__history-summary" ellipsis={{ rows: 2, expandable: true, symbol: '더보기' }}>
+                            {resolveProtectedText(item.latestSourceWork.summary, hasAccess)}
+                          </Paragraph>
+                        </Space>
+                      ) : (
+                        <Text type="secondary">연결된 source work 기록이 없습니다.</Text>
+                      )}
+
+                      <div>
+                        <Text strong>검수 대상 파일</Text>
+                        {changedFiles.length ? (
+                          <Space size={[6, 6]} wrap className="release-review-page__target-tags">
+                            {changedFiles.map((file) => (
+                              <Tag key={`${planItem.id}:${file}`}>{file}</Tag>
+                            ))}
+                          </Space>
+                        ) : (
+                          <Paragraph className="release-review-page__empty-copy" type="secondary">
+                            최근 기록에 남은 변경 파일이 없습니다.
+                          </Paragraph>
+                        )}
+                      </div>
+                    </Space>
+                  </Card>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </Space>
+
+      {overlayTarget ? (
+        <div
+          className={`release-review-page__overlay${
+            overlayMinimized ? ' release-review-page__overlay--minimized' : ''
+          }`}
+        >
+          <Card
+            bordered={false}
+            className={`release-review-page__overlay-card${
+              overlayMinimized ? ' release-review-page__overlay-card--minimized' : ''
+            }`}
+            title={
+              <div className="release-review-page__overlay-title-row">
+                <div className="release-review-page__overlay-title-copy">
+                  <Text strong>{overlayTarget.label}</Text>
+                  <Text type="secondary">
+                    {overlayTarget.planLabel} · {overlayTarget.description}
+                  </Text>
+                </div>
+                <Space size={8}>
+                  <Button
+                    type="text"
+                    aria-label={overlayMinimized ? '전체화면으로 확장' : '최소화'}
+                    icon={overlayMinimized ? <ExpandOutlined /> : <ShrinkOutlined />}
+                    onClick={() => {
+                      setOverlayMinimized((previous) => !previous);
+                    }}
+                  />
+                  <Button
+                    type="text"
+                    aria-label="닫기"
+                    icon={<CloseOutlined />}
+                    onClick={() => {
+                      setOverlayTarget(null);
+                      setOverlayMinimized(false);
+                    }}
+                  />
+                </Space>
+              </div>
+            }
+          >
+            {overlayMinimized ? (
+              <Text type="secondary">헤더 아이콘으로 다시 최대화할 수 있습니다.</Text>
+            ) : overlayTarget.targetType === 'component' ? (
+              <div className="release-review-page__overlay-content">
+                <ComponentSamplesLayout
+                  entries={componentSampleEntries}
+                  excludeComponentIds={HIDDEN_COMPONENT_IDS}
+                  includeComponentIds={[overlayTarget.targetId]}
+                />
+              </div>
+            ) : (
+              <div className="release-review-page__overlay-content">
+                <SampleWidgetsLayout entries={widgetSampleEntries} includeComponentIds={[overlayTarget.targetId]} />
+              </div>
+            )}
+          </Card>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/features/planBoard/api.ts b/src/features/planBoard/api.ts
new file mode 100755
index 0000000..54980ca
--- /dev/null
+++ b/src/features/planBoard/api.ts
@@ -0,0 +1,596 @@
+import { appendClientIdHeader } from '../../app/main/clientIdentity';
+import { getRegisteredAccessToken } from '../../app/main/tokenAccess';
+import type {
+  PlanActionType,
+  PlanAutomationType,
+  PlanActionHistory,
+  PlanAutomationUsageSnapshot,
+  PlanDraft,
+  PlanFilterStatus,
+  PlanIssueHistory,
+  PlanItem,
+  PlanReleaseReview,
+  PlanReleaseReviewBoardItem,
+  PlanReleaseReviewMetadata,
+  PlanReleaseReviewStatus,
+  PlanSourceWorkHistory,
+} from './types';
+
+function resolvePlanApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function normalizePlanAutomationType(value: unknown): PlanAutomationType {
+  return value === 'plan' ||
+    value === 'command_execution' ||
+    value === 'non_source_work' ||
+    value === 'auto_worker'
+    ? value
+    : value === 'plan_registration'
+      ? 'plan'
+      : value === 'general_development'
+        ? 'auto_worker'
+    : 'none';
+}
+
+function resolveWorkServerFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const PLAN_API_BASE_URL = resolvePlanApiBaseUrl();
+const PLAN_API_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && PLAN_API_BASE_URL === '/api'
+    ? resolveWorkServerFallbackBaseUrl()
+    : null;
+
+class PlanApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'PlanApiError';
+    this.status = status;
+  }
+}
+
+export type PlanApiRequestMeta = {
+  durationMs: number;
+  responseBytes: number;
+};
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit): Promise<T> {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const timeoutMs = 8000;
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => {
+    controller.abort();
+  }, timeoutMs);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const token = getRegisteredAccessToken();
+  if (token && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', token);
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new PlanApiError('서버 응답이 지연됩니다. 잠시 후 다시 시도해 주세요.', 408);
+    }
+    throw error;
+  }
+
+  clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new PlanApiError(payload.message || "요청 처리에 실패했습니다.", response.status);
+    } catch {
+      throw new PlanApiError(text || "요청 처리에 실패했습니다.", response.status);
+    }
+  }
+
+  const contentType = response.headers.get("content-type") ?? "";
+
+  if (!contentType.toLowerCase().includes("application/json")) {
+    const text = await response.text();
+    throw new PlanApiError(text ? "서버 응답이 JSON이 아닙니다." : "서버 응답을 확인할 수 없습니다.", 502);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(PLAN_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      PLAN_API_FALLBACK_BASE_URL &&
+      PLAN_API_FALLBACK_BASE_URL !== PLAN_API_BASE_URL &&
+      (error instanceof PlanApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && (/not found/i.test(error.message) || /404/.test(error.message)));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(PLAN_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+async function requestWithMetaOnce<T>(baseUrl: string, path: string, init?: RequestInit) {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const timeoutMs = 8000;
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => {
+    controller.abort();
+  }, timeoutMs);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const token = getRegisteredAccessToken();
+  if (token && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', token);
+  }
+
+  const startedAt = performance.now();
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new PlanApiError('서버 응답이 지연됩니다. 잠시 후 다시 시도해 주세요.', 408);
+    }
+    throw error;
+  }
+
+  clearTimeout(timeoutId);
+
+  const text = await response.text();
+  const meta: PlanApiRequestMeta = {
+    durationMs: Math.max(0, Math.round(performance.now() - startedAt)),
+    responseBytes: new TextEncoder().encode(text).length,
+  };
+
+  if (!response.ok) {
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new PlanApiError(payload.message || '요청 처리에 실패했습니다.', response.status);
+    } catch {
+      throw new PlanApiError(text || '요청 처리에 실패했습니다.', response.status);
+    }
+  }
+
+  const contentType = response.headers.get('content-type') ?? '';
+
+  if (!contentType.toLowerCase().includes('application/json')) {
+    throw new PlanApiError(text ? '서버 응답이 JSON이 아닙니다.' : '서버 응답을 확인할 수 없습니다.', 502);
+  }
+
+  return {
+    data: JSON.parse(text) as T,
+    meta,
+  };
+}
+
+async function requestWithMeta<T>(path: string, init?: RequestInit) {
+  try {
+    return await requestWithMetaOnce<T>(PLAN_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      PLAN_API_FALLBACK_BASE_URL &&
+      PLAN_API_FALLBACK_BASE_URL !== PLAN_API_BASE_URL &&
+      (error instanceof PlanApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && (/not found/i.test(error.message) || /404/.test(error.message)));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestWithMetaOnce<T>(PLAN_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+export async function setupPlanBoard() {
+  return request<{ ok: boolean; table: string }>('/plan/setup', {
+    method: 'POST',
+    body: JSON.stringify({}),
+  });
+}
+
+export async function fetchPlanItems(status: PlanFilterStatus) {
+  void status;
+  const query = '';
+  const response = await request<{ items: PlanItem[] }>(`/plan/items${query}`);
+
+  return response.items.map(normalizePlanItem);
+}
+
+export async function fetchPlanItemsWithLatestSourceWorks(status: PlanFilterStatus) {
+  void status;
+  const query = '';
+  const response = await requestWithMeta<{
+    items: PlanItem[];
+  }>(`/plan/items${query}`);
+
+  return {
+    items: response.data.items.map(normalizePlanItem),
+    meta: response.meta,
+  };
+}
+
+export async function createPlanItem(draft: PlanDraft) {
+  const response = await request<{ ok: boolean; item: PlanItem }>('/plan/items', {
+    method: 'POST',
+    body: JSON.stringify({
+      workId: draft.workId,
+      note: draft.note,
+      automationType: draft.automationType,
+      jangsingProcessingRequired: draft.jangsingProcessingRequired,
+      autoDeployToMain: draft.autoDeployToMain,
+    }),
+  });
+
+  return normalizePlanItem(response.item);
+}
+
+export async function updatePlanItem(draft: PlanDraft) {
+  if (!draft.id) {
+    throw new Error('수정할 작업 항목 ID가 없습니다.');
+  }
+
+  const response = await request<{ ok: boolean; item: PlanItem }>(`/plan/items/${draft.id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      workId: draft.workId,
+      note: draft.note,
+      automationType: draft.automationType,
+      jangsingProcessingRequired: draft.jangsingProcessingRequired,
+      autoDeployToMain: draft.autoDeployToMain,
+    }),
+  });
+
+  return normalizePlanItem(response.item);
+}
+
+export async function updatePlanItemJangsingProcessingRequired(id: number, jangsingProcessingRequired: boolean) {
+  const response = await request<{ ok: boolean; item: PlanItem }>(`/plan/items/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      jangsingProcessingRequired,
+    }),
+  });
+
+  return normalizePlanItem(response.item);
+}
+
+export async function deletePlanItem(id: number) {
+  const response = await request<{ ok: boolean; id: number }>(`/plan/items/${id}`, {
+    method: 'DELETE',
+  });
+
+  return response.id;
+}
+
+export async function runPlanAction(id: number, action: PlanActionType) {
+  const response = await request<{ ok: boolean; item: PlanItem; message?: string }>(`/plan/items/${id}/actions/${action}`, {
+    method: 'POST',
+    body: JSON.stringify({}),
+  });
+
+  return {
+    item: normalizePlanItem(response.item),
+    message: response.message,
+  };
+}
+
+export async function fetchPlanIssueHistories(id: number) {
+  const response = await request<{ items: PlanIssueHistory[] }>(`/plan/items/${id}/issues`);
+  return response.items;
+}
+
+export async function appendPlanIssueAction(id: number, actionNote: string, resolve = false, retry = false) {
+  const response = await request<{ ok: boolean; item: PlanIssueHistory; planItem?: PlanItem; message?: string }>(
+    `/plan/items/${id}/issues/action`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        actionNote,
+        resolve,
+        retry,
+      }),
+    },
+  );
+
+  return {
+    item: response.item,
+    planItem: response.planItem ? normalizePlanItem(response.planItem) : undefined,
+    message: response.message,
+  };
+}
+
+export async function fetchPlanActionHistories(id: number) {
+  const response = await request<{ items: PlanActionHistory[] }>(`/plan/items/${id}/actions`);
+  return response.items;
+}
+
+export async function appendPlanActionHistory(id: number, actionNote: string) {
+  const response = await request<{ ok: boolean; item: PlanActionHistory; planItem?: PlanItem; message?: string }>(
+    `/plan/items/${id}/actions/note`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        actionNote,
+        actionType: '추가조치',
+      }),
+    },
+  );
+
+  return {
+    item: response.item,
+    planItem: response.planItem ? normalizePlanItem(response.planItem) : undefined,
+    message: response.message,
+  };
+}
+
+function normalizePlanItem(item: PlanItem): PlanItem {
+  return {
+    ...item,
+    automationType: normalizePlanAutomationType(item.automationType),
+    releaseReviewNote: typeof item.releaseReviewNote === 'string' ? item.releaseReviewNote : '',
+    usageSnapshot: normalizePlanAutomationUsageSnapshot(item.usageSnapshot),
+  };
+}
+
+function normalizePlanAutomationUsageSnapshot(value: PlanAutomationUsageSnapshot | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  return {
+    tokenTotals: {
+      total: Number(value.tokenTotals?.total ?? 0),
+      input: Number(value.tokenTotals?.input ?? 0),
+      output: Number(value.tokenTotals?.output ?? 0),
+      cached: Number(value.tokenTotals?.cached ?? 0),
+      reasoning: Number(value.tokenTotals?.reasoning ?? 0),
+    },
+    totalTokens: Number(value.totalTokens ?? 0),
+    retryCount: Number(value.retryCount ?? 0),
+    sourceWorkCount: Number(value.sourceWorkCount ?? 0),
+    processingStartedAt: value.processingStartedAt ?? null,
+    processingEndedAt: value.processingEndedAt ?? null,
+    processingEndedAtSource: value.processingEndedAtSource ?? null,
+    processingDurationSeconds:
+      value.processingDurationSeconds === null || value.processingDurationSeconds === undefined
+        ? null
+        : Number(value.processingDurationSeconds),
+  } satisfies PlanAutomationUsageSnapshot;
+}
+
+export async function fetchPlanSourceWorkHistories(id: number) {
+  const response = await request<{ items: PlanSourceWorkHistory[] }>(`/plan/items/${id}/source-works`);
+  return response.items;
+}
+
+export async function fetchReleaseReviewBoardItems() {
+  const response = await request<{ items: PlanReleaseReviewBoardItem[] }>('/plan/release-reviews');
+  return response.items;
+}
+
+export async function updatePlanReleaseReview(
+  planItemId: number,
+  payload: {
+    status?: PlanReleaseReviewStatus;
+    reviewNote?: string;
+    metadata?: PlanReleaseReviewMetadata;
+  },
+) {
+  const response = await request<{ ok: boolean; item: PlanReleaseReview }>(`/plan/release-reviews/${planItemId}`, {
+    method: 'PATCH',
+    body: JSON.stringify(payload),
+  });
+
+  return response.item;
+}
+
+export async function fetchPlanSourceWorkHistory(id: number, sourceWorkId: number) {
+  const response = await request<{ item: PlanSourceWorkHistory }>(
+    `/plan/items/${id}/source-works/${sourceWorkId}`,
+  );
+  return response.item;
+}
+
+export type PlanScheduledTask = {
+  id: number;
+  workId: string;
+  note: string;
+  automationType: PlanAutomationType;
+  releaseTarget: string;
+  jangsingProcessingRequired: boolean;
+  autoDeployToMain: boolean;
+  enabled: boolean;
+  immediateRunEnabled: boolean;
+  scheduleMode: PlanScheduleMode;
+  repeatIntervalValue: number;
+  repeatIntervalUnit: PlanScheduleRepeatUnit;
+  repeatIntervalMinutes: number;
+  dailyRunTime: string;
+  lastRegisteredAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type PlanScheduleMode = 'interval' | 'daily';
+export type PlanScheduleRepeatUnit = 'minute' | 'hour' | 'day' | 'week' | 'month';
+
+export type PlanScheduledTaskDraft = {
+  id: number | null;
+  workId: string;
+  note: string;
+  automationType: PlanAutomationType;
+  releaseTarget: string;
+  jangsingProcessingRequired: boolean;
+  autoDeployToMain: boolean;
+  enabled: boolean;
+  immediateRunEnabled: boolean;
+  scheduleMode: PlanScheduleMode;
+  repeatIntervalValue: number;
+  repeatIntervalUnit: PlanScheduleRepeatUnit;
+  repeatIntervalMinutes: number;
+  dailyRunTime: string;
+};
+
+async function requestPlanScheduleTask<T>(pathSuffix = '', init?: RequestInit) {
+  const paths = [
+    `/plan/scheduled-tasks${pathSuffix}`,
+    `/plan/schedule/tasks${pathSuffix}`,
+    `/plan/schedule${pathSuffix}`,
+    `/plan/schedules${pathSuffix}`,
+    `/plans/scheduled-tasks${pathSuffix}`,
+    `/plans/schedule/tasks${pathSuffix}`,
+    `/plans/schedule${pathSuffix}`,
+    `/plans/schedules${pathSuffix}`,
+  ];
+
+  let lastNotFoundError: PlanApiError | null = null;
+
+  for (const path of paths) {
+    try {
+      return await request<T>(path, init);
+    } catch (error) {
+      if (error instanceof PlanApiError && error.status === 404) {
+        lastNotFoundError = error;
+        continue;
+      }
+
+      throw error;
+    }
+  }
+
+  throw lastNotFoundError ?? new PlanApiError('스케줄 API 경로를 찾을 수 없습니다.', 404);
+}
+
+export async function fetchPlanScheduledTasks() {
+  const response = await requestPlanScheduleTask<{ items: PlanScheduledTask[] }>();
+  return response.items.map((item) => ({
+    ...item,
+    automationType: normalizePlanAutomationType(item.automationType),
+  }));
+}
+
+export async function createPlanScheduledTask(draft: PlanScheduledTaskDraft) {
+  const response = await requestPlanScheduleTask<{ ok: boolean; item: PlanScheduledTask }>('', {
+    method: 'POST',
+    body: JSON.stringify({
+      workId: draft.workId,
+      note: draft.note,
+      automationType: draft.automationType,
+      releaseTarget: draft.releaseTarget,
+      jangsingProcessingRequired: draft.jangsingProcessingRequired,
+      autoDeployToMain: draft.autoDeployToMain,
+      enabled: draft.enabled,
+      immediateRunEnabled: draft.immediateRunEnabled,
+      scheduleMode: draft.scheduleMode,
+      repeatIntervalValue: draft.repeatIntervalValue,
+      repeatIntervalUnit: draft.repeatIntervalUnit,
+      repeatIntervalMinutes: draft.repeatIntervalMinutes,
+      dailyRunTime: draft.dailyRunTime,
+    }),
+  });
+
+  return {
+    ...response.item,
+    automationType: normalizePlanAutomationType(response.item.automationType),
+  };
+}
+
+export async function updatePlanScheduledTask(draft: PlanScheduledTaskDraft) {
+  if (!draft.id) {
+    throw new Error('수정할 스케줄 ID가 없습니다.');
+  }
+
+  const response = await requestPlanScheduleTask<{ ok: boolean; item: PlanScheduledTask }>(`/${draft.id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      workId: draft.workId,
+      note: draft.note,
+      automationType: draft.automationType,
+      releaseTarget: draft.releaseTarget,
+      jangsingProcessingRequired: draft.jangsingProcessingRequired,
+      autoDeployToMain: draft.autoDeployToMain,
+      enabled: draft.enabled,
+      immediateRunEnabled: draft.immediateRunEnabled,
+      scheduleMode: draft.scheduleMode,
+      repeatIntervalValue: draft.repeatIntervalValue,
+      repeatIntervalUnit: draft.repeatIntervalUnit,
+      repeatIntervalMinutes: draft.repeatIntervalMinutes,
+      dailyRunTime: draft.dailyRunTime,
+    }),
+  });
+
+  return {
+    ...response.item,
+    automationType: normalizePlanAutomationType(response.item.automationType),
+  };
+}
+
+export async function deletePlanScheduledTask(id: number) {
+  const response = await requestPlanScheduleTask<{ ok: boolean; id: number }>(`/${id}`, {
+    method: 'DELETE',
+  });
+
+  return response.id;
+}
diff --git a/src/features/planBoard/charts.tsx b/src/features/planBoard/charts.tsx
new file mode 100755
index 0000000..d2c28c1
--- /dev/null
+++ b/src/features/planBoard/charts.tsx
@@ -0,0 +1,474 @@
+import { Button, Card, Empty, Flex, Space, Tag, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import './planBoard.css';
+import { fetchPlanItems } from './api';
+import type { PlanItem } from './types';
+
+const { Paragraph, Text, Title } = Typography;
+
+export const DAILY_CHART_DAYS = 7;
+export const WEEKLY_CHART_WEEKS = 8;
+const CHART_REFRESH_INTERVAL_MS = 5000;
+
+type PerformanceChartDatum = {
+  label: string;
+  registered: number;
+  jangsing: number;
+  completed: number;
+  merged: number;
+};
+
+type CurrentPlanSnapshot = {
+  total: number;
+  registered: number;
+  inProgress: number;
+  functionChecked: number;
+  completed: number;
+  merged: number;
+};
+
+export function PlanBoardChartsPage() {
+  const [items, setItems] = useState<PlanItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async (showLoading = true) => {
+      if (showLoading) {
+        setLoading(true);
+      }
+
+      try {
+        const nextItems = await fetchPlanItems('all');
+
+        if (cancelled) {
+          return;
+        }
+
+        setItems(nextItems);
+        setErrorMessage(null);
+      } catch (error) {
+        if (cancelled) {
+          return;
+        }
+
+        setErrorMessage(error instanceof Error ? error.message : '차트 데이터를 불러오지 못했습니다.');
+      } finally {
+        if (!cancelled && showLoading) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    const intervalId = window.setInterval(() => {
+      if (document.visibilityState !== 'visible') {
+        return;
+      }
+
+      void load(false);
+    }, CHART_REFRESH_INTERVAL_MS);
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        void load(false);
+      }
+    };
+
+    window.addEventListener('focus', handleVisibilityChange);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(intervalId);
+      window.removeEventListener('focus', handleVisibilityChange);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  const dailyPerformanceData = useMemo(() => buildDailyPerformanceData(items, DAILY_CHART_DAYS), [items]);
+  const weeklyPerformanceData = useMemo(() => buildWeeklyPerformanceData(items, WEEKLY_CHART_WEEKS), [items]);
+  const currentSnapshot = useMemo(() => buildCurrentPlanSnapshot(items), [items]);
+
+  return (
+    <div className="plan-board-page">
+      <Card className="plan-board-page__overview" bordered={false}>
+        <Title level={4}>Plan Charts</Title>
+        <Paragraph className="plan-board-page__intro">
+          현재 상태 집계와 최근 작업 등록, 기능동작 확인완료, 자동 작업 완료, main 반영 추이를 함께 확인합니다.
+        </Paragraph>
+      </Card>
+
+      {errorMessage ? (
+        <Card className="plan-board-page__chart-card" bordered={false}>
+          <Empty description={errorMessage} />
+        </Card>
+      ) : (
+        <Card
+          title="작업성과 차트"
+          className="plan-board-page__chart-card"
+          loading={loading}
+          bordered={false}
+          extra={(
+            <Space size={8}>
+              <Text code>5초 자동갱신</Text>
+              <Button size="small" onClick={() => void fetchLatestChartItems(setItems, setLoading, setErrorMessage)}>
+                조회
+              </Button>
+            </Space>
+          )}
+        >
+          <Flex vertical gap={16}>
+            <CurrentSnapshotSummary snapshot={currentSnapshot} />
+
+            <div className="plan-board-page__chart-grid">
+              <PerformanceChart
+                title="일별 작업성과"
+                description={`최근 ${DAILY_CHART_DAYS}일 등록·기능확인완료·작업완료·main반영 건수`}
+                data={dailyPerformanceData}
+              />
+              <PerformanceChart
+                title="주별 작업성과"
+                description={`최근 ${WEEKLY_CHART_WEEKS}주 등록·기능확인완료·작업완료·main반영 건수`}
+                data={weeklyPerformanceData}
+              />
+            </div>
+          </Flex>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+async function fetchLatestChartItems(
+  setItems: Dispatch<SetStateAction<PlanItem[]>>,
+  setLoading: Dispatch<SetStateAction<boolean>>,
+  setErrorMessage: Dispatch<SetStateAction<string | null>>,
+) {
+  setLoading(true);
+
+  try {
+    const nextItems = await fetchPlanItems('all');
+    setItems(nextItems);
+    setErrorMessage(null);
+  } catch (error) {
+    setErrorMessage(error instanceof Error ? error.message : '차트 데이터를 불러오지 못했습니다.');
+  } finally {
+    setLoading(false);
+  }
+}
+
+function CurrentSnapshotSummary({ snapshot }: { snapshot: CurrentPlanSnapshot }) {
+  return (
+    <Flex justify="space-between" align="start" gap={12} wrap>
+      <div>
+        <Title level={5} className="plan-board-page__chart-title">
+          현재데이터
+        </Title>
+        <Paragraph className="plan-board-page__chart-description">
+          지금 저장된 작업 상태 기준 집계입니다. 완료 처리된 예전 작업도 상태가 바뀌면 바로 반영됩니다.
+        </Paragraph>
+      </div>
+      <Space size={[8, 8]} wrap>
+        <Tag>전체 {snapshot.total}</Tag>
+        <Tag color="blue">등록 {snapshot.registered}</Tag>
+        <Tag color="gold">작업중 {snapshot.inProgress}</Tag>
+        <Tag color="purple">기능확인완료 {snapshot.functionChecked}</Tag>
+        <Tag color="cyan">완료 {snapshot.completed}</Tag>
+        <Tag color="green">main반영 {snapshot.merged}</Tag>
+      </Space>
+    </Flex>
+  );
+}
+
+function PerformanceChart({
+  title,
+  description,
+  data,
+}: {
+  title: string;
+  description: string;
+  data: PerformanceChartDatum[];
+}) {
+  const totalRegistered = data.reduce((sum, item) => sum + item.registered, 0);
+  const totalJangsing = data.reduce((sum, item) => sum + item.jangsing, 0);
+  const totalCompleted = data.reduce((sum, item) => sum + item.completed, 0);
+  const totalMerged = data.reduce((sum, item) => sum + item.merged, 0);
+
+  return (
+    <div className="plan-board-page__chart-panel">
+      <Flex justify="space-between" align="start" gap={12} wrap>
+        <div>
+          <Title level={5} className="plan-board-page__chart-title">
+            {title}
+          </Title>
+          <Paragraph className="plan-board-page__chart-description">{description}</Paragraph>
+        </div>
+        <Space size={[8, 8]} wrap>
+          <Tag color="blue">등록 {totalRegistered}</Tag>
+          <Tag color="purple">기능확인완료 {totalJangsing}</Tag>
+          <Tag color="cyan">완료 {totalCompleted}</Tag>
+          <Tag color="green">main반영 {totalMerged}</Tag>
+        </Space>
+      </Flex>
+
+      <div className="plan-board-page__chart-shell">
+        <ResponsiveContainer width="100%" height={240}>
+          <LineChart data={data} margin={{ top: 12, right: 12, left: -18, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="rgba(24, 34, 48, 0.08)" />
+            <XAxis
+              dataKey="label"
+              tickLine={false}
+              axisLine={false}
+              tick={{ fill: 'rgba(24, 34, 48, 0.62)', fontSize: 12 }}
+            />
+            <YAxis
+              allowDecimals={false}
+              tickLine={false}
+              axisLine={false}
+              width={36}
+              tick={{ fill: 'rgba(24, 34, 48, 0.62)', fontSize: 12 }}
+            />
+            <Tooltip
+              contentStyle={{
+                borderRadius: 12,
+                border: '1px solid rgba(22, 93, 255, 0.12)',
+                boxShadow: '0 16px 30px rgba(23, 61, 130, 0.08)',
+              }}
+            />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="registered"
+              name="등록"
+              stroke="#165dff"
+              strokeWidth={3}
+              dot={{ r: 3, fill: '#165dff', stroke: '#ffffff', strokeWidth: 2 }}
+              activeDot={{ r: 5 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="jangsing"
+              name="기능확인완료"
+              stroke="#722ed1"
+              strokeWidth={3}
+              dot={{ r: 3, fill: '#722ed1', stroke: '#ffffff', strokeWidth: 2 }}
+              activeDot={{ r: 5 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="completed"
+              name="작업완료"
+              stroke="#13c2c2"
+              strokeWidth={3}
+              dot={{ r: 3, fill: '#13c2c2', stroke: '#ffffff', strokeWidth: 2 }}
+              activeDot={{ r: 5 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="merged"
+              name="main반영"
+              stroke="#52c41a"
+              strokeWidth={3}
+              dot={{ r: 3, fill: '#52c41a', stroke: '#ffffff', strokeWidth: 2 }}
+              activeDot={{ r: 5 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+function buildDailyPerformanceData(items: PlanItem[], days: number): PerformanceChartDatum[] {
+  const today = new Date();
+  const start = startOfLocalDay(addDays(today, -(days - 1)));
+  const keys = Array.from({ length: days }, (_, index) => formatLocalDateKey(addDays(start, index)));
+  const buckets = createPerformanceBuckets(keys, (date) =>
+    `${date.getMonth() + 1}.${String(date.getDate()).padStart(2, '0')}`,
+  );
+
+  items.forEach((item) => {
+    accumulatePerformanceCount(buckets, item.createdAt, 'registered');
+    if (item.jangsingProcessingRequired && item.completedAt) {
+      accumulatePerformanceCount(buckets, item.completedAt, 'jangsing');
+    }
+    accumulatePerformanceCount(buckets, item.completedAt, 'completed');
+    accumulatePerformanceCount(buckets, item.mergedAt, 'merged');
+  });
+
+  return keys.map((key) => buckets.get(key) ?? createEmptyPerformanceBucket(key, key));
+}
+
+function buildCurrentPlanSnapshot(items: PlanItem[]): CurrentPlanSnapshot {
+  return items.reduce<CurrentPlanSnapshot>(
+    (summary, item) => {
+      summary.total += 1;
+
+      if (item.status === '등록') {
+        summary.registered += 1;
+      }
+
+      if (item.status === '작업중') {
+        summary.inProgress += 1;
+      }
+
+      if (isCompletedPlanStatus(item.status)) {
+        summary.completed += 1;
+
+        if (item.jangsingProcessingRequired) {
+          summary.functionChecked += 1;
+        }
+      }
+
+      if (item.status === '완료' || item.mergedAt) {
+        summary.merged += 1;
+      }
+
+      return summary;
+    },
+    {
+      total: 0,
+      registered: 0,
+      inProgress: 0,
+      functionChecked: 0,
+      completed: 0,
+      merged: 0,
+    },
+  );
+}
+
+function buildWeeklyPerformanceData(items: PlanItem[], weeks: number): PerformanceChartDatum[] {
+  const today = new Date();
+  const start = startOfLocalDay(addDays(today, -((weeks - 1) * 7)));
+  const keys = Array.from({ length: weeks }, (_, index) => formatLocalDateKey(addDays(start, index * 7)));
+  const buckets = createPerformanceBuckets(keys, (date) => {
+    const weekEnd = addDays(date, 6);
+    return `${date.getMonth() + 1}.${String(date.getDate()).padStart(2, '0')}-${weekEnd.getMonth() + 1}.${String(
+      weekEnd.getDate(),
+    ).padStart(2, '0')}`;
+  });
+
+  items.forEach((item) => {
+    accumulateWeeklyPerformanceCount(buckets, item.createdAt, start, weeks, 'registered');
+    if (item.jangsingProcessingRequired && item.completedAt) {
+      accumulateWeeklyPerformanceCount(buckets, item.completedAt, start, weeks, 'jangsing');
+    }
+    accumulateWeeklyPerformanceCount(buckets, item.completedAt, start, weeks, 'completed');
+    accumulateWeeklyPerformanceCount(buckets, item.mergedAt, start, weeks, 'merged');
+  });
+
+  return keys.map((key) => buckets.get(key) ?? createEmptyPerformanceBucket(key, key));
+}
+
+function createPerformanceBuckets(keys: string[], labelBuilder: (date: Date) => string) {
+  const buckets = new Map<string, PerformanceChartDatum>();
+
+  keys.forEach((key) => {
+    const date = parseDateKey(key);
+    buckets.set(key, createEmptyPerformanceBucket(key, labelBuilder(date)));
+  });
+
+  return buckets;
+}
+
+function createEmptyPerformanceBucket(key: string, label: string): PerformanceChartDatum {
+  void key;
+
+  return {
+    label,
+    registered: 0,
+    jangsing: 0,
+    completed: 0,
+    merged: 0,
+  };
+}
+
+function accumulatePerformanceCount(
+  buckets: Map<string, PerformanceChartDatum>,
+  value: string | null,
+  field: keyof Omit<PerformanceChartDatum, 'label'>,
+) {
+  if (!value) {
+    return;
+  }
+
+  const key = formatLocalDateKey(new Date(value));
+  const bucket = buckets.get(key);
+
+  if (bucket) {
+    bucket[field] += 1;
+  }
+}
+
+function accumulateWeeklyPerformanceCount(
+  buckets: Map<string, PerformanceChartDatum>,
+  value: string | null,
+  start: Date,
+  weeks: number,
+  field: keyof Omit<PerformanceChartDatum, 'label'>,
+) {
+  if (!value) {
+    return;
+  }
+
+  const date = startOfLocalDay(new Date(value));
+  const diffDays = Math.floor((date.getTime() - start.getTime()) / (24 * 60 * 60 * 1000));
+
+  if (diffDays < 0) {
+    return;
+  }
+
+  const weekIndex = Math.floor(diffDays / 7);
+
+  if (weekIndex < 0 || weekIndex >= weeks) {
+    return;
+  }
+
+  const bucketKey = formatLocalDateKey(addDays(start, weekIndex * 7));
+  const bucket = buckets.get(bucketKey);
+
+  if (bucket) {
+    bucket[field] += 1;
+  }
+}
+
+function startOfLocalDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function addDays(date: Date, days: number) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+function formatLocalDateKey(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(
+    2,
+    '0',
+  )}`;
+}
+
+function parseDateKey(key: string) {
+  const [year, month, day] = key.split('-').map(Number);
+  return new Date(year, (month ?? 1) - 1, day ?? 1);
+}
+
+function isCompletedPlanStatus(status: PlanItem['status']) {
+  return status === '작업완료' || status === '릴리즈완료' || status === '완료';
+}
diff --git a/src/features/planBoard/index.ts b/src/features/planBoard/index.ts
new file mode 100755
index 0000000..42c8755
--- /dev/null
+++ b/src/features/planBoard/index.ts
@@ -0,0 +1,14 @@
+export { PlanBoardPage } from './PlanBoardPage';
+export { PlanBoardChartsPage } from './charts';
+export { PlanSchedulePage } from './PlanSchedulePage';
+export { ReleaseReviewPage } from './ReleaseReviewPage';
+export { PLAN_FILTER_STATUSES, PLAN_STATUSES } from './types';
+export type { PlanDraft, PlanFilterStatus, PlanItem, PlanStatus } from './types';
+export {
+  getPlanQuickFilterLabel,
+  isAutomationFailedItem,
+  isReleasePendingMainItem,
+  isWorkingPlanItem,
+  normalizeWorkerStatus,
+  type PlanQuickFilter,
+} from './quickFilters';
diff --git a/src/features/planBoard/noteMasking.ts b/src/features/planBoard/noteMasking.ts
new file mode 100755
index 0000000..9925c61
--- /dev/null
+++ b/src/features/planBoard/noteMasking.ts
@@ -0,0 +1,31 @@
+export function maskNotePreviewByWord(note: string) {
+  const trimmed = note.trim();
+  if (!trimmed) {
+    return '요청 내용이 마스킹되었습니다.';
+  }
+
+  return note
+    .split(/(\s+)/)
+    .map((segment) => {
+      if (!segment || /\s+/.test(segment)) {
+        return segment;
+      }
+
+      if (segment.length === 1) {
+        return '*';
+      }
+
+      const visiblePrefixLength = segment.length >= 4 ? 1 : 0;
+      const visibleSuffixLength = segment.length >= 6 ? 1 : 0;
+      const maxMaskLength = Math.max(1, segment.length - visiblePrefixLength - visibleSuffixLength);
+      const maskLength = Math.min(maxMaskLength, Math.max(1, Math.ceil(segment.length * 0.4)));
+      const maskStart = Math.max(
+        visiblePrefixLength,
+        Math.floor((segment.length - maskLength) / 2),
+      );
+      const maskEnd = Math.min(segment.length - visibleSuffixLength, maskStart + maskLength);
+
+      return `${segment.slice(0, maskStart)}${'*'.repeat(maskEnd - maskStart)}${segment.slice(maskEnd)}`;
+    })
+    .join('');
+}
diff --git a/src/features/planBoard/planBoard.css b/src/features/planBoard/planBoard.css
new file mode 100755
index 0000000..1d74ae7
--- /dev/null
+++ b/src/features/planBoard/planBoard.css
@@ -0,0 +1,893 @@
+.plan-board-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.plan-board-page__overview,
+.plan-board-page__list-card,
+.plan-board-page__chart-card,
+.plan-board-page__editor-card {
+  border: 0;
+  border-radius: 20px;
+  box-shadow: none;
+}
+
+.plan-board-page__split {
+  display: grid;
+  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.plan-board-page__split--stacked {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.plan-board-page__list-card .ant-card-body,
+.plan-board-page__editor-card .ant-card-body,
+.plan-board-page__detail-card .ant-card-body {
+  min-width: 0;
+}
+
+.plan-board-page__detail-actions.ant-space {
+  align-items: center;
+}
+
+.plan-board-page__detail-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 360px;
+  padding: 24px;
+  border-radius: 18px;
+  border: 1px dashed rgba(22, 93, 255, 0.18);
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(238, 244, 255, 0.96) 100%);
+}
+
+.plan-board-page__chart-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  min-width: 0;
+}
+
+.plan-board-page__chart-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px;
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(22, 93, 255, 0.05) 0%, rgba(22, 93, 255, 0.015) 100%),
+    #ffffff;
+  border: 1px solid rgba(22, 93, 255, 0.08);
+}
+
+.plan-board-page__chart-title.ant-typography,
+.plan-board-page__chart-description.ant-typography {
+  margin-bottom: 0;
+}
+
+.plan-board-page__chart-description.ant-typography {
+  margin-top: 4px;
+  color: rgba(24, 34, 48, 0.62);
+}
+
+.plan-board-page__chart-shell {
+  width: 100%;
+  padding: 12px 12px 6px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+}
+
+.plan-board-page__intro.ant-typography {
+  margin: 6px 0 0;
+}
+
+.plan-board-page__auto-refresh-control.ant-space {
+  align-items: center;
+}
+
+.plan-board-page__auto-refresh-button.ant-btn {
+  border-radius: 999px;
+  border-color: rgba(22, 93, 255, 0.18);
+}
+
+.plan-board-page__auto-refresh-button--active.ant-btn {
+  border-color: rgba(34, 197, 94, 0.28);
+  background: linear-gradient(135deg, rgba(240, 253, 244, 0.96), rgba(239, 246, 255, 0.96));
+}
+
+.plan-board-page__auto-refresh-countdown.ant-typography {
+  margin: 0;
+  min-width: 2.75rem;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(34, 197, 94, 0.12);
+  color: #166534;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.plan-board-page__alert {
+  border-radius: 18px;
+}
+
+.plan-board-page__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.plan-board-page__list-filter-bar {
+  margin: 12px 0 16px;
+}
+
+.plan-board-page__list-filter-bar .ant-select {
+  min-width: 150px;
+}
+
+.plan-board-page__list-item {
+  padding: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.plan-board-page__list-item:hover {
+  background: #f8fbff;
+  border-color: rgba(22, 93, 255, 0.12);
+}
+
+.plan-board-page__list-item--active {
+  background: #f5f9ff;
+  border-color: rgba(22, 93, 255, 0.22);
+}
+
+.plan-board-page__list-body {
+  width: 100%;
+  padding: 14px 16px;
+}
+
+.plan-board-page__list-note.ant-typography {
+  margin: 8px 0 10px;
+}
+
+.plan-board-page__list-tags.ant-space {
+  justify-content: flex-end;
+}
+
+.plan-board-page__priority-button.ant-btn {
+  min-width: 40px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.plan-board-page__priority-button--active.ant-btn {
+  box-shadow: 0 10px 20px rgba(22, 93, 255, 0.18);
+}
+
+.plan-board-page__automation-status {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(126, 141, 163, 0.28);
+  background: linear-gradient(135deg, rgba(246, 248, 252, 0.96), rgba(238, 242, 247, 0.88));
+  min-height: 34px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.plan-board-page__automation-status--compact {
+  min-height: 30px;
+  border-radius: 14px;
+}
+
+.plan-board-page__automation-status-fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0.96;
+}
+
+.plan-board-page__automation-status--idle .plan-board-page__automation-status-fill {
+  background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.3));
+}
+
+.plan-board-page__automation-status--active .plan-board-page__automation-status-fill {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.42), rgba(34, 197, 94, 0.2));
+  background-size: 200% 100%;
+  animation: plan-board-status-flow 2.4s linear infinite;
+}
+
+.plan-board-page__automation-status--success .plan-board-page__automation-status-fill {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.34));
+}
+
+.plan-board-page__automation-status--error .plan-board-page__automation-status-fill {
+  background: linear-gradient(90deg, rgba(248, 113, 113, 0.2), rgba(239, 68, 68, 0.36));
+}
+
+.plan-board-page__automation-status-text.ant-typography {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  color: #10233f;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.plan-board-page__automation-status-copy {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: inherit;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  padding: 7px 12px;
+}
+
+.plan-board-page__automation-status-description.ant-typography {
+  margin: 0;
+  color: #10233f;
+  font-size: 11px;
+  line-height: 1.35;
+  white-space: normal;
+}
+
+@keyframes plan-board-status-flow {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
+
+.plan-board-page__form {
+  width: 100%;
+  display: grid;
+  gap: 14px;
+}
+
+.plan-board-page__form > div {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 16px 18px;
+  border: 1px solid rgba(22, 93, 255, 0.1);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 255, 0.94) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.92),
+    0 10px 30px rgba(23, 61, 130, 0.04);
+}
+
+.plan-board-page__action-bar {
+  margin-top: 4px;
+}
+
+.plan-board-page__select {
+  width: 100%;
+}
+
+.plan-board-page__select.ant-select .ant-select-selector {
+  min-height: 42px;
+  border-radius: 12px;
+  border-color: rgba(22, 93, 255, 0.14);
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.plan-board-page__select.ant-select .ant-select-selection-wrap {
+  align-items: center;
+}
+
+.plan-board-page__select.ant-select.ant-select-focused .ant-select-selector,
+.plan-board-page__select.ant-select.ant-select-open .ant-select-selector {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.14);
+}
+
+.plan-board-page__select-popup.ant-select-dropdown {
+  z-index: 1450;
+  padding: 6px;
+  border-radius: 14px;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+}
+
+.plan-board-page__select-popup.ant-select-dropdown .ant-select-item {
+  min-height: 38px;
+  border-radius: 10px;
+}
+
+.plan-board-page__notepad.ant-input {
+  padding: 20px 18px;
+  line-height: 1.85;
+  border-radius: 22px;
+  border: 1px solid rgba(22, 93, 255, 0.1);
+  background:
+    repeating-linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.96) 0,
+      rgba(255, 255, 255, 0.96) 32px,
+      rgba(75, 130, 255, 0.08) 32px,
+      rgba(75, 130, 255, 0.08) 33px
+    );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 18px 40px rgba(23, 61, 130, 0.06);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  resize: vertical;
+}
+
+.plan-board-page__notepad.ant-input:focus,
+.plan-board-page__notepad.ant-input-focused {
+  border-color: rgba(22, 93, 255, 0.24);
+  box-shadow:
+    0 0 0 4px rgba(22, 93, 255, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.82);
+}
+
+.plan-board-page__notepad-frame {
+  width: 100%;
+}
+
+.plan-board-page__notepad-expand-button.ant-btn {
+  color: rgba(71, 98, 130, 0.92);
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 999px;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
+}
+
+.plan-board-page__notepad-expand-button.ant-btn:hover {
+  color: #1d4ed8;
+  background: #ffffff;
+}
+
+.plan-board-page__notepad-frame .ant-input-textarea,
+.plan-board-page__notepad-frame .plan-board-page__notepad.ant-input {
+  width: 100%;
+}
+
+.plan-board-page__readonly-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 40px;
+  margin-top: 8px;
+  padding: 9px 12px;
+  border: 1px solid rgba(22, 93, 255, 0.14);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+}
+
+.plan-board-page__notepad--readonly.ant-input {
+  overflow-y: auto;
+}
+
+.plan-board-page__notepad-toolbar {
+  flex: 0 0 auto;
+}
+
+.plan-board-page__note-modal .ant-modal {
+  max-width: 100vw;
+  margin: 0;
+  padding: 0;
+  top: 0;
+}
+
+.plan-board-page__note-modal .ant-modal-content {
+  min-height: 100dvh;
+  border-radius: 0;
+  overflow: hidden;
+}
+
+.plan-board-page__note-modal .ant-modal-header {
+  padding: 20px 24px 12px;
+}
+
+.plan-board-page__note-modal .ant-modal-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding-inline: 24px;
+}
+
+.plan-board-page__notepad-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1 1 auto;
+  height: calc(100dvh - 88px);
+  min-height: 0;
+  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
+  overflow: hidden;
+}
+
+.plan-board-page__notepad-modal-body .ant-input-textarea {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.plan-board-page__notepad-modal-body .ant-input-textarea textarea {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.plan-board-page__notepad--expanded.ant-input {
+  flex: 1 1 auto;
+  min-height: calc(100dvh - 180px);
+  height: calc(100dvh - 180px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  resize: none;
+}
+
+.plan-board-page__notepad-modal-body .plan-board-page__notepad--expanded.ant-input {
+  min-height: 100%;
+  height: 100%;
+}
+
+.plan-board-page__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1700;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: rgba(11, 23, 57, 0.24);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.plan-board-page__overlay--detail-only {
+  background: #f5f7fb;
+  backdrop-filter: none;
+}
+
+.plan-board-page__overlay-card.ant-card {
+  width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border: none;
+  border-radius: 0;
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.plan-board-page__overlay--detail-only .plan-board-page__overlay-card.ant-card {
+  background: #f5f7fb;
+}
+
+.plan-board-page__overlay-card .ant-card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 14px 0 0;
+  overflow: hidden;
+}
+
+.plan-board-page__overlay-header {
+  flex: 0 0 auto;
+  position: relative;
+  z-index: 2;
+  padding-top: max(14px, env(safe-area-inset-top, 0px));
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(22, 93, 255, 0.08);
+  background: inherit;
+}
+
+.plan-board-page__overlay-title.ant-typography,
+.plan-board-page__viewer-heading.ant-typography {
+  margin: 0;
+}
+
+.plan-board-page__overlay-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 18px calc(env(safe-area-inset-bottom, 0px) + 24px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 960px) {
+  .plan-board-page__split--mobile-detail-only {
+    gap: 0;
+  }
+
+  .plan-board-page__split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .plan-board-page__list-card--mobile-hidden,
+  .plan-board-page__detail-card--mobile-hidden {
+    display: none;
+  }
+
+  .plan-board-page__detail-card--mobile-only.ant-card {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    min-height: 100dvh;
+    border-radius: 0;
+    background: #f5f7fb;
+    overflow: hidden;
+  }
+
+  .plan-board-page__detail-card--mobile-only.ant-card .ant-card-head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding-top: max(0px, env(safe-area-inset-top, 0px));
+    background: inherit;
+  }
+
+  .plan-board-page__detail-card--mobile-only.ant-card .ant-card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .plan-board-page__overlay-card.ant-card {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .plan-board-page__overlay-card .ant-card-body {
+    padding-top: 0;
+  }
+
+  .plan-board-page__overlay-header {
+    padding-inline: 18px;
+  }
+}
+
+.plan-board-page__viewer-pre {
+  margin: 0;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 13px;
+  line-height: 1.65;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.plan-board-page__detail-text {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
+.plan-board-page__detail-text-body.ant-typography {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.plan-board-page__detail-text-body--collapsed.ant-typography {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
+.plan-board-page__detail-text-toggle.ant-btn {
+  flex: none;
+  margin-top: -2px;
+  color: #476282;
+}
+
+.plan-board-page__detail-section {
+  padding: 12px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.plan-board-page__detail-section-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.plan-board-page__detail-section-summary::-webkit-details-marker {
+  display: none;
+}
+
+.plan-board-page__detail-section-body {
+  margin-top: 12px;
+  min-width: 0;
+}
+
+.plan-board-page__checklist.ant-space,
+.plan-board-page__release-summary.ant-space {
+  width: 100%;
+}
+
+.plan-board-page__memo-pre {
+  max-height: min(60vh, 520px);
+}
+
+.plan-board-page__file-tags {
+  margin-top: 8px;
+}
+
+.plan-board-page__viewer-tabs .ant-tabs-content-holder {
+  min-height: 0;
+}
+
+.plan-board-page__viewer-tabs,
+.plan-board-page__viewer-tabs .ant-tabs-content,
+.plan-board-page__viewer-tabs .ant-tabs-tabpane {
+  min-height: 0;
+}
+
+.plan-board-page__viewer-tabs .ant-tabs-tabpane {
+  padding-inline: 0;
+}
+
+.plan-board-page__viewer-tabs .previewer-ui {
+  height: auto;
+}
+
+.plan-board-page__viewer-tabs .previewer-ui__body.previewer-ui__scroll {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+.plan-board-page__viewer-tabs .previewer-ui__editor-body {
+  overflow: visible;
+}
+
+.plan-board-page__viewer-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.plan-board-page__summary-list {
+  margin: 0;
+  padding-left: 20px;
+  line-height: 1.8;
+}
+
+.plan-board-page__evidence-modal .ant-modal {
+  top: 40px;
+  padding-bottom: 24px;
+}
+
+.plan-board-page__evidence-modal .ant-modal-content {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 80px);
+  border-radius: 24px;
+}
+
+.plan-board-page__evidence-modal .ant-modal-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: calc(100vh - 220px);
+  overflow: hidden;
+}
+
+.plan-board-page__evidence-modal-body {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.plan-board-page__evidence-modal-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.plan-board-page__evidence-modal-toolbar {
+  flex: 0 0 auto;
+}
+
+.plan-board-page__evidence-modal-body--expanded {
+  width: 100%;
+}
+
+.plan-board-page__evidence-modal-body .previewer-ui,
+.plan-board-page__evidence-modal-body .codex-diff-previewer,
+.plan-board-page__evidence-modal-body .evidence-attachment-preview-body__previewer,
+.plan-board-page__evidence-modal-body .evidence-attachment-preview-body__frame-wrap,
+.plan-board-page__evidence-modal-body .evidence-attachment-preview-body__media-wrap,
+.plan-board-page__evidence-modal-body .evidence-attachment-preview-body__audio-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.plan-board-page__evidence-modal-body .previewer-ui__body.previewer-ui__scroll,
+.plan-board-page__evidence-modal-body .previewer-ui__pre,
+.plan-board-page__evidence-modal-body .previewer-ui__markdown pre,
+.plan-board-page__evidence-modal-body .codex-diff-previewer__diff-body,
+.plan-board-page__evidence-modal-body .codex-diff-previewer__diff-section--expanded .codex-diff-previewer__diff-body {
+  min-height: 0;
+  max-height: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.plan-board-page__evidence-modal--expanded .ant-modal {
+  max-width: 100vw;
+  top: 0;
+  padding-bottom: 0;
+}
+
+.plan-board-page__evidence-modal--expanded .ant-modal-content {
+  min-height: 100vh;
+  border-radius: 0;
+}
+
+.plan-board-page__evidence-modal--expanded .ant-modal-body {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0;
+  padding-bottom: 0;
+  min-height: calc(100vh - 120px);
+  overflow: hidden;
+}
+
+.plan-board-page__evidence-modal--expanded .plan-board-page__evidence-modal-shell {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.plan-board-page__evidence-modal--expanded .plan-board-page__evidence-modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.plan-board-page__evidence-modal--expanded .evidence-attachment-preview-body__frame-wrap {
+  height: calc(100vh - 140px);
+  min-height: calc(100vh - 140px);
+  border-radius: 0;
+  border-inline: 0;
+}
+
+.plan-board-page__evidence-modal--expanded .evidence-attachment-preview-body__image {
+  max-height: calc(100vh - 140px);
+  border-radius: 0;
+  border-inline: 0;
+}
+
+.plan-board-page__overlay .ant-input,
+.plan-board-page__overlay .ant-input-affix-wrapper,
+.plan-board-page__overlay .ant-input-textarea textarea {
+  font-size: 16px;
+}
+
+@media (max-width: 768px) {
+  .plan-board-page__chart-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .plan-board-page__chart-panel {
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  .plan-board-page__overlay-card.ant-card {
+    width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+
+  .plan-board-page__detail-card--mobile-only.ant-card {
+    min-height: 100dvh;
+  }
+
+  .plan-board-page__form {
+    gap: 12px;
+  }
+
+  .plan-board-page__form > div {
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  .plan-board-page__note-modal .ant-modal-header {
+    padding: 16px 18px 10px;
+  }
+
+  .plan-board-page__note-modal .ant-modal-body {
+    padding-inline: 18px;
+  }
+
+  .plan-board-page__notepad-modal-body {
+    min-height: calc(100dvh - 76px);
+    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
+  }
+
+  .plan-board-page__overlay-card .ant-card-body {
+    padding: 14px 14px 18px;
+  }
+
+  .plan-board-page__detail-card--mobile-only.ant-card .ant-card-head {
+    padding-inline: 14px;
+  }
+
+  .plan-board-page__detail-card--mobile-only.ant-card .ant-card-body {
+    padding: 14px 14px max(18px, env(safe-area-inset-bottom, 0px));
+  }
+
+  .plan-board-page__readonly-field {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 960px) {
+  .plan-board-page__split {
+    grid-template-columns: 1fr;
+  }
+
+  .plan-board-page__list-card--mobile-hidden {
+    display: none;
+  }
+
+  .plan-board-page__detail-card.plan-board-page__detail-card--mobile-hidden {
+    display: none;
+  }
+}
diff --git a/src/features/planBoard/planSchedule.css b/src/features/planBoard/planSchedule.css
new file mode 100755
index 0000000..5530829
--- /dev/null
+++ b/src/features/planBoard/planSchedule.css
@@ -0,0 +1,268 @@
+.plan-schedule-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.plan-schedule-page__overview,
+.plan-schedule-page__list-card,
+.plan-schedule-page__editor-card {
+  border: 0;
+  border-radius: 20px;
+  box-shadow: none;
+}
+
+.plan-schedule-page__split {
+  display: grid;
+  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.plan-schedule-page__split--stacked {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.plan-schedule-page__list-card .ant-card-body,
+.plan-schedule-page__editor-card .ant-card-body,
+.plan-schedule-page__detail-card .ant-card-body {
+  min-width: 0;
+}
+
+.plan-schedule-page__detail-actions.ant-space {
+  align-items: center;
+}
+
+.plan-schedule-page__detail-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 360px;
+  padding: 24px;
+  border-radius: 18px;
+  border: 1px dashed rgba(22, 93, 255, 0.18);
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(238, 244, 255, 0.96) 100%);
+}
+
+.plan-schedule-page__intro.ant-typography {
+  margin: 6px 0 0;
+}
+
+.plan-schedule-page__alert {
+  border-radius: 18px;
+}
+
+.plan-schedule-page__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.plan-schedule-page__list-item {
+  padding: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.plan-schedule-page__list-item:hover {
+  background: #f8fbff;
+  border-color: rgba(22, 93, 255, 0.12);
+}
+
+.plan-schedule-page__list-item--active {
+  background: #f5f9ff;
+  border-color: rgba(22, 93, 255, 0.22);
+}
+
+.plan-schedule-page__list-body {
+  width: 100%;
+  padding: 14px 16px;
+}
+
+.plan-schedule-page__list-note.ant-typography {
+  margin: 8px 0 10px;
+}
+
+.plan-schedule-page__form {
+  width: 100%;
+  display: grid;
+  gap: 14px;
+}
+
+.plan-schedule-page__form > div {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 16px 18px;
+  border: 1px solid rgba(22, 93, 255, 0.1);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 255, 0.94) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.92),
+    0 10px 30px rgba(23, 61, 130, 0.04);
+}
+
+.plan-schedule-page__select {
+  width: 100%;
+}
+
+.plan-schedule-page__select.ant-select .ant-select-selector {
+  min-height: 42px;
+  border-radius: 12px;
+  border-color: rgba(22, 93, 255, 0.14);
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.plan-schedule-page__select.ant-select .ant-select-selection-wrap {
+  align-items: center;
+}
+
+.plan-schedule-page__select.ant-select.ant-select-focused .ant-select-selector,
+.plan-schedule-page__select.ant-select.ant-select-open .ant-select-selector {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.14);
+}
+
+.plan-schedule-page__select-popup.ant-select-dropdown {
+  z-index: 1450;
+  padding: 6px;
+  border-radius: 14px;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+}
+
+.plan-schedule-page__select-popup.ant-select-dropdown .ant-select-item {
+  min-height: 38px;
+  border-radius: 10px;
+}
+
+.plan-schedule-page__notepad.ant-input {
+  padding: 20px 18px;
+  line-height: 1.85;
+  border-radius: 22px;
+  border: 1px solid rgba(22, 93, 255, 0.1);
+  background:
+    repeating-linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.96) 0,
+      rgba(255, 255, 255, 0.96) 32px,
+      rgba(75, 130, 255, 0.08) 32px,
+      rgba(75, 130, 255, 0.08) 33px
+    );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 18px 40px rgba(23, 61, 130, 0.06);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  resize: vertical;
+}
+
+.plan-schedule-page__notepad.ant-input:focus,
+.plan-schedule-page__notepad.ant-input-focused {
+  border-color: rgba(22, 93, 255, 0.24);
+  box-shadow:
+    0 0 0 4px rgba(22, 93, 255, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.82);
+}
+
+.plan-schedule-page__notepad-frame {
+  width: 100%;
+}
+
+.plan-schedule-page__notepad-frame .ant-input-textarea,
+.plan-schedule-page__notepad-frame .plan-schedule-page__notepad.ant-input {
+  width: 100%;
+}
+
+.plan-schedule-page__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: rgba(11, 23, 57, 0.24);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.plan-schedule-page__overlay-card.ant-card {
+  width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border: none;
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.plan-schedule-page__overlay-card .ant-card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 14px 0 0;
+  overflow: hidden;
+}
+
+.plan-schedule-page__overlay-header {
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(22, 93, 255, 0.08);
+}
+
+.plan-schedule-page__overlay-title.ant-typography {
+  margin: 0;
+}
+
+.plan-schedule-page__overlay-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 18px calc(env(safe-area-inset-bottom, 0px) + 24px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 960px) {
+  .plan-schedule-page__split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .plan-schedule-page__detail-card {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .plan-schedule-page__overlay-card.ant-card {
+    width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+
+  .plan-schedule-page__form {
+    gap: 12px;
+  }
+
+  .plan-schedule-page__form > div {
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  .plan-schedule-page__overlay-card .ant-card-body {
+    padding: 14px 14px 18px;
+  }
+}
diff --git a/src/features/planBoard/quickFilters.ts b/src/features/planBoard/quickFilters.ts
new file mode 100755
index 0000000..3112eab
--- /dev/null
+++ b/src/features/planBoard/quickFilters.ts
@@ -0,0 +1,49 @@
+import type { PlanItem } from './types';
+
+const MAIN_PENDING_WORKER_STATUSES = new Set(['main반영대기', 'main반영중', 'main반영실패']);
+const AUTOMATION_FAILURE_WORKER_STATUSES = new Set([
+  '브랜치실패',
+  '자동작업실패',
+  'release반영실패',
+  'main반영실패',
+]);
+
+export type PlanQuickFilter = 'working' | 'release-pending-main' | 'automation-failed';
+
+export function isWorkingPlanItem(item: Pick<PlanItem, 'status'>) {
+  return item.status === '작업중';
+}
+
+export function normalizeWorkerStatus(workerStatus: string | null) {
+  return workerStatus?.replace(/\s+/g, '') ?? '';
+}
+
+export function isReleasePendingMainItem(item: Pick<PlanItem, 'status' | 'workerStatus'>) {
+  const normalizedWorkerStatus = normalizeWorkerStatus(item.workerStatus);
+
+  if (MAIN_PENDING_WORKER_STATUSES.has(normalizedWorkerStatus)) {
+    return true;
+  }
+
+  return item.status === '릴리즈완료';
+}
+
+export function isAutomationFailedItem(item: Pick<PlanItem, 'workerStatus'>) {
+  return AUTOMATION_FAILURE_WORKER_STATUSES.has(normalizeWorkerStatus(item.workerStatus));
+}
+
+export function getPlanQuickFilterLabel(filter: PlanQuickFilter | null) {
+  if (filter === 'working') {
+    return '현재 작업중';
+  }
+
+  if (filter === 'release-pending-main') {
+    return '현재 release 상태';
+  }
+
+  if (filter === 'automation-failed') {
+    return '현재 자동화 실패';
+  }
+
+  return null;
+}
diff --git a/src/features/planBoard/types.ts b/src/features/planBoard/types.ts
new file mode 100755
index 0000000..df27333
--- /dev/null
+++ b/src/features/planBoard/types.ts
@@ -0,0 +1,145 @@
+export const PLAN_STATUSES = ['등록', '작업중', '작업완료', '릴리즈완료', '완료'] as const;
+export const PLAN_FILTER_STATUSES = ['all', 'in-progress', 'done', 'error'] as const;
+export const PLAN_AUTOMATION_TYPES = ['none', 'plan', 'command_execution', 'non_source_work', 'auto_worker'] as const;
+
+export type PlanStatus = (typeof PLAN_STATUSES)[number];
+export type PlanFilterStatus = (typeof PLAN_FILTER_STATUSES)[number];
+export type PlanAutomationType = (typeof PLAN_AUTOMATION_TYPES)[number];
+export type PlanActionType =
+  | 'start-work'
+  | 'complete-development'
+  | 'retry-branch'
+  | 'retry-work'
+  | 'retry-merge'
+  | 'cancel-release'
+  | 'request-main-merge';
+
+export type PlanIssueHistory = {
+  id: number;
+  planItemId: number;
+  issueTag: string;
+  message: string;
+  actionNote: string | null;
+  resolved: boolean;
+  resolvedAt: string | null;
+  createdAt: string;
+};
+
+export type PlanActionHistory = {
+  id: number;
+  planItemId: number;
+  actionType: string;
+  note: string;
+  createdAt: string;
+};
+
+export type PlanSourceWorkHistory = {
+  id: number;
+  planItemId: number;
+  summary: string;
+  branchName: string;
+  commitHash: string | null;
+  previewUrl: string | null;
+  changedFiles: string[];
+  commandLog: string | null;
+  diffText: string | null;
+  sourceFiles: PlanSourceFileSnapshot[];
+  createdAt: string;
+};
+
+export type PlanSourceFileSnapshotStatus = 'added' | 'modified' | 'deleted' | 'renamed' | 'binary' | 'unknown';
+
+export type PlanSourceFileSnapshot = {
+  path: string;
+  previousPath: string | null;
+  status: PlanSourceFileSnapshotStatus;
+  language: string;
+  content: string;
+};
+
+export const PLAN_RELEASE_REVIEW_STATUSES = ['pending', 'reviewing', 'approved', 'changes-requested'] as const;
+
+export type PlanReleaseReviewStatus = (typeof PLAN_RELEASE_REVIEW_STATUSES)[number];
+
+export type PlanReleaseReviewMetadata = {
+  summary?: string;
+  pageSelectionIds?: string[];
+  checkedPageSelectionIds?: string[];
+  docIds?: string[];
+  componentIds?: string[];
+  widgetIds?: string[];
+};
+
+export type PlanReleaseReview = {
+  id: number | null;
+  planItemId: number;
+  status: PlanReleaseReviewStatus;
+  reviewNote: string;
+  checkedByClientId: string | null;
+  checkedByNickname: string | null;
+  checkedAt: string | null;
+  metadata: PlanReleaseReviewMetadata;
+  createdAt: string | null;
+  updatedAt: string | null;
+};
+
+export type PlanReleaseReviewBoardItem = {
+  planItem: PlanItem;
+  review: PlanReleaseReview;
+  latestSourceWork: PlanSourceWorkHistory | null;
+};
+
+export type PlanAutomationUsageSnapshot = {
+  tokenTotals: {
+    total: number;
+    input: number;
+    output: number;
+    cached: number;
+    reasoning: number;
+  };
+  totalTokens: number;
+  retryCount: number;
+  sourceWorkCount: number;
+  processingStartedAt: string | null;
+  processingEndedAt: string | null;
+  processingEndedAtSource: string | null;
+  processingDurationSeconds: number | null;
+};
+
+export type PlanItem = {
+  id: number;
+  workId: string;
+  note: string;
+  automationType: PlanAutomationType;
+  releaseReviewNote: string;
+  noteMasked?: boolean;
+  status: PlanStatus;
+  jangsingProcessingRequired: boolean;
+  autoDeployToMain: boolean;
+  repeatRequestEnabled: boolean;
+  repeatIntervalMinutes: number;
+  assignedBranch: string | null;
+  releaseTarget: string | null;
+  workerStatus: string | null;
+  lastError: string | null;
+  issueTags: string[];
+  hasOpenIssues: boolean;
+  startedAt: string | null;
+  completedAt: string | null;
+  mergedAt: string | null;
+  usageSnapshot: PlanAutomationUsageSnapshot | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type PlanDraft = {
+  id: number | null;
+  workId: string;
+  note: string;
+  automationType: PlanAutomationType;
+  status: PlanStatus;
+  jangsingProcessingRequired: boolean;
+  autoDeployToMain: boolean;
+  repeatRequestEnabled: boolean;
+  repeatIntervalMinutes: number;
+};
diff --git a/src/features/serverCommand/ServerCommandPage.tsx b/src/features/serverCommand/ServerCommandPage.tsx
new file mode 100755
index 0000000..ba57847
--- /dev/null
+++ b/src/features/serverCommand/ServerCommandPage.tsx
@@ -0,0 +1,438 @@
+import { CopyOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, Col, Descriptions, Empty, Row, Space, Statistic, Tag, Typography, message } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { useTokenAccess } from '../../app/main/tokenAccess';
+import { DataStatePanel } from '../../components/dataStatePanel';
+import { copyText } from '../../app/main/mainChatPanel';
+import { fetchServerCommands, restartServerCommand } from './api';
+import type { ServerCommandItem, ServerCommandKey } from './types';
+import './serverCommand.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+type RestartErrorInfo = {
+  title: string;
+  detail: string;
+  missingScriptPath: string | null;
+};
+
+type LastActionInfo = {
+  output: string | null;
+  executedAt: string;
+  restartState: 'completed' | 'accepted';
+};
+
+function formatDateTime(value: string | null | undefined) {
+  if (!value) {
+    return '-';
+  }
+
+  return new Date(value).toLocaleString('ko-KR', {
+    timeZone: 'Asia/Seoul',
+  });
+}
+
+function formatResponseTime(value: number | null | undefined) {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return '-';
+  }
+
+  return `${Math.max(0, Math.round(value))}ms`;
+}
+
+function formatStatusCode(value: number | null | undefined) {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return '-';
+  }
+
+  return `${value}`;
+}
+
+function formatContentType(value: string | null | undefined) {
+  return value?.trim() || '-';
+}
+
+function resolveHostLabel(value: string | null | undefined) {
+  if (!value) {
+    return '내부 전용';
+  }
+
+  try {
+    return new URL(value).host;
+  } catch {
+    return value;
+  }
+}
+
+function resolveAvailabilityTag(item: ServerCommandItem) {
+  if (item.availability === 'online') {
+    return <Tag color="success">ONLINE</Tag>;
+  }
+
+  if (item.availability === 'degraded') {
+    return <Tag color="warning">DEGRADED</Tag>;
+  }
+
+  return <Tag color="error">OFFLINE</Tag>;
+}
+
+function buildRestartErrorInfo(targetLabel: string, detail: string): RestartErrorInfo {
+  const missingScriptMatch = detail.match(/cannot open\s+([^\n:]+\.sh)\s*:\s*No such file/i);
+
+  if (missingScriptMatch?.[1]) {
+    const missingScriptPath = missingScriptMatch[1].trim();
+
+    return {
+      title: `${targetLabel} 재기동 실패`,
+      detail: `재기동 스크립트 파일이 서버에 없습니다.\n배치 경로: ${missingScriptPath}\n\n원본 오류:\n${detail}`,
+      missingScriptPath,
+    };
+  }
+
+  return {
+    title: `${targetLabel} 재기동 실패`,
+    detail,
+    missingScriptPath: null,
+  };
+}
+
+export function ServerCommandPage() {
+  const { hasAccess } = useTokenAccess();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [items, setItems] = useState<ServerCommandItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [restartingKey, setRestartingKey] = useState<ServerCommandKey | null>(null);
+  const [restartErrorInfo, setRestartErrorInfo] = useState<RestartErrorInfo | null>(null);
+  const [copyingRestartError, setCopyingRestartError] = useState(false);
+  const [lastActionByKey, setLastActionByKey] = useState<Record<ServerCommandKey, LastActionInfo>>({
+    test: { output: null, executedAt: '', restartState: 'completed' },
+    rel: { output: null, executedAt: '', restartState: 'completed' },
+    'work-server': { output: null, executedAt: '', restartState: 'completed' },
+    'command-runner': { output: null, executedAt: '', restartState: 'completed' },
+  });
+
+  const loadItems = async () => {
+    setLoading(true);
+    setErrorMessage(null);
+
+    try {
+      const nextItems = await fetchServerCommands();
+      setItems(nextItems);
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : '서버 정보를 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!hasAccess) {
+      setItems([]);
+      setLoading(false);
+      setErrorMessage(null);
+      return;
+    }
+
+    void loadItems();
+  }, [hasAccess]);
+
+  const summary = useMemo(() => {
+    return items.reduce(
+      (result, item) => {
+        result.total += 1;
+        result[item.availability] += 1;
+        return result;
+      },
+      { total: 0, online: 0, degraded: 0, offline: 0 },
+    );
+  }, [items]);
+
+  const handleRestart = async (key: ServerCommandKey) => {
+    setRestartingKey(key);
+    setRestartErrorInfo(null);
+
+    try {
+      const result = await restartServerCommand(key);
+      setItems((previous) => previous.map((item) => (item.key === result.item.key ? result.item : item)));
+      setLastActionByKey((previous) => ({
+        ...previous,
+        [result.item.key]: {
+          output: result.commandOutput,
+          executedAt: new Date().toISOString(),
+          restartState: result.restartState,
+        },
+      }));
+      messageApi.success(
+        result.restartState === 'accepted' ? `${result.item.label} 재기동 요청 완료` : `${result.item.label} 재기동 완료`,
+      );
+    } catch (error) {
+      const targetLabel = items.find((item) => item.key === key)?.label ?? key.toUpperCase();
+      const detail = error instanceof Error ? error.message : '서버 재기동에 실패했습니다.';
+      setRestartErrorInfo(buildRestartErrorInfo(targetLabel, detail));
+    } finally {
+      setRestartingKey(null);
+    }
+  };
+
+  const handleCopyRestartError = async () => {
+    if (!restartErrorInfo || copyingRestartError) {
+      return;
+    }
+
+    setCopyingRestartError(true);
+
+    try {
+      await copyText(`${restartErrorInfo.title}\n${restartErrorInfo.detail}`);
+      messageApi.success('에러 메시지를 복사했습니다.');
+    } catch {
+      messageApi.error('에러 메시지 복사에 실패했습니다.');
+    } finally {
+      setCopyingRestartError(false);
+    }
+  };
+
+  if (!hasAccess) {
+    return (
+      <Card className="server-command-page__card" bordered={false}>
+        <Paragraph className="app-main-copy">
+          토큰 등록 사용자만 Server Command 메뉴를 사용할 수 있습니다.
+        </Paragraph>
+      </Card>
+    );
+  }
+
+  return (
+    <Space direction="vertical" size={16} className="server-command-page">
+      {contextHolder}
+      <Card className="server-command-page__card" bordered={false}>
+        <Space direction="vertical" size={8}>
+          <Title level={4} className="server-command-page__title">
+            Server Command
+          </Title>
+          <Paragraph className="server-command-page__copy">
+            TEST, REL, WORK-SERVER, COMMAND-RUNNER 상태를 확인하고 허용된 재기동 명령만 실행합니다.
+          </Paragraph>
+          <Row gutter={[12, 12]} className="server-command-page__summary-grid">
+            <Col xs={12} md={6}>
+              <Statistic title="전체" value={summary.total} />
+            </Col>
+            <Col xs={12} md={6}>
+              <Statistic title="ONLINE" value={summary.online} valueStyle={{ color: '#389e0d' }} />
+            </Col>
+            <Col xs={12} md={6}>
+              <Statistic title="DEGRADED" value={summary.degraded} valueStyle={{ color: '#d48806' }} />
+            </Col>
+            <Col xs={12} md={6}>
+              <Statistic title="OFFLINE" value={summary.offline} valueStyle={{ color: '#cf1322' }} />
+            </Col>
+          </Row>
+          <Space wrap>
+            <Button icon={<ReloadOutlined />} onClick={() => void loadItems()} loading={loading}>
+              새로고침
+            </Button>
+          </Space>
+        </Space>
+      </Card>
+
+      {restartErrorInfo ? (
+        <Alert
+          showIcon
+          type="error"
+          message="재기동 에러"
+          description={
+            <Space direction="vertical" size={8} className="server-command-page__alert-body">
+              <Text strong>{restartErrorInfo.title}</Text>
+              {restartErrorInfo.missingScriptPath ? (
+                <Text code className="server-command-page__alert-code">
+                  {restartErrorInfo.missingScriptPath}
+                </Text>
+              ) : null}
+              <span className="server-command-page__alert-text">{restartErrorInfo.detail}</span>
+            </Space>
+          }
+          action={
+            <Button
+              type="text"
+              size="small"
+              icon={<CopyOutlined />}
+              loading={copyingRestartError}
+              aria-label="에러 메시지 복사"
+              onClick={() => {
+                void handleCopyRestartError();
+              }}
+            />
+          }
+        />
+      ) : null}
+
+      {loading ? (
+        <DataStatePanel state="loading" title="서버 상태를 확인하는 중입니다." />
+      ) : errorMessage ? (
+        <DataStatePanel
+          state="error"
+          title="서버 명령 메뉴를 불러오지 못했습니다."
+          description={errorMessage}
+          actions={
+            <Button type="primary" onClick={() => void loadItems()}>
+              다시 시도
+            </Button>
+          }
+        />
+      ) : items.length === 0 ? (
+        <Card className="server-command-page__card" bordered={false}>
+          <Empty description="표시할 서버가 없습니다." />
+        </Card>
+      ) : (
+        <div className="server-command-page__grid">
+          {items.map((item) => (
+            <Card
+              key={item.key}
+              className="server-command-page__server-card"
+              bordered={false}
+              title={
+                <Space size={8} wrap className="server-command-page__title-row">
+                  <Title level={5} className="server-command-page__server-title">
+                    {item.label}
+                  </Title>
+                  {resolveAvailabilityTag(item)}
+                  {item.composeStatus ? <Tag color="blue">{item.composeStatus}</Tag> : null}
+                </Space>
+              }
+              extra={
+                <Button
+                  className="server-command-page__restart-button"
+                  type="primary"
+                  icon={<ReloadOutlined />}
+                  loading={restartingKey === item.key}
+                  onClick={() => {
+                    void handleRestart(item.key);
+                  }}
+                >
+                  {item.label} 재기동
+                </Button>
+              }
+            >
+              <Space direction="vertical" size={14} style={{ width: '100%' }}>
+                <Paragraph className="server-command-page__summary">{item.summary}</Paragraph>
+                <Descriptions
+                  size="small"
+                  column={1}
+                  className="server-command-page__meta"
+                  items={[
+                    {
+                      key: 'environment',
+                      label: '환경',
+                      children: item.environment,
+                    },
+                    {
+                      key: 'started-at',
+                      label: '시작일시',
+                      children: formatDateTime(item.startedAt),
+                    },
+                    {
+                      key: 'response-time',
+                      label: '응답시간',
+                      children: formatResponseTime(item.responseTimeMs),
+                    },
+                    {
+                      key: 'http-status',
+                      label: 'HTTP',
+                      children: formatStatusCode(item.httpStatus),
+                    },
+                    {
+                      key: 'checked-at',
+                      label: '확인시각',
+                      children: formatDateTime(item.checkedAt),
+                    },
+                    {
+                      key: 'content-type',
+                      label: 'Content-Type',
+                      children: formatContentType(item.contentType),
+                    },
+                    {
+                      key: 'service',
+                      label: '서비스',
+                      children: item.serviceName,
+                    },
+                    {
+                      key: 'compose-file',
+                      label: 'Compose',
+                      children: item.composeFile,
+                    },
+                    {
+                      key: 'command-script',
+                      label: 'Script',
+                      children: item.commandScript,
+                    },
+                    {
+                      key: 'working-directory',
+                      label: '작업경로',
+                      children: item.commandWorkingDirectory,
+                    },
+                    {
+                      key: 'host',
+                      label: '호스트',
+                      children: resolveHostLabel(item.publicUrl ?? item.checkUrl),
+                    },
+                    {
+                      key: 'public-url',
+                      label: 'URL',
+                      children: item.publicUrl ? (
+                        <Typography.Link href={item.publicUrl} target="_blank" rel="noreferrer">
+                          {item.publicUrl}
+                        </Typography.Link>
+                      ) : (
+                        <Text type="secondary">내부 전용</Text>
+                      ),
+                    },
+                    {
+                      key: 'check-url',
+                      label: '체크',
+                      children: item.checkUrl,
+                    },
+                  ]}
+                />
+
+                {item.composeDetails ? (
+                  <Text type="secondary" className="server-command-page__preview">
+                    {item.composeDetails}
+                  </Text>
+                ) : null}
+
+                {item.responsePreview ? (
+                  <Text type="secondary" className="server-command-page__preview">
+                    {item.responsePreview}
+                  </Text>
+                ) : null}
+
+                {item.errorMessage ? (
+                  <Text type="danger" className="server-command-page__preview">
+                    {item.errorMessage}
+                  </Text>
+                ) : null}
+
+                <Text code className="server-command-page__command">
+                  {item.lastCommand}
+                </Text>
+
+                {lastActionByKey[item.key]?.executedAt ? (
+                  <Text type="secondary" className="server-command-page__preview">
+                    {lastActionByKey[item.key].restartState === 'accepted' ? '최근 재기동 요청' : '최근 재기동 완료'}:{' '}
+                    {formatDateTime(lastActionByKey[item.key].executedAt)}
+                  </Text>
+                ) : null}
+
+                {lastActionByKey[item.key]?.output ? (
+                  <Text className="server-command-page__command">
+                    {lastActionByKey[item.key].output}
+                  </Text>
+                ) : null}
+              </Space>
+            </Card>
+          ))}
+        </div>
+      )}
+    </Space>
+  );
+}
diff --git a/src/features/serverCommand/api.ts b/src/features/serverCommand/api.ts
new file mode 100755
index 0000000..9d4e2bd
--- /dev/null
+++ b/src/features/serverCommand/api.ts
@@ -0,0 +1,251 @@
+import { appendClientIdHeader } from '../../app/main/clientIdentity';
+import { getRegisteredAccessToken, isAllowedRegistrationToken } from '../../app/main/tokenAccess';
+import type { ServerCommandActionResult, ServerCommandItem, ServerCommandKey } from './types';
+
+class ServerCommandApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'ServerCommandApiError';
+    this.status = status;
+  }
+}
+
+function resolveServerCommandApiBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function resolveServerCommandFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const SERVER_COMMAND_API_BASE_URL = resolveServerCommandApiBaseUrl();
+const SERVER_COMMAND_API_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && SERVER_COMMAND_API_BASE_URL === '/api'
+    ? resolveServerCommandFallbackBaseUrl()
+    : null;
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit) {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init?.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = globalThis.setTimeout(() => controller.abort(), 8000);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const token = getRegisteredAccessToken();
+  if (!isAllowedRegistrationToken(token)) {
+    throw new ServerCommandApiError('권한 토큰 등록 후에만 Work Server API를 호출할 수 있습니다.', 403);
+  }
+
+  if (token && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', token);
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    globalThis.clearTimeout(timeoutId);
+
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new ServerCommandApiError('서버 명령 응답이 지연됩니다.', 408);
+    }
+
+    throw error;
+  }
+
+  globalThis.clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      throw new ServerCommandApiError(payload.message || '서버 명령 요청에 실패했습니다.', response.status);
+    } catch {
+      throw new ServerCommandApiError(text || '서버 명령 요청에 실패했습니다.', response.status);
+    }
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(SERVER_COMMAND_API_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      SERVER_COMMAND_API_FALLBACK_BASE_URL &&
+      SERVER_COMMAND_API_FALLBACK_BASE_URL !== SERVER_COMMAND_API_BASE_URL &&
+      (error instanceof ServerCommandApiError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && /404|Failed to fetch|NetworkError/i.test(error.message));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(SERVER_COMMAND_API_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+function normalizeServerCommandItem(value: unknown): ServerCommandItem {
+  if (!value || typeof value !== 'object') {
+    throw new Error('서버 명령 항목 형식이 올바르지 않습니다.');
+  }
+
+  const item = value as Partial<Record<keyof ServerCommandItem, unknown>>;
+  const key = typeof item.key === 'string' ? item.key : '';
+
+  if (key !== 'test' && key !== 'rel' && key !== 'work-server' && key !== 'command-runner') {
+    throw new Error('지원하지 않는 서버 키입니다.');
+  }
+
+  const availability =
+    item.availability === 'online' || item.availability === 'degraded' || item.availability === 'offline'
+      ? item.availability
+      : 'offline';
+
+  return {
+    key,
+    label: typeof item.label === 'string' ? item.label : key.toUpperCase(),
+    summary: typeof item.summary === 'string' ? item.summary : '',
+    environment: typeof item.environment === 'string' ? item.environment : '-',
+    publicUrl: typeof item.publicUrl === 'string' ? item.publicUrl : null,
+    checkUrl: typeof item.checkUrl === 'string' ? item.checkUrl : '-',
+    composeFile: typeof item.composeFile === 'string' ? item.composeFile : '-',
+    serviceName: typeof item.serviceName === 'string' ? item.serviceName : '-',
+    availability,
+    httpStatus: typeof item.httpStatus === 'number' ? item.httpStatus : null,
+    contentType: typeof item.contentType === 'string' ? item.contentType : null,
+    responsePreview: typeof item.responsePreview === 'string' ? item.responsePreview : null,
+    checkedAt: typeof item.checkedAt === 'string' ? item.checkedAt : new Date(0).toISOString(),
+    startedAt: typeof item.startedAt === 'string' ? item.startedAt : null,
+    runningVersion: typeof item.runningVersion === 'string' ? item.runningVersion : null,
+    runningBuiltAt: typeof item.runningBuiltAt === 'string' ? item.runningBuiltAt : null,
+    latestVersion: typeof item.latestVersion === 'string' ? item.latestVersion : null,
+    latestBuiltAt: typeof item.latestBuiltAt === 'string' ? item.latestBuiltAt : null,
+    latestSourceChangeAt: typeof item.latestSourceChangeAt === 'string' ? item.latestSourceChangeAt : null,
+    latestSourceChangePath: typeof item.latestSourceChangePath === 'string' ? item.latestSourceChangePath : null,
+    buildRequired: typeof item.buildRequired === 'boolean' ? item.buildRequired : false,
+    updateAvailable: typeof item.updateAvailable === 'boolean' ? item.updateAvailable : false,
+    updateSummary: typeof item.updateSummary === 'string' ? item.updateSummary : null,
+    responseTimeMs: typeof item.responseTimeMs === 'number' ? item.responseTimeMs : null,
+    composeStatus: typeof item.composeStatus === 'string' ? item.composeStatus : null,
+    composeDetails: typeof item.composeDetails === 'string' ? item.composeDetails : null,
+    lastCommand: typeof item.lastCommand === 'string' ? item.lastCommand : '-',
+    commandScript: typeof item.commandScript === 'string' ? item.commandScript : '-',
+    commandWorkingDirectory: typeof item.commandWorkingDirectory === 'string' ? item.commandWorkingDirectory : '-',
+    errorMessage: typeof item.errorMessage === 'string' ? item.errorMessage : null,
+  };
+}
+
+function extractServerCommandItems(response: unknown) {
+  if (Array.isArray(response)) {
+    return response.map((item) => normalizeServerCommandItem(item));
+  }
+
+  if (!response || typeof response !== 'object') {
+    throw new Error('서버 명령 응답 형식이 올바르지 않습니다.');
+  }
+
+  const payload = response as {
+    items?: unknown;
+    data?: { items?: unknown } | unknown[];
+  };
+  const items = Array.isArray(payload.items)
+    ? payload.items
+    : payload.data && typeof payload.data === 'object' && !Array.isArray(payload.data) && Array.isArray(payload.data.items)
+      ? payload.data.items
+      : Array.isArray(payload.data)
+        ? payload.data
+        : null;
+
+  if (!items) {
+    throw new Error('서버 명령 목록을 읽지 못했습니다.');
+  }
+
+  return items.map((item) => normalizeServerCommandItem(item));
+}
+
+function extractServerCommandActionResult(response: unknown): ServerCommandActionResult {
+  if (!response || typeof response !== 'object') {
+    throw new Error('서버 재기동 응답 형식이 올바르지 않습니다.');
+  }
+
+  const payload = response as {
+    item?: unknown;
+    server?: unknown;
+    commandOutput?: unknown;
+    output?: unknown;
+    restartState?: unknown;
+    data?: {
+      item?: unknown;
+      server?: unknown;
+      commandOutput?: unknown;
+      output?: unknown;
+      restartState?: unknown;
+    };
+  };
+  const nestedData = payload.data && typeof payload.data === 'object' && !Array.isArray(payload.data) ? payload.data : null;
+  const item = payload.item ?? payload.server ?? nestedData?.item ?? nestedData?.server;
+
+  if (!item) {
+    throw new Error('재기동 결과를 읽지 못했습니다.');
+  }
+
+  const commandOutput = payload.commandOutput ?? payload.output ?? nestedData?.commandOutput ?? nestedData?.output;
+  const restartState = payload.restartState ?? nestedData?.restartState;
+
+  return {
+    item: normalizeServerCommandItem(item),
+    commandOutput: typeof commandOutput === 'string' ? commandOutput : null,
+    restartState: restartState === 'accepted' ? 'accepted' : 'completed',
+  };
+}
+
+export async function fetchServerCommands() {
+  const response = await request<unknown>('/server-commands');
+  return extractServerCommandItems(response);
+}
+
+export async function restartServerCommand(key: ServerCommandKey) {
+  const response = await request<unknown>(`/server-commands/${key}/actions/restart`, {
+    method: 'POST',
+    body: JSON.stringify({}),
+  });
+
+  return extractServerCommandActionResult(response);
+}
diff --git a/src/features/serverCommand/index.ts b/src/features/serverCommand/index.ts
new file mode 100755
index 0000000..ba974e3
--- /dev/null
+++ b/src/features/serverCommand/index.ts
@@ -0,0 +1 @@
+export { ServerCommandPage } from './ServerCommandPage';
diff --git a/src/features/serverCommand/serverCommand.css b/src/features/serverCommand/serverCommand.css
new file mode 100755
index 0000000..4e2681d
--- /dev/null
+++ b/src/features/serverCommand/serverCommand.css
@@ -0,0 +1,124 @@
+.server-command-page {
+  width: 100%;
+}
+
+.server-command-page .ant-alert-description {
+  width: 100%;
+}
+
+.server-command-page__alert-body {
+  width: 100%;
+}
+
+.server-command-page__alert-code {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #fff2f0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.server-command-page__card,
+.server-command-page__server-card {
+  border-radius: 24px;
+}
+
+.server-command-page__server-card {
+  min-width: 0;
+}
+
+.server-command-page__title.ant-typography,
+.server-command-page__server-title.ant-typography {
+  margin-bottom: 0;
+}
+
+.server-command-page__title-row {
+  align-items: center;
+}
+
+.server-command-page__title-row .ant-space-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.server-command-page__copy.ant-typography {
+  max-width: 760px;
+  margin-bottom: 0;
+}
+
+.server-command-page__summary-grid {
+  width: 100%;
+}
+
+.server-command-page__summary-grid .ant-statistic {
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: #f7faff;
+}
+
+.server-command-page__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+  gap: 16px;
+}
+
+.server-command-page__summary.ant-typography,
+.server-command-page__preview.ant-typography,
+.server-command-page__command.ant-typography {
+  margin-bottom: 0;
+}
+
+.server-command-page__preview,
+.server-command-page__command {
+  display: block;
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: #f7faff;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.server-command-page__alert-text {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: default;
+}
+
+.server-command-page__meta .ant-descriptions-item-label {
+  width: 104px;
+}
+
+@media (max-width: 768px) {
+  .server-command-page__server-card .ant-card-head {
+    padding-inline: 16px;
+  }
+
+  .server-command-page__server-card .ant-card-head-wrapper {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .server-command-page__server-card .ant-card-extra {
+    margin-inline-start: 0;
+  }
+
+  .server-command-page__restart-button {
+    width: 100%;
+  }
+
+  .server-command-page__server-card .ant-card-body {
+    padding-inline: 16px;
+  }
+
+  .server-command-page__grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/features/serverCommand/types.ts b/src/features/serverCommand/types.ts
new file mode 100755
index 0000000..c7fcd91
--- /dev/null
+++ b/src/features/serverCommand/types.ts
@@ -0,0 +1,40 @@
+export type ServerCommandKey = 'test' | 'rel' | 'work-server' | 'command-runner';
+
+export type ServerCommandItem = {
+  key: ServerCommandKey;
+  label: string;
+  summary: string;
+  environment: string;
+  publicUrl: string | null;
+  checkUrl: string;
+  composeFile: string;
+  serviceName: string;
+  availability: 'online' | 'degraded' | 'offline';
+  httpStatus: number | null;
+  contentType: string | null;
+  responsePreview: string | null;
+  checkedAt: string;
+  startedAt: string | null;
+  runningVersion: string | null;
+  runningBuiltAt: string | null;
+  latestVersion: string | null;
+  latestBuiltAt: string | null;
+  latestSourceChangeAt: string | null;
+  latestSourceChangePath: string | null;
+  buildRequired: boolean;
+  updateAvailable: boolean;
+  updateSummary: string | null;
+  responseTimeMs: number | null;
+  composeStatus: string | null;
+  composeDetails: string | null;
+  lastCommand: string;
+  commandScript: string;
+  commandWorkingDirectory: string;
+  errorMessage: string | null;
+};
+
+export type ServerCommandActionResult = {
+  item: ServerCommandItem;
+  commandOutput: string | null;
+  restartState: 'completed' | 'accepted';
+};
diff --git a/src/index.ts b/src/index.ts
new file mode 100755
index 0000000..27032ef
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,57 @@
+export * from './types/component-plugin';
+
+export * from './components/status-badge';
+export * from './components/window';
+export * from './components/embeddedMap';
+export * from './components/previewer';
+export * from './components/inputs/primitives/input';
+export * from './components/inputs/specialized/emailInput';
+export * from './components/inputs/specialized/buttonEditableInput';
+export * from './components/inputs/composite/multiInput';
+export * from './components/inputs/popup';
+export {
+  SelectUI,
+  createSelectPlaceholderPlugin,
+  createSelectSortPlugin,
+} from './components/inputs/select';
+export type {
+  SelectOptionItem as SelectInputOptionItem,
+  SelectUIProps,
+} from './components/inputs/select';
+export {
+  CheckComboUI,
+  createCheckComboPlaceholderPlugin,
+  createCheckComboSortPlugin,
+} from './components/inputs/checkCombo';
+export type {
+  CheckComboUIProps,
+  SelectOptionItem as CheckComboOptionItem,
+} from './components/inputs/checkCombo';
+export * from './components/dashboard/progress';
+export * from './components/dashboard/multiProgress';
+export * from './components/markdownPreview';
+export * from './components/navigation';
+export * from './components/search';
+export * from './components/formField';
+export * from './components/stateKit';
+export * from './components/emptyIllustrationCard';
+export * from './components/dataListTable';
+export * from './components/dataStatePanel';
+export * from './components/queryFilterBuilder';
+export * from './components/processFlow';
+export * from './components/stepper';
+export * from './components/timelinePanel';
+export * from './layer';
+export * from './store';
+
+export * from './widgets/core';
+export * from './widgets/api-sample-card';
+export * from './widgets/dashboard-report-card';
+export * from './widgets/gps-sample-card';
+export * from './widgets/text-memo-widget';
+
+export * from './samples/registry';
+export { ComponentSamplesLayout } from './features/layout/component-sample-gallery';
+export type { ComponentSamplesLayoutProps } from './features/layout/component-sample-gallery';
+export { SampleWidgetsLayout } from './features/layout/widget-sample-gallery';
+export type { SampleWidgetsLayoutProps } from './features/layout/widget-sample-gallery';
diff --git a/src/layer/gesture/context/GestureContext.tsx b/src/layer/gesture/context/GestureContext.tsx
new file mode 100755
index 0000000..8990576
--- /dev/null
+++ b/src/layer/gesture/context/GestureContext.tsx
@@ -0,0 +1,286 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import type { GestureLayerDefinition, PageGestureDefinition, PageGestureState } from '../types';
+
+type GestureTrackingState = {
+  gestureId: string;
+  startX: number;
+  startY: number;
+  readyToTrigger: boolean;
+};
+
+type GestureContextValue = {
+  pageState: PageGestureState;
+  setPageState: (nextState: PageGestureState) => void;
+  registerLayer: (layer: GestureLayerDefinition) => void;
+  unregisterLayer: (layerId: string) => void;
+};
+
+const GestureContext = createContext<GestureContextValue | null>(null);
+
+function isInteractiveElement(target: EventTarget | null) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  return Boolean(
+    target.closest(
+      'button, a, input, select, textarea, summary, label, [role="button"], [role="link"], [data-no-gesture]',
+    ),
+  );
+}
+
+function isGestureAvailable(pageState: PageGestureState, gesture: PageGestureDefinition) {
+  if (gesture.enabled === false) {
+    return false;
+  }
+
+  if (!gesture.activeStates || gesture.activeStates.length === 0) {
+    return true;
+  }
+
+  return gesture.activeStates.includes(pageState);
+}
+
+export function GestureProvider({ children }: PropsWithChildren) {
+  const [pageState, setPageState] = useState<PageGestureState>('anyway');
+  const [mobileViewport, setMobileViewport] = useState(false);
+  const [layerVersion, setLayerVersion] = useState(0);
+  const layersRef = useRef<GestureLayerDefinition[]>([]);
+  const trackingRef = useRef<GestureTrackingState | null>(null);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const updateViewport = () => {
+      setMobileViewport(mediaQuery.matches);
+    };
+
+    updateViewport();
+    mediaQuery.addEventListener('change', updateViewport);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateViewport);
+    };
+  }, []);
+
+  const resolveGesture = (gestureId: string) => {
+    for (let layerIndex = layersRef.current.length - 1; layerIndex >= 0; layerIndex -= 1) {
+      const layer = layersRef.current[layerIndex];
+      const gesture = layer.gestures.find((candidate) => candidate.id === gestureId);
+
+      if (gesture) {
+        return gesture;
+      }
+    }
+
+    return null;
+  };
+
+  const topRightGesture = useMemo(() => {
+    const resolveGestureByTrigger = (trigger: PageGestureDefinition['trigger']) => {
+      for (let layerIndex = layersRef.current.length - 1; layerIndex >= 0; layerIndex -= 1) {
+        const layer = layersRef.current[layerIndex];
+
+        if (layer.enabled === false) {
+          continue;
+        }
+
+        for (let gestureIndex = layer.gestures.length - 1; gestureIndex >= 0; gestureIndex -= 1) {
+          const gesture = layer.gestures[gestureIndex];
+
+          if (!isGestureAvailable(pageState, gesture)) {
+            continue;
+          }
+
+          if (gesture.mobileOnly && !mobileViewport) {
+            continue;
+          }
+
+          if (gesture.trigger === trigger) {
+            return gesture;
+          }
+        }
+      }
+
+      return null;
+    };
+
+    return resolveGestureByTrigger('pull-down-top-right');
+  }, [layerVersion, mobileViewport, pageState]);
+
+  const middleRightGesture = useMemo(() => {
+    for (let layerIndex = layersRef.current.length - 1; layerIndex >= 0; layerIndex -= 1) {
+      const layer = layersRef.current[layerIndex];
+
+      if (layer.enabled === false) {
+        continue;
+      }
+
+      for (let gestureIndex = layer.gestures.length - 1; gestureIndex >= 0; gestureIndex -= 1) {
+        const gesture = layer.gestures[gestureIndex];
+
+        if (!isGestureAvailable(pageState, gesture)) {
+          continue;
+        }
+
+        if (gesture.mobileOnly && !mobileViewport) {
+          continue;
+        }
+
+        if (gesture.trigger === 'pull-left-middle-right') {
+          return gesture;
+        }
+      }
+    }
+
+    return null;
+  }, [layerVersion, mobileViewport, pageState]);
+
+  const resetTracking = () => {
+    trackingRef.current = null;
+  };
+
+  useEffect(() => {
+    if ((!topRightGesture && !middleRightGesture) || !mobileViewport) {
+      trackingRef.current = null;
+      return;
+    }
+
+    const handleWindowTouchStart = (event: TouchEvent) => {
+      const touch = event.touches[0];
+
+      if (!touch) {
+        trackingRef.current = null;
+        return;
+      }
+
+      const inTopRightZone = Boolean(
+        topRightGesture &&
+          touch.clientX >= window.innerWidth - (topRightGesture.hotZoneSize ?? 120) &&
+          touch.clientY <= (topRightGesture.hotZoneSize ?? 120),
+      );
+      const middleHotZoneSize = middleRightGesture?.hotZoneSize ?? 120;
+      const middleZoneTop = window.innerHeight * 0.25;
+      const middleZoneBottom = window.innerHeight * 0.75;
+      const inMiddleRightZone = Boolean(
+        middleRightGesture &&
+          touch.clientX >= window.innerWidth - middleHotZoneSize &&
+          touch.clientY >= middleZoneTop &&
+          touch.clientY <= middleZoneBottom,
+      );
+
+      if ((!inTopRightZone && !inMiddleRightZone) || isInteractiveElement(event.target)) {
+        trackingRef.current = null;
+        return;
+      }
+
+      trackingRef.current = {
+        gestureId: inTopRightZone && topRightGesture ? topRightGesture.id : middleRightGesture!.id,
+        startX: touch.clientX,
+        startY: touch.clientY,
+        readyToTrigger: false,
+      };
+    };
+
+    const handleWindowTouchMove = (event: TouchEvent) => {
+      const tracking = trackingRef.current;
+
+      if (!tracking) {
+        return;
+      }
+
+      const touch = event.touches[0];
+      const gesture = resolveGesture(tracking.gestureId);
+
+      if (!touch || !gesture || !isGestureAvailable(pageState, gesture)) {
+        return;
+      }
+
+      const deltaX = touch.clientX - tracking.startX;
+      const deltaY = touch.clientY - tracking.startY;
+      const minDistance = gesture.minDistance ?? 72;
+      const maxHorizontalDrift = gesture.maxHorizontalDrift ?? 96;
+      const isReady =
+        gesture.trigger === 'pull-left-middle-right'
+          ? deltaX <= minDistance * -1 && Math.abs(deltaY) <= maxHorizontalDrift
+          : deltaY >= minDistance && Math.abs(deltaX) <= maxHorizontalDrift;
+
+      if (tracking.readyToTrigger !== isReady) {
+        trackingRef.current = {
+          ...tracking,
+          readyToTrigger: isReady,
+        };
+      }
+    };
+
+    const handleWindowTouchEnd = () => {
+      const tracking = trackingRef.current;
+      trackingRef.current = null;
+
+      if (!tracking?.readyToTrigger) {
+        return;
+      }
+
+      const gesture = resolveGesture(tracking.gestureId);
+
+      if (!gesture || !isGestureAvailable(pageState, gesture)) {
+        return;
+      }
+
+      gesture.onTrigger();
+    };
+
+    window.addEventListener('touchstart', handleWindowTouchStart, { passive: true });
+    window.addEventListener('touchmove', handleWindowTouchMove, { passive: true });
+    window.addEventListener('touchend', handleWindowTouchEnd, { passive: true });
+    window.addEventListener('touchcancel', resetTracking, { passive: true });
+
+    return () => {
+      window.removeEventListener('touchstart', handleWindowTouchStart);
+      window.removeEventListener('touchmove', handleWindowTouchMove);
+      window.removeEventListener('touchend', handleWindowTouchEnd);
+      window.removeEventListener('touchcancel', resetTracking);
+    };
+  }, [middleRightGesture, mobileViewport, pageState, topRightGesture]);
+
+  const value = useMemo<GestureContextValue>(
+    () => ({
+      pageState,
+      setPageState,
+      registerLayer: (layer) => {
+        const nextLayers = layersRef.current.filter((candidate) => candidate.id !== layer.id);
+        nextLayers.push(layer);
+        layersRef.current = nextLayers;
+        setLayerVersion((previous) => previous + 1);
+      },
+      unregisterLayer: (layerId) => {
+        layersRef.current = layersRef.current.filter((candidate) => candidate.id !== layerId);
+        setLayerVersion((previous) => previous + 1);
+      },
+    }),
+    [pageState],
+  );
+
+  return (
+    <GestureContext.Provider value={value}>
+      {children}
+    </GestureContext.Provider>
+  );
+}
+
+export function useGestureContext() {
+  const context = useContext(GestureContext);
+
+  if (!context) {
+    throw new Error('useGestureContext must be used within a GestureProvider.');
+  }
+
+  return context;
+}
diff --git a/src/layer/gesture/hooks/useGestureLayer.ts b/src/layer/gesture/hooks/useGestureLayer.ts
new file mode 100755
index 0000000..c545d9c
--- /dev/null
+++ b/src/layer/gesture/hooks/useGestureLayer.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useGestureContext } from '../context/GestureContext';
+import type { GestureLayerDefinition, PageGestureState } from '../types';
+
+export function useGesturePageState(pageState: PageGestureState) {
+  const { setPageState } = useGestureContext();
+
+  useEffect(() => {
+    setPageState(pageState);
+  }, [pageState, setPageState]);
+}
+
+export function useGestureLayer(layer: GestureLayerDefinition) {
+  const { registerLayer, unregisterLayer } = useGestureContext();
+
+  useEffect(() => {
+    registerLayer(layer);
+
+    return () => {
+      unregisterLayer(layer.id);
+    };
+  }, [layer, registerLayer, unregisterLayer]);
+}
diff --git a/src/layer/gesture/index.ts b/src/layer/gesture/index.ts
new file mode 100755
index 0000000..cc493c4
--- /dev/null
+++ b/src/layer/gesture/index.ts
@@ -0,0 +1,3 @@
+export * from './context/GestureContext';
+export * from './hooks/useGestureLayer';
+export * from './types';
diff --git a/src/layer/gesture/types/index.ts b/src/layer/gesture/types/index.ts
new file mode 100755
index 0000000..d911c49
--- /dev/null
+++ b/src/layer/gesture/types/index.ts
@@ -0,0 +1,19 @@
+export type PageGestureState = 'anyway';
+
+export type PageGestureDefinition = {
+  id: string;
+  activeStates?: PageGestureState[];
+  enabled?: boolean;
+  mobileOnly?: boolean;
+  trigger: 'pull-down-top-right' | 'pull-left-middle-right';
+  hotZoneSize?: number;
+  minDistance?: number;
+  maxHorizontalDrift?: number;
+  onTrigger: () => void;
+};
+
+export type GestureLayerDefinition = {
+  id: string;
+  enabled?: boolean;
+  gestures: PageGestureDefinition[];
+};
diff --git a/src/layer/gps/context/GpsLayerContext.tsx b/src/layer/gps/context/GpsLayerContext.tsx
new file mode 100755
index 0000000..aab1e82
--- /dev/null
+++ b/src/layer/gps/context/GpsLayerContext.tsx
@@ -0,0 +1,419 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { sendClientNotification } from '../../../app/main/notificationApi';
+import type {
+  GpsAnchor,
+  GpsConfig,
+  GpsCoordinates,
+  GpsGeofenceEvent,
+  GpsLayerSnapshot,
+  GpsPermissionState,
+} from '../types';
+
+type GpsLayerContextValue = GpsLayerSnapshot & {
+  enableGps: () => void;
+  disableGps: () => void;
+  toggleGps: () => void;
+  saveCurrentAnchor: (name: string) => { ok: boolean; message?: string; anchor?: GpsAnchor };
+  removeAnchor: (anchorId: string) => void;
+  selectAnchor: (anchorId: string | null) => void;
+  updateConfig: (patch: Partial<GpsConfig>) => void;
+  clearEvents: () => void;
+};
+
+const GPS_STORAGE_KEY = 'gps-layer:anchors';
+const GPS_CONFIG_STORAGE_KEY = 'gps-layer:config';
+const GPS_SELECTED_STORAGE_KEY = 'gps-layer:selected-anchor';
+const GPS_EVENTS_LIMIT = 24;
+const DEFAULT_CONFIG: GpsConfig = {
+  notifyOnEnter: true,
+  notifyOnExit: true,
+  radiusMeters: 120,
+};
+
+const GpsLayerContext = createContext<GpsLayerContextValue | null>(null);
+
+function clampRadiusMeters(value: number) {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_CONFIG.radiusMeters;
+  }
+
+  return Math.min(5000, Math.max(30, Math.round(value)));
+}
+
+function readJsonStorage<T>(key: string, fallback: T, parse: (value: unknown) => T) {
+  if (typeof window === 'undefined') {
+    return fallback;
+  }
+
+  try {
+    const raw = window.localStorage.getItem(key);
+
+    if (!raw) {
+      return fallback;
+    }
+
+    return parse(JSON.parse(raw));
+  } catch {
+    return fallback;
+  }
+}
+
+function createAnchorId() {
+  return `gps-anchor-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function toCoordinates(position: GeolocationPosition): GpsCoordinates {
+  return {
+    latitude: position.coords.latitude,
+    longitude: position.coords.longitude,
+    accuracy: Number.isFinite(position.coords.accuracy) ? position.coords.accuracy : null,
+    altitude: Number.isFinite(position.coords.altitude ?? NaN) ? position.coords.altitude ?? null : null,
+    heading: Number.isFinite(position.coords.heading ?? NaN) ? position.coords.heading ?? null : null,
+    speed: Number.isFinite(position.coords.speed ?? NaN) ? position.coords.speed ?? null : null,
+    timestamp: position.timestamp,
+  };
+}
+
+function toRadians(value: number) {
+  return (value * Math.PI) / 180;
+}
+
+function calculateDistanceMeters(
+  latitudeA: number,
+  longitudeA: number,
+  latitudeB: number,
+  longitudeB: number,
+) {
+  const earthRadiusMeters = 6371000;
+  const deltaLatitude = toRadians(latitudeB - latitudeA);
+  const deltaLongitude = toRadians(longitudeB - longitudeA);
+  const sinLatitude = Math.sin(deltaLatitude / 2);
+  const sinLongitude = Math.sin(deltaLongitude / 2);
+  const root =
+    sinLatitude * sinLatitude +
+    Math.cos(toRadians(latitudeA)) *
+      Math.cos(toRadians(latitudeB)) *
+      sinLongitude *
+      sinLongitude;
+
+  return 2 * earthRadiusMeters * Math.atan2(Math.sqrt(root), Math.sqrt(1 - root));
+}
+
+function parseAnchors(value: unknown): GpsAnchor[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.flatMap((item) => {
+    if (!item || typeof item !== 'object') {
+      return [];
+    }
+
+    const candidate = item as Partial<GpsAnchor>;
+
+    if (
+      typeof candidate.id !== 'string' ||
+      typeof candidate.name !== 'string' ||
+      typeof candidate.createdAt !== 'string' ||
+      !Number.isFinite(candidate.latitude) ||
+      !Number.isFinite(candidate.longitude)
+    ) {
+      return [];
+    }
+
+    return [
+      {
+        id: candidate.id,
+        name: candidate.name,
+        latitude: Number(candidate.latitude),
+        longitude: Number(candidate.longitude),
+        createdAt: candidate.createdAt,
+      },
+    ];
+  });
+}
+
+function parseConfig(value: unknown): GpsConfig {
+  if (!value || typeof value !== 'object') {
+    return DEFAULT_CONFIG;
+  }
+
+  const candidate = value as Partial<GpsConfig>;
+
+  return {
+    notifyOnEnter: candidate.notifyOnEnter ?? DEFAULT_CONFIG.notifyOnEnter,
+    notifyOnExit: candidate.notifyOnExit ?? DEFAULT_CONFIG.notifyOnExit,
+    radiusMeters: clampRadiusMeters(candidate.radiusMeters ?? DEFAULT_CONFIG.radiusMeters),
+  };
+}
+
+function sendGpsPushNotification(event: GpsGeofenceEvent) {
+  return sendClientNotification({
+    title: `GPS 거점 ${event.type === 'enter' ? 'In' : 'Out'} 알림`,
+    body: `${event.anchorName} ${event.type === 'enter' ? '진입' : '이탈'} 감지 (${event.distanceMeters}m)`,
+    threadId: 'gps-geofence',
+    data: {
+      category: 'gps-geofence',
+      eventType: event.type,
+      anchorId: event.anchorId,
+      anchorName: event.anchorName,
+      distanceMeters: String(event.distanceMeters),
+      createdAt: event.createdAt,
+    },
+  }).catch(() => undefined);
+}
+
+export function GpsLayerProvider({ children }: PropsWithChildren) {
+  const [enabled, setEnabled] = useState(false);
+  const [permissionState, setPermissionState] = useState<GpsPermissionState>('idle');
+  const [currentPosition, setCurrentPosition] = useState<GpsCoordinates | null>(null);
+  const [anchors, setAnchors] = useState<GpsAnchor[]>(() => readJsonStorage(GPS_STORAGE_KEY, [], parseAnchors));
+  const [config, setConfig] = useState<GpsConfig>(() =>
+    readJsonStorage(GPS_CONFIG_STORAGE_KEY, DEFAULT_CONFIG, parseConfig),
+  );
+  const [selectedAnchorId, setSelectedAnchorId] = useState<string | null>(() =>
+    readJsonStorage(GPS_SELECTED_STORAGE_KEY, null, (value) => (typeof value === 'string' ? value : null)),
+  );
+  const [anchorPresence, setAnchorPresence] = useState<Record<string, boolean>>({});
+  const [events, setEvents] = useState<GpsGeofenceEvent[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const watchIdRef = useRef<number | null>(null);
+  const anchorPresenceRef = useRef<Record<string, boolean>>({});
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.localStorage.setItem(GPS_STORAGE_KEY, JSON.stringify(anchors));
+  }, [anchors]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.localStorage.setItem(GPS_CONFIG_STORAGE_KEY, JSON.stringify(config));
+  }, [config]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    if (selectedAnchorId) {
+      window.localStorage.setItem(GPS_SELECTED_STORAGE_KEY, selectedAnchorId);
+      return;
+    }
+
+    window.localStorage.removeItem(GPS_SELECTED_STORAGE_KEY);
+  }, [selectedAnchorId]);
+
+  useEffect(() => {
+    if (!selectedAnchorId) {
+      return;
+    }
+
+    const selectedExists = anchors.some((anchor) => anchor.id === selectedAnchorId);
+
+    if (!selectedExists) {
+      setSelectedAnchorId(anchors[0]?.id ?? null);
+    }
+  }, [anchors, selectedAnchorId]);
+
+  useEffect(() => {
+    if (typeof navigator === 'undefined' || !('geolocation' in navigator)) {
+      setPermissionState('unsupported');
+      return;
+    }
+
+    if (!enabled) {
+      if (watchIdRef.current !== null) {
+        navigator.geolocation.clearWatch(watchIdRef.current);
+        watchIdRef.current = null;
+      }
+
+      return;
+    }
+
+    setPermissionState((previous) => (previous === 'granted' ? previous : 'requesting'));
+    setErrorMessage(null);
+
+    watchIdRef.current = navigator.geolocation.watchPosition(
+      (position) => {
+        setCurrentPosition(toCoordinates(position));
+        setPermissionState('granted');
+        setErrorMessage(null);
+      },
+      (error) => {
+        setPermissionState(error.code === error.PERMISSION_DENIED ? 'denied' : 'error');
+        setErrorMessage(error.message || 'GPS 위치를 읽지 못했습니다.');
+      },
+      {
+        enableHighAccuracy: true,
+        maximumAge: 5000,
+        timeout: 10000,
+      },
+    );
+
+    return () => {
+      if (watchIdRef.current !== null) {
+        navigator.geolocation.clearWatch(watchIdRef.current);
+        watchIdRef.current = null;
+      }
+    };
+  }, [enabled]);
+
+  useEffect(() => {
+    if (!currentPosition || anchors.length === 0) {
+      anchorPresenceRef.current = {};
+      setAnchorPresence({});
+      return;
+    }
+
+    const nextPresence: Record<string, boolean> = {};
+    const nextEvents: GpsGeofenceEvent[] = [];
+
+    for (const anchor of anchors) {
+      const distanceMeters = calculateDistanceMeters(
+        currentPosition.latitude,
+        currentPosition.longitude,
+        anchor.latitude,
+        anchor.longitude,
+      );
+      const isInside = distanceMeters <= config.radiusMeters;
+      const previousPresence = anchorPresenceRef.current[anchor.id];
+
+      nextPresence[anchor.id] = isInside;
+
+      if (typeof previousPresence === 'boolean' && previousPresence !== isInside) {
+        const type = isInside ? 'enter' : 'exit';
+        const shouldNotify =
+          (type === 'enter' && config.notifyOnEnter) || (type === 'exit' && config.notifyOnExit);
+
+        const event: GpsGeofenceEvent = {
+          id: `gps-event-${Date.now()}-${anchor.id}-${type}`,
+          anchorId: anchor.id,
+          anchorName: anchor.name,
+          type,
+          distanceMeters: Math.round(distanceMeters),
+          createdAt: new Date().toISOString(),
+        };
+
+        nextEvents.push(event);
+
+        if (shouldNotify) {
+          void sendGpsPushNotification(event);
+        }
+      }
+    }
+
+    anchorPresenceRef.current = nextPresence;
+    setAnchorPresence(nextPresence);
+
+    if (nextEvents.length > 0) {
+      setEvents((previous) => [...nextEvents.reverse(), ...previous].slice(0, GPS_EVENTS_LIMIT));
+    }
+  }, [anchors, config.notifyOnEnter, config.notifyOnExit, config.radiusMeters, currentPosition]);
+
+  const value = useMemo<GpsLayerContextValue>(
+    () => ({
+      enabled,
+      supported: typeof navigator !== 'undefined' && 'geolocation' in navigator,
+      permissionState,
+      currentPosition,
+      anchors,
+      config,
+      selectedAnchorId,
+      anchorPresence,
+      events,
+      errorMessage,
+      enableGps: () => {
+        setEnabled(true);
+      },
+      disableGps: () => {
+        setEnabled(false);
+      },
+      toggleGps: () => {
+        setEnabled((previous) => !previous);
+      },
+      saveCurrentAnchor: (name: string) => {
+        const trimmedName = name.trim();
+
+        if (!currentPosition) {
+          return {
+            ok: false,
+            message: '현재 GPS 좌표가 없어 거점을 저장할 수 없습니다.',
+          };
+        }
+
+        if (!trimmedName) {
+          return {
+            ok: false,
+            message: '거점명을 입력해 주세요.',
+          };
+        }
+
+        const nextAnchor: GpsAnchor = {
+          id: createAnchorId(),
+          name: trimmedName,
+          latitude: currentPosition.latitude,
+          longitude: currentPosition.longitude,
+          createdAt: new Date().toISOString(),
+        };
+
+        setAnchors((previous) => [nextAnchor, ...previous]);
+        setSelectedAnchorId(nextAnchor.id);
+
+        return {
+          ok: true,
+          anchor: nextAnchor,
+        };
+      },
+      removeAnchor: (anchorId) => {
+        setAnchors((previous) => previous.filter((anchor) => anchor.id !== anchorId));
+        setAnchorPresence((previous) => {
+          const nextPresence = { ...previous };
+          delete nextPresence[anchorId];
+          anchorPresenceRef.current = nextPresence;
+          return nextPresence;
+        });
+      },
+      selectAnchor: (anchorId) => {
+        setSelectedAnchorId(anchorId);
+      },
+      updateConfig: (patch) => {
+        setConfig((previous) => ({
+          notifyOnEnter: patch.notifyOnEnter ?? previous.notifyOnEnter,
+          notifyOnExit: patch.notifyOnExit ?? previous.notifyOnExit,
+          radiusMeters:
+            patch.radiusMeters === undefined ? previous.radiusMeters : clampRadiusMeters(patch.radiusMeters),
+        }));
+      },
+      clearEvents: () => {
+        setEvents([]);
+      },
+    }),
+    [anchorPresence, anchors, config, currentPosition, enabled, errorMessage, events, permissionState, selectedAnchorId],
+  );
+
+  return <GpsLayerContext.Provider value={value}>{children}</GpsLayerContext.Provider>;
+}
+
+export function useGpsLayerContext() {
+  const context = useContext(GpsLayerContext);
+
+  if (!context) {
+    throw new Error('useGpsLayerContext must be used within a GpsLayerProvider.');
+  }
+
+  return context;
+}
diff --git a/src/layer/gps/hooks/useGpsLayer.ts b/src/layer/gps/hooks/useGpsLayer.ts
new file mode 100755
index 0000000..514e6c5
--- /dev/null
+++ b/src/layer/gps/hooks/useGpsLayer.ts
@@ -0,0 +1,5 @@
+import { useGpsLayerContext } from '../context/GpsLayerContext';
+
+export function useGpsLayer() {
+  return useGpsLayerContext();
+}
diff --git a/src/layer/gps/index.ts b/src/layer/gps/index.ts
new file mode 100755
index 0000000..7a43b7e
--- /dev/null
+++ b/src/layer/gps/index.ts
@@ -0,0 +1,3 @@
+export * from './context/GpsLayerContext';
+export * from './hooks/useGpsLayer';
+export * from './types';
diff --git a/src/layer/gps/types/index.ts b/src/layer/gps/types/index.ts
new file mode 100755
index 0000000..4d48738
--- /dev/null
+++ b/src/layer/gps/types/index.ts
@@ -0,0 +1,55 @@
+export type GpsPermissionState =
+  | 'idle'
+  | 'requesting'
+  | 'granted'
+  | 'denied'
+  | 'unsupported'
+  | 'error';
+
+export type GpsCoordinates = {
+  latitude: number;
+  longitude: number;
+  accuracy: number | null;
+  altitude: number | null;
+  heading: number | null;
+  speed: number | null;
+  timestamp: number;
+};
+
+export type GpsAnchor = {
+  id: string;
+  name: string;
+  latitude: number;
+  longitude: number;
+  createdAt: string;
+};
+
+export type GpsConfig = {
+  notifyOnEnter: boolean;
+  notifyOnExit: boolean;
+  radiusMeters: number;
+};
+
+export type GpsGeofenceEventType = 'enter' | 'exit';
+
+export type GpsGeofenceEvent = {
+  id: string;
+  anchorId: string;
+  anchorName: string;
+  type: GpsGeofenceEventType;
+  distanceMeters: number;
+  createdAt: string;
+};
+
+export type GpsLayerSnapshot = {
+  enabled: boolean;
+  supported: boolean;
+  permissionState: GpsPermissionState;
+  currentPosition: GpsCoordinates | null;
+  anchors: GpsAnchor[];
+  config: GpsConfig;
+  selectedAnchorId: string | null;
+  anchorPresence: Record<string, boolean>;
+  events: GpsGeofenceEvent[];
+  errorMessage: string | null;
+};
diff --git a/src/layer/index.ts b/src/layer/index.ts
new file mode 100755
index 0000000..433103f
--- /dev/null
+++ b/src/layer/index.ts
@@ -0,0 +1,3 @@
+export * from './gesture';
+export * from './gps';
+export * from './search';
diff --git a/src/layer/search/context/SearchLayerContext.tsx b/src/layer/search/context/SearchLayerContext.tsx
new file mode 100755
index 0000000..667e142
--- /dev/null
+++ b/src/layer/search/context/SearchLayerContext.tsx
@@ -0,0 +1,122 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { SearchCommandModal, type SearchKeywordOption } from '../../../components/search';
+import type { SearchLayerSnapshot, SearchOpenMode, SearchWindowSelection, SearchWindowSelectionDraft } from '../types';
+
+type SearchLayerContextValue = SearchLayerSnapshot & {
+  setOptions: (options: SearchKeywordOption[]) => void;
+  openSearch: (mode?: SearchOpenMode) => void;
+  closeSearch: () => void;
+  clearWindowSelection: (instanceId: string) => void;
+  addWindowSelections: (selections: SearchWindowSelectionDraft[]) => void;
+};
+
+const SearchLayerContext = createContext<SearchLayerContextValue | null>(null);
+const WINDOW_SELECTION_DEDUP_MS = 500;
+
+export function SearchLayerProvider({ children }: PropsWithChildren) {
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState<SearchKeywordOption[]>([]);
+  const [mode, setMode] = useState<SearchOpenMode>('navigate');
+  const [windowSelections, setWindowSelections] = useState<SearchWindowSelection[]>([]);
+  const lastWindowSelectionRef = useRef<{ id: string; at: number } | null>(null);
+
+  const value = useMemo<SearchLayerContextValue>(
+    () => ({
+      open,
+      options,
+      mode,
+      windowSelections,
+      setOptions,
+      openSearch: (nextMode = 'navigate') => {
+        lastWindowSelectionRef.current = null;
+        setMode(nextMode);
+        setOpen(true);
+      },
+      closeSearch: () => {
+        setOpen(false);
+      },
+      clearWindowSelection: (instanceId: string) => {
+        setWindowSelections((previous) => previous.filter((selection) => selection.instanceId !== instanceId));
+      },
+      addWindowSelections: (selections) => {
+        if (selections.length === 0) {
+          return;
+        }
+
+        setWindowSelections((previous) => [
+          ...previous,
+          ...selections.map((selection) => ({
+            ...selection,
+            instanceId: `window-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          })),
+        ]);
+      },
+    }),
+    [mode, open, options, windowSelections],
+  );
+
+  return (
+    <SearchLayerContext.Provider value={value}>
+      {children}
+      <SearchCommandModal
+        open={open}
+        options={options}
+        mode={mode}
+        onClose={value.closeSearch}
+        onSelectOption={(option) => {
+          if (mode === 'window') {
+            const now = Date.now();
+            const previousSelection = lastWindowSelectionRef.current;
+
+            if (
+              previousSelection &&
+              previousSelection.id === option.id &&
+              now - previousSelection.at <= WINDOW_SELECTION_DEDUP_MS
+            ) {
+              return;
+            }
+
+            lastWindowSelectionRef.current = {
+              id: option.id,
+              at: now,
+            };
+
+            setOpen(false);
+            setWindowSelections((previous) => [
+              ...previous,
+              {
+                instanceId: `window-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                id: option.id,
+                label: option.label,
+                group: option.group,
+                description: option.description,
+                keywords: option.keywords ?? [],
+              },
+            ]);
+            (option.onSelectWindow ?? option.onSelect)();
+            return;
+          }
+
+          option.onSelect();
+        }}
+      />
+    </SearchLayerContext.Provider>
+  );
+}
+
+export function useSearchLayerContext() {
+  const context = useContext(SearchLayerContext);
+
+  if (!context) {
+    throw new Error('useSearchLayerContext must be used within a SearchLayerProvider.');
+  }
+
+  return context;
+}
diff --git a/src/layer/search/hooks/useSearchLayer.ts b/src/layer/search/hooks/useSearchLayer.ts
new file mode 100755
index 0000000..a1dcfef
--- /dev/null
+++ b/src/layer/search/hooks/useSearchLayer.ts
@@ -0,0 +1,5 @@
+import { useSearchLayerContext } from '../context/SearchLayerContext';
+
+export function useSearchLayer() {
+  return useSearchLayerContext();
+}
diff --git a/src/layer/search/index.ts b/src/layer/search/index.ts
new file mode 100755
index 0000000..e653a92
--- /dev/null
+++ b/src/layer/search/index.ts
@@ -0,0 +1,3 @@
+export * from './context/SearchLayerContext';
+export * from './hooks/useSearchLayer';
+export * from './types';
diff --git a/src/layer/search/types/index.ts b/src/layer/search/types/index.ts
new file mode 100755
index 0000000..91bdb22
--- /dev/null
+++ b/src/layer/search/types/index.ts
@@ -0,0 +1,21 @@
+import type { SearchKeywordOption } from '../../../components/search';
+
+export type SearchOpenMode = 'navigate' | 'window';
+
+export type SearchWindowSelection = {
+  instanceId: string;
+  id: string;
+  label: string;
+  group: string;
+  description?: string;
+  keywords: string[];
+};
+
+export type SearchWindowSelectionDraft = Omit<SearchWindowSelection, 'instanceId'>;
+
+export type SearchLayerSnapshot = {
+  open: boolean;
+  options: SearchKeywordOption[];
+  mode: SearchOpenMode;
+  windowSelections: SearchWindowSelection[];
+};
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100755
index 0000000..59d6d0b
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,41 @@
+import ReactDOM from 'react-dom/client';
+import { App as AntdApp, ConfigProvider } from 'antd';
+import koKR from 'antd/locale/ko_KR';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import { initializeAppUpdate } from './app/main/appUpdate';
+import { GestureProvider, GpsLayerProvider, SearchLayerProvider } from './layer';
+import { AppStoreProvider } from './store';
+import './styles.css';
+
+if (typeof window !== 'undefined') {
+  initializeAppUpdate();
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ConfigProvider
+    locale={koKR}
+    theme={{
+      token: {
+        colorPrimary: '#165dff',
+        borderRadius: 14,
+        fontFamily:
+          "'SUIT Variable', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif",
+      },
+    }}
+  >
+    <AntdApp>
+      <BrowserRouter>
+        <AppStoreProvider>
+          <GpsLayerProvider>
+            <SearchLayerProvider>
+              <GestureProvider>
+                <App />
+              </GestureProvider>
+            </SearchLayerProvider>
+          </GpsLayerProvider>
+        </AppStoreProvider>
+      </BrowserRouter>
+    </AntdApp>
+  </ConfigProvider>,
+);
diff --git a/src/samples/registry.ts b/src/samples/registry.ts
new file mode 100755
index 0000000..7214efa
--- /dev/null
+++ b/src/samples/registry.ts
@@ -0,0 +1,45 @@
+import type { SampleMeta, SampleModule } from '../widgets/core';
+
+export type SampleEntry = {
+  modulePath: string;
+  load: () => Promise<SampleModule>;
+};
+
+export type LoadedSampleEntry = {
+  modulePath: string;
+  Sample: SampleModule['Sample'];
+  sampleMeta: SampleMeta;
+};
+
+function sortSamples(left: LoadedSampleEntry, right: LoadedSampleEntry) {
+  return (
+    left.sampleMeta.componentId.localeCompare(right.sampleMeta.componentId) ||
+    Number(right.sampleMeta.kind === 'base') - Number(left.sampleMeta.kind === 'base') ||
+    (left.sampleMeta.order ?? Number.MAX_SAFE_INTEGER) -
+      (right.sampleMeta.order ?? Number.MAX_SAFE_INTEGER) ||
+    left.sampleMeta.title.localeCompare(right.sampleMeta.title)
+  );
+}
+
+export async function resolveSampleEntries(
+  entries: SampleEntry[],
+  pathFilter?: string,
+) {
+  const filteredEntries = pathFilter
+    ? entries.filter((entry) => entry.modulePath.includes(pathFilter))
+    : entries;
+
+  const loadedEntries = await Promise.all(
+    filteredEntries.map(async (entry) => {
+      const moduleExports = await entry.load();
+
+      return {
+        modulePath: entry.modulePath,
+        Sample: moduleExports.Sample,
+        sampleMeta: moduleExports.sampleMeta,
+      } satisfies LoadedSampleEntry;
+    }),
+  );
+
+  return loadedEntries.sort(sortSamples);
+}
diff --git a/src/store/appStore/context/AppStoreContext.tsx b/src/store/appStore/context/AppStoreContext.tsx
new file mode 100755
index 0000000..4a27d20
--- /dev/null
+++ b/src/store/appStore/context/AppStoreContext.tsx
@@ -0,0 +1,49 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import type { AppPageDescriptor, AppStoreSnapshot } from '../types';
+
+type AppStoreContextValue = AppStoreSnapshot & {
+  setCurrentPage: (page: AppPageDescriptor) => void;
+  setFocusedComponentId: (focusedComponentId: string | null) => void;
+};
+
+const defaultPage: AppPageDescriptor = {
+  id: 'plans:all',
+  title: '메모 / Plan',
+  topMenu: 'plans',
+  section: 'all',
+};
+
+const AppStoreContext = createContext<AppStoreContextValue | null>(null);
+
+export function AppStoreProvider({ children }: PropsWithChildren) {
+  const [currentPage, setCurrentPage] = useState<AppPageDescriptor>(defaultPage);
+  const [focusedComponentId, setFocusedComponentId] = useState<string | null>(null);
+
+  const value = useMemo<AppStoreContextValue>(
+    () => ({
+      currentPage,
+      focusedComponentId,
+      setCurrentPage,
+      setFocusedComponentId,
+    }),
+    [currentPage, focusedComponentId],
+  );
+
+  return <AppStoreContext.Provider value={value}>{children}</AppStoreContext.Provider>;
+}
+
+export function useAppStoreContext() {
+  const context = useContext(AppStoreContext);
+
+  if (!context) {
+    throw new Error('useAppStoreContext must be used within an AppStoreProvider.');
+  }
+
+  return context;
+}
diff --git a/src/store/appStore/hooks/useAppStore.ts b/src/store/appStore/hooks/useAppStore.ts
new file mode 100755
index 0000000..c9c96b5
--- /dev/null
+++ b/src/store/appStore/hooks/useAppStore.ts
@@ -0,0 +1,5 @@
+import { useAppStoreContext } from '../context/AppStoreContext';
+
+export function useAppStore() {
+  return useAppStoreContext();
+}
diff --git a/src/store/appStore/index.ts b/src/store/appStore/index.ts
new file mode 100755
index 0000000..7bdf9f9
--- /dev/null
+++ b/src/store/appStore/index.ts
@@ -0,0 +1,3 @@
+export * from './context/AppStoreContext';
+export * from './hooks/useAppStore';
+export * from './types';
diff --git a/src/store/appStore/types/index.ts b/src/store/appStore/types/index.ts
new file mode 100755
index 0000000..d27383d
--- /dev/null
+++ b/src/store/appStore/types/index.ts
@@ -0,0 +1,11 @@
+export type AppPageDescriptor = {
+  id: string;
+  title: string;
+  topMenu: 'docs' | 'apis' | 'plans' | 'chat' | 'play';
+  section: string;
+};
+
+export type AppStoreSnapshot = {
+  currentPage: AppPageDescriptor;
+  focusedComponentId: string | null;
+};
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100755
index 0000000..fc13af6
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1 @@
+export * from './appStore';
diff --git a/src/styles.css b/src/styles.css
new file mode 100755
index 0000000..8d911e9
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,1638 @@
+:root {
+  color: #182230;
+  background:
+    radial-gradient(circle at top, rgba(22, 93, 255, 0.14), transparent 34%),
+    linear-gradient(180deg, #f8fbff 0%, #eef4ff 45%, #ffffff 100%);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.markdown-preview__image {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 16px;
+  background: #fff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  font-family:
+    'SUIT Variable', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+img,
+svg,
+canvas,
+iframe,
+table {
+  max-width: 100%;
+}
+
+.inline-image-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  color: #64748b;
+  text-align: center;
+  background:
+    linear-gradient(180deg, rgba(241, 245, 249, 0.94), rgba(226, 232, 240, 0.9)),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(148, 163, 184, 0.12));
+}
+
+a {
+  color: inherit;
+}
+
+button,
+a,
+[role='button'] {
+  touch-action: manipulation;
+}
+
+button,
+[role='button'] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.app-content {
+  width: min(1680px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 56px 0 72px;
+}
+
+.hero-section {
+  margin-bottom: 28px;
+  padding: 36px;
+  border: 1px solid rgba(22, 93, 255, 0.12);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 20px 60px rgba(23, 61, 130, 0.08);
+}
+
+.hero-tag {
+  margin-bottom: 12px;
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+.hero-copy {
+  max-width: 720px;
+  font-size: 16px;
+}
+
+.section-menu-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 24px;
+  width: 100%;
+}
+
+.section-menu-layout__sidebar {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+}
+
+.section-menu-layout__nav-card {
+  border-radius: 24px;
+}
+
+.section-menu-layout__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.section-menu-layout__link {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: #f7faff;
+}
+
+.section-menu-layout__link-label {
+  font-weight: 700;
+}
+
+.section-menu-layout__link-copy {
+  color: rgba(24, 34, 48, 0.62);
+  font-size: 12px;
+}
+
+.section-menu-layout__content {
+  min-width: 0;
+}
+
+.api-home-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.api-home-section {
+  scroll-margin-top: 24px;
+}
+
+.api-home-stack {
+  width: 100%;
+}
+
+.list-icon {
+  color: #165dff;
+}
+
+.sample-widgets-layout {
+  width: 100%;
+  align-items: stretch;
+}
+
+.search-command {
+  width: 100%;
+  overflow: visible;
+}
+
+.search-command__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.search-command__title.ant-typography {
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.search-command__description.ant-typography {
+  white-space: normal;
+}
+
+.search-command__autocomplete {
+  width: 100%;
+}
+
+.search-command__autocomplete .ant-input-affix-wrapper {
+  min-height: 44px;
+  border-radius: 16px;
+}
+
+.search-command__autocomplete .ant-input {
+  font-size: 14px;
+}
+
+.search-command__option {
+  width: 100%;
+}
+
+.search-command__option-copy.ant-typography {
+  white-space: normal;
+}
+
+.search-command-modal .ant-modal-content {
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
+}
+
+.search-command-modal .ant-modal-body {
+  overflow: visible;
+}
+
+.search-command__dropdown .ant-select-item {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.sample-widgets-layout__item {
+  flex: 1 1 420px;
+  min-width: 0;
+}
+
+.component-samples-layout {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  gap: 20px;
+  width: 100%;
+}
+
+.component-samples-layout__sidebar {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+}
+
+.component-samples-layout__nav-card {
+  border-radius: 20px;
+}
+
+.component-samples-layout__content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+.component-samples-layout__stack {
+  width: 100%;
+}
+
+.component-samples-layout__card {
+  width: 100%;
+  border-radius: 24px;
+}
+
+.component-samples-layout__section {
+  width: 100%;
+}
+
+.component-samples-layout__sample-block {
+  width: 100%;
+}
+
+.popup-input-ui {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow:
+    0 12px 28px rgba(15, 23, 42, 0.05),
+    0 1px 0 rgba(255, 255, 255, 0.92) inset;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.popup-input-ui__input,
+.popup-input-ui__result {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.popup-input-ui__input.ant-input,
+.popup-input-ui__input.ant-input-affix-wrapper,
+.popup-input-ui__button,
+.popup-input-ui__result.ant-input {
+  border-radius: 0;
+  border: 0;
+  box-shadow: none;
+}
+
+.popup-input-ui__input.ant-input,
+.popup-input-ui__input.ant-input-affix-wrapper {
+  border-start-start-radius: 16px;
+  border-end-start-radius: 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
+}
+
+.popup-input-ui__result.ant-input {
+  border-inline-start: 1px solid rgba(148, 163, 184, 0.18);
+  border-start-end-radius: 16px;
+  border-end-end-radius: 16px;
+  color: rgba(51, 65, 85, 0.92);
+  background:
+    linear-gradient(180deg, rgba(226, 232, 240, 0.96) 0%, rgba(203, 213, 225, 0.92) 100%);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.popup-input-ui__button.ant-btn {
+  flex: 0 0 auto;
+  border-inline-start: 1px solid rgba(148, 163, 184, 0.18);
+  border-inline-end: 1px solid rgba(148, 163, 184, 0.18);
+  height: auto;
+  padding-inline: 18px;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  box-shadow:
+    0 10px 18px rgba(37, 99, 235, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  font-weight: 600;
+}
+
+.popup-input-ui--search .popup-input-ui__button.ant-btn {
+  min-width: 46px;
+  padding-inline: 12px;
+}
+
+.popup-input-ui__input.ant-input::placeholder,
+.popup-input-ui__result.ant-input::placeholder {
+  color: rgba(100, 116, 139, 0.9);
+}
+
+.popup-input-ui__input.ant-input:hover,
+.popup-input-ui__input.ant-input-affix-wrapper:hover,
+.popup-input-ui__input.ant-input:focus,
+.popup-input-ui__input.ant-input-affix-wrapper-focused {
+  background: rgba(248, 250, 252, 0.96);
+}
+
+.popup-input-ui:focus-within {
+  border-color: rgba(37, 99, 235, 0.32);
+  box-shadow:
+    0 0 0 4px rgba(37, 99, 235, 0.1),
+    0 16px 30px rgba(15, 23, 42, 0.08),
+    0 1px 0 rgba(255, 255, 255, 0.92) inset;
+}
+
+@media (max-width: 768px) {
+  input,
+  textarea,
+  select,
+  .ant-input,
+  .ant-input-affix-wrapper input,
+  .ant-select-selection-search-input,
+  .ant-select-selector,
+  .search-command__autocomplete .ant-input {
+    font-size: 16px !important;
+  }
+
+  .app-main-content .ant-card,
+  .app-main-content .ant-btn,
+  .app-main-content .ant-segmented,
+  .search-command-modal .ant-select-item {
+    touch-action: manipulation;
+  }
+}
+
+.feature-markdown-list {
+  width: 100%;
+}
+
+.feature-markdown-list__item {
+  flex: 1 1 100%;
+  width: 100%;
+}
+
+.feature-markdown-card {
+  width: 100%;
+  border-radius: 20px;
+}
+
+.feature-markdown-card__tabs .ant-tabs-nav {
+  margin-bottom: 16px;
+}
+
+.feature-markdown-card__tabs .ant-tabs-tab {
+  border-radius: 999px;
+}
+
+.feature-markdown-card__collapse.ant-collapse {
+  margin-top: 8px;
+  border-radius: 16px;
+  background: rgba(241, 245, 255, 0.72);
+}
+
+.feature-markdown-card__collapse .ant-collapse-header {
+  padding-inline: 0;
+  font-weight: 600;
+}
+
+.feature-markdown-card__collapse .ant-collapse-content-box {
+  padding: 8px 0 0;
+}
+
+.feature-markdown-card__artifacts-copy {
+  margin-bottom: 12px;
+}
+
+.markdown-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.markdown-preview .ant-typography {
+  margin-bottom: 0;
+}
+
+.markdown-preview__list {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.markdown-preview__code {
+  margin: 0;
+  padding: 12px;
+  overflow-x: auto;
+  border-radius: 12px;
+  background: #f5f7fb;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.docs-markdown-layout {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 20px;
+  width: 100%;
+}
+
+.docs-markdown-layout__sidebar {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+}
+
+.docs-markdown-layout__content {
+  min-width: 0;
+}
+
+.folder-tree-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.folder-tree-nav__groups {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.folder-tree-nav__group-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.folder-tree-nav__toggle.ant-btn {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 8px;
+  background: #f1f5ff;
+}
+
+.folder-tree-nav__children {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-left: 32px;
+}
+
+.folder-tree-nav__child-link {
+  font-size: 13px;
+}
+
+.widget-shell {
+  height: 100%;
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+.widget-shell .ant-card-body {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.widget-shell--plain {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+}
+
+.widget-shell__stack {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.widget-shell__stack.ant-space > .ant-space-item {
+  width: 100%;
+}
+
+.widget-shell__stack.ant-space > .ant-space-item:last-child {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.widget-shell__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.widget-shell__title.ant-typography {
+  margin: 0;
+}
+
+.widget-shell__content.ant-typography,
+.widget-shell__description.ant-typography {
+  margin-bottom: 0;
+}
+
+.widget-shell__content {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.widget-shell__body {
+  width: 100%;
+}
+
+.dashboard-report {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.dashboard-report--vertical {
+  flex-direction: column;
+}
+
+.dashboard-report--horizontal {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+}
+
+.dashboard-report__section {
+  min-width: 0;
+  flex: 0 0 auto;
+  padding: 12px 16px;
+  border-radius: 18px;
+  background: #f8fbff;
+  border: 1px solid rgba(22, 93, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-widget-grid {
+  width: 100%;
+  align-items: stretch;
+}
+
+.dashboard-widget-grid__item {
+  display: flex;
+  flex: 1 1 calc(50% - 10px);
+  min-width: min(100%, 440px);
+}
+
+.dashboard-widget-grid__item > * {
+  width: 100%;
+}
+
+.dashboard-widget-grid .widget-shell {
+  width: 100%;
+  height: auto;
+  min-height: 340px;
+}
+
+.dashboard-report__legend {
+  margin-bottom: 10px;
+}
+
+.dashboard-report__section-copy {
+  width: 100%;
+}
+
+.dashboard-report__grouped-progress {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.dashboard-report__grouped-column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  background: #ffffff;
+  border: 1px solid rgba(22, 93, 255, 0.08);
+}
+
+.dashboard-report__grouped-badge {
+  width: fit-content;
+  margin-bottom: 2px;
+}
+
+.dashboard-report__chart {
+  width: 100%;
+  height: 150px;
+}
+
+.dashboard-report__chart-shell {
+  width: 100%;
+  padding: 12px 12px 8px;
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(22, 93, 255, 0.08) 0%, rgba(22, 93, 255, 0.02) 100%),
+    #ffffff;
+  border: 1px solid rgba(22, 93, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.dashboard-report__metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.dashboard-report__metric-item {
+  padding: 14px;
+  border-radius: 16px;
+  background: #ffffff;
+  border: 1px solid rgba(22, 93, 255, 0.08);
+}
+
+.dashboard-report__metric-item .ant-typography {
+  margin-bottom: 0;
+}
+
+.dashboard-report__pie-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: center;
+}
+
+.feature-dashboard-gallery,
+.feature-dashboard-card {
+  width: 100%;
+}
+
+.feature-dashboard-card__grid {
+  width: 100%;
+  align-items: stretch;
+}
+
+.feature-dashboard-card__item {
+  display: flex;
+  flex: 1 1 calc(50% - 8px);
+  min-width: min(100%, 420px);
+}
+
+.feature-dashboard-card__item > * {
+  width: 100%;
+}
+
+.feature-dashboard-card__item .widget-shell {
+  width: 100%;
+  height: auto;
+  min-height: 300px;
+}
+
+.dashboard-progress-ui {
+  width: 100%;
+}
+
+.dashboard-report__section-copy > .ant-flex,
+.dashboard-report__section-copy > .dashboard-report__metrics,
+.dashboard-report__section-copy > .dashboard-report__grouped-progress,
+.dashboard-report__section-copy > .dashboard-report__pie-layout {
+  width: 100%;
+}
+
+.dashboard-progress-ui__header,
+.dashboard-multi-progress-ui__legend {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.dashboard-progress-ui__copy,
+.dashboard-multi-progress-ui__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dashboard-progress-ui__label,
+.dashboard-progress-ui__percent,
+.dashboard-multi-progress-ui__label,
+.dashboard-multi-progress-ui__percent {
+  font-size: 13px;
+}
+
+.dashboard-report__percent {
+  font-size: 13px;
+}
+
+.dashboard-progress-ui__bar {
+  width: 100%;
+}
+
+.dashboard-multi-progress-ui {
+  width: 100%;
+}
+
+.dashboard-multi-progress-ui__bar {
+  display: flex;
+  height: 16px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e9eef7;
+}
+
+.dashboard-multi-progress-ui__segment {
+  height: 100%;
+}
+
+.dashboard-multi-progress-ui__legend {
+  grid-template-columns: 16px minmax(0, 1fr) 48px;
+}
+
+.dashboard-multi-progress-ui__swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+}
+
+.dashboard-report__segment-legend {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) 48px;
+  gap: 8px;
+  align-items: center;
+}
+
+.dashboard-report__segment-legend--total {
+  margin-top: 4px;
+  padding-top: 10px;
+  border-top: 1px dashed rgba(24, 34, 48, 0.12);
+}
+
+.dashboard-report__segment-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+}
+
+.dashboard-report__segment-color--total {
+  background: linear-gradient(135deg, #165dff 0%, #28c76f 100%);
+}
+
+@media (max-width: 768px) {
+  .app-content {
+    width: min(100% - 20px, 1680px);
+    padding-top: 24px;
+  }
+
+  .hero-section {
+    padding: 24px;
+    border-radius: 20px;
+  }
+
+  .component-samples-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .component-samples-layout__sidebar {
+    position: static;
+  }
+
+  .section-menu-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .section-menu-layout__sidebar {
+    position: static;
+  }
+
+  .docs-markdown-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-markdown-layout__sidebar {
+    position: static;
+  }
+
+  .dashboard-report {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-report__metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-report__grouped-progress,
+  .dashboard-report__pie-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-widget-grid__item {
+    flex-basis: 100%;
+  }
+
+  .feature-dashboard-card__item {
+    flex-basis: 100%;
+  }
+}
+
+.history-page {
+  width: 100%;
+  min-width: 0;
+}
+
+.history-page__card {
+  border-radius: 20px;
+  border: 0;
+  box-shadow: none;
+}
+
+.history-page__title.ant-typography {
+  margin-bottom: 6px;
+}
+
+.history-page__copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.history-page__search {
+  width: min(100%, 320px);
+}
+
+.history-page__filter-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.history-page__grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.history-page__list-card .ant-card-body,
+.history-page__detail-card .ant-card-body {
+  min-height: 520px;
+  min-width: 0;
+}
+
+.history-page__detail-card .ant-spin-nested-loading,
+.history-page__detail-card .ant-spin-container,
+.history-page__detail-card .ant-table-wrapper {
+  min-width: 0;
+}
+
+.history-page__detail-card .ant-table-content {
+  overflow-x: auto;
+}
+
+.history-page__list-item {
+  cursor: pointer;
+  border-radius: 14px;
+  padding: 12px;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.history-page__list-item:hover,
+.history-page__list-item.is-active {
+  background: #f3f7ff;
+  border-color: rgba(22, 93, 255, 0.22);
+}
+
+.history-page__detail {
+  width: 100%;
+  min-width: 0;
+}
+
+.history-page__loading {
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+}
+
+.chat-source-changes-page {
+  width: 100%;
+  min-width: 0;
+}
+
+.chat-source-changes-page__card {
+  border-radius: 20px;
+  border: 0;
+  box-shadow: none;
+}
+
+.chat-source-changes-page__title.ant-typography {
+  margin-bottom: 6px;
+}
+
+.chat-source-changes-page__copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.chat-source-changes-page__grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.chat-source-changes-page__list-card .ant-card-body,
+.chat-source-changes-page__detail-card .ant-card-body {
+  min-height: 520px;
+  min-width: 0;
+}
+
+.chat-source-changes-page__list-item {
+  cursor: pointer;
+  border-radius: 14px;
+  padding: 12px;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.chat-source-changes-page__list-item:hover,
+.chat-source-changes-page__list-item.is-active {
+  background: #f3f7ff;
+  border-color: rgba(22, 93, 255, 0.22);
+}
+
+.chat-source-changes-page__detail {
+  width: 100%;
+  min-width: 0;
+}
+
+.chat-source-changes-page__loading {
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+}
+
+.chat-source-changes-page__diff {
+  margin: 0;
+  padding: 14px;
+  border-radius: 14px;
+  overflow: auto;
+  background: #111827;
+  color: #f3f4f6;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.board-page {
+  width: 100%;
+  min-width: 0;
+}
+
+.board-page__card {
+  border-radius: 20px;
+  border: 0;
+  box-shadow: none;
+}
+
+.board-page__title.ant-typography {
+  margin-bottom: 6px;
+}
+
+.board-page__copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.board-page__grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.board-page__editor-column {
+  position: relative;
+  z-index: 2;
+  min-width: 0;
+}
+
+.board-page__list-card .ant-card-body,
+.board-page__editor-card .ant-card-body {
+  min-width: 0;
+}
+
+.board-page__list-card--mobile-hidden,
+.board-page__editor-column--mobile-hidden {
+  display: none;
+}
+
+.board-page__editor-card,
+.board-page__editor-card .ant-card-body {
+  position: relative;
+  overflow: visible;
+}
+
+.board-page__list-item {
+  cursor: pointer;
+  border-radius: 14px;
+  padding: 12px;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.board-page__list-item:hover,
+.board-page__list-item.is-active {
+  background: #f3f7ff;
+  border-color: rgba(22, 93, 255, 0.22);
+}
+
+.board-page__list-icon {
+  color: #165dff;
+  font-size: 18px;
+}
+
+.board-page__list-title {
+  min-width: 0;
+}
+
+.board-page__list-preview {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.board-page__bulk-count.ant-typography {
+  margin: 0;
+  font-weight: 600;
+}
+
+.board-page__editor.ant-space {
+  width: 100%;
+  min-height: 0;
+}
+
+.board-page__editor.ant-space > .ant-space-item {
+  width: 100%;
+  min-width: 0;
+}
+
+.board-page__editor.ant-space > .ant-space-item:last-child {
+  min-height: 0;
+}
+
+.board-page__automation-field {
+  position: relative;
+  z-index: 3;
+  display: grid;
+  gap: 8px;
+}
+
+.board-page__automation-readonly {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 40px;
+  padding: 9px 12px;
+  border: 1px solid rgba(22, 93, 255, 0.14);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+}
+
+.board-page__automation-select.ant-select {
+  width: 100%;
+}
+
+.board-page__automation-select.ant-select .ant-select-selector {
+  min-height: 40px;
+  border-radius: 12px;
+  border-color: rgba(22, 93, 255, 0.14);
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.board-page__automation-select.ant-select .ant-select-selection-wrap {
+  align-items: center;
+}
+
+.board-page__automation-select.ant-select.ant-select-focused .ant-select-selector,
+.board-page__automation-select.ant-select.ant-select-open .ant-select-selector {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.14);
+}
+
+.board-page__automation-select-popup.ant-select-dropdown {
+  z-index: 1450;
+}
+
+.board-page__automation-select-popup.ant-select-dropdown .ant-select-item {
+  min-height: 36px;
+}
+
+.board-page__mobile-toggle {
+  display: none;
+}
+
+.board-page__editor-frame {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  min-height: 0;
+}
+
+.board-page__editor-frame--expanded {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.board-page__editor-toolbar {
+  flex: 0 0 auto;
+}
+
+.board-page__preview-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.board-page__preview-grid--expanded {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.board-page__pane {
+  min-width: 0;
+  min-height: 0;
+}
+
+.board-page__pane--expanded {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+  min-height: 0;
+}
+
+.board-page__textarea.ant-input {
+  min-height: 520px;
+  font-family:
+    'JetBrains Mono', 'D2Coding', 'Fira Code', Consolas, monospace;
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.board-page__textarea--expanded.ant-input {
+  min-height: calc(100vh - 140px);
+  height: calc(100vh - 140px);
+  flex: 1 1 auto;
+}
+
+.board-page__preview {
+  display: flex;
+  flex-direction: column;
+  min-height: 520px;
+  border: 1px solid rgba(22, 93, 255, 0.12);
+  border-radius: 14px;
+  background: #ffffff;
+  padding: 18px;
+  overflow: auto;
+}
+
+.board-page__preview-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.board-page__preview--expanded {
+  min-height: calc(100vh - 140px);
+  height: calc(100vh - 140px);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.board-page__loading {
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+}
+
+.release-pending-main-modal .ant-modal-content {
+  border-radius: 24px;
+}
+
+.release-pending-main-modal__body {
+  width: 100%;
+}
+
+.release-pending-main-modal__title.ant-typography {
+  margin-bottom: 4px;
+}
+
+.release-pending-main-modal__copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.release-pending-main-modal__list {
+  width: 100%;
+}
+
+.release-pending-main-modal__item {
+  align-items: flex-start;
+  padding-block: 14px;
+}
+
+.release-pending-main-modal__item-body {
+  width: 100%;
+}
+
+.release-pending-main-modal__summary {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.release-review-page {
+  width: 100%;
+  min-width: 0;
+}
+
+.release-review-page__stack {
+  width: 100%;
+  min-width: 0;
+}
+
+.release-review-page__title.ant-typography,
+.release-review-page__copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.release-review-page__toolbar {
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.release-review-page__search {
+  flex: 1 1 320px;
+  min-width: 240px;
+  max-width: 520px;
+}
+
+.release-review-page__loading {
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.release-review-page__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.release-review-page__card-shell {
+  height: 100%;
+  min-width: 0;
+}
+
+.release-review-page__card-shell--selected .release-review-page__card {
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.18);
+  border-color: #1677ff;
+}
+
+.release-review-page__card {
+  height: 100%;
+  min-width: 0;
+}
+
+.release-review-page__card .ant-card-head,
+.release-review-page__card .ant-card-body {
+  padding-inline: 16px;
+}
+
+.release-review-page__card-body {
+  width: 100%;
+  min-width: 0;
+}
+
+.release-review-page__card .ant-card-head-wrapper,
+.release-review-page__card .ant-card-head-title,
+.release-review-page__card .ant-card-extra,
+.release-review-page__card .ant-space,
+.release-review-page__card .ant-space-item {
+  min-width: 0;
+}
+
+.release-review-page__memo,
+.release-review-page__menu-section {
+  display: grid;
+  gap: 8px;
+}
+
+.release-review-page__menu-list {
+  display: grid;
+  gap: 10px;
+}
+
+.release-review-page__menu-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px 12px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid rgba(5, 5, 5, 0.08);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.release-review-page__menu-label {
+  font-weight: 600;
+}
+
+.release-review-page__menu-description.ant-typography {
+  grid-column: 1 / 2;
+  margin-bottom: 0;
+}
+
+.release-review-page__empty-copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.release-review-page__target-tags {
+  margin-top: 8px;
+}
+
+.release-review-page__summary.ant-typography,
+.release-review-page__history-summary.ant-typography {
+  margin-bottom: 0;
+}
+
+.release-review-page__history {
+  border-top: 1px solid rgba(5, 5, 5, 0.08);
+  padding-top: 12px;
+}
+
+.release-review-page__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1400;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 20px;
+  background: rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(6px);
+}
+
+.release-review-page__overlay--minimized {
+  inset: auto 16px 16px auto;
+  width: min(420px, calc(100vw - 32px));
+  height: auto;
+  padding: 0;
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.release-review-page__overlay-card.ant-card {
+  width: 100%;
+  min-width: 0;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.26);
+}
+
+.release-review-page__overlay-card--minimized.ant-card {
+  border-radius: 18px;
+}
+
+.release-review-page__overlay-card .ant-card-head,
+.release-review-page__overlay-card .ant-card-body {
+  padding-inline: 16px;
+}
+
+.release-review-page__overlay-card .ant-card-body {
+  padding-block: 12px 16px;
+}
+
+.release-review-page__overlay-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.release-review-page__overlay-title-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.release-review-page__overlay-title-copy .ant-typography {
+  margin-bottom: 0;
+}
+
+.release-review-page__overlay-content {
+  width: 100%;
+  height: calc(100vh - 132px);
+  border-radius: 14px;
+  background: #fff;
+  overflow: auto;
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .history-page__filter-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .history-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .chat-source-changes-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .board-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .history-page__list-card .ant-card-body,
+  .history-page__detail-card .ant-card-body,
+  .chat-source-changes-page__list-card .ant-card-body,
+  .chat-source-changes-page__detail-card .ant-card-body {
+    min-height: auto;
+  }
+
+  .board-page__textarea.ant-input,
+  .board-page__preview {
+    min-height: 360px;
+  }
+
+  .board-page__textarea--expanded.ant-input,
+  .board-page__preview--expanded {
+    min-height: calc(100vh - 148px);
+    height: calc(100vh - 148px);
+  }
+
+  .release-pending-main-modal .ant-modal {
+    max-width: calc(100vw - 24px);
+    margin: 12px auto;
+  }
+
+  .release-review-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .release-review-page__menu-item {
+    grid-template-columns: 1fr;
+  }
+
+  .release-review-page__menu-description.ant-typography {
+    grid-column: auto;
+  }
+
+  .release-review-page__overlay {
+    padding: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .history-page__filter-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .board-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .board-page__mobile-toggle {
+    display: inline-flex;
+  }
+
+  .board-page__preview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .board-page__editor-frame--expanded {
+    padding: 16px;
+  }
+
+  .board-page__automation-readonly {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .board-page__pane--mobile-hidden {
+    display: none;
+  }
+
+  .release-review-page__toolbar {
+    align-items: stretch;
+  }
+
+  .release-review-page__search {
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+  }
+
+  .release-review-page__toolbar .ant-space-compact {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .release-review-page__toolbar .ant-space-compact > .ant-btn {
+    flex: 1 1 calc(50% - 4px);
+  }
+
+  .release-review-page__card .ant-card-head,
+  .release-review-page__card .ant-card-body {
+    padding-inline: 12px;
+  }
+
+  .release-review-page__card .ant-card-head-wrapper {
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .release-review-page__overlay {
+    padding: 8px;
+  }
+
+  .release-review-page__overlay--minimized {
+    right: 12px;
+    bottom: 12px;
+    width: calc(100vw - 24px);
+  }
+
+  .release-review-page__overlay-card .ant-card-head,
+  .release-review-page__overlay-card .ant-card-body {
+    padding-inline: 12px;
+  }
+
+  .release-review-page__overlay-title-row {
+    align-items: flex-start;
+  }
+
+  .release-review-page__overlay-content {
+    height: calc(100vh - 116px);
+  }
+}
+
+@media (max-width: 640px) {
+  .release-review-page__grid {
+    gap: 12px;
+  }
+
+  .release-review-page__card .ant-card-head-wrapper {
+    flex-direction: column;
+  }
+
+  .release-review-page__toolbar .ant-space-compact > .ant-btn {
+    flex-basis: 100%;
+  }
+
+  .release-review-page__overlay-title-row {
+    flex-direction: column;
+  }
+}
diff --git a/src/sw.js b/src/sw.js
new file mode 100755
index 0000000..b5d24c2
--- /dev/null
+++ b/src/sw.js
@@ -0,0 +1,161 @@
+/// <reference lib="webworker" />
+
+import { clientsClaim } from 'workbox-core';
+import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
+import { NavigationRoute, registerRoute } from 'workbox-routing';
+
+clientsClaim();
+cleanupOutdatedCaches();
+
+const manifest = self.__WB_MANIFEST;
+
+if (Array.isArray(manifest) && manifest.length > 0) {
+  precacheAndRoute(manifest);
+  const navigationHandler = createHandlerBoundToURL('/index.html');
+  registerRoute(new NavigationRoute(navigationHandler));
+} else {
+  registerRoute(
+    new NavigationRoute(({ request }) => {
+      return fetch(request);
+    }),
+  );
+}
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    void self.skipWaiting();
+  }
+});
+
+self.addEventListener('push', (event) => {
+  if (!event.data) {
+    return;
+  }
+
+  let payload = {};
+
+  try {
+    payload = event.data.json();
+  } catch {
+    payload = {
+      title: '알림',
+      body: event.data.text(),
+      data: {},
+    };
+  }
+
+  const title = payload.title || 'AI Code App';
+  const body = payload.body || '새 알림이 도착했습니다.';
+  const notificationScope = payload.data?.notificationScope;
+  const notificationKey =
+    payload.data?.notificationKey ||
+    [payload.threadId ?? 'ai-code-app-notification', payload.data?.eventType ?? 'event', Date.now()].join(':');
+
+  event.waitUntil(
+    self.registration.getNotifications().then((notifications) => {
+      if (notificationScope === 'automation') {
+        notifications
+          .filter((notification) => notification.data?.notificationScope === 'automation')
+          .forEach((notification) => notification.close());
+      }
+
+      return self.registration.showNotification(title, {
+        body,
+        data: payload.data ?? {},
+        tag: notificationKey,
+        badge: '/pwa-192x192.svg',
+        icon: '/pwa-192x192.svg',
+      });
+    }),
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  const notificationData = event.notification.data ?? {};
+  const notificationSessionId = typeof notificationData.sessionId === 'string' ? notificationData.sessionId.trim() : '';
+  const notificationCategory = typeof notificationData.category === 'string' ? notificationData.category.trim() : '';
+  const notificationType = typeof notificationData.type === 'string' ? notificationData.type.trim() : '';
+  const notificationThreadId = typeof notificationData.threadId === 'string' ? notificationData.threadId.trim() : '';
+
+  event.notification.close();
+  let targetUrl;
+
+  try {
+    targetUrl = notificationData.targetUrl ? new URL(String(notificationData.targetUrl)) : new URL('/', self.location.origin);
+  } catch {
+    targetUrl = new URL('/', self.location.origin);
+  }
+
+  if (targetUrl.origin !== self.location.origin) {
+    const fallbackUrl = new URL('/', self.location.origin);
+    targetUrl.searchParams.forEach((value, key) => {
+      fallbackUrl.searchParams.set(key, value);
+    });
+    targetUrl = fallbackUrl;
+  }
+
+  if (!targetUrl.searchParams.has('topMenu')) {
+    targetUrl.searchParams.set('topMenu', notificationData.category === 'chat' ? 'chat' : 'plans');
+  }
+
+  if (notificationData.planId && !targetUrl.searchParams.has('planId')) {
+    targetUrl.searchParams.set('planId', String(notificationData.planId));
+  }
+
+  if (notificationData.workId && !targetUrl.searchParams.has('workId')) {
+    targetUrl.searchParams.set('workId', String(notificationData.workId));
+  }
+
+  event.waitUntil(
+    Promise.all([
+      self.registration.getNotifications().then((notifications) => {
+        const isChatNotification =
+          notificationCategory === 'chat' ||
+          notificationType.startsWith('chat') ||
+          notificationThreadId.startsWith('chat:');
+
+        if (!notificationSessionId || !isChatNotification) {
+          return;
+        }
+
+        notifications.forEach((notification) => {
+          const candidateData = notification.data && typeof notification.data === 'object' ? notification.data : null;
+          const candidateSessionId =
+            candidateData && typeof candidateData.sessionId === 'string' ? candidateData.sessionId.trim() : '';
+          const candidateCategory =
+            candidateData && typeof candidateData.category === 'string' ? candidateData.category.trim() : '';
+          const candidateType =
+            candidateData && typeof candidateData.type === 'string' ? candidateData.type.trim() : '';
+          const candidateThreadId =
+            candidateData && typeof candidateData.threadId === 'string' ? candidateData.threadId.trim() : '';
+          const isCandidateChatNotification =
+            candidateCategory === 'chat' ||
+            candidateType.startsWith('chat') ||
+            candidateThreadId.startsWith('chat:');
+
+          if (isCandidateChatNotification && candidateSessionId === notificationSessionId) {
+            notification.close();
+          }
+        });
+      }),
+      self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+        const existingClient = clientList[0];
+
+        if (existingClient) {
+          existingClient.focus();
+
+          try {
+            const clientUrl = new URL(existingClient.url);
+            if (clientUrl.origin === targetUrl.origin) {
+              return existingClient.navigate(targetUrl.toString());
+            }
+          } catch {
+            return existingClient.navigate(targetUrl.toString());
+          }
+        }
+
+        return self.clients.openWindow(targetUrl.toString());
+      }),
+    ]),
+  );
+});
diff --git a/src/types/component-plugin.ts b/src/types/component-plugin.ts
new file mode 100755
index 0000000..8bcfe58
--- /dev/null
+++ b/src/types/component-plugin.ts
@@ -0,0 +1,16 @@
+export type PropsPlugin<TProps> = (props: TProps) => TProps;
+
+export type ComponentPlugin<TInput, TProps = TInput> = (input: TInput) => TProps;
+
+export type ComponentPluginFactory<
+  TArgs extends unknown[] = [],
+  TInput = unknown,
+  TProps = TInput,
+> = (...args: TArgs) => ComponentPlugin<TInput, TProps>;
+
+export function plugins<TProps>(
+  props: TProps,
+  pluginList: ReadonlyArray<PropsPlugin<TProps>>,
+): TProps {
+  return pluginList.reduce((currentProps, plugin) => plugin(currentProps), props);
+}
diff --git a/src/views/play/LayoutPlaygroundView.css b/src/views/play/LayoutPlaygroundView.css
new file mode 100755
index 0000000..ed39e86
--- /dev/null
+++ b/src/views/play/LayoutPlaygroundView.css
@@ -0,0 +1,847 @@
+.layout-playground__hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px;
+  border: 1px solid rgba(8, 145, 178, 0.14);
+  border-radius: 24px;
+  background:
+    linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(59, 130, 246, 0.08)),
+    rgba(255, 255, 255, 0.92);
+}
+
+.layout-playground__title.ant-typography {
+  margin-top: 14px;
+  margin-bottom: 8px;
+}
+
+.layout-playground__meta {
+  display: grid;
+  gap: 10px;
+  min-width: 220px;
+}
+
+.layout-playground__meta span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #155e75;
+}
+
+.layout-playground__controls {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.layout-playground__control-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.layout-playground__control-card .ant-input-number,
+.layout-playground__control-card .ant-radio-group {
+  width: 100%;
+}
+
+.layout-playground__control-card .ant-radio-button-wrapper {
+  text-align: center;
+}
+
+.layout-playground__preview-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.layout-playground__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px 20px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.layout-playground__storage-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 22px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
+    rgba(255, 255, 255, 0.92);
+}
+
+.layout-playground__storage-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.layout-playground__storage-copy.ant-typography {
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+
+.layout-playground__storage-input {
+  width: 100%;
+}
+
+.layout-playground__bottom-menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 20px 22px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)),
+    rgba(255, 255, 255, 0.94);
+}
+
+.layout-playground__bottom-menu-copy {
+  flex: 1;
+  min-width: 0;
+}
+
+.layout-playground__bottom-menu-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.layout-playground__saved-item {
+  padding-inline: 14px !important;
+  border: 1px solid transparent;
+  border-radius: 18px;
+  transition:
+    border-color 0.18s ease,
+    background-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.layout-playground__saved-item:hover {
+  background: rgba(248, 250, 252, 0.86);
+  border-color: rgba(148, 163, 184, 0.18);
+}
+
+.layout-playground__saved-item--active {
+  border-color: rgba(59, 130, 246, 0.28);
+  background:
+    linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.98)),
+    #fff;
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
+}
+
+.layout-playground__saved-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.layout-playground__preview-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.layout-playground__fullscreen-shell {
+  display: flex;
+  width: 100%;
+  height: calc(100dvh - 92px);
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.layout-playground__fullscreen-shell--embedded {
+  height: 100%;
+}
+
+.layout-playground__fullscreen-shell--saved-fit {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__preview-frame {
+  display: flex;
+  flex-direction: column;
+  min-height: 460px;
+  width: 100%;
+  padding: 18px;
+  border: 1px solid rgba(14, 116, 144, 0.14);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 28%),
+    linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.98));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.layout-playground__preview-frame--fullscreen {
+  min-height: 0;
+  height: 100%;
+}
+
+.layout-playground__preview-frame--saved-detail {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__preview-frame--gallery {
+  flex: 1;
+  min-height: 0;
+  padding: 10px;
+  border-radius: 22px;
+}
+
+.layout-playground__saved-browser {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__saved-detail {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 12px;
+  height: 100%;
+  width: 100%;
+  min-height: 0;
+}
+
+.layout-playground__saved-fit-viewport {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__saved-fit-stage {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex: 0 0 auto;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__saved-detail--fit {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  transform-origin: top left;
+  will-change: transform;
+}
+
+.layout-playground__saved-detail--fit,
+.layout-playground__saved-detail--fit > * {
+  max-width: none;
+}
+
+.layout-playground__saved-detail-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 4px;
+}
+
+.layout-playground__saved-browser-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.layout-playground__saved-browser-layout {
+  min-height: calc(100vh - 220px);
+}
+
+.layout-playground__saved-browser-preview {
+  min-width: 0;
+}
+
+.layout-playground__saved-gallery {
+  --layout-gallery-columns: 1;
+  --layout-gallery-rows: 1;
+  display: grid;
+  grid-template-columns: repeat(var(--layout-gallery-columns), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--layout-gallery-rows), minmax(0, 1fr));
+  gap: 12px;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.layout-playground__saved-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  flex: 1;
+  gap: 10px;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  padding: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94)),
+    rgba(255, 255, 255, 0.94);
+  overflow: hidden;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.layout-playground__saved-card:hover {
+  border-color: rgba(59, 130, 246, 0.22);
+  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
+}
+
+.layout-playground__saved-card--active {
+  border-color: rgba(59, 130, 246, 0.36);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.1);
+}
+
+.layout-playground__saved-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex: none;
+}
+
+.layout-playground__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 14px;
+  min-height: 420px;
+  padding: 28px;
+  border: 1px dashed rgba(14, 116, 144, 0.28);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top right, rgba(125, 211, 252, 0.28), transparent 30%),
+    rgba(255, 255, 255, 0.76);
+}
+
+.layout-playground__empty-state--fullscreen {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.layout-playground__saved-browser-loading {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.layout-playground__saved-browser-loading .ant-list {
+  flex: 1;
+  min-height: 0;
+}
+
+.layout-playground__empty-state .ant-typography {
+  margin-bottom: 0;
+}
+
+.layout-playground__editor-card.ant-card,
+.layout-playground__editor-card.ant-card .ant-card-body,
+.layout-playground__editor-stack.ant-space,
+.layout-playground__editor-stack.ant-space .ant-space-item {
+  min-height: 0;
+}
+
+.layout-playground__editor-card.ant-card {
+  min-height: 100%;
+}
+
+.layout-playground__editor-card.ant-card .ant-card-body {
+  height: 100%;
+}
+
+.layout-playground__editor-stack.ant-space {
+  display: flex;
+  height: 100%;
+}
+
+.layout-playground__splitter {
+  position: relative;
+  height: 100%;
+  min-height: 420px;
+  min-width: 0;
+  border-radius: 20px;
+  overflow: hidden;
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.layout-playground__splitter--preview {
+  min-height: 0;
+}
+
+.layout-playground__splitter-frame {
+  height: 100%;
+  min-height: inherit;
+}
+
+.layout-playground__splitter-frame .ant-splitter-panel {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout-playground__splitter--collapsed {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-height: inherit;
+}
+
+.layout-playground__splitter--collapsed.layout-playground__splitter--preview {
+  min-height: 0;
+}
+
+.layout-playground__splitter--collapsed-horizontal {
+  flex-direction: row;
+}
+
+.layout-playground__splitter--collapsed-vertical {
+  flex-direction: column;
+}
+
+.layout-playground__splitter--collapsed > :first-child {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.layout-playground__splitter-toggle-dock {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.layout-playground__splitter-toggle-dock .ant-btn {
+  pointer-events: auto;
+  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
+}
+
+.layout-playground__splitter-toggle-dock--horizontal {
+  top: 50%;
+  left: 50%;
+  flex-direction: column;
+  transform: translate(-50%, -50%);
+}
+
+.layout-playground__splitter-toggle-dock--vertical {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.layout-playground__splitter--depth-2 {
+  background: rgba(186, 230, 253, 0.2);
+}
+
+.layout-playground__splitter--depth-3 {
+  background: rgba(224, 231, 255, 0.24);
+}
+
+.layout-playground__splitter--depth-4 {
+  background: rgba(254, 240, 138, 0.18);
+}
+
+.layout-playground__pane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  min-height: 0;
+  padding: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 0;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.layout-playground__pane:hover {
+  background: rgba(255, 255, 255, 0.48);
+}
+
+.layout-playground__pane--readonly {
+  cursor: default;
+}
+
+.layout-playground__pane--readonly:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.layout-playground__pane--preview {
+  gap: 0;
+  padding: 0;
+}
+
+.layout-playground__pane--surface {
+  gap: 0;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+.layout-playground__pane:focus-visible {
+  outline: 3px solid rgba(37, 99, 235, 0.24);
+  outline-offset: 2px;
+}
+
+.layout-playground__pane-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.layout-playground__pane-toolbar--overlay {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  left: 12px;
+  min-height: 0;
+}
+
+.layout-playground__pane-toolbar--compact {
+  justify-content: flex-end;
+}
+
+.layout-playground__pane--selected .layout-playground__pane-toolbar {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  left: 12px;
+  justify-content: flex-end;
+}
+
+.layout-playground__pane--primary {
+  background: rgba(207, 250, 254, 0.42);
+}
+
+.layout-playground__pane--secondary {
+  background: rgba(224, 231, 255, 0.4);
+}
+
+.layout-playground__pane--accent {
+  background: rgba(254, 249, 195, 0.42);
+}
+
+.layout-playground__pane--neutral {
+  background: rgba(226, 232, 240, 0.48);
+}
+
+.layout-playground__pane--surface.layout-playground__pane--primary,
+.layout-playground__pane--surface.layout-playground__pane--secondary,
+.layout-playground__pane--surface.layout-playground__pane--accent,
+.layout-playground__pane--surface.layout-playground__pane--neutral,
+.layout-playground__pane--hidden {
+  background: transparent;
+}
+
+.layout-playground__pane-label {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #0f766e;
+}
+
+.layout-playground__pane-placeholder {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 40px 0 4px;
+}
+
+.layout-playground__pane--preview .layout-playground__pane-placeholder {
+  padding: 0;
+}
+
+.layout-playground__pane--surface .layout-playground__pane-placeholder {
+  padding: 0;
+}
+
+.layout-playground__pane-component-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.layout-playground__pane-component-body > * {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+}
+
+/* Saved-layout thumbnails must clamp nested sample scroll areas to the scaled preview box. */
+.layout-playground__saved-detail--fit .layout-playground__preview-frame,
+.layout-playground__saved-detail--fit .layout-playground__splitter,
+.layout-playground__saved-detail--fit .layout-playground__splitter-frame,
+.layout-playground__saved-detail--fit .layout-playground__splitter-frame .ant-splitter-panel,
+.layout-playground__saved-detail--fit .layout-playground__pane,
+.layout-playground__saved-detail--fit .layout-playground__pane-component-body,
+.layout-playground__saved-detail--fit .layout-playground__pane-component-body > *,
+.layout-playground__saved-detail--fit .ant-card,
+.layout-playground__saved-detail--fit .ant-card-body,
+.layout-playground__saved-detail--fit .ant-list,
+.layout-playground__saved-detail--fit .ant-list-items,
+.layout-playground__saved-detail--fit .ant-space,
+.layout-playground__saved-detail--fit .ant-space-item {
+  overflow: hidden;
+}
+
+.layout-playground__saved-detail--fit .layout-playground__saved-detail-bar {
+  flex: 0 0 auto;
+}
+
+.layout-playground__saved-detail--fit .layout-playground__preview-frame--saved-detail {
+  min-height: 0;
+}
+
+.layout-playground__saved-detail--fit .layout-playground__splitter,
+.layout-playground__saved-detail--fit .layout-playground__splitter-frame,
+.layout-playground__saved-detail--fit .layout-playground__splitter-frame .ant-splitter-panel,
+.layout-playground__saved-detail--fit .layout-playground__pane,
+.layout-playground__saved-detail--fit .layout-playground__pane-component-body,
+.layout-playground__saved-detail--fit .layout-playground__pane-component-body > *,
+.layout-playground__saved-detail--fit .ant-card,
+.layout-playground__saved-detail--fit .ant-card-body,
+.layout-playground__saved-detail--fit .ant-space,
+.layout-playground__saved-detail--fit .ant-space-item {
+  min-height: 0 !important;
+  min-width: 0;
+  max-height: none;
+}
+
+.layout-playground__saved-detail--fit .layout-playground__pane-component-body > * {
+  height: 100%;
+}
+
+.layout-playground__saved-detail--fit * {
+  scrollbar-width: none;
+}
+
+.layout-playground__saved-detail--fit *::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.layout-playground__saved-detail--fit .previewer-ui__scroll,
+.layout-playground__saved-detail--fit .previewer-ui__pre,
+.layout-playground__saved-detail--fit .previewer-ui__markdown pre,
+.layout-playground__saved-detail--fit .codex-diff-previewer__diff-body,
+.layout-playground__saved-detail--fit .codex-diff-previewer__diff-section--expanded .codex-diff-previewer__diff-body {
+  overflow: hidden !important;
+}
+
+.layout-playground__saved-detail--fit .previewer-ui,
+.layout-playground__saved-detail--fit .previewer-ui__body,
+.layout-playground__saved-detail--fit .previewer-ui__editor,
+.layout-playground__saved-detail--fit .previewer-ui__editor-body,
+.layout-playground__saved-detail--fit .codex-diff-previewer,
+.layout-playground__saved-detail--fit .codex-diff-previewer__diff-list,
+.layout-playground__saved-detail--fit .codex-diff-previewer__diff-section,
+.layout-playground__saved-detail--fit .embedded-map-ui,
+.layout-playground__saved-detail--fit .embedded-map-ui__frame,
+.layout-playground__saved-detail--fit .embedded-map-ui__slot {
+  min-height: 0 !important;
+  height: 100%;
+}
+
+.layout-playground__saved-detail--fit .embedded-map-ui__canvas {
+  min-height: 0;
+}
+
+.layout-playground__pane--selected {
+  border-color: rgba(37, 99, 235, 0.75);
+  background: rgba(219, 234, 254, 0.5);
+}
+
+.layout-playground__pane--surface.layout-playground__pane--selected {
+  background: transparent;
+}
+
+.layout-playground__pane--hidden {
+  border-color: transparent;
+}
+
+.layout-playground__divider.ant-divider {
+  margin: 0;
+}
+
+.layout-playground__code {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.layout-playground__code-block {
+  margin: 0;
+  padding: 18px 20px;
+  overflow: auto;
+  border-radius: 20px;
+  background: #0f172a;
+  color: #dbeafe;
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .layout-playground__hero {
+    flex-direction: column;
+  }
+
+  .layout-playground__meta {
+    min-width: 0;
+  }
+
+  .layout-playground__preview-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .layout-playground__bottom-menu {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .layout-playground__bottom-menu-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .layout-playground__saved-browser-head {
+    flex-direction: column;
+  }
+
+  .layout-playground__saved-detail-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .layout-playground__saved-fit-viewport {
+    align-items: flex-start;
+  }
+
+  .layout-playground__saved-browser-layout {
+    min-height: auto;
+  }
+
+  .layout-playground__saved-gallery {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(var(--layout-gallery-rows), minmax(0, 1fr));
+    min-height: auto;
+  }
+
+  .layout-playground__saved-card-head {
+    flex-direction: column;
+  }
+
+  .layout-playground__storage-head {
+    flex-direction: column;
+  }
+
+  .layout-playground__pane-toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .layout-playground__preview-frame {
+    min-height: 520px;
+    padding: 12px;
+  }
+
+  .layout-playground__preview-frame--fullscreen {
+    min-height: 0;
+  }
+
+  .layout-playground__preview-frame--gallery {
+    min-height: 320px;
+  }
+
+  .layout-playground__splitter {
+    min-height: 480px;
+  }
+
+  .layout-playground__splitter-toggle-dock {
+    width: calc(100% - 24px);
+    justify-content: center;
+  }
+
+  .layout-playground__splitter-toggle-dock--horizontal,
+  .layout-playground__splitter-toggle-dock--vertical {
+    flex-direction: column;
+  }
+
+  .layout-playground__splitter-toggle-dock .ant-btn {
+    width: 100%;
+  }
+}
diff --git a/src/views/play/LayoutPlaygroundView.tsx b/src/views/play/LayoutPlaygroundView.tsx
new file mode 100755
index 0000000..5be620a
--- /dev/null
+++ b/src/views/play/LayoutPlaygroundView.tsx
@@ -0,0 +1,1340 @@
+import {
+  AppstoreOutlined,
+  CaretDownOutlined,
+  CaretLeftOutlined,
+  CaretRightOutlined,
+  CaretUpOutlined,
+  ColumnHeightOutlined,
+  ColumnWidthOutlined,
+  DeploymentUnitOutlined,
+  DeleteOutlined,
+  DragOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SaveOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Divider, Input, InputNumber, List, Popconfirm, Radio, Space, Splitter, Switch, Tag, Typography, message } from 'antd';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
+import { SearchCommandModal, type SearchKeywordOption } from '../../components/search';
+import { componentSampleEntries, widgetSampleEntries } from '../../app/manifests/samples.manifest';
+import { resolveSampleEntries, type LoadedSampleEntry } from '../../samples/registry';
+import { deleteLayout, listSavedLayouts, saveLayout, type LayoutAxis as StoredLayoutAxis, type SavedLayoutRecord, type SizeUnit as StoredSizeUnit } from './layoutStorage';
+import './LayoutPlaygroundView.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+type LayoutAxis = StoredLayoutAxis;
+type SizeUnit = StoredSizeUnit;
+type PaneTone = 'primary' | 'secondary' | 'accent' | 'neutral';
+
+type LayoutComponentBinding = {
+  optionId: string;
+  label: string;
+  description?: string;
+  keywords: string[];
+};
+
+type LayoutLeafNode = {
+  id: string;
+  type: 'leaf';
+  label: string;
+  tone: PaneTone;
+  showHideAction: boolean;
+  componentBinding: LayoutComponentBinding | null;
+};
+
+type LayoutSplitNode = {
+  id: string;
+  type: 'split';
+  axis: LayoutAxis;
+  sizeUnit: SizeUnit;
+  primarySize: number;
+  primaryMin: number;
+  secondaryMin: number;
+  resizable: boolean;
+  previewSizes: number[];
+  children: [LayoutNode, LayoutNode];
+};
+
+type LayoutNode = LayoutLeafNode | LayoutSplitNode;
+
+type LayoutToggleTarget = {
+  id: string;
+  label: string;
+  collapsed: boolean;
+};
+
+type LayoutPlaygroundViewProps = {
+  savedLayoutViewId?: string | null;
+  showSavedLayoutsOnly?: boolean;
+  onSavedLayoutsChange?: (layouts: SavedLayoutRecord[]) => void;
+};
+
+const PRESET_LABELS: Record<LayoutAxis, string> = {
+  horizontal: '좌우 분할',
+  vertical: '상하 분할',
+};
+
+const TONE_CLASS_NAMES: Record<PaneTone, string> = {
+  primary: 'layout-playground__pane--primary',
+  secondary: 'layout-playground__pane--secondary',
+  accent: 'layout-playground__pane--accent',
+  neutral: 'layout-playground__pane--neutral',
+};
+
+const LEAF_PRESETS: Array<Pick<LayoutLeafNode, 'label' | 'tone'>> = [
+  {
+    label: 'Primary Pane',
+    tone: 'primary',
+  },
+  {
+    label: 'Secondary Pane',
+    tone: 'secondary',
+  },
+  {
+    label: 'Nested Pane',
+    tone: 'accent',
+  },
+  {
+    label: 'Utility Pane',
+    tone: 'neutral',
+  },
+];
+
+function clampPercent(value: number) {
+  return Math.min(90, Math.max(10, value));
+}
+
+function clampPixel(value: number) {
+  return Math.min(960, Math.max(120, value));
+}
+
+function normalizeValue(value: number, unit: SizeUnit) {
+  return unit === '%' ? clampPercent(value) : clampPixel(value);
+}
+
+function formatPanelValue(value: number, unit: SizeUnit) {
+  return unit === '%' ? `${clampPercent(value)}%` : `${clampPixel(value)}px`;
+}
+
+function countLeafNodes(node: LayoutNode): number {
+  if (node.type === 'leaf') {
+    return 1;
+  }
+
+  return countLeafNodes(node.children[0]) + countLeafNodes(node.children[1]);
+}
+
+function findLeafNode(node: LayoutNode, targetId: string): LayoutLeafNode | null {
+  if (node.type === 'leaf') {
+    return node.id === targetId ? node : null;
+  }
+
+  return findLeafNode(node.children[0], targetId) ?? findLeafNode(node.children[1], targetId);
+}
+
+function findParentSplitNode(node: LayoutNode, targetLeafId: string, parent: LayoutSplitNode | null = null): LayoutSplitNode | null {
+  if (node.type === 'leaf') {
+    return node.id === targetLeafId ? parent : null;
+  }
+
+  return findParentSplitNode(node.children[0], targetLeafId, node) ?? findParentSplitNode(node.children[1], targetLeafId, node);
+}
+
+function collectSplitSummaries(node: LayoutNode, entries: string[] = [], depth = 1) {
+  if (node.type === 'leaf') {
+    return entries;
+  }
+
+  const sizeLabel = formatPanelValue(node.primarySize, node.sizeUnit);
+  const sizeSummary =
+    node.previewSizes.length === 2
+      ? `${Math.round(node.previewSizes[0])} / ${Math.round(node.previewSizes[1])}`
+      : `${sizeLabel} / auto`;
+
+  entries.push(
+    `depth ${depth}: ${PRESET_LABELS[node.axis]}, size ${sizeLabel}, min ${formatPanelValue(node.primaryMin, node.sizeUnit)} / ${formatPanelValue(node.secondaryMin, node.sizeUnit)}, resize ${node.resizable ? 'on' : 'off'}, preview ${sizeSummary}`,
+  );
+
+  collectSplitSummaries(node.children[0], entries, depth + 1);
+  collectSplitSummaries(node.children[1], entries, depth + 1);
+  return entries;
+}
+
+function updateSplitNode(node: LayoutNode, targetId: string, updater: (current: LayoutSplitNode) => LayoutSplitNode): LayoutNode {
+  if (node.type === 'leaf') {
+    return node;
+  }
+
+  if (node.id === targetId) {
+    return updater(node);
+  }
+
+  return {
+    ...node,
+    children: [
+      updateSplitNode(node.children[0], targetId, updater),
+      updateSplitNode(node.children[1], targetId, updater),
+    ],
+  };
+}
+
+function updateLeafNode(node: LayoutNode, targetId: string, updater: (current: LayoutLeafNode) => LayoutLeafNode): LayoutNode {
+  if (node.type === 'leaf') {
+    return node.id === targetId ? updater(node) : node;
+  }
+
+  return {
+    ...node,
+    children: [
+      updateLeafNode(node.children[0], targetId, updater),
+      updateLeafNode(node.children[1], targetId, updater),
+    ],
+  };
+}
+
+function splitLeafNode(
+  node: LayoutNode,
+  targetId: string,
+  createSplit: (existingLeaf: LayoutLeafNode) => { splitNode: LayoutSplitNode; selectedLeafId: string },
+): { nextNode: LayoutNode; selectedLeafId: string | null } {
+  if (node.type === 'leaf') {
+    if (node.id !== targetId) {
+      return { nextNode: node, selectedLeafId: null };
+    }
+
+    const next = createSplit(node);
+    return { nextNode: next.splitNode, selectedLeafId: next.selectedLeafId };
+  }
+
+  const leftResult = splitLeafNode(node.children[0], targetId, createSplit);
+  if (leftResult.selectedLeafId) {
+    return {
+      nextNode: {
+        ...node,
+        children: [leftResult.nextNode, node.children[1]],
+      },
+      selectedLeafId: leftResult.selectedLeafId,
+    };
+  }
+
+  const rightResult = splitLeafNode(node.children[1], targetId, createSplit);
+  if (rightResult.selectedLeafId) {
+    return {
+      nextNode: {
+        ...node,
+        children: [node.children[0], rightResult.nextNode],
+      },
+      selectedLeafId: rightResult.selectedLeafId,
+    };
+  }
+
+  return { nextNode: node, selectedLeafId: null };
+}
+
+function collectNodeIds(node: LayoutNode, ids: string[] = []) {
+  ids.push(node.id);
+
+  if (node.type === 'split') {
+    collectNodeIds(node.children[0], ids);
+    collectNodeIds(node.children[1], ids);
+  }
+
+  return ids;
+}
+
+function resolveNextNodeSequence(node: LayoutNode | null) {
+  if (!node) {
+    return 0;
+  }
+
+  return collectNodeIds(node).reduce((max, id) => {
+    const matched = id.match(/layout-node-(\d+)/);
+    const numericId = matched ? Number(matched[1]) : 0;
+    return Math.max(max, numericId);
+  }, 0);
+}
+
+function resolveSavedLayoutGrid(count: number) {
+  if (count <= 1) {
+    return { columns: 1, rows: 1 };
+  }
+
+  const columns = Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / columns);
+  return { columns, rows };
+}
+
+export function LayoutPlaygroundView({
+  savedLayoutViewId = null,
+  showSavedLayoutsOnly = false,
+  onSavedLayoutsChange,
+}: LayoutPlaygroundViewProps) {
+  const isSavedLayoutFitMode = Boolean(savedLayoutViewId);
+  const [messageApi, messageContextHolder] = message.useMessage();
+  const [axis, setAxis] = useState<LayoutAxis>('horizontal');
+  const [sizeUnit, setSizeUnit] = useState<SizeUnit>('%');
+  const [primarySize, setPrimarySize] = useState(42);
+  const [primaryMin, setPrimaryMin] = useState(24);
+  const [secondaryMin, setSecondaryMin] = useState(20);
+  const [resizable, setResizable] = useState(true);
+  const [layoutName, setLayoutName] = useState('');
+  const [savedLayouts, setSavedLayouts] = useState<SavedLayoutRecord[]>([]);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoadingSavedLayouts, setIsLoadingSavedLayouts] = useState(true);
+  const [activeSavedLayoutId, setActiveSavedLayoutId] = useState<string | null>(null);
+  const [isSavedLayoutsOpen, setIsSavedLayoutsOpen] = useState(false);
+  const [savedLayoutPreviewId, setSavedLayoutPreviewId] = useState<string | null>(null);
+  const [sampleEntries, setSampleEntries] = useState<LoadedSampleEntry[]>([]);
+  const [isComponentSelectorOpen, setIsComponentSelectorOpen] = useState(false);
+  const [componentSelectorLeafId, setComponentSelectorLeafId] = useState<string | null>(null);
+  const [collapsedLeafIds, setCollapsedLeafIds] = useState<string[]>([]);
+  const [savedLayoutFitScale, setSavedLayoutFitScale] = useState(1);
+  const [savedLayoutFitSize, setSavedLayoutFitSize] = useState<{ width: number; height: number } | null>(null);
+  const nodeIdRef = useRef(0);
+  const leafPresetRef = useRef(0);
+  const savedLayoutFitViewportRef = useRef<HTMLDivElement | null>(null);
+  const savedLayoutFitContentRef = useRef<HTMLDivElement | null>(null);
+
+  const nextNodeId = () => {
+    nodeIdRef.current += 1;
+    return `layout-node-${nodeIdRef.current}`;
+  };
+
+  const createLeafNode = (): LayoutLeafNode => {
+    const preset = LEAF_PRESETS[leafPresetRef.current % LEAF_PRESETS.length];
+    leafPresetRef.current += 1;
+    return {
+      id: nextNodeId(),
+      type: 'leaf',
+      ...preset,
+      showHideAction: false,
+      componentBinding: null,
+    };
+  };
+
+  const createSplitNode = (nextAxis: LayoutAxis, leftNode: LayoutNode, rightNode: LayoutNode): LayoutSplitNode => ({
+    id: nextNodeId(),
+    type: 'split',
+    axis: nextAxis,
+    sizeUnit,
+    primarySize: normalizeValue(primarySize, sizeUnit),
+    primaryMin: normalizeValue(primaryMin, sizeUnit),
+    secondaryMin: normalizeValue(secondaryMin, sizeUnit),
+    resizable,
+    previewSizes: [],
+    children: [leftNode, rightNode],
+  });
+
+  const createInitialLayout = (nextAxis: LayoutAxis) => {
+    const firstLeaf = createLeafNode();
+    const secondLeaf = createLeafNode();
+    return {
+      root: createSplitNode(nextAxis, firstLeaf, secondLeaf),
+      selectedLeafId: firstLeaf.id,
+    };
+  };
+
+  const [layoutTree, setLayoutTree] = useState<LayoutNode | null>(null);
+  const [selectedLeafId, setSelectedLeafId] = useState<string | null>(null);
+
+  const refreshSavedLayouts = async () => {
+    setIsLoadingSavedLayouts(true);
+
+    try {
+      const nextLayouts = await listSavedLayouts();
+      setSavedLayouts(nextLayouts);
+      onSavedLayoutsChange?.(nextLayouts);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '저장된 레이아웃 목록을 불러오지 못했습니다.');
+    } finally {
+      setIsLoadingSavedLayouts(false);
+    }
+  };
+
+  useEffect(() => {
+    void refreshSavedLayouts();
+  }, []);
+
+  useEffect(() => {
+    let mounted = true;
+
+    void Promise.all([
+      resolveSampleEntries(componentSampleEntries, '/components/'),
+      resolveSampleEntries(widgetSampleEntries, '/widgets/'),
+    ]).then(([componentEntries, widgetEntries]) => {
+      if (mounted) {
+        setSampleEntries([...componentEntries, ...widgetEntries]);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    setPrimarySize((previous) => normalizeValue(previous, sizeUnit));
+    setPrimaryMin((previous) => normalizeValue(previous, sizeUnit));
+    setSecondaryMin((previous) => normalizeValue(previous, sizeUnit));
+  }, [sizeUnit]);
+
+  const startLayout = (nextAxis: LayoutAxis) => {
+    setAxis(nextAxis);
+    const nextLayout = createInitialLayout(nextAxis);
+    setLayoutTree(nextLayout.root);
+    setSelectedLeafId(nextLayout.selectedLeafId);
+    setCollapsedLeafIds([]);
+    setActiveSavedLayoutId(null);
+  };
+
+  const resetLayout = () => {
+    setLayoutTree(null);
+    setSelectedLeafId(null);
+    setCollapsedLeafIds([]);
+    setActiveSavedLayoutId(null);
+  };
+
+  const splitSelectedLeaf = (nextAxis: LayoutAxis) => {
+    if (!layoutTree || !selectedLeafId) {
+      return;
+    }
+
+    const result = splitLeafNode(layoutTree, selectedLeafId, (existingLeaf) => {
+      const nestedLeaf = createLeafNode();
+      const splitNode = createSplitNode(nextAxis, existingLeaf, nestedLeaf);
+      return {
+        splitNode,
+        selectedLeafId: nestedLeaf.id,
+      };
+    });
+
+    if (result.selectedLeafId) {
+      setLayoutTree(result.nextNode);
+      setSelectedLeafId(result.selectedLeafId);
+      setActiveSavedLayoutId(null);
+    }
+  };
+
+  const selectedLeaf = useMemo(
+    () => (layoutTree && selectedLeafId ? findLeafNode(layoutTree, selectedLeafId) : null),
+    [layoutTree, selectedLeafId],
+  );
+  const selectedSplit = useMemo(
+    () => (layoutTree && selectedLeafId ? findParentSplitNode(layoutTree, selectedLeafId) : null),
+    [layoutTree, selectedLeafId],
+  );
+  const totalPanes = useMemo(() => (layoutTree ? countLeafNodes(layoutTree) : 0), [layoutTree]);
+  const layoutSummary = useMemo(() => (layoutTree ? collectSplitSummaries(layoutTree).join('\n') : '아직 생성된 레이아웃이 없습니다.'), [layoutTree]);
+
+  const layoutCss = useMemo(
+    () => [
+      `selected-pane: ${selectedLeaf?.label ?? 'none'};`,
+      `total-panes: ${totalPanes};`,
+      'splitters:',
+      layoutSummary,
+    ].join('\n'),
+    [layoutSummary, selectedLeaf?.label, totalPanes],
+  );
+  const savedLayoutGrid = useMemo(() => resolveSavedLayoutGrid(savedLayouts.length), [savedLayouts.length]);
+  const selectedSavedLayoutRecord = useMemo(
+    () => (savedLayoutViewId ? savedLayouts.find((record) => record.id === savedLayoutViewId) ?? null : null),
+    [savedLayoutViewId, savedLayouts],
+  );
+  const componentSearchOptions = useMemo<SearchKeywordOption[]>(
+    () =>
+      sampleEntries.map((entry) => ({
+        id: `${entry.modulePath.includes('/widgets/') ? 'widget' : 'component'}:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+        label: entry.sampleMeta.title,
+        group: entry.modulePath.includes('/widgets/') ? 'Widget' : 'Component',
+        keywords: [
+          entry.sampleMeta.componentId,
+          entry.sampleMeta.id,
+          entry.sampleMeta.category,
+          entry.sampleMeta.kind ?? '',
+          entry.sampleMeta.variantLabel ?? '',
+        ].filter(Boolean),
+        description: entry.sampleMeta.description,
+        onSelect: () => {},
+      })),
+    [sampleEntries],
+  );
+  const componentSampleMap = useMemo(
+    () =>
+      new Map(
+        sampleEntries.map((entry) => [
+          `${entry.modulePath.includes('/widgets/') ? 'widget' : 'component'}:${entry.sampleMeta.componentId}:${entry.sampleMeta.id}`,
+          entry,
+        ]),
+      ),
+    [sampleEntries],
+  );
+
+  useLayoutEffect(() => {
+    if (!savedLayoutViewId || !selectedSavedLayoutRecord) {
+      setSavedLayoutFitScale(1);
+      setSavedLayoutFitSize(null);
+      return;
+    }
+
+    const viewport = savedLayoutFitViewportRef.current;
+    const content = savedLayoutFitContentRef.current;
+
+    if (!viewport || !content) {
+      return;
+    }
+
+    let animationFrameId = 0;
+    let resizeObserver: ResizeObserver | null = null;
+    let mutationObserver: MutationObserver | null = null;
+
+    const measure = () => {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = window.requestAnimationFrame(() => {
+        const availableWidth = viewport.clientWidth;
+        const availableHeight = viewport.clientHeight;
+        const width = Math.ceil(content.offsetWidth);
+        const height = Math.ceil(content.offsetHeight);
+
+        if (!availableWidth || !availableHeight || !width || !height) {
+          return;
+        }
+
+        const nextScale = Math.min(1, availableWidth / width, availableHeight / height);
+        setSavedLayoutFitScale((previous) => (Math.abs(previous - nextScale) < 0.001 ? previous : nextScale));
+        setSavedLayoutFitSize((previous) =>
+          previous && previous.width === width && previous.height === height ? previous : { width, height },
+        );
+      });
+    };
+
+    measure();
+
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        measure();
+      });
+      resizeObserver.observe(viewport);
+      resizeObserver.observe(content);
+    }
+
+    if (typeof MutationObserver !== 'undefined') {
+      mutationObserver = new MutationObserver(() => {
+        measure();
+      });
+      mutationObserver.observe(content, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+      });
+    }
+
+    window.addEventListener('resize', measure);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, [savedLayoutViewId, selectedSavedLayoutRecord, sampleEntries.length]);
+
+  const handleSaveLayout = async () => {
+    if (!layoutTree) {
+      messageApi.warning('저장할 레이아웃을 먼저 만들어 주세요.');
+      return;
+    }
+
+    const trimmedName = layoutName.trim();
+    if (!trimmedName) {
+      messageApi.warning('레이아웃 이름을 입력해 주세요.');
+      return;
+    }
+
+    setIsSaving(true);
+
+    const now = new Date().toISOString();
+    const existingRecord = savedLayouts.find((record) => record.name === trimmedName);
+    const nextRecord: SavedLayoutRecord = {
+      id: existingRecord?.id ?? `layout-${Date.now()}`,
+      name: trimmedName,
+      createdAt: existingRecord?.createdAt ?? now,
+      updatedAt: now,
+      axis,
+      sizeUnit,
+      primarySize,
+      primaryMin,
+      secondaryMin,
+      resizable,
+      selectedLeafId,
+      totalPanes,
+      summary: layoutSummary,
+      tree: layoutTree,
+    };
+
+    try {
+      await saveLayout(nextRecord);
+      await refreshSavedLayouts();
+      setActiveSavedLayoutId(nextRecord.id);
+      setSavedLayoutPreviewId(nextRecord.id);
+      messageApi.success(existingRecord ? '기존 레이아웃을 덮어썼습니다.' : '레이아웃을 저장했습니다.');
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '레이아웃 저장에 실패했습니다.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleLoadLayout = (record: SavedLayoutRecord) => {
+    const nextTree = record.tree as LayoutNode;
+    setLayoutTree(nextTree);
+    setSelectedLeafId(record.selectedLeafId);
+    setCollapsedLeafIds([]);
+    setAxis(record.axis);
+    setSizeUnit(record.sizeUnit);
+    setPrimarySize(record.primarySize);
+    setPrimaryMin(record.primaryMin);
+    setSecondaryMin(record.secondaryMin);
+    setResizable(record.resizable);
+    setLayoutName(record.name);
+    setActiveSavedLayoutId(record.id);
+    setSavedLayoutPreviewId(record.id);
+    nodeIdRef.current = resolveNextNodeSequence(nextTree);
+    messageApi.success(`"${record.name}" 레이아웃을 불러왔습니다.`);
+  };
+
+  const handleDeleteLayout = async (record: SavedLayoutRecord) => {
+    try {
+      await deleteLayout(record.id);
+      await refreshSavedLayouts();
+
+      if (activeSavedLayoutId === record.id) {
+        setActiveSavedLayoutId(null);
+      }
+
+      if (savedLayoutPreviewId === record.id) {
+        const fallbackRecord = savedLayouts.find((item) => item.id !== record.id) ?? null;
+        setSavedLayoutPreviewId(fallbackRecord?.id ?? null);
+      }
+
+      messageApi.success(`"${record.name}" 레이아웃을 삭제했습니다.`);
+    } catch (error) {
+      messageApi.error(error instanceof Error ? error.message : '레이아웃 삭제에 실패했습니다.');
+    }
+  };
+
+  const openComponentSelector = (leafId: string) => {
+    setComponentSelectorLeafId(leafId);
+    setIsComponentSelectorOpen(true);
+  };
+
+  const handleSelectComponent = (option: SearchKeywordOption) => {
+    if (!componentSelectorLeafId) {
+      return;
+    }
+
+    setLayoutTree((previous) =>
+      previous
+        ? updateLeafNode(previous, componentSelectorLeafId, (current) => ({
+            ...current,
+            componentBinding: {
+              optionId: option.id,
+              label: option.label,
+              description: option.description,
+              keywords: option.keywords ?? [],
+            },
+          }))
+        : previous,
+    );
+    setActiveSavedLayoutId(null);
+    setIsComponentSelectorOpen(false);
+    messageApi.success(`"${option.label}" 컴포넌트를 section에 배치했습니다.`);
+  };
+
+  const updateSelectedLeafOptions = (updater: (current: LayoutLeafNode) => LayoutLeafNode) => {
+    if (!layoutTree || !selectedLeafId) {
+      messageApi.warning('먼저 수정할 section을 선택해 주세요.');
+      return;
+    }
+
+    setLayoutTree((previous) => (previous ? updateLeafNode(previous, selectedLeafId, updater) : previous));
+    setActiveSavedLayoutId(null);
+  };
+
+  const applySettingsToSelectedSection = () => {
+    if (!layoutTree || !selectedSplit) {
+      messageApi.warning('먼저 수정할 section을 선택해 주세요.');
+      return;
+    }
+
+    setLayoutTree((previous) =>
+      previous
+        ? updateSplitNode(previous, selectedSplit.id, (current) => ({
+            ...current,
+            axis,
+            sizeUnit,
+            primarySize: normalizeValue(primarySize, sizeUnit),
+            primaryMin: normalizeValue(primaryMin, sizeUnit),
+            secondaryMin: normalizeValue(secondaryMin, sizeUnit),
+            resizable,
+          }))
+        : previous,
+    );
+    setActiveSavedLayoutId(null);
+    messageApi.success('선택 section 설정을 현재 프리셋으로 갱신했습니다.');
+  };
+
+  const renderNode = (
+    node: LayoutNode,
+    depth = 1,
+    options?: {
+      selectedId?: string | null;
+      selectable?: boolean;
+      onSelect?: (id: string) => void;
+      previewMode?: boolean;
+      previewSurface?: boolean;
+      hidePaneLabel?: boolean;
+      showComponentActions?: boolean;
+    },
+  ): React.ReactNode => {
+    const selectedId = options?.selectedId ?? selectedLeafId;
+    const selectable = options?.selectable ?? true;
+    const onSelect = options?.onSelect ?? setSelectedLeafId;
+    const previewMode = options?.previewMode ?? false;
+    const previewSurface = options?.previewSurface ?? previewMode;
+    const hidePaneLabel = options?.hidePaneLabel ?? previewMode;
+    const showComponentActions = options?.showComponentActions ?? (!previewMode && selectable);
+    const canRenderToggleActions = showComponentActions || previewMode;
+
+    if (node.type === 'leaf') {
+      const isSelected = node.id === selectedId;
+      const boundComponentEntry = node.componentBinding ? componentSampleMap.get(node.componentBinding.optionId) : null;
+      const BoundSample = boundComponentEntry?.Sample;
+      const showSelectComponentButton = !BoundSample && showComponentActions;
+      const showChangeComponentButton = !!BoundSample && showComponentActions && isSelected;
+      const showPaneToolbar = showSelectComponentButton || showChangeComponentButton;
+      const showPaneLabel = !hidePaneLabel && (showSelectComponentButton || showChangeComponentButton);
+
+      return (
+        <section
+          role={selectable ? 'button' : undefined}
+          tabIndex={selectable ? 0 : undefined}
+          className={[
+            'layout-playground__pane',
+            TONE_CLASS_NAMES[node.tone],
+            selectable ? '' : 'layout-playground__pane--readonly',
+            previewMode ? 'layout-playground__pane--preview' : '',
+            previewSurface ? 'layout-playground__pane--surface' : '',
+            isSelected ? 'layout-playground__pane--selected' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          onClick={() => {
+            if (selectable) {
+              onSelect(node.id);
+            }
+          }}
+          onKeyDown={(event) => {
+            if (selectable && (event.key === 'Enter' || event.key === ' ')) {
+              event.preventDefault();
+              onSelect(node.id);
+            }
+          }}
+        >
+          {showPaneToolbar ? (
+            <div
+              className={[
+                'layout-playground__pane-toolbar',
+                previewMode ? 'layout-playground__pane-toolbar--overlay' : '',
+                !showPaneLabel ? 'layout-playground__pane-toolbar--compact' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {showPaneLabel ? <Text className="layout-playground__pane-label">{node.label}</Text> : null}
+              {showChangeComponentButton ? (
+                <Button
+                  size="small"
+                  icon={<DeploymentUnitOutlined />}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    openComponentSelector(node.id);
+                  }}
+                >
+                  변경
+                </Button>
+              ) : null}
+              {showSelectComponentButton ? (
+                <Button
+                  size="small"
+                  type="primary"
+                  icon={<DeploymentUnitOutlined />}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    openComponentSelector(node.id);
+                  }}
+                >
+                  컴포넌트 선택
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+          {BoundSample ? (
+            <div className="layout-playground__pane-component-body">
+              <BoundSample />
+            </div>
+          ) : (
+            <div className="layout-playground__pane-placeholder">
+              {!previewSurface && !previewMode ? (
+                <Text type="secondary">
+                  {hidePaneLabel ? '섹션을 선택한 뒤 컴포넌트를 배치하세요.' : isSelected ? '선택된 영역' : `Depth ${depth}`}
+                </Text>
+              ) : null}
+            </div>
+          )}
+        </section>
+      );
+    }
+
+    const primaryPanelSize = formatPanelValue(node.primarySize, node.sizeUnit);
+    const primaryPanelMin = formatPanelValue(node.primaryMin, node.sizeUnit);
+    const secondaryPanelMin = formatPanelValue(node.secondaryMin, node.sizeUnit);
+    const collapsedChildIndex = node.children.findIndex((child) => child.type === 'leaf' && collapsedLeafIds.includes(child.id));
+    const toggleTargets: LayoutToggleTarget[] = node.children.flatMap((child) => {
+      if (child.type !== 'leaf' || !child.showHideAction) {
+        return [];
+      }
+
+      return [
+        {
+          id: child.id,
+          label: child.label,
+          collapsed: collapsedLeafIds.includes(child.id),
+        },
+      ];
+    });
+
+    const renderToggleButtons = () => {
+      if (!canRenderToggleActions || !toggleTargets.length) {
+        return null;
+      }
+
+      return (
+        <div
+          className={[
+            'layout-playground__splitter-toggle-dock',
+            node.axis === 'horizontal'
+              ? 'layout-playground__splitter-toggle-dock--horizontal'
+              : 'layout-playground__splitter-toggle-dock--vertical',
+          ].join(' ')}
+        >
+          {toggleTargets.map((target, index) => {
+            const icon =
+              node.axis === 'horizontal'
+                ? target.collapsed
+                  ? index === 0
+                    ? <CaretRightOutlined />
+                    : <CaretLeftOutlined />
+                  : index === 0
+                    ? <CaretLeftOutlined />
+                    : <CaretRightOutlined />
+                : target.collapsed
+                  ? index === 0
+                    ? <CaretDownOutlined />
+                    : <CaretUpOutlined />
+                  : index === 0
+                    ? <CaretUpOutlined />
+                    : <CaretDownOutlined />;
+
+            return (
+              <Button
+                key={target.id}
+                size="small"
+                type={target.collapsed ? 'primary' : 'default'}
+                icon={icon}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setCollapsedLeafIds((previous) =>
+                    target.collapsed ? previous.filter((id) => id !== target.id) : [...previous, target.id],
+                  );
+                }}
+              >
+                {target.collapsed ? `${target.label} 펼치기` : `${target.label} 접기`}
+              </Button>
+            );
+          })}
+        </div>
+      );
+    };
+
+    if (collapsedChildIndex >= 0) {
+      const expandedChild = node.children[collapsedChildIndex === 0 ? 1 : 0];
+
+      return (
+        <div
+          className={[
+            'layout-playground__splitter',
+            `layout-playground__splitter--depth-${Math.min(depth, 4)}`,
+            previewMode ? 'layout-playground__splitter--preview' : '',
+            'layout-playground__splitter--collapsed',
+            node.axis === 'horizontal'
+              ? 'layout-playground__splitter--collapsed-horizontal'
+              : 'layout-playground__splitter--collapsed-vertical',
+          ].join(' ')}
+        >
+          {renderNode(expandedChild, depth + 1, options)}
+          {renderToggleButtons()}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={[
+          'layout-playground__splitter',
+          `layout-playground__splitter--depth-${Math.min(depth, 4)}`,
+          previewMode ? 'layout-playground__splitter--preview' : '',
+        ].join(' ')}
+      >
+        <Splitter
+          layout={node.axis}
+          className="layout-playground__splitter-frame"
+          onResize={(sizes) => {
+            if (!selectable) {
+              return;
+            }
+
+            setLayoutTree((previous) =>
+              previous
+                ? updateSplitNode(previous, node.id, (current) => ({
+                    ...current,
+                    previewSizes: sizes,
+                  }))
+                : previous,
+            );
+            setActiveSavedLayoutId(null);
+          }}
+        >
+          <Splitter.Panel defaultSize={primaryPanelSize} min={primaryPanelMin} resizable={node.resizable}>
+            {renderNode(node.children[0], depth + 1, options)}
+          </Splitter.Panel>
+          <Splitter.Panel min={secondaryPanelMin} resizable={node.resizable}>
+            {renderNode(node.children[1], depth + 1, options)}
+          </Splitter.Panel>
+        </Splitter>
+        {renderToggleButtons()}
+      </div>
+    );
+  };
+
+  const showSavedLayoutGallery = showSavedLayoutsOnly || isSavedLayoutsOpen;
+
+  return (
+    <>
+      {messageContextHolder}
+      <SearchCommandModal
+        open={isComponentSelectorOpen}
+        options={componentSearchOptions}
+        mode="navigate"
+        title="컴포넌트 조회"
+        description="섹션에 채울 컴포넌트나 위젯을 찾습니다."
+        placeholder="이름이나 키워드 검색"
+        submitHint="선택하면 현재 section에 바로 채웁니다."
+        onClose={() => {
+          setIsComponentSelectorOpen(false);
+        }}
+        onSelectOption={handleSelectComponent}
+      />
+      {savedLayoutViewId ? (
+        selectedSavedLayoutRecord ? (
+          <div className="layout-playground__fullscreen-shell layout-playground__fullscreen-shell--embedded layout-playground__fullscreen-shell--saved-fit">
+            <div className="layout-playground__saved-fit-viewport" ref={savedLayoutFitViewportRef}>
+              <div
+                className="layout-playground__saved-fit-stage"
+                style={
+                  savedLayoutFitSize
+                    ? {
+                        width: `${savedLayoutFitSize.width * savedLayoutFitScale}px`,
+                        height: `${savedLayoutFitSize.height * savedLayoutFitScale}px`,
+                      }
+                    : undefined
+                }
+              >
+                <div
+                  ref={savedLayoutFitContentRef}
+                  className="layout-playground__saved-detail layout-playground__saved-detail--fit"
+                  style={{
+                    transform: `scale(${savedLayoutFitScale})`,
+                    width: savedLayoutFitSize ? `${savedLayoutFitSize.width}px` : '100%',
+                    height: savedLayoutFitSize ? `${savedLayoutFitSize.height}px` : '100%',
+                  }}
+                >
+                  <div className="layout-playground__saved-detail-bar">
+                    <Space wrap size={8}>
+                      <Tag color="cyan">Layout Editor</Tag>
+                      <Text strong>{selectedSavedLayoutRecord.name}</Text>
+                    </Space>
+                    <Space wrap size={8}>
+                      <Tag color="geekblue">{PRESET_LABELS[selectedSavedLayoutRecord.axis]}</Tag>
+                      <Tag>{selectedSavedLayoutRecord.totalPanes} panes</Tag>
+                    </Space>
+                  </div>
+                  <div className="layout-playground__preview-frame layout-playground__preview-frame--fullscreen layout-playground__preview-frame--saved-detail">
+                    {renderNode(selectedSavedLayoutRecord.tree as LayoutNode, 1, {
+                      selectedId: selectedSavedLayoutRecord.selectedLeafId,
+                      selectable: false,
+                      previewMode: true,
+                      previewSurface: isSavedLayoutFitMode,
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="layout-playground__fullscreen-shell layout-playground__fullscreen-shell--embedded">
+            <div className="layout-playground__empty-state layout-playground__empty-state--fullscreen">
+              <Tag color="default">Saved Layout</Tag>
+              <Title level={4}>저장된 레이아웃을 찾을 수 없습니다.</Title>
+              <Paragraph>선택한 레이아웃이 삭제되었거나 아직 목록을 불러오지 못했습니다.</Paragraph>
+            </div>
+          </div>
+        )
+      ) : showSavedLayoutGallery ? (
+        <div className="layout-playground__fullscreen-shell layout-playground__fullscreen-shell--embedded">
+          <div className="layout-playground__saved-browser">
+            {isLoadingSavedLayouts ? (
+              <div className="layout-playground__saved-browser-loading">
+                <List loading dataSource={[]} />
+              </div>
+            ) : savedLayouts.length ? (
+              <div
+                className="layout-playground__saved-gallery"
+                style={
+                  {
+                    '--layout-gallery-columns': String(savedLayoutGrid.columns),
+                    '--layout-gallery-rows': String(savedLayoutGrid.rows),
+                  } as CSSProperties
+                }
+              >
+                {savedLayouts.map((record) => (
+                  <article
+                    key={record.id}
+                    className={record.id === savedLayoutPreviewId ? 'layout-playground__saved-card layout-playground__saved-card--active' : 'layout-playground__saved-card'}
+                    onClick={() => {
+                      setSavedLayoutPreviewId(record.id);
+                    }}
+                  >
+                    <div className="layout-playground__saved-card-head">
+                      <Space wrap size={8}>
+                        <Text strong>{record.name}</Text>
+                        <Tag color="cyan">{PRESET_LABELS[record.axis]}</Tag>
+                      </Space>
+                      {!showSavedLayoutsOnly ? (
+                        <Space size={4} wrap>
+                          <Button
+                            key="load"
+                            type="link"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              handleLoadLayout(record);
+                              setIsSavedLayoutsOpen(false);
+                            }}
+                          >
+                            불러오기
+                          </Button>
+                          <Popconfirm
+                            key="delete"
+                            title="저장된 레이아웃을 삭제할까요?"
+                            okText="삭제"
+                            cancelText="취소"
+                            onConfirm={() => void handleDeleteLayout(record)}
+                          >
+                            <Button
+                              type="link"
+                              danger
+                              icon={<DeleteOutlined />}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                              }}
+                            >
+                              삭제
+                            </Button>
+                          </Popconfirm>
+                        </Space>
+                      ) : (
+                        <Tag>{record.totalPanes} panes</Tag>
+                      )}
+                    </div>
+                    <div className="layout-playground__preview-frame layout-playground__preview-frame--gallery">
+                      {renderNode(record.tree as LayoutNode, 1, {
+                        selectedId: record.selectedLeafId,
+                        selectable: false,
+                        previewMode: true,
+                      })}
+                    </div>
+                  </article>
+                ))}
+              </div>
+            ) : (
+              <div className="layout-playground__empty-state layout-playground__empty-state--fullscreen">
+                <Tag color="default">Saved Layouts</Tag>
+                <Title level={4}>저장된 레이아웃이 없습니다.</Title>
+                <Paragraph>편집 화면에서 레이아웃을 저장하면 이 화면에 전체 목록이 바로 표시됩니다.</Paragraph>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <Card title="Layout Editor" className="app-main-card layout-playground__editor-card" bordered={false}>
+        <Space direction="vertical" size={20} className="app-main-stack layout-playground__editor-stack">
+          <div className="layout-playground__hero">
+            <div>
+              <Tag color="cyan">Play / Layout Editor</Tag>
+              <Title level={4} className="layout-playground__title">
+                Flex 분할 레이아웃을 바로 미리보기로 확인합니다.
+              </Title>
+              <Paragraph className="app-main-copy">
+                처음에는 상하/좌우 시작 방향을 선택하고, 이후에는 크기, 최소 크기, 리사이즈 허용 여부 프리셋으로 선택한 section을 계속 분할해 중첩 레이아웃을 검증할 수 있습니다.
+              </Paragraph>
+            </div>
+            <div className="layout-playground__meta">
+              <span>
+                <AppstoreOutlined />
+                <Text>총 섹션: {totalPanes}</Text>
+              </span>
+              <span>
+                <DragOutlined />
+                <Text>리사이즈 프리셋: {resizable ? '허용' : '고정'}</Text>
+              </span>
+              <span>
+                <ColumnWidthOutlined />
+                <Text>선택 섹션: {selectedLeaf?.label ?? '없음'}</Text>
+              </span>
+              <span>
+                <Text>접기 버튼: {selectedLeaf?.showHideAction ? '사용' : '미사용'}</Text>
+              </span>
+            </div>
+          </div>
+
+          <div className="layout-playground__controls">
+            <div className="layout-playground__control-card">
+              <Text strong>시작 / 새 분할 방향</Text>
+              <Radio.Group
+                optionType="button"
+                buttonStyle="solid"
+                value={axis}
+                onChange={(event) => {
+                  setAxis(event.target.value as LayoutAxis);
+                }}
+                options={[
+                  { value: 'horizontal', label: <span><ColumnWidthOutlined /> 좌우</span> },
+                  { value: 'vertical', label: <span><ColumnHeightOutlined /> 상하</span> },
+                ]}
+              />
+            </div>
+
+            <div className="layout-playground__control-card">
+              <Text strong>크기 단위</Text>
+              <Radio.Group
+                optionType="button"
+                buttonStyle="solid"
+                value={sizeUnit}
+                onChange={(event) => {
+                  setSizeUnit(event.target.value as SizeUnit);
+                }}
+                options={[
+                  { value: '%', label: '%' },
+                  { value: 'px', label: 'px' },
+                ]}
+              />
+            </div>
+
+            <div className="layout-playground__control-card">
+              <Text strong>리사이즈 허용</Text>
+              <Switch
+                checked={resizable}
+                checkedChildren="ON"
+                unCheckedChildren="OFF"
+                onChange={(checked) => {
+                  setResizable(checked);
+                }}
+              />
+            </div>
+
+            <div className="layout-playground__control-card">
+              <Text strong>선택 section 옵션</Text>
+              <Space direction="vertical" size={8}>
+                <Text type="secondary">{selectedLeaf?.label ?? '먼저 section을 선택하세요.'}</Text>
+                <Space wrap>
+                  <Text>접기 버튼</Text>
+                  <Switch
+                    checked={selectedLeaf?.showHideAction ?? false}
+                    checkedChildren="ON"
+                    unCheckedChildren="OFF"
+                    disabled={!selectedLeaf}
+                    onChange={(checked) => {
+                      updateSelectedLeafOptions((current) => ({
+                        ...current,
+                        showHideAction: checked,
+                      }));
+                    }}
+                  />
+                </Space>
+              </Space>
+            </div>
+
+            <label className="layout-playground__control-card">
+              <Text strong>기본 크기</Text>
+              <InputNumber
+                min={sizeUnit === '%' ? 10 : 120}
+                max={sizeUnit === '%' ? 90 : 960}
+                value={primarySize}
+                addonAfter={sizeUnit}
+                onChange={(value) => {
+                  setPrimarySize(normalizeValue(Number(value ?? 0), sizeUnit));
+                }}
+              />
+            </label>
+
+            <label className="layout-playground__control-card">
+              <Text strong>1번 패널 최소</Text>
+              <InputNumber
+                min={sizeUnit === '%' ? 10 : 80}
+                max={sizeUnit === '%' ? 80 : 720}
+                value={primaryMin}
+                addonAfter={sizeUnit}
+                onChange={(value) => {
+                  setPrimaryMin(normalizeValue(Number(value ?? 0), sizeUnit));
+                }}
+              />
+            </label>
+
+            <label className="layout-playground__control-card">
+              <Text strong>2번 패널 최소</Text>
+              <InputNumber
+                min={sizeUnit === '%' ? 10 : 80}
+                max={sizeUnit === '%' ? 80 : 720}
+                value={secondaryMin}
+                addonAfter={sizeUnit}
+                onChange={(value) => {
+                  setSecondaryMin(normalizeValue(Number(value ?? 0), sizeUnit));
+                }}
+              />
+            </label>
+          </div>
+
+          <div className="layout-playground__actions">
+            <Text strong>선택 section 추가 분할</Text>
+            <Text type="secondary">
+              {selectedSplit
+                ? `현재 선택 section 부모 분할: ${PRESET_LABELS[selectedSplit.axis]} / ${selectedSplit.sizeUnit}`
+                : '선택된 section의 상위 분할이 없으면 아직 방향 변경 대상이 없습니다.'}
+            </Text>
+            <Space wrap>
+              <Button type="primary" icon={<PlusOutlined />} onClick={() => splitSelectedLeaf(axis)} disabled={!layoutTree}>
+                현재 방향으로 분할
+              </Button>
+              <Button icon={<ColumnWidthOutlined />} onClick={() => splitSelectedLeaf('horizontal')} disabled={!layoutTree}>
+                좌우 추가
+              </Button>
+              <Button icon={<ColumnHeightOutlined />} onClick={() => splitSelectedLeaf('vertical')} disabled={!layoutTree}>
+                상하 추가
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={applySettingsToSelectedSection} disabled={!selectedSplit}>
+                선택 section 설정 적용
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={resetLayout}>
+                레이아웃 초기화
+              </Button>
+            </Space>
+          </div>
+
+          <div className="layout-playground__preview-wrap">
+            <div className="layout-playground__preview-head">
+              <Text strong>Preview</Text>
+              <Text type="secondary">
+                처음에는 시작 방향을 선택하고, 이후에는 선택된 section을 클릭한 뒤 새 프리셋으로 계속 중첩 분할할 수 있습니다.
+              </Text>
+            </div>
+
+            <div className="layout-playground__preview-frame">
+              {layoutTree ? (
+                renderNode(layoutTree, 1, {
+                  previewSurface: true,
+                  hidePaneLabel: true,
+                  showComponentActions: true,
+                })
+              ) : (
+                <div className="layout-playground__empty-state">
+                  <Tag color="blue">Step 1</Tag>
+                  <Title level={4}>처음 시작할 분할 방향을 선택하세요.</Title>
+                  <Paragraph>
+                    첫 레이아웃을 만든 뒤에는 현재 프리셋 그대로 재귀 분할과 리사이즈 프리뷰를 바로 확인할 수 있습니다.
+                  </Paragraph>
+                  <Space wrap>
+                    <Button type="primary" icon={<ColumnWidthOutlined />} onClick={() => startLayout('horizontal')}>
+                      좌우로 시작
+                    </Button>
+                    <Button icon={<ColumnHeightOutlined />} onClick={() => startLayout('vertical')}>
+                      상하로 시작
+                    </Button>
+                  </Space>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="layout-playground__bottom-menu">
+            <div className="layout-playground__bottom-menu-copy">
+              <Text strong>레이아웃 저장 / 목록</Text>
+              <Paragraph className="layout-playground__storage-copy">
+                현재 편집 결과를 work-db에 바로 저장하고, 저장 목록은 별도 모달 없이 같은 화면에서 전체 높이로 확인합니다.
+              </Paragraph>
+              <Text type="secondary">
+                모바일 제스처 검색으로 여는 Window UI 는 레이아웃 편집과 별개로 메인 콘텐츠 전체 영역에서 전역 창으로 열립니다.
+              </Text>
+            </div>
+            <div className="layout-playground__bottom-menu-actions">
+              <Tag color={activeSavedLayoutId ? 'blue' : 'default'}>
+                {activeSavedLayoutId ? '저장본 불러옴' : '임시 편집중'}
+              </Tag>
+              <Space.Compact className="layout-playground__storage-input">
+                <Input
+                  placeholder="예: 운영 대시보드 3단"
+                  value={layoutName}
+                  onChange={(event) => {
+                    setLayoutName(event.target.value);
+                  }}
+                  onPressEnter={() => {
+                    void handleSaveLayout();
+                  }}
+                />
+                <Button type="primary" icon={<SaveOutlined />} loading={isSaving} onClick={() => void handleSaveLayout()}>
+                  저장
+                </Button>
+              </Space.Compact>
+              <Button
+                icon={<AppstoreOutlined />}
+                onClick={() => {
+                  setSavedLayoutPreviewId((previous) => previous ?? activeSavedLayoutId ?? savedLayouts[0]?.id ?? null);
+                  setIsSavedLayoutsOpen(true);
+                }}
+              >
+                저장 목록 보기
+              </Button>
+            </div>
+          </div>
+
+          <Divider className="layout-playground__divider" />
+
+          <div className="layout-playground__code">
+            <Text strong>적용 기준</Text>
+            <pre className="layout-playground__code-block">{layoutCss}</pre>
+          </div>
+        </Space>
+        </Card>
+      )}
+    </>
+  );
+}
diff --git a/src/views/play/layoutStorage.ts b/src/views/play/layoutStorage.ts
new file mode 100755
index 0000000..eb1e346
--- /dev/null
+++ b/src/views/play/layoutStorage.ts
@@ -0,0 +1,313 @@
+import { appendClientIdHeader } from '../../app/main/clientIdentity';
+import { getRegisteredAccessToken } from '../../app/main/tokenAccess';
+
+export type LayoutAxis = 'horizontal' | 'vertical';
+export type SizeUnit = 'px' | '%';
+
+export type SavedLayoutRecord = {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  axis: LayoutAxis;
+  sizeUnit: SizeUnit;
+  primarySize: number;
+  primaryMin: number;
+  secondaryMin: number;
+  resizable: boolean;
+  selectedLeafId: string | null;
+  totalPanes: number;
+  summary: string;
+  tree: unknown;
+};
+
+type SavedLayoutRow = {
+  id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+  axis: LayoutAxis;
+  size_unit: SizeUnit;
+  primary_size: number;
+  primary_min: number;
+  secondary_min: number;
+  resizable: boolean;
+  selected_leaf_id: string | null;
+  total_panes: number;
+  summary: string;
+  tree: unknown;
+};
+
+const WORK_SERVER_TIMEOUT_MS = 8000;
+const PLAY_LAYOUTS_TABLE = 'play_layouts';
+
+let setupPromise: Promise<void> | null = null;
+
+function resolveWorkServerBaseUrl() {
+  if (import.meta.env.VITE_WORK_SERVER_URL) {
+    return import.meta.env.VITE_WORK_SERVER_URL;
+  }
+
+  return '/api';
+}
+
+function resolveWorkServerFallbackBaseUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const hostname = window.location.hostname;
+  const isLocalWorkServerHost =
+    hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0';
+
+  if (!isLocalWorkServerHost) {
+    return null;
+  }
+
+  const fallbackUrl = new URL(window.location.origin);
+  fallbackUrl.port = '3100';
+  fallbackUrl.pathname = '/api';
+  fallbackUrl.search = '';
+  fallbackUrl.hash = '';
+
+  return fallbackUrl.toString().replace(/\/+$/, '');
+}
+
+const WORK_SERVER_BASE_URL = resolveWorkServerBaseUrl();
+const WORK_SERVER_FALLBACK_BASE_URL =
+  !import.meta.env.VITE_WORK_SERVER_URL && WORK_SERVER_BASE_URL === '/api'
+    ? resolveWorkServerFallbackBaseUrl()
+    : null;
+
+class LayoutStorageError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'LayoutStorageError';
+    this.status = status;
+  }
+}
+
+async function requestOnce<T>(baseUrl: string, path: string, init?: RequestInit): Promise<T> {
+  const headers = appendClientIdHeader(init?.headers);
+  const hasBody = init?.body !== undefined && init.body !== null;
+  const method = init?.method?.toUpperCase() ?? 'GET';
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => {
+    controller.abort();
+  }, WORK_SERVER_TIMEOUT_MS);
+
+  if (hasBody && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const token = getRegisteredAccessToken();
+  if (token && !headers.has('X-Access-Token')) {
+    headers.set('X-Access-Token', token);
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+      signal: controller.signal,
+      cache: init?.cache ?? (method === 'GET' ? 'no-store' : undefined),
+    });
+  } catch (error) {
+    clearTimeout(timeoutId);
+
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new LayoutStorageError('work-db 응답이 지연됩니다. 잠시 후 다시 시도해 주세요.', 408);
+    }
+
+    throw error;
+  }
+
+  clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    const text = await response.text();
+    let message = text || '레이아웃 저장소 요청에 실패했습니다.';
+
+    try {
+      const payload = JSON.parse(text) as { message?: string };
+      message = payload.message || message;
+    } catch {
+      // Keep the raw response text when JSON parsing is not available.
+    }
+
+    throw new LayoutStorageError(message, response.status);
+  }
+
+  const contentType = response.headers.get('content-type') ?? '';
+
+  if (!contentType.toLowerCase().includes('application/json')) {
+    const text = await response.text();
+    throw new LayoutStorageError(text ? 'work-db 응답이 JSON이 아닙니다.' : 'work-db 응답을 확인할 수 없습니다.', 502);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  try {
+    return await requestOnce<T>(WORK_SERVER_BASE_URL, path, init);
+  } catch (error) {
+    const shouldRetryWithFallback =
+      WORK_SERVER_FALLBACK_BASE_URL &&
+      WORK_SERVER_FALLBACK_BASE_URL !== WORK_SERVER_BASE_URL &&
+      (error instanceof LayoutStorageError
+        ? error.status === 404 || error.status === 408 || error.status === 502
+        : error instanceof Error && (/not found/i.test(error.message) || /404/.test(error.message)));
+
+    if (!shouldRetryWithFallback) {
+      throw error;
+    }
+
+    return requestOnce<T>(WORK_SERVER_FALLBACK_BASE_URL, path, init);
+  }
+}
+
+function toRecord(row: SavedLayoutRow): SavedLayoutRecord {
+  return {
+    id: row.id,
+    name: row.name,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+    axis: row.axis,
+    sizeUnit: row.size_unit,
+    primarySize: Number(row.primary_size),
+    primaryMin: Number(row.primary_min),
+    secondaryMin: Number(row.secondary_min),
+    resizable: Boolean(row.resizable),
+    selectedLeafId: row.selected_leaf_id,
+    totalPanes: Number(row.total_panes),
+    summary: row.summary,
+    tree: row.tree,
+  };
+}
+
+function toRow(record: SavedLayoutRecord): SavedLayoutRow {
+  return {
+    id: record.id,
+    name: record.name,
+    created_at: record.createdAt,
+    updated_at: record.updatedAt,
+    axis: record.axis,
+    size_unit: record.sizeUnit,
+    primary_size: record.primarySize,
+    primary_min: record.primaryMin,
+    secondary_min: record.secondaryMin,
+    resizable: record.resizable,
+    selected_leaf_id: record.selectedLeafId,
+    total_panes: record.totalPanes,
+    summary: record.summary,
+    tree: record.tree,
+  };
+}
+
+async function ensureLayoutStorageTable() {
+  if (!setupPromise) {
+    setupPromise = (async () => {
+      const schemaResponse = await request<{ items: Array<{ table_name: string }> }>('/schema/tables');
+      const tableExists = schemaResponse.items.some((item) => item.table_name === PLAY_LAYOUTS_TABLE);
+
+      if (tableExists) {
+        return;
+      }
+
+      try {
+        await request<{ ok: boolean; tableName: string }>('/ddl/create-table', {
+          method: 'POST',
+          body: JSON.stringify({
+            tableName: PLAY_LAYOUTS_TABLE,
+            columns: [
+              { name: 'id', type: 'text', nullable: false, primary: true },
+              { name: 'name', type: 'text', nullable: false },
+              { name: 'created_at', type: 'timestamp with time zone', nullable: false },
+              { name: 'updated_at', type: 'timestamp with time zone', nullable: false },
+              { name: 'axis', type: 'text', nullable: false },
+              { name: 'size_unit', type: 'text', nullable: false },
+              { name: 'primary_size', type: 'integer', nullable: false },
+              { name: 'primary_min', type: 'integer', nullable: false },
+              { name: 'secondary_min', type: 'integer', nullable: false },
+              { name: 'resizable', type: 'boolean', nullable: false, defaultTo: true },
+              { name: 'selected_leaf_id', type: 'text', nullable: true },
+              { name: 'total_panes', type: 'integer', nullable: false },
+              { name: 'summary', type: 'text', nullable: false },
+              { name: 'tree', type: 'jsonb', nullable: false },
+            ],
+          }),
+        });
+      } catch (error) {
+        if (!(error instanceof LayoutStorageError) || !/already exists/i.test(error.message)) {
+          throw error;
+        }
+      }
+    })().catch((error) => {
+      setupPromise = null;
+      throw error;
+    });
+  }
+
+  return setupPromise;
+}
+
+export async function listSavedLayouts() {
+  await ensureLayoutStorageTable();
+
+  const response = await request<{ rows: SavedLayoutRow[] }>(`/crud/${PLAY_LAYOUTS_TABLE}/select`, {
+    method: 'POST',
+    body: JSON.stringify({
+      orderBy: [{ field: 'updated_at', direction: 'desc' }],
+      limit: 200,
+    }),
+  });
+
+  return response.rows.map(toRecord);
+}
+
+export async function saveLayout(record: SavedLayoutRecord) {
+  await ensureLayoutStorageTable();
+
+  const row = toRow(record);
+  const existing = await request<{ rows: SavedLayoutRow[] }>(`/crud/${PLAY_LAYOUTS_TABLE}/select`, {
+    method: 'POST',
+    body: JSON.stringify({
+      where: [{ field: 'id', operator: 'eq', value: record.id }],
+      limit: 1,
+    }),
+  });
+
+  if (existing.rows.length > 0) {
+    await request<{ ok: boolean }>(`/crud/${PLAY_LAYOUTS_TABLE}/update`, {
+      method: 'PATCH',
+      body: JSON.stringify({
+        data: row,
+        where: [{ field: 'id', operator: 'eq', value: record.id }],
+      }),
+    });
+    return;
+  }
+
+  await request<{ ok: boolean }>(`/crud/${PLAY_LAYOUTS_TABLE}/insert`, {
+    method: 'POST',
+    body: JSON.stringify({
+      data: row,
+    }),
+  });
+}
+
+export async function deleteLayout(id: string) {
+  await ensureLayoutStorageTable();
+
+  await request<{ ok: boolean }>(`/crud/${PLAY_LAYOUTS_TABLE}/delete`, {
+    method: 'DELETE',
+    body: JSON.stringify({
+      where: [{ field: 'id', operator: 'eq', value: id }],
+    }),
+  });
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100755
index 0000000..64251fb
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
diff --git a/src/widgets/api-sample-card/ApiSampleCardWidget.tsx b/src/widgets/api-sample-card/ApiSampleCardWidget.tsx
new file mode 100755
index 0000000..04a75db
--- /dev/null
+++ b/src/widgets/api-sample-card/ApiSampleCardWidget.tsx
@@ -0,0 +1,44 @@
+import { AppstoreOutlined } from '@ant-design/icons';
+import { Space, Tag, Typography } from 'antd';
+import { forwardRef } from 'react';
+import { WidgetShell } from '../core';
+import type { SampleMeta, WidgetHandle } from '../core';
+
+const { Paragraph, Text } = Typography;
+
+export type ApiSampleCardWidgetProps = {
+  sampleMeta: SampleMeta;
+  cardWrapper?: boolean;
+  children: React.ReactNode;
+};
+
+export const ApiSampleCardWidget = forwardRef<WidgetHandle, ApiSampleCardWidgetProps>(
+  function ApiSampleCardWidget({ sampleMeta, cardWrapper, children }, ref) {
+    return (
+      <WidgetShell
+        ref={ref}
+        id={sampleMeta.id}
+        title={sampleMeta.title}
+        cardWrapper={cardWrapper}
+        features={[
+          'api-sample',
+          'component-sample',
+          'feature-registry',
+          'imperative-handle',
+          ...(sampleMeta.features ?? []),
+        ]}
+        featureSlot={
+          <Tag icon={<AppstoreOutlined />} color="geekblue">
+            {sampleMeta.category}
+          </Tag>
+        }
+      >
+        <Space direction="vertical" size={12} className="widget-shell__body">
+          <Paragraph className="widget-shell__description">{sampleMeta.description}</Paragraph>
+          <Text code>{sampleMeta.id}</Text>
+          <div>{children}</div>
+        </Space>
+      </WidgetShell>
+    );
+  },
+);
diff --git a/src/widgets/api-sample-card/index.ts b/src/widgets/api-sample-card/index.ts
new file mode 100755
index 0000000..315cd09
--- /dev/null
+++ b/src/widgets/api-sample-card/index.ts
@@ -0,0 +1,2 @@
+export { ApiSampleCardWidget } from './ApiSampleCardWidget';
+export type { ApiSampleCardWidgetProps } from './ApiSampleCardWidget';
diff --git a/src/widgets/api-sample-card/samples/Sample.tsx b/src/widgets/api-sample-card/samples/Sample.tsx
new file mode 100755
index 0000000..dc467f3
--- /dev/null
+++ b/src/widgets/api-sample-card/samples/Sample.tsx
@@ -0,0 +1,61 @@
+import { Button, Space, Typography } from 'antd';
+import { useRef } from 'react';
+import type { SampleMeta, SampleRenderProps, WidgetHandle } from '../../core';
+import { ApiSampleCardWidget } from '../ApiSampleCardWidget';
+
+const { Paragraph, Text } = Typography;
+
+export const sampleMeta: SampleMeta = {
+  id: 'api-sample-card-widget',
+  componentId: 'api-sample-card-widget',
+  title: 'API Sample Card Widget',
+  description: 'Wrapper, title, main content, feature tag를 공통 규칙으로 가지는 위젯 샘플입니다.',
+  category: 'Widgets',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 10,
+  features: ['api-sample', 'feature-registry', 'imperative-handle'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  const widgetRef = useRef<WidgetHandle>(null);
+
+  return (
+    <Space direction="vertical" size={12} className="widget-shell__body">
+      <Paragraph>
+        이 샘플은 실제 위젯 자체를 보여줍니다. 아래 버튼은{' '}
+        <Text strong>`useImperativeHandle`</Text>로 노출한 메서드를 호출합니다.
+      </Paragraph>
+
+      <Space wrap>
+        <Button
+          onClick={() => {
+            widgetRef.current?.focus();
+          }}
+        >
+          Widget Focus
+        </Button>
+        <Button
+          onClick={() => {
+            widgetRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }}
+        >
+          Scroll Into View
+        </Button>
+      </Space>
+
+      <ApiSampleCardWidget
+        ref={widgetRef}
+        sampleMeta={sampleMeta}
+        cardWrapper={!disableWidgetCardWrapper}
+      >
+        <Space direction="vertical" size={8}>
+          <Text code>GET /api/components/samples</Text>
+          <Text type="secondary">
+            컴포넌트 대표 샘플을 API 게시판 카드 위젯으로 재사용하는 예시입니다.
+          </Text>
+        </Space>
+      </ApiSampleCardWidget>
+    </Space>
+  );
+}
diff --git a/src/widgets/core/WidgetShell.tsx b/src/widgets/core/WidgetShell.tsx
new file mode 100755
index 0000000..4c03f70
--- /dev/null
+++ b/src/widgets/core/WidgetShell.tsx
@@ -0,0 +1,66 @@
+import { Card, Space, Tag, Typography } from 'antd';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { resolveWidgetFeatures } from './registry/widget-features';
+import type { WidgetHandle, WidgetShellProps } from './types/widget';
+
+const { Title } = Typography;
+
+export const WidgetShell = forwardRef<WidgetHandle, WidgetShellProps>(function WidgetShell(
+  { id, title, features = [], featureSlot, cardWrapper = true, children },
+  ref,
+) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const resolvedFeatures = resolveWidgetFeatures(features);
+  const hasHeader = Boolean(title) || resolvedFeatures.length > 0 || Boolean(featureSlot);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        wrapperRef.current?.focus();
+      },
+      scrollIntoView: (options) => {
+        wrapperRef.current?.scrollIntoView(options);
+      },
+      getId: () => id,
+      getFeatures: () => features,
+    }),
+    [features, id],
+  );
+
+  const content = (
+    <Space direction="vertical" size={16} className="widget-shell__stack">
+      {hasHeader ? (
+        <div className="widget-shell__header">
+          <Title level={4} className="widget-shell__title">
+            {title}
+          </Title>
+          <Space size={[8, 8]} wrap>
+            {resolvedFeatures.map((feature) => (
+              <Tag key={feature.key} color="blue">
+                {feature.label}
+              </Tag>
+            ))}
+            {featureSlot}
+          </Space>
+        </div>
+      ) : null}
+
+      <div className="widget-shell__content">{children}</div>
+    </Space>
+  );
+
+  if (!cardWrapper) {
+    return (
+      <div ref={wrapperRef} className="widget-shell widget-shell--plain" tabIndex={-1}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <Card ref={wrapperRef} className="widget-shell" tabIndex={-1}>
+      {content}
+    </Card>
+  );
+});
diff --git a/src/widgets/core/index.ts b/src/widgets/core/index.ts
new file mode 100755
index 0000000..a2f81d2
--- /dev/null
+++ b/src/widgets/core/index.ts
@@ -0,0 +1,12 @@
+export { WidgetShell } from './WidgetShell';
+export { resolveWidgetFeatures, widgetFeatureRegistry } from './registry/widget-features';
+export type {
+  SampleMeta,
+  SampleModule,
+  SampleRenderProps,
+  WidgetFeatureDefinition,
+  WidgetFeatureKey,
+  WidgetHandle,
+  WidgetRegistryItem,
+  WidgetShellProps,
+} from './types/widget';
diff --git a/src/widgets/core/registry/widget-features.ts b/src/widgets/core/registry/widget-features.ts
new file mode 100755
index 0000000..7e6e4e6
--- /dev/null
+++ b/src/widgets/core/registry/widget-features.ts
@@ -0,0 +1,33 @@
+import type { WidgetFeatureDefinition, WidgetFeatureKey } from '../types/widget';
+
+export const widgetFeatureRegistry: Record<WidgetFeatureKey, WidgetFeatureDefinition> = {
+  'api-sample': {
+    key: 'api-sample',
+    label: 'API Sample',
+    description: 'API 게시판 또는 문서에서 재사용할 수 있는 샘플입니다.',
+  },
+  docs: {
+    key: 'docs',
+    label: 'Docs',
+    description: '컴포넌트 문서와 연결되는 예제입니다.',
+  },
+  'component-sample': {
+    key: 'component-sample',
+    label: 'Component Sample',
+    description: '컴포넌트 단위 동작을 보여주는 샘플입니다.',
+  },
+  'imperative-handle': {
+    key: 'imperative-handle',
+    label: 'Imperative Handle',
+    description: '위젯 제어를 위해 useImperativeHandle을 사용합니다.',
+  },
+  'feature-registry': {
+    key: 'feature-registry',
+    label: 'Feature Registry',
+    description: '공통 feature registry를 통해 위젯 기능을 관리합니다.',
+  },
+};
+
+export function resolveWidgetFeatures(featureKeys: WidgetFeatureKey[] = []) {
+  return featureKeys.map((featureKey) => widgetFeatureRegistry[featureKey]);
+}
diff --git a/src/widgets/core/types/widget.ts b/src/widgets/core/types/widget.ts
new file mode 100755
index 0000000..74d8f09
--- /dev/null
+++ b/src/widgets/core/types/widget.ts
@@ -0,0 +1,58 @@
+import type { ComponentType, ReactNode } from 'react';
+
+export type WidgetFeatureKey =
+  | 'api-sample'
+  | 'docs'
+  | 'component-sample'
+  | 'imperative-handle'
+  | 'feature-registry';
+
+export type WidgetFeatureDefinition = {
+  key: WidgetFeatureKey;
+  label: string;
+  description: string;
+};
+
+export type WidgetRegistryItem = {
+  id: string;
+  title: string;
+  description: string;
+  features: WidgetFeatureKey[];
+};
+
+export type WidgetHandle = {
+  focus: () => void;
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+  getId: () => string;
+  getFeatures: () => WidgetFeatureKey[];
+};
+
+export type WidgetShellProps = {
+  id: string;
+  title: ReactNode;
+  features?: WidgetFeatureKey[];
+  featureSlot?: ReactNode;
+  cardWrapper?: boolean;
+  children: ReactNode;
+};
+
+export type SampleRenderProps = {
+  disableWidgetCardWrapper?: boolean;
+};
+
+export type SampleMeta = {
+  id: string;
+  componentId: string;
+  title: string;
+  description: string;
+  category: string;
+  kind?: 'base' | 'plugin' | 'feature';
+  variantLabel?: string;
+  order?: number;
+  features?: WidgetFeatureKey[];
+};
+
+export type SampleModule = {
+  Sample: ComponentType<SampleRenderProps>;
+  sampleMeta: SampleMeta;
+};
diff --git a/src/widgets/dashboard-report-card/DashboardReportCardWidget.tsx b/src/widgets/dashboard-report-card/DashboardReportCardWidget.tsx
new file mode 100755
index 0000000..191e6f1
--- /dev/null
+++ b/src/widgets/dashboard-report-card/DashboardReportCardWidget.tsx
@@ -0,0 +1,321 @@
+import { Tag, Typography, Flex } from 'antd';
+import { forwardRef } from 'react';
+import {
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetShell } from '../core';
+import type { WidgetHandle } from '../core';
+import { ProgressUI } from '../../components/dashboard/progress';
+import { MultiProgressUI } from '../../components/dashboard/multiProgress';
+
+const { Text, Title } = Typography;
+
+export type ProgressListItem = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+export type ProgressListGroup = {
+  legend: string;
+  items: ProgressListItem[];
+};
+
+export type LineChartPoint = {
+  label: string;
+  value: number;
+};
+
+export type MetricItem = {
+  label: string;
+  value: string;
+};
+
+export type SegmentedProgressItem = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+export type DashboardReportSection =
+  | {
+      kind: 'progress-list';
+      legend: string;
+      title: string;
+      items: ProgressListItem[];
+    }
+  | {
+      kind: 'grouped-progress-list';
+      legend: string;
+      title: string;
+      groups: [ProgressListGroup, ProgressListGroup];
+    }
+  | {
+      kind: 'line-chart';
+      legend: string;
+      title: string;
+      points: LineChartPoint[];
+    }
+  | {
+      kind: 'metrics';
+      legend: string;
+      title: string;
+      metrics: MetricItem[];
+    }
+  | {
+      kind: 'segmented-progress';
+      legend: string;
+      title: string;
+      segments: SegmentedProgressItem[];
+    }
+  | {
+      kind: 'pie-chart';
+      legend: string;
+      title: string;
+      totalLabel?: string;
+      segments: SegmentedProgressItem[];
+    };
+
+export type DashboardReportCardWidgetProps = {
+  id: string;
+  title: string;
+  moduleLabel?: string;
+  sections: [DashboardReportSection, DashboardReportSection];
+  sectionLayout?: 'vertical' | 'horizontal';
+  cardWrapper?: boolean;
+};
+
+function ProgressListSection({ section }: { section: Extract<DashboardReportSection, { kind: 'progress-list' }> }) {
+  return (
+    <Flex vertical gap={12}>
+      {section.items.map((item) => (
+        <ProgressUI
+          key={item.label}
+          label={item.label}
+          data={{
+            percent: item.percent,
+            color: item.color,
+          }}
+        />
+      ))}
+    </Flex>
+  );
+}
+
+function LineChartSection({ section }: { section: Extract<DashboardReportSection, { kind: 'line-chart' }> }) {
+  const chartData = section.points.map((point) => ({
+    name: point.label,
+    value: point.value,
+  }));
+
+  return (
+    <Flex vertical gap={12}>
+      <div className="dashboard-report__chart-shell">
+        <ResponsiveContainer width="100%" height={190}>
+          <LineChart
+            data={chartData}
+            margin={{ top: 12, right: 12, left: -8, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke="rgba(24, 34, 48, 0.08)" />
+            <XAxis
+              dataKey="name"
+              tickLine={false}
+              axisLine={false}
+              tick={{ fill: 'rgba(24, 34, 48, 0.62)', fontSize: 12 }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tick={{ fill: 'rgba(24, 34, 48, 0.62)', fontSize: 12 }}
+              width={42}
+            />
+            <Tooltip
+              cursor={{ stroke: 'rgba(22, 93, 255, 0.18)', strokeWidth: 1 }}
+              contentStyle={{
+                borderRadius: 12,
+                border: '1px solid rgba(22, 93, 255, 0.12)',
+                boxShadow: '0 16px 30px rgba(23, 61, 130, 0.08)',
+              }}
+            />
+            <Line
+              type="monotone"
+              dataKey="value"
+              stroke="#165dff"
+              strokeWidth={3}
+              dot={{ r: 4, fill: '#165dff', stroke: '#ffffff', strokeWidth: 2 }}
+              activeDot={{ r: 6, fill: '#165dff', stroke: '#ffffff', strokeWidth: 2 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </Flex>
+  );
+}
+
+function GroupedProgressListSection({
+  section,
+}: {
+  section: Extract<DashboardReportSection, { kind: 'grouped-progress-list' }>;
+}) {
+  return (
+    <div className="dashboard-report__grouped-progress">
+      {section.groups.map((group) => (
+        <div key={group.legend} className="dashboard-report__grouped-column">
+          <Tag color="blue" className="dashboard-report__grouped-badge">
+            {group.legend}
+          </Tag>
+          <Flex vertical gap={10}>
+            {group.items.map((item) => (
+              <ProgressUI
+                key={`${group.legend}-${item.label}`}
+                label={item.label}
+                data={{
+                  percent: item.percent,
+                  color: item.color,
+                }}
+              />
+            ))}
+          </Flex>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function MetricsSection({ section }: { section: Extract<DashboardReportSection, { kind: 'metrics' }> }) {
+  return (
+    <div className="dashboard-report__metrics">
+      {section.metrics.map((metric) => (
+        <div key={metric.label} className="dashboard-report__metric-item">
+          <Text type="secondary">{metric.label}</Text>
+          <Title level={4}>{metric.value}</Title>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SegmentedProgressSection({
+  section,
+}: {
+  section: Extract<DashboardReportSection, { kind: 'segmented-progress' }>;
+}) {
+  return (
+    <MultiProgressUI label={section.title} meta={section.legend} data={section.segments} />
+  );
+}
+
+function PieChartSection({ section }: { section: Extract<DashboardReportSection, { kind: 'pie-chart' }> }) {
+  const totalPercent = section.segments.reduce((sum, segment) => sum + segment.percent, 0);
+
+  return (
+    <div className="dashboard-report__pie-layout">
+      <div className="dashboard-report__chart-shell dashboard-report__chart-shell--pie">
+        <ResponsiveContainer width="100%" height={220}>
+          <PieChart>
+            <Tooltip
+              formatter={(value) => `${value ?? 0}%`}
+              contentStyle={{
+                borderRadius: 12,
+                border: '1px solid rgba(22, 93, 255, 0.12)',
+                boxShadow: '0 16px 30px rgba(23, 61, 130, 0.08)',
+              }}
+            />
+            <Pie
+              data={section.segments}
+              dataKey="percent"
+              nameKey="label"
+              innerRadius={54}
+              outerRadius={82}
+              paddingAngle={2}
+              stroke="#ffffff"
+              strokeWidth={2}
+            >
+              {section.segments.map((segment) => (
+                <Cell key={segment.label} fill={segment.color} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+
+      <Flex vertical gap={8}>
+        {section.segments.map((segment) => (
+          <div key={segment.label} className="dashboard-report__segment-legend">
+            <span
+              className="dashboard-report__segment-color"
+              style={{ backgroundColor: segment.color }}
+            />
+            <Text>{segment.label}</Text>
+            <Text className="dashboard-report__percent">{segment.percent}%</Text>
+          </div>
+        ))}
+
+        <div className="dashboard-report__segment-legend dashboard-report__segment-legend--total">
+          <span className="dashboard-report__segment-color dashboard-report__segment-color--total" />
+          <Text strong>{section.totalLabel ?? '총재고'}</Text>
+          <Text className="dashboard-report__percent">{totalPercent}%</Text>
+        </div>
+      </Flex>
+    </div>
+  );
+}
+
+function DashboardReportSectionView({ section }: { section: DashboardReportSection }) {
+  return (
+    <div className="dashboard-report__section">
+      <Tag color="blue" className="dashboard-report__legend">
+        {section.legend}
+      </Tag>
+      <Title level={5}>{section.title}</Title>
+      <div className="dashboard-report__section-copy">
+        {section.kind === 'progress-list' ? (
+          <ProgressListSection section={section} />
+        ) : section.kind === 'grouped-progress-list' ? (
+          <GroupedProgressListSection section={section} />
+        ) : section.kind === 'line-chart' ? (
+          <LineChartSection section={section} />
+        ) : section.kind === 'metrics' ? (
+          <MetricsSection section={section} />
+        ) : section.kind === 'pie-chart' ? (
+          <PieChartSection section={section} />
+        ) : (
+          <SegmentedProgressSection section={section} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const DashboardReportCardWidget = forwardRef<WidgetHandle, DashboardReportCardWidgetProps>(
+  function DashboardReportCardWidget(
+    { id, title, moduleLabel, sections, sectionLayout = 'vertical', cardWrapper },
+    ref,
+  ) {
+    return (
+      <WidgetShell
+        ref={ref}
+        id={id}
+        title={title}
+        cardWrapper={cardWrapper}
+        features={['imperative-handle', 'feature-registry']}
+        featureSlot={moduleLabel ? <Tag color="geekblue">{moduleLabel}</Tag> : undefined}
+      >
+        <div className={`dashboard-report dashboard-report--${sectionLayout}`}>
+          {sections.map((section, index) => (
+            <DashboardReportSectionView key={`${section.legend}-${index}`} section={section} />
+          ))}
+        </div>
+      </WidgetShell>
+    );
+  },
+);
diff --git a/src/widgets/dashboard-report-card/index.ts b/src/widgets/dashboard-report-card/index.ts
new file mode 100755
index 0000000..37be38f
--- /dev/null
+++ b/src/widgets/dashboard-report-card/index.ts
@@ -0,0 +1,9 @@
+export { DashboardReportCardWidget } from './DashboardReportCardWidget';
+export type {
+  DashboardReportCardWidgetProps,
+  DashboardReportSection,
+  LineChartPoint,
+  MetricItem,
+  ProgressListItem,
+  SegmentedProgressItem,
+} from './DashboardReportCardWidget';
diff --git a/src/widgets/dashboard-report-card/samples/TmsDeliveryFlowSample.tsx b/src/widgets/dashboard-report-card/samples/TmsDeliveryFlowSample.tsx
new file mode 100755
index 0000000..c68242d
--- /dev/null
+++ b/src/widgets/dashboard-report-card/samples/TmsDeliveryFlowSample.tsx
@@ -0,0 +1,24 @@
+import type { SampleMeta, SampleRenderProps } from '../../core';
+import { DashboardReportCardWidget } from '../DashboardReportCardWidget';
+import { tmsDeliveryFlowCardPreset } from '../../../data/dashboard-report-presets';
+
+export const sampleMeta: SampleMeta = {
+  id: 'tms-delivery-flow-report',
+  componentId: 'dashboard-report-card',
+  title: 'TMS 배송 진행 현황',
+  description: '배송 진행 상태와 배송 건수 추이를 함께 보여주는 TMS 대시보드 카드입니다.',
+  category: 'Widgets',
+  kind: 'feature',
+  variantLabel: 'TMS / 진행 현황',
+  order: 22,
+  features: ['docs'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  return (
+    <DashboardReportCardWidget
+      {...tmsDeliveryFlowCardPreset}
+      cardWrapper={!disableWidgetCardWrapper}
+    />
+  );
+}
diff --git a/src/widgets/dashboard-report-card/samples/TmsDeliveryMetricsSample.tsx b/src/widgets/dashboard-report-card/samples/TmsDeliveryMetricsSample.tsx
new file mode 100755
index 0000000..1ce1111
--- /dev/null
+++ b/src/widgets/dashboard-report-card/samples/TmsDeliveryMetricsSample.tsx
@@ -0,0 +1,24 @@
+import type { SampleMeta, SampleRenderProps } from '../../core';
+import { DashboardReportCardWidget } from '../DashboardReportCardWidget';
+import { tmsDeliveryMetricsCardPreset } from '../../../data/dashboard-report-presets';
+
+export const sampleMeta: SampleMeta = {
+  id: 'tms-delivery-metrics-report',
+  componentId: 'dashboard-report-card',
+  title: 'TMS 배송 실적 지표',
+  description: '배송 실적 지표와 정시/지연 비율을 함께 보여주는 TMS 대시보드 카드입니다.',
+  category: 'Widgets',
+  kind: 'feature',
+  variantLabel: 'TMS / 배송 지표',
+  order: 23,
+  features: ['docs'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  return (
+    <DashboardReportCardWidget
+      {...tmsDeliveryMetricsCardPreset}
+      cardWrapper={!disableWidgetCardWrapper}
+    />
+  );
+}
diff --git a/src/widgets/dashboard-report-card/samples/WmsInboundOutboundSample.tsx b/src/widgets/dashboard-report-card/samples/WmsInboundOutboundSample.tsx
new file mode 100755
index 0000000..2ac139b
--- /dev/null
+++ b/src/widgets/dashboard-report-card/samples/WmsInboundOutboundSample.tsx
@@ -0,0 +1,24 @@
+import type { SampleMeta, SampleRenderProps } from '../../core';
+import { DashboardReportCardWidget } from '../DashboardReportCardWidget';
+import { wmsInboundOutboundCardPreset } from '../../../data/dashboard-report-presets';
+
+export const sampleMeta: SampleMeta = {
+  id: 'wms-inbound-outbound-report',
+  componentId: 'dashboard-report-card',
+  title: 'WMS 입출고 진행 현황',
+  description: '입고/출고 진행 상태를 progress list로 보여주는 WMS 대시보드 카드입니다.',
+  category: 'Widgets',
+  kind: 'base',
+  variantLabel: 'WMS / 진행 현황',
+  order: 20,
+  features: ['docs'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  return (
+    <DashboardReportCardWidget
+      {...wmsInboundOutboundCardPreset}
+      cardWrapper={!disableWidgetCardWrapper}
+    />
+  );
+}
diff --git a/src/widgets/dashboard-report-card/samples/WmsInventoryTrendSample.tsx b/src/widgets/dashboard-report-card/samples/WmsInventoryTrendSample.tsx
new file mode 100755
index 0000000..4254431
--- /dev/null
+++ b/src/widgets/dashboard-report-card/samples/WmsInventoryTrendSample.tsx
@@ -0,0 +1,24 @@
+import type { SampleMeta, SampleRenderProps } from '../../core';
+import { DashboardReportCardWidget } from '../DashboardReportCardWidget';
+import { wmsInventoryTrendCardPreset } from '../../../data/dashboard-report-presets';
+
+export const sampleMeta: SampleMeta = {
+  id: 'wms-inventory-trend-report',
+  componentId: 'dashboard-report-card',
+  title: 'WMS 재고 수량 추이',
+  description: '재고 수량 추이와 재고 상태 비중을 함께 보여주는 WMS 대시보드 카드입니다.',
+  category: 'Widgets',
+  kind: 'feature',
+  variantLabel: 'WMS / 재고 추이',
+  order: 21,
+  features: ['docs'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  return (
+    <DashboardReportCardWidget
+      {...wmsInventoryTrendCardPreset}
+      cardWrapper={!disableWidgetCardWrapper}
+    />
+  );
+}
diff --git a/src/widgets/gps-sample-card/GpsSampleWidget.css b/src/widgets/gps-sample-card/GpsSampleWidget.css
new file mode 100755
index 0000000..055f7fd
--- /dev/null
+++ b/src/widgets/gps-sample-card/GpsSampleWidget.css
@@ -0,0 +1,200 @@
+.gps-sample-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.gps-sample-widget__hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
+  gap: 16px;
+}
+
+.gps-sample-widget__hero-card,
+.gps-sample-widget__panel,
+.gps-sample-widget__map-card {
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
+    rgba(255, 255, 255, 0.96);
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
+}
+
+.gps-sample-widget__hero-card {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 22px;
+}
+
+.gps-sample-widget__hero-copy.ant-typography {
+  margin-bottom: 0;
+}
+
+.gps-sample-widget__metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.gps-sample-widget__metric {
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(241, 245, 249, 0.8);
+}
+
+.gps-sample-widget__metric-value {
+  display: block;
+  margin-top: 6px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.gps-sample-widget__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.gps-sample-widget__quick-form {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.gps-sample-widget__quick-form .ant-input {
+  flex: 1;
+}
+
+.gps-sample-widget__panel-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
+  gap: 16px;
+}
+
+.gps-sample-widget__panel {
+  padding: 20px;
+}
+
+.gps-sample-widget__anchor-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.gps-sample-widget__anchor-item {
+  padding: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.82);
+  transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease,
+    transform 0.16s ease;
+}
+
+.gps-sample-widget__anchor-item:hover {
+  transform: translateY(-1px);
+  border-color: rgba(59, 130, 246, 0.22);
+}
+
+.gps-sample-widget__anchor-item--active {
+  border-color: rgba(37, 99, 235, 0.36);
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
+}
+
+.gps-sample-widget__anchor-head,
+.gps-sample-widget__anchor-actions,
+.gps-sample-widget__config-row,
+.gps-sample-widget__event-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.gps-sample-widget__anchor-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.gps-sample-widget__anchor-actions {
+  margin-top: 12px;
+}
+
+.gps-sample-widget__config {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.gps-sample-widget__event-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.gps-sample-widget__event-item {
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: rgba(241, 245, 249, 0.78);
+}
+
+.gps-sample-widget__map-card {
+  padding: 20px;
+}
+
+.gps-sample-widget__map-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.gps-sample-widget__map-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  border: 3px solid rgba(255, 255, 255, 0.9);
+  border-radius: 999px;
+  background: #2563eb;
+  box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.18);
+  transform: translate(-50%, -50%);
+}
+
+.gps-sample-widget__map-radius {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: min(42%, 220px);
+  aspect-ratio: 1;
+  border: 2px dashed rgba(14, 165, 233, 0.72);
+  border-radius: 999px;
+  background: rgba(125, 211, 252, 0.14);
+  transform: translate(-50%, -50%);
+}
+
+@media (max-width: 960px) {
+  .gps-sample-widget__hero,
+  .gps-sample-widget__panel-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .gps-sample-widget__metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .gps-sample-widget__quick-form,
+  .gps-sample-widget__anchor-head,
+  .gps-sample-widget__anchor-actions,
+  .gps-sample-widget__config-row,
+  .gps-sample-widget__event-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
diff --git a/src/widgets/gps-sample-card/GpsSampleWidget.tsx b/src/widgets/gps-sample-card/GpsSampleWidget.tsx
new file mode 100755
index 0000000..971c3a1
--- /dev/null
+++ b/src/widgets/gps-sample-card/GpsSampleWidget.tsx
@@ -0,0 +1,433 @@
+import {
+  AimOutlined,
+  BellOutlined,
+  EnvironmentOutlined,
+  DeleteOutlined,
+  RadarChartOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Empty, Flex, Input, InputNumber, Space, Switch, Tag, Typography, message } from 'antd';
+import { forwardRef, useMemo, useState } from 'react';
+import { EmbeddedMapUI } from '../../components/embeddedMap';
+import { useGpsLayer } from '../../layer';
+import { WidgetShell } from '../core';
+import type { WidgetHandle } from '../core';
+import './GpsSampleWidget.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+export type GpsSampleWidgetProps = {
+  cardWrapper?: boolean;
+};
+
+function formatCoordinate(value: number | null | undefined) {
+  return typeof value === 'number' ? value.toFixed(6) : '-';
+}
+
+function formatDistanceMeters(value: number) {
+  return `${Math.round(value).toLocaleString()}m`;
+}
+
+function formatTimestamp(value: number | string | null | undefined) {
+  if (!value) {
+    return '-';
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    dateStyle: 'short',
+    timeStyle: 'medium',
+  }).format(new Date(value));
+}
+
+function toRadians(value: number) {
+  return (value * Math.PI) / 180;
+}
+
+function calculateDistanceMeters(
+  latitudeA: number,
+  longitudeA: number,
+  latitudeB: number,
+  longitudeB: number,
+) {
+  const earthRadiusMeters = 6371000;
+  const deltaLatitude = toRadians(latitudeB - latitudeA);
+  const deltaLongitude = toRadians(longitudeB - longitudeA);
+  const sinLatitude = Math.sin(deltaLatitude / 2);
+  const sinLongitude = Math.sin(deltaLongitude / 2);
+  const root =
+    sinLatitude * sinLatitude +
+    Math.cos(toRadians(latitudeA)) *
+      Math.cos(toRadians(latitudeB)) *
+      sinLongitude *
+      sinLongitude;
+
+  return 2 * earthRadiusMeters * Math.atan2(Math.sqrt(root), Math.sqrt(1 - root));
+}
+
+export const GpsSampleWidget = forwardRef<WidgetHandle, GpsSampleWidgetProps>(function GpsSampleWidget(
+  { cardWrapper },
+  ref,
+) {
+  const [messageApi, contextHolder] = message.useMessage();
+  const [anchorName, setAnchorName] = useState('');
+  const {
+    enabled,
+    supported,
+    permissionState,
+    currentPosition,
+    anchors,
+    config,
+    selectedAnchorId,
+    anchorPresence,
+    events,
+    errorMessage,
+    enableGps,
+    disableGps,
+    saveCurrentAnchor,
+    removeAnchor,
+    selectAnchor,
+    updateConfig,
+    clearEvents,
+  } = useGpsLayer();
+
+  const selectedAnchor = anchors.find((anchor) => anchor.id === selectedAnchorId) ?? null;
+  const focusTarget = selectedAnchor ?? (currentPosition ? { ...currentPosition, name: '현재 위치' } : null);
+  const distanceToSelectedAnchor =
+    selectedAnchor && currentPosition
+      ? calculateDistanceMeters(
+          currentPosition.latitude,
+          currentPosition.longitude,
+          selectedAnchor.latitude,
+          selectedAnchor.longitude,
+        )
+      : null;
+
+  const locationSummary = useMemo(
+    () => [
+      {
+        label: '위도',
+        value: formatCoordinate(currentPosition?.latitude),
+      },
+      {
+        label: '경도',
+        value: formatCoordinate(currentPosition?.longitude),
+      },
+      {
+        label: '정확도',
+        value: currentPosition?.accuracy ? `±${Math.round(currentPosition.accuracy)}m` : '-',
+      },
+      {
+        label: '마지막 갱신',
+        value: formatTimestamp(currentPosition?.timestamp),
+      },
+    ],
+    [currentPosition],
+  );
+
+  return (
+    <WidgetShell
+      ref={ref}
+      id="gps-sample-widget"
+      title="GPS Sample Widget"
+      cardWrapper={cardWrapper}
+      features={['component-sample', 'feature-registry', 'imperative-handle', 'docs']}
+      featureSlot={
+        <Tag icon={<RadarChartOutlined />} color="cyan">
+          Layer Context Hook
+        </Tag>
+      }
+    >
+      {contextHolder}
+      <div className="gps-sample-widget">
+        <div className="gps-sample-widget__hero">
+          <section className="gps-sample-widget__hero-card">
+            <Space align="start" size={12}>
+              <Tag color={enabled ? 'blue' : 'default'} icon={<AimOutlined />}>
+                GPS {enabled ? 'ON' : 'OFF'}
+              </Tag>
+              <Tag color={supported ? 'green' : 'red'}>
+                {supported ? `권한 상태: ${permissionState}` : '브라우저 미지원'}
+              </Tag>
+              <Tag icon={<BellOutlined />} color="gold">
+                반경 {config.radiusMeters}m
+              </Tag>
+            </Space>
+
+            <div>
+              <Title level={4}>실시간 GPS 좌표와 거점 지오펜스를 한 레이어에서 관리합니다.</Title>
+              <Paragraph className="gps-sample-widget__hero-copy">
+                현재 좌표를 즉시 거점으로 저장하고, In/Out 푸시 알림 설정과 반경을 조절한 뒤, 선택한
+                거점을 하단 지도에서 바로 확인할 수 있습니다.
+              </Paragraph>
+            </div>
+
+            <div className="gps-sample-widget__metrics">
+              {locationSummary.map((item) => (
+                <div key={item.label} className="gps-sample-widget__metric">
+                  <Text type="secondary">{item.label}</Text>
+                  <span className="gps-sample-widget__metric-value">{item.value}</span>
+                </div>
+              ))}
+            </div>
+
+            <div className="gps-sample-widget__actions">
+              <Space size={12}>
+                <Switch
+                  checked={enabled}
+                  disabled={!supported}
+                  onChange={(checked) => {
+                    if (checked) {
+                      enableGps();
+                      return;
+                    }
+
+                    disableGps();
+                  }}
+                  checkedChildren="GPS ON"
+                  unCheckedChildren="GPS OFF"
+                />
+                <Text type="secondary">브라우저 Geolocation watchPosition 사용</Text>
+              </Space>
+            </div>
+
+            {!supported ? (
+              <Alert type="error" message="현재 브라우저는 GPS 기능을 지원하지 않습니다." showIcon />
+            ) : null}
+            {errorMessage ? <Alert type="warning" message={errorMessage} showIcon /> : null}
+          </section>
+
+          <section className="gps-sample-widget__panel">
+            <Flex vertical gap={16}>
+              <div>
+                <Text strong>현재 좌표를 거점으로 등록</Text>
+                <Paragraph type="secondary">
+                  저장된 거점은 Local Storage에 유지되고, 선택 즉시 하단 지도 중심이 해당 위치로 이동합니다.
+                </Paragraph>
+              </div>
+              <div className="gps-sample-widget__quick-form">
+                <Input
+                  placeholder="거점명 입력"
+                  value={anchorName}
+                  onChange={(event) => {
+                    setAnchorName(event.target.value);
+                  }}
+                  onPressEnter={() => {
+                    const result = saveCurrentAnchor(anchorName || `거점 ${anchors.length + 1}`);
+
+                    if (!result.ok) {
+                      void messageApi.warning(result.message);
+                      return;
+                    }
+
+                    setAnchorName('');
+                    void messageApi.success(`${result.anchor?.name ?? '거점'} 저장 완료`);
+                  }}
+                />
+                <Button
+                  type="primary"
+                  icon={<EnvironmentOutlined />}
+                  onClick={() => {
+                    const result = saveCurrentAnchor(anchorName || `거점 ${anchors.length + 1}`);
+
+                    if (!result.ok) {
+                      void messageApi.warning(result.message);
+                      return;
+                    }
+
+                    setAnchorName('');
+                    void messageApi.success(`${result.anchor?.name ?? '거점'} 저장 완료`);
+                  }}
+                >
+                  현재 위치 저장
+                </Button>
+              </div>
+
+              <div className="gps-sample-widget__config">
+                <div className="gps-sample-widget__config-row">
+                  <Space>
+                    <Switch
+                      checked={config.notifyOnEnter}
+                      onChange={(checked) => {
+                        updateConfig({ notifyOnEnter: checked });
+                      }}
+                    />
+                    <Text>거점 In 푸시알림</Text>
+                  </Space>
+                  <Space>
+                    <Switch
+                      checked={config.notifyOnExit}
+                      onChange={(checked) => {
+                        updateConfig({ notifyOnExit: checked });
+                      }}
+                    />
+                    <Text>거점 Out 푸시알림</Text>
+                  </Space>
+                </div>
+                <div className="gps-sample-widget__config-row">
+                  <Text>반경 거리 설정</Text>
+                  <InputNumber
+                    min={30}
+                    max={5000}
+                    step={10}
+                    addonAfter="m"
+                    value={config.radiusMeters}
+                    onChange={(value) => {
+                      updateConfig({ radiusMeters: Number(value ?? config.radiusMeters) });
+                    }}
+                  />
+                </div>
+              </div>
+            </Flex>
+          </section>
+        </div>
+
+        <div className="gps-sample-widget__panel-grid">
+          <section className="gps-sample-widget__panel">
+            <div className="gps-sample-widget__event-head">
+              <div>
+                <Text strong>등록된 거점</Text>
+                <Paragraph type="secondary">
+                  거점명을 선택하면 하단 지도에서 위치를 확인할 수 있고, 현재 좌표와의 In / Out 상태도 같이 봅니다.
+                </Paragraph>
+              </div>
+              <Tag color="blue">{anchors.length}개</Tag>
+            </div>
+
+            {anchors.length === 0 ? (
+              <Empty description="저장된 거점이 없습니다." image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            ) : (
+              <div className="gps-sample-widget__anchor-list">
+                {anchors.map((anchor) => {
+                  const active = anchor.id === selectedAnchorId;
+                  const isInside = anchorPresence[anchor.id];
+                  const distance =
+                    currentPosition &&
+                    calculateDistanceMeters(
+                      currentPosition.latitude,
+                      currentPosition.longitude,
+                      anchor.latitude,
+                      anchor.longitude,
+                    );
+
+                  return (
+                    <article
+                      key={anchor.id}
+                      className={[
+                        'gps-sample-widget__anchor-item',
+                        active ? 'gps-sample-widget__anchor-item--active' : null,
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                    >
+                      <div className="gps-sample-widget__anchor-head">
+                        <div className="gps-sample-widget__anchor-meta">
+                          <Text strong>{anchor.name}</Text>
+                          <Text type="secondary">
+                            {formatCoordinate(anchor.latitude)}, {formatCoordinate(anchor.longitude)}
+                          </Text>
+                        </div>
+                        <Space wrap>
+                          <Tag color={isInside ? 'green' : 'default'}>{isInside ? 'IN' : 'OUT'}</Tag>
+                          {distance !== null && distance !== undefined ? (
+                            <Tag>{formatDistanceMeters(distance)}</Tag>
+                          ) : null}
+                        </Space>
+                      </div>
+
+                      <div className="gps-sample-widget__anchor-actions">
+                        <Button
+                          type={active ? 'primary' : 'default'}
+                          onClick={() => {
+                            selectAnchor(anchor.id);
+                          }}
+                        >
+                          지도에서 보기
+                        </Button>
+                        <Button
+                          danger
+                          icon={<DeleteOutlined />}
+                          onClick={() => {
+                            removeAnchor(anchor.id);
+                          }}
+                        >
+                          삭제
+                        </Button>
+                      </div>
+                    </article>
+                  );
+                })}
+              </div>
+            )}
+          </section>
+
+          <section className="gps-sample-widget__panel">
+            <div className="gps-sample-widget__event-head">
+              <div>
+                <Text strong>최근 지오펜스 이벤트</Text>
+                <Paragraph type="secondary">반경 경계 진입/이탈 이력이 최근 순서대로 쌓입니다.</Paragraph>
+              </div>
+              <Button onClick={clearEvents}>초기화</Button>
+            </div>
+
+            {events.length === 0 ? (
+              <Empty description="아직 감지된 이벤트가 없습니다." image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            ) : (
+              <div className="gps-sample-widget__event-list">
+                {events.map((event) => (
+                  <div key={event.id} className="gps-sample-widget__event-item">
+                    <Space direction="vertical" size={2}>
+                      <Space wrap>
+                        <Tag color={event.type === 'enter' ? 'green' : 'orange'}>
+                          {event.type === 'enter' ? 'IN' : 'OUT'}
+                        </Tag>
+                        <Text strong>{event.anchorName}</Text>
+                        <Text type="secondary">{formatDistanceMeters(event.distanceMeters)}</Text>
+                      </Space>
+                      <Text type="secondary">{formatTimestamp(event.createdAt)}</Text>
+                    </Space>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </div>
+
+        <section className="gps-sample-widget__map-card">
+          {focusTarget ? (
+            <EmbeddedMapUI
+              title={selectedAnchor ? `${selectedAnchor.name} 거점 지도` : '현재 GPS 위치'}
+              description={
+                selectedAnchor
+                  ? `선택한 거점 중심으로 지도를 고정했습니다. 반경 ${config.radiusMeters}m 오버레이 정확도를 위해 지도 이동은 잠금 처리합니다.`
+                  : '선택한 거점이 없어서 현재 GPS 위치를 지도 중심으로 사용합니다.'
+              }
+              latitude={focusTarget.latitude}
+              longitude={focusTarget.longitude}
+              zoom={16}
+              height={360}
+              markerLabel={selectedAnchor ? '선택 거점' : '현재 위치'}
+              radiusMeters={selectedAnchor ? config.radiusMeters : undefined}
+              lockViewport={Boolean(selectedAnchor)}
+              secondaryMarker={
+                selectedAnchor && currentPosition
+                  ? {
+                      latitude: currentPosition.latitude,
+                      longitude: currentPosition.longitude,
+                      label: '현재 위치',
+                    }
+                  : null
+              }
+            />
+          ) : (
+            <Empty description="GPS를 켜거나 거점을 선택하면 지도가 표시됩니다." />
+          )}
+
+          {selectedAnchor && distanceToSelectedAnchor !== null ? (
+            <Paragraph type="secondary" style={{ marginTop: 14, marginBottom: 0 }}>
+              현재 좌표와 선택 거점의 직선거리는 {formatDistanceMeters(distanceToSelectedAnchor)} 입니다.
+            </Paragraph>
+          ) : null}
+        </section>
+      </div>
+    </WidgetShell>
+  );
+});
diff --git a/src/widgets/gps-sample-card/index.ts b/src/widgets/gps-sample-card/index.ts
new file mode 100755
index 0000000..2d4981c
--- /dev/null
+++ b/src/widgets/gps-sample-card/index.ts
@@ -0,0 +1 @@
+export { GpsSampleWidget } from './GpsSampleWidget';
diff --git a/src/widgets/gps-sample-card/samples/Sample.tsx b/src/widgets/gps-sample-card/samples/Sample.tsx
new file mode 100755
index 0000000..333080a
--- /dev/null
+++ b/src/widgets/gps-sample-card/samples/Sample.tsx
@@ -0,0 +1,18 @@
+import type { SampleMeta, SampleRenderProps } from '../../core';
+import { GpsSampleWidget } from '../GpsSampleWidget';
+
+export const sampleMeta: SampleMeta = {
+  id: 'gps-sample-widget',
+  componentId: 'gps-sample-widget',
+  title: 'GPS Sample Widget',
+  description: 'Layer Context hooks 기반으로 GPS On/Off, 실시간 좌표, 거점 저장, 반경 설정과 지도 선택을 묶은 샘플 위젯입니다.',
+  category: 'Widgets',
+  kind: 'feature',
+  variantLabel: 'GPS / Geofence',
+  order: 26,
+  features: ['docs'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  return <GpsSampleWidget cardWrapper={!disableWidgetCardWrapper} />;
+}
diff --git a/src/widgets/registry.ts b/src/widgets/registry.ts
new file mode 100755
index 0000000..2d27bb8
--- /dev/null
+++ b/src/widgets/registry.ts
@@ -0,0 +1,32 @@
+import type { WidgetRegistryItem } from './core';
+
+export const registeredWidgets: WidgetRegistryItem[] = [
+  {
+    id: 'api-sample-card-widget',
+    title: 'API Sample Card Widget',
+    description:
+      '컴포넌트 대표 샘플을 Wrapper, title, main content, feature tag 구조로 감싸는 위젯입니다.',
+    features: ['api-sample', 'component-sample', 'feature-registry', 'imperative-handle'],
+  },
+  {
+    id: 'dashboard-report-card-widget',
+    title: 'Dashboard Report Card Widget',
+    description:
+      '타이틀과 2개의 콘텐츠 섹션을 가지며 진행 현황, 선형 그래프, 지표, 분할 progress를 조합하는 대시보드 카드 위젯입니다.',
+    features: ['feature-registry', 'imperative-handle'],
+  },
+  {
+    id: 'gps-sample-widget',
+    title: 'GPS Sample Widget',
+    description:
+      'GPS Layer Context hooks를 바탕으로 실시간 좌표, 거점 저장, 지오펜스 반경 설정, 선택 거점 지도 표시를 제공하는 위젯입니다.',
+    features: ['component-sample', 'docs', 'feature-registry', 'imperative-handle'],
+  },
+  {
+    id: 'text-memo-widget',
+    title: 'Text Memo Widget',
+    description:
+      '텍스트 메모를 작성하고 최근 저장본을 브라우저 Local Storage에 유지한 뒤 다시 불러올 수 있는 위젯입니다.',
+    features: ['component-sample', 'feature-registry', 'imperative-handle'],
+  },
+];
diff --git a/src/widgets/text-memo-widget/TextMemoWidget.css b/src/widgets/text-memo-widget/TextMemoWidget.css
new file mode 100755
index 0000000..55625f8
--- /dev/null
+++ b/src/widgets/text-memo-widget/TextMemoWidget.css
@@ -0,0 +1,190 @@
+.text-memo-widget {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.text-memo-widget__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.text-memo-widget__body--list-open {
+  gap: 0;
+}
+
+.text-memo-widget__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 2px 0 0;
+}
+
+.text-memo-widget__toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.text-memo-widget__toolbar .ant-btn {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.text-memo-widget__toolbar .ant-btn:not(:disabled):hover {
+  color: #111827;
+  background: rgba(15, 23, 42, 0.06);
+}
+
+.text-memo-widget__editor {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  border-radius: 28px;
+  overflow: hidden;
+  border: 1px solid rgba(245, 158, 11, 0.18);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.42)),
+    repeating-linear-gradient(
+      180deg,
+      rgba(255, 248, 216, 0.98) 0,
+      rgba(255, 248, 216, 0.98) 37px,
+      rgba(236, 221, 177, 0.78) 37px,
+      rgba(236, 221, 177, 0.78) 38px
+    );
+  box-shadow:
+    0 18px 44px rgba(15, 23, 42, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.text-memo-widget__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 28px;
+  padding: 14px 18px 0;
+  color: rgba(100, 116, 139, 0.92);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+}
+
+.text-memo-widget__editor .ant-input-textarea {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.text-memo-widget__input.ant-input,
+.text-memo-widget__editor .ant-input {
+  height: 100%;
+  min-height: 0;
+  padding: 10px 18px 20px;
+  color: #3f3a2f;
+  font-size: 16px;
+  line-height: 38px;
+  background: transparent;
+  resize: none;
+}
+
+.text-memo-widget__editor .ant-input::placeholder {
+  color: rgba(120, 113, 91, 0.7);
+}
+
+.text-memo-widget__editor .ant-input[readonly] {
+  cursor: default;
+}
+
+.text-memo-widget__sheet {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border-radius: 24px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
+  overflow: hidden;
+}
+
+.text-memo-widget__empty {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 10px 0;
+}
+
+.text-memo-widget__list {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  padding: 10px;
+  overflow: auto;
+}
+
+.text-memo-widget__list-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 0;
+  border-radius: 18px;
+  background: rgba(248, 250, 252, 0.92);
+  text-align: left;
+  cursor: pointer;
+}
+
+.text-memo-widget__list-item:hover {
+  background: rgba(241, 245, 249, 1);
+}
+
+.text-memo-widget__list-item--active {
+  background: rgba(254, 240, 138, 0.42);
+}
+
+.text-memo-widget__list-time {
+  color: rgba(100, 116, 139, 0.92);
+  font-size: 12px;
+}
+
+.text-memo-widget__list-preview {
+  color: #111827;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 640px) {
+  .text-memo-widget__toolbar {
+    flex-wrap: wrap;
+  }
+
+  .text-memo-widget__editor {
+    min-height: 300px;
+  }
+
+  .text-memo-widget__sheet {
+    min-height: 240px;
+  }
+}
diff --git a/src/widgets/text-memo-widget/TextMemoWidget.tsx b/src/widgets/text-memo-widget/TextMemoWidget.tsx
new file mode 100755
index 0000000..4452abd
--- /dev/null
+++ b/src/widgets/text-memo-widget/TextMemoWidget.tsx
@@ -0,0 +1,347 @@
+import { CheckOutlined, DeleteOutlined, EditOutlined, LeftOutlined, PlusOutlined, RightOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Button, Empty, Input, Modal, message } from 'antd';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { WidgetShell } from '../core';
+import type { WidgetHandle } from '../core';
+import './TextMemoWidget.css';
+
+const STORAGE_KEY = 'ai-code-app:text-memo-widget';
+const MAX_NOTE_COUNT = 12;
+const MAX_BODY_LENGTH = 1200;
+
+type MemoNote = {
+  id: string;
+  body: string;
+  createdAt: string;
+};
+
+function readStoredNotes() {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
+  try {
+    const rawValue = window.localStorage.getItem(STORAGE_KEY);
+    if (!rawValue) {
+      return [];
+    }
+
+    const parsed = JSON.parse(rawValue);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+
+    return parsed.filter((note): note is MemoNote => {
+      return (
+        typeof note === 'object' &&
+        note !== null &&
+        typeof note.id === 'string' &&
+        typeof note.body === 'string' &&
+        typeof note.createdAt === 'string'
+      );
+    });
+  } catch {
+    return [];
+  }
+}
+
+function formatMemoTimestamp(value: string) {
+  return new Intl.DateTimeFormat('ko-KR', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(new Date(value));
+}
+
+function getPreviewText(body: string) {
+  const preview = body.replace(/\s+/g, ' ').trim();
+  return preview || '새 메모';
+}
+
+export type TextMemoWidgetProps = {
+  cardWrapper?: boolean;
+};
+
+export const TextMemoWidget = forwardRef<WidgetHandle, TextMemoWidgetProps>(function TextMemoWidget(
+  { cardWrapper },
+  ref,
+) {
+  const [messageApi, contextHolder] = message.useMessage();
+  const [modalApi, modalContextHolder] = Modal.useModal();
+  const [body, setBody] = useState('');
+  const [notes, setNotes] = useState<MemoNote[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(true);
+
+  useEffect(() => {
+    const storedNotes = readStoredNotes();
+    setNotes(storedNotes);
+
+    if (storedNotes[0]) {
+      setSelectedId(storedNotes[0].id);
+      setBody(storedNotes[0].body);
+      setIsEditing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
+  }, [notes]);
+
+  const selectedIndex = useMemo(() => {
+    if (!selectedId) {
+      return -1;
+    }
+
+    return notes.findIndex((note) => note.id === selectedId);
+  }, [notes, selectedId]);
+
+  const hasDraft = body.trim().length > 0;
+  const selectedNote = selectedIndex >= 0 ? notes[selectedIndex] : null;
+  const isDirty = selectedNote ? selectedNote.body !== body : hasDraft;
+
+  const saveNote = () => {
+    const trimmedBody = body.trim();
+    if (!trimmedBody) {
+      return;
+    }
+
+    const timestamp = new Date().toISOString();
+
+    if (selectedNote) {
+      const updatedNote: MemoNote = {
+        ...selectedNote,
+        body: trimmedBody,
+        createdAt: timestamp,
+      };
+      const nextNotes = [updatedNote, ...notes.filter((note) => note.id !== selectedNote.id)].slice(
+        0,
+        MAX_NOTE_COUNT,
+      );
+
+      setNotes(nextNotes);
+      setSelectedId(updatedNote.id);
+      setBody(updatedNote.body);
+      setIsEditing(false);
+      void messageApi.success('저장됨');
+      return;
+    }
+
+    const nextNote: MemoNote = {
+      id: `${Date.now()}`,
+      body: trimmedBody,
+      createdAt: timestamp,
+    };
+    const nextNotes = [nextNote, ...notes].slice(0, MAX_NOTE_COUNT);
+
+    setNotes(nextNotes);
+    setSelectedId(nextNote.id);
+    setBody(nextNote.body);
+    setIsEditing(false);
+    void messageApi.success('저장됨');
+  };
+
+  const handlePrimaryAction = () => {
+    if (isEditing || isDirty || !selectedNote) {
+      saveNote();
+      return;
+    }
+
+    setIsEditing(true);
+  };
+
+  const handleNew = () => {
+    setSelectedId(null);
+    setBody('');
+    setIsEditing(true);
+  };
+
+  const handleDelete = () => {
+    if (!selectedNote && !hasDraft) {
+      return;
+    }
+
+    const isDraftOnly = !selectedNote;
+
+    void modalApi.confirm({
+      title: isDraftOnly ? '작성 중인 메모를 삭제할까요?' : '선택한 메모를 삭제할까요?',
+      content: isDraftOnly
+        ? '저장하지 않은 내용이 사라집니다.'
+        : '삭제한 메모는 다시 복구할 수 없습니다.',
+      okText: '삭제',
+      cancelText: '취소',
+      okButtonProps: { danger: true },
+      onOk: () => {
+        if (isDraftOnly) {
+          setBody('');
+          setIsEditing(true);
+          void messageApi.success('메모를 삭제했습니다.');
+          return;
+        }
+
+        const nextNotes = notes.filter((note) => note.id !== selectedNote.id);
+        const nextSelectedNote = nextNotes[0] ?? null;
+
+        setNotes(nextNotes);
+        setSelectedId(nextSelectedNote?.id ?? null);
+        setBody(nextSelectedNote?.body ?? '');
+        setIsEditing(nextSelectedNote ? false : true);
+        setIsListOpen(nextNotes.length > 0 && isListOpen);
+        void messageApi.success('메모를 삭제했습니다.');
+      },
+    });
+  };
+
+  const handleSelect = (note: MemoNote) => {
+    setSelectedId(note.id);
+    setBody(note.body);
+    setIsEditing(false);
+    setIsListOpen(false);
+  };
+
+  const moveSelection = (direction: -1 | 1) => {
+    if (notes.length === 0) {
+      return;
+    }
+
+    const baseIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    const nextIndex = baseIndex + direction;
+
+    if (nextIndex < 0 || nextIndex >= notes.length) {
+      return;
+    }
+
+    const nextNote = notes[nextIndex];
+    setSelectedId(nextNote.id);
+    setBody(nextNote.body);
+    setIsEditing(false);
+  };
+
+  return (
+    <WidgetShell ref={ref} id="text-memo-widget" title="" cardWrapper={cardWrapper}>
+      {contextHolder}
+      {modalContextHolder}
+      <div className="text-memo-widget">
+        <div className="text-memo-widget__toolbar" role="toolbar" aria-label="메모 도구">
+          <div className="text-memo-widget__toolbar-group">
+            <Button
+              type="text"
+              shape="circle"
+              icon={<PlusOutlined />}
+              aria-label="새 메모"
+              onClick={handleNew}
+            />
+            <Button
+              type="text"
+              shape="circle"
+              icon={<DeleteOutlined />}
+              aria-label="메모 삭제"
+              disabled={!selectedNote && !hasDraft}
+              onClick={handleDelete}
+            />
+            <Button
+              type="text"
+              shape="circle"
+              icon={<UnorderedListOutlined />}
+              aria-label="메모 목록"
+              onClick={() => {
+                setIsListOpen((previous) => !previous);
+              }}
+            />
+          </div>
+
+          <div className="text-memo-widget__toolbar-group">
+            <Button
+              type="text"
+              shape="circle"
+              icon={<LeftOutlined />}
+              aria-label="이전 메모"
+              disabled={selectedIndex <= 0}
+              onClick={() => {
+                moveSelection(-1);
+              }}
+            />
+            <Button
+              type="text"
+              shape="circle"
+              icon={<RightOutlined />}
+              aria-label="다음 메모"
+              disabled={selectedIndex < 0 || selectedIndex >= notes.length - 1}
+              onClick={() => {
+                moveSelection(1);
+              }}
+            />
+            <Button
+              type="text"
+              shape="circle"
+              icon={isEditing || isDirty || !selectedNote ? <CheckOutlined /> : <EditOutlined />}
+              aria-label={isEditing || isDirty || !selectedNote ? '저장' : '편집'}
+              disabled={!hasDraft && !selectedNote}
+              onClick={handlePrimaryAction}
+            />
+          </div>
+        </div>
+
+        <div className={`text-memo-widget__body${isListOpen ? ' text-memo-widget__body--list-open' : ''}`}>
+          {isListOpen ? (
+            <div className="text-memo-widget__sheet">
+              {notes.length === 0 ? (
+                <div className="text-memo-widget__empty">
+                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={false} />
+                </div>
+              ) : (
+                <div className="text-memo-widget__list">
+                  {notes.map((note) => (
+                    <button
+                      key={note.id}
+                      type="button"
+                      className={`text-memo-widget__list-item${
+                        note.id === selectedId ? ' text-memo-widget__list-item--active' : ''
+                      }`}
+                      onClick={() => {
+                        handleSelect(note);
+                      }}
+                    >
+                      <span className="text-memo-widget__list-time">{formatMemoTimestamp(note.createdAt)}</span>
+                      <span className="text-memo-widget__list-preview">{getPreviewText(note.body)}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-memo-widget__editor">
+              <div className="text-memo-widget__meta">
+                <span>{selectedNote ? formatMemoTimestamp(selectedNote.createdAt) : ''}</span>
+                <span>{body.length}/{MAX_BODY_LENGTH}</span>
+              </div>
+
+              <Input.TextArea
+                className="text-memo-widget__input"
+                value={body}
+                placeholder="메모 입력"
+                variant="borderless"
+                maxLength={MAX_BODY_LENGTH}
+                readOnly={!isEditing && !!selectedNote}
+                onChange={(event) => {
+                  setBody(event.target.value);
+                }}
+                onFocus={() => {
+                  if (!selectedNote) {
+                    setIsEditing(true);
+                  }
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </WidgetShell>
+  );
+});
diff --git a/src/widgets/text-memo-widget/index.ts b/src/widgets/text-memo-widget/index.ts
new file mode 100755
index 0000000..1b7355d
--- /dev/null
+++ b/src/widgets/text-memo-widget/index.ts
@@ -0,0 +1,2 @@
+export { TextMemoWidget } from './TextMemoWidget';
+export type { TextMemoWidgetProps } from './TextMemoWidget';
diff --git a/src/widgets/text-memo-widget/samples/Sample.tsx b/src/widgets/text-memo-widget/samples/Sample.tsx
new file mode 100755
index 0000000..a370f6c
--- /dev/null
+++ b/src/widgets/text-memo-widget/samples/Sample.tsx
@@ -0,0 +1,18 @@
+import type { SampleMeta, SampleRenderProps } from '../../core';
+import { TextMemoWidget } from '../TextMemoWidget';
+
+export const sampleMeta: SampleMeta = {
+  id: 'text-memo-widget',
+  componentId: 'text-memo-widget',
+  title: 'Text Memo Widget',
+  description: '짧은 텍스트 메모를 작성하고 최근 저장본을 Local Storage에 유지하는 위젯입니다.',
+  category: 'Widgets',
+  kind: 'feature',
+  variantLabel: 'Memo / Notes',
+  order: 28,
+  features: ['feature-registry', 'imperative-handle'],
+};
+
+export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
+  return <TextMemoWidget cardWrapper={!disableWidgetCardWrapper} />;
+}
diff --git a/test.md b/test.md
new file mode 100755
index 0000000..1395a1b
--- /dev/null
+++ b/test.md
@@ -0,0 +1,3 @@
+# 알림 테스트
+
+이 파일은 알림 테스트용 문서입니다.
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100755
index 0000000..e7bd223
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100755
index 0000000..ea9d0cd
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
new file mode 100755
index 0000000..227f04c
--- /dev/null
+++ b/tsconfig.lib.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/package",
+    "declaration": true,
+    "declarationMap": false,
+    "sourceMap": false,
+    "noEmit": false,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src/index.ts", "src/vite-env.d.ts"],
+  "exclude": ["src/app/**", "src/App.tsx", "src/main.tsx", "src/**/samples/**"]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100755
index 0000000..2c56fdd
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100755
index 0000000..81c81dc
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,206 @@
+import { cpSync, existsSync, mkdirSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { defineConfig, type ResolvedConfig, type ViteDevServer } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
+
+const DEV_APP_UPDATE_PATH = '/__app-update';
+const processEnv =
+  (
+    globalThis as typeof globalThis & {
+      process?: {
+        env?: Record<string, string | undefined>;
+      };
+    }
+  ).process?.env ?? {};
+const VITE_PUBLIC_HMR_HOST = processEnv.VITE_PUBLIC_HMR_HOST ?? 'test.sm-home.cloud';
+const VITE_PUBLIC_HMR_PROTOCOL = processEnv.VITE_PUBLIC_HMR_PROTOCOL ?? 'wss';
+const VITE_PUBLIC_HMR_CLIENT_PORT = Number(processEnv.VITE_PUBLIC_HMR_CLIENT_PORT ?? 443);
+const VITE_EMPTY_OUT_DIR = processEnv.VITE_EMPTY_OUT_DIR !== 'false';
+const VITE_FILTER_PUBLIC_DIR = processEnv.VITE_FILTER_PUBLIC_DIR === 'true';
+const VITE_DISABLE_MODULE_PRELOAD = processEnv.VITE_DISABLE_MODULE_PRELOAD === 'true';
+
+function shouldIgnoreDevUpdatePath(watchedPath: string) {
+  return (
+    watchedPath.includes('/.auto_codex/') ||
+    watchedPath.includes('/dist/') ||
+    watchedPath.includes('/app-dist/') ||
+    watchedPath.includes('/test-app-dist/') ||
+    watchedPath.includes('/node_modules/') ||
+    watchedPath.includes('/public/.codex_chat/') ||
+    watchedPath.endsWith('/.server-command-runner-heartbeat.json')
+  );
+}
+
+function createDevAppUpdatePlugin() {
+  let updateToken = `${Date.now()}`;
+
+  const bumpUpdateToken = () => {
+    updateToken = `${Date.now()}`;
+  };
+
+  const shouldTrackPath = (watchedPath: string) => !shouldIgnoreDevUpdatePath(watchedPath);
+
+  return {
+    name: 'dev-app-update-probe',
+    apply: 'serve' as const,
+    configureServer(server: ViteDevServer) {
+      const handleFileChange = (file: string) => {
+        if (shouldTrackPath(file)) {
+          bumpUpdateToken();
+        }
+      };
+
+      server.watcher.on('add', handleFileChange);
+      server.watcher.on('change', handleFileChange);
+      server.watcher.on('unlink', handleFileChange);
+
+      server.middlewares.use(DEV_APP_UPDATE_PATH, (_request, response) => {
+        response.setHeader('Content-Type', 'application/json; charset=utf-8');
+        response.setHeader('Cache-Control', 'no-store');
+        response.end(
+          JSON.stringify({
+            token: updateToken,
+            updatedAt: new Date(Number(updateToken)).toISOString(),
+          }),
+        );
+      });
+    },
+  };
+}
+
+function copyPublicAssetsExceptCodexChat() {
+  let resolvedConfig: ResolvedConfig | null = null;
+
+  const copyDirectory = (sourceDir: string, targetDir: string) => {
+    if (!existsSync(sourceDir)) {
+      return;
+    }
+
+    mkdirSync(targetDir, { recursive: true });
+
+    for (const entry of readdirSync(sourceDir, { withFileTypes: true })) {
+      if (entry.name === '.codex_chat') {
+        continue;
+      }
+
+      const sourcePath = join(sourceDir, entry.name);
+      const targetPath = join(targetDir, entry.name);
+
+      if (entry.isDirectory()) {
+        copyDirectory(sourcePath, targetPath);
+        continue;
+      }
+
+      if (entry.isFile()) {
+        mkdirSync(join(targetPath, '..'), { recursive: true });
+        cpSync(sourcePath, targetPath, { force: true });
+      }
+    }
+  };
+
+  return {
+    name: 'copy-public-assets-except-codex-chat',
+    apply: 'build' as const,
+    configResolved(config: ResolvedConfig) {
+      resolvedConfig = config;
+    },
+    closeBundle() {
+      if (!VITE_FILTER_PUBLIC_DIR || !resolvedConfig) {
+        return;
+      }
+
+      const publicDir = join(resolvedConfig.root, 'public');
+      const outDir = resolvedConfig.build.outDir.startsWith('/')
+        ? resolvedConfig.build.outDir
+        : join(resolvedConfig.root, resolvedConfig.build.outDir);
+
+      copyDirectory(publicDir, outDir);
+    },
+  };
+}
+
+export default defineConfig({
+  build: {
+    copyPublicDir: !VITE_FILTER_PUBLIC_DIR,
+    emptyOutDir: VITE_EMPTY_OUT_DIR,
+    modulePreload: VITE_DISABLE_MODULE_PRELOAD ? false : undefined,
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    hmr: {
+      host: VITE_PUBLIC_HMR_HOST,
+      protocol: VITE_PUBLIC_HMR_PROTOCOL as 'ws' | 'wss',
+      clientPort: VITE_PUBLIC_HMR_CLIENT_PORT,
+    },
+    allowedHosts: ['sm-home.cloud', 'test.sm-home.cloud', 'rel.sm-home.cloud'],
+    watch: {
+      ignored: (watchedPath) => shouldIgnoreDevUpdatePath(watchedPath),
+    },
+    proxy: {
+      '/api': {
+        target: 'http://work-server:3100',
+        changeOrigin: true,
+      },
+      '/ws/chat': {
+        target: 'ws://work-server:3100',
+        ws: true,
+        changeOrigin: true,
+      },
+      '/.codex_chat': {
+        target: 'http://work-server:3100',
+        changeOrigin: true,
+      },
+    },
+  },
+  preview: {
+    host: '0.0.0.0',
+    port: 5173,
+    allowedHosts: ['sm-home.cloud', 'test.sm-home.cloud', 'rel.sm-home.cloud'],
+  },
+  plugins: [
+    react(),
+    createDevAppUpdatePlugin(),
+    copyPublicAssetsExceptCodexChat(),
+    VitePWA({
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.js',
+      registerType: 'prompt',
+      includeAssets: ['favicon.svg', 'apple-touch-icon.svg'],
+      injectManifest: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff2}'],
+        globIgnores: ['**/.codex_chat/**'],
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+      },
+      manifest: {
+        name: 'AI Code App',
+        short_name: 'AI Code App',
+        description: 'Ant Design 기반 UI 샘플과 문서를 확인하는 AI Code App',
+        theme_color: '#165dff',
+        background_color: '#eff5ff',
+        display: 'standalone',
+        lang: 'ko',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          {
+            src: '/pwa-192x192.svg',
+            sizes: '192x192',
+            type: 'image/svg+xml',
+          },
+          {
+            src: '/pwa-512x512.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+      devOptions: {
+        enabled: true,
+      },
+    }),
+  ],
+});