From 2feb5e9c2d80c03a678a6c35464d3542ef789ef4 Mon Sep 17 00:00:00 2001
From: phil <phil@keiailab.com>
Date: Wed, 12 Aug 2026 23:52:04 +0900
Subject: [PATCH] =?UTF-8?q?feat(webui):=20=EA=B4=80=EC=A0=9C=20=EC=BD=98?=
 =?UTF-8?q?=EC=86=94=20=EC=9D=B4=EA=B4=80=20=E2=80=94=20=ED=99=94=EB=A9=B4?=
 =?UTF-8?q?=EC=9D=B4=20=EB=9C=AC=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React 콘솔(web/, Vite)과 정적 서빙 계층을 옮기고 apiserver 에 다시 붙였다.

## 프로토타입의 함정을 구조로 없앴다

번들은 커밋하지 않고 index.html 셸만 커밋한다. 그래서 프론트를 빌드하지 않은
상태에서는 셸이 참조하는 해시 번들이 없어 테스트가 404 로 깨졌다 — 프로토타입
에서 make all 이 항상 실패하던 이유다. 게이트가 늘 빨간불이면 사람들이 게이트
자체를 신뢰하지 않게 된다.

이제 테스트가 번들 존재 여부를 먼저 보고 없으면 건너뛴다. make all 은 Go 만
검사하고, 프론트 검증은 make web-build 를 돌린 뒤에 실제로 수행된다.

## web-build 는 vite 에 맡긴다

vite 의 outDir 이 internal/webui/assets 라 산출물이 바로 embed 대상에 떨어진다.
복사 단계를 두었다가 emptyOutDir 와 순서가 엉켜 방금 만든 번들을 지우는 것을
한 번 겪었다 — 그래서 타깃은 pnpm build 한 줄이다.

실증: 빌드 후 webui 테스트 8/8(해시 자산 검증 포함), 프로세스 기동 시 / 가
앱 셸을 내고 /assets/index-*.js 가 200.
---
 .gitignore                                    |    5 +
 Makefile                                      |   12 +-
 internal/apiserver/server.go                  |    4 +
 internal/webui/assets/index.html              |   13 +
 internal/webui/webui.go                       |  146 +
 internal/webui/webui_test.go                  |  393 ++
 web/components.json                           |   20 +
 web/index.html                                |   12 +
 web/package.json                              |   35 +
 web/pnpm-lock.yaml                            | 3223 +++++++++++++++++
 web/public/brand/lguplus.svg                  |    7 +
 web/public/csp/kakao.svg                      |    4 +
 web/public/csp/naver.svg                      |    4 +
 web/public/csp/nhn.svg                        |    6 +
 web/public/csp/onprem.svg                     |    6 +
 web/src/App.tsx                               |   87 +
 web/src/auth/AuthContext.tsx                  |   92 +
 web/src/components/gpu/ActiveMonitoring.tsx   |  676 ++++
 web/src/components/gpu/AlertTimeline.tsx      |  111 +
 web/src/components/gpu/AssistantBubble.tsx    |   24 +
 web/src/components/gpu/CollectDonut.tsx       |   80 +
 web/src/components/gpu/ContactBubble.tsx      |  167 +
 web/src/components/gpu/CspLogo.tsx            |   60 +
 web/src/components/gpu/CspRollupCards.tsx     |   85 +
 web/src/components/gpu/EventFeed.tsx          |  161 +
 web/src/components/gpu/EventStream.tsx        |   85 +
 web/src/components/gpu/FaultTypeBar.tsx       |   97 +
 web/src/components/gpu/FleetFilterBar.tsx     |  120 +
 web/src/components/gpu/FleetHeatmap.tsx       |  222 ++
 web/src/components/gpu/GateDiagram.tsx        |   96 +
 web/src/components/gpu/GpuDeviceCard.tsx      |  183 +
 web/src/components/gpu/GpuModelBar.tsx        |   53 +
 web/src/components/gpu/HealthGauge.tsx        |  110 +
 web/src/components/gpu/IdleDonut.tsx          |   85 +
 web/src/components/gpu/IdleReuseDrawer.tsx    |  349 ++
 web/src/components/gpu/IncidentActionList.tsx |   97 +
 web/src/components/gpu/IncidentFlow.tsx       |  216 ++
 web/src/components/gpu/KpiTile.tsx            |  158 +
 web/src/components/gpu/LiveStrip.tsx          |  146 +
 web/src/components/gpu/ModelUtilChart.tsx     |  291 ++
 web/src/components/gpu/NodeDrillSheet.tsx     |  507 +++
 web/src/components/gpu/NodeGpuPanel.tsx       |  522 +++
 web/src/components/gpu/RemediationStepper.tsx |  170 +
 web/src/components/gpu/ReuseStepper.tsx       |   77 +
 web/src/components/gpu/ScoringFunnel.tsx      |  432 +++
 web/src/components/gpu/SituationBoard.tsx     |  279 ++
 web/src/components/gpu/SloPanel.tsx           |  101 +
 web/src/components/gpu/Sparkline.tsx          |   88 +
 web/src/components/gpu/StatusBanner.tsx       |   38 +
 web/src/components/gpu/TenantDonut.tsx        |  106 +
 web/src/components/gpu/TopGpuTable.tsx        |  324 ++
 web/src/components/gpu/TopologyGraph.tsx      |  577 +++
 web/src/components/gpu/UtilLegend.tsx         |   42 +
 web/src/components/gpu/VictimMetricChart.tsx  |  119 +
 web/src/components/layout/HeaderExtras.tsx    |  214 ++
 web/src/components/layout/Shell.tsx           |  407 +++
 web/src/components/ui/alert.tsx               |   66 +
 web/src/components/ui/badge.tsx               |   48 +
 web/src/components/ui/button.tsx              |   64 +
 web/src/components/ui/card.tsx                |   92 +
 web/src/components/ui/collapsible.tsx         |   31 +
 web/src/components/ui/command.tsx             |  112 +
 web/src/components/ui/dialog.tsx              |  156 +
 web/src/components/ui/hover-card.tsx          |   42 +
 web/src/components/ui/input.tsx               |   21 +
 web/src/components/ui/label.tsx               |   24 +
 web/src/components/ui/popover.tsx             |   40 +
 web/src/components/ui/progress.tsx            |   31 +
 web/src/components/ui/radio-group.tsx         |   43 +
 web/src/components/ui/select.tsx              |  148 +
 web/src/components/ui/separator.tsx           |   26 +
 web/src/components/ui/sheet.tsx               |  143 +
 web/src/components/ui/sidebar.tsx             |  726 ++++
 web/src/components/ui/skeleton.tsx            |   13 +
 web/src/components/ui/slider.tsx              |   63 +
 web/src/components/ui/table.tsx               |  114 +
 web/src/components/ui/tabs.tsx                |   89 +
 web/src/components/ui/textarea.tsx            |   18 +
 web/src/components/ui/tooltip.tsx             |   55 +
 web/src/hooks/demoContext.ts                  |   28 +
 web/src/hooks/use-mobile.ts                   |   19 +
 web/src/hooks/useBuildInfo.ts                 |   54 +
 web/src/hooks/useDemoStatus.ts                |   27 +
 web/src/hooks/useFleet.ts                     |  155 +
 web/src/hooks/useLiveSeries.ts                |   79 +
 web/src/hooks/usePolledQuery.ts               |   67 +
 web/src/hooks/useVictimSeries.ts              |   72 +
 web/src/index.css                             |  182 +
 web/src/lib/api.ts                            |  154 +
 web/src/lib/branding.ts                       |   11 +
 web/src/lib/demoApi.ts                        |  731 ++++
 web/src/lib/fleetFacts.ts                     |  288 ++
 web/src/lib/gpuMetrics.ts                     |  153 +
 web/src/lib/navigation.ts                     |  270 ++
 web/src/lib/nodeAsset.ts                      |  219 ++
 web/src/lib/utils.ts                          |    6 +
 web/src/lib/validation.ts                     |  185 +
 web/src/main.tsx                              |   15 +
 web/src/pages/Explorer.tsx                    |  553 +++
 web/src/pages/Login.tsx                       |   94 +
 web/src/pages/Map.tsx                         |  323 ++
 web/src/pages/Overview.tsx                    |  283 ++
 web/src/pages/gpu/GpuAssistant.tsx            |  977 +++++
 web/src/pages/gpu/GpuEfficiency.tsx           |  545 +++
 web/src/pages/gpu/GpuHealth.tsx               |  568 +++
 web/src/pages/gpu/GpuIdle.tsx                 |  648 ++++
 web/src/pages/gpu/GpuIncident.tsx             |  468 +++
 web/src/pages/gpu/GpuLayout.tsx               |   84 +
 web/src/pages/gpu/GpuOverview.tsx             |  601 +++
 web/src/pages/gpu/GpuRemediation.tsx          |  647 ++++
 web/src/pages/gpu/GpuRoadmap.tsx              |  480 +++
 web/src/pages/gpu/GpuRuleset.tsx              |  355 ++
 web/src/pages/gpu/GpuServing.tsx              |  714 ++++
 web/src/pages/gpu/GpuValidation.tsx           | 1319 +++++++
 web/tsconfig.json                             |   24 +
 web/tsconfig.node.json                        |   15 +
 web/tsconfig.tsbuildinfo                      |    1 +
 web/vite.config.ts                            |   27 +
 118 files changed, 25349 insertions(+), 1 deletion(-)
 create mode 100644 internal/webui/assets/index.html
 create mode 100644 internal/webui/webui.go
 create mode 100644 internal/webui/webui_test.go
 create mode 100644 web/components.json
 create mode 100644 web/index.html
 create mode 100644 web/package.json
 create mode 100644 web/pnpm-lock.yaml
 create mode 100644 web/public/brand/lguplus.svg
 create mode 100644 web/public/csp/kakao.svg
 create mode 100644 web/public/csp/naver.svg
 create mode 100644 web/public/csp/nhn.svg
 create mode 100644 web/public/csp/onprem.svg
 create mode 100644 web/src/App.tsx
 create mode 100644 web/src/auth/AuthContext.tsx
 create mode 100644 web/src/components/gpu/ActiveMonitoring.tsx
 create mode 100644 web/src/components/gpu/AlertTimeline.tsx
 create mode 100644 web/src/components/gpu/AssistantBubble.tsx
 create mode 100644 web/src/components/gpu/CollectDonut.tsx
 create mode 100644 web/src/components/gpu/ContactBubble.tsx
 create mode 100644 web/src/components/gpu/CspLogo.tsx
 create mode 100644 web/src/components/gpu/CspRollupCards.tsx
 create mode 100644 web/src/components/gpu/EventFeed.tsx
 create mode 100644 web/src/components/gpu/EventStream.tsx
 create mode 100644 web/src/components/gpu/FaultTypeBar.tsx
 create mode 100644 web/src/components/gpu/FleetFilterBar.tsx
 create mode 100644 web/src/components/gpu/FleetHeatmap.tsx
 create mode 100644 web/src/components/gpu/GateDiagram.tsx
 create mode 100644 web/src/components/gpu/GpuDeviceCard.tsx
 create mode 100644 web/src/components/gpu/GpuModelBar.tsx
 create mode 100644 web/src/components/gpu/HealthGauge.tsx
 create mode 100644 web/src/components/gpu/IdleDonut.tsx
 create mode 100644 web/src/components/gpu/IdleReuseDrawer.tsx
 create mode 100644 web/src/components/gpu/IncidentActionList.tsx
 create mode 100644 web/src/components/gpu/IncidentFlow.tsx
 create mode 100644 web/src/components/gpu/KpiTile.tsx
 create mode 100644 web/src/components/gpu/LiveStrip.tsx
 create mode 100644 web/src/components/gpu/ModelUtilChart.tsx
 create mode 100644 web/src/components/gpu/NodeDrillSheet.tsx
 create mode 100644 web/src/components/gpu/NodeGpuPanel.tsx
 create mode 100644 web/src/components/gpu/RemediationStepper.tsx
 create mode 100644 web/src/components/gpu/ReuseStepper.tsx
 create mode 100644 web/src/components/gpu/ScoringFunnel.tsx
 create mode 100644 web/src/components/gpu/SituationBoard.tsx
 create mode 100644 web/src/components/gpu/SloPanel.tsx
 create mode 100644 web/src/components/gpu/Sparkline.tsx
 create mode 100644 web/src/components/gpu/StatusBanner.tsx
 create mode 100644 web/src/components/gpu/TenantDonut.tsx
 create mode 100644 web/src/components/gpu/TopGpuTable.tsx
 create mode 100644 web/src/components/gpu/TopologyGraph.tsx
 create mode 100644 web/src/components/gpu/UtilLegend.tsx
 create mode 100644 web/src/components/gpu/VictimMetricChart.tsx
 create mode 100644 web/src/components/layout/HeaderExtras.tsx
 create mode 100644 web/src/components/layout/Shell.tsx
 create mode 100644 web/src/components/ui/alert.tsx
 create mode 100644 web/src/components/ui/badge.tsx
 create mode 100644 web/src/components/ui/button.tsx
 create mode 100644 web/src/components/ui/card.tsx
 create mode 100644 web/src/components/ui/collapsible.tsx
 create mode 100644 web/src/components/ui/command.tsx
 create mode 100644 web/src/components/ui/dialog.tsx
 create mode 100644 web/src/components/ui/hover-card.tsx
 create mode 100644 web/src/components/ui/input.tsx
 create mode 100644 web/src/components/ui/label.tsx
 create mode 100644 web/src/components/ui/popover.tsx
 create mode 100644 web/src/components/ui/progress.tsx
 create mode 100644 web/src/components/ui/radio-group.tsx
 create mode 100644 web/src/components/ui/select.tsx
 create mode 100644 web/src/components/ui/separator.tsx
 create mode 100644 web/src/components/ui/sheet.tsx
 create mode 100644 web/src/components/ui/sidebar.tsx
 create mode 100644 web/src/components/ui/skeleton.tsx
 create mode 100644 web/src/components/ui/slider.tsx
 create mode 100644 web/src/components/ui/table.tsx
 create mode 100644 web/src/components/ui/tabs.tsx
 create mode 100644 web/src/components/ui/textarea.tsx
 create mode 100644 web/src/components/ui/tooltip.tsx
 create mode 100644 web/src/hooks/demoContext.ts
 create mode 100644 web/src/hooks/use-mobile.ts
 create mode 100644 web/src/hooks/useBuildInfo.ts
 create mode 100644 web/src/hooks/useDemoStatus.ts
 create mode 100644 web/src/hooks/useFleet.ts
 create mode 100644 web/src/hooks/useLiveSeries.ts
 create mode 100644 web/src/hooks/usePolledQuery.ts
 create mode 100644 web/src/hooks/useVictimSeries.ts
 create mode 100644 web/src/index.css
 create mode 100644 web/src/lib/api.ts
 create mode 100644 web/src/lib/branding.ts
 create mode 100644 web/src/lib/demoApi.ts
 create mode 100644 web/src/lib/fleetFacts.ts
 create mode 100644 web/src/lib/gpuMetrics.ts
 create mode 100644 web/src/lib/navigation.ts
 create mode 100644 web/src/lib/nodeAsset.ts
 create mode 100644 web/src/lib/utils.ts
 create mode 100644 web/src/lib/validation.ts
 create mode 100644 web/src/main.tsx
 create mode 100644 web/src/pages/Explorer.tsx
 create mode 100644 web/src/pages/Login.tsx
 create mode 100644 web/src/pages/Map.tsx
 create mode 100644 web/src/pages/Overview.tsx
 create mode 100644 web/src/pages/gpu/GpuAssistant.tsx
 create mode 100644 web/src/pages/gpu/GpuEfficiency.tsx
 create mode 100644 web/src/pages/gpu/GpuHealth.tsx
 create mode 100644 web/src/pages/gpu/GpuIdle.tsx
 create mode 100644 web/src/pages/gpu/GpuIncident.tsx
 create mode 100644 web/src/pages/gpu/GpuLayout.tsx
 create mode 100644 web/src/pages/gpu/GpuOverview.tsx
 create mode 100644 web/src/pages/gpu/GpuRemediation.tsx
 create mode 100644 web/src/pages/gpu/GpuRoadmap.tsx
 create mode 100644 web/src/pages/gpu/GpuRuleset.tsx
 create mode 100644 web/src/pages/gpu/GpuServing.tsx
 create mode 100644 web/src/pages/gpu/GpuValidation.tsx
 create mode 100644 web/tsconfig.json
 create mode 100644 web/tsconfig.node.json
 create mode 100644 web/tsconfig.tsbuildinfo
 create mode 100644 web/vite.config.ts

diff --git a/.gitignore b/.gitignore
index 78c2659..04372e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,8 @@
 cover.out
 *.test
 .DS_Store
+
+# 프론트 번들은 커밋하지 않는다 — index.html 셸만 두고 make web-build 가 채운다.
+internal/webui/assets/*
+!internal/webui/assets/.gitignore
+!internal/webui/assets/index.html
diff --git a/Makefile b/Makefile
index be54e2e..2f1df6c 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: all fmt vet test build clean
+.PHONY: all fmt vet test build clean web-build
 
 # 외부 의존성 0 이 이 제품의 전제다 — go.mod 에 require 가 늘면 "차트 하나 =
 # 파드 하나 = 완결" 이 성립하지 않는다. dep-check 가 그것을 지킨다.
@@ -26,3 +26,13 @@ build:
 
 clean:
 	rm -rf dist cover.out
+
+# 프론트를 빌드한다. vite 의 outDir 이 internal/webui/assets 라 산출물이 바로
+# embed 대상에 떨어진다 — 복사 단계를 두면 emptyOutDir 와 순서가 엉켜 방금
+# 만든 번들을 지운다(실제로 그렇게 한 번 깨뜨렸다).
+#
+# 번들은 커밋하지 않고 index.html 셸만 커밋한다. 빌드 전에는 셸이 참조하는
+# 해시 번들이 없으므로 Go 테스트가 그 상태를 인식해 관련 검사를 건너뛴다 —
+# 그래야 프론트를 빌드하지 않은 개발자의 `make all` 이 실패하지 않는다.
+web-build:
+	cd web && pnpm install --frozen-lockfile && pnpm build
diff --git a/internal/apiserver/server.go b/internal/apiserver/server.go
index 9abe4cd..bc4ea3d 100644
--- a/internal/apiserver/server.go
+++ b/internal/apiserver/server.go
@@ -30,6 +30,7 @@ import (
 	"github.com/KeiaiLab/nodevitals-observatory/internal/rules"
 	"github.com/KeiaiLab/nodevitals-observatory/internal/storage"
 	"github.com/KeiaiLab/nodevitals-observatory/internal/tsdb"
+	"github.com/KeiaiLab/nodevitals-observatory/internal/webui"
 )
 
 // queryWindow 는 /api/v1/query 의 평가창 폭이다 — [eval-queryWindow, eval].
@@ -75,6 +76,9 @@ func NewServer(d Deps) http.Handler {
 	mux.Handle("POST /api/v1/auth/login", d.Auth.LoginHandler())
 	mux.Handle("POST /api/v1/auth/logout", d.Auth.LogoutHandler())
 	mux.HandleFunc("GET /api/", handleUnknownAPI)
+	// 콘솔 정적 자산. 데이터가 0 이라 인증 예외이고, 위 구체 패턴들이
+	// ServeMux 우선순위로 먼저 매치되므로 이 catch-all 이 API 를 삼키지 않는다.
+	mux.Handle("GET /", webui.Handler())
 
 	// 보호 — 질의
 	q := storage.New(d.DB)
diff --git a/internal/webui/assets/index.html b/internal/webui/assets/index.html
new file mode 100644
index 0000000..ffe206e
--- /dev/null
+++ b/internal/webui/assets/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NodeVitals Observatory</title>
+    <script type="module" crossorigin src="/assets/index-CZ3DQFvg.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-20J1yveS.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/internal/webui/webui.go b/internal/webui/webui.go
new file mode 100644
index 0000000..ea74b32
--- /dev/null
+++ b/internal/webui/webui.go
@@ -0,0 +1,146 @@
+// Package webui 는 nodevitals-observatory 관제 콘솔의 빌드 산출 정적 자산을
+// embed.FS 로 담아 서빙한다. 데이터는 전부 인증 뒤 /api/v1/* 가 낸다 — 이
+// 패키지는 마크업·번들만 서빙한다. M5: React 콘솔(web/, Vite 빌드)이
+// 클라이언트 라우팅(React Router)을 쓰므로, `/assets/*` 는 정적 자산 전용으로
+// 서빙하고 그 외 비-API 경로는 index.html 로 폴백한다(m5-design.md §2 D2) —
+// 새로고침·직접 URL 진입(/overview, /explorer 등)에서도 클라이언트 라우터가
+// 문서를 받도록 보장한다.
+package webui
+
+import (
+	"embed"
+	"io/fs"
+	"net/http"
+	"strings"
+)
+
+//go:embed assets
+var assets embed.FS
+
+// FS 는 assets 디렉터리를 루트로 한 서브트리를 반환한다(테스트·외부 소비용).
+// go:embed 는 빌드 시점에 고정되므로 fs.Sub 실패는 임베드 자체가 깨졌다는
+// 뜻이라 panic 으로 즉시 드러낸다 — 런타임에 조용히 넘어가면 안 되는 불변식.
+func FS() fs.FS {
+	sub, err := fs.Sub(assets, "assets")
+	if err != nil {
+		panic("webui: assets 서브트리 구성 실패: " + err.Error())
+	}
+	return sub
+}
+
+// securityHeaders 는 콘솔 응답에 심층방어 헤더를 붙인다. CSP 로 self 외
+// 스크립트 실행을 원천 차단하고(외부 CDN 0 과 정합) 클릭재킹·MIME 스니핑을
+// 막는다(m4-design.md 보안 적대검토 F-SEC-6 반영).
+//
+// style-src 만 'unsafe-inline' 으로 완화한다 — m5-design.md D3 이 예고한
+// "인라인 style 주입이 실제로 필요해지는 시점"이 왔다: Radix 의 스크롤 락
+// (react-remove-scroll)이 <style> 을 주입하고 Recharts 가 일부 요소에 style
+// 속성을 setAttribute 로 건다. 차단 상태에서는 콘솔이 CSP 위반 오류로 뒤덮이고
+// 스크롤 락·일부 색이 조용히 적용되지 않는다.
+//
+// 이 완화는 XSS 표면을 열지 않는다 — script-src 는 default-src 'self' 를
+// 그대로 상속해 인라인 스크립트가 여전히 차단되고, 마크업 주입 경로
+// (dangerouslySetInnerHTML)는 코드 규약으로 금지돼 있다. 인라인 style 로
+// 가능한 공격은 시각적 변조(클릭재킹류)인데 X-Frame-Options: DENY 와
+// frame-ancestors 부재로 프레이밍 자체가 막혀 있다.
+func securityHeaders(h http.Header) {
+	h.Set("Content-Security-Policy", "default-src 'self'; style-src 'self' 'unsafe-inline'")
+	h.Set("X-Frame-Options", "DENY")
+	h.Set("X-Content-Type-Options", "nosniff")
+}
+
+// Handler 는 콘솔 정적 자산 라우팅을 구성한다(m5-design.md §2 D2):
+//
+//	GET /assets/*  → 실재하는 일반 파일만 정적 서빙(Cache-Control: no-cache).
+//	                 부재·디렉터리 요청은 404 — 자산 경로는 항상 실재해야 한다
+//	                 (SPA 폴백 없음).
+//	GET / (그 외)  → 1) 경로가 FS 루트의 실재하는 일반 파일이면 그 파일
+//	                    (no-cache, 예: 향후 public/ 산출물인 favicon 등)
+//	                 2) 아니면 index.html 200(SPA 폴백, no-store) — React
+//	                    Router 새로고침·직접 URL 진입(/overview, /explorer 등)
+//	                    이 깨지지 않게 클라이언트 라우팅에 문서를 넘긴다.
+//
+// apiserver 쪽 배선은 무변경이다: /healthz·/api/v1/* 같은 구체 패턴이
+// http.ServeMux 우선순위로 이 catch-all 보다 먼저 매치되므로(server.go:51
+// 주석 계약), 미인증 GET /api/v1/query 는 여전히 401(JSON)이지 index.html 이
+// 아니다 — webui 는 자신에게 실제로 도달한 요청만 SPA 폴백한다.
+func Handler() http.Handler {
+	root := FS()
+
+	mux := http.NewServeMux()
+
+	// StripPrefix 없이 전체 경로로 마운트한다: Vite 산출은 outDir 안의 내부
+	// assets/ 디렉터리(FS 경로 assets/<name>-<hash>.js)에 놓이므로 URL
+	// /assets/X ↔ FS assets/X 가 1:1 이다(vite.config.ts base '/'+assetsDir
+	// 'assets' 계약). M4 평면 구조 시절의 StripPrefix("/assets") 잔재는 URL
+	// /assets/X 를 FS 루트 X 로 조회해 실 해시 자산 전부를 404(빈 화면)로
+	// 만들었다 — TestHandler_index참조_해시자산_전부_200 이 이 회귀를 잡는다.
+	mux.Handle("GET /assets/", withNoCache(serveAsset(root)))
+	mux.HandleFunc("GET /", serveSPA(root)) // 서브트리 catch-all — /overview,/map,/explorer,/login 전부 여기로
+
+	return mux
+}
+
+// serveAsset 는 assets/ 서브트리 중 실재하는 일반 파일만 http.FileServerFS 로
+// 위임한다. http.FileServerFS 는 디렉터리 요청(GET /assets/ 가 StripPrefix 뒤
+// 빈 경로 "/" 가 되는 경우 포함)에 그 디렉터리의 index.html 을 자동으로
+// 200 서빙하는 기본 동작을 갖는데, 이는 "GET /assets/* → app.js/style.css,
+// 그 외 404"(m4-design.md §2) 계약을 깨고 로그인 마크업을 /assets/ 경로로
+// 새 나가는 회귀를 일으킨다. 요청 경로가 실재하는 일반 파일(디렉터리 아님)일
+// 때만 위임하고, 그 외(빈 경로·디렉터리·부재)는 명시적으로 404 처리한다.
+func serveAsset(root fs.FS) http.Handler {
+	fileServer := http.FileServerFS(root)
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		name := strings.TrimPrefix(r.URL.Path, "/")
+		if name == "" {
+			http.NotFound(w, r)
+			return
+		}
+		info, err := fs.Stat(root, name)
+		if err != nil || info.IsDir() {
+			http.NotFound(w, r)
+			return
+		}
+		fileServer.ServeHTTP(w, r)
+	})
+}
+
+// serveSPA 는 파일 우선 → index.html 폴백 catch-all 핸들러다(m5-design.md §2
+// D2). "/assets/" 서브트리는 Handler 등록에서 이미 우선 소비되므로 여기
+// 도달하는 요청은 그 밖의 전부다: 경로가 FS 루트의 실재하는 일반 파일(디렉터리
+// 아님, 예: 향후 public/ 산출물인 favicon 등)이면 그 파일을 no-cache 로,
+// 아니면 index.html 을 200 으로 낸다(SPA 폴백, no-store) — React Router 의
+// 클라이언트 라우팅이 새로고침·직접 URL 진입에서도 문서를 받도록 보장한다.
+func serveSPA(root fs.FS) http.HandlerFunc {
+	fileServer := http.FileServerFS(root)
+	return func(w http.ResponseWriter, r *http.Request) {
+		name := strings.TrimPrefix(r.URL.Path, "/")
+		if name != "" {
+			if info, err := fs.Stat(root, name); err == nil && !info.IsDir() {
+				withNoCache(fileServer).ServeHTTP(w, r)
+				return
+			}
+		}
+
+		data, err := fs.ReadFile(root, "index.html")
+		if err != nil {
+			http.Error(w, "internal error", http.StatusInternalServerError)
+			return
+		}
+		securityHeaders(w.Header())
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		w.Header().Set("Cache-Control", "no-store")
+		_, _ = w.Write(data)
+	}
+}
+
+// withNoCache 는 정적 자산 응답에 캐시 무효화 + 심층방어 헤더를 얹는다.
+// 0.2.x 는 버전 해시 체인이 없는 단일 이미지 배포라 no-cache 로 매 배포
+// 반영을 보장한다(§2 Simplicity — 해시 파일명 체인은 M5 shadcn 빌드 도입 시).
+func withNoCache(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		securityHeaders(w.Header())
+		w.Header().Set("Cache-Control", "no-cache")
+		next.ServeHTTP(w, r)
+	})
+}
diff --git a/internal/webui/webui_test.go b/internal/webui/webui_test.go
new file mode 100644
index 0000000..3aa59df
--- /dev/null
+++ b/internal/webui/webui_test.go
@@ -0,0 +1,393 @@
+// Package webui 테스트 — m5-design.md §2 D2 계약: GET /assets/* 는 실재하는
+// 일반 파일만 정적 서빙(부재·디렉터리 404), 그 외 비-API GET 은 파일 우선 →
+// index.html 폴백(SPA, React Router 새로고침·직접 URL 진입 지원). 핸들러 계약
+// (serveAsset/serveSPA)은 fstest.MapFS 픽스처로 헤르메틱하게 검증하고(프론트
+// 빌드 산출물 유무에 비의존 — m5-design.md 적대검토 F5), 실 embed(FS()/
+// Handler())는 배선 스모크로 별도 확인한다.
+package webui
+
+import (
+	"io"
+	"io/fs"
+	"net/http"
+	"net/http/httptest"
+	"regexp"
+	"strings"
+	"testing"
+	"testing/fstest"
+)
+
+// ---- serveAsset 계약 (fixture — 실 embed 구조에 비의존) ----
+
+func TestServeAsset_실재파일_200_no_cache헤더(t *testing.T) {
+	root := fstest.MapFS{
+		"app.js": {Data: []byte("console.log('fixture')")},
+	}
+	srv := httptest.NewServer(withNoCache(serveAsset(root)))
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/app.js")
+	if err != nil {
+		t.Fatalf("GET /app.js: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("status = %d, want 200", resp.StatusCode)
+	}
+	if cc := resp.Header.Get("Cache-Control"); cc != "no-cache" {
+		t.Fatalf("Cache-Control = %q, want %q", cc, "no-cache")
+	}
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.Fatalf("read body: %v", err)
+	}
+	if string(body) != "console.log('fixture')" {
+		t.Fatalf("body = %q, want fixture 원문 그대로", body)
+	}
+}
+
+func TestServeAsset_부재파일_404(t *testing.T) {
+	root := fstest.MapFS{"app.js": {Data: []byte("x")}}
+	srv := httptest.NewServer(serveAsset(root))
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/missing.js")
+	if err != nil {
+		t.Fatalf("GET /missing.js: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusNotFound {
+		t.Fatalf("status = %d, want 404", resp.StatusCode)
+	}
+}
+
+// TestServeAsset_중첩디렉터리_404 는 fs.Stat().IsDir() 거절 분기를 겨냥한다.
+// M5 실 embed 는 중첩 구조(내부 assets/ 디렉터리)를 갖지만 산출물 유무·해시에
+// 비의존해야 하므로(파일 헤더 주석 F5) fixture 로 직접 재현해 "구현이
+// 틀리면(예: IsDir 검사 누락) 이 테스트가 실패하는가"를 보장한다.
+func TestServeAsset_중첩디렉터리_404(t *testing.T) {
+	root := fstest.MapFS{"sub/inner.js": {Data: []byte("x")}}
+	srv := httptest.NewServer(serveAsset(root))
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/sub")
+	if err != nil {
+		t.Fatalf("GET /sub: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusNotFound {
+		t.Fatalf("status = %d, want 404 (디렉터리 요청)", resp.StatusCode)
+	}
+}
+
+// ---- serveSPA 계약 (fixture) ----
+
+func TestServeSPA_루트의_실재파일_200_no_cache(t *testing.T) {
+	root := fstest.MapFS{
+		"index.html":  {Data: []byte(`<!doctype html><body id="app-root"></body>`)},
+		"favicon.ico": {Data: []byte("fixture-favicon")},
+	}
+	srv := httptest.NewServer(serveSPA(root))
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/favicon.ico")
+	if err != nil {
+		t.Fatalf("GET /favicon.ico: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("status = %d, want 200", resp.StatusCode)
+	}
+	if cc := resp.Header.Get("Cache-Control"); cc != "no-cache" {
+		t.Fatalf("Cache-Control = %q, want %q (파일 우선 분기)", cc, "no-cache")
+	}
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.Fatalf("read body: %v", err)
+	}
+	if string(body) != "fixture-favicon" {
+		t.Fatalf("body = %q, want fixture 원문 그대로", body)
+	}
+}
+
+func TestServeSPA_미지경로_index_폴백_200(t *testing.T) {
+	root := fstest.MapFS{
+		"index.html": {Data: []byte(`<!doctype html><body id="app-root"></body>`)},
+	}
+	srv := httptest.NewServer(serveSPA(root))
+	defer srv.Close()
+
+	// React Router 새로고침·직접 URL 진입 시나리오: 단일 세그먼트·다단 경로·
+	// 완전 미지 경로 전부 index.html 로 폴백해야 한다.
+	for _, path := range []string{"/overview", "/explorer/detail/42", "/nonexistent"} {
+		resp, err := http.Get(srv.URL + path)
+		if err != nil {
+			t.Fatalf("GET %s: %v", path, err)
+		}
+		body, readErr := io.ReadAll(resp.Body)
+		resp.Body.Close()
+		if readErr != nil {
+			t.Fatalf("GET %s read body: %v", path, readErr)
+		}
+
+		if resp.StatusCode != http.StatusOK {
+			t.Fatalf("GET %s status = %d, want 200 (SPA 폴백)", path, resp.StatusCode)
+		}
+		if ct := resp.Header.Get("Content-Type"); !strings.HasPrefix(ct, "text/html") {
+			t.Fatalf("GET %s Content-Type = %q, want text/html 접두", path, ct)
+		}
+		if cc := resp.Header.Get("Cache-Control"); cc != "no-store" {
+			t.Fatalf("GET %s Cache-Control = %q, want no-store", path, cc)
+		}
+		if !strings.Contains(string(body), `id="app-root"`) {
+			t.Fatalf("GET %s body 에 앱 셸 마크업 미포함:\n%s", path, body)
+		}
+	}
+}
+
+// TestServeSPA_index_부재시_500 은 임베드가 깨져 index.html 자체가 없는
+// 상황(에러 경로)을 실제로 태운다 — 에러를 삼키고 200 빈 본문을 내는 회귀를
+// 잡는다.
+func TestServeSPA_index_부재시_500(t *testing.T) {
+	root := fstest.MapFS{}
+	srv := httptest.NewServer(serveSPA(root))
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/anything")
+	if err != nil {
+		t.Fatalf("GET /anything: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusInternalServerError {
+		t.Fatalf("status = %d, want 500 (index.html 부재)", resp.StatusCode)
+	}
+}
+
+// ---- Handler()/FS() 배선 스모크 (실 embed) ----
+
+// TestHandler_루트_200_앱셸마크업_포함 은 실 embed 스모크다. M5 는 React
+// SPA(client-rendered) 라 로그인 폼은 런타임에 JS 가 그린다 — 정적 HTTP
+// 응답에는 결코 존재할 수 없는 `id="login-form"` 서버측 마크업을 단언하던
+// 이전 버전은 실 빌드 산출물(web/index.html · main.tsx 의 `#root` 마운트
+// 지점)과 항상 어긋나 실패했다(적대검증 발견). 마운트 지점 `id="root"` 만
+// 확인한다.
+func TestHandler_루트_200_앱셸마크업_포함(t *testing.T) {
+	srv := httptest.NewServer(Handler())
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/")
+	if err != nil {
+		t.Fatalf("GET /: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		t.Fatalf("status = %d, want 200", resp.StatusCode)
+	}
+	if ct := resp.Header.Get("Content-Type"); !strings.HasPrefix(ct, "text/html") {
+		t.Fatalf("Content-Type = %q, want text/html 접두", ct)
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.Fatalf("read body: %v", err)
+	}
+	if !strings.Contains(string(body), `id="root"`) {
+		t.Fatalf("body 에 앱 셸 마운트 지점(id=\"root\") 미포함:\n%s", body)
+	}
+}
+
+// TestHandler_index참조_해시자산_전부_200 은 실 embed 스모크다. M5 Vite 빌드는
+// 해시 파일명(/assets/index-<hash>.js 등)을 내므로 M4 처럼 고정 이름
+// (app.js/style.css)을 단언할 수 없다 — 대신 빌드 산출 index.html 이 실제로
+// 참조하는 /assets/* URL 을 전부 추출해 200 인지 확인한다("셸이 참조하는
+// 번들은 반드시 서빙된다"는 사용자 시점 계약, 해시값 비의존). 이 계약 검증은
+// M4 잔재 StripPrefix 배선(URL /assets/X → FS 루트 X 조회)이 실 산출물
+// (FS assets/X)과 어긋나 참조 자산 전부를 404(빈 화면)로 만들던 회귀를 실제로
+// 잡아냈다(적대검증 후속 실측: 참조 URL 404 / 미참조 이중접두 URL 만 200).
+// Cache-Control=no-cache 단언은 SPA 폴백(no-store)이 자산 경로를 삼켜 200 HTML
+// 을 내는 오탐 통과를 막는다. placeholder 상태(참조 0)면 스킵 — 의무 검증
+// 순서(pnpm build → go test)에선 항상 실행된다.
+func TestHandler_index참조_해시자산_전부_200(t *testing.T) {
+	// 번들은 커밋하지 않는다(내부 gitignore) — `make web-build` 가 채운다.
+	// 빌드 전에는 검사할 대상 자체가 없으므로 건너뛴다. 이 가드가 없으면
+	// 프론트를 빌드하지 않은 개발자의 `make all` 이 항상 실패하고, 그러면
+	// 사람들이 게이트 자체를 신뢰하지 않게 된다.
+	if !bundlesPresent(t) {
+		t.Skip("프론트 미빌드 — make web-build 후 검사한다")
+	}
+
+	shell, err := fs.ReadFile(FS(), "index.html")
+	if err != nil {
+		t.Fatalf("index.html 읽기: %v", err)
+	}
+	refs := regexp.MustCompile(`(?:src|href)="(/assets/[^"]+)"`).FindAllStringSubmatch(string(shell), -1)
+	if len(refs) == 0 {
+		t.Skip("index.html 에 /assets/* 참조 없음(placeholder 상태) — pnpm build 후 실행된다")
+	}
+
+	srv := httptest.NewServer(Handler())
+	defer srv.Close()
+
+	for _, m := range refs {
+		url := m[1]
+		resp, err := http.Get(srv.URL + url)
+		if err != nil {
+			t.Fatalf("GET %s: %v", url, err)
+		}
+		body, readErr := io.ReadAll(resp.Body)
+		resp.Body.Close()
+		if readErr != nil {
+			t.Fatalf("GET %s read body: %v", url, readErr)
+		}
+
+		if resp.StatusCode != http.StatusOK {
+			t.Errorf("GET %s status = %d, want 200 (셸이 참조하는 번들 서빙 실패)", url, resp.StatusCode)
+		}
+		if cc := resp.Header.Get("Cache-Control"); cc != "no-cache" {
+			t.Errorf("GET %s Cache-Control = %q, want no-cache (자산 경로가 SPA 폴백에 삼켜짐)", url, cc)
+		}
+		if len(body) == 0 {
+			t.Errorf("GET %s 본문이 비었다", url)
+		}
+	}
+}
+
+func TestHandler_assets_존재하지않는파일_404(t *testing.T) {
+	srv := httptest.NewServer(Handler())
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/assets/does-not-exist.js")
+	if err != nil {
+		t.Fatalf("GET /assets/does-not-exist.js: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusNotFound {
+		t.Fatalf("status = %d, want 404", resp.StatusCode)
+	}
+}
+
+// TestHandler_assets_디렉터리_404 는 회귀 테스트다: http.FileServerFS 의
+// 디렉터리 index.html 자동서빙 기본동작으로 GET /assets/ 가 "그 외 → 404"
+// 계약(m4-design.md §2)을 어기고 200+로그인 마크업을 새 나간 적이 있다
+// (적대검증 발견) — 재발 방지. SPA 폴백 도입(M5) 후에도 /assets/ 서브트리는
+// 폴백 대상이 아니라는 계약을 재확인한다.
+func TestHandler_assets_디렉터리_404(t *testing.T) {
+	srv := httptest.NewServer(Handler())
+	defer srv.Close()
+
+	resp, err := http.Get(srv.URL + "/assets/")
+	if err != nil {
+		t.Fatalf("GET /assets/: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusNotFound {
+		t.Fatalf("status = %d, want 404 (디렉터리 index.html 자동서빙 회귀)", resp.StatusCode)
+	}
+}
+
+// TestHandler_미등록경로_SPA_index_폴백_200 은 M5 의 핵심 변경을 실 embed 로
+// 검증한다: m4 시절엔 404 였던 미등록 경로가 이제는 index.html 로 폴백해야
+// React Router 새로고침·직접 URL 진입이 깨지지 않는다.
+func TestHandler_미등록경로_SPA_index_폴백_200(t *testing.T) {
+	srv := httptest.NewServer(Handler())
+	defer srv.Close()
+
+	for _, path := range []string{"/nonexistent", "/overview", "/explorer/foo/bar"} {
+		resp, err := http.Get(srv.URL + path)
+		if err != nil {
+			t.Fatalf("GET %s: %v", path, err)
+		}
+		body, readErr := io.ReadAll(resp.Body)
+		resp.Body.Close()
+		if readErr != nil {
+			t.Fatalf("GET %s read body: %v", path, readErr)
+		}
+
+		if resp.StatusCode != http.StatusOK {
+			t.Fatalf("GET %s status = %d, want 200 (SPA 폴백)", path, resp.StatusCode)
+		}
+		if cc := resp.Header.Get("Cache-Control"); cc != "no-store" {
+			t.Fatalf("GET %s Cache-Control = %q, want no-store", path, cc)
+		}
+		if !strings.Contains(string(body), `id="root"`) {
+			t.Fatalf("GET %s body 에 앱 셸 마운트 지점(id=\"root\") 미포함:\n%s", path, body)
+		}
+	}
+}
+
+// TestFS_index_html_존재 는 go:embed 최소 불변식을 고정한다: SPA 폴백의
+// 원천인 index.html 은 placeholder(standalone go build)든 Vite 산출이든 항상
+// 존재해야 한다. M4 의 고정 3자산(app.js/style.css 포함) 단언은 해시 파일명
+// 체계로 무효 — 해시 자산 서빙 검증은 TestHandler_index참조_해시자산_전부_200.
+func TestFS_index_html_존재(t *testing.T) {
+	info, err := fs.Stat(FS(), "index.html")
+	if err != nil {
+		t.Fatalf("FS() 에 index.html 부재: %v", err)
+	}
+	if info.IsDir() {
+		t.Fatal("FS() 의 index.html 가 디렉터리 — 파일이어야 한다")
+	}
+}
+
+// ---- CSP 계약 ----
+
+// style-src 완화가 스크립트 표면까지 번지지 않았는지 고정한다. 인라인 style 은
+// Radix 스크롤 락·Recharts 때문에 필요하지만(webui.go 주석), 인라인 스크립트가
+// 함께 열리면 XSS 방어가 사라진다 — 이 테스트가 그 회귀를 막는다.
+func TestSecurityHeaders_CSP계약(t *testing.T) {
+	h := http.Header{}
+	securityHeaders(h)
+
+	csp := h.Get("Content-Security-Policy")
+	if !strings.Contains(csp, "default-src 'self'") {
+		t.Fatalf("default-src 'self' 가 없다: %q", csp)
+	}
+	if !strings.Contains(csp, "style-src 'self' 'unsafe-inline'") {
+		t.Fatalf("style-src 인라인 허용이 없다(Radix/Recharts 요구): %q", csp)
+	}
+	// script-src 를 명시적으로 열어두면 안 된다 — default-src 'self' 상속이 유일한 정답.
+	if strings.Contains(csp, "script-src") {
+		t.Fatalf("script-src 를 별도 지정하지 않는다(default-src 상속): %q", csp)
+	}
+	if strings.Contains(csp, "unsafe-eval") {
+		t.Fatalf("unsafe-eval 은 허용하지 않는다: %q", csp)
+	}
+	if got := h.Get("X-Frame-Options"); got != "DENY" {
+		t.Fatalf("X-Frame-Options = %q, want DENY(인라인 style 완화의 클릭재킹 상쇄)", got)
+	}
+	if got := h.Get("X-Content-Type-Options"); got != "nosniff" {
+		t.Fatalf("X-Content-Type-Options = %q, want nosniff", got)
+	}
+}
+
+// bundlesPresent 는 임베드된 assets 에 실제 번들(js/css)이 있는지 본다.
+// index.html 셸만 있으면 false 다.
+func bundlesPresent(t *testing.T) bool {
+	t.Helper()
+	entries, err := fs.ReadDir(FS(), ".")
+	if err != nil {
+		return false
+	}
+	for _, e := range entries {
+		if e.IsDir() && e.Name() == "assets" {
+			sub, err := fs.ReadDir(FS(), "assets")
+			if err != nil {
+				return false
+			}
+			for _, f := range sub {
+				if strings.HasSuffix(f.Name(), ".js") || strings.HasSuffix(f.Name(), ".css") {
+					return true
+				}
+			}
+		}
+	}
+	return false
+}
diff --git a/web/components.json b/web/components.json
new file mode 100644
index 0000000..4024f4d
--- /dev/null
+++ b/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..c34cd10
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NodeVitals Observatory</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 0000000..fa8abec
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "nodevitals-observatory-console",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "packageManager": "pnpm@11.15.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "lucide-react": "1.26.0",
+    "radix-ui": "1.6.5",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "8.3.0",
+    "recharts": "3.10.0",
+    "tailwind-merge": "3.6.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.3",
+    "@types/node": "26.1.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.4",
+    "tailwindcss": "4.3.3",
+    "tw-animate-css": "1.4.0",
+    "typescript": "7.0.2",
+    "vite": "8.1.5"
+  }
+}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
new file mode 100644
index 0000000..341bb76
--- /dev/null
+++ b/web/pnpm-lock.yaml
@@ -0,0 +1,3223 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      class-variance-authority:
+        specifier: 0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      lucide-react:
+        specifier: 1.26.0
+        version: 1.26.0(react@19.2.8)
+      radix-ui:
+        specifier: 1.6.5
+        version: 1.6.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-router:
+        specifier: 8.3.0
+        version: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      recharts:
+        specifier: 3.10.0
+        version: 3.10.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1)
+      tailwind-merge:
+        specifier: 3.6.0
+        version: 3.6.0
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: 4.3.3
+        version: 4.3.3(vite@8.1.5(@types/node@26.1.1)(jiti@2.7.0))
+      '@types/node':
+        specifier: 26.1.1
+        version: 26.1.1
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      '@vitejs/plugin-react':
+        specifier: 6.0.4
+        version: 6.0.4(vite@8.1.5(@types/node@26.1.1)(jiti@2.7.0))
+      tailwindcss:
+        specifier: 4.3.3
+        version: 4.3.3
+      tw-animate-css:
+        specifier: 1.4.0
+        version: 1.4.0
+      typescript:
+        specifier: 7.0.2
+        version: 7.0.2
+      vite:
+        specifier: 8.1.5
+        version: 8.1.5(@types/node@26.1.1)(jiti@2.7.0)
+
+packages:
+
+  '@emnapi/core@1.11.1':
+    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
+
+  '@emnapi/runtime@1.11.1':
+    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
+
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
+
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@oxc-project/types@0.139.0':
+    resolution: {integrity: sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==}
+
+  '@radix-ui/number@1.1.3':
+    resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
+
+  '@radix-ui/primitive@1.1.7':
+    resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
+
+  '@radix-ui/react-accessible-icon@1.1.13':
+    resolution: {integrity: sha512-2/0RrtTngKZVkOFYDlvhe6JIsUravRnYGwH1iJ+qt+wPu8/fPu3HTLRkQptyIkpLovAy8qvHHJs9cvYJ3Uyqqg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-accordion@1.2.18':
+    resolution: {integrity: sha512-CGuUFvhjScXBF/bhjaU9xlgai2ikYqJRazXhMzngoUaZI7QaxAw24Ae3S/pR0b69p8GqW6i+CKJmx9JPNnZ4QQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.21':
+    resolution: {integrity: sha512-VbSR148lNkE8JdWnOsYX72YdivmCAtcrot1dl8UmT0ZZRKNR3hHJUpQxJOw7jWlY/JFemn4oaDXxCxpD594B7Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.13':
+    resolution: {integrity: sha512-0Q310knIY0K+mkmncU9FxLggfW7V49Ok2oY+iu27KkERTsQXxYCIC8XW5QoK4w7Jp1z00vT5xj3oxTcn7QlcTg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-aspect-ratio@1.1.13':
+    resolution: {integrity: sha512-dD/EvbOiLskcdBKgNAeUmbTBCJfdCGp85fpFe3lmziE4ASbXuFERQCAB3sR41yvM+P711kJsTBNL9piP60urbA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.2.4':
+    resolution: {integrity: sha512-u4Sz6ajq2WobGMqbsNXnFI/3JP/o7TUBkEmQ4BRUYofPDQawdO3WWYy5907c9VgOFX+ETjKI3VxnnrKYAF7Pmg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.9':
+    resolution: {integrity: sha512-YPXZlqjrKVqKtVD2F828CApHwu+PEu30i7x0Y9gg6SbQ3fJbcaQlDkGPT0gW6HjxoCjAEt8uJ494F1S61KpIjQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.18':
+    resolution: {integrity: sha512-aNMp8humfYzWERz5gxGb/eLNkB0ZthypLbNlNolzdgzFTeN78e/rnn9rxCdOaSsg/zClTOJ/OkjXYx9PUEPATw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.13':
+    resolution: {integrity: sha512-Q8xYqNRFObXPmi45bFSkGdM2JA5hjBeYGFqzg6lZR3wp6b+cciraVq8DdneTabtws+uOYqjmsvmKOufk/M9Cyg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.4':
+    resolution: {integrity: sha512-pWJo6lQAfR6uy1n7ii7PaCc9dLPwTXDYbQpORZU5B548Aqvl2pP1SM1vJGKyxIFqZMHRopRO4CQYX2iXAIB5jA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context-menu@2.3.5':
+    resolution: {integrity: sha512-wbvSjqc7r0xKmfhrMCiCPxSTv/aSHU0cCAy0tELthJbaIzT7dkAcevKuoGKbDLiPG2VePgMVqLi2sWb6tDnzvQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-context@1.2.1':
+    resolution: {integrity: sha512-EraVbFjiIjibpLr6EjvEDmSCYJU2SlKDMiO+qEK/D9GOWnQoAQlpQo2occGYC1UM9MBeEx5Bek3UtW/Qi57vAg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.21':
+    resolution: {integrity: sha512-h+7qMDDmZJ8qTSPrwNyKb/PACY0ehtN8QOBlCz+C2C1jgehKekdhmHddG9YQk8BF/sHJqglPjte+jA1Jrp9HcA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.3':
+    resolution: {integrity: sha512-OdgAA/xb6WOQMKNn0mtbYoruMG6YMaBOnq+evWxSpMmiEMBdeFZawnIWRfPPeVXCRm+0lnN8jpJLjhD7/UIxWw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.17':
+    resolution: {integrity: sha512-QAXwa38pG0xNAYh1pjdSaf86NrkqsMoDNmget/Y7X8O8E/C3Iqlj9GAPE4DfX9BPLXc7WH2TWSzMRnIoCdcjzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.22':
+    resolution: {integrity: sha512-wZRLTjZaJf1HTxx0YepFKZUuo+SZMi+Cr4kJ2fuA5FxDSUE0vHDTscahUaU+jfz6LFk4OuguwqJs5K0JsIsIBA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.5':
+    resolution: {integrity: sha512-UQvlB7L/BYh3P8MLvwZnQkH521EDos40Rwnbt5+Qpg4Vbk0z3xJjRUmR6+aka4aT1IQQXFdO5bNPoE7cvFl5xQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.14':
+    resolution: {integrity: sha512-/x4htnJfmW53MplkrePaDpf1o/rN1C++g88WpVobULXbSyC19NtLkXmewuJ/HCaceSmfKDNL5gOXcBGnuAvnvQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-form@0.1.14':
+    resolution: {integrity: sha512-ZCuPb54PQ3ZQEdQ6G1PrMBfXXzAyaVoCI9Fl+bWOwYZKTOcFjPHL7JQ3tCb6CX6Ut81GZLWKgIpV6OS3n5z5Ig==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.21':
+    resolution: {integrity: sha512-ByFLyi+kdTGkObxIt5wKB3Ru3rtJRuYUqPEtqiv1HNYqutqbn1wDuNmVzI6iwus9qfY3vwpNgvx/UVZUGTWC1A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.3':
+    resolution: {integrity: sha512-f/Wxm0ctyMymUJK0fqTSQlm85rbzdAkoNbPXJQ5+6caowVO8Yx+NWGjGz/oGhs/D+WIbbQpOrU0hU2Li2/42xQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.13':
+    resolution: {integrity: sha512-kj7BXyM4uG0dyeoEdVmPQAOFN291+iJOtiGTvkXe1ijJWLQbAHpFNkopvqquaMVn+zjqTZRhnefESAinMErHKg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.22':
+    resolution: {integrity: sha512-xCFrVLttGDPwMjIPI6GS+tm3IGUNKsPXffrJQIPpQJuE9Qy1bU9GNUCkwranU/pEqyBlwMxcBIK/FUJFAZ9SqQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.22':
+    resolution: {integrity: sha512-jDkcZXd5rN4b/S9nnEv9KZajaQ7+RO98OCWqAxrULTJtkSvODlNOO+EIxNG/d4QIF6QOqK5ZZrTF9MYl6eQdiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.20':
+    resolution: {integrity: sha512-in/exCQPatmmBmQZrtQkK4UrysEp8VGEuw5o8Bx3ozxbfg7DBb4H5j3DgxGz4N59J02NRVzhsWFtujZgy5ue3w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.14':
+    resolution: {integrity: sha512-F3vMSK+d+huI3a4Zm6j2hUsS+/gByVbsechJwp/ZCZBCrusXHvBeZZz9aMqXqqYNYu23mtvVMt6AeHDds8EU7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.9':
+    resolution: {integrity: sha512-JFkmnwZFD357odQkpzfxz++bpohQpaGCT/4PK6oRd4R/Rxzg02uFDucFzZDOTIOz6vWSluIlz91zelleg9BheA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.21':
+    resolution: {integrity: sha512-+AJ7P5oRcFqFtv7MaCD8fOuK3l5qQBAMdWEOnUOYd3JfHOeIUe7TnHHSSP15CtWwH4KrotyDCTzodOIoONh8vw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.3.5':
+    resolution: {integrity: sha512-6hLng2Rs45IZcvZ31BNvMeaFEMMEbtsog4xPcb8LZrGfyoV9fdAXqB9UKhLpTHtL0+E2DhSr6VW54Tehd6ksAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.15':
+    resolution: {integrity: sha512-kAfBVJUKNNKZuyGQXXG6rKolAV2KAmxxVkPXJgoq9dEFTl39286RufHQFNTL8rzha4vP8159BJ6hMGpB+bqv7A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.9':
+    resolution: {integrity: sha512-LTi1v05bprIb8/GSY/GWusI0jfsYjQ3CD3Nin8o7jVxnpHzVQfzjOQJoJTQkE9bdmOnsS7SFdhkXiBv8PrYnxw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.8':
+    resolution: {integrity: sha512-DOlK1BdcIeYYUcFkSYFka4v1h95XTov93b0jCgW1EEiZuIhdwHY2NlE1teLIh+p0uBsuZI5A+voay+iVWpprfA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.14':
+    resolution: {integrity: sha512-lq5VXWp/t/b8MaqbRMAItXICc/jwhzJt0ZZ+au/CBtTYkX9EfAsSyGQL5brUVBgf9tUTKCoJEZlDl+uJF/08xQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.4.5':
+    resolution: {integrity: sha512-BM1xQgw1gpgPSw05U4hJCMDX9GmAS6b6vKZANuNQZo0vf/ah7NZDAnjLd4tPg3z2vMvlI0CV+B2CFM9Z19oQDA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.17':
+    resolution: {integrity: sha512-YdJmjETw7Py+4Nziv71jgZ6fH7xQgB5p+pQ5rV8Iufyrm0RHSijec/UV1zPfQoK/YcfzB9nOl/2bi1zf1SjRMQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.16':
+    resolution: {integrity: sha512-kEcmCenIJ+W5xlCv1u9VKDdPmzzGyfrJwEneY+02GH+lJRXrGpkiTkyjrfkspuRw6DXt4uduwT5c4xD8HTv27Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.3.5':
+    resolution: {integrity: sha512-6CQx0xtdarAkSCsqgLJaz+coYQaru7rt8K6gMItR2rA+WP8/Ig6kRAzP6Zw88RccG98IZnszqJlJx9hejYOL3A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.13':
+    resolution: {integrity: sha512-wbagLhy4grekqiT6hU0WNP09FpmemTXbNWg4QEawaw9dix7hRIcrmDNnLDasOsKVLtArEznhgZKe5Gm4U6oPXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.4.5':
+    resolution: {integrity: sha512-7E8C13SdQKQxYganILiVZGEwM0NSbfbFcnNJ93kP++wD2pMT1SMsG3c04PFUlbPpaSXgicYgPeBndgJTvV3NKg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.3.1':
+    resolution: {integrity: sha512-Bu/aAQHFFh6/QAvXAeUMurJ9fbW0JUIqlojU/yBXZ7cAVqy75Y7JYYyuCr9zLNF0p4WWoJYV54CTUIf4l7FzTw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.3.5':
+    resolution: {integrity: sha512-e1YrvGvEjIqDhqKjQ4Q+IDkMfiY30u3FPz9CZXZMlQ8mU3kZ2PdeBM8Gssc48CDopPizNorKumGhjySBfO7BDQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.19':
+    resolution: {integrity: sha512-4wbGf98pX2ZwYqHMVB/dakeMPyH4xSJ9MSDaCCWXlIpYt0VYY6mtZxKSTiGS/F3tk0yrEYmXE1V8uwG7TxDCcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.21':
+    resolution: {integrity: sha512-/o8uHzH2z6ZM59Dt1UPFj8aYJ0DjPu0EuQXQ7uuYJTQLH5mNqxa1KuBfbpnklgXOOjyAtTp/tll0Nm+Nkz+bEg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.17':
+    resolution: {integrity: sha512-KKsrxb1cZREc2RI5DOGwlUSpaPW40xIaK1/DXXqYDb7slRE8pkRa+iF2aFbYiuMJ+aNWpCSChiN5gFe3bVveaQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.16':
+    resolution: {integrity: sha512-pp4TLY3N4osN9IB4TLEaaZRGooBmCi/XJD65gSCs5tvsKofM9WgiBToNtGrmR0k3sG4jFj4Nw4utsIvQraWA9g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toolbar@1.1.17':
+    resolution: {integrity: sha512-MjorZ0XQiWfCrrpStNXw/hX0HnG7VEzCgcSV226Ox8/WzS5yq0SiMhsLFE3LlXhdghlakFRFdE6eegtmUQW7Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.14':
+    resolution: {integrity: sha512-C/JxCKJJac+wtHPW1yFBSN8Ssuaufy2jYQMgyiJYyW4Fw0WJfDWXQDAly1qsbd1YDznH+sYitaljhf8igPCvmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.3':
+    resolution: {integrity: sha512-AUS7HoBBAncIsGMLNG+CcpLuJ+JIBbZzmyM8Qdb1eIThX0AlhSSC6wn40xfBlPE+ypx/vSSiRWnklUAjy3U3UA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.5':
+    resolution: {integrity: sha512-UB1dXpxvHjR48poyKdKdTm7jT0kp3elkUKdKQiOkirlbYumqXinSJtrjDsr9maXNPvL12bKI4CDSmydms/9Aeg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.4':
+    resolution: {integrity: sha512-XYcfa6wlXDCwQtePuEiPmXLSAhGL4DWtedSyRgGbG3y10mw+OnrLp6SyeY1gJFMiYF0Dx0nMAX9InylKbLEFQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.4':
+    resolution: {integrity: sha512-4MSb5SPbMH02uUn19tLkO5Bav66ZQg/zFbedo7FWLWGFg9r8Z9xSog7QGnq9ZceurzBVIAIwgzANg6ExWc8HkQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.2':
+    resolution: {integrity: sha512-2+gAVu9uaSLbopCTvvuWX9MIgEOlyqXC1Ok+KLCO7cZPSHLENs7dL0KbFQUGFIcFKmDW/bmaQRJtd8E3cnMRUw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.3':
+    resolution: {integrity: sha512-rDiah9wvtqihWtWz02XreeRKIxt2EJF8y5D9rtY9l5A2zxePAtcPiOMpDugNRw5bFHz+1/8viVoc7ZVKiJknCw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.3':
+    resolution: {integrity: sha512-kbefNKla5AGhgvMqrg/qS7mYVLXTEHQLqoFIS03nKN2dAfQQ5PK5Tp+2LxS7BV6a6l4HHv4jTg6rtV2Uajwe2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.3':
+    resolution: {integrity: sha512-W0GSYZFKEfi6raMiMEfJSngvVbFDIyxtW5JuVg5NoQBY59l0dVQVGLbhog/tOdwq0qtZ+TXuX1ikSNan4/IZXA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.3':
+    resolution: {integrity: sha512-jJq6tQQLvO/z4uWbztjwPV+1a/+H4rCaWypasLB/ac8DEdd6+p7dIm7o3F6P2KZPGkPMqD4s5424EdAdoU+GLA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.9':
+    resolution: {integrity: sha512-seuZXNZVCz1kLSQMRO/TdNOSahBI3S5nXE4jzO7u7aFRWQlMAnwyrr8vKMkEU115fCLEyzR2YyjnP+aRMxK34w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.3':
+    resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==}
+
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    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
+
+  '@rolldown/binding-android-arm64@1.1.5':
+    resolution: {integrity: sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.1.5':
+    resolution: {integrity: sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.1.5':
+    resolution: {integrity: sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.1.5':
+    resolution: {integrity: sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
+    resolution: {integrity: sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.1.5':
+    resolution: {integrity: sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.1.5':
+    resolution: {integrity: sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
+    resolution: {integrity: sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.1.5':
+    resolution: {integrity: sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.1.5':
+    resolution: {integrity: sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.1.5':
+    resolution: {integrity: sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.1.5':
+    resolution: {integrity: sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.1.5':
+    resolution: {integrity: sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.1.5':
+    resolution: {integrity: sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.1.5':
+    resolution: {integrity: sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.3.3':
+    resolution: {integrity: sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/node@26.1.1':
+    resolution: {integrity: sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.17':
+    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    resolution: {integrity: sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    resolution: {integrity: sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@typescript/typescript-darwin-x64@7.0.2':
+    resolution: {integrity: sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    resolution: {integrity: sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    resolution: {integrity: sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@typescript/typescript-linux-arm64@7.0.2':
+    resolution: {integrity: sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@typescript/typescript-linux-arm@7.0.2':
+    resolution: {integrity: sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@typescript/typescript-linux-loong64@7.0.2':
+    resolution: {integrity: sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    resolution: {integrity: sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    resolution: {integrity: sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    resolution: {integrity: sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@typescript/typescript-linux-s390x@7.0.2':
+    resolution: {integrity: sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@typescript/typescript-linux-x64@7.0.2':
+    resolution: {integrity: sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    resolution: {integrity: sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    resolution: {integrity: sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    resolution: {integrity: sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@typescript/typescript-win32-arm64@7.0.2':
+    resolution: {integrity: sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@typescript/typescript-win32-x64@7.0.2':
+    resolution: {integrity: sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@vitejs/plugin-react@6.0.4':
+    resolution: {integrity: sha512-XcCQz0TBpBgljhj0gMuuDj49i6Ytqh5q1osT/Gp5uAVJUCTWxyskk/l1jwYYiu2xcNHHipdMz40EGfM1VdamVg==}
+    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
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  cookie-es@3.1.1:
+    resolution: {integrity: sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  enhanced-resolve@5.24.3:
+    resolution: {integrity: sha512-PwKooW9JUzh5chmYfHM3IQl5OkK2u2Nm011MgeZrss3JmFraUx/fqrf78kk8GUMYoibx/14MdwTl/1WKkG7TpQ==}
+    engines: {node: '>=10.13.0'}
+
+  es-toolkit@1.49.0:
+    resolution: {integrity: sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  immer@11.1.15:
+    resolution: {integrity: sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
+  lucide-react@1.26.0:
+    resolution: {integrity: sha512-raglYVR2+VkMfJL158krjVmE+rV5ST2lzA/KQm1FRSjMHT4MnWaegHxoVEpmc2So3nOEhp9oGejJwAPX8MoAjg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.22:
+    resolution: {integrity: sha512-KBDEIpLrvpv16pp3K0Fw+UCoZfopFjjgeB+0tA/aaThfEE74kKDLrgg603YvOWJyg3+WYtyq3xYsQWsIyZlPqQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  radix-ui@1.6.5:
+    resolution: {integrity: sha512-HVHPWDoOXBYxxiwvWR45KPcmvrjoa/NTFUbPbGmYoZv7BFYOIpZKiPQZWcpFJTX5z4LeoGenGCUgoafdYHuPWA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  react-dom@19.2.8:
+    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
+    peerDependencies:
+      react: ^19.2.8
+
+  react-is@19.2.8:
+    resolution: {integrity: sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==}
+
+  react-redux@9.3.0:
+    resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-router@8.3.0:
+    resolution: {integrity: sha512-qyPMvW83jGIct3yiieisxdk9M745anqhpIMKN5m1t6yBMfgVPpt77aHOqs5fUlEJRMCGffg9BaQLH9oPVOL7xQ==}
+    engines: {node: '>=22.22.0'}
+    peerDependencies:
+      react: '>=19.2.7'
+      react-dom: '>=19.2.7'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@19.2.8:
+    resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
+    engines: {node: '>=0.10.0'}
+
+  recharts@3.10.0:
+    resolution: {integrity: sha512-wulMvfncpIlmu2uFtRU/mE5/+NiVtASXkw2KdwJTdHs3WsASX0WxZlX+rpKgyn5BDbIhkPtCpUKkB9XNK5KE0w==}
+    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
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
+  rolldown@1.1.5:
+    resolution: {integrity: sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
+  typescript@7.0.2:
+    resolution: {integrity: sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==}
+    engines: {node: '>=16.20.0'}
+    hasBin: true
+
+  undici-types@8.3.0:
+    resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  vite@8.1.5:
+    resolution: {integrity: sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.3.0
+      esbuild: ^0.27.0 || ^0.28.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
+
+snapshots:
+
+  '@emnapi/core@1.11.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@floating-ui/utils@0.2.12': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@oxc-project/types@0.139.0': {}
+
+  '@radix-ui/number@1.1.3': {}
+
+  '@radix-ui/primitive@1.1.7': {}
+
+  '@radix-ui/react-accessible-icon@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-accordion@1.2.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collapsible': 1.1.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-alert-dialog@1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-arrow@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-aspect-ratio@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-avatar@1.2.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-checkbox@1.3.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-collapsible@1.1.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-collection@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-compose-refs@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-context-menu@2.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-context@1.2.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-dialog@1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-direction@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-dismissable-layer@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.4(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-dropdown-menu@2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-focus-guards@1.1.5(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-focus-scope@1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-form@0.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-label': 2.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-hover-card@1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-id@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-label@2.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-menu@2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-menubar@1.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-navigation-menu@1.2.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-one-time-password-field@0.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-password-toggle-field@0.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.2(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-popover@1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-popper@1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/rect': 1.1.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-portal@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-presence@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-primitive@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-progress@1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-radio-group@1.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-roving-focus@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-scroll-area@1.2.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-select@2.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-separator@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-slider@1.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-slot@1.3.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-switch@1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-tabs@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-toast@1.2.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-toggle-group@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-toggle@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-toolbar@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-tooltip@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-use-callback-ref@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-controllable-state@1.2.5(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-use-effect-event': 0.0.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-effect-event@0.0.4(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-escape-keydown@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-is-hydrated@0.1.2(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-layout-effect@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-previous@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-rect@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/rect': 1.1.3
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-size@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-visually-hidden@1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/rect@1.1.3': {}
+
+  '@reduxjs/toolkit@2.12.0(react-redux@9.3.0(@types/react@19.2.17)(react@19.2.8)(redux@5.0.1))(react@19.2.8)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.15
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.2.0
+    optionalDependencies:
+      react: 19.2.8
+      react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.8)(redux@5.0.1)
+
+  '@rolldown/binding-android-arm64@1.1.5':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.1.5':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.1.5':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.1.5':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.1.5':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.1.5':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.1.5':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.1.5':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.1.5':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@tailwindcss/node@4.3.3':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.24.3
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.3
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.3':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/vite@4.3.3(vite@8.1.5(@types/node@26.1.1)(jiti@2.7.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      tailwindcss: 4.3.3
+      vite: 8.1.5(@types/node@26.1.1)(jiti@2.7.0)
+
+  '@tybys/wasm-util@0.10.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/node@26.1.1':
+    dependencies:
+      undici-types: 8.3.0
+
+  '@types/react-dom@19.2.3(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+
+  '@types/react@19.2.17':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-darwin-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-arm@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-loong64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-s390x@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-win32-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-win32-x64@7.0.2':
+    optional: true
+
+  '@vitejs/plugin-react@6.0.4(vite@8.1.5(@types/node@26.1.1)(jiti@2.7.0))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.1.5(@types/node@26.1.1)(jiti@2.7.0)
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clsx@2.1.1: {}
+
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  cookie-es@3.1.1: {}
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  decimal.js-light@2.5.1: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  enhanced-resolve@5.24.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  es-toolkit@1.49.0: {}
+
+  eventemitter3@5.0.4: {}
+
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  fsevents@2.3.3:
+    optional: true
+
+  get-nonce@1.0.1: {}
+
+  graceful-fs@4.2.11: {}
+
+  immer@11.1.15: {}
+
+  internmap@2.0.3: {}
+
+  jiti@2.7.0: {}
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    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
+
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
+  lucide-react@1.26.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  nanoid@3.3.16: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.5: {}
+
+  postcss@8.5.22:
+    dependencies:
+      nanoid: 3.3.16
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  radix-ui@1.6.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-accessible-icon': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-accordion': 1.2.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-alert-dialog': 1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-aspect-ratio': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-avatar': 1.2.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-checkbox': 1.3.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collapsible': 1.1.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context-menu': 2.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-form': 0.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-hover-card': 1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-label': 2.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menubar': 1.1.22(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-navigation-menu': 1.2.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-one-time-password-field': 0.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-password-toggle-field': 0.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popover': 1.1.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-radio-group': 1.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-scroll-area': 1.2.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-select': 2.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slider': 1.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-switch': 1.3.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tabs': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toast': 1.2.21(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toolbar': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tooltip': 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-escape-keydown': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  react-dom@19.2.8(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      scheduler: 0.27.0
+
+  react-is@19.2.8: {}
+
+  react-redux@9.3.0(@types/react@19.2.17)(react@19.2.8)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      redux: 5.0.1
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-remove-scroll@2.7.2(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      cookie-es: 3.1.1
+      react: 19.2.8
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react@19.2.8: {}
+
+  recharts@3.10.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.17)(react@19.2.8)(redux@5.0.1))(react@19.2.8)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.49.0
+      eventemitter3: 5.0.4
+      immer: 11.1.15
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-is: 19.2.8
+      react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.8)(redux@5.0.1)
+      reselect: 5.2.0
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.8)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  reselect@5.2.0: {}
+
+  rolldown@1.1.5:
+    dependencies:
+      '@oxc-project/types': 0.139.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.1.5
+      '@rolldown/binding-darwin-arm64': 1.1.5
+      '@rolldown/binding-darwin-x64': 1.1.5
+      '@rolldown/binding-freebsd-x64': 1.1.5
+      '@rolldown/binding-linux-arm-gnueabihf': 1.1.5
+      '@rolldown/binding-linux-arm64-gnu': 1.1.5
+      '@rolldown/binding-linux-arm64-musl': 1.1.5
+      '@rolldown/binding-linux-ppc64-gnu': 1.1.5
+      '@rolldown/binding-linux-s390x-gnu': 1.1.5
+      '@rolldown/binding-linux-x64-gnu': 1.1.5
+      '@rolldown/binding-linux-x64-musl': 1.1.5
+      '@rolldown/binding-openharmony-arm64': 1.1.5
+      '@rolldown/binding-wasm32-wasi': 1.1.5
+      '@rolldown/binding-win32-arm64-msvc': 1.1.5
+      '@rolldown/binding-win32-x64-msvc': 1.1.5
+
+  scheduler@0.27.0: {}
+
+  source-map-js@1.2.1: {}
+
+  tailwind-merge@3.6.0: {}
+
+  tailwindcss@4.3.3: {}
+
+  tapable@2.3.3: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
+  tslib@2.8.1: {}
+
+  tw-animate-css@1.4.0: {}
+
+  typescript@7.0.2:
+    optionalDependencies:
+      '@typescript/typescript-aix-ppc64': 7.0.2
+      '@typescript/typescript-darwin-arm64': 7.0.2
+      '@typescript/typescript-darwin-x64': 7.0.2
+      '@typescript/typescript-freebsd-arm64': 7.0.2
+      '@typescript/typescript-freebsd-x64': 7.0.2
+      '@typescript/typescript-linux-arm': 7.0.2
+      '@typescript/typescript-linux-arm64': 7.0.2
+      '@typescript/typescript-linux-loong64': 7.0.2
+      '@typescript/typescript-linux-mips64el': 7.0.2
+      '@typescript/typescript-linux-ppc64': 7.0.2
+      '@typescript/typescript-linux-riscv64': 7.0.2
+      '@typescript/typescript-linux-s390x': 7.0.2
+      '@typescript/typescript-linux-x64': 7.0.2
+      '@typescript/typescript-netbsd-arm64': 7.0.2
+      '@typescript/typescript-netbsd-x64': 7.0.2
+      '@typescript/typescript-openbsd-arm64': 7.0.2
+      '@typescript/typescript-openbsd-x64': 7.0.2
+      '@typescript/typescript-sunos-x64': 7.0.2
+      '@typescript/typescript-win32-arm64': 7.0.2
+      '@typescript/typescript-win32-x64': 7.0.2
+
+  undici-types@8.3.0: {}
+
+  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-sync-external-store@1.6.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite@8.1.5(@types/node@26.1.1)(jiti@2.7.0):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.5
+      postcss: 8.5.22
+      rolldown: 1.1.5
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 26.1.1
+      fsevents: 2.3.3
+      jiti: 2.7.0
diff --git a/web/public/brand/lguplus.svg b/web/public/brand/lguplus.svg
new file mode 100644
index 0000000..e914481
--- /dev/null
+++ b/web/public/brand/lguplus.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 20" role="img" aria-label="LG U+">
+  <!-- 헤더 공동 브랜딩용 워드마크. 매지엔타는 라이트/다크 양쪽에서 대비가
+       충분해 테마별 자산을 나누지 않는다. -->
+  <text x="0" y="15" fill="#E6007E"
+        font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+        font-size="15" font-weight="700" letter-spacing="-0.3">LG U+</text>
+</svg>
diff --git a/web/public/csp/kakao.svg b/web/public/csp/kakao.svg
new file mode 100644
index 0000000..4ca3168
--- /dev/null
+++ b/web/public/csp/kakao.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="카카오 클라우드">
+  <rect width="32" height="32" rx="7" fill="#FEE500"/>
+  <path d="M16 8c-5 0-9 3.1-9 6.9 0 2.4 1.7 4.6 4.2 5.8l-1 3.6a.4.4 0 0 0 .6.44l4.3-2.85c.3.02.6.03.9.03 5 0 9-3.1 9-6.9S21 8 16 8z" fill="#3C1E1E"/>
+</svg>
diff --git a/web/public/csp/naver.svg b/web/public/csp/naver.svg
new file mode 100644
index 0000000..77322ab
--- /dev/null
+++ b/web/public/csp/naver.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="네이버 클라우드">
+  <rect width="32" height="32" rx="7" fill="#03C75A"/>
+  <path d="M7 7h5.6l6.8 9.7V7H25v18h-5.6l-6.8-9.7V25H7z" fill="#fff"/>
+</svg>
diff --git a/web/public/csp/nhn.svg b/web/public/csp/nhn.svg
new file mode 100644
index 0000000..251af12
--- /dev/null
+++ b/web/public/csp/nhn.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="NHN Cloud">
+  <rect width="32" height="32" rx="7" fill="#0B70E1"/>
+  <text x="16" y="21" text-anchor="middle" fill="#fff"
+        font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+        font-size="10" font-weight="700" letter-spacing="-0.4">NHN</text>
+</svg>
diff --git a/web/public/csp/onprem.svg b/web/public/csp/onprem.svg
new file mode 100644
index 0000000..43aecb6
--- /dev/null
+++ b/web/public/csp/onprem.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="LG U+ On-Prem">
+  <rect width="32" height="32" rx="7" fill="#E6007E"/>
+  <text x="16" y="22" text-anchor="middle" fill="#fff"
+        font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+        font-size="14" font-weight="700" letter-spacing="-0.5">U+</text>
+</svg>
diff --git a/web/src/App.tsx b/web/src/App.tsx
new file mode 100644
index 0000000..674219c
--- /dev/null
+++ b/web/src/App.tsx
@@ -0,0 +1,87 @@
+// App — react-router 8.x data router 라우트 정의 (m5-design.md §4.2):
+//   /login                          공개
+//   /        RequireAuth + Shell    (index → /overview 리다이렉트)
+//   ├─ /overview  ├─ /map  └─ /explorer
+//   └─ /gpu (GpuLayout: DemoContext + ContactBubble)
+//      ├─ index(개요) ├─ serving ├─ health ├─ incident ├─ assistant ├─ ruleset
+//      ├─ roadmap ├─ remediation ├─ validation ├─ idle └─ efficiency
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router';
+import { AuthProvider, RequireAuth } from '@/auth/AuthContext';
+import Shell from '@/components/layout/Shell';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useDemoStatus } from '@/hooks/useDemoStatus';
+import Explorer from '@/pages/Explorer';
+import GpuAssistant from '@/pages/gpu/GpuAssistant';
+import GpuEfficiency from '@/pages/gpu/GpuEfficiency';
+import GpuHealth from '@/pages/gpu/GpuHealth';
+import GpuIdle from '@/pages/gpu/GpuIdle';
+import GpuIncident from '@/pages/gpu/GpuIncident';
+import GpuLayout from '@/pages/gpu/GpuLayout';
+import GpuOverview from '@/pages/gpu/GpuOverview';
+import GpuRemediation from '@/pages/gpu/GpuRemediation';
+import GpuRoadmap from '@/pages/gpu/GpuRoadmap';
+import GpuRuleset from '@/pages/gpu/GpuRuleset';
+import GpuServing from '@/pages/gpu/GpuServing';
+import GpuValidation from '@/pages/gpu/GpuValidation';
+import Login from '@/pages/Login';
+import MapPage from '@/pages/Map';
+import Overview from '@/pages/Overview';
+
+// 진입점 — 데모 인스턴스는 GPU 콘솔이 곧 제품이므로 /gpu 로, 실서비스는 기존
+// /overview 로 보낸다(판별 중에는 스켈레톤).
+//
+// 시연 대본은 시나리오 1(룰셋)부터 시작하지만 여기를 /gpu/ruleset 로 바꾸지
+// 않는다 — 로그인 없는 공개 데모라 대부분의 방문자는 발표자가 아니고, 첫 화면이
+// 설정 표면이 되면 제품의 대표 화면(통합 상황판)을 못 보고 나간다. 발표자는
+// 시연 시작 URL(/gpu/ruleset)을 직접 열고, 메뉴 순번 ①~⑥(lib/navigation.ts
+// 규칙 3)이 그 뒤 순회를 안내한다.
+function HomeRedirect() {
+  const demoStatus = useDemoStatus();
+  if (demoStatus === null) {
+    return <Skeleton className="h-8 w-56" />;
+  }
+  return <Navigate to={demoStatus.enabled ? '/gpu' : '/overview'} replace />;
+}
+
+const router = createBrowserRouter([
+  { path: '/login', element: <Login /> },
+  {
+    path: '/',
+    element: (
+      <RequireAuth>
+        <Shell />
+      </RequireAuth>
+    ),
+    children: [
+      { index: true, element: <HomeRedirect /> },
+      { path: 'overview', element: <Overview /> },
+      { path: 'map', element: <MapPage /> },
+      { path: 'explorer', element: <Explorer /> },
+      {
+        path: 'gpu',
+        element: <GpuLayout />,
+        children: [
+          { index: true, element: <GpuOverview /> },
+          { path: 'serving', element: <GpuServing /> },
+          { path: 'health', element: <GpuHealth /> },
+          { path: 'incident', element: <GpuIncident /> },
+          { path: 'assistant', element: <GpuAssistant /> },
+          { path: 'ruleset', element: <GpuRuleset /> },
+          { path: 'roadmap', element: <GpuRoadmap /> },
+          { path: 'remediation', element: <GpuRemediation /> },
+          { path: 'validation', element: <GpuValidation /> },
+          { path: 'idle', element: <GpuIdle /> },
+          { path: 'efficiency', element: <GpuEfficiency /> },
+        ],
+      },
+    ],
+  },
+]);
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
+  );
+}
diff --git a/web/src/auth/AuthContext.tsx b/web/src/auth/AuthContext.tsx
new file mode 100644
index 0000000..6c911c5
--- /dev/null
+++ b/web/src/auth/AuthContext.tsx
@@ -0,0 +1,92 @@
+// AuthContext — 세션 상태(unknown|authed|anon) + RequireAuth 가드 (m5-design.md §4.2).
+// 마운트 시 GET /api/v1/labels 프로브로 세션 유효성 판정: 200 → authed, 401 → anon.
+// 보호 API 어디서든 401 이 나면 api.ts 의 핸들러 경유로 anon 전환 → /login 이동.
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Navigate, useLocation } from 'react-router';
+import { Skeleton } from '@/components/ui/skeleton';
+import { api, setUnauthorizedHandler } from '@/lib/api';
+
+type AuthStatus = 'unknown' | 'authed' | 'anon';
+
+interface AuthContextValue {
+  status: AuthStatus;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<AuthStatus>('unknown');
+
+  useEffect(() => {
+    setUnauthorizedHandler(() => setStatus('anon'));
+    let cancelled = false;
+    void (async () => {
+      try {
+        await api.labels();
+        if (!cancelled) setStatus('authed');
+      } catch {
+        // 401 은 핸들러가 이미 anon 전환 — 네트워크 오류도 로그인 화면으로 보낸다
+        // (unknown 고착 = 무한 스켈레톤 방지).
+        if (!cancelled) setStatus('anon');
+      }
+    })();
+    return () => {
+      cancelled = true;
+      setUnauthorizedHandler(null);
+    };
+  }, []);
+
+  const login = useCallback(async (username: string, password: string) => {
+    await api.login(username, password);
+    setStatus('authed');
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      await api.logout();
+    } finally {
+      setStatus('anon');
+    }
+  }, []);
+
+  const value = useMemo(() => ({ status, login, logout }), [status, login, logout]);
+
+  return <AuthContext value={value}>{children}</AuthContext>;
+}
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error('observatory: useAuth 는 AuthProvider 안에서만 호출할 수 있다');
+  }
+  return ctx;
+}
+
+/** 보호 라우트 가드 — unknown 동안 스켈레톤, anon 이면 /login 으로(복귀 경로 보존). */
+export function RequireAuth({ children }: { children: ReactNode }) {
+  const { status } = useAuth();
+  const location = useLocation();
+
+  if (status === 'unknown') {
+    return (
+      <div className="flex min-h-svh flex-col items-center justify-center gap-3">
+        <Skeleton className="h-8 w-56" />
+        <Skeleton className="h-4 w-40" />
+      </div>
+    );
+  }
+  if (status === 'anon') {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+  return <>{children}</>;
+}
diff --git a/web/src/components/gpu/ActiveMonitoring.tsx b/web/src/components/gpu/ActiveMonitoring.tsx
new file mode 100644
index 0000000..b000730
--- /dev/null
+++ b/web/src/components/gpu/ActiveMonitoring.tsx
@@ -0,0 +1,676 @@
+// ActiveMonitoring — 실시간 액티브 모니터링. 같은 플릿을 5개 관점으로 가른다
+// (목업 demo1 의 좌측 탭): 인프라 계층을 따라가는 토폴로지, 서비스(서빙 풀)
+// 관점, 그리고 클러스터·CSP·존/리전 롤업.
+//
+// 계층 축이 두 개라는 게 핵심이다 — 인프라는 CSP → 클러스터 → 노드풀 → 노드로
+// 내려가고, 서비스는 테넌트 → 서빙 풀 → 노드로 내려간다. 같은 GPU 가 두 축
+// 모두에 속하므로, 탭을 바꾸면 "같은 장비를 다른 소속으로" 보게 된다.
+//
+// 데이터는 전부 벽면 셀(useFleet)에서 집계한다 — 새 API 없음.
+import { Maximize2, Shrink, ZoomIn, ZoomOut } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
+import NodeGpuPanel from '@/components/gpu/NodeGpuPanel';
+import TopologyGraph, {
+  type TopologyAxis,
+  type TopologyLayout,
+} from '@/components/gpu/TopologyGraph';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { CellStatus, FleetCell } from '@/hooks/useFleet';
+import type {
+  AlertEvent,
+  ClusterEvent,
+  CSPSummary,
+  PoolSummary,
+  StatusCount,
+} from '@/lib/demoApi';
+import { bandForUtil, formatCount, formatPct } from '@/lib/gpuMetrics';
+
+export interface ActiveMonitoringProps {
+  cells: FleetCell[] | null;
+  csps: CSPSummary[];
+  pools: PoolSummary[];
+  /** 셀 상태 분류자 — 장애·격리 집계용(호출부가 시나리오를 안다). */
+  statusOf?: (cell: FleetCell) => CellStatus;
+  /** 노드 선택 → 드릴 시트(자산 대장) 열기. */
+  onSelectNode?: (instance: string) => void;
+  /** 상단 상태 요약 칩 — 서버가 한 번 분류한 dashboard.gpus 를 그대로 쓴다. */
+  gpuStatus?: StatusCount[];
+  /** 노드 패널 이벤트 탭 소재. */
+  alerts?: AlertEvent[];
+  events?: ClusterEvent[];
+}
+
+/** 상태 칩 색 — StatusCount.tone 이 색을 정한다(라벨 문자열로 색 추론 금지). */
+const TONE_DOT: Record<StatusCount['tone'], string> = {
+  ok: 'var(--metric-pod)',
+  info: 'var(--metric-cpu)',
+  warn: 'var(--metric-thermal)',
+  major: 'var(--metric-thermal)',
+  crit: 'var(--metric-fault)',
+  muted: 'var(--muted-foreground)',
+};
+
+interface Agg {
+  gpus: number;
+  nodes: number;
+  utilSum: number;
+  fault: number;
+  degraded: number;
+}
+
+const EMPTY: Agg = { gpus: 0, nodes: 0, utilSum: 0, fault: 0, degraded: 0 };
+
+/** key 별 집계 — nodes 는 instance distinct 라 Set 을 따로 든다. */
+function aggregate(
+  cells: FleetCell[],
+  keyOf: (c: FleetCell) => string,
+  statusOf?: (c: FleetCell) => CellStatus,
+): Map<string, Agg & { instances: Set<string> }> {
+  const out = new Map<string, Agg & { instances: Set<string> }>();
+  for (const c of cells) {
+    const k = keyOf(c);
+    if (!k) continue;
+    let a = out.get(k);
+    if (!a) {
+      a = { ...EMPTY, instances: new Set() };
+      out.set(k, a);
+    }
+    a.gpus += 1;
+    a.instances.add(c.instance);
+    if (Number.isFinite(c.util)) a.utilSum += c.util;
+    const st = statusOf?.(c);
+    if (st === 'fault' || st === 'isolated') a.fault += 1;
+    else if (st === 'degraded') a.degraded += 1;
+  }
+  for (const a of out.values()) a.nodes = a.instances.size;
+  return out;
+}
+
+/** 롤업 한 줄 — 이름 / GPU·노드 수 / 평균 사용률 막대 / 장애 배지. */
+function RollupRow({
+  label,
+  sub,
+  agg,
+  onClick,
+}: {
+  label: string;
+  sub?: string;
+  agg: Agg;
+  onClick?: () => void;
+}) {
+  const util = agg.gpus > 0 ? agg.utilSum / agg.gpus : 0;
+  const band = bandForUtil(util);
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={!onClick}
+        className={`flex w-full items-center gap-3 rounded-md border bg-card p-2.5 text-left ${
+          onClick ? 'hover:bg-accent' : ''
+        }`}
+      >
+        <div className="min-w-0 flex-1">
+          <p className="truncate font-medium text-sm" title={label}>
+            {label}
+          </p>
+          {sub ? (
+            <p className="truncate text-[11px] text-muted-foreground" title={sub}>
+              {sub}
+            </p>
+          ) : null}
+        </div>
+        <div className="shrink-0 text-right">
+          <p className="font-semibold text-sm tabular-nums">{formatCount(agg.gpus)}장</p>
+          <p className="text-[11px] text-muted-foreground tabular-nums">
+            노드 {formatCount(agg.nodes)}
+          </p>
+        </div>
+        {/* 평균 사용률 — 대역 색으로 한눈에. */}
+        <div className="hidden w-28 shrink-0 sm:block">
+          <div className="mb-1 flex justify-between text-[11px] tabular-nums">
+            <span className="text-muted-foreground">사용률</span>
+            <span className="font-medium">{formatPct(util, 0)}</span>
+          </div>
+          <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+            <div
+              className="h-full rounded-full"
+              style={{
+                width: `${Math.max(util, 1)}%`,
+                backgroundColor: `var(--util-band-${band.index})`,
+              }}
+            />
+          </div>
+        </div>
+        <div className="flex shrink-0 gap-1">
+          {agg.fault > 0 ? (
+            <Badge variant="destructive" className="text-[10px]">
+              장애 {agg.fault}
+            </Badge>
+          ) : null}
+          {agg.degraded > 0 ? (
+            <Badge variant="outline" className="text-[10px] text-metric-thermal">
+              경고 {agg.degraded}
+            </Badge>
+          ) : null}
+        </div>
+      </button>
+    </li>
+  );
+}
+
+/** 인프라 토폴로지 — CSP → 클러스터 → 노드풀 → 노드. 계층을 펼쳐 내려간다. */
+function TopologyView({
+  cells,
+  statusOf,
+  onSelectNode,
+}: {
+  cells: FleetCell[];
+  statusOf?: (c: FleetCell) => CellStatus;
+  onSelectNode?: (i: string) => void;
+}) {
+  const [csp, setCsp] = useState<string | null>(null);
+  const [cluster, setCluster] = useState<string | null>(null);
+  const [nodePool, setNodePool] = useState<string | null>(null);
+
+  const level = nodePool ? 'node' : cluster ? 'pool' : csp ? 'cluster' : 'csp';
+  const scoped = useMemo(
+    () =>
+      cells.filter(
+        (c) =>
+          (!csp || c.csp === csp) &&
+          (!cluster || c.cluster === cluster) &&
+          (!nodePool || c.nodePool === nodePool),
+      ),
+    [cells, csp, cluster, nodePool],
+  );
+
+  const keyOf =
+    level === 'csp'
+      ? (c: FleetCell) => c.csp
+      : level === 'cluster'
+        ? (c: FleetCell) => c.cluster
+        : level === 'pool'
+          ? (c: FleetCell) => c.nodePool
+          : (c: FleetCell) => c.instance;
+  const groups = useMemo(() => aggregate(scoped, keyOf, statusOf), [scoped, keyOf, statusOf]);
+  const rows = [...groups.entries()].sort((a, b) => b[1].gpus - a[1].gpus);
+
+  const LEVEL_LABEL: Record<string, string> = {
+    csp: 'CSP',
+    cluster: '클러스터',
+    pool: '노드 풀',
+    node: 'GPU 워커 노드',
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* 브레드크럼 — 계층을 되짚어 올라간다. */}
+      <div className="flex flex-wrap items-center gap-1 text-xs">
+        <button
+          type="button"
+          className="text-primary underline-offset-4 hover:underline"
+          onClick={() => {
+            setCsp(null);
+            setCluster(null);
+            setNodePool(null);
+          }}
+        >
+          전체 CSP
+        </button>
+        {csp ? (
+          <>
+            <span className="text-muted-foreground">›</span>
+            <button
+              type="button"
+              className="text-primary underline-offset-4 hover:underline"
+              onClick={() => {
+                setCluster(null);
+                setNodePool(null);
+              }}
+            >
+              {csp}
+            </button>
+          </>
+        ) : null}
+        {cluster ? (
+          <>
+            <span className="text-muted-foreground">›</span>
+            <button
+              type="button"
+              className="text-primary underline-offset-4 hover:underline"
+              onClick={() => setNodePool(null)}
+            >
+              {cluster}
+            </button>
+          </>
+        ) : null}
+        {nodePool ? (
+          <>
+            <span className="text-muted-foreground">›</span>
+            <span className="font-medium">{nodePool}</span>
+          </>
+        ) : null}
+        <Badge variant="secondary" className="ml-auto text-[10px]">
+          {LEVEL_LABEL[level]} {rows.length}개 · GPU {formatCount(scoped.length)}장
+        </Badge>
+      </div>
+
+      {rows.length === 0 ? (
+        <p className="py-8 text-center text-muted-foreground text-sm">표시할 대상이 없다.</p>
+      ) : (
+        <ul className="flex max-h-[26rem] flex-col gap-1.5 overflow-auto pr-1">
+          {rows.slice(0, 60).map(([key, agg]) => (
+            <RollupRow
+              key={key}
+              label={key}
+              sub={
+                level === 'node'
+                  ? `${agg.gpus}장 · ${nodePool ?? ''}`
+                  : level === 'pool'
+                    ? 'K8s 노드 풀'
+                    : undefined
+              }
+              agg={agg}
+              onClick={
+                level === 'csp'
+                  ? () => setCsp(key)
+                  : level === 'cluster'
+                    ? () => setCluster(key)
+                    : level === 'pool'
+                      ? () => setNodePool(key)
+                      : onSelectNode
+                        ? () => onSelectNode(key)
+                        : undefined
+              }
+            />
+          ))}
+        </ul>
+      )}
+      {rows.length > 60 ? (
+        <p className="text-[11px] text-muted-foreground">
+          상위 60개만 표시 — 좁히려면 상단 필터를 쓴다.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** 단일 축 롤업 뷰(서비스 앱 / 클러스터 / CSP / 존·리전 공용). */
+function RollupView({
+  cells,
+  keyOf,
+  labelOf,
+  statusOf,
+  empty,
+}: {
+  cells: FleetCell[];
+  keyOf: (c: FleetCell) => string;
+  labelOf?: (key: string) => { label: string; sub?: string };
+  statusOf?: (c: FleetCell) => CellStatus;
+  empty: string;
+}) {
+  const groups = useMemo(() => aggregate(cells, keyOf, statusOf), [cells, keyOf, statusOf]);
+  const rows = [...groups.entries()].sort((a, b) => b[1].gpus - a[1].gpus);
+  if (rows.length === 0) {
+    return <p className="py-8 text-center text-muted-foreground text-sm">{empty}</p>;
+  }
+  return (
+    <ul className="flex max-h-[26rem] flex-col gap-1.5 overflow-auto pr-1">
+      {rows.map(([key, agg]) => {
+        const l = labelOf?.(key) ?? { label: key };
+        return <RollupRow key={key} label={l.label} sub={l.sub} agg={agg} />;
+      })}
+    </ul>
+  );
+}
+
+/** 탭 = 관점. 인프라 축 4개 + 서비스 축 1개, 순서는 목업 그대로. */
+type TabId = 'topology' | 'service' | 'cluster' | 'csp' | 'region';
+
+const TAB_ORDER: readonly TabId[] = ['topology', 'service', 'cluster', 'csp', 'region'];
+
+const TAB_LABEL: Record<TabId, string> = {
+  topology: '토폴로지',
+  service: '서비스 앱',
+  cluster: '클러스터',
+  csp: 'CSP',
+  region: '존·리전',
+};
+
+const LAYOUT_LABEL: Record<TopologyLayout, string> = {
+  auto: '자동',
+  even: '균등',
+  compact: '밀집',
+};
+
+const TOP_N_MIN = 4;
+const TOP_N_MAX = 8;
+
+const WORKLOAD_LABEL: Record<string, string> = { training: '학습', inference: '추론' };
+
+/** 서비스 축에서 테넌트·풀이 비어 있는 GPU 의 대체 키 — 실제 이름과 겹치지 않게. */
+const UNASSIGNED = 'unassigned';
+const unassignedLabel = (k: string) => (k === UNASSIGNED ? '미할당' : k);
+
+export default function ActiveMonitoring({
+  cells,
+  csps,
+  pools,
+  statusOf,
+  onSelectNode,
+  gpuStatus,
+  alerts,
+  events,
+}: ActiveMonitoringProps) {
+  const cspDisplay = useMemo(() => {
+    const m: Record<string, string> = {};
+    for (const c of csps) m[c.id] = c.display;
+    return m;
+  }, [csps]);
+  const poolMeta = useMemo(() => {
+    const m: Record<string, PoolSummary> = {};
+    for (const p of pools) m[p.id] = p;
+    return m;
+  }, [pools]);
+
+  // 토폴로지에서 고른 워커 — 우측 실시간 패널의 대상. 드릴 시트(자산 대장)와는
+  // 별개다: 패널은 항상 붙어 있고, 시트는 [상세 보기]로 연다.
+  const [picked, setPicked] = useState<string | null>(null);
+  const [q, setQ] = useState('');
+  const [layout, setLayout] = useState<TopologyLayout>('auto');
+  const [topN, setTopN] = useState(TOP_N_MIN);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const toggleFullscreen = () => {
+    const el = rootRef.current;
+    if (!el) return;
+    if (document.fullscreenElement) void document.exitFullscreen();
+    else void el.requestFullscreen?.();
+  };
+
+  // 축 정의 — 마지막 열은 어느 탭이든 워커 노드(instance)다. 그래야 GPU 칸
+  // 그리드와 우측 실시간 패널이 탭과 무관하게 같은 계약으로 붙는다.
+  const nodeAxis = useMemo<TopologyAxis>(
+    () => ({ label: '워커 노드', keyOf: (c) => c.instance }),
+    [],
+  );
+  // GPU 열 라벨 — uuid 는 화면에 쓸 수 없으니 device(GPU-3)로 바꿔 보여준다.
+  const uuidToDevice = useMemo(() => {
+    const m: Record<string, string> = {};
+    for (const c of cells ?? []) m[c.uuid] = c.device;
+    return m;
+  }, [cells]);
+  const axesFor = useMemo(() => {
+    const csp: TopologyAxis = {
+      label: 'CSP',
+      keyOf: (c) => c.csp,
+      displayOf: (k) => cspDisplay[k] ?? k,
+    };
+    const cluster: TopologyAxis = { label: '클러스터', keyOf: (c) => c.cluster };
+    const pool: TopologyAxis = { label: '노드 풀', keyOf: (c) => c.nodePool };
+    const region: TopologyAxis = { label: '리전', keyOf: (c) => c.region };
+    // GPU 열 — 개체가 첫 열이다. 라벨은 device(GPU-3)만 쓰고 노드명은 노드 열이
+    // 바로 옆에서 말해 준다.
+    const gpu: TopologyAxis = {
+      label: 'GPU',
+      keyOf: (c) => c.uuid,
+      displayOf: (k) => uuidToDevice[k] ?? k.slice(0, 8),
+    };
+    const table: Record<TabId, TopologyAxis[]> = {
+      // 인프라 축 — PDF(2026-07-30 p3) 지시대로 왼쪽부터 세부→상위다:
+      // GPU → Worker Node → Node Pool → Cluster → CSP.
+      topology: [gpu, nodeAxis, pool, cluster, csp],
+      // 서비스 축 — 같은 장비를 "무엇을 돌리는가"로 다시 묶는다. 방향은 인프라
+      // 축과 같이 세부→상위. 미할당 GPU 도 UNASSIGNED 로 끝까지 이어 붙인다 —
+      // 중간에서 키가 비면 그 열에서 탈락해 옆 열이 배선 없는 고립 노드로
+      // 남는다(실측 482장).
+      service: [
+        gpu,
+        nodeAxis,
+        {
+          label: '서비스',
+          keyOf: (c) => c.pool || UNASSIGNED,
+          displayOf: (k) => (k === UNASSIGNED ? '미할당' : (poolMeta[k]?.display ?? k)),
+        },
+        { label: '테넌트', keyOf: (c) => c.tenant || UNASSIGNED, displayOf: unassignedLabel },
+        {
+          label: '워크로드',
+          keyOf: (c) => c.workload || UNASSIGNED,
+          displayOf: (k) => WORKLOAD_LABEL[k] ?? '미할당',
+        },
+      ],
+      cluster: [gpu, nodeAxis, pool, cluster],
+      csp: [gpu, nodeAxis, cluster, region, csp],
+      // 리전은 이름에 CSP 가 이미 들어 있어(kakao-kr1) 리전↔CSP 는 1:1 평행선이
+      // 된다 — 갈래가 생기는 노드풀·클러스터를 사이에 둔다.
+      region: [gpu, nodeAxis, pool, cluster, region],
+    };
+    return (id: TabId) => table[id];
+  }, [cspDisplay, poolMeta, nodeAxis, uuidToDevice]);
+
+  /** 드릴다운 목록의 라벨 — 그래프 첫 열과 같은 표시명을 쓴다. */
+  const rollupLabelOf = useMemo(
+    () =>
+      (id: TabId): ((k: string) => { label: string; sub?: string }) | undefined => {
+        if (id === 'csp') return (k) => ({ label: cspDisplay[k] ?? k });
+        if (id === 'service')
+          return (k) => ({ label: WORKLOAD_LABEL[k] ?? '미할당' });
+        return undefined;
+      },
+    [cspDisplay],
+  );
+
+  // 검색은 그래프에 먹이기 전에 셀을 좁힌다 — 이름 4축(노드/클러스터/노드풀/CSP)
+  // 부분일치. 빈 문자열이면 원본 그대로(불필요한 배열 복사 회피).
+  const searched = useMemo(() => {
+    const base = cells ?? [];
+    const t = q.trim().toLowerCase();
+    if (!t) return base;
+    return base.filter(
+      (c) =>
+        c.instance.toLowerCase().includes(t) ||
+        c.cluster.toLowerCase().includes(t) ||
+        c.nodePool.toLowerCase().includes(t) ||
+        c.csp.toLowerCase().includes(t),
+    );
+  }, [cells, q]);
+
+  return (
+    // 전체화면 대상 = 카드 통째. 전체화면에서도 배경이 비치지 않도록 bg 를 준다.
+    <Card ref={rootRef} className="bg-card">
+      <CardHeader className="pb-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <CardTitle className="text-base">실시간 액티브 모니터링</CardTitle>
+          <Badge variant="outline" className="gap-1 text-[10px]">
+            <span className="size-1.5 rounded-full bg-metric-pod" />
+            Active Monitoring
+          </Badge>
+          <div className="ml-auto w-full sm:w-56">
+            <Input
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="GPU, 노드, 클러스터 검색…"
+              className="h-8 text-xs"
+              aria-label="토폴로지 검색"
+            />
+          </div>
+        </div>
+
+        {/* 상태 요약 칩 — 서버가 한 번 분류한 값(dashboard.gpus)이라 화면끼리 숫자가 어긋나지 않는다. */}
+        {gpuStatus && gpuStatus.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 pt-1">
+            {gpuStatus.map((s) => (
+              <span key={s.key} className="flex items-center gap-1.5 text-xs">
+                <span
+                  className="size-2 shrink-0 rounded-full"
+                  style={{ backgroundColor: TONE_DOT[s.tone] }}
+                />
+                <span className="text-muted-foreground">{s.label}</span>
+                <span className="font-semibold tabular-nums">{formatCount(s.count)}</span>
+              </span>
+            ))}
+          </div>
+        ) : null}
+
+        <CardDescription className="text-xs">
+          왼쪽부터 GPU → 워커 노드 → 노드 풀 → 클러스터 → CSP. 개체에서 시작해 소속을
+          거슬러 올라간다. 탭을 바꾸면 같은 장비가 다른 축(서비스·클러스터·CSP·리전)으로
+          다시 묶인다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {cells === null ? (
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-8 w-72" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+        ) : (
+          <Tabs defaultValue="topology">
+            <div className="mb-3 flex flex-wrap items-center gap-2">
+              <TabsList>
+                {TAB_ORDER.map((id) => (
+                  <TabsTrigger key={id} value={id} className="text-xs">
+                    {TAB_LABEL[id]}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              {/* 그래프 툴바 — 목업의 [레이아웃 ▾][정렬][확대][전체화면]. */}
+              <div className="ml-auto flex shrink-0 items-center gap-1">
+                <Select
+                  value={layout}
+                  onValueChange={(v) => setLayout(v as TopologyLayout)}
+                >
+                  <SelectTrigger size="sm" aria-label="그래프 레이아웃">
+                    <span className="whitespace-nowrap text-xs">
+                      레이아웃: {LAYOUT_LABEL[layout]}
+                    </span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(Object.keys(LAYOUT_LABEL) as TopologyLayout[]).map((k) => (
+                      <SelectItem key={k} value={k}>
+                        {LAYOUT_LABEL[k]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="size-8"
+                  title="선택 해제 후 전체 보기"
+                  aria-label="전체 보기로 맞춤"
+                  onClick={() => {
+                    setPicked(null);
+                    setQ('');
+                  }}
+                >
+                  <Shrink className="size-3.5" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="size-8"
+                  title={`열마다 상위 ${topN}개 표시 — 눌러서 ${topN === TOP_N_MIN ? TOP_N_MAX : TOP_N_MIN}개로`}
+                  aria-label="표시 개수 전환"
+                  onClick={() => setTopN((n) => (n === TOP_N_MIN ? TOP_N_MAX : TOP_N_MIN))}
+                >
+                  {topN === TOP_N_MIN ? (
+                    <ZoomIn className="size-3.5" />
+                  ) : (
+                    <ZoomOut className="size-3.5" />
+                  )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="size-8"
+                  title="전체화면"
+                  aria-label="전체화면"
+                  onClick={toggleFullscreen}
+                >
+                  <Maximize2 className="size-3.5" />
+                </Button>
+              </div>
+            </div>
+
+            {/* 5개 탭이 같은 그래프를 축만 바꿔 재사용한다 — 같은 장비가 탭마다
+                다른 소속으로 보인다. 마지막 열은 어느 축이든 워커 노드다. */}
+            {TAB_ORDER.map((id) => (
+              <TabsContent key={id} value={id}>
+                {/* 2열 전환은 2xl(1536px)부터 — xl(1280px)에서 나누면 우측 패널
+                    20rem 을 떼고 남는 그래프 폭이 628px 로, 1열일 때(960px)보다
+                    오히려 좁아져 글자가 8.2px 로 뭉갠다. 넓어질 때만 나눈다. */}
+                <div className="grid gap-3 2xl:grid-cols-[minmax(0,1fr)_20rem]">
+                  <TopologyGraph
+                    cells={searched}
+                    axes={axesFor(id)}
+                    statusOf={statusOf}
+                    selected={picked}
+                    onSelectNode={setPicked}
+                    topN={topN}
+                    layout={layout}
+                    nodeCol={1}
+                  />
+                  <NodeGpuPanel
+                    instance={picked}
+                    cells={searched}
+                    statusOf={statusOf}
+                    alerts={alerts}
+                    events={events}
+                    onOpenDetail={onSelectNode}
+                  />
+                </div>
+
+                {/* 그래프는 열마다 상위 몇 개만 그린다 — 전수 탐색은 이 목록이 담당한다. */}
+                <details className="mt-3">
+                  <summary className="cursor-pointer text-muted-foreground text-xs hover:text-foreground">
+                    전체 목록으로 보기 ({axesFor(id).map((a) => a.label).join(' → ')})
+                  </summary>
+                  <div className="mt-2">
+                    {id === 'topology' ? (
+                      <TopologyView
+                        cells={searched}
+                        statusOf={statusOf}
+                        onSelectNode={onSelectNode}
+                      />
+                    ) : (
+                      <RollupView
+                        cells={searched}
+                        keyOf={axesFor(id)[0].keyOf}
+                        labelOf={rollupLabelOf(id)}
+                        statusOf={statusOf}
+                        empty="표시할 대상이 없다."
+                      />
+                    )}
+                  </div>
+                </details>
+              </TabsContent>
+            ))}
+          </Tabs>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/AlertTimeline.tsx b/web/src/components/gpu/AlertTimeline.tsx
new file mode 100644
index 0000000..a251e85
--- /dev/null
+++ b/web/src/components/gpu/AlertTimeline.tsx
@@ -0,0 +1,111 @@
+// AlertTimeline — 알림 이벤트 세로 타임라인. 최신이 위로 오도록 정렬하고,
+// 심각도는 점 색(critical=fault 빨강 / warning=thermal 주황 / info=cpu 파랑)으로
+// 표현한다. 데모 시나리오의 XID·ECC·온도 알림 서사가 여기 쌓인다.
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import type { AlertEvent } from '@/lib/demoApi';
+
+export interface AlertTimelineProps {
+  alerts: AlertEvent[];
+  /** 주면 각 항목에 [확인] 버튼이 붙는다(ack-alert 호출부 담당). 안 주면 현행 그대로. */
+  onAck?: (id: number) => void;
+  /** true 면 critical·major 항목에 심각도 배지를 붙인다(GPU Assistant 이벤트 카드).
+   *  warning·info 는 점 색으로 충분해 배지를 달지 않는다 — 전 행에 배지가 붙으면
+   *  "무엇이 심각한가"라는 신호가 죽는다. */
+  severityBadge?: boolean;
+}
+
+const SEVERITY_COLOR: Record<AlertEvent['severity'], string> = {
+  critical: 'var(--metric-fault)',
+  major: 'var(--metric-thermal)',
+  warning: 'var(--metric-mem)',
+  info: 'var(--metric-cpu)',
+};
+
+const SEVERITY_LABEL: Record<AlertEvent['severity'], string> = {
+  critical: 'Critical',
+  major: 'Major',
+  warning: 'Warning',
+  info: '정보',
+};
+
+export default function AlertTimeline({ alerts, onAck, severityBadge }: AlertTimelineProps) {
+  // 확인 상태의 진실은 서버(alert.acked)다 — 로컬 배열은 클릭 직후 폴링이
+  // 돌아오기 전까지의 즉시 피드백용이며, 둘의 합집합으로 표시한다.
+  const [acked, setAcked] = useState<number[]>([]);
+  const isAcked = (alert: AlertEvent) => alert.acked === true || acked.includes(alert.id);
+  const sorted = [...alerts].sort((a, b) => b.at - a.at);
+
+  if (sorted.length === 0) {
+    return <p className="py-6 text-center text-muted-foreground text-sm">수신된 알림이 없다.</p>;
+  }
+
+  return (
+    <ol className="max-h-96 overflow-auto pr-1">
+      {sorted.map((alert, index) => (
+        <li
+          key={alert.id || `${alert.at}-${alert.code}-${index}`}
+          className={`relative ml-1.5 border-border border-l pb-4 pl-4 last:pb-0 ${
+            isAcked(alert) ? 'opacity-50' : ''
+          }`}
+        >
+          <span
+            aria-label={`심각도 ${SEVERITY_LABEL[alert.severity]}`}
+            className="absolute top-1 -left-[5px] size-2.5 rounded-full ring-2 ring-card"
+            style={{ backgroundColor: SEVERITY_COLOR[alert.severity] }}
+          />
+          <div className="flex flex-col gap-0.5">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-muted-foreground text-xs tabular-nums">
+                {new Date(alert.at).toLocaleTimeString('ko-KR')}
+              </span>
+              <Badge variant="outline" className="font-mono text-[10px]">
+                {alert.code}
+              </Badge>
+              {severityBadge && (alert.severity === 'critical' || alert.severity === 'major') ? (
+                <Badge
+                  variant="outline"
+                  className="text-[10px] uppercase"
+                  style={{
+                    color: SEVERITY_COLOR[alert.severity],
+                    borderColor: SEVERITY_COLOR[alert.severity],
+                    backgroundColor: `color-mix(in srgb, ${SEVERITY_COLOR[alert.severity]} 12%, transparent)`,
+                  }}
+                >
+                  {SEVERITY_LABEL[alert.severity]}
+                </Badge>
+              ) : null}
+              {onAck ? (
+                isAcked(alert) ? (
+                  <span className="ml-auto text-muted-foreground text-[10px]">확인됨</span>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="ml-auto h-6 px-2 text-[10px]"
+                    onClick={() => {
+                      setAcked((prev) => [...prev, alert.id]);
+                      onAck(alert.id);
+                    }}
+                  >
+                    확인
+                  </Button>
+                )
+              ) : null}
+            </div>
+            <p className="font-medium text-sm leading-snug">{alert.title}</p>
+            {alert.instance || alert.device ? (
+              <p className="font-mono text-muted-foreground text-xs">
+                {[alert.instance, alert.device].filter(Boolean).join(' · ')}
+              </p>
+            ) : null}
+            {alert.detail ? (
+              <p className="text-muted-foreground text-xs leading-snug">{alert.detail}</p>
+            ) : null}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
diff --git a/web/src/components/gpu/AssistantBubble.tsx b/web/src/components/gpu/AssistantBubble.tsx
new file mode 100644
index 0000000..c421786
--- /dev/null
+++ b/web/src/components/gpu/AssistantBubble.tsx
@@ -0,0 +1,24 @@
+// AssistantBubble — 우하단 고정 "GPU Assistant" 진입 버블(데모 모드 전용).
+// 기존 문의하기 버블을 대체한다(사용자 지시 2026-07-28): 어느 GPU 화면에서든
+// 진행 중 장애를 문맥으로 어시스턴트에게 물어보러 들어가는 단일 진입점이다.
+// 어시스턴트 화면(/gpu/assistant) 자신에서는 숨긴다(자기 진입 버블 불필요).
+import { Bot } from 'lucide-react';
+import { useLocation, useNavigate } from 'react-router';
+import { Button } from '@/components/ui/button';
+
+export default function AssistantBubble() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  if (pathname === '/gpu/assistant') return null;
+
+  return (
+    <Button
+      className="fixed right-4 bottom-4 z-50 h-11 rounded-full shadow-lg"
+      onClick={() => navigate('/gpu/assistant')}
+      aria-label="GPU Assistant 열기"
+    >
+      <Bot className="size-4" />
+      GPU Assistant
+    </Button>
+  );
+}
diff --git a/web/src/components/gpu/CollectDonut.tsx b/web/src/components/gpu/CollectDonut.tsx
new file mode 100644
index 0000000..7d9d0fe
--- /dev/null
+++ b/web/src/components/gpu/CollectDonut.tsx
@@ -0,0 +1,80 @@
+// CollectDonut — demo1 우하단 "수집 상태" 위젯. collect[] 를 tone 색 도넛으로 보이고
+// 중앙에 총 노드수, 우측에 라벨·건수·비율 범례를 둔다. IdleDonut 도넛 패턴 계승.
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { StatusCount } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+// tone → 조각 색. 라벨 문자열이 아니라 tone 이 색을 정한다(StatusCount 계약).
+const TONE_COLORS: Record<StatusCount['tone'], string> = {
+  ok: 'var(--metric-pod)',
+  info: 'var(--metric-cpu)',
+  warn: 'var(--metric-thermal)',
+  major: 'var(--metric-fault)',
+  crit: 'var(--metric-fault)',
+  muted: 'var(--muted-foreground)',
+};
+
+export default function CollectDonut({ collect }: { collect: StatusCount[] }) {
+  const slices = collect.filter((c) => c.count > 0);
+  const total = slices.reduce((s, x) => s + x.count, 0);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>수집 상태</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {total === 0 ? (
+          <p className="py-6 text-center text-muted-foreground text-sm">수집 대상이 없다.</p>
+        ) : (
+          <div className="flex items-center gap-4">
+            <div className="relative h-28 w-28 shrink-0">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={slices}
+                    dataKey="count"
+                    nameKey="label"
+                    innerRadius={34}
+                    outerRadius={54}
+                    paddingAngle={2}
+                    isAnimationActive={false}
+                    stroke="var(--card)"
+                    strokeWidth={2}
+                  >
+                    {slices.map((s) => (
+                      <Cell key={s.key} fill={TONE_COLORS[s.tone]} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </ResponsiveContainer>
+              {/* 중앙 총 노드수 오버레이 */}
+              <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+                <span className="font-semibold text-lg tabular-nums leading-none">
+                  {formatCount(total)}
+                </span>
+                <span className="text-muted-foreground text-xs">노드</span>
+              </div>
+            </div>
+            <ul className="flex min-w-0 flex-1 flex-col gap-1.5">
+              {slices.map((s) => (
+                <li key={s.key} className="flex items-center gap-2 text-sm">
+                  <span
+                    className="size-2.5 shrink-0 rounded-full"
+                    style={{ backgroundColor: TONE_COLORS[s.tone] }}
+                  />
+                  <span className="min-w-0 flex-1 truncate">{s.label}</span>
+                  <span className="shrink-0 font-semibold tabular-nums">{formatCount(s.count)}</span>
+                  <span className="shrink-0 text-muted-foreground text-xs tabular-nums">
+                    {`${Math.round((s.count / total) * 100)}%`}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/ContactBubble.tsx b/web/src/components/gpu/ContactBubble.tsx
new file mode 100644
index 0000000..c5e2e43
--- /dev/null
+++ b/web/src/components/gpu/ContactBubble.tsx
@@ -0,0 +1,167 @@
+// ContactBubble — 우하단 고정 "문의하기" 버블(데모 모드 전용).
+//
+// 공개 데모를 본 방문자가 문의를 남기면 서버가 받아 보관한다. 접수 경로는
+// 무인증이라 서버가 필드 검증·접수 상한을 갖고 있고, 여기서는 그 거절을
+// 방문자가 이해할 수 있는 문장으로 되돌려준다(400 = 입력 문제 / 429 = 잠시 후).
+//
+// 이 자리에 있던 시연 리모컨은 제거됐다 — 시나리오는 무인 자동 루프로
+// 진행되고, 승인·번인 등 조작은 각 페이지의 액션 버튼이 담당한다.
+import { Check, MessageCircle, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { submitContact } from '@/lib/demoApi';
+
+const EMPTY_FORM = { name: '', org: '', email: '', message: '' };
+
+export default function ContactBubble() {
+  const [open, setOpen] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [form, setForm] = useState(EMPTY_FORM);
+  const firstFieldRef = useRef<HTMLInputElement>(null);
+
+  // 펼칠 때 첫 입력으로 포커스를 옮긴다 — 키보드 사용자가 버블을 연 뒤 다시
+  // Tab 으로 폼을 찾아 들어가지 않도록.
+  useEffect(() => {
+    if (open && !sent) firstFieldRef.current?.focus();
+  }, [open, sent]);
+
+  // Esc 로 닫기 — 화면 위에 떠 있는 요소의 기본 기대.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  const set = (k: keyof typeof form) => (e: { target: { value: string } }) =>
+    setForm((f) => ({ ...f, [k]: e.target.value }));
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (sending) return;
+    setSending(true);
+    setError(null);
+    const outcome = await submitContact(form);
+    setSending(false);
+    if (!outcome.ok) {
+      setError(outcome.error);
+      return;
+    }
+    setSent(true);
+    setForm(EMPTY_FORM);
+  }
+
+  function close() {
+    setOpen(false);
+    // 닫으면 접수 완료 화면을 되돌린다 — 다음에 열었을 때 빈 폼으로 시작해야
+    // 두 번째 문의를 남길 수 있다.
+    setSent(false);
+    setError(null);
+  }
+
+  if (!open) {
+    return (
+      <Button
+        className="fixed right-4 bottom-4 z-50 h-11 rounded-full shadow-lg"
+        onClick={() => setOpen(true)}
+        aria-label="문의하기 열기"
+      >
+        <MessageCircle className="size-4" />
+        문의하기
+      </Button>
+    );
+  }
+
+  return (
+    <Card
+      className="fixed right-4 bottom-4 z-50 w-80 border shadow-lg backdrop-blur supports-[backdrop-filter]:bg-card/95"
+      role="dialog"
+      aria-label="문의하기"
+    >
+      <CardContent className="flex flex-col gap-3 p-4">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm font-medium">문의하기</span>
+          <Button variant="ghost" size="sm" className="h-7 px-2" onClick={close} aria-label="닫기">
+            <X className="size-3.5" />
+          </Button>
+        </div>
+
+        {sent ? (
+          <div className="flex flex-col gap-3">
+            <p className="flex items-start gap-2 text-xs leading-relaxed text-muted-foreground">
+              <Check className="mt-0.5 size-4 shrink-0 text-metric-pod" />
+              문의가 접수됐습니다. 남겨주신 연락처로 회신드리겠습니다.
+            </p>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setSent(false)}>
+              추가로 문의하기
+            </Button>
+          </div>
+        ) : (
+          <form className="flex flex-col gap-2.5" onSubmit={onSubmit}>
+            <div className="flex flex-col gap-1">
+              <Label htmlFor="contact-name" className="text-xs">
+                이름
+              </Label>
+              <Input
+                id="contact-name"
+                ref={firstFieldRef}
+                value={form.name}
+                onChange={set('name')}
+                className="h-8 text-sm"
+                required
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <Label htmlFor="contact-org" className="text-xs">
+                소속 <span className="text-muted-foreground">(선택)</span>
+              </Label>
+              <Input
+                id="contact-org"
+                value={form.org}
+                onChange={set('org')}
+                className="h-8 text-sm"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <Label htmlFor="contact-email" className="text-xs">
+                이메일 <span className="text-muted-foreground">(선택)</span>
+              </Label>
+              <Input
+                id="contact-email"
+                type="email"
+                value={form.email}
+                onChange={set('email')}
+                className="h-8 text-sm"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <Label htmlFor="contact-message" className="text-xs">
+                문의 내용
+              </Label>
+              <Textarea
+                id="contact-message"
+                value={form.message}
+                onChange={set('message')}
+                rows={4}
+                className="resize-none text-sm"
+                required
+              />
+            </div>
+            {error ? <p className="text-[11px] leading-snug text-destructive">{error}</p> : null}
+            <Button type="submit" size="sm" className="h-8" disabled={sending}>
+              {sending ? '보내는 중…' : '보내기'}
+            </Button>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/CspLogo.tsx b/web/src/components/gpu/CspLogo.tsx
new file mode 100644
index 0000000..2580b50
--- /dev/null
+++ b/web/src/components/gpu/CspLogo.tsx
@@ -0,0 +1,60 @@
+// CspLogo — CSP 카드 왼쪽 브랜드 아이콘. csp id 로 /csp/{id}.svg 를 가리킨다.
+//
+// 자산 파일명을 브랜드명이 아니라 *csp id* 로 두는 이유: 플릿 구성은
+// OBSERVATORY_DEMO_FLEET 로 갈아끼울 수 있고, 그때 새 id 를 위한 자산만
+// 얹으면 되기 때문이다. 자산이 없는 id 는 모노그램으로 떨어져 화면이 항상
+// 성립한다 — 깨진 이미지 아이콘은 시연에서 그 자체로 결함처럼 보인다.
+import { useState } from 'react';
+
+/** 모노그램 폴백 색 — id 해시로 고정해 재렌더·재시딩에도 같은 색이 나온다. */
+const FALLBACK_COLORS = [
+  'var(--metric-gpu)',
+  'var(--metric-thermal)',
+  'var(--metric-cpu)',
+  'var(--metric-mem)',
+  'var(--metric-pod)',
+] as const;
+
+function fallbackColor(id: string): string {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) {
+    h = (h * 31 + id.charCodeAt(i)) >>> 0;
+  }
+  return FALLBACK_COLORS[h % FALLBACK_COLORS.length];
+}
+
+export interface CspLogoProps {
+  id: string;
+  /** 표시명 — 모노그램 첫 글자에 쓴다. */
+  name: string;
+}
+
+export default function CspLogo({ id, name }: CspLogoProps) {
+  const [failed, setFailed] = useState(false);
+
+  if (failed) {
+    return (
+      <span
+        aria-hidden
+        className="flex size-7 shrink-0 items-center justify-center rounded-md text-[11px] font-semibold text-white"
+        style={{ backgroundColor: fallbackColor(id) }}
+      >
+        {name.trim().charAt(0) || '?'}
+      </span>
+    );
+  }
+
+  return (
+    // alt 는 빈 문자열 — 바로 오른쪽에 표시명이 텍스트로 있어, 대체 텍스트를
+    // 넣으면 스크린리더가 같은 이름을 두 번 읽는다.
+    <img
+      src={`/csp/${id}.svg`}
+      alt=""
+      aria-hidden
+      width={28}
+      height={28}
+      className="size-7 shrink-0 rounded-md"
+      onError={() => setFailed(true)}
+    />
+  );
+}
diff --git a/web/src/components/gpu/CspRollupCards.tsx b/web/src/components/gpu/CspRollupCards.tsx
new file mode 100644
index 0000000..10b5bad
--- /dev/null
+++ b/web/src/components/gpu/CspRollupCards.tsx
@@ -0,0 +1,85 @@
+// CspRollupCards — CSP 4사 롤업 카드(데모 모드 전용). 카운트/할당율/장애는
+// DemoState.fleet.csps 스냅샷, util 은 부모(GpuOverview)가
+// nodevitals_demo_csp_util_avg_pct 1회 질의로 만든 맵을 받는다 — 카드가 각자
+// 질의하지 않는다(4장 = 1 질의 계약).
+//
+// 카드는 브랜드 아이콘 + 표시명 + 4개 수치로만 구성한다 — 데이터가 전부
+// 합성이라는 사실은 런북·안내 문구가 담당하고, 대시보드 카드마다 "Mock" 배지를
+// 반복하지 않는다(사용자 지시 2026-07-27).
+import CspLogo from '@/components/gpu/CspLogo';
+import Sparkline from '@/components/gpu/Sparkline';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { CSPSummary } from '@/lib/demoApi';
+import { formatCount, formatPct } from '@/lib/gpuMetrics';
+
+export interface CspRollupCardsProps {
+  csps: CSPSummary[];
+  /** csp id → 평균 util(%). null = 집계 질의 로딩 중(Skeleton). */
+  utilByCsp: Record<string, number> | null;
+  /** csp id → 최근 30분 사용률 추세. 숫자만 있으면 오르는 중인지 알 수 없다. */
+  utilSeriesByCsp?: Record<string, number[]> | null;
+}
+
+export default function CspRollupCards({
+  csps,
+  utilByCsp,
+  utilSeriesByCsp,
+}: CspRollupCardsProps) {
+  if (csps.length === 0) return null;
+  return (
+    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4" aria-label="CSP 롤업">
+      {csps.map((csp) => {
+        return (
+          <Card
+            key={csp.id}
+            className="gap-0 overflow-hidden py-0"
+            style={{ borderTop: '3px solid var(--muted)' }}
+          >
+            <CardContent className="flex flex-col gap-2 p-3 pb-0">
+              <div className="flex items-center gap-2">
+                <CspLogo id={csp.id} name={csp.display} />
+                <span className="truncate font-medium text-sm" title={csp.display}>
+                  {csp.display}
+                </span>
+              </div>
+              <dl className="grid grid-cols-2 gap-x-3 gap-y-1.5 text-xs">
+                <div className="flex flex-col">
+                  <dt className="text-muted-foreground">GPU</dt>
+                  <dd className="font-semibold tabular-nums">{formatCount(csp.gpuTotal)}장</dd>
+                </div>
+                <div className="flex flex-col">
+                  <dt className="text-muted-foreground">할당율</dt>
+                  <dd className="font-semibold tabular-nums">{formatPct(csp.allocPct)}</dd>
+                </div>
+                <div className="flex flex-col">
+                  <dt className="text-muted-foreground">사용률</dt>
+                  <dd className="font-semibold tabular-nums">
+                    {utilByCsp === null ? (
+                      <Skeleton className="h-4 w-10" />
+                    ) : (
+                      formatPct(utilByCsp[csp.id])
+                    )}
+                  </dd>
+                </div>
+                <div className="flex flex-col">
+                  <dt className="text-muted-foreground">장애</dt>
+                  <dd
+                    className={`font-semibold tabular-nums ${csp.faulted > 0 ? 'text-metric-fault' : ''}`}
+                  >
+                    {formatCount(csp.faulted)}건
+                  </dd>
+                </div>
+              </dl>
+            </CardContent>
+            <Sparkline
+              values={utilSeriesByCsp?.[csp.id] ?? []}
+              color={csp.faulted > 0 ? 'var(--metric-fault)' : 'var(--metric-gpu)'}
+              height={24}
+            />
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/EventFeed.tsx b/web/src/components/gpu/EventFeed.tsx
new file mode 100644
index 0000000..3fad92c
--- /dev/null
+++ b/web/src/components/gpu/EventFeed.tsx
@@ -0,0 +1,161 @@
+// EventFeed — demo1 우측 컬럼 "실시간 이벤트 피드" 카드. 심각도 셀렉터로 거른
+// 최신 알림 N건을 심각도 색 · 대상(노드/GPU/모델) · 상대시각 · 진행 상태 배지로
+// 보인다. AlertTimeline 이 "장애 서사 타임라인"이라면 이쪽은 "요약 피드"다.
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { AlertEvent } from '@/lib/demoApi';
+
+export interface EventFeedProps {
+  alerts: AlertEvent[];
+  /** uuid→model 매핑용 (대상에 모델명 표기). 없으면 생략. */
+  modelOf?: (a: AlertEvent) => string | undefined;
+  /** "전체 이벤트 보기" 목적지. 기본 /gpu/health */
+  moreHref?: string;
+  limit?: number;
+}
+
+/** 상대시각 문자열 — 이벤트 피드·노드 패널 공용. nowMs 를 주면 테스트에서 고정 가능. */
+export function relTime(atMs: number, nowMs = Date.now()): string {
+  const sec = Math.max(0, Math.round((nowMs - atMs) / 1000));
+  if (sec < 60) return '방금 전';
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}분 전`;
+  const hour = Math.floor(min / 60);
+  if (hour < 24) return `${hour}시간 전`;
+  return `${Math.floor(hour / 24)}일 전`;
+}
+
+/** Radix SelectItem 은 value="" 금지 — "모든 심각도"의 센티널 값. */
+const ALL = '__all__';
+
+const SEVERITY: Record<AlertEvent['severity'], { label: string; color: string }> = {
+  critical: { label: 'Critical', color: 'var(--metric-fault)' },
+  major: { label: 'Major', color: 'var(--metric-thermal)' },
+  warning: { label: 'Warning', color: 'var(--util-band-2)' },
+  info: { label: 'Info', color: 'var(--metric-cpu)' },
+};
+
+const SEVERITY_ORDER: AlertEvent['severity'][] = ['critical', 'major', 'warning', 'info'];
+
+/** 진행 상태 배지 — 빈 값/미지정이면 배지 없음. */
+const STATUS: Record<string, { label: string; color: string }> = {
+  'auto-repair': { label: '자동복구 실행 중', color: 'var(--metric-cpu)' },
+  repaired: { label: '복구 성공', color: 'var(--metric-pod)' },
+  resolved: { label: '해결', color: 'var(--metric-pod)' },
+  'collect-lag': { label: '수집 지연', color: 'var(--metric-thermal)' },
+};
+
+export default function EventFeed({ alerts, modelOf, moreHref, limit = 6 }: EventFeedProps) {
+  const [severity, setSeverity] = useState<string>(ALL);
+  // 상대시각은 30초 tick 이면 충분하다(분 단위 표기라 초 단위 리렌더는 낭비).
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 30_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const shown = [...alerts]
+    .filter((a) => severity === ALL || a.severity === severity)
+    .sort((a, b) => b.at - a.at)
+    .slice(0, limit);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>실시간 이벤트 피드</CardTitle>
+        <CardAction>
+          <Select value={severity} onValueChange={setSeverity}>
+            <SelectTrigger size="sm" className="w-[120px]" aria-label="심각도 필터">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>모든 심각도</SelectItem>
+              {SEVERITY_ORDER.map((key) => (
+                <SelectItem key={key} value={key}>
+                  {SEVERITY[key].label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {shown.length === 0 ? (
+          <p className="py-6 text-center text-muted-foreground text-sm">수신된 알림이 없다.</p>
+        ) : (
+          <ul className="flex max-h-[520px] flex-col gap-2 overflow-auto pr-1">
+            {shown.map((alert, index) => {
+              const sev = SEVERITY[alert.severity];
+              const status = alert.status ? STATUS[alert.status] : undefined;
+              const target = [alert.instance, alert.device].filter(Boolean).join(' / ');
+              const model = modelOf?.(alert);
+              return (
+                <li
+                  key={alert.id || `${alert.at}-${alert.code}-${index}`}
+                  className="rounded-md border border-border border-l-2 px-3 py-2"
+                  style={{
+                    borderLeftColor: sev.color,
+                    backgroundColor: `color-mix(in oklab, ${sev.color} 6%, var(--card))`,
+                  }}
+                >
+                  <div className="flex items-start gap-2">
+                    <span
+                      aria-hidden
+                      className="mt-1.5 size-2 shrink-0 rounded-full"
+                      style={{ backgroundColor: sev.color }}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="font-medium text-xs" style={{ color: sev.color }}>
+                          {sev.label}
+                        </span>
+                        <span className="ml-auto shrink-0 text-[11px] text-muted-foreground tabular-nums">
+                          {relTime(alert.at, now)}
+                        </span>
+                      </div>
+                      <p className="truncate font-medium text-sm leading-snug">{alert.title}</p>
+                      {target || model ? (
+                        <p className="truncate font-mono text-[11px] text-muted-foreground">
+                          {target}
+                          {model ? ` (${model})` : ''}
+                        </p>
+                      ) : null}
+                      {status ? (
+                        <Badge
+                          variant="outline"
+                          className="mt-1 text-[10px]"
+                          style={{
+                            color: status.color,
+                            borderColor: `color-mix(in oklab, ${status.color} 40%, transparent)`,
+                            backgroundColor: `color-mix(in oklab, ${status.color} 12%, transparent)`,
+                          }}
+                        >
+                          {status.label}
+                        </Badge>
+                      ) : null}
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        <Link
+          to={moreHref ?? '/gpu/health'}
+          className="rounded-md border border-border py-2 text-center text-muted-foreground text-xs hover:bg-accent hover:text-foreground"
+        >
+          전체 이벤트 보기 →
+        </Link>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/EventStream.tsx b/web/src/components/gpu/EventStream.tsx
new file mode 100644
index 0000000..e7ece20
--- /dev/null
+++ b/web/src/components/gpu/EventStream.tsx
@@ -0,0 +1,85 @@
+// EventStream — 클러스터(K8s) 이벤트 스트림. AlertTimeline 이 "조치 대상"을
+// 쌓는다면 이쪽은 계속 돌아가는 클러스터의 일상 기록이다 — 화면이 살아 있고
+// 실제 워크로드가 스케줄·기동·회수되고 있음을 보여주는 배경 소음.
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import type { ClusterEvent } from '@/lib/demoApi';
+
+export interface EventStreamProps {
+  events: ClusterEvent[];
+  /** 표시 상한(기본 20) — 서버는 최대 60건을 보낸다. */
+  max?: number;
+}
+
+function formatClock(atMs: number): string {
+  return new Date(atMs).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+export default function EventStream({ events, max = 20 }: EventStreamProps) {
+  const rows = [...events].sort((a, b) => b.at - a.at).slice(0, max);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>클러스터 이벤트</CardTitle>
+        <CardDescription>알림과 달리 조치 대상이 아닌 일상 기록</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {rows.length === 0 ? (
+          <p className="py-6 text-center text-muted-foreground text-sm">이벤트 없음</p>
+        ) : (
+          <ol className="flex max-h-80 flex-col gap-2 overflow-auto pr-1">
+            {rows.map((e, index) => {
+              const warning = e.type === 'Warning';
+              return (
+                <li
+                  key={`${e.at}-${e.reason}-${e.object}-${index}`}
+                  className="relative flex flex-col gap-0.5 pl-4"
+                >
+                  {warning ? (
+                    <span
+                      aria-label="경고"
+                      className="absolute top-1.5 left-0 size-2 rounded-full bg-metric-thermal"
+                    />
+                  ) : null}
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-muted-foreground text-xs tabular-nums">
+                      {formatClock(e.at)}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className={warning ? 'text-metric-thermal text-[10px]' : 'text-[10px]'}
+                    >
+                      {warning ? 'Warning' : 'Normal'}
+                    </Badge>
+                    <span className="font-semibold text-xs">{e.reason}</span>
+                    <span className="font-mono text-muted-foreground text-[11px]">{e.object}</span>
+                  </div>
+                  <p className="text-muted-foreground text-xs leading-snug">{e.message}</p>
+                  {e.namespace || e.node ? (
+                    <p className="font-mono text-[10px] text-muted-foreground/80">
+                      {[e.namespace ? `ns/${e.namespace}` : '', e.node ? `node/${e.node}` : '']
+                        .filter(Boolean)
+                        .join(' · ')}
+                    </p>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ol>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/FaultTypeBar.tsx b/web/src/components/gpu/FaultTypeBar.tsx
new file mode 100644
index 0000000..00c08d4
--- /dev/null
+++ b/web/src/components/gpu/FaultTypeBar.tsx
@@ -0,0 +1,97 @@
+// FaultTypeBar — demo1 "장애 유형 분포" 위젯: 최근 장애 알림을 code 별로 집계해
+// 건수 내림차순 세로 막대로 보인다. 막대 색은 그 code 의 최고 심각도로 정한다.
+import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { AlertEvent } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+// 심각도 순위 — 한 code 그룹의 최댓값으로 막대 색을 고른다.
+const SEV_RANK: Record<AlertEvent['severity'], number> = {
+  info: 0,
+  warning: 1,
+  major: 2,
+  critical: 3,
+};
+
+// critical → 장애(빨강), major/warning → 온도(주황), else → CPU(파랑).
+function barColor(maxRank: number): string {
+  if (maxRank >= 3) return 'var(--metric-fault)';
+  if (maxRank >= 1) return 'var(--metric-thermal)';
+  return 'var(--metric-cpu)';
+}
+
+interface FaultBucket {
+  code: string;
+  count: number;
+  maxRank: number;
+}
+
+function aggregate(alerts: AlertEvent[]): FaultBucket[] {
+  const byCode = new Map<string, FaultBucket>();
+  for (const a of alerts) {
+    const b = byCode.get(a.code) ?? { code: a.code, count: 0, maxRank: 0 };
+    b.count += 1;
+    b.maxRank = Math.max(b.maxRank, SEV_RANK[a.severity]);
+    byCode.set(a.code, b);
+  }
+  return [...byCode.values()].sort((x, y) => y.count - x.count).slice(0, 6);
+}
+
+/** 긴 code 라벨 축약 — 축이 좁아 12자 넘으면 잘라 …로 표기. */
+function shortCode(code: string): string {
+  return code.length > 12 ? `${code.slice(0, 11)}…` : code;
+}
+
+export default function FaultTypeBar({ alerts }: { alerts: AlertEvent[] }) {
+  const buckets = aggregate(alerts);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>장애 유형 분포</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {buckets.length === 0 ? (
+          <p className="py-6 text-center text-muted-foreground text-sm">장애 없음</p>
+        ) : (
+          <div className="h-48 w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={buckets} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
+                <XAxis
+                  dataKey="code"
+                  tickFormatter={shortCode}
+                  tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+                  interval={0}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <YAxis
+                  allowDecimals={false}
+                  width={32}
+                  tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <Tooltip
+                  cursor={{ fill: 'var(--muted)', opacity: 0.3 }}
+                  formatter={(value) => [`${formatCount(Number(value))}건`, '건수']}
+                  contentStyle={{
+                    background: 'var(--card)',
+                    border: '1px solid var(--border)',
+                    borderRadius: 8,
+                    fontSize: 12,
+                  }}
+                />
+                <Bar dataKey="count" radius={[3, 3, 0, 0]} isAnimationActive={false}>
+                  {buckets.map((b) => (
+                    <Cell key={b.code} fill={barColor(b.maxRank)} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/FleetFilterBar.tsx b/web/src/components/gpu/FleetFilterBar.tsx
new file mode 100644
index 0000000..ce1ae38
--- /dev/null
+++ b/web/src/components/gpu/FleetFilterBar.tsx
@@ -0,0 +1,120 @@
+// FleetFilterBar — 전 화면 공통 검색 필터 7종(사용자 지시 2026-07-27):
+// CSP | 리전 | 클러스터 | 테넌트 | GPU 모델 | 상태 | 심각도.
+//
+// csp/region/cluster/tenant/model 은 벽면 응답 라벨에서 옵션을 얻고, 상태·
+// 심각도는 고정 어휘다(서버 상황판 key 와 동일 — 화면과 집계가 같은 말을 쓴다).
+// Radix Select 는 빈 문자열 value 를 런타임에서 금지하므로 "전체"는 센티널로
+// 표현하고 FleetFilter 에는 undefined 로 환원한다(applyFleetFilter 의
+// falsy=전체 계약과 등가).
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { FleetFilter, FleetOptions } from '@/hooks/useFleet';
+
+export interface FleetFilterBarProps {
+  options: FleetOptions;
+  filter: FleetFilter;
+  onChange: (next: FleetFilter) => void;
+  /** 리전 id → 표시명(예: naver-kr1 → KR-1). 없으면 id 를 그대로 쓴다. */
+  regionLabels?: Record<string, string>;
+}
+
+/** Radix SelectItem 은 value="" 금지 — "전체" 선택의 센티널 값. */
+const ALL = '__all__';
+
+const STATUS_OPTIONS = [
+  { value: 'normal', label: '정상' },
+  { value: 'degraded', label: '성능 저하' },
+  { value: 'fault', label: '장애' },
+  { value: 'isolated', label: '격리' },
+  { value: 'recovering', label: '복구 중' },
+] as const;
+
+const SEVERITY_OPTIONS = [
+  { value: 'critical', label: 'Critical' },
+  { value: 'major', label: 'Major' },
+  { value: 'warning', label: 'Warning' },
+  { value: 'info', label: 'Info' },
+] as const;
+
+/** 워크로드 — 기본(전체)은 학습·추론을 같이 본다(사용자 지시 2026-07-28). */
+const WORKLOAD_OPTIONS = [
+  { value: 'training', label: '학습' },
+  { value: 'inference', label: '추론' },
+] as const;
+
+interface FieldDef {
+  key: keyof FleetFilter;
+  /** "전체" 상태에서 트리거에 그대로 보이는 라벨 (예: "CSP 전체"). */
+  allLabel: string;
+  optionsKey?: keyof FleetOptions;
+  fixed?: ReadonlyArray<{ value: string; label: string }>;
+}
+
+const FIELDS: readonly FieldDef[] = [
+  { key: 'workload', allLabel: '학습·추론 모두', fixed: WORKLOAD_OPTIONS },
+  { key: 'csp', allLabel: 'CSP 전체', optionsKey: 'csps' },
+  { key: 'region', allLabel: '리전 전체', optionsKey: 'regions' },
+  { key: 'cluster', allLabel: '클러스터 전체', optionsKey: 'clusters' },
+  { key: 'tenant', allLabel: '테넌트 전체', optionsKey: 'tenants' },
+  { key: 'model', allLabel: 'GPU 모델 전체', optionsKey: 'models' },
+  { key: 'status', allLabel: '상태 전체', fixed: STATUS_OPTIONS },
+  { key: 'severity', allLabel: '심각도 전체', fixed: SEVERITY_OPTIONS },
+] as const;
+
+export default function FleetFilterBar({
+  options,
+  filter,
+  onChange,
+  regionLabels,
+}: FleetFilterBarProps) {
+  const active = FIELDS.some((field) => Boolean(filter[field.key]));
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5" aria-label="공통 검색 필터">
+      {FIELDS.map((field) => {
+        const values: Array<{ value: string; label: string }> = field.fixed
+          ? field.fixed.map((o) => ({ value: o.value, label: o.label }))
+          : (options[field.optionsKey as keyof FleetOptions] as string[]).map((v) => ({
+              value: v,
+              label: field.key === 'region' ? (regionLabels?.[v] ?? v) : v,
+            }));
+        return (
+          <Select
+            key={field.key}
+            value={filter[field.key] ?? ALL}
+            onValueChange={(next) =>
+              onChange({ ...filter, [field.key]: next === ALL ? undefined : next })
+            }
+          >
+            <SelectTrigger size="sm" className="h-8 w-auto min-w-[7rem] text-xs">
+              <SelectValue placeholder={field.allLabel} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL} className="text-xs">
+                {field.allLabel}
+              </SelectItem>
+              {values.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+      })}
+      {active ? (
+        <Button variant="ghost" size="sm" className="h-8 px-2 text-xs" onClick={() => onChange({})}>
+          <X className="size-3.5" />
+          초기화
+        </Button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/FleetHeatmap.tsx b/web/src/components/gpu/FleetHeatmap.tsx
new file mode 100644
index 0000000..d47afb2
--- /dev/null
+++ b/web/src/components/gpu/FleetHeatmap.tsx
@@ -0,0 +1,222 @@
+// FleetHeatmap — 7,000셀 플릿 벽면. 성능 계약(위반 시 시연 프레임 드랍):
+//  · 셀 = 10px div + data-i(청크 내 인덱스)뿐 — 개별 컴포넌트/핸들러/포털 금지.
+//  · 클러스터 청크 = React.memo, (chunk.signature + overlaySig) 동일 시 재렌더
+//    skip — 30s 폴링마다 배열 참조가 갈려도 대역/오버레이 불변이면 DOM 불변.
+//  · hover/click = 청크 컨테이너 1곳 이벤트 위임(closest('[data-i]')). 위임
+//    핸들러는 identity 영구 고정 + 데이터 조회는 ref 경유 — memo-skip 된 구
+//    클로저에서도 항상 최신 셀 값을 읽는다.
+//  · 툴팁 = 루트 absolute div 1개를 ref 직접 DOM 갱신(textContent 만 — 마크업
+//    주입 0, CSP default-src 'self' 방침). 리렌더 0.
+import { memo, useCallback, useMemo, useRef } from 'react';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import { UTIL_BAND_CLASSES } from '@/components/gpu/UtilLegend';
+import { Badge } from '@/components/ui/badge';
+import type { ClusterChunk, FleetCell } from '@/hooks/useFleet';
+import { formatCount, formatPct } from '@/lib/gpuMetrics';
+
+export interface FleetHeatmapProps {
+  chunks: ClusterChunk[];
+  /** 장애 GPU uuid — 셀 ring 빨강 오버레이. */
+  faultUuids: Set<string>;
+  /** 온도 이상 GPU uuid — 셀 우상단 주황 점 오버레이. */
+  tempAlertUuids: Set<string>;
+  /** 에이전트 무응답 노드 instance — 셀 점선 빈칸(데이터 없음) 처리. */
+  missingInstances: Set<string>;
+  onSelectNode: (instance: string) => void;
+}
+
+type DelegatedHandler = (e: ReactMouseEvent<HTMLDivElement>) => void;
+
+interface ChunkSectionProps {
+  chunk: ClusterChunk;
+  /** 이 청크의 오버레이 상태 시그니처 — memo 비교자 전용(본문 미사용). */
+  overlaySig: string;
+  faultUuids: Set<string>;
+  tempAlertUuids: Set<string>;
+  missingInstances: Set<string>;
+  onMove: DelegatedHandler;
+  onLeave: () => void;
+  onCellClick: DelegatedHandler;
+}
+
+const ChunkSection = memo(
+  function ChunkSection({
+    chunk,
+    faultUuids,
+    tempAlertUuids,
+    missingInstances,
+    onMove,
+    onLeave,
+    onCellClick,
+  }: ChunkSectionProps) {
+    return (
+      <section className="flex flex-col gap-1.5">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-sm">{chunk.key}</span>
+          {chunk.csp ? (
+            <Badge variant="outline" className="text-[10px]">
+              {chunk.csp}
+            </Badge>
+          ) : null}
+          <span className="text-muted-foreground text-xs">
+            {formatCount(chunk.cells.length)}장
+          </span>
+        </div>
+        {/* 셀 7,000개 개별 핸들러 금지 계약 — 컨테이너 1곳 위임이 구현이다. */}
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: 위임 컨테이너(성능 계약) */}
+        <div
+          className="flex flex-wrap gap-[2px]"
+          data-chunk={chunk.key}
+          aria-label={`${chunk.key} GPU ${chunk.cells.length}장 히트맵`}
+          onMouseMove={onMove}
+          onMouseLeave={onLeave}
+          onClick={onCellClick}
+        >
+          {chunk.cells.map((cell, i) => {
+            const missing = missingInstances.has(cell.instance);
+            const fault = faultUuids.has(cell.uuid);
+            const temp = tempAlertUuids.has(cell.uuid);
+            let cls = 'size-2.5 cursor-pointer rounded-[2px] ';
+            cls += missing
+              ? 'border border-dashed border-muted-foreground/50 bg-transparent'
+              : UTIL_BAND_CLASSES[cell.band] ?? UTIL_BAND_CLASSES[0];
+            if (fault) cls += ' ring-2 ring-metric-fault';
+            if (temp) cls += ' relative';
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: 셀 순서는 useFleet 정렬로 고정 — 인덱스가 안정 키
+              <div key={i} data-i={i} className={cls}>
+                {temp ? (
+                  <span className="-top-0.5 -right-0.5 absolute size-1.5 rounded-full bg-metric-thermal" />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    );
+  },
+  // 핸들러 prop 은 의도적으로 비교하지 않는다 — identity 고정(ref 경유) 계약.
+  (prev, next) =>
+    prev.chunk.key === next.chunk.key &&
+    prev.chunk.signature === next.chunk.signature &&
+    prev.overlaySig === next.overlaySig,
+);
+
+/** 툴팁 폭(max-w-60=240px) — 우측 이탈 클램프 기준. */
+const TIP_WIDTH_PX = 240;
+
+export default function FleetHeatmap({
+  chunks,
+  faultUuids,
+  tempAlertUuids,
+  missingInstances,
+  onSelectNode,
+}: FleetHeatmapProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const tipRef = useRef<HTMLDivElement | null>(null);
+
+  // memo-skip 된 청크의 구 핸들러 클로저에서도 최신 데이터를 보도록 조회는
+  // 전부 ref 경유 — 렌더마다 최신 값으로 갱신한다.
+  const chunkMap = useMemo(() => new Map(chunks.map((c) => [c.key, c])), [chunks]);
+  const chunkMapRef = useRef(chunkMap);
+  chunkMapRef.current = chunkMap;
+  const selectRef = useRef(onSelectNode);
+  selectRef.current = onSelectNode;
+
+  const cellFromEvent = useCallback((e: ReactMouseEvent<HTMLDivElement>): FleetCell | null => {
+    const hit = (e.target as HTMLElement).closest('[data-i]');
+    if (!(hit instanceof HTMLElement)) return null;
+    const idx = Number(hit.dataset.i);
+    const key = e.currentTarget.dataset.chunk ?? '';
+    return chunkMapRef.current.get(key)?.cells[idx] ?? null;
+  }, []);
+
+  const hideTip = useCallback(() => {
+    if (tipRef.current) tipRef.current.style.display = 'none';
+  }, []);
+
+  const handleMove = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      const tip = tipRef.current;
+      const root = rootRef.current;
+      if (!tip || !root) return;
+      const cell = cellFromEvent(e);
+      if (!cell) {
+        tip.style.display = 'none';
+        return;
+      }
+      const rect = root.getBoundingClientRect();
+      const x = Math.min(e.clientX - rect.left + 12, Math.max(0, rect.width - TIP_WIDTH_PX));
+      const y = e.clientY - rect.top + 14;
+      tip.style.display = 'block';
+      tip.style.transform = `translate(${x}px, ${y}px)`;
+      // textContent + whitespace-pre — HTML 주입 경로 자체가 없다.
+      tip.textContent = [
+        cell.instance,
+        `${cell.device}${cell.model ? ` · ${cell.model}` : ''}`,
+        `사용률 ${formatPct(cell.util)} · 풀 ${cell.pool || '—'}`,
+      ].join('\n');
+    },
+    [cellFromEvent],
+  );
+
+  const handleCellClick = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      const cell = cellFromEvent(e);
+      if (cell) selectRef.current(cell.instance);
+    },
+    [cellFromEvent],
+  );
+
+  // 청크별 오버레이 시그니처 — Set 참조가 폴링마다 갈려도 내용이 같으면 같은
+  // 문자열이 나와 memo 가 skip 한다(O(총 셀 수) 문자열 1회 — DOM diff 대비 염가).
+  const overlaySigs = useMemo(() => {
+    const sigs = new Map<string, string>();
+    for (const chunk of chunks) {
+      let sig = '';
+      for (let i = 0; i < chunk.cells.length; i++) {
+        const c = chunk.cells[i];
+        const f = faultUuids.has(c.uuid);
+        const t = tempAlertUuids.has(c.uuid);
+        const m = missingInstances.has(c.instance);
+        if (f || t || m) sig += `${i}${f ? 'f' : ''}${t ? 't' : ''}${m ? 'm' : ''};`;
+      }
+      sigs.set(chunk.key, sig);
+    }
+    return sigs;
+  }, [chunks, faultUuids, tempAlertUuids, missingInstances]);
+
+  const total = useMemo(() => chunks.reduce((sum, c) => sum + c.cells.length, 0), [chunks]);
+
+  if (total === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        GPU 시리즈 없음 — 에이전트 배포 또는 데모 모드 확인
+      </p>
+    );
+  }
+
+  return (
+    <div ref={rootRef} className="relative flex flex-col gap-4">
+      {chunks.map((chunk) => (
+        <ChunkSection
+          key={chunk.key}
+          chunk={chunk}
+          overlaySig={overlaySigs.get(chunk.key) ?? ''}
+          faultUuids={faultUuids}
+          tempAlertUuids={tempAlertUuids}
+          missingInstances={missingInstances}
+          onMove={handleMove}
+          onLeave={hideTip}
+          onCellClick={handleCellClick}
+        />
+      ))}
+      {/* 플로팅 툴팁 — 포털/Radix 금지 계약: 단순 div 1개, ref 직접 갱신 */}
+      <div
+        ref={tipRef}
+        className="pointer-events-none absolute top-0 left-0 z-40 max-w-60 whitespace-pre rounded-md border bg-popover px-2.5 py-1.5 text-popover-foreground text-xs shadow-md"
+        style={{ display: 'none' }}
+      />
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/GateDiagram.tsx b/web/src/components/gpu/GateDiagram.tsx
new file mode 100644
index 0000000..15726cb
--- /dev/null
+++ b/web/src/components/gpu/GateDiagram.tsx
@@ -0,0 +1,96 @@
+// GateDiagram — 「Kubernetes Ready → 사전 검증 관문 → 운영 풀」 흐름 상태
+// 다이어그램. 가로 박스 + 화살표(flex)로 "검증 전 운영 투입 원천 차단" 서사를
+// 시각화한다. active 는 ring pulse, blocked 는 빨강 라인.
+import type { CSSProperties } from 'react';
+import { ChevronRight, Circle, CircleCheck, CircleX } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type GateStageStatus = 'done' | 'active' | 'blocked' | 'idle';
+
+export interface GateStage {
+  id: string;
+  label: string;
+  status: GateStageStatus;
+}
+
+export interface GateDiagramProps {
+  stages: GateStage[];
+}
+
+const STATUS_META: Record<
+  GateStageStatus,
+  { box: string; style?: CSSProperties; caption: string; captionStyle?: CSSProperties }
+> = {
+  done: {
+    box: 'border-2',
+    style: { borderColor: 'var(--metric-pod)' },
+    caption: '통과',
+    captionStyle: { color: 'var(--metric-pod)' },
+  },
+  active: {
+    box: 'animate-pulse border-2 border-primary ring-2 ring-primary/40',
+    caption: '검증 중',
+  },
+  blocked: {
+    box: 'border-2',
+    style: { borderColor: 'var(--metric-fault)' },
+    caption: '투입 차단',
+    captionStyle: { color: 'var(--metric-fault)' },
+  },
+  idle: {
+    box: 'border border-border',
+    caption: '대기',
+    captionStyle: { color: 'var(--muted-foreground)' },
+  },
+};
+
+function StageIcon({ status }: { status: GateStageStatus }) {
+  if (status === 'done') {
+    return <CircleCheck className="size-4 shrink-0" style={{ color: 'var(--metric-pod)' }} />;
+  }
+  if (status === 'blocked') {
+    return <CircleX className="size-4 shrink-0" style={{ color: 'var(--metric-fault)' }} />;
+  }
+  if (status === 'active') {
+    return (
+      <span className="flex size-4 shrink-0 items-center justify-center">
+        <span className="size-2.5 animate-pulse rounded-full bg-primary" />
+      </span>
+    );
+  }
+  return <Circle className="size-4 shrink-0 text-muted-foreground/50" />;
+}
+
+export default function GateDiagram({ stages }: GateDiagramProps) {
+  return (
+    <div className="flex items-stretch gap-1 sm:gap-2">
+      {stages.map((stage, index) => {
+        const meta = STATUS_META[stage.status];
+        return (
+          <div key={stage.id} className="contents">
+            {index > 0 ? (
+              <div className="flex items-center">
+                <ChevronRight className="size-5 shrink-0 text-muted-foreground" />
+              </div>
+            ) : null}
+            <div
+              className={cn(
+                'flex min-h-16 flex-1 flex-col items-center justify-center gap-1 rounded-lg bg-card px-2 py-3 text-center',
+                meta.box,
+              )}
+              style={meta.style}
+            >
+              <div className="flex items-center gap-1.5">
+                <StageIcon status={stage.status} />
+                <span className="font-medium text-sm">{stage.label}</span>
+              </div>
+              <span className="text-xs" style={meta.captionStyle}>
+                {meta.caption}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/GpuDeviceCard.tsx b/web/src/components/gpu/GpuDeviceCard.tsx
new file mode 100644
index 0000000..22fad33
--- /dev/null
+++ b/web/src/components/gpu/GpuDeviceCard.tsx
@@ -0,0 +1,183 @@
+// GpuDeviceCard — 노드 드릴다운 시트의 GPU 1장 카드. 실시간 지표와 자산
+// 정보를 한 장에 합친다: 운영자는 "지금 몇 %"만이 아니라 "무슨 드라이버로,
+// 어떤 MIG 로, 어느 파드가 쓰는 장비인가"를 같은 시선에서 본다.
+//
+// 상단 3px 라인 = util 대역색, util 대형 %(관제 규약 GPU 고정색 자홍),
+// mem Progress(보라), temp(주황 · 80°C 초과 시 빨강 강조), power W.
+// props 는 순수 값 객체 — 질의/훅 없음(부모 NodeDrillSheet 가 메트릭 join +
+// 자산 조회를 담당). 실시간 값이 없으면 그 줄은 "—", 자산이 없으면 자산
+// 블록만 생략하고 카드는 그대로 그린다.
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { Separator } from '@/components/ui/separator';
+import {
+  bandForUtil,
+  formatBytes,
+  formatCelsius,
+  formatPct,
+  formatWatts,
+} from '@/lib/gpuMetrics';
+import { formatNvlink, formatPcie, type GpuAsset, NVLINK_OK } from '@/lib/nodeAsset';
+
+/** 시트가 join 한 실시간 표본 — 결측 시리즈는 null/undefined 로 온다. */
+export interface GpuLiveSample {
+  util?: number | null;
+  memUsed?: number | null;
+  memTotal?: number | null;
+  temp?: number | null;
+  power?: number | null;
+}
+
+export interface GpuDeviceCardProps {
+  device: string;
+  live: GpuLiveSample;
+  asset?: GpuAsset;
+  /** 자산이 없을 때 쓰는 모델명(메트릭 라벨 유래). */
+  fallbackModel?: string;
+}
+
+/** util 대역 → --util-band-N 토큰 참조 (동적 var 이름 조합 금지 — 정적 배열). */
+const BAND_VARS = [
+  'var(--util-band-0)',
+  'var(--util-band-1)',
+  'var(--util-band-2)',
+  'var(--util-band-3)',
+  'var(--util-band-4)',
+] as const;
+
+/** 온도 강조 임계 — 이 값을 초과하면 주황 대신 빨강(장애색)으로 표시. */
+const TEMP_DANGER_CELSIUS = 80;
+
+/** 자산 정의행 — 라벨 폭을 고정해 카드 2열 그리드에서도 열이 맞는다. */
+function AssetRow({
+  label,
+  value,
+  mono,
+  alert,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  alert?: boolean;
+}) {
+  return (
+    <>
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd
+        className={[
+          'truncate',
+          mono ? 'font-mono' : '',
+          alert ? 'font-medium text-metric-thermal' : 'text-foreground',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        title={value}
+      >
+        {value || '—'}
+      </dd>
+    </>
+  );
+}
+
+export default function GpuDeviceCard({
+  device,
+  live,
+  asset,
+  fallbackModel,
+}: GpuDeviceCardProps) {
+  const util = live.util ?? null;
+  const memUsed = live.memUsed ?? null;
+  const memTotal = live.memTotal ?? null;
+  const temp = live.temp ?? null;
+  const power = live.power ?? null;
+
+  const accent = util === null ? 'var(--muted)' : BAND_VARS[bandForUtil(util).index];
+  const memPct = memUsed !== null && memTotal !== null && memTotal > 0 ? (memUsed / memTotal) * 100 : null;
+  const tempDanger = temp !== null && temp > TEMP_DANGER_CELSIUS;
+  const model = asset?.model || fallbackModel || '';
+  const nvlinkDegraded = asset !== undefined && asset.nvlinkStatus !== NVLINK_OK;
+
+  return (
+    <Card className="gap-0 py-0" style={{ borderTop: `3px solid ${accent}` }}>
+      <CardContent className="flex flex-col gap-2 p-3">
+        <div className="flex items-baseline justify-between gap-2">
+          <span className="font-medium text-sm">{device}</span>
+          <span className="truncate text-muted-foreground text-xs" title={model}>
+            {model || '—'}
+          </span>
+        </div>
+        {asset ? (
+          <div className="flex flex-wrap items-center gap-1">
+            {asset.allocated ? (
+              <Badge variant="outline" className="border-metric-pod text-[10px] text-metric-pod">
+                할당됨
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="text-[10px]">
+                미할당
+              </Badge>
+            )}
+            {nvlinkDegraded ? (
+              <Badge
+                variant="outline"
+                className="border-metric-thermal text-[10px] text-metric-thermal"
+              >
+                링크 저하
+              </Badge>
+            ) : null}
+            {tempDanger ? (
+              <Badge variant="outline" className="border-metric-fault text-[10px] text-metric-fault">
+                온도 경보
+              </Badge>
+            ) : null}
+          </div>
+        ) : null}
+        <span className="font-semibold text-3xl text-metric-gpu leading-none tabular-nums">
+          {formatPct(util)}
+        </span>
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center justify-between text-muted-foreground text-xs">
+            <span>메모리</span>
+            <span className="tabular-nums">
+              {formatBytes(memUsed)} / {formatBytes(memTotal)}
+            </span>
+          </div>
+          {/* Progress indicator 는 기본 bg-primary — 관제 규약 메모리색(보라)으로 재지정 */}
+          <Progress
+            value={memPct ?? 0}
+            className="h-1.5 [&>[data-slot=progress-indicator]]:bg-metric-mem"
+          />
+        </div>
+        <div className="flex items-center gap-3 text-xs tabular-nums">
+          <span className={tempDanger ? 'font-semibold text-metric-fault' : 'text-metric-thermal'}>
+            온도 {formatCelsius(temp)}
+          </span>
+          <span className="text-muted-foreground">전력 {formatWatts(power)}</span>
+        </div>
+        {asset ? (
+          <>
+            <Separator />
+            <dl className="grid grid-cols-[3.25rem_minmax(0,1fr)] gap-x-2 gap-y-0.5 text-[11px] leading-relaxed">
+              <AssetRow label="드라이버" value={`${asset.driverVersion} · CUDA ${asset.cudaVersion}`} />
+              <AssetRow label="VBIOS" value={asset.vbios} mono />
+              <AssetRow label="MIG" value={asset.migProfile} />
+              <AssetRow label="PCIe" value={formatPcie(asset.pcieGen, asset.pcieWidth)} />
+              <AssetRow
+                label="NVLink"
+                value={formatNvlink(asset.nvlinkLinks, asset.nvlinkStatus)}
+                alert={nvlinkDegraded}
+              />
+              <AssetRow label="시리얼" value={asset.serial} mono />
+              <AssetRow
+                label="풀"
+                value={asset.tenant ? `${asset.pool} · ${asset.tenant}` : asset.pool}
+              />
+              {asset.pod ? <AssetRow label="파드" value={asset.pod} mono /> : null}
+            </dl>
+          </>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/GpuModelBar.tsx b/web/src/components/gpu/GpuModelBar.tsx
new file mode 100644
index 0000000..cef4f50
--- /dev/null
+++ b/web/src/components/gpu/GpuModelBar.tsx
@@ -0,0 +1,53 @@
+// GpuModelBar — demo1 「GPU 모델별 현황」 위젯: 모델별 GPU 수를 전체 대비 비율
+// 가로 막대로 보인다(상위 5개). 색은 index.css 의 --metric-gpu 토큰.
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatCount, METRIC_COLORS } from '@/lib/gpuMetrics';
+
+/** "NVIDIA H200" → "H200" — 목업의 짧은 표기(IdleDonut 과 동일 규칙). */
+function shortModel(model: string): string {
+  return model.replace(/^NVIDIA\s+/, '');
+}
+
+export default function GpuModelBar({ models }: { models: { model: string; count: number }[] }) {
+  const total = models.reduce((s, m) => s + m.count, 0);
+  const top = [...models].sort((a, b) => b.count - a.count).slice(0, 5);
+
+  return (
+    <Card className="gap-3 py-4">
+      <CardHeader className="px-4">
+        <CardTitle className="flex items-baseline justify-between text-sm">
+          <span>GPU 모델별 현황</span>
+          <span className="font-normal text-muted-foreground text-xs">사용률 Top 5</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="px-4">
+        {top.length === 0 ? (
+          <p className="py-4 text-center text-muted-foreground text-sm">모델 데이터가 없다.</p>
+        ) : (
+          <ul className="flex flex-col gap-2">
+            {top.map((m) => {
+              const pct = total > 0 ? (m.count / total) * 100 : 0;
+              return (
+                <li key={m.model} className="relative overflow-hidden rounded-md bg-muted/40">
+                  <div
+                    className="absolute inset-y-0 left-0 rounded-md opacity-25"
+                    style={{ width: `${pct}%`, backgroundColor: METRIC_COLORS.gpu }}
+                  />
+                  <div className="relative flex items-center gap-2 px-2.5 py-1.5 text-sm">
+                    <span className="min-w-0 flex-1 truncate font-medium" title={m.model}>
+                      {shortModel(m.model)}
+                    </span>
+                    <span className="shrink-0 font-semibold tabular-nums">{formatCount(m.count)}</span>
+                    <span className="w-11 shrink-0 text-right text-muted-foreground text-xs tabular-nums">
+                      {Math.round(pct)}%
+                    </span>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/HealthGauge.tsx b/web/src/components/gpu/HealthGauge.tsx
new file mode 100644
index 0000000..5838c25
--- /dev/null
+++ b/web/src/components/gpu/HealthGauge.tsx
@@ -0,0 +1,110 @@
+// HealthGauge — 번인 Health 점수 반원 게이지 (자체 SVG, React 속성만 — CSP-safe).
+// 배경 3존 아크(0-60 장애빨강 / 60-85 주의주황 / 85-100 통과초록) 위에 값 아크를
+// strokeDasharray 비율로 겹쳐 그린다. path d 는 극좌표 계산 함수로 생성한다.
+
+export interface HealthGaugeProps {
+  score: number;
+  verdict?: string;
+  /** SVG 폭(px). 기본 220. */
+  size?: number;
+}
+
+// 판정 3존 — 색은 index.css 의 --metric-* 토큰(라이트/다크 동일 hue).
+const ZONES = [
+  { from: 0, to: 60, color: 'var(--metric-fault)' },
+  { from: 60, to: 85, color: 'var(--metric-thermal)' },
+  { from: 85, to: 100, color: 'var(--metric-pod)' },
+] as const;
+
+/** score(0~100) → 반원 각도(도). 0점=180°(왼쪽 끝), 100점=0°(오른쪽 끝). */
+function angleFor(pct: number): number {
+  return 180 - (pct / 100) * 180;
+}
+
+/** 극좌표 → SVG 좌표. SVG 는 y 가 아래로 증가하므로 sin 을 빼서 위쪽 반원을 그린다. */
+function polar(cx: number, cy: number, r: number, angleDeg: number): { x: number; y: number } {
+  const rad = (angleDeg * Math.PI) / 180;
+  return { x: cx + r * Math.cos(rad), y: cy - r * Math.sin(rad) };
+}
+
+/** fromPct→toPct 구간 반원 아크 path — 왼쪽에서 오른쪽으로 시계방향(sweep=1) 진행. */
+function arcPath(cx: number, cy: number, r: number, fromPct: number, toPct: number): string {
+  const start = polar(cx, cy, r, angleFor(fromPct));
+  const end = polar(cx, cy, r, angleFor(toPct));
+  return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r} ${r} 0 0 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
+}
+
+/** verdict 텍스트 색 — 존 경계와 동일 기준(85 이상 초록, 60 이상 주황, 미만 빨강). */
+function verdictColor(score: number): string {
+  if (score >= 85) return 'var(--metric-pod)';
+  if (score >= 60) return 'var(--metric-thermal)';
+  return 'var(--metric-fault)';
+}
+
+export default function HealthGauge({ score, verdict, size = 220 }: HealthGaugeProps) {
+  const clamped = Math.max(0, Math.min(100, score));
+  const zoneWidth = Math.max(10, Math.round(size * 0.055));
+  const pad = zoneWidth / 2 + 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size / 2 - pad;
+  const height = size / 2 + pad;
+  const arcLen = Math.PI * r;
+  const valueLen = (clamped / 100) * arcLen;
+
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <svg
+        width={size}
+        height={height}
+        viewBox={`0 0 ${size} ${height}`}
+        role="img"
+        aria-label={`Health ${Math.round(clamped)} / 100`}
+      >
+        {ZONES.map((z) => (
+          <path
+            key={z.from}
+            d={arcPath(cx, cy, r, z.from, z.to)}
+            fill="none"
+            stroke={z.color}
+            strokeWidth={zoneWidth}
+            strokeLinecap="butt"
+            opacity={0.35}
+          />
+        ))}
+        <path
+          d={arcPath(cx, cy, r, 0, 100)}
+          fill="none"
+          stroke="var(--foreground)"
+          strokeWidth={Math.max(6, Math.round(zoneWidth * 0.62))}
+          strokeLinecap={clamped > 0 ? 'round' : 'butt'}
+          strokeDasharray={`${valueLen.toFixed(2)} ${(arcLen + zoneWidth).toFixed(2)}`}
+        />
+        <text
+          x={cx}
+          y={cy - size * 0.06}
+          textAnchor="middle"
+          fill="var(--foreground)"
+          fontSize={size * 0.19}
+          fontWeight={700}
+        >
+          {Math.round(clamped)}
+        </text>
+        <text
+          x={cx}
+          y={cy - size * 0.06 + size * 0.075}
+          textAnchor="middle"
+          fill="var(--muted-foreground)"
+          fontSize={size * 0.055}
+        >
+          /100
+        </text>
+      </svg>
+      {verdict ? (
+        <span className="font-medium text-sm" style={{ color: verdictColor(clamped) }}>
+          {verdict}
+        </span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/IdleDonut.tsx b/web/src/components/gpu/IdleDonut.tsx
new file mode 100644
index 0000000..dcc46b6
--- /dev/null
+++ b/web/src/components/gpu/IdleDonut.tsx
@@ -0,0 +1,85 @@
+// IdleDonut — 유휴 GPU 의 모델별 분포 도넛(demo3 GPU Assistant "유휴 장비" 카드).
+// idle[] 를 모델로 집계해 도넛 + 범례로 보인다. 색은 index.css 의 --chart-*
+// 토큰(모드별 hue 정의). 코드베이스 첫 PieChart 사용처.
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import type { IdleGPU } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+// 도넛 조각 색 — 모델 수만큼 순환. index.css --chart-1..5.
+const SLICE_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+];
+
+interface ModelSlice {
+  model: string;
+  count: number;
+}
+
+function aggregate(idle: IdleGPU[]): ModelSlice[] {
+  const byModel = new Map<string, number>();
+  for (const g of idle) {
+    byModel.set(g.model, (byModel.get(g.model) ?? 0) + 1);
+  }
+  return [...byModel.entries()]
+    .map(([model, count]) => ({ model, count }))
+    .sort((a, b) => b.count - a.count);
+}
+
+/** "NVIDIA H200" → "H200" — 범례를 목업의 짧은 표기에 맞춘다. */
+function shortModel(model: string): string {
+  return model.replace(/^NVIDIA\s+/, '');
+}
+
+export default function IdleDonut({ idle }: { idle: IdleGPU[] }) {
+  const slices = aggregate(idle);
+  const total = slices.reduce((s, x) => s + x.count, 0);
+
+  if (total === 0) {
+    return <p className="py-6 text-center text-muted-foreground text-sm">유휴 GPU 가 없다.</p>;
+  }
+
+  return (
+    <div className="flex items-center gap-4">
+      <div className="h-28 w-28 shrink-0">
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={slices}
+              dataKey="count"
+              nameKey="model"
+              innerRadius={34}
+              outerRadius={54}
+              paddingAngle={2}
+              isAnimationActive={false}
+              stroke="var(--card)"
+              strokeWidth={2}
+            >
+              {slices.map((s, i) => (
+                <Cell key={s.model} fill={SLICE_COLORS[i % SLICE_COLORS.length]} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+      <ul className="flex min-w-0 flex-1 flex-col gap-1.5">
+        {slices.map((s, i) => (
+          <li key={s.model} className="flex items-center gap-2 text-sm">
+            <span
+              className="size-2.5 shrink-0 rounded-full"
+              style={{ backgroundColor: SLICE_COLORS[i % SLICE_COLORS.length] }}
+            />
+            <span className="min-w-0 flex-1 truncate">{shortModel(s.model)}</span>
+            <span className="shrink-0 font-semibold tabular-nums">{formatCount(s.count)}</span>
+            <span className="shrink-0 text-muted-foreground text-xs tabular-nums">
+              {total > 0 ? `${Math.round((s.count / total) * 100)}%` : '—'}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/IdleReuseDrawer.tsx b/web/src/components/gpu/IdleReuseDrawer.tsx
new file mode 100644
index 0000000..6c4e70d
--- /dev/null
+++ b/web/src/components/gpu/IdleReuseDrawer.tsx
@@ -0,0 +1,349 @@
+// IdleReuseDrawer — 유휴장비 관리(/gpu/idle) 행 클릭 시 우측 재사용 드로어.
+//
+// 표는 "무엇이 유휴인가"만 말한다. 이 드로어가 "그래서 이 한 장을 어떻게
+// 되돌리는가"를 말한다 — 자산 신원(모델·UUID·위치·라벨) + 재사용 4단계 진행
+// 상태 + 지금 누를 수 있는 단 하나의 버튼.
+//
+// 검증 상태는 /demo/state 폴링에 실려 오므로 여기서 따로 질의하지 않는다.
+// 자산 대장(라벨·시리얼·보증)만 노드 수명 동안 불변이라 instance 당 1회 조회
+// 한다(NodeDrillSheet 와 같은 규약 — 폴링 금지).
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router';
+import { ExternalLink, Info } from 'lucide-react';
+import type { GateStageStatus } from '@/components/gpu/GateDiagram';
+import ReuseStepper, { type ReuseStepperStep } from '@/components/gpu/ReuseStepper';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { IdleGPU, IdleValidation } from '@/lib/demoApi';
+import { fetchNodeAsset, type NodeAsset, nodeAssetMessage, parseLabel } from '@/lib/nodeAsset';
+
+// ---- 유휴 재사용 어휘 (표·드로어 공통 SSOT) ----
+
+/** 행 상태 배지 — 서버 verdict 4종의 한국어 라벨. */
+export const VERDICT_LABEL: Record<IdleValidation['verdict'], string> = {
+  idle: '유휴',
+  validating: '검증 진행 중',
+  ready: '재투입 가능',
+  failed: '검증 실패',
+};
+
+/** 상태 색은 라벨 문자열이 아니라 이 표가 정한다(관제 규약 — 라벨을 바꿔도 색 불변). */
+export const VERDICT_COLOR: Record<IdleValidation['verdict'], string> = {
+  idle: 'var(--muted-foreground)',
+  validating: 'var(--metric-cpu)',
+  ready: 'var(--metric-pod)',
+  failed: 'var(--metric-fault)',
+};
+
+/** 사전검증·번인 하위 상태 4종 — 라벨·색·스테퍼 상태를 한 곳에서 낸다. */
+export const STEP_META: Record<
+  IdleValidation['precheck'],
+  { label: string; color: string; stage: GateStageStatus }
+> = {
+  // 목업 demo4 는 미실행을 붉은 톤으로 낸다(표 배지 + 드로어 스테퍼 힌트 모두).
+  none: { label: '미실행', color: 'var(--metric-fault)', stage: 'idle' },
+  running: { label: '진행 중', color: 'var(--metric-cpu)', stage: 'active' },
+  pass: { label: '통과', color: 'var(--metric-pod)', stage: 'done' },
+  fail: { label: '실패', color: 'var(--metric-fault)', stage: 'blocked' },
+};
+
+/** 토큰색 배지 — 목업 demo4 는 테두리 없는 옅은 tint pill 이다. */
+export function ToneBadge({ text, color }: { text: string; color: string }) {
+  return (
+    <Badge
+      variant="outline"
+      className="border-transparent px-2 py-0.5 text-[11px]"
+      style={{
+        color,
+        backgroundColor: `color-mix(in srgb, ${color} 14%, transparent)`,
+      }}
+    >
+      {text}
+    </Badge>
+  );
+}
+
+/** 번인은 진행률을 라벨에 얹는다 — "진행 중 25%"(목업 표기). */
+export function burninLabel(v: IdleValidation): string {
+  if (v.burnin !== 'running') return STEP_META[v.burnin].label;
+  return `진행 중 ${Math.round(v.burninProgress ?? 0)}%`;
+}
+
+/** "184일 3시간 22분" — 일 단위만으로는 못 만드는 표기라 분 해상도를 쓴다.
+ *  표는 분을 떼고(공간), 드로어는 분까지 낸다. */
+export function formatIdleSpan(minutes: number, withMinutes: boolean): string {
+  const total = Math.max(0, Math.floor(minutes));
+  const days = Math.floor(total / 1440);
+  const hours = Math.floor((total % 1440) / 60);
+  const parts = [`${days}일`, `${hours}시간`];
+  if (withMinutes) parts.push(`${total % 60}분`);
+  return parts.join(' ');
+}
+
+// ---- 재사용 4단계 스테퍼 ----
+
+/** 사전검증 → 번인 테스트 → 가용성 판정 → 재투입. 앞 두 칸은 하위 상태에서,
+ *  뒤 두 칸은 최종 판정(verdict)에서 나온다. 사전검증 화면(/gpu/validation)의
+ *  같은 4단계와 같은 컴포넌트를 쓴다 — 두 화면이 다른 모양이면 같은 절차로
+ *  읽히지 않는다. 이쪽은 서버 상세를 부르지 않으므로 스냅샷에서 파생한다. */
+function reuseStages(v: IdleValidation): ReuseStepperStep[] {
+  const pre = STEP_META[v.precheck];
+  const burn = STEP_META[v.burnin];
+  const judged: ReuseStepperStep =
+    v.verdict === 'ready'
+      ? { id: 'judge', label: '가용성 판정', status: 'done', hint: '통과' }
+      : v.verdict === 'failed'
+        ? { id: 'judge', label: '가용성 판정', status: 'blocked', hint: '실패' }
+        : { id: 'judge', label: '가용성 판정', status: 'idle', hint: '대기' };
+  const back: ReuseStepperStep =
+    v.verdict === 'ready'
+      ? { id: 'return', label: '재투입', status: 'active', hint: '가능' }
+      : { id: 'return', label: '재투입', status: 'idle', hint: '대기' };
+  return [
+    { id: 'precheck', label: '사전검증', status: pre.stage, hint: pre.label },
+    { id: 'burnin', label: '번인 테스트', status: burn.stage, hint: burninLabel(v) },
+    judged,
+    back,
+  ];
+}
+
+// ---- 드로어 ----
+
+export interface IdleReuseDrawerProps {
+  /** null = 닫힘. */
+  gpu: IdleGPU | null;
+  /** "클라우드 A > KR 리전 1 > alpha-2-prod" — 표시명 조회는 페이지가 한다. */
+  location: string;
+  /** 이 대상의 액션 진행 중 — 버튼 중복 클릭 차단. */
+  acting: boolean;
+  /** 직전 액션 실패 문구(null = 없음). 드로어 CTA 도 페이지와 같은 onAct 를
+   *  타므로 실패가 여기서도 보여야 한다 — 페이지 상단 경고는 시트에 가린다. */
+  error: string | null;
+  onClose: () => void;
+  onAct: (action: 'start-idle-validation' | 'return-idle-to-service', uuid: string) => void;
+}
+
+/** 정의행(라벨/값 2열) — NodeDrillSheet 의 InfoRow 와 같은 형태. */
+function InfoRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <>
+      <dt className="text-muted-foreground text-sm">{label}</dt>
+      <dd className={mono ? 'break-all font-mono text-sm' : 'break-all text-sm'}>{value || '—'}</dd>
+    </>
+  );
+}
+
+export default function IdleReuseDrawer({
+  gpu,
+  location,
+  acting,
+  error,
+  onClose,
+  onAct,
+}: IdleReuseDrawerProps) {
+  const instance = gpu?.instance ?? null;
+  const [asset, setAsset] = useState<NodeAsset | null>(null);
+  const [assetError, setAssetError] = useState<string | null>(null);
+
+  // 자산은 노드 수명 동안 불변 — instance 가 바뀔 때 1회만 부른다(폴링 금지).
+  useEffect(() => {
+    setAsset(null);
+    setAssetError(null);
+    if (!instance) return;
+    let cancelled = false;
+    fetchNodeAsset(instance)
+      .then((next) => {
+        if (!cancelled) setAsset(next);
+      })
+      .catch((err: unknown) => {
+        // 401 은 AuthContext 가 로그인 화면 전환으로 처리한다(문구 null).
+        if (!cancelled) setAssetError(nodeAssetMessage(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [instance]);
+
+  const nodeAsset = asset && asset.instance === instance ? asset : null;
+
+  // 닫히는 동안(exit 애니메이션)에도 마지막 대상을 붙든다 — 재투입 직후처럼
+  // 대상이 목록에서 사라지는 경우 패널이 빈 채로 미끄러져 나간다.
+  const last = useRef<IdleGPU | null>(null);
+  if (gpu !== null) last.current = gpu;
+  const shown = gpu ?? last.current;
+  const v = shown?.validation;
+
+  return (
+    <Sheet
+      open={gpu !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <SheetContent side="right" className="w-full sm:max-w-xl">
+        {shown === null || v === undefined ? null : (
+          <>
+            <SheetHeader className="gap-2 pb-2">
+              <SheetTitle className="break-all pr-8 font-mono text-base">
+                {shown.instance} / {shown.device}
+              </SheetTitle>
+              <div className="flex flex-wrap items-center gap-1.5">
+                <ToneBadge
+                  text={VERDICT_LABEL[v.verdict]}
+                  color={VERDICT_COLOR[v.verdict]}
+                />
+                <Badge variant="outline" className="text-[10px] text-muted-foreground">
+                  {shown.csp.toUpperCase()}
+                </Badge>
+              </div>
+              <SheetDescription>{shown.model}</SheetDescription>
+            </SheetHeader>
+
+            <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pb-6">
+              {/* 1. 자산 상세 */}
+              <dl className="grid grid-cols-[6.5rem_1fr] gap-x-3 gap-y-2">
+                <InfoRow label="GPU 모델" value={shown.model} />
+                <InfoRow label="유휴 기간" value={formatIdleSpan(shown.idleMinutes, true)} />
+                <InfoRow label="GPU UUID" value={shown.uuid} mono />
+                <InfoRow label="위치" value={location} />
+                <dt className="text-muted-foreground text-sm">라벨</dt>
+                <dd className="flex flex-wrap gap-1">
+                  {nodeAsset === null ? (
+                    assetError !== null ? (
+                      <span className="text-muted-foreground text-sm">{assetError}</span>
+                    ) : (
+                      <Skeleton className="h-5 w-40" />
+                    )
+                  ) : nodeAsset.labels.length === 0 ? (
+                    <span className="text-sm">—</span>
+                  ) : (
+                    nodeAsset.labels.map((raw) => {
+                      const { key, value } = parseLabel(raw);
+                      return (
+                        <Badge key={raw} variant="secondary" className="font-mono text-[10px]">
+                          {value ? `${key}: ${value}` : key}
+                        </Badge>
+                      );
+                    })
+                  )}
+                </dd>
+              </dl>
+
+              <Separator />
+
+              {/* 2. 재사용 준비 상태 — 4단계 스테퍼 */}
+              <section className="flex flex-col gap-2">
+                <h3 className="font-medium text-sm">재사용 준비 상태</h3>
+                <ReuseStepper steps={reuseStages(v)} />
+              </section>
+
+              {/* 3. 조치 — verdict 가 지금 누를 수 있는 버튼 하나를 정한다 */}
+              <div className="flex flex-col gap-2">
+                {error === null ? null : (
+                  <Alert variant="destructive">
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
+                )}
+                {/* 진행 중에는 누를 액션이 없다 — 그렇다고 진행률을 비활성 버튼
+                    모양으로 두면 시연에서 눌러도 아무 일이 없다. 지금 할 수 있는
+                    단 하나(라인에서 도는 것을 보러 간다)로 잇는다: 표의 validating
+                    행 권장 작업과 같은 목적지다. */}
+                {v.verdict === 'validating' ? (
+                  <Button asChild>
+                    <Link to={`/gpu/validation?uuid=${encodeURIComponent(shown.uuid)}`}>
+                      검증 진행 보기 {Math.round(v.burninProgress ?? 0)}%
+                    </Link>
+                  </Button>
+                ) : v.verdict === 'ready' ? (
+                  <Button
+                    disabled={acting}
+                    onClick={() => onAct('return-idle-to-service', shown.uuid)}
+                  >
+                    운영 풀 재투입
+                  </Button>
+                ) : (
+                  <Button
+                    disabled={acting}
+                    onClick={() => onAct('start-idle-validation', shown.uuid)}
+                  >
+                    {v.verdict === 'failed' ? '재검증 시작' : '재사용 검증 시작'}
+                  </Button>
+                )}
+
+                <Collapsible>
+                  <CollapsibleTrigger asChild>
+                    <Button variant="outline" className="w-full">
+                      상세 정보 보기
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    {nodeAsset === null ? (
+                      assetError !== null ? (
+                        <p className="pt-3 text-muted-foreground text-sm">{assetError}</p>
+                      ) : (
+                        <Skeleton className="mt-3 h-40 w-full" />
+                      )
+                    ) : (
+                      <dl className="grid grid-cols-[6.5rem_1fr] gap-x-3 gap-y-2 pt-3">
+                        <InfoRow
+                          label="드라이버"
+                          value={nodeAsset.gpus.find((g) => g.uuid === shown.uuid)?.driverVersion ?? ''}
+                        />
+                        <InfoRow
+                          label="CUDA"
+                          value={nodeAsset.gpus.find((g) => g.uuid === shown.uuid)?.cudaVersion ?? ''}
+                        />
+                        <InfoRow
+                          label="GPU 시리얼"
+                          value={nodeAsset.gpus.find((g) => g.uuid === shown.uuid)?.serial ?? ''}
+                          mono
+                        />
+                        <InfoRow label="노드 시리얼" value={nodeAsset.serialNumber} mono />
+                        <InfoRow label="설치일" value={nodeAsset.installedAt} />
+                        <InfoRow label="보증 만료" value={nodeAsset.warrantyEnds} />
+                        <InfoRow
+                          label="랙 / PDU"
+                          value={`${nodeAsset.rack} / PDU ${nodeAsset.pdu}`}
+                        />
+                      </dl>
+                    )}
+                  </CollapsibleContent>
+                </Collapsible>
+              </div>
+
+              {/* 4. 안내 */}
+              <Alert>
+                <Info />
+                <AlertTitle>재사용 검증이란?</AlertTitle>
+                <AlertDescription>
+                  <p>
+                    유휴 GPU를 업무에 재투입하기 위해 사전검증, 번인 테스트, 가용성 판정을 통해 정상
+                    동작 여부를 확인하는 절차입니다.
+                  </p>
+                  <Link
+                    to={`/gpu/validation?uuid=${encodeURIComponent(shown.uuid)}`}
+                    className="inline-flex items-center gap-1 text-primary underline-offset-2 hover:underline"
+                  >
+                    자세히 보기
+                    <ExternalLink className="size-3" />
+                  </Link>
+                </AlertDescription>
+              </Alert>
+            </div>
+          </>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/web/src/components/gpu/IncidentActionList.tsx b/web/src/components/gpu/IncidentActionList.tsx
new file mode 100644
index 0000000..bd50292
--- /dev/null
+++ b/web/src/components/gpu/IncidentActionList.tsx
@@ -0,0 +1,97 @@
+// IncidentActionList — 「권장 조치 / 다음 액션」 6단계 체크리스트(목업 demo2).
+//
+// 시각 문법은 RemediationStepper(Cordon→Drain→Taint)를 그대로 따른다 — 같은
+// 제품 안에서 "단계 진행"이 두 가지 모양으로 보이면 안 된다. 다른 점은 두 가지:
+// 순번 원(목업이 번호를 매긴다)과 완료 시각(우측 tabular-nums).
+//
+// 상태의 진실은 서버(incident.actions)다. 이 목록은 시나리오 단계의 투영이라
+// 파이프라인과 따로 놀 수 없고, GpuLayout 폴링이 갱신하면 살아 움직인다.
+import { CheckCircle2 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import type { IncidentAction } from '@/lib/demoApi';
+
+export interface IncidentActionListProps {
+  actions: IncidentAction[];
+}
+
+function StepMark({ action }: { action: IncidentAction }) {
+  if (action.status === 'done') {
+    return (
+      <CheckCircle2
+        className="size-6 shrink-0"
+        style={{ color: 'var(--metric-pod)' }}
+        aria-label="완료"
+      />
+    );
+  }
+  if (action.status === 'running') {
+    return (
+      <span
+        aria-label="진행 중"
+        className="flex size-6 shrink-0 animate-pulse items-center justify-center rounded-full font-semibold text-[11px] text-white tabular-nums"
+        style={{ backgroundColor: 'var(--metric-cpu)' }}
+      >
+        {action.seq}
+      </span>
+    );
+  }
+  return (
+    <span
+      aria-label="대기"
+      className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted font-semibold text-[11px] text-muted-foreground tabular-nums"
+    >
+      {action.seq}
+    </span>
+  );
+}
+
+export default function IncidentActionList({ actions }: IncidentActionListProps) {
+  if (actions.length === 0) {
+    return <p className="py-6 text-center text-muted-foreground text-sm">권장 조치가 없다.</p>;
+  }
+  return (
+    <ol className="flex flex-col">
+      {actions.map((action, index) => (
+        <li key={action.key} className="flex gap-3">
+          <div className="flex flex-col items-center">
+            <StepMark action={action} />
+            {index < actions.length - 1 ? <span className="w-px flex-1 bg-border" /> : null}
+          </div>
+          <div
+            className={`mb-1 flex min-w-0 flex-1 flex-col gap-0.5 pb-3 last:pb-0 ${
+              action.status === 'running' ? '-mx-2 rounded-md border border-primary bg-primary/5 px-2 py-1' : ''
+            }`}
+          >
+            <div className="flex flex-wrap items-baseline gap-2">
+              <span className="font-semibold text-muted-foreground text-xs tabular-nums">
+                {action.seq}
+              </span>
+              <span
+                className={
+                  action.status === 'pending'
+                    ? 'text-muted-foreground text-sm'
+                    : 'font-medium text-sm'
+                }
+              >
+                {action.label}
+              </span>
+              {action.status === 'done' && action.at ? (
+                <span className="ml-auto text-muted-foreground text-[11px] tabular-nums">
+                  {new Date(action.at).toLocaleTimeString('ko-KR')}
+                </span>
+              ) : (
+                <Badge
+                  variant={action.status === 'running' ? 'default' : 'outline'}
+                  className="ml-auto text-[10px]"
+                >
+                  {action.status === 'running' ? '진행 중' : '대기'}
+                </Badge>
+              )}
+            </div>
+            <p className="text-muted-foreground text-xs leading-snug">{action.detail}</p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
diff --git a/web/src/components/gpu/IncidentFlow.tsx b/web/src/components/gpu/IncidentFlow.tsx
new file mode 100644
index 0000000..d166ade
--- /dev/null
+++ b/web/src/components/gpu/IncidentFlow.tsx
@@ -0,0 +1,216 @@
+// IncidentFlow — 「원인 및 영향 경로」 가로 7-노드 흐름도(목업 demo2).
+//
+// 세로 리스트(ChainRow)는 "각 계층에서 분모가 커진다"를 잘 말하지만, 운영자가
+// 한눈에 봐야 하는 건 *장애가 어디서 시작해 어디까지 닿았나* 라는 한 줄 경로다.
+// 그래서 축을 가로로 눕히고, GPU 수 축(ChainLink)과 워크로드 축(IncidentImpact)
+// 을 같은 줄에 섞는다 — 목업의 박스 순서 그대로:
+//
+//   장애 노드 → GPU → 영향 Pod/Job → Namespace/Tenant → Cluster → CSP/Region → 영향 Service
+//
+// 목업이 뺀 두 계층은 버리지 않고 흡수한다: 물리 서버(시리얼·랙·PDU)는 장애 노드
+// 박스의 부가 정보로, Node Pool 은 Cluster 박스로. 데이터 손실 0.
+import { ArrowRight, Box, Boxes, Cloud, Cpu, type LucideIcon, Server, Users } from 'lucide-react';
+import { Fragment } from 'react';
+import type { ChainLink, IncidentImpact } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+export interface IncidentFlowProps {
+  links: ChainLink[];
+  impact: IncidentImpact;
+  /** 진행 중인 장애가 없으면 전 박스가 "연관 없음"(회색)으로 내려간다. */
+  active: boolean;
+}
+
+// 3색 범례 — 목업의 영향 있음 / 정상 / 연관 없음. tone 은 서버가 계층별로
+// 이미 매긴 값이라 여기서 다시 판정하지 않는다(같은 사실을 두 번 세지 않는다).
+type FlowState = 'impacted' | 'unaffected' | 'unrelated';
+
+const STATE_COLOR: Record<FlowState, string> = {
+  impacted: 'var(--metric-fault)',
+  unaffected: 'var(--metric-pod)',
+  unrelated: 'var(--muted-foreground)',
+};
+
+// 박스 안 한 줄 상태 문구 — 서버 tone 에서 파생한다. 문자열을 박아 넣으면
+// 서버가 계층 상태를 바꾸는 순간 화면이 거짓말을 한다.
+const STATE_LABEL: Record<FlowState, string> = {
+  impacted: '영향 있음',
+  unaffected: '정상',
+  unrelated: '연관 없음',
+};
+
+const LEGEND: Array<{ state: FlowState; label: string }> = [
+  { state: 'impacted', label: '영향 있음 (Impacted)' },
+  { state: 'unaffected', label: '정상 (Unaffected)' },
+  { state: 'unrelated', label: '연관 없음 (Not Related)' },
+];
+
+function stateOfTone(tone: string, active: boolean): FlowState {
+  if (!active) return 'unrelated';
+  return tone === 'crit' || tone === 'major' ? 'impacted' : 'unaffected';
+}
+
+interface FlowNode {
+  /** 박스 위 캡션 — 목업의 계층 이름. */
+  caption: string;
+  /** 박스 상단 아이콘 — 목업이 계층을 글자보다 먼저 알아보게 하는 장치. */
+  icon: LucideIcon;
+  value: string;
+  /** 강조 1줄(상태·오류코드 등). */
+  emphasis?: string;
+  detail?: string;
+  /** GPU 수 축 박스만 — "8 / 3,376". */
+  ratio?: string;
+  state: FlowState;
+}
+
+function FlowBox({ node }: { node: FlowNode }) {
+  const color = STATE_COLOR[node.state];
+  const Icon = node.icon;
+  return (
+    <div className="flex h-full min-w-0 flex-col items-center gap-1">
+      <span className="truncate text-muted-foreground text-[10px]">{node.caption}</span>
+      <div
+        className="flex min-h-28 w-full flex-1 flex-col items-center justify-center gap-0.5 rounded-md border-2 bg-card px-1.5 py-2 text-center"
+        style={{ borderColor: color }}
+      >
+        <Icon className="mb-0.5 size-5 shrink-0 text-muted-foreground" aria-hidden />
+        {/* 이름은 잘라내지 않고 2줄까지 접는다 — 칸이 좁아 "naver-b-g…" 로 잘리면
+            어느 노드인지 화면에서 사라진다(목업도 두 줄로 흘린다). */}
+        <span
+          className="line-clamp-2 w-full wrap-break-word font-semibold text-[11px] leading-tight"
+          title={node.value}
+        >
+          {node.value}
+        </span>
+        {node.emphasis ? (
+          <span
+            className="w-full truncate font-semibold text-[11px]"
+            style={{ color }}
+            title={node.emphasis}
+          >
+            {node.emphasis}
+          </span>
+        ) : null}
+        {node.detail ? (
+          <span className="w-full truncate text-[10px] text-muted-foreground" title={node.detail}>
+            {node.detail}
+          </span>
+        ) : null}
+        {node.ratio ? (
+          <span className="text-[10px] text-muted-foreground tabular-nums">{node.ratio}</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default function IncidentFlow({ links, impact, active }: IncidentFlowProps) {
+  if (links.length < 6) {
+    return <p className="text-muted-foreground text-sm">경로를 구성할 대상이 없다.</p>;
+  }
+  const [gpu, server, node, pool, cluster, csp] = links;
+  const ratio = (l: ChainLink) => `${formatCount(l.scope)} / ${formatCount(l.total)}`;
+
+  const nodes: FlowNode[] = [
+    {
+      caption: '장애 노드',
+      icon: Server,
+      value: node.value,
+      emphasis: `상태: ${node.detail}`,
+      // 목업이 생략한 물리 서버 계층을 여기로 흡수 — 시리얼·랙·PDU 가 사라지면
+      // 현장에서 어느 장비를 만져야 하는지가 화면에서 없어진다.
+      detail: `${server.value} · ${server.detail}`,
+      ratio: ratio(node),
+      state: stateOfTone(node.tone, active),
+    },
+    {
+      caption: 'GPU',
+      icon: Cpu,
+      value: gpu.value,
+      emphasis: gpu.detail,
+      ratio: ratio(gpu),
+      state: stateOfTone(gpu.tone, active),
+    },
+    {
+      caption: '영향 Pod/Job',
+      icon: Box,
+      value: `${formatCount(impact.pods)}개`,
+      emphasis: `Running: ${formatCount(impact.podsReady)} / ${formatCount(impact.pods)}`,
+      detail: '드레인 대상 워크로드',
+      state: active ? 'impacted' : 'unrelated',
+    },
+    {
+      caption: 'Namespace / Tenant',
+      icon: Users,
+      value: impact.namespace,
+      emphasis: `${impact.tenant} (${formatCount(impact.tenants)}개)`,
+      detail: '소유 테넌트',
+      state: active ? 'impacted' : 'unrelated',
+    },
+    {
+      caption: 'Cluster',
+      icon: Boxes,
+      value: cluster.value,
+      // Node Pool 계층 흡수 — 클러스터 안 어느 풀인지가 교체 요청의 단위다.
+      emphasis: `상태: ${STATE_LABEL[stateOfTone(cluster.tone, active)]}`,
+      detail: `노드 풀 ${pool.value}`,
+      ratio: ratio(cluster),
+      state: stateOfTone(cluster.tone, active),
+    },
+    {
+      caption: 'CSP / Region',
+      icon: Cloud,
+      value: csp.value,
+      emphasis: `상태: ${STATE_LABEL[stateOfTone(csp.tone, active)]}`,
+      detail: csp.detail,
+      ratio: ratio(csp),
+      state: stateOfTone(csp.tone, active),
+    },
+    {
+      caption: '영향 Service',
+      icon: Boxes,
+      value: impact.service,
+      emphasis: STATE_LABEL[active ? 'impacted' : 'unrelated'],
+      detail: `Service ${formatCount(impact.services)}개`,
+      state: active ? 'impacted' : 'unrelated',
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* 7 박스가 *항상* 한 화면에 들어와야 한다 — 고정폭 + overflow-x-auto 는
+          좁은 칸에서 뒤 2박스(CSP/Region·영향 Service)를 화면 밖으로 밀어내
+          "클라우드 경계까지"라는 이 그림의 결론을 잘라 먹는다. 그래서 박스는
+          flex-1 min-w-0 로 남은 폭을 균등 분배하고, 넘치는 글자는 truncate 가
+          받는다(잘린 그래프보다 잘린 글자가 낫다). 화살표는 캡션(1줄) 높이만큼
+          내려 박스 세로 중앙에 맞춘다. */}
+      <ol className="flex items-stretch gap-1">
+        {nodes.map((n, i) => (
+          <Fragment key={n.caption}>
+            <li className="flex min-w-0 flex-1">
+              <FlowBox node={n} />
+            </li>
+            {i < nodes.length - 1 ? (
+              <ArrowRight
+                className="mt-3 size-3.5 shrink-0 self-center text-muted-foreground/60"
+                aria-hidden
+              />
+            ) : null}
+          </Fragment>
+        ))}
+      </ol>
+      <ul className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+        {LEGEND.map((l) => (
+          <li key={l.state} className="flex items-center gap-1.5 text-muted-foreground text-xs">
+            <span
+              className="size-3 rounded-[3px] border-2"
+              style={{ borderColor: STATE_COLOR[l.state] }}
+            />
+            {l.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/KpiTile.tsx b/web/src/components/gpu/KpiTile.tsx
new file mode 100644
index 0000000..eb90b7a
--- /dev/null
+++ b/web/src/components/gpu/KpiTile.tsx
@@ -0,0 +1,158 @@
+// KpiTile — GPU 관제 규약의 KPI 타일: 톤 아이콘(원형 배경) + 라벨 +
+// 대형 값(+보조·배지) + 힌트 + 하단 미니 시각화(스파크라인 / 막대 / 진행바).
+// 목업 6카드(전체 GPU·활성 장애·수집 지연·저활용·자동복구·활성 워크로드)를
+// 이 슬롯 조합으로 전부 그린다. 신규 prop 은 전부 optional — 기존 호출부 불변.
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { Skeleton } from '@/components/ui/skeleton';
+import Sparkline from '@/components/gpu/Sparkline';
+
+export type KpiTone = 'default' | 'danger' | 'warn' | 'ok' | 'info';
+
+export interface KpiTileProps {
+  label: string;
+  /** null → Skeleton (로딩) */
+  value: string | null;
+  hint?: string;
+  /** 상태 톤 — 카드 상단 3px 라인 색으로 표현(관제 규약: 상단 라인 + 배지) */
+  tone?: KpiTone;
+  /** 제목 왼쪽 아이콘(lucide 등) */
+  icon?: React.ReactNode;
+  /** 값 옆 배지 — 예: Critical 2 / Major 5 */
+  badges?: Array<{ text: string; tone?: Exclude<KpiTone, 'default'> }>;
+  /** 하단 미니 스파크라인(추세) */
+  spark?: number[];
+  /** 하단 미니 막대(이산 사건 분포) — 선형인 Sparkline 으로는 못 그리는 축 */
+  bars?: number[];
+  /** 하단 진행바 0~100 */
+  progress?: number;
+  /** 값 뒤 보조 텍스트 — 예: "/ 3,376" */
+  sub?: string;
+}
+
+const TONE_COLOR: Record<KpiTone, string | null> = {
+  default: null,
+  danger: 'var(--metric-fault)',
+  warn: 'var(--metric-thermal)',
+  ok: 'var(--metric-pod)',
+  info: 'var(--metric-cpu)',
+};
+
+const FALLBACK_ACCENT = 'var(--metric-gpu)';
+
+/** 미니 막대 — 의존성 0 SVG(Sparkline 과 같은 이유: 타일마다 차트 라이브러리를
+ *  띄울 이유가 없다). 값은 최대치 기준 상대 높이로만 읽히면 충분하다. */
+function Bars({ values, color }: { values: number[]; color: string }) {
+  const clean = values.filter((v) => Number.isFinite(v));
+  if (clean.length === 0) {
+    return (
+      <svg viewBox="0 0 100 10" preserveAspectRatio="none" style={{ height: 36 }} className="w-full" aria-hidden>
+        <line x1="0" y1="10" x2="100" y2="10" stroke="var(--border)" strokeWidth="0.6" />
+      </svg>
+    );
+  }
+  // 전부 0 인 계열은 max=0 이라 나눗셈이 폭발한다 — 바닥 눈금만 남긴다.
+  const max = Math.max(...clean, 0) || 1;
+  const step = 100 / clean.length;
+  const width = step * 0.62;
+  return (
+    <svg viewBox="0 0 100 10" preserveAspectRatio="none" style={{ height: 36 }} className="w-full" aria-hidden>
+      {clean.map((v, i) => {
+        const h = Math.max(0.4, (Math.max(v, 0) / max) * 10);
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: 순수 수치 계열 — 재정렬·삽입이 없다
+          <rect key={i} x={i * step + (step - width) / 2} y={10 - h} width={width} height={h} fill={color} />
+        );
+      })}
+    </svg>
+  );
+}
+
+export default function KpiTile({
+  label,
+  value,
+  hint,
+  tone = 'default',
+  icon,
+  badges,
+  spark,
+  bars,
+  progress,
+  sub,
+}: KpiTileProps) {
+  // 목업(demo1) 타일은 상단 컬러 라인이 없다 — 톤은 아이콘 원형 배경 + 미니차트
+  // 색으로만 말한다. 상단 3px 라인은 KPI 6칸 줄 전체를 알록달록하게 만든다.
+  const accent = TONE_COLOR[tone];
+  const vizColor = accent ?? FALLBACK_ACCENT;
+  return (
+    <Card className="gap-0 py-0">
+      <CardContent className="flex flex-col gap-1 p-4">
+        <span className="flex items-center gap-2 text-muted-foreground text-xs">
+          {icon ? (
+            <span
+              className="inline-flex size-6 shrink-0 items-center justify-center rounded-full [&>svg]:size-3.5"
+              style={{
+                color: vizColor,
+                backgroundColor: `color-mix(in srgb, ${vizColor} 12%, transparent)`,
+              }}
+              aria-hidden
+            >
+              {icon}
+            </span>
+          ) : null}
+          {label}
+        </span>
+
+        {value === null ? (
+          <Skeleton className="h-7 w-16" />
+        ) : (
+          <span className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1">
+            <span className="font-semibold text-3xl leading-tight tabular-nums">{value}</span>
+            {sub ? <span className="text-muted-foreground text-sm tabular-nums">{sub}</span> : null}
+            {badges?.map((b) => {
+              const c = TONE_COLOR[b.tone ?? 'info'] ?? FALLBACK_ACCENT;
+              return (
+                <Badge
+                  key={b.text}
+                  variant="outline"
+                  className="px-1 py-0 text-[10px]"
+                  style={{
+                    color: c,
+                    borderColor: c,
+                    backgroundColor: `color-mix(in srgb, ${c} 12%, transparent)`,
+                  }}
+                >
+                  {b.text}
+                </Badge>
+              );
+            })}
+          </span>
+        )}
+
+        {hint ? <span className="text-muted-foreground text-[11px]">{hint}</span> : null}
+
+        {spark ? <Sparkline values={spark} color={vizColor} height={36} className="mt-1" /> : null}
+        {bars ? (
+          <span className="mt-1 block">
+            <Bars values={bars} color={vizColor} />
+          </span>
+        ) : null}
+        {progress != null ? (
+          // 진행바도 타일 톤을 따른다 — 기본 bg-primary(검정)만 남으면 옆 타일의
+          // 컬러 미니차트들 사이에서 이 카드만 흑백으로 튄다.
+          <Progress
+            value={Math.min(100, Math.max(0, progress))}
+            className="mt-3 h-1.5 [&>[data-slot=progress-indicator]]:bg-[var(--kpi-viz)]"
+            style={
+              {
+                '--kpi-viz': vizColor,
+                backgroundColor: `color-mix(in srgb, ${vizColor} 20%, transparent)`,
+              } as React.CSSProperties
+            }
+          />
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/LiveStrip.tsx b/web/src/components/gpu/LiveStrip.tsx
new file mode 100644
index 0000000..e9199dd
--- /dev/null
+++ b/web/src/components/gpu/LiveStrip.tsx
@@ -0,0 +1,146 @@
+// LiveStrip — 상황판 최상단 실시간 지표 띠.
+//
+// 큰 숫자 + 30분 추세선 + 변화량을 한 칸에 압축해 6개를 가로로 깐다. 관제
+// 콘솔에서 숫자만 있으면 "지금 얼마"는 알아도 "오르는 중인지"를 모른다 —
+// 추세선이 그 절반을 채운다.
+//
+// 값은 전부 엔진이 미리 집계한 라이브 시리즈다(합성이지만 실제 시계열로
+// 저장·질의된다 — 화면이 임의로 그리는 장식이 아니다).
+import { Minus, TrendingDown, TrendingUp } from 'lucide-react';
+import Sparkline from '@/components/gpu/Sparkline';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { LiveMetricKey, LiveSeriesMap } from '@/hooks/useLiveSeries';
+import { formatCount, formatMs, formatPct } from '@/lib/gpuMetrics';
+
+interface MetricDef {
+  key: LiveMetricKey;
+  label: string;
+  color: string;
+  format: (v: number) => string;
+  /** 값이 오르는 게 나쁜 지표(지연·에러율) — 추세 배지 색을 뒤집는다. */
+  higherIsWorse?: boolean;
+  formatDelta?: (v: number) => string;
+  /** 이 미만은 "보합" — 없으면 반올림돼 0 이 된 변화가 "+0" 으로 찍혀
+   *  화면이 고장난 것처럼 보인다(라이브 검증에서 실제로 났다). */
+  epsilon: number;
+}
+
+const METRICS: readonly MetricDef[] = [
+  {
+    key: 'util',
+    epsilon: 0.05,
+    label: 'GPU 사용률',
+    color: 'var(--metric-gpu)',
+    format: (v) => formatPct(v),
+    formatDelta: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(1)}pp`,
+  },
+  {
+    key: 'rps',
+    epsilon: 1,
+    label: '추론 요청',
+    color: 'var(--metric-cpu)',
+    format: (v) => `${formatCount(Math.round(v))} rps`,
+  },
+  {
+    key: 'p95',
+    epsilon: 1,
+    label: '응답 p95',
+    color: 'var(--metric-thermal)',
+    format: (v) => formatMs(v),
+    higherIsWorse: true,
+    formatDelta: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(0)}ms`,
+  },
+  {
+    key: 'tokens',
+    epsilon: 1000,
+    label: '토큰 처리',
+    color: 'var(--metric-pod)',
+    format: (v) => `${formatCount(Math.round(v))}/s`,
+  },
+  {
+    key: 'errPct',
+    epsilon: 0.005,
+    label: '에러율',
+    color: 'var(--metric-fault)',
+    format: (v) => formatPct(v),
+    higherIsWorse: true,
+    formatDelta: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}pp`,
+  },
+  {
+    key: 'powerKw',
+    epsilon: 1,
+    label: '전력',
+    color: 'var(--metric-mem)',
+    format: (v) => `${formatCount(Math.round(v))} kW`,
+  },
+] as const;
+
+function DeltaBadge({ delta, def }: { delta: number | null; def: MetricDef }) {
+  if (delta === null || Math.abs(delta) < def.epsilon) {
+    return (
+      <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+        <Minus className="size-3" />
+        보합
+      </span>
+    );
+  }
+  const up = delta > 0;
+  // 좋고 나쁨은 지표마다 다르다 — 지연이 오르면 빨강, 사용률이 오르면 초록.
+  const bad = def.higherIsWorse ? up : !up;
+  const Icon = up ? TrendingUp : TrendingDown;
+  const text = def.formatDelta
+    ? def.formatDelta(delta)
+    : `${up ? '+' : ''}${formatCount(Math.round(delta))}`;
+  return (
+    <span
+      className={`flex items-center gap-0.5 text-[10px] tabular-nums ${
+        bad ? 'text-metric-fault' : 'text-metric-pod'
+      }`}
+    >
+      <Icon className="size-3" />
+      {text}
+    </span>
+  );
+}
+
+export interface LiveStripProps {
+  series: LiveSeriesMap | null;
+}
+
+export default function LiveStrip({ series }: LiveStripProps) {
+  if (!series) {
+    return (
+      <div className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-6" aria-busy="true">
+        {METRICS.map((m) => (
+          <Skeleton key={m.key} className="h-[5.25rem] w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-6"
+      aria-label="실시간 플릿 지표"
+    >
+      {METRICS.map((def) => {
+        const s = series[def.key];
+        return (
+          <Card key={def.key} className="gap-0 overflow-hidden py-0">
+            <CardContent className="flex flex-col gap-0.5 p-2.5 pb-0">
+              <div className="flex items-baseline justify-between gap-1">
+                <span className="truncate text-[10px] text-muted-foreground">{def.label}</span>
+                <DeltaBadge delta={s.delta} def={def} />
+              </div>
+              <span className="truncate font-semibold text-lg tabular-nums leading-tight">
+                {s.last === null ? '—' : def.format(s.last)}
+              </span>
+            </CardContent>
+            <Sparkline values={s.values} color={def.color} height={26} />
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/ModelUtilChart.tsx b/web/src/components/gpu/ModelUtilChart.tsx
new file mode 100644
index 0000000..3ce7544
--- /dev/null
+++ b/web/src/components/gpu/ModelUtilChart.tsx
@@ -0,0 +1,291 @@
+// ModelUtilChart — demo1 「GPU 사용률 (실시간)」 다중 라인차트.
+// 최근 30분 창에서 GPU 모델별(gpu_model 라벨) 추이를 한 축에 겹쳐 그린다.
+// 탭 4종(Utilization / Memory / Temperature / Power)은 질의 셀렉터만 바꾸고
+// 폴링(15s)은 그대로 유지한다. 색은 --chart-1..5 순환, 전체 평균은
+// --muted-foreground 점선. Recharts 는 GpuServing 의 CSP-안전 셋업 미러
+// (원시 컴포넌트 + CSS 변수 문자열 직접 참조 + isAnimationActive={false}).
+import { useState } from 'react';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type RangeSeries } from '@/lib/api';
+import { formatCelsius, formatWatts } from '@/lib/gpuMetrics';
+
+/** 전체 평균 라인(Utilization 탭 전용) — 기존 플릿 롤업 시리즈 재사용. */
+const METRIC_FLEET_UTIL = 'nodevitals_demo_fleet_util_avg_pct';
+
+const TABS = [
+  {
+    key: 'util',
+    label: 'Utilization',
+    metric: 'nodevitals_demo_model_util_avg_pct',
+    unit: 'pct',
+    max: 100,
+  },
+  {
+    key: 'mem',
+    label: 'Memory',
+    metric: 'nodevitals_demo_model_mem_used_pct',
+    unit: 'pct',
+    max: 100,
+  },
+  {
+    key: 'temp',
+    label: 'Temperature',
+    metric: 'nodevitals_demo_model_temp_avg_celsius',
+    unit: 'celsius',
+    max: null,
+  },
+  {
+    key: 'power',
+    label: 'Power',
+    metric: 'nodevitals_demo_model_power_avg_watts',
+    unit: 'watts',
+    max: null,
+  },
+] as const;
+
+type TabKey = (typeof TABS)[number]['key'];
+type Unit = (typeof TABS)[number]['unit'];
+
+const WINDOW_SECONDS = 30 * 60;
+const STEP_SECONDS = 15;
+const POLL_MS = 15_000;
+/** 모델 선 색 — index.css 의 차트 팔레트를 모델 수만큼 순환한다. */
+const SERIES_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+] as const;
+const AVG_COLOR = 'var(--muted-foreground)';
+
+const CHART_MARGIN = { top: 8, right: 12, left: 0, bottom: 4 } as const;
+
+const TOOLTIP_STYLE = {
+  backgroundColor: 'var(--popover)',
+  borderColor: 'var(--border)',
+  color: 'var(--popover-foreground)',
+  fontSize: 12,
+} as const;
+
+function formatValue(unit: Unit, v: number | null): string {
+  if (v == null || Number.isNaN(v)) return '—';
+  if (unit === 'celsius') return formatCelsius(v);
+  if (unit === 'watts') return formatWatts(v);
+  return `${Math.round(v)}%`;
+}
+
+function formatClock(unixSec: number): string {
+  return new Date(unixSec * 1000).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+/** "NVIDIA H200" → "H200" — 목업의 짧은 표기(GpuModelBar 와 동일 규칙). */
+function shortModel(model: string): string {
+  return model.replace(/^NVIDIA\s+/, '');
+}
+
+function lastValue(values: RangeSeries['values']): number | null {
+  for (let i = values.length - 1; i >= 0; i--) {
+    const v = Number(values[i][1]);
+    if (Number.isFinite(v)) return v;
+  }
+  return null;
+}
+
+interface SeriesMeta {
+  /** dataKey — 모델명에 공백/기호가 섞여도 안전하도록 인덱스 키를 쓴다. */
+  key: string;
+  name: string;
+  color: string;
+  dashed: boolean;
+  current: number | null;
+}
+
+interface ChartRow {
+  time: number;
+  [seriesKey: string]: number | null;
+}
+
+/** 시리즈들을 공통 시간축 행으로 병합 — 빠진 버킷은 null(connectNulls=false). */
+function toRows(parts: readonly { key: string; values: RangeSeries['values'] }[]): ChartRow[] {
+  const byTime = new Map<number, ChartRow>();
+  for (const { key, values } of parts) {
+    for (const [t, v] of values) {
+      let row = byTime.get(t);
+      if (!row) {
+        row = { time: t };
+        for (const p of parts) row[p.key] = null;
+        byTime.set(t, row);
+      }
+      row[key] = Number(v);
+    }
+  }
+  return [...byTime.values()].sort((a, b) => a.time - b.time);
+}
+
+export interface ModelUtilChartProps {
+  /** null = 데모 모드 판별 중, false = 실서비스 → 질의 skip. */
+  demoMode?: boolean | null;
+}
+
+export default function ModelUtilChart({ demoMode }: ModelUtilChartProps) {
+  const [tab, setTab] = useState<TabKey>('util');
+  const active = TABS.find((t) => t.key === tab) ?? TABS[0];
+  const enabled = demoMode !== false;
+
+  const trend = usePolledQuery(
+    async () => {
+      if (!enabled) return null;
+      const endSec = Math.floor(Date.now() / 1000);
+      const startSec = endSec - WINDOW_SECONDS;
+      const [byModel, fleet] = await Promise.all([
+        api.rangeQuery(active.metric, startSec, endSec, STEP_SECONDS),
+        active.key === 'util'
+          ? api.rangeQuery(METRIC_FLEET_UTIL, startSec, endSec, STEP_SECONDS)
+          : null,
+      ]);
+
+      // 모델명 정렬 — 폴링마다 색이 튀지 않도록 순서를 고정한다.
+      const models = [...byModel.data.result].sort((a, b) =>
+        (a.metric.gpu_model ?? '').localeCompare(b.metric.gpu_model ?? ''),
+      );
+      const series: SeriesMeta[] = models.map((s, i) => ({
+        key: `m${i}`,
+        name: shortModel(s.metric.gpu_model ?? '(unknown)'),
+        color: SERIES_COLORS[i % SERIES_COLORS.length],
+        dashed: false,
+        current: lastValue(s.values),
+      }));
+      const parts = models.map((s, i) => ({ key: `m${i}`, values: s.values }));
+
+      const avg = fleet?.data.result[0];
+      if (avg) {
+        series.push({
+          key: 'avg',
+          name: '전체 평균',
+          color: AVG_COLOR,
+          dashed: true,
+          current: lastValue(avg.values),
+        });
+        parts.push({ key: 'avg', values: avg.values });
+      }
+
+      return { series, rows: toRows(parts) };
+    },
+    POLL_MS,
+    [enabled, tab],
+  );
+
+  const rows = trend.data?.rows ?? [];
+  const series = trend.data?.series ?? [];
+  const nowSec = rows.length > 0 ? rows[rows.length - 1].time : null;
+  const loading = enabled && trend.data === null && trend.error === null;
+
+  return (
+    <Card className="gap-3 py-4">
+      <CardHeader className="px-4">
+        <CardTitle className="text-sm">GPU 사용률 (실시간)</CardTitle>
+        <CardAction>
+          <Tabs value={tab} onValueChange={(v) => setTab(v as TabKey)}>
+            <TabsList className="h-7">
+              {TABS.map((t) => (
+                <TabsTrigger key={t.key} value={t.key} className="px-2 text-xs">
+                  {t.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-4">
+        {/* 범례 — 모델별 현재값(마지막 포인트) */}
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 pb-2 text-xs">
+          {series.map((s) => (
+            <span key={s.key} className="flex items-center gap-1.5">
+              <span
+                className={`inline-block w-3 border-t-2 ${s.dashed ? 'border-dashed' : ''}`}
+                style={{ borderColor: s.color }}
+              />
+              <span className="text-muted-foreground">{s.name}</span>
+              <span className="font-semibold tabular-nums">
+                {formatValue(active.unit, s.current)}
+              </span>
+            </span>
+          ))}
+        </div>
+
+        <div className="h-[220px]">
+          {loading ? (
+            <Skeleton className="h-full w-full" />
+          ) : rows.length < 2 ? (
+            <div className="flex h-full items-center justify-center text-muted-foreground text-sm">
+              {enabled ? '데이터 수집 중…' : '데모 인스턴스 전용 지표다.'}
+            </div>
+          ) : (
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={rows} margin={CHART_MARGIN}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis
+                  dataKey="time"
+                  type="number"
+                  domain={['dataMin', 'dataMax']}
+                  tickFormatter={formatClock}
+                  tick={{ fontSize: 11 }}
+                  className="fill-muted-foreground"
+                />
+                <YAxis
+                  domain={active.max === null ? ['auto', 'auto'] : [0, active.max]}
+                  ticks={active.max === null ? undefined : [0, 25, 50, 75, 100]}
+                  tickFormatter={(v) => formatValue(active.unit, Number(v))}
+                  width={48}
+                  tick={{ fontSize: 11 }}
+                  className="fill-muted-foreground"
+                />
+                <Tooltip
+                  labelFormatter={(t) => formatClock(Number(t))}
+                  formatter={(value) => formatValue(active.unit, Number(value))}
+                  contentStyle={TOOLTIP_STYLE}
+                />
+                {/* 현재 시각 기준선 */}
+                {nowSec === null ? null : (
+                  <ReferenceLine x={nowSec} stroke={AVG_COLOR} strokeDasharray="4 4" />
+                )}
+                {series.map((s) => (
+                  <Line
+                    key={s.key}
+                    type="monotone"
+                    dataKey={s.key}
+                    name={s.name}
+                    stroke={s.color}
+                    strokeWidth={2}
+                    strokeDasharray={s.dashed ? '4 3' : undefined}
+                    dot={false}
+                    connectNulls={false}
+                    isAnimationActive={false}
+                  />
+                ))}
+              </LineChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/NodeDrillSheet.tsx b/web/src/components/gpu/NodeDrillSheet.tsx
new file mode 100644
index 0000000..013edc1
--- /dev/null
+++ b/web/src/components/gpu/NodeDrillSheet.tsx
@@ -0,0 +1,507 @@
+// NodeDrillSheet — 히트맵 셀 클릭 시 우측 노드 드릴다운 Sheet.
+//
+// 사용률 숫자만 보이는 드릴다운은 관제 화면이 아니라 그래프 위젯이다. 운영자가
+// 노드를 열면 보는 것은 자산 대장이다 — 드라이버·펌웨어·시리얼·MIG·PCIe·
+// NVLink·물리 위치(랙/PDU)·보증·K8s 라벨/테인트. 그래야 "이 노드를 교체
+// 요청한다"는 판단이 화면 안에서 성립한다. 그래서 3탭 구성:
+//   실시간 — GPU별 카드(실시간 지표 + 자산 요약), 15초 폴링
+//   자산   — 노드 하드웨어/소프트웨어 대장 + GPU 자산 표
+//   K8s    — 라벨/테인트
+//
+// 질의는 두 갈래다. 실시간 4메트릭(util/temp/power/mem used+total)은 instance
+// 등호 매처 instant 질의로 15초 폴링하고, 자산은 변하지 않으므로
+// `GET /api/v1/demo/node/{instance}` 를 instance 당 1회만 부른다(폴링 금지).
+// instance=null 이면 두 질의 모두 skip — usePolledQuery 의 enabled 대체 패턴
+// (재구독 신호는 deps=[instance]).
+import { useEffect, useState } from 'react';
+import GpuDeviceCard from '@/components/gpu/GpuDeviceCard';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type InstantSample } from '@/lib/api';
+import {
+  formatCount,
+  METRIC_GPU_MEM_TOTAL,
+  METRIC_GPU_MEM_USED,
+  METRIC_GPU_POWER,
+  METRIC_GPU_TEMP,
+  METRIC_GPU_UTIL,
+  selector,
+} from '@/lib/gpuMetrics';
+import {
+  fetchNodeAsset,
+  formatNvlink,
+  formatPcie,
+  type GpuAsset,
+  type NodeAsset,
+  nodeAssetMessage,
+  NVLINK_OK,
+  parseLabel,
+  WARRANTY_WARN_DAYS,
+  warrantyDaysLeft,
+} from '@/lib/nodeAsset';
+
+export interface NodeDrillSheetProps {
+  instance: string | null;
+  onClose: () => void;
+}
+
+interface DeviceRow {
+  device: string;
+  model: string;
+  util: number | null;
+  memUsed: number | null;
+  memTotal: number | null;
+  temp: number | null;
+  power: number | null;
+}
+
+interface DrillData {
+  /** 어느 노드의 결과인지 — 노드 전환 직후 이전 노드 데이터 오표시 방지. */
+  instance: string;
+  csp: string;
+  cluster: string;
+  devices: DeviceRow[];
+}
+
+/** 실시간 표본과 자산을 device 라벨로 합친 카드 1장분. 둘 중 하나만 있어도 그린다
+ *  (자산만 = 수집 중단 노드 / 실시간만 = 자산 API 미도달). */
+interface MergedDevice {
+  device: string;
+  live: DeviceRow | null;
+  asset: GpuAsset | null;
+}
+
+const POLL_MS = 15_000;
+
+function sampleValue(sample: InstantSample): number | null {
+  const v = Number(sample.value[1]);
+  return Number.isFinite(v) ? v : null;
+}
+
+/** device 라벨의 숫자 접미로 정렬(gpu0, gpu1, … gpu10) — useFleet 정렬과 동일 기준. */
+function deviceOrder(device: string): number {
+  const n = Number.parseInt(device.replace(/^\D+/, ''), 10);
+  return Number.isNaN(n) ? 0 : n;
+}
+
+function mergeDevices(live: DeviceRow[], gpus: GpuAsset[]): MergedDevice[] {
+  const rows = new Map<string, MergedDevice>();
+  const at = (device: string): MergedDevice => {
+    let row = rows.get(device);
+    if (!row) {
+      row = { device, live: null, asset: null };
+      rows.set(device, row);
+    }
+    return row;
+  };
+  for (const row of live) at(row.device).live = row;
+  for (const gpu of gpus) at(gpu.device).asset = gpu;
+  return [...rows.values()].sort((a, b) => deviceOrder(a.device) - deviceOrder(b.device));
+}
+
+/** 노드 자산 대장의 정의행(라벨/값 2열). */
+function InfoRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <>
+      <dt className="text-muted-foreground text-sm">{label}</dt>
+      <dd className={mono ? 'break-all font-mono text-sm' : 'break-all text-sm'}>
+        {value || '—'}
+      </dd>
+    </>
+  );
+}
+
+/** 자산 미도달 상태(로딩/오류)의 공통 자리 표시. */
+function AssetFallback({ error }: { error: string | null }) {
+  if (error !== null) {
+    return <p className="text-muted-foreground text-sm">{error}</p>;
+  }
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-5 w-40" />
+      <Skeleton className="h-24 w-full" />
+      <Skeleton className="h-5 w-32" />
+      <Skeleton className="h-24 w-full" />
+    </div>
+  );
+}
+
+export default function NodeDrillSheet({ instance, onClose }: NodeDrillSheetProps) {
+  const query = usePolledQuery<DrillData | null>(
+    async () => {
+      if (!instance) return null;
+      const [utilRes, tempRes, powerRes, memUsedRes, memTotalRes] = await Promise.all([
+        api.instantQuery(selector(METRIC_GPU_UTIL, { instance })),
+        api.instantQuery(selector(METRIC_GPU_TEMP, { instance })),
+        api.instantQuery(selector(METRIC_GPU_POWER, { instance })),
+        api.instantQuery(selector(METRIC_GPU_MEM_USED, { instance })),
+        api.instantQuery(selector(METRIC_GPU_MEM_TOTAL, { instance })),
+      ]);
+
+      // device 라벨 기준 5메트릭 join — 시리즈 일부 결측은 null 로 남긴다.
+      const rows = new Map<string, DeviceRow>();
+      const rowOf = (device: string): DeviceRow => {
+        let row = rows.get(device);
+        if (!row) {
+          row = { device, model: '', util: null, memUsed: null, memTotal: null, temp: null, power: null };
+          rows.set(device, row);
+        }
+        return row;
+      };
+      const fill = (
+        samples: InstantSample[],
+        assign: (row: DeviceRow, v: number | null) => void,
+      ) => {
+        for (const s of samples) {
+          const row = rowOf(s.metric.device ?? 'default');
+          if (!row.model && s.metric.gpu_model) row.model = s.metric.gpu_model;
+          assign(row, sampleValue(s));
+        }
+      };
+      fill(utilRes.data.result, (row, v) => {
+        row.util = v;
+      });
+      fill(tempRes.data.result, (row, v) => {
+        row.temp = v;
+      });
+      fill(powerRes.data.result, (row, v) => {
+        row.power = v;
+      });
+      fill(memUsedRes.data.result, (row, v) => {
+        row.memUsed = v;
+      });
+      fill(memTotalRes.data.result, (row, v) => {
+        row.memTotal = v;
+      });
+
+      const head = utilRes.data.result[0]?.metric ?? {};
+      return {
+        instance,
+        csp: head.csp ?? '',
+        cluster: head.cluster ?? '',
+        devices: [...rows.values()].sort((a, b) => deviceOrder(a.device) - deviceOrder(b.device)),
+      };
+    },
+    POLL_MS,
+    [instance],
+  );
+
+  // 자산은 노드 수명 동안 불변 — instance 가 바뀔 때 1회만 부른다(폴링 금지).
+  const [asset, setAsset] = useState<NodeAsset | null>(null);
+  const [assetError, setAssetError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setAsset(null);
+    setAssetError(null);
+    if (!instance) return;
+    let cancelled = false;
+    fetchNodeAsset(instance)
+      .then((next) => {
+        if (!cancelled) setAsset(next);
+      })
+      .catch((err: unknown) => {
+        // 401 은 AuthContext 가 로그인 화면 전환으로 처리한다(문구 null).
+        if (!cancelled) setAssetError(nodeAssetMessage(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [instance]);
+
+  // 노드 전환 직후 이전 노드 결과가 새 헤더 아래 보이는 혼선 방지 — 불일치는 로딩 취급.
+  const live = query.data && query.data.instance === instance ? query.data : null;
+  const nodeAsset = asset && asset.instance === instance ? asset : null;
+  const devices = mergeDevices(live?.devices ?? [], nodeAsset?.gpus ?? []);
+
+  const warrantyLeft = nodeAsset ? warrantyDaysLeft(nodeAsset.warrantyEnds) : null;
+  const warrantyNear = warrantyLeft !== null && warrantyLeft <= WARRANTY_WARN_DAYS;
+
+  // 헤더 한 줄 — 자산이 오면 랙/PDU 까지, 오기 전에는 메트릭 라벨로 버틴다.
+  const metaParts: string[] = [];
+  const csp = nodeAsset?.csp || live?.csp || '';
+  const cluster = nodeAsset?.cluster || live?.cluster || '';
+  if (csp) metaParts.push(csp);
+  if (cluster) metaParts.push(cluster);
+  if (nodeAsset) {
+    metaParts.push(`랙 ${nodeAsset.rack}`, `PDU ${nodeAsset.pdu}`, nodeAsset.model);
+  }
+  const gpuCount = nodeAsset ? nodeAsset.gpuCount : devices.length;
+  if (gpuCount > 0) metaParts.push(`GPU ${formatCount(gpuCount)}장`);
+
+  return (
+    <Sheet
+      open={instance !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <SheetContent side="right" className="w-full sm:max-w-2xl">
+        <SheetHeader className="gap-2 pb-2">
+          <SheetTitle className="break-all pr-8 font-mono text-base">{instance ?? ''}</SheetTitle>
+          <div className="flex flex-wrap items-center gap-1.5">
+            {nodeAsset ? (
+              <>
+                {nodeAsset.ready ? (
+                  <Badge variant="outline" className="border-metric-pod text-metric-pod">
+                    Ready
+                  </Badge>
+                ) : (
+                  <Badge variant="destructive">NotReady</Badge>
+                )}
+                {nodeAsset.cordoned ? (
+                  <Badge variant="outline" className="border-metric-thermal text-metric-thermal">
+                    Cordon
+                  </Badge>
+                ) : null}
+                {nodeAsset.agentMissing ? <Badge variant="destructive">수집 중단</Badge> : null}
+              </>
+            ) : (
+              <Badge variant="outline" className="text-muted-foreground">
+                자산 조회 중
+              </Badge>
+            )}
+          </div>
+          <SheetDescription>
+            {metaParts.length > 0 ? metaParts.join(' · ') : '노드 상세 조회 중…'}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Tabs defaultValue="live" className="flex min-h-0 flex-1 flex-col px-4 pb-4">
+          <TabsList>
+            <TabsTrigger value="live">실시간</TabsTrigger>
+            <TabsTrigger value="asset">자산</TabsTrigger>
+            <TabsTrigger value="k8s">K8s</TabsTrigger>
+          </TabsList>
+
+          {/* ---- 실시간 ---- */}
+          <TabsContent value="live" className="min-h-0 overflow-y-auto">
+            {devices.length === 0 ? (
+              live === null ? (
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <Skeleton className="h-56 w-full" />
+                  <Skeleton className="h-56 w-full" />
+                  <Skeleton className="h-56 w-full" />
+                  <Skeleton className="h-56 w-full" />
+                </div>
+              ) : (
+                <p className="text-muted-foreground text-sm">
+                  이 노드의 GPU 시리즈가 없다 — 최근 평가창 안에 수집된 값이 없다.
+                </p>
+              )
+            ) : (
+              <>
+                <p className="mb-2 text-muted-foreground text-xs">
+                  실시간 지표는 15초마다 자동 갱신 · 자산 정보는 노드 진입 시 1회 조회
+                </p>
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  {devices.map((row) => (
+                    <GpuDeviceCard
+                      key={row.device}
+                      device={row.device}
+                      live={{
+                        util: row.live?.util ?? null,
+                        memUsed: row.live?.memUsed ?? null,
+                        memTotal: row.live?.memTotal ?? null,
+                        temp: row.live?.temp ?? null,
+                        power: row.live?.power ?? null,
+                      }}
+                      asset={row.asset ?? undefined}
+                      fallbackModel={row.live?.model}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </TabsContent>
+
+          {/* ---- 자산 ---- */}
+          <TabsContent value="asset" className="min-h-0 overflow-y-auto">
+            {nodeAsset === null ? (
+              <AssetFallback error={assetError} />
+            ) : (
+              <div className="flex flex-col gap-4">
+                <section>
+                  <h3 className="mb-2 font-medium text-sm">하드웨어</h3>
+                  <dl className="grid grid-cols-[6.5rem_minmax(0,1fr)] gap-x-3 gap-y-1">
+                    <InfoRow label="시리얼" value={nodeAsset.serialNumber} mono />
+                    <InfoRow label="모델" value={nodeAsset.model} />
+                    <InfoRow label="GPU 수" value={`${formatCount(nodeAsset.gpuCount)}장`} />
+                    <InfoRow label="랙" value={nodeAsset.rack} mono />
+                    <InfoRow label="PDU" value={nodeAsset.pdu} />
+                    <InfoRow label="설치일" value={nodeAsset.installedAt} />
+                    <InfoRow label="사용 기간" value={`${formatCount(nodeAsset.ageDays)}일`} />
+                    <dt className="text-muted-foreground text-sm">보증 만료</dt>
+                    <dd className="flex flex-wrap items-center gap-2 text-sm">
+                      <span>{nodeAsset.warrantyEnds || '—'}</span>
+                      {warrantyLeft !== null ? (
+                        <span className="text-muted-foreground text-xs">
+                          {warrantyLeft >= 0
+                            ? `${formatCount(warrantyLeft)}일 남음`
+                            : `${formatCount(-warrantyLeft)}일 경과`}
+                        </span>
+                      ) : null}
+                      {warrantyNear ? (
+                        <Badge
+                          variant="outline"
+                          className="border-metric-thermal text-metric-thermal"
+                        >
+                          {warrantyLeft !== null && warrantyLeft < 0
+                            ? '보증 만료'
+                            : '보증 만료 임박'}
+                        </Badge>
+                      ) : null}
+                    </dd>
+                  </dl>
+                </section>
+
+                <Separator />
+
+                <section>
+                  <h3 className="mb-2 font-medium text-sm">소프트웨어</h3>
+                  <dl className="grid grid-cols-[6.5rem_minmax(0,1fr)] gap-x-3 gap-y-1">
+                    <InfoRow label="kubelet" value={nodeAsset.kubeletVersion} mono />
+                    <InfoRow label="containerd" value={nodeAsset.containerRuntime} mono />
+                    <InfoRow label="OS 이미지" value={nodeAsset.osImage} />
+                    <InfoRow label="커널" value={nodeAsset.kernelVersion} mono />
+                  </dl>
+                </section>
+
+                <Separator />
+
+                <section>
+                  <h3 className="mb-2 font-medium text-sm">
+                    GPU 자산 ({formatCount(nodeAsset.gpus.length)}장)
+                  </h3>
+                  <Table className="text-xs">
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="whitespace-nowrap">device</TableHead>
+                        <TableHead className="whitespace-nowrap">시리얼</TableHead>
+                        <TableHead className="whitespace-nowrap">VBIOS</TableHead>
+                        <TableHead className="whitespace-nowrap">드라이버</TableHead>
+                        <TableHead className="whitespace-nowrap">CUDA</TableHead>
+                        <TableHead className="whitespace-nowrap">MIG</TableHead>
+                        <TableHead className="whitespace-nowrap">PCIe</TableHead>
+                        <TableHead className="whitespace-nowrap">NVLink</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {nodeAsset.gpus.map((gpu) => (
+                        <TableRow key={gpu.uuid || gpu.device}>
+                          <TableCell className="whitespace-nowrap font-medium">
+                            {gpu.device}
+                          </TableCell>
+                          <TableCell className="whitespace-nowrap font-mono">{gpu.serial}</TableCell>
+                          <TableCell className="whitespace-nowrap font-mono">{gpu.vbios}</TableCell>
+                          <TableCell className="whitespace-nowrap font-mono">
+                            {gpu.driverVersion}
+                          </TableCell>
+                          <TableCell className="whitespace-nowrap">{gpu.cudaVersion}</TableCell>
+                          <TableCell className="whitespace-nowrap">{gpu.migProfile}</TableCell>
+                          <TableCell className="whitespace-nowrap">
+                            {formatPcie(gpu.pcieGen, gpu.pcieWidth)}
+                          </TableCell>
+                          <TableCell
+                            className={
+                              gpu.nvlinkStatus === NVLINK_OK
+                                ? 'whitespace-nowrap'
+                                : 'whitespace-nowrap font-medium text-metric-thermal'
+                            }
+                          >
+                            {formatNvlink(gpu.nvlinkLinks, gpu.nvlinkStatus)}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </section>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* ---- K8s ---- */}
+          <TabsContent value="k8s" className="min-h-0 overflow-y-auto">
+            {nodeAsset === null ? (
+              <AssetFallback error={assetError} />
+            ) : (
+              <div className="flex flex-col gap-4">
+                <section>
+                  <h3 className="mb-2 font-medium text-sm">
+                    라벨 ({formatCount(nodeAsset.labels.length)})
+                  </h3>
+                  {nodeAsset.labels.length === 0 ? (
+                    <p className="text-muted-foreground text-sm">라벨 없음</p>
+                  ) : (
+                    <Table className="text-xs">
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>키</TableHead>
+                          <TableHead>값</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {nodeAsset.labels.map((raw) => {
+                          const { key, value } = parseLabel(raw);
+                          return (
+                            <TableRow key={raw}>
+                              <TableCell className="break-all font-mono">{key}</TableCell>
+                              <TableCell className="break-all font-mono">{value || '—'}</TableCell>
+                            </TableRow>
+                          );
+                        })}
+                      </TableBody>
+                    </Table>
+                  )}
+                </section>
+
+                <Separator />
+
+                <section>
+                  <h3 className="mb-2 font-medium text-sm">
+                    테인트 ({formatCount(nodeAsset.taints.length)})
+                  </h3>
+                  {nodeAsset.taints.length === 0 ? (
+                    <p className="text-muted-foreground text-sm">테인트 없음</p>
+                  ) : (
+                    <div className="flex flex-col items-start gap-1.5">
+                      {nodeAsset.taints.map((taint) => (
+                        <Badge
+                          key={taint}
+                          variant="outline"
+                          className="max-w-full whitespace-normal break-all border-metric-fault font-mono text-metric-fault"
+                        >
+                          {taint}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                  <p className="mt-2 text-muted-foreground text-xs">
+                    테인트는 스케줄러가 이 노드를 회피하는 이유다.
+                  </p>
+                </section>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/web/src/components/gpu/NodeGpuPanel.tsx b/web/src/components/gpu/NodeGpuPanel.tsx
new file mode 100644
index 0000000..152b73a
--- /dev/null
+++ b/web/src/components/gpu/NodeGpuPanel.tsx
@@ -0,0 +1,522 @@
+// NodeGpuPanel — 토폴로지 그래프 옆에 상주하는 워커 노드 실시간 GPU 상세 패널.
+//
+// NodeDrillSheet 와 역할이 다르다. 그쪽은 클릭 시 밀려나오는 *자산 대장*
+// (시리얼·펌웨어·랙·K8s 라벨)이고, 여기는 "선택된 노드가 지금 어떤가"만 4탭으로
+// 항상 띄워 둔다. 자산까지 필요해지면 [상세 보기 →] 로 그쪽에 넘긴다.
+//
+// 데이터 출처는 둘이다. 구성(GPU 수·상태·풀/테넌트/워크로드)은 props 로 받은
+// 벽면 셀에서 집계하고(새 API 없음), 실시간 수치(사용률·온도·전력·메모리)와
+// 30분 추이는 instance 등호 매처 질의로 15초 폴링한다. instance=null 이면 질의
+// 자체를 skip 한다 — usePolledQuery 의 enabled 대체 패턴(재구독 신호 deps=[instance]).
+import { useMemo } from 'react';
+import Sparkline from '@/components/gpu/Sparkline';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import type { CellStatus, FleetCell } from '@/hooks/useFleet';
+import { api, type InstantSample } from '@/lib/api';
+import type { AlertEvent, ClusterEvent } from '@/lib/demoApi';
+import {
+  bandForUtil,
+  formatCelsius,
+  formatCount,
+  formatPct,
+  formatWatts,
+  METRIC_COLORS,
+  METRIC_GPU_MEM_TOTAL,
+  METRIC_GPU_MEM_USED,
+  METRIC_GPU_POWER,
+  METRIC_GPU_TEMP,
+  METRIC_GPU_UTIL,
+  selector,
+} from '@/lib/gpuMetrics';
+
+export interface NodeGpuPanelProps {
+  /** 선택된 노드. null 이면 안내 문구만 띄운다. */
+  instance: string | null;
+  /** 전체 벽면 셀 — 이 컴포넌트가 instance 로 걸러 쓴다. */
+  cells: FleetCell[];
+  /** 셀 상태 분류자(장애·격리는 라벨이 아니라 시나리오 집합에서 나온다). */
+  statusOf?: (c: FleetCell) => CellStatus;
+  alerts?: AlertEvent[];
+  events?: ClusterEvent[];
+  /** [상세 보기 →] — 부모가 NodeDrillSheet(자산 대장)를 연다. */
+  onOpenDetail?: (instance: string) => void;
+}
+
+const POLL_MS = 15_000;
+const TREND_SEC = 1800; // 최근 30분
+const TREND_STEP = 60;
+const MAX_FEED = 10; // 이벤트 탭 표시 상한
+
+const STATUS_META: Record<CellStatus, { label: string; color: string }> = {
+  normal: { label: '정상', color: 'var(--metric-pod)' },
+  degraded: { label: '성능 저하', color: 'var(--metric-thermal)' },
+  fault: { label: '장애', color: 'var(--metric-fault)' },
+  isolated: { label: '격리', color: 'var(--metric-fault)' },
+  recovering: { label: '복구 중', color: 'var(--metric-cpu)' },
+};
+
+/** 심각한 것부터 — 노드 대표 상태는 이 순서의 첫 히트다. */
+const STATUS_ORDER: CellStatus[] = ['fault', 'isolated', 'degraded', 'recovering', 'normal'];
+
+const SEVERITY_COLOR: Record<AlertEvent['severity'], string> = {
+  critical: METRIC_COLORS.fault,
+  major: METRIC_COLORS.thermal,
+  warning: METRIC_COLORS.mem,
+  info: METRIC_COLORS.cpu,
+};
+
+const WORKLOAD_LABEL: Record<string, string> = {
+  inference: '추론',
+  training: '학습',
+};
+
+/** "NVIDIA H200" → "H200" — GpuModelBar·IdleDonut 과 동일 규칙. */
+function shortModel(model: string): string {
+  return model.replace(/^NVIDIA\s+/, '');
+}
+
+function relTime(at: number): string {
+  const min = Math.round((Date.now() - at) / 60_000);
+  if (min < 1) return '방금';
+  if (min < 60) return `${min}분 전`;
+  const hour = Math.floor(min / 60);
+  return hour < 24 ? `${hour}시간 전` : `${Math.floor(hour / 24)}일 전`;
+}
+
+function sampleValue(s: InstantSample): number | null {
+  const v = Number(s.value[1]);
+  return Number.isFinite(v) ? v : null;
+}
+
+interface DeviceLive {
+  device: string;
+  util: number | null;
+  temp: number | null;
+  power: number | null;
+  memUsed: number | null;
+  memTotal: number | null;
+}
+
+interface NodeLive {
+  /** 어느 노드의 결과인지 — 노드 전환 직후 이전 노드 값 오표시 방지. */
+  instance: string;
+  devices: Map<string, DeviceLive>;
+  /** 최근 30분 GPU 평균 사용률(시점별 device 평균). */
+  trend: number[];
+}
+
+/** 지표 한 줄 — 목업의 좌 라벨 / 우 값 정의행. */
+function MetricRow({ label, value, hint }: { label: string; value: string; hint?: string }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1.5">
+      <span className="shrink-0 text-muted-foreground text-sm">{label}</span>
+      <span className="min-w-0 truncate text-right font-medium text-sm tabular-nums">
+        {value}
+        {hint ? <span className="ml-1.5 font-normal text-muted-foreground text-xs">{hint}</span> : null}
+      </span>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: CellStatus }) {
+  const meta = STATUS_META[status];
+  return (
+    <Badge
+      variant="outline"
+      className="text-[10px]"
+      style={{ color: meta.color, borderColor: meta.color }}
+    >
+      {meta.label}
+    </Badge>
+  );
+}
+
+export default function NodeGpuPanel({
+  instance,
+  cells,
+  statusOf,
+  alerts,
+  events,
+  onOpenDetail,
+}: NodeGpuPanelProps) {
+  // 7,000셀 전량 스캔은 instance/cells 가 바뀔 때만.
+  const nodeCells = useMemo(
+    () => (instance ? cells.filter((c) => c.instance === instance) : []),
+    [cells, instance],
+  );
+
+  const counts = useMemo(() => {
+    const out: Record<CellStatus, number> = {
+      normal: 0,
+      degraded: 0,
+      fault: 0,
+      isolated: 0,
+      recovering: 0,
+    };
+    for (const c of nodeCells) out[statusOf?.(c) ?? 'normal'] += 1;
+    return out;
+  }, [nodeCells, statusOf]);
+
+  const nodeStatus = STATUS_ORDER.find((s) => counts[s] > 0) ?? 'normal';
+  const head = nodeCells[0];
+
+  const query = usePolledQuery<NodeLive | null>(
+    async () => {
+      if (!instance) return null;
+      const end = Math.floor(Date.now() / 1000);
+      const [utilRes, tempRes, powerRes, memUsedRes, memTotalRes, trendRes] = await Promise.all([
+        api.instantQuery(selector(METRIC_GPU_UTIL, { instance })),
+        api.instantQuery(selector(METRIC_GPU_TEMP, { instance })),
+        api.instantQuery(selector(METRIC_GPU_POWER, { instance })),
+        api.instantQuery(selector(METRIC_GPU_MEM_USED, { instance })),
+        api.instantQuery(selector(METRIC_GPU_MEM_TOTAL, { instance })),
+        api.rangeQuery(
+          selector(METRIC_GPU_UTIL, { instance }),
+          end - TREND_SEC,
+          end,
+          TREND_STEP,
+        ),
+      ]);
+
+      // device 라벨 기준 5메트릭 join — 결측 시리즈는 null 로 남긴다.
+      const devices = new Map<string, DeviceLive>();
+      const rowOf = (device: string): DeviceLive => {
+        let row = devices.get(device);
+        if (!row) {
+          row = { device, util: null, temp: null, power: null, memUsed: null, memTotal: null };
+          devices.set(device, row);
+        }
+        return row;
+      };
+      const fill = (samples: InstantSample[], assign: (r: DeviceLive, v: number | null) => void) => {
+        for (const s of samples) assign(rowOf(s.metric.device ?? 'default'), sampleValue(s));
+      };
+      fill(utilRes.data.result, (r, v) => {
+        r.util = v;
+      });
+      fill(tempRes.data.result, (r, v) => {
+        r.temp = v;
+      });
+      fill(powerRes.data.result, (r, v) => {
+        r.power = v;
+      });
+      fill(memUsedRes.data.result, (r, v) => {
+        r.memUsed = v;
+      });
+      fill(memTotalRes.data.result, (r, v) => {
+        r.memTotal = v;
+      });
+
+      // 추이는 device 시리즈 8개를 시점 단위로 평균낸다 — 시리즈마다 표본
+      // 개수가 다를 수 있으므로 인덱스가 아니라 타임스탬프로 묶는다.
+      const buckets = new Map<number, { sum: number; n: number }>();
+      for (const series of trendRes.data.result) {
+        for (const [ts, raw] of series.values) {
+          const v = Number(raw);
+          if (!Number.isFinite(v)) continue;
+          const b = buckets.get(ts);
+          if (b) {
+            b.sum += v;
+            b.n += 1;
+          } else {
+            buckets.set(ts, { sum: v, n: 1 });
+          }
+        }
+      }
+      const trend = [...buckets.entries()]
+        .sort((a, b) => a[0] - b[0])
+        .map(([, b]) => b.sum / b.n);
+
+      return { instance, devices, trend };
+    },
+    POLL_MS,
+    [instance],
+  );
+
+  // 노드 전환 직후 이전 노드 결과를 새 헤더 아래 보이지 않게 — 불일치는 로딩 취급.
+  const live = query.data && query.data.instance === instance ? query.data : null;
+
+  // 노드 롤업 — 실시간 표본이 오기 전에는 셀의 사용률로 버틴다.
+  const rollup = useMemo(() => {
+    const rows = live ? [...live.devices.values()] : [];
+    const avg = (vs: (number | null)[]) => {
+      const ok = vs.filter((v): v is number => v != null);
+      return ok.length > 0 ? ok.reduce((s, v) => s + v, 0) / ok.length : null;
+    };
+    const sum = (vs: (number | null)[]) => {
+      const ok = vs.filter((v): v is number => v != null);
+      return ok.length > 0 ? ok.reduce((s, v) => s + v, 0) : null;
+    };
+    const memUsed = sum(rows.map((r) => r.memUsed));
+    const memTotal = sum(rows.map((r) => r.memTotal));
+    const cellAvg =
+      nodeCells.length > 0 ? nodeCells.reduce((s, c) => s + c.util, 0) / nodeCells.length : null;
+    return {
+      util: avg(rows.map((r) => r.util)) ?? cellAvg,
+      temp: avg(rows.map((r) => r.temp)),
+      power: sum(rows.map((r) => r.power)),
+      memPct: memUsed != null && memTotal ? (memUsed / memTotal) * 100 : null,
+    };
+  }, [live, nodeCells]);
+
+  const workloads = useMemo(() => {
+    const out = new Map<string, { pool: string; tenant: string; workload: string; count: number }>();
+    for (const c of nodeCells) {
+      const key = `${c.pool}|${c.tenant}|${c.workload}`;
+      const row = out.get(key);
+      if (row) row.count += 1;
+      else out.set(key, { pool: c.pool, tenant: c.tenant, workload: c.workload, count: 1 });
+    }
+    return [...out.values()].sort((a, b) => b.count - a.count);
+  }, [nodeCells]);
+
+  const feed = useMemo(() => {
+    if (!instance) return [];
+    const fromAlerts = (alerts ?? [])
+      .filter((a) => a.instance === instance)
+      .map((a) => ({
+        key: `a${a.id}-${a.at}`,
+        at: a.at,
+        color: SEVERITY_COLOR[a.severity],
+        title: a.title,
+        sub: [a.code, a.device, a.detail].filter(Boolean).join(' · '),
+      }));
+    const fromEvents = (events ?? [])
+      .filter((e) => e.node === instance)
+      .map((e, i) => ({
+        key: `e${e.at}-${i}`,
+        at: e.at,
+        color: e.type === 'Warning' ? METRIC_COLORS.thermal : METRIC_COLORS.cpu,
+        title: e.reason,
+        sub: [e.object, e.message].filter(Boolean).join(' · '),
+      }));
+    return [...fromAlerts, ...fromEvents].sort((a, b) => b.at - a.at).slice(0, MAX_FEED);
+  }, [alerts, events, instance]);
+
+  if (!instance) {
+    return (
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="text-base">노드 상세</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="py-8 text-center text-muted-foreground text-sm">
+            토폴로지에서 노드를 선택하면 실시간 상태가 여기 표시된다.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const loading = live === null && nodeCells.length === 0;
+  const statusHint = feed[0] ? relTime(feed[0].at) : undefined;
+
+  // 상태 분해 문구 — 0인 분류는 지운다("정상 6 / 장애 1 / 격리 1").
+  const breakdown = STATUS_ORDER.filter((s) => counts[s] > 0)
+    .map((s) => `${STATUS_META[s].label} ${counts[s]}`)
+    .join(' / ');
+
+  return (
+    <Card className="flex h-full min-h-0 flex-col">
+      <CardHeader className="gap-1 pb-3">
+        <div className="flex items-center gap-2">
+          <CardTitle className="min-w-0 flex-1 truncate font-mono text-base" title={instance}>
+            {instance}
+          </CardTitle>
+          <StatusBadge status={nodeStatus} />
+        </div>
+        <CardDescription className="truncate">
+          {[head?.cluster, head?.nodePool].filter(Boolean).join(' / ') || '구성 정보 조회 중…'}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="flex min-h-0 flex-1 flex-col">
+        <Tabs defaultValue="overview" className="flex min-h-0 flex-1 flex-col">
+          <TabsList className="w-full">
+            <TabsTrigger value="overview">개요</TabsTrigger>
+            <TabsTrigger value="gpu">GPU</TabsTrigger>
+            <TabsTrigger value="workload">워크로드</TabsTrigger>
+            <TabsTrigger value="events">이벤트</TabsTrigger>
+          </TabsList>
+
+          {/* ---- 개요 ---- */}
+          <TabsContent value="overview" className="min-h-0 overflow-y-auto pt-2">
+            {loading ? (
+              <div className="flex flex-col gap-2">
+                <Skeleton className="h-6 w-full" />
+                <Skeleton className="h-6 w-full" />
+                <Skeleton className="h-6 w-full" />
+                <Skeleton className="h-14 w-full" />
+              </div>
+            ) : (
+              <>
+                <dl className="divide-y divide-border">
+                  <MetricRow
+                    label="GPU"
+                    value={`${formatCount(nodeCells.length)}장`}
+                    hint={breakdown ? `(${breakdown})` : undefined}
+                  />
+                  <MetricRow
+                    label="상태"
+                    value={STATUS_META[nodeStatus].label}
+                    hint={statusHint}
+                  />
+                  <MetricRow label="GPU 평균 사용률" value={formatPct(rollup.util, 0)} />
+                  <MetricRow label="GPU 메모리" value={formatPct(rollup.memPct, 0)} />
+                  <MetricRow label="온도 평균" value={formatCelsius(rollup.temp)} />
+                  <MetricRow label="전력 합계" value={formatWatts(rollup.power)} />
+                </dl>
+
+                <div className="mt-3">
+                  <p className="mb-1 text-[11px] text-muted-foreground">
+                    최근 30분 GPU 평균 사용률
+                  </p>
+                  <Sparkline values={live?.trend ?? []} color={METRIC_COLORS.gpu} height={40} />
+                </div>
+
+                {onOpenDetail ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-3 w-full"
+                    onClick={() => onOpenDetail(instance)}
+                  >
+                    상세 보기 →
+                  </Button>
+                ) : null}
+              </>
+            )}
+          </TabsContent>
+
+          {/* ---- GPU ---- */}
+          <TabsContent value="gpu" className="min-h-0 overflow-y-auto pt-2">
+            {nodeCells.length === 0 ? (
+              live === null ? (
+                <Skeleton className="h-40 w-full" />
+              ) : (
+                <p className="py-6 text-center text-muted-foreground text-sm">
+                  이 노드의 GPU 시리즈가 없다.
+                </p>
+              )
+            ) : (
+              <ul className="flex flex-col gap-1.5">
+                {nodeCells.map((c) => {
+                  const l = live?.devices.get(c.device);
+                  const util = l?.util ?? c.util;
+                  const band = bandForUtil(util);
+                  const status = statusOf?.(c) ?? 'normal';
+                  return (
+                    <li
+                      key={c.uuid || c.device}
+                      className="flex items-center gap-3 rounded-md border bg-card p-2"
+                    >
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate font-medium font-mono text-xs">{c.device}</p>
+                        <p className="truncate text-[11px] text-muted-foreground">
+                          {shortModel(c.model) || '—'}
+                          {l?.temp != null ? ` · ${formatCelsius(l.temp)}` : ''}
+                        </p>
+                      </div>
+                      <div className="w-24 shrink-0">
+                        <div className="mb-1 text-right text-[11px] font-medium tabular-nums">
+                          {formatPct(util, 0)}
+                        </div>
+                        <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                          <div
+                            className="h-full rounded-full"
+                            style={{
+                              width: `${Math.max(Math.min(util, 100), 1)}%`,
+                              backgroundColor: `var(--util-band-${band.index})`,
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <StatusBadge status={status} />
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </TabsContent>
+
+          {/* ---- 워크로드 ---- */}
+          <TabsContent value="workload" className="min-h-0 overflow-y-auto pt-2">
+            {workloads.length === 0 ? (
+              <p className="py-6 text-center text-muted-foreground text-sm">
+                이 노드의 워크로드 정보가 없다.
+              </p>
+            ) : (
+              <ul className="flex flex-col gap-1.5">
+                {workloads.map((w) => (
+                  <li
+                    key={`${w.pool}|${w.tenant}|${w.workload}`}
+                    className="flex items-center gap-3 rounded-md border bg-card p-2"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium text-sm">{w.pool || '미할당'}</p>
+                      <p className="truncate text-[11px] text-muted-foreground">
+                        {w.tenant || '테넌트 없음'}
+                      </p>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className="shrink-0 text-[10px]"
+                      style={
+                        w.workload
+                          ? {
+                              color: METRIC_COLORS.gpu,
+                              borderColor: METRIC_COLORS.gpu,
+                            }
+                          : undefined
+                      }
+                    >
+                      {WORKLOAD_LABEL[w.workload] ?? '미할당'}
+                    </Badge>
+                    <span className="shrink-0 font-medium text-sm tabular-nums">
+                      {formatCount(w.count)}장
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </TabsContent>
+
+          {/* ---- 이벤트 ---- */}
+          <TabsContent value="events" className="min-h-0 overflow-y-auto pt-2">
+            {feed.length === 0 ? (
+              <p className="py-6 text-center text-muted-foreground text-sm">
+                이 노드 관련 이벤트 없음
+              </p>
+            ) : (
+              <ol className="pr-1">
+                {feed.map((item) => (
+                  <li key={item.key} className="relative ml-1.5 border-border border-l pb-3 pl-4 last:pb-0">
+                    <span
+                      className="absolute top-1 -left-[5px] size-2.5 rounded-full ring-2 ring-card"
+                      style={{ backgroundColor: item.color }}
+                    />
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-[11px] text-muted-foreground tabular-nums">
+                        {new Date(item.at).toLocaleTimeString('ko-KR')}
+                      </span>
+                      <span className="text-[11px] text-muted-foreground">{relTime(item.at)}</span>
+                    </div>
+                    <p className="text-sm">{item.title}</p>
+                    {item.sub ? (
+                      <p className="break-all text-[11px] text-muted-foreground">{item.sub}</p>
+                    ) : null}
+                  </li>
+                ))}
+              </ol>
+            )}
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/RemediationStepper.tsx b/web/src/components/gpu/RemediationStepper.tsx
new file mode 100644
index 0000000..aa8a732
--- /dev/null
+++ b/web/src/components/gpu/RemediationStepper.tsx
@@ -0,0 +1,170 @@
+// RemediationStepper — Cordon → Graceful Drain → Taint 가로 번호 스테퍼.
+// 형태는 목업 demo5 의 4단 스테퍼(번호 원 + 연결선 + 하단 라벨·상태)를 그대로
+// 따른다 — 같은 제품으로 보이려면 스테퍼 어휘가 화면마다 달라선 안 된다.
+// 단계 상태는 서버 스냅샷(DrainState.steps)이 SSOT — GpuLayout 폴링(진행 장면
+// 2s)이 갱신하면 그대로 다시 그린다. drain 단계가 pending 이 아니면 파드 퇴거
+// Progress + in-flight 대형 카운터 + "드롭된 요청 0건" 배지를 함께 보인다.
+import { Check } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import type { DrainState, StepState } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+export interface RemediationStepperProps {
+  drain: DrainState;
+}
+
+// 승인 전(steps 미생성 — Go nil 이 [] 로 정규화됨)에도 파이프라인 형태를
+// 미리 보여주기 위한 로컬 기본 3단.
+const FALLBACK_STEPS: StepState[] = [
+  { key: 'cordon', label: 'Cordon — 신규 스케줄 차단', status: 'pending' },
+  { key: 'drain', label: 'Graceful Drain — 파드 안전 퇴거', status: 'pending' },
+  { key: 'taint', label: 'Taint — 재스케줄 방지', status: 'pending' },
+];
+
+const STATUS_TEXT: Record<StepState['status'], string> = {
+  done: '완료',
+  running: '진행 중',
+  pending: '대기',
+};
+
+// 번호 원 — done=초록 체크 / running=파랑 번호(펄스 링) / pending=회색 번호.
+function StepCircle({ status, index }: { status: StepState['status']; index: number }) {
+  if (status === 'done') {
+    return (
+      <span
+        className="flex size-9 shrink-0 items-center justify-center rounded-full"
+        style={{ backgroundColor: 'var(--metric-pod)' }}
+      >
+        <Check className="size-5 text-white" aria-label="완료" />
+      </span>
+    );
+  }
+  if (status === 'running') {
+    return (
+      <span
+        className="flex size-9 shrink-0 animate-pulse items-center justify-center rounded-full font-semibold text-sm text-white"
+        style={{
+          backgroundColor: 'var(--metric-cpu)',
+          boxShadow: '0 0 0 4px color-mix(in srgb, var(--metric-cpu) 18%, transparent)',
+        }}
+      >
+        {index + 1}
+      </span>
+    );
+  }
+  return (
+    <span className="flex size-9 shrink-0 items-center justify-center rounded-full border bg-muted font-semibold text-muted-foreground text-sm">
+      {index + 1}
+    </span>
+  );
+}
+
+function DrainDetail({ drain }: { drain: DrainState }) {
+  const evictedPct = drain.podsTotal > 0 ? (drain.podsEvicted / drain.podsTotal) * 100 : 0;
+  return (
+    <div className="flex flex-col gap-3 rounded-md border bg-muted/40 p-3">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center justify-between text-muted-foreground text-xs">
+          <span>파드 퇴거</span>
+          <span className="tabular-nums">
+            {formatCount(drain.podsEvicted)}/{formatCount(drain.podsTotal)}
+          </span>
+        </div>
+        <Progress value={evictedPct} />
+      </div>
+      <div className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-muted-foreground text-xs">in-flight 추론 요청</span>
+          <span className="font-bold text-3xl leading-none tabular-nums">
+            {formatCount(drain.inflight)}
+          </span>
+          <span className="text-[11px] text-muted-foreground">
+            시작 {formatCount(drain.inflightTotal)}건 → 0 으로 감소
+          </span>
+        </div>
+        {drain.droppedRequests === 0 ? (
+          <Badge className="text-white" style={{ backgroundColor: 'var(--metric-pod)' }}>
+            드롭된 요청 0건
+          </Badge>
+        ) : (
+          <Badge variant="destructive">드롭된 요청 {formatCount(drain.droppedRequests)}건</Badge>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function RemediationStepper({ drain }: RemediationStepperProps) {
+  const steps = drain.steps.length > 0 ? drain.steps : FALLBACK_STEPS;
+  const drainStep = steps.find((s) => s.key === 'drain');
+  return (
+    <div className="flex flex-col gap-5">
+      <ol className="flex items-start">
+        {steps.map((step, index) => {
+          // "Cordon — 신규 워크로드 차단" → 제목/설명 분리(목업 라벨은 짧다).
+          const [head, ...rest] = step.label.split(' — ');
+          const desc = rest.join(' — ');
+          const prevDone = index > 0 && steps[index - 1]?.status === 'done';
+          return (
+            <li key={step.key} className="flex flex-1 flex-col items-center gap-2">
+              <div className="flex w-full items-center">
+                <span
+                  className="h-px flex-1"
+                  style={{
+                    backgroundColor:
+                      index === 0
+                        ? 'transparent'
+                        : prevDone
+                          ? 'var(--metric-pod)'
+                          : 'var(--border)',
+                  }}
+                />
+                <StepCircle status={step.status} index={index} />
+                <span
+                  className="h-px flex-1"
+                  style={{
+                    backgroundColor:
+                      index === steps.length - 1
+                        ? 'transparent'
+                        : step.status === 'done'
+                          ? 'var(--metric-pod)'
+                          : 'var(--border)',
+                  }}
+                />
+              </div>
+              <span
+                className={
+                  step.status === 'pending'
+                    ? 'text-center text-muted-foreground text-sm'
+                    : 'text-center font-medium text-sm'
+                }
+              >
+                {head}
+              </span>
+              {desc ? (
+                <span className="text-center text-[11px] text-muted-foreground leading-snug">
+                  {desc}
+                </span>
+              ) : null}
+              <Badge
+                variant={step.status === 'pending' ? 'outline' : 'secondary'}
+                className="text-[10px]"
+                style={
+                  step.status === 'pending'
+                    ? undefined
+                    : {
+                        color: step.status === 'done' ? 'var(--metric-pod)' : 'var(--metric-cpu)',
+                      }
+                }
+              >
+                {STATUS_TEXT[step.status]}
+              </Badge>
+            </li>
+          );
+        })}
+      </ol>
+      {drainStep && drainStep.status !== 'pending' ? <DrainDetail drain={drain} /> : null}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/ReuseStepper.tsx b/web/src/components/gpu/ReuseStepper.tsx
new file mode 100644
index 0000000..3918a5d
--- /dev/null
+++ b/web/src/components/gpu/ReuseStepper.tsx
@@ -0,0 +1,77 @@
+// ReuseStepper — 재사용 검증 4단계(사전검증 → 번인 테스트 → 가용성 판정 →
+// 재투입) 번호 스테퍼. 번호 원 + 사이 연결선 + 아래 라벨/힌트 구성이다.
+//
+// 관문 다이어그램(GateDiagram)과 축이 다르다: 저쪽은 "통과 여부"(K8s Ready →
+// 검증 관문 → 운영 풀)이고 이쪽은 "절차 진행"이다. 다만 상태 어휘는 같은 4종
+// (GateStageStatus)을 그대로 쓴다 — 새 상태 이름을 만들지 않는다. 분류는 서버
+// (ReuseStep.status)가 하고 이 컴포넌트는 렌더만 한다.
+import type { CSSProperties } from 'react';
+import type { GateStageStatus } from '@/components/gpu/GateDiagram';
+import { cn } from '@/lib/utils';
+
+export interface ReuseStepperStep {
+  id: string;
+  label: string;
+  status: GateStageStatus;
+  hint?: string;
+}
+
+export interface ReuseStepperProps {
+  steps: ReuseStepperStep[];
+}
+
+const STEP_STYLE: Record<GateStageStatus, { circle: string; style?: CSSProperties }> = {
+  done: {
+    circle: 'text-white',
+    style: { backgroundColor: 'var(--metric-pod)', borderColor: 'var(--metric-pod)' },
+  },
+  active: { circle: 'border-primary bg-primary text-primary-foreground' },
+  blocked: {
+    circle: '',
+    style: { color: 'var(--metric-fault)', borderColor: 'var(--metric-fault)' },
+  },
+  idle: { circle: 'border-border text-muted-foreground' },
+};
+
+const LABEL_STYLE: Record<GateStageStatus, { className: string; style?: CSSProperties }> = {
+  done: { className: '', style: { color: 'var(--metric-pod)' } },
+  active: { className: 'text-primary' },
+  blocked: { className: '', style: { color: 'var(--metric-fault)' } },
+  idle: { className: 'text-muted-foreground' },
+};
+
+export default function ReuseStepper({ steps }: ReuseStepperProps) {
+  return (
+    <div className="flex items-start">
+      {steps.map((step, index) => {
+        const circle = STEP_STYLE[step.status];
+        const label = LABEL_STYLE[step.status];
+        return (
+          <div key={step.id} className="contents">
+            {index > 0 ? <div className="mt-4 h-px min-w-4 flex-1 bg-border" /> : null}
+            <div className="flex w-24 flex-col items-center gap-1.5 sm:w-36">
+              <span
+                className={cn(
+                  'flex size-8 items-center justify-center rounded-full border-2 font-semibold text-sm tabular-nums',
+                  circle.circle,
+                )}
+                style={circle.style}
+              >
+                {index + 1}
+              </span>
+              <span
+                className={cn('text-center font-medium text-xs', label.className)}
+                style={label.style}
+              >
+                {step.label}
+              </span>
+              {step.hint ? (
+                <span className="text-center text-[11px] text-muted-foreground">{step.hint}</span>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/ScoringFunnel.tsx b/web/src/components/gpu/ScoringFunnel.tsx
new file mode 100644
index 0000000..36cf989
--- /dev/null
+++ b/web/src/components/gpu/ScoringFunnel.tsx
@@ -0,0 +1,432 @@
+// ScoringFunnel — Step 3 "지능형 워크로드 스케줄링" 인터랙티브 배치 후보 계산기.
+// Phase 3 비전 화면이지만 숫자는 전부 라이브 플릿(useFleet 셀)에서 계산한다 —
+// 신규 API 호출·폴링 없이 부모가 넘긴 셀 스냅샷만 쓴다(계산은 버튼 클릭 시 1회).
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Slider } from '@/components/ui/slider';
+import type { FleetCell } from '@/hooks/useFleet';
+import { formatCount, formatPct } from '@/lib/gpuMetrics';
+
+// 워크로드 유형별 "여유 GPU" 판정 상한 — 학습은 전용 점유가 필요해 사실상
+// 유휴만, 배치는 틈새 활용을 허용한다. 선택이 결과를 실제로 바꾸는 축이다.
+export interface WorkloadKind {
+  id: 'inference' | 'training' | 'batch';
+  label: string;
+  freeUtilMax: number;
+  note: string;
+}
+
+const WORKLOADS: readonly WorkloadKind[] = [
+  { id: 'inference', label: '추론', freeUtilMax: 40, note: '버스트 여유 확보' },
+  { id: 'training', label: '학습', freeUtilMax: 10, note: '전용 점유 — 유휴만' },
+  { id: 'batch', label: '배치', freeUtilMax: 60, note: '틈새 활용 허용' },
+] as const;
+
+const MIN_GPUS = 1;
+const MAX_GPUS = 16;
+const FUNNEL_WIDTHS = ['100%', '85%', '70%', '55%'] as const;
+
+// 점수 가중치 — 여유도 60 / 동일 노드 집적도 25 / 풀 격리 15 (합 100).
+const W_HEADROOM = 0.6;
+const W_DENSITY = 0.25;
+const W_ISOLATION = 0.15;
+
+// 후보 막대 색 — Tailwind JIT 이 스캔할 수 있도록 리터럴 클래스로 둔다
+// (Progress 는 indicator 스타일 prop 이 없어 arbitrary variant 로 칠한다).
+const CANDIDATE_BAR = [
+  'h-2 [&_[data-slot=progress-indicator]]:bg-[var(--metric-pod)]',
+  'h-2 [&_[data-slot=progress-indicator]]:bg-[var(--metric-thermal)]',
+] as const;
+
+interface NodeCandidate {
+  instance: string;
+  cluster: string;
+  pool: string;
+  /** 요청 모델 중 여유 판정을 통과한 GPU 수 */
+  freeCount: number;
+  /** 요청 모델과 일치하는 이 노드의 전체 GPU 수 */
+  matchCount: number;
+  /** 여유 GPU 평균 사용률(%) */
+  avgUtil: number;
+  headroom: number;
+  density: number;
+  isolation: number;
+  score: number;
+}
+
+interface FunnelCounts {
+  total: number;
+  modelMatch: number;
+  freeNodes: number;
+  afterExclusion: number;
+}
+
+interface PlanResult {
+  model: string;
+  need: number;
+  workload: WorkloadKind;
+  computedAt: number;
+  funnel: FunnelCounts;
+  candidates: NodeCandidate[];
+}
+
+/** 여유 GPU 중 가장 많은 풀을 노드 대표 풀로 삼는다(표시 전용). */
+function dominantPool(list: FleetCell[]): string {
+  const counts = new Map<string, number>();
+  for (const c of list) counts.set(c.pool, (counts.get(c.pool) ?? 0) + 1);
+  let best = '';
+  let bestCount = -1;
+  for (const [pool, n] of counts) {
+    if (n > bestCount) {
+      best = pool;
+      bestCount = n;
+    }
+  }
+  return best;
+}
+
+/** 배치 후보 계산 — 노드(instance) 단위로 묶어 요청 모델·여유 장수를 만족하는
+ *  노드를 고르고, 장애·온도이상 GPU 를 하나라도 가진 노드는 통째로 제외한다. */
+function computePlan(
+  cells: FleetCell[],
+  excludedUuids: ReadonlySet<string>,
+  model: string,
+  need: number,
+  workload: WorkloadKind,
+): PlanResult {
+  const matching = cells.filter((c) => c.model === model);
+
+  const byNode = new Map<string, FleetCell[]>();
+  for (const c of matching) {
+    const list = byNode.get(c.instance);
+    if (list) list.push(c);
+    else byNode.set(c.instance, [c]);
+  }
+
+  // 제외 노드는 모델 무관 전수에서 판정한다 — 같은 노드의 다른 GPU 가 장애여도
+  // 그 노드는 배치 대상이 아니다.
+  const excludedNodes = new Set<string>();
+  for (const c of cells) {
+    if (excludedUuids.has(c.uuid)) excludedNodes.add(c.instance);
+  }
+
+  let freeNodes = 0;
+  const candidates: NodeCandidate[] = [];
+
+  for (const [instance, list] of byNode) {
+    const free = list.filter((c) => c.util < workload.freeUtilMax);
+    // 단일 노드 전량 충족만 후보로 치면 가동률 높은 플릿에서 후보가 상시 0 이
+    // 된다(8장을 한 노드에서 동시에 비우는 확률은 극히 낮다) — 실 스케줄러처럼
+    // 부분 수용 노드도 후보로 두고, 집적도 점수가 단일 노드 충족을 선호하게 한다.
+    if (free.length === 0) continue;
+    freeNodes += 1;
+    if (excludedNodes.has(instance)) continue;
+
+    const avgUtil = free.reduce((sum, c) => sum + c.util, 0) / free.length;
+    const headroom = Math.max(0, Math.min(100, 100 - avgUtil));
+    // 요청 장수를 단일 노드에서 전부 채우면 만점, 부족하면 비례 감점.
+    const density = Math.min(100, (free.length / need) * 100);
+    const isolation = (free.filter((c) => c.pool === '').length / free.length) * 100;
+    const score = W_HEADROOM * headroom + W_DENSITY * density + W_ISOLATION * isolation;
+
+    candidates.push({
+      instance,
+      cluster: free[0]?.cluster ?? '',
+      pool: dominantPool(free),
+      freeCount: free.length,
+      matchCount: list.length,
+      avgUtil,
+      headroom,
+      density,
+      isolation,
+      score,
+    });
+  }
+
+  candidates.sort((a, b) => b.score - a.score || a.instance.localeCompare(b.instance));
+
+  return {
+    model,
+    need,
+    workload,
+    computedAt: Date.now(),
+    funnel: {
+      total: cells.length,
+      modelMatch: matching.length,
+      freeNodes,
+      afterExclusion: candidates.length,
+    },
+    candidates: candidates.slice(0, 2),
+  };
+}
+
+function FunnelBox({
+  width,
+  label,
+  value,
+  hint,
+}: {
+  width: string;
+  label: string;
+  value: string;
+  hint?: string;
+}) {
+  return (
+    <div
+      className="flex flex-col items-center gap-0.5 rounded-md border bg-muted/60 px-3 py-1.5 text-center"
+      style={{ width }}
+    >
+      <span className="text-xs">
+        {label} <span className="font-semibold tabular-nums">{value}</span>
+      </span>
+      {hint ? <span className="text-[10px] text-muted-foreground">{hint}</span> : null}
+    </div>
+  );
+}
+
+function CandidateRow({
+  candidate,
+  rank,
+  need,
+}: {
+  candidate: NodeCandidate;
+  rank: 0 | 1;
+  need: number;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <span className="text-sm">
+          Candidate {rank === 0 ? 'A' : 'B'} — 매칭률{' '}
+          <span className="font-semibold tabular-nums">{Math.round(candidate.score)}%</span>
+        </span>
+        <div className="flex items-center gap-1.5">
+          {candidate.freeCount >= need ? (
+            <Badge variant="outline" style={{ borderColor: 'var(--metric-pod)', color: 'var(--metric-pod)' }}>
+              단일 노드 충족
+            </Badge>
+          ) : (
+            <Badge
+              variant="outline"
+              style={{ borderColor: 'var(--metric-thermal)', color: 'var(--metric-thermal)' }}
+            >
+              분산 배치 필요
+            </Badge>
+          )}
+          <Badge variant={rank === 0 ? 'default' : 'outline'}>
+            {rank === 0 ? '최적 배치안' : '대체 추천'}
+          </Badge>
+        </div>
+      </div>
+      <Progress value={Math.round(candidate.score)} className={CANDIDATE_BAR[rank]} />
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-muted-foreground text-xs">
+        <span className="font-mono text-foreground">{candidate.instance}</span>
+        <span>클러스터 {candidate.cluster || '—'}</span>
+        <span>
+          여유 GPU {candidate.freeCount}장 (동일 모델 {candidate.matchCount}장) / 요청 {need}장
+        </span>
+        <span>평균 사용률 {formatPct(candidate.avgUtil)}</span>
+        <span>풀 {candidate.pool || '미배정'}</span>
+      </div>
+      <p className="text-[10px] text-muted-foreground tabular-nums">
+        점수 분해 — 여유도 {Math.round(candidate.headroom)} × 60% · 집적도{' '}
+        {Math.round(candidate.density)} × 25% · 풀 격리 {Math.round(candidate.isolation)} × 15%
+      </p>
+    </div>
+  );
+}
+
+export interface ScoringFunnelProps {
+  /** useFleet 셀 스냅샷 — null 이면 아직 로딩 중이다. */
+  cells: FleetCell[] | null;
+  /** 요청 가능한 GPU 모델 목록(데모 fleet.models 또는 셀 파생). */
+  models: string[];
+  /** 장애·온도이상 GPU uuid — 이 uuid 를 가진 노드는 후보에서 제외한다. */
+  excludedUuids: ReadonlySet<string>;
+}
+
+export default function ScoringFunnel({ cells, models, excludedUuids }: ScoringFunnelProps) {
+  const [modelChoice, setModelChoice] = useState<string>('');
+  const [need, setNeed] = useState<number>(2);
+  const [workloadId, setWorkloadId] = useState<WorkloadKind['id']>('inference');
+  const [plan, setPlan] = useState<PlanResult | null>(null);
+
+  // 모델 목록은 비동기로 채워지므로 state 기본값 대신 파생값으로 첫 항목을 쓴다
+  // (useEffect 동기화 불필요).
+  const activeModel = modelChoice || models[0] || '';
+  const workload = WORKLOADS.find((w) => w.id === workloadId) ?? WORKLOADS[0];
+  const ready = cells !== null && cells.length > 0 && activeModel !== '';
+
+  function onCalculate() {
+    if (!cells || activeModel === '') return;
+    setPlan(computePlan(cells, excludedUuids, activeModel, need, workload));
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <Badge variant="outline" className="w-fit">
+          Phase 3 · 2027 비전
+        </Badge>
+        <CardTitle>지능형 워크로드 스케줄링</CardTitle>
+        <CardDescription>
+          요청 조건을 입력하면 현재 플릿에서 배치 후보 노드를 실제로 계산한다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {/* 요청 폼 */}
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="scoring-model">GPU 모델</Label>
+            <Select
+              value={activeModel}
+              onValueChange={setModelChoice}
+              disabled={models.length === 0}
+            >
+              <SelectTrigger id="scoring-model" className="w-full">
+                <SelectValue placeholder="모델 목록 불러오는 중…" />
+              </SelectTrigger>
+              <SelectContent>
+                {models.map((m) => (
+                  <SelectItem key={m} value={m}>
+                    {m}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="scoring-workload">워크로드 유형</Label>
+            <Select
+              value={workloadId}
+              onValueChange={(v) => setWorkloadId(v as WorkloadKind['id'])}
+            >
+              <SelectTrigger id="scoring-workload" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {WORKLOADS.map((w) => (
+                  <SelectItem key={w.id} value={w.id}>
+                    {w.label} — {w.note}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-1.5 sm:col-span-2">
+            <Label htmlFor="scoring-need">
+              필요 장수 <span className="font-semibold tabular-nums">{need}장</span>
+            </Label>
+            <Slider
+              id="scoring-need"
+              min={MIN_GPUS}
+              max={MAX_GPUS}
+              step={1}
+              value={[need]}
+              onValueChange={(v) => setNeed(v[0] ?? MIN_GPUS)}
+              aria-label="필요 GPU 장수"
+            />
+            <div className="flex justify-between text-[10px] text-muted-foreground tabular-nums">
+              <span>{MIN_GPUS}장</span>
+              <span>{MAX_GPUS}장</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <Button onClick={onCalculate} disabled={!ready}>
+            배치 후보 계산
+          </Button>
+          <span className="text-muted-foreground text-xs">
+            {ready
+              ? `여유 판정 기준 — 사용률 ${workload.freeUtilMax}% 미만 (${workload.label})`
+              : '플릿 인벤토리를 불러오는 중이다.'}
+          </span>
+        </div>
+
+        <Separator />
+
+        {plan === null ? (
+          <p className="py-6 text-center text-muted-foreground text-sm">
+            요청을 입력하고 계산해 보세요.
+          </p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {/* 깔때기 — 계산 결과 숫자로 채운다 */}
+            <div className="flex flex-col items-center gap-1.5">
+              <FunnelBox
+                width={FUNNEL_WIDTHS[0]}
+                label="전체 GPU"
+                value={`${formatCount(plan.funnel.total)}장`}
+              />
+              <FunnelBox
+                width={FUNNEL_WIDTHS[1]}
+                label="모델 일치"
+                value={`${formatCount(plan.funnel.modelMatch)}장`}
+                hint={plan.model}
+              />
+              <FunnelBox
+                width={FUNNEL_WIDTHS[2]}
+                label="여유 보유 노드"
+                value={`${formatCount(plan.funnel.freeNodes)}개`}
+                hint={`사용률 ${plan.workload.freeUtilMax}% 미만 1장 이상`}
+              />
+              <FunnelBox
+                width={FUNNEL_WIDTHS[3]}
+                label="장애·격리 제외 후"
+                value={`${formatCount(plan.funnel.afterExclusion)}개`}
+                hint={`장애·온도이상 포함 노드 ${plan.funnel.freeNodes - plan.funnel.afterExclusion}개 제외`}
+              />
+            </div>
+
+            <Separator />
+
+            {/* 후보 */}
+            {plan.candidates.length === 0 ? (
+              <p className="py-4 text-center text-muted-foreground text-sm">
+                조건을 만족하는 노드가 없다 — 필요 장수를 줄이거나 다른 모델·워크로드 유형을
+                선택한다.
+              </p>
+            ) : (
+              <div className="flex flex-col gap-4">
+                {plan.candidates.map((c, index) => (
+                  <CandidateRow
+                    key={c.instance}
+                    candidate={c}
+                    rank={index === 0 ? 0 : 1}
+                    need={plan.need}
+                  />
+                ))}
+              </div>
+            )}
+
+            <p className="text-muted-foreground text-xs">
+              요청 {plan.model} {plan.need}장 · {plan.workload.label} — 라이브 플릿 기준 ·{' '}
+              {new Date(plan.computedAt).toLocaleTimeString('ko-KR')} 계산
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/SituationBoard.tsx b/web/src/components/gpu/SituationBoard.tsx
new file mode 100644
index 0000000..d586b73
--- /dev/null
+++ b/web/src/components/gpu/SituationBoard.tsx
@@ -0,0 +1,279 @@
+// SituationBoard — 통합 상황판의 뼈대. 숫자를 늘어놓는 대신 세 가지 질문에
+// 답하는 순서로 배치한다(사용자 지시 2026-07-27):
+//
+//   ① 지금 문제가 무엇인가  ② 어디까지 영향을 미치는가  ③ 지금 무엇을 해야 하는가
+//
+// 관제 화면이 실패하는 전형은 "지표는 다 있는데 무엇을 해야 할지 모르겠다"이다.
+// 그래서 헤드라인·영향 범위·다음 조치를 한 줄에 두고, 세부 분류(8영역)는 그
+// 아래에 조밀하게 깐다.
+import { ArrowRight, Radio } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import type { DemoAction, DemoState, ScenarioPhase, StatusCount } from '@/lib/demoApi';
+import { formatCount, formatMs, formatPct } from '@/lib/gpuMetrics';
+
+/** tone → 색 클래스. 라벨 문자열로 색을 추론하면 라벨이 바뀔 때 색이 깨진다. */
+const TONE_TEXT: Record<string, string> = {
+  ok: 'text-metric-pod',
+  info: 'text-metric-cpu',
+  warn: 'text-metric-thermal',
+  major: 'text-metric-thermal',
+  crit: 'text-metric-fault',
+  muted: 'text-muted-foreground',
+};
+
+const TONE_DOT: Record<string, string> = {
+  ok: 'bg-metric-pod',
+  info: 'bg-metric-cpu',
+  warn: 'bg-metric-thermal',
+  major: 'bg-metric-thermal',
+  crit: 'bg-metric-fault',
+  muted: 'bg-muted-foreground',
+};
+
+/** 단계별 (문제 / 조치 / 조치 액션). 조치 액션이 없으면 "대기 중"이라 버튼을
+ *  띄우지 않는다 — 누를 수 없는 버튼은 관제 화면에서 소음이다. */
+const PLAYBOOK: Record<
+  ScenarioPhase,
+  { problem: string; detail: string; todo: string; action?: DemoAction; actionLabel?: string }
+> = {
+  normal: {
+    problem: '진행 중인 무음 장애 없음',
+    detail: '상시 이상 신호만 관찰 중 — 자동 감지가 계속 돈다.',
+    todo: '조치 필요 없음',
+  },
+  degrading: {
+    problem: '무음 장애 진행 중',
+    detail: 'K8s 는 Ready 인데 GPU 가 열화 중이다 — 스케줄러는 계속 이 노드에 배치한다.',
+    todo: '감지 완료까지 대기 — 곧 승인 요청이 올라온다',
+  },
+  'awaiting-approval': {
+    problem: '격리 승인 대기',
+    detail: '자동복구가 근거를 모았고 운영자 승인만 남았다.',
+    todo: '격리를 승인하면 Cordon → Drain → Taint 가 순서대로 실행된다',
+    action: 'approve-isolation',
+    actionLabel: '격리 승인',
+  },
+  draining: {
+    problem: '격리 진행 중 (Graceful Drain)',
+    detail: '기존 요청을 흘려보내며 파드를 퇴거시키는 중 — 드롭 0건이 목표다.',
+    todo: '드레인 완료 대기',
+  },
+  replacing: {
+    problem: '노드 교체 중',
+    detail: '격리된 노드에서 불량 GPU 를 교체하는 중이다.',
+    todo: '교체 완료 후 번인 검증으로 넘어간다',
+  },
+  'burnin-1': {
+    problem: '번인 검증 1차 진행 중',
+    detail: '교체 GPU 를 부하로 달구며 재발 여부를 본다.',
+    todo: '검증 결과 대기',
+  },
+  'burnin-failed': {
+    problem: '번인 1차 실패 — 재검증 필요',
+    detail: 'Health Score 미달로 복귀가 보류됐다. 이대로 Uncordon 하면 장애가 재발한다.',
+    todo: '번인을 다시 실행해 재검증한다',
+    action: 'start-burnin',
+    actionLabel: '재번인 시작',
+  },
+  'burnin-2': {
+    problem: '번인 검증 2차 진행 중',
+    detail: '1차 실패 후 재검증 — 이번 결과로 복귀 여부가 갈린다.',
+    todo: '검증 결과 대기',
+  },
+  'ready-to-return': {
+    problem: '검증 통과 — 복귀 대기',
+    detail: 'Health Score 가 기준을 넘었다. 운영 풀 복귀만 남았다.',
+    todo: '운영 풀로 복귀시킨다',
+    action: 'return-to-service',
+    actionLabel: '운영 복귀',
+  },
+  returned: {
+    problem: '복구 완료',
+    detail: '노드가 운영 풀로 돌아갔다 — 다음 사이클을 관찰한다.',
+    todo: '조치 필요 없음',
+  },
+};
+
+function StatusStrip({ title, items }: { title: string; items: StatusCount[] }) {
+  const total = items.reduce((n, i) => n + i.count, 0);
+  return (
+    <Card className="gap-0 py-0">
+      <CardContent className="flex flex-col gap-2 p-3">
+        <div className="flex items-baseline justify-between gap-2">
+          <span className="text-xs font-medium text-muted-foreground">{title}</span>
+          <span className="text-[10px] tabular-nums text-muted-foreground">
+            합 {formatCount(total)}
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-x-3 gap-y-1.5">
+          {items.map((i) => (
+            <div key={i.key} className="flex min-w-[4.5rem] items-center gap-1.5">
+              <span className={`size-1.5 shrink-0 rounded-full ${TONE_DOT[i.tone] ?? ''}`} />
+              <span className="truncate text-[11px] text-muted-foreground">{i.label}</span>
+              <span className={`ml-auto text-sm font-semibold tabular-nums ${TONE_TEXT[i.tone] ?? ''}`}>
+                {formatCount(i.count)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export interface SituationBoardProps {
+  state: DemoState;
+  onAct: (action: DemoAction) => void;
+  acting: boolean;
+}
+
+export default function SituationBoard({ state, onAct, acting }: SituationBoardProps) {
+  const { dashboard, scenario, fleet, serving } = state;
+  const play = PLAYBOOK[scenario.phase];
+  const victim = scenario.victim;
+
+  // 영향 범위 — 정상이 아닌 것들의 합. 상황판 분류가 상호배타라 그냥 더하면 된다.
+  const impactedGpus = dashboard.gpus
+    .filter((g) => g.key !== 'normal')
+    .reduce((n, g) => n + g.count, 0);
+  const impactedNodes = dashboard.nodes
+    .filter((n) => n.key !== 'ready')
+    .reduce((n, x) => n + x.count, 0);
+
+  // 워크로드 영향 — victim 이 속한 서빙 풀의 현재 지연. "GPU 1장 문제"가
+  // "어느 서비스의 응답이 느려지는가"로 번역되는 지점이다.
+  const victimPool = serving.find((s) => s.pool === victim.pool) ?? null;
+  const region = fleet.regions.find((r) => r.csp === victim.csp);
+
+  const critical = dashboard.alerts.find((a) => a.key === 'critical')?.count ?? 0;
+  const acute = scenario.phase !== 'normal' && scenario.phase !== 'returned';
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* ①②③ — 한 줄에 문제·영향·조치 */}
+      <Card className={acute ? 'gap-0 border-metric-fault/40 py-0' : 'gap-0 py-0'}>
+        <CardContent className="grid gap-4 p-4 lg:grid-cols-[1.1fr_1.2fr_0.9fr]">
+          {/* ① 지금 문제 */}
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-1.5">
+              <Radio
+                className={`size-3.5 ${acute ? 'animate-pulse text-metric-fault' : 'text-metric-pod'}`}
+              />
+              <span className="text-[11px] font-medium tracking-wide text-muted-foreground">
+                지금 문제
+              </span>
+            </div>
+            <p className="text-lg font-semibold leading-tight">{play.problem}</p>
+            <p className="text-xs leading-relaxed text-muted-foreground">{play.detail}</p>
+            <div className="mt-1 flex flex-wrap gap-1.5">
+              {dashboard.alerts.map((a) => (
+                <Badge
+                  key={a.key}
+                  variant={a.count > 0 && a.key === 'critical' ? 'destructive' : 'outline'}
+                  className="text-[10px] tabular-nums"
+                >
+                  {a.label} {a.count}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          {/* ② 어디까지 영향 */}
+          <div className="flex flex-col gap-1.5 lg:border-l lg:pl-4">
+            <span className="text-[11px] font-medium tracking-wide text-muted-foreground">
+              영향 범위
+            </span>
+            <div className="flex flex-wrap items-center gap-1 text-xs">
+              {[
+                victim.csp,
+                region?.display ?? '',
+                victim.cluster,
+                victim.instance,
+                `${victim.device} (${victim.model})`,
+              ]
+                .filter(Boolean)
+                .map((part, idx, arr) => (
+                  <span key={part} className="flex items-center gap-1">
+                    <span
+                      className={
+                        idx === arr.length - 1 ? 'font-semibold text-metric-fault' : 'text-muted-foreground'
+                      }
+                    >
+                      {part}
+                    </span>
+                    {idx < arr.length - 1 ? (
+                      <ArrowRight className="size-3 text-muted-foreground/50" />
+                    ) : null}
+                  </span>
+                ))}
+            </div>
+            <dl className="mt-1 grid grid-cols-3 gap-x-3 gap-y-1 text-xs">
+              <div className="flex flex-col">
+                <dt className="text-[10px] text-muted-foreground">영향 GPU</dt>
+                <dd className="font-semibold tabular-nums">{formatCount(impactedGpus)}장</dd>
+              </div>
+              <div className="flex flex-col">
+                <dt className="text-[10px] text-muted-foreground">영향 노드</dt>
+                <dd className="font-semibold tabular-nums">{formatCount(impactedNodes)}대</dd>
+              </div>
+              <div className="flex flex-col">
+                <dt className="text-[10px] text-muted-foreground">테넌트</dt>
+                <dd className="truncate font-semibold">{victim.pool || '미할당'}</dd>
+              </div>
+            </dl>
+            {victimPool ? (
+              <p className="text-[11px] text-muted-foreground">
+                워크로드 영향 — <span className="font-medium">{victimPool.display}</span> p95{' '}
+                <span
+                  className={`font-semibold tabular-nums ${victimPool.saturated ? 'text-metric-fault' : ''}`}
+                >
+                  {formatMs(victimPool.p95Ms)}
+                </span>
+                {victimPool.errorRatePct > 0.05 ? (
+                  <> · 에러율 {formatPct(victimPool.errorRatePct)}</>
+                ) : null}
+              </p>
+            ) : null}
+          </div>
+
+          {/* ③ 지금 무엇을 */}
+          <div className="flex flex-col gap-1.5 lg:border-l lg:pl-4">
+            <span className="text-[11px] font-medium tracking-wide text-muted-foreground">
+              지금 할 일
+            </span>
+            <p className="text-sm leading-relaxed">{play.todo}</p>
+            {play.action && play.actionLabel ? (
+              <Button
+                size="sm"
+                className="mt-1 w-full"
+                disabled={acting}
+                onClick={() => onAct(play.action as DemoAction)}
+              >
+                {acting ? '처리 중…' : play.actionLabel}
+                <ArrowRight className="size-3.5" />
+              </Button>
+            ) : (
+              <Badge variant="secondary" className="w-fit text-[10px]">
+                {critical > 0 ? '미확인 Critical 알림 확인 필요' : '자동 진행 중 — 개입 불필요'}
+              </Badge>
+            )}
+            <p className="mt-auto text-[10px] text-muted-foreground">
+              복구 모드 {scenario.mode === 'observe' ? '관찰' : scenario.mode === 'approve' ? '운영자 승인' : '제한 자동'}
+              {scenario.autoAdvance ? ' · 자동 전이 켜짐' : ' · 자동 전이 멈춤'}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 8영역 중 분류 4종 — 조밀한 스트립 */}
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <StatusStrip title="GPU 상태" items={dashboard.gpus} />
+        <StatusStrip title="노드 상태" items={dashboard.nodes} />
+        <StatusStrip title="자동복구" items={dashboard.repair} />
+        <StatusStrip title="수집 상태" items={dashboard.collect} />
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/SloPanel.tsx b/web/src/components/gpu/SloPanel.tsx
new file mode 100644
index 0000000..118b117
--- /dev/null
+++ b/web/src/components/gpu/SloPanel.tsx
@@ -0,0 +1,101 @@
+// SloPanel — 가용 GPU 비율 SLO 카드(NFR-04). 순간값만 있으면 모니터고,
+// "목표 대비 잔여 오차 예산"이 있어야 운영 콘솔이 된다. 상단 4px 라인 =
+// 위반 여부(관제 규약: 상단 라인 + 배지), 예산 바 = 30일 창 소진 상태.
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import type { SLOState } from '@/lib/demoApi';
+
+export interface SloPanelProps {
+  slo: SLOState;
+}
+
+// 예산 바 색 — 잔여 30% 미만 주황, 10% 미만 빨강. Tailwind JIT 는 정적 클래스
+// 문자열만 수집하므로 조합이 아닌 완성형으로 둔다(GpuDeviceCard 관례 미러).
+function budgetBarClass(remainingPct: number): string {
+  if (remainingPct < 10) return 'h-2 [&>[data-slot=progress-indicator]]:bg-metric-fault';
+  if (remainingPct < 30) return 'h-2 [&>[data-slot=progress-indicator]]:bg-metric-thermal';
+  return 'h-2 [&>[data-slot=progress-indicator]]:bg-metric-pod';
+}
+
+function SubMetric({ label, value, unit }: { label: string; value: string; unit: string }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <span className="font-semibold text-lg tabular-nums">
+        {value}
+        <span className="ml-0.5 font-normal text-muted-foreground text-xs">{unit}</span>
+      </span>
+    </div>
+  );
+}
+
+export default function SloPanel({ slo }: SloPanelProps) {
+  const accent = slo.breaching ? 'var(--metric-fault)' : 'var(--metric-pod)';
+  const delta = slo.availabilityPct - slo.targetPct;
+  const budget = Math.max(0, Math.min(100, slo.errorBudgetRemainingPct));
+
+  return (
+    <Card className="gap-0 py-0" style={{ borderTop: `4px solid ${accent}` }}>
+      <CardContent className="flex flex-col gap-4 p-4">
+        <div className="flex flex-wrap items-end justify-between gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-muted-foreground text-xs">가용 GPU 비율 (SLO)</span>
+            <div className="flex items-end gap-2">
+              <span
+                className="font-semibold text-4xl leading-none tabular-nums"
+                style={{ color: accent }}
+              >
+                {slo.availabilityPct.toFixed(2)}%
+              </span>
+              <span className="text-muted-foreground text-xs">
+                목표 {slo.targetPct.toFixed(1)}% · {delta >= 0 ? '+' : ''}
+                {delta.toFixed(2)}pp
+              </span>
+            </div>
+          </div>
+          {slo.breaching ? (
+            <Badge variant="destructive">SLO 위반</Badge>
+          ) : (
+            <Badge variant="outline" className="text-metric-pod">
+              정상
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-baseline justify-between">
+            <span className="text-muted-foreground text-xs">오차 예산 잔여</span>
+            <span className="font-medium text-sm tabular-nums">{budget.toFixed(1)}%</span>
+          </div>
+          <Progress value={budget} className={budgetBarClass(budget)} />
+          <span className="text-muted-foreground text-[11px]">
+            {slo.windowDays}일 창 — 예산을 다 쓰면 신규 변경을 멈추고 안정화에 들어간다
+          </span>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3">
+          <SubMetric label="MTBF (평균 무장애 간격)" value={slo.mtbfHours.toFixed(1)} unit="시간" />
+          <SubMetric label="MTTR (평균 복구 시간)" value={slo.mttrMinutes.toFixed(0)} unit="분" />
+          <SubMetric
+            label="30일 인시던트"
+            value={slo.incidents30d.toLocaleString('ko-KR')}
+            unit="건"
+          />
+        </div>
+
+        <div className="flex flex-wrap items-center justify-between gap-2 border-t pt-3">
+          <span className="text-muted-foreground text-xs">
+            현재 서비스 불가 GPU{' '}
+            <span className="font-semibold text-foreground tabular-nums">
+              {slo.unavailableGpus.toLocaleString('ko-KR')}장
+            </span>
+          </span>
+          <span className="text-muted-foreground text-[11px]">
+            가용 GPU 비율 = (전체 − 장애·격리·수집중단) / 전체
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/Sparkline.tsx b/web/src/components/gpu/Sparkline.tsx
new file mode 100644
index 0000000..4e221b1
--- /dev/null
+++ b/web/src/components/gpu/Sparkline.tsx
@@ -0,0 +1,88 @@
+// Sparkline — 의존성 없는 SVG 미니 차트.
+//
+// Recharts 를 쓰지 않는 이유: 이 컴포넌트가 한 화면에 10개 넘게 깔리는데
+// Recharts 는 인스턴스마다 ResponsiveContainer + ResizeObserver 를 단다.
+// 선 하나 그리는 데 그 비용을 낼 이유가 없고, CSP(default-src 'self') 아래에서
+// 인라인 style 주입 경로를 하나라도 줄이는 편이 안전하다.
+export interface SparklineProps {
+  values: number[];
+  /** 선 색 — CSS 변수명(예: 'var(--metric-gpu)'). */
+  color?: string;
+  height?: number;
+  /** 선 아래를 옅게 채운다 — 밀도 높은 스트립에서 추세가 눈에 더 잘 들어온다. */
+  area?: boolean;
+  className?: string;
+}
+
+const VIEW_W = 100;
+
+export default function Sparkline({
+  values,
+  color = 'var(--metric-gpu)',
+  height = 28,
+  area = true,
+  className,
+}: SparklineProps) {
+  const clean = values.filter((v) => Number.isFinite(v));
+  if (clean.length < 2) {
+    // 점 하나로는 추세를 그릴 수 없다 — 빈 자리를 남기는 대신 기준선을 둔다.
+    return (
+      <svg
+        viewBox={`0 0 ${VIEW_W} 10`}
+        preserveAspectRatio="none"
+        style={{ height }}
+        className={`w-full ${className ?? ''}`}
+        aria-hidden
+      >
+        <line x1="0" y1="5" x2={VIEW_W} y2="5" stroke="var(--border)" strokeWidth="0.6" />
+      </svg>
+    );
+  }
+
+  const min = Math.min(...clean);
+  const max = Math.max(...clean);
+  // 평평한 계열은 span 이 0 이라 나눗셈이 폭발한다 — 가운데 선으로 눕힌다.
+  const span = max - min || 1;
+  const stepX = VIEW_W / (clean.length - 1);
+  const pts = clean.map((v, i) => {
+    const x = i * stepX;
+    const y = 10 - ((v - min) / span) * 8 - 1; // 위아래 1 여백
+    return [x, y] as const;
+  });
+  const line = pts.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(' ');
+  const last = pts[pts.length - 1];
+
+  return (
+    <svg
+      viewBox={`0 0 ${VIEW_W} 10`}
+      preserveAspectRatio="none"
+      style={{ height }}
+      className={`w-full ${className ?? ''}`}
+      aria-hidden
+    >
+      {area ? (
+        <polygon points={`0,10 ${line} ${VIEW_W},10`} fill={color} opacity="0.12" />
+      ) : null}
+      <polyline
+        points={line}
+        fill="none"
+        stroke={color}
+        strokeWidth="0.9"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
+      />
+      {/* 마지막 점 — "지금 값"이 어디인지 한눈에. preserveAspectRatio="none" 이라
+          원은 찌그러지므로 세로선으로 표시한다(스케일 왜곡에 안전). */}
+      <line
+        x1={last[0]}
+        y1={last[1] - 1.2}
+        x2={last[0]}
+        y2={last[1] + 1.2}
+        stroke={color}
+        strokeWidth="1.2"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+}
diff --git a/web/src/components/gpu/StatusBanner.tsx b/web/src/components/gpu/StatusBanner.tsx
new file mode 100644
index 0000000..703b977
--- /dev/null
+++ b/web/src/components/gpu/StatusBanner.tsx
@@ -0,0 +1,38 @@
+// StatusBanner — 헬스 페이지 상단 상태 배너. 카드 상단 4px 컬러 라인(관제 규약:
+// 상단 라인 = 상태 톤) + 대형 제목 + 설명. 색은 index.css 의 --metric-* 토큰만
+// 사용한다(ok=pod 초록 / warn=thermal 주황 / suspect=fault 빨강).
+import { Card, CardContent } from '@/components/ui/card';
+
+export type StatusLevel = 'ok' | 'warn' | 'suspect';
+
+export interface StatusBannerProps {
+  level: StatusLevel;
+  title: string;
+  description: string;
+  /** 단계 진입 시각(epoch ms) — 있으면 우측 상단에 표시 */
+  since?: number;
+}
+
+const LEVEL_COLOR: Record<StatusLevel, string> = {
+  ok: 'var(--metric-pod)',
+  warn: 'var(--metric-thermal)',
+  suspect: 'var(--metric-fault)',
+};
+
+export default function StatusBanner({ level, title, description, since }: StatusBannerProps) {
+  return (
+    <Card className="gap-0 py-0" style={{ borderTop: `4px solid ${LEVEL_COLOR[level]}` }}>
+      <CardContent className="flex flex-col gap-1 p-4">
+        <div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+          <span className="font-semibold text-2xl leading-tight">{title}</span>
+          {since ? (
+            <span className="text-muted-foreground text-xs tabular-nums">
+              단계 진입 {new Date(since).toLocaleTimeString('ko-KR')}
+            </span>
+          ) : null}
+        </div>
+        <p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/TenantDonut.tsx b/web/src/components/gpu/TenantDonut.tsx
new file mode 100644
index 0000000..22d9dc4
--- /dev/null
+++ b/web/src/components/gpu/TenantDonut.tsx
@@ -0,0 +1,106 @@
+// TenantDonut — demo1 "테넌트별 사용량" 위젯. pools 를 tenant 로 allocated 합산해
+// 도넛 + 우측 범례(테넌트명 + %)로 보인다. 색은 index.css 의 --chart-* 토큰.
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatCount } from '@/lib/gpuMetrics';
+
+// 도넛 조각 색 — 테넌트 수만큼 순환. index.css --chart-1..5.
+const SLICE_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+];
+
+interface TenantSlice {
+  tenant: string;
+  name: string;
+  allocated: number;
+}
+
+function aggregate(
+  pools: { tenant: string; allocated: number }[],
+  tenants: { id: string; display: string }[],
+): TenantSlice[] {
+  const nameById = new Map(tenants.map((t) => [t.id, t.display]));
+  const byTenant = new Map<string, number>();
+  for (const p of pools) {
+    byTenant.set(p.tenant, (byTenant.get(p.tenant) ?? 0) + p.allocated);
+  }
+  return [...byTenant.entries()]
+    .map(([tenant, allocated]) => ({ tenant, name: nameById.get(tenant) ?? tenant, allocated }))
+    .sort((a, b) => b.allocated - a.allocated);
+}
+
+export default function TenantDonut({
+  pools,
+  tenants,
+}: {
+  pools: { tenant: string; allocated: number }[];
+  tenants: { id: string; display: string }[];
+}) {
+  const slices = aggregate(pools, tenants);
+  const total = slices.reduce((s, x) => s + x.allocated, 0);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>테넌트별 사용량</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {total === 0 ? (
+          <p className="py-6 text-center text-muted-foreground text-sm">할당된 GPU 가 없다.</p>
+        ) : (
+          <div className="flex items-center gap-4">
+            <div className="relative h-28 w-28 shrink-0">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={slices}
+                    dataKey="allocated"
+                    nameKey="name"
+                    innerRadius={34}
+                    outerRadius={54}
+                    paddingAngle={2}
+                    isAnimationActive={false}
+                    stroke="var(--card)"
+                    strokeWidth={2}
+                  >
+                    {slices.map((s, i) => (
+                      <Cell key={s.tenant} fill={SLICE_COLORS[i % SLICE_COLORS.length]} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </ResponsiveContainer>
+              {/* 중앙 총합 — 전체 할당 GPU 수 */}
+              <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+                <span className="font-semibold text-lg tabular-nums leading-none">
+                  {formatCount(total)}
+                </span>
+                <span className="text-[10px] text-muted-foreground">전체 GPU</span>
+              </div>
+            </div>
+            <ul className="flex min-w-0 flex-1 flex-col gap-1.5">
+              {slices.map((s, i) => (
+                <li key={s.tenant} className="flex items-center gap-2 text-sm">
+                  <span
+                    className="size-2.5 shrink-0 rounded-full"
+                    style={{ backgroundColor: SLICE_COLORS[i % SLICE_COLORS.length] }}
+                  />
+                  <span className="min-w-0 flex-1 truncate">{s.name}</span>
+                  <span className="shrink-0 font-semibold tabular-nums">
+                    {formatCount(s.allocated)}
+                  </span>
+                  <span className="shrink-0 text-muted-foreground text-xs tabular-nums">
+                    {`${Math.round((s.allocated / total) * 100)}%`}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/TopGpuTable.tsx b/web/src/components/gpu/TopGpuTable.tsx
new file mode 100644
index 0000000..1754f74
--- /dev/null
+++ b/web/src/components/gpu/TopGpuTable.tsx
@@ -0,0 +1,324 @@
+// TopGpuTable — demo1 "GPU 사용률 Top 10" 테이블. useFleet() 셀을 사용률
+// 내림차순으로 잘라 GPU / 노드 / 워크로드 3개 탭으로 보여준다.
+// 메모리·온도는 벽면 셀에 없으므로 mem_used/mem_total/temperature instant 를
+// 각 1회 조회해 gpu_uuid 로 조인한다(30s 폴링, 응답 없으면 해당 칸은 '—').
+import { useMemo } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { CellStatus, FleetCell } from '@/hooks/useFleet';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api } from '@/lib/api';
+import {
+  bandForUtil,
+  formatCelsius,
+  formatCount,
+  formatPct,
+  METRIC_GPU_MEM_TOTAL,
+  METRIC_GPU_MEM_USED,
+  METRIC_GPU_TEMP,
+} from '@/lib/gpuMetrics';
+import type { AlertEvent } from '@/lib/demoApi';
+
+export interface TopGpuTableProps {
+  /** 대상 셀(null = 로딩). 표는 스스로 벽면을 받지 않는다 — 호출부가 이미
+   *  필터를 건 셀을 주므로, 표는 필터를 모른 채 필터에 반응한다. */
+  cells: FleetCell[] | null;
+  /** 표시할 상위 행 수 (기본 10) */
+  limit?: number;
+  /** 건강 상태 분류자 — 상태는 라벨이 아니라 장애·온도·격리 집합에서 나오므로
+   *  그것을 아는 호출부가 주입한다. 미주입이면 기존 사용률 대역 라벨 유지. */
+  statusOf?: (cell: FleetCell) => CellStatus;
+  /** 이벤트 열 소재 — instance(+device) 로 매칭해 최근 알림 code 를 표기. */
+  alerts?: AlertEvent[];
+}
+
+const DETAIL_POLL_MS = 30_000;
+
+const STATUS_LABEL: Record<CellStatus, string> = {
+  normal: '정상',
+  degraded: '성능저하',
+  fault: '장애',
+  isolated: '격리',
+  recovering: '복구중',
+};
+
+const STATUS_COLOR: Record<CellStatus, string> = {
+  normal: 'var(--metric-pod)',
+  degraded: 'var(--metric-thermal)',
+  fault: 'var(--metric-fault)',
+  isolated: 'var(--metric-mem)',
+  recovering: 'var(--metric-cpu)',
+};
+
+interface GpuDetail {
+  memPct?: number;
+  tempC?: number;
+}
+
+/** useFleet 과 같은 uuid 파생 규칙 — 조인 키가 어긋나면 칸이 통째로 빈다. */
+function detailKey(m: Record<string, string>): string {
+  return m.gpu_uuid ?? `${m.instance}/${m.device}`;
+}
+
+/** 메모리·온도 조인 소스. 실패하면 null 로 남아 각 칸이 '—' 가 된다. */
+function useGpuDetails(): Map<string, GpuDetail> | null {
+  const query = usePolledQuery(async () => {
+    const [used, total, temp] = await Promise.all([
+      api.instantQuery(METRIC_GPU_MEM_USED),
+      api.instantQuery(METRIC_GPU_MEM_TOTAL),
+      api.instantQuery(METRIC_GPU_TEMP),
+    ]);
+    const usedBy = new Map(
+      used.data.result.map((s) => [detailKey(s.metric), Number(s.value[1])] as const),
+    );
+    const map = new Map<string, GpuDetail>();
+    for (const s of total.data.result) {
+      const key = detailKey(s.metric);
+      const cap = Number(s.value[1]);
+      const u = usedBy.get(key);
+      if (cap > 0 && u != null && Number.isFinite(u)) map.set(key, { memPct: (u / cap) * 100 });
+    }
+    for (const s of temp.data.result) {
+      const key = detailKey(s.metric);
+      map.set(key, { ...map.get(key), tempC: Number(s.value[1]) });
+    }
+    return map;
+  }, DETAIL_POLL_MS);
+  return query.data;
+}
+
+/** instance(+device) → 최근 알림 code. 오래된 것부터 넣어 최신이 덮어쓴다. */
+function buildAlertIndex(alerts: AlertEvent[]): Map<string, string> {
+  const idx = new Map<string, string>();
+  for (const a of [...alerts].sort((x, y) => x.at - y.at)) {
+    if (!a.instance) continue;
+    if (a.device) idx.set(`${a.instance}/${a.device}`, a.code);
+    idx.set(a.instance, a.code);
+  }
+  return idx;
+}
+
+function PctBar({ value, color }: { value: number | undefined; color: string }) {
+  if (value == null || Number.isNaN(value)) return <span className="text-muted-foreground">—</span>;
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full"
+          style={{ width: `${Math.min(100, Math.max(0, value))}%`, backgroundColor: color }}
+        />
+      </div>
+      <span className="w-12 text-right tabular-nums">{formatPct(value, 0)}</span>
+    </div>
+  );
+}
+
+function StatusCell({ cell, statusOf }: { cell: FleetCell; statusOf?: TopGpuTableProps['statusOf'] }) {
+  if (!statusOf) return <span className="text-muted-foreground">{bandForUtil(cell.util).label}</span>;
+  const s = statusOf(cell);
+  return (
+    <Badge
+      variant="outline"
+      className="text-[10px]"
+      style={{
+        color: STATUS_COLOR[s],
+        borderColor: STATUS_COLOR[s],
+        backgroundColor: `color-mix(in srgb, ${STATUS_COLOR[s]} 12%, transparent)`,
+      }}
+    >
+      {STATUS_LABEL[s]}
+    </Badge>
+  );
+}
+
+/** 노드·워크로드 탭의 집계 행 — 어느 축이든 (GPU 수, 평균 사용률) 이 본체다. */
+interface GroupRow {
+  key: string;
+  label: string;
+  detail: string;
+  gpus: number;
+  utilAvg: number;
+}
+
+/** 수집 중단 노드의 '데이터 없음' 셀은 util 이 NaN 이다 — 사용률 순위·평균에서
+ *  빼야 한다. NaN 을 비교자에 넣으면 정렬이 통째로 무너지고(NaN 비교는 항상
+ *  false) 평균은 NaN 으로 오염된다. 대수(gpus)에는 그대로 남는다 — 데이터가
+ *  안 온다고 장비가 없어지는 건 아니다. */
+function measured(c: FleetCell): boolean {
+  return Number.isFinite(c.util);
+}
+
+function groupBy(cells: FleetCell[], pick: (c: FleetCell) => { key: string; detail: string }): GroupRow[] {
+  const acc = new Map<string, { detail: string; gpus: number; sum: number; n: number }>();
+  for (const c of cells) {
+    const { key, detail } = pick(c);
+    const cur = acc.get(key) ?? { detail, gpus: 0, sum: 0, n: 0 };
+    cur.gpus += 1;
+    if (measured(c)) {
+      cur.sum += c.util;
+      cur.n += 1;
+    }
+    acc.set(key, cur);
+  }
+  return [...acc.entries()]
+    .map(([key, v]) => ({
+      key,
+      label: key,
+      detail: v.detail,
+      gpus: v.gpus,
+      utilAvg: v.n > 0 ? v.sum / v.n : Number.NaN,
+    }))
+    .sort((a, b) => (b.utilAvg || 0) - (a.utilAvg || 0));
+}
+
+const WORKLOAD_LABEL: Record<string, string> = { training: '학습', inference: '추론' };
+
+function GroupTable({ rows, headLabel, headDetail }: { rows: GroupRow[]; headLabel: string; headDetail: string }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-10">순위</TableHead>
+          <TableHead>{headLabel}</TableHead>
+          <TableHead>{headDetail}</TableHead>
+          <TableHead className="w-20 text-right">GPU 수</TableHead>
+          <TableHead className="w-48">평균 사용률</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {rows.map((r, i) => (
+          <TableRow key={r.key}>
+            <TableCell className="text-muted-foreground tabular-nums">{i + 1}</TableCell>
+            <TableCell className="font-medium">{r.label}</TableCell>
+            <TableCell className="text-muted-foreground">{r.detail || '—'}</TableCell>
+            <TableCell className="text-right tabular-nums">{formatCount(r.gpus)}</TableCell>
+            <TableCell>
+              <PctBar value={r.utilAvg} color="var(--metric-gpu)" />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default function TopGpuTable({ cells, limit = 10, statusOf, alerts }: TopGpuTableProps) {
+  const details = useGpuDetails();
+
+  // 사용률 순위이므로 사용률이 없는 셀(수집 중단)은 애초에 후보가 아니다.
+  const top = useMemo(
+    () => (cells ?? []).filter(measured).sort((a, b) => b.util - a.util).slice(0, limit),
+    [cells, limit],
+  );
+  const nodeRows = useMemo(
+    () =>
+      groupBy(cells ?? [], (c) => ({ key: c.instance, detail: c.cluster })).slice(0, limit),
+    [cells, limit],
+  );
+  const poolRows = useMemo(
+    () =>
+      groupBy(cells ?? [], (c) => ({
+        key: c.pool || '(미할당)',
+        detail: [c.tenant, WORKLOAD_LABEL[c.workload] ?? ''].filter(Boolean).join(' · '),
+      })).slice(0, limit),
+    [cells, limit],
+  );
+  const alertIndex = useMemo(() => buildAlertIndex(alerts ?? []), [alerts]);
+
+  return (
+    <Card>
+      <Tabs defaultValue="gpu">
+        <CardHeader className="flex flex-wrap items-center justify-between gap-2">
+          <CardTitle>GPU 사용률 Top {limit}</CardTitle>
+          <TabsList>
+            <TabsTrigger value="gpu">GPU</TabsTrigger>
+            <TabsTrigger value="node">노드</TabsTrigger>
+            <TabsTrigger value="workload">워크로드</TabsTrigger>
+          </TabsList>
+        </CardHeader>
+        <CardContent>
+          {cells == null ? (
+            <Skeleton className="h-64 w-full" />
+          ) : (
+            <>
+              <TabsContent value="gpu">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-10">순위</TableHead>
+                      <TableHead>GPU·노드</TableHead>
+                      <TableHead>모델</TableHead>
+                      <TableHead>클러스터</TableHead>
+                      <TableHead>테넌트</TableHead>
+                      <TableHead className="w-40">GPU 사용률</TableHead>
+                      <TableHead className="w-36">메모리</TableHead>
+                      <TableHead className="w-20">온도</TableHead>
+                      <TableHead>상태</TableHead>
+                      <TableHead>이벤트</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {top.map((c, i) => {
+                      const d = details?.get(c.uuid);
+                      return (
+                        <TableRow key={c.uuid}>
+                          <TableCell className="text-muted-foreground tabular-nums">{i + 1}</TableCell>
+                          <TableCell className="font-medium">
+                            {c.device}
+                            <span className="text-muted-foreground"> · {c.instance}</span>
+                          </TableCell>
+                          <TableCell>{c.model.replace(/^NVIDIA\s+/, '')}</TableCell>
+                          <TableCell>{c.cluster}</TableCell>
+                          <TableCell>{c.tenant}</TableCell>
+                          <TableCell>
+                            <PctBar value={c.util} color="var(--metric-gpu)" />
+                          </TableCell>
+                          <TableCell>
+                            <PctBar value={d?.memPct} color="var(--metric-mem)" />
+                          </TableCell>
+                          <TableCell className="tabular-nums">
+                            {d?.tempC == null ? (
+                              <span className="text-muted-foreground">—</span>
+                            ) : (
+                              formatCelsius(d.tempC)
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            <StatusCell cell={c} statusOf={statusOf} />
+                          </TableCell>
+                          <TableCell className="font-mono text-muted-foreground text-xs">
+                            {alertIndex.get(`${c.instance}/${c.device}`) ??
+                              alertIndex.get(c.instance) ??
+                              '-'}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TabsContent>
+
+              <TabsContent value="node">
+                <GroupTable rows={nodeRows} headLabel="노드" headDetail="클러스터" />
+              </TabsContent>
+
+              <TabsContent value="workload">
+                <GroupTable rows={poolRows} headLabel="워크로드" headDetail="테넌트 · 종류" />
+              </TabsContent>
+            </>
+          )}
+        </CardContent>
+      </Tabs>
+    </Card>
+  );
+}
diff --git a/web/src/components/gpu/TopologyGraph.tsx b/web/src/components/gpu/TopologyGraph.tsx
new file mode 100644
index 0000000..82c26e3
--- /dev/null
+++ b/web/src/components/gpu/TopologyGraph.tsx
@@ -0,0 +1,577 @@
+// TopologyGraph — 계층 노드-엣지 그래프. 축(열 정의)을 밖에서 받는다.
+//
+// 목적: "이 GPU 가 어디에 붙어 있는가"를 목록이 아니라 배선으로 보여준다.
+// 축이 파라미터라 같은 컴포넌트가 인프라(GPU→워커→노드풀→클러스터→CSP)와
+// 서비스(GPU→워커→서비스→테넌트→워크로드) 양쪽을 모두 그린다 — 액티브
+// 모니터링 5개 탭이 전부 이 하나를 재사용한다.
+//
+// 방향은 왼쪽부터 세부→상위다(PDF 2026-07-30 p3 지시). 개체에서 시작해 소속을
+// 거슬러 올라간다.
+//
+// 워커 노드 열은 nodeCol 이 지정한다(기본=마지막). 그 열에서만 GPU 칸 그리드를
+// 그리고 클릭이 onSelectNode 로 나간다. 나머지 열은 드릴 필터로만 쓰인다.
+//
+// Recharts 를 쓰지 않는 이유는 Sparkline 과 같다 — 노드·엣지 그래프는 차트
+// 라이브러리의 축·스케일 모델에 얹을 게 없고, path 몇 줄이면 끝난다.
+//
+// 성능 계약: 셀이 7,000장이라 전부는 못 그린다. 열마다 GPU 수 상위 topN 개만
+// 그리고 나머지는 개수로만 알린다. 집계는 전부 useMemo 안 O(n) 단일 패스다.
+//
+// 레이아웃 계약: 좌표는 전부 viewBox 안 *비율* 계산이다. 열 개수가 3이든
+// 5든 박스폭·간격·글자수·GPU 칸이 같은 비율로 다시 잡히고, 화면 폭은
+// preserveAspectRatio 가 처리한다 — 고정 픽셀 배열 없음.
+import { useMemo, useState } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import type { CellStatus, FleetCell } from '@/hooks/useFleet';
+import { formatCount, formatPct } from '@/lib/gpuMetrics';
+
+/** 한 열의 정의 — 무엇으로 묶고 뭐라고 부를지. */
+export interface TopologyAxis {
+  /** 열 헤더 라벨 */
+  label: string;
+  /** 셀 → 이 열의 그룹 키. 빈 문자열이면 그 셀은 이 열에서 제외된다. */
+  keyOf: (c: FleetCell) => string;
+  /** 키 → 표시명 (미지정 시 키 그대로) */
+  displayOf?: (key: string) => string;
+}
+
+export type TopologyLayout = 'auto' | 'even' | 'compact';
+
+export interface TopologyGraphProps {
+  /** 필터 적용된 벽면 셀 — 부모가 내려준다(내부 fetch 없음). */
+  cells: FleetCell[];
+  /** 열 정의 2개 이상. 마지막 열 = 워커 노드(instance) 규약. */
+  axes: TopologyAxis[];
+  /** 셀 상태 분류자 — 미주입이면 전부 정상으로 본다(상태는 라벨이 아니다). */
+  statusOf?: (c: FleetCell) => CellStatus;
+  /** 선택된 워커 노드 instance. */
+  selected: string | null;
+  onSelectNode: (instance: string | null) => void;
+  /** 열당 표시 개수 (기본 4) */
+  topN?: number;
+  /** 세로 배치 방식 (기본 auto) */
+  layout?: TopologyLayout;
+  /** 워커 노드 열의 인덱스 — 그 열에서만 GPU 칸 그리드를 그리고 클릭이
+   *  onSelectNode 로 나간다. 기본은 마지막 열(상위→하위 방향)이고, PDF 지시대로
+   *  세부→상위(GPU→Worker→Pool→Cluster→CSP)로 뒤집으면 1 이 된다. */
+  nodeCol?: number;
+}
+
+// ---- 상태 → 색·라벨 (색은 CSS 변수만, hex 금지) ----
+
+const STATUS_COLOR: Record<CellStatus, string> = {
+  normal: 'var(--metric-pod)',
+  degraded: 'var(--metric-thermal)',
+  fault: 'var(--metric-fault)',
+  isolated: 'var(--metric-fault)',
+  recovering: 'var(--metric-cpu)',
+};
+
+const STATUS_LABEL: Record<CellStatus, string> = {
+  normal: '정상',
+  degraded: '경고',
+  fault: '장애',
+  isolated: '격리',
+  recovering: '복구 중',
+};
+
+/** 심각도 순위 — 그룹의 대표 상태는 "가장 나쁜 셀"이다. */
+const STATUS_RANK: Record<CellStatus, number> = {
+  normal: 0,
+  recovering: 1,
+  degraded: 2,
+  isolated: 3,
+  fault: 4,
+};
+const RANK_STATUS: readonly CellStatus[] = ['normal', 'recovering', 'degraded', 'isolated', 'fault'];
+
+// ---- 레이아웃 (전부 비율 — 고정 좌표 배열 없음) ----
+
+/** viewBox 가로 기준값. 실제 픽셀이 아니라 비율 단위다. */
+const VIEW_W = 1000;
+const PAD = 12;
+/** 박스폭 ÷ 열간격. 열이 몇 개든 이 비율로 폭과 여백이 갈린다. */
+const BOX_RATIO = 0.754;
+const BOX_H = 64;
+/** 워커 노드는 GPU 칸 한 줄이 들어가 더 높다. */
+const NODE_BOX_H = 72;
+/** 한 행이 차지하는 세로 — 노드 박스 + 숨통. */
+const ROW_SLOT = 96;
+const AREA_TOP = 34;
+/** "+N개 더" 줄 자리. */
+const FOOT_H = 30;
+/** 워커 박스 GPU 칸 — 목업대로 8칸 한 줄. 박스 좌우 여백(12)은 대칭이다. */
+const GRID_MAX = 8;
+const GRID_GAP = 3;
+const GRID_PAD_X = 12;
+/** 칸 시작 y(박스 상단 기준)와 박스 하단에 남길 여백. */
+const GRID_TOP = 44;
+const GRID_BOT = 6;
+/** 칸 세로 ÷ 가로. 목업의 칸은 정사각형에 가깝다. */
+const GRID_ASPECT = 0.85;
+
+/** GPU 칸 크기 — 가로는 박스폭에서 나누고, 세로는 박스 안에 반드시 가둔다.
+ *  세로 상한을 안 두면 박스가 넓은 열(3열 등)에서 칸이 박스를 뚫고 나간다. */
+function gridCell(boxW: number): { w: number; h: number } {
+  const w = (boxW - GRID_PAD_X * 2 - GRID_GAP * (GRID_MAX - 1)) / GRID_MAX;
+  return { w, h: Math.min(w * GRID_ASPECT, NODE_BOX_H - GRID_TOP - GRID_BOT) };
+}
+/** 글자 하나가 먹는 가로(비율 단위) — 박스폭에서 표시 글자수를 역산한다. */
+const CHAR_W = 9.3;
+
+/** 열 개수 → 박스폭·열 x좌표. 마지막 박스의 오른쪽 끝이 정확히 우측 여백에 닿는다. */
+function columnGeometry(n: number): { boxW: number; xs: number[] } {
+  const usable = VIEW_W - PAD * 2;
+  const stride = usable / (BOX_RATIO + Math.max(n, 1) - 1);
+  return {
+    boxW: stride * BOX_RATIO,
+    xs: Array.from({ length: n }, (_, i) => PAD + stride * i),
+  };
+}
+
+interface Agg {
+  key: string;
+  gpus: number;
+  nodes: number;
+  util: number;
+  fault: number;
+  warn: number;
+  worst: CellStatus;
+}
+
+interface GraphNode extends Agg {
+  id: string;
+  col: number;
+  title: string;
+  line1: string;
+  line2: string;
+  x: number;
+  y: number;
+  h: number;
+  /** 마지막 열 전용 — GPU 칸 그리드 재료. */
+  cells?: FleetCell[];
+}
+
+interface Edge {
+  id: string;
+  from: string;
+  to: string;
+  d: string;
+}
+
+/** key 별 단일 패스 집계 — nodes 는 instance distinct 라 Set 을 따로 든다. */
+function aggregate(
+  cells: FleetCell[],
+  keyOf: (c: FleetCell) => string,
+  statusOf?: (c: FleetCell) => CellStatus,
+): Agg[] {
+  const map = new Map<
+    string,
+    {
+      gpus: number;
+      utilSum: number;
+      instances: Set<string>;
+      fault: number;
+      warn: number;
+      worst: number;
+    }
+  >();
+  for (const c of cells) {
+    const k = keyOf(c);
+    if (!k) continue;
+    let a = map.get(k);
+    if (!a) {
+      a = { gpus: 0, utilSum: 0, instances: new Set(), fault: 0, warn: 0, worst: 0 };
+      map.set(k, a);
+    }
+    a.gpus += 1;
+    a.instances.add(c.instance);
+    if (Number.isFinite(c.util)) a.utilSum += c.util;
+    const st = statusOf?.(c) ?? 'normal';
+    if (st === 'fault' || st === 'isolated') a.fault += 1;
+    else if (st === 'degraded') a.warn += 1;
+    if (STATUS_RANK[st] > a.worst) a.worst = STATUS_RANK[st];
+  }
+  return [...map.entries()]
+    .map(([key, a]) => ({
+      key,
+      gpus: a.gpus,
+      nodes: a.instances.size,
+      util: a.gpus > 0 ? a.utilSum / a.gpus : 0,
+      fault: a.fault,
+      warn: a.warn,
+      worst: RANK_STATUS[a.worst],
+    }))
+    // GPU 수 → 심각도 → 사용률 순. 첫 열이 GPU 개체가 되면서(PDF 방향 역전)
+    // 전 항목의 gpus 가 1 이라 1차 기준만으로는 uuid 사전순이 된다 — 아무 GPU 나
+    // 4장 뜨는 화면. 심각도·사용률 tie-break 가 있어야 "장애난·바쁜 GPU"가 앞에
+    // 온다. 상위 열은 gpus 가 서로 달라 이 tie-break 에 닿지 않는다.
+    .sort(
+      (x, y) =>
+        y.gpus - x.gpus ||
+        STATUS_RANK[y.worst] - STATUS_RANK[x.worst] ||
+        y.util - x.util ||
+        x.key.localeCompare(y.key),
+    );
+}
+
+/** SVG text 는 넘쳐도 잘리지 않는다 — 폭에서 역산한 글자수로 직접 자른다. */
+function trunc(s: string, n: number): string {
+  return s.length > n ? `${s.slice(0, Math.max(1, n - 1))}…` : s;
+}
+
+function deviceOrder(device: string): number {
+  const n = Number.parseInt(device.replace(/^\D+/, ''), 10);
+  return Number.isNaN(n) ? 0 : n;
+}
+
+/** 세로 배치 — 셋 다 같은 영역을 쓰되 슬롯을 나누는 방식이 다르다.
+ *  auto: GPU 수에 비례한 슬롯(큰 그룹이 넓게 자리) / even: 균등 분배 /
+ *  compact: 위에서부터 고정 간격으로 붙인다. */
+function layoutYs(
+  items: Agg[],
+  h: number,
+  areaTop: number,
+  areaBottom: number,
+  mode: TopologyLayout,
+): number[] {
+  const n = items.length;
+  if (n === 0) return [];
+  if (mode === 'compact') {
+    return items.map((_, i) => areaTop + i * ROW_SLOT);
+  }
+  const span = areaBottom - areaTop;
+  if (mode === 'even') {
+    const slot = span / n;
+    return items.map((_, i) => areaTop + slot * i + (slot - h) / 2);
+  }
+  // auto — GPU 비중에 비례해 슬롯 크기를 나눈다. 0 합은 균등으로 강등.
+  const total = items.reduce((s, a) => s + a.gpus, 0);
+  if (total <= 0) return layoutYs(items, h, areaTop, areaBottom, 'even');
+  // 슬롯 하한을 박스 높이로 묶으면(겹침 방지) 비중이 한쪽에 쏠릴 때 합이 영역을
+  // 넘는다. 그때는 균등으로 강등한다 — ROW_SLOT 이 박스 높이보다 크므로 even 은
+  // 항상 영역 안에 들어간다. (구 구현은 넘친 만큼 통째로 당겨 영역 밖으로 나갔다.)
+  const slots = items.map((a) => Math.max((a.gpus / total) * span, h));
+  if (slots.reduce((s, v) => s + v, 0) > span) {
+    return layoutYs(items, h, areaTop, areaBottom, 'even');
+  }
+  const ys: number[] = [];
+  let cursor = areaTop;
+  for (const slot of slots) {
+    ys.push(cursor + (slot - h) / 2);
+    cursor += slot;
+  }
+  return ys;
+}
+
+export default function TopologyGraph({
+  cells,
+  axes,
+  statusOf,
+  selected,
+  onSelectNode,
+  topN = 4,
+  layout = 'auto',
+  nodeCol,
+}: TopologyGraphProps) {
+  const lastCol = axes.length - 1;
+  // 워커 노드 열 — GPU 칸 그리드와 선택 콜백이 붙는 자리. 드릴 방향(왼→오른쪽)과
+  // 무관하게 이 열 하나만 "노드"다.
+  const nodeIdx = nodeCol ?? lastCol;
+
+  // 드릴 필터 — 상위 열을 고르면 하위 열이 그 선택으로 좁혀진다.
+  // 열이 몇 개든 같은 규칙이라 배열 하나로 든다(마지막 열은 selected prop).
+  const [drill, setDrill] = useState<(string | null)[]>(() => axes.map(() => null));
+
+  // 열별 유효 범위 — 위에서 고른 값이 아래 열을 자른다. scopes[i] = i번째 열이 볼 셀.
+  const scopes = useMemo(() => {
+    const out: FleetCell[][] = [cells];
+    for (let i = 0; i < lastCol; i += 1) {
+      const pick = drill[i];
+      const prev = out[i];
+      out.push(pick ? prev.filter((c) => axes[i].keyOf(c) === pick) : prev);
+    }
+    return out;
+  }, [cells, drill, axes, lastCol]);
+
+  const { boxW, xs } = useMemo(() => columnGeometry(axes.length), [axes.length]);
+  const maxChars = Math.max(6, Math.floor((boxW - GRID_PAD_X * 2) / CHAR_W));
+  // GPU 칸도 박스폭 비례 — 열이 늘면 칸도 같이 좁아지되 박스 밖으로는 못 나간다.
+  const { w: cellW, h: cellH } = gridCell(boxW);
+
+  const viewH = AREA_TOP + topN * ROW_SLOT + FOOT_H;
+  const areaBottom = AREA_TOP + topN * ROW_SLOT;
+
+  const graph = useMemo(() => {
+    const aggs = axes.map((ax, i) => aggregate(scopes[i], ax.keyOf, statusOf));
+    const more = aggs.map((a) => Math.max(0, a.length - topN));
+
+    // 상위 topN 워커 노드의 GPU 칸을 그리려면 그 셀만 있으면 된다.
+    const topKeys = new Set(aggs[nodeIdx].slice(0, topN).map((a) => a.key));
+    const lastKeyOf = axes[nodeIdx].keyOf;
+    const byKey = new Map<string, FleetCell[]>();
+    for (const c of scopes[nodeIdx]) {
+      const k = lastKeyOf(c);
+      if (!topKeys.has(k)) continue;
+      const list = byKey.get(k);
+      if (list) list.push(c);
+      else byKey.set(k, [c]);
+    }
+    for (const list of byKey.values()) {
+      list.sort((a, b) => deviceOrder(a.device) - deviceOrder(b.device));
+    }
+
+    const cols: GraphNode[][] = aggs.map((list, col) => {
+      const shown = list.slice(0, topN);
+      const isNode = col === nodeIdx;
+      const h = isNode ? NODE_BOX_H : BOX_H;
+      const ys = layoutYs(shown, h, AREA_TOP, areaBottom, layout);
+      const display = axes[col].displayOf;
+      return shown.map((a, i) => ({
+        ...a,
+        id: `${col}:${a.key}`,
+        col,
+        title: display ? display(a.key) : a.key.replace(/:\d+$/, ''),
+        line1: isNode
+          ? `GPU ${formatCount(a.gpus)}장 · ${STATUS_LABEL[a.worst]}`
+          : a.nodes > 1
+            ? `노드 ${formatCount(a.nodes)}대 · GPU ${formatCount(a.gpus)}장`
+            : `GPU ${formatCount(a.gpus)}장`,
+        line2: isNode ? '' : `평균 사용률 ${formatPct(a.util, 1)}`,
+        x: xs[col],
+        y: ys[i],
+        h,
+        cells: isNode ? byKey.get(a.key) : undefined,
+      }));
+    });
+
+    const byId = new Map<string, GraphNode>();
+    for (const list of cols) for (const n of list) byId.set(n.id, n);
+
+    // 엣지는 실제 데이터에 그 쌍이 있을 때만 긋는다 — 가짜 연결 금지.
+    const edges: Edge[] = [];
+    const seen = new Set<string>();
+    for (let col = 0; col < lastCol; col += 1) {
+      const from = axes[col].keyOf;
+      const to = axes[col + 1].keyOf;
+      for (const c of scopes[col + 1]) {
+        const a = byId.get(`${col}:${from(c)}`);
+        const b = byId.get(`${col + 1}:${to(c)}`);
+        if (!a || !b) continue;
+        const id = `${a.id}>${b.id}`;
+        if (seen.has(id)) continue;
+        seen.add(id);
+        const x1 = a.x + boxW;
+        const y1 = a.y + a.h / 2;
+        const x2 = b.x;
+        const y2 = b.y + b.h / 2;
+        const dx = (x2 - x1) * 0.5;
+        edges.push({
+          id,
+          from: a.id,
+          to: b.id,
+          d: `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`,
+        });
+      }
+    }
+
+    return { cols, edges, more };
+  }, [axes, scopes, statusOf, topN, lastCol, nodeIdx, xs, boxW, areaBottom, layout]);
+
+  // 선택 집합 — 강조 대상과 그 배선만 진하게 남긴다.
+  const activeIds = useMemo(() => {
+    const s = new Set<string>();
+    drill.forEach((v, i) => {
+      if (v && i !== nodeIdx) s.add(`${i}:${v}`);
+    });
+    if (selected) s.add(`${nodeIdx}:${selected}`);
+    return s;
+  }, [drill, selected, nodeIdx]);
+  const anyActive = activeIds.size > 0;
+
+  if (cells.length === 0) {
+    return <p className="py-10 text-center text-muted-foreground text-sm">표시할 대상이 없다.</p>;
+  }
+
+  /** 상위 열을 고르면 그 아래 드릴은 전부 풀린다 — 없어진 범위를 붙들면 빈 화면이 된다. */
+  const activate = (node: GraphNode) => {
+    if (node.col === nodeIdx) {
+      onSelectNode(node.key === selected ? null : node.key);
+      return;
+    }
+    setDrill((prev) =>
+      prev.map((v, i) => (i < node.col ? v : i === node.col ? (v === node.key ? null : node.key) : null)),
+    );
+  };
+
+  const onKeyDown = (e: ReactKeyboardEvent<SVGGElement>, node: GraphNode) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    activate(node);
+  };
+
+  const clearAll = () => {
+    setDrill(axes.map(() => null));
+    onSelectNode(null);
+  };
+  const drilled = drill.some(Boolean) || selected !== null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* 현재 드릴 범위 — 어디까지 좁혀졌는지 한 줄로. */}
+      <div className="flex min-h-6 flex-wrap items-center gap-1.5">
+        {axes.map((ax, i) => {
+          const v = i === nodeIdx ? selected : drill[i];
+          if (!v) return null;
+          return (
+            <Badge key={ax.label} variant="secondary" className="text-[10px]">
+              {ax.label} {ax.displayOf ? ax.displayOf(v) : v}
+            </Badge>
+          );
+        })}
+        {drilled ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="ml-auto h-6 px-2 text-xs"
+            onClick={clearAll}
+          >
+            선택 해제
+          </Button>
+        ) : null}
+      </div>
+
+      {/* 가독 하한 — SVG 글자는 viewBox 단위라 컨테이너가 좁아지면 같이 줄어든다.
+          폭 820 미만이면 제목이 10.7px 밑으로 떨어져 읽을 수 없으므로, 거기서부터는
+          축소 대신 가로 스크롤로 넘긴다. 레이아웃 자체는 그대로 비율이다. */}
+      <div className="overflow-x-auto">
+        <svg
+          viewBox={`0 0 ${VIEW_W} ${viewH}`}
+          preserveAspectRatio="xMidYMid meet"
+          className="w-full min-w-[820px]"
+          role="img"
+          aria-label={`${axes.map((a) => a.label).join(' · ')} ${axes.length}계층 토폴로지`}
+        >
+          {axes.map((ax, i) => (
+            <text
+              key={ax.label}
+              x={xs[i]}
+              y={18}
+              fontSize="11"
+              fontWeight="600"
+              fill="var(--muted-foreground)"
+            >
+              {ax.label}
+            </text>
+          ))}
+
+          {/* 엣지 먼저 — 박스가 위에 올라와야 글자가 안 가린다. */}
+          <g fill="none" strokeLinecap="round">
+            {graph.edges.map((e) => {
+              const on = activeIds.has(e.from) || activeIds.has(e.to);
+              return (
+                <path
+                  key={e.id}
+                  d={e.d}
+                  stroke={on ? 'var(--primary)' : 'var(--muted-foreground)'}
+                  strokeWidth={on ? 1.8 : 1}
+                  opacity={anyActive ? (on ? 0.9 : 0.08) : 0.32}
+                />
+              );
+            })}
+          </g>
+
+          {graph.cols.map((list, col) => (
+            <g key={axes[col].label}>
+              {list.map((n) => {
+                const isSel = activeIds.has(n.id);
+                const hasFault = n.fault > 0;
+                return (
+                  // biome-ignore lint/a11y/useSemanticElements: SVG 안에는 button 을 넣을 수 없다
+                  <g
+                    key={n.id}
+                    role="button"
+                    tabIndex={0}
+                    className="cursor-pointer"
+                    aria-label={`${axes[col].label} ${n.title}, GPU ${n.gpus}장, 상태 ${STATUS_LABEL[n.worst]}`}
+                    aria-pressed={isSel}
+                    onClick={() => activate(n)}
+                    onKeyDown={(e) => onKeyDown(e, n)}
+                  >
+                    <title>{`${n.title} · GPU ${formatCount(n.gpus)}장 · 사용률 ${formatPct(n.util, 1)}`}</title>
+                    <rect
+                      x={n.x}
+                      y={n.y}
+                      width={boxW}
+                      height={n.h}
+                      rx="8"
+                      fill="var(--card)"
+                      stroke={
+                        isSel ? 'var(--primary)' : hasFault ? 'var(--metric-fault)' : 'var(--border)'
+                      }
+                      strokeWidth={isSel ? 2 : hasFault ? 1.6 : 1}
+                    />
+                    {hasFault ? (
+                      <text
+                        x={n.x + boxW - 10}
+                        y={n.y + 19}
+                        fontSize="12"
+                        textAnchor="end"
+                        fill="var(--metric-fault)"
+                      >
+                        ⚠
+                      </text>
+                    ) : null}
+                    <text
+                      x={n.x + 12}
+                      y={n.y + 20}
+                      fontSize="13"
+                      fontWeight="600"
+                      fill="var(--foreground)"
+                    >
+                      {trunc(n.title, hasFault ? maxChars - 3 : maxChars)}
+                    </text>
+                    <text x={n.x + 12} y={n.y + 36} fontSize="10.5" fill="var(--muted-foreground)">
+                      {trunc(n.line1, maxChars + 4)}
+                    </text>
+                    {n.line2 ? (
+                      <text x={n.x + 12} y={n.y + 51} fontSize="10.5" fill="var(--muted-foreground)">
+                        {n.line2}
+                      </text>
+                    ) : null}
+                    {/* 워커 노드 GPU 칸 — device 순으로 한 줄에 상태색을 칠한다. */}
+                    {n.cells?.slice(0, GRID_MAX).map((c, i) => (
+                      <rect
+                        key={c.uuid}
+                        x={n.x + GRID_PAD_X + i * (cellW + GRID_GAP)}
+                        y={n.y + GRID_TOP}
+                        width={cellW}
+                        height={cellH}
+                        rx="2"
+                        fill={statusOf ? STATUS_COLOR[statusOf(c)] : `var(--util-band-${c.band})`}
+                      />
+                    ))}
+                  </g>
+                );
+              })}
+              {graph.more[col] > 0 ? (
+                <text
+                  x={xs[col] + boxW / 2}
+                  y={viewH - 12}
+                  fontSize="10"
+                  textAnchor="middle"
+                  fill="var(--muted-foreground)"
+                >
+                  +{formatCount(graph.more[col])}개 더
+                </text>
+              ) : null}
+            </g>
+          ))}
+        </svg>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/UtilLegend.tsx b/web/src/components/gpu/UtilLegend.tsx
new file mode 100644
index 0000000..99d514e
--- /dev/null
+++ b/web/src/components/gpu/UtilLegend.tsx
@@ -0,0 +1,42 @@
+// UtilLegend — 플릿 히트맵의 사용률 5단 대역 + 오버레이(장애/온도 이상/데이터
+// 없음) 범례. 대역 정의는 gpuMetrics UTIL_BANDS(SSOT)를 그대로 그린다.
+// Tailwind v4 스캐너는 정적 문자열만 발견하므로 `bg-util-band-${i}` 같은 동적
+// 조합 대신 아래 상수 배열로 고정한다 — 히트맵 셀(FleetHeatmap)과 공유.
+import { UTIL_BANDS } from '@/lib/gpuMetrics';
+
+/** index.css --util-band-N 토큰의 정적 클래스 매핑 (UTIL_BANDS.index 순서). */
+export const UTIL_BAND_CLASSES = [
+  'bg-util-band-0',
+  'bg-util-band-1',
+  'bg-util-band-2',
+  'bg-util-band-3',
+  'bg-util-band-4',
+] as const;
+
+export default function UtilLegend() {
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-muted-foreground text-xs">
+      <span className="font-medium text-foreground">범례</span>
+      {UTIL_BANDS.map((band) => (
+        <span key={band.index} className="flex items-center gap-1.5">
+          <span className={`size-3 rounded-[2px] ${UTIL_BAND_CLASSES[band.index]}`} />
+          {band.label}
+        </span>
+      ))}
+      <span className="flex items-center gap-1.5">
+        <span className="size-3 rounded-[2px] bg-util-band-2 ring-2 ring-metric-fault" />
+        장애
+      </span>
+      <span className="flex items-center gap-1.5">
+        <span className="relative size-3 rounded-[2px] bg-util-band-1">
+          <span className="-top-0.5 -right-0.5 absolute size-1.5 rounded-full bg-metric-thermal" />
+        </span>
+        온도 이상
+      </span>
+      <span className="flex items-center gap-1.5">
+        <span className="size-3 rounded-[2px] border border-muted-foreground/50 border-dashed bg-transparent" />
+        데이터 없음
+      </span>
+    </div>
+  );
+}
diff --git a/web/src/components/gpu/VictimMetricChart.tsx b/web/src/components/gpu/VictimMetricChart.tsx
new file mode 100644
index 0000000..02477fc
--- /dev/null
+++ b/web/src/components/gpu/VictimMetricChart.tsx
@@ -0,0 +1,119 @@
+// VictimMetricChart — demo3 GPU Assistant 의 "주요 지표" 미니차트 한 칸.
+// 상단 라벨 + 대형 현재값(지표 색) + 하단 영역 추이. victim GPU 한 장의 온도·
+// ECC·사용률을 useVictimSeries 가 공급한다. 색은 var(--metric-*) 직접 참조
+// (Recharts 원시 컴포넌트 — GpuServing 의 CSP-안전 셋업 미러).
+import { Area, AreaChart, ReferenceLine, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export interface VictimMetricChartProps {
+  label: string;
+  /** 대형 현재값(이미 포맷된 문자열, 예: "82°C"). null → Skeleton. */
+  valueText: string | null;
+  /** 지표 색 — CSS 변수(예: 'var(--metric-thermal)'). */
+  color: string;
+  values: number[];
+  /** Y축 상한 고정(사용률 100 등). 생략하면 데이터 최대에 맞춘다. */
+  domainMax?: number;
+  /** 표본 시각(epoch 초, values 와 같은 길이). 주면 x축이 시각 눈금이 된다.
+   *  없으면 현행대로 인덱스 축(눈금 없음). */
+  times?: number[];
+  /** 장애 시점(epoch 초) — 빨간 점선 마커. times 가 있어야 위치가 정해진다.
+   *  창(30분) 밖이면 Recharts 가 그리지 않는다(도메인 밖). */
+  markerAt?: number;
+}
+
+/** "82.3°C" → ["82.3", "°C"] / "128 count" → ["128", "count"]. 앞의 수치 덩어리만
+ *  떼어낸다 — 수치가 없으면 통째로 앞칸에 둔다(단위만 있는 값은 없다). */
+function splitUnit(text: string): [string, string] {
+  const m = text.match(/^([\d.,+-]+)\s*(.*)$/);
+  return m ? [m[1], m[2]] : [text, ''];
+}
+
+/** epoch 초 → "14:20". x축 눈금은 분까지면 충분하다. */
+function hhmm(sec: number): string {
+  const d = new Date(sec * 1000);
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+
+export default function VictimMetricChart({
+  label,
+  valueText,
+  color,
+  values,
+  domainMax,
+  times,
+  markerAt,
+}: VictimMetricChartProps) {
+  const timed = times !== undefined && times.length === values.length;
+  const rows = values.map((v, i) => ({ i: timed ? times[i] : i, v }));
+  return (
+    <div className="flex flex-col gap-1 rounded-md border bg-card p-3">
+      <span className="text-muted-foreground text-xs">{label}</span>
+      {valueText === null ? (
+        <Skeleton className="h-7 w-16" />
+      ) : (
+        // 목업은 "128 count" 를 숫자만 크게(지표 색) 두고 단위는 작은 회색으로 흘린다 —
+        // 단위까지 24px 로 키우면 세 칸이 서로 다른 폭으로 요란해진다.
+        <span className="flex items-baseline gap-1">
+          <span className="font-semibold text-2xl leading-tight tabular-nums" style={{ color }}>
+            {splitUnit(valueText)[0]}
+          </span>
+          {splitUnit(valueText)[1] ? (
+            <span className="text-muted-foreground text-xs">{splitUnit(valueText)[1]}</span>
+          ) : null}
+        </span>
+      )}
+      <div className="mt-1 h-24">
+        {rows.length < 2 ? (
+          <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
+            데이터 수집 중…
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={rows} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
+              <YAxis
+                domain={[0, domainMax ?? 'dataMax']}
+                width={30}
+                tick={{ fontSize: 10 }}
+                className="fill-muted-foreground"
+                axisLine={false}
+                tickLine={false}
+              />
+              {timed ? (
+                <XAxis
+                  dataKey="i"
+                  type="number"
+                  domain={['dataMin', 'dataMax']}
+                  tickFormatter={hhmm}
+                  height={16}
+                  tick={{ fontSize: 10 }}
+                  className="fill-muted-foreground"
+                  axisLine={false}
+                  tickLine={false}
+                />
+              ) : null}
+              {timed && markerAt ? (
+                <ReferenceLine
+                  x={markerAt}
+                  stroke="var(--metric-fault)"
+                  strokeDasharray="4 4"
+                  ifOverflow="hidden"
+                />
+              ) : null}
+              <Area
+                type="monotone"
+                dataKey="v"
+                stroke={color}
+                strokeWidth={2}
+                fill={color}
+                fillOpacity={0.12}
+                dot={false}
+                isAnimationActive={false}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/layout/HeaderExtras.tsx b/web/src/components/layout/HeaderExtras.tsx
new file mode 100644
index 0000000..b87632c
--- /dev/null
+++ b/web/src/components/layout/HeaderExtras.tsx
@@ -0,0 +1,214 @@
+// HeaderExtras — 상단 헤더 부품 모음(전역 검색·실시간 시계·알림·도움말·사용자).
+//
+// 각 부품은 서로를 모른다. 배치는 Shell 이 한다 — 헤더는 화면 폭에 따라 구성이
+// 바뀌는 자리라서, 부품을 한 덩어리로 묶어두면 배치를 못 바꾼다.
+import { useEffect, useState, useMemo } from 'react';
+import { Bell, CircleHelp, Search } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { NAV_TOP, visibleGroups } from '@/lib/navigation';
+
+/** 검색 후보 = 좌측 메뉴에 실제로 보이는 화면만. 미구현 항목을 노출하면
+ *  "검색은 되는데 안 열린다"가 되고, 데모에서 감춘 화면을 노출하면 메뉴에서
+ *  치운 것을 검색이 도로 꺼내 준다 — 두 목록은 같은 필터를 써야 한다.
+ *  navigation.ts 가 SSOT. */
+function searchItems(demo: boolean) {
+  return NAV_TOP.flatMap((top) =>
+    visibleGroups(top, demo).flatMap((group) =>
+      group.items.map((leaf) => ({
+        label: leaf.label,
+        to: leaf.to as string,
+        section: top.label,
+      })),
+    ),
+  );
+}
+
+/** 전역 검색 — Ctrl/Cmd + K 커맨드 팔레트. */
+export function GlobalSearch({
+  onNavigate,
+  demo = false,
+}: {
+  onNavigate?: (to: string) => void;
+  demo?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const items = useMemo(() => searchItems(demo), [demo]);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key !== 'k' || !(e.metaKey || e.ctrlKey)) return;
+      // 입력 중인 필드에서는 브라우저·앱 단축키를 가로채지 않는다.
+      const el = document.activeElement;
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return;
+      e.preventDefault();
+      setOpen((v) => !v);
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="전역 검색"
+        className="flex h-9 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--card)] px-3 text-sm text-[var(--muted-foreground)] transition-colors hover:bg-accent md:w-96"
+      >
+        <Search className="size-4 shrink-0" />
+        <span className="hidden truncate md:inline">
+          클러스터, 노드, GPU, 테넌트, 이벤트 검색…
+        </span>
+        <kbd className="ml-auto hidden shrink-0 rounded border border-[var(--border)] px-1.5 py-0.5 text-[11px] md:inline">
+          Ctrl + K
+        </kbd>
+      </button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent showCloseButton={false} className="overflow-hidden p-0">
+          <DialogTitle className="sr-only">전역 검색</DialogTitle>
+          <Command>
+            <CommandInput placeholder="클러스터, 노드, GPU, 테넌트, 이벤트 검색…" />
+            <CommandList>
+              <CommandEmpty>결과가 없습니다.</CommandEmpty>
+              <CommandGroup heading="화면 이동">
+                {items.map((item) => (
+                  <CommandItem
+                    key={item.to}
+                    value={`${item.label} ${item.section}`}
+                    onSelect={() => {
+                      setOpen(false);
+                      onNavigate?.(item.to);
+                    }}
+                  >
+                    <span>{item.label}</span>
+                    <span className="ml-auto text-xs text-[var(--muted-foreground)]">
+                      {item.section}
+                    </span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+/** 실시간 표시 + 현재 시각(KST). */
+export function LiveClock() {
+  const [now, setNow] = useState(() => new Date());
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-3 text-sm whitespace-nowrap">
+      <span className="flex items-center gap-1.5">
+        <span
+          className="size-2 rounded-full"
+          style={{ background: 'var(--metric-pod)' }}
+          aria-hidden
+        />
+        실시간
+      </span>
+      <span className="text-[var(--muted-foreground)] tabular-nums">
+        {now.toLocaleTimeString('ko-KR', { hour12: false, timeZone: 'Asia/Seoul' })} (KST)
+      </span>
+    </div>
+  );
+}
+
+/** 알림 벨 + 미확인 건수 배지. */
+export function NotificationBell({ count = 0, onClick }: { count?: number; onClick?: () => void }) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="relative"
+      onClick={onClick}
+      aria-label={count > 0 ? `알림 ${count}건` : '알림'}
+    >
+      <Bell />
+      {count > 0 && (
+        <span
+          className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-none font-medium text-white"
+          style={{ background: 'var(--metric-fault)' }}
+        >
+          {count > 99 ? '99+' : count}
+        </span>
+      )}
+    </Button>
+  );
+}
+
+/** 도움말 — 단축키 안내. */
+export function HelpButton() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="도움말">
+          <CircleHelp />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-64 p-3 text-sm">
+        <p className="mb-2 font-medium">단축키</p>
+        {/* 실제로 동작하는 키만 적는다 — 구 '/' 행(현재 화면 내 검색)은 어디에도
+            핸들러가 없어, 시연 중 눌러 본 사람에게 "안내가 거짓"을 먼저 보였다. */}
+        <dl className="space-y-1.5 text-[var(--muted-foreground)]">
+          {[
+            ['Ctrl + K', '전역 검색'],
+            ['Esc', '창 닫기'],
+          ].map(([key, desc]) => (
+            <div key={key} className="flex items-center justify-between gap-3">
+              <dt>
+                <kbd className="rounded border border-[var(--border)] px-1.5 py-0.5 text-[11px]">
+                  {key}
+                </kbd>
+              </dt>
+              <dd>{desc}</dd>
+            </div>
+          ))}
+        </dl>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/** 사용자 아바타 — 이니셜 2글자 + 이름(sm 이상). */
+export function UserAvatar({ name = '관리자' }: { name?: string }) {
+  const words = name.trim().split(/\s+/);
+  const initials = (
+    words.length > 1 ? words.map((w) => w[0]).join('') : name.trim().slice(0, 2)
+  )
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        /* primary 위 전경색은 primary-foreground 다 — card 를 쓰면 다크모드에서
+           어두운 글자가 파란 원 위에 얹혀 읽히지 않는다. */
+        className="flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-medium text-[var(--primary-foreground)]"
+        style={{ background: 'var(--primary)' }}
+        aria-hidden
+      >
+        {initials}
+      </span>
+      <span className="hidden text-sm whitespace-nowrap sm:inline">{name}</span>
+    </div>
+  );
+}
diff --git a/web/src/components/layout/Shell.tsx b/web/src/components/layout/Shell.tsx
new file mode 100644
index 0000000..8ab3497
--- /dev/null
+++ b/web/src/components/layout/Shell.tsx
@@ -0,0 +1,407 @@
+// Shell — 공통 셸: 사이드바 네비 + 상단 대메뉴(테마·로그아웃).
+// 라우트 콘텐츠는 <Outlet/> 으로 렌더된다.
+//
+// 메뉴 구조 SSOT = lib/navigation.ts. 어느 모드에서도 *열리는 화면만* 그린다:
+// 미구현("준비 중") 항목은 노출하지 않고, 데모에서는 시연에 실제로 쓰는
+// 화면(DEMO_ROUTES)으로 한 번 더 좁힌다. 눌러서 아무 일도 안 일어나는 줄이
+// 목록의 다수를 차지하면 제품이 비어 보이고, 정작 눌러야 할 화면이 묻힌다.
+import { Cpu, LogOut, Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { NavLink, Outlet, useLocation, useNavigate } from 'react-router';
+import { useAuth } from '@/auth/AuthContext';
+import { productName, productTagline } from '@/lib/branding';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/components/ui/sidebar';
+import { formatBuildTime, useBuildInfo } from '@/hooks/useBuildInfo';
+import { useDemoStatus } from '@/hooks/useDemoStatus';
+import {
+  GlobalSearch,
+  HelpButton,
+  LiveClock,
+  NotificationBell,
+  UserAvatar,
+} from '@/components/layout/HeaderExtras';
+import {
+  type NavLeaf,
+  type NavTop,
+  titleForPath,
+  topById,
+  topForPath,
+  visibleGroups,
+  visibleTops,
+} from '@/lib/navigation';
+
+const THEME_KEY = 'nv-theme';
+
+/** 목업 좌측 하단 형식(2025.06.08 14:30:45). */
+function formatStamp(): string {
+  const d = new Date();
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}.${p(d.getMonth() + 1)}.${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+
+/** 기본값은 라이트다 — OS 선호를 따르지 않는다. 시각 기준선(docs/mockups/demo1·4·5)이
+ *  전부 라이트라, OS 가 다크인 발표자 노트북에서 열면 아무도 대조해 본 적 없는
+ *  화면이 시연에 나간다. 명시적으로 토글한 선택은 그대로 존중한다. */
+function initialDark(): boolean {
+  return localStorage.getItem(THEME_KEY) === 'dark';
+}
+
+function ThemeToggle() {
+  const [dark, setDark] = useState(initialDark);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', dark);
+  }, [dark]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label="테마 전환"
+      onClick={() => {
+        const next = !dark;
+        setDark(next);
+        localStorage.setItem(THEME_KEY, next ? 'dark' : 'light');
+      }}
+    >
+      {dark ? <Sun /> : <Moon />}
+    </Button>
+  );
+}
+
+function isLeafActive(item: NavLeaf, pathname: string): boolean {
+  if (!item.to) return false;
+  return item.exact ? pathname === item.to : pathname.startsWith(item.to);
+}
+
+/** 좌측 서브메뉴 — 상단에서 고른 대메뉴 중 *실제로 열리는* 항목만 렌더한다.
+ *  데모에서는 시연에 쓰는 화면(navigation.DEMO_ROUTES)으로 한 번 더 좁힌다:
+ *  준비 중 13개 + 시연 밖 구현 4개가 27줄 중 17줄이라, 남기면 정작 눌러야 할
+ *  10개가 죽은 줄 사이에 묻힌다. 눌러서 아무 일도 안 일어나는 줄은 두지 않는다. */
+function NavSubMenu({
+  top,
+  pathname,
+  demo,
+}: {
+  top: NavTop;
+  pathname: string;
+  demo: boolean;
+}) {
+  return (
+    <>
+      {visibleGroups(top, demo).map((group, gi) => (
+        <SidebarGroup key={group.label ?? `g${gi}`} className="py-1">
+          {group.label ? <SidebarGroupLabel>{group.label}</SidebarGroupLabel> : null}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {group.items.map((item) => (
+                <SidebarMenuItem key={item.label}>
+                  <SidebarMenuButton asChild isActive={isLeafActive(item, pathname)}>
+                    <NavLink to={item.to as string}>
+                      <span>{item.label}</span>
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ))}
+    </>
+  );
+}
+
+/** 상단 대메뉴. 클릭하면 그 대메뉴의 첫 화면으로 이동하고 좌측 서브메뉴가
+ *  통째로 바뀐다. 열리는 항목이 하나도 없는 탭(데모의 '관리' 등)은 눌러도 빈
+ *  사이드바뿐이라 아예 그리지 않는다. */
+function TopMenu({
+  activeId,
+  onSelect,
+  demo,
+}: {
+  activeId: string;
+  onSelect: (id: string) => void;
+  demo: boolean;
+}) {
+  return (
+    <nav className="flex items-center gap-0.5 overflow-x-auto" aria-label="대메뉴">
+      {visibleTops(demo).map((top) => {
+        const active = top.id === activeId;
+        return (
+          <button
+            key={top.id}
+            type="button"
+            onClick={() => onSelect(top.id)}
+            aria-current={active ? 'page' : undefined}
+            className={`flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm transition-colors ${
+              active
+                ? 'bg-accent font-medium text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+            }`}
+          >
+            <top.icon className="size-3.5 shrink-0" />
+            <span className="whitespace-nowrap">{top.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
+/** 헤더 알림 배지 — 미확인 Critical+Major 수. 데모가 아니면 질의하지 않는다.
+ *  각 화면의 상태 폴링과 별개로 가볍게 도는 전용 조회(30초). */
+function useHeaderAlertCount(enabled: boolean): number | undefined {
+  const [count, setCount] = useState<number | undefined>(undefined);
+  useEffect(() => {
+    if (!enabled) {
+      setCount(undefined);
+      return;
+    }
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const res = await fetch('/api/v1/demo/state', { credentials: 'include' });
+        if (!res.ok) return;
+        const body = (await res.json()) as {
+          data?: { alerts?: Array<{ severity: string; acked?: boolean }> };
+        };
+        if (cancelled) return;
+        const n = (body.data?.alerts ?? []).filter(
+          (a) => !a.acked && (a.severity === 'critical' || a.severity === 'major'),
+        ).length;
+        setCount(n);
+      } catch {
+        // 조용히 무시 — 배지는 보조 정보다.
+      }
+    };
+    tick();
+    const id = window.setInterval(() => {
+      if (!document.hidden) tick();
+    }, 30_000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+    };
+  }, [enabled]);
+  return count;
+}
+
+export default function Shell() {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const demoStatus = useDemoStatus();
+
+  const brand = productName(demoStatus?.enabled);
+  const tagline = productTagline(demoStatus?.enabled);
+  useEffect(() => {
+    document.title = brand;
+  }, [brand]);
+
+  // 타이틀·기본 펼침 섹션은 최장 프리픽스 매치로 고른다(navigation.ts) —
+  // startsWith 첫 매치는 /gpu/health 에서 '/gpu' 를 먼저 잡는 오판을 낸다.
+  const title = titleForPath(location.pathname);
+  // 데모는 시연 화면만 노출한다(navigation.DEMO_ROUTES). 실서비스는 구현된
+  // 화면 전부 — 거기서는 /explorer·/overview 도 정상 기능이다.
+  const demo = demoStatus?.enabled === true;
+
+  // 상단 대메뉴 선택 = 경로에서 유도하되, 사용자가 직접 고른 것이 있으면 그쪽이
+  // 우선한다 — 구현 화면이 없는 대메뉴(자원·토폴로지 등)를 눌렀을 때 경로는
+  // 그대로여도 좌측이 바뀌어야 한다.
+  const pathTop = topForPath(location.pathname);
+  const [pickedTop, setPickedTop] = useState<string | null>(null);
+  // 알림 벨 배지 — 미확인 Critical+Major 수. demo/state 를 헤더가 또 폴링하지
+  // 않도록 가벼운 전용 조회(30초)로 센다.
+  const alertCount = useHeaderAlertCount(demoStatus?.enabled === true);
+  // 사이드바 하단 갱신 시각 — 30초마다 한 번이면 충분하다(초 단위 시계는 헤더에 있다).
+  const [lastUpdate, setLastUpdate] = useState(() => formatStamp());
+  const build = useBuildInfo();
+  useEffect(() => {
+    const id = window.setInterval(() => setLastUpdate(formatStamp()), 30_000);
+    return () => window.clearInterval(id);
+  }, []);
+  const activeTopId = pickedTop ?? pathTop;
+  const activeTop = topById(activeTopId);
+
+  // 경로가 바뀌면(링크 이동) 수동 선택을 놓아준다 — 안 그러면 좌측 메뉴가
+  // 현재 화면과 다른 대메뉴에 머문다.
+  useEffect(() => {
+    setPickedTop(null);
+  }, [location.pathname]);
+
+  function onSelectTop(id: string) {
+    setPickedTop(id);
+    // 좌측에 실제로 그려질 첫 화면으로 이동한다 — 감춰진 항목으로 보내면
+    // 사이드바에는 없는 곳에 서 있게 된다.
+    const first = visibleGroups(topById(id), demo).flatMap((g) => g.items)[0];
+    if (first?.to && first.to !== location.pathname) navigate(first.to);
+  }
+
+  async function handleLogout() {
+    await logout();
+    navigate('/login', { replace: true });
+  }
+
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        {/* 브랜드 블록 — 목업(demo1/4/5) 좌상단은 [색 있는 마크] + 굵은 제품명 +
+            보조 한 줄이고, 우측 헤더 첫 줄(h-14)과 밑선이 맞는다. 기존은 14px
+            텍스트 한 줄뿐이라 제품 얼굴이 없었다. 마크는 lucide 아이콘 재사용 —
+            SVG 자산을 새로 만들 이유가 없다. */}
+        <SidebarHeader className="h-14 justify-center border-b p-0">
+          <div className="flex items-center gap-2.5 px-3">
+            <span
+              className="flex size-8 shrink-0 items-center justify-center rounded-lg text-[var(--primary-foreground)]"
+              style={{ background: 'var(--primary)' }}
+              aria-hidden
+            >
+              <Cpu className="size-4.5" />
+            </span>
+            <span className="flex min-w-0 flex-col leading-tight">
+              <span className="truncate text-base font-semibold">{brand}</span>
+              <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                {/* 데모 모드에서만 공동 브랜딩 — 실서비스 관제 콘솔에는 파트너
+                    로고가 붙지 않는다. */}
+                {demoStatus?.enabled ? (
+                  <img
+                    src="/brand/lguplus.svg"
+                    alt="LG U+"
+                    width={46}
+                    height={15}
+                    className="h-3 w-auto shrink-0"
+                  />
+                ) : null}
+                <span className="truncate">{tagline}</span>
+              </span>
+            </span>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          <NavSubMenu top={activeTop} pathname={location.pathname} demo={demo} />
+        </SidebarContent>
+        {/* 목업 demo4/demo5 좌측 하단과 같은 갱신 시각 — 관제 콘솔에서 "이 화면이
+            살아 있다"를 말해주는 한 줄이다. */}
+        <SidebarFooter className="border-t">
+          <div className="px-2 py-1 text-[11px] leading-tight text-muted-foreground">
+            <div>마지막 업데이트</div>
+            <div className="tabular-nums">{lastUpdate}</div>
+            {/* 위는 *데이터* 갱신 시각, 아래는 *배포* 시각 — 둘은 다른 사실이라
+                구분선을 두고 갈라 놓는다. 서버가 답하지 못하면 통째로 생략한다. */}
+            {build ? (
+              <div className="mt-1.5 border-t pt-1.5">
+                <div className="flex items-center gap-1">
+                  <span>버전</span>
+                  <span className="font-medium tabular-nums text-foreground">v{build.version}</span>
+                  {build.commit && build.commit !== 'unknown' ? (
+                    <span className="font-mono text-[10px] opacity-70">{build.commit}</span>
+                  ) : null}
+                </div>
+                <div className="tabular-nums">배포 {formatBuildTime(build.startedAt)}</div>
+              </div>
+            ) : null}
+          </div>
+        </SidebarFooter>
+      </Sidebar>
+      {/* min-w-0 는 선택이 아니다. flex 아이템의 기본 min-width 는 auto(=min-content)
+          라, 이게 없으면 본문에서 가장 넓은 표의 min-content 가 그대로 페이지 하한이
+          되어 문서 전체가 가로로 넘친다. 이것과 아래 행1 의 *:min-w-0 는 둘 다
+          있어야 성립한다 — 로그인(비-public) 1280 /gpu/ruleset 실측(같은 번들에
+          CSS 로 각 항을 껐다 켜며 짝지어 측정):
+            둘 다 없음 → 넘침 76px, 뷰포트 밖 요소 33개(룰셋 토글 15개 전부 포함)
+            여기 min-w-0 만  → 넘침 19px, [로그아웃] 이 아직 밖
+            아래 *:min-w-0 만 → 넘침 76px (변화 없음 — 본문 min-content 가 그대로 하한)
+            둘 다          → 넘침 0, 밖 0, 토글 15/15 화면 안
+          public 모드는 [로그아웃] 버튼(95px)이 없어 네 경우 모두 넘침 0 이다 —
+          public 만 재면 이 결함은 보이지 않는다. 재측정 시 두 모드를 다 켜라. */}
+      <SidebarInset className="min-w-0">
+        {/* 헤더는 두 줄이다. 대메뉴를 우측 클러스터(검색·시계·갱신·벨·도움말·
+            테마·아바타)와 같은 줄에 두면 둘이 폭을 다투는데, 우측은 shrink-0 이라
+            부족분을 대메뉴가 100% 떠안는다 — 실측(1440 뷰포트) 대메뉴 가시폭
+            184/713px 로 6개 중 1개만 보였고 1280 에서는 0개였다. 줄을 나누면
+            헤더 min-content 가 1714 → 993px 로 떨어져 1280~1920 전 구간에서
+            6개가 모두 보이고 문서 가로 넘침(1440→1696)도 사라진다. 전 라우트
+            공통 문제라 여기 한 곳에서 끝낸다. */}
+        {/* bg-card — 본문 배경이 옅은 회색이 되면서(index.css) 헤더는 흰 면으로
+            떠야 목업처럼 상단이 분리돼 보인다. 높이는 불변(h-14 + pb-2). */}
+        <header className="flex shrink-0 flex-col border-b bg-card">
+          {/* *:min-w-0 — 이 줄의 어떤 항목도 자기 콘텐츠 폭을 하한으로 주장하지
+              않는다. 실효 대상은 검색뿐이다(트리거·구분선·우측 클러스터는 이미
+              shrink-0 이라 줄지 않는다 — 실측: 전 자식 지정과 검색만 지정이 전
+              측정칸에서 동일, 트리거 28px 불변). 로그인 모드 1280 에서 검색이
+              384→308px 로 줄며 부족분 76px 를 흡수하고, placeholder 는 자체
+              truncate 로 말줄임된다(Ctrl+K 뱃지는 shrink-0 이라 그대로 남는다). */}
+          <div className="flex h-14 items-center gap-2 px-4 *:min-w-0">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="h-5" />
+            {/* 검색은 목업과 같이 좌측이다. 우측 클러스터 안에 두면 shrink-0 에
+                묶여 이 줄의 최소폭이 384px 만큼 커진다 — 좌측에 두면 좁은 폭에서
+                자신이 줄어 부족분을 흡수한다. */}
+            {demoStatus?.enabled ? <GlobalSearch onNavigate={(to) => navigate(to)} demo={demo} /> : null}
+            <div className="ml-auto flex shrink-0 items-center gap-1">
+              {/* 목업 헤더 7요소 — 데모에서만. 실서비스는 산출원(알림 카운트 등)이
+                  달라 기존 최소 구성을 유지한다. */}
+              {demoStatus?.enabled ? (
+                <>
+                  <LiveClock />
+                  {/* 벨은 배지가 세는 그 알림이 있는 곳으로 보낸다 — 미확인
+                      Critical+Major 를 세어 놓고 눌러도 아무 데도 못 가면
+                      배지가 셈만 하는 장식이 된다. 목적지(무음 장애 탐지)는
+                      같은 서버 알림 배열을 확인 버튼과 함께 그리는 화면이다.
+                      구 [자동 갱신 N초] 셀렉터는 여기서 뺐다 — 라벨만 바뀌고
+                      실제 폴링 주기는 각 화면 훅이 쥐고 있어 어떤 값을 골라도
+                      갱신 속도가 그대로였다(제어권을 헤더로 올리려면 전 화면을
+                      가로지르는 컨텍스트가 필요하다 — 별도 트랙). */}
+                  <NotificationBell
+                    count={alertCount}
+                    onClick={() => navigate('/gpu/health')}
+                  />
+                  <HelpButton />
+                </>
+              ) : null}
+              <ThemeToggle />
+              {demoStatus?.enabled ? <UserAvatar /> : null}
+              {/* public demo 는 로그인 자체가 없다 — 로그아웃 버튼을 두면 방문자를
+                  자격증명 없는 로그인 화면에 가두게 되므로 숨긴다. */}
+              {demoStatus?.public ? null : (
+                <Button variant="ghost" size="sm" onClick={handleLogout}>
+                  <LogOut />
+                  로그아웃
+                </Button>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center px-4 pb-2">
+            <TopMenu activeId={activeTopId} onSelect={onSelectTop} demo={demo} />
+          </div>
+        </header>
+        {/* 제목 위계 — 목업은 24px bold 한 개가 화면을 이끈다. 기존 18px 는 각
+            화면이 자체로 그리는 섹션 제목(18px)과 같은 크기라 둘이 중복으로
+            읽혔다. 단 블록 높이 총합은 유지한다 — GpuAssistant 가
+            h-[calc(100vh-10.5rem)] 로 헤더+제목 높이를 하드코딩해 두었다.
+            text-lg(leading 28px) → text-2xl(leading 32px) 의 +4px 를
+            gap-3 → gap-2 의 -4px 로 상쇄한다. */}
+        <main className="flex flex-1 flex-col gap-2 p-4">
+          <h1 className="text-2xl leading-8 font-bold tracking-tight">{title}</h1>
+          <Outlet />
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/web/src/components/ui/alert.tsx b/web/src/components/ui/alert.tsx
new file mode 100644
index 0000000..f99164e
--- /dev/null
+++ b/web/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
new file mode 100644
index 0000000..6eb2a05
--- /dev/null
+++ b/web/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..4d38506
--- /dev/null
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
new file mode 100644
index 0000000..acf57dc
--- /dev/null
+++ b/web/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/web/src/components/ui/collapsible.tsx b/web/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..63fc8ef
--- /dev/null
+++ b/web/src/components/ui/collapsible.tsx
@@ -0,0 +1,31 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/web/src/components/ui/command.tsx b/web/src/components/ui/command.tsx
new file mode 100644
index 0000000..994e735
--- /dev/null
+++ b/web/src/components/ui/command.tsx
@@ -0,0 +1,112 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+}
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..e5f0a96
--- /dev/null
+++ b/web/src/components/ui/dialog.tsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/web/src/components/ui/hover-card.tsx b/web/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..455e759
--- /dev/null
+++ b/web/src/components/ui/hover-card.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..f1124ae
--- /dev/null
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/web/src/components/ui/label.tsx b/web/src/components/ui/label.tsx
new file mode 100644
index 0000000..1ac80f7
--- /dev/null
+++ b/web/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
new file mode 100644
index 0000000..4ee703b
--- /dev/null
+++ b/web/src/components/ui/popover.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/web/src/components/ui/progress.tsx b/web/src/components/ui/progress.tsx
new file mode 100644
index 0000000..5a0a5a6
--- /dev/null
+++ b/web/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/web/src/components/ui/radio-group.tsx b/web/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..20416f0
--- /dev/null
+++ b/web/src/components/ui/radio-group.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
new file mode 100644
index 0000000..c68cf13
--- /dev/null
+++ b/web/src/components/ui/select.tsx
@@ -0,0 +1,148 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        position={position}
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
new file mode 100644
index 0000000..db91e97
--- /dev/null
+++ b/web/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..cb53bb2
--- /dev/null
+++ b/web/src/components/ui/sheet.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" &&
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" &&
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..9b9c0bc
--- /dev/null
+++ b/web/src/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..3ec6be7
--- /dev/null
+++ b/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/web/src/components/ui/slider.tsx b/web/src/components/ui/slider.tsx
new file mode 100644
index 0000000..46ebc4b
--- /dev/null
+++ b/web/src/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
new file mode 100644
index 0000000..fcfa0a2
--- /dev/null
+++ b/web/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..7f2c4f2
--- /dev/null
+++ b/web/src/components/ui/tabs.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..1e85bf9
--- /dev/null
+++ b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..d4d2254
--- /dev/null
+++ b/web/src/components/ui/tooltip.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/web/src/hooks/demoContext.ts b/web/src/hooks/demoContext.ts
new file mode 100644
index 0000000..ec4bdeb
--- /dev/null
+++ b/web/src/hooks/demoContext.ts
@@ -0,0 +1,28 @@
+// demoContext — GpuLayout 이 공급하는 데모 상태 컨텍스트. GPU 하위 페이지들은
+// useDemo() 하나로 (모드 여부, 시나리오 스냅샷, 액션 실행)을 얻는다.
+import { createContext, useContext } from 'react';
+import type { ActionOutcome, DemoAction, DemoActionBody, DemoState } from '@/lib/demoApi';
+
+export interface DemoContextValue {
+  /** null = /demo/status 판별 중, false = 실서비스(demo off). */
+  demoMode: boolean | null;
+  /** demo on + 백필 완료 후의 최신 스냅샷 (5s 폴링, 진행 장면 2s). */
+  state: DemoState | null;
+  /** 액션 실행 — 409 는 예외가 아닌 결과({ok:false})로 온다.
+   *  바디 타입은 demoApi 의 DemoActionBody 를 그대로 쓴다(액션별 필드의 합집합) —
+   *  좁히면 호출부가 객체 리터럴 초과 속성 검사에 걸려 우회 헬퍼가 필요해진다. */
+  act: (action: DemoAction, body?: DemoActionBody) => Promise<ActionOutcome>;
+  /** 액션 직후 즉시 재조회. */
+  refresh: () => void;
+}
+
+export const DemoContext = createContext<DemoContextValue>({
+  demoMode: null,
+  state: null,
+  act: async () => ({ ok: false, status: 0, error: 'DemoProvider 밖에서 호출됨' }),
+  refresh: () => {},
+});
+
+export function useDemo(): DemoContextValue {
+  return useContext(DemoContext);
+}
diff --git a/web/src/hooks/use-mobile.ts b/web/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/web/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/web/src/hooks/useBuildInfo.ts b/web/src/hooks/useBuildInfo.ts
new file mode 100644
index 0000000..8544a8d
--- /dev/null
+++ b/web/src/hooks/useBuildInfo.ts
@@ -0,0 +1,54 @@
+// useBuildInfo — 지금 콘솔이 붙어 있는 서버가 *어느 빌드* 이고 *언제 반영* 됐는지.
+//
+// 왜 필요한가: 시연 중 "지금 보시는 게 어느 빌드인가" 에 답할 수단이 화면에 없었다.
+// 사이드바 하단의 「마지막 업데이트」는 *데이터 갱신* 시각이라 배포와 무관하고,
+// 배포 버전을 알려면 kubectl 로 이미지 태그를 캐야 했다.
+//
+// 폴링하지 않는다 — 빌드 식별자는 프로세스 수명 동안 불변이고, startedAt 도
+// 파드가 새로 떠야만 바뀐다. 재배포되면 어차피 브라우저 세션이 끊기거나
+// 사용자가 새로고침한다. 30초마다 물어볼 이유가 없다.
+import { useEffect, useState } from 'react';
+
+import type { ApiEnvelope } from '@/lib/api';
+
+export interface BuildInfo {
+  version: string;
+  commit: string;
+  /** 이미지 빌드 시각(RFC3339). 로컬 빌드 등 미주입이면 없다. */
+  builtAt?: string;
+  /** 프로세스 기동 시각 = 이 빌드가 실제로 서비스에 반영된 시각. */
+  startedAt: string;
+  uptimeSeconds: number;
+}
+
+/** 서버가 답하지 못하면 null — 호출부는 표기를 생략한다(빈 값 렌더 금지). */
+export function useBuildInfo(): BuildInfo | null {
+  const [info, setInfo] = useState<BuildInfo | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const res = await fetch('/api/v1/version', { credentials: 'include' });
+        if (!res.ok) return;
+        const body = (await res.json()) as ApiEnvelope<BuildInfo>;
+        if (alive && body.data?.version) setInfo(body.data);
+      } catch {
+        // 구 백엔드(엔드포인트 부재)·네트워크 오류 → 표기 생략. 화면을 깨뜨리지 않는다.
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return info;
+}
+
+/** "2026-07-29T08:07:11Z" → "2026.07.29 17:07" (로컬 시간대). 파싱 실패는 원문 유지. */
+export function formatBuildTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}.${p(d.getMonth() + 1)}.${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
diff --git a/web/src/hooks/useDemoStatus.ts b/web/src/hooks/useDemoStatus.ts
new file mode 100644
index 0000000..343e1a1
--- /dev/null
+++ b/web/src/hooks/useDemoStatus.ts
@@ -0,0 +1,27 @@
+// useDemoStatus — /api/v1/demo/status 1회 조회의 모듈 캐시 훅. Shell 네비의
+// 데모 전용 항목 노출 판정 전용이라 재조회가 필요 없다(모드는 프로세스
+// 수명과 같다).
+import { useEffect, useState } from 'react';
+import { type DemoStatus, fetchDemoStatus } from '@/lib/demoApi';
+
+let cached: Promise<DemoStatus> | null = null;
+
+export function getDemoStatus(): Promise<DemoStatus> {
+  cached ??= fetchDemoStatus();
+  return cached;
+}
+
+/** null = 판별 중. */
+export function useDemoStatus(): DemoStatus | null {
+  const [status, setStatus] = useState<DemoStatus | null>(null);
+  useEffect(() => {
+    let live = true;
+    getDemoStatus().then((s) => {
+      if (live) setStatus(s);
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+  return status;
+}
diff --git a/web/src/hooks/useFleet.ts b/web/src/hooks/useFleet.ts
new file mode 100644
index 0000000..7e0f2ad
--- /dev/null
+++ b/web/src/hooks/useFleet.ts
@@ -0,0 +1,155 @@
+// useFleet — 플릿 히트맵 벽면의 데이터 훅. per-GPU util instant 1회(~7,000
+// 샘플)를 30s 폴링으로 받고, 셀 정렬·클러스터 청크·필터 옵션을 파생한다.
+// 서버 집계·정규식 매처가 없으므로 필터는 전량 클라이언트 사이드다.
+import { useMemo } from 'react';
+import { api } from '@/lib/api';
+import { bandForUtil, METRIC_GPU_UTIL } from '@/lib/gpuMetrics';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+
+export interface FleetCell {
+  instance: string;
+  device: string;
+  uuid: string;
+  model: string;
+  csp: string;
+  region: string;
+  cluster: string;
+  /** K8s 노드 풀 — 토폴로지의 클러스터↔노드 사이 계층. */
+  nodePool: string;
+  pool: string;
+  tenant: string;
+  /** 워크로드 종류 — 'inference' | 'training' | ''(미할당). 학습/추론 필터 축. */
+  workload: string;
+  util: number;
+  band: number;
+}
+
+/** 공통 검색 필터 — 전 화면이 같은 7개 차원을 쓴다(사용자 지시 2026-07-27).
+ *  csp/region/cluster/tenant/model 은 셀 라벨로, status 는 장애·온도·격리
+ *  집합으로, severity 는 알림 목록에 적용된다(셀에는 심각도가 없다). */
+export interface FleetFilter {
+  csp?: string;
+  region?: string;
+  cluster?: string;
+  pool?: string;
+  tenant?: string;
+  model?: string;
+  status?: string;
+  severity?: string;
+  /** 학습/추론 — 미지정(기본)이면 둘 다 본다. 'inference' | 'training'. */
+  workload?: string;
+}
+
+/** 셀 상태 5분류 — 서버 상황판(dashboard.gpus)의 key 와 같은 어휘를 쓴다. */
+export type CellStatus = 'normal' | 'degraded' | 'fault' | 'isolated' | 'recovering';
+
+export interface ClusterChunk {
+  key: string;
+  csp: string;
+  cells: FleetCell[];
+  /** 셀 대역 시그니처 — React.memo 비교자가 이 문자열로 재렌더를 스킵한다. */
+  signature: string;
+}
+
+export interface FleetOptions {
+  csps: string[];
+  regions: string[];
+  clusters: string[];
+  pools: string[];
+  tenants: string[];
+  models: string[];
+}
+
+const FLEET_POLL_MS = 30_000;
+
+function deviceOrder(device: string): number {
+  const n = Number.parseInt(device.replace(/^\D+/, ''), 10);
+  return Number.isNaN(n) ? 0 : n;
+}
+
+export function useFleet() {
+  const query = usePolledQuery(async () => {
+    const resp = await api.instantQuery(METRIC_GPU_UTIL);
+    const cells: FleetCell[] = resp.data.result.map((s) => {
+      const util = Number(s.value[1]);
+      return {
+        instance: s.metric.instance ?? '',
+        device: s.metric.device ?? '',
+        uuid: s.metric.gpu_uuid ?? `${s.metric.instance}/${s.metric.device}`,
+        model: s.metric.gpu_model ?? '',
+        csp: s.metric.csp ?? '',
+        region: s.metric.region ?? '',
+        cluster: s.metric.cluster ?? s.metric.instance ?? '',
+        nodePool: s.metric.node_pool ?? '',
+        pool: s.metric.pool ?? '',
+        tenant: s.metric.tenant ?? '',
+        workload: s.metric.workload ?? '',
+        util,
+        band: bandForUtil(util).index,
+      };
+    });
+    cells.sort(
+      (a, b) =>
+        a.csp.localeCompare(b.csp) ||
+        a.cluster.localeCompare(b.cluster) ||
+        a.instance.localeCompare(b.instance) ||
+        deviceOrder(a.device) - deviceOrder(b.device),
+    );
+    return cells;
+  }, FLEET_POLL_MS);
+
+  const cells = query.data;
+
+  // 필터 옵션은 벽면 응답 라벨에서 도출한다 — api.series 로 7,000 라벨셋을
+  // 중복 수신하지 않는다.
+  const options: FleetOptions = useMemo(() => {
+    const uniq = (values: string[]) => [...new Set(values.filter(Boolean))].sort();
+    return {
+      csps: uniq((cells ?? []).map((c) => c.csp)),
+      regions: uniq((cells ?? []).map((c) => c.region)),
+      clusters: uniq((cells ?? []).map((c) => c.cluster)),
+      pools: uniq((cells ?? []).map((c) => c.pool)),
+      tenants: uniq((cells ?? []).map((c) => c.tenant)),
+      models: uniq((cells ?? []).map((c) => c.model)),
+    };
+  }, [cells]);
+
+  return { cells, options, error: query.error, updatedAt: query.updatedAt, refresh: query.refresh };
+}
+
+/** statusOf 는 셀의 상태 분류자다 — 상태는 라벨이 아니라 장애·온도·격리
+ *  집합에서 나오므로 호출부(상태를 아는 화면)가 주입한다. 미주입이면 상태
+ *  필터는 무시된다(필터가 조용히 전부를 지우는 것보다 낫다). */
+export function applyFleetFilter(
+  cells: FleetCell[],
+  filter: FleetFilter,
+  statusOf?: (cell: FleetCell) => CellStatus,
+): FleetCell[] {
+  return cells.filter(
+    (c) =>
+      (!filter.csp || c.csp === filter.csp) &&
+      (!filter.region || c.region === filter.region) &&
+      (!filter.cluster || c.cluster === filter.cluster) &&
+      (!filter.pool || c.pool === filter.pool) &&
+      (!filter.tenant || c.tenant === filter.tenant) &&
+      (!filter.model || c.model === filter.model) &&
+      (!filter.workload || c.workload === filter.workload) &&
+      (!filter.status || !statusOf || statusOf(c) === filter.status),
+  );
+}
+
+/** 클러스터 단위 청크(≈250셀)로 묶는다 — 히트맵 memo 재렌더 단위. */
+export function groupClusterChunks(cells: FleetCell[]): ClusterChunk[] {
+  const byCluster = new Map<string, FleetCell[]>();
+  for (const c of cells) {
+    const list = byCluster.get(c.cluster);
+    if (list) list.push(c);
+    else byCluster.set(c.cluster, [c]);
+  }
+  return [...byCluster.entries()].map(([key, list]) => ({
+    key,
+    csp: list[0]?.csp ?? '',
+    cells: list,
+    signature: list.map((c) => c.band).join(''),
+  }));
+}
diff --git a/web/src/hooks/useLiveSeries.ts b/web/src/hooks/useLiveSeries.ts
new file mode 100644
index 0000000..231670d
--- /dev/null
+++ b/web/src/hooks/useLiveSeries.ts
@@ -0,0 +1,79 @@
+// useLiveSeries — 상황판 상단 실시간 스트립의 시계열 공급자.
+//
+// 한 번의 폴링에서 플릿 롤업 6종을 range 질의로 받아 스파크라인에 그대로
+// 먹인다. instant 값만 있으면 "지금 얼마"는 알아도 "오르는 중인지 내리는
+// 중인지"를 모른다 — 관제 화면에서 추세가 없는 숫자는 절반짜리다.
+//
+// 서버 셀렉터는 등호 매처만 지원하고 집계 함수가 없으므로, 여기서 쓰는 것은
+// 전부 엔진이 미리 집계해 둔 라벨 없는 롤업 시리즈다.
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type MatrixData, type ApiEnvelope } from '@/lib/api';
+import {
+  METRIC_DEMO_FLEET_ERR_PCT,
+  METRIC_DEMO_FLEET_P95,
+  METRIC_DEMO_FLEET_POWER_KW,
+  METRIC_DEMO_FLEET_RPS,
+  METRIC_DEMO_FLEET_TOKENS,
+  METRIC_DEMO_FLEET_UTIL_AVG,
+} from '@/lib/gpuMetrics';
+
+/** 되돌아볼 구간(초) — 30분. 15s 간격이라 시리즈당 ~120점으로, 스파크라인
+ *  폭(100 뷰박스)에 딱 맞고 응답도 가볍다. */
+const WINDOW_SEC = 1800;
+const STEP_SEC = 15;
+const POLL_MS = 15_000;
+
+export type LiveMetricKey = 'util' | 'rps' | 'p95' | 'tokens' | 'errPct' | 'powerKw';
+
+const SELECTORS: Record<LiveMetricKey, string> = {
+  util: METRIC_DEMO_FLEET_UTIL_AVG,
+  rps: METRIC_DEMO_FLEET_RPS,
+  p95: METRIC_DEMO_FLEET_P95,
+  tokens: METRIC_DEMO_FLEET_TOKENS,
+  errPct: METRIC_DEMO_FLEET_ERR_PCT,
+  powerKw: METRIC_DEMO_FLEET_POWER_KW,
+};
+
+export interface LiveSeries {
+  values: number[];
+  /** 마지막 값 — 큰 숫자로 보여주는 "지금". */
+  last: number | null;
+  /** 구간 시작 대비 변화량. 추세 배지의 근거. */
+  delta: number | null;
+}
+
+export type LiveSeriesMap = Record<LiveMetricKey, LiveSeries>;
+
+const EMPTY: LiveSeries = { values: [], last: null, delta: null };
+
+function toSeries(res: ApiEnvelope<MatrixData>): LiveSeries {
+  const pairs = res.data.result[0]?.values ?? [];
+  const values = pairs
+    .map(([, raw]) => Number(raw))
+    .filter((v) => Number.isFinite(v));
+  if (values.length === 0) return EMPTY;
+  const last = values[values.length - 1];
+  return { values, last, delta: values.length > 1 ? last - values[0] : null };
+}
+
+/** demoMode 가 확정(true)일 때만 질의한다 — 실서비스에는 이 시리즈가 없다. */
+export function useLiveSeries(demoMode: boolean | null) {
+  return usePolledQuery<LiveSeriesMap | null>(
+    async () => {
+      if (demoMode !== true) return null;
+      const end = Math.floor(Date.now() / 1000);
+      const start = end - WINDOW_SEC;
+      const keys = Object.keys(SELECTORS) as LiveMetricKey[];
+      const results = await Promise.all(
+        keys.map((k) => api.rangeQuery(SELECTORS[k], start, end, STEP_SEC)),
+      );
+      const out = {} as LiveSeriesMap;
+      keys.forEach((k, i) => {
+        out[k] = toSeries(results[i]);
+      });
+      return out;
+    },
+    POLL_MS,
+    [demoMode],
+  );
+}
diff --git a/web/src/hooks/usePolledQuery.ts b/web/src/hooks/usePolledQuery.ts
new file mode 100644
index 0000000..23447b4
--- /dev/null
+++ b/web/src/hooks/usePolledQuery.ts
@@ -0,0 +1,67 @@
+// usePolledQuery — Overview/Map 의 useEffect+setInterval 폴링 패턴을 훅으로
+// 일반화한다. 탭이 숨겨지면(visibilitychange) 폴링을 멈춘다 — 7,000셀 벽면의
+// 백그라운드 낭비 방지.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { UnauthorizedError } from '@/lib/api';
+
+export interface PolledQuery<T> {
+  data: T | null;
+  error: string | null;
+  updatedAt: number | null;
+  refresh: () => void;
+}
+
+export function usePolledQuery<T>(
+  fetcher: () => Promise<T>,
+  intervalMs: number,
+  deps: readonly unknown[] = [],
+): PolledQuery<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [updatedAt, setUpdatedAt] = useState<number | null>(null);
+  // fetcher 는 렌더마다 새 참조가 되기 쉬워 ref 로 고정하고, 재구독 트리거는
+  // 호출자가 deps 로 명시한다(콜백 아이덴티티에 이펙트를 묶지 않는 계약).
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+  const [tick, setTick] = useState(0);
+
+  const refresh = useCallback(() => setTick((n) => n + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      try {
+        const result = await fetcherRef.current();
+        if (cancelled) return;
+        setData(result);
+        setError(null);
+        setUpdatedAt(Date.now());
+      } catch (err) {
+        if (cancelled) return;
+        // 401 은 AuthContext 가 로그인 화면 전환으로 처리한다 — 여기서 오류
+        // 배너를 겹쳐 그리지 않는다(Overview 기존 관례).
+        if (err instanceof UnauthorizedError) return;
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    }
+
+    run();
+    const id = window.setInterval(() => {
+      if (!document.hidden) run();
+    }, intervalMs);
+    const onVisible = () => {
+      if (!document.hidden) run();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+    // eslint 부재 환경 — deps 는 호출자가 명시한 재구독 신호다.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: fetcher 는 ref 로 고정
+  }, [intervalMs, tick, ...deps]);
+
+  return { data, error, updatedAt, refresh };
+}
diff --git a/web/src/hooks/useVictimSeries.ts b/web/src/hooks/useVictimSeries.ts
new file mode 100644
index 0000000..dff49e8
--- /dev/null
+++ b/web/src/hooks/useVictimSeries.ts
@@ -0,0 +1,72 @@
+// useVictimSeries — demo3 GPU Assistant 의 "주요 지표" 미니차트 공급자.
+//
+// 장애 대상 GPU(victim) 한 장의 온도·ECC·사용률을 range 질의로 받아 미니차트에
+// 먹인다. 상황판 전체 롤업을 보는 useLiveSeries 와 달리, 여기서는 gpu_uuid 등호
+// 매처로 그 한 장의 시계열만 좁힌다(서버는 등호 매처만 지원 — selector() 로 조합).
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type ApiEnvelope, type MatrixData } from '@/lib/api';
+import { METRIC_GPU_ECC_UNC, METRIC_GPU_TEMP, METRIC_GPU_UTIL, selector } from '@/lib/gpuMetrics';
+
+// 30분 창, 15s 간격 → 시리즈당 ~120점. 미니차트 폭에 맞고 응답도 가볍다.
+const WINDOW_SEC = 1800;
+const STEP_SEC = 15;
+const POLL_MS = 15_000;
+
+export type VictimMetricKey = 'temp' | 'ecc' | 'util';
+
+const SELECTORS: Record<VictimMetricKey, string> = {
+  temp: METRIC_GPU_TEMP,
+  ecc: METRIC_GPU_ECC_UNC,
+  util: METRIC_GPU_UTIL,
+};
+
+export interface VictimSeries {
+  values: number[];
+  /** 각 값의 표본 시각(epoch 초) — 차트 x축 눈금과 장애 시점 마커의 기준.
+   *  values 와 같은 길이·같은 순서다. */
+  times: number[];
+  /** 마지막 값 — 큰 숫자로 보여주는 "지금". */
+  last: number | null;
+}
+
+export type VictimSeriesMap = Record<VictimMetricKey, VictimSeries>;
+
+const EMPTY: VictimSeries = { values: [], times: [], last: null };
+
+function toSeries(res: ApiEnvelope<MatrixData>): VictimSeries {
+  const pairs = res.data.result[0]?.values ?? [];
+  const values: number[] = [];
+  const times: number[] = [];
+  for (const [ts, raw] of pairs) {
+    const v = Number(raw);
+    // 결측(NaN)은 값과 시각을 함께 버린다 — 한쪽만 버리면 두 배열의 짝이 어긋난다.
+    if (!Number.isFinite(v)) continue;
+    values.push(v);
+    times.push(ts);
+  }
+  if (values.length === 0) return EMPTY;
+  return { values, times, last: values[values.length - 1] };
+}
+
+/** victim GPU 의 uuid 로 온도·ECC·사용률 시계열을 폴링한다. uuid 가 비었거나
+ *  데모 모드가 아니면 질의하지 않는다(실서비스에는 이 시나리오가 없다). */
+export function useVictimSeries(uuid: string | undefined, demoMode: boolean | null) {
+  return usePolledQuery<VictimSeriesMap | null>(
+    async () => {
+      if (demoMode !== true || !uuid) return null;
+      const end = Math.floor(Date.now() / 1000);
+      const start = end - WINDOW_SEC;
+      const keys = Object.keys(SELECTORS) as VictimMetricKey[];
+      const results = await Promise.all(
+        keys.map((k) => api.rangeQuery(selector(SELECTORS[k], { gpu_uuid: uuid }), start, end, STEP_SEC)),
+      );
+      const out = {} as VictimSeriesMap;
+      keys.forEach((k, i) => {
+        out[k] = toSeries(results[i]);
+      });
+      return out;
+    },
+    POLL_MS,
+    [uuid, demoMode],
+  );
+}
diff --git a/web/src/index.css b/web/src/index.css
new file mode 100644
index 0000000..1cc06c0
--- /dev/null
+++ b/web/src/index.css
@@ -0,0 +1,182 @@
+/* Tailwind v4 CSS-first (m5-design.md D6) — tailwind.config/postcss.config 없음.
+   @tailwindcss/vite 플러그인이 이 파일을 진입점으로 스캔한다.
+   토큰 = shadcn/ui zinc 기본 세트(cssVariables 모드). */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* 브랜드 원색 = 파랑. 목업(docs/mockups/demo1·4·5)의 주 버튼·활성 메뉴·아바타가
+   모두 파랑이라, shadcn zinc 기본값(primary=거의 검정)을 그대로 두면 같은 제품으로
+   보이지 않는다 — 실측: /gpu/remediation [격리 승인] 버튼이 검정, 목업 demo5
+   [재사용 검증 시작]은 파랑. 토큰 한 곳만 바꾸면 버튼·활성메뉴·링·아바타가 함께 돈다. */
+:root {
+  --radius: 0.625rem;
+  /* 본문은 옅은 청회색, 카드는 순백 — 목업에서 카드가 배경 위로 떠 보이는 이유가
+     이 대비다. 둘 다 흰색이면 shadow-sm 이 있어도 평평하게 읽힌다. */
+  --background: oklch(0.978 0.002 260);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.546 0.215 263);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  /* accent = 선택·호버 표면. 목업 활성 메뉴/선택 행이 연파랑 배경 + 파란 글씨다. */
+  --accent: oklch(0.955 0.025 258);
+  --accent-foreground: oklch(0.5 0.19 263);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.546 0.215 263);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  /* 사이드바는 순백 — 회색 본문과 대비되어 목업처럼 좌측 패널이 분리돼 보인다. */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.546 0.215 263);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.955 0.025 258);
+  --sidebar-accent-foreground: oklch(0.5 0.19 263);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.546 0.215 263);
+  /* 지표 고정색 (GPU 관제 규약) — GPU=자홍, 온도·전력=주황, CPU=파랑,
+     메모리=보라, POD=초록, 장애=빨강. 라이트/다크 동일 hue 유지가 요건이라
+     --chart-N(모드별 hue 상이)과 분리한다. */
+  --metric-gpu: oklch(0.62 0.24 350);
+  --metric-thermal: oklch(0.7 0.19 45);
+  --metric-cpu: oklch(0.55 0.2 255);
+  --metric-mem: oklch(0.55 0.23 295);
+  --metric-pod: oklch(0.63 0.17 150);
+  --metric-fault: oklch(0.58 0.24 27);
+  /* 사용률 5단 대역 (Idle/<30/<80/<95/≥95) — 플릿 히트맵·범례 공용 */
+  --util-band-0: oklch(0.88 0.002 286);
+  --util-band-1: oklch(0.72 0.17 150);
+  --util-band-2: oklch(0.75 0.16 60);
+  --util-band-3: oklch(0.62 0.21 27);
+  --util-band-4: oklch(0.44 0.18 27);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.62 0.2 263);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.33 0.05 263);
+  --accent-foreground: oklch(0.86 0.09 263);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.62 0.2 263);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.62 0.2 263);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.33 0.05 263);
+  --sidebar-accent-foreground: oklch(0.86 0.09 263);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.62 0.2 263);
+  /* 지표 고정색 — hue 는 라이트와 동일, 어두운 배경 대비만 보정 */
+  --metric-gpu: oklch(0.72 0.22 350);
+  --metric-thermal: oklch(0.76 0.17 45);
+  --metric-cpu: oklch(0.68 0.17 255);
+  --metric-mem: oklch(0.68 0.2 295);
+  --metric-pod: oklch(0.72 0.17 150);
+  --metric-fault: oklch(0.68 0.21 25);
+  --util-band-0: oklch(0.32 0.004 286);
+  --util-band-1: oklch(0.66 0.16 150);
+  --util-band-2: oklch(0.7 0.15 60);
+  --util-band-3: oklch(0.6 0.2 27);
+  --util-band-4: oklch(0.42 0.17 27);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-metric-gpu: var(--metric-gpu);
+  --color-metric-thermal: var(--metric-thermal);
+  --color-metric-cpu: var(--metric-cpu);
+  --color-metric-mem: var(--metric-mem);
+  --color-metric-pod: var(--metric-pod);
+  --color-metric-fault: var(--metric-fault);
+  --color-util-band-0: var(--util-band-0);
+  --color-util-band-1: var(--util-band-1);
+  --color-util-band-2: var(--util-band-2);
+  --color-util-band-3: var(--util-band-3);
+  --color-util-band-4: var(--util-band-4);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* 로딩 자리표시는 무채색이어야 한다. shadcn Skeleton 은 bg-accent 를 쓰는데
+   accent 를 연파랑(선택 표면)으로 돌리자 로딩 중 화면이 파란 슬래브 덩어리가
+   됐다 — 실측 /gpu/remediation·/gpu/serving 로딩 중 본문 전체가 파랑. 선택
+   표면과 로딩 표면은 역할이 달라 여기서 갈라놓는다(컴포넌트는 건드리지 않는다).
+   @layer 밖에 둔다 — @layer base 안에 두면 utilities 레이어의 bg-accent 가
+   이긴다(1차 시도 실패 원인). 레이어 없는 규칙이 레이어 규칙을 이긴다. */
+[data-slot='skeleton'] {
+  background-color: var(--muted);
+}
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
new file mode 100644
index 0000000..19fa283
--- /dev/null
+++ b/web/src/lib/api.ts
@@ -0,0 +1,154 @@
+// api.ts — observatory API 클라이언트 (m5-design.md §4.1).
+// 모든 호출은 credentials:'include' 로 세션 쿠키를 동봉하고, 보호 엔드포인트의
+// 401 은 등록된 핸들러(AuthContext)로 통지해 로그인 화면 전환을 일으킨다.
+// 번들에 시크릿/토큰 0 — 인증 상태는 전적으로 HttpOnly 쿠키가 담는다.
+
+export class UnauthorizedError extends Error {
+  constructor(path: string) {
+    super(`observatory: 401 unauthorized — ${path}`);
+    this.name = 'UnauthorizedError';
+  }
+}
+
+type UnauthorizedHandler = () => void;
+
+let onUnauthorized: UnauthorizedHandler | null = null;
+
+/** AuthContext 가 마운트 시 등록 — 보호 API 401 수신 시 anon 전환 콜백. */
+export function setUnauthorizedHandler(handler: UnauthorizedHandler | null): void {
+  onUnauthorized = handler;
+}
+
+// notify=false 는 로그인/로그아웃 자체의 401(자격 오류)이 세션만료 통지와
+// 섞이지 않게 한다 — 실패 표시는 호출자(Login 폼)가 담당.
+async function request(path: string, init: RequestInit, notify: boolean): Promise<Response> {
+  const res = await fetch(path, { credentials: 'include', ...init });
+  if (res.status === 401) {
+    if (notify) onUnauthorized?.();
+    throw new UnauthorizedError(path);
+  }
+  if (!res.ok) {
+    throw new Error(`observatory: HTTP ${res.status} — ${path}`);
+  }
+  return res;
+}
+
+async function apiFetch<T>(path: string): Promise<T> {
+  const res = await request(path, {}, true);
+  return (await res.json()) as T;
+}
+
+/** JSON POST — 데모 액션 등 쓰기 계열 공용 헬퍼(세션 쿠키·401 통지는 request 공통). */
+export async function apiPostJson<T>(path: string, body?: unknown): Promise<T> {
+  const init: RequestInit = { method: 'POST' };
+  if (body !== undefined) {
+    init.headers = { 'Content-Type': 'application/json' };
+    init.body = JSON.stringify(body);
+  }
+  const res = await request(path, init, true);
+  return (await res.json()) as T;
+}
+
+/** 상태 코드까지 필요할 때(409 등 도메인 거절 처리)의 raw POST. */
+export async function apiPostRaw(path: string, body?: unknown): Promise<Response> {
+  const init: RequestInit = { method: 'POST', credentials: 'include' };
+  if (body !== undefined) {
+    init.headers = { 'Content-Type': 'application/json' };
+    init.body = JSON.stringify(body);
+  }
+  const res = await fetch(path, init);
+  if (res.status === 401) {
+    onUnauthorized?.();
+    throw new UnauthorizedError(path);
+  }
+  return res;
+}
+
+// ---- 응답 스키마 (Prometheus HTTP API 호환 봉투) ----
+
+export interface ApiEnvelope<T> {
+  status: 'success';
+  data: T;
+}
+
+export interface InstantSample {
+  metric: Record<string, string>;
+  value: [number, string];
+}
+
+export interface VectorData {
+  resultType: 'vector';
+  result: InstantSample[];
+}
+
+export interface RangeSeries {
+  metric: Record<string, string>;
+  values: Array<[number, string]>;
+}
+
+export interface MatrixData {
+  resultType: 'matrix';
+  result: RangeSeries[];
+}
+
+export type SeriesData = Array<Record<string, string>>;
+
+export type LabelsData = string[];
+
+// ---- API 표면 ----
+
+export const api = {
+  /** POST /api/v1/auth/login — 성공 204(세션 쿠키 발급), 실패 UnauthorizedError. */
+  async login(username: string, password: string): Promise<void> {
+    await request(
+      '/api/v1/auth/login',
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      },
+      false,
+    );
+  },
+
+  /** POST /api/v1/auth/logout — 항상 204 (본문·Content-Type 없음). */
+  async logout(): Promise<void> {
+    await request('/api/v1/auth/logout', { method: 'POST' }, false);
+  },
+
+  /** GET /api/v1/query — instant vector. */
+  instantQuery(selector: string): Promise<ApiEnvelope<VectorData>> {
+    const params = new URLSearchParams({ query: selector });
+    return apiFetch(`/api/v1/query?${params.toString()}`);
+  },
+
+  /** GET /api/v1/query_range — matrix (M3-lite, 초 단위 start/end/step). */
+  rangeQuery(
+    selector: string,
+    startSec: number,
+    endSec: number,
+    stepSec: number,
+  ): Promise<ApiEnvelope<MatrixData>> {
+    const params = new URLSearchParams({
+      query: selector,
+      start: String(startSec),
+      end: String(endSec),
+      step: String(stepSec),
+    });
+    return apiFetch(`/api/v1/query_range?${params.toString()}`);
+  },
+
+  /** GET /api/v1/series — match[] 반복 파라미터. */
+  series(matches: string[]): Promise<ApiEnvelope<SeriesData>> {
+    const params = new URLSearchParams();
+    for (const m of matches) {
+      params.append('match[]', m);
+    }
+    return apiFetch(`/api/v1/series?${params.toString()}`);
+  },
+
+  /** GET /api/v1/labels — 최경량 보호 엔드포인트(인증 프로브 겸용). */
+  labels(): Promise<ApiEnvelope<LabelsData>> {
+    return apiFetch('/api/v1/labels');
+  },
+};
diff --git a/web/src/lib/branding.ts b/web/src/lib/branding.ts
new file mode 100644
index 0000000..a06772e
--- /dev/null
+++ b/web/src/lib/branding.ts
@@ -0,0 +1,11 @@
+// branding — 데모 모드 제품 네이밍 SSOT. 데모 인스턴스(임원 시연)에서는 콘솔이
+// "GpuManager" 로 브랜딩되고, 실서비스는 기존 명칭을 유지한다.
+// (/api/v1/demo/status 는 비인증이라 로그인 화면에서도 판별 가능.)
+
+export function productName(demoEnabled: boolean | null | undefined): string {
+  return demoEnabled ? 'GpuManager' : 'NodeVitals Observatory';
+}
+
+export function productTagline(demoEnabled: boolean | null | undefined): string {
+  return demoEnabled ? '멀티클라우드 GPU 플릿 매니저' : '관제 콘솔';
+}
diff --git a/web/src/lib/demoApi.ts b/web/src/lib/demoApi.ts
new file mode 100644
index 0000000..872d2e1
--- /dev/null
+++ b/web/src/lib/demoApi.ts
@@ -0,0 +1,731 @@
+// demoApi.ts — /api/v1/demo/* 클라이언트 + 타입 SSOT.
+// 백엔드 internal/demo 의 Snapshot JSON 계약을 미러한다. Go 의 nil 슬라이스는
+// null 로 직렬화되므로 모든 배열 필드는 수신 시 [] 로 정규화한다(방어 파싱).
+import { type ApiEnvelope, apiPostRaw } from '@/lib/api';
+
+export interface DemoStatus {
+  enabled: boolean;
+  ready: boolean;
+  /** public demo — 조회 API 인증 해제 상태. 로그인/로그아웃 UI 를 숨기는 근거. */
+  public: boolean;
+  /** 재시딩 백필 진행 중 — 그동안 상태 조회가 잠깐 멎는다. */
+  reseeding?: boolean;
+}
+
+export type ScenarioPhase =
+  | 'normal'
+  | 'degrading'
+  | 'awaiting-approval'
+  | 'draining'
+  | 'replacing'
+  | 'burnin-1'
+  | 'burnin-failed'
+  | 'burnin-2'
+  | 'ready-to-return'
+  | 'returned';
+
+export type DemoAction =
+  | 'approve-isolation'
+  | 'start-burnin'
+  | 'return-to-service'
+  | 'reset'
+  | 'register-idle-reason'
+  | 'report-false-positive'
+  | 'set-mode'
+  | 'configure-burnin'
+  | 'jump-phase'
+  | 'ack-alert'
+  | 'reseed'
+  // 화면 증분 5종 — 장애 룰셋 토글 / 유휴 재사용 검증 / 사전검증.
+  | 'set-rule-enabled'
+  | 'start-idle-validation'
+  | 'return-idle-to-service'
+  | 'start-precheck'
+  | 'start-reuse-burnin';
+
+/** 복구 개입 수준 — 시나리오 자동 전이 규칙을 실제로 바꾼다.
+ *  observe=승인 대기에서 무한 정지 / approve=타임아웃 후 자동 승인(기본) /
+ *  limited-auto=degrading 종료 시 승인 단계를 건너뛰고 즉시 격리. */
+export type RemediationMode = 'observe' | 'approve' | 'limited-auto';
+
+/** 모드 셀렉터 항목 — 하드코딩하지 않고 서버 목록으로 렌더한다. */
+export interface ModeOption {
+  id: RemediationMode;
+  label: string;
+  describe: string;
+}
+
+/** 단계 점프 목록 항목(서버가 순서대로 준다). */
+export interface PhaseOption {
+  id: ScenarioPhase;
+  label: string;
+  index: number;
+}
+
+/** CSP 정비 예정으로 자동복구를 보류 중인 노드 — 서버가 실제 플릿에서 고른다. */
+export interface MaintenanceLock {
+  instance: string;
+  csp: string;
+  window: string;
+  reason: string;
+}
+
+/** 액션 요청 바디 — 액션별 필드의 합집합(전부 선택).
+ *  demoContext 의 act() 도 이 타입을 그대로 받는다(좁히면 호출부가 객체 리터럴
+ *  초과 속성 검사에 걸려 우회 래퍼가 필요해진다). */
+export interface DemoActionBody {
+  uuid?: string;
+  reason?: string;
+  note?: string;
+  mode?: RemediationMode;
+  phase?: ScenarioPhase;
+  profile?: string;
+  durationMin?: number;
+  targetUtilPct?: number;
+  /** ack-alert 대상 알림 ID. */
+  id?: number;
+  /** reseed 시드 — 생략하면 서버가 시각에서 파생한다(매번 새 플릿). */
+  seed?: number;
+  /** set-rule-enabled 대상 룰 코드. */
+  code?: string;
+  /** set-rule-enabled 적용 여부. 불리언이 아닌 이유는 서버 params() 가 빈값
+   *  키를 드롭하는 부분 갱신 계약이라 false 가 "미지정"과 섞이기 때문이다. */
+  enabled?: 'on' | 'off';
+}
+
+export interface Deduction {
+  code: string;
+  message: string;
+  penalty: number;
+}
+
+export interface HealthResult {
+  score: number;
+  deductions: Deduction[];
+}
+
+export interface StepState {
+  key: 'cordon' | 'drain' | 'taint';
+  label: string;
+  status: 'pending' | 'running' | 'done';
+}
+
+export interface DrainState {
+  active: boolean;
+  progress: number;
+  inflightTotal: number;
+  inflight: number;
+  podsTotal: number;
+  podsEvicted: number;
+  droppedRequests: number;
+  steps: StepState[];
+}
+
+export interface CheckItem {
+  id: string;
+  label: string;
+  status: 'pending' | 'running' | 'pass' | 'warn';
+}
+
+export interface BurninState {
+  active: boolean;
+  attempt: number;
+  profile: string;
+  /** 운영자 설정값 — configure-burnin 으로 저장하면 부하 곡선이 실제로 바뀐다. */
+  targetUtilPct: number;
+  /** 운영자 설정값 — 번인 단계 길이(분). */
+  durationMin: number;
+  progress: number;
+  checklist: CheckItem[];
+  verdict?: string;
+}
+
+export interface VictimState {
+  instance: string;
+  device: string;
+  uuid: string;
+  model: string;
+  csp: string;
+  cluster: string;
+  pool: string;
+  health: HealthResult;
+  drain: DrainState;
+  burnin: BurninState;
+}
+
+export interface ScenarioState {
+  phase: ScenarioPhase;
+  phaseIndex: number;
+  phaseStartAt: number;
+  phaseDeadline: number;
+  /** false = 자동 전이 정지(관찰 모드 + 승인 대기) — 승인해야 진행된다. */
+  autoAdvance: boolean;
+  pendingAction?: DemoAction;
+  /** 현재 복구 개입 수준 — 셀렉터의 선택 상태 진실(SSOT). */
+  mode: RemediationMode;
+  modeOptions: ModeOption[];
+  /** 시연 제어용 단계 점프 목록(순서대로). */
+  phases: PhaseOption[];
+  /** CSP 정비 예정으로 자동복구를 보류 중인 노드(실제 플릿 개체). */
+  maintenanceLocks: MaintenanceLock[];
+  victim: VictimState;
+}
+
+/** 서빙 풀 1개 요약 — kind 가 학습/추론 축을 가른다(백엔드 PoolSummary 미러). */
+export interface PoolSummary {
+  id: string;
+  display: string;
+  tenant: string;
+  /** 'inference' | 'training' */
+  kind: string;
+  allocated: number;
+}
+
+export interface CSPSummary {
+  id: string;
+  display: string;
+  adapter: 'native' | 'mock';
+  gpuTotal: number;
+  allocated: number;
+  faulted: number;
+  allocPct: number;
+}
+
+/** 상황판 한 칸 — tone 이 색을 정한다(라벨 문자열로 색을 추론하지 않는다). */
+export interface StatusCount {
+  key: string;
+  label: string;
+  count: number;
+  tone: 'ok' | 'info' | 'warn' | 'major' | 'crit' | 'muted';
+}
+
+/** 통합 상황판 분류 집계 — 서버가 한 번만 분류해 화면끼리 숫자가 어긋나지 않게 한다. */
+export interface Dashboard {
+  alerts: StatusCount[];
+  gpus: StatusCount[];
+  nodes: StatusCount[];
+  repair: StatusCount[];
+  collect: StatusCount[];
+}
+
+/** 장애 분석 체인의 한 계층. scope/total = 이 계층에서 장애가 닿는 GPU 수 /
+ *  그 계층의 전체 GPU 수. 위로 갈수록 분모만 커진다(분자 고정). */
+export interface ChainLink {
+  level: string;
+  value: string;
+  detail: string;
+  scope: number;
+  total: number;
+  tone: 'ok' | 'info' | 'warn' | 'major' | 'crit' | 'muted';
+}
+
+/** 장애의 워크로드 계층 영향 — links(GPU 수 축)와 축이 다르다. */
+export interface IncidentImpact {
+  gpus: number;
+  pods: number;
+  podsReady: number;
+  tenants: number;
+  services: number;
+  tenant: string;
+  namespace: string;
+  service: string;
+}
+
+/** 권장 조치 1단계 — 신규 상태가 아니라 시나리오 단계의 투영이다. */
+export interface IncidentAction {
+  seq: number;
+  key: string;
+  label: string;
+  detail: string;
+  status: 'pending' | 'running' | 'done';
+  /** 완료 시각(미완료면 없음). */
+  at?: number;
+}
+
+/** 장애 → GPU/MIG → 물리 서버 → K8s Node → Node Pool → Cluster → CSP/Region/AZ */
+export interface IncidentChain {
+  active: boolean;
+  code: string;
+  title: string;
+  severity: string;
+  phase: string;
+  /** *최근* 발생 시각(최신 victim 알림) — 알림마다 앞으로 당겨진다. */
+  at: number;
+  links: ChainLink[];
+  /** *최초* 발생 시각 — 지속 시간의 기준점은 at 이 아니라 이것이다. */
+  firstAt: number;
+  /** 이 장애에 딸린 알림·이벤트 수. */
+  eventCount: number;
+  /** 추정 근본 원인 1문장. */
+  cause: string;
+  /** victim 노드에서 실행 중인 파드명 / 같은 클러스터의 할당 GPU 수(파드 1:1). */
+  pods: string[];
+  podsTotal: number;
+  impact: IncidentImpact;
+  actions: IncidentAction[];
+}
+
+/** 리전 — 공통 필터 차원. */
+export interface RegionInfo {
+  id: string;
+  display: string;
+  csp: string;
+}
+
+/** 라벨은 시리즈가 살아 있었다면 붙었을 값 그대로다 — 에이전트가 죽었다고 그
+ *  GPU 의 소속까지 사라지진 않는다. 합성 셀이 이 값을 달아야 풀·테넌트·워크로드
+ *  필터에서 통째로 빠지지 않는다(할당 집계가 그 노드만큼 어긋나는 원인). */
+export interface MissingGPU {
+  uuid: string;
+  instance: string;
+  device: string;
+  csp: string;
+  cluster: string;
+  region: string;
+  nodePool?: string;
+  pool?: string;
+  tenant?: string;
+  workload?: string;
+}
+
+export interface FleetSummary {
+  gpuTotal: number;
+  nodeTotal: number;
+  allocated: number;
+  faulted: number;
+  tempAlerts: number;
+  agentMissing: number;
+  /** 저활용 GPU — 사용률 30% 미만. KPI "저활용 GPU" 소재(idleDays 기준 idle[] 과 다른 축). */
+  underutilized?: number;
+  /** 활성 워크로드 — 서빙 풀 replicasReady 합(Pod 기준). KPI 소재. */
+  activeWorkloads?: number;
+  /** 자동복구 성공률(%) — KPI 보조텍스트 소재. */
+  repairSuccessPct?: number;
+  csps: CSPSummary[];
+  /** 모델별 대수 + 평균 사용률(utilAvgPct) — 목업 "GPU 모델별 현황"의 우측 % 는 점유율이 아니라 사용률이다. */
+  models: Array<{ model: string; count: number; utilAvgPct?: number }>;
+  pools: PoolSummary[];
+  tenants: Array<{ id: string; display: string }>;
+  faultUuids: string[];
+  tempAlertUuids: string[];
+  missingInstances: string[];
+  /** Agent Missing 노드 소속 GPU — 벽면 '데이터 없음' 합성 셀의 근거(총 셀 = 인벤토리 전수 정합). */
+  missingGpus: MissingGPU[];
+  /** 공통 필터의 리전 차원. */
+  regions: RegionInfo[];
+}
+
+export interface AlertEvent {
+  /** 알림 고유 ID — 확인 처리 키(같은 시각에 여러 알림이 날 수 있어 at 은 식별자가 아니다). */
+  id: number;
+  at: number;
+  severity: 'info' | 'warning' | 'major' | 'critical';
+  code: string;
+  title: string;
+  instance?: string;
+  device?: string;
+  detail?: string;
+  /** 운영자 확인 처리 여부 — 서버가 기억하므로 새로고침 후에도 유지된다. */
+  acked?: boolean;
+  /** 진행 상태 — 이벤트 피드의 상태 배지 소재. 빈 값이면 배지 없음.
+   *  'auto-repair'(자동복구 실행 중) / 'repaired'(복구 성공) / 'resolved'(해결) /
+   *  'collect-lag'(수집 지연). */
+  status?: 'auto-repair' | 'repaired' | 'resolved' | 'collect-lag' | '';
+}
+
+export interface AuditEntry {
+  at: number;
+  actor: string;
+  action: string;
+  target?: string;
+  phaseFrom?: string;
+  phaseTo?: string;
+  evidence?: string;
+  result: string;
+}
+
+/** 유휴 GPU 1장의 재사용 검증 상태(개체별) — victim 전용 BurninState 와 다르다. */
+export interface IdleValidation {
+  verdict: 'idle' | 'validating' | 'ready' | 'failed';
+  precheck: 'none' | 'running' | 'pass' | 'fail';
+  burnin: 'none' | 'running' | 'pass' | 'fail';
+  /** 번인 진행률(0~100) — running 일 때만 의미가 있다. */
+  burninProgress?: number;
+  /** 최근 검증 완료 시각(미실행이면 0). */
+  lastAt?: number;
+}
+
+export interface IdleGPU {
+  uuid: string;
+  instance: string;
+  device: string;
+  model: string;
+  csp: string;
+  pool: string;
+  idleDays: number;
+  reason?: string;
+  cluster: string;
+  region: string;
+  /** 유휴 기간의 분 단위 해상도 — "184일 3시간 22분" 표기의 근거. */
+  idleMinutes: number;
+  validation: IdleValidation;
+}
+
+/** 유휴장비 KPI 6종 — 서버 집계(화면이 다시 세지 않는다). 축이 둘이다:
+ *  뒤 4종(needsValidation·validating·ready·failed)은 total 의 *상호배타 분할*
+ *  (합 = total)이고, over30d 는 그와 직교하는 "장기 방치" 계측선이다
+ *  (total ⊇ over30d, 4종과는 포함관계가 없다 — 실측 total 185 / over30d 63 /
+ *  needsValidation 163). 서버 계약 SSOT = internal/demo/state.go IdleSummary. */
+export interface IdleSummary {
+  total: number;
+  over30d: number;
+  needsValidation: number;
+  validating: number;
+  ready: number;
+  failed: number;
+}
+
+/** 장애 판정 룰 1건. tier 1=결정론 감지(알림 발행), 2=위험도 스코어(Health 감점). */
+export interface RuleDef {
+  code: string;
+  name: string;
+  tier: 1 | 2;
+  severity: 'critical' | 'major' | 'warning';
+  condition: string;
+  action: string;
+  /** 2단계 감점 가중치(1단계는 없음). */
+  weight?: number;
+  /** *조건 매칭* 자산 수 — 감점 적용 자산 수가 아니다(감점은 victim 1장). */
+  matchCount: number;
+  enabled: boolean;
+}
+
+/** 고도화 단계 1개 — 채택 비율 배지("5/8 적용")의 근거. */
+export interface RuleTier {
+  tier: 1 | 2;
+  label: string;
+  describe: string;
+  rules: RuleDef[];
+  enabled: number;
+  total: number;
+}
+
+export interface RulesetState {
+  tiers: RuleTier[];
+}
+
+/** 서빙 풀 1개의 추론 서빙 상태 — 이 플랫폼의 워크로드가 GPU 추론 서빙임을
+ *  드러내는 지표 묶음(요청·지연·토큰·큐·레플리카). 하드웨어 신호와 인과로
+ *  연결된다: 사용률↑ → 배치↑ → 큐↑ → p95/p99↑ → (포화 시) 에러율↑. */
+export interface ServingStats {
+  pool: string;
+  display: string;
+  tenant: string;
+  gpus: number;
+  utilAvgPct: number;
+  rps: number;
+  p50Ms: number;
+  p95Ms: number;
+  p99Ms: number;
+  /** 임베딩·비전·OCR·추천 풀은 0 — 토큰을 생성하지 않는 계열이다. */
+  tokensPerSec: number;
+  queueDepth: number;
+  batchSize: number;
+  errorRatePct: number;
+  replicasReady: number;
+  replicasDesired: number;
+  /** 부하 90% 초과 — 지연 급등 구간. 화면 「포화」 배지의 근거. */
+  saturated: boolean;
+}
+
+/** 가용 GPU 비율 SLO — 순간값만 있으면 모니터, 목표 대비 잔여 예산이 있어야
+ *  운영 콘솔이 된다(NFR-04). */
+export interface SLOState {
+  /** 계약 목표(99.5). */
+  targetPct: number;
+  availabilityPct: number;
+  /** 30일 오차 예산 잔여율. */
+  errorBudgetRemainingPct: number;
+  windowDays: number;
+  mtbfHours: number;
+  mttrMinutes: number;
+  incidents30d: number;
+  /** 현재 서비스 불가 GPU 수(장애 + 격리 + 수집중단). */
+  unavailableGpus: number;
+  breaching: boolean;
+}
+
+/** K8s 이벤트 1건 — 알림(AlertEvent)과 달리 조치 대상이 아닌 일상 기록이다. */
+export interface ClusterEvent {
+  at: number;
+  type: 'Normal' | 'Warning';
+  reason: string;
+  object: string;
+  namespace?: string;
+  node?: string;
+  message: string;
+}
+
+export interface DemoState {
+  seed: number;
+  cycle: number;
+  generatedAt: number;
+  timeScale: number;
+  /** 재시딩 백필 진행 중 — 화면이 "새 데이터 생성 중"을 표시하는 근거. */
+  reseeding?: boolean;
+  fleet: FleetSummary;
+  scenario: ScenarioState;
+  alerts: AlertEvent[];
+  audit: AuditEntry[];
+  idle: IdleGPU[];
+  /** 항상 전체 서빙 풀(8개) — 부분 집합이 아니다. */
+  serving: ServingStats[];
+  slo: SLOState;
+  /** 최신순, 최대 60건. */
+  events: ClusterEvent[];
+  /** 통합 상황판 분류 집계. */
+  dashboard: Dashboard;
+  /** 장애 분석 체인. */
+  incident: IncidentChain;
+  /** 장애 판정 룰셋(2단 고도화). */
+  ruleset: RulesetState;
+  /** 유휴 재사용 검증 라인 KPI. */
+  idleSummary: IdleSummary;
+}
+
+export interface ActionResult {
+  applied: boolean;
+  phase: string;
+  at: number;
+  message: string;
+}
+
+export type ActionOutcome =
+  | { ok: true; result: ActionResult }
+  | { ok: false; status: number; error: string };
+
+// ---- 정규화 (Go nil 슬라이스 → null 방어) ----
+
+function arr<T>(v: T[] | null | undefined): T[] {
+  return Array.isArray(v) ? v : [];
+}
+
+/** slo 는 객체라 nil 슬라이스 규칙이 아닌 "필드 자체 부재"(구백엔드)만 방어한다 —
+ *  화면이 slo.availabilityPct 를 직접 읽으므로 undefined 면 렌더가 깨진다. */
+function normalizeSlo(raw: SLOState | null | undefined): SLOState {
+  return {
+    targetPct: raw?.targetPct ?? 0,
+    availabilityPct: raw?.availabilityPct ?? 0,
+    errorBudgetRemainingPct: raw?.errorBudgetRemainingPct ?? 0,
+    windowDays: raw?.windowDays ?? 0,
+    mtbfHours: raw?.mtbfHours ?? 0,
+    mttrMinutes: raw?.mttrMinutes ?? 0,
+    incidents30d: raw?.incidents30d ?? 0,
+    unavailableGpus: raw?.unavailableGpus ?? 0,
+    breaching: raw?.breaching ?? false,
+  };
+}
+
+/** 장애 영향 범위 — 4 KpiTile 이 직접 읽으므로 필드별 기본값이 필요하다. */
+function normalizeImpact(raw: IncidentImpact | null | undefined): IncidentImpact {
+  return {
+    gpus: raw?.gpus ?? 0,
+    pods: raw?.pods ?? 0,
+    podsReady: raw?.podsReady ?? 0,
+    tenants: raw?.tenants ?? 0,
+    services: raw?.services ?? 0,
+    tenant: raw?.tenant ?? '',
+    namespace: raw?.namespace ?? '',
+    service: raw?.service ?? '',
+  };
+}
+
+function normalizeIdleSummary(raw: IdleSummary | null | undefined): IdleSummary {
+  return {
+    total: raw?.total ?? 0,
+    over30d: raw?.over30d ?? 0,
+    needsValidation: raw?.needsValidation ?? 0,
+    validating: raw?.validating ?? 0,
+    ready: raw?.ready ?? 0,
+    failed: raw?.failed ?? 0,
+  };
+}
+
+function normalizeIdleValidation(raw: IdleValidation | null | undefined): IdleValidation {
+  return {
+    verdict: raw?.verdict ?? 'idle',
+    precheck: raw?.precheck ?? 'none',
+    burnin: raw?.burnin ?? 'none',
+    burninProgress: raw?.burninProgress ?? 0,
+    lastAt: raw?.lastAt ?? 0,
+  };
+}
+
+function normalizeState(raw: DemoState): DemoState {
+  return {
+    ...raw,
+    fleet: {
+      ...raw.fleet,
+      csps: arr(raw.fleet?.csps),
+      models: arr(raw.fleet?.models),
+      pools: arr(raw.fleet?.pools),
+      tenants: arr(raw.fleet?.tenants),
+      faultUuids: arr(raw.fleet?.faultUuids),
+      tempAlertUuids: arr(raw.fleet?.tempAlertUuids),
+      missingInstances: arr(raw.fleet?.missingInstances),
+      missingGpus: arr(raw.fleet?.missingGpus),
+      regions: arr(raw.fleet?.regions),
+    },
+    scenario: {
+      ...raw.scenario,
+      modeOptions: arr(raw.scenario?.modeOptions),
+      maintenanceLocks: arr(raw.scenario?.maintenanceLocks),
+      phases: arr(raw.scenario?.phases),
+      victim: {
+        ...raw.scenario.victim,
+        health: {
+          score: raw.scenario.victim?.health?.score ?? 0,
+          deductions: arr(raw.scenario.victim?.health?.deductions),
+        },
+        drain: { ...raw.scenario.victim?.drain, steps: arr(raw.scenario.victim?.drain?.steps) },
+        burnin: {
+          ...raw.scenario.victim?.burnin,
+          checklist: arr(raw.scenario.victim?.burnin?.checklist),
+        },
+      },
+    },
+    alerts: arr(raw.alerts),
+    audit: arr(raw.audit),
+    // idle[] 원소의 validation 은 객체라 배열 정규화로 방어되지 않는다 —
+    // 표가 g.validation.verdict 를 직접 읽으므로 부재 시 렌더가 깨진다.
+    idle: arr(raw.idle).map((g) => ({ ...g, validation: normalizeIdleValidation(g?.validation) })),
+    serving: arr(raw.serving),
+    slo: normalizeSlo(raw.slo),
+    events: arr(raw.events),
+    incident: {
+      active: raw.incident?.active ?? false,
+      code: raw.incident?.code ?? '',
+      title: raw.incident?.title ?? '',
+      severity: raw.incident?.severity ?? 'info',
+      phase: raw.incident?.phase ?? '',
+      at: raw.incident?.at ?? 0,
+      links: arr(raw.incident?.links),
+      firstAt: raw.incident?.firstAt ?? 0,
+      eventCount: raw.incident?.eventCount ?? 0,
+      cause: raw.incident?.cause ?? '',
+      pods: arr(raw.incident?.pods),
+      podsTotal: raw.incident?.podsTotal ?? 0,
+      impact: normalizeImpact(raw.incident?.impact),
+      actions: arr(raw.incident?.actions),
+    },
+    // tiers[].rules 는 *중첩* 배열이다 — arr() 를 한 번만 걸면 tier.rules.map
+    // 이 런타임에 깨진다(Go 의 nil 슬라이스가 null 로 온다).
+    ruleset: {
+      tiers: arr(raw.ruleset?.tiers).map((t) => ({ ...t, rules: arr(t?.rules) })),
+    },
+    idleSummary: normalizeIdleSummary(raw.idleSummary),
+    dashboard: {
+      alerts: arr(raw.dashboard?.alerts),
+      gpus: arr(raw.dashboard?.gpus),
+      nodes: arr(raw.dashboard?.nodes),
+      repair: arr(raw.dashboard?.repair),
+      collect: arr(raw.dashboard?.collect),
+    },
+  };
+}
+
+// ---- API ----
+
+/** 비인증 status — 404/네트워크 오류는 전부 "off" 로 수렴(구백엔드 호환). */
+export async function fetchDemoStatus(): Promise<DemoStatus> {
+  try {
+    const res = await fetch('/api/v1/demo/status', { credentials: 'include' });
+    if (!res.ok) return { enabled: false, ready: false, public: false };
+    const body = (await res.json()) as ApiEnvelope<DemoStatus>;
+    return {
+      enabled: body.data?.enabled ?? false,
+      ready: body.data?.ready ?? false,
+      public: body.data?.public ?? false,
+    };
+  } catch {
+    return { enabled: false, ready: false, public: false };
+  }
+}
+
+export async function fetchDemoState(): Promise<DemoState> {
+  const res = await fetch('/api/v1/demo/state', { credentials: 'include' });
+  if (res.status === 401) {
+    throw new Error('unauthorized');
+  }
+  if (!res.ok) {
+    throw new Error(`demo state HTTP ${res.status}`);
+  }
+  const body = (await res.json()) as ApiEnvelope<DemoState>;
+  return normalizeState(body.data);
+}
+
+/** 액션 실행 — 409(단계 불일치)는 예외가 아니라 결과로 낸다(시연 중 오조작
+ *  안내를 UI 가 부드럽게 표시하기 위함). */
+export async function runDemoAction(
+  action: DemoAction,
+  body?: DemoActionBody,
+): Promise<ActionOutcome> {
+  const res = await apiPostRaw(`/api/v1/demo/actions/${action}`, body);
+  const payload = (await res.json().catch(() => null)) as
+    | (ApiEnvelope<ActionResult> & { error?: string })
+    | { error?: string }
+    | null;
+  if (res.ok && payload && 'data' in payload) {
+    return { ok: true, result: payload.data };
+  }
+  return { ok: false, status: res.status, error: payload?.error ?? `HTTP ${res.status}` };
+}
+
+// ---- 문의 접수 (ContactBubble) ----
+
+export interface ContactInput {
+  name: string;
+  org: string;
+  email: string;
+  message: string;
+}
+
+export interface ContactMessage {
+  id: number;
+  at: number;
+  name: string;
+  org?: string;
+  email?: string;
+  message: string;
+}
+
+export type ContactOutcome =
+  | { ok: true; result: ContactMessage }
+  | { ok: false; status: number; error: string };
+
+/** 문의 접수 — 검증 실패(400)와 접수 폭주(429)를 예외가 아니라 결과로 낸다.
+ *  방문자에게 "내가 잘못 썼다"와 "잠시 후 다시"를 구분해 보여줘야 한다. */
+export async function submitContact(input: ContactInput): Promise<ContactOutcome> {
+  const res = await apiPostRaw('/api/v1/demo/contact', input);
+  const payload = (await res.json().catch(() => null)) as
+    | (ApiEnvelope<ContactMessage> & { error?: string })
+    | { error?: string }
+    | null;
+  if (res.ok && payload && 'data' in payload) {
+    return { ok: true, result: payload.data };
+  }
+  return { ok: false, status: res.status, error: payload?.error ?? `HTTP ${res.status}` };
+}
+
+export const PHASE_LABELS: Record<ScenarioPhase, string> = {
+  normal: '정상',
+  degrading: '무음 열화 진행',
+  'awaiting-approval': '격리 승인 대기',
+  draining: 'Graceful Drain',
+  replacing: '노드 교체 중',
+  'burnin-1': '번인 검증 1차',
+  'burnin-failed': '번인 실패 — 재검증 필요',
+  'burnin-2': '번인 검증 2차',
+  'ready-to-return': '재투입 대기',
+  returned: '운영 풀 복귀',
+};
diff --git a/web/src/lib/fleetFacts.ts b/web/src/lib/fleetFacts.ts
new file mode 100644
index 0000000..98d6af7
--- /dev/null
+++ b/web/src/lib/fleetFacts.ts
@@ -0,0 +1,288 @@
+// fleetFacts — 통합 상황판의 *단일 파생 계층*.
+//
+// 경계 규칙 한 줄: **필터 축으로 갈리는 값이면 cells 에서 파생한다. 안 갈리면
+// state 를 쓴다.** 서버 사전 집계(state.dashboard·state.fleet)는 플릿 전체를
+// 말하므로 필터를 걸 수 없다 — 축을 하나 더 붙일 때마다 서버에 축별 집계를
+// 한 벌씩 더 만드는 건 8축 × N집계로 발산하고, 분류 로직이 서버·화면 두 곳에
+// 생겨 드리프트한다(같은 레포에서 이미 겪은 유형).
+//
+// 그래서 필터 가능한 사실은 전부 *필터된 셀*에서 다시 판다. 축을 추가해도
+// applyFleetFilter 한 곳만 고치면 전 섹션이 따라온다. state 가 계속 담당하는
+// 것은 필터와 무관한 사실뿐이다 — 시나리오 단계 / 수집 상태 / 자동복구 진행 /
+// 감사로그 / 룰셋.
+//
+// 출력은 컴포넌트가 이미 기대하는 형태 그대로다(props 를 바꾸지 않는다).
+// 컴포넌트는 필터의 존재를 모른 채 필터에 반응한다.
+import type { CellStatus, FleetCell } from '@/hooks/useFleet';
+import type {
+  AlertEvent,
+  ClusterEvent,
+  CSPSummary,
+  FleetSummary,
+  IdleGPU,
+  PoolSummary,
+  RegionInfo,
+  ScenarioState,
+  ServingStats,
+  StatusCount,
+} from '@/lib/demoApi';
+
+/** 테넌트 요약 — demoApi 의 FleetSummary 인라인 타입을 그대로 쓴다(재선언 금지). */
+type TenantSummary = FleetSummary['tenants'][number];
+
+/** 저활용 임계 — KPI 카드의 "< 30% 사용률" 문구와 같은 값(둘이 갈리면 거짓말). */
+const UNDERUTIL_PCT = 30;
+
+/** 격리·복구 단계 — statusOf 와 같은 어휘(GpuOverview). 노드 상태도 같은 축을 쓴다. */
+const DRAINING_PHASE = 'draining';
+const CORDONED_PHASES = new Set([
+  'replacing',
+  'burnin-1',
+  'burnin-failed',
+  'burnin-2',
+  'ready-to-return',
+]);
+
+/** 파생에 필요한 *필터 무관* 컨텍스트. 전부 state 에서 그대로 온다. */
+export interface FleetFactsContext {
+  scenario: ScenarioState | null;
+  /** 수집 중단 노드 — 셀 라벨이 아니라 시나리오가 아는 사실. */
+  missingInstances: Set<string>;
+  /** CSP 표시명·어댑터와 **카드 순서**의 출처. 롤업 카드가 흔들리지 않게 한다. */
+  cspSpecs: CSPSummary[];
+  /** 풀·테넌트 표시명 사전(셀에는 id 만 있다). */
+  pools: PoolSummary[];
+  tenants: TenantSummary[];
+  regions: RegionInfo[];
+  alerts: AlertEvent[];
+  events: ClusterEvent[];
+  /** 서빙 풀 상태 — 활성 워크로드(Pod)는 셀이 아니라 이쪽에 있다. */
+  serving: ServingStats[];
+  idle: IdleGPU[];
+  /** 심각도 축 — 셀에는 심각도가 없어 applyFleetFilter 가 못 거른다(알림 전용
+   *  축이다). 여기서 걸지 않으면 필터바의 심각도 셀렉터가 아무것도 안 한다. */
+  severity?: string;
+}
+
+export interface FleetFacts {
+  /** state.dashboard.gpus 와 같은 형태·같은 어휘. */
+  gpus: StatusCount[];
+  nodes: StatusCount[];
+  alerts: StatusCount[];
+  /** state.fleet.csps 와 같은 형태(순서도 spec 순 유지). */
+  csps: CSPSummary[];
+  /** csp id → 평균 사용률. CspRollupCards 가 받던 사전 집계 맵과 같은 형태. */
+  utilByCsp: Record<string, number>;
+  /** state.fleet.models 와 같은 형태. */
+  models: Array<{ model: string; count: number; utilAvgPct?: number }>;
+  /** state.fleet.pools / tenants 와 같은 형태(필터에 걸린 것만 남는다). */
+  pools: PoolSummary[];
+  tenants: TenantSummary[];
+  regions: RegionInfo[];
+  /** 필터에 걸린 알림·이벤트·유휴 목록(피드·분포 차트·회수 후보 소재). */
+  alertList: AlertEvent[];
+  eventList: ClusterEvent[];
+  idleList: IdleGPU[];
+  nodeCount: number;
+  gpuCount: number;
+  allocated: number;
+  faulted: number;
+  /** 온도 이상 = 상태 분류의 degraded 와 같은 집합. */
+  tempAlerts: number;
+  agentMissing: number;
+  underutilized: number;
+  /** 필터에 걸린 서빙 풀의 Ready 레플리카 합(Pod 기준). */
+  activeWorkloads: number;
+  /** 할당 GPU 평균 사용률. 미할당은 늘 ~0 이라 섞으면 플릿 평균이 주저앉는다. */
+  utilAvg: number | null;
+}
+
+/** 미할당 GPU 는 pool 라벨이 없다(buildSeriesLabels) — 할당 여부의 유일한 근거. */
+function isAllocated(c: FleetCell): boolean {
+  return c.pool !== '';
+}
+
+/** 수집 중단 노드의 합성 셀은 util 이 NaN 이다 — 평균에서 빼지 않으면 전부 NaN. */
+function hasUtil(c: FleetCell): boolean {
+  return Number.isFinite(c.util);
+}
+
+function mean(values: number[]): number | null {
+  return values.length === 0 ? null : values.reduce((a, b) => a + b, 0) / values.length;
+}
+
+/**
+ * deriveFleetFacts — 필터된 셀에서 상황판이 쓰는 사실을 전부 판다.
+ *
+ * 서버 집계와의 등가는 필터 "전체"에서 성립해야 한다(회귀 기준):
+ * gpus / nodes / alerts / csps / utilAvg / underutilized 가 각각
+ * dashboard.gpus / dashboard.nodes / dashboard.alerts / fleet.csps /
+ * demo_fleet_util_avg_pct / fleet.underutilized 와 일치한다.
+ */
+export function deriveFleetFacts(
+  cells: FleetCell[],
+  statusOf: (cell: FleetCell) => CellStatus,
+  ctx: FleetFactsContext,
+): FleetFacts {
+  const victim = ctx.scenario?.victim.instance ?? '';
+  const phase = ctx.scenario?.phase ?? '';
+
+  // ---- GPU 상태 5분류 (상호배타, 합 = 필터된 셀 수) ----
+  const gpuBy: Record<CellStatus, number> = {
+    normal: 0,
+    degraded: 0,
+    fault: 0,
+    isolated: 0,
+    recovering: 0,
+  };
+
+  // ---- 노드 상태: 셀을 노드로 접는다. 상태는 노드 단위 사건이라 셀 상태를
+  //      그대로 못 쓴다(GPU 1장 장애 → 노드는 Degraded 1대).
+  const nodeDegraded = new Set<string>();
+  const nodes = new Set<string>();
+  // 유휴 목록은 개체 단위(uuid)라 노드 소속으로 거르면 같은 노드의 비유휴까지 남는다.
+  const uuids = new Set<string>();
+
+  // ---- CSP / 모델 / 풀 롤업 ----
+  const perCsp = new Map<string, { gpuTotal: number; allocated: number; faulted: number }>();
+  const cspUtil = new Map<string, number[]>();
+  const perModel = new Map<string, { count: number; utils: number[] }>();
+  const poolAlloc = new Map<string, number>();
+  const tenantIds = new Set<string>();
+  const regionIds = new Set<string>();
+
+  let allocated = 0;
+  let underutilized = 0;
+  const allocUtils: number[] = [];
+
+  for (const c of cells) {
+    const s = statusOf(c);
+    gpuBy[s] += 1;
+    nodes.add(c.instance);
+    uuids.add(c.uuid);
+    if (s === 'fault' || s === 'degraded') nodeDegraded.add(c.instance);
+
+    const csp = perCsp.get(c.csp) ?? { gpuTotal: 0, allocated: 0, faulted: 0 };
+    csp.gpuTotal += 1;
+    if (s === 'fault') csp.faulted += 1;
+    perCsp.set(c.csp, csp);
+    if (c.region) regionIds.add(c.region);
+
+    const alloc = isAllocated(c);
+    if (alloc) {
+      allocated += 1;
+      csp.allocated += 1;
+      poolAlloc.set(c.pool, (poolAlloc.get(c.pool) ?? 0) + 1);
+      if (c.tenant) tenantIds.add(c.tenant);
+      // 사용률 집계는 *할당 GPU 만* — 서버 집계(demo_fleet_util_avg_pct)와 같은
+      // 모집단이다. 미할당(util ≈ 0)을 섞으면 필터 "전체"에서 4pp 어긋난다.
+      if (hasUtil(c)) {
+        allocUtils.push(c.util);
+        const bucket = cspUtil.get(c.csp);
+        if (bucket) bucket.push(c.util);
+        else cspUtil.set(c.csp, [c.util]);
+        if (c.util < UNDERUTIL_PCT) underutilized += 1;
+      }
+    }
+
+    if (c.model) {
+      const m = perModel.get(c.model) ?? { count: 0, utils: [] };
+      m.count += 1;
+      if (hasUtil(c)) m.utils.push(c.util);
+      perModel.set(c.model, m);
+    }
+  }
+
+  let nReady = 0;
+  let nDegraded = 0;
+  let nCordoned = 0;
+  let nDraining = 0;
+  let nOffline = 0;
+  for (const instance of nodes) {
+    if (ctx.missingInstances.has(instance)) nOffline += 1;
+    else if (instance === victim && phase === DRAINING_PHASE) nDraining += 1;
+    else if (instance === victim && CORDONED_PHASES.has(phase)) nCordoned += 1;
+    else if (nodeDegraded.has(instance)) nDegraded += 1;
+    else nReady += 1;
+  }
+
+  // ---- 알림·이벤트: 필터된 노드에 속한 것만. 인스턴스가 없는 항목은 플릿
+  //      전역 사건이라 어느 필터에서도 여전히 일어난 일이다(남긴다).
+  const inScope = (instance: string | undefined) => !instance || nodes.has(instance);
+  const alertList = ctx.alerts.filter(
+    (a) => inScope(a.instance) && (!ctx.severity || a.severity === ctx.severity),
+  );
+  const eventList = ctx.events.filter((e) => inScope(e.node));
+  const sev = { critical: 0, major: 0, warning: 0 };
+  for (const a of alertList) {
+    if (a.acked) continue;
+    if (a.severity in sev) sev[a.severity as keyof typeof sev] += 1;
+  }
+
+  const utilByCsp: Record<string, number> = {};
+  for (const [id, list] of cspUtil) {
+    const avg = mean(list);
+    if (avg !== null) utilByCsp[id] = avg;
+  }
+
+  return {
+    gpus: [
+      { key: 'normal', label: '정상', count: gpuBy.normal, tone: 'ok' },
+      { key: 'degraded', label: '성능 저하', count: gpuBy.degraded, tone: 'major' },
+      { key: 'fault', label: '장애', count: gpuBy.fault, tone: 'crit' },
+      { key: 'isolated', label: '격리', count: gpuBy.isolated, tone: 'warn' },
+      { key: 'recovering', label: '복구 중', count: gpuBy.recovering, tone: 'info' },
+    ],
+    nodes: [
+      { key: 'ready', label: 'Ready', count: nReady, tone: 'ok' },
+      { key: 'degraded', label: 'Degraded', count: nDegraded, tone: 'major' },
+      { key: 'cordoned', label: 'Cordoned', count: nCordoned, tone: 'warn' },
+      { key: 'draining', label: 'Draining', count: nDraining, tone: 'info' },
+      { key: 'offline', label: 'Offline', count: nOffline, tone: 'crit' },
+    ],
+    alerts: [
+      { key: 'critical', label: 'Critical', count: sev.critical, tone: 'crit' },
+      { key: 'major', label: 'Major', count: sev.major, tone: 'major' },
+      { key: 'warning', label: 'Warning', count: sev.warning, tone: 'warn' },
+    ],
+    // spec 순서를 유지한다 — Map 순회 순서로 내면 필터를 바꿀 때마다 카드가 자리를 바꾼다.
+    csps: ctx.cspSpecs
+      .filter((spec) => perCsp.has(spec.id))
+      .map((spec) => {
+        const v = perCsp.get(spec.id) as { gpuTotal: number; allocated: number; faulted: number };
+        return {
+          id: spec.id,
+          display: spec.display,
+          adapter: spec.adapter,
+          gpuTotal: v.gpuTotal,
+          allocated: v.allocated,
+          faulted: v.faulted,
+          allocPct: v.gpuTotal > 0 ? (v.allocated / v.gpuTotal) * 100 : 0,
+        };
+      }),
+    utilByCsp,
+    models: [...perModel.entries()]
+      .map(([model, v]) => ({ model, count: v.count, utilAvgPct: mean(v.utils) ?? 0 }))
+      .sort((a, b) => b.count - a.count),
+    pools: ctx.pools
+      .filter((p) => poolAlloc.has(p.id))
+      .map((p) => ({ ...p, allocated: poolAlloc.get(p.id) ?? 0 })),
+    tenants: ctx.tenants.filter((t) => tenantIds.has(t.id)),
+    regions: ctx.regions.filter((r) => regionIds.has(r.id)),
+    alertList,
+    eventList,
+    idleList: ctx.idle.filter((g) => uuids.has(g.uuid)),
+    nodeCount: nodes.size,
+    gpuCount: cells.length,
+    allocated,
+    faulted: gpuBy.fault,
+    tempAlerts: gpuBy.degraded,
+    agentMissing: nOffline,
+    underutilized,
+    // 활성 워크로드는 셀이 아니라 서빙 풀에 있다 — 필터에 걸린 풀만 더한다.
+    activeWorkloads: ctx.serving
+      .filter((s) => poolAlloc.has(s.pool))
+      .reduce((n, s) => n + s.replicasReady, 0),
+    utilAvg: mean(allocUtils),
+  };
+}
diff --git a/web/src/lib/gpuMetrics.ts b/web/src/lib/gpuMetrics.ts
new file mode 100644
index 0000000..13d7ab0
--- /dev/null
+++ b/web/src/lib/gpuMetrics.ts
@@ -0,0 +1,153 @@
+// gpuMetrics.ts — GPU 메트릭 이름·대역·색·포맷의 SSOT.
+//
+// 메트릭 이름은 실 에이전트(nodevitals)의 exposition 계약(`nodevitals_hw_` 접두)
+// 이다 — 기존 3페이지가 접두 없는 이름(`nodevitals_gpu_*`)을 질의해 라이브에서
+// GPU 데이터가 항상 비어 있던 결함의 수리 지점. 데모 엔진도 같은 이름을 emit
+// 하므로 데모/실서비스가 이 상수 하나를 공유한다.
+
+export const METRIC_GPU_UTIL = 'nodevitals_hw_gpu_utilization_pct';
+export const METRIC_GPU_MEM_USED = 'nodevitals_hw_gpu_mem_used_bytes';
+export const METRIC_GPU_MEM_TOTAL = 'nodevitals_hw_gpu_mem_total_bytes';
+export const METRIC_GPU_TEMP = 'nodevitals_hw_gpu_temperature_celsius';
+export const METRIC_GPU_POWER = 'nodevitals_hw_gpu_power_watts';
+export const METRIC_GPU_ECC_CORR = 'nodevitals_hw_gpu_ecc_corrected_total';
+export const METRIC_GPU_ECC_UNC = 'nodevitals_hw_gpu_ecc_uncorrected_total';
+
+// 데모 엔진의 사전 집계 시리즈 (서버 집계 부재 보완 — demo 인스턴스에서만 존재).
+export const METRIC_DEMO_FLEET_TOTAL = 'nodevitals_demo_fleet_gpu_total';
+export const METRIC_DEMO_FLEET_ALLOCATED = 'nodevitals_demo_fleet_gpu_allocated';
+export const METRIC_DEMO_FLEET_ALLOC_PCT = 'nodevitals_demo_fleet_alloc_pct';
+export const METRIC_DEMO_FLEET_UTIL_AVG = 'nodevitals_demo_fleet_util_avg_pct';
+export const METRIC_DEMO_FLEET_FAULTED = 'nodevitals_demo_fleet_faulted';
+export const METRIC_DEMO_FLEET_TEMP_ALERTS = 'nodevitals_demo_fleet_temp_alerts';
+export const METRIC_DEMO_FLEET_POWER_KW = 'nodevitals_demo_fleet_power_kw';
+export const METRIC_DEMO_CSP_UTIL_AVG = 'nodevitals_demo_csp_util_avg_pct';
+export const METRIC_DEMO_CSP_TOTAL = 'nodevitals_demo_csp_gpu_total';
+export const METRIC_DEMO_CSP_ALLOCATED = 'nodevitals_demo_csp_gpu_allocated';
+export const METRIC_DEMO_CSP_TEMP_MAX = 'nodevitals_demo_csp_temp_max_celsius';
+export const METRIC_DEMO_CSP_FAULTED = 'nodevitals_demo_csp_faulted';
+export const METRIC_DEMO_CLUSTER_UTIL_AVG = 'nodevitals_demo_cluster_util_avg_pct';
+export const METRIC_DEMO_VICTIM_HEALTH = 'nodevitals_demo_victim_health_score';
+
+// 추론 서빙 계층 — 풀 단위(라벨 `pool`,`tenant`). 등호 매처만 지원하므로
+// selector() 로 조합한다. 하드웨어 지표와 인과로 이어진 시리즈들이다:
+// 사용률↑ → 배치↑ → 큐↑ → p95/p99↑ → (포화 시) 에러율↑.
+export const METRIC_DEMO_POOL_RPS = 'nodevitals_demo_pool_rps';
+export const METRIC_DEMO_POOL_P50 = 'nodevitals_demo_pool_latency_p50_ms';
+export const METRIC_DEMO_POOL_P95 = 'nodevitals_demo_pool_latency_p95_ms';
+export const METRIC_DEMO_POOL_P99 = 'nodevitals_demo_pool_latency_p99_ms';
+export const METRIC_DEMO_POOL_TOKENS = 'nodevitals_demo_pool_tokens_per_sec';
+export const METRIC_DEMO_POOL_QUEUE = 'nodevitals_demo_pool_queue_depth';
+export const METRIC_DEMO_POOL_BATCH = 'nodevitals_demo_pool_batch_size';
+export const METRIC_DEMO_POOL_ERR_PCT = 'nodevitals_demo_pool_error_rate_pct';
+export const METRIC_DEMO_POOL_REPLICAS_READY = 'nodevitals_demo_pool_replicas_ready';
+export const METRIC_DEMO_POOL_REPLICAS_DESIRED = 'nodevitals_demo_pool_replicas_desired';
+
+// 서빙 플릿 롤업 (라벨 없음) — 지연·에러율은 요청량 가중 평균.
+export const METRIC_DEMO_FLEET_RPS = 'nodevitals_demo_fleet_rps';
+export const METRIC_DEMO_FLEET_P95 = 'nodevitals_demo_fleet_latency_p95_ms';
+export const METRIC_DEMO_FLEET_TOKENS = 'nodevitals_demo_fleet_tokens_per_sec';
+export const METRIC_DEMO_FLEET_ERR_PCT = 'nodevitals_demo_fleet_error_rate_pct';
+
+// SLO (라벨 없음) — 가용 GPU 비율 목표 대비 잔여 예산.
+export const METRIC_DEMO_SLO_AVAILABILITY = 'nodevitals_demo_slo_gpu_availability_pct';
+export const METRIC_DEMO_SLO_TARGET = 'nodevitals_demo_slo_target_pct';
+export const METRIC_DEMO_SLO_ERROR_BUDGET = 'nodevitals_demo_slo_error_budget_remaining_pct';
+export const METRIC_DEMO_SLO_MTBF = 'nodevitals_demo_slo_mtbf_hours';
+export const METRIC_DEMO_SLO_MTTR = 'nodevitals_demo_slo_mttr_minutes';
+export const METRIC_DEMO_SLO_INCIDENTS_30D = 'nodevitals_demo_slo_incidents_30d';
+
+/** 등호 매처 셀렉터 빌더 — 서버 파서는 `name{k="v"}` 등호 매처만 지원한다
+ *  (정규식·집계는 400). 값의 `\`·`"` 는 서버 scanQuotedValue 규칙대로 이스케이프. */
+export function selector(metric: string, labels?: Record<string, string>): string {
+  const entries = Object.entries(labels ?? {}).filter(([, v]) => v !== '');
+  if (entries.length === 0) return metric;
+  const body = entries
+    .map(([k, v]) => `${k}="${v.replaceAll('\\', '\\\\').replaceAll('"', '\\"')}"`)
+    .join(',');
+  return `${metric}{${body}}`;
+}
+
+// ---- 사용률 5단 대역 (Idle / <30 / <80 / <95 / ≥95) ----
+
+export interface UtilBand {
+  /** index.css 의 --util-band-N 토큰 인덱스 */
+  index: 0 | 1 | 2 | 3 | 4;
+  label: string;
+  /** 이 대역의 하한(%) — bandForUtil 판정용 */
+  min: number;
+}
+
+export const UTIL_BANDS: readonly UtilBand[] = [
+  { index: 0, label: 'Idle (<5%)', min: 0 },
+  { index: 1, label: '<30%', min: 5 },
+  { index: 2, label: '<80%', min: 30 },
+  { index: 3, label: '<95%', min: 80 },
+  { index: 4, label: '≥95%', min: 95 },
+] as const;
+
+export function bandForUtil(pct: number): UtilBand {
+  for (let i = UTIL_BANDS.length - 1; i >= 0; i--) {
+    if (pct >= UTIL_BANDS[i].min) return UTIL_BANDS[i];
+  }
+  return UTIL_BANDS[0];
+}
+
+// ---- 지표 고정색 (Sentinel 계열 관제 규약 계승) ----
+// GPU=자홍, 온도·전력=주황, CPU=파랑, 메모리=보라, POD=초록, 장애=빨강.
+// 실색은 index.css 의 --metric-* 토큰(라이트/다크 동일 hue)이 정의한다.
+
+export const METRIC_COLORS = {
+  gpu: 'var(--metric-gpu)',
+  thermal: 'var(--metric-thermal)',
+  cpu: 'var(--metric-cpu)',
+  mem: 'var(--metric-mem)',
+  pod: 'var(--metric-pod)',
+  fault: 'var(--metric-fault)',
+} as const;
+
+// ---- 포맷터 ----
+
+export function formatPct(v: number | null | undefined, digits = 1): string {
+  return v == null || Number.isNaN(v) ? '—' : `${v.toFixed(digits)}%`;
+}
+
+export function formatCelsius(v: number | null | undefined): string {
+  return v == null || Number.isNaN(v) ? '—' : `${v.toFixed(1)}°C`;
+}
+
+export function formatWatts(v: number | null | undefined): string {
+  return v == null || Number.isNaN(v) ? '—' : `${Math.round(v)}W`;
+}
+
+export function formatBytes(v: number | null | undefined): string {
+  if (v == null || Number.isNaN(v)) return '—';
+  const gib = v / 1024 ** 3;
+  if (gib >= 1) return `${gib.toFixed(1)}GiB`;
+  // 1MiB 미만은 KiB 로 — 장애 보고서(수 KB) 같은 작은 값이 "0MiB"로 죽는 것을 막는다.
+  const mib = v / 1024 ** 2;
+  return mib >= 1 ? `${mib.toFixed(0)}MiB` : `${(v / 1024).toFixed(1)}KiB`;
+}
+
+export function formatCount(v: number | null | undefined): string {
+  return v == null || Number.isNaN(v) ? '—' : v.toLocaleString('ko-KR');
+}
+
+/** 지연 — 정수 ms(천단위 구분). 소수 자리는 관제 판단에 무의미하다. */
+export function formatMs(v: number | null | undefined): string {
+  return v == null || Number.isNaN(v) ? '—' : `${Math.round(v).toLocaleString('ko-KR')}ms`;
+}
+
+/** 초당 요청 — 100 미만은 소수 1자리(작은 풀의 변동을 죽이지 않기 위해). */
+export function formatRps(v: number | null | undefined): string {
+  if (v == null || Number.isNaN(v)) return '—';
+  return v < 100
+    ? v.toFixed(1)
+    : Math.round(v).toLocaleString('ko-KR');
+}
+
+/** 토큰 생성 속도 — 1000 이상은 k 표기(12.3k tok/s). */
+export function formatTokensPerSec(v: number | null | undefined): string {
+  if (v == null || Number.isNaN(v)) return '—';
+  return v >= 1000 ? `${(v / 1000).toFixed(1)}k tok/s` : `${Math.round(v)} tok/s`;
+}
diff --git a/web/src/lib/navigation.ts b/web/src/lib/navigation.ts
new file mode 100644
index 0000000..3b3ab73
--- /dev/null
+++ b/web/src/lib/navigation.ts
@@ -0,0 +1,270 @@
+// navigation — 2단 메뉴 IA(정보구조) SSOT.
+//
+//   상단 대메뉴 6개  →  클릭하면 좌측에 그 대메뉴의 서브메뉴가 뜬다
+//
+// 60여 개 항목을 한 사이드바에 쌓으면 스크롤만 길어지고 "이 제품이 무엇을
+// 하는가"가 안 보인다. 상단에서 영역을 고르고 좌측에서 화면을 고르는 2단이
+// 관제 콘솔의 관행이자, 대분류 6개를 한눈에 보여주는 방식이다.
+//
+// 규칙 1: 구현된 화면만 to 를 갖는다. 나머지는 비활성 + "준비 중" —
+//         눌러서 빈 화면이 나오는 것보다 정직하고, 제품 범위도 함께 보인다.
+// 규칙 2: 구현 화면 1개는 항목 1개에만 붙인다. 같은 화면을 여러 항목에 걸면
+//         어디를 눌러도 같은 곳으로 가는 미로가 된다.
+// 규칙 4: "준비 중"은 대메뉴당 3개 이하로 두고, 항상 구현 화면 뒤에 놓는다.
+//         규칙 1의 "제품 범위도 함께 보인다"는 항목이 적을 때만 성립한다 —
+//         실측(스크린샷): 60개 중 46개가 회색이던 시점의 자원·토폴로지 탭은
+//         12줄 중 11줄이 회색 "준비 중"이라 사이드바가 통째로 비활성 벽으로
+//         보였고, 상단 탭 배지는 1/12·0/15 로 "이 제품은 비어 있다"를 상시
+//         광고했다. 범위 신호가 미완성 신호로 뒤집힌 것이다. 그래서 남길
+//         "준비 중"은 (a) 목업 사이드바에 실제로 있는 이름 (b) 그 대분류가
+//         무엇인지 설명하는 최소한, 둘 중 하나뿐이고 나머지는 지웠다
+//         (46 → 16). 내부 배관에 가까운 항목(수집 스키마·메트릭 저장소·
+//         예외 억제 정책 등)은 시연에서 아무 말도 보태지 않으므로 제외한다.
+//         한 대분류의 여러 미구현 항목은 상위 이름 하나로 접는다
+//         (사용자/역할·권한/테넌트/조직 → '사용자·권한').
+// 규칙 3(폐기): 라벨 앞에 시연 순번 ①~⑥ 을 붙이지 않는다. 한 번 시도했다가
+//         되돌렸다 — 런북(docs/demo-runbook.md §1)이 이미 살아있는 Step 번호를
+//         쓰는데 시나리오 문서 순서로 번호를 다시 매기면 같은 숫자가 서로 다른
+//         화면을 가리킨다(실측: 런북 Step 6개 전부 다른 화면으로 오도. 예를
+//         들어 "Step 4 격리"를 듣고 ④ 를 찾으면 GPU Assistant 에 도착한다).
+//         순서는 런북이 알려주고, 메뉴는 이름으로 찾히게 둔다 — 그래서 라벨은
+//         런북 §1 의 화면명과 글자까지 같아야 한다.
+import {
+  Boxes,
+  ChartLine,
+  Radar,
+  Settings,
+  ShieldAlert,
+  Wrench,
+} from 'lucide-react';
+
+export interface NavLeaf {
+  label: string;
+  /** 없으면 미구현 → 비활성(클릭 불가). */
+  to?: string;
+  /** 정확 일치로만 active 판정 (하위 경로를 가진 인덱스 라우트). */
+  exact?: boolean;
+}
+
+/** 좌측 서브메뉴 안의 소그룹. label 이 없으면 구분선 없이 이어 붙인다. */
+export interface NavGroup {
+  label?: string;
+  items: NavLeaf[];
+}
+
+export interface NavTop {
+  id: string;
+  label: string;
+  icon: typeof Radar;
+  groups: NavGroup[];
+}
+
+export const NAV_TOP: readonly NavTop[] = [
+  {
+    id: 'realtime',
+    label: '실시간 관제',
+    icon: Radar,
+    groups: [
+      {
+        items: [
+          { label: '통합 상황판', to: '/gpu', exact: true },
+          { label: '노드 실시간 상태', to: '/map' },
+          { label: '실시간 메트릭', to: '/explorer' },
+          { label: '실시간 토폴로지' },
+          { label: 'GPU 실시간 상태' },
+        ],
+      },
+      {
+        label: '수집',
+        items: [{ label: '메트릭 수집 상태', to: '/overview' }],
+      },
+    ],
+  },
+  {
+    id: 'incident',
+    label: '장애 센터',
+    icon: ShieldAlert,
+    groups: [
+      {
+        items: [
+          { label: '장애 상세', to: '/gpu/incident' },
+          { label: 'GPU Assistant', to: '/gpu/assistant' },
+          { label: '무음 장애 탐지', to: '/gpu/health' },
+          { label: '활성 장애' },
+          { label: '장애 이력' },
+        ],
+      },
+      {
+        label: '알림',
+        items: [
+          // 라벨 = 화면 제목 = 시나리오 원문 명칭('GPU 장애 룰셋 관리')으로
+          // 통일한다 — 셸 헤더가 이 라벨을 그대로 제목으로 쓰므로 어긋나면
+          // 시연 중 '룰셋'을 찾는 사람이 좌측 메뉴에서 못 찾는다. 새 항목을
+          // 만들지 않고 이미 있던 자리를 채운다(규칙 2: 화면 1개 = 항목 1개).
+          { label: 'GPU 장애 룰셋 관리', to: '/gpu/ruleset' },
+          { label: '알림 채널' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'inventory',
+    label: '자원·토폴로지',
+    icon: Boxes,
+    groups: [
+      // 구 12항목 중 11개가 미구현이라 사이드바 전체가 회색 벽이었다(규칙 4).
+      // 자원 계층(CSP·리전·노드 풀·패브릭…)을 한 줄씩 나열해도 시연에서 할 말이
+      // 없으므로, 관제 콘솔이라면 당연히 있을 3종(클러스터·노드·GPU)만 남긴다.
+      // 소그룹 '유휴장비'는 항목이 1개뿐이라 제목만 남으므로 없앤다.
+      {
+        items: [
+          { label: '유휴장비 관리', to: '/gpu/idle' },
+          { label: '클러스터' },
+          { label: '노드' },
+          { label: 'GPU / MIG' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'analytics',
+    label: '누적 분석',
+    icon: ChartLine,
+    groups: [
+      {
+        items: [
+          { label: 'GPU 사용량 분석', to: '/gpu/efficiency' },
+          { label: '용량·포화도 분석', to: '/gpu/serving' },
+          { label: '테넌트·워크로드 분석', to: '/gpu/roadmap' },
+          { label: '성능 추이 분석' },
+          // '저활용 분석'은 지웠다 — GPU 사용량 분석 화면이 이미 저활용 탐지
+          // 탭을 담고 있어, 옆에 회색으로 두면 있는 기능을 없다고 말하게 된다.
+          { label: '정기 리포트' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'remediation',
+    label: '자동복구',
+    icon: Wrench,
+    groups: [
+      {
+        items: [
+          { label: '자동복구 실행', to: '/gpu/remediation' },
+          // 화면이 사전검증·번인 2 스테이지를 함께 담으므로 라벨도 그렇게 읽힌다.
+          { label: '재사용 검증 (사전검증·번인)', to: '/gpu/validation' },
+          { label: '자동복구 현황' },
+          { label: '격리 노드' },
+          // 정책 4종은 '복구 정책' 하나로 접었다 — 상태 전이/유지보수/예외 억제는
+          // 이름만 봐서는 서로 구별되지 않아 회색 줄 수만 늘렸다. 접고 나니
+          // '정책' 소그룹이 회색 1줄짜리 섹션이 됐고(실측 2회차 스크린샷),
+          // 제목이 오히려 '이 섹션은 비어 있다'를 강조해서 제목을 없애고
+          // 본문 끝에 붙인다.
+          { label: '복구 정책' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'admin',
+    label: '관리',
+    icon: Settings,
+    // 15항목 0구현 = 상단 배지가 '0/15'. 눌러 보면 4개 소그룹 제목까지 얹힌
+    // 완전한 회색 화면이라, 시연에서 실수로 한 번만 눌러도 제품 인상이 뒤집힌다.
+    // 목업 사이드바(demo1·demo4)의 관리 영역도 2~3줄뿐이므로 거기에 맞춰
+    // 대분류 이름 4개만 남기고 소그룹 제목은 없앤다(0/15 → 0/4).
+    groups: [
+      {
+        items: [
+          { label: '사용자·권한' },
+          { label: '멀티클라우드 연동' },
+          { label: '에이전트·수집' },
+          { label: '시스템 설정' },
+        ],
+      },
+    ],
+  },
+] as const;
+
+/** 시연에 실제로 쓰이는 화면. 두 자산의 합집합이다 —
+ *  목업 5장(`docs/mockups/demo1~5.png`) ∪ 런북 §1 6-Step.
+ *  둘이 서로 다른 화면을 쓴다: 런북은 무음장애·로드맵·자동복구·효율을 Step 으로
+ *  잡고, 목업은 장애 상세·Assistant·유휴장비를 그린다. 어느 한쪽만 남기면 다른
+ *  쪽 시연이 끊기므로 합집합이 "핵심"이다.
+ *
+ *  데모 모드에서는 이 집합 밖 항목을 메뉴에서 감춘다 — 준비 중 13개와 시연에
+ *  안 쓰는 구현 화면 4개(`/map`·`/explorer`·`/overview`·`/gpu/serving`)가
+ *  27줄 중 17줄을 차지해, 정작 시연할 10개가 묻힌다. 라우트는 살려 두므로
+ *  URL 직접 접근은 그대로 되고, 되돌리기도 이 집합 한 곳만 고치면 된다. */
+export const DEMO_ROUTES: ReadonlySet<string> = new Set([
+  '/gpu/ruleset', // S1 사전 설정 (시나리오 1 · 시연 첫 화면)
+  '/gpu', // Step 1 통합관제 = demo1
+  '/gpu/health', // Step 2 감지
+  '/gpu/roadmap', // Step 3 분석
+  '/gpu/remediation', // Step 4 격리
+  '/gpu/validation', // Step 5 검증 = demo5
+  '/gpu/efficiency', // Step 6 효율
+  '/gpu/incident', // demo2
+  '/gpu/assistant', // demo3
+  '/gpu/idle', // demo4
+]);
+
+/** 화면에 그릴 그룹 — 미구현은 항상 빼고, 데모면 DEMO_ROUTES 로 한 번 더 좁힌다.
+ *  항목이 0인 그룹은 제목만 남으므로 버린다. */
+export function visibleGroups(top: NavTop, demo: boolean): NavGroup[] {
+  return top.groups
+    .map((g) => ({
+      ...g,
+      items: g.items.filter((i) => i.to && (!demo || DEMO_ROUTES.has(i.to))),
+    }))
+    .filter((g) => g.items.length > 0);
+}
+
+/** 상단에 그릴 대메뉴 — 보일 항목이 하나도 없는 탭은 눌러도 빈 사이드바뿐이라 감춘다. */
+export function visibleTops(demo: boolean): NavTop[] {
+  return NAV_TOP.filter((t) => visibleGroups(t, demo).length > 0);
+}
+
+function leaves(top: NavTop): NavLeaf[] {
+  return top.groups.flatMap((g) => g.items);
+}
+
+/** 경로에 가장 잘 맞는 (대메뉴, 항목) — 최장 프리픽스 매치. startsWith 첫
+ *  매치는 /gpu/health 에서 '/gpu' 를 먼저 잡는 오판을 낸다. */
+function matchPath(pathname: string): { top: NavTop; leaf: NavLeaf } | null {
+  let best: { top: NavTop; leaf: NavLeaf; len: number } | null = null;
+  for (const top of NAV_TOP) {
+    for (const leaf of leaves(top)) {
+      if (!leaf.to) continue;
+      const hit = leaf.exact
+        ? pathname === leaf.to
+        : pathname === leaf.to || pathname.startsWith(`${leaf.to}/`);
+      if (hit && (!best || leaf.to.length > best.len)) {
+        best = { top, leaf, len: leaf.to.length };
+      }
+    }
+  }
+  return best ? { top: best.top, leaf: best.leaf } : null;
+}
+
+/** 현재 경로의 화면 제목. */
+export function titleForPath(pathname: string): string {
+  return matchPath(pathname)?.leaf.label ?? 'GPU 플릿';
+}
+
+/** 현재 경로가 속한 대메뉴 id — 상단 탭 활성 표시와 좌측 메뉴 선택의 근거. */
+export function topForPath(pathname: string): string {
+  return matchPath(pathname)?.top.id ?? NAV_TOP[0].id;
+}
+
+/** 대메뉴 id → 정의. */
+export function topById(id: string): NavTop {
+  return NAV_TOP.find((t) => t.id === id) ?? NAV_TOP[0];
+}
+
+/** 구현된 화면 수 / 전체 — 상단 탭의 진척 배지. */
+export function readyRatio(top: NavTop): { ready: number; total: number } {
+  const all = leaves(top);
+  return { ready: all.filter((l) => l.to).length, total: all.length };
+}
diff --git a/web/src/lib/nodeAsset.ts b/web/src/lib/nodeAsset.ts
new file mode 100644
index 0000000..8361682
--- /dev/null
+++ b/web/src/lib/nodeAsset.ts
@@ -0,0 +1,219 @@
+// nodeAsset.ts — 노드 자산 대장(NodeAsset) 타입 SSOT + 조회 클라이언트.
+//
+// 드릴다운이 사용률 숫자만 보이면 관제 화면이 아니라 그래프 위젯이다. 실제
+// 운영자는 노드를 열면 드라이버·펌웨어·시리얼·MIG·PCIe·물리 위치(랙/PDU)·
+// K8s 라벨/테인트를 본다 — 그 대장을 `GET /api/v1/demo/node/{instance}` 가
+// 낸다(백엔드 internal/demo/asset.go 계약 미러).
+//
+// 자산은 노드 수명 동안 사실상 불변이라 **폴링하지 않는다** — instance 당 1회.
+// 실시간 지표(util/temp/power/mem)만 부모 시트가 15초 폴링한다.
+//
+// fetch 관례는 api.ts 를 따른다(credentials:'include' · 401 = UnauthorizedError).
+// 단 404(없는 노드)와 503(백필 중)은 화면 문구가 달라야 하므로 문자열 예외가
+// 아니라 판정 가능한 kind 로 올린다.
+import { type ApiEnvelope, UnauthorizedError } from '@/lib/api';
+
+/** GPU 1장의 자산 정보(Go GPUAsset 미러). */
+export interface GpuAsset {
+  uuid: string;
+  device: string;
+  model: string;
+  serial: string;
+  vbios: string;
+  driverVersion: string;
+  cudaVersion: string;
+  /** "비활성" 또는 "1g.10gb × 7" 형태. */
+  migProfile: string;
+  /** "Gen4" / "Gen5". */
+  pcieGen: string;
+  /** "x16". */
+  pcieWidth: string;
+  /** 0 이면 NVLink 미탑재 모델(L40S 등). */
+  nvlinkLinks: number;
+  /** NVLINK_OK 가 아니면 링크 저하 — UI 는 주황으로 강조한다. */
+  nvlinkStatus: string;
+  pool: string;
+  tenant: string;
+  allocated: boolean;
+  /** 할당 시의 파드명(미할당이면 없음). */
+  pod?: string;
+}
+
+/** 노드 자산 + 소속 GPU 자산(Go NodeAsset 미러). */
+export interface NodeAsset {
+  instance: string;
+  csp: string;
+  cluster: string;
+  /** 물리 랙 — 냉각·전원을 공유하는 단위(동시 장애 반경의 근거). */
+  rack: string;
+  /** 전원 분기 "A" | "B". */
+  pdu: string;
+  model: string;
+  gpuCount: number;
+  kubeletVersion: string;
+  containerRuntime: string;
+  osImage: string;
+  kernelVersion: string;
+  /** "key=value" 형태 문자열 배열(값 없는 라벨은 "key="). */
+  labels: string[];
+  /** 없으면 빈 배열. */
+  taints: string[];
+  serialNumber: string;
+  /** "2024-03-11" (UTC 날짜). */
+  installedAt: string;
+  ageDays: number;
+  warrantyEnds: string;
+  ready: boolean;
+  cordoned: boolean;
+  agentMissing: boolean;
+  gpus: GpuAsset[];
+}
+
+/** NVLink 정상 상태 문자열 — 이 값이 아니면 저하로 간주한다. */
+export const NVLINK_OK = '정상';
+
+/** 보증 만료 임박 판정 창(일). 이 안에 들면 교체 품의 리드타임이 시작된다. */
+export const WARRANTY_WARN_DAYS = 180;
+
+// ---- 실패 분류 ----
+
+export type NodeAssetFailure = 'not-found' | 'backfilling' | 'error';
+
+export class NodeAssetError extends Error {
+  readonly kind: NodeAssetFailure;
+  readonly status: number;
+
+  constructor(kind: NodeAssetFailure, status: number) {
+    super(`nodeAsset: ${kind} (HTTP ${status})`);
+    this.name = 'NodeAssetError';
+    this.kind = kind;
+    this.status = status;
+  }
+}
+
+const FAILURE_TEXT: Record<NodeAssetFailure, string> = {
+  'not-found': '노드 정보를 찾을 수 없다',
+  backfilling: '데이터 준비 중 — 잠시 후 재시도',
+  error: '노드 자산을 불러오지 못했다',
+};
+
+/** 자산 조회 실패의 사용자 문구. 401 은 로그인 화면 전환이 처리하므로 null 을
+ *  낸다 — 시트에 오류 문구를 겹쳐 그리지 않는다(usePolledQuery 와 같은 규약). */
+export function nodeAssetMessage(err: unknown): string | null {
+  if (err instanceof UnauthorizedError) return null;
+  if (err instanceof NodeAssetError) return FAILURE_TEXT[err.kind];
+  return FAILURE_TEXT.error;
+}
+
+// ---- 방어 파싱 (Go 의 nil 슬라이스는 null 로 직렬화된다) ----
+
+function arr<T>(v: readonly T[] | null | undefined): T[] {
+  return Array.isArray(v) ? [...v] : [];
+}
+
+function str(v: unknown): string {
+  return typeof v === 'string' ? v : '';
+}
+
+function num(v: unknown): number {
+  return typeof v === 'number' && Number.isFinite(v) ? v : 0;
+}
+
+function normalizeGpu(raw: Partial<GpuAsset>): GpuAsset {
+  const gpu: GpuAsset = {
+    uuid: str(raw.uuid),
+    device: str(raw.device),
+    model: str(raw.model),
+    serial: str(raw.serial),
+    vbios: str(raw.vbios),
+    driverVersion: str(raw.driverVersion),
+    cudaVersion: str(raw.cudaVersion),
+    migProfile: str(raw.migProfile),
+    pcieGen: str(raw.pcieGen),
+    pcieWidth: str(raw.pcieWidth),
+    nvlinkLinks: num(raw.nvlinkLinks),
+    nvlinkStatus: str(raw.nvlinkStatus),
+    pool: str(raw.pool),
+    tenant: str(raw.tenant),
+    allocated: raw.allocated === true,
+  };
+  // pod 는 omitempty — 빈 값이면 키 자체를 만들지 않는다(옵셔널 계약 유지).
+  const pod = str(raw.pod);
+  if (pod !== '') gpu.pod = pod;
+  return gpu;
+}
+
+function normalizeAsset(raw: Partial<NodeAsset> | null | undefined): NodeAsset {
+  const src = raw ?? {};
+  return {
+    instance: str(src.instance),
+    csp: str(src.csp),
+    cluster: str(src.cluster),
+    rack: str(src.rack),
+    pdu: str(src.pdu),
+    model: str(src.model),
+    gpuCount: num(src.gpuCount),
+    kubeletVersion: str(src.kubeletVersion),
+    containerRuntime: str(src.containerRuntime),
+    osImage: str(src.osImage),
+    kernelVersion: str(src.kernelVersion),
+    labels: arr(src.labels),
+    taints: arr(src.taints),
+    serialNumber: str(src.serialNumber),
+    installedAt: str(src.installedAt),
+    ageDays: num(src.ageDays),
+    warrantyEnds: str(src.warrantyEnds),
+    ready: src.ready === true,
+    cordoned: src.cordoned === true,
+    agentMissing: src.agentMissing === true,
+    gpus: arr(src.gpus).map((g) => normalizeGpu(g)),
+  };
+}
+
+// ---- 조회 ----
+
+/** GET /api/v1/demo/node/{instance} — 없는 노드 404, 백필 중 503. */
+export async function fetchNodeAsset(instance: string): Promise<NodeAsset> {
+  const path = `/api/v1/demo/node/${encodeURIComponent(instance)}`;
+  const res = await fetch(path, { credentials: 'include' });
+  if (res.status === 401) throw new UnauthorizedError(path);
+  if (res.status === 404) throw new NodeAssetError('not-found', 404);
+  if (res.status === 503) throw new NodeAssetError('backfilling', 503);
+  if (!res.ok) throw new NodeAssetError('error', res.status);
+  const body = (await res.json()) as ApiEnvelope<Partial<NodeAsset>>;
+  return normalizeAsset(body.data);
+}
+
+// ---- 파생 헬퍼 ----
+
+/** 보증 만료까지 남은 일수(음수 = 이미 만료). 파싱 실패는 null — 배지 판정 제외. */
+export function warrantyDaysLeft(warrantyEnds: string, now: Date = new Date()): number | null {
+  const end = Date.parse(`${warrantyEnds}T00:00:00Z`);
+  if (Number.isNaN(end)) return null;
+  const today = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+  return Math.round((end - today) / 86_400_000);
+}
+
+export interface ParsedLabel {
+  key: string;
+  value: string;
+}
+
+/** "k=v" 라벨 1건 파싱. 값이 없는 라벨("node-role...=")은 value 가 빈 문자열. */
+export function parseLabel(raw: string): ParsedLabel {
+  const at = raw.indexOf('=');
+  if (at < 0) return { key: raw, value: '' };
+  return { key: raw.slice(0, at), value: raw.slice(at + 1) };
+}
+
+/** "Gen4 x16" — PCIe 링크 표기(둘 중 하나라도 비면 있는 쪽만). */
+export function formatPcie(gen: string, width: string): string {
+  const parts = [gen, width].filter((p) => p !== '');
+  return parts.length === 0 ? '—' : parts.join(' ');
+}
+
+/** NVLink 표기 — 0 링크는 미탑재 모델(L40S 등)이다. */
+export function formatNvlink(links: number, status: string): string {
+  if (links <= 0) return '미탑재';
+  return status === '' ? `${links}링크` : `${links}링크 · ${status}`;
+}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/web/src/lib/validation.ts b/web/src/lib/validation.ts
new file mode 100644
index 0000000..b4dcf37
--- /dev/null
+++ b/web/src/lib/validation.ts
@@ -0,0 +1,185 @@
+// validation.ts — 재사용 검증 상세(ValidationDetail) 타입 SSOT + 조회 클라이언트.
+//
+// `GET /api/v1/demo/validation/{uuid}` 가 GPU 1장의 사전검증 4항목·번인 진행·
+// 실시간 로그를 낸다(백엔드 internal/demo/validation.go 계약 미러).
+//
+// 전역 스냅샷(/demo/state)에 싣지 않는 이유: 로그 200줄짜리 상세를 전 페이지가
+// 2~5초로 폴링하는 스냅샷에 태울 수 없다. 노드 자산 대장(nodeAsset.ts)이 같은
+// 이유로 이미 분리돼 있고, 이 파일은 그 선례를 그대로 따른다 — 404(없는 GPU)와
+// 503(백필 중)은 화면 문구가 달라야 하므로 판정 가능한 kind 로 올린다.
+//
+// 폴링은 화면 몫이다: 진행 중(run.active)이면 2s, 아니면 15s 정도로
+// usePolledQuery 에 태운다(스냅샷 폴링과 별개 주기).
+import { type ApiEnvelope, UnauthorizedError } from '@/lib/api';
+
+/** 검증 항목 1건(사전검증 4종 / 번인 7종). */
+export interface ValidationItem {
+  id: string;
+  label: string;
+  describe: string;
+  status: 'pending' | 'running' | 'pass' | 'warn' | 'fail';
+  /** 측정 결과("Driver 550.90.07"). */
+  detail: string;
+  /** 보조 문구("CUDA Driver API OK"). */
+  detailSub: string;
+  ranAt?: number;
+  durationSec?: number;
+}
+
+/** 실시간 로그 1줄. */
+export interface ValidationLog {
+  at: number;
+  level: 'INFO' | 'WARN' | 'ERROR';
+  text: string;
+}
+
+/** 검증 스테이지 1회차. 집계 4종(total/passed/warned/failed)은 서버가 낸다 —
+ *  화면이 다시 세면 검증 개요와 항목 표가 어긋난다. */
+export interface ValidationRun {
+  kind: 'precheck' | 'burnin';
+  uuid: string;
+  active: boolean;
+  startedAt?: number;
+  /** 0~1. */
+  progress: number;
+  items: ValidationItem[];
+  log: ValidationLog[];
+  verdict?: 'pass' | 'warn' | 'fail';
+  total: number;
+  passed: number;
+  warned: number;
+  failed: number;
+}
+
+/** 재사용 4단계 스테퍼의 한 칸. status 어휘는 GateDiagram 의 GateStageStatus 와
+ *  같은 4종이다(새 상태 어휘를 만들지 않는다). */
+export interface ReuseStep {
+  id: string;
+  label: string;
+  status: 'done' | 'active' | 'blocked' | 'idle';
+  hint: string;
+}
+
+/** 액션 1건의 실행 가능 여부 + 사유. 버튼 활성 조건의 진실은 서버 가드다 —
+ *  화면이 같은 조건을 다시 유도하면(예: precheck.active 하나로만 막으면) 서버가
+ *  거부하는 상태에서 버튼이 살아 있어 시연 중 빨간 배너가 뜬다. reason 은
+ *  비활성 사유(버튼 아래 안내)이자 거부 시 배너 문구다. */
+export interface ValidationGate {
+  allowed: boolean;
+  reason: string;
+}
+
+export interface ValidationDetail {
+  uuid: string;
+  instance: string;
+  device: string;
+  model: string;
+  cluster: string;
+  csp: string;
+  idleDays: number;
+  precheck: ValidationRun;
+  burnin: ValidationRun;
+  steps: ReuseStep[];
+  precheckGate: ValidationGate;
+  burninGate: ValidationGate;
+  /** 교체 노드(victim) 시나리오 액션 2종 — 재번인 / 운영 풀 재투입. 단계가
+   *  진실이라 대상 GPU 와 무관하다(액션도 uuid 를 받지 않는다). */
+  restartBurninGate: ValidationGate;
+  returnGate: ValidationGate;
+}
+
+// ---- 실패 분류 (nodeAsset.ts 와 같은 규약) ----
+
+export type ValidationFailure = 'not-found' | 'backfilling' | 'error';
+
+export class ValidationError extends Error {
+  readonly kind: ValidationFailure;
+  readonly status: number;
+
+  constructor(kind: ValidationFailure, status: number) {
+    super(`validation: ${kind} (HTTP ${status})`);
+    this.name = 'ValidationError';
+    this.kind = kind;
+    this.status = status;
+  }
+}
+
+const FAILURE_TEXT: Record<ValidationFailure, string> = {
+  'not-found': '검증 대상 GPU 를 찾을 수 없다',
+  backfilling: '데이터 준비 중 — 잠시 후 재시도',
+  error: '검증 상세를 불러오지 못했다',
+};
+
+/** 조회 실패의 사용자 문구. 401 은 로그인 화면 전환이 처리하므로 null. */
+export function validationMessage(err: unknown): string | null {
+  if (err instanceof UnauthorizedError) return null;
+  if (err instanceof ValidationError) return FAILURE_TEXT[err.kind];
+  return FAILURE_TEXT.error;
+}
+
+// ---- 방어 파싱 (Go 의 nil 슬라이스는 null 로 직렬화된다) ----
+
+function arr<T>(v: readonly T[] | null | undefined): T[] {
+  return Array.isArray(v) ? [...v] : [];
+}
+
+function normalizeRun(
+  raw: Partial<ValidationRun> | null | undefined,
+  kind: ValidationRun['kind'],
+): ValidationRun {
+  return {
+    kind: raw?.kind ?? kind,
+    uuid: raw?.uuid ?? '',
+    active: raw?.active === true,
+    startedAt: raw?.startedAt ?? 0,
+    progress: raw?.progress ?? 0,
+    items: arr(raw?.items),
+    log: arr(raw?.log),
+    verdict: raw?.verdict,
+    total: raw?.total ?? 0,
+    passed: raw?.passed ?? 0,
+    warned: raw?.warned ?? 0,
+    failed: raw?.failed ?? 0,
+  };
+}
+
+/** 게이트 부재는 "실행 불가"로 읽는다 — 판단 근거가 없는데 버튼을 열면
+ *  서버가 거부하는 조작을 화면이 권하는 꼴이 된다(fail-closed). */
+function normalizeGate(raw: Partial<ValidationGate> | null | undefined): ValidationGate {
+  return { allowed: raw?.allowed === true, reason: raw?.reason ?? '' };
+}
+
+function normalizeDetail(raw: Partial<ValidationDetail> | null | undefined): ValidationDetail {
+  const src = raw ?? {};
+  return {
+    uuid: src.uuid ?? '',
+    instance: src.instance ?? '',
+    device: src.device ?? '',
+    model: src.model ?? '',
+    cluster: src.cluster ?? '',
+    csp: src.csp ?? '',
+    idleDays: src.idleDays ?? 0,
+    precheck: normalizeRun(src.precheck, 'precheck'),
+    burnin: normalizeRun(src.burnin, 'burnin'),
+    steps: arr(src.steps),
+    precheckGate: normalizeGate(src.precheckGate),
+    burninGate: normalizeGate(src.burninGate),
+    restartBurninGate: normalizeGate(src.restartBurninGate),
+    returnGate: normalizeGate(src.returnGate),
+  };
+}
+
+// ---- 조회 ----
+
+/** GET /api/v1/demo/validation/{uuid} — 없는 GPU 404, 백필 중 503.
+ *  미실행 GPU 는 404 가 아니라 200 + 전 항목 pending 이다. */
+export async function fetchValidation(uuid: string): Promise<ValidationDetail> {
+  const path = `/api/v1/demo/validation/${encodeURIComponent(uuid)}`;
+  const res = await fetch(path, { credentials: 'include' });
+  if (res.status === 401) throw new UnauthorizedError(path);
+  if (res.status === 404) throw new ValidationError('not-found', 404);
+  if (res.status === 503) throw new ValidationError('backfilling', 503);
+  if (!res.ok) throw new ValidationError('error', res.status);
+  const body = (await res.json()) as ApiEnvelope<Partial<ValidationDetail>>;
+  return normalizeDetail(body.data);
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..9567448
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from '@/App';
+import '@/index.css';
+
+const rootEl = document.getElementById('root');
+if (!rootEl) {
+  throw new Error('observatory: #root 마운트 지점이 없다');
+}
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/web/src/pages/Explorer.tsx b/web/src/pages/Explorer.tsx
new file mode 100644
index 0000000..85f289c
--- /dev/null
+++ b/web/src/pages/Explorer.tsx
@@ -0,0 +1,553 @@
+// Explorer — 시리즈 콤보박스 선택 + Recharts 시계열(/api/v1/query_range) + 라벨
+// 브라우즈(/api/v1/labels) + 매치된 시리즈 테이블(/api/v1/series). m5-design.md §4.4.
+//
+// shadcn `chart`(ChartContainer/ChartStyle)는 시리즈 색 토큰을
+// `<style dangerouslySetInnerHTML>`로 주입해 m5-constraints.md 의
+// "dangerouslySetInnerHTML 금지" 와 충돌한다(m5-design.md 적대검토 F1) — 그래서
+// 여기서는 Recharts 원시 컴포넌트를 그대로 쓰고, index.css 의 --chart-1..5 CSS
+// 변수를 Line 의 stroke prop 문자열로 직접 참조한다(별도 style 주입 불필요).
+import { useEffect, useMemo, useState } from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { api, type MatrixData, type SeriesData } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  METRIC_DEMO_FLEET_ALLOC_PCT,
+  METRIC_DEMO_FLEET_FAULTED,
+  METRIC_DEMO_FLEET_UTIL_AVG,
+  METRIC_DEMO_VICTIM_HEALTH,
+  METRIC_GPU_MEM_USED,
+  METRIC_GPU_POWER,
+  METRIC_GPU_TEMP,
+  METRIC_GPU_UTIL,
+} from '@/lib/gpuMetrics';
+
+// 프리셋 — 노드 기본 1종 + GPU 하드웨어 4종 + 데모 집계 4종. 이름은 전부
+// gpuMetrics.ts 상수를 참조한다(문자열 하드코딩 시 접두 drift 재발).
+// "(데모)" 표기 항목은 데모 엔진이 emit 하므로 실서비스 인스턴스에서는 비어 있다.
+const PRESET_METRICS = [
+  { value: 'node_load1', label: 'node_load1', hint: '1분 평균 부하' },
+  { value: METRIC_GPU_UTIL, label: METRIC_GPU_UTIL, hint: 'GPU 사용률' },
+  { value: METRIC_GPU_TEMP, label: METRIC_GPU_TEMP, hint: 'GPU 온도' },
+  { value: METRIC_GPU_POWER, label: METRIC_GPU_POWER, hint: 'GPU 전력' },
+  { value: METRIC_GPU_MEM_USED, label: METRIC_GPU_MEM_USED, hint: 'GPU 메모리 사용' },
+  {
+    value: METRIC_DEMO_FLEET_UTIL_AVG,
+    label: METRIC_DEMO_FLEET_UTIL_AVG,
+    hint: '플릿 평균 사용률 (데모)',
+  },
+  {
+    value: METRIC_DEMO_FLEET_ALLOC_PCT,
+    label: METRIC_DEMO_FLEET_ALLOC_PCT,
+    hint: '플릿 할당율 (데모)',
+  },
+  {
+    value: METRIC_DEMO_FLEET_FAULTED,
+    label: METRIC_DEMO_FLEET_FAULTED,
+    hint: '장애 GPU 수 (데모)',
+  },
+  {
+    value: METRIC_DEMO_VICTIM_HEALTH,
+    label: METRIC_DEMO_VICTIM_HEALTH,
+    hint: '대상 GPU Health 점수 (데모)',
+  },
+] as const;
+
+type RangeKey = '1h' | '6h' | '24h' | '7d';
+
+const RANGE_SECONDS: Record<RangeKey, number> = {
+  '1h': 3600,
+  '6h': 6 * 3600,
+  '24h': 24 * 3600,
+  '7d': 7 * 24 * 3600,
+};
+
+const RANGE_LABELS: Record<RangeKey, string> = {
+  '1h': '최근 1시간',
+  '6h': '최근 6시간',
+  '24h': '최근 24시간',
+  '7d': '최근 7일',
+};
+
+const RANGE_KEYS = Object.keys(RANGE_LABELS) as RangeKey[];
+
+// query_range 서버 상한(maxRangePoints=1500, internal/apiserver/server.go)에
+// 여유를 둔 화면 해상도 목표(~500 포인트)로 step 을 정한다(m5-design.md §4.4 ②).
+const MIN_STEP_SECONDS = 15;
+const TARGET_POINTS = 500;
+
+const CHART_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+];
+
+// 한 셀렉터가 수백~수천 시리즈에 매치될 수 있다(플릿 전 노드의 node_load1 =
+// 879 시리즈). 전부 그리면 선이 뭉개지는 것보다 범례가 먼저 터진다 — Recharts
+// Legend 가 시리즈명 879개를 화면 위로 흘려보내 상단 네비·카드 제목까지 덮었다.
+// 상위 N 개만 그리고 나머지는 개수로만 알린다.
+const MAX_CHART_SERIES = 8;
+
+/** 매치 목록 표에 그리는 행 수 — 표는 셀렉터가 무엇에 걸렸는지 보여주는 표본이다. */
+const MAX_SERIES_ROWS = 20;
+
+/** `__name__` 을 제외한 나머지 라벨을 이름순 정렬해 `k="v", ...` 문자열로 합친다
+ * (시리즈 범례명·매치 테이블이 공유하는 표시 전용 포맷). */
+function formatLabelPart(rest: Record<string, string>): string {
+  return Object.entries(rest)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(', ');
+}
+
+/** 라벨셋을 `metric_name{k="v", ...}` 형태로 포맷한다(표시 전용). */
+function formatMetric(metric: Record<string, string>): string {
+  const { __name__: name, ...rest } = metric;
+  const labelPart = formatLabelPart(rest);
+  if (!name) return labelPart ? `{${labelPart}}` : '(이름 없음)';
+  return labelPart ? `${name}{${labelPart}}` : name;
+}
+
+function formatTick(unixSec: number, rangeKey: RangeKey): string {
+  const date = new Date(unixSec * 1000);
+  if (rangeKey === '24h' || rangeKey === '7d') {
+    return date.toLocaleString('ko-KR', {
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+  return date.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
+}
+
+// api.ts 의 request() 는 !ok 응답을 `observatory: HTTP <status> — <path>` 로만
+// 던진다(본문의 error 필드는 포함하지 않음) — 상태 코드로만 400 을 구분해
+// 셀렉터 문법 오류를 인라인 표기한다(m5-constraints.md "서버가 400 으로 거절하는
+// 문법은 인라인 에러 표기").
+function describeError(err: unknown): string {
+  const message = err instanceof Error ? err.message : String(err);
+  if (message.includes('HTTP 400')) {
+    return '셀렉터 또는 파라미터가 올바르지 않다 — metric_name 또는 metric_name{label="value"} 형식만 지원한다(정규식 매처 미지원).';
+  }
+  return '조회 중 오류가 발생했다.';
+}
+
+interface ChartRow {
+  time: number;
+  [seriesKey: string]: number | null;
+}
+
+interface SeriesMeta {
+  key: string;
+  name: string;
+  color: string;
+}
+
+// matrix 응답은 시리즈별로 독립된 [t,v][] 를 낸다 — Recharts 가 그릴 수 있는
+// 공통 시간축 행 배열로 병합한다. 시리즈에 없는 버킷은 null 로 명시해
+// connectNulls=false 가 그 지점만 끊어 그리게 한다(m5-design.md §3.3).
+function buildChartData(matrix: MatrixData | null): {
+  rows: ChartRow[];
+  seriesMeta: SeriesMeta[];
+  totalSeries: number;
+} {
+  if (!matrix || matrix.result.length === 0) {
+    return { rows: [], seriesMeta: [], totalSeries: 0 };
+  }
+
+  const totalSeries = matrix.result.length;
+  const drawn = matrix.result.slice(0, MAX_CHART_SERIES);
+
+  const seriesMeta: SeriesMeta[] = drawn.map((s, index) => ({
+    key: `s${index}`,
+    name: formatMetric(s.metric),
+    color: CHART_COLORS[index % CHART_COLORS.length],
+  }));
+
+  const times = new Set<number>();
+  for (const s of drawn) {
+    for (const [t] of s.values) {
+      times.add(t);
+    }
+  }
+  const sortedTimes = Array.from(times).sort((a, b) => a - b);
+
+  const rows: ChartRow[] = [];
+  const rowByTime = new Map<number, ChartRow>();
+  for (const t of sortedTimes) {
+    const row: ChartRow = { time: t };
+    for (const meta of seriesMeta) {
+      row[meta.key] = null;
+    }
+    rows.push(row);
+    rowByTime.set(t, row);
+  }
+
+  drawn.forEach((s, index) => {
+    const key = seriesMeta[index].key;
+    for (const [t, v] of s.values) {
+      const row = rowByTime.get(t);
+      if (row) row[key] = Number(v);
+    }
+  });
+
+  return { rows, seriesMeta, totalSeries };
+}
+
+export default function Explorer() {
+  const [selector, setSelector] = useState<string>(PRESET_METRICS[0].value);
+  const [rangeKey, setRangeKey] = useState<RangeKey>('1h');
+
+  const [comboOpen, setComboOpen] = useState(false);
+  const [comboInput, setComboInput] = useState('');
+
+  const [labelNames, setLabelNames] = useState<string[]>([]);
+  const [labelsError, setLabelsError] = useState<string | null>(null);
+
+  const [matrix, setMatrix] = useState<MatrixData | null>(null);
+  const [seriesList, setSeriesList] = useState<SeriesData>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 라벨 이름 브라우즈 — 마운트 시 1회 조회(m5-constraints.md "라벨 브라우즈").
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .labels()
+      .then((res) => {
+        if (!cancelled) setLabelNames(res.data);
+      })
+      .catch(() => {
+        if (!cancelled) setLabelsError('라벨 목록을 불러오지 못했다.');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // 시리즈 나열 + 시계열 — selector/rangeKey 변경 시마다 재조회.
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    const rangeSeconds = RANGE_SECONDS[rangeKey];
+    const endSec = Math.floor(Date.now() / 1000);
+    const startSec = endSec - rangeSeconds;
+    const step = Math.max(MIN_STEP_SECONDS, Math.floor(rangeSeconds / TARGET_POINTS));
+
+    Promise.all([api.rangeQuery(selector, startSec, endSec, step), api.series([selector])])
+      .then(([rangeRes, seriesRes]) => {
+        if (cancelled) return;
+        setMatrix(rangeRes.data);
+        setSeriesList(seriesRes.data);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setMatrix(null);
+        setSeriesList([]);
+        setError(describeError(err));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selector, rangeKey]);
+
+  const { rows, seriesMeta, totalSeries } = useMemo(() => buildChartData(matrix), [matrix]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 제목은 셸이 메뉴 라벨로 이미 그린다(중복 h1 금지 — Overview 와 동일). */}
+      <p className="text-muted-foreground text-sm">
+        수집 중인 메트릭을 직접 골라 원하는 기간의 시계열을 살펴본다.
+      </p>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>메트릭 선택</CardTitle>
+          <CardDescription>
+            지표와 기간을 고르면 아래에 시계열이 그려진다. 셀렉터는{' '}
+            <code className="rounded bg-muted px-1 py-0.5">metric_name</code> 또는{' '}
+            <code className="rounded bg-muted px-1 py-0.5">
+              metric_name{'{'}label="value"{'}'}
+            </code>{' '}
+            형식을 지원한다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-center gap-2">
+            {/* 열 때 검색어를 비운다. 현재 셀렉터를 넣어 두면 cmdk 가 그 문자열로
+                목록을 걸러, 프리셋 9종 중 "이미 고른 그 항목" 1개만 남은 채로
+                열렸다(실측: node_load1 상태에서 열면 표시 2행 = node_load1 +
+                자유 입력). 지표를 바꾸려고 여는 물건이 바꿀 대상을 감춘 셈이다. */}
+            <Popover
+              open={comboOpen}
+              onOpenChange={(open) => {
+                setComboOpen(open);
+                if (open) setComboInput('');
+              }}
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={comboOpen}
+                  className="w-full justify-between font-mono text-sm sm:w-96"
+                >
+                  <span className="truncate">{selector}</span>
+                  <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-96 p-0" align="start">
+                <Command>
+                  <CommandInput
+                    placeholder="메트릭 이름 또는 셀렉터 입력…"
+                    value={comboInput}
+                    onValueChange={setComboInput}
+                  />
+                  <CommandList>
+                    <CommandGroup heading="프리셋">
+                      {PRESET_METRICS.map((m) => (
+                        <CommandItem
+                          key={m.value}
+                          value={m.value}
+                          keywords={[m.hint]}
+                          onSelect={(value) => {
+                            setSelector(value);
+                            setComboOpen(false);
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              'size-4',
+                              selector === m.value ? 'opacity-100' : 'opacity-0'
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-mono">{m.label}</span>
+                            <span className="text-xs text-muted-foreground">{m.hint}</span>
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                    {comboInput.trim() !== '' && (
+                      <CommandGroup heading="자유 입력" forceMount>
+                        <CommandItem
+                          value={`__custom__${comboInput}`}
+                          forceMount
+                          onSelect={() => {
+                            setSelector(comboInput.trim());
+                            setComboOpen(false);
+                          }}
+                        >
+                          <span className="truncate font-mono">{comboInput}</span>
+                          를 셀렉터로 사용
+                        </CommandItem>
+                      </CommandGroup>
+                    )}
+                    <CommandEmpty>검색어를 입력하거나 프리셋을 선택한다.</CommandEmpty>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+
+            <Select value={rangeKey} onValueChange={(v) => setRangeKey(v as RangeKey)}>
+              <SelectTrigger className="w-36" aria-label="조회 기간">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {RANGE_KEYS.map((k) => (
+                  <SelectItem key={k} value={k}>
+                    {RANGE_LABELS[k]}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="flex flex-col gap-2">
+            <p className="text-xs text-muted-foreground">필터로 쓸 수 있는 라벨</p>
+            {labelsError ? (
+              <p className="text-xs text-destructive">{labelsError}</p>
+            ) : labelNames.length === 0 ? (
+              <Skeleton className="h-5 w-48" />
+            ) : (
+              <div className="flex flex-wrap gap-1">
+                {labelNames.map((name) => (
+                  <Badge key={name} variant="outline" className="font-mono text-xs">
+                    {name}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>시계열</CardTitle>
+          <CardDescription>
+            {totalSeries === 0
+              ? '매치된 시리즈가 없다.'
+              : totalSeries > seriesMeta.length
+                ? `${totalSeries.toLocaleString('ko-KR')}개 시리즈 중 상위 ${seriesMeta.length}개 · ${RANGE_LABELS[rangeKey]}`
+                : `${seriesMeta.length}개 시리즈 · ${RANGE_LABELS[rangeKey]}`}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loading && rows.length === 0 ? (
+            <Skeleton className="h-80 w-full" />
+          ) : rows.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              표시할 데이터가 없다.
+            </p>
+          ) : (
+            <ResponsiveContainer width="100%" height={320}>
+              <LineChart data={rows} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis
+                  dataKey="time"
+                  type="number"
+                  domain={['dataMin', 'dataMax']}
+                  tickFormatter={(t: number) => formatTick(t, rangeKey)}
+                  tick={{ fontSize: 12 }}
+                  className="fill-muted-foreground"
+                />
+                <YAxis
+                  domain={['auto', 'auto']}
+                  width={56}
+                  tick={{ fontSize: 12 }}
+                  className="fill-muted-foreground"
+                />
+                <Tooltip
+                  labelFormatter={(t) => formatTick(Number(t), rangeKey)}
+                  contentStyle={{
+                    backgroundColor: 'var(--popover)',
+                    borderColor: 'var(--border)',
+                    color: 'var(--popover-foreground)',
+                    fontSize: 12,
+                  }}
+                />
+                <Legend wrapperStyle={{ fontSize: 12 }} />
+                {seriesMeta.map((meta) => (
+                  <Line
+                    key={meta.key}
+                    type="monotone"
+                    dataKey={meta.key}
+                    name={meta.name}
+                    stroke={meta.color}
+                    strokeWidth={2}
+                    dot={false}
+                    connectNulls={false}
+                    isAnimationActive={false}
+                  />
+                ))}
+              </LineChart>
+            </ResponsiveContainer>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>매치된 시리즈</CardTitle>
+          <CardDescription>
+            {seriesList.length > MAX_SERIES_ROWS
+              ? `총 ${seriesList.length.toLocaleString('ko-KR')}건 중 상위 ${MAX_SERIES_ROWS}건`
+              : `${seriesList.length}건`}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>메트릭</TableHead>
+                <TableHead>레이블</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {seriesList.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={2} className="text-center text-muted-foreground">
+                    {loading ? '불러오는 중…' : '매치된 시리즈가 없다.'}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                seriesList.slice(0, MAX_SERIES_ROWS).map((lset) => {
+                  const { __name__: name, ...rest } = lset;
+                  const labelPart = formatLabelPart(rest);
+                  return (
+                    <TableRow key={`${name ?? ''}-${labelPart}`}>
+                      <TableCell className="font-mono text-xs">{name ?? '—'}</TableCell>
+                      <TableCell className="font-mono text-xs text-muted-foreground">
+                        {labelPart || '—'}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
new file mode 100644
index 0000000..4261b88
--- /dev/null
+++ b/web/src/pages/Login.tsx
@@ -0,0 +1,94 @@
+// Login — 사용자/비번 → POST /api/v1/auth/login. 실패는 단일 메시지
+// (사용자/비번 구분 없음 — 계정 열거 방지, m5-design.md §4.4).
+import { type FormEvent, useState } from 'react';
+import { Navigate, useLocation, useNavigate } from 'react-router';
+import { useAuth } from '@/auth/AuthContext';
+import { useDemoStatus } from '@/hooks/useDemoStatus';
+import { productName, productTagline } from '@/lib/branding';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export default function Login() {
+  const { status, login } = useAuth();
+  const demoStatus = useDemoStatus();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [failed, setFailed] = useState(false);
+  const [pending, setPending] = useState(false);
+
+  const from =
+    (location.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? '/overview';
+
+  if (status === 'authed') {
+    return <Navigate to={from} replace />;
+  }
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setFailed(false);
+    try {
+      await login(username, password);
+      navigate(from, { replace: true });
+    } catch {
+      setFailed(true);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-svh items-center justify-center p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>{productName(demoStatus?.enabled)}</CardTitle>
+          <CardDescription>{productTagline(demoStatus?.enabled)} 로그인</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={onSubmit} className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="username">사용자</Label>
+              <Input
+                id="username"
+                autoComplete="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                required
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="password">비밀번호</Label>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            {failed && (
+              <Alert variant="destructive">
+                <AlertDescription>인증에 실패했다.</AlertDescription>
+              </Alert>
+            )}
+            <Button type="submit" disabled={pending}>
+              {pending ? '로그인 중…' : '로그인'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/src/pages/Map.tsx b/web/src/pages/Map.tsx
new file mode 100644
index 0000000..4ec04e5
--- /dev/null
+++ b/web/src/pages/Map.tsx
@@ -0,0 +1,323 @@
+// Map — 노드 × 디바이스 온도 히트맵 (m5-design.md §4.4 Map 행).
+// 위상(행×열 존재 여부) = GET /api/v1/series(생략 시 최근 1h, server.go
+// defaultSeriesWindow) 로 결정하고, 현재값 = GET /api/v1/query(5m 평가창,
+// queryWindow) 로 채운다 — 위상엔 있으나 현재값이 없는 셀은 "데이터 없음"
+// (muted) 으로 표시한다(디바이스 최근 무응답 신호. Overview 의 up/down 판정과
+// 동일한 "넓은 창 관측 vs 좁은 창 최신값" 비대칭을 재사용하는 설계).
+// 셀 배경 = index.css 의 --chart-1..5 토큰을 온도 임계 단계색으로 재사용
+// (요청 색만 도입 금지 — 기존 chart 토큰 재사용, m5-design.md §4.4 지시).
+// hover 상세 = HoverCard(셀: 라벨 전체 + 값 + 상태) / Tooltip(범례: 임계값 안내).
+import { useEffect, useMemo, useState } from 'react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { api, UnauthorizedError } from '@/lib/api';
+import { METRIC_GPU_TEMP as GPU_TEMP_METRIC } from '@/lib/gpuMetrics';
+import { cn } from '@/lib/utils';
+
+/** Overview 와 동일 주기(m5-design.md §4.4, M4 POLL_INTERVAL 계승). */
+const POLL_MS = 15_000;
+const NO_DATA_SWATCH = 'bg-util-band-0';
+
+/** 한 화면에 담는 노드 행 수 — 플릿 전체(수백 대)를 다 그리면 페이지가 수십
+ *  화면 높이가 되어 히트맵이 "한눈에 보는" 물건이 아니게 된다. 나머지는 총계로만
+ *  알린다. */
+const MAX_ROWS = 24;
+
+interface Band {
+  shortLabel: string;
+  rangeLabel: string;
+  swatchClass: string;
+  test: (celsius: number) => boolean;
+}
+
+// 오름차순 평가 — 배열 순서대로 첫 매치 채택. 색은 통합 상황판 히트맵과 같은
+// --util-band-* 토큰을 쓴다(초록→호박→빨강) — 두 히트맵이 같은 제품으로 읽히려면
+// 팔레트가 같아야 한다.
+//
+// 임계는 H100/H200 SXM 실동작 기준이다: 부하 중 75°C 이하는 정상 운전이고,
+// 83°C 부터 관찰 대상, 88°C 부근이 thermal throttle 진입이다. 구 임계(50/65/75/85)
+// 는 정상 운전 온도를 전부 "높음"으로 칠해 플릿 전체가 불난 것처럼 보였다.
+const BANDS: Band[] = [
+  { shortLabel: '정상', rangeLabel: '75°C 미만', swatchClass: 'bg-util-band-1', test: (c) => c < 75 },
+  { shortLabel: '주의', rangeLabel: '75~82°C', swatchClass: 'bg-util-band-2', test: (c) => c < 83 },
+  { shortLabel: '높음', rangeLabel: '83~87°C', swatchClass: 'bg-util-band-3', test: (c) => c < 88 },
+  { shortLabel: '위험', rangeLabel: '88°C 이상 (스로틀)', swatchClass: 'bg-util-band-4', test: () => true },
+];
+
+function bandFor(celsius: number): Band {
+  return BANDS.find((band) => band.test(celsius)) ?? BANDS[BANDS.length - 1];
+}
+
+interface Cell {
+  instance: string;
+  device: string;
+  labels: Record<string, string>;
+  celsius: number | null;
+}
+
+// "|" 구분자 — instance/device 라벨 값에 나타날 일이 없는 문자로 조인해
+// 두 라벨을 하나의 그리드 셀 키로 합친다.
+function cellKey(instance: string, device: string): string {
+  return `${instance}|${device}`;
+}
+
+// 스크레이퍼가 모든 시리즈에 instance 라벨을 무조건 주입하므로(m2-design.md
+// §4 라벨 매핑 계약) 행 키는 항상 존재 — node 는 exposition 원본 라벨 대비
+// 방어적 대체일 뿐.
+function labelInstance(labels: Record<string, string>): string {
+  return labels.instance ?? labels.node ?? '알수없음';
+}
+
+// device 라벨 부재 시 단일 "default" 열로 수렴(§2 Simplicity — 불필요한
+// 방어 분기 대신 한 갈래로 처리).
+function labelDevice(labels: Record<string, string>): string {
+  return labels.device ?? labels.gpu ?? 'default';
+}
+
+function GridCell({
+  instance,
+  device,
+  cell,
+}: {
+  instance: string;
+  device: string;
+  cell: Cell | undefined;
+}) {
+  const celsius = cell?.celsius ?? null;
+  const band = celsius === null ? null : bandFor(celsius);
+  const swatchClass = band?.swatchClass ?? NO_DATA_SWATCH;
+  const statusLabel = band ? `${band.shortLabel} (${band.rangeLabel})` : '데이터 없음';
+
+  return (
+    <HoverCard openDelay={100} closeDelay={100}>
+      <HoverCardTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${instance} / ${device}: ${statusLabel}`}
+          className={cn(
+            'size-7 rounded-[3px] transition-opacity hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring',
+            swatchClass,
+          )}
+        />
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm">
+          <dt className="text-muted-foreground">instance</dt>
+          <dd className="truncate font-medium">{instance}</dd>
+          <dt className="text-muted-foreground">device</dt>
+          <dd className="truncate font-medium">{device}</dd>
+          <dt className="text-muted-foreground">값</dt>
+          <dd className="font-medium">{celsius === null ? '—' : `${celsius.toFixed(1)}°C`}</dd>
+          <dt className="text-muted-foreground">상태</dt>
+          <dd>
+            <Badge variant="outline">{statusLabel}</Badge>
+          </dd>
+        </dl>
+        {cell && (
+          <div className="mt-3 flex flex-wrap gap-1 border-t pt-2">
+            {Object.entries(cell.labels).map(([k, v]) => (
+              <Badge key={k} variant="secondary" className="font-normal">
+                {k}={v}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
+export default function MapPage() {
+  const [cells, setCells] = useState<Map<string, Cell> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [updatedAt, setUpdatedAt] = useState<Date | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      try {
+        const [seriesRes, queryRes] = await Promise.all([
+          api.series([GPU_TEMP_METRIC]),
+          api.instantQuery(GPU_TEMP_METRIC),
+        ]);
+        if (cancelled) return;
+
+        const next = new Map<string, Cell>();
+        for (const labels of seriesRes.data) {
+          const instance = labelInstance(labels);
+          const device = labelDevice(labels);
+          next.set(cellKey(instance, device), { instance, device, labels, celsius: null });
+        }
+        for (const sample of queryRes.data.result) {
+          const instance = labelInstance(sample.metric);
+          const device = labelDevice(sample.metric);
+          const parsed = Number(sample.value[1]);
+          const key = cellKey(instance, device);
+          const prev = next.get(key);
+          next.set(key, {
+            instance,
+            device,
+            labels: prev?.labels ?? sample.metric,
+            celsius: Number.isFinite(parsed) ? parsed : null,
+          });
+        }
+
+        setCells(next);
+        setError(null);
+        setUpdatedAt(new Date());
+      } catch (err) {
+        // 401 은 api.ts 의 onUnauthorized 핸들러가 이미 AuthContext 를 anon 으로
+        // 전환해 로그인 화면으로 보낸다 — 여기서 별도 에러 배너를 띄우지 않는다.
+        if (cancelled || err instanceof UnauthorizedError) return;
+        setError(err instanceof Error ? err.message : 'observatory: 알 수 없는 오류');
+      }
+    }
+
+    void load();
+    const timer = window.setInterval(() => void load(), POLL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, []);
+
+  const allInstances = useMemo(() => {
+    const set = new Set<string>();
+    for (const cell of cells?.values() ?? []) set.add(cell.instance);
+    return Array.from(set).sort();
+  }, [cells]);
+
+  const instances = useMemo(() => allInstances.slice(0, MAX_ROWS), [allInstances]);
+
+  const devices = useMemo(() => {
+    const set = new Set<string>();
+    for (const cell of cells?.values() ?? []) set.add(cell.device);
+    return Array.from(set).sort();
+  }, [cells]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 제목은 셸이 메뉴 라벨로 이미 그린다(중복 h1 금지 — Overview 와 동일). */}
+      <p className="text-muted-foreground text-sm">
+        노드별 GPU 온도를 히트맵으로 펼쳐 과열 노드를 한눈에 찾는다.
+      </p>
+
+      <Card>
+      <CardHeader>
+        <CardTitle>노드 × GPU 온도 히트맵</CardTitle>
+        <CardDescription>
+          행 = 노드, 열 = GPU 디바이스. 최근 1시간 관측된 GPU 를 펼치고 현재 온도(5분 평가창)로
+          칠한다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {!cells ? (
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-5 w-64" />
+            <Skeleton className="h-40 w-full" />
+          </div>
+        ) : instances.length === 0 || devices.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            표시할 GPU 온도 데이터가 없다 — 아직 수집되지 않았거나 대상 노드에 GPU 센서가 없다.
+          </p>
+        ) : (
+          <TooltipProvider>
+            <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+              <span className="font-medium text-foreground">범례</span>
+              {BANDS.map((band) => (
+                <Tooltip key={band.shortLabel}>
+                  <TooltipTrigger asChild>
+                    <span className="flex cursor-default items-center gap-1.5">
+                      <span className={cn('size-3 rounded-sm', band.swatchClass)} />
+                      {band.shortLabel}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>{band.rangeLabel}</TooltipContent>
+                </Tooltip>
+              ))}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="flex cursor-default items-center gap-1.5">
+                    <span className={cn('size-3 rounded-sm', NO_DATA_SWATCH)} />
+                    데이터없음
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  최근 5분 평가창 안에 값을 받지 못했다(디바이스 무응답 가능성)
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <div className="overflow-x-auto">
+              <div
+                className="grid w-fit gap-1"
+                style={{
+                  gridTemplateColumns: `auto repeat(${devices.length}, 1.75rem)`,
+                }}
+              >
+                <div />
+                {devices.map((device) => (
+                  <div
+                    key={`head-${device}`}
+                    title={device}
+                    className="text-center font-medium text-[10px] text-muted-foreground"
+                  >
+                    {device}
+                  </div>
+                ))}
+                {instances.flatMap((instance) => [
+                  <div
+                    key={`row-${instance}`}
+                    title={instance}
+                    className="flex items-center truncate pr-2 text-xs font-medium"
+                  >
+                    {instance}
+                  </div>,
+                  ...devices.map((device) => (
+                    <GridCell
+                      key={`${instance}-${device}`}
+                      instance={instance}
+                      device={device}
+                      cell={cells.get(cellKey(instance, device))}
+                    />
+                  )),
+                ])}
+              </div>
+            </div>
+          </TooltipProvider>
+        )}
+
+        {updatedAt && (
+          <p className="text-xs text-muted-foreground">
+            {allInstances.length > instances.length &&
+              `총 ${allInstances.length.toLocaleString('ko-KR')}대 중 상위 ${instances.length}대 · `}
+            마지막 갱신 {updatedAt.toLocaleTimeString('ko-KR')} · {POLL_MS / 1000}초마다 자동 갱신
+          </p>
+        )}
+      </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/src/pages/Overview.tsx b/web/src/pages/Overview.tsx
new file mode 100644
index 0000000..342ecdf
--- /dev/null
+++ b/web/src/pages/Overview.tsx
@@ -0,0 +1,283 @@
+// Overview — KPI 타일(노드 수·up/down·평균 load·GPU 온도·총 시리즈) + 노드 상태
+// 테이블 (m5-design.md §4.4). 데이터 소스: GET /api/v1/query ×2(node_load1,
+// gpuMetrics.METRIC_GPU_TEMP — 실 에이전트 nodevitals_hw_ 접두 계약) + GET /api/v1/series
+// (두 메트릭 union — 총 시리즈 KPI + 1h 로스터). up/down 판정 = node_load1 instant
+// vector 존재(5분 평가창) 여부 — roster(series, 1시간 창) 대비 부재는 DOWN(M4
+// countUpDown 산식 계승, observatory_up 자체관측 메트릭 대신 실 vitals 메트릭으로
+// 판정). 15s polling(M4 POLL_INTERVAL 계승). 서버 유래 문자열은 전부 JSX 텍스트로만
+// 렌더 — dangerouslySetInnerHTML 사용 금지(XSS 방침).
+import { useCallback, useEffect, useState } from 'react';
+import { Activity, Database, Gauge, Server, Thermometer } from 'lucide-react';
+import KpiTile from '@/components/gpu/KpiTile';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { api, type InstantSample, UnauthorizedError } from '@/lib/api';
+import { METRIC_GPU_TEMP } from '@/lib/gpuMetrics';
+
+const METRIC_LOAD = 'node_load1';
+const POLL_INTERVAL_MS = 15000;
+const EM_DASH = '—';
+
+/** 표에 그리는 노드 행 수 — 수집 상태 화면의 표는 "샘플을 보여주는 것"이지
+ *  플릿 전수 목록이 아니다. 수백 행을 다 뿌리면 페이지가 수십 화면이 된다. */
+const MAX_ROWS = 12;
+
+interface NodeRow {
+  instance: string;
+  up: boolean;
+  load: number | null;
+  gpuTemp: number | null;
+}
+
+interface Kpis {
+  nodeCount: number;
+  up: number;
+  down: number;
+  avgLoad: number | null;
+  maxGpuTemp: number | null;
+  totalSeries: number;
+}
+
+interface RefreshResult {
+  rows: NodeRow[];
+  kpis: Kpis;
+}
+
+function labelInstance(labels: Record<string, string>): string {
+  return labels.instance ?? '';
+}
+
+// instance → 대표값(최댓값) 맵 — 동일 instance 에 시리즈가 여럿이면(다중 GPU
+// 노드 등) 최댓값을 채택한다. 핫스팟 관제 의미로 최댓값이 맞다(M4 byInstanceMax
+// 산식 계승).
+function byInstanceMax(samples: InstantSample[]): Map<string, number> {
+  const m = new Map<string, number>();
+  for (const s of samples) {
+    const inst = labelInstance(s.metric);
+    if (!inst) continue;
+    const v = Number(s.value[1]);
+    const prev = m.get(inst);
+    if (prev === undefined || v > prev) m.set(inst, v);
+  }
+  return m;
+}
+
+function average(values: number[]): number | null {
+  return values.length === 0 ? null : values.reduce((sum, v) => sum + v, 0) / values.length;
+}
+
+function maxOf(values: number[]): number | null {
+  return values.length === 0 ? null : Math.max(...values);
+}
+
+export default function Overview() {
+  const [rows, setRows] = useState<NodeRow[] | null>(null);
+  const [kpis, setKpis] = useState<Kpis | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async (): Promise<RefreshResult> => {
+    const [loadResp, gpuResp, seriesResp] = await Promise.all([
+      api.instantQuery(METRIC_LOAD),
+      api.instantQuery(METRIC_GPU_TEMP),
+      api.series([METRIC_LOAD, METRIC_GPU_TEMP]),
+    ]);
+
+    const loadSamples = loadResp.data.result;
+    const gpuSamples = gpuResp.data.result;
+    const roster = seriesResp.data;
+
+    const loadByInstance = byInstanceMax(loadSamples);
+    const gpuByInstance = byInstanceMax(gpuSamples);
+
+    // roster(1시간 창)의 distinct instance — node_load1 instant(5분 창) 부재는 down.
+    const rosterInstances = new Set<string>();
+    for (const labels of roster) {
+      const inst = labelInstance(labels);
+      if (inst) rosterInstances.add(inst);
+    }
+
+    const nextRows: NodeRow[] = Array.from(rosterInstances)
+      .map((instance) => ({
+        instance,
+        up: loadByInstance.has(instance),
+        load: loadByInstance.get(instance) ?? null,
+        gpuTemp: gpuByInstance.get(instance) ?? null,
+      }))
+      .sort((a, b) => a.instance.localeCompare(b.instance));
+
+    const upCount = nextRows.filter((row) => row.up).length;
+
+    return {
+      rows: nextRows,
+      kpis: {
+        nodeCount: nextRows.length,
+        up: upCount,
+        down: nextRows.length - upCount,
+        avgLoad: average(loadSamples.map((s) => Number(s.value[1]))),
+        maxGpuTemp: maxOf(gpuSamples.map((s) => Number(s.value[1]))),
+        totalSeries: roster.length,
+      },
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function tick() {
+      try {
+        const result = await refresh();
+        if (!cancelled) {
+          setRows(result.rows);
+          setKpis(result.kpis);
+          setError(null);
+        }
+      } catch (err) {
+        // 401 은 api.ts 의 핸들러가 이미 처리한다(anon 전환 → RequireAuth 가 /login
+        // 으로 리다이렉트) — 여기서는 그 외 에러(네트워크·5xx)만 노출하고 폴링은
+        // 계속한다(다음 tick 에 자연 복구 시도).
+        if (!cancelled && !(err instanceof UnauthorizedError)) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      }
+    }
+
+    void tick();
+    const timer = setInterval(() => void tick(), POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [refresh]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 제목은 셸이 메뉴 라벨로 이미 그린다 — 같은 문구를 h1 으로 또 쓰면 화면
+          맨 위에 같은 말이 두 번 찍힌다. 여기서는 설명 한 줄만 얹는다. */}
+      <p className="text-muted-foreground text-sm">
+        플릿 전 노드의 메트릭 수집이 끊김 없이 이어지는지 확인한다.
+      </p>
+
+      {error && (
+        <p role="alert" className="text-sm text-destructive">
+          데이터 갱신 실패: {error}
+        </p>
+      )}
+
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5" aria-label="핵심 지표">
+        <KpiTile
+          label="수집 노드"
+          value={kpis && kpis.nodeCount.toLocaleString('ko-KR')}
+          hint="최근 1시간 관측된 노드"
+          tone="info"
+          icon={<Server />}
+        />
+        <KpiTile
+          label="수집 정상"
+          value={kpis && kpis.up.toLocaleString('ko-KR')}
+          sub={kpis ? `/ ${kpis.nodeCount.toLocaleString('ko-KR')}` : undefined}
+          hint={kpis ? `미수집 ${kpis.down}대` : undefined}
+          tone={kpis && kpis.down > 0 ? 'danger' : 'ok'}
+          icon={<Activity />}
+          progress={kpis && kpis.nodeCount > 0 ? (kpis.up / kpis.nodeCount) * 100 : undefined}
+        />
+        <KpiTile
+          label="평균 Load"
+          value={kpis && (kpis.avgLoad === null ? EM_DASH : kpis.avgLoad.toFixed(2))}
+          hint="노드 1분 평균 부하"
+          tone="default"
+          icon={<Gauge />}
+        />
+        <KpiTile
+          label="최고 GPU 온도"
+          value={kpis && (kpis.maxGpuTemp === null ? EM_DASH : `${kpis.maxGpuTemp.toFixed(1)}°C`)}
+          hint="플릿 최댓값 (스로틀 88°C)"
+          tone={kpis && kpis.maxGpuTemp !== null && kpis.maxGpuTemp >= 83 ? 'warn' : 'ok'}
+          icon={<Thermometer />}
+        />
+        <KpiTile
+          label="수집 시리즈"
+          value={kpis && kpis.totalSeries.toLocaleString('ko-KR')}
+          hint="노드 부하 + GPU 온도"
+          tone="info"
+          icon={<Database />}
+        />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>노드 수집 현황</CardTitle>
+          <CardDescription>
+            최근 1시간 관측된 노드 기준 — 최근 5분 안에 값이 들어오지 않으면 미수집으로 본다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {rows === null ? (
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-8 w-full" />
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Instance</TableHead>
+                  <TableHead>상태</TableHead>
+                  <TableHead>Load</TableHead>
+                  <TableHead>GPU 온도</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={4} className="text-center text-muted-foreground">
+                      등록된 노드가 없다
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  rows.slice(0, MAX_ROWS).map((row) => (
+                    <TableRow key={row.instance}>
+                      <TableCell className="font-medium">{row.instance}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={row.up ? 'default' : 'destructive'}
+                          className={row.up ? 'bg-emerald-600 dark:bg-emerald-600' : undefined}
+                        >
+                          {row.up ? 'UP' : 'DOWN'}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{row.load === null ? EM_DASH : row.load.toFixed(2)}</TableCell>
+                      <TableCell>
+                        {row.gpuTemp === null ? EM_DASH : `${row.gpuTemp.toFixed(1)}°C`}
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          )}
+          {rows !== null && rows.length > MAX_ROWS && (
+            <p className="pt-3 text-muted-foreground text-xs">
+              총 {rows.length.toLocaleString('ko-KR')}대 중 상위 {MAX_ROWS}대
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuAssistant.tsx b/web/src/pages/gpu/GpuAssistant.tsx
new file mode 100644
index 0000000..406b586
--- /dev/null
+++ b/web/src/pages/gpu/GpuAssistant.tsx
@@ -0,0 +1,977 @@
+// GpuAssistant — demo3 "GPU Assistant". 진행 중 장애를 문맥으로, 자연어 질문에
+// 카드로 답하는 대화형 콘솔이다. 응답은 결정론 스크립트다(LLM 아님 — 규약
+// §2.3 "단순 계산에 LLM 금지"): 질문을 6개 의도(원인/영향/이벤트/보고서/유휴/
+// 격리)로 분류해 이미 백엔드 DemoState 에 있는 데이터를 카드로 조립한다. 신규
+// 데이터 소스는 없다 — victim 미니차트만 useVictimSeries 가 range 질의로 가져온다.
+//
+// 조회 6종 중 '노드 격리 실행' 하나만 실제 조치다(approve-isolation) — 단계
+// 규칙은 서버가 SSOT 라 409 사유를 그대로 말풍선에 되돌린다.
+import {
+  Ban,
+  Bot,
+  CheckCheck,
+  CheckCircle2,
+  ChevronRight,
+  Clock,
+  Download,
+  ExternalLink,
+  FileText,
+  RefreshCw,
+  Send,
+  Server,
+  Share2,
+} from 'lucide-react';
+import { Fragment, type ReactNode, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router';
+import AlertTimeline from '@/components/gpu/AlertTimeline';
+import IdleDonut from '@/components/gpu/IdleDonut';
+import RemediationStepper from '@/components/gpu/RemediationStepper';
+import VictimMetricChart from '@/components/gpu/VictimMetricChart';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useDemo } from '@/hooks/demoContext';
+import { useVictimSeries } from '@/hooks/useVictimSeries';
+import type { AlertEvent, ChainLink, DemoState } from '@/lib/demoApi';
+import {
+  formatBytes,
+  formatCelsius,
+  formatCount,
+  formatPct,
+  METRIC_COLORS,
+} from '@/lib/gpuMetrics';
+
+// ---- 의도(질문) 정의 — 퀵액션 칩 + 키워드 매칭 ----
+
+type Intent = 'cause' | 'impact' | 'events' | 'report' | 'idle' | 'isolate';
+
+interface IntentDef {
+  id: Intent;
+  chip: string;
+  icon: ReactNode;
+  /** 사용자 말풍선으로 되비출 문장(칩 클릭 시). */
+  utterance: string;
+  /** 어시스턴트 답변의 리드인 한 줄. */
+  reply: string;
+  /** 자유 입력 매칭 키워드. */
+  keywords: string[];
+}
+
+const INTENTS: IntentDef[] = [
+  {
+    id: 'cause',
+    chip: '원인 요약',
+    icon: <FileText className="size-3" />,
+    utterance: '원인 요약해줘',
+    reply: '확인했습니다. 현재 장애의 요약 정보를 아래 정리했어요.',
+    keywords: ['원인', '이유', '왜', 'cause'],
+  },
+  {
+    id: 'impact',
+    chip: '영향 범위',
+    icon: <Share2 className="size-3" />,
+    utterance: '영향 범위 보여줘',
+    reply: '영향 범위를 정리했어요.',
+    keywords: ['영향', '범위', '경로', 'impact', 'blast'],
+  },
+  {
+    id: 'events',
+    chip: '이벤트 정리',
+    icon: <Clock className="size-3" />,
+    utterance: '관련 이벤트 정리해줘',
+    reply: '관련 이벤트 타임라인이에요.',
+    keywords: ['이벤트', '타임라인', '알림', 'event'],
+  },
+  {
+    id: 'report',
+    chip: '장애보고서 생성',
+    icon: <FileText className="size-3" />,
+    utterance: '장애보고서 만들어줘',
+    reply: '장애 보고서를 생성했어요. 다운로드해서 확인할 수 있어요.',
+    keywords: ['보고서', '리포트', 'report', 'pdf'],
+  },
+  {
+    id: 'idle',
+    chip: '유휴 장비',
+    icon: <Server className="size-3" />,
+    utterance: '현재 유휴 장비도 알려줘',
+    reply: '현재 유휴 장비 현황을 조회했어요.',
+    keywords: ['유휴', '놀고', 'idle', '여유'],
+  },
+  {
+    id: 'isolate',
+    chip: '노드 격리 실행',
+    icon: <Ban className="size-3" />,
+    utterance: '노드 격리 실행해줘',
+    reply: '노드 격리를 시작했어요.',
+    keywords: ['격리', 'cordon', 'isolate', '차단'],
+  },
+];
+
+function matchIntent(text: string): Intent | null {
+  const t = text.toLowerCase();
+  for (const it of INTENTS) {
+    if (it.keywords.some((k) => t.includes(k.toLowerCase()))) return it.id;
+  }
+  return null;
+}
+
+// ---- 대화 메시지 ----
+
+/** 보고서는 질문한 그 시점에 얼려 둔다 — 카드가 폴링마다 다시 만들어지면
+ *  파일명·생성일·용량이 화면에서 흔들린다. */
+interface ReportSnap {
+  name: string;
+  text: string;
+  at: number;
+}
+
+type Message =
+  | { role: 'user'; text: string; at: number }
+  | { role: 'assistant'; text: string; at: number; card?: Intent; report?: ReportSnap };
+
+type AssistantMessage = Extract<Message, { role: 'assistant' }>;
+
+// ---- 유틸 ----
+
+const TONE_TEXT: Record<ChainLink['tone'], string> = {
+  crit: 'text-metric-fault',
+  major: 'text-metric-thermal',
+  warn: 'text-metric-thermal',
+  info: 'text-metric-cpu',
+  muted: 'text-muted-foreground',
+  ok: 'text-metric-pod',
+};
+
+const SEVERITY_LABEL: Record<string, string> = {
+  critical: 'Critical',
+  major: 'Major',
+  warning: 'Warning',
+  info: '정보',
+};
+
+const SEVERITY_COLOR: Record<string, string> = {
+  critical: METRIC_COLORS.fault,
+  major: METRIC_COLORS.thermal,
+  warning: METRIC_COLORS.mem,
+  info: METRIC_COLORS.cpu,
+};
+
+function shortModel(model: string): string {
+  return model.replace(/^NVIDIA\s+/, '');
+}
+
+/** GPU UUID 를 앞 4 + 뒤 4 로 — 7rem 박스에 36자를 넣으면 아무도 못 읽는다.
+ *  전 GPU 공통인 'GPU-' 접두사는 먼저 벗긴다: 그대로 자르면 앞 4자가 늘 'GPU-'
+ *  라 'GPU-…62fc' 가 되어 식별 hex 가 뒤 4자만 남는다(목업은 '3f2a…d91c'). */
+function shortUuid(uuid: string): string {
+  const hex = uuid.replace(/^GPU-/, '');
+  return hex.length <= 12 ? hex : `${hex.slice(0, 4)}…${hex.slice(-4)}`;
+}
+
+function hhmm(ms: number): string {
+  const d = new Date(ms);
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+
+/** epoch ms 이후 경과를 hh:mm:ss 로. 0(장애 없음)이면 '—'. */
+function elapsedText(fromMs: number, nowMs: number): string {
+  if (fromMs <= 0) return '—';
+  const s = Math.max(0, Math.floor((nowMs - fromMs) / 1000));
+  const hh = String(Math.floor(s / 3600)).padStart(2, '0');
+  const mm = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
+  const ss = String(s % 60).padStart(2, '0');
+  return `${hh}:${mm}:${ss}`;
+}
+
+/** 지속 시간의 기준점 — 최초 발생(firstAt)이다. 진행 중인 장애가 없으면 0 이다:
+ *  그때 서버 incident.at 은 스냅샷 생성 시각(=지금)이라, 그걸로 물러나면 폴링마다
+ *  '지금'으로 되감기는 지속 시간과 차트 오른쪽 끝에 찍히는 '장애 시점' 마커가
+ *  생긴다 — 같은 화면 헤더가 '진행 중인 장애 없음' 이라 말하는 동안. */
+function incidentStart(state: DemoState): number {
+  if (!state.incident.active) return 0;
+  return state.incident.firstAt || state.incident.at;
+}
+
+/** victim GPU 의, *이번 장애 사이클* 알림만 최신순. 없으면 빈 배열이다 — 타
+ *  노드·형제 GPU 의 알림으로 물러나면 화면이 남의 사건을 victim 소행으로 단정한다
+ *  (실측: victim 알림 0건인데 '원인 요약' 첫 줄이 다른 노드의 AGENT_MISSING 을
+ *  gpu7 소행으로 적었다). 개체(device)가 빈 알림은 노드 단위 사건이라 이 GPU 의
+ *  근거가 맞다.
+ *
+ *  개체만큼 시간 축도 서버와 같은 기준이어야 한다. 알림 버퍼는 사이클이 넘어가도
+ *  비지 않으므로(리셋도 단계·장애 시계만 되감는다) 개체만 보면 *지난 사이클*의
+ *  CORDON·REPLACE·RETURNED 가 그대로 통과한다 — 실측: 2사이클째 degrading 에서
+ *  서버는 eventCount=0 인데 이 함수가 3건을 돌려줬고 원인 카드 첫 불릿이 지난
+ *  사이클의 '운영 풀 재투입 완료' 를 지금 진행 중인 무음 열화의 원인이라 적었다.
+ *  그래서 firstAt(현 사이클 최초 발생) 이전 알림을 배제한다 — 서버가 같은 판정을
+ *  하는 지점이 incident.go:112 의 `a.At < s.incidentAt` 다. firstAt=0(진행 중인
+ *  장애 없음)이면 거르지 않는다: 그때는 서버 헤드라인도 이 노드의 마지막 사건
+ *  그대로다(incident.go:107-110). */
+function victimAlerts(state: DemoState): AlertEvent[] {
+  const { instance, device } = state.scenario.victim;
+  const since = state.incident.firstAt;
+  return state.alerts
+    .filter(
+      (a) =>
+        a.instance === instance &&
+        (!a.device || a.device === device) &&
+        (since === 0 || a.at >= since),
+    )
+    .sort((a, b) => b.at - a.at);
+}
+
+/** 지속 시간 셀만 1초마다 다시 그린다 — 페이지 전체를 초당 렌더하면 카드가
+ *  쌓일수록 Recharts 가 통째로 재렌더된다. */
+function ElapsedValue({ from }: { from: number }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  return <span className="tabular-nums">{elapsedText(from, now)}</span>;
+}
+
+// ---- 장애 보고서 (클라이언트 생성 — 실제 PDF 파이프라인 대신 결정론 텍스트) ----
+
+/** 목업의 INC-YYYYMMDD-HHMMSS 포맷. 확장자는 실제 내용대로 .txt 다(한글 폰트를
+ *  임베드해야 하는 PDF 생성기를 이 데모에 끌어들이지 않는다). */
+function reportName(ms: number): string {
+  const d = new Date(ms);
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `INC-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}.txt`;
+}
+
+function buildReportSnap(state: DemoState, nowMs: number): ReportSnap {
+  const { incident, scenario } = state;
+  const v = scenario.victim;
+  const events = victimAlerts(state).slice(0, 12);
+  const lines = [
+    `장애 보고서 — ${incident.code || 'INCIDENT'}`,
+    `생성 시각: ${new Date(nowMs).toLocaleString('ko-KR')}`,
+    '',
+    `제목: ${incident.title}`,
+    `심각도: ${incident.severity}`,
+    `최초 발생: ${incidentStart(state) > 0 ? new Date(incidentStart(state)).toLocaleString('ko-KR') : '—'}`,
+    `지속: ${elapsedText(incidentStart(state), nowMs)}`,
+    `대상 GPU: ${v.device} (${v.model}, uuid ${v.uuid})`,
+    `노드: ${v.instance} · 클러스터: ${v.cluster} · CSP: ${v.csp}`,
+    `영향 Pod: ${incident.pods.length}개 / 클러스터 파드 ${incident.podsTotal}`,
+    ...(incident.cause ? ['', `추정 원인: ${incident.cause}`] : []),
+    '',
+    '영향 경로:',
+    ...incident.links.map((l) => `  - ${l.level}: ${l.value} — ${l.detail} (${l.scope}/${l.total})`),
+    '',
+    `Health 감점 (점수 ${v.health.score}):`,
+    ...(v.health.deductions.length > 0
+      ? v.health.deductions.map((d) => `  - ${d.code}: ${d.message} (-${d.penalty})`)
+      : ['  - 없음']),
+    '',
+    '관련 이벤트:',
+    // victim 알림이 없으면 '없음' 이다 — 타 노드 이벤트를 '관련' 으로 실으면
+    // 보고서가 남의 사건을 이 장애의 증적으로 남긴다.
+    ...(events.length > 0
+      ? events.map(
+          (a) =>
+            `  - ${new Date(a.at).toLocaleTimeString('ko-KR')} [${a.severity}] ${a.code} ${a.title}`,
+        )
+      : ['  - 없음']),
+  ];
+  return { name: reportName(nowMs), text: lines.join('\n'), at: nowMs };
+}
+
+function downloadReport(snap: ReportSnap) {
+  const blob = new Blob([snap.text], { type: 'text/plain;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = snap.name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+// ---- 카드들 ----
+
+function SummaryCell({
+  label,
+  value,
+  sub,
+  tone,
+}: {
+  label: string;
+  value: ReactNode;
+  sub?: string;
+  tone?: string;
+}) {
+  // 목업(demo3)의 셀은 가운데 정렬 + 값이 크다. justify-center 는 유휴 카드처럼
+  // 옆 칸(도넛)이 키를 늘릴 때 값이 위로 붙어 아래가 텅 비는 것을 막는다.
+  return (
+    <div className="flex flex-col items-center justify-center gap-0.5 rounded-md border bg-card p-2.5 text-center">
+      <span className="text-muted-foreground text-[11px]">{label}</span>
+      <span
+        className={`w-full truncate font-semibold text-lg ${tone ?? ''}`}
+        title={typeof value === 'string' ? value : undefined}
+      >
+        {value}
+      </span>
+      {sub ? (
+        <span className="w-full truncate text-[10px] text-muted-foreground" title={sub}>
+          {sub}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function CauseCard({ state }: { state: DemoState }) {
+  const { incident, scenario, fleet, audit } = state;
+  const v = scenario.victim;
+  // victim 은 tenant 를 직접 담지 않는다 — 소속 pool 로 fleet 에서 조회한다.
+  const pool = fleet.pools.find((p) => p.id === v.pool);
+  const tenant = fleet.tenants.find((t) => t.id === pool?.tenant)?.display ?? pool?.tenant ?? '—';
+  const startAt = incidentStart(state);
+  const deductions = v.health.deductions;
+
+  // 원인 불릿은 전부 실데이터 파생이다 — ECC 문구를 하드코딩하면 번인·교체
+  // 단계에서 화면이 거짓말을 한다.
+  //
+  // 첫 불릿은 *최신* 알림이 아니라 *서버가 원인으로 고른* 알림이다. 최신을
+  // 쓰면 격리 승인 직후 발행되는 조치 알림(CORDON 등)이 원인 칸을 뺏는다 —
+  // 실측: draining 에서 서버 헤드라인은 XID_63(critical)인데 이 불릿은 "노드
+  // Cordon(CORDON)"을 원인이라 적었고, 바로 아래 두 번째 불릿(incident.cause)
+  // 은 "ECC DBE" 라 같은 카드가 서로 다른 원인을 말했다. 판정 규칙(어떤 코드가
+  // 원인을 말할 수 있는가)은 서버 incident.go 의 isIncidentCode 하나뿐이므로,
+  // 화면은 그 결론(incident.code)에 해당하는 알림을 되짚어 상세만 붙인다 —
+  // 화이트리스트를 프론트에 복제하면 코드가 늘 때 두 곳이 어긋난다.
+  const causeAlert = victimAlerts(state).find((a) => a.code === incident.code);
+  const bullets: string[] = [];
+  if (causeAlert) {
+    bullets.push(
+      `${v.device}에서 ${causeAlert.title} (${causeAlert.code})${causeAlert.detail ? ` — ${causeAlert.detail}` : ''}`,
+    );
+  } else {
+    // 근거가 없으면 없다고 말한다 — 다른 노드 알림을 끌어와 문장을 만들면 그게 날조다.
+    // 조치 알림만 있는 구간(단계 점프 직후)에서는 서버 헤드라인을 그대로 옮긴다.
+    bullets.push(`${v.device} — ${incident.title} · 원인 판정 알림 없음, 아래는 Health 판정 근거입니다.`);
+  }
+  if (incident.cause) bullets.push(incident.cause);
+  for (const d of deductions.slice(0, 3)) bullets.push(d.message);
+  if (deductions.length === 0) bullets.push(`현재 감점 항목 없음 (Health ${v.health.score})`);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <span className="font-semibold text-sm">장애 요약</span>
+        <Badge
+          variant="outline"
+          className="text-[10px] uppercase"
+          style={{
+            color: SEVERITY_COLOR[incident.severity] ?? METRIC_COLORS.cpu,
+            borderColor: SEVERITY_COLOR[incident.severity] ?? METRIC_COLORS.cpu,
+          }}
+        >
+          {SEVERITY_LABEL[incident.severity] ?? incident.severity}
+        </Badge>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 xl:grid-cols-6">
+        <SummaryCell
+          label="장애 상태"
+          value={SEVERITY_LABEL[incident.severity] ?? incident.severity}
+          tone={incident.severity === 'critical' ? 'text-metric-fault' : 'text-metric-thermal'}
+        />
+        <SummaryCell
+          label="장애 지속 시간"
+          value={<ElapsedValue from={startAt} />}
+          sub={startAt > 0 ? `${hhmm(startAt)} ~ 현재` : undefined}
+        />
+        <SummaryCell
+          label="영향 GPU"
+          value={`${v.device} · ${shortModel(v.model)}`}
+          sub={`UUID: ${shortUuid(v.uuid)}`}
+        />
+        <SummaryCell
+          label="영향 Pod"
+          value={`${formatCount(incident.pods.length)}개`}
+          sub={`클러스터 파드 ${formatCount(incident.podsTotal)} 중`}
+        />
+        <SummaryCell label="테넌트" value={tenant} sub="프로젝트" />
+        <SummaryCell label="서비스" value={pool?.display ?? '—'} sub={pool?.kind} />
+      </div>
+
+      <div className="rounded-md border bg-card p-3">
+        <p className="mb-1.5 font-medium text-sm">원인 요약</p>
+        <ul className="flex flex-col gap-1.5 text-sm leading-relaxed">
+          {bullets.map((b, i) => (
+            <li key={`${i}-${b}`} className="flex gap-2">
+              <span className="text-metric-fault">•</span>
+              <span>{b}</span>
+            </li>
+          ))}
+        </ul>
+        <details className="mt-2">
+          <summary className="cursor-pointer text-[11px] text-muted-foreground hover:text-foreground">
+            자세히 보기
+          </summary>
+          <div className="mt-2 flex flex-col gap-1.5 border-t pt-2 text-xs">
+            <p className="text-muted-foreground">
+              Health <span className="font-semibold text-foreground tabular-nums">{v.health.score}</span>
+            </p>
+            {deductions.length > 0 ? (
+              deductions.map((d) => (
+                <p key={d.code} className="flex items-baseline gap-2">
+                  <span className="font-mono text-muted-foreground">{d.code}</span>
+                  <span className="flex-1">{d.message}</span>
+                  <span className="text-metric-fault tabular-nums">-{d.penalty}</span>
+                </p>
+              ))
+            ) : (
+              <p className="text-muted-foreground">감점 항목 없음</p>
+            )}
+            {audit[0] ? (
+              <p className="text-muted-foreground">
+                최근 조치 — {audit[0].actor} · {audit[0].action}
+                {audit[0].evidence ? ` · ${audit[0].evidence}` : ''}
+              </p>
+            ) : null}
+          </div>
+        </details>
+      </div>
+    </div>
+  );
+}
+
+interface FlowBox {
+  level: string;
+  value: string;
+  detail: string;
+  tone: ChainLink['tone'];
+}
+
+/** 서버 links(6계층, GPU 수 축) 위에 Pod/Job 한 칸을 흐름도에만 합성한다.
+ *  links 배열 자체에는 넣지 않는다 — 그 배열은 "분자 고정, 분모만 증가"라는
+ *  blast radius 불변식을 지키는 계약이고 파드 수는 그 축이 아니다. */
+function impactFlow(state: DemoState): FlowBox[] {
+  const { links, pods } = state.incident;
+  const out: FlowBox[] = [];
+  for (const l of links) {
+    out.push({
+      level: l.level,
+      value: l.level === 'GPU' ? shortUuid(l.value) : l.value,
+      detail: l.detail,
+      tone: l.tone,
+    });
+    if (l.level === 'Kubernetes Node' && pods.length > 0) {
+      out.push({
+        level: 'Pod / Job',
+        value: `${formatCount(pods.length)}개 영향`,
+        detail: pods.slice(0, 2).join(' · '),
+        tone: 'major',
+      });
+    }
+  }
+  return out;
+}
+
+function ImpactCard({ state, uuid }: { state: DemoState; uuid: string }) {
+  const { demoMode } = useDemo();
+  const series = useVictimSeries(uuid, demoMode);
+  const s = series.data;
+  const boxes = impactFlow(state);
+  const startAt = incidentStart(state);
+  // 장애 시점 마커 — 30분 창 밖으로 밀려나면 Recharts 가 그리지 않는다(정상).
+  const markerAt = startAt > 0 ? Math.floor(startAt / 1000) : undefined;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 영향 경로 — 가로 흐름(장애 GPU → … → CSP). */}
+      <div>
+        <p className="mb-2 font-medium text-sm">영향 경로</p>
+        {boxes.length === 0 ? (
+          <p className="text-muted-foreground text-sm">체인을 구성할 대상이 없다.</p>
+        ) : (
+          // 목업은 한 줄 가로 흐름이다. wrap 시키면 줄 끝에 화살표가 허공에 매달리고
+          // 박스 폭이 내용대로 제각각이 된다 — 균등 폭 1줄로 두고 좁은 화면에서만
+          // 가로 스크롤한다.
+          <div className="flex items-stretch gap-1 overflow-x-auto">
+            {boxes.map((b, i) => (
+              <Fragment key={b.level}>
+                <div className="flex min-w-0 flex-1 flex-col justify-center rounded-md border bg-card p-2 text-center">
+                  <span className="truncate text-[10px] text-muted-foreground uppercase tracking-wide">
+                    {b.level}
+                  </span>
+                  <span className={`truncate font-semibold text-sm ${TONE_TEXT[b.tone]}`} title={b.value}>
+                    {b.value}
+                  </span>
+                  <span className="truncate text-[11px] text-muted-foreground" title={b.detail}>
+                    {b.detail}
+                  </span>
+                </div>
+                {i < boxes.length - 1 ? (
+                  <span className="flex shrink-0 items-center text-muted-foreground text-xs">→</span>
+                ) : null}
+              </Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 주요 지표 — victim GPU 최근 30분 추이 + 장애 시점 점선. */}
+      <div>
+        <p className="mb-2 font-medium text-sm">주요 지표 (최근 30분)</p>
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+          <VictimMetricChart
+            label="GPU Temperature (°C)"
+            valueText={s ? formatCelsius(s.temp.last) : null}
+            color={METRIC_COLORS.thermal}
+            values={s?.temp.values ?? []}
+            times={s?.temp.times}
+            markerAt={markerAt}
+            domainMax={100}
+          />
+          <VictimMetricChart
+            label="GPU Memory ECC Errors"
+            valueText={s ? formatCount(s.ecc.last) : null}
+            color={METRIC_COLORS.fault}
+            values={s?.ecc.values ?? []}
+            times={s?.ecc.times}
+            markerAt={markerAt}
+          />
+          <VictimMetricChart
+            label="GPU Utilization (%)"
+            valueText={s ? formatPct(s.util.last, 0) : null}
+            color={METRIC_COLORS.cpu}
+            values={s?.util.values ?? []}
+            times={s?.util.times}
+            markerAt={markerAt}
+            domainMax={100}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function EventsCard({ state }: { state: DemoState }) {
+  const alerts = victimAlerts(state).slice(0, 10);
+  return (
+    <div className="rounded-md border bg-card p-3">
+      <p className="mb-2 font-medium text-sm">관련 이벤트 타임라인</p>
+      {alerts.length > 0 ? (
+        <AlertTimeline alerts={alerts} severityBadge />
+      ) : (
+        <p className="py-4 text-center text-muted-foreground text-sm">
+          {state.scenario.victim.device}에 접수된 이벤트가 아직 없습니다. 다른 노드의 알림은 이
+          장애의 근거가 아니라 여기 싣지 않습니다.
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ReportCard({ snap, device }: { snap: ReportSnap; device: string }) {
+  return (
+    <div className="flex flex-wrap items-center gap-3 rounded-md border bg-card p-3">
+      {/* 목업은 왼쪽에 빨간 문서 블록이 큼직하게 서 있다. */}
+      <div className="flex size-11 shrink-0 items-center justify-center rounded-md border border-metric-fault/40 bg-metric-fault/10">
+        <FileText className="size-6 text-metric-fault" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-medium text-sm">
+          {device} 장애 보고서 ({snap.name})
+        </p>
+        <p className="text-muted-foreground text-xs">
+          생성일 {new Date(snap.at).toLocaleString('ko-KR')} ·{' '}
+          <span className="tabular-nums">{formatBytes(new Blob([snap.text]).size)}</span>
+        </p>
+      </div>
+      <Badge variant="outline" className="gap-1 border-metric-pod text-[10px] text-metric-pod">
+        <CheckCircle2 className="size-3" />
+        생성 완료
+      </Badge>
+      <Button
+        size="sm"
+        variant="outline"
+        className="h-8 shrink-0"
+        onClick={() => downloadReport(snap)}
+      >
+        <Download className="size-3.5" />
+        다운로드
+      </Button>
+    </div>
+  );
+}
+
+function IdleCard({ state }: { state: DemoState }) {
+  const navigate = useNavigate();
+  const idle = state.idle;
+  // 세는 것은 "유휴 GPU 를 1장이라도 가진 노드" 다 — 실측 플릿은 185장이 183개
+  // 노드에 1장씩 흩어져 있어 '전 GPU 유휴' 노드는 0대다. 라벨이 '유휴 노드'라고
+  // 말하면 화면이 세지도 않은 것을 말하게 되므로, 라벨을 세는 것에 맞춘다.
+  const nodes = new Set(idle.map((g) => g.instance)).size;
+  const gpuTotal = state.fleet.gpuTotal;
+  const nodeTotal = state.fleet.nodeTotal;
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="font-semibold text-sm">유휴 장비 현황</p>
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-[1fr_1fr_1.6fr]">
+        <SummaryCell
+          label="총 유휴 GPU"
+          value={`${formatCount(idle.length)} 개`}
+          sub={gpuTotal > 0 ? `전체 GPU 대비 ${formatPct((idle.length / gpuTotal) * 100)}` : undefined}
+        />
+        <SummaryCell
+          label="유휴 GPU 보유 노드"
+          value={`${formatCount(nodes)} 대`}
+          sub={
+            nodeTotal > 0
+              ? `전체 노드 ${formatCount(nodeTotal)} 대 중 ${formatPct((nodes / nodeTotal) * 100)}`
+              : undefined
+          }
+        />
+        <div className="rounded-md border bg-card p-3">
+          <p className="mb-2 font-medium text-sm">유휴 GPU 모델 분포</p>
+          <IdleDonut idle={idle} />
+        </div>
+      </div>
+      <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border bg-card p-3">
+        <div className="min-w-0">
+          <p className="font-medium text-sm">유휴 장비 관리는 아래 메뉴에서 확인할 수 있습니다.</p>
+          <p className="text-muted-foreground text-xs">
+            유휴 장비 상세 조회, 필터링, 알림 설정, 자동 반납 정책 등 더 많은 기능을 이용해 보세요.
+          </p>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <Button size="sm" variant="outline" className="h-8" onClick={() => navigate('/gpu/idle')}>
+            유휴 장비 관리로 이동
+            <ExternalLink className="size-3.5" />
+          </Button>
+          <span className="text-[11px] text-muted-foreground">
+            자원·토폴로지 &gt; 유휴장비 &gt; 유휴장비 관리
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---- 카드 라우팅 ----
+
+function AssistantCard({ msg, state }: { msg: AssistantMessage; state: DemoState }) {
+  switch (msg.card) {
+    case 'cause':
+      return <CauseCard state={state} />;
+    case 'impact':
+      return <ImpactCard state={state} uuid={state.scenario.victim.uuid} />;
+    case 'events':
+      return <EventsCard state={state} />;
+    case 'report':
+      return msg.report ? (
+        <ReportCard snap={msg.report} device={state.scenario.victim.device} />
+      ) : null;
+    case 'idle':
+      return <IdleCard state={state} />;
+    case 'isolate':
+      return <RemediationStepper drain={state.scenario.victim.drain} />;
+    default:
+      return null;
+  }
+}
+
+function QuickChips({ onPick, disabled }: { onPick: (id: Intent) => void; disabled: boolean }) {
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {INTENTS.map((it) => (
+        <Button
+          key={it.id}
+          variant="outline"
+          size="sm"
+          className="h-7 text-xs"
+          disabled={disabled}
+          onClick={() => onPick(it.id)}
+        >
+          {it.icon}
+          {it.chip}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+// ---- 페이지 ----
+
+export default function GpuAssistant() {
+  const { demoMode, state, act, refresh } = useDemo();
+  const navigate = useNavigate();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [acting, setActing] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const seeded = useRef(false);
+  const prevCount = useRef(0);
+
+  // 시연 첫 화면이 빈 채팅이면 안 된다 — 상태가 준비되는 즉시 목업(demo3)의
+  // 5문답(원인·영향·이벤트·보고서·유휴)을 미리 쌓아 둔다. 칩을 하나씩 눌러야
+  // 카드가 나타나면 화면을 훑는 시연에서 아무것도 안 보인다.
+  useEffect(() => {
+    if (seeded.current || !state) return;
+    seeded.current = true;
+    const base = Date.now() - 4 * 60_000;
+    const script: Intent[] = ['cause', 'impact', 'events', 'report', 'idle'];
+    setMessages(
+      script.flatMap((id, i): Message[] => {
+        const def = INTENTS.find((d) => d.id === id);
+        if (!def) return [];
+        const at = base + i * 60_000;
+        return [
+          { role: 'user', text: def.utterance, at },
+          {
+            role: 'assistant',
+            text: def.reply,
+            card: id,
+            at,
+            report: id === 'report' ? buildReportSnap(state, at) : undefined,
+          },
+        ];
+      }),
+    );
+  }, [state]);
+
+  // 새 메시지가 쌓이면 맨 아래로. 단 최초 시드는 예외다 — 시연은 대화를
+  // 위에서부터 훑으므로 로드 직후 맨 아래로 튀면 안 된다.
+  useEffect(() => {
+    if (prevCount.current > 0) {
+      scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+    }
+    prevCount.current = messages.length;
+  }, [messages]);
+
+  // 로딩/비데모 가드
+  if (demoMode === null || (demoMode === true && !state)) {
+    return (
+      <div className="flex flex-col gap-3" aria-busy="true">
+        <Skeleton className="h-14 w-full" />
+        <Skeleton className="h-96 w-full" />
+      </div>
+    );
+  }
+  if (demoMode !== true || !state) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <p className="font-semibold">GPU Assistant</p>
+          <p className="text-muted-foreground text-sm">
+            어시스턴트는 데모 모드의 진행 중 장애를 문맥으로 동작한다 — 실서비스 인스턴스에는
+            응답할 장애 시나리오가 없다.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const snapshot = state;
+  const incident = snapshot.incident;
+  const victim = snapshot.scenario.victim;
+
+  /** 노드 격리 — 이 화면의 유일한 실조치. 단계 규칙은 서버가 판정하므로
+   *  409 사유를 그대로 말풍선에 되돌린다(규칙을 클라에 복제하지 않는다). */
+  async function runIsolate(utterance: string) {
+    setMessages((prev) => [...prev, { role: 'user', text: utterance, at: Date.now() }]);
+    setActing(true);
+    const out = await act('approve-isolation');
+    setActing(false);
+    setMessages((prev) => [
+      ...prev,
+      out.ok
+        ? {
+            role: 'assistant',
+            text: `${out.result.message} 진행 상황은 아래에서 확인할 수 있어요.`,
+            card: 'isolate',
+            at: Date.now(),
+          }
+        : { role: 'assistant', text: `격리를 실행하지 못했어요 — ${out.error}`, at: Date.now() },
+    ]);
+    refresh();
+  }
+
+  /** 칩 클릭은 의도만 준다(문장은 INTENTS 가 갖고 있다). 자유 입력은 사용자가
+   *  실제로 친 문장을 그대로 되비춘다. */
+  function ask(intent: Intent, typed?: string) {
+    const def = INTENTS.find((i) => i.id === intent);
+    if (!def) return;
+    const utterance = typed ?? def.utterance;
+    if (intent === 'isolate') {
+      void runIsolate(utterance);
+      return;
+    }
+    const at = Date.now();
+    setMessages((prev) => [
+      ...prev,
+      { role: 'user', text: utterance, at },
+      {
+        role: 'assistant',
+        text: def.reply,
+        card: intent,
+        at,
+        report: intent === 'report' ? buildReportSnap(snapshot, at) : undefined,
+      },
+    ]);
+  }
+
+  function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text) return;
+    setInput('');
+    const intent = matchIntent(text);
+    if (intent) {
+      ask(intent, text);
+      return;
+    }
+    const at = Date.now();
+    setMessages((prev) => [
+      ...prev,
+      { role: 'user', text, at },
+      {
+        role: 'assistant',
+        text: '원인 요약 · 영향 범위 · 이벤트 정리 · 장애보고서 · 유휴 장비 · 노드 격리 실행 중에서 물어봐 주세요.',
+        at,
+      },
+    ]);
+  }
+
+  // 퀵액션 칩은 마지막 어시스턴트 말풍선 아래에만 붙는다(목업의 인라인 배치).
+  const lastAssistant = messages.reduce((acc, m, i) => (m.role === 'assistant' ? i : acc), -1);
+
+  return (
+    // 차감값 = 셸 헤더(2행 97px) + 본문 패딩 + 제목줄. 헤더 높이가 바뀌면 이
+    // 값도 같이 바꿔야 한다 — 안 그러면 대화창이 뷰포트 밖으로 밀려 페이지가
+    // 세로로 스크롤된다(채팅 화면은 화면에 딱 맞아야 한다).
+    <div className="flex h-[calc(100vh-10.5rem)] flex-col gap-3">
+      {/* 헤더 */}
+      <Card className="gap-0 py-0">
+        <CardContent className="flex items-center gap-3 p-3">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10">
+            <Bot className="size-5 text-primary" />
+          </div>
+          <span className="font-semibold">GPU Assistant</span>
+          <Badge variant="outline" className="gap-1 text-[10px]">
+            <span className="size-1.5 rounded-full bg-metric-pod" />
+            온라인
+          </Badge>
+          {incident.active ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 min-w-0 gap-1.5 rounded-full border"
+              onClick={() => navigate('/gpu/incident')}
+            >
+              <span className="size-2 shrink-0 rounded-full bg-metric-fault" />
+              <span className="truncate font-mono text-xs">
+                {victim.instance} / {victim.device}
+              </span>
+              <span className="truncate text-xs">{incident.title}</span>
+              <ChevronRight className="size-3.5 shrink-0" />
+            </Button>
+          ) : (
+            <span className="rounded-full border px-3 py-1 text-muted-foreground text-xs">
+              진행 중인 장애 없음
+            </span>
+          )}
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="ml-auto shrink-0"
+            aria-label="새로고침"
+            onClick={refresh}
+          >
+            <RefreshCw className="size-4" />
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* 대화 영역 */}
+      <div ref={scrollRef} className="flex-1 overflow-auto">
+        <div className="flex flex-col gap-4 pb-2">
+          {/* 첫 안내 */}
+          <div className="flex gap-2">
+            <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10">
+              <Bot className="size-4 text-primary" />
+            </div>
+            <Card className="max-w-[92%] flex-1 py-0">
+              <CardContent className="flex flex-col gap-3 p-3 text-sm leading-relaxed">
+                {/* 장애가 없을 때 서버 title 은 '진행 중인 장애 없음' 이다 — 앞에 '진행 중인
+                    장애' 를 덧대면 명사가 겹쳐 "진행 중인 장애 진행 중인 장애 없음" 이 된다.
+                    조사(를)도 붙이지 않는다: 제목이 무엇으로 끝날지 모르는데 을/를 을 고르면
+                    틀리고, JSX 로 띄어 쓰면 "감지 를" 처럼 조사 앞이 벌어진다. */}
+                {incident.active ? (
+                  <p>
+                    확인했습니다. 아래 항목 중 궁금한 것을 눌러 주세요 — 진행 중인 장애{' '}
+                    <span className="font-semibold">{incident.title}</span> 기준으로 정리해
+                    드립니다.
+                  </p>
+                ) : (
+                  <p>
+                    확인했습니다. 아래 항목 중 궁금한 것을 눌러 주세요 — 지금은 진행 중인 장애가
+                    없어 <span className="font-semibold">{victim.device}</span> 현재 상태를 기준으로
+                    정리해 드립니다.
+                  </p>
+                )}
+                {/* 시드 대화가 깔려도 첫 화면에 칩이 보여야 한다(목업도 상단 카드 아래에 칩 줄이 있다). */}
+                <QuickChips onPick={ask} disabled={acting} />
+              </CardContent>
+            </Card>
+          </div>
+
+          {messages.map((m, i) =>
+            m.role === 'user' ? (
+              <div key={`${m.at}-${i}`} className="flex items-end justify-end gap-2">
+                {/* 목업의 사용자 말풍선은 연한 파랑 배경 + 진한 글씨다(검정 말풍선 아님). */}
+                <div className="max-w-[85%] rounded-lg bg-metric-cpu/10 px-3 py-2 text-foreground text-sm">
+                  {m.text}
+                </div>
+                <div className="flex shrink-0 flex-col items-start text-[10px] text-muted-foreground">
+                  <span className="tabular-nums">{hhmm(m.at)}</span>
+                  <span className="flex items-center gap-0.5">
+                    <CheckCheck className="size-3" />
+                    읽음
+                  </span>
+                </div>
+              </div>
+            ) : (
+              <div key={`${m.at}-${i}`} className="flex gap-2">
+                <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                  <Bot className="size-4 text-primary" />
+                </div>
+                <Card className="max-w-[92%] flex-1 py-0">
+                  <CardContent className="flex flex-col gap-3 p-3">
+                    <p className="text-sm">{m.text}</p>
+                    <AssistantCard msg={m} state={snapshot} />
+                    {i === lastAssistant ? <QuickChips onPick={ask} disabled={acting} /> : null}
+                  </CardContent>
+                </Card>
+              </div>
+            ),
+          )}
+        </div>
+      </div>
+
+      {/* 입력 */}
+      <form onSubmit={onSubmit} className="flex gap-2">
+        <Input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="메시지를 입력하세요…"
+          className="h-9"
+        />
+        <Button type="submit" size="sm" className="h-9 shrink-0" disabled={!input.trim()}>
+          <Send className="size-4" />
+        </Button>
+      </form>
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuEfficiency.tsx b/web/src/pages/gpu/GpuEfficiency.tsx
new file mode 100644
index 0000000..3567389
--- /dev/null
+++ b/web/src/pages/gpu/GpuEfficiency.tsx
@@ -0,0 +1,545 @@
+// GpuEfficiency — Step 6 "효율·활용" (경영 설득 핵심). demo on/off 모두 동작:
+// on = KPI 대비 + 갭 시계열 + 저활용(pool 배정분) + 30일+ 미사용, off = 실데이터
+// 저활용 탐지만(강등). 차트는 Explorer 의 CSP-안전 Recharts 셋업 미러.
+import { Boxes, CalendarClock, Cpu, Gauge, PiggyBank, TrendingDown } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import KpiTile from '@/components/gpu/KpiTile';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useDemo } from '@/hooks/demoContext';
+import { useFleet } from '@/hooks/useFleet';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type ApiEnvelope, type MatrixData, type VectorData } from '@/lib/api';
+import {
+  formatPct,
+  METRIC_DEMO_FLEET_ALLOC_PCT,
+  METRIC_DEMO_FLEET_UTIL_AVG,
+} from '@/lib/gpuMetrics';
+
+const KPI_POLL_MS = 15_000;
+const GAP_POLL_MS = 60_000;
+const GAP_RANGE_SECONDS = 24 * 3600;
+const GAP_MIN_STEP_SECONDS = 60;
+const GAP_TARGET_POINTS = 500;
+const LOW_UTIL_THRESHOLD = 30;
+// 목업(demo4)의 표 밀도 = 한 화면에 6~8행 + 총건수 캡션. 50행을 쏟으면 페이지가
+// 스크롤 늪이 되어 같은 제품으로 보이지 않는다.
+const LOW_UTIL_ROWS = 8;
+const IDLE_ROWS = 8;
+
+// 장기 미사용 사유 옵션 — register-idle-reason 액션 페이로드로 그대로 전송.
+const IDLE_REASONS = ['서비스 출시 지연', '이용자 수 부족', '점검·정비', '향후 사용 예정'];
+
+function firstValue(env: ApiEnvelope<VectorData>): number | null {
+  const sample = env.data.result[0];
+  return sample ? Number(sample.value[1]) : null;
+}
+
+function formatDayTick(unixSec: number): string {
+  return new Date(unixSec * 1000).toLocaleString('ko-KR', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+// 미니 막대용 정규화 — KpiTile 의 Bars 는 "최댓값 기준 상대 높이"라, 값들이
+// 서로 비슷하면(갭 18~22pp, 사용률 0.0~0.3%) 전부 만높이로 그려져 색 덩어리가
+// 된다. 최소~최대를 1~10 으로 펴서 목업 타일처럼 기복이 보이게 한다.
+function spread(values: number[]): number[] {
+  if (values.length === 0) return values;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  if (max === min) return values.map(() => 5);
+  return values.map((v) => 1 + ((v - min) / (max - min)) * 9);
+}
+
+interface GapRow {
+  time: number;
+  alloc: number | null;
+  util: number | null;
+}
+
+// 두 matrix 를 공통 시간축 행으로 병합 — 빠진 버킷은 null 로 명시해
+// connectNulls=false 가 그 지점만 끊어 그리게 한다(Explorer 관례).
+function mergeGapRows(alloc: MatrixData, util: MatrixData): GapRow[] {
+  const byTime = new Map<number, GapRow>();
+  const put = (matrix: MatrixData, key: 'alloc' | 'util') => {
+    for (const s of matrix.result) {
+      for (const [t, v] of s.values) {
+        const row = byTime.get(t) ?? { time: t, alloc: null, util: null };
+        row[key] = Number(v);
+        byTime.set(t, row);
+      }
+    }
+  };
+  put(alloc, 'alloc');
+  put(util, 'util');
+  return [...byTime.values()].sort((a, b) => a.time - b.time);
+}
+
+export default function GpuEfficiency() {
+  const { demoMode, state, act } = useDemo();
+  const demoOn = demoMode === true;
+  const { cells } = useFleet();
+
+  // 오탐 피드백 접수분(로컬) — 폴링과 무관하게 즉시 배지 반영.
+  const [feedbackDone, setFeedbackDone] = useState<ReadonlySet<string>>(new Set());
+  // 미사용 사유 등록분(로컬 낙관 반영) — 서버 상태는 다음 폴링이 재확인한다.
+  const [reasonOverlay, setReasonOverlay] = useState<Record<string, string>>({});
+
+  // KPI: 할당율 vs 실사용률 instant (demo 전용, 15s).
+  const kpiQuery = usePolledQuery(
+    async () => {
+      if (!demoOn) return null;
+      const [allocRes, utilRes] = await Promise.all([
+        api.instantQuery(METRIC_DEMO_FLEET_ALLOC_PCT),
+        api.instantQuery(METRIC_DEMO_FLEET_UTIL_AVG),
+      ]);
+      return { alloc: firstValue(allocRes), util: firstValue(utilRes) };
+    },
+    KPI_POLL_MS,
+    [demoOn],
+  );
+
+  // 갭 시계열: 최근 24h 2시리즈 (demo 전용) — step=max(60, floor(86400/500)).
+  const gapQuery = usePolledQuery(
+    async () => {
+      if (!demoOn) return null;
+      const endSec = Math.floor(Date.now() / 1000);
+      const startSec = endSec - GAP_RANGE_SECONDS;
+      const step = Math.max(
+        GAP_MIN_STEP_SECONDS,
+        Math.floor(GAP_RANGE_SECONDS / GAP_TARGET_POINTS),
+      );
+      const [allocRes, utilRes] = await Promise.all([
+        api.rangeQuery(METRIC_DEMO_FLEET_ALLOC_PCT, startSec, endSec, step),
+        api.rangeQuery(METRIC_DEMO_FLEET_UTIL_AVG, startSec, endSec, step),
+      ]);
+      return mergeGapRows(allocRes.data, utilRes.data);
+    },
+    GAP_POLL_MS,
+    [demoOn],
+  );
+
+  // 저활용 탐지 — demo on 은 pool 배정분만(회수 검토 의미), off 는 전체 강등.
+  const lowUtil = useMemo(() => {
+    if (!cells) return null;
+    const filtered = cells.filter(
+      (c) => c.util < LOW_UTIL_THRESHOLD && (!demoOn || c.pool !== ''),
+    );
+    filtered.sort((a, b) => a.util - b.util);
+    return { total: filtered.length, rows: filtered.slice(0, LOW_UTIL_ROWS) };
+  }, [cells, demoOn]);
+
+  // 장기 미사용 — idleDays 내림차순 (demo 전용 데이터). idle[] 에는 1~29일
+  // 최근 유휴도 섞여 오므로(유휴장비 관리 화면의 "전체 유휴" 축) 이 표의 제목
+  // 대로 30일 이상만 남긴다.
+  const idleRows = useMemo(() => {
+    const idle = state?.idle ?? [];
+    return idle.filter((g) => g.idleDays >= 30).sort((a, b) => b.idleDays - a.idleDays);
+  }, [state?.idle]);
+
+  async function onFalsePositive(uuid: string) {
+    const outcome = await act('report-false-positive', { uuid });
+    if (outcome.ok) {
+      setFeedbackDone((prev) => {
+        const next = new Set(prev);
+        next.add(uuid);
+        return next;
+      });
+    }
+  }
+
+  async function onRegisterReason(uuid: string, reason: string) {
+    const outcome = await act('register-idle-reason', { uuid, reason });
+    if (outcome.ok) {
+      setReasonOverlay((prev) => ({ ...prev, [uuid]: reason }));
+    }
+  }
+
+  if (demoMode === null) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-28 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  const alloc = kpiQuery.data?.alloc ?? null;
+  const utilAvg = kpiQuery.data?.util ?? null;
+  const gapPp = alloc !== null && utilAvg !== null ? alloc - utilAvg : null;
+  const gapRows = gapQuery.data ?? [];
+  // 갭(할당−실사용) 최근 추이 — 타일 하단 미니 막대. 목업 타일은 전부 미니
+  // 시각화를 달고 있어, 몇 개만 비면 카드 아랫단이 들쭉날쭉해진다.
+  const gapBars = spread(
+    gapRows
+      .filter((r) => r.alloc !== null && r.util !== null)
+      .slice(-24)
+      .map((r) => Math.max((r.alloc ?? 0) - (r.util ?? 0), 0)),
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h1 className="font-semibold text-xl">효율·활용</h1>
+        <p className="text-muted-foreground text-sm">
+          할당 대비 실사용 갭을 실측해 회수 가능 용량을 드러낸다.
+        </p>
+      </div>
+
+      {/* 1. KPI 타일 행 — 목업(demo1/demo4) 상단 6타일 어휘로 통일 (demo 전용) */}
+      {demoOn ? (
+        <>
+          <div
+            className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6"
+            aria-label="효율 핵심 지표"
+          >
+            <KpiTile
+              label="할당율"
+              icon={<Cpu className="size-4" />}
+              tone="info"
+              value={alloc === null ? null : formatPct(alloc)}
+              hint="풀에 배정된 비율"
+              progress={alloc ?? undefined}
+            />
+            <KpiTile
+              label="실사용률 (평균)"
+              icon={<Gauge className="size-4" />}
+              value={utilAvg === null ? null : formatPct(utilAvg)}
+              hint="실제 연산 사용률"
+              progress={utilAvg ?? undefined}
+            />
+            <KpiTile
+              label="할당 − 실사용 갭"
+              icon={<TrendingDown className="size-4" />}
+              tone="danger"
+              value={gapPp === null ? null : `${gapPp.toFixed(1)}pp`}
+              hint="잠들어 있는 용량"
+              bars={gapBars}
+            />
+            <KpiTile
+              label="회수 가능 추정"
+              icon={<PiggyBank className="size-4" />}
+              tone="warn"
+              value={
+                gapPp === null || !state
+                  ? null
+                  : `${Math.round((gapPp / 100) * state.fleet.gpuTotal).toLocaleString('ko-KR')}장`
+              }
+              hint={state ? `전체 ${state.fleet.gpuTotal.toLocaleString('ko-KR')}장 기준` : undefined}
+              bars={gapBars}
+            />
+            <KpiTile
+              label="저활용 GPU"
+              icon={<Boxes className="size-4" />}
+              value={lowUtil === null ? null : `${lowUtil.total.toLocaleString('ko-KR')}장`}
+              hint={`< ${LOW_UTIL_THRESHOLD}% 사용률`}
+              bars={lowUtil ? spread(lowUtil.rows.map((c) => c.util)) : undefined}
+            />
+            <KpiTile
+              label="30일+ 미사용"
+              icon={<CalendarClock className="size-4" />}
+              tone="warn"
+              value={state === null ? null : `${idleRows.length.toLocaleString('ko-KR')}장`}
+              hint="사유 등록 대상"
+              bars={spread(idleRows.slice(0, 12).map((g) => g.idleDays))}
+            />
+          </div>
+          <p className="text-muted-foreground text-sm">
+            할당은 가득, 실사용은 갭 — 회수 가능 용량이 잠들어 있다.
+          </p>
+        </>
+      ) : null}
+
+      {/* 2. 갭 시계열 차트 (demo 전용) */}
+      {demoOn ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>할당율 vs 실사용률 추이</CardTitle>
+            <CardDescription>최근 24시간 — 두 선 사이가 잠든 용량이다</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {gapQuery.data === null && gapQuery.error === null ? (
+              <Skeleton className="h-64 w-full" />
+            ) : gapRows.length === 0 ? (
+              <p className="py-8 text-center text-muted-foreground text-sm">
+                표시할 데이터가 없다.
+              </p>
+            ) : (
+              <ResponsiveContainer width="100%" height={260}>
+                <LineChart data={gapRows} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                  <XAxis
+                    dataKey="time"
+                    type="number"
+                    domain={['dataMin', 'dataMax']}
+                    tickFormatter={formatDayTick}
+                    tick={{ fontSize: 12 }}
+                    className="fill-muted-foreground"
+                  />
+                  <YAxis
+                    domain={[0, 100]}
+                    width={40}
+                    tick={{ fontSize: 12 }}
+                    className="fill-muted-foreground"
+                  />
+                  <Tooltip
+                    labelFormatter={(t) => formatDayTick(Number(t))}
+                    formatter={(value) => `${Number(value).toFixed(1)}%`}
+                    contentStyle={{
+                      backgroundColor: 'var(--popover)',
+                      borderColor: 'var(--border)',
+                      color: 'var(--popover-foreground)',
+                      fontSize: 12,
+                    }}
+                  />
+                  <Legend wrapperStyle={{ fontSize: 12 }} />
+                  <Line
+                    type="monotone"
+                    dataKey="alloc"
+                    name="할당율"
+                    stroke="var(--metric-cpu)"
+                    strokeWidth={2}
+                    dot={false}
+                    connectNulls={false}
+                    isAnimationActive={false}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="util"
+                    name="실사용률"
+                    stroke="var(--metric-gpu)"
+                    strokeWidth={2}
+                    dot={false}
+                    connectNulls={false}
+                    isAnimationActive={false}
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {/* 3·4. 저활용 탐지 / 30일+ 미사용 */}
+      <Tabs defaultValue="low-util">
+        <TabsList>
+          <TabsTrigger value="low-util">저활용 탐지</TabsTrigger>
+          {demoOn ? <TabsTrigger value="idle">30일+ 미사용</TabsTrigger> : null}
+        </TabsList>
+
+        <TabsContent value="low-util">
+          <Card>
+            <CardHeader>
+              <CardTitle>저활용 GPU</CardTitle>
+              <CardDescription>
+                {lowUtil === null
+                  ? '집계 중…'
+                  : `저활용 ${lowUtil.total.toLocaleString('ko-KR')}장 — 회수 검토 대상 (사용률 ${LOW_UTIL_THRESHOLD}% 미만${demoOn ? ' · 풀 배정분' : ''}, 상위 ${LOW_UTIL_ROWS}행 표시)`}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {lowUtil === null ? (
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="h-8 w-full" />
+                  <Skeleton className="h-8 w-full" />
+                  <Skeleton className="h-8 w-full" />
+                </div>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>인스턴스</TableHead>
+                      <TableHead>디바이스</TableHead>
+                      <TableHead>모델</TableHead>
+                      <TableHead>풀</TableHead>
+                      <TableHead className="text-right">사용률</TableHead>
+                      <TableHead>상태</TableHead>
+                      {demoOn ? <TableHead /> : null}
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {lowUtil.rows.length === 0 ? (
+                      <TableRow>
+                        <TableCell
+                          colSpan={demoOn ? 7 : 6}
+                          className="text-center text-muted-foreground"
+                        >
+                          저활용 GPU 가 없다.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      lowUtil.rows.map((c) => (
+                        <TableRow key={c.uuid}>
+                          <TableCell className="font-mono text-xs">{c.instance}</TableCell>
+                          <TableCell className="font-mono text-xs">{c.device}</TableCell>
+                          <TableCell className="text-xs">{c.model || '—'}</TableCell>
+                          <TableCell className="text-xs">{c.pool || '—'}</TableCell>
+                          <TableCell className="text-right text-xs tabular-nums">
+                            {formatPct(c.util)}
+                          </TableCell>
+                          <TableCell>
+                            {feedbackDone.has(c.uuid) ? (
+                              <Badge variant="secondary">피드백 접수</Badge>
+                            ) : (
+                              <Badge variant="destructive">회수 검토</Badge>
+                            )}
+                          </TableCell>
+                          {demoOn ? (
+                            <TableCell className="text-right">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                disabled={feedbackDone.has(c.uuid)}
+                                onClick={() => onFalsePositive(c.uuid)}
+                              >
+                                오탐 피드백
+                              </Button>
+                            </TableCell>
+                          ) : null}
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              )}
+              {lowUtil !== null && lowUtil.total > 0 ? (
+                <p className="pt-3 text-muted-foreground text-xs">
+                  1-{lowUtil.rows.length} / 총 {lowUtil.total.toLocaleString('ko-KR')}장 (사용률
+                  오름차순)
+                </p>
+              ) : null}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {demoOn ? (
+          <TabsContent value="idle">
+            <Card>
+              <CardHeader>
+                <CardTitle>30일 이상 미사용 GPU</CardTitle>
+                <CardDescription>
+                  자동 회수는 범위 외 — 경보와 검토 대상 제공까지. 사유를 등록해 관리한다.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {state === null ? (
+                  <div className="flex flex-col gap-2">
+                    <Skeleton className="h-8 w-full" />
+                    <Skeleton className="h-8 w-full" />
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>인스턴스</TableHead>
+                        <TableHead>디바이스</TableHead>
+                        <TableHead>모델</TableHead>
+                        <TableHead>CSP</TableHead>
+                        <TableHead className="text-right">미사용 일수</TableHead>
+                        <TableHead className="w-44">사유</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {idleRows.length === 0 ? (
+                        <TableRow>
+                          <TableCell colSpan={6} className="text-center text-muted-foreground">
+                            30일 이상 미사용 GPU 가 없다.
+                          </TableCell>
+                        </TableRow>
+                      ) : (
+                        idleRows.slice(0, IDLE_ROWS).map((g) => {
+                          const reason = reasonOverlay[g.uuid] ?? g.reason ?? '';
+                          return (
+                            <TableRow key={g.uuid}>
+                              <TableCell className="font-mono text-xs">{g.instance}</TableCell>
+                              <TableCell className="font-mono text-xs">{g.device}</TableCell>
+                              <TableCell className="text-xs">{g.model}</TableCell>
+                              <TableCell className="text-xs uppercase">{g.csp}</TableCell>
+                              <TableCell className="text-right text-xs tabular-nums">
+                                {g.idleDays}일
+                              </TableCell>
+                              <TableCell>
+                                <Select
+                                  value={reason}
+                                  onValueChange={(v) => onRegisterReason(g.uuid, v)}
+                                >
+                                  <SelectTrigger
+                                    className="w-40"
+                                    size="sm"
+                                    aria-label={`${g.instance} ${g.device} 미사용 사유`}
+                                  >
+                                    <SelectValue placeholder="사유 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {IDLE_REASONS.map((r) => (
+                                      <SelectItem key={r} value={r}>
+                                        {r}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </TableCell>
+                            </TableRow>
+                          );
+                        })
+                      )}
+                    </TableBody>
+                  </Table>
+                )}
+                {idleRows.length > 0 ? (
+                  <p className="pt-3 text-muted-foreground text-xs">
+                    1-{Math.min(IDLE_ROWS, idleRows.length)} / 총{' '}
+                    {idleRows.length.toLocaleString('ko-KR')}장 (미사용 일수 내림차순)
+                  </p>
+                ) : null}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        ) : null}
+      </Tabs>
+
+      <p className="text-muted-foreground text-xs">
+        월별 활용계획 연계·회수 워크플로는 로드맵에서 다룬다.
+      </p>
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuHealth.tsx b/web/src/pages/gpu/GpuHealth.tsx
new file mode 100644
index 0000000..1c745ce
--- /dev/null
+++ b/web/src/pages/gpu/GpuHealth.tsx
@@ -0,0 +1,568 @@
+// GpuHealth — Step 2 "무음 장애 감지". Kubernetes Ready 뒤에 숨는 GPU 열화
+// (온도 램프·ECC 누적·XID 알림)를 Health Score 판정 근거와 함께 드러낸다.
+// 차트는 Explorer 의 CSP-안전 Recharts 셋업(원시 컴포넌트 + var(--metric-*)
+// stroke 문자열)을 그대로 미러한다 — <style> 주입·dangerouslySetInnerHTML 0.
+// demo off 세션은 헬스 브라우저 모드로 강등: useFleet 셀에서 GPU 를 골라 동일
+// 온도/ECC 차트만 렌더한다(시나리오 배너·타임라인은 데모 인스턴스 전용).
+import { BellRing, Gauge, ShieldCheck, TrendingDown } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ReferenceArea,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import AlertTimeline from '@/components/gpu/AlertTimeline';
+import KpiTile from '@/components/gpu/KpiTile';
+import StatusBanner, { type StatusLevel } from '@/components/gpu/StatusBanner';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useDemo } from '@/hooks/demoContext';
+import { useFleet } from '@/hooks/useFleet';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type MatrixData } from '@/lib/api';
+import type { DemoState, ScenarioPhase, VictimState } from '@/lib/demoApi';
+import { METRIC_GPU_ECC_CORR, METRIC_GPU_TEMP, selector } from '@/lib/gpuMetrics';
+
+// 최근 1시간 창 — Explorer 의 step 산식(max(15, floor(range/500)))을 미러.
+const RANGE_SECONDS = 3600;
+const STEP_SECONDS = Math.max(15, Math.floor(RANGE_SECONDS / 500));
+const CHART_POLL_MS = 30_000;
+const TEMP_LIMIT_C = 80;
+// 온도 차트 Y 하한 — 임계선이 플롯 중앙에 오도록 고정한다(위 YAxis 주석 참조).
+const TEMP_AXIS_MIN_C = 60;
+
+// 배너 설명에 고정하는 핵심 카피 — 이 화면이 존재하는 이유.
+const CORE_COPY =
+  'Kubernetes 는 Ready 를 보고하지만 GPU 는 열화 중이다 — CSP auto-repair 가 잡지 못하는 영역';
+
+interface Point {
+  time: number;
+  value: number | null;
+}
+
+// gpu_uuid 등호 매처는 시리즈를 유일하게 특정한다 — matrix 첫 시리즈만 취한다.
+function toPoints(matrix: MatrixData | null): Point[] {
+  const series = matrix?.result[0];
+  if (!series) return [];
+  return series.values.map(([t, v]) => ({ time: t, value: Number(v) }));
+}
+
+function formatTick(unixSec: number): string {
+  return new Date(unixSec * 1000).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function scoreColor(score: number): string {
+  if (score >= 90) return 'var(--metric-pod)';
+  if (score >= 70) return 'var(--metric-thermal)';
+  return 'var(--metric-fault)';
+}
+
+function bannerForPhase(phase: ScenarioPhase): { level: StatusLevel; title: string } {
+  if (phase === 'normal') return { level: 'ok', title: '정상' };
+  if (phase === 'degrading') return { level: 'warn', title: '주의 — 무음 열화 진행' };
+  return { level: 'suspect', title: '장애 의심 — 격리 검토 필요' };
+}
+
+const TOOLTIP_STYLE = {
+  backgroundColor: 'var(--popover)',
+  borderColor: 'var(--border)',
+  color: 'var(--popover-foreground)',
+  fontSize: 12,
+} as const;
+
+function useRangeSeries(metric: string, uuid: string) {
+  const query = usePolledQuery(
+    async () => {
+      const endSec = Math.floor(Date.now() / 1000);
+      const res = await api.rangeQuery(
+        selector(metric, { gpu_uuid: uuid }),
+        endSec - RANGE_SECONDS,
+        endSec,
+        STEP_SECONDS,
+      );
+      return res.data;
+    },
+    CHART_POLL_MS,
+    [metric, uuid],
+  );
+  const points = useMemo(() => toPoints(query.data), [query.data]);
+  return { points, loading: query.data === null && query.error === null, error: query.error };
+}
+
+// ---- 온도 라인차트 (임계 80°C 참조선 + 초과 대역) ----
+
+function TempChartCard({ uuid, replacing }: { uuid: string; replacing: boolean }) {
+  const { points, loading, error } = useRangeSeries(METRIC_GPU_TEMP, uuid);
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>온도</CardTitle>
+        <CardDescription>최근 1시간 · 30초 갱신 — 임계 {TEMP_LIMIT_C}°C 초과 시 열화 의심</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <Skeleton className="h-64 w-full" />
+        ) : error ? (
+          <p className="py-8 text-center text-destructive text-sm">온도 시계열 조회 실패 — {error}</p>
+        ) : points.length === 0 ? (
+          <p className="py-8 text-center text-muted-foreground text-sm">
+            {replacing
+              ? '교체 창 — 데이터 소멸. GPU 교체로 기존 uuid 시리즈가 종료되었다.'
+              : '표시할 데이터가 없다.'}
+          </p>
+        ) : (
+          <ResponsiveContainer width="100%" height={260}>
+            <LineChart data={points} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+              <XAxis
+                dataKey="time"
+                type="number"
+                domain={['dataMin', 'dataMax']}
+                tickFormatter={formatTick}
+                tick={{ fontSize: 12 }}
+                className="fill-muted-foreground"
+              />
+              {/* 고정 60~100°C — 'auto' 하한은 데이터(83~85°C)에 붙어 임계 80°C
+                  대역(ReferenceArea)이 플롯 전체를 덮었다. 정상인데 화면이
+                  새빨개지는 오독의 원인. 운용 envelope 를 고정해 임계선이
+                  차트 중앙에 오고 붉은 대역이 '위쪽 구간'으로 읽히게 한다. */}
+              <YAxis
+                domain={[TEMP_AXIS_MIN_C, 100]}
+                ticks={[60, 70, 80, 90, 100]}
+                width={48}
+                tick={{ fontSize: 12 }}
+                className="fill-muted-foreground"
+              />
+              <Tooltip labelFormatter={(t) => formatTick(Number(t))} contentStyle={TOOLTIP_STYLE} />
+              <Legend wrapperStyle={{ fontSize: 12 }} />
+              <ReferenceArea
+                y1={TEMP_LIMIT_C}
+                y2={100}
+                fill="var(--metric-fault)"
+                fillOpacity={0.08}
+                stroke="none"
+              />
+              <ReferenceLine
+                y={TEMP_LIMIT_C}
+                stroke="var(--metric-fault)"
+                strokeDasharray="4 4"
+                label={{
+                  value: `임계 ${TEMP_LIMIT_C}°C`,
+                  position: 'insideTopRight',
+                  fill: 'var(--metric-fault)',
+                  fontSize: 11,
+                }}
+              />
+              <Line
+                type="monotone"
+                dataKey="value"
+                name="GPU 온도(°C)"
+                stroke="var(--metric-thermal)"
+                strokeWidth={2}
+                dot={false}
+                connectNulls={false}
+                isAnimationActive={false}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- 정정 ECC 누적 막대차트 ----
+
+function EccChartCard({ uuid }: { uuid: string }) {
+  const { points, loading, error } = useRangeSeries(METRIC_GPU_ECC_CORR, uuid);
+  const nums = useMemo(
+    () => points.map((p) => p.value).filter((v): v is number => v != null),
+    [points],
+  );
+  // 카운터 시리즈 — 창 내 last-first 가 0 이면 "무증가" (교체로 카운터가
+  // 리셋되면 음수가 될 수 있어 0 으로 클램프).
+  const delta = nums.length >= 2 ? Math.max(0, nums[nums.length - 1] - nums[0]) : 0;
+  // 정상 GPU 는 카운터가 통째로 0 이다 — 높이 0 인 막대는 아무것도 안 그려져
+  // "빈 카드"(고장난 화면)로 읽힌다. 0 계열은 차트 대신 명시적 정상 패널로.
+  const allZero = nums.length > 0 && Math.max(...nums) === 0;
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>정정 ECC 누적</CardTitle>
+        <CardDescription>최근 1시간 — 정정 가능 메모리 오류 카운터</CardDescription>
+        {nums.length > 0 ? (
+          <CardAction>
+            {delta === 0 ? (
+              <Badge variant="outline">정정 ECC 무증가</Badge>
+            ) : (
+              <Badge variant="destructive">1시간 +{delta.toLocaleString('ko-KR')}건</Badge>
+            )}
+          </CardAction>
+        ) : null}
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <Skeleton className="h-64 w-full" />
+        ) : error ? (
+          <p className="py-8 text-center text-destructive text-sm">ECC 시계열 조회 실패 — {error}</p>
+        ) : points.length === 0 ? (
+          <p className="py-8 text-center text-muted-foreground text-sm">표시할 데이터가 없다.</p>
+        ) : allZero ? (
+          <div className="flex h-full min-h-[260px] flex-col items-center justify-center gap-2 rounded-md border border-dashed">
+            <span
+              className="font-bold text-5xl tabular-nums leading-none"
+              style={{ color: 'var(--metric-pod)' }}
+            >
+              0
+            </span>
+            <p className="font-medium text-sm">최근 1시간 정정 ECC 증가 없음</p>
+            <p className="text-muted-foreground text-xs">메모리 열화 신호 미검출 — 카운터 누적 0건</p>
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height={260}>
+            <BarChart data={points} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+              <XAxis
+                dataKey="time"
+                type="number"
+                domain={['dataMin', 'dataMax']}
+                tickFormatter={formatTick}
+                tick={{ fontSize: 12 }}
+                className="fill-muted-foreground"
+              />
+              <YAxis
+                domain={['auto', 'auto']}
+                allowDecimals={false}
+                width={48}
+                tick={{ fontSize: 12 }}
+                className="fill-muted-foreground"
+              />
+              <Tooltip labelFormatter={(t) => formatTick(Number(t))} contentStyle={TOOLTIP_STYLE} />
+              <Legend wrapperStyle={{ fontSize: 12 }} />
+              <Bar
+                dataKey="value"
+                name="정정 ECC 누적"
+                fill="var(--metric-fault)"
+                isAnimationActive={false}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- victim 요약 카드 ----
+
+function VictimCard({ victim }: { victim: VictimState }) {
+  const { health } = victim;
+  const score = Math.round(health.score);
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>감시 대상 GPU</CardTitle>
+        <CardDescription className="font-mono text-xs">{victim.uuid}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col gap-4">
+        <div className="flex flex-wrap gap-1.5">
+          <Badge variant="outline" className="font-mono">
+            {victim.instance}
+          </Badge>
+          <Badge variant="outline" className="font-mono">
+            {victim.device}
+          </Badge>
+          <Badge variant="secondary">{victim.model}</Badge>
+          <Badge variant="secondary">{victim.pool}</Badge>
+        </div>
+        <div className="flex items-baseline gap-2">
+          <span
+            className="font-bold text-4xl tabular-nums leading-none"
+            style={{ color: scoreColor(score) }}
+          >
+            {score}
+          </span>
+          <span className="text-muted-foreground text-sm">Health Score</span>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <span className="font-medium text-muted-foreground text-xs">판정 근거</span>
+          {health.deductions.length === 0 ? (
+            <p className="text-muted-foreground text-sm">감점 항목 없음</p>
+          ) : (
+            <ul className="flex flex-col gap-1.5">
+              {health.deductions.map((d) => (
+                <li key={d.code} className="flex items-start gap-2 text-sm">
+                  <Badge variant="outline" className="shrink-0 font-mono text-[10px]">
+                    {d.code}
+                  </Badge>
+                  <span className="flex-1 leading-snug">{d.message}</span>
+                  <span
+                    className="shrink-0 font-medium tabular-nums"
+                    style={{ color: 'var(--metric-fault)' }}
+                  >
+                    -{d.penalty}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+        {/* 위치·소속 라벨/값 행 — 목업(demo4) 우측 상세 패널 규약. 카드 하단
+            빈 공간을 실제 식별 정보로 채운다(전부 이미 받은 victim 필드). */}
+        <dl className="mt-auto flex flex-col gap-1.5 border-t pt-3 text-sm">
+          {[
+            ['CSP', victim.csp],
+            ['클러스터', victim.cluster],
+            ['서빙 풀', victim.pool],
+            ['GPU 모델', victim.model],
+          ].map(([k, v]) => (
+            <div key={k} className="flex items-center justify-between gap-3">
+              <dt className="text-muted-foreground text-xs">{k}</dt>
+              <dd className="truncate font-medium text-xs">{v}</dd>
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- 데모 모드: 시나리오 뷰 ----
+
+function DemoHealthView({ state }: { state: DemoState }) {
+  // 알림 확인은 서버에 기록된다(ack-alert) — 로컬 표시만 바꾸면 새로고침에
+  // 되돌아와 "눌러도 안 되는 버튼"이 된다.
+  const { act } = useDemo();
+  const { scenario, alerts } = state;
+  const victim = scenario.victim;
+  const banner = bannerForPhase(scenario.phase);
+  const score = Math.round(victim.health.score);
+  const unacked = alerts.filter((a) => !a.acked).length;
+  const critical = alerts.filter((a) => a.severity === 'critical' && !a.acked).length;
+  const major = alerts.filter((a) => a.severity === 'major' && !a.acked).length;
+  return (
+    <div className="flex flex-col gap-4">
+      <StatusBanner
+        level={banner.level}
+        title={banner.title}
+        description={CORE_COPY}
+        since={scenario.phaseStartAt}
+      />
+      {/* 상단 KPI 4타일 — 목업(demo1) 상단 타일 행 규약. 이 화면의 논지가
+          "K8s 는 Ready 인데 헬스는 감점 중"이므로 두 값을 나란히 세운다.
+          전부 이미 받은 state 에서 파생 — 신규 질의 0. */}
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        <KpiTile
+          label="Kubernetes 노드 상태"
+          value="Ready"
+          hint="CSP auto-repair 판정 — 이상 없음"
+          tone="ok"
+          icon={<ShieldCheck className="size-4" />}
+        />
+        <KpiTile
+          label="GPU Health Score"
+          value={String(score)}
+          sub="/ 100"
+          hint={score >= 90 ? '경미한 감점' : '열화 진행 — 조치 대상'}
+          tone={score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger'}
+          icon={<Gauge className="size-4" />}
+          progress={score}
+        />
+        <KpiTile
+          label="감점 항목"
+          value={`${victim.health.deductions.length}건`}
+          hint={
+            victim.health.deductions.length === 0
+              ? '감점 없음'
+              : victim.health.deductions.map((d) => d.code).join(' · ')
+          }
+          tone={victim.health.deductions.length === 0 ? 'ok' : 'warn'}
+          icon={<TrendingDown className="size-4" />}
+        />
+        <KpiTile
+          label="미확인 알림"
+          value={`${unacked}건`}
+          hint={`전체 ${alerts.length}건`}
+          tone={critical > 0 ? 'danger' : unacked > 0 ? 'warn' : 'ok'}
+          icon={<BellRing className="size-4" />}
+          badges={[
+            ...(critical > 0 ? [{ text: `Critical ${critical}`, tone: 'danger' as const }] : []),
+            ...(major > 0 ? [{ text: `Major ${major}`, tone: 'warn' as const }] : []),
+          ]}
+        />
+      </div>
+      <div className="grid gap-4 lg:grid-cols-3">
+        <VictimCard victim={victim} />
+        <div className="lg:col-span-2">
+          {/* uuid 를 key 로 — replacing 창에서 GPU 교체 시 차트 상태를 리셋한다. */}
+          <TempChartCard
+            key={victim.uuid}
+            uuid={victim.uuid}
+            replacing={scenario.phase === 'replacing'}
+          />
+        </div>
+      </div>
+      <div className="grid gap-4 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <EccChartCard key={victim.uuid} uuid={victim.uuid} />
+        </div>
+        <Card className="h-full">
+          <CardHeader>
+            <CardTitle>알림 타임라인</CardTitle>
+            <CardDescription>{alerts.length}건</CardDescription>
+          </CardHeader>
+          {/* 6건 이상이면 카드 높이(옆 ECC 차트 기준)를 넘어 마지막 항목이
+              잘렸다 — 잘림 대신 스크롤 + 하단 안내(목업 이벤트 피드 규약). */}
+          <CardContent className="flex flex-col gap-2">
+            <div className="max-h-[300px] overflow-y-auto pr-1">
+              <AlertTimeline
+                alerts={alerts}
+                onAck={(id) => {
+                  void act('ack-alert', { id });
+                }}
+              />
+            </div>
+            <p className="border-t pt-2 text-center text-muted-foreground text-xs">
+              전체 {alerts.length}건 — 스크롤하여 확인
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+// ---- 실서비스(demo off): 헬스 브라우저 강등 모드 ----
+
+function BrowserHealthView() {
+  const { cells } = useFleet();
+  const [instanceSel, setInstanceSel] = useState('');
+  const [deviceSel, setDeviceSel] = useState('');
+
+  const instances = useMemo(
+    () => [...new Set((cells ?? []).map((c) => c.instance).filter(Boolean))].sort(),
+    [cells],
+  );
+  // 파생 선택: 미선택/무효 선택은 첫 항목으로 수렴 — effect 없이 항상 유효한
+  // GPU 하나가 선택돼 있게 한다.
+  const instance = instanceSel && instances.includes(instanceSel) ? instanceSel : (instances[0] ?? '');
+  const devices = useMemo(
+    () => (cells ?? []).filter((c) => c.instance === instance).map((c) => c.device),
+    [cells, instance],
+  );
+  const device = deviceSel && devices.includes(deviceSel) ? deviceSel : (devices[0] ?? '');
+  const uuid =
+    (cells ?? []).find((c) => c.instance === instance && c.device === device)?.uuid ?? '';
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>헬스 브라우저</CardTitle>
+          <CardDescription>
+            플릿에서 GPU 를 선택해 온도·ECC 신호를 직접 조회한다. 데모 시나리오는 데모 인스턴스
+            전용.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {cells === null ? (
+            <Skeleton className="h-9 w-full max-w-xl" />
+          ) : cells.length === 0 ? (
+            <p className="text-muted-foreground text-sm">조회 가능한 GPU 시리즈가 없다.</p>
+          ) : (
+            <div className="flex flex-wrap items-center gap-2">
+              <Select
+                value={instance}
+                onValueChange={(v) => {
+                  setInstanceSel(v);
+                  setDeviceSel('');
+                }}
+              >
+                <SelectTrigger className="w-64" aria-label="인스턴스 선택">
+                  <SelectValue placeholder="인스턴스" />
+                </SelectTrigger>
+                <SelectContent>
+                  {instances.map((name) => (
+                    <SelectItem key={name} value={name}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={device} onValueChange={setDeviceSel}>
+                <SelectTrigger className="w-40" aria-label="디바이스 선택">
+                  <SelectValue placeholder="디바이스" />
+                </SelectTrigger>
+                <SelectContent>
+                  {devices.map((name) => (
+                    <SelectItem key={name} value={name}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {uuid ? (
+                <Badge variant="outline" className="font-mono text-xs">
+                  {uuid}
+                </Badge>
+              ) : null}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+      {uuid ? (
+        <div className="grid gap-4 lg:grid-cols-2">
+          <TempChartCard key={`t-${uuid}`} uuid={uuid} replacing={false} />
+          <EccChartCard key={`e-${uuid}`} uuid={uuid} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function HealthSkeleton() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Skeleton className="h-24 w-full" />
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Skeleton className="h-72" />
+        <Skeleton className="h-72 lg:col-span-2" />
+      </div>
+    </div>
+  );
+}
+
+export default function GpuHealth() {
+  const { demoMode, state } = useDemo();
+  if (demoMode === null) return <HealthSkeleton />;
+  if (demoMode === false) return <BrowserHealthView />;
+  if (!state) return <HealthSkeleton />;
+  return <DemoHealthView state={state} />;
+}
diff --git a/web/src/pages/gpu/GpuIdle.tsx b/web/src/pages/gpu/GpuIdle.tsx
new file mode 100644
index 0000000..450dd8b
--- /dev/null
+++ b/web/src/pages/gpu/GpuIdle.tsx
@@ -0,0 +1,648 @@
+// GpuIdle — 유휴장비 관리(/gpu/idle). 유휴 GPU 를 재사용 검증 라인에 태워
+// 운영 풀로 되돌리는 자산 워크플로 화면이다.
+//
+// GpuEfficiency(누적 분석 > GPU 사용량 분석)와 축이 다르다: 그쪽은 "할당 대비
+// 실사용 갭"(경영 설득), 여기는 "유휴 자산의 검증·재투입"(운영 작업). 겹치는
+// 것은 유휴 목록 하나뿐이라 개조하지 않고 별도 화면으로 둔다.
+//
+// 데이터는 전부 /demo/state 폴링에 실려 온다 — 이 화면 전용 질의는 없다.
+// KPI 6종은 *필터된 행*(rows)에서 파생한다. 서버 집계(state.idleSummary)는 필터
+// 축(클러스터·상태·사전검증·검색) 어느 것으로도 갈리지 않아, 그대로 쓰면 필터를
+// 걸어도 카드 6장이 통째로 안 움직인다. 모집단은 표 상단 "총 N개 항목"과 같다 —
+// 페이지 슬라이스(visible)가 아니라 필터 결과 전체라 카드와 표가 같은 이야기를
+// 한다. 무필터 시 서버 집계와 값이 일치한다(실측 185/63/164/6/13/4).
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import {
+  Boxes,
+  CircleCheck,
+  CircleDot,
+  CircleX,
+  Clock,
+  Target,
+  ChevronLeft,
+  ChevronRight,
+  MoreVertical,
+  Search,
+} from 'lucide-react';
+import IdleReuseDrawer, {
+  burninLabel,
+  formatIdleSpan,
+  STEP_META,
+  ToneBadge,
+  VERDICT_COLOR,
+  VERDICT_LABEL,
+} from '@/components/gpu/IdleReuseDrawer';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDemo } from '@/hooks/demoContext';
+import type { IdleGPU, IdleValidation } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+/** Select 의 "전체" 센티널 — 빈 문자열은 Radix Select 가 값으로 받지 않는다
+ *  (FleetFilterBar 와 같은 관례). */
+const ALL = '__all__';
+
+const PAGE_SIZES = [6, 10, 20, 50] as const;
+/** 목업 페이저 "6 / 페이지 · 1-6 of 128개 항목". */
+const DEFAULT_PAGE_SIZE = 6;
+/** 페이지 번호 윈도우 — 앞쪽 N개 + 말줄임 + 마지막. */
+const PAGE_WINDOW = 5;
+
+/** "30일 이상 유휴" 판정선 — 서버 idleLongThreshold(internal/demo/idle.go)와 같은 값.
+ *  카드가 서버 집계와 무필터에서 일치하려면 같은 선을 써야 한다. */
+const IDLE_LONG_DAYS = 30;
+
+const VERDICTS: IdleValidation['verdict'][] = ['idle', 'validating', 'ready', 'failed'];
+/** 서버가 내는 4종 전부 — 'running' 을 빼면 "진행 중" 배지가 뜬 행을 필터로
+ *  고를 수 없다(표시 어휘와 필터 어휘가 어긋난다). */
+const PRECHECKS: IdleValidation['precheck'][] = ['none', 'running', 'pass', 'fail'];
+
+/** 액션 실패 문구의 주어 — 형제 화면(GpuRuleset·GpuRemediation)과 같은 관례. */
+const ACTION_LABEL: Record<'start-idle-validation' | 'return-idle-to-service', string> = {
+  'start-idle-validation': '재사용 검증 착수',
+  'return-idle-to-service': '운영 풀 재투입',
+};
+
+/** 목업 "2025.06.06" — 최근 검증 완료 시각. 미실행은 '-'. */
+function formatDate(ms: number | undefined): string {
+  if (!ms) return '-';
+  const d = new Date(ms);
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}.${p(d.getMonth() + 1)}.${p(d.getDate())}`;
+}
+
+/** 권장 작업 — verdict 가 다음 한 수를 정한다(죽은 버튼을 만들지 않는다). */
+const RECOMMENDED_LABEL: Record<IdleValidation['verdict'], string> = {
+  idle: '재사용 검증 시작',
+  validating: '번인 테스트 보기',
+  ready: '재투입 관리',
+  failed: '상세 보기',
+};
+
+/** 목업 demo4 의 KPI 카드 톤 — 아이콘 배지 색만 쓴다(상단 컬러 라인 없음). */
+const KPI_TONE = {
+  info: 'var(--metric-cpu)',
+  warn: 'var(--metric-thermal)',
+  ok: 'var(--metric-pod)',
+  danger: 'var(--metric-fault)',
+} as const;
+
+/** 유휴 KPI 카드 — 목업은 아이콘 배지 + 라벨 한 줄, 아래 대형 숫자뿐이다.
+ *  공용 KpiTile(상단 컬러 라인 + 힌트 + 진행바)과 형태가 달라 여기서만 그린다. */
+function IdleKpi({
+  label,
+  value,
+  sub,
+  tone,
+  icon,
+}: {
+  label: string;
+  value: string | null;
+  sub?: string;
+  tone: keyof typeof KPI_TONE;
+  icon: React.ReactNode;
+}) {
+  const c = KPI_TONE[tone];
+  return (
+    <Card className="gap-0 py-0">
+      <CardContent className="flex flex-col gap-3 p-4">
+        <span className="flex items-center gap-2 text-muted-foreground text-[13px]">
+          <span
+            className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&>svg]:size-4"
+            style={{ color: c, backgroundColor: `color-mix(in srgb, ${c} 12%, transparent)` }}
+            aria-hidden
+          >
+            {icon}
+          </span>
+          <span className="truncate">{label}</span>
+        </span>
+        {value === null ? (
+          <Skeleton className="h-8 w-20" />
+        ) : (
+          <span className="flex items-baseline gap-1.5">
+            <span className="font-semibold text-[2rem] leading-none tabular-nums">{value}</span>
+            {sub ? <span className="text-muted-foreground text-sm tabular-nums">{sub}</span> : null}
+          </span>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/** 페이지 번호 목록 — 1..N 이 길어지면 앞 윈도우 + 말줄임(0) + 마지막. */
+function pageNumbers(current: number, total: number): number[] {
+  if (total <= PAGE_WINDOW + 2) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const start = Math.min(Math.max(1, current - 2), total - PAGE_WINDOW);
+  const window = Array.from({ length: PAGE_WINDOW }, (_, i) => start + i);
+  return window[PAGE_WINDOW - 1] >= total - 1 ? [...window, total] : [...window, 0, total];
+}
+
+export default function GpuIdle() {
+  const { demoMode, state, act, refresh } = useDemo();
+  const navigate = useNavigate();
+
+  const [search, setSearch] = useState('');
+  const [cluster, setCluster] = useState(ALL);
+  const [verdict, setVerdict] = useState(ALL);
+  const [precheck, setPrecheck] = useState(ALL);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
+  const [selected, setSelected] = useState<string | null>(null);
+  /** 액션 진행 중인 uuid — 행 단위 액션이라 전역 불리언으로 잠그면 한 행을
+   *  눌렀을 때 표 전체가 회색이 된다. */
+  const [actingUuid, setActingUuid] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const idle = state?.idle;
+  const clusters = useMemo(
+    () => [...new Set((idle ?? []).map((g) => g.cluster))].filter(Boolean).sort(),
+    [idle],
+  );
+
+  // 필터 적용 — 유휴 기간 내림차순(오래 방치된 것이 먼저 보여야 한다).
+  const rows = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const filtered = (idle ?? []).filter((g) => {
+      if (cluster !== ALL && g.cluster !== cluster) return false;
+      if (verdict !== ALL && g.validation.verdict !== verdict) return false;
+      if (precheck !== ALL && g.validation.precheck !== precheck) return false;
+      if (q === '') return true;
+      return (
+        g.instance.toLowerCase().includes(q) ||
+        g.uuid.toLowerCase().includes(q) ||
+        g.model.toLowerCase().includes(q)
+      );
+    });
+    return [...filtered].sort((a, b) => b.idleMinutes - a.idleMinutes);
+  }, [idle, search, cluster, verdict, precheck]);
+
+  // KPI 6종 — 필터된 행에서 파생한다(서버 idleSummary 와 같은 분류: 뒤 4종은
+  // total 의 상호배타 분할, over30d 는 그와 직교하는 장기 방치 계측선).
+  const summary = useMemo(() => {
+    let over30d = 0;
+    let validating = 0;
+    let ready = 0;
+    let failed = 0;
+    for (const g of rows) {
+      if (g.idleDays >= IDLE_LONG_DAYS) over30d++;
+      if (g.validation.verdict === 'validating') validating++;
+      else if (g.validation.verdict === 'ready') ready++;
+      else if (g.validation.verdict === 'failed') failed++;
+    }
+    return {
+      total: rows.length,
+      over30d,
+      needsValidation: rows.length - validating - ready - failed,
+      validating,
+      ready,
+      failed,
+    };
+  }, [rows]);
+
+  const pageCount = Math.max(1, Math.ceil(rows.length / pageSize));
+  const current = Math.min(page, pageCount);
+  const visible = rows.slice((current - 1) * pageSize, current * pageSize);
+  const selectedGpu = useMemo(
+    () => (idle ?? []).find((g) => g.uuid === selected) ?? null,
+    [idle, selected],
+  );
+
+  const filterActive = search !== '' || cluster !== ALL || verdict !== ALL || precheck !== ALL;
+
+  function resetFilters() {
+    setSearch('');
+    setCluster(ALL);
+    setVerdict(ALL);
+    setPrecheck(ALL);
+    setPage(1);
+  }
+
+  async function onAct(action: 'start-idle-validation' | 'return-idle-to-service', uuid: string) {
+    setActingUuid(uuid);
+    setActionError(null);
+    try {
+      const outcome = await act(action, { uuid });
+      // 재투입 성공분은 유휴 목록에서 사라진다 — 드로어가 빈 대상을 붙들지 않게
+      // 선택을 먼저 놓는다.
+      if (outcome.ok) {
+        if (action === 'return-idle-to-service') setSelected(null);
+      } else {
+        // 실패를 삼키면 버튼이 죽은 것처럼 보인다 — 형제 화면과 같은 문구 관례.
+        setActionError(
+          outcome.status === 409
+            ? `${ACTION_LABEL[action]} 거부 — ${outcome.error}`
+            : `${ACTION_LABEL[action]} 실패 (HTTP ${outcome.status}) — ${outcome.error}`,
+        );
+      }
+      // 실패도 재조회한다 — 409 는 대개 화면 상태가 낡아서 난다.
+      refresh();
+    } finally {
+      setActingUuid(null);
+    }
+  }
+
+  /** 표의 권장 작업 — 착수만 액션이고 나머지는 상세(드로어/사전검증 화면)로 보낸다. */
+  function onRecommend(g: IdleGPU) {
+    if (g.validation.verdict === 'idle') {
+      void onAct('start-idle-validation', g.uuid);
+      return;
+    }
+    if (g.validation.verdict === 'validating') {
+      void navigate(`/gpu/validation?uuid=${encodeURIComponent(g.uuid)}`);
+      return;
+    }
+    setSelected(g.uuid);
+  }
+
+  /** 드로어 "위치" — CSP·리전 표시명은 플릿 요약에서만 나온다. */
+  function locationOf(g: IdleGPU): string {
+    const csp = state?.fleet.csps.find((c) => c.id === g.csp)?.display ?? g.csp;
+    const region = state?.fleet.regions.find((r) => r.id === g.region)?.display ?? g.region;
+    return [csp, region, g.cluster].filter(Boolean).join(' > ');
+  }
+
+  if (demoMode === null) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-8 w-56" />
+        <Skeleton className="h-28 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!demoMode) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>유휴장비 관리</CardTitle>
+          <CardDescription>데모 시나리오 전용 화면</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            이 화면은 데모 모드에서만 동작한다. 실서비스 모드에서는 제공되지 않는다.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const gpuTotal = state?.fleet.gpuTotal ?? 0;
+  // 도착 전에는 0 이 아니라 스켈레톤 — 빈 rows 를 "유휴 0 대" 로 읽히면 안 된다.
+  const kpi = (v: number) => (state === null ? null : formatCount(v));
+  // 분모는 필터 여부가 정한다: 무필터면 플릿 전체(목업 "185 / 7,000"), 필터 중이면
+  // 유휴 전체("19 / 185") — 필터를 걸었는데 분모가 7,000 이면 카드가 거짓말을 한다.
+  const kpiDenominator = filterActive
+    ? `/ ${formatCount(idle?.length ?? 0)}`
+    : gpuTotal > 0
+      ? `/ ${formatCount(gpuTotal)}`
+      : undefined;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-muted-foreground text-sm">
+        사용하지 않는 GPU를 검증하고 안전하게 재사용할 수 있습니다.
+      </p>
+
+      {/* 1. KPI 6종 — 필터된 행에서 파생(표와 같은 모집단) */}
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
+        <IdleKpi
+          label={filterActive ? '필터된 유휴 GPU' : '전체 유휴 GPU'}
+          value={kpi(summary.total)}
+          sub={kpiDenominator}
+          tone="info"
+          icon={<Boxes />}
+        />
+        <IdleKpi label="30일 이상 유휴" value={kpi(summary.over30d)} tone="warn" icon={<Clock />} />
+        <IdleKpi
+          label="재사용 검증 필요"
+          value={kpi(summary.needsValidation)}
+          tone="danger"
+          icon={<Target />}
+        />
+        <IdleKpi
+          label="검증 진행 중"
+          value={kpi(summary.validating)}
+          tone="info"
+          icon={<CircleDot />}
+        />
+        <IdleKpi label="재투입 가능" value={kpi(summary.ready)} tone="ok" icon={<CircleCheck />} />
+        <IdleKpi label="검증 실패" value={kpi(summary.failed)} tone="danger" icon={<CircleX />} />
+      </div>
+
+      {/* 2. 검색 + 필터 3종 */}
+      <div className="flex flex-wrap items-center gap-1.5" aria-label="유휴장비 검색 필터">
+        <div className="relative w-full sm:w-72">
+          <Search className="-translate-y-1/2 absolute top-1/2 left-2.5 size-3.5 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder="노드명, GPU UUID, 모델명 검색"
+            className="h-8 pl-8 text-xs"
+            aria-label="노드명, GPU UUID, 모델명 검색"
+          />
+        </div>
+        <Select
+          value={cluster}
+          onValueChange={(v) => {
+            setCluster(v);
+            setPage(1);
+          }}
+        >
+          <SelectTrigger size="sm" className="h-8 w-auto min-w-[9rem] text-xs">
+            <SelectValue placeholder="클러스터 전체" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL} className="text-xs">
+              클러스터 전체
+            </SelectItem>
+            {clusters.map((c) => (
+              <SelectItem key={c} value={c} className="text-xs">
+                {c}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select
+          value={verdict}
+          onValueChange={(v) => {
+            setVerdict(v);
+            setPage(1);
+          }}
+        >
+          <SelectTrigger size="sm" className="h-8 w-auto min-w-[8rem] text-xs">
+            <SelectValue placeholder="상태 전체" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL} className="text-xs">
+              상태 전체
+            </SelectItem>
+            {VERDICTS.map((v) => (
+              <SelectItem key={v} value={v} className="text-xs">
+                {VERDICT_LABEL[v]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select
+          value={precheck}
+          onValueChange={(v) => {
+            setPrecheck(v);
+            setPage(1);
+          }}
+        >
+          <SelectTrigger size="sm" className="h-8 w-auto min-w-[8rem] text-xs">
+            <SelectValue placeholder="사전검증 전체" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL} className="text-xs">
+              사전검증 전체
+            </SelectItem>
+            {PRECHECKS.map((p) => (
+              <SelectItem key={p} value={p} className="text-xs">
+                {STEP_META[p].label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 px-3 text-xs"
+          disabled={!filterActive}
+          onClick={resetFilters}
+        >
+          필터 초기화
+        </Button>
+      </div>
+
+      {actionError ? (
+        <Alert variant="destructive">
+          <AlertDescription>{actionError}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      {/* 3. 표 */}
+      <div className="flex flex-col gap-2">
+        <p className="text-muted-foreground text-xs">
+          총 {formatCount(rows.length)}개 항목
+        </p>
+        {state === null ? (
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-9 w-full" />
+            <Skeleton className="h-9 w-full" />
+            <Skeleton className="h-9 w-full" />
+          </div>
+        ) : (
+          <Table>
+            {/* 목업 헤더 = 회색 보통 굵기, 행 높이 52px */}
+            <TableHeader className="[&_th]:h-12 [&_th]:font-normal [&_th]:text-muted-foreground [&_th]:text-xs">
+              <TableRow>
+                <TableHead className="w-44">노드 / GPU</TableHead>
+                <TableHead className="w-32">GPU 모델</TableHead>
+                <TableHead className="w-32">클러스터</TableHead>
+                <TableHead className="w-28">유휴 기간</TableHead>
+                <TableHead className="w-28">현재 상태</TableHead>
+                <TableHead className="w-24">최근 검증</TableHead>
+                <TableHead className="w-24">사전검증</TableHead>
+                <TableHead className="w-28">번인 테스트</TableHead>
+                <TableHead className="w-36">권장 작업</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {visible.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={9} className="text-center text-muted-foreground">
+                    조건에 맞는 유휴 GPU 가 없다.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                visible.map((g) => (
+                  <TableRow
+                    key={g.uuid}
+                    className="h-[52px] cursor-pointer"
+                    // 드로어가 붙들고 있는 원본 행을 표에서도 표시한다(목업의 선택 행 강조).
+                    data-state={g.uuid === selected ? 'selected' : undefined}
+                    onClick={() => setSelected(g.uuid)}
+                  >
+                    <TableCell className="font-mono text-xs">
+                      {g.instance} / {g.device}
+                    </TableCell>
+                    <TableCell className="text-xs">{g.model || '—'}</TableCell>
+                    <TableCell className="text-xs">{g.cluster || '—'}</TableCell>
+                    <TableCell className="text-xs tabular-nums">
+                      {formatIdleSpan(g.idleMinutes, false)}
+                    </TableCell>
+                    <TableCell>
+                      <ToneBadge
+                        text={VERDICT_LABEL[g.validation.verdict]}
+                        color={VERDICT_COLOR[g.validation.verdict]}
+                      />
+                    </TableCell>
+                    <TableCell className="text-xs tabular-nums">
+                      {formatDate(g.validation.lastAt)}
+                    </TableCell>
+                    <TableCell>
+                      <ToneBadge
+                        text={STEP_META[g.validation.precheck].label}
+                        color={STEP_META[g.validation.precheck].color}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <ToneBadge
+                        text={burninLabel(g.validation)}
+                        color={STEP_META[g.validation.burnin].color}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <span className="flex items-center justify-between gap-1">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="h-7 text-xs"
+                          // 목업의 권장 작업 = 파란 테두리·파란 글자.
+                          style={{ color: KPI_TONE.info, borderColor: KPI_TONE.info }}
+                          disabled={actingUuid === g.uuid}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onRecommend(g);
+                          }}
+                        >
+                          {RECOMMENDED_LABEL[g.validation.verdict]}
+                        </Button>
+                        {/* 목업의 행 끝 ⋮ — 상세(드로어)로 보낸다(행 클릭과 같은 목적지). */}
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 text-muted-foreground"
+                          aria-label={`${g.instance} 상세`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setSelected(g.uuid);
+                          }}
+                        >
+                          <MoreVertical className="size-4" />
+                        </Button>
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        )}
+
+        {/* 4. 페이지네이션 */}
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <span className="text-muted-foreground text-xs tabular-nums">
+            {rows.length === 0
+              ? '0개 항목'
+              : `${(current - 1) * pageSize + 1}-${Math.min(current * pageSize, rows.length)} of ${formatCount(rows.length)}개 항목`}
+          </span>
+          <div className="flex items-center gap-1.5">
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              disabled={current <= 1}
+              onClick={() => setPage(current - 1)}
+              aria-label="이전 페이지"
+            >
+              <ChevronLeft className="size-4" />
+            </Button>
+            {pageNumbers(current, pageCount).map((n, i) =>
+              n === 0 ? (
+                // biome-ignore lint/suspicious/noArrayIndexKey: 말줄임은 위치가 곧 정체성이다
+                <span key={`gap-${i}`} className="px-1 text-muted-foreground text-xs">
+                  …
+                </span>
+              ) : (
+                <Button
+                  key={n}
+                  variant="outline"
+                  size="icon"
+                  className="size-8 text-xs tabular-nums"
+                  // 목업의 현재 페이지 = 파란 테두리·파란 글자(채움 아님).
+                  style={
+                    n === current
+                      ? { color: KPI_TONE.info, borderColor: KPI_TONE.info }
+                      : undefined
+                  }
+                  onClick={() => setPage(n)}
+                  aria-label={`${n} 페이지`}
+                  aria-current={n === current ? 'page' : undefined}
+                >
+                  {n}
+                </Button>
+              ),
+            )}
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-8"
+              disabled={current >= pageCount}
+              onClick={() => setPage(current + 1)}
+              aria-label="다음 페이지"
+            >
+              <ChevronRight className="size-4" />
+            </Button>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(v) => {
+                setPageSize(Number(v));
+                setPage(1);
+              }}
+            >
+              <SelectTrigger size="sm" className="h-8 w-auto min-w-[6.5rem] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZES.map((n) => (
+                  <SelectItem key={n} value={String(n)} className="text-xs">
+                    {n} / 페이지
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      <IdleReuseDrawer
+        gpu={selectedGpu}
+        location={selectedGpu ? locationOf(selectedGpu) : ''}
+        acting={actingUuid !== null && actingUuid === selected}
+        error={actionError}
+        onClose={() => {
+          setSelected(null);
+          setActionError(null);
+        }}
+        onAct={onAct}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuIncident.tsx b/web/src/pages/gpu/GpuIncident.tsx
new file mode 100644
index 0000000..6a9c99b
--- /dev/null
+++ b/web/src/pages/gpu/GpuIncident.tsx
@@ -0,0 +1,468 @@
+// GpuIncident — 장애 상세 / 자동격리 대응 (목업 demo2).
+//
+// 시나리오 3 [장애 파악 및 조치] 의 화면. 한 장에 세 가지 질문의 답을 놓는다:
+//   ① 무엇이 났나 — 상단 장애 헤더(심각도·발생 시각·지속 시간·진단 요약)
+//   ② 어디까지 번졌나 — 「원인 및 영향 경로」 가로 7-노드 + 「영향 범위 요약」
+//   ③ 무엇부터 하나 — 우측 「권장 조치 / 다음 액션」 6단계 + 실행 버튼
+//
+// 조치 목록은 새 상태가 아니라 *시나리오 단계의 투영*이고(서버 incident.actions),
+// 버튼은 기존 액션(approve-isolation / start-burnin / return-to-service)을 그대로
+// 쏜다 — 화면 전용 상태를 만들면 파이프라인과 따로 놀기 시작한다.
+import {
+  AlertTriangle,
+  Box,
+  Boxes,
+  CheckCircle2,
+  Cpu,
+  ExternalLink,
+  RefreshCw,
+  ShieldCheck,
+  Users,
+} from 'lucide-react';
+import { type ReactNode, useEffect, useState } from 'react';
+import { Link } from 'react-router';
+import AlertTimeline from '@/components/gpu/AlertTimeline';
+import IncidentActionList from '@/components/gpu/IncidentActionList';
+import IncidentFlow from '@/components/gpu/IncidentFlow';
+import VictimMetricChart from '@/components/gpu/VictimMetricChart';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useDemo } from '@/hooks/demoContext';
+import { useVictimSeries } from '@/hooks/useVictimSeries';
+import type { DemoAction, DemoState, IncidentChain, IncidentImpact } from '@/lib/demoApi';
+import { formatCelsius, formatCount, formatPct, METRIC_COLORS } from '@/lib/gpuMetrics';
+
+/** epoch ms 이후 경과를 "17분 53초"로 — 목업 지속 시간 표기. 0(장애 없음)이면 '—'. */
+function elapsedText(fromMs: number, nowMs: number): string {
+  if (fromMs <= 0) return '—';
+  const total = Math.max(0, Math.floor((nowMs - fromMs) / 1000));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (h > 0) return `${h}시간 ${m}분 ${s}초`;
+  return `${m}분 ${s}초`;
+}
+
+/** epoch ms → "2026-07-29 16:18:13" — 목업의 발생 시각 표기(24시간제, 대시 구분).
+ *  ko-KR 기본 포맷("2026. 7. 29. 오후 4:18:13")은 좁은 칸에서 두 줄로 접힌다. */
+function timeText(ms: number): string {
+  if (ms <= 0) return '—';
+  const d = new Date(ms);
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+
+/** epoch ms → "14:32:18" — 목업 우상단 「마지막 업데이트」 표기(24시간제). */
+function clockText(ms: number): string {
+  return ms > 0 ? new Date(ms).toLocaleTimeString('ko-KR', { hour12: false }) : '—';
+}
+
+const SEVERITY_LABEL: Record<string, string> = {
+  critical: 'Critical',
+  major: 'Major',
+  warning: 'Warning',
+  info: '정보',
+};
+
+const SEVERITY_COLOR: Record<string, string> = {
+  critical: METRIC_COLORS.fault,
+  major: METRIC_COLORS.thermal,
+  warning: METRIC_COLORS.mem,
+  info: METRIC_COLORS.cpu,
+};
+
+// 주 CTA — 단계에 따라 라벨과 액션이 바뀐다. 버튼 여러 개가 *같은* 액션을 쏘면
+// 거짓 표면이 되므로(엔진에서 Cordon→Drain→Taint 는 한 액션이다) 실행 버튼은
+// 하나로 두고, 나머지는 해당 콘솔로 가는 링크다.
+const CTA: Record<string, { label: string; action: DemoAction }> = {
+  'approve-isolation': { label: '노드 격리 실행', action: 'approve-isolation' },
+  'start-burnin': { label: '재번인 시작', action: 'start-burnin' },
+  'return-to-service': { label: '운영 풀 재투입', action: 'return-to-service' },
+};
+
+// ---- 헤더 ----
+
+function IncidentHeader({ incident, now }: { incident: IncidentChain; now: number }) {
+  const color = SEVERITY_COLOR[incident.severity] ?? METRIC_COLORS.cpu;
+  return (
+    <Card className={incident.active ? 'gap-0 border-metric-fault/40 py-0' : 'gap-0 py-0'}>
+      <CardContent className="flex flex-col gap-3 p-4">
+        <div className="flex flex-wrap items-center gap-3">
+          <Badge
+            variant="outline"
+            style={{
+              color,
+              borderColor: color,
+              backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`,
+            }}
+          >
+            {SEVERITY_LABEL[incident.severity] ?? incident.severity}
+          </Badge>
+          <p className="min-w-0 flex-1 font-semibold text-lg leading-tight">{incident.title}</p>
+          <Badge variant="outline" className="font-mono text-[10px]">
+            {incident.code}
+          </Badge>
+        </div>
+
+        <dl className="flex flex-wrap items-center gap-x-8 gap-y-2 text-sm">
+          <div className="flex items-center gap-2">
+            <dt className="text-muted-foreground text-xs">발생 시각</dt>
+            <dd className="tabular-nums">{timeText(incident.firstAt || incident.at)}</dd>
+          </div>
+          <div className="flex items-center gap-2">
+            <dt className="text-muted-foreground text-xs">상태</dt>
+            <dd className="flex items-center gap-1.5">
+              {incident.active ? (
+                <>
+                  <AlertTriangle className="size-3.5" style={{ color: METRIC_COLORS.fault }} />
+                  <span style={{ color: METRIC_COLORS.fault }}>진행 중</span>
+                </>
+              ) : (
+                <>
+                  <CheckCircle2 className="size-3.5" style={{ color: METRIC_COLORS.pod }} />
+                  <span style={{ color: METRIC_COLORS.pod }}>해소</span>
+                </>
+              )}
+            </dd>
+          </div>
+          <div className="flex items-center gap-2">
+            <dt className="text-muted-foreground text-xs">심각도</dt>
+            <dd style={{ color }}>{SEVERITY_LABEL[incident.severity] ?? incident.severity}</dd>
+          </div>
+          <div className="flex items-center gap-2">
+            <dt className="text-muted-foreground text-xs">지속 시간</dt>
+            <dd className="tabular-nums">{elapsedText(incident.firstAt, now)}</dd>
+          </div>
+        </dl>
+
+        <Separator />
+        <div className="flex flex-wrap gap-x-3 gap-y-1">
+          <span className="text-muted-foreground text-xs">진단 요약</span>
+          <p className="min-w-0 flex-1 text-sm leading-snug">
+            {incident.cause || '진행 중인 장애가 없다 — 아래 경로는 마지막 대상 개체의 위치다.'}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- 원인 분석 (좌측 표 + 미니차트 3종) ----
+
+function CauseRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="flex items-baseline gap-2">
+      <dt className="w-[5.5rem] shrink-0 text-muted-foreground text-xs">{label}</dt>
+      <dd className={`min-w-0 flex-1 text-[13px] leading-snug ${mono ? 'font-mono' : 'tabular-nums'}`}>
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+function CauseAnalysis({ state, now }: { state: DemoState; now: number }) {
+  const { demoMode } = useDemo();
+  const { incident, scenario } = state;
+  const series = useVictimSeries(scenario.victim.uuid, demoMode);
+  const ecc = series.data?.ecc;
+  const temp = series.data?.temp;
+  const util = series.data?.util;
+  // 목업의 x축은 시각 눈금이고 장애 시점에 점선 마커가 선다 — 표본 시각과
+  // 최초 발생 시각(초)을 함께 넘기면 차트가 그 둘을 그린다.
+  const markerAt = incident.firstAt > 0 ? incident.firstAt / 1000 : undefined;
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">원인 분석</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4 xl:grid-cols-[15rem_minmax(0,1fr)]">
+        <dl className="flex flex-col gap-2">
+          <CauseRow label="장애 코드" value={incident.code} mono />
+          <CauseRow label="최초 발생 시각" value={timeText(incident.firstAt)} />
+          <CauseRow label="최근 발생 시각" value={timeText(incident.at)} />
+          <CauseRow label="관련 이벤트 수" value={formatCount(incident.eventCount)} />
+          <CauseRow label="지속 시간" value={elapsedText(incident.firstAt, now)} />
+          <CauseRow label="추정 원인" value={incident.cause || '—'} />
+        </dl>
+        <div className="grid gap-3 sm:grid-cols-3">
+          <VictimMetricChart
+            label="ECC DBE Count"
+            valueText={ecc?.last == null ? null : `${formatCount(ecc.last)} count`}
+            color={METRIC_COLORS.fault}
+            values={ecc?.values ?? []}
+            times={ecc?.times}
+            markerAt={markerAt}
+          />
+          <VictimMetricChart
+            label={`Temperature (${scenario.victim.device})`}
+            valueText={temp?.last == null ? null : formatCelsius(temp.last)}
+            color={METRIC_COLORS.thermal}
+            values={temp?.values ?? []}
+            times={temp?.times}
+            markerAt={markerAt}
+          />
+          <VictimMetricChart
+            label="GPU Utilization"
+            valueText={util?.last == null ? null : formatPct(util.last, 0)}
+            color={METRIC_COLORS.gpu}
+            values={util?.values ?? []}
+            times={util?.times}
+            markerAt={markerAt}
+            domainMax={100}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- 영향 범위 요약 (한 카드 안 4 카운터) ----
+
+function ImpactSummary({ impact }: { impact: IncidentImpact }) {
+  const cells: Array<{ icon: ReactNode; label: string; value: string; unit: string }> = [
+    { icon: <Cpu />, label: '영향 GPU', value: formatCount(impact.gpus), unit: '대' },
+    { icon: <Box />, label: '영향 Pod', value: formatCount(impact.pods), unit: '개' },
+    { icon: <Users />, label: '영향 Tenant', value: formatCount(impact.tenants), unit: '개' },
+    { icon: <Boxes />, label: '영향 Service', value: formatCount(impact.services), unit: '개' },
+  ];
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">영향 범위 요약</CardTitle>
+      </CardHeader>
+      <CardContent className="grid grid-cols-2 divide-x md:grid-cols-4">
+        {cells.map((c) => (
+          <div key={c.label} className="flex min-w-0 items-center gap-3 px-3 py-1">
+            <span className="[&>svg]:size-7 shrink-0 text-muted-foreground/70">{c.icon}</span>
+            <div className="min-w-0">
+              <p className="truncate text-muted-foreground text-xs">{c.label}</p>
+              {/* 목업의 "2 대" — 숫자는 크게, 단위는 작게 붙여 쓴다. */}
+              <p className="flex items-baseline gap-1">
+                <span className="font-semibold text-2xl tabular-nums leading-tight">{c.value}</span>
+                <span className="text-muted-foreground text-xs">{c.unit}</span>
+              </p>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- 우측: 권장 조치 + CTA ----
+
+function ActionPanel({ state }: { state: DemoState }) {
+  const { act, refresh } = useDemo();
+  const { incident, scenario } = state;
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cta = scenario.pendingAction ? CTA[scenario.pendingAction] : undefined;
+
+  async function run(action: DemoAction, body?: Record<string, string>) {
+    if (pending) return;
+    setPending(true);
+    setError(null);
+    const outcome = await act(action, body);
+    setPending(false);
+    if (outcome.ok) {
+      refresh();
+      return;
+    }
+    setError(
+      outcome.status === 409
+        ? `조치 거부 — ${outcome.error}`
+        : `조치 실패 (HTTP ${outcome.status}) — ${outcome.error}`,
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">권장 조치 / 다음 액션</CardTitle>
+        <CardDescription className="text-xs">
+          자동복구가 모은 근거 기반 — 현 단계에서 허용된 조치만 실행된다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <IncidentActionList actions={incident.actions} />
+
+        <Button className="w-full" disabled={!cta || pending} onClick={() => cta && run(cta.action)}>
+          <ShieldCheck />
+          {cta ? cta.label : '실행 가능한 조치 없음'}
+        </Button>
+        <div className="grid grid-cols-2 gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <Link to="/gpu/remediation">
+              <ExternalLink />
+              격리 파이프라인
+            </Link>
+          </Button>
+          <Button variant="outline" size="sm" asChild>
+            <Link to="/gpu/validation">
+              <ExternalLink />
+              검증·번인 콘솔
+            </Link>
+          </Button>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={pending}
+          onClick={() => run('report-false-positive', { uuid: scenario.victim.uuid })}
+        >
+          오탐 신고 — 룰 보정 요청
+        </Button>
+
+        {error ? (
+          <p role="alert" className="text-destructive text-sm">
+            {error}
+          </p>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function GpuIncident() {
+  const { demoMode, state, refresh } = useDemo();
+  // 지속 시간을 라이브로 갱신 — 헤더의 카운터가 1초마다 흐른다.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  if (demoMode === null || (demoMode === true && !state)) {
+    return (
+      <div className="flex flex-col gap-3" aria-busy="true">
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-96 w-full" />
+      </div>
+    );
+  }
+
+  if (demoMode !== true || !state) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>장애 상세</CardTitle>
+          <CardDescription>
+            장애 체인은 데모 모드의 시나리오 데이터로 구성된다 — 실서비스 인스턴스에서는
+            표시할 진행 중 장애가 없다.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  const { incident, alerts, scenario } = state;
+  const impact = incident.impact;
+  // 「관련 이벤트」의 모집단은 서버가 정한다 — victim 개체(노드 단위 알림은 개체가
+  // 빈다) × *이번 사이클*(firstAt 이후). 노드만 보면 (a) 같은 노드 형제 GPU 의 일상
+  // 알림과 (b) 지난 사이클의 CORDON·REPLACE·RETURNED 가 섞여, 바로 옆 「관련 이벤트
+  // 수」(서버 eventCount)와 다른 집합을 세게 된다 — 실측(2사이클째 degrading): 수=0
+  // 인데 타임라인은 지난 사이클 3건(그중 "운영 풀 재투입 완료")을 이 장애의 관련
+  // 이벤트로 세웠다. 앰비언트(일상) 알림은 victim 개체를 비켜 가므로(fireAmbient)
+  // 개체 규칙이 곧 앰비언트 배제다 — 코드 목록을 프론트에 복제하면 코드가 늘 때 두
+  // 곳이 어긋난다. 두 술어의 등가는 Go 회귀가 지킨다(internal/demo/incident_events_test.go
+  // 관련이벤트수는_화면_타임라인과_같은_모집단). 진행 중인 장애가 없으면(firstAt=0)
+  // 관련 이벤트도 없다 — 서버 eventCount 도 그때 0 이다.
+  const victim = scenario.victim;
+  const related =
+    incident.firstAt > 0
+      ? alerts.filter(
+          (a) =>
+            a.instance === victim.instance &&
+            (!a.device || a.device === victim.device) &&
+            a.at >= incident.firstAt,
+        )
+      : [];
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* 목업의 페이지 부제 + 우상단 「마지막 업데이트 · 새로고침」. 시각은 서버가
+          스냅샷을 만든 시각(generatedAt)이고, 버튼은 폴링과 같은 재조회를 쏜다 —
+          화면이 자기 시계로 지어내면 폴링이 멈춰도 시각만 흐른다. */}
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="text-muted-foreground text-sm">
+          선택한 장애의 원인, 영향 범위, 권장 조치를 한 화면에서 확인합니다.
+        </p>
+        <div className="flex items-center gap-1 text-muted-foreground text-xs">
+          <span className="tabular-nums">마지막 업데이트 {clockText(state.generatedAt)}</span>
+          <Button variant="ghost" size="icon" className="size-7" onClick={refresh} title="새로고침">
+            <RefreshCw />
+            <span className="sr-only">새로고침</span>
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_22rem]">
+      <div className="flex min-w-0 flex-col gap-3">
+        <IncidentHeader incident={incident} now={now} />
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">원인 및 영향 경로</CardTitle>
+            <CardDescription className="text-xs">
+              장애 개체에서 클라우드 경계까지 — 위로 갈수록 분모가 커지고 분자(영향 GPU)는
+              고정이다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <IncidentFlow links={incident.links} impact={impact} active={incident.active} />
+          </CardContent>
+        </Card>
+
+        <CauseAnalysis state={state} now={now} />
+
+        {/* 목업은 카드 4장이 아니라 *한 카드 안 4칸*이다 — 테두리 4개가 서 있으면
+            네 개의 별개 지표로 읽히지만, 이건 한 장애의 영향 범위 한 벌이다.
+            칸 사이는 세로 구분선(divide-x)만. */}
+        <ImpactSummary impact={impact} />
+      </div>
+
+      <div className="flex min-w-0 flex-col gap-3">
+        <ActionPanel state={state} />
+        <Card>
+          <CardHeader className="pb-2">
+            <div className="flex items-start justify-between gap-2">
+              <CardTitle className="text-sm">관련 이벤트 타임라인</CardTitle>
+              {/* 목업의 「전체 보기」 — 여기서는 최근 6건만 자른다. 전체 목록은
+                  같은 서버 알림 상태를 쓰는 무음 장애 탐지 화면이다. */}
+              <Button variant="link" size="sm" className="h-auto p-0 text-xs" asChild>
+                <Link to="/gpu/health">전체 보기</Link>
+              </Button>
+            </div>
+            <CardDescription className="text-xs">
+              이 장애({victim.instance} / {victim.device})의 이번 사이클 신호만 — 최근 6건까지,
+              확인 처리는 헬스 화면과 같은 서버 상태를 공유한다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {/* 비었을 때 공용 문구("수신된 알림이 없다")를 쓰면 알림 자체가 없다는 말이
+                된다 — 없는 것은 *이 장애의* 신호다. */}
+            {related.length > 0 ? (
+              <AlertTimeline alerts={related.slice(0, 6)} />
+            ) : (
+              <p className="py-6 text-center text-muted-foreground text-sm">
+                이번 장애에 접수된 이벤트가 없다 — 지난 사이클·형제 GPU 의 알림은 이 장애의
+                근거가 아니라 여기 싣지 않는다.
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuLayout.tsx b/web/src/pages/gpu/GpuLayout.tsx
new file mode 100644
index 0000000..50aa1f5
--- /dev/null
+++ b/web/src/pages/gpu/GpuLayout.tsx
@@ -0,0 +1,84 @@
+// GpuLayout — /gpu 하위 라우트의 레이아웃. DemoContext 공급(모드 감지 +
+// /demo/state 폴링 + 액션) + ContactBubble(데모 모드 한정) + Outlet.
+// 폴링 주기: 평시 5s, 진행 장면(드레인·번인)은 2s 로 가속 — 스테퍼·카운터가
+// 라이브로 움직여야 시연이 산다.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Outlet } from 'react-router';
+import AssistantBubble from '@/components/gpu/AssistantBubble';
+import { DemoContext, type DemoContextValue } from '@/hooks/demoContext';
+import { useDemoStatus } from '@/hooks/useDemoStatus';
+import {
+  type DemoAction,
+  type DemoState,
+  fetchDemoState,
+  runDemoAction,
+} from '@/lib/demoApi';
+
+function pollIntervalFor(state: DemoState | null): number {
+  if (!state) return 5000;
+  const phase = state.scenario.phase;
+  const busy =
+    state.scenario.victim.drain.active ||
+    state.scenario.victim.burnin.active ||
+    phase === 'draining' ||
+    phase === 'replacing';
+  return busy ? 2000 : 5000;
+}
+
+export default function GpuLayout() {
+  const status = useDemoStatus();
+  const demoMode = status === null ? null : status.enabled;
+
+  const [state, setState] = useState<DemoState | null>(null);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const [tick, setTick] = useState(0);
+  const refresh = useCallback(() => setTick((n) => n + 1), []);
+
+  useEffect(() => {
+    if (!demoMode) return;
+    let cancelled = false;
+    let timer = 0;
+
+    async function poll() {
+      try {
+        const next = await fetchDemoState();
+        if (cancelled) return;
+        setState(next);
+      } catch {
+        // 401(세션 만료)은 페이지의 TSDB 질의가 AuthContext 전환을 일으킨다.
+        // 503(백필 중)은 다음 폴링에서 자연 회복 — 여기선 조용히 재시도.
+      }
+      if (cancelled) return;
+      timer = window.setTimeout(poll, document.hidden ? 10_000 : pollIntervalFor(stateRef.current));
+    }
+
+    poll();
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [demoMode, tick]);
+
+  const act = useCallback(
+    async (action: DemoAction, body?: { uuid?: string; reason?: string; note?: string }) => {
+      const outcome = await runDemoAction(action, body);
+      // 성공/실패와 무관하게 즉시 재조회 — 화면이 서버 진실을 바로 반영한다.
+      refresh();
+      return outcome;
+    },
+    [refresh],
+  );
+
+  const value: DemoContextValue = useMemo(
+    () => ({ demoMode, state, act, refresh }),
+    [demoMode, state, act, refresh],
+  );
+
+  return (
+    <DemoContext.Provider value={value}>
+      <Outlet />
+      {demoMode ? <AssistantBubble /> : null}
+    </DemoContext.Provider>
+  );
+}
diff --git a/web/src/pages/gpu/GpuOverview.tsx b/web/src/pages/gpu/GpuOverview.tsx
new file mode 100644
index 0000000..6c568a7
--- /dev/null
+++ b/web/src/pages/gpu/GpuOverview.tsx
@@ -0,0 +1,601 @@
+// GpuOverview — 통합 상황판. 배치 순서가 곧 서사다(사용자 지시 2026-07-27):
+//   ① 지금 문제가 무엇인가 → ② 어디까지 영향인가 → ③ 지금 무엇을 해야 하는가
+// SituationBoard 가 그 셋을 한 줄에 답하고, 아래로 CSP 롤업 → 공통 필터 →
+// 플릿 히트맵 → 저활용·최근 이벤트 순으로 근거를 깐다.
+// 데이터 계층 3단: 카운트 = DemoState.fleet(GpuLayout 5s 폴링 공급) / 집계 % =
+// 데모 사전 집계 instant(15s) / 벽면 = useFleet per-GPU instant(30s).
+// 데모 off 강등: 벽면 셀 클라이언트 계산(노드 distinct·총 GPU·평균 util)만
+// 표시 — 할당·장애·온도 이상·Agent Missing 은 데모 집계 없이는 산출원이 없어
+// 타일 자체를 숨긴다(가정 명시: 명세의 숨김 목록에 온도 이상도 포함 취급).
+import { useCallback, useMemo, useState } from 'react';
+import { Link } from 'react-router';
+import {
+  Activity,
+  AlertTriangle,
+  Boxes,
+  Clock,
+  Cpu,
+  Wrench,
+} from 'lucide-react';
+import ActiveMonitoring from '@/components/gpu/ActiveMonitoring';
+import CollectDonut from '@/components/gpu/CollectDonut';
+import EventFeed from '@/components/gpu/EventFeed';
+import ModelUtilChart from '@/components/gpu/ModelUtilChart';
+import CspRollupCards from '@/components/gpu/CspRollupCards';
+import EventStream from '@/components/gpu/EventStream';
+import FaultTypeBar from '@/components/gpu/FaultTypeBar';
+import GpuModelBar from '@/components/gpu/GpuModelBar';
+import LiveStrip from '@/components/gpu/LiveStrip';
+import SituationBoard from '@/components/gpu/SituationBoard';
+import FleetFilterBar from '@/components/gpu/FleetFilterBar';
+import FleetHeatmap from '@/components/gpu/FleetHeatmap';
+import KpiTile from '@/components/gpu/KpiTile';
+import NodeDrillSheet from '@/components/gpu/NodeDrillSheet';
+import TenantDonut from '@/components/gpu/TenantDonut';
+import TopGpuTable from '@/components/gpu/TopGpuTable';
+import UtilLegend from '@/components/gpu/UtilLegend';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useDemo } from '@/hooks/demoContext';
+import {
+  applyFleetFilter,
+  type CellStatus,
+  type FleetCell,
+  type FleetFilter,
+  groupClusterChunks,
+  useFleet,
+} from '@/hooks/useFleet';
+import { deriveFleetFacts } from '@/lib/fleetFacts';
+import { useLiveSeries } from '@/hooks/useLiveSeries';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type ApiEnvelope, type VectorData } from '@/lib/api';
+import {
+  formatCount,
+  formatPct,
+  METRIC_DEMO_CSP_UTIL_AVG,
+  METRIC_DEMO_FLEET_ALLOC_PCT,
+  METRIC_DEMO_FLEET_UTIL_AVG,
+} from '@/lib/gpuMetrics';
+
+const AGG_POLL_MS = 15_000;
+
+interface DemoAggregates {
+  utilAvgPct: number | null;
+  allocPct: number | null;
+  utilByCsp: Record<string, number>;
+  /** csp id → 최근 30분 사용률 추세(카드 스파크라인). */
+  utilSeriesByCsp: Record<string, number[]>;
+}
+
+function firstValue(res: ApiEnvelope<VectorData>): number | null {
+  const raw = res.data.result[0]?.value[1];
+  if (raw === undefined) return null;
+  const v = Number(raw);
+  return Number.isFinite(v) ? v : null;
+}
+
+export default function GpuOverview() {
+  const { demoMode, state, act } = useDemo();
+  const [acting, setActing] = useState(false);
+  const fleet = useFleet();
+  const live = useLiveSeries(demoMode);
+  const [filter, setFilter] = useState<FleetFilter>({});
+  const [selected, setSelected] = useState<string | null>(null);
+
+  // 데모 사전 집계 % (fleet util/alloc + csp util 3질의 = 1 tick) — demoMode
+  // 판별 전/off 는 질의 자체를 skip(null 반환), 확정 시 deps 로 재구독.
+  const agg = usePolledQuery<DemoAggregates | null>(
+    async () => {
+      if (demoMode !== true) return null;
+      const end = Math.floor(Date.now() / 1000);
+      const [utilRes, allocRes, cspRes, cspRangeRes] = await Promise.all([
+        api.instantQuery(METRIC_DEMO_FLEET_UTIL_AVG),
+        api.instantQuery(METRIC_DEMO_FLEET_ALLOC_PCT),
+        api.instantQuery(METRIC_DEMO_CSP_UTIL_AVG),
+        // CSP 4사 추세를 한 질의로 — 카드마다 따로 부르면 4배가 된다.
+        api.rangeQuery(METRIC_DEMO_CSP_UTIL_AVG, end - 1800, end, 15),
+      ]);
+      const utilByCsp: Record<string, number> = {};
+      for (const s of cspRes.data.result) {
+        const csp = s.metric.csp;
+        const v = Number(s.value[1]);
+        if (csp && Number.isFinite(v)) utilByCsp[csp] = v;
+      }
+      const utilSeriesByCsp: Record<string, number[]> = {};
+      for (const s of cspRangeRes.data.result) {
+        const csp = s.metric.csp;
+        if (!csp) continue;
+        utilSeriesByCsp[csp] = s.values
+          .map(([, raw]) => Number(raw))
+          .filter((v) => Number.isFinite(v));
+      }
+      return {
+        utilAvgPct: firstValue(utilRes),
+        allocPct: firstValue(allocRes),
+        utilByCsp,
+        utilSeriesByCsp,
+      };
+    },
+    AGG_POLL_MS,
+    [demoMode],
+  );
+
+  const demoFleet = demoMode === true ? (state?.fleet ?? null) : null;
+
+  // Agent Missing 노드의 GPU 는 시리즈가 없어 벽면에서 빠진다 — state 의
+  // missingGpus 로 '데이터 없음' 합성 셀(util NaN)을 주입해 총 셀 수를 인벤토리
+  // 전수(예: 7,000)와 일치시킨다(전 화면 단일 목데이터 정합 계약). 이미 셀이
+  // 있는 instance 는 중복 주입하지 않는다(복구 직후 폴링 시차 방어).
+  const mergedCells = useMemo(() => {
+    const base = fleet.cells ?? [];
+    const missing = demoFleet?.missingGpus ?? [];
+    if (missing.length === 0) return base;
+    const present = new Set(base.map((c) => c.instance));
+    const synthetic = missing
+      .filter((m) => !present.has(m.instance))
+      .map((m) => ({
+        instance: m.instance,
+        device: m.device,
+        uuid: m.uuid,
+        model: '',
+        csp: m.csp,
+        region: m.region,
+        cluster: m.cluster,
+        // 소속 라벨은 서버가 준 그대로 — 없으면 풀·테넌트·워크로드 필터에서
+        // 이 노드 8장이 통째로 빠져 할당 집계가 어긋난다.
+        nodePool: m.nodePool ?? '',
+        pool: m.pool ?? '',
+        tenant: m.tenant ?? '',
+        workload: m.workload ?? '',
+        util: Number.NaN,
+        band: 0,
+      }));
+    if (synthetic.length === 0) return base;
+    return [...base, ...synthetic].sort(
+      (a, b) =>
+        a.csp.localeCompare(b.csp) ||
+        a.cluster.localeCompare(b.cluster) ||
+        a.instance.localeCompare(b.instance) ||
+        a.device.localeCompare(b.device),
+    );
+  }, [fleet.cells, demoFleet]);
+
+  const faultUuids = useMemo(() => new Set(demoFleet?.faultUuids ?? []), [demoFleet]);
+  const tempAlertUuids = useMemo(() => new Set(demoFleet?.tempAlertUuids ?? []), [demoFleet]);
+  const missingInstances = useMemo(() => new Set(demoFleet?.missingInstances ?? []), [demoFleet]);
+
+  // 상태(정상/성능저하/장애/격리/복구중)는 라벨이 아니라 시나리오 집합에서
+  // 나온다 — 서버 상황판(dashboard.gpus)과 같은 어휘를 쓴다.
+  const scenario = state?.scenario ?? null;
+  const statusOf = useCallback(
+    (cell: FleetCell): CellStatus => {
+      if (faultUuids.has(cell.uuid)) return 'fault';
+      if (scenario && cell.instance === scenario.victim.instance) {
+        if (scenario.phase === 'draining' || scenario.phase === 'replacing') return 'isolated';
+        if (
+          scenario.phase === 'burnin-1' ||
+          scenario.phase === 'burnin-failed' ||
+          scenario.phase === 'burnin-2' ||
+          scenario.phase === 'ready-to-return'
+        ) {
+          return 'recovering';
+        }
+      }
+      if (tempAlertUuids.has(cell.uuid)) return 'degraded';
+      return 'normal';
+    },
+    [faultUuids, tempAlertUuids, scenario],
+  );
+
+  const filtered = useMemo(
+    () => applyFleetFilter(mergedCells, filter, statusOf),
+    [mergedCells, filter, statusOf],
+  );
+
+  // 단일 파생 계층 — 필터 축으로 갈리는 사실은 전부 여기서 나온다. 각 섹션은
+  // state.* 대신 facts.* 를 받으므로 필터의 존재를 모른 채 필터에 반응한다.
+  // state 가 계속 담당하는 것: 시나리오 단계 · 수집 상태 · 자동복구 진행 ·
+  // 감사로그 · 룰셋(전부 필터 무관).
+  const facts = useMemo(
+    () =>
+      deriveFleetFacts(filtered, statusOf, {
+        scenario,
+        missingInstances,
+        cspSpecs: demoFleet?.csps ?? [],
+        pools: demoFleet?.pools ?? [],
+        tenants: demoFleet?.tenants ?? [],
+        regions: demoFleet?.regions ?? [],
+        alerts: state?.alerts ?? [],
+        events: state?.events ?? [],
+        serving: state?.serving ?? [],
+        idle: state?.idle ?? [],
+        severity: filter.severity,
+      }),
+    [filtered, statusOf, scenario, missingInstances, demoFleet, state, filter.severity],
+  );
+
+  // 상황판은 state 통째로 받는다 — 필터 반영분만 갈아끼워 주입하면 컴포넌트를
+  // 고치지 않고도 필터를 따른다(수집·자동복구는 원본 유지).
+  const boardState = useMemo(
+    () =>
+      state && {
+        ...state,
+        dashboard: {
+          ...state.dashboard,
+          gpus: facts.gpus,
+          nodes: facts.nodes,
+          alerts: facts.alerts,
+        },
+      },
+    [state, facts],
+  );
+
+  const regionLabels = useMemo(() => {
+    const out: Record<string, string> = {};
+    for (const r of demoFleet?.regions ?? []) out[r.id] = `${r.display} (${r.csp})`;
+    return out;
+  }, [demoFleet]);
+
+  async function onAct(action: Parameters<typeof act>[0]) {
+    if (acting) return;
+    setActing(true);
+    await act(action);
+    setActing(false);
+  }
+  const chunks = useMemo(() => groupClusterChunks(filtered), [filtered]);
+
+
+  // 데모 off 강등 — 벽면 셀 기반 클라이언트 계산.
+  const liveNodeCount = useMemo(
+    () => (fleet.cells ? new Set(fleet.cells.map((c) => c.instance)).size : null),
+    [fleet.cells],
+  );
+  const liveUtilAvg = useMemo(() => {
+    if (!fleet.cells || fleet.cells.length === 0) return null;
+    return fleet.cells.reduce((sum, c) => sum + c.util, 0) / fleet.cells.length;
+  }, [fleet.cells]);
+
+  // demoMode null = /demo/status 판별 중 — 화면 전체 Skeleton.
+  if (demoMode === null) {
+    return (
+      <div className="flex flex-col gap-4" aria-busy="true">
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-7">
+          {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+            <Skeleton key={i} className="h-20 w-full" />
+          ))}
+        </div>
+        <Skeleton className="h-28 w-full" />
+        <Skeleton className="h-72 w-full" />
+      </div>
+    );
+  }
+
+  const demo = demoMode === true;
+  const aggData = agg.data ?? null;
+
+  // KPI 파생 — 필터에 걸리는 값은 facts, 걸리지 않는 값(수집·자동복구)은 state.
+  const alertSeverityBadges = facts.alerts
+    .filter((s) => (s.key === 'critical' || s.key === 'major') && s.count > 0)
+    .map((s) => ({
+      text: `${s.label} ${s.count}`,
+      tone: (s.key === 'critical' ? 'danger' : 'warn') as 'danger' | 'warn',
+    }));
+  const collectLag =
+    state?.dashboard.collect.find((s) => s.tone === 'warn')?.count ?? null;
+  const repairRunning =
+    state?.dashboard.repair.find((s) => s.key === 'running')?.count ?? null;
+  // 미니 막대 — 최근 30분 장애·지연의 이산 분포. 전용 시계열이 없으므로
+  // 플릿 장애 롤업 추세를 그대로 쓴다(형태가 목적, 값은 목데이터).
+  const faultBars = live.data?.errPct.values?.slice(-24);
+  // 할당율·사용률은 필터에 걸리므로 셀에서 판다 — 사전 집계 instant 는 늘
+  // 플릿 전체라 필터를 걸 수 없다(할당율은 서버가 안 주던 값이라 신설).
+  const allocPct = demo
+    ? facts.gpuCount > 0
+      ? (facts.allocated / facts.gpuCount) * 100
+      : null
+    : (aggData?.allocPct ?? null);
+  const utilAvgPct = demo ? facts.utilAvg : liveUtilAvg;
+  const gapPp = allocPct !== null && utilAvgPct !== null ? allocPct - utilAvgPct : null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 0. 제목 부제 + 필터 바 + 범례 — 목업은 제목 아래 한 줄 설명, 그 줄 우측에
+             필터칩이 붙는다. 최상단에 둬야 "필터 → KPI → 모니터링" 순서가 같아진다. */}
+      <p className="-mt-2 text-muted-foreground text-sm">
+        GPU 인프라의 실시간 상태와 주요 이슈를 한눈에 확인하세요.
+      </p>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <FleetFilterBar
+          options={fleet.options}
+          filter={filter}
+          onChange={setFilter}
+          regionLabels={regionLabels}
+        />
+        <UtilLegend />
+      </div>
+
+      {/* 1. KPI 타일 행 — 데모는 목업 6카드(아이콘·배지·미니차트 슬롯 사용),
+             실서비스는 산출원이 없는 지표가 많아 기존 축소 구성을 유지한다. */}
+      {demo ? (
+        <div
+          className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6"
+          aria-label="플릿 핵심 지표"
+        >
+          <KpiTile
+            label="전체 GPU"
+            icon={<Cpu className="size-4" />}
+            value={demoFleet && formatCount(facts.allocated)}
+            sub={demoFleet ? `/ ${formatCount(facts.gpuCount)}` : undefined}
+            hint={
+              allocPct === null
+                ? undefined
+                : `가용률 ${formatPct(100 - (facts.faulted / Math.max(facts.gpuCount, 1)) * 100)}`
+            }
+            spark={live.data?.util.values}
+          />
+          <KpiTile
+            label="활성 장애"
+            icon={<AlertTriangle className="size-4" />}
+            tone="danger"
+            value={demoFleet && formatCount(facts.faulted)}
+            badges={alertSeverityBadges}
+            bars={faultBars}
+          />
+          <KpiTile
+            label="수집 지연"
+            icon={<Clock className="size-4" />}
+            tone="warn"
+            value={collectLag === null ? null : formatCount(collectLag)}
+            hint={
+              demoFleet && collectLag !== null
+                ? formatPct((collectLag / Math.max(demoFleet.nodeTotal, 1)) * 100, 1)
+                : undefined
+            }
+            bars={faultBars}
+          />
+          <KpiTile
+            label="저활용 GPU"
+            icon={<Boxes className="size-4" />}
+            value={demoFleet && formatCount(facts.underutilized)}
+            hint="< 30% 사용률"
+            bars={faultBars}
+          />
+          <KpiTile
+            label="자동복구 실행 중"
+            icon={<Wrench className="size-4" />}
+            tone="info"
+            value={repairRunning === null ? null : formatCount(repairRunning)}
+            hint={
+              demoFleet?.repairSuccessPct === undefined
+                ? undefined
+                : `성공률 ${formatPct(demoFleet.repairSuccessPct, 1)}`
+            }
+            progress={demoFleet?.repairSuccessPct}
+          />
+          <KpiTile
+            label="활성 워크로드"
+            icon={<Activity className="size-4" />}
+            value={demoFleet && formatCount(facts.activeWorkloads)}
+            hint="Pod 기준"
+            spark={live.data?.rps.values}
+          />
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-3" aria-label="플릿 핵심 지표">
+          <KpiTile
+            label="총 노드"
+            value={liveNodeCount === null ? null : formatCount(liveNodeCount)}
+          />
+          <KpiTile label="총 GPU" value={fleet.cells && formatCount(fleet.cells.length)} />
+          <KpiTile
+            label="GPU 사용률"
+            value={fleet.cells && formatPct(liveUtilAvg)}
+            hint="수집 셀 평균"
+          />
+        </div>
+      )}
+
+      {/* 2. 실시간 액티브 모니터링 + 우측 레일(이벤트 피드 · 수집 상태).
+             목업의 중앙/우측 2열 구성 그대로 — 모니터링을 보면서 이벤트가
+             흐르는 걸 같은 화면에서 본다. */}
+      {demo ? (
+        <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_20rem]">
+          <ActiveMonitoring
+            cells={fleet.cells === null ? null : filtered}
+            csps={facts.csps}
+            pools={facts.pools}
+            statusOf={statusOf}
+            onSelectNode={setSelected}
+            gpuStatus={facts.gpus}
+            alerts={facts.alertList}
+            events={facts.eventList}
+          />
+          <div className="flex flex-col gap-3">
+            {/* moreHref — 시나리오 2→3 이음새. 기본값 /gpu/health 는 구 대본 화면이라
+                "전체 이벤트 보기"가 장애 상세를 비껴간다. */}
+            <EventFeed
+              alerts={facts.alertList}
+              moreHref="/gpu/incident"
+              modelOf={(a) =>
+                mergedCells.find((c) => c.instance === a.instance && c.device === a.device)?.model
+              }
+            />
+            {state ? <CollectDonut collect={state.dashboard.collect} /> : null}
+          </div>
+        </div>
+      ) : null}
+
+      {/* 3. ①②③ 상황판 — 문제 / 영향 / 다음 조치. 목업엔 없는 데모 서사 카드다.
+             KPI 와 모니터링 사이에 있었는데, 목업은 그 둘이 붙어 있으므로
+             모니터링 뒤로 물렸다(사용자 지적 2026-07-30). */}
+      {demo && boardState ? (
+        <SituationBoard state={boardState} onAct={onAct} acting={acting} />
+      ) : null}
+
+      {/* 4. CSP 롤업 + 5. 플릿 히트맵 — 목업(demo1)엔 없지만 런북 §1 Step 1 이
+             "CSP 롤업 4장 + 7,000셀 플릿 히트맵 + 필터 + 노드 드릴다운"을 그 Step 의
+             핵심 장면으로 지정한다(F-05-06). 화면 8·9번째에 있어 시연 때 한참
+             스크롤해야 닿았다 — 목업 하단부(위젯·Top10) 앞으로 올린다. */}
+      {demo ? (
+        demoFleet ? (
+          <CspRollupCards
+            csps={facts.csps}
+            utilByCsp={facts.utilByCsp}
+            utilSeriesByCsp={aggData?.utilSeriesByCsp ?? null}
+          />
+        ) : (
+          <Skeleton className="h-28 w-full" />
+        )
+      ) : null}
+
+      {/* 5. 플릿 히트맵 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>플릿 히트맵 — GPU {formatCount(filtered.length)}장</CardTitle>
+          <CardDescription>
+            {fleet.updatedAt
+              ? `마지막 갱신 ${new Date(fleet.updatedAt).toLocaleTimeString('ko-KR')} · 30초마다 자동 갱신`
+              : '벽면 수집 중…'}
+            {demoFleet && demoFleet.agentMissing > 0
+              ? ` · 수집 중단 ${formatCount(demoFleet.agentMissing)}대는 점선 셀(데이터 없음)로 표시`
+              : ''}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {fleet.error ? (
+            <p role="alert" className="mb-3 text-destructive text-sm">
+              벽면 갱신 실패: {fleet.error}
+            </p>
+          ) : null}
+          {fleet.cells === null ? (
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-6 w-48" />
+              <Skeleton className="h-40 w-full" />
+            </div>
+          ) : (
+            <FleetHeatmap
+              chunks={chunks}
+              faultUuids={faultUuids}
+              tempAlertUuids={tempAlertUuids}
+              missingInstances={missingInstances}
+              onSelectNode={setSelected}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 6. 분석 위젯 행 — 모델별 현황 / 테넌트별 사용량 / 장애 유형 분포 /
+             수집 상태. 전부 이미 서버가 주는 집계라 새 API 없이 조립한다. */}
+      {/* 목업 하단은 네 위젯이 한 줄이고 폭이 2.6 : 1.25 : 1.05 : 1 이다(demo1 실측).
+          균등 4칸이면 사용률 차트가 좁아 제목이 두 줄로 깨지고, 5칸(2+1+1+1)이면
+          나머지 셋이 필요 이상으로 넓다 — 실측 비율을 그대로 준다. */}
+      {demo && state ? (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-[2.6fr_1.25fr_1.05fr_1fr]">
+          {/* 좌측 = GPU 사용률(실시간) 4탭 차트. 목업 하단의 주역. */}
+          <div className="md:col-span-2 xl:col-span-1">
+            <ModelUtilChart demoMode={demoMode} />
+          </div>
+          <GpuModelBar models={facts.models} />
+          <TenantDonut pools={facts.pools} tenants={facts.tenants} />
+          <FaultTypeBar alerts={facts.alertList} />
+        </div>
+      ) : null}
+
+      {/* 7. GPU 사용률 Top 10 — 벽면과 같은 per-GPU 셀에서 상위만 표로.
+             상태 배지는 시나리오를 아는 이 화면이 분류자를 주입한다.
+             목업(demo1) 순서는 1·2·6·7 이 담당한다(KPI → 모니터링 → 위젯 →
+             Top10). 3~5 는 런북·데모 보강이고 8 이후도 마찬가지다. */}
+      {demo ? (
+        <TopGpuTable
+          cells={fleet.cells === null ? null : filtered}
+          statusOf={statusOf}
+          alerts={facts.alertList}
+        />
+      ) : null}
+
+      {/* 8. 실시간 지표 띠 — 큰 숫자 + 30분 추세선 */}
+      {demo ? <LiveStrip series={live.data ?? null} /> : null}
+
+      {/* 9. 할당 vs 실사용 갭 스트립 (데모 전용) */}
+      {demo ? (
+        <Card className="gap-0 py-0">
+          <CardContent className="flex flex-wrap items-center gap-x-4 gap-y-2 p-4">
+            <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+              <span className="text-muted-foreground text-sm">할당</span>
+              <span className="font-semibold text-3xl tabular-nums">{formatPct(allocPct)}</span>
+              <span className="text-muted-foreground text-sm">vs 실사용</span>
+              <span className="font-semibold text-3xl text-metric-gpu tabular-nums">
+                {formatPct(utilAvgPct)}
+              </span>
+              {gapPp !== null ? (
+                <Badge variant="outline" className="text-metric-thermal">
+                  갭 {gapPp.toFixed(1)}pp
+                </Badge>
+              ) : null}
+            </div>
+            <Link
+              to="/gpu/efficiency"
+              className="ml-auto text-primary text-sm underline-offset-4 hover:underline"
+            >
+              효율 화면에서 상세 →
+            </Link>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {/* 근거 하단 — 저활용 회수 후보 + 최근 이벤트 스트림 */}
+      {demo && state ? (
+        <div className="grid gap-3 xl:grid-cols-2">
+          <Card className="gap-0 py-0">
+            <CardHeader className="p-4 pb-2">
+              <CardTitle className="text-sm">저활용 GPU — 회수 검토</CardTitle>
+              <CardDescription className="text-xs">
+                실시간 저활용 개체와 지속 일수. 상위 6건.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-4 pt-0">
+              {facts.idleList.length === 0 ? (
+                <p className="text-xs text-muted-foreground">저활용 대상 없음</p>
+              ) : (
+                <ul className="flex flex-col gap-1.5">
+                  {/* idle[] 에는 1~29일 최근 유휴가 섞여 온다(유휴장비 관리 화면의
+                      "전체 유휴" 축) — 무정렬 slice 는 "회수 검토" 제목 아래 12일짜리를
+                      올린다. 지속 일수 내림차순으로 자른다. */}
+                  {[...facts.idleList]
+                    .sort((a, b) => b.idleDays - a.idleDays)
+                    .slice(0, 6)
+                    .map((g) => (
+                      <li key={g.uuid} className="flex items-center gap-2 text-xs">
+                        <span className="truncate font-medium">{g.instance}</span>
+                        <span className="text-muted-foreground">{g.device}</span>
+                        <span className="truncate text-muted-foreground">{g.pool || '미할당'}</span>
+                        <span className="ml-auto shrink-0 font-semibold tabular-nums text-metric-thermal">
+                          {g.idleDays}일
+                        </span>
+                      </li>
+                    ))}
+                </ul>
+              )}
+              <Link
+                to="/gpu/efficiency"
+                className="mt-3 inline-block text-primary text-xs underline-offset-4 hover:underline"
+              >
+                효율 화면에서 전체 보기 →
+              </Link>
+            </CardContent>
+          </Card>
+          <EventStream events={facts.eventList} />
+        </div>
+      ) : null}
+
+      <NodeDrillSheet instance={selected} onClose={() => setSelected(null)} />
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuRemediation.tsx b/web/src/pages/gpu/GpuRemediation.tsx
new file mode 100644
index 0000000..41fee7f
--- /dev/null
+++ b/web/src/pages/gpu/GpuRemediation.tsx
@@ -0,0 +1,647 @@
+// GpuRemediation — Step 4 "승인 기반 격리" 자동복구 콘솔 (데모 전용 페이지).
+// 복구 모드(관찰/승인/제한 자동) 서버 연동 선택(set-mode) + 승인 대기 카드(사전 검증 → Dialog 확인
+// → approve-isolation 액션) + Cordon→Drain→Taint 스테퍼 + 감사 로그 +
+// Maintenance Lock(폐루프 안전장치). 진행 상태는 GpuLayout 폴링(진행 장면 2s)이
+// 자동 갱신하므로 승인 성공 후 별도 구독 없이 스테퍼가 살아 움직인다.
+import { Activity, Check, FileClock, HeartPulse, ShieldCheck, Wrench } from 'lucide-react';
+import { useState } from 'react';
+import { Link } from 'react-router';
+import KpiTile from '@/components/gpu/KpiTile';
+import RemediationStepper from '@/components/gpu/RemediationStepper';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { type DemoContextValue, useDemo } from '@/hooks/demoContext';
+import {
+  type AuditEntry,
+  type DemoState,
+  type MaintenanceLock,
+  PHASE_LABELS,
+  type RemediationMode,
+  type ScenarioPhase,
+  type ScenarioState,
+} from '@/lib/demoApi';
+
+// 시나리오 단계 순서(로컬 사본) — draining 이후 여부 판정에 쓴다.
+// 서버 phaseIndex 의 내부 의미에 의존하지 않는 자기완결 판정.
+const PHASE_ORDER: readonly ScenarioPhase[] = [
+  'normal',
+  'degrading',
+  'awaiting-approval',
+  'draining',
+  'replacing',
+  'burnin-1',
+  'burnin-failed',
+  'burnin-2',
+  'ready-to-return',
+  'returned',
+];
+
+function phaseAtLeast(phase: ScenarioPhase, target: ScenarioPhase): boolean {
+  return PHASE_ORDER.indexOf(phase) >= PHASE_ORDER.indexOf(target);
+}
+
+function scoreColor(score: number): string {
+  if (score >= 90) return 'var(--metric-pod)';
+  if (score >= 70) return 'var(--metric-thermal)';
+  return 'var(--metric-fault)';
+}
+
+// ---- 복구 모드 셀렉터 (서버 연동 — scenario.mode 가 선택 상태의 진실) ----
+// 항목은 서버 modeOptions 로 렌더하고, 선택 시 set-mode 액션을 보낸다. 낙관적
+// 갱신은 하지 않는다 — 실패하면 다음 폴링의 서버 값으로 선택이 되돌아온다.
+
+function ModeSelectorCard({
+  scenario,
+  act,
+}: {
+  scenario: ScenarioState;
+  act: DemoContextValue['act'];
+}) {
+  const [pending, setPending] = useState<RemediationMode | null>(null);
+  const [modeError, setModeError] = useState<string | null>(null);
+  const mode = scenario.mode;
+  const options = scenario.modeOptions;
+  // 관찰 모드 + 승인 대기 = 자동 전이 정지(서버 autoAdvance 가 근거).
+  const stalled =
+    mode === 'observe' && scenario.phase === 'awaiting-approval' && scenario.autoAdvance === false;
+
+  async function onSelect(next: string) {
+    if (pending !== null || next === mode) return;
+    const target = next as RemediationMode;
+    setPending(target);
+    setModeError(null);
+    const outcome = await act('set-mode', { mode: target });
+    setPending(null);
+    if (outcome.ok) return;
+    setModeError(
+      outcome.status === 409
+        ? `모드 전환 거부 — ${outcome.error}`
+        : `모드 전환 실패 (HTTP ${outcome.status}) — ${outcome.error}`,
+    );
+  }
+
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          복구 모드
+          {pending ? (
+            <span className="font-normal text-muted-foreground text-xs">전환 중…</span>
+          ) : null}
+        </CardTitle>
+        <CardDescription>
+          자동복구의 개입 수준을 선택한다 — 시나리오 자동 전이가 실제로 바뀐다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {stalled ? (
+          <Alert>
+            <AlertTitle>관찰 모드 — 자동 조치 없음</AlertTitle>
+            <AlertDescription>승인해야 진행된다.</AlertDescription>
+          </Alert>
+        ) : null}
+        {modeError ? (
+          <Alert variant="destructive">
+            <AlertTitle>모드 전환 실패</AlertTitle>
+            <AlertDescription>{modeError}</AlertDescription>
+          </Alert>
+        ) : null}
+        {options.length === 0 ? (
+          <p className="text-muted-foreground text-sm">모드 목록을 불러오는 중이다.</p>
+        ) : (
+          <RadioGroup
+            value={mode}
+            onValueChange={onSelect}
+            disabled={pending !== null}
+            className="flex flex-col gap-3"
+          >
+            {options.map((opt) => (
+              <div key={opt.id} className="flex items-start gap-3">
+                <RadioGroupItem value={opt.id} id={`mode-${opt.id}`} className="mt-0.5" />
+                <div className="flex flex-col gap-0.5">
+                  <Label htmlFor={`mode-${opt.id}`} className="flex items-center gap-1.5">
+                    {opt.label}
+                    {opt.id === 'approve' ? (
+                      <Badge variant="secondary" className="text-[10px]">
+                        권장
+                      </Badge>
+                    ) : null}
+                  </Label>
+                  <span className="text-muted-foreground text-xs">{opt.describe}</span>
+                </div>
+              </div>
+            ))}
+          </RadioGroup>
+        )}
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2">
+        <Separator />
+        <p className="text-muted-foreground text-xs">
+          초기 상용은 승인 기반 반자동 권장 — 오탐 비용이 큰 환경에서 사람의 최종 게이트를
+          유지한다.
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}
+
+// ---- 승인 대기 카드 (사전 검증 + Dialog 확인 + approve-isolation) ----
+
+function PassCell({ text }: { text: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 text-sm">
+      {text}
+      <Check aria-label="통과" className="size-3.5" style={{ color: 'var(--metric-pod)' }} />
+    </span>
+  );
+}
+
+function ApprovalCard({
+  scenario,
+  act,
+}: {
+  scenario: ScenarioState;
+  act: DemoContextValue['act'];
+}) {
+  const { victim, phase } = scenario;
+  // 승인 가능 여부는 *서버가* 판정한다 — pendingAction 은 서버 Apply 가드와 같은
+  // 단계 집합에서 나오는 값이다(state.go pendingActionFor ↔ scenario.go 의
+  // approve-isolation 가드, 둘 다 degrading/awaiting-approval). 여기에 단계
+  // 목록을 다시 쓰면 서버가 규칙을 바꾼 날 화면만 거짓말한다.
+  //
+  // 이 값으로 버튼을 *미리* 막는다: 막지 않으면 시연 시작 단계(normal)에서
+  // 클라이맥스 버튼이 빨간 409 거부만 돌려준다. 눌러서 거부당하는 버튼보다
+  // "왜 아직 못 누르는지 + 어떻게 열리는지" 가 시연에 쓸모 있다.
+  const canApprove = scenario.pendingAction === 'approve-isolation';
+  const hot = canApprove;
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [jumping, setJumping] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const score = Math.round(victim.health.score);
+
+  // 시연 제어 — 서버 jump-phase 로 승인 게이트가 열린 단계까지 당긴다. 이게
+  // 없으면 부팅 직후 normal(기본 4분)이 끝날 때까지 이 화면의 유일한 조치를
+  // 누를 수 없다 — 시연에서 클라이맥스를 4분 기다릴 수는 없다.
+  async function jumpToApproval() {
+    setJumping(true);
+    const outcome = await act('jump-phase', { phase: 'awaiting-approval' });
+    setJumping(false);
+    setActionError(outcome.ok ? null : `단계 이동 실패 (HTTP ${outcome.status}) — ${outcome.error}`);
+  }
+
+  async function approve() {
+    setBusy(true);
+    const outcome = await act('approve-isolation');
+    setBusy(false);
+    setConfirmOpen(false);
+    if (outcome.ok) {
+      setActionError(null);
+      return;
+    }
+    setActionError(
+      outcome.status === 409
+        ? `현 단계에서는 승인 불가 — ${outcome.error}`
+        : `승인 실패 (HTTP ${outcome.status}) — ${outcome.error}`,
+    );
+  }
+
+  return (
+    <Card
+      className="h-full"
+      style={hot ? { borderTop: '4px solid var(--metric-fault)' } : undefined}
+    >
+      <CardHeader>
+        <CardTitle>격리 승인 대기</CardTitle>
+        <CardDescription>
+          {canApprove
+            ? '무음 열화가 확인된 GPU 다 — 사전 검증을 확인하고 격리를 승인한다.'
+            : `현재 단계(${PHASE_LABELS[phaseOf(phase)]})에는 승인할 조치가 없다 — 열화가 확인되면 승인 게이트가 열린다.`}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Badge variant="outline" className="font-mono">
+            {victim.instance}
+          </Badge>
+          <Badge variant="outline" className="font-mono">
+            {victim.device}
+          </Badge>
+          <Badge variant="secondary">{victim.model}</Badge>
+          <Badge variant="secondary">{victim.pool}</Badge>
+        </div>
+        <div className="flex items-baseline gap-2">
+          <span
+            className="font-bold text-4xl tabular-nums leading-none"
+            style={{ color: scoreColor(score) }}
+          >
+            {score}
+          </span>
+          <span className="text-muted-foreground text-sm">Health Score</span>
+        </div>
+        {victim.health.deductions.length > 0 ? (
+          <ul className="flex flex-col gap-1.5">
+            {victim.health.deductions.map((d) => (
+              <li key={d.code} className="flex items-start gap-2 text-sm">
+                <Badge variant="outline" className="shrink-0 font-mono text-[10px]">
+                  {d.code}
+                </Badge>
+                <span className="flex-1 leading-snug">{d.message}</span>
+                <span
+                  className="shrink-0 font-medium tabular-nums"
+                  style={{ color: 'var(--metric-fault)' }}
+                >
+                  -{d.penalty}
+                </span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        <div className="flex flex-col gap-1.5">
+          <span className="font-medium text-muted-foreground text-xs">사전 검증</span>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell className="w-32 text-muted-foreground text-xs">대체 GPU 용량</TableCell>
+                <TableCell>
+                  <PassCell text={`동일 풀(${victim.pool}) 예비 12장 확보`} />
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="w-32 text-muted-foreground text-xs">PDB 영향</TableCell>
+                <TableCell>
+                  <PassCell text="최소 가용 파드 위반 없음" />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+        {actionError ? (
+          <Alert variant="destructive">
+            <AlertTitle>승인 거부</AlertTitle>
+            <AlertDescription>{actionError}</AlertDescription>
+          </Alert>
+        ) : null}
+        <Button
+          size="lg"
+          className="w-full"
+          disabled={busy || !canApprove}
+          onClick={() => setConfirmOpen(true)}
+        >
+          격리 승인 (Approve)
+        </Button>
+        {canApprove ? null : (
+          <Button variant="outline" disabled={jumping} onClick={jumpToApproval}>
+            {jumping ? '이동 중…' : '승인 대기 단계로 이동 (시연 제어)'}
+          </Button>
+        )}
+        <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>격리를 승인할까</DialogTitle>
+              <DialogDescription>
+                Cordon → Graceful Drain → Taint 를 실행합니다. in-flight 추론 요청은 보호됩니다.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" disabled={busy} onClick={() => setConfirmOpen(false)}>
+                취소
+              </Button>
+              <Button disabled={busy} onClick={approve}>
+                {busy ? '실행 중…' : '승인 실행'}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- draining 이후: 승인 카드 대체 안내 ----
+
+function IsolationDoneCard() {
+  return (
+    <Card className="h-full" style={{ borderTop: '4px solid var(--metric-pod)' }}>
+      <CardHeader>
+        <CardTitle>격리 완료 — 검증·번인 단계로</CardTitle>
+        <CardDescription>
+          Cordon → Graceful Drain → Taint 파이프라인이 실행되었다. 교체 GPU 는 번인 검증을 통과한
+          뒤에만 운영 풀로 복귀한다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <span className="font-medium text-muted-foreground text-xs">이후 절차</span>
+          {[
+            ['교체 GPU 투입', '동일 풀 예비 자원으로 용량 회복'],
+            ['번인 검증 1차', '드라이버·CUDA·NCCL 사전검증 후 부하 시험'],
+            ['가용성 판정', '기준 미달이면 재시험 — 통과분만 승급'],
+            ['운영 복귀', '판정 통과 후에만 서빙 풀로 재투입'],
+          ].map(([title, desc], index) => (
+            <div key={title} className="flex items-start gap-2.5">
+              <span className="flex size-5 shrink-0 items-center justify-center rounded-full border bg-muted font-semibold text-[11px] text-muted-foreground">
+                {index + 1}
+              </span>
+              <span className="flex flex-col leading-snug">
+                <span className="font-medium text-sm">{title}</span>
+                <span className="text-[11px] text-muted-foreground">{desc}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+        <Button asChild className="w-fit">
+          <Link to="/gpu/validation">검증 콘솔로 이동</Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- Maintenance Lock — CSP 관제 신호 상관의 최소 표면 ----
+// 대상 노드는 서버가 실제 플릿에서 고른 개체다(하드코딩 예시 노드명은 화면
+// 간 정합을 깨뜨린다 — 다른 목록에 없는 노드가 여기서만 등장하면 안 된다).
+
+function MaintenanceLockCard({ locks }: { locks: MaintenanceLock[] }) {
+  return (
+    <Card className="h-full" style={{ borderTop: '4px solid var(--metric-cpu)' }}>
+      <CardHeader>
+        <CardTitle>Maintenance Lock</CardTitle>
+        <CardDescription>CSP 관제 신호 상관 — 폐루프 안전장치</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <p className="text-sm leading-relaxed">
+          CSP 정비 예정 신호 수신 노드는 자동복구를 트리거하지 않는다 — 폐루프 안전장치. 정비
+          창에서의 자체 격리는 CSP 교체 절차와 충돌해 이중 드레인을 일으킨다.
+        </p>
+        {locks.length === 0 ? (
+          <p className="text-muted-foreground text-xs">현재 정비 예정 신호를 받은 노드가 없다.</p>
+        ) : (
+          locks.map((lock) => (
+            <div
+              key={lock.instance}
+              className="flex flex-col gap-1 rounded-md border bg-muted/40 px-3 py-2"
+            >
+              <div className="flex items-center justify-between gap-2">
+                <span className="font-mono text-xs">{lock.instance}</span>
+                <Badge
+                  variant="outline"
+                  style={{ borderColor: 'var(--metric-cpu)', color: 'var(--metric-cpu)' }}
+                >
+                  Maintenance Lock
+                </Badge>
+              </div>
+              <span className="text-muted-foreground text-[11px]">
+                {lock.csp} · {lock.window} · {lock.reason}
+              </span>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- 감사 로그 ----
+
+function AuditCard({ audit }: { audit: AuditEntry[] }) {
+  const rows = [...audit].sort((a, b) => b.at - a.at).slice(0, 20);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>감사 로그</CardTitle>
+        <CardDescription>최근 {rows.length}건 — 모든 조치는 수행자와 함께 기록된다.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-28">시각</TableHead>
+              <TableHead className="w-28">수행자</TableHead>
+              <TableHead>액션</TableHead>
+              <TableHead>대상</TableHead>
+              <TableHead>결과</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center text-muted-foreground">
+                  감사 기록이 없다.
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((entry, index) => (
+                <TableRow key={`${entry.at}-${entry.action}-${index}`}>
+                  <TableCell className="text-xs tabular-nums">
+                    {new Date(entry.at).toLocaleTimeString('ko-KR')}
+                  </TableCell>
+                  <TableCell>
+                    {entry.actor === 'auto' ? (
+                      <Badge variant="secondary">자동</Badge>
+                    ) : (
+                      <span className="text-xs">{entry.actor}</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="font-mono text-xs">{entry.action}</TableCell>
+                  <TableCell className="font-mono text-xs">{entry.target ?? '—'}</TableCell>
+                  <TableCell className="text-xs">{entry.result}</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---- KPI 타일 행 (목업 demo1/demo4 의 상단 6타일 어휘) ----
+
+function RemediationKpis({ state }: { state: DemoState }) {
+  const { scenario, audit } = state;
+  const { drain, health } = scenario.victim;
+  const score = Math.round(health.score);
+  const modeLabel =
+    scenario.modeOptions.find((o) => o.id === scenario.mode)?.label ?? scenario.mode;
+  return (
+    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6" aria-label="자동복구 핵심 지표">
+      <KpiTile
+        label="복구 모드"
+        icon={<ShieldCheck className="size-4" />}
+        tone="info"
+        value={modeLabel}
+        hint={scenario.autoAdvance ? '자동 전이 진행' : '승인 대기 — 자동 전이 정지'}
+      />
+      <KpiTile
+        label="승인 대기"
+        icon={<Activity className="size-4" />}
+        tone={scenario.pendingAction ? 'warn' : 'default'}
+        value={scenario.pendingAction ? '1건' : '0건'}
+        hint={`현재 단계 — ${PHASE_LABELS[phaseOf(scenario.phase)]}`}
+        progress={((scenario.phaseIndex + 1) / PHASE_ORDER.length) * 100}
+      />
+      <KpiTile
+        label="Health Score"
+        icon={<HeartPulse className="size-4" />}
+        tone={score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger'}
+        value={String(score)}
+        sub="/ 100"
+        hint={`감점 ${health.deductions.length}건`}
+        progress={score}
+      />
+      <KpiTile
+        label="격리 진행"
+        icon={<Wrench className="size-4" />}
+        tone="info"
+        value={`${Math.round(drain.progress)}%`}
+        hint={`파드 퇴거 ${drain.podsEvicted}/${drain.podsTotal}`}
+        progress={drain.progress}
+      />
+      <KpiTile
+        label="in-flight 보호"
+        icon={<Check className="size-4" />}
+        tone={drain.droppedRequests === 0 ? 'ok' : 'danger'}
+        value={drain.droppedRequests === 0 ? '0건' : `${drain.droppedRequests}건`}
+        hint="드롭된 추론 요청"
+      />
+      <KpiTile
+        label="감사 기록"
+        icon={<FileClock className="size-4" />}
+        value={`${audit.length}건`}
+        hint={`Maintenance Lock ${scenario.maintenanceLocks.length}건`}
+      />
+    </div>
+  );
+}
+
+// PHASE_LABELS 키 방어 — 서버가 새 단계를 보내도 화면이 깨지지 않게 한다.
+function phaseOf(phase: ScenarioPhase): ScenarioPhase {
+  return PHASE_LABELS[phase] ? phase : 'normal';
+}
+
+// ---- 페이지 ----
+
+function RemediationView({ state, act }: { state: DemoState; act: DemoContextValue['act'] }) {
+  const { scenario, audit } = state;
+  const phase = scenario.phase;
+  const isolationDone = phaseAtLeast(phase, 'draining');
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h1 className="font-semibold text-lg">자동복구 콘솔 — 승인 기반 격리</h1>
+        <Badge variant={phase === 'normal' ? 'secondary' : 'default'}>{PHASE_LABELS[phase]}</Badge>
+      </div>
+      <RemediationKpis state={state} />
+      <div className="grid gap-4 lg:grid-cols-2">
+        {isolationDone ? (
+          <IsolationDoneCard />
+        ) : (
+          <ApprovalCard scenario={scenario} act={act} />
+        )}
+        <Card className="h-full">
+          <CardHeader>
+            <CardTitle>격리 파이프라인</CardTitle>
+            <CardDescription>Cordon → Graceful Drain → Taint — in-flight 요청 보호</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <RemediationStepper drain={scenario.victim.drain} />
+            <Separator />
+            <div className="flex flex-col gap-2">
+              <span className="font-medium text-muted-foreground text-xs">파이프라인 보장</span>
+              {[
+                'PDB(최소 가용 파드) 를 위반하지 않는다',
+                'in-flight 추론 요청은 완료까지 대기한다 — 드롭 0건',
+                '되돌리기는 uncordon 1회 — 격리는 가역 조치다',
+              ].map((line) => (
+                <span key={line} className="flex items-start gap-2 text-sm">
+                  <Check
+                    aria-hidden
+                    className="mt-0.5 size-3.5 shrink-0"
+                    style={{ color: 'var(--metric-pod)' }}
+                  />
+                  <span className="leading-snug">{line}</span>
+                </span>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+        <ModeSelectorCard scenario={scenario} act={act} />
+        <MaintenanceLockCard locks={scenario.maintenanceLocks} />
+        <div className="lg:col-span-2">
+          <AuditCard audit={audit} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RemediationSkeleton() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Skeleton className="h-8 w-72" />
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <Skeleton key={i} className="h-24" />
+        ))}
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Skeleton className="h-72" />
+        <Skeleton className="h-72" />
+      </div>
+    </div>
+  );
+}
+
+export default function GpuRemediation() {
+  const { demoMode, state, act } = useDemo();
+  if (demoMode === null) return <RemediationSkeleton />;
+  if (demoMode === false) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <Card className="max-w-md">
+          <CardHeader>
+            <CardTitle>자동복구 콘솔</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              자동복구 콘솔은 데모 인스턴스 전용입니다. 실서비스 격리 파이프라인이 연결되면 이
+              화면에서 승인 기반 복구를 운영한다.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+  if (!state) return <RemediationSkeleton />;
+  return <RemediationView state={state} act={act} />;
+}
diff --git a/web/src/pages/gpu/GpuRoadmap.tsx b/web/src/pages/gpu/GpuRoadmap.tsx
new file mode 100644
index 0000000..713d958
--- /dev/null
+++ b/web/src/pages/gpu/GpuRoadmap.tsx
@@ -0,0 +1,480 @@
+// GpuRoadmap — Step 3 "AI 분석 + 지능형 스케줄링". Phase 2·3 은 여전히 로드맵
+// 범위지만, 화면은 정적 티저가 아니라 *눌러서 확인할 수 있는* 조회 화면이다.
+// 답변·후보는 전부 useDemo() 스냅샷 + useFleet() 셀에서 클라이언트 계산한다 —
+// 신규 API 호출·폴링 0(기존 훅이 이미 받아온 데이터만 재사용).
+import { AlertTriangle, Boxes, Cpu, Layers, Thermometer } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import KpiTile from '@/components/gpu/KpiTile';
+import ScoringFunnel from '@/components/gpu/ScoringFunnel';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useDemo } from '@/hooks/demoContext';
+import { useFleet, type FleetCell } from '@/hooks/useFleet';
+import { PHASE_LABELS, type DemoAction, type DemoState } from '@/lib/demoApi';
+import { formatCount, formatPct } from '@/lib/gpuMetrics';
+import { cn } from '@/lib/utils';
+
+const MAX_LIST_ROWS = 5;
+const RECENT_ALERTS = 10;
+const TOP_N = 3;
+
+// 액션 표기명 — Partial 로 두고 미등록 액션은 원문 키를 그대로 보여준다
+// (demoApi 의 DemoAction 이 늘어도 이 화면이 깨지지 않게 한다).
+const ACTION_LABELS: Partial<Record<DemoAction, string>> = {
+  'approve-isolation': '격리 승인',
+  'start-burnin': '번인 검증 시작',
+  'return-to-service': '운영 복귀',
+  reset: '시나리오 초기화',
+  'register-idle-reason': '미사용 사유 등록',
+  'report-false-positive': '오탐 피드백',
+  'set-mode': '진행 모드 변경',
+  'configure-burnin': '번인 설정 변경',
+  'jump-phase': '단계 이동',
+  'ack-alert': '알림 확인',
+};
+
+interface ChatRow {
+  label: string;
+  value: string;
+}
+
+interface ChatMessage {
+  id: number;
+  role: 'operator' | 'ai';
+  text: string;
+  rows?: ChatRow[];
+  /** 답변 생성 시각(epoch ms) — 말풍선 하단 캡션의 근거. */
+  at: number;
+}
+
+interface AnswerCtx {
+  state: DemoState;
+  cells: FleetCell[] | null;
+  byUuid: Map<string, FleetCell>;
+}
+
+interface Answer {
+  text: string;
+  rows?: ChatRow[];
+}
+
+interface Question {
+  id: string;
+  /** 칩 문구 = 운영자 말풍선 본문. */
+  label: string;
+  answer: (ctx: AnswerCtx) => Answer;
+}
+
+/** uuid → 사람이 읽는 한 줄. 벽면 인벤토리에 없는 uuid(Agent Missing 노드 소속)는
+ *  그대로 uuid 를 노출해 "모른다"를 숨기지 않는다. */
+function describeCell(uuid: string, byUuid: Map<string, FleetCell>): ChatRow {
+  const cell = byUuid.get(uuid);
+  if (!cell) return { label: uuid, value: '인벤토리 조회 불가 (Agent Missing 추정)' };
+  return {
+    label: `${cell.instance} / ${cell.device}`,
+    value: `${cell.model || '모델 미상'} · 풀 ${cell.pool || '미배정'} · ${formatPct(cell.util)}`,
+  };
+}
+
+interface GroupAvg {
+  key: string;
+  avg: number;
+  count: number;
+}
+
+/** 지정한 라벨로 묶어 평균 사용률을 낸다(빈 라벨은 제외). */
+function averageUtilBy(cells: FleetCell[], pick: (c: FleetCell) => string): GroupAvg[] {
+  const agg = new Map<string, { sum: number; count: number }>();
+  for (const c of cells) {
+    const key = pick(c);
+    if (!key) continue;
+    const cur = agg.get(key) ?? { sum: 0, count: 0 };
+    cur.sum += c.util;
+    cur.count += 1;
+    agg.set(key, cur);
+  }
+  return [...agg.entries()].map(([key, v]) => ({ key, avg: v.sum / v.count, count: v.count }));
+}
+
+const NO_FLEET: Answer = { text: '플릿 인벤토리를 아직 불러오지 못했다 — 잠시 후 다시 묻는다.' };
+
+// 질문 6종 — 답변은 전부 라이브 수치 인용(하드코딩 문장 없음).
+const QUESTIONS: readonly Question[] = [
+  {
+    id: 'temp',
+    // fleet.tempAlerts 는 *온도 경보가 발행된* GPU 수다(히트맵 주황 점과 같은 집합,
+    // state.go FleetSummary 계약). 플릿에서 80°C 를 넘은 GPU 수가 아니다 — 그 수는
+    // 매 틱 전수 주사값이고 룰셋 화면 THERMAL 조건 매칭으로 따로 나간다(7,000장 기준
+    // 700~800장). 이 답변에 ">80°C 초과" 술어를 쓰면 두 화면이 같은 말로 두 자릿수
+    // 다른 수를 주장하게 되므로, 질문·답변 모두 "경보" 어휘로 고정한다.
+    label: '지금 온도 경보가 뜬 GPU 는?',
+    answer: ({ state, byUuid }) => {
+      const { tempAlerts, tempAlertUuids } = state.fleet;
+      if (tempAlerts === 0) return { text: '현재 온도 경보가 발행된 GPU 는 없다.' };
+      const shown = tempAlertUuids.slice(0, MAX_LIST_ROWS);
+      const rest = tempAlerts - shown.length;
+      const tail = rest > 0 ? ` 아래 ${shown.length}장 외 ${formatCount(rest)}장이 더 있다.` : '';
+      return {
+        text: `온도 경보가 발행된 GPU 는 ${formatCount(tempAlerts)}장이다.${tail}`,
+        rows: shown.map((uuid) => describeCell(uuid, byUuid)),
+      };
+    },
+  },
+  {
+    id: 'fault',
+    label: '장애 GPU 와 영향 범위는?',
+    answer: ({ state, byUuid }) => {
+      const { faulted, faultUuids } = state.fleet;
+      if (faulted === 0) return { text: '현재 장애로 분류된 GPU 는 없다.' };
+      const shown = faultUuids.slice(0, MAX_LIST_ROWS);
+      const pools = [
+        ...new Set(faultUuids.map((u) => byUuid.get(u)?.pool).filter((p): p is string => !!p)),
+      ];
+      const rest = faulted - shown.length;
+      const tail = rest > 0 ? ` 아래 ${shown.length}장 외 ${formatCount(rest)}장이 더 있다.` : '';
+      const poolText = pools.length > 0 ? pools.join(', ') : '풀 미배정(대기 인벤토리)';
+      return {
+        text: `장애 GPU 는 ${formatCount(faulted)}장이다. 관련 서빙 풀: ${poolText}.${tail}`,
+        rows: shown.map((uuid) => describeCell(uuid, byUuid)),
+      };
+    },
+  },
+  {
+    id: 'low-pool',
+    label: '사용률이 가장 낮은 서빙 풀은?',
+    answer: ({ cells }) => {
+      if (!cells) return NO_FLEET;
+      const pools = averageUtilBy(cells, (c) => c.pool);
+      if (pools.length === 0) return { text: '풀에 배정된 GPU 가 없다.' };
+      const bottom = [...pools].sort((a, b) => a.avg - b.avg).slice(0, TOP_N);
+      return {
+        text: `서빙 풀 ${formatCount(pools.length)}개 중 평균 사용률 하위 ${bottom.length}개다.`,
+        rows: bottom.map((p) => ({
+          label: p.key,
+          value: `평균 ${formatPct(p.avg)} · ${formatCount(p.count)}장`,
+        })),
+      };
+    },
+  },
+  {
+    id: 'scenario',
+    label: '현재 진행 중인 조치는?',
+    answer: ({ state }) => {
+      const { scenario } = state;
+      const victim = scenario.victim;
+      const rows: ChatRow[] = [
+        { label: '대상 GPU', value: `${victim.instance} / ${victim.device} (${victim.model})` },
+        { label: 'Health', value: `${Math.round(victim.health.score)}점 / 100` },
+      ];
+      const top = victim.health.deductions[0];
+      if (top) rows.push({ label: `근거 ${top.code}`, value: `${top.message} (−${top.penalty})` });
+      if (victim.drain.active) {
+        rows.push({
+          label: 'Drain 진행',
+          value: `${Math.round(victim.drain.progress)}% · 파드 ${victim.drain.podsEvicted}/${victim.drain.podsTotal}`,
+        });
+      }
+      if (victim.burnin.active) {
+        rows.push({
+          label: '번인 진행',
+          value: `${victim.burnin.attempt}차 · ${Math.round(victim.burnin.progress)}%`,
+        });
+      }
+      if (scenario.pendingAction) {
+        rows.push({
+          label: '대기 중 승인',
+          value: ACTION_LABELS[scenario.pendingAction] ?? scenario.pendingAction,
+        });
+      }
+      return { text: `현재 시나리오 단계는 '${PHASE_LABELS[scenario.phase]}' 다.`, rows };
+    },
+  },
+  {
+    id: 'busy-cluster',
+    label: '가장 바쁜 클러스터는?',
+    answer: ({ cells }) => {
+      if (!cells) return NO_FLEET;
+      const clusters = averageUtilBy(cells, (c) => c.cluster);
+      if (clusters.length === 0) return { text: '클러스터 라벨이 붙은 GPU 가 없다.' };
+      const top = [...clusters].sort((a, b) => b.avg - a.avg).slice(0, TOP_N);
+      return {
+        text: `클러스터 ${formatCount(clusters.length)}개 중 평균 사용률 상위 ${top.length}개다.`,
+        rows: top.map((c) => ({
+          label: c.key,
+          value: `평균 ${formatPct(c.avg)} · ${formatCount(c.count)}장`,
+        })),
+      };
+    },
+  },
+  {
+    id: 'alerts',
+    label: '최근 알림 요약해줘',
+    answer: ({ state }) => {
+      const recent = [...state.alerts].sort((a, b) => b.at - a.at).slice(0, RECENT_ALERTS);
+      if (recent.length === 0) return { text: '수신된 알림이 없다.' };
+      const counts = { critical: 0, major: 0, warning: 0, info: 0 };
+      for (const alert of recent) counts[alert.severity] += 1;
+      return {
+        text: `최근 알림 ${recent.length}건 — Critical ${counts.critical} · Major ${counts.major} · Warning ${counts.warning} · 정보 ${counts.info}. 대표 2건은 아래와 같다.`,
+        rows: recent.slice(0, 2).map((alert) => ({
+          label: `${new Date(alert.at).toLocaleTimeString('ko-KR')} · ${alert.code}`,
+          value: `${alert.title}${alert.instance ? ` — ${alert.instance}${alert.device ? ` / ${alert.device}` : ''}` : ''}`,
+        })),
+      };
+    },
+  },
+] as const;
+
+function ChatBubble({ message }: { message: ChatMessage }) {
+  const isOperator = message.role === 'operator';
+  return (
+    <div className={cn('flex', isOperator ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'flex max-w-[92%] flex-col gap-1.5 rounded-lg px-3 py-2 text-sm leading-relaxed',
+          isOperator ? 'bg-primary text-primary-foreground' : 'bg-muted text-foreground',
+        )}
+      >
+        <span>{message.text}</span>
+        {message.rows && message.rows.length > 0 ? (
+          <div className="flex flex-col gap-0.5 rounded-md bg-background/60 p-2">
+            {message.rows.map((row, index) => (
+              // 라벨/값 2열 고정 — flex-wrap 은 길이에 따라 어떤 줄만 붙고 어떤
+              // 줄만 접혀 표가 들쭉날쭉해진다(목업의 키-값 표는 열이 맞는다).
+              <div
+                key={`${row.label}-${index}`}
+                className="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-3 border-border/60 border-b py-1 text-xs last:border-0"
+              >
+                <span className="whitespace-nowrap font-mono">{row.label}</span>
+                <span className="truncate text-right text-muted-foreground tabular-nums">
+                  {row.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : null}
+        {isOperator ? null : (
+          <span className="text-[10px] text-muted-foreground">
+            라이브 데이터 기준 · {new Date(message.at).toLocaleTimeString('ko-KR')}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function GpuRoadmap() {
+  const { demoMode, state } = useDemo();
+  const { cells } = useFleet();
+
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const seq = useRef(0);
+
+  const byUuid = useMemo(() => {
+    const map = new Map<string, FleetCell>();
+    for (const c of cells ?? []) map.set(c.uuid, c);
+    return map;
+  }, [cells]);
+
+  // 모델 목록 — 데모 집계가 있으면 그것을, 없으면 벽면 셀에서 파생한다.
+  const modelOptions = useMemo(() => {
+    const fromDemo = (state?.fleet.models ?? []).map((m) => m.model).filter(Boolean);
+    if (fromDemo.length > 0) return fromDemo;
+    return [...new Set((cells ?? []).map((c) => c.model).filter(Boolean))].sort();
+  }, [state?.fleet.models, cells]);
+
+  // 장애 + 온도이상 uuid = 배치 후보에서 노드째 제외할 근거.
+  const excludedUuids = useMemo(() => {
+    const set = new Set<string>();
+    for (const uuid of state?.fleet.faultUuids ?? []) set.add(uuid);
+    for (const uuid of state?.fleet.tempAlertUuids ?? []) set.add(uuid);
+    return set;
+  }, [state?.fleet.faultUuids, state?.fleet.tempAlertUuids]);
+
+  const chatReady = state !== null;
+
+  function onAsk(question: Question) {
+    if (!state) return;
+    const answer = question.answer({ state, cells, byUuid });
+    seq.current += 1;
+    const operatorId = seq.current;
+    seq.current += 1;
+    const aiId = seq.current;
+    const at = Date.now();
+    setMessages((prev) => [
+      ...prev,
+      { id: operatorId, role: 'operator', text: question.label, at },
+      { id: aiId, role: 'ai', text: answer.text, rows: answer.rows, at },
+    ]);
+  }
+
+  // 첫 스냅샷 도착 시 대표 질문 1건을 자동 실행 — 시연자가 들어오자마자 빈
+  // 상자가 아니라 "이미 답한 화면"을 본다(칩은 그대로 눌러 이어갈 수 있다).
+  const autoAsked = useRef(false);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: 첫 스냅샷 1회만 — onAsk 재생성에 반응하면 중복 질의가 된다
+  useEffect(() => {
+    if (autoAsked.current || !state) return;
+    const first = QUESTIONS[0];
+    if (!first) return;
+    autoAsked.current = true;
+    onAsk(first);
+  }, [state]);
+
+  const phase1Body = state
+    ? `통합관제 · 자동복구 · 번인 — 플릿 ${formatCount(state.fleet.gpuTotal)}장 관제 중`
+    : '통합관제 · 자동복구 · 번인';
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h1 className="font-semibold text-xl">AI 분석 + 지능형 스케줄링</h1>
+        <p className="text-muted-foreground text-sm">
+          Phase 2·3 확장 방향을 라이브 데이터로 직접 눌러 확인한다 — 계산은 현재 플릿 기준이다.
+        </p>
+      </div>
+
+      {/* 0. 질의 대상 라이브 지표 — 아래 질문·배치 계산이 읽는 그 수치다. */}
+      <div
+        className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5"
+        aria-label="질의 대상 라이브 지표"
+      >
+        <KpiTile
+          label="관제 중 GPU"
+          icon={<Cpu className="size-4" />}
+          value={state ? formatCount(state.fleet.gpuTotal) : null}
+          hint={state ? `노드 ${formatCount(state.fleet.nodeTotal)}대` : undefined}
+        />
+        <KpiTile
+          label="온도 경보"
+          icon={<Thermometer className="size-4" />}
+          tone="warn"
+          value={state ? formatCount(state.fleet.tempAlerts) : null}
+          hint="온도 경보 발행 GPU"
+        />
+        <KpiTile
+          label="장애 GPU"
+          icon={<AlertTriangle className="size-4" />}
+          tone="danger"
+          value={state ? formatCount(state.fleet.faulted) : null}
+          hint="배치 후보에서 제외"
+        />
+        <KpiTile
+          label="서빙 풀"
+          icon={<Layers className="size-4" />}
+          tone="info"
+          value={state ? formatCount(state.fleet.pools.length) : null}
+          hint="사용률 비교 축"
+        />
+        <KpiTile
+          label="배치 후보 인벤토리"
+          icon={<Boxes className="size-4" />}
+          value={cells ? formatCount(cells.length) : null}
+          hint={`제외 ${formatCount(excludedUuids.size)}장`}
+        />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        {/* 1. 대화형 AI 운영 에이전트 */}
+        <Card>
+          <CardHeader>
+            <Badge variant="secondary" className="w-fit">
+              Phase 2 · 의사결정 후 확장
+            </Badge>
+            <CardTitle>대화형 AI 운영 에이전트</CardTitle>
+            <CardDescription>
+              조회·요약 전용 읽기 에이전트 — 조치 권한 없음
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <div className="flex max-h-80 min-h-40 flex-col gap-2 overflow-y-auto rounded-lg border bg-background/50 p-3">
+              {messages.length === 0 ? (
+                <p className="m-auto text-center text-muted-foreground text-sm">
+                  {chatReady
+                    ? '아래 질문을 눌러 라이브 데이터를 조회한다.'
+                    : demoMode === false
+                      ? '데모 인스턴스에서만 동작한다 — 실서비스 모드에서는 질문이 비활성이다.'
+                      : '데모 상태를 불러오는 중이다.'}
+                </p>
+              ) : (
+                messages.map((m) => <ChatBubble key={m.id} message={m} />)
+              )}
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              {QUESTIONS.map((q) => (
+                <Button
+                  key={q.id}
+                  variant="outline"
+                  size="sm"
+                  className="rounded-full"
+                  disabled={!chatReady}
+                  onClick={() => onAsk(q)}
+                >
+                  {q.label}
+                </Button>
+              ))}
+            </div>
+
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-muted-foreground text-xs">
+                답변은 현재 스냅샷을 그때그때 계산한 값이다(사전 작성 문구 없음).
+              </p>
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={messages.length === 0}
+                onClick={() => setMessages([])}
+              >
+                대화 지우기
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 2. 지능형 워크로드 스케줄링 */}
+        <ScoringFunnel cells={cells} models={modelOptions} excludedUuids={excludedUuids} />
+      </div>
+
+      {/* 3. 로드맵 스트립 */}
+      <div className="grid gap-3 sm:grid-cols-3">
+        <div
+          className="flex flex-col gap-1.5 rounded-lg border bg-card p-4"
+          style={{ borderTop: '3px solid var(--metric-pod)' }}
+        >
+          <div className="flex items-center justify-between gap-2">
+            <span className="font-medium text-sm">Phase 1 — 현재</span>
+            <Badge variant="secondary" style={{ color: 'var(--metric-pod)' }}>
+              적용 완료
+            </Badge>
+          </div>
+          <span className="text-muted-foreground text-xs">{phase1Body}</span>
+        </div>
+
+        <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-4">
+          <div className="flex items-center justify-between gap-2">
+            <span className="font-medium text-sm">Phase 2</span>
+            <Badge variant="outline">의사결정 후 확장</Badge>
+          </div>
+          <span className="text-muted-foreground text-xs">
+            AI 운영 에이전트 — 대화형 조회·분석
+          </span>
+        </div>
+
+        <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-4">
+          <div className="flex items-center justify-between gap-2">
+            <span className="font-medium text-sm">Phase 3</span>
+            <Badge variant="outline">2027 비전</Badge>
+          </div>
+          <span className="text-muted-foreground text-xs">지능형 스케줄링 · 페일오버</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuRuleset.tsx b/web/src/pages/gpu/GpuRuleset.tsx
new file mode 100644
index 0000000..9e76d4e
--- /dev/null
+++ b/web/src/pages/gpu/GpuRuleset.tsx
@@ -0,0 +1,355 @@
+// GpuRuleset — 장애 판정 룰셋 관리(/gpu/ruleset). 시나리오 1 [사전 설정],
+// 시연 첫 화면.
+//
+// 룰 엔진을 새로 만들지 않는다. 이 화면은 *이미 도는 엔진 로직 2종의 뷰* 다:
+//   1단계 결정론 감지 = Scenario.pushAlert 로 흐르는 알림 코드들
+//   2단계 위험도 스코어 = health.go Score() 의 가중 감점표
+// 두 기구를 tier 로 나눈 표 2개로 노출하고, 실동작 레버(적용 토글) 하나만
+// 더한다 — 1단계를 끄면 그 코드의 알림이 이후로 끊기고(이미 등재된 이력은
+// 감사 계약상 남는다), 2단계를 끄면 Health 점수가 오른다.
+//
+// "단계적 고도화"는 3중으로 드러낸다: ① 상단 2단 스테퍼(채택 비율 포함)
+// ② 표를 tier 로 2분할 ③ 두 표의 *열 구성 자체*를 다르게 — 1단계는 심각도 +
+// 불리언 조건(터진 것), 2단계는 가중치 + 위험 대역(터지기 전).
+import { ListChecks, ShieldCheck, ShieldOff, TriangleAlert } from 'lucide-react';
+import { useState } from 'react';
+import KpiTile from '@/components/gpu/KpiTile';
+import ReuseStepper, { type ReuseStepperStep } from '@/components/gpu/ReuseStepper';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDemo } from '@/hooks/demoContext';
+import type { RuleDef, RuleTier } from '@/lib/demoApi';
+import { formatCount } from '@/lib/gpuMetrics';
+
+// 심각도 색은 전 화면 공통 어휘를 그대로 쓴다(critical→fault / major→thermal /
+// warning→mem). 라벨 문자열로 색을 추론하면 라벨을 바꾸는 순간 색이 깨진다.
+const SEVERITY_COLOR: Record<RuleDef['severity'], string> = {
+  critical: 'var(--metric-fault)',
+  major: 'var(--metric-thermal)',
+  warning: 'var(--metric-mem)',
+};
+
+const SEVERITY_LABEL: Record<RuleDef['severity'], string> = {
+  critical: 'Critical',
+  major: 'Major',
+  warning: 'Warning',
+};
+
+/** 단계 색 — 1단계는 확정 판정(초록), 2단계는 예측 판정(파랑). 미적용은 무채색. */
+const TIER_COLOR: Record<number, string> = {
+  1: 'var(--metric-pod)',
+  2: 'var(--metric-cpu)',
+};
+
+function TonedBadge({ text, color }: { text: string; color: string }) {
+  return (
+    <Badge
+      variant="outline"
+      className="text-[10px]"
+      style={{
+        color,
+        borderColor: color,
+        backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`,
+      }}
+    >
+      {text}
+    </Badge>
+  );
+}
+
+/** 고도화 스테퍼 — 형제 화면(사전검증 /gpu/validation)과 *같은 번호 스테퍼*
+ *  컴포넌트를 쓴다. 이 화면만 박스+화살표를 쓰면 같은 제품으로 안 보인다.
+ *  상태는 done/idle 2종만 쓴다 — active(검정 원)는 형제 화면에서 "진행 중"
+ *  이라 9/9 적용된 단계에 붙이면 미완으로 읽힌다. */
+function stepperSteps(tiers: RuleTier[]): ReuseStepperStep[] {
+  return tiers.map((tier) => ({
+    id: String(tier.tier),
+    // 라벨은 "1단계 · 명확한 장애 감지" — 번호는 원에 이미 있으므로 뒷부분만.
+    label: tier.label.split(' · ').at(-1) ?? tier.label,
+    status: tier.enabled === 0 ? 'idle' : 'done',
+    hint: tier.enabled > 0 ? `${tier.enabled}/${tier.total} 적용` : '전체 미적용',
+  }));
+}
+
+/** 적용 토글 — 낙관적 갱신은 하지 않는다(GpuRemediation 모드 셀렉터와 동일
+ *  계약). 실패하면 다음 폴링의 서버 값으로 상태가 그대로 되돌아온다. */
+function ToggleCell({
+  rule,
+  pending,
+  onToggle,
+}: {
+  rule: RuleDef;
+  pending: string | null;
+  onToggle: (rule: RuleDef) => void;
+}) {
+  const busy = pending === rule.code;
+  return (
+    // 적용 중인 룰은 outline(되돌릴 수 있음), 해제된 룰은 primary(복구를 유도).
+    <Button
+      variant={rule.enabled ? 'outline' : 'default'}
+      size="sm"
+      className="w-16"
+      disabled={pending !== null}
+      onClick={() => onToggle(rule)}
+    >
+      {busy ? '…' : rule.enabled ? '해제' : '적용'}
+    </Button>
+  );
+}
+
+function TierTable({
+  tier,
+  pending,
+  onToggle,
+}: {
+  tier: RuleTier;
+  pending: string | null;
+  onToggle: (rule: RuleDef) => void;
+}) {
+  const tier2 = tier.tier === 2;
+  const color = TIER_COLOR[tier.tier];
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex flex-wrap items-center gap-2">
+          {tier.label}
+          <TonedBadge text={`${tier.enabled}/${tier.total} 적용`} color={color} />
+        </CardTitle>
+        <CardDescription>{tier.describe}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            {/* 목업 표는 헤더가 옅은 회색 밴드다(demo4) — 흰 바탕 밑줄만이면
+                열 이름이 본문과 같은 무게로 읽힌다. */}
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              {/* 폭 고정은 값 열만 — 서술 2열은 남은 폭을 나눠 갖는다. 이 표의
+                  min-content 는 897(1단계)/918(2단계)px 로 1440 뷰포트의 본문
+                  폭(1184)보다 작다(실측) → 우측 [적용] 열까지 가로 스크롤 없이
+                  들어온다. 폭 지정을 더 넣으면 오히려 열이 부풀어 역효과다.
+                  (시연 폭에서 [적용] 이 화면 밖으로 밀리던 원인은 이 표가 아니라
+                   헤더 한 줄의 min-content 1714px 였다 — Shell.tsx 참조. Table
+                   컨테이너는 overflow-x-auto 라 본문 최소폭에 기여하지 않는다.) */}
+              <TableHead className="w-52">룰</TableHead>
+              <TableHead className="w-24">심각도</TableHead>
+              {tier2 ? <TableHead className="w-16 text-right">가중치</TableHead> : null}
+              <TableHead>{tier2 ? '위험 조건' : '감지 조건'}</TableHead>
+              <TableHead>연결된 자동 조치</TableHead>
+              <TableHead className="w-24 text-right">조건 매칭</TableHead>
+              <TableHead className="w-20 text-right">적용</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tier.rules.map((rule) => (
+              <TableRow key={rule.code} className={rule.enabled ? undefined : 'opacity-50'}>
+                <TableCell>
+                  <span className="flex flex-col">
+                    <span className="font-medium">{rule.name}</span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{rule.code}</span>
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <TonedBadge
+                    text={SEVERITY_LABEL[rule.severity]}
+                    color={SEVERITY_COLOR[rule.severity]}
+                  />
+                </TableCell>
+                {tier2 ? (
+                  <TableCell
+                    className="text-right font-semibold tabular-nums"
+                    style={{ color: 'var(--metric-fault)' }}
+                  >
+                    −{rule.weight ?? 0}
+                  </TableCell>
+                ) : null}
+                <TableCell className="text-muted-foreground text-sm">{rule.condition}</TableCell>
+                <TableCell className="text-muted-foreground text-sm">{rule.action}</TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {rule.matchCount > 0 ? (
+                    formatCount(rule.matchCount)
+                  ) : (
+                    <span className="text-muted-foreground">0</span>
+                  )}
+                </TableCell>
+                <TableCell className="text-right">
+                  <ToggleCell rule={rule} pending={pending} onToggle={onToggle} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {/* 각주는 목업처럼 * 로 시작하는 한 줄 — 세 줄짜리 회색 문단은 표보다
+            무겁게 읽혀 시연 화면의 무게중심을 뺏는다. */}
+        <p className="mt-3 text-muted-foreground text-[11px]">
+          {tier2
+            ? '* 조건 매칭 = 이 조건에 걸린 GPU 수 (한 장이 여러 조건에 걸릴 수 있다). 적용을 해제하면 Health 판정이 실제로 바뀝니다.'
+            : '* 적용을 해제하면 해당 코드의 알림이 이후로 발행되지 않습니다 — 이미 등재된 알림은 감사 이력으로 남습니다.'}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function LoadingShell() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Skeleton className="h-8 w-56" />
+      <Skeleton className="h-28 w-full" />
+      <Skeleton className="h-64 w-full" />
+    </div>
+  );
+}
+
+export default function GpuRuleset() {
+  const { demoMode, state, act } = useDemo();
+  const [pending, setPending] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  if (demoMode === null) return <LoadingShell />;
+
+  if (!demoMode) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>GPU 장애 룰셋</CardTitle>
+          <CardDescription>데모 시나리오 전용 화면</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            이 화면은 데모 모드에서만 동작한다. 실서비스 모드에서는 제공되지 않는다.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!state) return <LoadingShell />;
+
+  const tiers = state.ruleset.tiers;
+  const tier1 = tiers.find((t) => t.tier === 1);
+  const tier2 = tiers.find((t) => t.tier === 2);
+  const enabled = tiers.reduce((n, t) => n + t.enabled, 0);
+  const total = tiers.reduce((n, t) => n + t.total, 0);
+  // 조건 매칭은 *조건에 걸린 GPU 수* 다 — 적용 여부로 거르지 않는다. 거르면
+  // 룰을 끄는 순간 KPI 가 "조건에 걸린 GPU 0장"이라고 말해(THERMAL 해제 시
+  // 743 → 13) 시연이 전달할 메시지("조건엔 걸리지만 적용을 껐다")와 반대가 된다.
+  // 미적용 룰의 존재는 옆의 '미적용 룰' KPI 와 표의 흐린 행이 이미 말한다.
+  const matchOf = (t: RuleTier | undefined) =>
+    t ? t.rules.reduce((n, r) => n + r.matchCount, 0) : 0;
+  // 복구 모드는 읽기 전용 표시다 — 변경 진입점은 자동복구 화면 하나뿐이다.
+  const modeLabel = state.scenario.modeOptions.find((o) => o.id === state.scenario.mode)?.label;
+
+  const onToggle: (rule: RuleDef) => void = async (rule) => {
+    if (pending !== null) return;
+    setPending(rule.code);
+    setActionError(null);
+    const outcome = await act('set-rule-enabled', {
+      code: rule.code,
+      enabled: rule.enabled ? 'off' : 'on',
+    });
+    setPending(null);
+    if (outcome.ok) return;
+    setActionError(
+      outcome.status === 409
+        ? `룰 변경 거부 — ${outcome.error}`
+        : `룰 변경 실패 (HTTP ${outcome.status}) — ${outcome.error}`,
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        {/* 제목(h1)은 셸이 좌측 메뉴 라벨로 이미 찍는다(Shell.tsx) — 라벨을 화면
+            제목과 같은 문자열로 통일했으므로 여기서 또 찍으면 같은 제목이 두 줄로
+            겹친다(목업은 브레드크럼 + 제목 1개). 배지·설명문만 남긴다. */}
+        {/* 목업 헤더 리듬: 제목 아래 회색 한 줄. 배지는 그 줄 오른쪽에 붙인다
+            (사전검증 화면의 제목 옆 '유휴 319일' 배지와 같은 위치 어휘). */}
+        <div className="flex flex-wrap items-center gap-2">
+          <p className="text-muted-foreground text-sm">
+            명확한 장애 감지부터 위험도 기반 예방 관리까지 단계적으로 고도화하는 구조입니다.
+          </p>
+          {modeLabel ? <Badge variant="outline">복구 모드 · {modeLabel}</Badge> : null}
+        </div>
+      </div>
+
+      {actionError ? (
+        <Alert variant="destructive">
+          <AlertDescription>{actionError}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      {/* 1. 고도화 단계 스테퍼 — 사전검증 화면의 스테퍼 카드와 같은 구성
+          (헤더 없이 스테퍼만 + 아래 한 줄 캡션). 카드 제목을 다시 얹으면
+          같은 정보가 3중(셸 제목 / 카드 제목 / 단계 라벨)이 된다. */}
+      <Card>
+        <CardContent className="flex flex-col gap-2 py-2">
+          {/* 단계가 2개뿐이라 폭을 안 묶으면 원 2개가 1150px 양 끝으로 벌어져
+              연결선만 남는다 — 목업 스테퍼의 단계 간격(≈350px)에 맞춘다. */}
+          <div className="mx-auto w-full max-w-lg">
+            <ReuseStepper steps={stepperSteps(tiers)} />
+          </div>
+          <p className="text-center text-muted-foreground text-xs">
+            1단계는 이미 터진 장애를 본다 — 2단계는 터지기 전을 본다 · 아래 표의 적용 토글이 이 값을
+            바꾼다
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* 2. KPI 4종 */}
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <KpiTile
+          label="적용 룰"
+          value={formatCount(enabled)}
+          sub={`/ ${total}`}
+          hint={
+            tier1 && tier2
+              ? `1단계 ${tier1.enabled}/${tier1.total} · 2단계 ${tier2.enabled}/${tier2.total}`
+              : undefined
+          }
+          tone="ok"
+          icon={<ListChecks />}
+        />
+        <KpiTile
+          label="1단계 조건 매칭"
+          value={formatCount(matchOf(tier1))}
+          hint="결정론 조건에 걸린 GPU (조건별 합 — 중복 포함)"
+          tone="danger"
+          icon={<TriangleAlert />}
+        />
+        <KpiTile
+          label="2단계 조건 매칭"
+          value={formatCount(matchOf(tier2))}
+          hint="위험도 조건에 걸린 GPU (조건별 합 — 중복 포함)"
+          tone="warn"
+          icon={<ShieldCheck />}
+        />
+        <KpiTile
+          label="미적용 룰"
+          value={formatCount(total - enabled)}
+          // 복원 경로는 표의 [적용] 버튼 하나뿐이다 — 여기 있지도 않은 ↺ 를
+          // 가리키면 시연자가 없는 컨트롤을 찾는다(실측: ↺ 는 전 화면에 없음).
+          hint={total - enabled > 0 ? '판정에서 제외 중 — 표의 [적용] 로 복원' : '전 룰 적용 중'}
+          // 4번째만 tone 이 없으면 상단 컬러 라인이 빠져 KPI 줄이 들쭉날쭉해진다
+          // (목업 KPI 줄은 타일 6개가 전부 같은 구조). 미적용 0 = 정상이라 ok.
+          tone={total - enabled > 0 ? 'danger' : 'ok'}
+          icon={<ShieldOff />}
+        />
+      </div>
+
+      {/* 3. 단계별 룰 표 — 열 구성이 다르다(1단계=불리언 조건 / 2단계=가중치·대역) */}
+      {tier1 ? <TierTable tier={tier1} pending={pending} onToggle={onToggle} /> : null}
+      {tier2 ? <TierTable tier={tier2} pending={pending} onToggle={onToggle} /> : null}
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuServing.tsx b/web/src/pages/gpu/GpuServing.tsx
new file mode 100644
index 0000000..b894bde
--- /dev/null
+++ b/web/src/pages/gpu/GpuServing.tsx
@@ -0,0 +1,714 @@
+// GpuServing — "서빙 · SLO". 이 플랫폼의 워크로드는 GPU **추론 서빙**이다:
+// 하드웨어 지표(util/temp/power)만 보이면 장비 모니터지만, 요청·지연·토큰·큐와
+// SLO 가 함께 보이면 운영 중인 추론 서비스 관제가 된다.
+//
+// 백엔드가 만든 인과를 화면이 그대로 서술한다:
+//   GPU 사용률↑ → 배치 크기↑ → 큐 깊이↑ → p95/p99↑ → (부하 90% 초과) 에러율↑
+// 그래서 히트맵이 붉어지는 시각과 지연이 오르는 시각이 일치한다.
+//
+// 차트는 Explorer 의 CSP-안전 Recharts 셋업 미러 — 원시 컴포넌트 + 색은
+// var(--metric-*) 문자열 직접 참조(ChartStyle 의 style 주입 회피).
+import { Activity, Coins, Timer, TriangleAlert } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import EventStream from '@/components/gpu/EventStream';
+import KpiTile from '@/components/gpu/KpiTile';
+import SloPanel from '@/components/gpu/SloPanel';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDemo } from '@/hooks/demoContext';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api, type ApiEnvelope, type MatrixData, type VectorData } from '@/lib/api';
+import {
+  formatCount,
+  formatMs,
+  formatPct,
+  formatRps,
+  formatTokensPerSec,
+  METRIC_DEMO_FLEET_ERR_PCT,
+  METRIC_DEMO_FLEET_P95,
+  METRIC_DEMO_FLEET_RPS,
+  METRIC_DEMO_FLEET_TOKENS,
+  METRIC_DEMO_POOL_BATCH,
+  METRIC_DEMO_POOL_P50,
+  METRIC_DEMO_POOL_P95,
+  METRIC_DEMO_POOL_P99,
+  METRIC_DEMO_POOL_QUEUE,
+  selector,
+} from '@/lib/gpuMetrics';
+
+const KPI_POLL_MS = 15_000;
+const RANGE_POLL_MS = 30_000;
+const FLEET_RANGE_SECONDS = 3 * 3600;
+const POOL_RANGE_SECONDS = 3600;
+const MIN_STEP_SECONDS = 15;
+const TARGET_POINTS = 500;
+/** 에러율 경고 임계 — 이 위는 사용자에게 실패가 보이기 시작하는 구간. */
+const ERROR_RATE_WARN_PCT = 0.5;
+
+function firstValue(env: ApiEnvelope<VectorData>): number | null {
+  const sample = env.data.result[0];
+  return sample ? Number(sample.value[1]) : null;
+}
+
+/** 조회 창 — step 은 화면 해상도 목표(~500 포인트) 기준(Explorer 관례). */
+/** 중심 이동평균 — 계열 길이는 유지하고 끝점도 버리지 않는다(창을 잘라 평균).
+ *  스파크라인·추이선의 고주파 노이즈만 제거하는 용도. */
+function movingAvg(values: readonly number[], window: number): number[] {
+  if (window <= 1 || values.length === 0) return [...values];
+  const half = Math.floor(window / 2);
+  return values.map((_, i) => {
+    const lo = Math.max(0, i - half);
+    const hi = Math.min(values.length, i + half + 1);
+    let sum = 0;
+    for (let j = lo; j < hi; j++) sum += values[j];
+    return sum / (hi - lo);
+  });
+}
+
+function rangeWindow(seconds: number): { startSec: number; endSec: number; step: number } {
+  const endSec = Math.floor(Date.now() / 1000);
+  return {
+    startSec: endSec - seconds,
+    endSec,
+    step: Math.max(MIN_STEP_SECONDS, Math.floor(seconds / TARGET_POINTS)),
+  };
+}
+
+interface ChartRow {
+  time: number;
+  [seriesKey: string]: number | null;
+}
+
+interface MatrixPart {
+  key: string;
+  matrix: MatrixData;
+}
+
+// 여러 matrix 를 공통 시간축 행으로 병합한다 — 빠진 버킷은 null 로 명시해
+// connectNulls=false 가 그 지점만 끊어 그리게 한다(Explorer/Efficiency 관례).
+function mergeMatrices(parts: readonly MatrixPart[]): ChartRow[] {
+  const byTime = new Map<number, ChartRow>();
+  for (const { key, matrix } of parts) {
+    for (const s of matrix.result) {
+      for (const [t, v] of s.values) {
+        let row = byTime.get(t);
+        if (!row) {
+          row = { time: t };
+          for (const p of parts) row[p.key] = null;
+          byTime.set(t, row);
+        }
+        row[key] = Number(v);
+      }
+    }
+  }
+  return [...byTime.values()].sort((a, b) => a.time - b.time);
+}
+
+function formatClock(unixSec: number): string {
+  return new Date(unixSec * 1000).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+const CHART_MARGIN = { top: 8, right: 16, left: 0, bottom: 8 } as const;
+
+const TOOLTIP_STYLE = {
+  backgroundColor: 'var(--popover)',
+  borderColor: 'var(--border)',
+  color: 'var(--popover-foreground)',
+  fontSize: 12,
+} as const;
+
+export default function GpuServing() {
+  const { demoMode, state } = useDemo();
+  const demoOn = demoMode === true;
+
+  // 표에서 고른 풀. null = 아직 선택 없음 → RPS 1위가 기본.
+  const [picked, setPicked] = useState<string | null>(null);
+
+  // 표 정렬(RPS 내림차순) — 기본 선택(1위)의 근거이기도 하다.
+  const serving = useMemo(() => {
+    const rows = state?.serving ?? [];
+    return [...rows].sort((a, b) => b.rps - a.rps);
+  }, [state?.serving]);
+
+  const activePool = picked ?? serving[0]?.pool ?? '';
+  const active = serving.find((s) => s.pool === activePool) ?? null;
+
+  // 플릿 롤업 KPI 4종 (instant, 15s).
+  const kpi = usePolledQuery(
+    async () => {
+      if (!demoOn) return null;
+      const [rps, p95, tokens, err] = await Promise.all([
+        api.instantQuery(METRIC_DEMO_FLEET_RPS),
+        api.instantQuery(METRIC_DEMO_FLEET_P95),
+        api.instantQuery(METRIC_DEMO_FLEET_TOKENS),
+        api.instantQuery(METRIC_DEMO_FLEET_ERR_PCT),
+      ]);
+      return {
+        rps: firstValue(rps),
+        p95: firstValue(p95),
+        tokens: firstValue(tokens),
+        err: firstValue(err),
+      };
+    },
+    KPI_POLL_MS,
+    [demoOn],
+  );
+
+  // 플릿 부하·지연 추이 (최근 3시간, 30s) — 두 선이 함께 움직이는 것이 목적.
+  const fleetTrend = usePolledQuery(
+    async () => {
+      if (!demoOn) return null;
+      const { startSec, endSec, step } = rangeWindow(FLEET_RANGE_SECONDS);
+      // 토큰·에러율도 같은 창으로 — KPI 타일 스파크라인 소재(목업 상단 타일은
+      // 전부 미니 시각화를 달고 있다). 질의 2건 추가, 폴링 주기는 그대로.
+      const [rpsRes, p95Res, tokRes, errRes] = await Promise.all([
+        api.rangeQuery(METRIC_DEMO_FLEET_RPS, startSec, endSec, step),
+        api.rangeQuery(METRIC_DEMO_FLEET_P95, startSec, endSec, step),
+        api.rangeQuery(METRIC_DEMO_FLEET_TOKENS, startSec, endSec, step),
+        api.rangeQuery(METRIC_DEMO_FLEET_ERR_PCT, startSec, endSec, step),
+      ]);
+      return mergeMatrices([
+        { key: 'rps', matrix: rpsRes.data },
+        { key: 'p95', matrix: p95Res.data },
+        { key: 'tokens', matrix: tokRes.data },
+        { key: 'err', matrix: errRes.data },
+      ]);
+    },
+    RANGE_POLL_MS,
+    [demoOn],
+  );
+
+  // 선택 풀 상세 추이 (최근 1시간, 30s) — 지연 3선 + 큐·배치 2선을 한 폴링에서.
+  const poolTrend = usePolledQuery(
+    async () => {
+      if (!demoOn || activePool === '') return null;
+      const { startSec, endSec, step } = rangeWindow(POOL_RANGE_SECONDS);
+      const labels = { pool: activePool };
+      const [p50, p95, p99, queue, batch] = await Promise.all([
+        api.rangeQuery(selector(METRIC_DEMO_POOL_P50, labels), startSec, endSec, step),
+        api.rangeQuery(selector(METRIC_DEMO_POOL_P95, labels), startSec, endSec, step),
+        api.rangeQuery(selector(METRIC_DEMO_POOL_P99, labels), startSec, endSec, step),
+        api.rangeQuery(selector(METRIC_DEMO_POOL_QUEUE, labels), startSec, endSec, step),
+        api.rangeQuery(selector(METRIC_DEMO_POOL_BATCH, labels), startSec, endSec, step),
+      ]);
+      return {
+        latency: mergeMatrices([
+          { key: 'p50', matrix: p50.data },
+          { key: 'p95', matrix: p95.data },
+          { key: 'p99', matrix: p99.data },
+        ]),
+        load: mergeMatrices([
+          { key: 'queue', matrix: queue.data },
+          { key: 'batch', matrix: batch.data },
+        ]),
+      };
+    },
+    RANGE_POLL_MS,
+    [demoOn, activePool],
+  );
+
+  if (demoMode === null) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!demoOn) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>서빙 · SLO</CardTitle>
+          <CardDescription>서빙 지표는 데모 인스턴스 전용</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            요청·지연·토큰·큐와 SLO 는 데모 엔진이 합성하는 추론 서빙 지표다. 실서비스
+            인스턴스에는 해당 시리즈가 존재하지 않으므로 이 화면은 비활성이다 — GPU 하드웨어
+            지표는 GPU 플릿·헬스 화면에서 확인한다.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const fleetRows = fleetTrend.data ?? [];
+  const errPct = kpi.data?.err ?? null;
+  // 타일 스파크라인 — 추이 차트가 이미 받아온 계열을 그대로 재사용한다.
+  // 원시 계열은 스텝당 분산이 커서 그대로 그리면 노이즈 덩어리가 되고
+  // "부하와 지연이 같이 움직인다"는 이 화면의 논지가 파묻힌다 — 이동평균으로
+  // 고주파만 걷어낸다(값 범위·축은 그대로).
+  const sparkOf = (key: string): number[] =>
+    movingAvg(fleetRows.map((r) => Number(r[key])).filter((v) => Number.isFinite(v)), 9);
+  // 추이 차트도 같은 이유로 다듬는다 — 원시 계열끼리는 두 선이 서로를 가려
+  // 동조(요청↑→지연↑)가 안 보였다.
+  const smoothRps = movingAvg(fleetRows.map((r) => Number(r.rps)), 9);
+  const smoothP95 = movingAvg(fleetRows.map((r) => Number(r.p95)), 9);
+  const fleetSmoothed = fleetRows.map((r, i) => ({
+    ...r,
+    rps: smoothRps[i],
+    p95: smoothP95[i],
+  }));
+  const latencyRows = poolTrend.data?.latency ?? [];
+  const loadRows = poolTrend.data?.load ?? [];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h1 className="font-semibold text-xl">서빙 · SLO</h1>
+        <p className="text-muted-foreground text-sm">
+          플릿에서 실제로 돌고 있는 추론 서비스의 요청·지연·큐와 가용성 목표를 함께 본다.
+        </p>
+      </div>
+
+      {/* 1. 플릿 서빙 KPI */}
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        <KpiTile
+          label="초당 요청 (RPS)"
+          value={kpi.data === null ? null : formatRps(kpi.data.rps)}
+          hint="전체 서빙 풀 합계 · 최근 3시간"
+          tone="info"
+          icon={<Activity className="size-4" />}
+          spark={sparkOf('rps')}
+        />
+        <KpiTile
+          label="p95 지연"
+          value={kpi.data === null ? null : formatMs(kpi.data.p95)}
+          hint="요청량 가중 평균 · 최근 3시간"
+          tone="warn"
+          icon={<Timer className="size-4" />}
+          spark={sparkOf('p95')}
+        />
+        <KpiTile
+          label="토큰 생성"
+          value={kpi.data === null ? null : formatTokensPerSec(kpi.data.tokens)}
+          hint="LLM·RAG 계열 합계 · 최근 3시간"
+          icon={<Coins className="size-4" />}
+          spark={sparkOf('tokens')}
+        />
+        <KpiTile
+          label="에러율"
+          value={kpi.data === null ? null : formatPct(errPct, 2)}
+          hint={`경고 임계 ${ERROR_RATE_WARN_PCT}%`}
+          tone={errPct !== null && errPct > ERROR_RATE_WARN_PCT ? 'danger' : 'ok'}
+          icon={<TriangleAlert className="size-4" />}
+          spark={sparkOf('err')}
+        />
+      </div>
+
+      {/* 2. 플릿 지연·요청 추이 — 부하와 지연이 함께 움직이는 것을 보이는 차트 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>요청량 · p95 지연 추이</CardTitle>
+          <CardDescription>
+            최근 3시간 — 요청이 몰리면 배치와 큐가 커지고 그만큼 p95 지연이 따라 오른다(히트맵이
+            붉어지는 시각과 같은 시각).
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {fleetTrend.data === null && fleetTrend.error === null ? (
+            <Skeleton className="h-64 w-full" />
+          ) : fleetRows.length === 0 ? (
+            <p className="py-8 text-center text-muted-foreground text-sm">표시할 데이터가 없다.</p>
+          ) : (
+            <ResponsiveContainer width="100%" height={260}>
+              <LineChart data={fleetSmoothed} margin={CHART_MARGIN}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis
+                  dataKey="time"
+                  type="number"
+                  domain={['dataMin', 'dataMax']}
+                  tickFormatter={formatClock}
+                  tick={{ fontSize: 12 }}
+                  className="fill-muted-foreground"
+                />
+                <YAxis
+                  yAxisId="rps"
+                  domain={['auto', 'auto']}
+                  width={56}
+                  tick={{ fontSize: 12 }}
+                  className="fill-muted-foreground"
+                />
+                <YAxis
+                  yAxisId="latency"
+                  orientation="right"
+                  domain={['auto', 'auto']}
+                  width={56}
+                  tick={{ fontSize: 12 }}
+                  className="fill-muted-foreground"
+                />
+                <Tooltip
+                  labelFormatter={(t) => formatClock(Number(t))}
+                  formatter={(value, name) =>
+                    name === 'p95 지연' ? formatMs(Number(value)) : formatRps(Number(value))
+                  }
+                  contentStyle={TOOLTIP_STYLE}
+                />
+                <Legend wrapperStyle={{ fontSize: 12 }} />
+                <Line
+                  yAxisId="rps"
+                  type="monotone"
+                  dataKey="rps"
+                  name="초당 요청"
+                  stroke="var(--metric-cpu)"
+                  strokeWidth={2}
+                  dot={false}
+                  connectNulls={false}
+                  isAnimationActive={false}
+                />
+                <Line
+                  yAxisId="latency"
+                  type="monotone"
+                  dataKey="p95"
+                  name="p95 지연"
+                  stroke="var(--metric-thermal)"
+                  strokeWidth={2}
+                  dot={false}
+                  connectNulls={false}
+                  isAnimationActive={false}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 3. SLO */}
+      {state === null ? <Skeleton className="h-52 w-full" /> : <SloPanel slo={state.slo} />}
+
+      {/* 4. 서빙 풀 테이블 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>서빙 풀</CardTitle>
+          <CardDescription>
+            요청량 순 — 행을 고르면 아래에 해당 풀의 지연 분포와 큐·배치가 열린다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {state === null ? (
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-8 w-full" />
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>풀</TableHead>
+                  <TableHead>테넌트</TableHead>
+                  <TableHead className="text-right">GPU</TableHead>
+                  <TableHead className="text-right">사용률</TableHead>
+                  <TableHead className="text-right">RPS</TableHead>
+                  <TableHead className="text-right">p50</TableHead>
+                  <TableHead className="text-right">p95</TableHead>
+                  <TableHead className="text-right">p99</TableHead>
+                  <TableHead className="text-right">큐</TableHead>
+                  <TableHead className="text-right">배치</TableHead>
+                  <TableHead className="text-right">에러율</TableHead>
+                  <TableHead className="text-right">레플리카</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {serving.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={12} className="text-center text-muted-foreground">
+                      서빙 풀이 없다.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  serving.map((s) => {
+                    const degraded = s.replicasReady < s.replicasDesired;
+                    return (
+                      <TableRow
+                        key={s.pool}
+                        onClick={() => setPicked(s.pool)}
+                        className={`cursor-pointer ${s.pool === activePool ? 'bg-muted' : ''} ${
+                          s.saturated ? 'border-l-2' : ''
+                        }`}
+                        style={
+                          s.saturated ? { borderLeftColor: 'var(--metric-thermal)' } : undefined
+                        }
+                      >
+                        <TableCell className="text-xs">
+                          <div className="flex items-center gap-1.5">
+                            <span className="font-medium">{s.display}</span>
+                            {s.saturated ? (
+                              <Badge variant="outline" className="text-metric-thermal text-[10px]">
+                                포화
+                              </Badge>
+                            ) : null}
+                          </div>
+                          <span className="font-mono text-[10px] text-muted-foreground">
+                            {s.pool}
+                          </span>
+                        </TableCell>
+                        <TableCell className="text-xs">{s.tenant}</TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatCount(s.gpus)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatPct(s.utilAvgPct)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatRps(s.rps)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatMs(s.p50Ms)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatMs(s.p95Ms)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatMs(s.p99Ms)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {s.queueDepth.toFixed(1)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {s.batchSize.toFixed(1)}
+                        </TableCell>
+                        <TableCell className="text-right text-xs tabular-nums">
+                          {formatPct(s.errorRatePct, 2)}
+                        </TableCell>
+                        <TableCell
+                          className={`text-right text-xs tabular-nums ${
+                            degraded ? 'font-semibold text-metric-thermal' : ''
+                          }`}
+                        >
+                          {s.replicasReady}/{s.replicasDesired}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                )}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 5. 선택 풀 상세 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {active ? `${active.display} 상세` : '풀 상세'}
+            {active ? (
+              <Badge variant="secondary" className="ml-2 align-middle">
+                {active.tenant}
+              </Badge>
+            ) : null}
+          </CardTitle>
+          <CardDescription>
+            최근 1시간 — 큐가 쌓이는 구간에서 p99 꼬리가 가장 먼저 벌어진다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {active === null ? (
+            <p className="py-8 text-center text-muted-foreground text-sm">
+              표에서 풀을 선택한다.
+            </p>
+          ) : (
+            <>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+                <KpiTile
+                  label="토큰 생성"
+                  value={
+                    active.tokensPerSec > 0
+                      ? formatTokensPerSec(active.tokensPerSec)
+                      : '토큰 생성 없음'
+                  }
+                  hint={
+                    active.tokensPerSec > 0 ? '생성형 응답 처리량' : '임베딩·분류 계열 (비생성)'
+                  }
+                />
+                <KpiTile
+                  label="레플리카"
+                  value={`${active.replicasReady}/${active.replicasDesired}`}
+                  hint={
+                    active.replicasReady < active.replicasDesired
+                      ? '준비 중인 파드 존재'
+                      : '전량 Ready'
+                  }
+                  tone={active.replicasReady < active.replicasDesired ? 'warn' : 'ok'}
+                />
+                <KpiTile
+                  label="에러율"
+                  value={formatPct(active.errorRatePct, 2)}
+                  hint={active.saturated ? '포화 — 타임아웃·거절 발생 구간' : '정상 범위'}
+                  tone={active.errorRatePct > ERROR_RATE_WARN_PCT ? 'danger' : 'ok'}
+                />
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                <div className="flex flex-col gap-1">
+                  <span className="text-muted-foreground text-xs">백분위 지연 (ms)</span>
+                  {poolTrend.data === null && poolTrend.error === null ? (
+                    <Skeleton className="h-56 w-full" />
+                  ) : latencyRows.length === 0 ? (
+                    <p className="py-8 text-center text-muted-foreground text-sm">
+                      표시할 데이터가 없다.
+                    </p>
+                  ) : (
+                    <ResponsiveContainer width="100%" height={220}>
+                      <LineChart data={latencyRows} margin={CHART_MARGIN}>
+                        <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                        <XAxis
+                          dataKey="time"
+                          type="number"
+                          domain={['dataMin', 'dataMax']}
+                          tickFormatter={formatClock}
+                          tick={{ fontSize: 12 }}
+                          className="fill-muted-foreground"
+                        />
+                        <YAxis
+                          domain={['auto', 'auto']}
+                          width={56}
+                          tick={{ fontSize: 12 }}
+                          className="fill-muted-foreground"
+                        />
+                        <Tooltip
+                          labelFormatter={(t) => formatClock(Number(t))}
+                          formatter={(value) => formatMs(Number(value))}
+                          contentStyle={TOOLTIP_STYLE}
+                        />
+                        <Legend wrapperStyle={{ fontSize: 12 }} />
+                        <Line
+                          type="monotone"
+                          dataKey="p50"
+                          name="p50"
+                          stroke="var(--metric-cpu)"
+                          strokeWidth={2}
+                          dot={false}
+                          connectNulls={false}
+                          isAnimationActive={false}
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="p95"
+                          name="p95"
+                          stroke="var(--metric-thermal)"
+                          strokeWidth={2}
+                          dot={false}
+                          connectNulls={false}
+                          isAnimationActive={false}
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="p99"
+                          name="p99"
+                          stroke="var(--metric-fault)"
+                          strokeWidth={2}
+                          dot={false}
+                          connectNulls={false}
+                          isAnimationActive={false}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  )}
+                </div>
+
+                <div className="flex flex-col gap-1">
+                  <span className="text-muted-foreground text-xs">큐 깊이 · 배치 크기</span>
+                  {poolTrend.data === null && poolTrend.error === null ? (
+                    <Skeleton className="h-56 w-full" />
+                  ) : loadRows.length === 0 ? (
+                    <p className="py-8 text-center text-muted-foreground text-sm">
+                      표시할 데이터가 없다.
+                    </p>
+                  ) : (
+                    <ResponsiveContainer width="100%" height={220}>
+                      <LineChart data={loadRows} margin={CHART_MARGIN}>
+                        <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                        <XAxis
+                          dataKey="time"
+                          type="number"
+                          domain={['dataMin', 'dataMax']}
+                          tickFormatter={formatClock}
+                          tick={{ fontSize: 12 }}
+                          className="fill-muted-foreground"
+                        />
+                        <YAxis
+                          domain={['auto', 'auto']}
+                          width={56}
+                          tick={{ fontSize: 12 }}
+                          className="fill-muted-foreground"
+                        />
+                        <Tooltip
+                          labelFormatter={(t) => formatClock(Number(t))}
+                          formatter={(value) => Number(value).toFixed(1)}
+                          contentStyle={TOOLTIP_STYLE}
+                        />
+                        <Legend wrapperStyle={{ fontSize: 12 }} />
+                        <Line
+                          type="monotone"
+                          dataKey="queue"
+                          name="큐 깊이"
+                          stroke="var(--metric-mem)"
+                          strokeWidth={2}
+                          dot={false}
+                          connectNulls={false}
+                          isAnimationActive={false}
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="batch"
+                          name="배치 크기"
+                          stroke="var(--metric-pod)"
+                          strokeWidth={2}
+                          dot={false}
+                          connectNulls={false}
+                          isAnimationActive={false}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 6. 클러스터 이벤트 */}
+      {state === null ? <Skeleton className="h-64 w-full" /> : <EventStream events={state.events} />}
+
+      <p className="text-muted-foreground text-xs">
+        서빙 지표는 하드웨어 신호에서 파생된다 — 사용률이 오르면 배치·큐가 커지고 지연이 따라
+        오르며, 부하 90% 를 넘긴 풀에서만 에러율이 유의미해진다.
+      </p>
+    </div>
+  );
+}
diff --git a/web/src/pages/gpu/GpuValidation.tsx b/web/src/pages/gpu/GpuValidation.tsx
new file mode 100644
index 0000000..4184a36
--- /dev/null
+++ b/web/src/pages/gpu/GpuValidation.tsx
@@ -0,0 +1,1319 @@
+// GpuValidation — Step 5 "GPU 사전검증 · 번인" (데모 전용 — demo off 는 안내 카드만).
+//
+// 재사용 검증 라인 한 페이지: 위쪽은 사전검증(구성 적합성 4항목 + 실시간 로그),
+// 아래쪽은 번인이다. 대상은 `?uuid=` 로 받고(유휴장비 관리의 [재사용 검증 시작]
+// 진입점), 지정이 없으면 시나리오 victim = 교체 노드다.
+//
+// 서사: 유휴 자산은 "구성은 멀쩡한데 번인이 ECC 를 잡아낸다"를, victim 은 노드
+// 교체 후 번인 1차 실패(Health 75, "재검증 필요 (Uncordon 보류)") → 재번인 →
+// 96 통과 → 재투입을 보여준다. 둘 다 "통과시키지 않는 장면"(관문 차단)이 핵심.
+//
+// 번인 폼(프로파일·지속시간·목표 사용률)은 서버 설정값을 초기값으로 받고
+// configure-burnin 으로 저장한다 — 저장하면 단계 길이·부하 곡선이 실제로 바뀐다.
+// 차트는 Explorer 의 CSP-안전 Recharts 셋업을 그대로 미러한다(isAnimationActive
+// false / contentStyle var(--popover) / step=max(15, floor(range/500))).
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Boxes,
+  ChevronRight,
+  Circle,
+  CircleCheck,
+  CircleX,
+  Clock,
+  Container,
+  Cpu,
+  Download,
+  Info,
+  Maximize2,
+  MonitorCog,
+  Network,
+  Play,
+  RefreshCw,
+  Server,
+  TriangleAlert,
+} from 'lucide-react';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { Link, useSearchParams } from 'react-router';
+import GateDiagram, { type GateStage } from '@/components/gpu/GateDiagram';
+import HealthGauge from '@/components/gpu/HealthGauge';
+import ReuseStepper from '@/components/gpu/ReuseStepper';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Slider } from '@/components/ui/slider';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDemo } from '@/hooks/demoContext';
+import { usePolledQuery } from '@/hooks/usePolledQuery';
+import { api } from '@/lib/api';
+import { type CheckItem, PHASE_LABELS, type ScenarioPhase } from '@/lib/demoApi';
+import { METRIC_GPU_UTIL, selector } from '@/lib/gpuMetrics';
+import { cn } from '@/lib/utils';
+import {
+  fetchValidation,
+  type ValidationDetail,
+  type ValidationItem,
+  type ValidationLog,
+  type ValidationRun,
+  validationMessage,
+} from '@/lib/validation';
+
+// 번인 프로파일 옵션 — B200 은 실장비 부재로 「시뮬레이션」 표기.
+const BURNIN_PROFILES = [
+  { value: 'High-Intensity-CUDA-v1', label: 'High-Intensity-CUDA-v1', simulated: false },
+  { value: 'B200-Blackwell-v1', label: 'B200-Blackwell-v1', simulated: true },
+] as const;
+
+// 번인 부하 곡선 — 최근 30분, 15s 폴링 (Explorer step 규약 미러).
+const CURVE_RANGE_SECONDS = 30 * 60;
+const CURVE_POLL_MS = 15_000;
+const MIN_STEP_SECONDS = 15;
+const TARGET_POINTS = 500;
+
+// 검증 상세 폴링 — 진행 중이면 2s(로그가 흘러야 한다), 아니면 15s.
+const DETAIL_POLL_ACTIVE_MS = 2_000;
+const DETAIL_POLL_IDLE_MS = 15_000;
+
+/** 교체 노드(victim)에 검증 회차가 존재하는 단계 — 그 전에는 교체할 개체가
+ *  아직 없어 서버가 빈 회차를 낸다(validation.go victimRuns). 기본 대상 선택에만
+ *  쓴다(판정은 서버 몫). */
+const VICTIM_RUN_PHASES: ScenarioPhase[] = [
+  'burnin-1',
+  'burnin-failed',
+  'burnin-2',
+  'ready-to-return',
+  'returned',
+];
+
+/** phase → 관문 다이어그램 3단 상태 매핑.
+ *  burnin-1/2·burnin-failed = 관문 active + 운영풀 blocked / ready-to-return =
+ *  관문 done / returned = 전부 done. 명세 외 단계는 보수적 가정: 교체 진행
+ *  (draining·replacing)은 K8s Ready 대기 + 풀 차단, 그 이전 단계는 전부 대기. */
+function gateStages(phase: ScenarioPhase): GateStage[] {
+  const make = (
+    k8s: GateStage['status'],
+    gate: GateStage['status'],
+    pool: GateStage['status'],
+  ): GateStage[] => [
+    { id: 'k8s-ready', label: 'Kubernetes Ready', status: k8s },
+    { id: 'gate', label: '사전 검증 관문', status: gate },
+    { id: 'pool', label: '운영 풀', status: pool },
+  ];
+  switch (phase) {
+    case 'burnin-1':
+    case 'burnin-failed':
+    case 'burnin-2':
+      return make('done', 'active', 'blocked');
+    case 'ready-to-return':
+      return make('done', 'done', 'idle');
+    case 'returned':
+      return make('done', 'done', 'done');
+    case 'draining':
+    case 'replacing':
+      return make('active', 'idle', 'blocked');
+    default:
+      return make('idle', 'idle', 'idle');
+  }
+}
+
+function StatusIcon({ status }: { status: ValidationItem['status'] }) {
+  if (status === 'pass') {
+    return <CircleCheck className="size-4 shrink-0" style={{ color: 'var(--metric-pod)' }} />;
+  }
+  if (status === 'warn') {
+    return <TriangleAlert className="size-4 shrink-0" style={{ color: 'var(--metric-thermal)' }} />;
+  }
+  if (status === 'fail') {
+    return <CircleX className="size-4 shrink-0" style={{ color: 'var(--metric-fault)' }} />;
+  }
+  if (status === 'running') {
+    return (
+      <span className="flex size-4 shrink-0 items-center justify-center">
+        <span className="size-2.5 animate-pulse rounded-full bg-primary" />
+      </span>
+    );
+  }
+  return <Circle className="size-4 shrink-0 text-muted-foreground/50" />;
+}
+
+// 검증 항목 상태 어휘 — 번인 체크리스트(CheckItem 4종)와 사전검증(5종)이 같은
+// 표현을 쓴다. 목업 배지 문구 그대로.
+const CHECK_STATUS_TEXT: Record<ValidationItem['status'], string> = {
+  pass: '통과',
+  warn: '주의',
+  fail: '실패',
+  running: '진행 중',
+  pending: '대기',
+};
+
+const CHECK_STATUS_COLOR: Record<ValidationItem['status'], string | undefined> = {
+  pass: 'var(--metric-pod)',
+  warn: 'var(--metric-thermal)',
+  fail: 'var(--metric-fault)',
+  running: undefined,
+  pending: undefined,
+};
+
+function StatusBadge({ status }: { status: ValidationItem['status'] }) {
+  const color = CHECK_STATUS_COLOR[status];
+  return (
+    <Badge
+      variant="outline"
+      className="gap-1"
+      style={
+        color
+          ? {
+              color,
+              borderColor: color,
+              backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`,
+            }
+          : undefined
+      }
+    >
+      <StatusIcon status={status} />
+      {CHECK_STATUS_TEXT[status]}
+    </Badge>
+  );
+}
+
+function formatTimeTick(unixSec: number): string {
+  return new Date(unixSec * 1000).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+/** 로그 타임스탬프 — 목업 "14:32:10" 형식(서버 시계 기준, EventStream 관례). */
+function formatLogTime(ms: number): string {
+  return new Date(ms).toLocaleTimeString('ko-KR', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+/** 실행 시각 — 목업 "2026.07.29 14:32:16" 형식. */
+function formatRanAt(ms: number): string {
+  const d = new Date(ms);
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}.${p(d.getMonth() + 1)}.${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+
+/** 소요 시간 — 목업 "(00:00:06)" 형식. */
+function formatDuration(sec: number): string {
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${p(Math.floor(sec / 3600))}:${p(Math.floor((sec % 3600) / 60))}:${p(sec % 60)}`;
+}
+
+/** 회차 전체 예상 소요(초) — 항목 계획 소요의 합. 서버가 항목마다 계획 소요를
+ *  싣기 때문에 미실행 상태에서도 낼 수 있다. */
+function plannedSeconds(run: ValidationRun): number {
+  return run.items.reduce((acc, item) => acc + (item.durationSec ?? 0), 0);
+}
+
+// ---- 화면 조각 ----
+
+/** 브레드크럼 — 목업 상단 경로. 이 화면에서만 쓰므로 페이지 로컬이다
+ *  (다른 화면이 필요해지면 그때 components/gpu/ 로 승격). */
+function Breadcrumb({ target }: { target: string }) {
+  const crumbs = ['자산 관리', '유휴장비 관리', target, '재사용 검증', '사전검증'];
+  return (
+    <nav aria-label="경로" className="flex flex-wrap items-center gap-1 text-muted-foreground text-xs">
+      {crumbs.map((crumb, index) => (
+        <span key={crumb} className="flex items-center gap-1">
+          {index > 0 ? <ChevronRight className="size-3 shrink-0" /> : null}
+          {index === 1 ? (
+            <Link to="/gpu/idle" className="hover:text-foreground hover:underline">
+              {crumb}
+            </Link>
+          ) : (
+            <span className={index === crumbs.length - 1 ? 'font-medium text-foreground' : undefined}>
+              {crumb}
+            </span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+/** 자산 요약 3칸 — 자산 · GPU 모델 · 클러스터. 목업처럼 칸마다 아이콘 타일을
+ *  왼쪽에 두고 세로 구분선으로 나눈다. */
+function AssetSummary({ detail }: { detail: ValidationDetail }) {
+  const cells = [
+    { label: '자산', value: `${detail.instance} / ${detail.device}`, Icon: Server },
+    { label: 'GPU 모델', value: detail.model, Icon: Cpu },
+    { label: '클러스터', value: detail.cluster, Icon: Network },
+  ];
+  return (
+    <Card className="gap-0 py-0">
+      <CardContent className="grid gap-3 p-5 sm:grid-cols-3">
+        {cells.map((cell, index) => (
+          <div
+            key={cell.label}
+            className={cn(
+              'flex items-center gap-3',
+              index > 0 ? 'sm:border-l sm:pl-5' : undefined,
+            )}
+          >
+            <span
+              className="flex size-10 shrink-0 items-center justify-center rounded-lg"
+              style={{
+                color: 'var(--metric-cpu)',
+                backgroundColor: 'color-mix(in srgb, var(--metric-cpu) 12%, transparent)',
+              }}
+            >
+              <cell.Icon className="size-5" />
+            </span>
+            <span className="flex min-w-0 flex-col gap-0.5">
+              <span className="text-muted-foreground text-xs">{cell.label}</span>
+              <span className="truncate font-semibold text-base">{cell.value}</span>
+            </span>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+// 항목 카테고리 아이콘 — 목업의 행머리 아이콘. 서버 item.id 로 고른다(모르는
+// id 는 기본 아이콘). 색은 판정색이 아니라 카테고리색이다 — 판정은 배지가 한다.
+const ITEM_ICON: Record<string, typeof Cpu> = {
+  driver: MonitorCog,
+  cuda: Boxes,
+  network: Network,
+  k8s: Container,
+  'k8s-ready': Container,
+};
+
+function ItemIcon({ id }: { id: string }) {
+  const Icon = ITEM_ICON[id] ?? Cpu;
+  return (
+    <span
+      className="flex size-8 shrink-0 items-center justify-center rounded-lg"
+      style={{
+        color: 'var(--metric-cpu)',
+        backgroundColor: 'color-mix(in srgb, var(--metric-cpu) 12%, transparent)',
+      }}
+    >
+      <Icon className="size-4" />
+    </span>
+  );
+}
+
+/** 검증 항목 표 — 행 클릭 시 항목 상세를 펼친다. */
+function ItemTable({ run, caption }: { run: ValidationRun; caption: string }) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  return (
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-muted/50 hover:bg-muted/50">
+            <TableHead>검증 항목</TableHead>
+            <TableHead className="w-28">현재 결과</TableHead>
+            <TableHead className="w-48">최근 실행 시간</TableHead>
+            <TableHead className="w-52">상세 정보</TableHead>
+            <TableHead className="w-10" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {run.items.map((item) => {
+            const open = openId === item.id;
+            return (
+              <Fragment key={item.id}>
+                <TableRow
+                  className="cursor-pointer"
+                  onClick={() => setOpenId(open ? null : item.id)}
+                >
+                  <TableCell>
+                    <div className="flex items-center gap-3">
+                      <ItemIcon id={item.id} />
+                      <div className="flex flex-col">
+                        <span className="font-medium text-sm">{item.label}</span>
+                        <span className="text-muted-foreground text-xs">{item.describe}</span>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge status={item.status} />
+                  </TableCell>
+                  <TableCell>
+                    {item.ranAt ? (
+                      <div className="flex flex-col text-xs tabular-nums">
+                        <span>{formatRanAt(item.ranAt)}</span>
+                        <span className="text-muted-foreground">
+                          ({formatDuration(item.durationSec ?? 0)})
+                        </span>
+                      </div>
+                    ) : (
+                      <span className="text-muted-foreground text-xs">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col text-xs">
+                      <span className="font-mono">{item.detail}</span>
+                      {item.detailSub ? (
+                        <span className="text-muted-foreground">{item.detailSub}</span>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <button
+                      type="button"
+                      aria-expanded={open}
+                      aria-label={`${item.label} 상세`}
+                      className="text-muted-foreground hover:text-foreground"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setOpenId(open ? null : item.id);
+                      }}
+                    >
+                      <ChevronRight
+                        className={cn('size-4 transition-transform', open ? 'rotate-90' : undefined)}
+                      />
+                    </button>
+                  </TableCell>
+                </TableRow>
+                {open ? (
+                  <TableRow className="bg-muted/30 hover:bg-muted/30">
+                    <TableCell colSpan={5}>
+                      <dl className="grid gap-2 text-xs sm:grid-cols-4">
+                        <div className="flex flex-col gap-0.5 sm:col-span-2">
+                          <dt className="text-muted-foreground">검증 내용</dt>
+                          <dd>{item.describe}</dd>
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                          <dt className="text-muted-foreground">측정 결과</dt>
+                          <dd className="font-mono">{item.detail}</dd>
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                          <dt className="text-muted-foreground">판정 근거</dt>
+                          <dd>{item.detailSub || '—'}</dd>
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                          <dt className="text-muted-foreground">실행 시각</dt>
+                          <dd className="tabular-nums">
+                            {item.ranAt ? formatRanAt(item.ranAt) : '—'}
+                          </dd>
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                          <dt className="text-muted-foreground">
+                            {item.ranAt ? '소요 시간' : '예상 소요'}
+                          </dt>
+                          <dd className="tabular-nums">
+                            {formatDuration(item.durationSec ?? 0)}
+                          </dd>
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                          <dt className="text-muted-foreground">상태</dt>
+                          <dd>{CHECK_STATUS_TEXT[item.status]}</dd>
+                        </div>
+                      </dl>
+                    </TableCell>
+                  </TableRow>
+                ) : null}
+              </Fragment>
+            );
+          })}
+        </TableBody>
+      </Table>
+      <p className="px-1 pt-2 text-muted-foreground text-[11px]">{caption}</p>
+    </>
+  );
+}
+
+/** 검증 개요 — 집계 4종은 서버 값 그대로 쓴다(화면이 다시 세지 않는다).
+ *  sub 는 목업의 "4 / 4" 아래 "100%" 처럼 타일 안에 들어가는 보조값이다. */
+function SummaryTile({
+  label,
+  value,
+  sub,
+  color,
+}: {
+  label: string;
+  value: string;
+  sub?: string;
+  color?: string;
+}) {
+  return (
+    <div
+      className="flex flex-col items-center justify-center gap-1 rounded-lg border px-1 py-3"
+      style={color ? { borderColor: `color-mix(in srgb, ${color} 35%, transparent)` } : undefined}
+    >
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <span className="font-bold text-2xl tabular-nums" style={color ? { color } : undefined}>
+        {value}
+      </span>
+      {sub ? <span className="text-muted-foreground text-[11px] tabular-nums">{sub}</span> : null}
+    </div>
+  );
+}
+
+/** 실시간 로그 패널 — 자동 스크롤 / 다운로드 / 확대. */
+function LogPanel({ log, target }: { log: ValidationLog[]; target: string }) {
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [expanded, setExpanded] = useState(false);
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!autoScroll || el === null || log.length === 0) return;
+    el.scrollTop = el.scrollHeight;
+  }, [autoScroll, log.length]);
+
+  function download() {
+    const text = log
+      .map((line) => `${formatLogTime(line.at)}\t[${line.level}] ${line.text}`)
+      .join('\n');
+    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `validation-${target.replace(/[^\w-]/g, '_')}-${new Date().toISOString().slice(0, 10)}.log`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <Card className="gap-0 py-0">
+      <CardContent className="flex flex-col gap-2 p-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="font-semibold text-sm">실시간 로그</span>
+          <span className="flex items-center gap-1 text-muted-foreground text-xs">
+            <span
+              className="size-1.5 rounded-full"
+              style={{ backgroundColor: 'var(--metric-pod)' }}
+            />
+            실시간
+          </span>
+          <div className="ml-auto flex flex-wrap items-center gap-2">
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
+              <input
+                type="checkbox"
+                className="size-3.5 [accent-color:var(--metric-cpu)]"
+                checked={autoScroll}
+                onChange={(e) => setAutoScroll(e.target.checked)}
+              />
+              자동 스크롤
+            </label>
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-8"
+              onClick={download}
+              disabled={log.length === 0}
+            >
+              <Download className="size-3.5" />
+              로그 다운로드
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-8 px-2"
+              aria-label={expanded ? '로그 축소' : '로그 확대'}
+              onClick={() => setExpanded((v) => !v)}
+            >
+              <Maximize2 className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+        <div
+          ref={boxRef}
+          className={cn(
+            'overflow-auto rounded-lg border bg-muted/40 p-4 font-mono text-xs leading-7',
+            expanded ? 'h-96' : 'h-48',
+          )}
+        >
+          {log.length === 0 ? (
+            <p className="py-8 text-center text-muted-foreground">
+              검증을 실행하면 로그가 여기에 쌓인다.
+            </p>
+          ) : (
+            log.map((line) => (
+              <div key={`${line.at}-${line.text}`} className="flex gap-3 whitespace-pre-wrap">
+                <span className="shrink-0 text-muted-foreground tabular-nums">
+                  {formatLogTime(line.at)}
+                </span>
+                <span
+                  className="shrink-0"
+                  style={{
+                    color:
+                      line.level === 'ERROR'
+                        ? 'var(--metric-fault)'
+                        : line.level === 'WARN'
+                          ? 'var(--metric-thermal)'
+                          : undefined,
+                  }}
+                >
+                  [{line.level}]
+                </span>
+                <span>{line.text}</span>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function GpuValidation() {
+  const { demoMode, state, act, refresh } = useDemo();
+  const [searchParams] = useSearchParams();
+
+  // 폼 로컬 상태 = "입력 중" 값만(null = 서버 값 그대로 따른다). 저장 성공 시
+  // null 로 되돌려, 화면 값이 서버 state 에서 다시 내려오는 것으로 반영을 확인한다.
+  const [profileChoice, setProfileChoice] = useState<string | null>(null);
+  const [durationChoice, setDurationChoice] = useState<number | null>(null);
+  const [targetChoice, setTargetChoice] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [actionNotice, setActionNotice] = useState<string | null>(null);
+  const [pollMs, setPollMs] = useState(DETAIL_POLL_ACTIVE_MS);
+
+  // victim util 곡선 — uuid 미확정(판별 중/demo off)이면 질의 0.
+  const victimUuid = state?.scenario.victim.uuid ?? '';
+  const curveQuery = usePolledQuery(async () => {
+    if (!victimUuid) return null;
+    const endSec = Math.floor(Date.now() / 1000);
+    const startSec = endSec - CURVE_RANGE_SECONDS;
+    const step = Math.max(MIN_STEP_SECONDS, Math.floor(CURVE_RANGE_SECONDS / TARGET_POINTS));
+    const res = await api.rangeQuery(
+      selector(METRIC_GPU_UTIL, { gpu_uuid: victimUuid }),
+      startSec,
+      endSec,
+      step,
+    );
+    return res.data;
+  }, CURVE_POLL_MS, [victimUuid]);
+
+  const curveRows = useMemo(() => {
+    const series = curveQuery.data?.result[0];
+    if (!series) return [];
+    return series.values.map(([t, v]) => ({ time: t, util: Number(v) }));
+  }, [curveQuery.data]);
+
+  // 검증 대상 — ?uuid= 지정분이 우선(유휴장비 관리의 [재사용 검증 시작] 진입).
+  //
+  // 지정이 없으면(사이드바 기본 진입) 시나리오 victim 이지만, 교체 전 단계에는
+  // victim 에 검증할 개체가 아직 없어 화면이 통째로 빈다(전 항목 대기 · 로그 0줄
+  // · 버튼 2개 비활성). 그때는 재사용 검증 라인에서 지금 돌고 있는 자산을 대신
+  // 연다 — 같은 화면을 ?uuid= 로 열었을 때와 동일한 장면이 나온다.
+  //
+  // 대신 여는 자산은 *처음 고른 것에 고정(pin)* 한다. 매 폴링마다 다시 고르면
+  // 그 자산의 검증이 끝나는 순간(= 발표자가 결과를 읽는 바로 그 시점) 목록의
+  // 다음 검증 중 자산으로 화면이 스스로 갈아탄다(라인 폭 6 · D=180s 라 30~45초
+  // 마다 1회).
+  //
+  // 고정을 푸는 기준은 하나다: **볼 것이 남아 있는가**.
+  //   · 진행 중(validating) · 통과(ready) · 실패(failed) = 볼 것이 있다 → 붙든다.
+  //     **검증 완료는 해제 사유가 아니다** — 완료된 판정과 로그가 이 장면의
+  //     결말이고, 그 상태에서 [사전검증 재실행] 이 열린다.
+  //   · 유휴 목록 이탈(운영 풀 재투입 · 리셋 · 재시딩) 또는 검증 기록 만료
+  //     (verdict=idle — 자동 착수분은 D+R=11분에 서버가 기록을 지운다) = 볼 것이
+  //     없다 → 다음 대상으로 넘긴다. 만료를 해제 사유에 넣지 않으면 화면이 그
+  //     자산에 붙박인 채 통째로 빈다(전 항목 대기 · 로그 0줄) — 이 폴백이 애초에
+  //     막으려던 바로 그 상태다.
+  const [pinnedUuid, setPinnedUuid] = useState('');
+  const paramUuid = searchParams.get('uuid') ?? '';
+  const victimHasRun = VICTIM_RUN_PHASES.includes(state?.scenario.phase ?? 'normal');
+  const idleList = state?.idle;
+  const pinned = pinnedUuid === '' ? undefined : idleList?.find((g) => g.uuid === pinnedUuid);
+  // 실패분도 후보다 — 실패 판정·로그도 완결된 장면이고("통과시키지 않는 장면"이
+  // 이 라인의 핵심), 이 줄이 없으면 라인에 완료분만 남은 순간 대상이 교체 노드로
+  // 떨어져 교체 전 단계에서 화면이 빈다.
+  const liveUuid =
+    pinned && pinned.validation.verdict !== 'idle'
+      ? pinnedUuid
+      : (idleList?.find((g) => g.validation.verdict === 'validating')?.uuid ??
+        idleList?.find((g) => g.validation.verdict === 'ready')?.uuid ??
+        idleList?.find((g) => g.validation.verdict === 'failed')?.uuid ??
+        '');
+  const targetUuid = paramUuid || (victimHasRun ? victimUuid : liveUuid || victimUuid);
+  const isVictim = targetUuid !== '' && targetUuid === victimUuid;
+
+  useEffect(() => {
+    if (liveUuid !== '' && liveUuid !== pinnedUuid) setPinnedUuid(liveUuid);
+  }, [liveUuid, pinnedUuid]);
+
+  // 대상이 바뀌면(고정 해제 · ?uuid= 이동 · victim 단계 진입) 이전 자산에 띄운
+  // 배너를 지운다 — 남겨 두면 A 자산에 띄운 "번인 테스트를 시작했다" 가 B 자산
+  // 화면 위에 그대로 남는다.
+  useEffect(() => {
+    setActionNotice(null);
+    setActionError(null);
+  }, [targetUuid]);
+
+  // 재구독 신호는 대상 uuid + *단계* 다 — 교체 노드의 회차 창과 액션 게이트
+  // 2종이 전부 단계 파생이라, 단계가 넘어간 순간 상세가 낡는다. 단계를 빼면
+  // 유휴 폴링 주기(15s) 동안 [운영 풀 재투입] 이 뜨지 않는다.
+  const detailQuery = usePolledQuery(async () => {
+    if (!targetUuid) return null;
+    try {
+      return await fetchValidation(targetUuid);
+    } catch (err) {
+      const message = validationMessage(err);
+      if (message === null) throw err; // 401 — 로그인 화면 전환이 처리한다
+      throw new Error(message);
+    }
+  }, pollMs, [targetUuid, state?.scenario.phase]);
+
+  const detail = detailQuery.data;
+  const runActive = detail?.precheck.active === true || detail?.burnin.active === true;
+  useEffect(() => {
+    setPollMs(runActive ? DETAIL_POLL_ACTIVE_MS : DETAIL_POLL_IDLE_MS);
+  }, [runActive]);
+
+  if (demoMode === null) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-8 w-56" />
+        <Skeleton className="h-28 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!demoMode) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>GPU 사전검증</CardTitle>
+          <CardDescription>데모 시나리오 전용 화면</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            이 화면은 데모 모드에서만 동작한다. 재사용 검증 라인(사전검증 → 번인
+            테스트 → 가용성 판정 → 재투입)을 시연하며, 실서비스 모드에서는
+            제공되지 않는다.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!state) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-8 w-56" />
+        <Skeleton className="h-28 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  const phase = state.scenario.phase;
+  const victim = state.scenario.victim;
+  const burnin = victim.burnin;
+
+  // 서버가 알려준 프로파일이 옵션 밖이면 옵션에 합류시킨다(표시 누락 방지).
+  const profileOptions = BURNIN_PROFILES.some((p) => p.value === burnin.profile)
+    ? [...BURNIN_PROFILES]
+    : burnin.profile
+      ? [{ value: burnin.profile, label: burnin.profile, simulated: false }, ...BURNIN_PROFILES]
+      : [...BURNIN_PROFILES];
+  const effectiveProfile = profileChoice ?? burnin.profile ?? profileOptions[0].value;
+  // 초기값은 서버 설정값 — 사용자가 손대면 그 입력값이 우선한다.
+  const effectiveDuration = durationChoice ?? (burnin.durationMin || 120);
+  const effectiveTarget = targetChoice ?? (burnin.targetUtilPct || 95);
+
+  const precheck = detail?.precheck;
+  const reuseBurnin = detail?.burnin;
+  const logLines = [...(precheck?.log ?? []), ...(reuseBurnin?.log ?? [])];
+
+  /** 현재 폼 값을 서버에 저장한다. 성공 시 로컬 입력값을 해제해 다음 폴링의
+   *  서버 값이 폼에 그대로 내려오는 것으로 반영을 확인한다. */
+  async function saveBurninConfig(): Promise<boolean> {
+    const outcome = await act('configure-burnin', {
+      profile: effectiveProfile,
+      durationMin: effectiveDuration,
+      targetUtilPct: effectiveTarget,
+    });
+    if (outcome.ok) {
+      setProfileChoice(null);
+      setDurationChoice(null);
+      setTargetChoice(null);
+      setSaved(true);
+      return true;
+    }
+    setSaved(false);
+    setActionError(
+      outcome.status === 409
+        ? `번인 설정 거부 — ${outcome.error}`
+        : `번인 설정 실패 (HTTP ${outcome.status}) — ${outcome.error}`,
+    );
+    return false;
+  }
+
+  async function onSaveProfile() {
+    setBusy(true);
+    setActionError(null);
+    await saveBurninConfig();
+    setBusy(false);
+  }
+
+  async function onStartBurnin() {
+    setBusy(true);
+    setActionError(null);
+    // 한 번의 조작으로 설정 저장 + 실행 — 저장이 거부되면 시작하지 않는다.
+    if (!(await saveBurninConfig())) {
+      setBusy(false);
+      return;
+    }
+    const outcome = await act('start-burnin');
+    setBusy(false);
+    // 거부 사유도 서버 문구 그대로다 — 화면이 사유를 지어내면 게이트 문구와
+    // 배너 문구가 갈라진다(가드가 낸 reason 이 곧 버튼 아래 안내다).
+    if (!outcome.ok) setActionError(outcome.error);
+  }
+
+  async function onReturnToService() {
+    setBusy(true);
+    setActionError(null);
+    const outcome = await act('return-to-service');
+    setBusy(false);
+    if (!outcome.ok) setActionError(outcome.error);
+  }
+
+  /** 사전검증 재실행 / 번인 테스트 시작 — 서버 액션 그대로.
+   *  성공 메시지도 버린 적이 없다: 착수 여부는 발표자가 화면에서 읽어야 한다. */
+  async function runValidationAction(action: 'start-precheck' | 'start-reuse-burnin') {
+    setBusy(true);
+    setActionError(null);
+    setActionNotice(null);
+    const outcome = await act(action, { uuid: targetUuid });
+    setBusy(false);
+    if (outcome.ok) {
+      setActionNotice(outcome.result.message);
+      detailQuery.refresh();
+      refresh();
+      return;
+    }
+    setActionError(outcome.error);
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb target={detail ? `${detail.instance} / ${detail.device}` : '—'} />
+
+      <div className="flex flex-col gap-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <h1 className="font-bold text-3xl">GPU 사전검증</h1>
+          {isVictim ? <Badge variant="outline">{PHASE_LABELS[phase]}</Badge> : null}
+          {detail && detail.idleDays > 0 ? (
+            <Badge variant="secondary">유휴 {detail.idleDays}일</Badge>
+          ) : null}
+        </div>
+        <p className="text-muted-foreground text-sm">
+          드라이버, CUDA, 네트워크, Kubernetes 구성 적합성을 검증합니다.
+        </p>
+      </div>
+
+      {actionError ? (
+        <Alert variant="destructive">
+          <AlertDescription>{actionError}</AlertDescription>
+        </Alert>
+      ) : null}
+      {actionNotice ? (
+        <Alert>
+          <Info className="size-4" />
+          <AlertDescription>{actionNotice}</AlertDescription>
+        </Alert>
+      ) : null}
+      {detailQuery.error ? (
+        <p role="alert" className="text-destructive text-sm">
+          {detailQuery.error}
+        </p>
+      ) : null}
+
+      {/* 1. 재사용 4단계 스테퍼 — ReuseStepper 는 3개 화면 공용이라 손대지 않고,
+          목업의 큰 번호 원(≈40px)만 이 화면에서 덧입힌다. 셀렉터가 빗나가면
+          기본 크기로 되돌아갈 뿐이라 깨지지 않는다. */}
+      <Card className="gap-0 py-0">
+        <CardContent className="overflow-x-auto p-5 [&_span.size-8]:size-10 [&_span.size-8]:text-base">
+          {detail ? (
+            <ReuseStepper steps={detail.steps} />
+          ) : (
+            <Skeleton className="h-16 w-full" />
+          )}
+        </CardContent>
+      </Card>
+
+      {!detail ? (
+        <Skeleton className="h-80 w-full" />
+      ) : (
+        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
+          <div className="flex flex-col gap-4">
+            {/* 2. 자산 요약 3칸 */}
+            <AssetSummary detail={detail} />
+
+            {/* 3. 검증 항목 4행 */}
+            <Card className="gap-0 py-0">
+              <CardContent className="p-4">
+                <h2 className="pb-3 font-semibold text-base">검증 항목</h2>
+                {/* 각주 — 확장행은 접힌 행과 같은 값을 펼쳐 보여줄 뿐이라(새
+                    정보는 서버 ValidationItem 스키마 확장이 선행돼야 한다)
+                    "상세 결과"를 약속하지 않는 문구로 좁혔다. */}
+                <ItemTable
+                  run={detail.precheck}
+                  caption="* 검증은 순차적으로 실행되며, 항목을 클릭하면 판정 근거를 펼쳐 볼 수 있습니다."
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 4. 검증 개요 */}
+          <Card className="gap-0 py-0">
+            <CardContent className="flex flex-col gap-3 p-5">
+              <h2 className="font-semibold text-lg">검증 개요</h2>
+              <div className="grid grid-cols-4 gap-2">
+                <SummaryTile
+                  label="전체 항목"
+                  value={`${detail.precheck.passed + detail.precheck.warned + detail.precheck.failed} / ${detail.precheck.total}`}
+                  sub={`${Math.round(detail.precheck.progress * 100)}%`}
+                />
+                <SummaryTile
+                  label="통과"
+                  value={String(detail.precheck.passed)}
+                  color="var(--metric-pod)"
+                />
+                <SummaryTile
+                  label="주의"
+                  value={String(detail.precheck.warned)}
+                  color="var(--metric-thermal)"
+                />
+                <SummaryTile
+                  label="실패"
+                  value={String(detail.precheck.failed)}
+                  color="var(--metric-fault)"
+                />
+              </div>
+
+              {/* 예상 소요는 서버 계획(항목별 계획 소요 합)이다 — 화면이 숫자를
+                  지어내면 실행 후 값과 어긋난다. 목업은 여기에 진행바를 두지
+                  않는다(진행률은 위 "전체 항목" 타일이 이미 말한다). */}
+              <div className="flex items-center justify-between rounded-lg border px-3 py-2.5">
+                <span className="flex items-center gap-1.5 text-muted-foreground text-xs">
+                  <Clock className="size-4" />
+                  예상 소요 시간
+                </span>
+                <span className="flex flex-col items-end">
+                  <span className="font-bold text-lg tabular-nums">
+                    {plannedSeconds(detail.precheck)}초
+                  </span>
+                  <span className="text-[11px] text-muted-foreground">
+                    데모 압축 — 실장비는 분 단위
+                  </span>
+                </span>
+              </div>
+
+              {/* 버튼 활성 조건 = 서버 게이트. 화면이 조건을 다시 유도하면 서버가
+                  거부하는 상태에서 버튼이 살아 있어 시연 중 오류 배너가 뜬다. */}
+              <Button
+                variant="outline"
+                className="h-11 border-2 font-semibold text-base"
+                style={{ color: 'var(--metric-cpu)', borderColor: 'var(--metric-cpu)' }}
+                onClick={() => runValidationAction('start-precheck')}
+                disabled={busy || !detail.precheckGate.allowed}
+              >
+                <RefreshCw className="size-4" />
+                사전검증 재실행
+              </Button>
+              <Button
+                className="h-11 font-semibold text-base"
+                style={{ backgroundColor: 'var(--metric-cpu)' }}
+                onClick={() => runValidationAction('start-reuse-burnin')}
+                disabled={busy || !detail.burninGate.allowed}
+              >
+                <Play className="size-4" />
+                번인 테스트 시작
+              </Button>
+              <p className="flex items-start gap-1.5 text-muted-foreground text-xs">
+                <Info className="mt-0.5 size-3.5 shrink-0" />
+                {detail.burninGate.reason}
+              </p>
+              {/* 교체 노드는 두 버튼이 같은 사유로 잠기고 아래 번인 섹션이 이어
+                  설명한다 — 같은 문장을 두 번 쓰지 않는다. */}
+              {detail.precheckGate.allowed || isVictim ? null : (
+                <p className="pl-5 text-muted-foreground text-xs">
+                  사전검증 재실행 — {detail.precheckGate.reason}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* 5. 실시간 로그 */}
+      <LogPanel log={logLines} target={detail ? `${detail.instance}-${detail.device}` : 'gpu'} />
+
+      {/* 6. 번인 테스트 (유휴 자산) — victim 은 아래 시나리오 섹션이 담당한다 */}
+      {!isVictim && reuseBurnin && reuseBurnin.startedAt ? (
+        <Card className="gap-0 py-0">
+          <CardContent className="flex flex-col gap-3 p-4">
+            <div className="flex flex-wrap items-center gap-2">
+              <h2 className="font-semibold text-base">번인 테스트</h2>
+              <Badge variant="outline">
+                {reuseBurnin.active
+                  ? `진행 중 ${Math.round(reuseBurnin.progress * 100)}%`
+                  : reuseBurnin.verdict === 'fail'
+                    ? '실패 — 재투입 불가'
+                    : '통과 — 재투입 가능'}
+              </Badge>
+            </div>
+            <Progress value={reuseBurnin.progress * 100} />
+            <ItemTable
+              run={reuseBurnin}
+              caption="* 고부하 스트레스 항목 — 구성 검증이 잡지 못하는 결함을 부하에서 잡아낸다."
+            />
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {/* 7. 이하 교체 노드(victim) 번인 검증 — 런북 Step 5 */}
+      {isVictim ? (
+        <>
+          <Card>
+            <CardHeader>
+              <CardTitle>검증 관문</CardTitle>
+              <CardDescription>노드 교체 후 재투입 전 관문 상태</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3">
+              <GateDiagram stages={gateStages(phase)} />
+              <p className="text-muted-foreground text-xs">
+                검증 전 운영 투입 원천 차단 — K8s Ready 를 맹신하지 않는다
+              </p>
+            </CardContent>
+          </Card>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            {/* 번인 프로파일 폼 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>번인 프로파일</CardTitle>
+                <CardDescription>고부하 스트레스 검증 실행 설정</CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-4">
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-muted-foreground text-xs">프로파일</span>
+                  <Select
+                    value={effectiveProfile}
+                    onValueChange={(v) => {
+                      setProfileChoice(v);
+                      setSaved(false);
+                    }}
+                    disabled={burnin.active || busy}
+                  >
+                    <SelectTrigger className="w-full" aria-label="번인 프로파일">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {profileOptions.map((p) => (
+                        <SelectItem key={p.value} value={p.value}>
+                          <span className="flex items-center gap-2">
+                            {p.label}
+                            {p.simulated ? <Badge variant="secondary">시뮬레이션</Badge> : null}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-muted-foreground text-xs">
+                    지속시간 —{' '}
+                    <span className="font-medium text-foreground">{effectiveDuration}분</span>
+                  </span>
+                  <Slider
+                    min={30}
+                    max={180}
+                    step={5}
+                    value={[effectiveDuration]}
+                    onValueChange={(v) => {
+                      setDurationChoice(v[0] ?? 120);
+                      setSaved(false);
+                    }}
+                    disabled={burnin.active || busy}
+                    aria-label="번인 지속시간(분)"
+                  />
+                </div>
+
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-muted-foreground text-xs">
+                    목표 사용률 —{' '}
+                    <span className="font-medium text-foreground">{effectiveTarget}%</span>
+                  </span>
+                  <Slider
+                    min={80}
+                    max={100}
+                    step={1}
+                    value={[effectiveTarget]}
+                    onValueChange={(v) => {
+                      setTargetChoice(v[0] ?? 95);
+                      setSaved(false);
+                    }}
+                    disabled={burnin.active || busy}
+                    aria-label="번인 목표 사용률(%)"
+                  />
+                </div>
+
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-muted-foreground text-xs">대상 (교체 노드 고정)</span>
+                  <div className="rounded-md border bg-muted/40 px-3 py-2 font-mono text-sm">
+                    {victim.instance} · {victim.device} · {victim.model}
+                  </div>
+                </div>
+
+                {burnin.active ? (
+                  <div className="flex flex-col gap-1.5">
+                    <span className="text-muted-foreground text-xs">
+                      번인 진행 중 — {Math.round(burnin.progress)}%
+                    </span>
+                    <Progress value={burnin.progress} />
+                    <span className="text-muted-foreground text-xs">
+                      적용 중: 프로파일 {burnin.profile} · 목표 {burnin.targetUtilPct}% · 지속{' '}
+                      {burnin.durationMin}분
+                    </span>
+                  </div>
+                ) : null}
+
+                <div className="flex flex-wrap items-center gap-2">
+                  {/* configure-burnin 은 단계 가드가 없다(파라미터 범위만 본다).
+                      진행 중 잠금은 서버 가드 추측이 아니라 화면의 명시 규칙 —
+                      도는 창의 길이를 바꾸면 진행률이 튄다. */}
+                  <Button variant="outline" onClick={onSaveProfile} disabled={busy || burnin.active}>
+                    프로파일 저장
+                  </Button>
+                  {/* 재번인 활성 조건 = 서버 게이트. 화면이 burnin.active 로
+                      다시 유도하면 ready-to-return · returned 에서 버튼이 살아
+                      있는 채 409 를 받는다(상세 도착 전에는 잠근다). */}
+                  <Button onClick={onStartBurnin} disabled={busy || !detail?.restartBurninGate.allowed}>
+                    번인 시작
+                  </Button>
+                  {saved && !burnin.active ? (
+                    <span className="text-xs" style={{ color: 'var(--metric-pod)' }}>
+                      저장됨 — 프로파일 {burnin.profile} · 목표 {burnin.targetUtilPct}% · 지속{' '}
+                      {burnin.durationMin}분
+                    </span>
+                  ) : null}
+                </div>
+                {detail && !detail.restartBurninGate.allowed ? (
+                  <p className="flex items-start gap-1.5 text-muted-foreground text-xs">
+                    <Info className="mt-0.5 size-3.5 shrink-0" />
+                    번인 시작 — {detail.restartBurninGate.reason}
+                  </p>
+                ) : null}
+              </CardContent>
+            </Card>
+
+            {/* 번인 체크리스트 7종 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  번인 체크리스트
+                  {burnin.attempt > 0 ? (
+                    <Badge variant="outline">{burnin.attempt}차 시도</Badge>
+                  ) : null}
+                </CardTitle>
+                <CardDescription>스트레스 항목별 판정</CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-2">
+                {burnin.checklist.length === 0 ? (
+                  <p className="py-6 text-center text-muted-foreground text-sm">
+                    번인 시작 전 — 체크 항목이 준비되면 표시된다.
+                  </p>
+                ) : (
+                  burnin.checklist.map((item: CheckItem) => (
+                    <div
+                      key={item.id}
+                      className="flex items-center gap-2 rounded-md border px-3 py-2"
+                    >
+                      <StatusIcon status={item.status} />
+                      <span className="text-sm">{item.label}</span>
+                      <span className="ml-auto text-muted-foreground text-xs">
+                        {CHECK_STATUS_TEXT[item.status]}
+                      </span>
+                    </div>
+                  ))
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            {/* Health 게이지 + 판정 근거 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Health 판정</CardTitle>
+                <CardDescription>100점 만점 — 85점 이상 통과</CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-wrap items-center justify-center gap-6">
+                <HealthGauge score={victim.health.score} verdict={burnin.verdict} />
+                <div className="flex min-w-52 flex-1 flex-col gap-2">
+                  <span className="text-muted-foreground text-xs">판정 근거 (감점 항목)</span>
+                  {victim.health.deductions.length === 0 ? (
+                    <p className="text-muted-foreground text-sm">감점 항목 없음</p>
+                  ) : (
+                    victim.health.deductions.map((d) => (
+                      <div
+                        key={d.code}
+                        className="flex items-start justify-between gap-2 rounded-md border px-3 py-2"
+                      >
+                        <div className="flex flex-col">
+                          <span className="text-sm">{d.message}</span>
+                          <span className="font-mono text-muted-foreground text-xs">{d.code}</span>
+                        </div>
+                        <span
+                          className="font-semibold text-sm tabular-nums"
+                          style={{ color: 'var(--metric-fault)' }}
+                        >
+                          -{d.penalty}
+                        </span>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 번인 부하 곡선 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>번인 부하 곡선</CardTitle>
+                <CardDescription>
+                  {victim.instance} · {victim.device} 사용률 — 최근 30분 · 15초 갱신
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {curveQuery.data === null && curveQuery.error === null ? (
+                  <Skeleton className="h-60 w-full" />
+                ) : curveRows.length === 0 ? (
+                  <p className="py-8 text-center text-muted-foreground text-sm">
+                    표시할 데이터가 없다.
+                  </p>
+                ) : (
+                  <ResponsiveContainer width="100%" height={240}>
+                    <LineChart data={curveRows} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
+                      <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                      <XAxis
+                        dataKey="time"
+                        type="number"
+                        domain={['dataMin', 'dataMax']}
+                        tickFormatter={formatTimeTick}
+                        tick={{ fontSize: 12 }}
+                        className="fill-muted-foreground"
+                      />
+                      <YAxis
+                        domain={[0, 100]}
+                        width={40}
+                        tick={{ fontSize: 12 }}
+                        className="fill-muted-foreground"
+                      />
+                      <Tooltip
+                        labelFormatter={(t) => formatTimeTick(Number(t))}
+                        formatter={(value) => [`${Number(value).toFixed(1)}%`, '사용률']}
+                        contentStyle={{
+                          backgroundColor: 'var(--popover)',
+                          borderColor: 'var(--border)',
+                          color: 'var(--popover-foreground)',
+                          fontSize: 12,
+                        }}
+                      />
+                      <ReferenceLine
+                        y={burnin.targetUtilPct || 95}
+                        stroke="var(--metric-thermal)"
+                        strokeDasharray="4 4"
+                        label={{
+                          value: `목표 ${burnin.targetUtilPct || 95}%`,
+                          position: 'insideTopRight',
+                          fill: 'var(--muted-foreground)',
+                          fontSize: 11,
+                        }}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="util"
+                        name="사용률"
+                        stroke="var(--metric-gpu)"
+                        strokeWidth={2}
+                        dot={false}
+                        connectNulls={false}
+                        isAnimationActive={false}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 재투입 CTA — 노출 조건도 서버 게이트다(화면이 단계로 다시 유도하지
+              않는다). 복귀 완료 안내(returned)는 액션이 아니라 상태 표시다. */}
+          {detail?.returnGate.allowed ? (
+            <Card style={{ borderColor: 'var(--metric-pod)' }}>
+              <CardContent className="flex flex-col items-center gap-3 py-6">
+                <p className="text-muted-foreground text-sm">
+                  Health {Math.round(victim.health.score)}점 — 검증 관문 통과. 운영 풀 재투입이
+                  가능하다.
+                </p>
+                <Button
+                  size="lg"
+                  className="h-12 w-full max-w-md text-base"
+                  onClick={onReturnToService}
+                  disabled={busy}
+                >
+                  운영 풀 재투입
+                </Button>
+              </CardContent>
+            </Card>
+          ) : null}
+          {phase === 'returned' ? (
+            <Alert>
+              <CircleCheck className="size-4" style={{ color: 'var(--metric-pod)' }} />
+              <AlertTitle>운영 풀 복귀 완료</AlertTitle>
+              <AlertDescription>
+                검증을 통과한 노드가 운영 풀에 재투입됐다 — Uncordon 완료.
+              </AlertDescription>
+            </Alert>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..bfa8d70
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 0000000..5b083df
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/web/tsconfig.tsbuildinfo b/web/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..9e7e088
--- /dev/null
+++ b/web/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"version":"7.0.2","root":["./src/app.tsx","./src/main.tsx","./src/auth/authcontext.tsx","./src/components/gpu/activemonitoring.tsx","./src/components/gpu/alerttimeline.tsx","./src/components/gpu/assistantbubble.tsx","./src/components/gpu/collectdonut.tsx","./src/components/gpu/contactbubble.tsx","./src/components/gpu/csplogo.tsx","./src/components/gpu/csprollupcards.tsx","./src/components/gpu/eventfeed.tsx","./src/components/gpu/eventstream.tsx","./src/components/gpu/faulttypebar.tsx","./src/components/gpu/fleetfilterbar.tsx","./src/components/gpu/fleetheatmap.tsx","./src/components/gpu/gatediagram.tsx","./src/components/gpu/gpudevicecard.tsx","./src/components/gpu/gpumodelbar.tsx","./src/components/gpu/healthgauge.tsx","./src/components/gpu/idledonut.tsx","./src/components/gpu/idlereusedrawer.tsx","./src/components/gpu/incidentactionlist.tsx","./src/components/gpu/incidentflow.tsx","./src/components/gpu/kpitile.tsx","./src/components/gpu/livestrip.tsx","./src/components/gpu/modelutilchart.tsx","./src/components/gpu/nodedrillsheet.tsx","./src/components/gpu/nodegpupanel.tsx","./src/components/gpu/remediationstepper.tsx","./src/components/gpu/reusestepper.tsx","./src/components/gpu/scoringfunnel.tsx","./src/components/gpu/situationboard.tsx","./src/components/gpu/slopanel.tsx","./src/components/gpu/sparkline.tsx","./src/components/gpu/statusbanner.tsx","./src/components/gpu/tenantdonut.tsx","./src/components/gpu/topgputable.tsx","./src/components/gpu/topologygraph.tsx","./src/components/gpu/utillegend.tsx","./src/components/gpu/victimmetricchart.tsx","./src/components/layout/headerextras.tsx","./src/components/layout/shell.tsx","./src/components/ui/alert.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/command.tsx","./src/components/ui/dialog.tsx","./src/components/ui/hover-card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/popover.tsx","./src/components/ui/progress.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sheet.tsx","./src/components/ui/sidebar.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/slider.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/hooks/democontext.ts","./src/hooks/use-mobile.ts","./src/hooks/usebuildinfo.ts","./src/hooks/usedemostatus.ts","./src/hooks/usefleet.ts","./src/hooks/useliveseries.ts","./src/hooks/usepolledquery.ts","./src/hooks/usevictimseries.ts","./src/lib/api.ts","./src/lib/branding.ts","./src/lib/demoapi.ts","./src/lib/fleetfacts.ts","./src/lib/gpumetrics.ts","./src/lib/navigation.ts","./src/lib/nodeasset.ts","./src/lib/utils.ts","./src/lib/validation.ts","./src/pages/explorer.tsx","./src/pages/login.tsx","./src/pages/map.tsx","./src/pages/overview.tsx","./src/pages/gpu/gpuassistant.tsx","./src/pages/gpu/gpuefficiency.tsx","./src/pages/gpu/gpuhealth.tsx","./src/pages/gpu/gpuidle.tsx","./src/pages/gpu/gpuincident.tsx","./src/pages/gpu/gpulayout.tsx","./src/pages/gpu/gpuoverview.tsx","./src/pages/gpu/gpuremediation.tsx","./src/pages/gpu/gpuroadmap.tsx","./src/pages/gpu/gpuruleset.tsx","./src/pages/gpu/gpuserving.tsx","./src/pages/gpu/gpuvalidation.tsx"],"packageJsons":["./node_modules/.pnpm/@radix-ui+react-accessible-icon@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@t_4526d9cce9bc16967c742c781445172d/node_modules/@radix-ui/react-accessible-icon/package.json","./node_modules/.pnpm/@radix-ui+react-accordion@1.2.18_@types+react-dom@19.2.3_@types+react@19.2.17__@types+r_6598816f6ece413f399b25530b8b1959/node_modules/@radix-ui/react-accordion/package.json","./node_modules/.pnpm/@radix-ui+react-alert-dialog@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@type_de2dcecb43f179bc364eac794aacef25/node_modules/@radix-ui/react-alert-dialog/package.json","./node_modules/.pnpm/@radix-ui+react-arrow@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_4564d4aeead112bf341d3f32e31d7980/node_modules/@radix-ui/react-arrow/package.json","./node_modules/.pnpm/@radix-ui+react-aspect-ratio@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@type_0163fd11df5d93e93164cd0dc3e38c8e/node_modules/@radix-ui/react-aspect-ratio/package.json","./node_modules/.pnpm/@radix-ui+react-avatar@1.2.4_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_6a533ea4dc63fb1d11e9f9824ee96a89/node_modules/@radix-ui/react-avatar/package.json","./node_modules/.pnpm/@radix-ui+react-checkbox@1.3.9_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_314b715aaa41f9d689db74f0f2e88755/node_modules/@radix-ui/react-checkbox/package.json","./node_modules/.pnpm/@radix-ui+react-collapsible@1.1.18_@types+react-dom@19.2.3_@types+react@19.2.17__@types_e4d5d33ddc5b9b9a7cc23593405888f6/node_modules/@radix-ui/react-collapsible/package.json","./node_modules/.pnpm/@radix-ui+react-context-menu@2.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types_b473c0ab0f35d2440dc242db80965956/node_modules/@radix-ui/react-context-menu/package.json","./node_modules/.pnpm/@radix-ui+react-context@1.2.1_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-context/package.json","./node_modules/.pnpm/@radix-ui+react-dialog@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+reac_d2586842720144517f0d0b1529e46376/node_modules/@radix-ui/react-dialog/package.json","./node_modules/.pnpm/@radix-ui+react-direction@1.1.3_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-direction/package.json","./node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17___5c8f3e6e76ce47c058351a084b46994d/node_modules/@radix-ui/react-dismissable-layer/package.json","./node_modules/.pnpm/@radix-ui+react-dropdown-menu@2.1.22_@types+react-dom@19.2.3_@types+react@19.2.17__@typ_96c14e467b4dac0e9372e3b8059d2d93/node_modules/@radix-ui/react-dropdown-menu/package.json","./node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types_64c0dd537bfd5c932deab82f76993003/node_modules/@radix-ui/react-focus-scope/package.json","./node_modules/.pnpm/@radix-ui+react-form@0.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@_e63c5ce4b10cfd67ff318863d2a73415/node_modules/@radix-ui/react-form/package.json","./node_modules/.pnpm/@radix-ui+react-hover-card@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+_e5b71d1a5a95228c901e52f2f93fbbf7/node_modules/@radix-ui/react-hover-card/package.json","./node_modules/.pnpm/@radix-ui+react-label@2.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_1a71cc2d227950086603d33e7dfe5bc7/node_modules/@radix-ui/react-label/package.json","./node_modules/.pnpm/@radix-ui+react-menu@2.1.22_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@_dbe44cd30a3ccab7b832a5aca4038762/node_modules/@radix-ui/react-menu/package.json","./node_modules/.pnpm/@radix-ui+react-menubar@1.1.22_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_a4a0fe7147084946d95ca7358cd7f58f/node_modules/@radix-ui/react-menubar/package.json","./node_modules/.pnpm/@radix-ui+react-navigation-menu@1.2.20_@types+react-dom@19.2.3_@types+react@19.2.17__@t_d903a2260494b0a193aaff13a908358b/node_modules/@radix-ui/react-navigation-menu/package.json","./node_modules/.pnpm/@radix-ui+react-one-time-password-field@0.1.14_@types+react-dom@19.2.3_@types+react@19._6c9befcab9959580f407486bb9bc5695/node_modules/@radix-ui/react-one-time-password-field/package.json","./node_modules/.pnpm/@radix-ui+react-password-toggle-field@0.1.9_@types+react-dom@19.2.3_@types+react@19.2.1_30190fd1e33b28f891c25f5b70fe563d/node_modules/@radix-ui/react-password-toggle-field/package.json","./node_modules/.pnpm/@radix-ui+react-popover@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_8de20cccc6806677ce56ebb2c4924f2c/node_modules/@radix-ui/react-popover/package.json","./node_modules/.pnpm/@radix-ui+react-popper@1.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_242911bd902ac0021e572cadb46a51fb/node_modules/@radix-ui/react-popper/package.json","./node_modules/.pnpm/@radix-ui+react-portal@1.1.15_@types+react-dom@19.2.3_@types+react@19.2.17__@types+reac_835fdb50e921ab143bf8543839f816a2/node_modules/@radix-ui/react-portal/package.json","./node_modules/.pnpm/@radix-ui+react-primitive@2.1.8_@types+react-dom@19.2.3_@types+react@19.2.17__@types+re_5a133ce654fa3debbe1f74a46e43e709/node_modules/@radix-ui/react-primitive/package.json","./node_modules/.pnpm/@radix-ui+react-progress@1.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+re_fdee46bb6a58af6641570709ad434774/node_modules/@radix-ui/react-progress/package.json","./node_modules/.pnpm/@radix-ui+react-radio-group@1.4.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+_7a1ca473fd53e55e6b70c05b7875acfb/node_modules/@radix-ui/react-radio-group/package.json","./node_modules/.pnpm/@radix-ui+react-roving-focus@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17__@type_ccda8ed45b24973ecec7e95cd3413fd3/node_modules/@radix-ui/react-roving-focus/package.json","./node_modules/.pnpm/@radix-ui+react-scroll-area@1.2.16_@types+react-dom@19.2.3_@types+react@19.2.17__@types_23c83300cd9ee7dca254d8d327259682/node_modules/@radix-ui/react-scroll-area/package.json","./node_modules/.pnpm/@radix-ui+react-select@2.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_f2fde808296672bcd424df003eb70e3e/node_modules/@radix-ui/react-select/package.json","./node_modules/.pnpm/@radix-ui+react-separator@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@types+r_586c9cebfb66f86c7f19b74b458f4529/node_modules/@radix-ui/react-separator/package.json","./node_modules/.pnpm/@radix-ui+react-slider@1.4.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_6ea08df645c860796433f816a8ebb36d/node_modules/@radix-ui/react-slider/package.json","./node_modules/.pnpm/@radix-ui+react-slot@1.3.1_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-slot/package.json","./node_modules/.pnpm/@radix-ui+react-switch@1.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_ded3f1d08d07b9b90a2492749639a809/node_modules/@radix-ui/react-switch/package.json","./node_modules/.pnpm/@radix-ui+react-tabs@1.1.19_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@_531d8d66fb0d0af1d046c6792e4fa5f5/node_modules/@radix-ui/react-tabs/package.json","./node_modules/.pnpm/@radix-ui+react-toast@1.2.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_f65e7017b6d0e3ac9d52c6c92cc6d862/node_modules/@radix-ui/react-toast/package.json","./node_modules/.pnpm/@radix-ui+react-toggle-group@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17__@type_fc0c71cbfed76ce65911ff90d3e93a50/node_modules/@radix-ui/react-toggle-group/package.json","./node_modules/.pnpm/@radix-ui+react-toggle@1.1.16_@types+react-dom@19.2.3_@types+react@19.2.17__@types+reac_7bd677ec4d4b2da648b71747d0873161/node_modules/@radix-ui/react-toggle/package.json","./node_modules/.pnpm/@radix-ui+react-toolbar@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_8c2698d12b76c38d23e1dc6203071c25/node_modules/@radix-ui/react-toolbar/package.json","./node_modules/.pnpm/@radix-ui+react-tooltip@1.2.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_41e436f8be643b53d00faca403cd0c2a/node_modules/@radix-ui/react-tooltip/package.json","./node_modules/.pnpm/@radix-ui+react-visually-hidden@1.2.9_@types+react-dom@19.2.3_@types+react@19.2.17__@ty_4961a2cca0723cefd8e6bef967bae484/node_modules/@radix-ui/react-visually-hidden/package.json","./node_modules/.pnpm/@radix-ui+rect@1.1.3/node_modules/@radix-ui/rect/package.json","./node_modules/.pnpm/@reduxjs+toolkit@2.12.0_react-redux@9.3.0_@types+react@19.2.17_react@19.2.8_redux@5.0.1__react@19.2.8/node_modules/@reduxjs/toolkit/package.json","./node_modules/.pnpm/@types+d3-path@3.1.1/node_modules/@types/d3-path/package.json","./node_modules/.pnpm/@types+d3-scale@4.0.9/node_modules/@types/d3-scale/package.json","./node_modules/.pnpm/@types+d3-shape@3.1.8/node_modules/@types/d3-shape/package.json","./node_modules/.pnpm/@types+d3-time@3.0.4/node_modules/@types/d3-time/package.json","./node_modules/.pnpm/@types+node@26.1.1/node_modules/@types/node/package.json","./node_modules/.pnpm/@types+react-dom@19.2.3_@types+react@19.2.17/node_modules/@types/react-dom/package.json","./node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/package.json","./node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/package.json","./node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/package.json","./node_modules/.pnpm/cmdk@1.1.1_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@19.2.17_react-dom_60d538ac8b3b3d77a9a153b095ee057f/node_modules/cmdk/package.json","./node_modules/.pnpm/cookie-es@3.1.1/node_modules/cookie-es/package.json","./node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/package.json","./node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/package.json","./node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/package.json","./node_modules/.pnpm/decimal.js-light@2.5.1/node_modules/decimal.js-light/package.json","./node_modules/.pnpm/immer@11.1.15/node_modules/immer/package.json","./node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/package.json","./node_modules/.pnpm/lucide-react@1.26.0_react@19.2.8/node_modules/lucide-react/package.json","./node_modules/.pnpm/radix-ui@1.6.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@19.2.17_react_ebe17dce4a4869ec5f99870736b255ff/node_modules/radix-ui/package.json","./node_modules/.pnpm/react-dom@19.2.8_react@19.2.8/node_modules/react-dom/package.json","./node_modules/.pnpm/react-is@19.2.8/node_modules/react-is/package.json","./node_modules/.pnpm/react-redux@9.3.0_@types+react@19.2.17_react@19.2.8_redux@5.0.1/node_modules/react-redux/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/package.json","./node_modules/.pnpm/react@19.2.8/node_modules/react/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/package.json","./node_modules/.pnpm/redux-thunk@3.1.0_redux@5.0.1/node_modules/redux-thunk/package.json","./node_modules/.pnpm/redux@5.0.1/node_modules/redux/package.json","./node_modules/.pnpm/reselect@5.2.0/node_modules/reselect/package.json","./node_modules/.pnpm/tailwind-merge@3.6.0/node_modules/tailwind-merge/package.json","./node_modules/.pnpm/victory-vendor@37.3.6/node_modules/victory-vendor/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/vite/package.json","./package.json"],"missingPackageJsons":["./node_modules/.pnpm/@radix-ui+react-accessible-icon@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@t_4526d9cce9bc16967c742c781445172d/node_modules/@radix-ui/react-accessible-icon/dist/package.json","./node_modules/.pnpm/@radix-ui+react-accordion@1.2.18_@types+react-dom@19.2.3_@types+react@19.2.17__@types+r_6598816f6ece413f399b25530b8b1959/node_modules/@radix-ui/react-accordion/dist/package.json","./node_modules/.pnpm/@radix-ui+react-alert-dialog@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@type_de2dcecb43f179bc364eac794aacef25/node_modules/@radix-ui/react-alert-dialog/dist/package.json","./node_modules/.pnpm/@radix-ui+react-arrow@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_4564d4aeead112bf341d3f32e31d7980/node_modules/@radix-ui/react-arrow/dist/package.json","./node_modules/.pnpm/@radix-ui+react-aspect-ratio@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@type_0163fd11df5d93e93164cd0dc3e38c8e/node_modules/@radix-ui/react-aspect-ratio/dist/package.json","./node_modules/.pnpm/@radix-ui+react-avatar@1.2.4_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_6a533ea4dc63fb1d11e9f9824ee96a89/node_modules/@radix-ui/react-avatar/dist/package.json","./node_modules/.pnpm/@radix-ui+react-checkbox@1.3.9_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_314b715aaa41f9d689db74f0f2e88755/node_modules/@radix-ui/react-checkbox/dist/package.json","./node_modules/.pnpm/@radix-ui+react-collapsible@1.1.18_@types+react-dom@19.2.3_@types+react@19.2.17__@types_e4d5d33ddc5b9b9a7cc23593405888f6/node_modules/@radix-ui/react-collapsible/dist/package.json","./node_modules/.pnpm/@radix-ui+react-context-menu@2.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types_b473c0ab0f35d2440dc242db80965956/node_modules/@radix-ui/react-context-menu/dist/package.json","./node_modules/.pnpm/@radix-ui+react-context@1.2.1_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-context/dist/package.json","./node_modules/.pnpm/@radix-ui+react-dialog@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+reac_d2586842720144517f0d0b1529e46376/node_modules/@radix-ui/react-dialog/dist/package.json","./node_modules/.pnpm/@radix-ui+react-direction@1.1.3_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-direction/dist/package.json","./node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17___5c8f3e6e76ce47c058351a084b46994d/node_modules/@radix-ui/react-dismissable-layer/dist/package.json","./node_modules/.pnpm/@radix-ui+react-dropdown-menu@2.1.22_@types+react-dom@19.2.3_@types+react@19.2.17__@typ_96c14e467b4dac0e9372e3b8059d2d93/node_modules/@radix-ui/react-dropdown-menu/dist/package.json","./node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types_64c0dd537bfd5c932deab82f76993003/node_modules/@radix-ui/react-focus-scope/dist/package.json","./node_modules/.pnpm/@radix-ui+react-form@0.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@_e63c5ce4b10cfd67ff318863d2a73415/node_modules/@radix-ui/react-form/dist/package.json","./node_modules/.pnpm/@radix-ui+react-hover-card@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+_e5b71d1a5a95228c901e52f2f93fbbf7/node_modules/@radix-ui/react-hover-card/dist/package.json","./node_modules/.pnpm/@radix-ui+react-label@2.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_1a71cc2d227950086603d33e7dfe5bc7/node_modules/@radix-ui/react-label/dist/package.json","./node_modules/.pnpm/@radix-ui+react-menu@2.1.22_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@_dbe44cd30a3ccab7b832a5aca4038762/node_modules/@radix-ui/react-menu/dist/package.json","./node_modules/.pnpm/@radix-ui+react-menubar@1.1.22_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_a4a0fe7147084946d95ca7358cd7f58f/node_modules/@radix-ui/react-menubar/dist/package.json","./node_modules/.pnpm/@radix-ui+react-navigation-menu@1.2.20_@types+react-dom@19.2.3_@types+react@19.2.17__@t_d903a2260494b0a193aaff13a908358b/node_modules/@radix-ui/react-navigation-menu/dist/package.json","./node_modules/.pnpm/@radix-ui+react-one-time-password-field@0.1.14_@types+react-dom@19.2.3_@types+react@19._6c9befcab9959580f407486bb9bc5695/node_modules/@radix-ui/react-one-time-password-field/dist/package.json","./node_modules/.pnpm/@radix-ui+react-password-toggle-field@0.1.9_@types+react-dom@19.2.3_@types+react@19.2.1_30190fd1e33b28f891c25f5b70fe563d/node_modules/@radix-ui/react-password-toggle-field/dist/package.json","./node_modules/.pnpm/@radix-ui+react-popover@1.1.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_8de20cccc6806677ce56ebb2c4924f2c/node_modules/@radix-ui/react-popover/dist/package.json","./node_modules/.pnpm/@radix-ui+react-popper@1.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_242911bd902ac0021e572cadb46a51fb/node_modules/@radix-ui/react-popper/dist/package.json","./node_modules/.pnpm/@radix-ui+react-portal@1.1.15_@types+react-dom@19.2.3_@types+react@19.2.17__@types+reac_835fdb50e921ab143bf8543839f816a2/node_modules/@radix-ui/react-portal/dist/package.json","./node_modules/.pnpm/@radix-ui+react-primitive@2.1.8_@types+react-dom@19.2.3_@types+react@19.2.17__@types+re_5a133ce654fa3debbe1f74a46e43e709/node_modules/@radix-ui/react-primitive/dist/package.json","./node_modules/.pnpm/@radix-ui+react-progress@1.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+re_fdee46bb6a58af6641570709ad434774/node_modules/@radix-ui/react-progress/dist/package.json","./node_modules/.pnpm/@radix-ui+react-radio-group@1.4.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+_7a1ca473fd53e55e6b70c05b7875acfb/node_modules/@radix-ui/react-radio-group/dist/package.json","./node_modules/.pnpm/@radix-ui+react-roving-focus@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17__@type_ccda8ed45b24973ecec7e95cd3413fd3/node_modules/@radix-ui/react-roving-focus/dist/package.json","./node_modules/.pnpm/@radix-ui+react-scroll-area@1.2.16_@types+react-dom@19.2.3_@types+react@19.2.17__@types_23c83300cd9ee7dca254d8d327259682/node_modules/@radix-ui/react-scroll-area/dist/package.json","./node_modules/.pnpm/@radix-ui+react-select@2.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_f2fde808296672bcd424df003eb70e3e/node_modules/@radix-ui/react-select/dist/package.json","./node_modules/.pnpm/@radix-ui+react-separator@1.1.13_@types+react-dom@19.2.3_@types+react@19.2.17__@types+r_586c9cebfb66f86c7f19b74b458f4529/node_modules/@radix-ui/react-separator/dist/package.json","./node_modules/.pnpm/@radix-ui+react-slider@1.4.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_6ea08df645c860796433f816a8ebb36d/node_modules/@radix-ui/react-slider/dist/package.json","./node_modules/.pnpm/@radix-ui+react-slot@1.3.1_@types+react@19.2.17_react@19.2.8/node_modules/@radix-ui/react-slot/dist/package.json","./node_modules/.pnpm/@radix-ui+react-switch@1.3.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_ded3f1d08d07b9b90a2492749639a809/node_modules/@radix-ui/react-switch/dist/package.json","./node_modules/.pnpm/@radix-ui+react-tabs@1.1.19_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@_531d8d66fb0d0af1d046c6792e4fa5f5/node_modules/@radix-ui/react-tabs/dist/package.json","./node_modules/.pnpm/@radix-ui+react-toast@1.2.21_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react_f65e7017b6d0e3ac9d52c6c92cc6d862/node_modules/@radix-ui/react-toast/dist/package.json","./node_modules/.pnpm/@radix-ui+react-toggle-group@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17__@type_fc0c71cbfed76ce65911ff90d3e93a50/node_modules/@radix-ui/react-toggle-group/dist/package.json","./node_modules/.pnpm/@radix-ui+react-toggle@1.1.16_@types+react-dom@19.2.3_@types+react@19.2.17__@types+reac_7bd677ec4d4b2da648b71747d0873161/node_modules/@radix-ui/react-toggle/dist/package.json","./node_modules/.pnpm/@radix-ui+react-toolbar@1.1.17_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_8c2698d12b76c38d23e1dc6203071c25/node_modules/@radix-ui/react-toolbar/dist/package.json","./node_modules/.pnpm/@radix-ui+react-tooltip@1.2.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_41e436f8be643b53d00faca403cd0c2a/node_modules/@radix-ui/react-tooltip/dist/package.json","./node_modules/.pnpm/@radix-ui+react-visually-hidden@1.2.9_@types+react-dom@19.2.3_@types+react@19.2.17__@ty_4961a2cca0723cefd8e6bef967bae484/node_modules/@radix-ui/react-visually-hidden/dist/package.json","./node_modules/.pnpm/@radix-ui+rect@1.1.3/node_modules/@radix-ui/rect/dist/package.json","./node_modules/.pnpm/@reduxjs+toolkit@2.12.0_react-redux@9.3.0_@types+react@19.2.17_react@19.2.8_redux@5.0.1__react@19.2.8/node_modules/@reduxjs/toolkit/dist/package.json","./node_modules/.pnpm/@types+d3-scale@4.0.9/node_modules/d3-time/package.json","./node_modules/.pnpm/@types+d3-shape@3.1.8/node_modules/d3-path/package.json","./node_modules/.pnpm/@types+react-dom@19.2.3_@types+react@19.2.17/node_modules/react/package.json","./node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/package.json","./node_modules/.pnpm/cmdk@1.1.1_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@19.2.17_react-dom_60d538ac8b3b3d77a9a153b095ee057f/node_modules/cmdk/dist/package.json","./node_modules/.pnpm/cookie-es@3.1.1/node_modules/cookie-es/dist/package.json","./node_modules/.pnpm/immer@11.1.15/node_modules/immer/dist/package.json","./node_modules/.pnpm/lucide-react@1.26.0_react@19.2.8/node_modules/lucide-react/dist/package.json","./node_modules/.pnpm/node_modules/@types/react-dom/client/package.json","./node_modules/.pnpm/node_modules/@types/react-dom/package.json","./node_modules/.pnpm/node_modules/@types/react/package.json","./node_modules/.pnpm/node_modules/react-dom/client/package.json","./node_modules/.pnpm/node_modules/react-dom/package.json","./node_modules/.pnpm/node_modules/react/package.json","./node_modules/.pnpm/radix-ui@1.6.5_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@19.2.17_react_ebe17dce4a4869ec5f99870736b255ff/node_modules/radix-ui/dist/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-dom/client/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/dom/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/dom/ssr/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/router/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/rsc/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/server-runtime/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/server-runtime/sessions/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/types/package.json","./node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/animation/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/cartesian/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/chart/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/component/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/container/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/context/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/polar/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/shape/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/state/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/state/selectors/combiners/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/state/selectors/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/state/types/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/synchronisation/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/theme/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/util/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/util/payload/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/util/scale/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/util/stacks/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/recharts/types/zIndex/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/redux/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/victory-vendor/d3-scale/package.json","./node_modules/.pnpm/recharts@3.10.0_@types+react@19.2.17_react-dom@19.2.8_react@19.2.8__react-is@19.2.8_react@19.2.8_redux@5.0.1/node_modules/victory-vendor/d3-shape/package.json","./node_modules/.pnpm/redux-thunk@3.1.0_redux@5.0.1/node_modules/redux-thunk/dist/package.json","./node_modules/.pnpm/redux@5.0.1/node_modules/redux/dist/package.json","./node_modules/.pnpm/reselect@5.2.0/node_modules/reselect/dist/package.json","./node_modules/.pnpm/tailwind-merge@3.6.0/node_modules/tailwind-merge/dist/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/@vitejs/devtools/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/esbuild/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/less/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/sass-embedded/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/sass/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/stylus/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/sugarss/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/terser/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/tsx/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/vite/types/package.json","./node_modules/.pnpm/vite@8.1.5_@types+node@26.1.1_jiti@2.7.0/node_modules/yaml/package.json","./node_modules/@/index.css/package.json","./node_modules/@types/__index.css/package.json","./node_modules/@types/react-dom/client/package.json","./node_modules/@types/react/jsx-runtime/package.json","./node_modules/@types/vite/client/package.json","./node_modules/react-dom/client/package.json","./node_modules/react/jsx-runtime/package.json","./node_modules/vite/client/package.json"]}
\ No newline at end of file
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 0000000..2928ea3
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,27 @@
+import path from 'node:path';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// m5-design.md §1.3 (D1): base 는 기본값 '/', assetsDir 기본값 'assets' —
+// 해시 자산 URL 이 /assets/<name>-<hash>.js 로 나와 임베드 서버의 /assets/*
+// 라우트 계약과 1:1 정합한다. 출력은 go:embed 대상 디렉터리로 직접 낸다.
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { '@': path.resolve(import.meta.dirname, 'src') },
+  },
+  build: {
+    outDir: '../internal/webui/assets',
+    // outDir 이 프로젝트 루트 밖이라 기본은 비우지 않음 — 스테일 해시 파일
+    // 누적(임베드 비대)을 막기 위해 명시. placeholder index.html 은 커밋본이
+    // SSOT 이고 빌드 후 git 워크트리에서 복원한다(m5-design.md §2.2).
+    emptyOutDir: true,
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:9210',
+      '/healthz': 'http://localhost:9210',
+    },
+  },
+});