feat(frontend): add Helm chart browser, monitoring, chart-references and values templates pages

Add new frontend pages for the multi-tenant OCDP platform: - Charts page (/charts): Browse Harbor OCI registries to list Helm chart repositories and versions, with deploy modal to launch charts on selected clusters - Monitoring page (/monitoring): Display cluster metrics (CPU/Memory/GPU usage) and per-node details with resource utilization bars - Chart References page (/chart-references): CRUD for chart metadata references - Values Templates page (/templates): CRUD for Helm values templates with version history and rollback support - Sidebar: Add Charts navigation, update Storage and Templates links - api.ts: Add all API client functions (clusterApi, registryApi, instanceApi, monitoringApi, storageApi, chartReferenceApi, valuesTemplateApi, workspaceApi, userApi) with full TypeScript types Note: deploy flow and values template rollback not yet end-to-end tested.
2026-04-15 16:59:31 +08:00
parent c5e51ed069
commit 29d0310f03
283 changed files with 24658 additions and 36038 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -1,27 +1,41 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*

-node_modules
-dist
-dist-ssr
-*.local
+# env files (can opt-in for committing if needed)
+.env*

-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-src/api/generated
-src/api/generated-new
-src/api/generated-test
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@ -0,0 +1 @@
+@AGENTS.md
--- a/frontend/Makefile
+++ b/frontend/Makefile
@ -1,39 +0,0 @@
-# ================================================================
-# OCDP Frontend - Development Makefile
-# ================================================================
-# Two commands:
-#   make run-0    - Mock, hot reload frontend
-#   make run-1    - Real API, hot reload frontend
-# ================================================================
-
-.PHONY: run-0 run-1
-
-# ================================================================
-# Mode 0: Mock, Hot Reload Frontend
-# ================================================================
-run-0:
-	@echo "════════════════════════════════════════════════════════════"
-	@echo "🚀 Mode 0: Mock, Hot Reload Frontend"
-	@echo "════════════════════════════════════════════════════════════"
-	@echo ""
-	@echo "✓ Frontend: localhost:5173 (hot reload)"
-	@echo "✓ Backend:  Mock/Stub (no real API calls)"
-	@echo ""
-	@VITE_RUN_MODE=mode-0 npm run dev
-
-# ================================================================
-# Mode 1: Real API, Hot Reload Frontend
-# ================================================================
-run-1:
-	@echo "════════════════════════════════════════════════════════════"
-	@echo "🚀 Mode 1: Real API, Hot Reload Frontend"
-	@echo "════════════════════════════════════════════════════════════"
-	@echo ""
-	@echo "✓ Frontend: localhost:5173 (hot reload)"
-	@echo "✓ Backend:  Real API (http://localhost:8080)"
-	@echo ""
-	@echo "⚠️  Make sure backend is running at localhost:8080"
-	@echo ""
-	@VITE_RUN_MODE=mode-1 npm run dev
-
-# ================================================================
--- a/frontend/README.md
+++ b/frontend/README.md
@ -1,260 +1,36 @@
-# OCDP Frontend
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

-OCDP (Open Cloud Development Platform) Frontend - **Helm Chart 管理平台**
+## Getting Started

-> 🎯 **专注于 Helm Charts**: 基于后端 OpenAPI 的前端应用，用于浏览、部署和管理 Helm Charts
-
---
-
-## 🚀 快速开始
-
-### 1. 安装依赖
+First, run the development server:

 ```bash
-npm install
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```

-### 2. 选择开发模式
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

-本项目支持三种运行模式，通过 `Makefile` 命令启动：
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-#### **Mode 0** - Mock API，热重载（推荐快速开发）
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

-```bash
-make run-0
-```
+## Learn More

- ✅ 前端：`localhost:5173`（Vite 热重载）
- ✅ 后端：Mock/Stub 数据（不需要真实后端）
- ✅ 适用：快速 UI 开发和调试
+To learn more about Next.js, take a look at the following resources:

-#### **Mode 1** - Real API，热重载（集成测试）
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

-```bash
-make run-1
-```
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

- ✅ 前端：`localhost:5173`（Vite 热重载）
- ✅ 后端：真实 API（`http://localhost:8080`）
- ⚠️ 需要后端服务运行
+## Deploy on Vercel

-#### **Mode 2** - Docker Compose 部署（生产测试）
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

-```bash
-make run-2
-```
-
- ✅ 前端：`localhost:3000`（Nginx + Docker 容器）
- ✅ 后端：容器化部署
- ✅ 适用：生产环境测试
-
-### 3. 清理（Mode 2）
-
-```bash
-make clean-2
-```
-
---
-
-## 📋 命令列表
-
-| 命令 | 说明 |
-|------|------|
-| `make run-0` | Mode 0 - Mock API，热重载前端 |
-| `make run-1` | Mode 1 - Real API，热重载前端 |
-| `make run-2` | Mode 2 - Docker Compose 部署 |
-| `make clean-2` | 清理 Mode 2 容器 |
-
---
-
-## 🔌 Backend OpenAPI 集成
-
-### 架构
-
-```
-backend/docs/openapi.yaml
-         ↓
-   OpenAPI Generator
-         ↓
-  src/api/generated/  (自动生成的 API 客户端)
-         ↓
-  src/api/client.ts   (封装层，支持 Mode 切换)
-         ↓
-    React Components
-```
-
-### API 客户端使用
-
-项目使用 OpenAPI Generator 生成的 TypeScript 客户端，根据运行模式自动切换：
-
- **Mode 0**: 使用 Mock 数据
- **Mode 1**: 调用真实后端 API（`localhost:8080`）
- **Mode 2**: Docker 环境，通过 Nginx 反向代理
-
-### 使用示例
-
-```typescript
-import { api } from '@/api/client';
-
-// 获取 Registries
-const registries = await api.registries.list();
-
-// 获取 Helm Chart 列表（自动过滤，只返回 Charts）
-const charts = await api.artifacts.list('registry-id', 'repo-name');
-
-// 获取 Chart 详情
-const chart = await api.artifacts.get('registry-id', 'repo-name', 'version');
-
-// 获取 Chart 的 values schema（用于部署配置）
-const schema = await api.artifacts.getValuesSchema('registry-id', 'repo-name', 'version');
-
-// 部署 Helm Chart
-const instance = await api.instances.create({
-  name: 'my-app',
-  namespace: 'default',
-  registry_id: 'registry-id',
-  artifact_id: 'repo-name',
-  version: '1.0.0',
-  cluster_id: 'cluster-id'
-});
-```
-
-### 重新生成 API Client
-
-当后端 OpenAPI 规范更新时：
-
-```bash
-cd ..
-make openapi-gen-frontend
-```
-
---
-
-## 🛠 技术栈
-
- **React 19** + **TypeScript** - UI 框架
- **Vite 7** - 构建工具和开发服务器
- **Tailwind CSS** - 样式框架
- **OpenAPI Generator** - API 客户端生成
- **Axios** - HTTP 客户端
- **React Router v7** - 路由管理
-
---
-
-## 🎯 核心功能
-
- ✅ **Helm Chart 浏览**: 从 OCI Registry 浏览 Helm Charts（自动过滤）
- ✅ **Chart 部署**: 部署 Helm Chart 到 Kubernetes 集群
- ✅ **实例管理**: 管理已部署的 Helm Chart 实例
- ✅ **集群管理**: 管理 Kubernetes 集群连接
- ✅ **Registry 管理**: 管理 OCI Registry 配置
- ❌ **不支持**: 容器镜像管理（仅 Helm Charts）
-
---
-
-## 📁 项目结构
-
-```
-frontend/
-├── src/
-│   ├── api/
-│   │   ├── generated/        # 🤖 OpenAPI 自动生成的客户端
-│   │   └── client.ts         # API 客户端封装（Mode 切换）
-│   ├── features/             # 功能模块
-│   │   ├── auth/             # 认证
-│   │   ├── artifact/         # Helm Charts
-│   │   ├── configuration/    # 配置管理
-│   │   └── monitoring/       # 监控
-│   ├── shared/               # 共享组件
-│   ├── app/                  # 应用配置
-│   └── main.tsx             # 入口文件
-├── Makefile                 # 开发命令（三种模式）
-├── package.json             # 依赖配置
-├── vite.config.ts          # Vite 配置
-├── docker-compose.dev.yml  # Docker Compose 配置
-├── Dockerfile              # 生产构建
-└── nginx.conf              # Nginx 配置
-```
-
---
-
-## 💡 开发工作流
-
-### 日常开发（Mode 0）
-
-```bash
-make run-0
-# 修改代码 → 自动热重载
-```
-
-### 集成测试（Mode 1）
-
-```bash
-# 1. 确保后端运行在 localhost:8080
-cd ../backend
-make run
-
-# 2. 启动前端（Mode 1）
-cd ../frontend
-make run-1
-```
-
-### 生产测试（Mode 2）
-
-```bash
-make run-2
-# 测试生产构建
-# 完成后清理：
-make clean-2
-```
-
---
-
-## 🐛 常见问题
-
-### Mode 0 - 端口占用
-
-```bash
-lsof -ti:5173 | xargs kill -9
-```
-
-### Mode 1 - 后端连接失败
-
-确保后端服务运行：
-
-```bash
-curl http://localhost:8080/health
-```
-
-### Mode 2 - 容器问题
-
-```bash
-# 查看日志
-docker compose -f docker-compose.dev.yml logs -f
-
-# 清理并重建
-make clean-2
-make run-2
-```
-
-### OpenAPI 客户端更新
-
-```bash
-# 在项目根目录执行
-cd ..
-make openapi-gen-frontend
-```
-
---
-
-## 📚 更多信息
-
- **后端项目**: `../backend`
- **OpenAPI 规范**: `../backend/docs/openapi.yaml`
- **查看所有命令**: `make help`
-
---
-
-## 📄 License
-
-MIT
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist', 'src/api/generated']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/frontend/index.html
+++ b/frontend/index.html
@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OCDP Platform</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/frontend/orval.config.ts
+++ b/frontend/orval.config.ts
@ -1,25 +0,0 @@
-import { defineConfig } from 'orval';
-
-export default defineConfig({
-  ocdp: {
-    input: {
-      target: '../backend/docs/openapi.yaml',
-    },
-    output: {
-      target: './src/api/generated-orval/api.ts',
-      client: 'axios-functions',
-      mode: 'split',
-      override: {
-        mutator: {
-          path: './src/api/axios-mutator.ts',
-          name: 'customAxiosInstance',
-        },
-        useDates: true,
-        useNamedParameters: true,
-      },
-      tsconfig: './tsconfig.json',
-      clean: true,
-    },
-  },
-});
-
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,41 +1,30 @@
 {
-  "name": "ocdp",
+  "name": "frontend",
+  "version": "0.1.0",
  "private": true,
-  "version": "0.0.0",
-  "type": "module",
  "scripts": {
-    "dev": "vite --host",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "openapi-gen": "orval",
-    "openapi-gen-old": "cd .. && make openapi-gen-frontend"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
  },
  "dependencies": {
-    "axios": "^1.13.2",
-    "class-transformer": "^0.5.1",
-    "lucide-react": "^0.545.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.4",
-    "reflect-metadata": "^0.2.2"
+    "axios": "^1.15.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
+    "next": "16.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwind-merge": "^3.5.0"
  },
  "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "orval": "^7.3.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.18",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
  }
 }
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/frontend/public/api-test.html
+++ b/frontend/public/api-test.html
@ -1,431 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OCDP API camelCase 测试</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            padding: 20px;
-            min-height: 100vh;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 10px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
-            overflow: hidden;
-        }
-
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 30px;
-            text-align: center;
-        }
-
-        .header h1 {
-            font-size: 2em;
-            margin-bottom: 10px;
-        }
-
-        .header p {
-            opacity: 0.9;
-        }
-
-        .content {
-            padding: 30px;
-        }
-
-        .section {
-            margin-bottom: 30px;
-        }
-
-        .section h2 {
-            color: #333;
-            margin-bottom: 15px;
-            border-bottom: 2px solid #667eea;
-            padding-bottom: 10px;
-        }
-
-        .input-group {
-            margin-bottom: 15px;
-        }
-
-        .input-group label {
-            display: block;
-            margin-bottom: 5px;
-            color: #555;
-            font-weight: bold;
-        }
-
-        .input-group input {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            font-size: 14px;
-        }
-
-        .buttons {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-bottom: 20px;
-        }
-
-        button {
-            padding: 12px 24px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: bold;
-            transition: all 0.3s;
-        }
-
-        button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        }
-
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-        }
-
-        .btn-success {
-            background: #4CAF50;
-            color: white;
-        }
-
-        .btn-info {
-            background: #2196F3;
-            color: white;
-        }
-
-        .btn-warning {
-            background: #FF9800;
-            color: white;
-        }
-
-        .btn-danger {
-            background: #f44336;
-            color: white;
-        }
-
-        .log-container {
-            background: #1e1e1e;
-            color: #d4d4d4;
-            padding: 20px;
-            border-radius: 5px;
-            min-height: 400px;
-            max-height: 600px;
-            overflow-y: auto;
-            font-size: 13px;
-            line-height: 1.6;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-
-        .log-success {
-            color: #4CAF50;
-        }
-
-        .log-error {
-            color: #f44336;
-        }
-
-        .log-warning {
-            color: #FF9800;
-        }
-
-        .log-info {
-            color: #2196F3;
-        }
-
-        .status {
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            text-align: center;
-            font-weight: bold;
-        }
-
-        .status.loading {
-            background: #FFF3CD;
-            color: #856404;
-        }
-
-        .status.success {
-            background: #D4EDDA;
-            color: #155724;
-        }
-
-        .status.error {
-            background: #F8D7DA;
-            color: #721C24;
-        }
-
-        .hidden {
-            display: none;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>🧪 OCDP API camelCase 测试</h1>
-            <p>测试前后端 camelCase 通信是否正常</p>
-        </div>
-
-        <div class="content">
-            <div class="section">
-                <h2>⚙️ 配置</h2>
-                <div class="input-group">
-                    <label for="apiUrl">API 地址:</label>
-                    <input type="text" id="apiUrl" value="http://localhost:8080/api/v1" />
-                </div>
-                <div class="input-group">
-                    <label for="token">Token (登录后自动填充):</label>
-                    <input type="text" id="token" placeholder="JWT Token" />
-                </div>
-            </div>
-
-            <div class="section">
-                <h2>🎮 测试操作</h2>
-                <div class="buttons">
-                    <button class="btn-success" onclick="testLogin()">1. 测试登录</button>
-                    <button class="btn-info" onclick="testListClusters()">2. 获取集群列表</button>
-                    <button class="btn-warning" onclick="testCreateCluster()">3. 创建集群</button>
-                    <button class="btn-primary" onclick="testFullFlow()">🚀 完整测试</button>
-                    <button class="btn-danger" onclick="clearLog()">清除日志</button>
-                </div>
-            </div>
-
-            <div id="status" class="status hidden"></div>
-
-            <div class="section">
-                <h2>📋 测试日志</h2>
-                <div id="log" class="log-container">点击按钮开始测试...</div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        const logEl = document.getElementById('log');
-        const statusEl = document.getElementById('status');
-        const tokenInput = document.getElementById('token');
-        const apiUrlInput = document.getElementById('apiUrl');
-
-        function getApiUrl() {
-            return apiUrlInput.value;
-        }
-
-        function getToken() {
-            return tokenInput.value;
-        }
-
-        function setStatus(message, type = 'loading') {
-            statusEl.textContent = message;
-            statusEl.className = `status ${type}`;
-            statusEl.classList.remove('hidden');
-        }
-
-        function hideStatus() {
-            statusEl.classList.add('hidden');
-        }
-
-        function log(message, type = 'info') {
-            const timestamp = new Date().toLocaleTimeString();
-            const className = `log-${type}`;
-            logEl.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
-            logEl.scrollTop = logEl.scrollHeight;
-        }
-
-        function clearLog() {
-            logEl.innerHTML = '';
-            hideStatus();
-            log('日志已清除', 'info');
-        }
-
-        async function testLogin() {
-            clearLog();
-            log('🔐 开始测试登录...', 'info');
-            setStatus('正在登录...', 'loading');
-
-            try {
-                const response = await fetch(`${getApiUrl()}/auth/login`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        username: 'admin',
-                        password: 'admin123'
-                    })
-                });
-
-                const data = await response.json();
-                log('响应数据:\n' + JSON.stringify(data, null, 2), 'info');
-
-                if (data.accessToken) {
-                    log('✅ 登录成功!', 'success');
-                    tokenInput.value = data.accessToken;
-                    
-                    // 验证 camelCase
-                    if ('accessToken' in data) log('  ✓ accessToken 字段存在 (camelCase)', 'success');
-                    if ('refreshToken' in data) log('  ✓ refreshToken 字段存在 (camelCase)', 'success');
-                    if ('userId' in data) log('  ✓ userId 字段存在 (camelCase)', 'success');
-                    
-                    setStatus('✅ 登录成功！', 'success');
-                } else {
-                    log('❌ 登录失败: 未找到 accessToken', 'error');
-                    setStatus('❌ 登录失败', 'error');
-                }
-            } catch (error) {
-                log(`❌ 请求失败: ${error.message}`, 'error');
-                setStatus('❌ 请求失败', 'error');
-            }
-        }
-
-        async function testListClusters() {
-            log('\n📋 开始获取集群列表...', 'info');
-            const token = getToken();
-            
-            if (!token) {
-                log('❌ 请先登录获取 Token', 'error');
-                return;
-            }
-
-            setStatus('正在获取集群列表...', 'loading');
-
-            try {
-                const response = await fetch(`${getApiUrl()}/clusters`, {
-                    headers: { 'Authorization': `Bearer ${token}` }
-                });
-
-                const data = await response.json();
-                log(`响应数据 (共 ${Array.isArray(data) ? data.length : 0} 个集群):\n` + 
-                    JSON.stringify(data, null, 2), 'info');
-
-                if (Array.isArray(data)) {
-                    log('✅ 获取集群列表成功!', 'success');
-                    
-                    // 验证 camelCase
-                    if (data.length > 0) {
-                        const cluster = data[0];
-                        if ('createdAt' in cluster) log('  ✓ createdAt 字段存在 (camelCase)', 'success');
-                        if ('updatedAt' in cluster) log('  ✓ updatedAt 字段存在 (camelCase)', 'success');
-                        if ('hasCaData' in cluster) log('  ✓ hasCaData 字段存在 (camelCase)', 'success');
-                    }
-                    
-                    setStatus(`✅ 获取成功！共 ${data.length} 个集群`, 'success');
-                } else {
-                    log('❌ 响应格式错误', 'error');
-                    setStatus('❌ 响应格式错误', 'error');
-                }
-            } catch (error) {
-                log(`❌ 请求失败: ${error.message}`, 'error');
-                setStatus('❌ 请求失败', 'error');
-            }
-        }
-
-        async function testCreateCluster() {
-            log('\n🚀 开始创建集群 (使用 camelCase)...', 'info');
-            const token = getToken();
-            
-            if (!token) {
-                log('❌ 请先登录获取 Token', 'error');
-                return;
-            }
-
-            setStatus('正在创建集群...', 'loading');
-
-            const clusterData = {
-                name: `test-cluster-${Date.now()}`,
-                host: 'https://k8s.test.example.com:6443',
-                description: '测试集群 - camelCase 验证',
-                caData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',
-                certData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',
-                keyData: 'LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVkt'
-            };
-
-            log('请求数据 (camelCase):\n' + JSON.stringify(clusterData, null, 2), 'info');
-
-            try {
-                const response = await fetch(`${getApiUrl()}/clusters`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${token}`
-                    },
-                    body: JSON.stringify(clusterData)
-                });
-
-                const data = await response.json();
-                log('响应数据:\n' + JSON.stringify(data, null, 2), 'info');
-
-                if (data.id) {
-                    log('✅ 创建集群成功!', 'success');
-                    log(`  集群 ID: ${data.id}`, 'info');
-                    
-                    // 验证 camelCase
-                    if ('hasCaData' in data) log('  ✓ hasCaData 字段存在 (camelCase)', 'success');
-                    if ('hasCertData' in data) log('  ✓ hasCertData 字段存在 (camelCase)', 'success');
-                    if ('createdAt' in data) log('  ✓ createdAt 字段存在 (camelCase)', 'success');
-                    
-                    setStatus('✅ 创建成功！', 'success');
-                } else {
-                    log('❌ 创建失败或响应格式错误', 'error');
-                    setStatus('❌ 创建失败', 'error');
-                }
-            } catch (error) {
-                log(`❌ 请求失败: ${error.message}`, 'error');
-                setStatus('❌ 请求失败', 'error');
-            }
-        }
-
-        async function testFullFlow() {
-            clearLog();
-            log('🧪 开始完整测试流程...\n', 'info');
-            setStatus('正在执行完整测试...', 'loading');
-
-            // 步骤 1: 登录
-            await testLogin();
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            // 步骤 2: 获取集群列表
-            await testListClusters();
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            // 步骤 3: 创建集群
-            await testCreateCluster();
-
-            log('\n🎉 完整测试流程完成!', 'success');
-            log('所有 API 调用成功，camelCase 工作正常！', 'success');
-            setStatus('🎉 完整测试通过！', 'success');
-        }
-
-        // 页面加载完成后的初始化
-        window.addEventListener('load', () => {
-            log('🌐 页面已加载，可以开始测试', 'info');
-            log('提示: 点击 "🚀 完整测试" 运行所有测试\n', 'info');
-        });
-    </script>
-</body>
-</html>
-
--- a/frontend/public/file.svg
+++ b/frontend/public/file.svg
@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/frontend/public/globe.svg
+++ b/frontend/public/globe.svg
@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/frontend/public/next.svg
+++ b/frontend/public/next.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/frontend/public/vercel.svg
+++ b/frontend/public/vercel.svg
@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/frontend/public/window.svg
+++ b/frontend/public/window.svg
@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/frontend/src/api/axios-mutator.ts
+++ b/frontend/src/api/axios-mutator.ts
@ -1,99 +0,0 @@
-import Axios from "axios";
-import type { AxiosRequestConfig } from "axios";
-import { keysToCamel, keysToSnake } from "@/shared/utils/case-converter";
-
-/**
- * Axios instance for Orval-generated API client
- * 
- * Features:
- * - Configurable baseURL from environment variable
- * - Auth token management
- * - Request cancellation support
- */
-const FALLBACK_API_BASE = '/api/v1';
-const configuredBaseUrl = import.meta.env.VITE_API_BASE_URL?.trim();
-
-export const AXIOS_INSTANCE = Axios.create({
-  // Default to /api/v1 so local dev still hits the proxy when no env is provided
-  baseURL: configuredBaseUrl && configuredBaseUrl.length > 0 ? configuredBaseUrl : FALLBACK_API_BASE,
-});
-
-const isTransformablePayload = (payload: unknown) => {
-  if (payload === null || payload === undefined) {
-    return false;
-  }
-  if (payload instanceof FormData || payload instanceof Blob || payload instanceof ArrayBuffer) {
-    return false;
-  }
-  return typeof payload === "object";
-};
-
-AXIOS_INSTANCE.interceptors.request.use((config) => {
-  if (isTransformablePayload(config.data)) {
-    config.data = keysToSnake(config.data);
-  }
-  if (isTransformablePayload(config.params)) {
-    config.params = keysToSnake(config.params);
-  }
-  return config;
-});
-
-AXIOS_INSTANCE.interceptors.response.use(
-  (response) => {
-    if (isTransformablePayload(response?.data)) {
-      response.data = keysToCamel(response.data);
-    }
-    return response;
-  },
-  (error) => {
-    if (isTransformablePayload(error?.response?.data)) {
-      error.response.data = keysToCamel(error.response.data);
-    }
-    return Promise.reject(error);
-  }
-);
-
-/**
- * Custom axios instance for Orval
- * Provides request cancellation support
- */
-export const customAxiosInstance = <T>(
-  config: AxiosRequestConfig,
-  options?: AxiosRequestConfig
-): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({
-    ...config,
-    ...options,
-    cancelToken: source.token,
-  }).then(({ data }) => data);
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled');
-  };
-
-  return promise as any;
-};
-
-/**
- * Set authentication token for all requests
- * 
- * @param token JWT token or null to remove
- * 
- * @example
- * import { setAuthToken } from '@/api/axios-mutator';
- * 
- * // Set token
- * setAuthToken('your-jwt-token');
- * 
- * // Remove token
- * setAuthToken(null);
- */
-export function setAuthToken(token: string | null) {
-  if (token) {
-    AXIOS_INSTANCE.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-  } else {
-    delete AXIOS_INSTANCE.defaults.headers.common['Authorization'];
-  }
-}
--- a/frontend/src/api/generated-orval/api.schemas.ts
+++ b/frontend/src/api/generated-orval/api.schemas.ts
@ -1,439 +0,0 @@
-/**
- * Generated by orval v7.3.0 🍺
- * Do not edit manually.
- * OCDP Backend API
- * OCDP (Open Cloud Development Platform) Backend API
-
-RESTful API for managing Kubernetes clusters, OCI registries, and Helm deployments.
- * OpenAPI spec version: 1.0
- */
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchemaPathParameters = {
- registryId: string,
-    repositoryName: string,
-    reference: string,
- }
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferencePathParameters = {
- registryId: string,
-    repositoryName: string,
-    reference: string,
- }
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsParams = {
-/**
- * 过滤 Artifact 类型 (all, chart, image, other)
- */
-media_type?: string;
-};
-
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsPathParameters = {
- registryId: string,
-    repositoryName: string,
- }
-export type GetRegistriesRegistryIdRepositoriesPathParameters = {
- registryId: string,
- }
-export type GetRegistriesRegistryIdHealthPathParameters = {
- registryId: string,
- }
-export type PutRegistriesRegistryIdPathParameters = {
- registryId: string,
- }
-export type GetRegistriesRegistryIdPathParameters = {
- registryId: string,
- }
-export type DeleteRegistriesRegistryIdPathParameters = {
- registryId: string,
- }
-export type GetMonitoringClustersClusterIdNodesPathParameters = {
- clusterId: string,
- }
-export type GetMonitoringClustersClusterIdPathParameters = {
- clusterId: string,
- }
-export type GetClustersClusterIdInstancesInstanceIdEntriesPathParameters = {
- clusterId: string,
-    instanceId: string,
- }
-export type PutClustersClusterIdInstancesInstanceIdPathParameters = {
- clusterId: string,
-    instanceId: string,
- }
-export type GetClustersClusterIdInstancesInstanceIdPathParameters = {
- clusterId: string,
-    instanceId: string,
- }
-export type DeleteClustersClusterIdInstancesInstanceIdPathParameters = {
- clusterId: string,
-    instanceId: string,
- }
-export type PostClustersClusterIdInstancesPathParameters = {
- clusterId: string,
- }
-export type GetClustersClusterIdInstancesPathParameters = {
- clusterId: string,
- }
-export type GetClustersClusterIdHealthPathParameters = {
- clusterId: string,
- }
-export type PutClustersClusterIdPathParameters = {
- clusterId: string,
- }
-export type GetClustersClusterIdPathParameters = {
- clusterId: string,
- }
-export type DeleteClustersClusterIdPathParameters = {
- clusterId: string,
- }
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoValuesSchemaResponse {
-  schema?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUserResponse {
-  createdAt?: string;
-  email?: string;
-  id?: string;
-  updatedAt?: string;
-  username?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateRegistryRequest {
-  description?: string;
-  insecure?: boolean;
-  name?: string;
-  password?: string;
-  url?: string;
-  username?: string;
-}
-
-export type GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequestValues = { [key: string]: unknown };
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequest {
-  description?: string;
-  values?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequestValues;
-  valuesYaml?: string;
-  version?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateClusterRequest {
-  /** Base64 CA data (also accepts legacy field "ca_data") */
-  caData?: string;
-  /** Base64 client certificate (also accepts legacy field "cert_data") */
-  certData?: string;
-  description?: string;
-  host?: string;
-  /** Base64 client key (also accepts legacy field "key_data") */
-  keyData?: string;
-  name?: string;
-  token?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoTagResponse {
-  mediaType?: string;
-  /** Repository name */
-  repositoryName?: string;
-  /** Artifact size (bytes) */
-  size?: number;
-  /** Tag name (e.g. "1.0.0", "latest") */
-  tag?: string;
-  /** Artifact type: chart, image, other */
-  type?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRepositoryListResponse {
-  /** Whether _catalog API is supported */
-  catalogSupported?: boolean;
-  /** User-friendly message */
-  message?: string;
-  registryId?: string;
-  registryUrl?: string;
-  repositories?: string[];
-  /** Data source: "catalog" | "preconfigured" | "unavailable" */
-  source?: string;
-  total?: number;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse {
-  createdAt?: string;
-  description?: string;
-  /** 是否已设置密码 */
-  hasPassword?: boolean;
-  id?: string;
-  insecure?: boolean;
-  name?: string;
-  /** 脱敏显示（••••••••） */
-  password?: string;
-  updatedAt?: string;
-  url?: string;
-  /** 明文返回用户名（不敏感） */
-  username?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryHealthResponse {
-  healthy?: boolean;
-  message?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegisterRequest {
-  /** @minLength 6 */
-  password: string;
-  username: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRefreshTokenRequest {
-  refreshToken: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoNodeMetricsResponse {
-  age?: string;
-  containerRuntime?: string;
-  cpuAllocatable?: string;
-  cpuCapacity?: string;
-  cpuPercent?: number;
-  cpuUsage?: string;
-  gpuCapacity?: number;
-  gpuPercent?: number;
-  gpuType?: string;
-  gpuUsage?: number;
-  kernelVersion?: string;
-  kubeletVersion?: string;
-  memoryAllocatable?: string;
-  memoryCapacity?: string;
-  memoryPercent?: number;
-  memoryUsage?: string;
-  nodeName?: string;
-  osImage?: string;
-  podCount?: number;
-  role?: string;
-  status?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoMonitoringSummaryResponse {
-  errorClusters?: number;
-  healthyClusters?: number;
-  lastUpdate?: string;
-  totalClusters?: number;
-  totalNodes?: number;
-  totalPods?: number;
-  warningClusters?: number;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoLoginRequest {
-  password: string;
-  username: string;
-}
-
-export type GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseValues = { [key: string]: unknown };
-
-/**
- * 实例当前状态
- */
-export type GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseStatus = typeof GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseStatus[keyof typeof GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseStatus];
-
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export const GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseStatus = {
-  deployed: 'deployed',
-  uninstalled: 'uninstalled',
-  superseded: 'superseded',
-  failed: 'failed',
-  'pending-install': 'pending-install',
-  'pending-upgrade': 'pending-upgrade',
-  'pending-rollback': 'pending-rollback',
-  'pending-delete': 'pending-delete',
-  unknown: 'unknown',
-} as const;
-
-/**
- * 最后一次操作类型
- */
-export type GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseLastOperation = typeof GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseLastOperation[keyof typeof GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseLastOperation];
-
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export const GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseLastOperation = {
-  '': '',
-  install: 'install',
-  upgrade: 'upgrade',
-  rollback: 'rollback',
-  delete: 'delete',
-  sync: 'sync',
-} as const;
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse {
-  chart?: string;
-  clusterId?: string;
-  createdAt?: string;
-  description?: string;
-  id?: string;
-  /** 最近一次错误信息 */
-  lastError?: string;
-  /** 最后一次操作类型 */
-  lastOperation?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseLastOperation;
-  name?: string;
-  namespace?: string;
-  registryId?: string;
-  repository?: string;
-  revision?: number;
-  /** 实例当前状态 */
-  status?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseStatus;
-  /** 状态说明 */
-  statusReason?: string;
-  updatedAt?: string;
-  values?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseValues;
-  version?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceListResponse {
-  instances?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse[];
-  total?: number;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryTLSResponse {
-  hosts?: string[];
-  secretName?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryPortResponse {
-  name?: string;
-  nodePort?: number;
-  port?: number;
-  protocol?: string;
-  targetPort?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryResponse {
-  clusterIP?: string;
-  externalIPs?: string[];
-  hosts?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryHostResponse[];
-  kind?: string;
-  loadBalancerIngress?: string[];
-  name?: string;
-  namespace?: string;
-  ports?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryPortResponse[];
-  tls?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryTLSResponse[];
-  type?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryPathResponse {
-  path?: string;
-  serviceName?: string;
-  servicePort?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryHostResponse {
-  host?: string;
-  paths?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryPathResponse[];
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoErrorResponse {
-  code?: number;
-  error?: string;
-  message?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateRegistryRequest {
-  description?: string;
-  insecure?: boolean;
-  name: string;
-  password?: string;
-  url: string;
-  username?: string;
-}
-
-export type GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequestValues = { [key: string]: unknown };
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequest {
-  description?: string;
-  name: string;
-  namespace: string;
-  /** Registry identifier (also accepts legacy field "registry_id") */
-  registryId: string;
-  repository: string;
-  tag: string;
-  values?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequestValues;
-  valuesYaml?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateClusterRequest {
-  /** Base64 CA data (also accepts legacy field "ca_data") */
-  caData?: string;
-  /** Base64 client certificate (also accepts legacy field "cert_data") */
-  certData?: string;
-  description?: string;
-  host: string;
-  /** Base64 client key (also accepts legacy field "key_data") */
-  keyData?: string;
-  name: string;
-  token?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse {
-  /** 脱敏数据（仅用于前端显示，实际值为掩码） */
-  caData?: string;
-  /** 脱敏显示（••••••••） */
-  certData?: string;
-  createdAt?: string;
-  description?: string;
-  /** 认证配置状态（不返回实际证书数据，仅返回是否已配置） */
-  hasCaData?: boolean;
-  hasCertData?: boolean;
-  hasKeyData?: boolean;
-  hasToken?: boolean;
-  host?: string;
-  id?: string;
-  /** 脱敏显示（••••••••） */
-  keyData?: string;
-  name?: string;
-  /** 脱敏显示（••••••••） */
-  token?: string;
-  updatedAt?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterMetricsResponse {
-  clusterId?: string;
-  clusterName?: string;
-  cpuUsage?: number;
-  gpuUsage?: number;
-  lastCheck?: string;
-  maxNodeCpu?: string;
-  maxNodeCpuUsage?: number;
-  maxNodeGpu?: number;
-  maxNodeGpuUsage?: number;
-  maxNodeMemory?: string;
-  maxNodeMemUsage?: number;
-  memoryUsage?: number;
-  nodeCount?: number;
-  nodes?: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoNodeMetricsResponse[];
-  podCount?: number;
-  status?: string;
-  totalCpu?: string;
-  totalGpu?: number;
-  totalMemory?: string;
-  uptime?: string;
-  usedCpu?: string;
-  usedGpu?: number;
-  usedMemory?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterHealthResponse {
-  healthy?: boolean;
-  message?: string;
-  version?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoAuthResponse {
-  accessToken?: string;
-  refreshToken?: string;
-  userId?: string;
-  username?: string;
-}
-
-export interface GithubComOcdpClusterServiceInternalAdapterInputHttpDtoArtifactResponse {
-  createdAt?: string;
-  digest?: string;
-  repositoryName?: string;
-  size?: number;
-  tag?: string;
-  /** chart | image | other */
-  type?: string;
-}
-
--- a/frontend/src/api/generated-orval/api.ts
+++ b/frontend/src/api/generated-orval/api.ts
@ -1,474 +0,0 @@
-/**
- * Generated by orval v7.3.0 🍺
- * Do not edit manually.
- * OCDP Backend API
- * OCDP (Open Cloud Development Platform) Backend API
-
-RESTful API for managing Kubernetes clusters, OCI registries, and Helm deployments.
- * OpenAPI spec version: 1.0
- */
-import type {
-  DeleteClustersClusterIdInstancesInstanceIdPathParameters,
-  DeleteClustersClusterIdPathParameters,
-  DeleteRegistriesRegistryIdPathParameters,
-  GetClustersClusterIdHealthPathParameters,
-  GetClustersClusterIdInstancesInstanceIdEntriesPathParameters,
-  GetClustersClusterIdInstancesInstanceIdPathParameters,
-  GetClustersClusterIdInstancesPathParameters,
-  GetClustersClusterIdPathParameters,
-  GetMonitoringClustersClusterIdNodesPathParameters,
-  GetMonitoringClustersClusterIdPathParameters,
-  GetRegistriesRegistryIdHealthPathParameters,
-  GetRegistriesRegistryIdPathParameters,
-  GetRegistriesRegistryIdRepositoriesPathParameters,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsParams,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsPathParameters,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferencePathParameters,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchemaPathParameters,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoArtifactResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoAuthResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterHealthResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterMetricsResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateClusterRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateRegistryRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceListResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoLoginRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoMonitoringSummaryResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoNodeMetricsResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRefreshTokenRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegisterRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryHealthResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRepositoryListResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoTagResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateClusterRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateRegistryRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUserResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoValuesSchemaResponse,
-  PostClustersClusterIdInstancesPathParameters,
-  PutClustersClusterIdInstancesInstanceIdPathParameters,
-  PutClustersClusterIdPathParameters,
-  PutRegistriesRegistryIdPathParameters
-} from './api.schemas'
-import { customAxiosInstance } from '../axios-mutator';
-
-
-type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1];
-
-
-  /**
- * 使用用户名和密码获取访问令牌
- * @summary 用户登录
- */
-export const postAuthLogin = (
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoLoginRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoLoginRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoAuthResponse>(
-      {url: `/auth/login`, method: 'POST',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoLoginRequest
-    },
-      options);
-    }
-  
-/**
- * 使用刷新令牌获取新的访问令牌
- * @summary 刷新访问令牌
- */
-export const postAuthRefresh = (
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoRefreshTokenRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRefreshTokenRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoAuthResponse>(
-      {url: `/auth/refresh`, method: 'POST',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoRefreshTokenRequest
-    },
-      options);
-    }
-  
-/**
- * 创建一个新的后台用户
- * @summary 用户注册
- */
-export const postAuthRegister = (
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoRegisterRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegisterRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUserResponse>(
-      {url: `/auth/register`, method: 'POST',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoRegisterRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 列出所有集群
- */
-export const getClusters = (
-    
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse[]>(
-      {url: `/clusters`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * 创建一个新的 Kubernetes 集群配置
- * @summary 创建集群
- */
-export const postClusters = (
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateClusterRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateClusterRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse>(
-      {url: `/clusters`, method: 'POST',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateClusterRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 删除集群
- */
-export const deleteClustersClusterId = (
-    { clusterId }: DeleteClustersClusterIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<string>(
-      {url: `/clusters/${clusterId}`, method: 'DELETE'
-    },
-      options);
-    }
-  
-/**
- * @summary 获取集群详情
- */
-export const getClustersClusterId = (
-    { clusterId }: GetClustersClusterIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse>(
-      {url: `/clusters/${clusterId}`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 更新集群
- */
-export const putClustersClusterId = (
-    { clusterId }: PutClustersClusterIdPathParameters,
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateClusterRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateClusterRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse>(
-      {url: `/clusters/${clusterId}`, method: 'PUT',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateClusterRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 获取集群健康状态
- */
-export const getClustersClusterIdHealth = (
-    { clusterId }: GetClustersClusterIdHealthPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterHealthResponse>(
-      {url: `/clusters/${clusterId}/health`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 列出实例
- */
-export const getClustersClusterIdInstances = (
-    { clusterId }: GetClustersClusterIdInstancesPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceListResponse>(
-      {url: `/clusters/${clusterId}/instances`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * 在指定集群上部署一个 artifact
- * @summary 创建实例
- */
-export const postClustersClusterIdInstances = (
-    { clusterId }: PostClustersClusterIdInstancesPathParameters,
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse>(
-      {url: `/clusters/${clusterId}/instances`, method: 'POST',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 删除实例
- */
-export const deleteClustersClusterIdInstancesInstanceId = (
-    { clusterId, instanceId }: DeleteClustersClusterIdInstancesInstanceIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<string>(
-      {url: `/clusters/${clusterId}/instances/${instanceId}`, method: 'DELETE'
-    },
-      options);
-    }
-  
-/**
- * @summary 获取实例详情
- */
-export const getClustersClusterIdInstancesInstanceId = (
-    { clusterId, instanceId }: GetClustersClusterIdInstancesInstanceIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse>(
-      {url: `/clusters/${clusterId}/instances/${instanceId}`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 更新实例
- */
-export const putClustersClusterIdInstancesInstanceId = (
-    { clusterId, instanceId }: PutClustersClusterIdInstancesInstanceIdPathParameters,
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse>(
-      {url: `/clusters/${clusterId}/instances/${instanceId}`, method: 'PUT',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 获取实例 Service/Ingress 入口
- */
-export const getClustersClusterIdInstancesInstanceIdEntries = (
-    { clusterId, instanceId }: GetClustersClusterIdInstancesInstanceIdEntriesPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryResponse[]>(
-      {url: `/clusters/${clusterId}/instances/${instanceId}/entries`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 列出集群监控
- */
-export const getMonitoringClusters = (
-    
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterMetricsResponse[]>(
-      {url: `/monitoring/clusters`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 获取集群监控
- */
-export const getMonitoringClustersClusterId = (
-    { clusterId }: GetMonitoringClustersClusterIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterMetricsResponse>(
-      {url: `/monitoring/clusters/${clusterId}`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 获取节点指标
- */
-export const getMonitoringClustersClusterIdNodes = (
-    { clusterId }: GetMonitoringClustersClusterIdNodesPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoNodeMetricsResponse[]>(
-      {url: `/monitoring/clusters/${clusterId}/nodes`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 获取监控汇总
- */
-export const getMonitoringSummary = (
-    
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoMonitoringSummaryResponse>(
-      {url: `/monitoring/summary`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 列出所有 Registries
- */
-export const getRegistries = (
-    
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse[]>(
-      {url: `/registries`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * 新增 OCI Registry 配置
- * @summary 创建 Registry
- */
-export const postRegistries = (
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateRegistryRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateRegistryRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse>(
-      {url: `/registries`, method: 'POST',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateRegistryRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 删除 Registry
- */
-export const deleteRegistriesRegistryId = (
-    { registryId }: DeleteRegistriesRegistryIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<string>(
-      {url: `/registries/${registryId}`, method: 'DELETE'
-    },
-      options);
-    }
-  
-/**
- * @summary 获取 Registry
- */
-export const getRegistriesRegistryId = (
-    { registryId }: GetRegistriesRegistryIdPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse>(
-      {url: `/registries/${registryId}`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * @summary 更新 Registry
- */
-export const putRegistriesRegistryId = (
-    { registryId }: PutRegistriesRegistryIdPathParameters,
-    githubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateRegistryRequest: GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateRegistryRequest,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse>(
-      {url: `/registries/${registryId}`, method: 'PUT',
-      headers: {'Content-Type': 'application/json', },
-      data: githubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateRegistryRequest
-    },
-      options);
-    }
-  
-/**
- * @summary 检查 Registry 健康
- */
-export const getRegistriesRegistryIdHealth = (
-    { registryId }: GetRegistriesRegistryIdHealthPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryHealthResponse>(
-      {url: `/registries/${registryId}/health`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * 列出指定 Registry 中的所有 Repository
- * @summary 列出 Registry 中的所有 Repositories
- */
-export const getRegistriesRegistryIdRepositories = (
-    { registryId }: GetRegistriesRegistryIdRepositoriesPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRepositoryListResponse>(
-      {url: `/registries/${registryId}/repositories`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * 列出指定 Repository 中的所有 Artifact，支持按类型过滤
- * @summary 列出 Repository 中的所有 Artifacts
- */
-export const getRegistriesRegistryIdRepositoriesRepositoryNameArtifacts = (
-    { registryId, repositoryName }: GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsPathParameters,
-    params?: GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsParams,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoTagResponse[]>(
-      {url: `/registries/${registryId}/repositories/${repositoryName}/artifacts`, method: 'GET',
-        params
-    },
-      options);
-    }
-  
-/**
- * 获取指定 Artifact 的详细信息
- * @summary 获取 Artifact 详情
- */
-export const getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReference = (
-    { registryId, repositoryName, reference }: GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferencePathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoArtifactResponse>(
-      {url: `/registries/${registryId}/repositories/${repositoryName}/artifacts/${reference}`, method: 'GET'
-    },
-      options);
-    }
-  
-/**
- * 获取 Helm Chart 的 values.schema.json (仅支持 Chart 类型)
- * @summary 获取 Helm Chart Values Schema
- */
-export const getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchema = (
-    { registryId, repositoryName, reference }: GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchemaPathParameters,
- options?: SecondParameter<typeof customAxiosInstance>,) => {
-      return customAxiosInstance<GithubComOcdpClusterServiceInternalAdapterInputHttpDtoValuesSchemaResponse>(
-      {url: `/registries/${registryId}/repositories/${repositoryName}/artifacts/${reference}/values-schema`, method: 'GET'
-    },
-      options);
-    }
-  
-export type PostAuthLoginResult = NonNullable<Awaited<ReturnType<typeof postAuthLogin>>>
-export type PostAuthRefreshResult = NonNullable<Awaited<ReturnType<typeof postAuthRefresh>>>
-export type PostAuthRegisterResult = NonNullable<Awaited<ReturnType<typeof postAuthRegister>>>
-export type GetClustersResult = NonNullable<Awaited<ReturnType<typeof getClusters>>>
-export type PostClustersResult = NonNullable<Awaited<ReturnType<typeof postClusters>>>
-export type DeleteClustersClusterIdResult = NonNullable<Awaited<ReturnType<typeof deleteClustersClusterId>>>
-export type GetClustersClusterIdResult = NonNullable<Awaited<ReturnType<typeof getClustersClusterId>>>
-export type PutClustersClusterIdResult = NonNullable<Awaited<ReturnType<typeof putClustersClusterId>>>
-export type GetClustersClusterIdHealthResult = NonNullable<Awaited<ReturnType<typeof getClustersClusterIdHealth>>>
-export type GetClustersClusterIdInstancesResult = NonNullable<Awaited<ReturnType<typeof getClustersClusterIdInstances>>>
-export type PostClustersClusterIdInstancesResult = NonNullable<Awaited<ReturnType<typeof postClustersClusterIdInstances>>>
-export type DeleteClustersClusterIdInstancesInstanceIdResult = NonNullable<Awaited<ReturnType<typeof deleteClustersClusterIdInstancesInstanceId>>>
-export type GetClustersClusterIdInstancesInstanceIdResult = NonNullable<Awaited<ReturnType<typeof getClustersClusterIdInstancesInstanceId>>>
-export type PutClustersClusterIdInstancesInstanceIdResult = NonNullable<Awaited<ReturnType<typeof putClustersClusterIdInstancesInstanceId>>>
-export type GetClustersClusterIdInstancesInstanceIdEntriesResult = NonNullable<Awaited<ReturnType<typeof getClustersClusterIdInstancesInstanceIdEntries>>>
-export type GetMonitoringClustersResult = NonNullable<Awaited<ReturnType<typeof getMonitoringClusters>>>
-export type GetMonitoringClustersClusterIdResult = NonNullable<Awaited<ReturnType<typeof getMonitoringClustersClusterId>>>
-export type GetMonitoringClustersClusterIdNodesResult = NonNullable<Awaited<ReturnType<typeof getMonitoringClustersClusterIdNodes>>>
-export type GetMonitoringSummaryResult = NonNullable<Awaited<ReturnType<typeof getMonitoringSummary>>>
-export type GetRegistriesResult = NonNullable<Awaited<ReturnType<typeof getRegistries>>>
-export type PostRegistriesResult = NonNullable<Awaited<ReturnType<typeof postRegistries>>>
-export type DeleteRegistriesRegistryIdResult = NonNullable<Awaited<ReturnType<typeof deleteRegistriesRegistryId>>>
-export type GetRegistriesRegistryIdResult = NonNullable<Awaited<ReturnType<typeof getRegistriesRegistryId>>>
-export type PutRegistriesRegistryIdResult = NonNullable<Awaited<ReturnType<typeof putRegistriesRegistryId>>>
-export type GetRegistriesRegistryIdHealthResult = NonNullable<Awaited<ReturnType<typeof getRegistriesRegistryIdHealth>>>
-export type GetRegistriesRegistryIdRepositoriesResult = NonNullable<Awaited<ReturnType<typeof getRegistriesRegistryIdRepositories>>>
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsResult = NonNullable<Awaited<ReturnType<typeof getRegistriesRegistryIdRepositoriesRepositoryNameArtifacts>>>
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceResult = NonNullable<Awaited<ReturnType<typeof getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReference>>>
-export type GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchemaResult = NonNullable<Awaited<ReturnType<typeof getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchema>>>
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@ -1,197 +0,0 @@
-/**
- * API Client entry point
- * Export configured API client, generated functions, and friendly aliases.
- */
-
-type AxiosOptions<T extends (...args: any) => any> = Parameters<T>[2];
-
-import {
-  deleteClustersClusterId,
-  deleteClustersClusterIdInstancesInstanceId,
-  deleteRegistriesRegistryId,
-  getClusters,
-  getClustersClusterId,
-  getClustersClusterIdHealth,
-  getClustersClusterIdInstances,
-  getClustersClusterIdInstancesInstanceId,
-  getClustersClusterIdInstancesInstanceIdEntries,
-  getMonitoringClusters,
-  getMonitoringClustersClusterId,
-  getMonitoringClustersClusterIdNodes,
-  getMonitoringSummary,
-  getRegistries,
-  getRegistriesRegistryId,
-  getRegistriesRegistryIdHealth,
-  getRegistriesRegistryIdRepositories,
-  getRegistriesRegistryIdRepositoriesRepositoryNameArtifacts,
-  getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReference,
-  getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchema,
-  postAuthLogin,
-  postAuthRefresh,
-  postAuthRegister,
-  postClusters,
-  postClustersClusterIdInstances,
-  postRegistries,
-  putClustersClusterId,
-  putClustersClusterIdInstancesInstanceId,
-  putRegistriesRegistryId,
-} from './generated-orval/api';
-
-import type {
-  DeleteClustersClusterIdInstancesInstanceIdPathParameters,
-  DeleteClustersClusterIdPathParameters,
-  DeleteRegistriesRegistryIdPathParameters,
-  GetClustersClusterIdInstancesInstanceIdPathParameters,
-  GetClustersClusterIdInstancesPathParameters,
-  GetRegistriesRegistryIdHealthPathParameters,
-  GetRegistriesRegistryIdPathParameters,
-  GetRegistriesRegistryIdRepositoriesPathParameters,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsPathParameters,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferencePathParameters,
-  GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchemaPathParameters,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoArtifactResponse as GeneratedArtifactResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoAuthResponse as GeneratedAuthResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterMetricsResponse as GeneratedClusterMetricsResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoClusterResponse as GeneratedClusterResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateClusterRequest as GeneratedCreateClusterRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateInstanceRequest as GeneratedCreateInstanceRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoCreateRegistryRequest as GeneratedCreateRegistryRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceEntryResponse as GeneratedInstanceEntry,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponse as GeneratedInstanceResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoLoginRequest as GeneratedLoginRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoMonitoringSummaryResponse as GeneratedMonitoringSummary,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoNodeMetricsResponse as GeneratedNodeMetricsResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRefreshTokenRequest as GeneratedRefreshTokenRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegisterRequest as GeneratedRegisterRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryHealthResponse as GeneratedRegistryHealthResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRegistryResponse as GeneratedRegistryResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoRepositoryListResponse as GeneratedRepositoryListResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoTagResponse as GeneratedTagResponse,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateClusterRequest as GeneratedUpdateClusterRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateInstanceRequest as GeneratedUpdateInstanceRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUpdateRegistryRequest as GeneratedUpdateRegistryRequest,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoUserResponse as GeneratedUserResponse,
-  PutClustersClusterIdInstancesInstanceIdPathParameters,
-  PutClustersClusterIdPathParameters,
-  PutRegistriesRegistryIdPathParameters,
-} from './generated-orval/api.schemas';
-
-import {
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseLastOperation as GeneratedInstanceLastOperationEnum,
-  GithubComOcdpClusterServiceInternalAdapterInputHttpDtoInstanceResponseStatus as GeneratedInstanceStatusEnum,
-} from './generated-orval/api.schemas';
-
-export { AXIOS_INSTANCE, customAxiosInstance, setAuthToken } from './axios-mutator';
-export { keysToCamel, keysToSnake, snakeToCamel, camelToSnake } from '@/shared/utils/case-converter';
-
-// Re-export raw generated APIs/types for advanced usages
-export * from './generated-orval/api';
-export type * from './generated-orval/api.schemas';
-
-// ---------- Friendly type aliases ----------
-export type AuthResponse = GeneratedAuthResponse;
-export type RegisterBody = GeneratedRegisterRequest;
-export type LoginBody = GeneratedLoginRequest;
-export type RefreshTokenBody = GeneratedRefreshTokenRequest;
-export type UserResponse = GeneratedUserResponse;
-
-export type ClusterResponse = GeneratedClusterResponse;
-export type CreateClusterRequest = GeneratedCreateClusterRequest;
-export type UpdateClusterRequest = GeneratedUpdateClusterRequest;
-
-export type RegistryResponse = GeneratedRegistryResponse;
-export type CreateRegistryRequest = GeneratedCreateRegistryRequest;
-export type UpdateRegistryRequest = GeneratedUpdateRegistryRequest;
-export type RegistryHealthResponse = GeneratedRegistryHealthResponse;
-
-export type InstanceResponse = GeneratedInstanceResponse;
-export type CreateInstanceRequest = GeneratedCreateInstanceRequest;
-export type UpdateInstanceRequest = GeneratedUpdateInstanceRequest;
-export type InstanceEntry = GeneratedInstanceEntry;
-export const INSTANCE_STATUS = GeneratedInstanceStatusEnum;
-export type InstanceStatus = NonNullable<InstanceResponse['status']>;
-export const INSTANCE_LAST_OPERATION = GeneratedInstanceLastOperationEnum;
-export type InstanceLastOperation = NonNullable<InstanceResponse['lastOperation']>;
-
-export type ArtifactResponse = GeneratedArtifactResponse;
-export type ArtifactListItem = GeneratedTagResponse;
-export type ListRepositories200Item =
-  | {
-      name?: string;
-      artifact_count?: number;
-      artifactCount?: number;
-    }
-  | string;
-export type RepositoryListResponse = GeneratedRepositoryListResponse;
-export type ListArtifactsFilter = 'all' | 'chart' | 'image' | 'other';
-
-export type ClusterMonitoring = GeneratedClusterMetricsResponse;
-export type ClusterMonitoringStatus = ClusterMonitoring['status'];
-export type MonitoringSummary = GeneratedMonitoringSummary;
-export type NodeMetricsResponse = GeneratedNodeMetricsResponse;
-
-// ---------- Friendly function aliases ----------
-export const login = postAuthLogin;
-export const register = postAuthRegister;
-export const refreshAuth = postAuthRefresh;
-
-export const listClusters = getClusters;
-export const createCluster = postClusters;
-export const getCluster = getClustersClusterId;
-export const updateCluster = putClustersClusterId;
-export const deleteCluster = deleteClustersClusterId;
-export const getClusterHealth = getClustersClusterIdHealth;
-
-export const listInstances = getClustersClusterIdInstances;
-export const createInstance = postClustersClusterIdInstances;
-export const getInstance = getClustersClusterIdInstancesInstanceId;
-export const updateInstance = putClustersClusterIdInstancesInstanceId;
-export const deleteInstance = deleteClustersClusterIdInstancesInstanceId;
-export const listInstanceEntries = getClustersClusterIdInstancesInstanceIdEntries;
-
-export const listRegistries = getRegistries;
-export const createRegistry = postRegistries;
-export const getRegistry = getRegistriesRegistryId;
-export const updateRegistry = putRegistriesRegistryId;
-export const deleteRegistry = deleteRegistriesRegistryId;
-export const checkRegistryHealth = getRegistriesRegistryIdHealth;
-
-export const listRepositories = getRegistriesRegistryIdRepositories;
-type ListArtifactsRequestOptions = AxiosOptions<typeof getRegistriesRegistryIdRepositoriesRepositoryNameArtifacts>;
-
-export const listArtifacts = (
-  params: GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsPathParameters,
-  options?: { filter?: ListArtifactsFilter },
-  axiosOptions?: ListArtifactsRequestOptions,
-) => {
-  const query =
-    options?.filter && options.filter !== 'all'
-      ? { media_type: options.filter }
-      : undefined;
-  return getRegistriesRegistryIdRepositoriesRepositoryNameArtifacts(params, query, axiosOptions);
-};
-
-export const getArtifact = getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReference;
-export const getValuesSchema = getRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchema;
-
-export const listClusterMonitoring = getMonitoringClusters;
-export const getClusterMonitoring = getMonitoringClustersClusterId;
-export const getClusterNodeMetrics = getMonitoringClustersClusterIdNodes;
-export const getMonitoringSummaryData = getMonitoringSummary;
-
-// Re-export parameter types with friendly names for caller convenience
-export type DeleteClusterPathParameters = DeleteClustersClusterIdPathParameters;
-export type UpdateClusterPathParameters = PutClustersClusterIdPathParameters;
-export type ClusterInstancesPathParameters = GetClustersClusterIdInstancesPathParameters;
-export type InstancePathParameters = GetClustersClusterIdInstancesInstanceIdPathParameters;
-export type UpdateInstancePathParameters = PutClustersClusterIdInstancesInstanceIdPathParameters;
-export type DeleteInstancePathParameters = DeleteClustersClusterIdInstancesInstanceIdPathParameters;
-export type RegistryPathParameters = GetRegistriesRegistryIdPathParameters;
-export type UpdateRegistryPathParameters = PutRegistriesRegistryIdPathParameters;
-export type DeleteRegistryPathParameters = DeleteRegistriesRegistryIdPathParameters;
-export type RegistryHealthPathParameters = GetRegistriesRegistryIdHealthPathParameters;
-export type ListRepositoriesPathParameters = GetRegistriesRegistryIdRepositoriesPathParameters;
-export type ListArtifactsPathParameters = GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsPathParameters;
-export type ListArtifactsParams = { filter?: ListArtifactsFilter };
-export type GetArtifactPathParameters = GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferencePathParameters;
-export type GetValuesSchemaPathParameters = GetRegistriesRegistryIdRepositoriesRepositoryNameArtifactsReferenceValuesSchemaPathParameters;
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@ -1,38 +0,0 @@
-/**
- * Main Application Component
- * 主应用组件
- */
-
-import { useLocation, useNavigate } from "react-router-dom";
-import { useMemo } from "react";
-import { AppRoutes } from "./routes/AppRoutes";
-import { useAuth } from "./providers";
-import { getNavItems } from "./constants/navigation";
-
-/**
- * Application root component
- * Manages routing and global state
- */
-export default function App() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { isAuthenticated, login, logout } = useAuth();
-
-  // Generate navigation items based on current location
-  const navItems = useMemo(
-    () => getNavItems(location.pathname, navigate),
-    [location.pathname, navigate]
-  );
-
-  return (
-    <AppRoutes
-      isAuthenticated={isAuthenticated}
-      userName="User"
-      navItems={navItems}
-      onLogin={login}
-      onLogout={logout}
-    />
-  );
-}
-
-
--- a/frontend/src/app/admin/users/page.tsx
+++ b/frontend/src/app/admin/users/page.tsx
@ -0,0 +1,334 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useAuth } from '@/lib/auth-context';
+import { adminApi, workspaceApi } from '@/lib/api';
+import type { UserDTO, WorkspaceDTO } from '@/lib/types';
+import { Users, Plus, Trash2, Edit, Shield, ShieldOff } from 'lucide-react';
+
+export default function UsersManagementPage() {
+  const { user: currentUser } = useAuth();
+  const [users, setUsers] = useState<UserDTO[]>([]);
+  const [workspaces, setWorkspaces] = useState<WorkspaceDTO[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingUser, setEditingUser] = useState<UserDTO | null>(null);
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    email: '',
+    role: 'user',
+    workspace_id: '',
+  });
+
+  const fetchData = async () => {
+    try {
+      const [usersRes, workspacesRes] = await Promise.all([
+        adminApi.listUsers(),
+        workspaceApi.list(),
+      ]);
+      setUsers(usersRes.data.users || []);
+      setWorkspaces(workspacesRes.data.workspaces || []);
+    } catch (error) {
+      console.error('Failed to fetch data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingUser) {
+        await adminApi.updateUser(editingUser.id, {
+          email: formData.email || undefined,
+        });
+      } else {
+        await adminApi.createUser({
+          username: formData.username,
+          password: formData.password,
+          email: formData.email || undefined,
+          role: formData.role,
+          workspace_id: formData.workspace_id || undefined,
+        });
+      }
+      setShowForm(false);
+      setEditingUser(null);
+      setFormData({ username: '', password: '', email: '', role: 'user', workspace_id: '' });
+      fetchData();
+    } catch (error) {
+      console.error('Failed to save user:', error);
+      alert('Failed to save user');
+    }
+  };
+
+  const handleEdit = (user: UserDTO) => {
+    setEditingUser(user);
+    setFormData({
+      username: user.username,
+      password: '',
+      email: user.email || '',
+      role: user.role,
+      workspace_id: user.workspace_id || '',
+    });
+    setShowForm(true);
+  };
+
+  const handleDelete = async (userId: string) => {
+    if (!confirm('Are you sure you want to delete this user?')) return;
+    try {
+      await adminApi.deleteUser(userId);
+      fetchData();
+    } catch (error) {
+      console.error('Failed to delete user:', error);
+      alert('Failed to delete user');
+    }
+  };
+
+  const handleToggleActive = async (user: UserDTO) => {
+    try {
+      await adminApi.setUserActive(user.id, !user.is_active);
+      fetchData();
+    } catch (error) {
+      console.error('Failed to toggle user status:', error);
+      alert('Failed to toggle user status');
+    }
+  };
+
+  const handleResetPassword = async (userId: string) => {
+    const newPassword = prompt('Enter new password:');
+    if (!newPassword || newPassword.length < 6) {
+      alert('Password must be at least 6 characters');
+      return;
+    }
+    try {
+      await adminApi.resetPassword(userId, newPassword);
+      alert('Password reset successfully');
+    } catch (error) {
+      console.error('Failed to reset password:', error);
+      alert('Failed to reset password');
+    }
+  };
+
+  if (currentUser?.role !== 'admin') {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-[var(--muted-foreground)]">Access denied. Admin only.</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">User Management</h1>
+          <p className="text-[var(--muted-foreground)]">Manage users and permissions</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingUser(null);
+            setFormData({ username: '', password: '', email: '', role: 'user', workspace_id: '' });
+          }}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+        >
+          <Plus className="w-4 h-4" />
+          Add User
+        </button>
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-lg p-6 w-full max-w-md border border-[var(--border)]">
+            <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+              {editingUser ? 'Edit User' : 'Add User'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Username</label>
+                <input
+                  type="text"
+                  value={formData.username}
+                  onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                  className="input"
+                  required
+                  disabled={!!editingUser}
+                />
+              </div>
+              {!editingUser && (
+                <div>
+                  <label className="label">Password</label>
+                  <input
+                    type="password"
+                    value={formData.password}
+                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                    className="input"
+                    required={!editingUser}
+                    minLength={6}
+                  />
+                </div>
+              )}
+              <div>
+                <label className="label">Email</label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  className="input"
+                />
+              </div>
+              <div>
+                <label className="label">Role</label>
+                <select
+                  value={formData.role}
+                  onChange={(e) => setFormData({ ...formData, role: e.target.value })}
+                  className="input"
+                >
+                  <option value="user">User</option>
+                  <option value="admin">Admin</option>
+                </select>
+              </div>
+              <div>
+                <label className="label">Workspace</label>
+                <select
+                  value={formData.workspace_id}
+                  onChange={(e) => setFormData({ ...formData, workspace_id: e.target.value })}
+                  className="input"
+                >
+                  <option value="">No workspace (Admin only)</option>
+                  {workspaces.map((ws) => (
+                    <option key={ws.id} value={ws.id}>
+                      {ws.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingUser(null);
+                  }}
+                  className="flex-1 px-4 py-2 rounded-lg border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--secondary)]"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+                >
+                  {editingUser ? 'Update' : 'Create'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Users Table */}
+      {users.length === 0 ? (
+        <div className="card text-center py-12">
+          <Users className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+          <p className="text-[var(--muted-foreground)]">No users created</p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-4 text-[var(--primary)] hover:underline"
+          >
+            Create your first user
+          </button>
+        </div>
+      ) : (
+        <div className="card overflow-hidden p-0">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Email</th>
+                <th>Role</th>
+                <th>Workspace</th>
+                <th>Status</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((user) => (
+                <tr key={user.id}>
+                  <td>
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-[var(--secondary)] flex items-center justify-center">
+                        <span className="text-sm font-medium text-[var(--foreground)]">
+                          {user.username.charAt(0).toUpperCase()}
+                        </span>
+                      </div>
+                      <span className="font-medium text-[var(--foreground)]">{user.username}</span>
+                    </div>
+                  </td>
+                  <td className="text-[var(--muted-foreground)]">{user.email || '-'}</td>
+                  <td>
+                    <span className={`badge ${user.role === 'admin' ? 'badge-info' : 'badge-success'}`}>
+                      {user.role}
+                    </span>
+                  </td>
+                  <td className="text-[var(--muted-foreground)]">
+                    {user.workspace_name || user.workspace_id || '-'}
+                  </td>
+                  <td>
+                    <span className={`badge ${user.is_active ? 'badge-success' : 'badge-error'}`}>
+                      {user.is_active ? 'Active' : 'Inactive'}
+                    </span>
+                  </td>
+                  <td>
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => handleToggleActive(user)}
+                        className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                        title={user.is_active ? 'Deactivate' : 'Activate'}
+                      >
+                        {user.is_active ? <ShieldOff className="w-4 h-4" /> : <Shield className="w-4 h-4" />}
+                      </button>
+                      <button
+                        onClick={() => handleResetPassword(user.id)}
+                        className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                        title="Reset Password"
+                      >
+                        <Shield className="w-4 h-4" />
+                      </button>
+                      <button
+                        onClick={() => handleEdit(user)}
+                        className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                      >
+                        <Edit className="w-4 h-4" />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(user.id)}
+                        className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[#ef4444]"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/app/admin/workspaces/page.tsx
+++ b/frontend/src/app/admin/workspaces/page.tsx
@ -0,0 +1,401 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useAuth } from '@/lib/auth-context';
+import { workspaceApi } from '@/lib/api';
+import type { WorkspaceDTO, QuotaDTO, CreateWorkspaceRequest, SetQuotasRequest } from '@/lib/types';
+import { FolderKanban, Plus, Trash2, Edit, Settings } from 'lucide-react';
+
+export default function WorkspacesPage() {
+  const { user } = useAuth();
+  const [workspaces, setWorkspaces] = useState<WorkspaceDTO[]>([]);
+  const [quotas, setQuotas] = useState<Record<string, QuotaDTO[]>>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [showQuotaForm, setShowQuotaForm] = useState(false);
+  const [editingWorkspace, setEditingWorkspace] = useState<WorkspaceDTO | null>(null);
+  const [selectedWorkspace, setSelectedWorkspace] = useState<WorkspaceDTO | null>(null);
+  const [formData, setFormData] = useState<CreateWorkspaceRequest>({
+    name: '',
+    description: '',
+  });
+  const [quotaFormData, setQuotaFormData] = useState<SetQuotasRequest>({
+    cpu: { hard_limit: 10, soft_limit: 8 },
+    gpu: { hard_limit: 2, soft_limit: 1 },
+    gpu_memory: { hard_limit: 16, soft_limit: 8 },
+  });
+
+  const fetchWorkspaces = async () => {
+    try {
+      const response = await workspaceApi.list();
+      setWorkspaces(response.data.workspaces || []);
+    } catch (error) {
+      console.error('Failed to fetch workspaces:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchQuotas = async (workspaceId: string) => {
+    try {
+      const response = await workspaceApi.getQuotas(workspaceId);
+      setQuotas((prev) => ({ ...prev, [workspaceId]: response.data.quotas || [] }));
+    } catch (error) {
+      console.error('Failed to fetch quotas:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchWorkspaces();
+  }, []);
+
+  useEffect(() => {
+    workspaces.forEach((ws) => {
+      if (!quotas[ws.id]) {
+        fetchQuotas(ws.id);
+      }
+    });
+  }, [workspaces]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingWorkspace) {
+        await workspaceApi.update(editingWorkspace.id, formData);
+      } else {
+        await workspaceApi.create(formData);
+      }
+      setShowForm(false);
+      setEditingWorkspace(null);
+      setFormData({ name: '', description: '' });
+      fetchWorkspaces();
+    } catch (error) {
+      console.error('Failed to save workspace:', error);
+      alert('Failed to save workspace');
+    }
+  };
+
+  const handleEdit = (workspace: WorkspaceDTO) => {
+    setEditingWorkspace(workspace);
+    setFormData({ name: workspace.name, description: workspace.description || '' });
+    setShowForm(true);
+  };
+
+  const handleDelete = async (workspaceId: string) => {
+    if (!confirm('Are you sure you want to delete this workspace?')) return;
+    try {
+      await workspaceApi.delete(workspaceId);
+      fetchWorkspaces();
+    } catch (error) {
+      console.error('Failed to delete workspace:', error);
+      alert('Failed to delete workspace');
+    }
+  };
+
+  const handleSaveQuotas = async () => {
+    if (!selectedWorkspace) return;
+    try {
+      await workspaceApi.setQuotas(selectedWorkspace.id, quotaFormData);
+      setShowQuotaForm(false);
+      fetchQuotas(selectedWorkspace.id);
+    } catch (error) {
+      console.error('Failed to save quotas:', error);
+      alert('Failed to save quotas');
+    }
+  };
+
+  if (user?.role !== 'admin') {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-[var(--muted-foreground)]">Access denied. Admin only.</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">Workspaces</h1>
+          <p className="text-[var(--muted-foreground)]">Manage workspaces and quotas</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingWorkspace(null);
+            setFormData({ name: '', description: '' });
+          }}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+        >
+          <Plus className="w-4 h-4" />
+          Add Workspace
+        </button>
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-lg p-6 w-full max-w-md border border-[var(--border)]">
+            <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+              {editingWorkspace ? 'Edit Workspace' : 'Add Workspace'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Name</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  required
+                />
+              </div>
+              <div>
+                <label className="label">Description</label>
+                <textarea
+                  value={formData.description || ''}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="input"
+                  rows={3}
+                />
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingWorkspace(null);
+                  }}
+                  className="flex-1 px-4 py-2 rounded-lg border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--secondary)]"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+                >
+                  {editingWorkspace ? 'Update' : 'Create'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Quota Form Modal */}
+      {showQuotaForm && selectedWorkspace && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-lg p-6 w-full max-w-md border border-[var(--border)]">
+            <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+              Set Quotas for {selectedWorkspace.name}
+            </h2>
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">CPU (cores)</label>
+                  <input
+                    type="number"
+                    value={quotaFormData.cpu?.hard_limit ?? 10}
+                    onChange={(e) =>
+                      setQuotaFormData({
+                        ...quotaFormData,
+                        cpu: { hard_limit: parseFloat(e.target.value), soft_limit: quotaFormData.cpu?.soft_limit ?? 8 },
+                      })
+                    }
+                    className="input"
+                    min="0"
+                  />
+                </div>
+                <div>
+                  <label className="label">CPU Warning</label>
+                  <input
+                    type="number"
+                    value={quotaFormData.cpu?.soft_limit ?? 8}
+                    onChange={(e) =>
+                      setQuotaFormData({
+                        ...quotaFormData,
+                        cpu: { hard_limit: quotaFormData.cpu?.hard_limit ?? 10, soft_limit: parseFloat(e.target.value) },
+                      })
+                    }
+                    className="input"
+                    min="0"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">GPU (cards)</label>
+                  <input
+                    type="number"
+                    value={quotaFormData.gpu?.hard_limit ?? 2}
+                    onChange={(e) =>
+                      setQuotaFormData({
+                        ...quotaFormData,
+                        gpu: { hard_limit: parseFloat(e.target.value), soft_limit: quotaFormData.gpu?.soft_limit ?? 1 },
+                      })
+                    }
+                    className="input"
+                    min="0"
+                  />
+                </div>
+                <div>
+                  <label className="label">GPU Warning</label>
+                  <input
+                    type="number"
+                    value={quotaFormData.gpu?.soft_limit ?? 1}
+                    onChange={(e) =>
+                      setQuotaFormData({
+                        ...quotaFormData,
+                        gpu: { hard_limit: quotaFormData.gpu?.hard_limit ?? 2, soft_limit: parseFloat(e.target.value) },
+                      })
+                    }
+                    className="input"
+                    min="0"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">GPU Memory (GB)</label>
+                  <input
+                    type="number"
+                    value={quotaFormData.gpu_memory?.hard_limit ?? 16}
+                    onChange={(e) =>
+                      setQuotaFormData({
+                        ...quotaFormData,
+                        gpu_memory: { hard_limit: parseFloat(e.target.value), soft_limit: quotaFormData.gpu_memory?.soft_limit ?? 8 },
+                      })
+                    }
+                    className="input"
+                    min="0"
+                  />
+                </div>
+                <div>
+                  <label className="label">GPU Mem Warning</label>
+                  <input
+                    type="number"
+                    value={quotaFormData.gpu_memory?.soft_limit ?? 8}
+                    onChange={(e) =>
+                      setQuotaFormData({
+                        ...quotaFormData,
+                        gpu_memory: { hard_limit: quotaFormData.gpu_memory?.hard_limit ?? 16, soft_limit: parseFloat(e.target.value) },
+                      })
+                    }
+                    className="input"
+                    min="0"
+                  />
+                </div>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowQuotaForm(false);
+                    setSelectedWorkspace(null);
+                  }}
+                  className="flex-1 px-4 py-2 rounded-lg border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--secondary)]"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSaveQuotas}
+                  className="flex-1 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+                >
+                  Save Quotas
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Workspaces List */}
+      {workspaces.length === 0 ? (
+        <div className="card text-center py-12">
+          <FolderKanban className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+          <p className="text-[var(--muted-foreground)]">No workspaces created</p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-4 text-[var(--primary)] hover:underline"
+          >
+            Create your first workspace
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {workspaces.map((workspace) => (
+            <div key={workspace.id} className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="p-3 rounded-lg bg-[var(--primary)]/10">
+                    <FolderKanban className="w-6 h-6 text-[var(--primary)]" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-[var(--foreground)]">{workspace.name}</h3>
+                    {workspace.description && (
+                      <p className="text-sm text-[var(--muted-foreground)]">{workspace.description}</p>
+                    )}
+                    <p className="text-xs text-[var(--muted-foreground)] mt-1">
+                      Created: {new Date(workspace.created_at).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => {
+                      setSelectedWorkspace(workspace);
+                      setShowQuotaForm(true);
+                    }}
+                    className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                    title="Set Quotas"
+                  >
+                    <Settings className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleEdit(workspace)}
+                    className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  >
+                    <Edit className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(workspace.id)}
+                    className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[#ef4444]"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              {/* Quotas Display */}
+              {quotas[workspace.id] && quotas[workspace.id].length > 0 && (
+                <div className="mt-4 pt-4 border-t border-[var(--border)]">
+                  <p className="text-sm font-medium text-[var(--foreground)] mb-2">Quotas</p>
+                  <div className="grid grid-cols-3 gap-4">
+                    {quotas[workspace.id].map((quota) => (
+                      <div key={quota.id} className="bg-[var(--secondary)] rounded-lg p-3">
+                        <p className="text-xs text-[var(--muted-foreground)] uppercase">{quota.resource_type}</p>
+                        <p className="text-lg font-semibold text-[var(--foreground)]">
+                          {quota.used} / {quota.hard_limit === 0 ? '∞' : quota.hard_limit}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/app/chart-references/page.tsx
+++ b/frontend/src/app/chart-references/page.tsx
@ -0,0 +1,335 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { chartReferenceApi, registryApi } from '@/lib/api';
+import type { ChartReferenceDTO, CreateChartReferenceRequest, UpdateChartReferenceRequest, RegistryDTO } from '@/lib/types';
+import { Package, Plus, Trash2, Edit, ToggleLeft, ToggleRight, Search, Database } from 'lucide-react';
+
+export default function ChartReferencesPage() {
+  const [chartRefs, setChartRefs] = useState<ChartReferenceDTO[]>([]);
+  const [registries, setRegistries] = useState<RegistryDTO[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingChartRef, setEditingChartRef] = useState<ChartReferenceDTO | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [formData, setFormData] = useState<CreateChartReferenceRequest>({
+    registry_id: '',
+    repository: '',
+    chart_name: '',
+    description: '',
+    is_enabled: true,
+  });
+
+  const fetchChartRefs = async () => {
+    try {
+      const response = await chartReferenceApi.list();
+      setChartRefs(response.data || []);
+    } catch (error) {
+      console.error('Failed to fetch chart references:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchRegistries = async () => {
+    try {
+      const response = await registryApi.list();
+      setRegistries(response.data.registries || []);
+    } catch (error) {
+      console.error('Failed to fetch registries:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchChartRefs();
+    fetchRegistries();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingChartRef) {
+        await chartReferenceApi.update(editingChartRef.id, formData as UpdateChartReferenceRequest);
+      } else {
+        await chartReferenceApi.create(formData);
+      }
+      setShowForm(false);
+      setEditingChartRef(null);
+      setFormData({ registry_id: '', repository: '', chart_name: '', description: '', is_enabled: true });
+      fetchChartRefs();
+    } catch (error) {
+      console.error('Failed to save chart reference:', error);
+      alert('Failed to save chart reference');
+    }
+  };
+
+  const handleEdit = (chartRef: ChartReferenceDTO) => {
+    setEditingChartRef(chartRef);
+    setFormData({
+      registry_id: chartRef.registry_id,
+      repository: chartRef.repository,
+      chart_name: chartRef.chart_name,
+      description: chartRef.description || '',
+      is_enabled: chartRef.is_enabled,
+    });
+    setShowForm(true);
+  };
+
+  const handleDelete = async (chartRefId: string) => {
+    if (!confirm('Are you sure you want to delete this chart reference?')) return;
+    try {
+      await chartReferenceApi.delete(chartRefId);
+      fetchChartRefs();
+    } catch (error) {
+      console.error('Failed to delete chart reference:', error);
+      alert('Failed to delete chart reference');
+    }
+  };
+
+  const handleToggleEnabled = async (chartRef: ChartReferenceDTO) => {
+    try {
+      await chartReferenceApi.update(chartRef.id, { is_enabled: !chartRef.is_enabled });
+      fetchChartRefs();
+    } catch (error) {
+      console.error('Failed to toggle chart reference:', error);
+    }
+  };
+
+  const getRegistryName = (registryId: string) => {
+    const registry = registries.find(r => r.id === registryId);
+    return registry?.name || registryId;
+  };
+
+  const filteredChartRefs = chartRefs.filter(cr =>
+    cr.chart_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    cr.repository.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">Chart References</h1>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Manage Helm chart references from OCI registries
+          </p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingChartRef(null);
+            setFormData({ registry_id: '', repository: '', chart_name: '', description: '', is_enabled: true });
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity"
+        >
+          <Plus className="w-4 h-4" />
+          Add Chart Reference
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" />
+        <input
+          type="text"
+          placeholder="Search chart references..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 bg-[var(--card)] border border-[var(--border)] rounded-lg text-[var(--foreground)] placeholder:text-[var(--muted-foreground)]"
+        />
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-xl p-6 w-full max-w-lg border border-[var(--border)]">
+            <h2 className="text-xl font-bold text-[var(--foreground)] mb-4">
+              {editingChartRef ? 'Edit Chart Reference' : 'Add Chart Reference'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Registry
+                </label>
+                <select
+                  value={formData.registry_id}
+                  onChange={(e) => setFormData({ ...formData, registry_id: e.target.value })}
+                  required
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                >
+                  <option value="">Select a registry</option>
+                  {registries.map((r) => (
+                    <option key={r.id} value={r.id}>{r.name}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Repository (OCI path)
+                </label>
+                <input
+                  type="text"
+                  value={formData.repository}
+                  onChange={(e) => setFormData({ ...formData, repository: e.target.value })}
+                  placeholder="e.g., library/nginx"
+                  required
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Chart Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.chart_name}
+                  onChange={(e) => setFormData({ ...formData, chart_name: e.target.value })}
+                  placeholder="e.g., nginx"
+                  required
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Description
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  placeholder="Optional description..."
+                  rows={2}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="is_enabled"
+                  checked={formData.is_enabled}
+                  onChange={(e) => setFormData({ ...formData, is_enabled: e.target.checked })}
+                  className="w-4 h-4"
+                />
+                <label htmlFor="is_enabled" className="text-sm text-[var(--foreground)]">
+                  Enabled
+                </label>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingChartRef(null);
+                  }}
+                  className="flex-1 px-4 py-2 border border-[var(--border)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)] transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity"
+                >
+                  {editingChartRef ? 'Update' : 'Create'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="bg-[var(--card)] rounded-xl border border-[var(--border)] overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-[var(--secondary)]">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Status
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Chart
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Repository
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Registry
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Description
+              </th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-[var(--border)]">
+            {filteredChartRefs.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-[var(--muted-foreground)]">
+                  No chart references found
+                </td>
+              </tr>
+            ) : (
+              filteredChartRefs.map((cr) => (
+                <tr key={cr.id} className="hover:bg-[var(--secondary)] transition-colors">
+                  <td className="px-4 py-3">
+                    <button
+                      onClick={() => handleToggleEnabled(cr)}
+                      className="flex items-center gap-1"
+                    >
+                      {cr.is_enabled ? (
+                        <ToggleRight className="w-5 h-5 text-green-500" />
+                      ) : (
+                        <ToggleLeft className="w-5 h-5 text-gray-400" />
+                      )}
+                    </button>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <Package className="w-4 h-4 text-[var(--primary)]" />
+                      <span className="font-medium text-[var(--foreground)]">{cr.chart_name}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-[var(--foreground)]">{cr.repository}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-1 text-[var(--muted-foreground)]">
+                      <Database className="w-3 h-3" />
+                      {getRegistryName(cr.registry_id)}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-[var(--muted-foreground)] text-sm">
+                    {cr.description || '-'}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        onClick={() => handleEdit(cr)}
+                        className="p-1 hover:bg-[var(--secondary)] rounded"
+                      >
+                        <Edit className="w-4 h-4 text-[var(--muted-foreground)]" />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(cr.id)}
+                        className="p-1 hover:bg-[var(--secondary)] rounded"
+                      >
+                        <Trash2 className="w-4 h-4 text-red-500" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/app/charts/page.tsx
+++ b/frontend/src/app/charts/page.tsx
@ -0,0 +1,523 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { registryApi, instanceApi, clusterApi } from '@/lib/api';
+import { Package, Database, ChevronRight, Search, Rocket, X, Loader2 } from 'lucide-react';
+
+interface RegistryDTO {
+  id: string;
+  name: string;
+  url: string;
+  description?: string;
+  username?: string;
+  insecure: boolean;
+  isShared: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface CreateInstanceRequest {
+  name: string;
+  namespace: string;
+  repository: string;
+  chart: string;
+  version: string;
+  description?: string;
+  values_yaml?: string;
+  registry_id?: string;
+}
+
+interface ClusterDTO {
+  id: string;
+  name: string;
+  host: string;
+  description?: string;
+}
+
+export default function ChartsPage() {
+  const [registries, setRegistries] = useState<RegistryDTO[]>([]);
+  const [clusters, setClusters] = useState<ClusterDTO[]>([]);
+  const [selectedRegistry, setSelectedRegistry] = useState<RegistryDTO | null>(null);
+  const [repositories, setRepositories] = useState<string[]>([]);
+  const [selectedRepo, setSelectedRepo] = useState<string | null>(null);
+  const [artifacts, setArtifacts] = useState<Artifact[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingRepos, setIsLoadingRepos] = useState(false);
+  const [isLoadingArtifacts, setIsLoadingArtifacts] = useState(false);
+  const [showDeployModal, setShowDeployModal] = useState(false);
+  const [selectedArtifact, setSelectedArtifact] = useState<Artifact | null>(null);
+  const [isDeploying, setIsDeploying] = useState(false);
+  const [deployError, setDeployError] = useState<string | null>(null);
+  const [deployForm, setDeployForm] = useState({
+    name: '',
+    namespace: 'default',
+    clusterId: '',
+    description: '',
+    valuesYaml: '',
+  });
+
+  const fetchRegistries = async () => {
+    try {
+      const response = await registryApi.list();
+      const data = response.data;
+      setRegistries(Array.isArray(data) ? data : (data?.registries || []));
+    } catch (error) {
+      console.error('Failed to fetch registries:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchClusters = async () => {
+    try {
+      const response = await clusterApi.list();
+      const data = response.data;
+      const clusterList = Array.isArray(data) ? data : (data?.clusters || []);
+      setClusters(clusterList);
+      if (clusterList.length > 0 && !deployForm.clusterId) {
+        setDeployForm(prev => ({ ...prev, clusterId: clusterList[0].id }));
+      }
+    } catch (error) {
+      console.error('Failed to fetch clusters:', error);
+    }
+  };
+
+  const fetchRepositories = async (registryId: string) => {
+    setIsLoadingRepos(true);
+    setRepositories([]);
+    setSelectedRepo(null);
+    try {
+      const response = await registryApi.listRepositories(registryId);
+      setRepositories(response.data?.repositories || []);
+    } catch (error) {
+      console.error('Failed to fetch repositories:', error);
+    } finally {
+      setIsLoadingRepos(false);
+    }
+  };
+
+  const fetchArtifacts = async (registryId: string, repositoryName: string) => {
+    setIsLoadingArtifacts(true);
+    setArtifacts([]);
+    try {
+      const response = await registryApi.listArtifacts(registryId, repositoryName);
+      // Filter to only show chart type artifacts
+      const allArtifacts = Array.isArray(response.data) ? response.data : [];
+      const chartArtifacts = allArtifacts.filter((a: Artifact) => a.type === 'chart');
+      setArtifacts(chartArtifacts);
+    } catch (error) {
+      console.error('Failed to fetch artifacts:', error);
+    } finally {
+      setIsLoadingArtifacts(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRegistries();
+    fetchClusters();
+  }, []);
+
+  useEffect(() => {
+    if (selectedRegistry) {
+      fetchRepositories(selectedRegistry.id);
+    }
+  }, [selectedRegistry]);
+
+  useEffect(() => {
+    if (selectedRegistry && selectedRepo) {
+      fetchArtifacts(selectedRegistry.id, selectedRepo);
+    }
+  }, [selectedRepo]);
+
+  const filteredRepos = repositories.filter(repo =>
+    repo.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Only show chart repositories (those starting with "charts/")
+  const chartRepos = filteredRepos.filter(repo => repo.startsWith('charts/') || repo.includes('/charts/'));
+
+  const handleDeploy = async () => {
+    if (!selectedArtifact || !deployForm.clusterId || !deployForm.name) {
+      alert('Please fill in all required fields');
+      return;
+    }
+
+    setIsDeploying(true);
+    setDeployError(null);
+
+    try {
+      const request: CreateInstanceRequest = {
+        name: deployForm.name,
+        namespace: deployForm.namespace || 'default',
+        repository: selectedRepo!,
+        chart: selectedRepo!.split('/').pop() || selectedRepo!,
+        version: selectedArtifact.tag,
+        registry_id: selectedRegistry?.id,
+        description: deployForm.description,
+        values_yaml: deployForm.valuesYaml || undefined,
+      };
+
+      await instanceApi.create(deployForm.clusterId, request);
+      alert('Deployment created successfully!');
+      setShowDeployModal(false);
+      setSelectedArtifact(null);
+      setDeployForm({
+        name: '',
+        namespace: 'default',
+        clusterId: clusters[0]?.id || '',
+        description: '',
+        valuesYaml: '',
+      });
+    } catch (error: unknown) {
+      console.error('Failed to deploy:', error);
+      let errorMessage = 'Failed to create deployment';
+      if (error && typeof error === 'object' && 'response' in error) {
+        const axiosError = error as { response?: { data?: { error?: string; message?: string } } };
+        errorMessage = axiosError.response?.data?.message || axiosError.response?.data?.error || errorMessage;
+      }
+      setDeployError(errorMessage);
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  const openDeployModal = (artifact: Artifact) => {
+    setSelectedArtifact(artifact);
+    setDeployForm(prev => ({
+      ...prev,
+      name: artifact.tag.replace(/[^\w-]/g, '-').toLowerCase(),
+    }));
+    setShowDeployModal(true);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-[var(--foreground)]">Helm Charts</h1>
+        <p className="text-[var(--muted-foreground)]">Browse and deploy Helm charts from OCI registries</p>
+      </div>
+
+      {/* Registry Selection */}
+      <div className="flex items-center gap-4">
+        <label className="text-sm font-medium text-[var(--foreground)]">Registry:</label>
+        <div className="flex gap-2 flex-wrap">
+          {registries.map((registry) => (
+            <button
+              key={registry.id}
+              onClick={() => {
+                setSelectedRegistry(registry);
+                setSelectedRepo(null);
+              }}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${
+                selectedRegistry?.id === registry.id
+                  ? 'border-[var(--primary)] bg-[var(--primary)]/10 text-[var(--primary)]'
+                  : 'border-[var(--border)] text-[var(--foreground)] hover:border-[var(--primary)]'
+              }`}
+            >
+              <Database className="w-4 h-4" />
+              {registry.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Search */}
+      {selectedRegistry && (
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" />
+          <input
+            type="text"
+            placeholder="Search charts..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 bg-[var(--card)] border border-[var(--border)] rounded-lg text-[var(--foreground)] placeholder:text-[var(--muted-foreground)]"
+          />
+        </div>
+      )}
+
+      {/* Breadcrumb */}
+      {selectedRegistry && (
+        <div className="flex items-center gap-2 text-sm">
+          <button
+            onClick={() => {
+              setSelectedRegistry(null);
+              setSelectedRepo(null);
+            }}
+            className="text-[var(--primary)] hover:underline"
+          >
+            Registries
+          </button>
+          <ChevronRight className="w-4 h-4 text-[var(--muted-foreground)]" />
+          <span className="text-[var(--foreground)]">{selectedRegistry.name}</span>
+          {selectedRepo && (
+            <>
+              <ChevronRight className="w-4 h-4 text-[var(--muted-foreground)]" />
+              <span className="text-[var(--foreground)]">{selectedRepo}</span>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Content */}
+      {!selectedRegistry ? (
+        <div className="card text-center py-12">
+          <Package className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+          <p className="text-[var(--muted-foreground)]">Select a registry to browse Helm charts</p>
+        </div>
+      ) : isLoadingRepos ? (
+        <div className="flex items-center justify-center h-64">
+          <Loader2 className="w-8 h-8 animate-spin text-[var(--primary)]" />
+        </div>
+      ) : !selectedRepo ? (
+        /* Chart Repositories List */
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {chartRepos.length === 0 ? (
+            <div className="col-span-full card text-center py-12">
+              <Package className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+              <p className="text-[var(--muted-foreground)]">
+                {searchQuery ? 'No charts found matching your search' : 'No Helm charts found in this registry'}
+              </p>
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery('')}
+                  className="mt-4 text-[var(--primary)] hover:underline"
+                >
+                  Clear search
+                </button>
+              )}
+            </div>
+          ) : (
+            chartRepos.map((repo) => (
+              <button
+                key={repo}
+                onClick={() => setSelectedRepo(repo)}
+                className="card text-left hover:border-[var(--primary)] transition-all p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Package className="w-6 h-6 text-[var(--primary)]" />
+                    <div>
+                      <p className="font-semibold text-[var(--foreground)]">
+                        {repo.split('/').pop()}
+                      </p>
+                      <p className="text-xs text-[var(--muted-foreground)]">{repo}</p>
+                    </div>
+                  </div>
+                  <ChevronRight className="w-5 h-5 text-[var(--muted-foreground)]" />
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      ) : isLoadingArtifacts ? (
+        <div className="flex items-center justify-center h-64">
+          <Loader2 className="w-8 h-8 animate-spin text-[var(--primary)]" />
+        </div>
+      ) : (
+        /* Artifact/Version List */
+        <div className="space-y-4">
+          <button
+            onClick={() => setSelectedRepo(null)}
+            className="flex items-center gap-2 text-sm text-[var(--primary)] hover:underline"
+          >
+            <ChevronRight className="w-4 h-4 rotate-180" />
+            Back to charts
+          </button>
+
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">
+            Versions of {selectedRepo.split('/').pop()}
+          </h2>
+
+          {artifacts.length === 0 ? (
+            <div className="card text-center py-12">
+              <p className="text-[var(--muted-foreground)]">No versions found</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {artifacts.map((artifact, index) => (
+                <div key={index} className="card">
+                  <div className="flex items-start justify-between mb-3">
+                    <div>
+                      <p className="font-mono text-lg font-bold text-[var(--foreground)]">
+                        {artifact.tag}
+                      </p>
+                      <p className="text-xs text-[var(--muted-foreground)]">
+                        {artifact.mediaType}
+                      </p>
+                    </div>
+                    {index === 0 && (
+                      <span className="badge badge-success">Latest</span>
+                    )}
+                  </div>
+                  <p className="text-xs text-[var(--muted-foreground)] mb-4">
+                    Size: {formatSize(artifact.size)}
+                  </p>
+                  <button
+                    onClick={() => openDeployModal(artifact)}
+                    className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity"
+                  >
+                    <Rocket className="w-4 h-4" />
+                    Deploy
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Deploy Modal */}
+      {showDeployModal && selectedArtifact && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-xl p-6 w-full max-w-lg border border-[var(--border)]">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold text-[var(--foreground)]">Deploy Chart</h2>
+              <button
+                onClick={() => {
+                  setShowDeployModal(false);
+                  setDeployError(null);
+                }}
+                className="p-1 hover:bg-[var(--secondary)] rounded"
+              >
+                <X className="w-5 h-5 text-[var(--muted-foreground)]" />
+              </button>
+            </div>
+
+            <div className="mb-4 p-3 bg-[var(--secondary)] rounded-lg">
+              <p className="text-sm text-[var(--muted-foreground)]">Deploying</p>
+              <p className="font-semibold text-[var(--foreground)]">
+                {selectedRepo}:{selectedArtifact.tag}
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Release Name *
+                </label>
+                <input
+                  type="text"
+                  value={deployForm.name}
+                  onChange={(e) => setDeployForm({ ...deployForm, name: e.target.value })}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                  placeholder="my-release"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Namespace
+                </label>
+                <input
+                  type="text"
+                  value={deployForm.namespace}
+                  onChange={(e) => setDeployForm({ ...deployForm, namespace: e.target.value })}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                  placeholder="default"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Cluster *
+                </label>
+                <select
+                  value={deployForm.clusterId}
+                  onChange={(e) => setDeployForm({ ...deployForm, clusterId: e.target.value })}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                  required
+                >
+                  <option value="">Select a cluster</option>
+                  {clusters.map((cluster) => (
+                    <option key={cluster.id} value={cluster.id}>
+                      {cluster.name} ({cluster.host})
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Description
+                </label>
+                <textarea
+                  value={deployForm.description}
+                  onChange={(e) => setDeployForm({ ...deployForm, description: e.target.value })}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                  rows={2}
+                  placeholder="Optional description..."
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Custom Values (values.yaml)
+                </label>
+                <textarea
+                  value={deployForm.valuesYaml}
+                  onChange={(e) => setDeployForm({ ...deployForm, valuesYaml: e.target.value })}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)] font-mono text-sm"
+                  rows={4}
+                  placeholder="# Optional: Override chart values&#10;replicaCount: 2&#10;image:&#11;  tag: latest"
+                />
+              </div>
+
+              {deployError && (
+                <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-500 text-sm">
+                  {deployError}
+                </div>
+              )}
+
+              <div className="flex gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowDeployModal(false);
+                    setDeployError(null);
+                  }}
+                  className="flex-1 px-4 py-2 border border-[var(--border)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)] transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleDeploy}
+                  disabled={isDeploying || !deployForm.name || !deployForm.clusterId}
+                  className="flex-1 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isDeploying && <Loader2 className="w-4 h-4 animate-spin" />}
+                  {isDeploying ? 'Deploying...' : 'Deploy'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface Artifact {
+  repositoryName: string;
+  tag: string;
+  type: string;
+  mediaType: string;
+  size: number;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
--- a/frontend/src/app/clusters/page.tsx
+++ b/frontend/src/app/clusters/page.tsx
@ -0,0 +1,348 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { clusterApi } from '@/lib/api';
+import type { ClusterDTO, CreateClusterRequest } from '@/lib/types';
+import { Server, Plus, Trash2, Edit, AlertCircle, CheckCircle, ChevronDown, ChevronRight, Loader2 } from 'lucide-react';
+
+export default function ClustersPage() {
+  const [clusters, setClusters] = useState<ClusterDTO[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingCluster, setEditingCluster] = useState<ClusterDTO | null>(null);
+  const [showKubeconfig, setShowKubeconfig] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<CreateClusterRequest>({
+    name: '',
+    host: '',
+    description: '',
+    isolationMode: 'namespace',
+    isShared: false,
+    caData: '',
+    certData: '',
+    keyData: '',
+    token: '',
+  });
+
+  const fetchClusters = async () => {
+    try {
+      const response = await clusterApi.list();
+      // API returns array directly or { clusters: [] }
+      const data = response.data;
+      if (Array.isArray(data)) {
+        setClusters(data);
+      } else if (data && data.clusters) {
+        setClusters(data.clusters);
+      }
+    } catch (error) {
+      console.error('Failed to fetch clusters:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchClusters();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    try {
+      // Filter out empty kubeconfig fields
+      const dataToSend = {
+        ...formData,
+        caData: formData.caData || undefined,
+        certData: formData.certData || undefined,
+        keyData: formData.keyData || undefined,
+        token: formData.token || undefined,
+      };
+      if (editingCluster) {
+        await clusterApi.update(editingCluster.id, dataToSend);
+      } else {
+        await clusterApi.create(dataToSend);
+      }
+      setShowForm(false);
+      setEditingCluster(null);
+      setFormData({ name: '', host: '', description: '', isolationMode: 'namespace', isShared: false, caData: '', certData: '', keyData: '', token: '' });
+      fetchClusters();
+      alert(editingCluster ? 'Cluster updated successfully!' : 'Cluster created and connected successfully!');
+    } catch (error: unknown) {
+      console.error('Failed to save cluster:', error);
+      let errorMessage = 'Failed to save cluster';
+      if (error && typeof error === 'object' && 'response' in error) {
+        const axiosError = error as { response?: { data?: { error?: string; message?: string } } };
+        if (axiosError.response?.data?.message) {
+          errorMessage = axiosError.response.data.message;
+        } else if (axiosError.response?.data?.error) {
+          errorMessage = axiosError.response.data.error;
+        }
+      }
+      alert('Error: ' + errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEdit = (cluster: ClusterDTO) => {
+    setEditingCluster(cluster);
+    setFormData({
+      name: cluster.name,
+      host: cluster.host,
+      description: cluster.description || '',
+      isolationMode: cluster.isolationMode || 'namespace',
+      isShared: cluster.isShared,
+      caData: cluster.hasCaData ? '********' : '',
+      certData: cluster.hasCertData ? '********' : '',
+      keyData: cluster.hasKeyData ? '********' : '',
+      token: cluster.hasToken ? '********' : '',
+    });
+    // Show kubeconfig section if any cert is configured
+    setShowKubeconfig(cluster.hasCaData || cluster.hasCertData || cluster.hasKeyData || cluster.hasToken);
+    setShowForm(true);
+  };
+
+  const handleDelete = async (clusterId: string) => {
+    if (!confirm('Are you sure you want to delete this cluster?')) return;
+    try {
+      await clusterApi.delete(clusterId);
+      fetchClusters();
+    } catch (error) {
+      console.error('Failed to delete cluster:', error);
+      alert('Failed to delete cluster');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">Clusters</h1>
+          <p className="text-[var(--muted-foreground)]">Manage Kubernetes clusters</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingCluster(null);
+            setShowKubeconfig(false);
+            setFormData({ name: '', host: '', description: '', isolationMode: 'namespace', isShared: false, caData: '', certData: '', keyData: '', token: '' });
+          }}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+        >
+          <Plus className="w-4 h-4" />
+          Add Cluster
+        </button>
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-lg p-6 w-full max-w-md border border-[var(--border)]">
+            <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+              {editingCluster ? 'Edit Cluster' : 'Add Cluster'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Name</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  required
+                />
+              </div>
+              <div>
+                <label className="label">Host</label>
+                <input
+                  type="text"
+                  value={formData.host}
+                  onChange={(e) => setFormData({ ...formData, host: e.target.value })}
+                  className="input"
+                  placeholder="https://kubernetes.example.com:6443"
+                  required
+                />
+              </div>
+              <div>
+                <label className="label">Description</label>
+                <textarea
+                  value={formData.description || ''}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="input"
+                  rows={3}
+                />
+              </div>
+              <div>
+                <label className="label">Isolation Mode</label>
+                <select
+                  value={formData.isolationMode}
+                  onChange={(e) => setFormData({ ...formData, isolationMode: e.target.value })}
+                  className="input"
+                >
+                  <option value="namespace">Namespace</option>
+                  <option value="cluster">Cluster</option>
+                </select>
+              </div>
+
+              {/* Kubeconfig Section */}
+              <div>
+                <button
+                  type="button"
+                  onClick={() => setShowKubeconfig(!showKubeconfig)}
+                  className="flex items-center gap-2 text-sm text-[var(--primary)] hover:underline"
+                >
+                  {showKubeconfig ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+                  Kubeconfig (Optional)
+                </button>
+              </div>
+
+              {showKubeconfig && (
+                <>
+                  <div>
+                    <label className="label">CA Data (base64)</label>
+                    <textarea
+                      value={formData.caData || ''}
+                      onChange={(e) => setFormData({ ...formData, caData: e.target.value })}
+                      className="input font-mono text-xs"
+                      rows={2}
+                      placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t..."
+                    />
+                  </div>
+                  <div>
+                    <label className="label">Client Certificate (base64)</label>
+                    <textarea
+                      value={formData.certData || ''}
+                      onChange={(e) => setFormData({ ...formData, certData: e.target.value })}
+                      className="input font-mono text-xs"
+                      rows={2}
+                      placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t..."
+                    />
+                  </div>
+                  <div>
+                    <label className="label">Client Key (base64)</label>
+                    <textarea
+                      value={formData.keyData || ''}
+                      onChange={(e) => setFormData({ ...formData, keyData: e.target.value })}
+                      className="input font-mono text-xs"
+                      rows={2}
+                      placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t..."
+                    />
+                  </div>
+                  <div>
+                    <label className="label">Token</label>
+                    <input
+                      type="password"
+                      value={formData.token || ''}
+                      onChange={(e) => setFormData({ ...formData, token: e.target.value })}
+                      className="input"
+                      placeholder="Bearer token (optional)"
+                    />
+                  </div>
+                </>
+              )}
+
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="isShared"
+                  checked={formData.isShared || false}
+                  onChange={(e) => setFormData({ ...formData, isShared: e.target.checked })}
+                  className="w-4 h-4"
+                />
+                <label htmlFor="isShared" className="text-sm text-[var(--foreground)]">
+                  Shared Cluster (visible to all workspaces)
+                </label>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingCluster(null);
+                  }}
+                  className="flex-1 px-4 py-2 rounded-lg border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--secondary)]"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="flex-1 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90 disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
+                  {isSubmitting ? 'Saving...' : (editingCluster ? 'Update' : 'Create')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Clusters List */}
+      {clusters.length === 0 ? (
+        <div className="card text-center py-12">
+          <Server className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+          <p className="text-[var(--muted-foreground)]">No clusters configured</p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-4 text-[var(--primary)] hover:underline"
+          >
+            Add your first cluster
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {clusters.map((cluster) => (
+            <div key={cluster.id} className="card flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="p-3 rounded-lg bg-[var(--primary)]/10">
+                  <Server className="w-6 h-6 text-[var(--primary)]" />
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-semibold text-[var(--foreground)]">{cluster.name}</h3>
+                    {cluster.isShared && (
+                      <span className="badge badge-info">Shared</span>
+                    )}
+                  </div>
+                  <p className="text-sm text-[var(--muted-foreground)]">{cluster.host}</p>
+                  {cluster.description && (
+                    <p className="text-sm text-[var(--muted-foreground)] mt-1">{cluster.description}</p>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {cluster.hasCaData ? (
+                  <span title="Certificate configured"><CheckCircle className="w-4 h-4 text-green-500" /></span>
+                ) : (
+                  <span title="No certificate"><AlertCircle className="w-4 h-4 text-yellow-500" /></span>
+                )}
+                <button
+                  onClick={() => handleEdit(cluster)}
+                  className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                >
+                  <Edit className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => handleDelete(cluster.id)}
+                  className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[#ef4444]"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/app/constants/navigation.tsx
+++ b/frontend/src/app/constants/navigation.tsx
@ -1,130 +0,0 @@
-/**
- * Navigation Configuration
- * 导航配置 - 集中管理导航菜单项
- */
-
-import { Home, Settings, Server, Database, Package, LineChart } from "lucide-react";
-
-/**
- * Navigation item type
- */
-export interface NavItem {
-  key: string;
-  label: string;
-  icon: React.ReactNode;
-  active?: boolean;
-  onClick?: () => void;
-  children?: NavItem[];
-}
-
-/**
- * Page info type for header display
- */
-export interface PageInfo {
-  title: string;
-  icon: React.ReactNode;
-}
-
-/**
- * Get navigation items
- * @param currentPath - Current route path
- * @param navigate - Navigation function
- * @returns Navigation items array
- */
-export const getNavItems = (
-  currentPath: string,
-  navigate: (path: string) => void
-): NavItem[] => [
-  {
-    key: "home",
-    label: "Home",
-    icon: <Home className="w-4 h-4 text-secondary" />,
-    active: currentPath === "/home",
-    onClick: () => navigate("/home"),
-  },
-  // Configuration
-  {
-    key: "configuration",
-    label: "Configuration",
-    icon: <Settings className="w-4 h-4 text-brand-accent" />,
-    children: [
-      {
-        key: "configuration-clusters",
-        label: "Clusters",
-        icon: <Server className="w-4 h-4 text-accent-teal" />,
-        active: currentPath === "/configuration/clusters",
-        onClick: () => navigate("/configuration/clusters"),
-      },
-      {
-        key: "configuration-registries",
-        label: "Registries",
-        icon: <Database className="w-4 h-4 text-brand-light" />,
-        active: currentPath === "/configuration/registries",
-        onClick: () => navigate("/configuration/registries"),
-      },
-    ],
-  },
-  // Monitoring - 监控资源状态
-  {
-    key: "monitoring",
-    label: "Monitoring",
-    icon: <LineChart className="w-4 h-4 text-accent-teal" />,
-    children: [
-      {
-        key: "monitoring-clusters",
-        label: "Clusters",
-        icon: <Server className="w-4 h-4 text-accent-teal" />,
-        active: currentPath === "/monitoring/clusters",
-        onClick: () => navigate("/monitoring/clusters"),
-      },
-    ],
-  },
-  // Artifact - 浏览和部署制品
-  {
-    key: "artifact",
-    label: "Artifact",
-    icon: <Package className="w-4 h-4 text-brand-light" />,
-    children: [
-      {
-        key: "artifact-registries",
-        label: "Registries",
-        icon: <Database className="w-4 h-4 text-brand-light" />,
-        active: currentPath === "/artifact/registries",
-        onClick: () => navigate("/artifact/registries"),
-      },
-      {
-        key: "artifact-instances",
-        label: "Instances",
-        icon: <Package className="w-4 h-4 text-brand-accent" />,
-        active: currentPath === "/artifact/instances",
-        onClick: () => navigate("/artifact/instances"),
-      },
-    ],
-  },
-];
-
-/**
- * Get page header info based on current path
- * @param pathname - Current route pathname
- * @returns Page info object
- */
-export const getPageInfo = (pathname: string): PageInfo => {
-  if (pathname === "/artifact/registries") {
-    return { title: "Artifact Browser", icon: <Package className="w-6 h-6 text-brand-light" /> };
-  }
-  if (pathname === "/artifact/instances") {
-    return { title: "Artifact - Instances", icon: <Package className="w-6 h-6 text-brand-accent" /> };
-  }
-  if (pathname === "/configuration/clusters") {
-    return { title: "Configuration - Clusters", icon: <Server className="w-6 h-6 text-accent-teal" /> };
-  }
-  if (pathname === "/configuration/registries") {
-    return { title: "Configuration - Registries", icon: <Database className="w-6 h-6 text-brand-light" /> };
-  }
-  if (pathname === "/monitoring/clusters") {
-    return { title: "Monitoring - Clusters", icon: <LineChart className="w-6 h-6 text-accent-teal" /> };
-  }
-  return { title: "OCDP Platform", icon: <Home className="w-6 h-6 text-secondary" /> };
-};
-
-
--- a/frontend/src/app/favicon.ico
+++ b/frontend/src/app/favicon.ico
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@ -0,0 +1,142 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --card: #171717;
+  --card-foreground: #ededed;
+  --popover: #171717;
+  --popover-foreground: #ededed;
+  --primary: #3b82f6;
+  --primary-foreground: #ffffff;
+  --secondary: #262626;
+  --secondary-foreground: #ededed;
+  --muted: #262626;
+  --muted-foreground: #a1a1a1;
+  --accent: #262626;
+  --accent-foreground: #ededed;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: #262626;
+  --input: #262626;
+  --ring: #3b82f6;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+* {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--muted);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+/* Custom utility classes */
+.card {
+  background-color: var(--card);
+  border-radius: 0.5rem;
+  border: 1px solid var(--border);
+  padding: 1.5rem;
+}
+
+.input {
+  background-color: var(--input);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  width: 100%;
+}
+
+.input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--foreground);
+  margin-bottom: 0.25rem;
+}
+
+/* Table styles */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  font-weight: 600;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.table td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.table tr:hover {
+  background-color: var(--secondary);
+}
+
+/* Badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge-success {
+  background-color: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+}
+
+.badge-warning {
+  background-color: rgba(234, 179, 8, 0.2);
+  color: #eab308;
+}
+
+.badge-error {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+}
+
+.badge-info {
+  background-color: rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+}
--- a/frontend/src/app/index.ts
+++ b/frontend/src/app/index.ts
@ -1,11 +0,0 @@
-/**
- * App Module - Unified Export
- * 应用模块统一导出
- */
-
-export { default as App } from "./App";
-export * from "./providers";
-export * from "./routes/RouteGuard";
-export * from "./constants/navigation";
-
-
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { AuthProvider } from "@/lib/auth-context";
+import { ClientLayout } from "@/components/client-layout";
+
+export const metadata: Metadata = {
+  title: "OCDP Platform",
+  description: "Open Cloud Development Platform",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-[var(--background)]">
+        <AuthProvider>
+          <ClientLayout>{children}</ClientLayout>
+        </AuthProvider>
+      </body>
+    </html>
+  );
+}
--- a/frontend/src/app/login/layout.tsx
+++ b/frontend/src/app/login/layout.tsx
@ -0,0 +1,13 @@
+'use client';
+
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[var(--background)]">
+      {children}
+    </div>
+  );
+}
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@ -0,0 +1,124 @@
+'use client';
+
+import { useState, FormEvent, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/auth-context';
+import { Shield, Loader2, CheckCircle } from 'lucide-react';
+
+export default function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const { login, isAuthenticated, isLoading: authLoading } = useAuth();
+  const router = useRouter();
+
+  // Redirect if already logged in
+  useEffect(() => {
+    if (!authLoading && isAuthenticated) {
+      router.push('/');
+    }
+  }, [authLoading, isAuthenticated, router]);
+
+  // Show loading while checking auth
+  if (authLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--background)]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      await login({ username, password });
+      setLoginSuccess(true);
+      // Small delay to show success state, then redirect
+      setTimeout(() => {
+        router.push('/');
+      }, 500);
+    } catch (err: unknown) {
+      if (typeof err === 'object' && err !== null && 'response' in err) {
+        const axiosErr = err as { response?: { data?: { message?: string } } };
+        setError(axiosErr.response?.data?.message || 'Login failed');
+      } else {
+        setError('Login failed. Please check your credentials.');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[var(--background)]">
+      <div className="w-full max-w-md p-8">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--primary)] mb-4">
+            <Shield className="w-8 h-8 text-[var(--primary-foreground)]" />
+          </div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">OCDP Platform</h1>
+          <p className="text-[var(--muted-foreground)] mt-2">Sign in to your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {loginSuccess && (
+            <div className="p-3 rounded-md bg-[rgba(34,197,94,0.1)] border border-[rgba(34,197,94,0.3)] flex items-center gap-2">
+              <CheckCircle className="w-4 h-4 text-green-500" />
+              <p className="text-sm text-green-500">Login successful! Redirecting...</p>
+            </div>
+          )}
+
+          {error && (
+            <div className="p-3 rounded-md bg-[rgba(239,68,68,0.1)] border border-[rgba(239,68,68,0.3)]">
+              <p className="text-sm text-[#ef4444]">{error}</p>
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="username" className="label">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="input"
+              placeholder="Enter your username"
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="label">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="input"
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full py-2 px-4 rounded-md bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90 disabled:opacity-50 flex items-center justify-center gap-2"
+          >
+            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
+            {isLoading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/app/monitoring/page.tsx
+++ b/frontend/src/app/monitoring/page.tsx
@ -0,0 +1,278 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { monitoringApi } from '@/lib/api';
+import { Activity, Server, Cpu, HardDrive, CircleDot } from 'lucide-react';
+
+interface ClusterMetrics {
+  clusterId: string;
+  clusterName: string;
+  status: string;
+  nodeCount: number;
+  podCount: number;
+  cpuUsage: number;
+  memoryUsage: number;
+  totalCpu?: string;
+  totalMemory?: string;
+  totalGpu?: number;
+  usedCpu?: string;
+  usedMemory?: string;
+  usedGpu?: number;
+  gpuUsage?: number;
+  uptime?: string;
+  nodes?: NodeMetric[];
+}
+
+interface NodeMetric {
+  nodeName: string;
+  status: string;
+  role: string;
+  age: string;
+  podCount: number;
+  cpuCapacity: string;
+  cpuAllocatable: string;
+  cpuUsage: string;
+  cpuPercent: number;
+  memoryCapacity: string;
+  memoryAllocatable: string;
+  memoryUsage: string;
+  memoryPercent: number;
+  gpuCapacity?: number;
+  gpuUsage?: number;
+  gpuPercent?: number;
+  gpuType?: string;
+  osImage?: string;
+  kernelVersion?: string;
+  containerRuntime?: string;
+  kubeletVersion?: string;
+}
+
+export default function MonitoringPage() {
+  const [clusterMonitoring, setClusterMonitoring] = useState<ClusterMetrics[]>([]);
+  const [selectedCluster, setSelectedCluster] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchMonitoring = async () => {
+    try {
+      const response = await monitoringApi.listClusterMonitoring();
+      const data = Array.isArray(response.data) ? response.data : [];
+      setClusterMonitoring(data);
+      // Auto-select first cluster if available
+      if (data.length > 0 && !selectedCluster) {
+        setSelectedCluster(data[0].clusterId);
+      }
+    } catch (error) {
+      console.error('Failed to fetch monitoring data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMonitoring();
+  }, []);
+
+  const selectedClusterData = clusterMonitoring.find(c => c.clusterId === selectedCluster);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-[var(--foreground)]">Monitoring</h1>
+        <p className="text-[var(--muted-foreground)]">Monitor cluster and node health</p>
+      </div>
+
+      {/* Cluster Monitoring Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {clusterMonitoring.length === 0 ? (
+          <div className="col-span-full card text-center py-12">
+            <Activity className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+            <p className="text-[var(--muted-foreground)]">No clusters configured or accessible</p>
+          </div>
+        ) : (
+          clusterMonitoring.map((cluster) => (
+            <div
+              key={cluster.clusterId}
+              className={`card cursor-pointer transition-all hover:border-[var(--primary)] ${
+                selectedCluster === cluster.clusterId ? 'border-[var(--primary)] ring-1 ring-[var(--primary)]' : ''
+              }`}
+              onClick={() => setSelectedCluster(cluster.clusterId)}
+            >
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                  <Server className="w-5 h-5 text-[var(--primary)]" />
+                  <h3 className="font-semibold text-[var(--foreground)]">{cluster.clusterName}</h3>
+                </div>
+                <span className={`badge ${
+                  cluster.status === 'healthy' ? 'badge-success' :
+                  cluster.status === 'warning' ? 'badge-warning' : 'badge-error'
+                }`}>
+                  {cluster.status}
+                </span>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <p className="text-xs text-[var(--muted-foreground)]">CPU Usage</p>
+                  <p className="text-lg font-semibold text-[var(--foreground)]">
+                    {cluster.cpuUsage?.toFixed(1)}%
+                  </p>
+                  {cluster.totalCpu && (
+                    <p className="text-xs text-[var(--muted-foreground)]">{cluster.usedCpu} / {cluster.totalCpu}</p>
+                  )}
+                </div>
+                <div>
+                  <p className="text-xs text-[var(--muted-foreground)]">Memory Usage</p>
+                  <p className="text-lg font-semibold text-[var(--foreground)]">
+                    {cluster.memoryUsage?.toFixed(1)}%
+                  </p>
+                  {cluster.totalMemory && (
+                    <p className="text-xs text-[var(--muted-foreground)]">{cluster.usedMemory} / {cluster.totalMemory}</p>
+                  )}
+                </div>
+                <div>
+                  <p className="text-xs text-[var(--muted-foreground)]">Nodes</p>
+                  <p className="text-lg font-semibold text-[var(--foreground)]">{cluster.nodeCount}</p>
+                </div>
+                <div>
+                  <p className="text-xs text-[var(--muted-foreground)]">Pods</p>
+                  <p className="text-lg font-semibold text-[var(--foreground)]">{cluster.podCount}</p>
+                </div>
+                {cluster.totalGpu !== undefined && cluster.totalGpu > 0 && (
+                  <>
+                    <div>
+                      <p className="text-xs text-[var(--muted-foreground)]">GPU</p>
+                      <p className="text-lg font-semibold text-[var(--foreground)]">
+                        {cluster.gpuUsage?.toFixed(0) ?? 0}%
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-[var(--muted-foreground)]">GPU Capacity</p>
+                      <p className="text-lg font-semibold text-[var(--foreground)]">
+                        {cluster.usedGpu ?? 0} / {cluster.totalGpu}
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+              {cluster.uptime && (
+                <p className="text-xs text-[var(--muted-foreground)] mt-3">Uptime: {cluster.uptime}</p>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Node Metrics Table */}
+      {selectedClusterData && selectedClusterData.nodes && (
+        <div className="card">
+          <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+            Nodes in {selectedClusterData.clusterName}
+          </h2>
+          {selectedClusterData.nodes.length === 0 ? (
+            <p className="text-[var(--muted-foreground)]">No node data available</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Node</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                    <th>CPU</th>
+                    <th>Memory</th>
+                    <th>GPU</th>
+                    <th>Pods</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {selectedClusterData.nodes.map((node) => (
+                    <tr key={node.nodeName}>
+                      <td>
+                        <div>
+                          <p className="font-medium text-[var(--foreground)]">{node.nodeName}</p>
+                          <p className="text-xs text-[var(--muted-foreground)]">{node.osImage}</p>
+                        </div>
+                      </td>
+                      <td>
+                        <span className={`badge ${node.role === 'control-plane' ? 'badge-info' : 'badge-secondary'}`}>
+                          {node.role}
+                        </span>
+                      </td>
+                      <td>
+                        <span className={`flex items-center gap-1 ${
+                          node.status === 'Ready' ? 'text-green-500' : 'text-red-500'
+                        }`}>
+                          <CircleDot className="w-3 h-3" />
+                          {node.status}
+                        </span>
+                      </td>
+                      <td>
+                        <div className="flex items-center gap-2">
+                          <div className="w-16 h-2 bg-[var(--secondary)] rounded-full overflow-hidden">
+                            <div
+                              className="h-full bg-blue-500"
+                              style={{ width: `${Math.min(node.cpuPercent, 100)}%` }}
+                            />
+                          </div>
+                          <span className="text-sm text-[var(--foreground)] whitespace-nowrap">
+                            {node.cpuUsage} ({node.cpuPercent.toFixed(1)}%)
+                          </span>
+                        </div>
+                        <p className="text-xs text-[var(--muted-foreground)]">{node.cpuCapacity}</p>
+                      </td>
+                      <td>
+                        <div className="flex items-center gap-2">
+                          <div className="w-16 h-2 bg-[var(--secondary)] rounded-full overflow-hidden">
+                            <div
+                              className="h-full bg-purple-500"
+                              style={{ width: `${Math.min(node.memoryPercent, 100)}%` }}
+                            />
+                          </div>
+                          <span className="text-sm text-[var(--foreground)] whitespace-nowrap">
+                            {node.memoryPercent.toFixed(1)}%
+                          </span>
+                        </div>
+                        <p className="text-xs text-[var(--muted-foreground)]">{node.memoryUsage}</p>
+                      </td>
+                      <td>
+                        {node.gpuCapacity && node.gpuCapacity > 0 ? (
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <div className="w-16 h-2 bg-[var(--secondary)] rounded-full overflow-hidden">
+                                <div
+                                  className="h-full bg-green-500"
+                                  style={{ width: `${node.gpuPercent ?? 0}%` }}
+                                />
+                              </div>
+                              <span className="text-sm text-[var(--foreground)]">
+                                {node.gpuPercent ?? 0}%
+                              </span>
+                            </div>
+                            <p className="text-xs text-[var(--muted-foreground)]">
+                              {node.gpuCapacity}x {node.gpuType || 'GPU'}
+                            </p>
+                          </div>
+                        ) : (
+                          <span className="text-[var(--muted-foreground)]">-</span>
+                        )}
+                      </td>
+                      <td className="text-[var(--foreground)]">{node.podCount}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@ -0,0 +1,174 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/auth-context';
+import { monitoringApi, clusterApi } from '@/lib/api';
+import { Activity, Server, Container } from 'lucide-react';
+
+interface DashboardStats {
+  totalClusters: number;
+  healthyClusters: number;
+  totalInstances: number;
+  runningInstances: number;
+  totalNodes: number;
+}
+
+export default function DashboardPage() {
+  const { user, isLoading, isAuthenticated } = useAuth();
+  const router = useRouter();
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [clusters, setClusters] = useState<Array<{ id: string; name: string; host: string }>>([]);
+  const [isLoadingData, setIsLoadingData] = useState(true);
+
+  // Redirect to login if not authenticated
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [summaryRes, clustersRes] = await Promise.all([
+          monitoringApi.getSummary().catch(() => null),
+          clusterApi.list().catch(() => null),
+        ]);
+
+        if (summaryRes?.data) {
+          setStats({
+            totalClusters: summaryRes.data.totalClusters ?? summaryRes.data.total_clusters ?? 0,
+            healthyClusters: summaryRes.data.healthyClusters ?? summaryRes.data.healthy_clusters ?? 0,
+            totalInstances: summaryRes.data.totalInstances ?? summaryRes.data.total_instances ?? 0,
+            runningInstances: summaryRes.data.runningInstances ?? summaryRes.data.running_instances ?? 0,
+            totalNodes: summaryRes.data.totalNodes ?? summaryRes.data.total_nodes ?? 0,
+          });
+        }
+
+        // Handle both {clusters: []} and array response
+        const clustersData = clustersRes?.data;
+        if (Array.isArray(clustersData)) {
+          setClusters(clustersData);
+        } else if (clustersData?.clusters) {
+          setClusters(clustersData.clusters);
+        }
+      } catch (error) {
+        console.error('Failed to fetch dashboard data:', error);
+      } finally {
+        setIsLoadingData(false);
+      }
+    };
+
+    if (!isLoading) {
+      fetchData();
+    }
+  }, [isLoading]);
+
+  if (isLoading || isLoadingData) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-[var(--foreground)]">Dashboard</h1>
+        <p className="text-[var(--muted-foreground)]">
+          Welcome back, {user?.username}
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="Total Clusters"
+          value={stats?.totalClusters ?? 0}
+          icon={Server}
+          color="blue"
+        />
+        <StatCard
+          title="Healthy Clusters"
+          value={stats?.healthyClusters ?? 0}
+          icon={Activity}
+          color="green"
+        />
+        <StatCard
+          title="Total Instances"
+          value={stats?.totalInstances ?? 0}
+          icon={Container}
+          color="purple"
+        />
+        <StatCard
+          title="Running Instances"
+          value={stats?.runningInstances ?? 0}
+          icon={Activity}
+          color="green"
+        />
+      </div>
+
+      {/* Clusters List */}
+      <div className="card">
+        <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">Clusters</h2>
+        {clusters.length === 0 ? (
+          <p className="text-[var(--muted-foreground)]">No clusters configured</p>
+        ) : (
+          <div className="space-y-2">
+            {clusters.map((cluster) => (
+              <div
+                key={cluster.id}
+                className="flex items-center justify-between p-3 rounded-lg bg-[var(--secondary)]"
+              >
+                <div className="flex items-center gap-3">
+                  <Server className="w-5 h-5 text-[var(--primary)]" />
+                  <div>
+                    <p className="font-medium text-[var(--foreground)]">{cluster.name}</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">{cluster.host}</p>
+                  </div>
+                </div>
+                <div className="badge badge-success">Active</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  title,
+  value,
+  icon: Icon,
+  color,
+}: {
+  title: string;
+  value: number;
+  icon: React.ElementType;
+  color: 'blue' | 'green' | 'purple' | 'orange';
+}) {
+  const colorClasses = {
+    blue: 'text-blue-500 bg-blue-500/10',
+    green: 'text-green-500 bg-green-500/10',
+    purple: 'text-purple-500 bg-purple-500/10',
+    orange: 'text-orange-500 bg-orange-500/10',
+  };
+
+  return (
+    <div className="card">
+      <div className="flex items-center gap-4">
+        <div className={`p-3 rounded-lg ${colorClasses[color]}`}>
+          <Icon className="w-6 h-6" />
+        </div>
+        <div>
+          <p className="text-sm text-[var(--muted-foreground)]">{title}</p>
+          <p className="text-2xl font-bold text-[var(--foreground)]">{value}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/app/providers/AuthContext.ts
+++ b/frontend/src/app/providers/AuthContext.ts
@ -1,23 +0,0 @@
-/**
- * Auth Context
- * Authentication context - separated for Fast Refresh compatibility
- */
-
-import { createContext } from "react";
-import type { AuthResponse } from "@/api";
-
-export interface User {
-  username: string;
-  role?: string;
-}
-
-export interface AuthContextType {
-  token: string | null;
-  user: User | null;
-  isAuthenticated: boolean;
-  login: (response: AuthResponse) => void;
-  logout: () => void;
-}
-
-export const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
--- a/frontend/src/app/providers/AuthProvider.tsx
+++ b/frontend/src/app/providers/AuthProvider.tsx
@ -1,103 +0,0 @@
-/**
- * Authentication Provider
- * 认证提供者 - 管理用户认证状态和 token
- */
-
-import { useState, useEffect } from "react";
-import type { ReactNode } from "react";
-import type { AuthResponse } from "@/api";
-import { setAuthToken } from "@/api";
-import { AuthContext, type User } from "./AuthContext";
-
-interface AuthProviderProps {
-  children: ReactNode;
-  devMode?: boolean;
-}
-
-/**
- * Auth Provider Component
- * Manages authentication state and provides auth context
- */
-export const AuthProvider = ({ children, devMode = false }: AuthProviderProps) => {
-  const [token, setToken] = useState<string | null>(devMode ? "dev-token" : null);
-  const [user, setUser] = useState<User | null>(null);
-
-  // Initialize: read token and user from localStorage
-  useEffect(() => {
-    if (devMode) {
-      const devUser: User = {
-        username: "dev-user",
-        role: "admin",
-      };
-      localStorage.setItem("access_token", "dev-token");
-      localStorage.setItem("user", JSON.stringify(devUser));
-      setToken("dev-token");
-      setUser(devUser);
-      return;
-    }
-
-    const storedToken = localStorage.getItem("access_token");
-    const storedUser = localStorage.getItem("user");
-
-    if (storedToken) {
-      setToken(storedToken);
-    }
-    if (storedUser) {
-      try {
-        setUser(JSON.parse(storedUser));
-      } catch (e) {
-        console.error("Failed to parse stored user:", e);
-      }
-    }
-  }, [devMode]);
-
-  // Sync token changes to axios headers
-  useEffect(() => {
-    setAuthToken(token);
-  }, [token]);
-
-  // Handle login (JWT format)
-  const login = (response: AuthResponse) => {
-    // JWT 格式: { accessToken, refreshToken, username, ... }
-    const accessToken = response.accessToken || "";
-    const refreshToken = response.refreshToken || "";
-    
-    localStorage.setItem("access_token", accessToken);
-    localStorage.setItem("refresh_token", refreshToken);
-    
-    const user: User = {
-      username: response.username || "",
-      role: "user", // 后端暂未返回 role，默认为 user
-    };
-    localStorage.setItem("user", JSON.stringify(user));
-    
-    setToken(accessToken);
-    setUser(user);
-  };
-
-  // Handle logout
-  const logout = () => {
-    localStorage.removeItem("access_token");
-    localStorage.removeItem("refresh_token");
-    localStorage.removeItem("user");
-    setToken(null);
-    setUser(null);
-    setAuthToken(null);
-  };
-
-  return (
-    <AuthContext.Provider
-      value={{
-        token,
-        user,
-        isAuthenticated: !!token,
-        login,
-        logout,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-// useAuth hook is now exported from ./useAuth.ts for Fast Refresh compatibility
--- a/frontend/src/app/providers/index.ts
+++ b/frontend/src/app/providers/index.ts
@ -1,9 +0,0 @@
-/**
- * Providers - Unified Export
- * 提供者统一导出
- */
-
-export { AuthProvider } from "./AuthProvider";
-export { useAuth } from "./useAuth";
-
-
--- a/frontend/src/app/providers/useAuth.ts
+++ b/frontend/src/app/providers/useAuth.ts
@ -1,19 +0,0 @@
-/**
- * useAuth Hook
- * Auth context hook - separated for Fast Refresh compatibility
- */
-
-import { useContext } from "react";
-import { AuthContext } from "./AuthContext";
-
-/**
- * Hook to use auth context
- */
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
-
--- a/frontend/src/app/registries/page.tsx
+++ b/frontend/src/app/registries/page.tsx
@ -0,0 +1,304 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { registryApi } from '@/lib/api';
+import type { RegistryDTO, CreateRegistryRequest } from '@/lib/types';
+import { Database, Plus, Trash2, Edit, AlertCircle, CheckCircle, Loader2 } from 'lucide-react';
+
+export default function RegistriesPage() {
+  const [registries, setRegistries] = useState<RegistryDTO[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingRegistry, setEditingRegistry] = useState<RegistryDTO | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<CreateRegistryRequest>({
+    name: '',
+    url: '',
+    username: '',
+    password: '',
+    description: '',
+    insecure: false,
+    isShared: false,
+  });
+
+  const fetchRegistries = async () => {
+    try {
+      const response = await registryApi.list();
+      // API returns array directly or { registries: [] }
+      const data = response.data;
+      if (Array.isArray(data)) {
+        setRegistries(data);
+      } else if (data && data.registries) {
+        setRegistries(data.registries);
+      } else {
+        setRegistries([]);
+      }
+    } catch (error) {
+      console.error('Failed to fetch registries:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRegistries();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    try {
+      const dataToSend = {
+        ...formData,
+        username: formData.username || undefined,
+        password: formData.password || undefined,
+      };
+      if (editingRegistry) {
+        await registryApi.update(editingRegistry.id, dataToSend);
+      } else {
+        await registryApi.create(dataToSend);
+      }
+      setShowForm(false);
+      setEditingRegistry(null);
+      setFormData({ name: '', url: '', username: '', password: '', description: '', insecure: false, isShared: false });
+      fetchRegistries();
+      alert(editingRegistry ? 'Registry updated successfully!' : 'Registry connected successfully!');
+    } catch (error: unknown) {
+      console.error('Failed to save registry:', error);
+      let errorMessage = 'Failed to save registry';
+      if (error && typeof error === 'object' && 'response' in error) {
+        const axiosError = error as { response?: { data?: { error?: string; message?: string } } };
+        if (axiosError.response?.data?.message) {
+          errorMessage = axiosError.response.data.message;
+        } else if (axiosError.response?.data?.error) {
+          errorMessage = axiosError.response.data.error;
+        }
+      }
+      alert('Error: ' + errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEdit = (registry: RegistryDTO) => {
+    setEditingRegistry(registry);
+    setFormData({
+      name: registry.name,
+      url: registry.url,
+      username: registry.username || '',
+      description: registry.description || '',
+      insecure: registry.insecure,
+      isShared: registry.isShared,
+    });
+    setShowForm(true);
+  };
+
+  const handleDelete = async (registryId: string) => {
+    if (!confirm('Are you sure you want to delete this registry?')) return;
+    try {
+      await registryApi.delete(registryId);
+      fetchRegistries();
+    } catch (error) {
+      console.error('Failed to delete registry:', error);
+      alert('Failed to delete registry');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">Registries</h1>
+          <p className="text-[var(--muted-foreground)]">Manage OCI/Harbor registries</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingRegistry(null);
+            setFormData({ name: '', url: '', username: '', password: '', description: '', insecure: false, isShared: false });
+          }}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+        >
+          <Plus className="w-4 h-4" />
+          Add Registry
+        </button>
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-lg p-6 w-full max-w-md border border-[var(--border)]">
+            <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+              {editingRegistry ? 'Edit Registry' : 'Add Registry'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Name</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  required
+                />
+              </div>
+              <div>
+                <label className="label">URL</label>
+                <input
+                  type="text"
+                  value={formData.url}
+                  onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+                  className="input"
+                  placeholder="https://harbor.example.com"
+                  required
+                />
+              </div>
+              <div>
+                <label className="label">Username (optional)</label>
+                <input
+                  type="text"
+                  value={formData.username || ''}
+                  onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                  className="input"
+                />
+              </div>
+              <div>
+                <label className="label">Password (optional)</label>
+                <input
+                  type="password"
+                  value={formData.password || ''}
+                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                  className="input"
+                />
+              </div>
+              <div>
+                <label className="label">Description</label>
+                <textarea
+                  value={formData.description || ''}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="input"
+                  rows={2}
+                />
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="insecure"
+                    checked={formData.insecure || false}
+                    onChange={(e) => setFormData({ ...formData, insecure: e.target.checked })}
+                    className="w-4 h-4"
+                  />
+                  <label htmlFor="insecure" className="text-sm text-[var(--foreground)]">
+                    Insecure (HTTP)
+                  </label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="isShared"
+                    checked={formData.isShared || false}
+                    onChange={(e) => setFormData({ ...formData, isShared: e.target.checked })}
+                    className="w-4 h-4"
+                  />
+                  <label htmlFor="isShared" className="text-sm text-[var(--foreground)]">
+                    Shared
+                  </label>
+                </div>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingRegistry(null);
+                  }}
+                  className="flex-1 px-4 py-2 rounded-lg border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--secondary)]"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="flex-1 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90 disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
+                  {isSubmitting ? 'Saving...' : (editingRegistry ? 'Update' : 'Create')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Registries List */}
+      {registries.length === 0 ? (
+        <div className="card text-center py-12">
+          <Database className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+          <p className="text-[var(--muted-foreground)]">No registries configured</p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-4 text-[var(--primary)] hover:underline"
+          >
+            Add your first registry
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {registries.map((registry) => (
+            <div key={registry.id} className="card flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="p-3 rounded-lg bg-[var(--primary)]/10">
+                  <Database className="w-6 h-6 text-[var(--primary)]" />
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-semibold text-[var(--foreground)]">{registry.name}</h3>
+                    {registry.isShared && (
+                      <span className="badge badge-info">Shared</span>
+                    )}
+                    {registry.insecure && (
+                      <span className="badge badge-warning">Insecure</span>
+                    )}
+                  </div>
+                  <p className="text-sm text-[var(--muted-foreground)]">{registry.url}</p>
+                  {registry.description && (
+                    <p className="text-sm text-[var(--muted-foreground)] mt-1">{registry.description}</p>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {registry.username ? (
+                  <span title="Credentials configured"><CheckCircle className="w-4 h-4 text-green-500" /></span>
+                ) : (
+                  <span title="No credentials"><AlertCircle className="w-4 h-4 text-yellow-500" /></span>
+                )}
+                <button
+                  onClick={() => handleEdit(registry)}
+                  className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                >
+                  <Edit className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => handleDelete(registry.id)}
+                  className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[#ef4444]"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/app/routes/AppRoutes.tsx
+++ b/frontend/src/app/routes/AppRoutes.tsx
@ -1,182 +0,0 @@
-/**
- * Application Routes Configuration
- * 应用路由配置
- */
-
-import { Routes, Route, Navigate } from "react-router-dom";
-import { ProtectedRoute } from "./RouteGuard";
-import AppShell from "@/shared/components/layout/AppShell";
-import { getPageInfo, type NavItem } from "../constants/navigation";
-import { useLocation } from "react-router-dom";
-import type { AuthResponse } from "@/api";
-
-// Feature pages
-import AuthPage from "@/features/auth/pages/AuthPage";
-import HomePage from "@/features/home/pages/HomePage";
-import ClusterConfigPage from "@/features/configuration/clusters/pages/ClusterConfigPage";
-import RegistryConfigPage from "@/features/configuration/registries/pages/RegistryConfigPage";
-import ArtifactBrowserPage from "@/features/artifact/registries/pages/ArtifactBrowserPage";
-import InstancesManagementPage from "@/features/artifact/instances/pages/InstancesManagementPage";
-import MonitoringClustersPage from "@/features/monitoring/clusters/pages/MonitoringClustersPage";
-import { ApiTest } from "@/components/ApiTest";
-
-interface AppRoutesProps {
-  isAuthenticated: boolean;
-  userName?: string;
-  navItems: NavItem[];
-  onLogin: (tokens: AuthResponse) => void;
-  onLogout: () => void;
-}
-
-/**
- * Main application routes
- */
-export const AppRoutes = ({
-  isAuthenticated,
-  userName = "User",
-  navItems,
-  onLogin,
-  onLogout,
-}: AppRoutesProps) => {
-  const location = useLocation();
-  const pageInfo = getPageInfo(location.pathname);
-
-  return (
-    <Routes>
-      {/* Public route - Authentication page */}
-      <Route
-        path="/"
-        element={
-          isAuthenticated ? (
-            <Navigate to="/home" replace />
-          ) : (
-            <AuthPage onLogin={onLogin} />
-          )
-        }
-      />
-
-      {/* Protected routes - wrapped in AppShell */}
-      <Route
-        path="/home"
-        element={
-          <ProtectedRoute isAuthenticated={isAuthenticated}>
-            <AppShell
-              title={pageInfo.title}
-              icon={pageInfo.icon}
-              userName={userName}
-              navItems={navItems}
-              onSignOut={onLogout}
-            >
-              <HomePage />
-            </AppShell>
-          </ProtectedRoute>
-        }
-      />
-
-      <Route
-        path="/configuration/clusters"
-        element={
-          <ProtectedRoute isAuthenticated={isAuthenticated}>
-            <AppShell
-              title={pageInfo.title}
-              icon={pageInfo.icon}
-              userName={userName}
-              navItems={navItems}
-              onSignOut={onLogout}
-            >
-              <ClusterConfigPage />
-            </AppShell>
-          </ProtectedRoute>
-        }
-      />
-
-      <Route
-        path="/configuration/registries"
-        element={
-          <ProtectedRoute isAuthenticated={isAuthenticated}>
-            <AppShell
-              title={pageInfo.title}
-              icon={pageInfo.icon}
-              userName={userName}
-              navItems={navItems}
-              onSignOut={onLogout}
-            >
-              <RegistryConfigPage />
-            </AppShell>
-          </ProtectedRoute>
-        }
-      />
-
-      <Route
-        path="/artifact/registries"
-        element={
-          <ProtectedRoute isAuthenticated={isAuthenticated}>
-            <AppShell
-              title={pageInfo.title}
-              icon={pageInfo.icon}
-              userName={userName}
-              navItems={navItems}
-              onSignOut={onLogout}
-            >
-              <ArtifactBrowserPage />
-            </AppShell>
-          </ProtectedRoute>
-        }
-      />
-
-      <Route
-        path="/artifact/instances"
-        element={
-          <ProtectedRoute isAuthenticated={isAuthenticated}>
-            <AppShell
-              title={pageInfo.title}
-              icon={pageInfo.icon}
-              userName={userName}
-              navItems={navItems}
-              onSignOut={onLogout}
-            >
-              <InstancesManagementPage />
-            </AppShell>
-          </ProtectedRoute>
-        }
-      />
-
-      <Route
-        path="/monitoring/clusters"
-        element={
-          <ProtectedRoute isAuthenticated={isAuthenticated}>
-            <AppShell
-              title={pageInfo.title}
-              icon={pageInfo.icon}
-              userName={userName}
-              navItems={navItems}
-              onSignOut={onLogout}
-            >
-              <MonitoringClustersPage />
-            </AppShell>
-          </ProtectedRoute>
-        }
-      />
-
-      {/* API Test page - Public for testing */}
-      <Route path="/api-test" element={<ApiTest />} />
-
-      {/* Legacy path compatibility - redirects */}
-      <Route path="/config" element={<Navigate to="/configuration/clusters" replace />} />
-      <Route path="/config/cluster" element={<Navigate to="/configuration/clusters" replace />} />
-      <Route path="/config/clusters" element={<Navigate to="/configuration/clusters" replace />} />
-      <Route path="/config/app" element={<Navigate to="/configuration/registries" replace />} />
-      <Route path="/config/registry" element={<Navigate to="/configuration/registries" replace />} />
-      <Route path="/config/registries" element={<Navigate to="/configuration/registries" replace />} />
-      <Route path="/artifact/registry" element={<Navigate to="/artifact/registries" replace />} />
-      <Route path="/artifact/instance" element={<Navigate to="/artifact/instances" replace />} />
-      <Route path="/monitor" element={<Navigate to="/monitoring/clusters" replace />} />
-      <Route path="/cluster" element={<Navigate to="/monitoring/clusters" replace />} />
-      <Route path="/cluster/monitor" element={<Navigate to="/monitoring/clusters" replace />} />
-      <Route path="/registry" element={<Navigate to="/artifact/registries" replace />} />
-      <Route path="/register" element={<Navigate to="/" replace />} />
-    </Routes>
-  );
-};
-
-
--- a/frontend/src/app/routes/RouteGuard.tsx
+++ b/frontend/src/app/routes/RouteGuard.tsx
@ -1,39 +0,0 @@
-/**
- * Route Guard Component
- * 路由守卫组件 - 处理认证和授权
- */
-
-import { Navigate } from "react-router-dom";
-import type { ReactNode } from "react";
-
-interface RouteGuardProps {
-  isAuthenticated: boolean;
-  redirectTo?: string;
-  children: ReactNode;
-}
-
-/**
- * Protected route wrapper
- * Redirects to auth page if not authenticated
- */
-export const ProtectedRoute = ({ 
-  isAuthenticated, 
-  redirectTo = "/", 
-  children 
-}: RouteGuardProps) => {
-  return isAuthenticated ? <>{children}</> : <Navigate to={redirectTo} replace />;
-};
-
-/**
- * Public route wrapper
- * Redirects to home if already authenticated
- */
-export const PublicRoute = ({ 
-  isAuthenticated, 
-  redirectTo = "/home", 
-  children 
-}: RouteGuardProps) => {
-  return !isAuthenticated ? <>{children}</> : <Navigate to={redirectTo} replace />;
-};
-
-
--- a/frontend/src/app/storage/page.tsx
+++ b/frontend/src/app/storage/page.tsx
@ -0,0 +1,383 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { storageApi } from '@/lib/api';
+import type { StorageDTO, CreateStorageRequest, UpdateStorageRequest } from '@/lib/types';
+import { HardDrive, Plus, Trash2, Edit, Server, Folder, Loader2 } from 'lucide-react';
+
+export default function StoragePage() {
+  const [storages, setStorages] = useState<StorageDTO[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingStorage, setEditingStorage] = useState<StorageDTO | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<CreateStorageRequest>({
+    name: '',
+    type: 'nfs',
+    description: '',
+    is_default: false,
+    is_shared: false,
+  });
+
+  const fetchStorages = async () => {
+    try {
+      const response = await storageApi.list();
+      setStorages(response.data || []);
+    } catch (error) {
+      console.error('Failed to fetch storages:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStorages();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    try {
+      if (editingStorage) {
+        await storageApi.update(editingStorage.id, formData as UpdateStorageRequest);
+      } else {
+        await storageApi.create(formData);
+      }
+      setShowForm(false);
+      setEditingStorage(null);
+      setFormData({ name: '', type: 'nfs', description: '', is_default: false, is_shared: false });
+      fetchStorages();
+      alert(editingStorage ? 'Storage backend updated successfully!' : 'Storage backend created successfully!');
+    } catch (error) {
+      console.error('Failed to save storage:', error);
+      alert('Failed to save storage backend: ' + (error instanceof Error ? error.message : 'Unknown error'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEdit = (storage: StorageDTO) => {
+    setEditingStorage(storage);
+    setFormData({
+      name: storage.name,
+      type: storage.type,
+      description: storage.description || '',
+      is_default: storage.is_default,
+      is_shared: storage.is_shared,
+      nfs: storage.config.nfs,
+      pv: storage.config.pv,
+      hostPath: storage.config.hostPath,
+    });
+    setShowForm(true);
+  };
+
+  const handleDelete = async (storageId: string) => {
+    if (!confirm('Are you sure you want to delete this storage backend?')) return;
+    try {
+      await storageApi.delete(storageId);
+      fetchStorages();
+    } catch (error) {
+      console.error('Failed to delete storage:', error);
+      alert('Failed to delete storage backend');
+    }
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'nfs':
+        return <Server className="w-6 h-6 text-blue-500" />;
+      case 'pv':
+        return <HardDrive className="w-6 h-6 text-purple-500" />;
+      case 'hostPath':
+        return <Folder className="w-6 h-6 text-green-500" />;
+      default:
+        return <HardDrive className="w-6 h-6 text-gray-500" />;
+    }
+  };
+
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case 'nfs':
+        return 'NFS';
+      case 'pv':
+        return 'Persistent Volume';
+      case 'hostPath':
+        return 'Host Path';
+      default:
+        return type;
+    }
+  };
+
+  const renderConfig = (storage: StorageDTO) => {
+    if (storage.config.nfs) {
+      return (
+        <div className="text-sm text-[var(--muted-foreground)]">
+          <span className="font-medium">Server:</span> {storage.config.nfs.server}
+          <br />
+          <span className="font-medium">Path:</span> {storage.config.nfs.path}
+        </div>
+      );
+    }
+    if (storage.config.pv) {
+      return (
+        <div className="text-sm text-[var(--muted-foreground)]">
+          <span className="font-medium">StorageClass:</span> {storage.config.pv.storageClassName}
+          <br />
+          <span className="font-medium">Capacity:</span> {storage.config.pv.capacity}
+        </div>
+      );
+    }
+    if (storage.config.hostPath) {
+      return (
+        <div className="text-sm text-[var(--muted-foreground)]">
+          <span className="font-medium">Path:</span> {storage.config.hostPath.path}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">Storage Backends</h1>
+          <p className="text-[var(--muted-foreground)]">Manage NFS, PV, and HostPath storage</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingStorage(null);
+            setFormData({ name: '', type: 'nfs', description: '', is_default: false, is_shared: false });
+          }}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90"
+        >
+          <Plus className="w-4 h-4" />
+          Add Storage
+        </button>
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-lg p-6 w-full max-w-md border border-[var(--border)]">
+            <h2 className="text-lg font-semibold text-[var(--foreground)] mb-4">
+              {editingStorage ? 'Edit Storage Backend' : 'Add Storage Backend'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Name</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  required
+                />
+              </div>
+              <div>
+                <label className="label">Type</label>
+                <select
+                  value={formData.type}
+                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
+                  className="input"
+                >
+                  <option value="nfs">NFS</option>
+                  <option value="pv">Persistent Volume</option>
+                  <option value="hostPath">Host Path</option>
+                </select>
+              </div>
+
+              {/* NFS Config */}
+              {formData.type === 'nfs' && (
+                <>
+                  <div>
+                    <label className="label">NFS Server</label>
+                    <input
+                      type="text"
+                      value={formData.nfs?.server || ''}
+                      onChange={(e) => setFormData({ ...formData, nfs: { ...formData.nfs, server: e.target.value, path: formData.nfs?.path || '' } })}
+                      className="input"
+                      placeholder="nfs.example.com"
+                    />
+                  </div>
+                  <div>
+                    <label className="label">NFS Path</label>
+                    <input
+                      type="text"
+                      value={formData.nfs?.path || ''}
+                      onChange={(e) => setFormData({ ...formData, nfs: { ...formData.nfs, server: formData.nfs?.server || '', path: e.target.value } })}
+                      className="input"
+                      placeholder="/exports/data"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* PV Config */}
+              {formData.type === 'pv' && (
+                <>
+                  <div>
+                    <label className="label">Storage Class Name</label>
+                    <input
+                      type="text"
+                      value={formData.pv?.storageClassName || ''}
+                      onChange={(e) => setFormData({ ...formData, pv: { ...formData.pv, storageClassName: e.target.value, capacity: formData.pv?.capacity || '10Gi', accessModes: formData.pv?.accessModes || ['ReadWriteOnce'] } })}
+                      className="input"
+                      placeholder="standard"
+                    />
+                  </div>
+                  <div>
+                    <label className="label">Capacity</label>
+                    <input
+                      type="text"
+                      value={formData.pv?.capacity || ''}
+                      onChange={(e) => setFormData({ ...formData, pv: { ...formData.pv, storageClassName: formData.pv?.storageClassName || '', capacity: e.target.value, accessModes: formData.pv?.accessModes || ['ReadWriteOnce'] } })}
+                      className="input"
+                      placeholder="10Gi"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* HostPath Config */}
+              {formData.type === 'hostPath' && (
+                <div>
+                  <label className="label">Host Path</label>
+                  <input
+                    type="text"
+                    value={formData.hostPath?.path || ''}
+                    onChange={(e) => setFormData({ ...formData, hostPath: { path: e.target.value } })}
+                    className="input"
+                    placeholder="/mnt/data"
+                  />
+                </div>
+              )}
+
+              <div>
+                <label className="label">Description</label>
+                <textarea
+                  value={formData.description || ''}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="input"
+                  rows={2}
+                />
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="isDefault"
+                    checked={formData.is_default || false}
+                    onChange={(e) => setFormData({ ...formData, is_default: e.target.checked })}
+                    className="w-4 h-4"
+                  />
+                  <label htmlFor="isDefault" className="text-sm text-[var(--foreground)]">
+                    Default
+                  </label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="isShared"
+                    checked={formData.is_shared || false}
+                    onChange={(e) => setFormData({ ...formData, is_shared: e.target.checked })}
+                    className="w-4 h-4"
+                  />
+                  <label htmlFor="isShared" className="text-sm text-[var(--foreground)]">
+                    Shared
+                  </label>
+                </div>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingStorage(null);
+                  }}
+                  className="flex-1 px-4 py-2 rounded-lg border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--secondary)]"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="flex-1 px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] font-medium hover:opacity-90 disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
+                  {isSubmitting ? 'Saving...' : (editingStorage ? 'Update' : 'Create')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Storages List */}
+      {storages.length === 0 ? (
+        <div className="card text-center py-12">
+          <HardDrive className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
+          <p className="text-[var(--muted-foreground)]">No storage backends configured</p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-4 text-[var(--primary)] hover:underline"
+          >
+            Add your first storage backend
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {storages.map((storage) => (
+            <div key={storage.id} className="card flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="p-3 rounded-lg bg-[var(--primary)]/10">
+                  {getTypeIcon(storage.type)}
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-semibold text-[var(--foreground)]">{storage.name}</h3>
+                    <span className="badge">{getTypeLabel(storage.type)}</span>
+                    {storage.is_default && (
+                      <span className="badge badge-info">Default</span>
+                    )}
+                    {storage.is_shared && (
+                      <span className="badge badge-success">Shared</span>
+                    )}
+                  </div>
+                  {renderConfig(storage)}
+                  {storage.description && (
+                    <p className="text-sm text-[var(--muted-foreground)] mt-1">{storage.description}</p>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => handleEdit(storage)}
+                  className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                >
+                  <Edit className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => handleDelete(storage.id)}
+                  className="p-2 rounded-lg hover:bg-[var(--secondary)] text-[var(--muted-foreground)] hover:text-[#ef4444]"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/app/templates/page.tsx
+++ b/frontend/src/app/templates/page.tsx
@ -0,0 +1,435 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { valuesTemplateApi, chartReferenceApi } from '@/lib/api';
+import type { ValuesTemplateDTO, CreateValuesTemplateRequest, UpdateValuesTemplateRequest, ChartReferenceDTO } from '@/lib/types';
+import { FileText, Plus, Trash2, Edit, History, RotateCcw, Search, Package, Tag } from 'lucide-react';
+
+export default function TemplatesPage() {
+  const [templates, setTemplates] = useState<ValuesTemplateDTO[]>([]);
+  const [chartRefs, setChartRefs] = useState<ChartReferenceDTO[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [showHistory, setShowHistory] = useState(false);
+  const [editingTemplate, setEditingTemplate] = useState<ValuesTemplateDTO | null>(null);
+  const [selectedChartRef, setSelectedChartRef] = useState<string>('');
+  const [historyTemplates, setHistoryTemplates] = useState<ValuesTemplateDTO[]>([]);
+  const [historyName, setHistoryName] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [formData, setFormData] = useState<CreateValuesTemplateRequest>({
+    chart_reference_id: '',
+    name: '',
+    description: '',
+    values_yaml: '',
+    is_default: false,
+  });
+
+  const fetchTemplates = async () => {
+    try {
+      const response = await valuesTemplateApi.list();
+      setTemplates(response.data || []);
+    } catch (error) {
+      console.error('Failed to fetch templates:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchChartRefs = async () => {
+    try {
+      const response = await chartReferenceApi.list();
+      setChartRefs(response.data || []);
+    } catch (error) {
+      console.error('Failed to fetch chart references:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchTemplates();
+    fetchChartRefs();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (editingTemplate) {
+        await valuesTemplateApi.update(editingTemplate.id, formData as UpdateValuesTemplateRequest);
+      } else {
+        await valuesTemplateApi.create(formData);
+      }
+      setShowForm(false);
+      setEditingTemplate(null);
+      setFormData({ chart_reference_id: '', name: '', description: '', values_yaml: '', is_default: false });
+      fetchTemplates();
+    } catch (error) {
+      console.error('Failed to save template:', error);
+      alert('Failed to save values template');
+    }
+  };
+
+  const handleEdit = (template: ValuesTemplateDTO) => {
+    setEditingTemplate(template);
+    setFormData({
+      chart_reference_id: template.chart_reference_id,
+      name: template.name,
+      description: template.description || '',
+      values_yaml: template.values_yaml,
+      is_default: template.is_default,
+    });
+    setShowForm(true);
+  };
+
+  const handleDelete = async (templateId: string) => {
+    if (!confirm('Are you sure you want to delete this template? All versions will be deleted.')) return;
+    try {
+      await valuesTemplateApi.delete(templateId);
+      fetchTemplates();
+    } catch (error) {
+      console.error('Failed to delete template:', error);
+      alert('Failed to delete template');
+    }
+  };
+
+  const handleViewHistory = async (chartRefId: string, name: string) => {
+    try {
+      const response = await valuesTemplateApi.getHistory(chartRefId, name);
+      setHistoryTemplates(response.data || []);
+      setSelectedChartRef(chartRefId);
+      setHistoryName(name);
+      setShowHistory(true);
+    } catch (error) {
+      console.error('Failed to fetch history:', error);
+      alert('Failed to fetch template history');
+    }
+  };
+
+  const handleRollback = async (templateId: string) => {
+    if (!confirm('Are you sure you want to rollback to this version?')) return;
+    try {
+      await valuesTemplateApi.rollback(selectedChartRef, templateId);
+      setShowHistory(false);
+      fetchTemplates();
+      alert('Rollback successful');
+    } catch (error) {
+      console.error('Failed to rollback:', error);
+      alert('Failed to rollback template');
+    }
+  };
+
+  const getChartRefName = (chartRefId: string) => {
+    const chartRef = chartRefs.find(cr => cr.id === chartRefId);
+    return chartRef?.chart_name || chartRefId;
+  };
+
+  // Group templates by chart_reference_id and name, show only latest version
+  const latestTemplates = templates.reduce((acc, template) => {
+    const key = `${template.chart_reference_id}-${template.name}`;
+    if (!acc[key] || template.version > acc[key].version) {
+      acc[key] = template;
+    }
+    return acc;
+  }, {} as Record<string, ValuesTemplateDTO>);
+
+  const filteredTemplates = Object.values(latestTemplates).filter(t =>
+    t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    getChartRefName(t.chart_reference_id).toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-[var(--foreground)]">Values Templates</h1>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Manage Helm values templates with version control
+          </p>
+        </div>
+        <button
+          onClick={() => {
+            setShowForm(true);
+            setEditingTemplate(null);
+            setFormData({ chart_reference_id: '', name: '', description: '', values_yaml: '', is_default: false });
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity"
+        >
+          <Plus className="w-4 h-4" />
+          Add Template
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" />
+        <input
+          type="text"
+          placeholder="Search templates..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 bg-[var(--card)] border border-[var(--border)] rounded-lg text-[var(--foreground)] placeholder:text-[var(--muted-foreground)]"
+        />
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-xl p-6 w-full max-w-2xl border border-[var(--border)] max-h-[90vh] overflow-y-auto">
+            <h2 className="text-xl font-bold text-[var(--foreground)] mb-4">
+              {editingTemplate ? `Edit Template (v${editingTemplate.version}) - Creating new version` : 'Add Values Template'}
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Chart Reference
+                </label>
+                <select
+                  value={formData.chart_reference_id}
+                  onChange={(e) => setFormData({ ...formData, chart_reference_id: e.target.value })}
+                  required
+                  disabled={!!editingTemplate}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)] disabled:opacity-50"
+                >
+                  <option value="">Select a chart reference</option>
+                  {chartRefs.map((cr) => (
+                    <option key={cr.id} value={cr.id}>{cr.chart_name} ({cr.repository})</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Template Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  placeholder="e.g., production, development, default"
+                  required
+                  disabled={!!editingTemplate}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)] disabled:opacity-50"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Description
+                </label>
+                <input
+                  type="text"
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  placeholder="Optional description..."
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+                  Values YAML
+                </label>
+                <textarea
+                  value={formData.values_yaml}
+                  onChange={(e) => setFormData({ ...formData, values_yaml: e.target.value })}
+                  placeholder="replicaCount: 1&#10;image: &#10;  repository: nginx&#10;  tag: latest"
+                  required
+                  rows={12}
+                  className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)] font-mono text-sm"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="is_default"
+                  checked={formData.is_default}
+                  onChange={(e) => setFormData({ ...formData, is_default: e.target.checked })}
+                  className="w-4 h-4"
+                />
+                <label htmlFor="is_default" className="text-sm text-[var(--foreground)]">
+                  Set as default template
+                </label>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false);
+                    setEditingTemplate(null);
+                  }}
+                  className="flex-1 px-4 py-2 border border-[var(--border)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)] transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity"
+                >
+                  {editingTemplate ? 'Create New Version' : 'Create'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* History Modal */}
+      {showHistory && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[var(--card)] rounded-xl p-6 w-full max-w-2xl border border-[var(--border)] max-h-[90vh] overflow-y-auto">
+            <h2 className="text-xl font-bold text-[var(--foreground)] mb-2">
+              Version History
+            </h2>
+            <p className="text-sm text-[var(--muted-foreground)] mb-4">
+              {historyName} - {getChartRefName(selectedChartRef)}
+            </p>
+            <div className="space-y-3">
+              {historyTemplates.map((template) => (
+                <div
+                  key={template.id}
+                  className="p-4 border border-[var(--border)] rounded-lg hover:bg-[var(--secondary)] transition-colors"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <Tag className="w-4 h-4 text-[var(--primary)]" />
+                      <span className="font-medium text-[var(--foreground)]">Version {template.version}</span>
+                      {template.is_default && (
+                        <span className="px-2 py-0.5 text-xs bg-[var(--primary)] text-[var(--primary-foreground)] rounded">
+                          Default
+                        </span>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => handleRollback(template.id)}
+                      className="flex items-center gap-1 px-3 py-1 text-sm border border-[var(--border)] text-[var(--foreground)] rounded hover:bg-[var(--secondary)] transition-colors"
+                    >
+                      <RotateCcw className="w-3 h-3" />
+                      Rollback
+                    </button>
+                  </div>
+                  <div className="text-xs text-[var(--muted-foreground)] mb-2">
+                    Created: {new Date(template.createdAt).toLocaleString()}
+                  </div>
+                  <pre className="text-xs text-[var(--foreground)] bg-[var(--background)] p-2 rounded overflow-x-auto max-h-32">
+                    {template.values_yaml}
+                  </pre>
+                </div>
+              ))}
+              {historyTemplates.length === 0 && (
+                <p className="text-center text-[var(--muted-foreground)] py-4">
+                  No version history found
+                </p>
+              )}
+            </div>
+            <div className="mt-4">
+              <button
+                onClick={() => setShowHistory(false)}
+                className="w-full px-4 py-2 border border-[var(--border)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)] transition-colors"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="bg-[var(--card)] rounded-xl border border-[var(--border)] overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-[var(--secondary)]">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Template
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Chart
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Version
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Default
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Description
+              </th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-[var(--border)]">
+            {filteredTemplates.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-[var(--muted-foreground)]">
+                  No templates found
+                </td>
+              </tr>
+            ) : (
+              filteredTemplates.map((template) => (
+                <tr key={`${template.chart_reference_id}-${template.name}`} className="hover:bg-[var(--secondary)] transition-colors">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <FileText className="w-4 h-4 text-[var(--primary)]" />
+                      <span className="font-medium text-[var(--foreground)]">{template.name}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-1 text-[var(--muted-foreground)]">
+                      <Package className="w-3 h-3" />
+                      {getChartRefName(template.chart_reference_id)}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="px-2 py-1 text-xs bg-[var(--secondary)] text-[var(--foreground)] rounded">
+                      v{template.version}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    {template.is_default ? (
+                      <span className="px-2 py-1 text-xs bg-green-500/20 text-green-500 rounded">Yes</span>
+                    ) : (
+                      <span className="text-[var(--muted-foreground)]">-</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-[var(--muted-foreground)] text-sm">
+                    {template.description || '-'}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        onClick={() => handleViewHistory(template.chart_reference_id, template.name)}
+                        className="p-1 hover:bg-[var(--secondary)] rounded"
+                        title="Version History"
+                      >
+                        <History className="w-4 h-4 text-[var(--muted-foreground)]" />
+                      </button>
+                      <button
+                        onClick={() => handleEdit(template)}
+                        className="p-1 hover:bg-[var(--secondary)] rounded"
+                        title="Edit (Create New Version)"
+                      >
+                        <Edit className="w-4 h-4 text-[var(--muted-foreground)]" />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(template.id)}
+                        className="p-1 hover:bg-[var(--secondary)] rounded"
+                        title="Delete"
+                      >
+                        <Trash2 className="w-4 h-4 text-red-500" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/ApiTest.tsx
+++ b/frontend/src/components/ApiTest.tsx
@ -1,272 +0,0 @@
-import { useState } from 'react';
-import {
-  register,
-  login,
-  listClusters,
-  createCluster,
-  setAuthToken,
-  type RegisterBody,
-  type LoginBody,
-  type CreateClusterRequest,
-} from '@/api';
-
-export function ApiTest() {
-  const [result, setResult] = useState<string>('');
-  const [loading, setLoading] = useState(false);
-  const [token, setToken] = useState<string>('');
-
-  const addLog = (message: string) => {
-    setResult((prev) => prev + '\n' + message);
-    console.log(message);
-  };
-
-  const clearLog = () => {
-    setResult('');
-  };
-
-  const handleRegister = async () => {
-    setLoading(true);
-    clearLog();
-    try {
-      addLog('📝 测试注册...');
-      const request: RegisterBody = {
-        username: 'testuser',
-        password: 'password123',
-      };
-      
-      addLog(`发送请求: ${JSON.stringify(request, null, 2)}`);
-      const response = await register(request);
-      addLog(`✅ 注册成功!`);
-      addLog(`响应: ${JSON.stringify(response, null, 2)}`);
-    } catch (error: any) {
-      addLog(`❌ 注册失败: ${error.message}`);
-      if (error.response?.data) {
-        addLog(`错误详情: ${JSON.stringify(error.response.data, null, 2)}`);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleLogin = async () => {
-    setLoading(true);
-    clearLog();
-    try {
-      addLog('🔐 测试登录...');
-      const request: LoginBody = {
-        username: 'testuser',
-        password: 'password123',
-      };
-      
-      addLog(`发送请求: ${JSON.stringify(request, null, 2)}`);
-      const response = await login(request);
-      addLog(`✅ 登录成功!`);
-      addLog(`响应 (注意 camelCase): ${JSON.stringify(response, null, 2)}`);
-      
-      // 验证响应字段是否为 camelCase
-      if (response.accessToken) {
-        addLog(`✅ 验证: accessToken 字段存在 (camelCase) ✓`);
-        setToken(response.accessToken);
-        setAuthToken(response.accessToken);
-      } else {
-        addLog(`❌ 错误: accessToken 字段不存在!`);
-      }
-    } catch (error: any) {
-      addLog(`❌ 登录失败: ${error.message}`);
-      if (error.response?.data) {
-        addLog(`错误详情: ${JSON.stringify(error.response.data, null, 2)}`);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleListClusters = async () => {
-    setLoading(true);
-    clearLog();
-    try {
-      addLog('📋 测试获取集群列表...');
-      const clusters = await listClusters();
-      addLog(`✅ 获取成功! 共 ${clusters.length} 个集群`);
-      addLog(`响应 (注意 camelCase): ${JSON.stringify(clusters, null, 2)}`);
-      
-      // 验证响应字段
-      if (clusters.length > 0) {
-        const firstCluster = clusters[0];
-        if ('createdAt' in firstCluster) {
-          addLog(`✅ 验证: createdAt 字段存在 (camelCase) ✓`);
-        }
-        if ('hasCaData' in firstCluster) {
-          addLog(`✅ 验证: hasCaData 字段存在 (camelCase) ✓`);
-        }
-      }
-    } catch (error: any) {
-      addLog(`❌ 获取失败: ${error.message}`);
-      if (error.response?.data) {
-        addLog(`错误详情: ${JSON.stringify(error.response.data, null, 2)}`);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreateCluster = async () => {
-    setLoading(true);
-    clearLog();
-    try {
-      addLog('🚀 测试创建集群 (使用 camelCase)...');
-      const request: CreateClusterRequest = {
-        name: 'test-cluster',
-        host: 'https://k8s.test.example.com:6443',
-        description: '测试集群 - camelCase 验证',
-        caData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',  // ✅ camelCase
-        certData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t', // ✅ camelCase
-        keyData: 'LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVkt',   // ✅ camelCase
-      };
-      
-      addLog(`发送请求 (camelCase):`);
-      addLog(JSON.stringify(request, null, 2));
-      
-      const response = await createCluster(request);
-      addLog(`✅ 创建成功!`);
-      addLog(`响应: ${JSON.stringify(response, null, 2)}`);
-      
-      // 验证响应字段
-      if ('createdAt' in response) {
-        addLog(`✅ 验证: createdAt 字段存在 (camelCase) ✓`);
-      }
-      if ('caData' in response || 'hasCaData' in response) {
-        addLog(`✅ 验证: caData/hasCaData 字段存在 (camelCase) ✓`);
-      }
-    } catch (error: any) {
-      addLog(`❌ 创建失败: ${error.message}`);
-      if (error.response?.data) {
-        addLog(`错误详情: ${JSON.stringify(error.response.data, null, 2)}`);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleFullTest = async () => {
-    setLoading(true);
-    clearLog();
-    addLog('🧪 开始完整测试流程...\n');
-    
-    try {
-      // 1. 注册
-      addLog('步骤 1: 注册用户');
-      try {
-        await register({
-          username: `testuser_${Date.now()}`,
-          password: 'password123',
-        });
-        addLog('✅ 注册成功\n');
-      } catch (e: any) {
-        addLog('⚠️ 注册失败 (可能用户已存在)\n');
-      }
-
-      // 2. 登录
-      addLog('步骤 2: 登录');
-      const loginResponse = await login({
-        username: 'testuser',
-        password: 'password123',
-      });
-      addLog(`✅ 登录成功 - Token: ${loginResponse.accessToken?.substring(0, 20)}...`);
-      setAuthToken(loginResponse.accessToken || '');
-      addLog('');
-
-      // 3. 获取集群列表
-      addLog('步骤 3: 获取集群列表');
-      const clusters = await listClusters();
-      addLog(`✅ 获取成功 - 共 ${clusters.length} 个集群\n`);
-
-      // 4. 创建集群
-      addLog('步骤 4: 创建测试集群 (camelCase)');
-      const newCluster = await createCluster({
-        name: `test-cluster-${Date.now()}`,
-        host: 'https://k8s.test.example.com:6443',
-        description: 'Full test cluster',
-        caData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',
-        certData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',
-        keyData: 'LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVkt',
-      });
-      addLog(`✅ 创建成功 - ID: ${newCluster.id}\n`);
-
-      addLog('🎉 完整测试流程完成! 所有 API 调用成功，camelCase 工作正常！');
-    } catch (error: any) {
-      addLog(`\n❌ 测试失败: ${error.message}`);
-      if (error.response?.data) {
-        addLog(`错误详情: ${JSON.stringify(error.response.data, null, 2)}`);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ padding: '20px', fontFamily: 'monospace' }}>
-      <h1>🧪 OCDP API 测试 - camelCase 验证</h1>
-      
-      <div style={{ marginBottom: '20px' }}>
-        <h3>当前 Token:</h3>
-        <input
-          type="text"
-          value={token}
-          onChange={(e) => setToken(e.target.value)}
-          placeholder="JWT Token"
-          style={{ width: '100%', padding: '8px', marginBottom: '10px' }}
-        />
-        <button onClick={() => setAuthToken(token)}>设置 Token</button>
-      </div>
-
-      <div style={{ marginBottom: '20px' }}>
-        <h3>测试选项:</h3>
-        <button onClick={handleRegister} disabled={loading} style={{ marginRight: '10px' }}>
-          1. 测试注册
-        </button>
-        <button onClick={handleLogin} disabled={loading} style={{ marginRight: '10px' }}>
-          2. 测试登录
-        </button>
-        <button onClick={handleListClusters} disabled={loading} style={{ marginRight: '10px' }}>
-          3. 获取集群列表
-        </button>
-        <button onClick={handleCreateCluster} disabled={loading} style={{ marginRight: '10px' }}>
-          4. 创建集群 (camelCase)
-        </button>
-        <button
-          onClick={handleFullTest}
-          disabled={loading}
-          style={{ marginRight: '10px', fontWeight: 'bold', backgroundColor: '#4CAF50', color: 'white' }}
-        >
-          🚀 完整测试
-        </button>
-        <button onClick={clearLog} disabled={loading}>
-          清除日志
-        </button>
-      </div>
-
-      <div
-        style={{
-          backgroundColor: '#1e1e1e',
-          color: '#d4d4d4',
-          padding: '15px',
-          borderRadius: '5px',
-          minHeight: '400px',
-          maxHeight: '600px',
-          overflow: 'auto',
-          whiteSpace: 'pre-wrap',
-          fontSize: '12px',
-        }}
-      >
-        {result || '点击按钮开始测试...'}
-      </div>
-
-      {loading && (
-        <div style={{ marginTop: '10px', color: '#2196F3' }}>
-          ⏳ 正在执行测试...
-        </div>
-      )}
-    </div>
-  );
-}
--- a/frontend/src/components/client-layout.tsx
+++ b/frontend/src/components/client-layout.tsx
@ -0,0 +1,22 @@
+'use client';
+
+import { usePathname } from "next/navigation";
+import { Sidebar } from "@/components/sidebar";
+
+export function ClientLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isLoginPage = pathname === '/login';
+
+  if (isLoginPage) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 ml-64 p-6">
+        {children}
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/components/sidebar.tsx
+++ b/frontend/src/components/sidebar.tsx
@ -0,0 +1,141 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuth } from '@/lib/auth-context';
+import {
+  LayoutDashboard,
+  Users,
+  FolderKanban,
+  Server,
+  Database,
+  Activity,
+  LogOut,
+  Shield,
+  HardDrive,
+  Package,
+  FileText,
+} from 'lucide-react';
+import { logout } from '@/lib/api';
+
+const navigation = [
+  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Clusters', href: '/clusters', icon: Server },
+  { name: 'Registries', href: '/registries', icon: Database },
+  { name: 'Charts', href: '/charts', icon: Package },
+  { name: 'Storage', href: '/storage', icon: HardDrive },
+  { name: 'Chart References', href: '/chart-references', icon: FileText },
+  { name: 'Values Templates', href: '/templates', icon: FileText },
+  { name: 'Monitoring', href: '/monitoring', icon: Activity },
+];
+
+const adminNavigation = [
+  { name: 'Workspaces', href: '/admin/workspaces', icon: FolderKanban },
+  { name: 'User Management', href: '/admin/users', icon: Users },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { user, logout: authLogout } = useAuth();
+
+  const handleLogout = () => {
+    authLogout();
+    window.location.href = '/login';
+  };
+
+  const isAdmin = user?.role === 'admin';
+
+  return (
+    <div className="fixed left-0 top-0 h-screen w-64 bg-[var(--card)] border-r border-[var(--border)] flex flex-col">
+      {/* Logo */}
+      <div className="p-6 border-b border-[var(--border)]">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-[var(--primary)] flex items-center justify-center">
+            <Shield className="w-6 h-6 text-[var(--primary-foreground)]" />
+          </div>
+          <div>
+            <h1 className="font-bold text-[var(--foreground)]">OCDP</h1>
+            <p className="text-xs text-[var(--muted-foreground)]">Platform</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+        {navigation.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.name}
+              href={item.href}
+              className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                isActive
+                  ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                  : 'text-[var(--muted-foreground)] hover:bg-[var(--secondary)] hover:text-[var(--foreground)]'
+              }`}
+            >
+              <item.icon className="w-5 h-5" />
+              {item.name}
+            </Link>
+          );
+        })}
+
+        {/* Admin Section */}
+        {isAdmin && (
+          <>
+            <div className="pt-4 pb-2">
+              <p className="px-3 text-xs font-semibold text-[var(--muted-foreground)] uppercase tracking-wider">
+                Administration
+              </p>
+            </div>
+            {adminNavigation.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                      : 'text-[var(--muted-foreground)] hover:bg-[var(--secondary)] hover:text-[var(--foreground)]'
+                  }`}
+                >
+                  <item.icon className="w-5 h-5" />
+                  {item.name}
+                </Link>
+              );
+            })}
+          </>
+        )}
+      </nav>
+
+      {/* User Info & Logout */}
+      <div className="p-4 border-t border-[var(--border)]">
+        {user && (
+          <div className="flex items-center gap-3 mb-3">
+            <div className="w-8 h-8 rounded-full bg-[var(--secondary)] flex items-center justify-center">
+              <span className="text-sm font-medium text-[var(--foreground)]">
+                {user.username.charAt(0).toUpperCase()}
+              </span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-[var(--foreground)] truncate">
+                {user.username}
+              </p>
+              <p className="text-xs text-[var(--muted-foreground)]">
+                {user.role === 'admin' ? 'Administrator' : 'User'}
+              </p>
+            </div>
+          </div>
+        )}
+        <button
+          onClick={handleLogout}
+          className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm font-medium text-[var(--muted-foreground)] hover:bg-[var(--secondary)] hover:text-[var(--foreground)] transition-colors"
+        >
+          <LogOut className="w-4 h-4" />
+          Sign out
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/core/config/api-config.ts
+++ b/frontend/src/core/config/api-config.ts
@ -1,45 +0,0 @@
-/**
- * API Configuration
- * Unified management of all API-related configurations
- * Frontend always connects to the backend service
- */
-
-/**
- * API service endpoint configuration
- * Dev environment uses Vite proxy, production environment uses actual address
- */
-const API_ENDPOINTS = {
-  // Local backend service (Go) - Cluster and Registry management
-  BACKEND: "/api",
-};
-
-/**
- * Get API base path
- * @param service - Service name (currently only BACKEND)
- * @returns API base path
- */
-export function getApiBasePath(service: keyof typeof API_ENDPOINTS = "BACKEND"): string {
-  return API_ENDPOINTS[service];
-}
-
-/**
- * Default API base path (backend service)
- */
-export const API_BASE_URL = getApiBasePath("BACKEND");
-
-/**
- * 获取应用名称
- */
-export function getAppName(): string {
-  // @ts-ignore - 全局变量由 Vite 注入
-  return typeof __APP_NAME__ !== 'undefined' ? __APP_NAME__ : 'OCDP';
-}
-
-/**
- * 打印配置信息
- */
-export function logConfig(): void {
-  console.log('📋 API Configuration:');
-  console.log('  - API Base URL:', API_BASE_URL);
-  console.log('  - App Name:', getAppName());
-}
--- a/frontend/src/core/hooks/useUnifiedApi.ts
+++ b/frontend/src/core/hooks/useUnifiedApi.ts
@ -1,81 +0,0 @@
-/**
- * Unified API Hook
- * 统一的 API Hook - 提供统一的数据获取接口
- */
-
-import { useState, useEffect } from "react";
-
-/**
- * 统一的数据获取 Hook
- * @param fetchFn - 数据获取函数
- * @param deps - 依赖数组
- */
-export function useUnifiedQuery<T>(
-  fetchFn: () => Promise<T>,
-  deps: any[] = []
-) {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function fetchData() {
-      try {
-        setLoading(true);
-        setError(null);
-        const result = await fetchFn();
-        if (!cancelled) {
-          setData(result);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err as Error);
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    }
-
-    fetchData();
-
-    return () => {
-      cancelled = true;
-    };
-  }, deps);
-
-  return { data, loading, error, refetch: () => fetchFn() };
-}
-
-/**
- * 统一的变更 Hook
- * @param mutateFn - 变更函数
- */
-export function useUnifiedMutation<TData, TVariables>(
-  mutateFn: (variables: TVariables) => Promise<TData>
-) {
-  const [data, setData] = useState<TData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const mutate = async (variables: TVariables) => {
-    try {
-      setLoading(true);
-      setError(null);
-      const result = await mutateFn(variables);
-      setData(result);
-      return result;
-    } catch (err) {
-      setError(err as Error);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return { mutate, data, loading, error };
-}
-
--- a/frontend/src/core/index.ts
+++ b/frontend/src/core/index.ts
@ -1,20 +0,0 @@
-/**
- * Core Module - Unified Export
- * 核心模块统一导出
- * 
- * 包含应用的核心基础设施：
- * - api/     API 客户端和接口
- * - config/  配置管理
- * - types/   类型定义
- */
-
-// API exports are now in @/api
-// export * from "./api";
-
-// Export configuration
-export * from "./config/api-config";
-
-// Export common types
-export * from "./types";
-
-
--- a/frontend/src/core/types/index.ts
+++ b/frontend/src/core/types/index.ts
@ -1,90 +0,0 @@
-/**
- * Core Type Definitions
- * Re-exports from API generated types + additional UI types
- */
-
-// ==================== Re-export API Models ====================
-// Import from generated-orval (Orval-generated types)
-
-export type {
-  ClusterResponse,
-  CreateClusterRequest,
-  UpdateClusterRequest,
-} from '@/api';
-
-export type {
-  RegistryResponse,
-  CreateRegistryRequest,
-  UpdateRegistryRequest,
-} from '@/api';
-
-export type {
-  InstanceResponse,
-  CreateInstanceRequest,
-  UpdateInstanceRequest,
-} from '@/api';
-
-export type {
-  ArtifactResponse,
-  ArtifactListItem,
-} from '@/api';
-
-export type {
-  ClusterMonitoring,
-  MonitoringSummary,
-} from '@/api';
-
-// ==================== Type Aliases (for convenience) ====================
-// These maintain compatibility with existing code
-
-import type {
-  ClusterResponse,
-  RegistryResponse,
-  InstanceResponse,
-} from '@/api';
-
-export type Cluster = ClusterResponse;
-export type ClusterConfig = ClusterResponse;
-export type Registry = RegistryResponse;
-export type AppRegistry = RegistryResponse;
-export type Instance = InstanceResponse;
-export type AppInstance = InstanceResponse;
-
-// ==================== UI-specific Types ====================
-
-export interface HealthStatus {
-  clusterId: string;
-  status: string;
-  message: string;
-  checkedAt: string;
-}
-
-export interface RegistryHealthStatus {
-  healthy: boolean;
-  message?: string;
-}
-
-// ==================== Monitoring Extended Types ====================
-// Extended types for monitoring features (includes API fields + UI fields)
-
-import type { ClusterMonitoring, ClusterMonitoringStatus, NodeMetricsResponse } from '@/api';
-
-export type NodeMetrics = NodeMetricsResponse;
-
-export interface ClusterMetrics extends ClusterMonitoring {
-  /** Internal UI identifier (legacy) */
-  id?: string;
-  nodes?: NodeMetrics[];
-  status?: ClusterMonitoringStatus | 'warning' | 'error';
-}
-
-// ==================== Common Types ====================
-
-export interface SuccessResponse {
-  message: string;
-}
-
-export interface ErrorResponse {
-  error: string;
-  message: string;
-}
--- a/frontend/src/features/artifact/index.ts
+++ b/frontend/src/features/artifact/index.ts
@ -1,16 +0,0 @@
-/**
- * Artifact Module  
- * 制品模块 - 制品仓库浏览和实例管理
- */
-
-// Registries (Browser) - VSCode-style unified browser
-export { default as ArtifactBrowserPage } from './registries/pages/ArtifactBrowserPage';
-export * from './registries/components/RepositoryItem';
-export * from './registries/components/LaunchModal';
-export * from './registries/components/TagCard';
-
-// Instances
-export { default as InstancesManagementPage } from './instances/pages/InstancesManagementPage';
-export * from './instances/components/InstanceCard';
-export * from './instances/components/ModifyModal';
-export * from './instances/components/EntriesModal';
--- a/frontend/src/features/artifact/instances/components/EntriesModal.tsx
+++ b/frontend/src/features/artifact/instances/components/EntriesModal.tsx
@ -1,602 +0,0 @@
-/**
- * Entries Modal Component
- * 显示实例的入口信息（Services 和 Ingresses）
- */
-import React, { useState, useEffect } from "react";
-import { X, Globe, Network, ExternalLink, Copy, CheckCircle, Info } from "lucide-react";
-import { listInstanceEntries } from "@/api";
-import type { InstanceEntry, InstanceResponse } from "@/api";
-import { useToast } from "@/shared";
-
-interface ServiceEntry {
-  name?: string;
-  namespace?: string;
-  type?: string;
-  cluster_ip?: string;
-  external_ips?: string[];
-  ports?: Array<{
-    name?: string;
-    protocol?: string;
-    port?: number | string;
-    target_port?: number | string;
-    node_port?: number;
-  }>;
-  loadBalancer?: {
-    ingress?: Array<{
-      ip?: string;
-      hostname?: string;
-    }>;
-  };
-}
-
-interface IngressEntry {
-  name?: string;
-  namespace?: string;
-  class_name?: string;
-  rules?: Array<{
-    host?: string;
-    paths?: Array<{
-      path?: string;
-      path_type?: string;
-      backend?: {
-        service?: {
-          name?: string;
-          port?: number | string;
-        };
-      };
-    }>;
-  }>;
-  tls?: Array<{
-    hosts?: string[];
-    secret_name?: string;
-  }>;
-}
-
-type EntrySource = 'kubernetes' | 'manifest' | 'notes' | 'none';
-
-interface InstanceEntries {
-  services: ServiceEntry[];
-  ingresses: IngressEntry[];
-  source: EntrySource;
-  notes?: string;
-}
-
-const NESTED_ENTRY_KEYS = ["entries", "data", "result", "results", "payload", "services", "ingresses"];
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
-
-function collectEntryContainers(value: unknown, seen = new Set<unknown>()): Record<string, unknown>[] {
-  if (!isPlainObject(value) || seen.has(value)) {
-    return [];
-  }
-  seen.add(value);
-  const containers: Record<string, unknown>[] = [value];
-  for (const key of NESTED_ENTRY_KEYS) {
-    const nested = (value as Record<string, unknown>)[key];
-    if (isPlainObject(nested)) {
-      containers.push(...collectEntryContainers(nested, seen));
-    }
-  }
-  return containers;
-}
-
-function asEntryArray(value: unknown, seen = new Set<unknown>()): InstanceEntry[] | undefined {
-  if (Array.isArray(value)) {
-    return value as InstanceEntry[];
-  }
-  if (isPlainObject(value)) {
-    if (seen.has(value)) {
-      return undefined;
-    }
-    seen.add(value);
-    return (
-      asEntryArray(value.entries, seen) ||
-      asEntryArray(value.items, seen) ||
-      asEntryArray(value.data, seen)
-    );
-  }
-  return undefined;
-}
-
-const ENTRY_SOURCES: EntrySource[] = ["kubernetes", "manifest", "notes", "none"];
-
-async function getInstanceEntries(clusterId: string, instanceId: string): Promise<InstanceEntries> {
-  const raw = (await listInstanceEntries({ clusterId, instanceId })) as unknown;
-  return buildInstanceEntries(raw);
-}
-
-function buildInstanceEntries(raw: unknown): InstanceEntries {
-  const baseState: InstanceEntries = {
-    services: [],
-    ingresses: [],
-    source: "none",
-  };
-
-  if (raw == null) {
-    return baseState;
-  }
-
-  let entriesPayload: InstanceEntry[] | undefined = Array.isArray(raw) ? (raw as InstanceEntry[]) : undefined;
-  let source: EntrySource = "none";
-  let notes: string | undefined;
-  let servicesFromResponse: InstanceEntry[] | undefined;
-  let ingressesFromResponse: InstanceEntry[] | undefined;
-
-  const containers = collectEntryContainers(raw);
-  for (const container of containers) {
-    entriesPayload ||= asEntryArray(container.entries);
-    entriesPayload ||= asEntryArray(container.items);
-    entriesPayload ||= asEntryArray(container.data);
-    servicesFromResponse ||= asEntryArray(container.services);
-    ingressesFromResponse ||= asEntryArray(container.ingresses);
-    if (!notes && typeof container.notes === "string") {
-      notes = container.notes;
-    }
-    if (typeof container.source === "string") {
-      const normalized = normalizeSource(container.source);
-      if (normalized) {
-        source = normalized;
-      }
-    }
-  }
-
-  const entries = entriesPayload ?? [];
-  const splitResult = entries.length ? splitEntries(entries) : { services: [], ingresses: [] };
-  const explicitServices = servicesFromResponse?.map(mapServiceEntry) ?? [];
-  const explicitIngresses = ingressesFromResponse?.map(mapIngressEntry) ?? [];
-  const services = explicitServices.length ? explicitServices : splitResult.services;
-  const ingresses = explicitIngresses.length ? explicitIngresses : splitResult.ingresses;
-  const resolvedSource: EntrySource =
-    services.length || ingresses.length
-      ? source === "none"
-        ? "kubernetes"
-        : source
-      : source;
-
-  return {
-    services,
-    ingresses,
-    source: resolvedSource,
-    notes,
-  };
-}
-
-function normalizeSource(source: string): EntrySource | null {
-  if (ENTRY_SOURCES.includes(source as EntrySource)) {
-    return source as EntrySource;
-  }
-  return null;
-}
-
-function splitEntries(entries: InstanceEntry[]): {
-  services: ServiceEntry[];
-  ingresses: IngressEntry[];
-} {
-  if (!entries.length) {
-    return { services: [], ingresses: [] };
-  }
-  const services: ServiceEntry[] = [];
-  const ingresses: IngressEntry[] = [];
-
-  entries.forEach((entry) => {
-    const kind = entry.kind?.toLowerCase();
-    const looksLikeIngress =
-      kind === "ingress" ||
-      (!!entry.hosts && entry.hosts.length > 0) ||
-      (!!entry.tls && entry.tls.length > 0);
-    const looksLikeService =
-      kind === "service" ||
-      (!!entry.ports && entry.ports.length > 0) ||
-      !!entry.clusterIP ||
-      !!entry.type;
-
-    if (kind === "ingress" || (looksLikeIngress && !looksLikeService)) {
-      ingresses.push(mapIngressEntry(entry));
-    } else {
-      services.push(mapServiceEntry(entry));
-    }
-  });
-
-  return { services, ingresses };
-}
-
-function mapServiceEntry(entry: InstanceEntry): ServiceEntry {
-  return {
-    name: entry.name,
-    namespace: entry.namespace,
-    type: entry.type,
-    cluster_ip: entry.clusterIP,
-    external_ips: entry.externalIPs,
-    ports: entry.ports?.map((port) => ({
-      name: port.name,
-      protocol: port.protocol,
-      port: port.port ?? port.targetPort,
-      target_port: port.targetPort ?? port.port,
-      node_port: port.nodePort,
-    })),
-    loadBalancer: mapLoadBalancer(entry.loadBalancerIngress),
-  };
-}
-
-function mapIngressEntry(entry: InstanceEntry): IngressEntry {
-  return {
-    name: entry.name,
-    namespace: entry.namespace,
-    class_name: entry.type,
-    rules: entry.hosts?.map((host) => ({
-      host: host.host,
-      paths: host.paths?.map((path) => ({
-        path: path.path,
-        backend: {
-          service: {
-            name: path.serviceName,
-            port: normalizePort(path.servicePort),
-          },
-        },
-      })),
-    })),
-    tls: entry.tls?.map((tls) => ({
-      hosts: tls.hosts,
-      secret_name: tls.secretName,
-    })),
-  };
-}
-
-function mapLoadBalancer(values?: string[]) {
-  if (!values || !values.length) {
-    return undefined;
-  }
-  return {
-    ingress: values.map((value) => {
-      if (!value) {
-        return {};
-      }
-      const hasAlpha = /[a-zA-Z]/.test(value);
-      if (hasAlpha) {
-        return { hostname: value };
-      }
-      return { ip: value };
-    }),
-  };
-}
-
-function normalizePort(port?: string | number | null): number | string | undefined {
-  if (port == null) {
-    return undefined;
-  }
-  if (typeof port === "number") {
-    return port;
-  }
-  const parsed = Number(port);
-  if (!Number.isNaN(parsed)) {
-    return parsed;
-  }
-  return port;
-}
-
-interface EntriesModalProps {
-  instance: InstanceResponse;
-  onClose: () => void;
-}
-
-export const EntriesModal: React.FC<EntriesModalProps> = ({ instance, onClose }) => {
-  const { success } = useToast();
-  const [entries, setEntries] = useState<InstanceEntries | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [copiedText, setCopiedText] = useState<string | null>(null);
-
-  useEffect(() => {
-    const loadEntries = async () => {
-      if (!instance.clusterId || !instance.id) {
-        setError("Instance identifier is missing");
-        setLoading(false);
-        return;
-      }
-      try {
-        setLoading(true);
-        const data = await getInstanceEntries(instance.clusterId, instance.id);
-        setEntries(data);
-      } catch (err: unknown) {
-        setError((err as Error).message || "Failed to load entries");
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadEntries();
-  }, [instance.clusterId, instance.id]);
-
-  const copyToClipboard = (text: string, label: string) => {
-    navigator.clipboard.writeText(text);
-    setCopiedText(text);
-    success(`Copied ${label} to clipboard`);
-    setTimeout(() => setCopiedText(null), 2000);
-  };
-
-  const getSourceBadge = (source?: string) => {
-    const badges = {
-      kubernetes: { color: "bg-green-600/20 text-green-400 border-green-500/30", label: "Live from Kubernetes" },
-      manifest: { color: "bg-blue-600/20 text-blue-400 border-blue-500/30", label: "From Helm Manifest" },
-      notes: { color: "bg-yellow-600/20 text-yellow-400 border-yellow-500/30", label: "From Helm Notes" },
-      none: { color: "bg-gray-600/20 text-gray-400 border-gray-500/30", label: "No Data Available" },
-    };
-
-    const badge = badges[source as keyof typeof badges] || badges.none;
-
-    return (
-      <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium border ${badge.color}`}>
-        <Info className="w-3 h-3" />
-        {badge.label}
-      </span>
-    );
-  };
-
-  const renderService = (service: ServiceEntry, index: number) => (
-    <div key={service.name || `service-${index}`} className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-3">
-      <div className="flex items-start justify-between">
-        <div>
-          <h4 className="text-sm font-semibold text-white">{service.name || `Service ${index + 1}`}</h4>
-          <p className="text-xs text-gray-400 mt-1">Type: {service.type || 'Unknown'}</p>
-        </div>
-        <span className="px-2 py-1 text-xs font-medium bg-blue-600/20 text-blue-400 border border-blue-500/30 rounded">
-          {service.type || 'Unknown'}
-        </span>
-      </div>
-
-      <div className="space-y-2">
-        {/* Cluster IP */}
-        {service.cluster_ip && (
-          <div className="flex items-center justify-between bg-gray-900/50 rounded p-2">
-            <span className="text-xs text-gray-400">Cluster IP:</span>
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-mono text-white">{service.cluster_ip}</span>
-              <button
-                onClick={() => copyToClipboard(service.cluster_ip!, "Cluster IP")}
-                className="p-1 hover:bg-gray-700 rounded transition"
-              >
-                {copiedText === service.cluster_ip ? (
-                  <CheckCircle className="w-3 h-3 text-green-400" />
-                ) : (
-                  <Copy className="w-3 h-3 text-gray-400" />
-                )}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Ports */}
-        {service.ports && service.ports.length > 0 && service.ports.map((port, idx) => (
-          <div key={idx} className="flex items-center justify-between bg-gray-900/50 rounded p-2">
-            <span className="text-xs text-gray-400">{port.name || `Port ${idx + 1}`}:</span>
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-mono text-white">
-                {port.port} → {port.target_port} {port.protocol || 'TCP'}
-                {port.node_port && ` (NodePort: ${port.node_port})`}
-              </span>
-            </div>
-          </div>
-        ))}
-
-        {/* LoadBalancer Status */}
-        {service.loadBalancer?.ingress && service.loadBalancer.ingress.length > 0 && (
-          <div className="mt-2 p-2 bg-green-600/10 border border-green-500/30 rounded">
-            <p className="text-xs text-green-400 mb-2 font-medium">LoadBalancer Entries:</p>
-            {service.loadBalancer.ingress.map((ing, idx) => (
-              <div key={idx} className="flex items-center justify-between mb-1">
-                <span className="text-sm font-mono text-white">
-                  {ing.ip || ing.hostname}
-                </span>
-                <div className="flex items-center gap-2">
-                  {ing.ip && (
-                    <>
-                      <a
-                        href={`http://${ing.ip}:${service.ports?.[0]?.port || 80}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="p-1 hover:bg-gray-700 rounded transition"
-                        title="Open in browser"
-                      >
-                        <ExternalLink className="w-3 h-3 text-blue-400" />
-                      </a>
-                      <button
-                        onClick={() => copyToClipboard(ing.ip!, "IP")}
-                        className="p-1 hover:bg-gray-700 rounded transition"
-                      >
-                        {copiedText === ing.ip ? (
-                          <CheckCircle className="w-3 h-3 text-green-400" />
-                        ) : (
-                          <Copy className="w-3 h-3 text-gray-400" />
-                        )}
-                      </button>
-                    </>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  const renderIngress = (ingress: IngressEntry, index: number) => (
-    <div key={ingress.name || `ingress-${index}`} className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-3">
-      <div className="flex items-start justify-between">
-        <div>
-          <h4 className="text-sm font-semibold text-white">{ingress.name || `Ingress ${index + 1}`}</h4>
-          {ingress.class_name && (
-            <p className="text-xs text-gray-400 mt-1">Class: {ingress.class_name}</p>
-          )}
-        </div>
-        <Globe className="w-5 h-5 text-purple-400" />
-      </div>
-
-      <div className="space-y-2">
-        {ingress.rules?.map((rule, ruleIdx) => (
-          <div key={ruleIdx} className="bg-gray-900/50 rounded p-3 space-y-2">
-            {(() => {
-              const host = rule.host;
-              if (!host) return null;
-              return (
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm font-medium text-white">{host}</span>
-                <div className="flex items-center gap-2">
-                  <a
-                    href={`https://${host}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="p-1 hover:bg-gray-700 rounded transition"
-                  >
-                    <ExternalLink className="w-3 h-3 text-blue-400" />
-                  </a>
-                  <button
-                    onClick={() => copyToClipboard(host, "Host")}
-                    className="p-1 hover:bg-gray-700 rounded transition"
-                  >
-                    {copiedText === host ? (
-                      <CheckCircle className="w-3 h-3 text-green-400" />
-                    ) : (
-                      <Copy className="w-3 h-3 text-gray-400" />
-                    )}
-                  </button>
-                </div>
-              </div>
-              );
-            })()}
-            {rule.paths?.map((path, pathIdx) => {
-              const serviceName = path.backend?.service?.name || "service";
-              const servicePort = path.backend?.service?.port ?? "-";
-              return (
-                <div key={pathIdx} className="text-xs text-gray-400 ml-4">
-                  • {path.path || '/'} → {serviceName}:{servicePort}
-                </div>
-              );
-            })}
-          </div>
-        ))}
-
-        {ingress.tls && ingress.tls.length > 0 && (
-          <div className="mt-2 p-2 bg-blue-600/10 border border-blue-500/30 rounded">
-            <p className="text-xs text-blue-400 font-medium">🔒 TLS Enabled</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="bg-gray-900 border border-gray-700 rounded-lg max-w-4xl w-full max-h-[90vh] flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-700">
-          <div>
-            <h2 className="text-xl font-semibold text-white">Instance Entries</h2>
-            <p className="text-sm text-gray-400 mt-1">
-              {instance.name} ({instance.namespace})
-            </p>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 hover:bg-gray-800 rounded-lg transition"
-          >
-            <X className="w-5 h-5 text-gray-400" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-6">
-          {loading ? (
-            <div className="flex items-center justify-center py-12">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-              <span className="ml-3 text-gray-400">Loading entries...</span>
-            </div>
-          ) : error ? (
-            <div className="text-center py-12">
-              <p className="text-red-400">{error}</p>
-              <button
-                onClick={onClose}
-                className="mt-4 px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition"
-              >
-                Close
-              </button>
-            </div>
-          ) : entries ? (
-            <div className="space-y-6">
-              {/* Source Badge */}
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium text-gray-400">Data Source:</h3>
-                {getSourceBadge(entries.source)}
-              </div>
-
-              {/* Services */}
-              {entries.services && entries.services.length > 0 && (
-                <div>
-                  <div className="flex items-center gap-2 mb-3">
-                    <Network className="w-5 h-5 text-blue-400" />
-                    <h3 className="text-lg font-semibold text-white">
-                      Services ({entries.services.length})
-                    </h3>
-                  </div>
-                  <div className="space-y-3">
-                    {entries.services.map(renderService)}
-                  </div>
-                </div>
-              )}
-
-              {/* Ingresses */}
-              {entries.ingresses && entries.ingresses.length > 0 && (
-                <div>
-                  <div className="flex items-center gap-2 mb-3">
-                    <Globe className="w-5 h-5 text-purple-400" />
-                    <h3 className="text-lg font-semibold text-white">
-                      Ingresses ({entries.ingresses.length})
-                    </h3>
-                  </div>
-                  <div className="space-y-3">
-                    {entries.ingresses.map(renderIngress)}
-                  </div>
-                </div>
-              )}
-
-              {/* Helm Notes (as fallback) */}
-              {entries.notes && entries.source === "notes" && (
-                <div>
-                  <h3 className="text-lg font-semibold text-white mb-3">Helm Notes</h3>
-                  <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4">
-                    <pre className="text-xs text-gray-300 whitespace-pre-wrap font-mono">
-                      {entries.notes}
-                    </pre>
-                  </div>
-                </div>
-              )}
-
-              {/* Empty State */}
-              {(!entries.services || entries.services.length === 0) && 
-               (!entries.ingresses || entries.ingresses.length === 0) && 
-               !entries.notes && (
-                <div className="text-center py-12">
-                  <Network className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-                  <p className="text-gray-400">No entries found for this instance</p>
-                  <p className="text-xs text-gray-500 mt-2">Data source: {entries.source || 'unknown'}</p>
-                </div>
-              )}
-            </div>
-          ) : null}
-        </div>
-
-        {/* Footer */}
-        <div className="p-6 border-t border-gray-700 flex justify-end">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/frontend/src/features/artifact/instances/components/InstanceCard.tsx
+++ b/frontend/src/features/artifact/instances/components/InstanceCard.tsx
@ -1,326 +0,0 @@
-/**
- * Instance Card Component
- * Display instance information with action buttons
- */
-import React from "react";
-import {
-  Package,
-  Settings,
-  StopCircle,
-  RefreshCw,
-  CheckCircle,
-  XCircle,
-  Clock,
-  Network,
-  Box,
-  Calendar,
-  GitBranch,
-  Layers,
-  AlertTriangle,
-  History,
-  HelpCircle,
-} from "lucide-react";
-import type { InstanceResponse, InstanceStatus } from "@/api";
-import { INSTANCE_LAST_OPERATION, INSTANCE_STATUS } from "@/api";
-
-interface InstanceCardProps {
-  instance: InstanceResponse;
-  onModify: (instance: InstanceResponse) => void;
-  onTerminate: (instance: InstanceResponse) => void;
-  onRefresh: (instance: InstanceResponse) => void;
-  onViewEntries: (instance: InstanceResponse) => void;
-}
-
-type StatusVisual = {
-  icon: React.ComponentType<{ className?: string }>;
-  color: string;
-  bg: string;
-  glow: string;
-  label: string;
-  defaultReason: string;
-};
-
-const STATUS_INFO_MAP: Record<InstanceStatus, StatusVisual> = {
-  [INSTANCE_STATUS.deployed]: {
-    icon: CheckCircle,
-    color: "text-emerald-400",
-    bg: "bg-gradient-to-r from-emerald-500/20 to-green-500/20 border-emerald-500/40",
-    glow: "shadow-emerald-500/20",
-    label: "Deployed",
-    defaultReason: "Deployment completed successfully.",
-  },
-  [INSTANCE_STATUS.failed]: {
-    icon: XCircle,
-    color: "text-rose-400",
-    bg: "bg-gradient-to-r from-rose-500/20 to-red-500/20 border-rose-500/40",
-    glow: "shadow-rose-500/20",
-    label: "Failed",
-    defaultReason: "Last operation reported a failure.",
-  },
-  [INSTANCE_STATUS["pending-install"]]: {
-    icon: Clock,
-    color: "text-amber-400",
-    bg: "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border-amber-500/40",
-    glow: "shadow-amber-500/20",
-    label: "Pending Install",
-    defaultReason: "Installation is in progress.",
-  },
-  [INSTANCE_STATUS["pending-upgrade"]]: {
-    icon: Clock,
-    color: "text-amber-400",
-    bg: "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border-amber-500/40",
-    glow: "shadow-amber-500/20",
-    label: "Pending Upgrade",
-    defaultReason: "Upgrade is in progress.",
-  },
-  [INSTANCE_STATUS["pending-rollback"]]: {
-    icon: Clock,
-    color: "text-amber-400",
-    bg: "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border-amber-500/40",
-    glow: "shadow-amber-500/20",
-    label: "Pending Rollback",
-    defaultReason: "Rollback is in progress.",
-  },
-  [INSTANCE_STATUS["pending-delete"]]: {
-    icon: Clock,
-    color: "text-orange-400",
-    bg: "bg-gradient-to-r from-orange-500/20 to-red-500/20 border-orange-500/40",
-    glow: "shadow-orange-500/20",
-    label: "Pending Delete",
-    defaultReason: "Deletion is in progress.",
-  },
-  [INSTANCE_STATUS.superseded]: {
-    icon: History,
-    color: "text-indigo-300",
-    bg: "bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border-indigo-500/40",
-    glow: "shadow-indigo-500/20",
-    label: "Superseded",
-    defaultReason: "A newer revision has replaced this instance.",
-  },
-  [INSTANCE_STATUS.uninstalled]: {
-    icon: StopCircle,
-    color: "text-slate-300",
-    bg: "bg-gradient-to-r from-slate-500/20 to-gray-500/20 border-slate-500/40",
-    glow: "shadow-slate-500/20",
-    label: "Uninstalled",
-    defaultReason: "Instance has been removed from the cluster.",
-  },
-  [INSTANCE_STATUS.unknown]: {
-    icon: HelpCircle,
-    color: "text-slate-300",
-    bg: "bg-gradient-to-r from-slate-500/20 to-gray-500/20 border-slate-500/40",
-    glow: "shadow-slate-500/20",
-    label: "Unknown",
-    defaultReason: "Awaiting next state update.",
-  },
-};
-
-const LAST_OPERATION_LABELS: Record<string, string> = {
-  [INSTANCE_LAST_OPERATION.install]: "Install",
-  [INSTANCE_LAST_OPERATION.upgrade]: "Upgrade",
-  [INSTANCE_LAST_OPERATION.rollback]: "Rollback",
-  [INSTANCE_LAST_OPERATION.delete]: "Delete",
-  [INSTANCE_LAST_OPERATION.sync]: "Sync",
-};
-
-function toTitleCase(value: string): string {
-  return value
-    .split(/[\s-]+/)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(" ");
-}
-
-export const InstanceCard: React.FC<InstanceCardProps> = ({
-  instance,
-  onModify,
-  onTerminate,
-  onRefresh,
-  onViewEntries,
-}) => {
-  const normalizedStatus = (instance.status ?? INSTANCE_STATUS.unknown) as InstanceStatus;
-  const statusInfo =
-    STATUS_INFO_MAP[normalizedStatus] ?? STATUS_INFO_MAP[INSTANCE_STATUS.unknown];
-  const StatusIcon = statusInfo.icon;
-  const statusLabel = statusInfo.label.toUpperCase();
-  const instanceName = instance.name || "Unnamed Instance";
-  const repository = instance.repository || "unknown";
-  const version = instance.version || "latest";
-  const namespace = instance.namespace || "default";
-  const revision = instance.revision ?? "-";
-  const createdAtText = instance.createdAt
-    ? new Date(instance.createdAt).toLocaleDateString()
-    : "N/A";
-  const statusReason =
-    typeof instance.statusReason === "string" && instance.statusReason.trim().length > 0
-      ? instance.statusReason.trim()
-      : statusInfo.defaultReason;
-  const rawOperation =
-    typeof instance.lastOperation === "string" ? instance.lastOperation.trim() : "";
-  const lastOperationLabel =
-    rawOperation.length > 0
-      ? LAST_OPERATION_LABELS[rawOperation] ?? toTitleCase(rawOperation)
-      : null;
-  const lastError =
-    typeof instance.lastError === "string" ? instance.lastError.trim() : "";
-
-  return (
-    <div className="group relative bg-gradient-to-br from-slate-800/80 via-slate-800/50 to-slate-900/80 border border-slate-700/50 rounded-xl hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300 overflow-hidden">
-      {/* Decorative gradient overlay */}
-      <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/5 to-purple-500/5 rounded-full blur-3xl -z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-      
-      {/* Header with enhanced design */}
-      <div className="relative px-6 py-5 border-b border-slate-700/50 bg-gradient-to-r from-slate-800/30 to-transparent">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-4 flex-1">
-            {/* Enhanced icon with glow effect */}
-            <div className="relative p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-xl border border-blue-500/30 shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow duration-300">
-              <Box className="w-7 h-7 text-blue-400" />
-              <div className="absolute inset-0 bg-blue-400/10 rounded-xl blur-sm"></div>
-            </div>
-            
-            <div className="flex-1 min-w-0">
-              <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300 truncate">
-                {instanceName}
-              </h3>
-              <div className="flex items-center gap-2 mt-2">
-                <Package className="w-4 h-4 text-slate-400" />
-                <p className="text-sm text-slate-400 font-mono">
-                  {repository}
-                </p>
-                <span className="text-slate-600">•</span>
-                <span className="px-2 py-0.5 text-xs font-semibold text-cyan-400 bg-cyan-500/10 border border-cyan-500/30 rounded">
-                  {version}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Enhanced Status Badge with glow */}
-          <div
-            className={`flex items-center gap-2 px-4 py-2 rounded-full border shadow-lg ${statusInfo.bg} ${statusInfo.glow} backdrop-blur-sm`}
-          >
-            <StatusIcon className={`w-4 h-4 ${statusInfo.color}`} />
-            <span className={`text-sm font-semibold ${statusInfo.color} uppercase tracking-wide`}>
-              {statusLabel}
-            </span>
-          </div>
-        </div>
-
-        <div className="mt-4 flex flex-col gap-1 text-sm text-slate-300">
-          <span className="font-medium text-slate-200">{statusReason}</span>
-          {lastOperationLabel && (
-            <span className="text-xs uppercase tracking-wide text-slate-400">
-              Operation: {lastOperationLabel}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Enhanced Content Grid */}
-      <div className="relative px-6 py-5 space-y-4 bg-gradient-to-b from-transparent to-slate-900/30">
-        <div className="grid grid-cols-2 gap-4">
-          {/* Namespace */}
-          <div className="p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-purple-500/30 transition-colors">
-            <div className="flex items-center gap-2 mb-2">
-              <Layers className="w-4 h-4 text-purple-400" />
-              <p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Namespace</p>
-            </div>
-            <p className="text-sm font-bold text-white">
-              {namespace}
-            </p>
-          </div>
-          
-          {/* Revision */}
-          <div className="p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-green-500/30 transition-colors">
-            <div className="flex items-center gap-2 mb-2">
-              <GitBranch className="w-4 h-4 text-green-400" />
-              <p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Revision</p>
-            </div>
-            <p className="text-sm font-bold text-white">
-              {revision}
-            </p>
-          </div>
-          
-          {/* Repository - Full Width */}
-          <div className="col-span-2 p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-blue-500/30 transition-colors">
-            <div className="flex items-center gap-2 mb-2">
-              <Package className="w-4 h-4 text-blue-400" />
-              <p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Repository</p>
-            </div>
-            <p className="text-sm font-mono text-white truncate" title={repository}>
-              {repository}
-            </p>
-          </div>
-          
-          {/* Launched Date - Full Width */}
-          <div className="col-span-2 p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-amber-500/30 transition-colors">
-            <div className="flex items-center gap-2 mb-2">
-              <Calendar className="w-4 h-4 text-amber-400" />
-              <p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Launched</p>
-            </div>
-            <p className="text-sm font-bold text-white">
-              {createdAtText}
-            </p>
-          </div>
-        </div>
-
-        {lastError && (
-          <div className="flex items-start gap-3 p-4 border border-rose-500/30 bg-rose-500/10 rounded-lg">
-            <div className="p-2 bg-rose-500/20 rounded-lg border border-rose-500/40">
-              <AlertTriangle className="w-5 h-5 text-rose-300" />
-            </div>
-            <div>
-              <p className="text-sm font-semibold text-rose-200">Last error</p>
-              <p className="text-sm text-rose-100/90">{lastError}</p>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Enhanced Actions Bar */}
-      <div className="relative px-6 py-4 bg-gradient-to-r from-slate-900/80 via-slate-900/50 to-slate-900/80 border-t border-slate-700/50 backdrop-blur-sm">
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => onRefresh(instance)}
-              className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-slate-300 bg-slate-700/50 hover:bg-slate-600/50 rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg border border-slate-600/50 hover:border-slate-500"
-              title="Refresh status"
-            >
-              <RefreshCw className="w-4 h-4 group-hover/btn:rotate-180 transition-transform duration-500" />
-              Refresh
-            </button>
-
-            <button
-              onClick={() => onViewEntries(instance)}
-              className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-emerald-300 bg-gradient-to-r from-emerald-600/20 to-green-600/20 border border-emerald-500/40 rounded-lg hover:from-emerald-600/30 hover:to-green-600/30 hover:border-emerald-500/60 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/20"
-              title="View service entries"
-            >
-              <Network className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
-              Entries
-            </button>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => onModify(instance)}
-              className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-blue-300 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 border border-blue-500/40 rounded-lg hover:from-blue-600/30 hover:to-cyan-600/30 hover:border-blue-500/60 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/20"
-              title="Modify instance configuration"
-            >
-              <Settings className="w-4 h-4 group-hover/btn:rotate-90 transition-transform duration-300" />
-              Modify
-            </button>
-
-            <button
-              onClick={() => onTerminate(instance)}
-              className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-rose-300 bg-gradient-to-r from-rose-600/20 to-red-600/20 border border-rose-500/40 rounded-lg hover:from-rose-600/30 hover:to-red-600/30 hover:border-rose-500/60 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-rose-500/20"
-              title="Terminate instance"
-            >
-              <StopCircle className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
-              Terminate
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/frontend/src/features/artifact/instances/components/ModifyModal.tsx
+++ b/frontend/src/features/artifact/instances/components/ModifyModal.tsx
@ -1,326 +0,0 @@
-/**
- * Modify Modal Component
- * Modal for modifying an instance configuration
- * Supports Values Schema for dynamic form generation
- */
-import React, { useState, useEffect } from "react";
-import { Settings } from "lucide-react";
-import type { InstanceResponse, UpdateInstanceRequest } from "@/api";
-import { getValuesSchema } from "@/api";
-import { 
-  Modal, 
-  Button, 
-  FormField, 
-  Input, 
-  Textarea,
-  Checkbox, 
-  ErrorState,
-  LoadingState,
-  Badge,
-  SchemaFormGenerator
-} from "@/shared/components";
-import type { JsonSchema } from "@/shared/components/form/SchemaFormGenerator";
-
-interface ModifyModalProps {
-  instance: InstanceResponse;
-  onClose: () => void;
-  onConfirm: (clusterId: string, instanceId: string, data: UpdateInstanceRequest) => Promise<void>;
-}
-
-export const ModifyModal: React.FC<ModifyModalProps> = ({
-  instance,
-  onClose,
-  onConfirm,
-}) => {
-  const [tag, setTag] = useState("");
-  const [description, setDescription] = useState("");
-  const [valuesYaml, setValuesYaml] = useState("");
-  const [wait, setWait] = useState(true);
-  const [timeout, setTimeout_] = useState(300);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  
-  // Values Schema support
-  const [loadingSchema, setLoadingSchema] = useState(false);
-  const [valuesSchema, setValuesSchema] = useState<JsonSchema | null>(null);
-  const [inputMethod, setInputMethod] = useState<'form' | 'yaml'>('yaml');
-  const [formValues, setFormValues] = useState<Record<string, any>>({});
-
-  // Initialize with current values
-  useEffect(() => {
-    setTag(instance.version || "");
-    setDescription(""); // InstanceResponse doesn't have description field
-    
-    // Parse existing values
-    if (instance.values) {
-      try {
-        const parsedValues = typeof instance.values === 'string' 
-          ? JSON.parse(instance.values) 
-          : instance.values;
-        setFormValues(parsedValues);
-        setValuesYaml(typeof parsedValues === 'object' ? JSON.stringify(parsedValues, null, 2) : String(parsedValues));
-      } catch (err) {
-        console.error('[ModifyModal] Failed to parse existing values:', err);
-        setValuesYaml(String(instance.values) || "");
-      }
-    }
-
-    // Load values schema
-    loadValuesSchema();
-  }, [instance]);
-
-  const loadValuesSchema = async () => {
-    if (!instance.registryId || !instance.repository || !instance.version) {
-      setValuesSchema(null);
-      setInputMethod('yaml');
-      return;
-    }
-
-    setLoadingSchema(true);
-    try {
-      const schemaResponse = await getValuesSchema({ 
-        registryId: instance.registryId, 
-        repositoryName: instance.repository, 
-        reference: instance.version, 
-      });
-      const normalizedSchema = extractJsonSchema(schemaResponse);
-      setValuesSchema(normalizedSchema);
-      
-      if (normalizedSchema) {
-        setInputMethod('form');
-        console.log(`[ModifyModal] Loaded values schema with ${Object.keys(normalizedSchema.properties ?? {}).length} properties`);
-      } else {
-        setInputMethod('yaml');
-        console.log('[ModifyModal] No values schema available, using YAML input');
-      }
-    } catch (err) {
-      console.error('[ModifyModal] Failed to load values schema:', err);
-      setValuesSchema(null);
-      setInputMethod('yaml');
-    } finally {
-      setLoadingSchema(false);
-    }
-  };
-
-  const handleFormValuesChange = (values: Record<string, any>) => {
-    setFormValues(values);
-    // Also update YAML representation
-    setValuesYaml(JSON.stringify(values, null, 2));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-
-    try {
-      const payload: UpdateInstanceRequest = {
-        version: tag && tag !== instance.version ? tag : undefined,
-        values: valuesYaml.trim() ? JSON.parse(valuesYaml) : undefined,
-      };
-
-      if (!instance.clusterId || !instance.id) {
-        setError("Instance identifier is missing");
-        setLoading(false);
-        return;
-      }
-
-      await onConfirm(instance.clusterId, instance.id, payload);
-      onClose();
-    } catch (err: unknown) {
-      if (err instanceof SyntaxError) {
-        setError("Invalid JSON/YAML values. Please fix the configuration.");
-      } else {
-        setError((err as Error).message || "Failed to modify instance");
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Modal
-      open={true}
-      onClose={onClose}
-      title={`Modify Instance - ${instance.name || "Unnamed"}`}
-      icon={Settings}
-      iconColor="text-blue-400"
-      size="lg"
-      footer={
-        <>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={onClose}
-            disabled={loading}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            variant="primary"
-            icon={Settings}
-            loading={loading}
-            onClick={handleSubmit}
-          >
-            {loading ? "Modifying..." : "Modify"}
-          </Button>
-        </>
-      }
-    >
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {/* Error Alert */}
-        {error && (
-          <ErrorState message={error} title="Modification Failed" />
-        )}
-
-        {/* Current Info */}
-        <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-2">
-          <p className="text-sm text-gray-300">
-            <span className="font-medium text-white">Current Version:</span> {instance.version || "N/A"}
-          </p>
-          <p className="text-sm text-gray-300">
-            <span className="font-medium text-white">Cluster:</span> {instance.clusterId || "N/A"}
-          </p>
-          <p className="text-sm text-gray-300">
-            <span className="font-medium text-white">Repository:</span> {instance.repository || "N/A"}
-          </p>
-        </div>
-
-        {/* Tag */}
-        <FormField
-          label="Version Tag"
-          required
-          help="Leave unchanged to keep current version"
-        >
-          <Input
-            type="text"
-            value={tag}
-            onChange={(e) => setTag(e.target.value)}
-            placeholder="e.g., v1.0.0"
-            required
-          />
-        </FormField>
-
-        {/* Description */}
-        <FormField label="Description">
-          <Input
-            type="text"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            placeholder="Modification description"
-          />
-        </FormField>
-
-        {/* Values Configuration */}
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <label className="block text-sm font-medium text-gray-200">
-              Configuration Values
-            </label>
-            {valuesSchema?.properties && (
-              <div className="flex gap-2">
-                <button
-                  onClick={() => setInputMethod('form')}
-                  className="cursor-pointer"
-                >
-                  <Badge
-                    variant={inputMethod === 'form' ? 'success' : 'default'}
-                    size="sm"
-                  >
-                    Form
-                  </Badge>
-                </button>
-                <button
-                  onClick={() => setInputMethod('yaml')}
-                  className="cursor-pointer"
-                >
-                  <Badge
-                    variant={inputMethod === 'yaml' ? 'success' : 'default'}
-                    size="sm"
-                  >
-                    YAML
-                  </Badge>
-                </button>
-              </div>
-            )}
-          </div>
-
-          {loadingSchema ? (
-            <LoadingState message="Loading configuration schema..." />
-          ) : inputMethod === 'form' && valuesSchema ? (
-            <SchemaFormGenerator
-              schema={valuesSchema}
-              values={formValues}
-              onChange={handleFormValuesChange}
-            />
-          ) : (
-            <Textarea
-              value={valuesYaml}
-              onChange={(e) => setValuesYaml(e.target.value)}
-              rows={12}
-              placeholder="key: value&#10;nested:&#10;  key: value"
-              className="font-mono text-sm"
-            />
-          )}
-        </div>
-
-        {/* Options */}
-        <div className="space-y-3">
-          <Checkbox
-            id="wait"
-            checked={wait}
-            onChange={(e) => setWait(e.target.checked)}
-            label="Wait for all resources to be ready"
-          />
-
-          <FormField label="Timeout (seconds)">
-            <Input
-              type="number"
-              value={timeout}
-              onChange={(e) => setTimeout_(parseInt(e.target.value) || 300)}
-              min={60}
-              max={3600}
-            />
-          </FormField>
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-const isJsonSchemaObject = (value: unknown): value is JsonSchema =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
-
-const extractJsonSchema = (schemaResponse: unknown): JsonSchema | null => {
-  if (schemaResponse == null) {
-    return null;
-  }
-
-  const tryParse = (value: unknown): unknown => {
-    if (typeof value === "string") {
-      try {
-        return JSON.parse(value);
-      } catch {
-        return null;
-      }
-    }
-    return value;
-  };
-
-  let candidate: unknown = tryParse(schemaResponse);
-
-  if (candidate && typeof candidate === "object" && "schema" in (candidate as Record<string, unknown>)) {
-    const inner = (candidate as { schema?: unknown }).schema;
-    const normalizedInner = extractJsonSchema(inner);
-    if (normalizedInner) {
-      return normalizedInner;
-    }
-  }
-
-  if (isJsonSchemaObject(candidate)) {
-    return candidate as JsonSchema;
-  }
-
-  return null;
-};
--- a/frontend/src/features/artifact/instances/index.ts
+++ b/frontend/src/features/artifact/instances/index.ts
@ -1,12 +0,0 @@
-/**
- * Service Instances Feature
- * 服务实例管理功能
- */
-
-// Export pages
-export { default as InstancesManagementPage } from './pages/InstancesManagementPage';
-
-// Export components
-export { InstanceCard } from './components/InstanceCard';
-export { ModifyModal } from './components/ModifyModal';
-
--- a/frontend/src/features/artifact/instances/pages/InstancesManagementPage.tsx
+++ b/frontend/src/features/artifact/instances/pages/InstancesManagementPage.tsx
@ -1,611 +0,0 @@
-/**
- * Instances Management Page
- * Display and manage all Helm instances across clusters
- */
-import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
-import { Package, RefreshCw, Boxes, Server } from "lucide-react";
-import { listClusters, listInstances, deleteInstance, updateInstance } from "@/api";
-import type { ClusterResponse, InstanceResponse, UpdateInstanceRequest } from "@/api";
-import type { Cluster, Instance } from "@/core/types";
-import {
-  PageHeader,
-  DropdownSelect,
-  Button,
-  LoadingState,
-  ErrorState,
-  EmptyState,
-} from "@/shared/components";
-import { useToast } from "@/shared";
-import { InstanceErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-import { InstanceCard } from "../components/InstanceCard";
-import { ModifyModal } from "../components/ModifyModal";
-import { EntriesModal } from "../components/EntriesModal";
-import { globalCache } from "@/shared/services/artifact-cache";
-
-const AUTO_REFRESH_INTERVAL_MS = 30000;
-
-type LoadDataMode = "initial" | "manual" | "auto";
-
-interface LoadDataOptions {
-  skipCache?: boolean;
-  mode?: LoadDataMode;
-}
-
-const InstancesManagementPage: React.FC = () => {
-  const { success, error: toastError, info: toastInfo } = useToast();
-
-  const [clusters, setClusters] = useState<ClusterResponse[]>([]);
-  const [instancesByCluster, setInstancesByCluster] = useState<
-    Map<string, InstanceResponse[]>
-  >(new Map());
-  const [instanceTotals, setInstanceTotals] = useState<Map<string, number>>(new Map());
-  const [selectedCluster, setSelectedCluster] = useState<string>("all");
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Modals
-  const [modifyInstance, setModifyInstance] = useState<Instance | null>(null);
-  const [entriesInstance, setEntriesInstance] = useState<Instance | null>(null);
-
-  // 核心数据加载函数 - 使用全局缓存
-  const loadDataCore = useCallback(async (options: LoadDataOptions = {}) => {
-    const { skipCache = false, mode = "initial" } = options;
-    const shouldShowLoading = mode === "initial";
-    const shouldShowRefreshing = mode === "manual";
-
-    if (shouldShowRefreshing) {
-      setRefreshing(true);
-    } else if (shouldShowLoading) {
-      setLoading(true);
-    }
-    setError(null);
-    try {
-      // Load clusters with cache
-      let clustersData: ClusterResponse[];
-      if (!skipCache) {
-        const cachedClusters = globalCache.get<ClusterResponse[]>('clusters');
-        if (cachedClusters) {
-          console.log('[InstancesManagementPage] Using cached clusters');
-          clustersData = cachedClusters;
-        } else {
-          clustersData = await listClusters();
-          globalCache.set('clusters', clustersData);
-        }
-      } else {
-        clustersData = await listClusters();
-        globalCache.set('clusters', clustersData);
-      }
-      const validClusters = clustersData.filter(
-        (cluster): cluster is ClusterResponse & { id: string } =>
-          typeof cluster.id === "string" && cluster.id.length > 0
-      );
-      setClusters(validClusters);
-
-      // Load instances for each cluster with cache
-      const instancesMap = new Map<string, InstanceResponse[]>();
-      const totalsMap = new Map<string, number>();
-      for (const cluster of validClusters) {
-        const clusterId = cluster.id;
-        try {
-          let normalized: NormalizedInstanceList;
-          if (!skipCache) {
-            const cachedInstances = globalCache.get<unknown>('instances', clusterId);
-            if (cachedInstances) {
-              normalized = normalizeInstanceList(cachedInstances);
-              console.log(`[InstancesManagementPage] Using cached instances for ${cluster.name}`);
-              if (!isNormalizedInstanceList(cachedInstances)) {
-                globalCache.set('instances', normalized, clusterId);
-              }
-            } else {
-              normalized = await fetchClusterInstances(clusterId);
-            }
-          } else {
-            normalized = await fetchClusterInstances(clusterId);
-          }
-          instancesMap.set(clusterId, normalized.instances);
-          totalsMap.set(clusterId, normalized.total);
-        } catch (err) {
-          console.error(`Failed to load instances for cluster ${cluster.name}:`, err);
-          instancesMap.set(clusterId, []);
-          totalsMap.set(clusterId, 0);
-        }
-      }
-      setInstancesByCluster(instancesMap);
-      setInstanceTotals(totalsMap);
-      return null; // 成功返回 null
-    } catch (err: unknown) {
-      const errorMsg = (err as Error).message || "Failed to load data";
-      setError(errorMsg);
-      return errorMsg; // 返回错误消息
-    } finally {
-      if (shouldShowRefreshing) {
-        setRefreshing(false);
-      } else if (shouldShowLoading) {
-        setLoading(false);
-      }
-    }
-  }, []); // 没有任何依赖！
-
-  // 初始加载 - 只执行一次
-  useEffect(() => {
-    let mounted = true;
-    
-    const init = async () => {
-      const error = await loadDataCore({ skipCache: false, mode: "initial" });
-      if (mounted && error) {
-        toastError(error);
-      }
-    };
-    
-    init();
-    
-    return () => {
-      mounted = false;
-    };
-  }, [loadDataCore, toastError]); // loadDataCore 永远不会变化
-  
-  // 手动刷新函数 - 带 toast 提示，清除缓存
-  const loadData = useCallback(async () => {
-    toastInfo("Refreshing instances...", {
-      title: "Instances Refresh",
-      durationMs: 1800,
-      mergeKey: "instances-refresh",
-    });
-    globalCache.clearType("instances");
-    const error = await loadDataCore({ skipCache: true, mode: "manual" }); // manual refresh mode
-    if (error) {
-      toastError(error);
-    } else {
-      success(SuccessMessages.DATA_REFRESHED);
-    }
-  }, [loadDataCore, toastError, toastInfo, success]);
-
-  const autoRefreshInFlight = useRef(false);
-
-  const autoRefresh = useCallback(async () => {
-    if (loading || refreshing || autoRefreshInFlight.current) {
-      return;
-    }
-
-    autoRefreshInFlight.current = true;
-    const error = await loadDataCore({ skipCache: true, mode: "auto" });
-    if (error) {
-      console.warn("[InstancesManagementPage] Auto refresh failed:", error);
-    }
-    autoRefreshInFlight.current = false;
-  }, [loading, refreshing, loadDataCore]);
-
-  useEffect(() => {
-    const intervalId = window.setInterval(() => {
-      void autoRefresh();
-    }, AUTO_REFRESH_INTERVAL_MS);
-
-    return () => {
-      window.clearInterval(intervalId);
-    };
-  }, [autoRefresh]);
-
-  const handleRefresh = useCallback(async (instance: Instance) => {
-    const clusterId = instance.clusterId;
-    if (!clusterId) {
-      toastError("Cluster ID is missing");
-      return;
-    }
-
-    toastInfo(`Refreshing status for "${instance.name || "instance"}"...`, {
-      title: "Instance Status",
-      durationMs: 1800,
-      mergeKey: `instance-refresh-${instance.id || clusterId}`,
-    });
-
-    try {
-      const normalized = await fetchClusterInstances(clusterId);
-      setInstancesByCluster((prev) => {
-        const next = new Map(prev);
-        next.set(clusterId, normalized.instances);
-        return next;
-      });
-      setInstanceTotals((prev) => {
-        const next = new Map(prev);
-        next.set(clusterId, normalized.total);
-        return next;
-      });
-      success(SuccessMessages.INSTANCE_STATUS_REFRESHED);
-    } catch (err: unknown) {
-      toastError(formatApiError(err) || InstanceErrors.STATUS_FETCH_FAILED);
-    }
-  }, [success, toastError, toastInfo]);
-
-  const handleModify = useCallback((instance: Instance) => {
-    setModifyInstance(instance);
-  }, []);
-
-  const handleViewEntries = useCallback((instance: Instance) => {
-    setEntriesInstance(instance);
-  }, []);
-
-  const handleModifyConfirm = useCallback(async (
-    clusterId: string,
-    instanceId: string,
-    data: UpdateInstanceRequest
-  ) => {
-    toastInfo("Applying instance update...", {
-      title: "Update Instance",
-      durationMs: 1800,
-      mergeKey: `instance-update-${instanceId}`,
-    });
-    try {
-      await updateInstance({ clusterId, instanceId }, data);
-      success(SuccessMessages.INSTANCE_UPGRADED);
-      await loadData();
-    } catch (err: unknown) {
-      const errorMsg = formatApiError(err) || InstanceErrors.UPDATE_FAILED;
-      toastError(errorMsg);
-      throw new Error(errorMsg);
-    }
-  }, [toastInfo, success, loadData, toastError]);
-
-  const handleTerminate = useCallback(async (instance: Instance) => {
-    if (
-      !confirm(
-        `Are you sure you want to terminate instance "${instance.name}"? This action cannot be undone.`
-      )
-    ) {
-      return;
-    }
-
-    if (!instance.clusterId || !instance.id) {
-      toastError("Instance ID or Cluster ID is missing");
-      return;
-    }
-
-    try {
-      toastInfo(`Terminating "${instance.name || "instance"}"...`, {
-        title: "Terminate Instance",
-        durationMs: 1800,
-        mergeKey: `instance-terminate-${instance.id || instance.clusterId}`,
-      });
-      await deleteInstance({ clusterId: instance.clusterId, instanceId: instance.id });
-      success(SuccessMessages.INSTANCE_DELETED);
-      await loadData();
-    } catch (err: unknown) {
-      toastError(formatApiError(err) || InstanceErrors.DELETE_FAILED);
-    }
-  }, [success, toastError, loadData, toastInfo]);
-
-  // Get filtered instances - memoized to avoid recalculation on every render
-  const filteredInstances = useMemo((): Array<{ cluster: Cluster; instance: Instance }> => {
-    const result: Array<{ cluster: Cluster; instance: Instance }> = [];
-
-    clusters.forEach((cluster) => {
-      const clusterId = cluster.id;
-      if (!clusterId) {
-        return;
-      }
-      if (selectedCluster !== "all" && clusterId !== selectedCluster) {
-        return;
-      }
-
-      const instances = instancesByCluster.get(clusterId) || [];
-      instances.forEach((instance) => {
-        result.push({ cluster, instance });
-      });
-    });
-
-    return result;
-  }, [clusters, selectedCluster, instancesByCluster]);
-
-  // Calculate total instances - memoized
-  const totalInstances = useMemo(() => {
-    if (instanceTotals.size > 0) {
-      return Array.from(instanceTotals.values()).reduce((sum, total) => sum + total, 0);
-    }
-    return Array.from(instancesByCluster.values()).reduce(
-      (sum, instances) => sum + instances.length,
-      0
-    );
-  }, [instanceTotals, instancesByCluster]);
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <PageHeader
-        title="Artifact - Instances"
-        description="Manage service instances across clusters"
-        icon={Boxes}
-        iconColor="text-green-400"
-        actions={
-          <Button
-            variant="secondary"
-            icon={RefreshCw}
-            onClick={loadData}
-            loading={refreshing}
-            spinIcon={true}
-          >
-            Refresh
-          </Button>
-        }
-      />
-
-      {/* Enhanced Stats with gradient cards */}
-      {!loading && clusters.length > 0 && (
-        <div className={`grid grid-cols-1 gap-5 mb-8 ${
-          clusters.length > 1 ? 'md:grid-cols-3' : 'md:grid-cols-2'
-        }`}>
-          <div className="relative group overflow-hidden bg-gradient-to-br from-blue-900/40 via-blue-800/30 to-blue-900/40 border border-blue-500/30 rounded-xl p-6 hover:border-blue-400/50 hover:shadow-xl hover:shadow-blue-500/20 transition-all duration-300">
-            <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-all"></div>
-            <div className="relative flex items-center justify-between">
-              <div>
-                <p className="text-sm font-semibold text-blue-300 uppercase tracking-wider mb-2">Total Instances</p>
-                <p className="text-4xl font-bold text-white">{totalInstances}</p>
-              </div>
-              <div className="p-4 bg-blue-500/20 rounded-xl border border-blue-400/30 shadow-lg shadow-blue-500/30">
-                <Package className="w-8 h-8 text-blue-400" />
-              </div>
-            </div>
-          </div>
-          
-          <div className="relative group overflow-hidden bg-gradient-to-br from-emerald-900/40 via-emerald-800/30 to-green-900/40 border border-emerald-500/30 rounded-xl p-6 hover:border-emerald-400/50 hover:shadow-xl hover:shadow-emerald-500/20 transition-all duration-300">
-            <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl group-hover:bg-emerald-500/20 transition-all"></div>
-            <div className="relative flex items-center justify-between">
-              <div>
-                <p className="text-sm font-semibold text-emerald-300 uppercase tracking-wider mb-2">Clusters</p>
-                <p className="text-4xl font-bold text-white">{clusters.length}</p>
-              </div>
-              <div className="p-4 bg-emerald-500/20 rounded-xl border border-emerald-400/30 shadow-lg shadow-emerald-500/30">
-                <Server className="w-8 h-8 text-emerald-400" />
-              </div>
-            </div>
-          </div>
-          
-          {/* Only show Filtered when there are multiple clusters */}
-          {clusters.length > 1 && (
-            <div className="relative group overflow-hidden bg-gradient-to-br from-purple-900/40 via-purple-800/30 to-purple-900/40 border border-purple-500/30 rounded-xl p-6 hover:border-purple-400/50 hover:shadow-xl hover:shadow-purple-500/20 transition-all duration-300">
-              <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl group-hover:bg-purple-500/20 transition-all"></div>
-              <div className="relative flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-semibold text-purple-300 uppercase tracking-wider mb-2">Showing</p>
-                  <p className="text-4xl font-bold text-white">{filteredInstances.length}</p>
-                </div>
-                <div className="p-4 bg-purple-500/20 rounded-xl border border-purple-400/30 shadow-lg shadow-purple-500/30">
-                  <Boxes className="w-8 h-8 text-purple-400" />
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Enhanced Filters */}
-      {clusters.length > 1 && (
-        <div className="mb-6 p-5 bg-gradient-to-r from-slate-800/50 via-slate-800/30 to-slate-800/50 border border-slate-700/50 rounded-xl">
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg border border-cyan-500/30">
-                <Server className="w-5 h-5 text-cyan-400" />
-              </div>
-              <label className="text-sm font-semibold text-slate-300">
-                Filter by Cluster:
-              </label>
-            </div>
-            <DropdownSelect
-              value={selectedCluster}
-              onChange={(value) => setSelectedCluster(value)}
-              options={[
-                { value: "all", label: "All Clusters" },
-                ...clusters
-                  .filter((cluster): cluster is ClusterResponse & { id: string } => Boolean(cluster.id))
-                  .map((cluster) => {
-                    const instanceCount = instancesByCluster.get(cluster.id)?.length || 0;
-                    return {
-                      value: cluster.id,
-                      label: `${cluster.name || 'Unknown'} (${instanceCount} instances)`,
-                    };
-                  }),
-              ]}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Content */}
-      <div>
-        {loading ? (
-          <LoadingState message="Loading instances..." />
-        ) : error ? (
-          <ErrorState
-            message={error}
-            onRetry={loadData}
-          />
-        ) : filteredInstances.length === 0 ? (
-          <EmptyState
-            icon={Package}
-            title="No instances found"
-            description="Launch your first service instance from Artifact Registries"
-          />
-        ) : (
-          <div className="space-y-6">
-            {/* Group by cluster if showing all */}
-            {selectedCluster === "all" ? (
-              clusters.map((cluster, index) => {
-                const clusterId = cluster.id;
-                if (!clusterId) return null;
-                const instances = instancesByCluster.get(clusterId) || [];
-                if (instances.length === 0) return null;
-
-                return (
-                  <div key={clusterId || `cluster-${index}`} className="mb-8">
-                    <div className="flex items-center gap-3 mb-5">
-                      <div className="p-2.5 bg-gradient-to-br from-emerald-500/20 to-green-500/20 rounded-lg border border-emerald-500/30 shadow-lg shadow-emerald-500/10">
-                        <Server className="w-5 h-5 text-emerald-400" />
-                      </div>
-                      <div>
-                        <h2 className="text-xl font-bold text-white">
-                          {cluster.name || "Unnamed Cluster"}
-                        </h2>
-                        <p className="text-sm text-slate-400 mt-0.5">
-                          {instances.length} {instances.length === 1 ? 'instance' : 'instances'} running
-                        </p>
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                      {instances.map((instance) => (
-                        <InstanceCard
-                          key={instance.id}
-                          instance={instance}
-                          onModify={handleModify}
-                          onTerminate={handleTerminate}
-                          onRefresh={handleRefresh}
-                          onViewEntries={handleViewEntries}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                );
-              })
-            ) : (
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {filteredInstances.map(({ instance }) => (
-                <InstanceCard
-                  key={instance.id}
-                  instance={instance}
-                  onModify={handleModify}
-                  onTerminate={handleTerminate}
-                  onRefresh={handleRefresh}
-                  onViewEntries={handleViewEntries}
-                />
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Modals */}
-      {modifyInstance && (
-        <ModifyModal
-          instance={modifyInstance}
-          onClose={() => setModifyInstance(null)}
-          onConfirm={handleModifyConfirm}
-        />
-      )}
-
-      {entriesInstance && (
-        <EntriesModal
-          instance={entriesInstance}
-          onClose={() => setEntriesInstance(null)}
-        />
-      )}
-    </div>
-  );
-};
-
-export default InstancesManagementPage;
-
-async function fetchClusterInstances(clusterId: string): Promise<NormalizedInstanceList> {
-  const response = await listInstances({ clusterId });
-  const normalized = normalizeInstanceList(response);
-  globalCache.set('instances', normalized, clusterId);
-  return normalized;
-}
-
-function normalizeInstanceList(raw: unknown): NormalizedInstanceList {
-  if (Array.isArray(raw)) {
-    return {
-      instances: raw as InstanceResponse[],
-      total: raw.length,
-    };
-  }
-
-  if (raw && typeof raw === "object") {
-    const payload = raw as InstanceListPayloadWithMeta;
-    const direct = extractInstancesFromPayload(payload);
-    if (direct) {
-      return direct;
-    }
-
-    if (payload.data !== undefined) {
-      const nested = normalizeInstanceList(payload.data);
-      return {
-        instances: nested.instances,
-        total: pickTotalValue(payload.total, payload.meta, nested.total),
-      };
-    }
-  }
-
-  return { instances: [], total: 0 };
-}
-
-function extractInstancesFromPayload(payload: InstanceListPayloadWithMeta): NormalizedInstanceList | null {
-  if (Array.isArray(payload.instances)) {
-    const instances = payload.instances as InstanceResponse[];
-    return {
-      instances,
-      total: pickTotalValue(payload.total, payload.meta, instances.length),
-    };
-  }
-
-  if (Array.isArray(payload.items)) {
-    const instances = payload.items as InstanceResponse[];
-    return {
-      instances,
-      total: pickTotalValue(payload.total, payload.meta, instances.length),
-    };
-  }
-
-  if (payload.data && typeof payload.data === "object") {
-    return extractInstancesFromPayload(payload.data as InstanceListPayloadWithMeta);
-  }
-
-  return null;
-}
-
-function pickTotalValue(totalValue: unknown, metaValue: unknown, fallback: number): number {
-  if (typeof totalValue === "number" && Number.isFinite(totalValue)) {
-    return totalValue;
-  }
-
-  const metaTotal = getMetaTotal(metaValue);
-  if (typeof metaTotal === "number") {
-    return metaTotal;
-  }
-
-  return fallback;
-}
-
-function getMetaTotal(metaValue: unknown): number | undefined {
-  if (metaValue && typeof metaValue === "object") {
-    const meta = metaValue as Record<string, unknown>;
-    if (typeof meta.total === "number") {
-      return meta.total;
-    }
-    if (typeof meta.count === "number") {
-      return meta.count;
-    }
-  }
-
-  return undefined;
-}
-
-function isNormalizedInstanceList(data: unknown): data is NormalizedInstanceList {
-  return (
-    !!data &&
-    typeof data === "object" &&
-    Array.isArray((data as NormalizedInstanceList).instances) &&
-    typeof (data as NormalizedInstanceList).total === "number"
-  );
-}
-
-type InstanceListPayloadWithMeta = {
-  instances?: unknown;
-  items?: unknown;
-  data?: unknown;
-  total?: unknown;
-  meta?: unknown;
-};
-
-interface NormalizedInstanceList {
-  instances: InstanceResponse[];
-  total: number;
-}
--- a/frontend/src/features/artifact/registries/components/LaunchModal.tsx
+++ b/frontend/src/features/artifact/registries/components/LaunchModal.tsx
@ -1,396 +0,0 @@
-/**
- * Launch Modal Component
- * Launch service instance from artifact
- * Supports Values Schema for dynamic form generation
- */
-import React, { useState, useEffect } from "react";
-import { Rocket, AlertCircle, FileCode, FormInput } from "lucide-react";
-import { useToast } from "@/shared";
-import { createInstance, listClusters, getValuesSchema } from "@/api";
-import type { CreateInstanceRequest, ClusterResponse } from "@/api";
-import { ClusterErrors, InstanceErrors, SuccessMessages, ValidationErrors, formatApiError } from "@/shared/utils";
-import { 
-  Modal, 
-  Button, 
-  FormField, 
-  Input, 
-  DropdownSelect,
-  Textarea,
-  LoadingState,
-  Badge,
-  SchemaFormGenerator
-} from "@/shared/components";
-import type { ArtifactCategory } from "../utils/artifactType";
-import type { JsonSchema } from "@/shared/components/form/SchemaFormGenerator";
-
-interface LaunchModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  registryId: string;
-  repositoryName: string;
-  tag: string;
-  artifactType: ArtifactCategory;
-}
-
-export const LaunchModal: React.FC<LaunchModalProps> = ({
-  isOpen,
-  onClose,
-  registryId,
-  repositoryName,
-  tag,
-  artifactType,
-}) => {
-  const { success, error: toastError, info: toastInfo } = useToast();
-  
-  const [clusters, setClusters] = useState<ClusterResponse[]>([]);
-  const [loadingClusters, setLoadingClusters] = useState(false);
-  
-  // Form fields
-  const [clusterId, setClusterId] = useState("");
-  const [namespace, setNamespace] = useState("default");
-  const [instanceName, setInstanceName] = useState("");
-  const [description, setDescription] = useState("");
-  
-  // Values Schema support
-  const [valuesSchema, setValuesSchema] = useState<JsonSchema | null>(null);
-  const [loadingSchema, setLoadingSchema] = useState(false);
-  const [inputMethod, setInputMethod] = useState<'form' | 'yaml'>('yaml');
-  const [valuesForm, setValuesForm] = useState<Record<string, any>>({});
-  const [valuesYaml, setValuesYaml] = useState("");
-
-  // Load clusters and schema on mount
-  useEffect(() => {
-    if (isOpen) {
-      loadClusters();
-      loadValuesSchema();
-    }
-  }, [isOpen, registryId, repositoryName, tag]);
-
-  const loadClusters = async () => {
-    setLoadingClusters(true);
-    try {
-      const data = await listClusters();
-      setClusters(data);
-      const firstWithId = data.find((cluster) => typeof cluster.id === "string" && cluster.id.length > 0);
-      if (firstWithId?.id) {
-        setClusterId(firstWithId.id);
-      } else {
-        setClusterId("");
-      }
-    } catch (err) {
-      toastError(formatApiError(err) || ClusterErrors.LOAD_FAILED);
-      console.error(err);
-    } finally {
-      setLoadingClusters(false);
-    }
-  };
-
-  const loadValuesSchema = async () => {
-    setLoadingSchema(true);
-    try {
-      const schemaResponse = await getValuesSchema({ registryId, repositoryName, reference: tag });
-      const normalizedSchema = extractJsonSchema(schemaResponse);
-      setValuesSchema(normalizedSchema);
-      
-      if (normalizedSchema) {
-        setInputMethod('form');
-        console.log(`[LaunchModal] Loaded values schema with ${Object.keys(normalizedSchema.properties ?? {}).length} properties`);
-      } else {
-        setInputMethod('yaml');
-        console.log('[LaunchModal] No values schema available, using YAML input');
-      }
-    } catch (err) {
-      console.error('[LaunchModal] Failed to load values schema:', err);
-      setValuesSchema(null);
-      setInputMethod('yaml');
-    } finally {
-      setLoadingSchema(false);
-    }
-  };
-
-  const resetFormState = () => {
-    setInstanceName("");
-    setDescription("");
-    setValuesYaml("");
-    setValuesForm({});
-    setNamespace("default");
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!clusterId) {
-      toastError(ValidationErrors.REQUIRED_FIELD("Cluster"));
-      return;
-    }
-
-    if (!instanceName.trim()) {
-      toastError(ValidationErrors.REQUIRED_FIELD("Instance name"));
-      return;
-    }
-
-    if (!namespace.trim()) {
-      toastError(ValidationErrors.REQUIRED_FIELD("Namespace"));
-      return;
-    }
-
-    let valuesObj: Record<string, any> = {};
-    if (inputMethod === "form" && Object.keys(valuesForm).length > 0) {
-      valuesObj = valuesForm;
-    } else if (valuesYaml.trim()) {
-      try {
-        valuesObj = JSON.parse(valuesYaml.trim());
-      } catch {
-        toastError("Invalid YAML format. Please check your values.");
-        return;
-      }
-    }
-
-    const request: CreateInstanceRequest = {
-      name: instanceName.trim(),
-      namespace: namespace.trim(),
-      registryId,
-      repository: repositoryName,
-      tag,
-      ...(Object.keys(valuesObj).length > 0 ? { values: valuesObj } : {}),
-    };
-
-    toastInfo("Launching instance...", {
-      title: "Launch Instance",
-      durationMs: 1800,
-      mergeKey: `instance-launch-${registryId}-${repositoryName}-${tag}`,
-    });
-
-    resetFormState();
-    onClose();
-
-    createInstance({ clusterId }, request)
-      .then(() => {
-        success(SuccessMessages.INSTANCE_DEPLOYED);
-      })
-      .catch((err) => {
-        toastError(formatApiError(err) || InstanceErrors.DEPLOY_FAILED);
-        console.error(err);
-      });
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <Modal
-      open={isOpen}
-      onClose={onClose}
-      title="Launch Instance"
-      icon={Rocket}
-      iconColor="text-green-400"
-      size="lg"
-      footer={
-        <>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={onClose}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            variant="success"
-            icon={Rocket}
-            onClick={handleSubmit}
-            disabled={clusters.length === 0}
-          >
-            Launch
-          </Button>
-        </>
-      }
-    >
-      <div className="space-y-1 mb-4">
-        <p className="text-sm text-gray-400">
-          {repositoryName}:{tag}
-        </p>
-      </div>
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Cluster Selection */}
-          <FormField label="Target Cluster" required>
-            {loadingClusters ? (
-              <div className="text-sm text-gray-500">Loading clusters...</div>
-            ) : clusters.length === 0 ? (
-              <div className="flex items-center gap-2 p-3 bg-yellow-900/20 border border-yellow-700/50 rounded-lg text-yellow-300 text-sm">
-                <AlertCircle className="w-4 h-4" />
-                <span>No clusters available. Please add a cluster first.</span>
-              </div>
-            ) : (
-              <DropdownSelect
-                value={clusterId}
-                onChange={(value) => setClusterId(value)}
-                options={clusters
-                  .filter((cluster): cluster is ClusterResponse & { id: string } => Boolean(cluster.id))
-                  .map((cluster) => ({
-                    value: cluster.id,
-                    label: cluster.name || cluster.id,
-                  }))}
-                placeholder="Select a cluster"
-                required
-              />
-            )}
-          </FormField>
-
-          {/* Instance Name */}
-          <FormField
-            label="Instance Name"
-            required
-            help="Lowercase alphanumeric characters, '-' or '.'"
-          >
-            <Input
-              type="text"
-              value={instanceName}
-              onChange={(e) => setInstanceName(e.target.value)}
-              placeholder="my-app"
-              required
-            />
-          </FormField>
-
-          {/* Namespace */}
-          <FormField label="Namespace" required>
-            <Input
-              type="text"
-              value={namespace}
-              onChange={(e) => setNamespace(e.target.value)}
-              placeholder="default"
-              required
-            />
-          </FormField>
-
-          {/* Description */}
-          <FormField label="Description">
-            <Input
-              type="text"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Optional description"
-            />
-          </FormField>
-
-          {/* Values Configuration */}
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <label className="block text-sm font-medium text-gray-300">
-                Configuration Values
-              </label>
-              
-              {/* Input Method Toggle (only show if schema is available) */}
-              {valuesSchema?.properties && (
-                <div className="flex gap-1 bg-gray-800 rounded-lg p-1">
-                  <button
-                    type="button"
-                    onClick={() => setInputMethod('form')}
-                    className={`flex items-center gap-2 px-3 py-1 rounded text-xs transition ${
-                      inputMethod === 'form'
-                        ? 'bg-purple-600 text-white'
-                        : 'text-gray-400 hover:text-gray-300'
-                    }`}
-                  >
-                    <FormInput className="w-3 h-3" />
-                    Form
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setInputMethod('yaml')}
-                    className={`flex items-center gap-2 px-3 py-1 rounded text-xs transition ${
-                      inputMethod === 'yaml'
-                        ? 'bg-purple-600 text-white'
-                        : 'text-gray-400 hover:text-gray-300'
-                    }`}
-                  >
-                    <FileCode className="w-3 h-3" />
-                    YAML
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {loadingSchema ? (
-              <LoadingState message="Loading configuration schema..." size="sm" />
-            ) : inputMethod === 'form' && valuesSchema ? (
-              <div className="border border-gray-700 rounded-lg p-4 max-h-96 overflow-y-auto bg-gray-900/30">
-                <SchemaFormGenerator
-                  schema={valuesSchema}
-                  values={valuesForm}
-                  onChange={setValuesForm}
-                />
-              </div>
-            ) : (
-              <FormField
-                help={valuesSchema 
-                  ? "Optional: Override default values with custom YAML configuration"
-                  : "Optional: Chart does not provide a schema. Enter YAML configuration manually."
-                }
-              >
-                <Textarea
-                  value={valuesYaml}
-                  onChange={(e) => setValuesYaml(e.target.value)}
-                  placeholder="# Enter custom values in YAML format&#10;# Example:&#10;# replicaCount: 3&#10;# image:&#10;#   repository: myapp&#10;#   tag: latest"
-                  rows={8}
-                  className="font-mono text-sm"
-                />
-              </FormField>
-            )}
-          </div>
-
-          {/* Artifact Info */}
-          <div className="p-4 bg-gray-800/50 border border-gray-700 rounded-lg space-y-2">
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-400">Repository:</span>
-              <span className="text-white font-mono">{repositoryName}</span>
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-400">Tag:</span>
-              <Badge variant="info" size="sm">{tag}</Badge>
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-400">Type:</span>
-              <span className="text-white">{artifactType}</span>
-            </div>
-          </div>
-        </form>
-    </Modal>
-  );
-};
-
-const isJsonSchemaObject = (value: unknown): value is JsonSchema =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
-
-const extractJsonSchema = (schemaResponse: unknown): JsonSchema | null => {
-  if (schemaResponse == null) {
-    return null;
-  }
-
-  const tryParse = (value: unknown): unknown => {
-    if (typeof value === "string") {
-      try {
-        return JSON.parse(value);
-      } catch {
-        return null;
-      }
-    }
-    return value;
-  };
-
-  let candidate: unknown = tryParse(schemaResponse);
-
-  if (candidate && typeof candidate === "object" && "schema" in (candidate as Record<string, unknown>)) {
-    const inner = (candidate as { schema?: unknown }).schema;
-    const normalizedInner = extractJsonSchema(inner);
-    if (normalizedInner) {
-      return normalizedInner;
-    }
-  }
-
-  if (isJsonSchemaObject(candidate)) {
-    return candidate as JsonSchema;
-  }
-
-  return null;
-};
--- a/frontend/src/features/artifact/registries/components/RegistryTreeExplorer.tsx
+++ b/frontend/src/features/artifact/registries/components/RegistryTreeExplorer.tsx
@ -1,183 +0,0 @@
-/**
- * Registry Tree Explorer Component
- * Display registries in a tree-like structure
- */
-import React, { useState } from "react";
-import { 
-  Database, 
-  ChevronRight, 
-  ChevronDown, 
-  Package, 
-  Server, 
-  ExternalLink,
-  Shield,
-  Globe
-} from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import type { AppRegistry } from "@/core/types";
-
-interface RegistryTreeExplorerProps {
-  registries: AppRegistry[];
-}
-
-export const RegistryTreeExplorer: React.FC<RegistryTreeExplorerProps> = ({ registries }) => {
-  const navigate = useNavigate();
-  const [expandedRegistries, setExpandedRegistries] = useState<Set<string>>(new Set());
-  const [hoveredRegistry, setHoveredRegistry] = useState<string | null>(null);
-
-  const toggleRegistry = (registryId: string) => {
-    const newExpanded = new Set(expandedRegistries);
-    if (newExpanded.has(registryId)) {
-      newExpanded.delete(registryId);
-    } else {
-      newExpanded.add(registryId);
-    }
-    setExpandedRegistries(newExpanded);
-  };
-
-  const handleRegistryClick = (registryId: string) => {
-    navigate(`/artifact/registries/${registryId}`);
-  };
-
-  return (
-    <div className="mt-6">
-      <div className="relative bg-gradient-to-br from-slate-800/80 via-slate-800/50 to-slate-900/80 border border-slate-700/50 rounded-xl overflow-hidden shadow-2xl">
-        {/* Decorative background effect */}
-        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none"></div>
-        
-        {/* Header with enhanced design */}
-        <div className="relative p-6 border-b border-slate-700/50 bg-gradient-to-r from-purple-900/20 via-transparent to-blue-900/20 backdrop-blur-sm">
-          <div className="flex items-center gap-3">
-            <div className="p-3 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-xl border border-purple-500/30 shadow-lg shadow-purple-500/20">
-              <Database className="w-6 h-6 text-purple-400" />
-            </div>
-            <div>
-              <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300">
-                OCI Registries
-              </h3>
-              <p className="text-sm text-slate-400 mt-0.5">
-                {registries.length} {registries.length === 1 ? 'registry' : 'registries'} configured
-              </p>
-            </div>
-          </div>
-        </div>
-        
-        {/* Registry List */}
-        <div className="divide-y divide-slate-700/50">
-          {registries.map((registry) => {
-            const isExpanded = expandedRegistries.has(registry.id || '');
-            const isHovered = hoveredRegistry === registry.id;
-            
-            return (
-              <div 
-                key={registry.id} 
-                className="relative group transition-all duration-300"
-                onMouseEnter={() => setHoveredRegistry(registry.id || '')}
-                onMouseLeave={() => setHoveredRegistry(null)}
-              >
-                {/* Hover glow effect */}
-                {isHovered && (
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-cyan-500/10 pointer-events-none"></div>
-                )}
-                
-                <div
-                  className="relative flex items-center justify-between p-5 cursor-pointer hover:bg-slate-800/50 transition-colors"
-                  onClick={() => toggleRegistry(registry.id || '')}
-                >
-                  <div className="flex items-center gap-4 flex-1">
-                    {/* Expand/Collapse Icon */}
-                    <div className="flex-shrink-0">
-                      {isExpanded ? (
-                        <ChevronDown className="w-5 h-5 text-purple-400 transition-transform duration-200" />
-                      ) : (
-                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-purple-400 transition-colors duration-200" />
-                      )}
-                    </div>
-                    
-                    {/* Registry Icon with glow */}
-                    <div className={`relative p-3 rounded-xl border transition-all duration-300 ${
-                      isExpanded 
-                        ? 'bg-gradient-to-br from-purple-500/30 to-blue-500/30 border-purple-500/50 shadow-lg shadow-purple-500/30' 
-                        : 'bg-gradient-to-br from-purple-500/10 to-blue-500/10 border-purple-500/30 group-hover:border-purple-500/50'
-                    }`}>
-                      <Server className={`w-6 h-6 transition-colors duration-300 ${
-                        isExpanded ? 'text-purple-300' : 'text-purple-400'
-                      }`} />
-                    </div>
-                    
-                    {/* Registry Info */}
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-3">
-                        <h4 className="text-base font-bold text-white group-hover:text-purple-300 transition-colors">
-                          {registry.name || 'Unnamed Registry'}
-                        </h4>
-                        {registry.url && (
-                          <div className="flex items-center gap-1.5 px-2.5 py-1 bg-slate-700/50 border border-slate-600/50 rounded-md">
-                            <Globe className="w-3.5 h-3.5 text-cyan-400" />
-                            <span className="text-xs text-cyan-400 font-medium">Connected</span>
-                          </div>
-                        )}
-                      </div>
-                      
-                      {registry.description && (
-                        <p className="text-sm text-slate-400 mt-1.5 line-clamp-1">
-                          {registry.description}
-                        </p>
-                      )}
-                      
-                      {registry.url && (
-                        <div className="flex items-center gap-2 mt-2">
-                          <Shield className="w-3.5 h-3.5 text-slate-500" />
-                          <p className="text-xs text-slate-500 font-mono truncate">
-                            {registry.url}
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  
-                  {/* Browse Button */}
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleRegistryClick(registry.id || '');
-                    }}
-                    className="group/btn flex-shrink-0 inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-blue-300 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 hover:from-blue-600/30 hover:to-cyan-600/30 border border-blue-500/40 hover:border-blue-400/60 rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30"
-                  >
-                    <Package className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
-                    Browse
-                    <ExternalLink className="w-3.5 h-3.5 opacity-70 group-hover/btn:opacity-100 group-hover/btn:translate-x-0.5 group-hover/btn:-translate-y-0.5 transition-all" />
-                  </button>
-                </div>
-                
-                {/* Expanded Content */}
-                {isExpanded && (
-                  <div className="relative px-5 pb-5 pl-20 animate-in fade-in slide-in-from-top-2 duration-300">
-                    <div className="relative bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-700/50 rounded-lg p-5 shadow-inner">
-                      {/* Decorative corner accent */}
-                      <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-transparent rounded-bl-full pointer-events-none"></div>
-                      
-                      <div className="relative flex items-start gap-3">
-                        <div className="flex-shrink-0 p-2 bg-purple-500/10 border border-purple-500/30 rounded-lg">
-                          <Package className="w-5 h-5 text-purple-400" />
-                        </div>
-                        <div className="flex-1">
-                          <p className="text-sm font-semibold text-white mb-1">
-                            Ready to explore
-                          </p>
-                          <p className="text-sm text-slate-400 leading-relaxed">
-                            Click <span className="font-semibold text-blue-400">"Browse"</span> to view all repositories and artifacts available in this registry.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/frontend/src/features/artifact/registries/components/RepositoryItem.tsx
+++ b/frontend/src/features/artifact/registries/components/RepositoryItem.tsx
@ -1,386 +0,0 @@
-/**
- * Repository Item Component
- * Expandable to show tags list with type filtering
- */
-import React, { useState, useEffect } from "react";
-import { Package, ChevronDown, ChevronRight, Copy, Tag as TagIcon, Filter, AlertCircle, Rocket } from "lucide-react";
-import { listArtifacts } from "@/api";
-import type { ArtifactListItem } from "@/api";
-import { useToast } from "@/shared";
-import { LaunchModal } from "./LaunchModal";
-import { artifactCache } from "@/shared/services/artifact-cache";
-import { RegistryErrors, formatApiError } from "@/shared/utils";
-import { inferArtifactCategory, type ArtifactCategory } from "../utils/artifactType";
-
-interface RepositoryItemProps {
-  registryId: string;
-  registryName: string;
-  registryUrl: string;
-  repository: string;
-}
-
-export const RepositoryItem: React.FC<RepositoryItemProps> = ({
-  registryId,
-  registryName,
-  registryUrl,
-  repository,
-}) => {
-  const { success, error: toastError } = useToast();
-  const [expanded, setExpanded] = useState(false);
-  const [allTags, setAllTags] = useState<ArtifactListItem[]>([]); // All tags
-  const [filteredTags, setFilteredTags] = useState<ArtifactListItem[]>([]); // Filtered tags
-  const [loading, setLoading] = useState(false);
-  const [tagsLoaded, setTagsLoaded] = useState(false); // Whether tags are loaded
-  const [filterType, setFilterType] = useState<ArtifactCategory | "all">("chart"); // Default filter: chart
-  const [loadError, setLoadError] = useState<string | null>(null); // Load error message
-  const [launchModalOpen, setLaunchModalOpen] = useState(false);
-  const [selectedTag, setSelectedTag] = useState<ArtifactListItem | null>(null);
-
-  // Load tags when expanded (using isMounted pattern for Strict Mode compatibility)
-  // 🚀 Enhanced with cache support and auto-retry
-  useEffect(() => {
-    if (!expanded || tagsLoaded) {
-      return; // Not expanded or already loaded, skip
-    }
-
-    const isMounted = { current: true };
-
-    const loadTags = async (attempt = 1) => {
-      const MAX_RETRIES = 2;
-      
-      // 🚀 Check cache first
-      const cachedData = artifactCache.get(registryId, repository);
-      if (cachedData !== null) {
-        console.log(`[RepositoryItem] ✅ Cache hit for ${repository} (${cachedData.length} tags)`);
-        setAllTags(cachedData);
-        setTagsLoaded(true);
-        setLoadError(null);
-        return; // Skip API call
-      }
-
-      // Cache miss, load from API
-      setLoading(true);
-      setLoadError(null);
-      
-      try {
-        console.log(`[RepositoryItem] 📡 Loading tags from API for: ${repository} (attempt ${attempt})`);
-        
-        // Mark as loading in cache to prevent duplicate requests
-        artifactCache.setLoading(registryId, repository);
-        
-        // Fetch all tags to support client-side filter switching
-        const tagList = await listArtifacts({ registryId, repositoryName: repository });
-        
-        // Only update state if component is still mounted
-        if (isMounted.current) {
-          console.log(`[RepositoryItem] ✅ Loaded ${tagList.length} tags from API`);
-          
-          // Update cache
-          artifactCache.set(registryId, repository, tagList);
-          
-          setAllTags(tagList);
-          setTagsLoaded(true);
-          setLoadError(null);
-        }
-      } catch (error) {
-        // Only show error if component is still mounted
-        if (isMounted.current) {
-          // Retry if attempts remaining
-          if (attempt < MAX_RETRIES) {
-            console.log(`[RepositoryItem] 🔄 Retrying ${repository} (${attempt + 1}/${MAX_RETRIES})...`);
-            await new Promise(resolve => setTimeout(resolve, 500 * attempt)); // Exponential backoff
-            return loadTags(attempt + 1);
-          }
-          
-          // All retries exhausted
-          console.error(`[RepositoryItem] ❌ All retries exhausted for ${repository}:`, error);
-          
-          // Format error message using unified error handling
-          const errorMsg = formatApiError(error) || RegistryErrors.TAGS_LOAD_FAILED;
-          setLoadError(errorMsg);
-          toastError(errorMsg);
-          
-          // 🔧 Clear cache to allow manual retry
-          artifactCache.clear(registryId, repository);
-          
-          setAllTags([]);
-          // Don't set tagsLoaded to true - allow retry
-        }
-      } finally {
-        if (isMounted.current) {
-          setLoading(false);
-        }
-      }
-    };
-
-    loadTags();
-
-    // Cleanup: mark as unmounted to prevent state updates
-    return () => {
-      isMounted.current = false;
-    };
-  }, [expanded, tagsLoaded, registryId, repository, toastError]);
-
-  // Filter tags by type
-  useEffect(() => {
-    if (filterType === "all") {
-      setFilteredTags(allTags);
-      return;
-    }
-    setFilteredTags(
-      allTags.filter((tagItem) => inferArtifactCategory(tagItem) === filterType),
-    );
-  }, [allTags, filterType]);
-
-  // Get plural form of type name
-  const getTypeName = (type: string): string => {
-    if (type === "all") return "artifacts";
-    // Convert to plural form
-    const typeMap: Record<string, string> = {
-      chart: "charts",
-      image: "images",
-      other: "others",
-    };
-    return typeMap[type] || type;
-  };
-
-  const handleCopyPullCommand = (tagName?: string, tagType?: ArtifactCategory) => {
-    const baseUrl = registryUrl.replace(/^https?:\/\//, "");
-    
-    let pullCommand: string;
-    if (tagType === "chart") {
-      // Helm Chart - use helm pull
-      pullCommand = tagName 
-        ? `helm pull oci://${baseUrl}/${repository} --version ${tagName}`
-        : `helm pull oci://${baseUrl}/${repository}`;
-    } else if (tagType === "image") {
-      // Docker Image - use docker pull
-      pullCommand = tagName
-        ? `docker pull ${baseUrl}/${repository}:${tagName}`
-        : `docker pull ${baseUrl}/${repository}`;
-    } else {
-      // Other types - generic format
-      pullCommand = `${baseUrl}/${repository}${tagName ? `:${tagName}` : ""}`;
-    }
-    
-    navigator.clipboard.writeText(pullCommand);
-    success("Pull command copied to clipboard");
-  };
-
-  const handleToggle = () => {
-    setExpanded(!expanded);
-  };
-
-  const handleLaunch = (tagItem: ArtifactListItem) => {
-    setSelectedTag(tagItem);
-    setLaunchModalOpen(true);
-  };
-
-  const handleCloseLaunchModal = () => {
-    setLaunchModalOpen(false);
-    setSelectedTag(null);
-  };
-
-  return (
-    <>
-      {/* Launch Modal */}
-      {selectedTag && selectedTag.repositoryName && selectedTag.tag && (
-        <LaunchModal
-          isOpen={launchModalOpen}
-          onClose={handleCloseLaunchModal}
-          registryId={registryId}
-          repositoryName={selectedTag.repositoryName}
-          tag={selectedTag.tag}
-          artifactType={inferArtifactCategory(selectedTag)}
-        />
-      )}
-    <div className="bg-gray-800/50 border border-gray-700 rounded-lg overflow-hidden">
-      {/* Repository Header */}
-      <div className="flex items-center justify-between p-3 hover:bg-gray-800 transition group">
-        {/* Left: Repository Info */}
-        <div
-          className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer"
-          onClick={handleToggle}
-        >
-          {/* Expand/Collapse Icon */}
-          {expanded ? (
-            <ChevronDown className="w-4 h-4 text-gray-400 flex-shrink-0" />
-          ) : (
-            <ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
-          )}
-          <Package className="w-4 h-4 text-blue-400 flex-shrink-0" />
-          <span className="text-sm text-gray-200 font-mono truncate" title={repository}>
-            {repository}
-          </span>
-          {/* Registry Name Badge */}
-          <span className="px-2 py-0.5 bg-purple-600/20 border border-purple-500/30 rounded text-xs text-purple-300 flex-shrink-0">
-            🏷️ {registryName}
-          </span>
-          {/* Tag Count Badge */}
-          {allTags.length > 0 && (
-            <span className="px-2 py-0.5 bg-blue-600/20 border border-blue-500/30 rounded text-xs text-blue-300">
-              {filteredTags.length}/{allTags.length} {getTypeName(filterType)}
-            </span>
-          )}
-        </div>
-
-        {/* Right: Action Buttons */}
-        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition">
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              // 使用第一个tag的类型作为默认类型
-              const firstTagType = allTags.length > 0 ? inferArtifactCategory(allTags[0]) : undefined;
-              handleCopyPullCommand(undefined, firstTagType);
-            }}
-            className="p-1.5 hover:bg-gray-700 rounded transition"
-            title="Copy pull command"
-          >
-            <Copy className="w-3.5 h-3.5 text-gray-400 hover:text-blue-400" />
-          </button>
-        </div>
-      </div>
-
-      {/* Tags List (shown when expanded) */}
-      {expanded && (
-        <div className="border-t border-gray-700 bg-gray-900/50 p-3">
-          {loading ? (
-            <div className="flex items-center justify-center py-6">
-              <div className="flex flex-col items-center gap-2">
-                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
-                <p className="text-xs text-gray-500">Loading tags...</p>
-              </div>
-            </div>
-          ) : (
-            <>
-              {/* Filter */}
-              {allTags.length > 0 && (
-                <div className="flex items-center gap-2 mb-3 pb-3 border-b border-gray-700">
-                  <Filter className="w-3.5 h-3.5 text-gray-400" />
-                  <span className="text-xs text-gray-400">Type:</span>
-                  <div className="flex gap-1">
-                    <button
-                      onClick={() => setFilterType("chart")}
-                      className={`px-2 py-0.5 text-xs rounded transition ${
-                        filterType === "chart"
-                          ? "bg-green-600 text-white"
-                          : "bg-gray-700 text-gray-400 hover:bg-gray-600"
-                      }`}
-                    >
-                      Chart
-                    </button>
-                    <button
-                      onClick={() => setFilterType("image")}
-                      className={`px-2 py-0.5 text-xs rounded transition ${
-                        filterType === "image"
-                          ? "bg-blue-600 text-white"
-                          : "bg-gray-700 text-gray-400 hover:bg-gray-600"
-                      }`}
-                    >
-                      Image
-                    </button>
-                    <button
-                      onClick={() => setFilterType("other")}
-                      className={`px-2 py-0.5 text-xs rounded transition ${
-                        filterType === "other"
-                          ? "bg-purple-600 text-white"
-                          : "bg-gray-700 text-gray-400 hover:bg-gray-600"
-                      }`}
-                    >
-                      Other
-                    </button>
-                    <button
-                      onClick={() => setFilterType("all")}
-                      className={`px-2 py-0.5 text-xs rounded transition ${
-                        filterType === "all"
-                          ? "bg-gray-600 text-white"
-                          : "bg-gray-700 text-gray-400 hover:bg-gray-600"
-                      }`}
-                    >
-                      All
-                    </button>
-                  </div>
-                </div>
-              )}
-
-              {/* Error State */}
-              {loadError ? (
-                <div className="text-center py-4 text-red-400 text-sm">
-                  <AlertCircle className="w-8 h-8 mx-auto mb-2" />
-                  <p>Failed to load artifacts</p>
-                  <p className="text-xs text-gray-500 mt-1">{loadError}</p>
-                </div>
-              ) : filteredTags.length === 0 ? (
-                <div className="text-center py-4 text-gray-500 text-sm">
-                  <TagIcon className="w-8 h-8 mx-auto mb-2 opacity-30" />
-                  <p>No {filterType === "all" ? "" : getTypeName(filterType)} tags</p>
-                </div>
-              ) : (
-                <div className="space-y-1.5">
-                  {filteredTags.map((tagItem, index) => {
-                    const category = inferArtifactCategory(tagItem);
-                    return (
-                      <div
-                        key={`${tagItem.tag}-${index}`}
-                        className="flex items-center justify-between p-2 bg-gray-800/50 hover:bg-gray-800 rounded transition group/tag"
-                      >
-                        {/* Tag Info */}
-                        <div className="flex items-center gap-2 flex-1 min-w-0">
-                          <TagIcon className="w-3.5 h-3.5 text-green-400 flex-shrink-0" />
-                          <span className="text-sm text-gray-300 font-mono truncate" title={tagItem.tag}>
-                            {tagItem.tag}
-                          </span>
-                          {/* Artifact Type Badge */}
-                          <span
-                            className={`px-1.5 py-0.5 text-xs rounded ${
-                              category === "chart"
-                                ? "bg-green-600/20 text-green-300 border border-green-500/30"
-                                : category === "image"
-                                ? "bg-blue-600/20 text-blue-300 border border-blue-500/30"
-                                : "bg-purple-600/20 text-purple-300 border border-purple-500/30"
-                            }`}
-                            title={tagItem.mediaType || tagItem.type}
-                          >
-                            {category}
-                          </span>
-                          {/* Artifact Size */}
-                          {tagItem.size && tagItem.size > 0 && (
-                            <span className="text-xs text-gray-500">
-                              {(tagItem.size / 1024 / 1024).toFixed(2)} MB
-                            </span>
-                          )}
-                        </div>
-
-                        {/* Tag Action Buttons */}
-                        <div className="flex items-center gap-1 opacity-0 group-hover/tag:opacity-100">
-                          {/* Launch button - only for chart/helm type */}
-                          {category === "chart" && (
-                            <button
-                              onClick={() => handleLaunch(tagItem)}
-                              className="p-1 hover:bg-green-700/50 rounded transition"
-                              title={`Launch ${tagItem.tag}`}
-                            >
-                              <Rocket className="w-3 h-3 text-green-400 hover:text-green-300" />
-                            </button>
-                          )}
-                          <button
-                            onClick={() => handleCopyPullCommand(tagItem.tag, category)}
-                            className="p-1 hover:bg-gray-700 rounded transition"
-                            title={`Copy pull command for ${tagItem.tag}`}
-                          >
-                            <Copy className="w-3 h-3 text-gray-400 hover:text-blue-400" />
-                          </button>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </div>
-    </>
-  );
-};
--- a/frontend/src/features/artifact/registries/components/TagCard.tsx
+++ b/frontend/src/features/artifact/registries/components/TagCard.tsx
@ -1,144 +0,0 @@
-/**
- * Tag Card Component
- * Simple card for displaying a single tag/artifact
- */
-import React, { useState } from "react";
-import { Package, Rocket, Copy, HardDrive } from "lucide-react";
-import { LaunchModal } from "./LaunchModal";
-import { useToast } from "@/shared";
-import type { ArtifactListItem } from "@/api";
-import { inferArtifactCategory, type ArtifactCategory } from "../utils/artifactType";
-
-interface TagCardProps {
-  registryId: string;
-  tag: ArtifactListItem;
-}
-
-export const TagCard: React.FC<TagCardProps> = ({ registryId, tag }) => {
-  const { success } = useToast();
-  const [launchModalOpen, setLaunchModalOpen] = useState(false);
-  const category = inferArtifactCategory(tag);
-
-  const handleLaunch = () => {
-    setLaunchModalOpen(true);
-  };
-
-  const handleCopy = () => {
-    const tagName = tag.tag || '';
-    if (!tagName || !tag.repositoryName) return;
-    const pullCommand = `helm pull oci://${tag.repositoryName}:${tagName}`;
-    navigator.clipboard.writeText(pullCommand);
-    success("Pull command copied to clipboard!");
-  };
-
-  const formatSize = (bytes: number) => {
-    if (bytes === 0) return "N/A";
-    const mb = bytes / (1024 * 1024);
-    if (mb < 1) {
-      return `${(bytes / 1024).toFixed(1)} KB`;
-    }
-    return `${mb.toFixed(1)} MB`;
-  };
-
-  const getTypeColor = (type: ArtifactCategory) => {
-    switch (type) {
-      case "chart":
-        return "text-blue-400 bg-blue-500/10 border-blue-500/30";
-      case "image":
-        return "text-green-400 bg-green-500/10 border-green-500/30";
-      default:
-        return "text-gray-400 bg-gray-500/10 border-gray-500/30";
-    }
-  };
-
-  const getTypeIcon = (type: ArtifactCategory) => {
-    switch (type) {
-      case "chart":
-        return "📦";
-      case "image":
-        return "🐳";
-      default:
-        return "📄";
-    }
-  };
-
-  return (
-    <>
-      <div className="bg-dark-card border border-dark-border rounded-lg p-4 hover:border-brand-blue/50 transition-all group">
-        <div className="flex items-start gap-3">
-          {/* Icon */}
-          <div className="flex-shrink-0">
-            <div className={`w-10 h-10 rounded-lg border ${getTypeColor(category)} 
-              flex items-center justify-center text-lg`}>
-              {getTypeIcon(category)}
-            </div>
-          </div>
-
-          {/* Content */}
-          <div className="flex-1 min-w-0">
-            {/* Tag name */}
-            <div className="flex items-center gap-2 mb-1">
-              <Package className="w-4 h-4 text-purple-400 flex-shrink-0" />
-              <h3 className="text-sm font-semibold text-white truncate">
-                {tag.tag || 'N/A'}
-              </h3>
-              <span
-                className={`px-2 py-0.5 rounded text-xs border ${getTypeColor(category)}`}
-                title={tag.mediaType || tag.type || ''}
-              >
-                {category}
-              </span>
-            </div>
-
-            {/* Repository path */}
-            <p className="text-xs text-gray-500 truncate mb-2">
-              {tag.repositoryName}
-            </p>
-
-            {/* Size */}
-            <div className="flex items-center gap-2 text-xs text-gray-400">
-              <HardDrive className="w-3.5 h-3.5" />
-              <span>{formatSize(tag.size || 0)}</span>
-            </div>
-          </div>
-
-          {/* Actions */}
-          <div className="flex-shrink-0 flex flex-col gap-2">
-            <button
-              onClick={handleLaunch}
-              className="px-3 py-1.5 bg-brand-blue hover:bg-brand-blue/80 text-white rounded 
-                text-xs font-medium transition-colors flex items-center gap-1.5"
-              title="Launch this artifact"
-            >
-              <Rocket className="w-3.5 h-3.5" />
-              <span>Launch</span>
-            </button>
-            
-            <button
-              onClick={handleCopy}
-              className="px-3 py-1.5 bg-dark-lighter hover:bg-white/5 text-gray-300 
-                border border-dark-border rounded text-xs transition-colors flex items-center gap-1.5"
-              title="Copy pull command"
-            >
-              <Copy className="w-3.5 h-3.5" />
-              <span>Copy</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Launch Modal */}
-      {launchModalOpen && tag.repositoryName && tag.tag && (
-        <LaunchModal
-          isOpen={launchModalOpen}
-          onClose={() => setLaunchModalOpen(false)}
-          registryId={registryId}
-          repositoryName={tag.repositoryName}
-          tag={tag.tag}
-          artifactType={category}
-        />
-      )}
-    </>
-  );
-};
-
--- a/frontend/src/features/artifact/registries/index.ts
+++ b/frontend/src/features/artifact/registries/index.ts
@ -1,13 +0,0 @@
-/**
- * Registry Browser Feature (Flattened Architecture)
- * OCI 仓库浏览功能（扁平化架构）
- */
-
-// Export pages
-export { default as RegistriesBrowserPage } from './pages/RegistriesBrowserPage';
-
-// Export components
-export { RepositoryItem } from './components/RepositoryItem';
-export { TagCard } from './components/TagCard';
-export { LaunchModal } from './components/LaunchModal';
-
--- a/frontend/src/features/artifact/registries/pages/ArtifactBrowserPage.tsx
+++ b/frontend/src/features/artifact/registries/pages/ArtifactBrowserPage.tsx
@ -1,511 +0,0 @@
-/**
- * Artifact Browser Page
- * 左侧 Registry/Repository 树（自动加载并展开），右侧 Artifact 卡片。
- */
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Package,
-  Database,
-  RefreshCw,
-  Filter,
-  Search,
-  ChevronRight,
-  ChevronDown,
-} from "lucide-react";
-import { useToast } from "@/shared";
-import {
-  Button,
-  LoadingState,
-  EmptyState,
-  Badge,
-} from "@/shared/components";
-import {
-  listRegistries,
-  listRepositories,
-  listArtifacts,
-} from "@/api";
-import type {
-  RegistryResponse,
-  ListRepositories200Item,
-  ArtifactListItem,
-  ListArtifactsFilter,
-} from "@/api";
-import { TagCard } from "../components/TagCard";
-import { globalCache } from "@/shared/services/artifact-cache";
-import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-
-interface RepositoryNode {
-  name: string;
-  registryId: string;
-  registryName: string;
-  artifactCount?: number;
-}
-
-interface RegistryNode {
-  registry: RegistryResponse;
-  repositories: RepositoryNode[];
-  expanded: boolean;
-}
-
-const FILTER_OPTIONS: Array<{ value: ListArtifactsFilter | undefined; label: string }> = [
-  { value: undefined, label: "All" },
-  { value: "chart", label: "Charts" },
-  { value: "image", label: "Images" },
-  { value: "other", label: "Other" },
-];
-
-const ArtifactBrowserPage: React.FC = () => {
-  const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
-
-  const [registryNodes, setRegistryNodes] = useState<RegistryNode[]>([]);
-  const [loadingRegistries, setLoadingRegistries] = useState(true);
-  const [loadingRepositories, setLoadingRepositories] = useState(true);
-  const [repositoryError, setRepositoryError] = useState<string | null>(null);
-  const [refreshing, setRefreshing] = useState(false);
-
-  const [selectedRepository, setSelectedRepository] = useState<RepositoryNode | null>(null);
-  const [artifacts, setArtifacts] = useState<ArtifactListItem[]>([]);
-  const [loadingArtifacts, setLoadingArtifacts] = useState(false);
-  const [artifactError, setArtifactError] = useState<string | null>(null);
-  const [filter, setFilter] = useState<ListArtifactsFilter | undefined>(undefined);
-
-  const [searchTerm, setSearchTerm] = useState("");
-
-  const loadArtifacts = useCallback(
-    async (
-      registryId: string,
-      repositoryName: string,
-      skipCache = false,
-      isRefresh = false
-    ) => {
-      if (!isRefresh) {
-        setLoadingArtifacts(true);
-      }
-      setArtifactError(null);
-      const filterKey = filter ?? "all";
-      try {
-        let data: ArtifactListItem[] | null = null;
-        if (!skipCache) {
-          data = globalCache.get<ArtifactListItem[]>("tags", registryId, repositoryName, filterKey);
-        }
-        if (!data) {
-          data = await listArtifacts(
-            { registryId, repositoryName },
-            filter ? { filter } : undefined
-          );
-          globalCache.set("tags", data, registryId, repositoryName, filterKey);
-        }
-        setArtifacts(data ?? []);
-      } catch (err) {
-        const errorMsg = formatApiError(err) || "Failed to load artifacts";
-        setArtifactError(errorMsg);
-        toastError(errorMsg);
-      } finally {
-        if (!isRefresh) {
-          setLoadingArtifacts(false);
-        }
-      }
-    },
-    [filter, toastError]
-  );
-
-  const fetchRegsAndRepos = useCallback(async (isRefresh = false) => {
-    if (!isRefresh) {
-      setLoadingRegistries(true);
-      setLoadingRepositories(true);
-    }
-    setRepositoryError(null);
-    let succeeded = false;
-
-    try {
-      let registries = globalCache.get<RegistryResponse[]>("registries");
-      if (!registries) {
-        registries = await listRegistries();
-        globalCache.set("registries", registries);
-      }
-
-      const baseNodes: RegistryNode[] = registries.map((registry) => ({
-        registry,
-        repositories: [],
-        expanded: true,
-      }));
-      setRegistryNodes(baseNodes);
-      if (!isRefresh) {
-        setLoadingRegistries(false);
-      }
-
-      const repoMap = await Promise.all(
-        registries.map(async (registry) => {
-          const registryId = registry.id;
-          if (!registryId) {
-            return { id: registryId, repos: [] };
-          }
-          try {
-            let repoNodes = globalCache.get<RepositoryNode[]>("repositories", registryId);
-            if (!repoNodes) {
-              const response = await listRepositories({ registryId });
-              repoNodes = normalizeRepositories(registry, response);
-              globalCache.set("repositories", repoNodes, registryId);
-            }
-            return { id: registryId, repos: repoNodes };
-          } catch (err) {
-            console.error(`Failed to load repositories for ${registry.name}`, err);
-            return { id: registryId, repos: [] };
-          }
-        })
-      );
-
-      setRegistryNodes((prev) =>
-        prev.map((node) => {
-          const mapping = repoMap.find((entry) => entry.id === node.registry.id);
-          if (!mapping) return node;
-          return { ...node, repositories: mapping.repos };
-        })
-      );
-
-      const firstRepo = repoMap.find((entry) => entry.repos.length > 0)?.repos[0];
-      if (firstRepo) {
-        setSelectedRepository(firstRepo);
-        await loadArtifacts(firstRepo.registryId, firstRepo.name, false, isRefresh);
-      } else {
-        setSelectedRepository(null);
-        setArtifacts([]);
-      }
-      succeeded = true;
-    } catch (err) {
-      const msg = formatApiError(err) || RegistryErrors.LOAD_FAILED;
-      toastError(msg);
-      setRepositoryError(msg);
-    } finally {
-      if (!isRefresh) {
-        setLoadingRepositories(false);
-      }
-    }
-    return succeeded;
-  }, [toastError, loadArtifacts]);
-
-  const handleRefresh = async () => {
-    if (refreshing) return;
-    toastInfo("Refreshing registries & repositories...", {
-      title: "Artifact Browser Refresh",
-      durationMs: 1800,
-      mergeKey: "artifact-browser-refresh",
-    });
-    setRefreshing(true);
-    globalCache.clearAll();
-    try {
-      const refreshed = await fetchRegsAndRepos(true);
-      if (refreshed) {
-        toastSuccess(SuccessMessages.DATA_REFRESHED);
-      }
-    } finally {
-      setRefreshing(false);
-    }
-  };
-
-  const handleRepositoryClick = (repo: RepositoryNode) => {
-    setSelectedRepository(repo);
-    loadArtifacts(repo.registryId, repo.name, true);
-  };
-
-  const toggleRegistry = (registryId?: string) => {
-    if (!registryId) return;
-    setRegistryNodes((prev) =>
-      prev.map((node) =>
-        node.registry.id === registryId ? { ...node, expanded: !node.expanded } : node
-      )
-    );
-  };
-
-  const hasInitialized = React.useRef(false);
-  useEffect(() => {
-    if (hasInitialized.current) {
-      return;
-    }
-    hasInitialized.current = true;
-    fetchRegsAndRepos();
-  }, [fetchRegsAndRepos]);
-
-  useEffect(() => {
-    if (selectedRepository) {
-      loadArtifacts(selectedRepository.registryId, selectedRepository.name);
-    }
-  }, [filter, selectedRepository, loadArtifacts]);
-
-  const filteredNodes = useMemo(() => {
-    const term = searchTerm.toLowerCase();
-    if (!term) return registryNodes;
-    return registryNodes
-      .map((node) => ({
-        ...node,
-        repositories: node.repositories.filter((repo) => {
-          const registryMatch = node.registry.name?.toLowerCase().includes(term);
-          const repoMatch = repo.name.toLowerCase().includes(term);
-          return registryMatch || repoMatch;
-        }),
-      }))
-      .filter(
-        (node) =>
-          node.repositories.length > 0 ||
-          node.registry.name?.toLowerCase().includes(term)
-      );
-  }, [registryNodes, searchTerm]);
-
-  const selectedRegistryName = selectedRepository
-    ? registryNodes.find((node) => node.registry.id === selectedRepository.registryId)?.registry
-        .name
-    : null;
-
-  return (
-    <div className="h-[calc(100vh-8rem)] -m-6 flex flex-col">
-      <div className="flex-shrink-0 border-b border-dark-border bg-dark-card px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Package className="w-6 h-6 text-purple-400" />
-            <div>
-              <h1 className="text-xl font-semibold text-white">Artifact Browser</h1>
-              <p className="text-sm text-gray-400">
-                Browse registries, repositories, and artifacts
-              </p>
-            </div>
-          </div>
-            <Button
-              variant="secondary"
-              icon={RefreshCw}
-              onClick={handleRefresh}
-              loading={refreshing}
-              spinIcon
-            >
-            Refresh
-          </Button>
-        </div>
-      </div>
-      <div className="flex-1 flex overflow-hidden bg-dark-bg">
-        <aside className="w-80 border-r border-dark-border bg-gradient-to-b from-gray-900 via-gray-950 to-gray-900 flex flex-col">
-          <div className="p-4 border-b border-dark-border space-y-2">
-            <div className="relative">
-              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-              <input
-                type="text"
-                placeholder="Search registries / repositories..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-8 pr-3 py-2 rounded-lg bg-gray-900/70 border border-gray-700 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500"
-              />
-            </div>
-            {repositoryError && (
-              <p className="text-xs text-red-400">{repositoryError}</p>
-            )}
-            <div className="flex items-center justify-between text-xs text-gray-400">
-              <span>Registries</span>
-              <Badge variant="secondary">{registryNodes.length}</Badge>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-y-auto custom-scrollbar">
-            {loadingRegistries ? (
-              <div className="p-4">
-                <LoadingState message="Loading registries..." />
-              </div>
-            ) : filteredNodes.length === 0 ? (
-              <div className="p-4">
-                <EmptyState
-                  icon={Database}
-                  title="No registries"
-                  description="Add a registry to get started."
-                />
-              </div>
-            ) : (
-              filteredNodes.map((node) => (
-                <div key={node.registry.id || node.registry.name}>
-                  <button
-                    onClick={() => toggleRegistry(node.registry.id)}
-                    className="w-full flex items-center justify-between px-4 py-3 hover:bg-gray-800/60 transition"
-                  >
-                    <div className="flex items-center gap-2">
-                      {node.expanded ? (
-                        <ChevronDown className="w-4 h-4 text-gray-400" />
-                      ) : (
-                        <ChevronRight className="w-4 h-4 text-gray-400" />
-                      )}
-                      <Database className="w-4 h-4 text-purple-400" />
-                      <div className="text-left">
-                        <p className="text-sm text-white">{node.registry.name || "Unnamed"}</p>
-                        <p className="text-[11px] text-gray-500 truncate">
-                          {node.registry.url}
-                        </p>
-                      </div>
-                    </div>
-                    <Badge variant="secondary">{node.repositories.length}</Badge>
-                  </button>
-                  {node.expanded && (
-                    <div className="bg-gray-900/60">
-                      {node.repositories.length === 0 ? (
-                        <p className="px-8 py-3 text-xs text-gray-500">
-                          {loadingRepositories
-                            ? "Loading repositories..."
-                            : "No repositories found."}
-                        </p>
-                      ) : (
-                        node.repositories.map((repo) => {
-                          const isSelected =
-                            selectedRepository?.registryId === repo.registryId &&
-                            selectedRepository?.name === repo.name;
-                          return (
-                            <button
-                              key={`${repo.registryId}-${repo.name}`}
-                              onClick={() => handleRepositoryClick(repo)}
-                              className={`w-full text-left px-8 py-2 flex items-center justify-between text-sm transition ${
-                                isSelected
-                                  ? "bg-purple-600/20 text-white"
-                                  : "hover:bg-gray-800/80 text-gray-300"
-                              }`}
-                            >
-                              <span className="truncate">{repo.name}</span>
-                              {repo.artifactCount !== undefined && (
-                                <span className="text-xs text-gray-500">
-                                  {repo.artifactCount}
-                                </span>
-                              )}
-                            </button>
-                          );
-                        })
-                      )}
-                    </div>
-                  )}
-                </div>
-              ))
-            )}
-          </div>
-        </aside>
-
-        <main className="flex-1 flex flex-col bg-dark-card overflow-hidden">
-          {!selectedRepository ? (
-            <div className="flex-1 flex items-center justify-center">
-              <EmptyState
-                icon={Package}
-                title="Select a repository"
-                description="Choose a repository from the left panel to view artifacts."
-              />
-            </div>
-          ) : (
-            <>
-              <div className="flex-shrink-0 border-b border-dark-border p-5 bg-gradient-to-r from-gray-900 to-gray-850">
-                <div className="flex items-center justify-between flex-wrap gap-4">
-                  <div>
-                    <p className="text-xs uppercase tracking-wide text-gray-500">Repository</p>
-                    <h2 className="text-2xl font-semibold text-white">
-                      {selectedRepository.name}
-                    </h2>
-                    <p className="text-sm text-gray-400">
-                      {selectedRegistryName || selectedRepository.registryId}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <Filter className="w-4 h-4 text-gray-400" />
-                    {FILTER_OPTIONS.map((option) => (
-                      <button
-                        key={option.label}
-                        onClick={() => setFilter(option.value)}
-                        className={`px-3 py-1.5 text-xs rounded-full border transition ${
-                          filter === option.value
-                            ? "bg-purple-600 text-white border-purple-500"
-                            : "border-gray-700 text-gray-300 hover:border-gray-500"
-                        }`}
-                      >
-                        {option.label}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex-1 overflow-y-auto p-5">
-                {artifactError && (
-                  <p className="text-sm text-red-400 mb-3">{artifactError}</p>
-                )}
-                {loadingArtifacts ? (
-                  <LoadingState message="Loading artifacts..." />
-                ) : artifacts.length === 0 ? (
-                  <EmptyState
-                    icon={Package}
-                    title="No artifacts"
-                    description={
-                      filter
-                        ? `No ${filter} artifacts found for this repository.`
-                        : "This repository doesn't contain any artifacts yet."
-                    }
-                  />
-                ) : (
-                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-                    {artifacts.map((artifact, index) => (
-                      <TagCard
-                        key={`${artifact.repositoryName || "repo"}-${artifact.tag || index}`}
-                        registryId={selectedRepository.registryId}
-                        tag={artifact}
-                      />
-                    ))}
-                  </div>
-                )}
-              </div>
-            </>
-          )}
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default ArtifactBrowserPage;
-
-function normalizeRepositories(
-  registry: RegistryResponse,
-  payload: ListRepositories200Item[] | { repositories?: string[] } | null | undefined
-): RepositoryNode[] {
-  const registryId = registry.id || "";
-  const registryName = registry.name || registryId;
-
-  if (Array.isArray(payload)) {
-    return payload
-      .map((repo): RepositoryNode | null => {
-        if (typeof repo === "string") {
-          return {
-            name: repo,
-            registryId,
-            registryName,
-            artifactCount: undefined,
-          };
-        }
-        const name = repo.name || "";
-        if (!name) {
-          return null;
-        }
-        return {
-          name,
-          registryId,
-          registryName,
-          artifactCount: (repo as any).artifact_count ?? (repo as any).artifactCount,
-        };
-      })
-      .filter((repo): repo is RepositoryNode => Boolean(repo));
-  }
-
-  if (payload && typeof payload === "object" && Array.isArray((payload as any).repositories)) {
-    const repoEntries = (payload as any).repositories.map(
-      (name: unknown): RepositoryNode | null =>
-        typeof name === "string"
-          ? {
-              name,
-              registryId,
-              registryName,
-              artifactCount: undefined,
-            }
-          : null
-    );
-    return repoEntries.filter(
-      (repo: RepositoryNode | null): repo is RepositoryNode => Boolean(repo)
-    );
-  }
-
-  return [];
-}
--- a/frontend/src/features/artifact/registries/pages/ArtifactsBrowserPage.tsx
+++ b/frontend/src/features/artifact/registries/pages/ArtifactsBrowserPage.tsx
@ -1,270 +0,0 @@
-/**
- * Artifacts Browser Page
- * 浏览特定 Repository 的所有 Artifacts (Tags)
- */
-import React, { useState, useEffect } from "react";
-import { Package, RefreshCw, ArrowLeft, Filter } from "lucide-react";
-import { useNavigate, useParams } from "react-router-dom";
-import { useToast } from "@/shared";
-import { 
-  PageHeader, 
-  Button, 
-  LoadingState, 
-  ErrorState, 
-  EmptyState,
-  Badge
-} from "@/shared/components";
-import { listArtifacts, listRegistries } from "@/api";
-import type { ArtifactListItem, ListArtifactsFilter } from "@/api";
-import { TagCard } from "../components/TagCard";
-import { globalCache } from "@/shared/services/artifact-cache";
-import { SuccessMessages, formatApiError } from "@/shared/utils";
-
-const ArtifactsBrowserPage: React.FC = () => {
-  const { registryId, repositoryName } = useParams<{ registryId: string; repositoryName: string }>();
-  const navigate = useNavigate();
-  const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
-
-  const [artifacts, setArtifacts] = useState<ArtifactListItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [filter, setFilter] = useState<ListArtifactsFilter | undefined>(undefined);
-  const [registryName, setRegistryName] = useState<string>("");
-
-  // Decode repository name (URL encoded)
-  const decodedRepositoryName = repositoryName ? decodeURIComponent(repositoryName) : "";
-
-  // Load registry info
-  useEffect(() => {
-    const loadRegistryInfo = async () => {
-      if (!registryId) return;
-      try {
-        const registries = await listRegistries();
-        const registry = registries.find(r => r.id === registryId);
-        if (registry) {
-          setRegistryName(registry.name || "");
-        }
-      } catch (err) {
-        console.error("Failed to load registry info:", err);
-      }
-    };
-    loadRegistryInfo();
-  }, [registryId]);
-
-  // Load artifacts
-  const loadArtifacts = async (isMounted = { current: true }, skipCache = false, isRefresh = false) => {
-    if (!registryId || !decodedRepositoryName) {
-      setError("Registry ID or Repository Name is missing");
-      setLoading(false);
-      return false;
-    }
-
-    const filterKey = filter ?? "all";
-
-    if (!skipCache) {
-      const cached = globalCache.get<ArtifactListItem[]>(
-        "tags",
-        registryId,
-        decodedRepositoryName,
-        filterKey
-      );
-      if (cached) {
-        console.log(`[ArtifactsBrowserPage] Using cached artifacts for ${decodedRepositoryName}`);
-        setArtifacts(cached);
-        setLoading(false);
-        return true;
-      }
-    }
-
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
-    setError(null);
-    let succeeded = false;
-    try {
-      const data = await listArtifacts(
-        { registryId, repositoryName: decodedRepositoryName },
-        filter ? { filter } : undefined
-      );
-      if (isMounted.current) {
-        setArtifacts(data);
-        globalCache.set("tags", data, registryId, decodedRepositoryName, filterKey);
-        succeeded = true;
-      }
-    } catch (err) {
-      if (isMounted.current) {
-        const errorMsg = formatApiError(err) || "Failed to load artifacts";
-        setError(errorMsg);
-        toastError(errorMsg);
-        console.error(err);
-      }
-    } finally {
-      if (isMounted.current) {
-        if (isRefresh) {
-          setRefreshing(false);
-        } else {
-          setLoading(false);
-        }
-      }
-    }
-    return succeeded;
-  };
-
-  useEffect(() => {
-    const isMounted = { current: true };
-    loadArtifacts(isMounted);
-    return () => {
-      isMounted.current = false;
-    };
-  }, [registryId, decodedRepositoryName, filter]);
-
-  const handleRefresh = async () => {
-    toastInfo("Refreshing artifacts...", {
-      title: "Artifacts Refresh",
-      durationMs: 1800,
-      mergeKey: "artifacts-refresh",
-    });
-    globalCache.clearAll();
-    const refreshed = await loadArtifacts({ current: true }, true, true);
-    if (refreshed) {
-      toastSuccess(SuccessMessages.DATA_REFRESHED);
-    }
-  };
-
-  const handleBack = () => {
-    if (registryId) {
-      navigate(`/artifact/registries/${registryId}`);
-    } else {
-      navigate("/artifact/registries");
-    }
-  };
-
-  const filterOptions: Array<{ value: ListArtifactsFilter | undefined; label: string }> = [
-    { value: undefined, label: "All Types" },
-    { value: "chart", label: "Helm Charts" },
-    { value: "image", label: "Container Images" },
-    { value: "other", label: "Other" },
-  ];
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <PageHeader
-        title={`Artifacts - ${decodedRepositoryName}`}
-        description={`Browse artifacts in ${registryName || registryId || "registry"}`}
-        icon={Package}
-        iconColor="text-purple-400"
-        actions={
-          <>
-            <Button
-              variant="secondary"
-              icon={ArrowLeft}
-              onClick={handleBack}
-            >
-              Back
-            </Button>
-            <Button
-              variant="secondary"
-              icon={RefreshCw}
-              onClick={handleRefresh}
-              loading={refreshing}
-              spinIcon={true}
-            >
-              Refresh
-            </Button>
-          </>
-        }
-      />
-
-      {/* Filter Bar */}
-      {!loading && !error && (
-        <div className="mt-4 flex items-center gap-3">
-          <Filter className="w-4 h-4 text-gray-400" />
-          <span className="text-sm text-gray-400">Filter by type:</span>
-          <div className="flex gap-2">
-            {filterOptions.map((option) => (
-              <button
-                key={option.value || "all"}
-                onClick={() => setFilter(option.value)}
-                className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
-                  filter === option.value
-                    ? "bg-purple-600 text-white"
-                    : "bg-dark-lighter text-gray-300 hover:bg-dark-border"
-                }`}
-              >
-                {option.label}
-              </button>
-            ))}
-          </div>
-          {filter && (
-            <Badge variant="info">
-              {artifacts.length} {filter} artifact{artifacts.length !== 1 ? "s" : ""}
-            </Badge>
-          )}
-        </div>
-      )}
-
-      {/* Loading State */}
-      {loading && <LoadingState message="Loading artifacts..." />}
-
-      {/* Error State */}
-      {error && !loading && (
-        <ErrorState message={error} onRetry={handleRefresh} />
-      )}
-
-      {/* Empty State */}
-      {!loading && !error && artifacts.length === 0 && (
-        <EmptyState
-          icon={Package}
-          title="No Artifacts Found"
-          description={
-            filter
-              ? `No ${filter} artifacts found in this repository`
-              : "This repository doesn't contain any artifacts yet"
-          }
-          action={{
-            label: "Back to Repositories",
-            icon: ArrowLeft,
-            onClick: handleBack,
-          }}
-        />
-      )}
-
-      {/* Artifacts Grid */}
-      {!loading && !error && artifacts.length > 0 && (
-        <div className="mt-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {artifacts.map((artifact, index) => (
-              <TagCard
-                key={`${artifact.repositoryName || "repo"}-${artifact.tag || index}`}
-                registryId={registryId || ""}
-                tag={artifact}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Breadcrumb Info */}
-      {!loading && artifacts.length > 0 && (
-        <div className="mt-6 p-4 bg-dark-card border border-dark-border rounded-lg">
-          <div className="flex items-center gap-2 text-sm text-gray-400">
-            <span>Registry:</span>
-            <span className="text-white font-medium">{registryName || registryId}</span>
-            <span className="mx-2">/</span>
-            <span>Repository:</span>
-            <span className="text-white font-medium">{decodedRepositoryName}</span>
-            <span className="mx-2">/</span>
-            <span>Artifacts:</span>
-            <span className="text-white font-medium">{artifacts.length}</span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ArtifactsBrowserPage;
--- a/frontend/src/features/artifact/registries/pages/RegistriesBrowserPage.tsx
+++ b/frontend/src/features/artifact/registries/pages/RegistriesBrowserPage.tsx
@ -1,240 +0,0 @@
-/**
- * Registries Browser Page
- * Display all registries and their repositories
- */
-import React, { useState, useEffect } from "react";
-import { Database, RefreshCw, Plus, Package } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import { useToast } from "@/shared";
-import { 
-  PageHeader, 
-  Button, 
-  LoadingState, 
-  ErrorState, 
-  EmptyState 
-} from "@/shared/components";
-import { RegistryTreeExplorer } from "../components/RegistryTreeExplorer";
-import { listRegistries } from "@/api";
-import type { AppRegistry } from "@/core/types";
-import { globalCache } from "@/shared/services/artifact-cache";
-import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-
-const RegistriesBrowserPage: React.FC = () => {
-  const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
-  const navigate = useNavigate();
-
-  const [registries, setRegistries] = useState<AppRegistry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load registries with global cache
-  const loadRegistries = async (
-    isMounted = { current: true },
-    skipCache = false,
-    isRefresh = false
-  ) => {
-    let succeeded = false;
-    if (!skipCache) {
-      // Check global cache first
-      const cachedRegistries = globalCache.get<AppRegistry[]>('registries');
-      if (cachedRegistries) {
-        console.log('[RegistriesBrowserPage] Using cached registries');
-        setRegistries(cachedRegistries);
-        setLoading(false);
-        return true;
-      }
-    }
-
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
-    setError(null);
-    try {
-      const data = await listRegistries();
-      if (isMounted.current) {
-        setRegistries(data);
-        // Cache registries list (30 minutes TTL)
-        globalCache.set('registries', data);
-        succeeded = true;
-      }
-    } catch (err) {
-      if (isMounted.current) {
-        const errorMsg = formatApiError(err) || RegistryErrors.LOAD_FAILED;
-        setError(errorMsg);
-        toastError(errorMsg);
-        console.error(err);
-      }
-    } finally {
-      if (isMounted.current) {
-        if (isRefresh) {
-          setRefreshing(false);
-        } else {
-          setLoading(false);
-        }
-      }
-    }
-    return succeeded;
-  };
-
-  useEffect(() => {
-    const isMounted = { current: true };
-    loadRegistries(isMounted);
-
-    // Listen for storage events to auto-refresh when registries are added
-    const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === 'registry_updated') {
-        console.log('[RegistriesBrowserPage] Detected registry update, refreshing...');
-        loadRegistries(isMounted);
-      }
-    };
-
-    window.addEventListener('storage', handleStorageChange);
-
-    return () => {
-      isMounted.current = false;
-      window.removeEventListener('storage', handleStorageChange);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Refresh handler
-  const handleRefresh = async () => {
-    toastInfo("Refreshing registry list and clearing cache...", {
-      title: "Registry Browser Refresh",
-      durationMs: 1800,
-      mergeKey: "registry-browser-refresh",
-    });
-    // Clear all caches to force reload all data
-    globalCache.clearAll();
-    const refreshed = await loadRegistries({ current: true }, true, true); // skipCache = true, refresh
-    if (refreshed) {
-      toastSuccess(SuccessMessages.DATA_REFRESHED);
-    }
-  };
-
-  // Navigate to config page
-  const handleAddRegistry = () => {
-    navigate("/configuration/registries");
-  };
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <PageHeader
-        title="Artifact - Registries"
-        description="Browse all OCI registries and their artifacts"
-        icon={Database}
-        iconColor="text-purple-400"
-        actions={
-          <>
-            <Button
-              variant="secondary"
-              icon={RefreshCw}
-              onClick={handleRefresh}
-              loading={refreshing}
-              spinIcon={true}
-            >
-              Refresh
-            </Button>
-            <Button
-              variant="primary"
-              icon={Plus}
-              onClick={handleAddRegistry}
-            >
-              Add Registry
-            </Button>
-          </>
-        }
-      />
-
-      {/* Loading State */}
-      {loading && <LoadingState message="Loading registries..." />}
-
-      {/* Error State */}
-      {error && !loading && (
-        <ErrorState message={error} onRetry={handleRefresh} />
-      )}
-
-      {/* Empty State */}
-      {!loading && !error && registries.length === 0 && (
-        <EmptyState
-          icon={Database}
-          title="No Registries Found"
-          description="Add your first OCI registry to start managing artifacts"
-          action={{
-            label: "Add Registry",
-            icon: Plus,
-            onClick: handleAddRegistry,
-          }}
-        />
-      )}
-
-      {/* Registry Tree Explorer (Three-Level Layout) */}
-      {!loading && !error && registries.length > 0 && (
-        <RegistryTreeExplorer registries={registries} />
-      )}
-
-      {/* Enhanced Usage Tips */}
-      {!loading && registries.length > 0 && (
-        <div className="mt-6 relative overflow-hidden bg-gradient-to-br from-purple-900/30 via-blue-900/20 to-purple-900/30 border border-purple-500/30 rounded-xl shadow-lg shadow-purple-500/10">
-          {/* Decorative background */}
-          <div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-br from-purple-500/10 to-transparent rounded-full blur-2xl"></div>
-          
-          <div className="relative p-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="p-2 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-lg border border-purple-500/30">
-                <Package className="w-5 h-5 text-purple-400" />
-              </div>
-              <h3 className="text-base font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-blue-300">
-                Quick Tips & Guide
-              </h3>
-            </div>
-            
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-purple-500/30 transition-colors">
-                <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-purple-500/20 text-purple-400 rounded-full text-xs font-bold border border-purple-500/30">1</div>
-                <div className="flex-1">
-                  <p className="text-sm text-slate-300 leading-relaxed">
-                    Click on a registry to <span className="text-purple-400 font-semibold">expand and view</span> its repositories
-                  </p>
-                </div>
-              </div>
-              
-              <div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-blue-500/30 transition-colors">
-                <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-500/20 text-blue-400 rounded-full text-xs font-bold border border-blue-500/30">2</div>
-                <div className="flex-1">
-                  <p className="text-sm text-slate-300 leading-relaxed">
-                    Use <span className="text-blue-400 font-semibold">"Browse"</span> to explore all tags and artifacts
-                  </p>
-                </div>
-              </div>
-              
-              <div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-green-500/30 transition-colors">
-                <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-green-500/20 text-green-400 rounded-full text-xs font-bold border border-green-500/30">3</div>
-                <div className="flex-1">
-                  <p className="text-sm text-slate-300 leading-relaxed">
-                    Click <span className="text-green-400 font-semibold">"Launch"</span> to deploy artifacts to your cluster
-                  </p>
-                </div>
-              </div>
-              
-              <div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-cyan-500/30 transition-colors">
-                <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-cyan-500/20 text-cyan-400 rounded-full text-xs font-bold border border-cyan-500/30">4</div>
-                <div className="flex-1">
-                  <p className="text-sm text-slate-300 leading-relaxed">
-                    Use <span className="text-cyan-400 font-semibold">search</span> to quickly find specific registries
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RegistriesBrowserPage;
--- a/frontend/src/features/artifact/registries/pages/RepositoriesBrowserPage.tsx
+++ b/frontend/src/features/artifact/registries/pages/RepositoriesBrowserPage.tsx
@ -1,290 +0,0 @@
-/**
- * Repositories Browser Page
- * 浏览特定 Registry 的所有 Repositories
- */
-import React, { useState, useEffect } from "react";
-import { Database, RefreshCw, ArrowLeft, Search, Package } from "lucide-react";
-import { useNavigate, useParams } from "react-router-dom";
-import { useToast } from "@/shared";
-import { 
-  PageHeader, 
-  Button, 
-  LoadingState, 
-  ErrorState, 
-  EmptyState 
-} from "@/shared/components";
-import { listRegistries, listRepositories } from "@/api";
-import type { ListRepositories200Item, RepositoryListResponse } from "@/api";
-import { RepositoryItem } from "../components/RepositoryItem";
-import { globalCache } from "@/shared/services/artifact-cache";
-import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-
-const RepositoriesBrowserPage: React.FC = () => {
-  const { registryId } = useParams<{ registryId: string }>();
-  const navigate = useNavigate();
-  const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
-
-  const [repositories, setRepositories] = useState<string[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [registryName, setRegistryName] = useState<string>("");
-  const [registryUrl, setRegistryUrl] = useState<string>("");
-
-  // Load registry info
-  useEffect(() => {
-    const loadRegistryInfo = async () => {
-      if (!registryId) return;
-      try {
-        const registries = await listRegistries();
-        const foundRegistry = registries.find(r => r.id === registryId);
-        if (foundRegistry) {
-          setRegistryName(foundRegistry.name || "");
-          setRegistryUrl(foundRegistry.url || "");
-        }
-      } catch (err) {
-        console.error("Failed to load registry info:", err);
-      }
-    };
-    loadRegistryInfo();
-  }, [registryId]);
-
-  // Load repositories
-  const loadRepositories = async (
-    isMounted = { current: true },
-    skipCache = false,
-    isRefresh = false
-  ) => {
-    let succeeded = false;
-    if (!registryId) {
-      setError("Registry ID is missing");
-      setLoading(false);
-      return false;
-    }
-
-    if (!skipCache && registryId) {
-      const cached = globalCache.get<string[]>("repositories", registryId);
-      if (cached) {
-        console.log(`[RepositoriesBrowserPage] Using cached repositories for ${registryId}`);
-        setRepositories(cached);
-        setLoading(false);
-        return true;
-      }
-    }
-
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
-    setError(null);
-    try {
-      const response = await listRepositories({ registryId });
-      const repos = normalizeRepositoryNames(response);
-      if (isMounted.current) {
-        setRepositories(repos);
-        if (registryId) {
-          globalCache.set("repositories", repos, registryId);
-        }
-        succeeded = true;
-      }
-    } catch (err) {
-      if (isMounted.current) {
-        const errorMsg = formatApiError(err) || RegistryErrors.LOAD_FAILED;
-        setError(errorMsg);
-        toastError(errorMsg);
-        console.error(err);
-      }
-    } finally {
-      if (isMounted.current) {
-        if (isRefresh) {
-          setRefreshing(false);
-        } else {
-          setLoading(false);
-        }
-      }
-    }
-    return succeeded;
-  };
-
-  useEffect(() => {
-    const isMounted = { current: true };
-    loadRepositories(isMounted);
-    return () => {
-      isMounted.current = false;
-    };
-  }, [registryId]);
-
-  const handleRefresh = async () => {
-    toastInfo("Refreshing repositories...", {
-      title: "Repositories Refresh",
-      durationMs: 1800,
-      mergeKey: "repositories-refresh",
-    });
-    globalCache.clearAll();
-    const refreshed = await loadRepositories({ current: true }, true, true);
-    if (refreshed) {
-      toastSuccess(SuccessMessages.DATA_REFRESHED);
-    }
-  };
-
-  const handleBack = () => {
-    navigate("/artifact/registries");
-  };
-
-  const handleRepositoryClick = (repositoryName: string) => {
-    if (registryId) {
-      const encodedName = encodeURIComponent(repositoryName);
-      navigate(`/artifact/registries/${registryId}/repositories/${encodedName}`);
-    }
-  };
-
-  // Filter repositories by search term
-  const filteredRepositories = repositories.filter((repo) =>
-    repo.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <PageHeader
-        title={`Repositories - ${registryName || registryId || "Registry"}`}
-        description={`Browse repositories in ${registryName || registryId || "this registry"}`}
-        icon={Database}
-        iconColor="text-purple-400"
-        actions={
-          <>
-            <Button
-              variant="secondary"
-              icon={ArrowLeft}
-              onClick={handleBack}
-            >
-              Back
-            </Button>
-            <Button
-              variant="secondary"
-              icon={RefreshCw}
-              onClick={handleRefresh}
-              loading={refreshing}
-              spinIcon={true}
-            >
-              Refresh
-            </Button>
-          </>
-        }
-      />
-
-      {/* Search Bar */}
-      {!loading && !error && repositories.length > 0 && (
-        <div className="mt-4">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search repositories..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 bg-dark-lighter border border-dark-border rounded-lg
-                text-white placeholder-gray-500 focus:outline-none focus:border-purple-500
-                focus:ring-1 focus:ring-purple-500"
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Loading State */}
-      {loading && <LoadingState message="Loading repositories..." />}
-
-      {/* Error State */}
-      {error && !loading && (
-        <ErrorState message={error} onRetry={handleRefresh} />
-      )}
-
-      {/* Empty State */}
-      {!loading && !error && filteredRepositories.length === 0 && (
-        <EmptyState
-          icon={Database}
-          title={searchTerm ? "No Repositories Found" : "No Repositories"}
-          description={
-            searchTerm
-              ? `No repositories match "${searchTerm}"`
-              : "This registry doesn't contain any repositories yet"
-          }
-          action={
-            !searchTerm
-              ? {
-                  label: "Back to Registries",
-                  icon: ArrowLeft,
-                  onClick: handleBack,
-                }
-              : undefined
-          }
-        />
-      )}
-
-      {/* Repositories List */}
-      {!loading && !error && filteredRepositories.length > 0 && (
-        <div className="mt-6 space-y-3">
-          {filteredRepositories.map((repo) => (
-            <div
-              key={repo}
-              onClick={() => handleRepositoryClick(repo)}
-              className="cursor-pointer"
-            >
-              <RepositoryItem
-                registryId={registryId || ""}
-                registryName={registryName}
-                registryUrl={registryUrl}
-                repository={repo}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Stats */}
-      {!loading && repositories.length > 0 && (
-        <div className="mt-6 p-4 bg-dark-card border border-dark-border rounded-lg">
-          <div className="flex items-center gap-4 text-sm text-gray-400">
-            <div className="flex items-center gap-2">
-              <Database className="w-4 h-4" />
-              <span>Registry:</span>
-              <span className="text-white font-medium">{registryName || registryId}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Package className="w-4 h-4" />
-              <span>Repositories:</span>
-              <span className="text-white font-medium">
-                {filteredRepositories.length}
-                {searchTerm && ` of ${repositories.length}`}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RepositoriesBrowserPage;
-
-function normalizeRepositoryNames(
-  payload: RepositoryListResponse | ListRepositories200Item[] | null | undefined
-): string[] {
-  if (!payload) {
-    return [];
-  }
-
-  if (Array.isArray(payload)) {
-    return payload
-      .map((repo) => (typeof repo === "string" ? repo : repo.name || ""))
-      .filter((name): name is string => Boolean(name));
-  }
-
-  if (Array.isArray(payload.repositories)) {
-    return payload.repositories.filter((name): name is string => typeof name === "string" && Boolean(name));
-  }
-
-  return [];
-}
--- a/frontend/src/features/artifact/registries/utils/artifactType.ts
+++ b/frontend/src/features/artifact/registries/utils/artifactType.ts
@ -1,40 +0,0 @@
-import type { ArtifactListItem } from "@/api";
-
-export type ArtifactCategory = "chart" | "image" | "other";
-
-/**
- * 推断 artifact 分类
- * 
- * 后端 OpenAPI 已经返回规范化的类型值：'chart', 'image', 'other'
- * 这个函数主要是类型转换和空值处理
- */
-export const inferArtifactCategory = (
-  tag: ArtifactListItem | undefined,
-): ArtifactCategory => {
-  if (!tag) {
-    return "other";
-  }
-
-  if (!tag.type) {
-    return "other";
-  }
-
-  // 后端已经返回规范化的值：'chart', 'image', 'other'
-  return tag.type as ArtifactCategory;
-};
-
-export const inferArtifactCategoryFromValues = (
-  rawType?: string | null,
-): ArtifactCategory => {
-  if (!rawType) return "other";
-  
-  const typeValue = rawType.toLowerCase().trim();
-  
-  // 后端返回规范化的值
-  if (typeValue === "chart" || typeValue === "image" || typeValue === "other") {
-    return typeValue as ArtifactCategory;
-  }
-  
-  return "other";
-};
-
--- a/frontend/src/features/auth/index.ts
+++ b/frontend/src/features/auth/index.ts
@ -1,11 +0,0 @@
-/**
- * Authentication Feature
- * 用户认证功能 - 登录和注册
- */
-
-// Export pages
-export { default as AuthPage } from './pages/AuthPage';
-
-// Export types (if any)
-// export * from './types';
-
--- a/frontend/src/features/auth/pages/AuthPage.tsx
+++ b/frontend/src/features/auth/pages/AuthPage.tsx
@ -1,265 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { LogIn, UserPlus, Loader2, Eye, EyeOff } from "lucide-react";
-import { useToast } from "@/shared";
-import { getErrorMessage } from "@/shared/utils/handleApiError";
-import { login as apiLogin, register as apiRegister, type AuthResponse } from "@/api";
-
-type Props = {
-  onLogin: (response: AuthResponse) => void;
-};
-
-const AuthPage: React.FC<Props> = ({ onLogin }) => {
-  const navigate = useNavigate();
-  const { success: toastSuccess, error: toastError, info: toastInfo } = useToast();
-
-  // Tab state
-  const [activeTab, setActiveTab] = useState<"login" | "register">("login");
-
-  // Login form
-  const [loginUsername, setLoginUsername] = useState("");
-  const [loginPassword, setLoginPassword] = useState("");
-  const [loginLoading, setLoginLoading] = useState(false);
-  const [loginError, setLoginError] = useState<string | null>(null);
-
-  // Register form
-  const [regUsername, setRegUsername] = useState("");
-  const [regPassword, setRegPassword] = useState("");
-  const [regConfirmPwd, setRegConfirmPwd] = useState("");
-  const [showPwd, setShowPwd] = useState(false);
-  const [regLoading, setRegLoading] = useState(false);
-  const [regError, setRegError] = useState<string | null>(null);
-
-  // Handle login
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!loginUsername || !loginPassword) return;
-
-    setLoginLoading(true);
-    setLoginError(null);
-    toastInfo("Logging in...", { title: "Login", durationMs: 1200 });
-
-    try {
-      const response = await apiLogin({ username: loginUsername, password: loginPassword });
-      
-      // JWT 格式: { access_token, refresh_token, username, ... }
-      toastSuccess(`Welcome, ${response.username}!`);
-      onLogin(response);
-      navigate("/home", { replace: true });
-    } catch (err: unknown) {
-      const raw = err as any;
-      const msg = raw?.message?.includes("Failed to fetch")
-        ? "Network or CORS error: Please check backend CORS or use Vite proxy in development."
-        : getErrorMessage(err, "Login failed. Please try again later.");
-
-      setLoginError(msg);
-      toastError(msg);
-    } finally {
-      setLoginLoading(false);
-    }
-  };
-
-  // Handle register
-  const handleRegister = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (regPassword !== regConfirmPwd) {
-      const msg = "Passwords do not match";
-      setRegError(msg);
-      toastError(msg);
-      return;
-    }
-
-    setRegLoading(true);
-    setRegError(null);
-    toastInfo("Registering...", { title: "Register", durationMs: 1200 });
-
-    try {
-      const registerResponse = await apiRegister({ username: regUsername, password: regPassword });
-      
-      toastSuccess(`Welcome, ${registerResponse.username}! Registration successful.`);
-      toastInfo("Signing you in...", { title: "Auto Login", durationMs: 1200 });
-
-      try {
-        const loginResponse = await apiLogin({ username: regUsername, password: regPassword });
-        // JWT 格式: { access_token, refresh_token, username, ... }
-        onLogin(loginResponse);
-        navigate("/home", { replace: true });
-      } catch (autoLoginErr: unknown) {
-        const msg = getErrorMessage(autoLoginErr, "Registration succeeded but auto login failed. Please login manually.");
-        setRegError(msg);
-        toastError(msg);
-        return;
-      }
-    } catch (err: unknown) {
-      const raw = err as any;
-      let msg = getErrorMessage(err, "Registration failed. Please try again later.");
-      
-      // 提供更友好的错误提示
-      if (raw?.message?.includes("Failed to fetch")) {
-        msg = "Network or CORS error: Please check backend CORS or use Vite proxy in development.";
-      } else if (raw?.message?.includes("username")) {
-        msg = "Username is already taken or invalid.";
-      }
-
-      setRegError(msg);
-      toastError(msg);
-      console.error("Registration error:", err);
-    } finally {
-      setRegLoading(false);
-    }
-  };
-
-  return (
-    <div className="relative min-h-screen bg-dark text-primary flex items-center justify-center px-4 sm:px-6">
-      <div className="pointer-events-none absolute inset-0 bg-app-gradient opacity-90" aria-hidden="true" />
-      <div className="relative w-full max-w-md p-6 sm:p-7 bg-dark-lighter/80 border border-dark-border/70 rounded-2xl shadow-soft backdrop-blur-xl">
-        {/* Tab Header */}
-        <div className="flex border-b border-dark-border/60 mb-6">
-          <button
-            className={`flex-1 py-3 text-center font-semibold transition-colors ${
-              activeTab === "login"
-                ? "text-brand-accent border-b-2 border-brand-accent"
-                : "text-secondary hover:text-primary"
-            }`}
-            onClick={() => setActiveTab("login")}
-          >
-            <LogIn className="w-5 h-5 inline-block mr-2" />
-            Login
-          </button>
-          <button
-            className={`flex-1 py-3 text-center font-semibold transition-colors ${
-              activeTab === "register"
-                ? "text-accent-teal border-b-2 border-accent-teal"
-                : "text-secondary hover:text-primary"
-            }`}
-            onClick={() => setActiveTab("register")}
-          >
-            <UserPlus className="w-5 h-5 inline-block mr-2" />
-            Register
-          </button>
-        </div>
-
-        {/* Login Form */}
-        {activeTab === "login" && (
-          <div className="animate-fadeIn">
-            <header className="mb-6 text-center">
-              <LogIn className="w-10 h-10 text-brand-accent mx-auto mb-2" />
-              <h1 className="text-2xl font-semibold text-primary">Welcome</h1>
-              <p className="text-secondary text-sm mt-1">Access your manager</p>
-            </header>
-
-            <form onSubmit={handleLogin} className="space-y-4">
-              <div>
-                <label className="block text-sm text-secondary">Username</label>
-                <input
-                  value={loginUsername}
-                  onChange={(e) => setLoginUsername(e.target.value)}
-                  className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-brand-accent focus:border-brand-accent focus:outline-none transition-shadow"
-                  autoComplete="username"
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm text-secondary">Password</label>
-                <input
-                  type="password"
-                  value={loginPassword}
-                  onChange={(e) => setLoginPassword(e.target.value)}
-                  className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-brand-accent focus:border-brand-accent focus:outline-none transition-shadow"
-                  autoComplete="current-password"
-                  required
-                />
-              </div>
-
-              <button
-                type="submit"
-                disabled={loginLoading}
-                className={`w-full disabled:opacity-60 font-semibold py-2.5 rounded-lg flex items-center justify-center gap-2 transition-colors duration-150
-                  ${loginLoading ? "bg-brand-accent/70 cursor-wait text-primary" : "bg-brand-accent text-dark hover:bg-brand-accent/90"}`}
-              >
-                {loginLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogIn className="w-4 h-4" />}
-                {loginLoading ? "Logging in..." : "Login"}
-              </button>
-
-              {loginError && <p className="text-red-400 text-center text-sm">{loginError}</p>}
-            </form>
-          </div>
-        )}
-
-        {/* Register Form */}
-        {activeTab === "register" && (
-          <div className="animate-fadeIn">
-            <header className="mb-6 text-center">
-              <UserPlus className="w-10 h-10 text-accent-teal mx-auto mb-2" />
-              <h1 className="text-2xl font-semibold text-primary">Create Account</h1>
-              <p className="text-secondary text-sm mt-1">Create a new account</p>
-            </header>
-
-            <form onSubmit={handleRegister} className="space-y-4">
-              <div>
-                <label className="block text-sm text-secondary">Username</label>
-                <input
-                  value={regUsername}
-                  onChange={(e) => setRegUsername(e.target.value)}
-                  className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-accent-teal focus:border-accent-teal focus:outline-none transition-shadow"
-                  autoComplete="username"
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm text-secondary">Password</label>
-                <div className="relative">
-                  <input
-                    type={showPwd ? "text" : "password"}
-                    value={regPassword}
-                    onChange={(e) => setRegPassword(e.target.value)}
-                    className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-accent-teal focus:border-accent-teal focus:outline-none transition-shadow pr-10"
-                    autoComplete="new-password"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPwd((s) => !s)}
-                    className="absolute inset-y-0 right-2 flex items-center text-secondary hover:text-primary transition-colors"
-                    aria-label={showPwd ? "Hide password" : "Show password"}
-                  >
-                    {showPwd ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
-                  </button>
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm text-secondary">Confirm Password</label>
-                <input
-                  type={showPwd ? "text" : "password"}
-                  value={regConfirmPwd}
-                  onChange={(e) => setRegConfirmPwd(e.target.value)}
-                  className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-accent-teal focus:border-accent-teal focus:outline-none transition-shadow"
-                  autoComplete="new-password"
-                  required
-                />
-              </div>
-
-              <button
-                type="submit"
-                disabled={regLoading}
-                className={`w-full disabled:opacity-60 font-semibold py-2.5 rounded-lg flex items-center justify-center gap-2 transition-colors duration-150
-                  ${regLoading ? "bg-accent-teal/70 cursor-wait text-primary" : "bg-accent-teal text-dark hover:bg-accent-teal/90"}`}
-              >
-                {regLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
-                {regLoading ? "Registering..." : "Register"}
-              </button>
-
-              {regError && <p className="text-red-400 text-center text-sm">{regError}</p>}
-            </form>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default AuthPage;
--- a/frontend/src/features/configuration/clusters/components/ClusterForm.tsx
+++ b/frontend/src/features/configuration/clusters/components/ClusterForm.tsx
@ -1,362 +0,0 @@
-/**
- * Cluster Configuration Form Component
- * For adding and editing cluster configurations
- */
-import React, { useState, useEffect } from "react";
-import { Server, Key, FileText } from "lucide-react";
-import type { ClusterConfig } from "@/core/types";
-import { ValidationErrors } from "@/shared/utils";
-import { ButtonText, LabelText } from "@/shared/constants";
-
-interface ClusterFormProps {
-  cluster?: ClusterConfig;
-  onSave: (data: Omit<ClusterConfig, "id" | "createdAt" | "updatedAt">) => void;
-  onCancel: () => void;
-}
-
-export const ClusterForm: React.FC<ClusterFormProps> = ({
-  cluster,
-  onSave,
-  onCancel,
-}) => {
-  const [formData, setFormData] = useState({
-    name: cluster?.name ?? "",
-    host: cluster?.host ?? "",
-    caData: cluster?.caData ?? "",
-    certData: cluster?.certData ?? "",
-    keyData: cluster?.keyData ?? "",
-    token: cluster?.token ?? "",
-    description: cluster?.description ?? "",
-  });
-
-  // 新证书输入（编辑模式）
-  const [newCaData, setNewCaData] = useState<string>("");
-  const [newCertData, setNewCertData] = useState<string>("");
-  const [newKeyData, setNewKeyData] = useState<string>("");
-
-  const [errors, setErrors] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    if (cluster) {
-      setFormData({
-        name: cluster.name ?? "",
-        host: cluster.host ?? "",
-        caData: cluster.caData ?? "",
-        certData: cluster.certData ?? "",
-        keyData: cluster.keyData ?? "",
-        token: cluster.token ?? "",
-        description: cluster.description ?? "",
-      });
-    }
-  }, [cluster]);
-
-  const handleChange = (
-    field: keyof typeof formData,
-    value: string
-  ) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    // Clear field error
-    if (errors[field]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev };
-        delete newErrors[field];
-        return newErrors;
-      });
-    }
-  };
-
-  const validate = (): boolean => {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.name.trim()) {
-      newErrors.name = ValidationErrors.REQUIRED_FIELD("Cluster name");
-    }
-
-    if (!formData.host.trim()) {
-      newErrors.host = ValidationErrors.REQUIRED_FIELD("API Server URL");
-    } else if (!/^https?:\/\/.+/.test(formData.host.trim())) {
-      newErrors.host = ValidationErrors.INVALID_URL;
-    }
-
-    // 创建模式：必填证书
-    if (!cluster) {
-      if (!formData.caData.trim()) {
-        newErrors.caData = ValidationErrors.REQUIRED_FIELD("CA Certificate");
-      }
-      if (!formData.certData.trim()) {
-        newErrors.certData = ValidationErrors.REQUIRED_FIELD("Client Certificate");
-      }
-      if (!formData.keyData.trim()) {
-        newErrors.keyData = ValidationErrors.REQUIRED_FIELD("Client Key");
-      }
-    }
-    // 编辑模式：证书可选（留空保持不变）
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (validate()) {
-      // 准备提交数据 - 使用 OpenAPI 生成的 camelCase 字段名
-      const submitData: Record<string, string> = {
-        name: formData.name.trim(),
-        host: formData.host.trim(),
-      };
-
-      // 只添加非空的 description
-      if (formData.description.trim()) {
-        submitData.description = formData.description.trim();
-      }
-
-      if (cluster) {
-        // 编辑模式：只发送用户输入的新值（使用 camelCase）
-        if (newCaData.trim()) submitData.caData = newCaData.trim();
-        if (newCertData.trim()) submitData.certData = newCertData.trim();
-        if (newKeyData.trim()) submitData.keyData = newKeyData.trim();
-      } else {
-        // 创建模式：发送所有必填字段（使用 camelCase）
-        submitData.caData = formData.caData.trim();
-        submitData.certData = formData.certData.trim();
-        submitData.keyData = formData.keyData.trim();
-        if (formData.token?.trim()) submitData.token = formData.token.trim();
-      }
-
-      onSave(submitData);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
-      {/* Cluster Name */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
-          <Server className="w-4 h-4 text-blue-400" />
-          {LabelText.NAME} <span className="text-red-400">*</span>
-        </label>
-        <input
-          type="text"
-          value={formData.name}
-          onChange={(e) => handleChange("name", e.target.value)}
-          className={`w-full bg-gray-900/60 border ${
-            errors.name ? "border-red-500" : "border-gray-600"
-          } rounded-lg p-2.5 sm:p-3 text-sm sm:text-base text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none`}
-          placeholder="e.g., Production Cluster"
-        />
-        {errors.name && (
-          <p className="mt-1 text-sm text-red-400">{errors.name}</p>
-        )}
-      </div>
-
-      {/* API Server URL */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
-          <Server className="w-4 h-4 text-blue-400" />
-          API Server URL <span className="text-red-400">*</span>
-        </label>
-        <input
-          type="text"
-          value={formData.host}
-          onChange={(e) => handleChange("host", e.target.value)}
-          className={`w-full bg-gray-900/60 border ${
-            errors.host ? "border-red-500" : "border-gray-600"
-          } rounded-lg p-2.5 sm:p-3 text-sm sm:text-base text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none`}
-          placeholder="e.g., https://kubernetes.example.com:6443"
-        />
-        {errors.host && (
-          <p className="mt-1 text-sm text-red-400">{errors.host}</p>
-        )}
-        <p className="mt-1 text-xs text-gray-500">
-          Kubernetes API Server address (usually HTTPS protocol)
-        </p>
-      </div>
-
-      {/* CA Certificate */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
-          <Key className="w-4 h-4 text-green-400" />
-          CA Certificate (Base64) {!cluster && <span className="text-red-400">*</span>}
-        </label>
-        {cluster ? (
-          // 编辑模式：显示状态和新输入
-          <>
-            <div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
-              <span className="text-gray-400 text-sm">当前:</span>
-              <span className="text-white font-mono text-xs">{formData.caData}</span>
-              {cluster.hasCaData && (
-                <span className="ml-auto text-xs text-green-400 flex items-center gap-1">
-                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
-                  已配置（加密存储）
-                </span>
-              )}
-            </div>
-            <textarea
-              value={newCaData}
-              onChange={(e) => setNewCaData(e.target.value)}
-              rows={3}
-              className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none"
-              placeholder="粘贴新的 CA 证书以覆盖（留空保持不变）"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              💡 输入新证书以覆盖，留空则保持原证书不变
-            </p>
-          </>
-        ) : (
-          // 创建模式：必填
-          <>
-            <textarea
-              value={formData.caData}
-              onChange={(e) => handleChange("caData", e.target.value)}
-              rows={4}
-              className={`w-full bg-gray-900/60 border ${
-                errors.caData ? "border-red-500" : "border-gray-600"
-              } rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none`}
-              placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0t..."
-            />
-            {errors.caData && (
-              <p className="mt-1 text-sm text-red-400">{errors.caData}</p>
-            )}
-            <p className="mt-1 text-xs text-gray-500">
-              Cluster CA certificate in base64 format (certificate-authority-data)
-            </p>
-          </>
-        )}
-      </div>
-
-      {/* Client Certificate */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
-          <Key className="w-4 h-4 text-yellow-400" />
-          Client Certificate (Base64) {!cluster && <span className="text-red-400">*</span>}
-        </label>
-        {cluster ? (
-          // 编辑模式
-          <>
-            <div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
-              <span className="text-gray-400 text-sm">当前:</span>
-              <span className="text-white font-mono text-xs">{formData.certData}</span>
-              {cluster.hasCertData && (
-                <span className="ml-auto text-xs text-green-400 flex items-center gap-1">
-                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
-                  已配置（加密存储）
-                </span>
-              )}
-            </div>
-            <textarea
-              value={newCertData}
-              onChange={(e) => setNewCertData(e.target.value)}
-              rows={3}
-              className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none"
-              placeholder="粘贴新的客户端证书以覆盖（留空保持不变）"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              💡 输入新证书以覆盖，留空则保持原证书不变
-            </p>
-          </>
-        ) : (
-          <>
-            <textarea
-              value={formData.certData}
-              onChange={(e) => handleChange("certData", e.target.value)}
-              rows={4}
-              className={`w-full bg-gray-900/60 border ${
-                errors.certData ? "border-red-500" : "border-gray-600"
-              } rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none`}
-              placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0t..."
-            />
-            {errors.certData && (
-              <p className="mt-1 text-sm text-red-400">{errors.certData}</p>
-            )}
-            <p className="mt-1 text-xs text-gray-500">
-              Client certificate in base64 format (client-certificate-data)
-            </p>
-          </>
-        )}
-      </div>
-
-      {/* Client Key */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
-          <Key className="w-4 h-4 text-red-400" />
-          Client Key (Base64) {!cluster && <span className="text-red-400">*</span>}
-        </label>
-        {cluster ? (
-          // 编辑模式
-          <>
-            <div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
-              <span className="text-gray-400 text-sm">当前:</span>
-              <span className="text-white font-mono text-xs">{formData.keyData}</span>
-              {cluster.hasKeyData && (
-                <span className="ml-auto text-xs text-green-400 flex items-center gap-1">
-                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
-                  已配置（加密存储）
-                </span>
-              )}
-            </div>
-            <textarea
-              value={newKeyData}
-              onChange={(e) => setNewKeyData(e.target.value)}
-              rows={3}
-              className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none"
-              placeholder="粘贴新的客户端密钥以覆盖（留空保持不变）"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              💡 输入新密钥以覆盖，留空则保持原密钥不变
-            </p>
-          </>
-        ) : (
-          <>
-            <textarea
-              value={formData.keyData}
-              onChange={(e) => handleChange("keyData", e.target.value)}
-              rows={4}
-              className={`w-full bg-gray-900/60 border ${
-                errors.keyData ? "border-red-500" : "border-gray-600"
-              } rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none`}
-              placeholder="LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBL..."
-            />
-            {errors.keyData && (
-              <p className="mt-1 text-sm text-red-400">{errors.keyData}</p>
-            )}
-            <p className="mt-1 text-xs text-gray-500">
-              Client private key in base64 format (client-key-data)
-            </p>
-          </>
-        )}
-      </div>
-
-      {/* Description */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
-          <FileText className="w-4 h-4 text-gray-400" />
-          {LabelText.DESCRIPTION} (Optional)
-        </label>
-        <textarea
-          value={formData.description}
-          onChange={(e) => handleChange("description", e.target.value)}
-          rows={2}
-          className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-sm sm:text-base text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
-          placeholder="Cluster description (e.g., purpose, environment)"
-        />
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex flex-col sm:flex-row gap-2 sm:gap-3 pt-3 sm:pt-4 border-t border-gray-700">
-        <button
-          type="button"
-          onClick={onCancel}
-          className="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition text-sm sm:text-base"
-        >
-          {ButtonText.CANCEL}
-        </button>
-        <button
-          type="submit"
-          className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition text-sm sm:text-base"
-        >
-          {cluster ? ButtonText.SAVE : `${ButtonText.ADD} ${LabelText.CLUSTER}`}
-        </button>
-      </div>
-    </form>
-  );
-};
--- a/frontend/src/features/configuration/clusters/components/ClusterList.tsx
+++ b/frontend/src/features/configuration/clusters/components/ClusterList.tsx
@ -1,135 +0,0 @@
-/**
- * Cluster Configuration List Component
- * Display cluster list with edit and delete actions
- */
-import React from "react";
-import { Server, Edit, Trash2, Key, ExternalLink } from "lucide-react";
-import type { ClusterConfig } from "@/core/types";
-import { LoadingText, EmptyText } from "@/shared/constants";
-
-interface ClusterListProps {
-  clusters: ClusterConfig[];
-  loading: boolean;
-  onEdit: (cluster: ClusterConfig) => void;
-  onDelete: (cluster: ClusterConfig) => void;
-}
-
-export const ClusterList: React.FC<ClusterListProps> = ({
-  clusters,
-  loading,
-  onEdit,
-  onDelete,
-}) => {
-  if (loading) {
-    return (
-      <div className="text-center py-12">
-        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400"></div>
-        <p className="text-gray-400 mt-4">{LoadingText.LOADING_CLUSTERS}</p>
-      </div>
-    );
-  }
-
-  if (clusters.length === 0) {
-    return (
-      <div className="text-center py-12">
-        <Server className="w-16 h-16 text-gray-600 mx-auto mb-4" />
-        <p className="text-gray-400 text-lg mb-2">{EmptyText.NO_CLUSTERS}</p>
-        <p className="text-gray-500 text-sm">{EmptyText.NO_CLUSTERS_DESC}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {clusters.map((cluster) => (
-        <div
-          key={cluster.id}
-          className="bg-gray-800/50 border border-gray-700 rounded-lg p-5 hover:bg-gray-800 hover:border-gray-600 transition group"
-        >
-          {/* Header */}
-          <div className="flex items-start justify-between mb-4">
-            <div className="flex-1">
-              <h3 className="text-lg font-semibold text-white flex items-center gap-2 mb-1">
-                <Server className="w-5 h-5 text-blue-400" />
-                {cluster.name}
-              </h3>
-              {cluster.description && (
-                <p className="text-sm text-gray-400">{cluster.description}</p>
-              )}
-            </div>
-            <div className="flex gap-2 ml-4">
-              <button
-                onClick={() => onEdit(cluster)}
-                className="p-2 text-gray-400 hover:text-blue-400 hover:bg-blue-400/10 rounded-lg transition"
-                title="Edit"
-              >
-                <Edit className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => onDelete(cluster)}
-                className="p-2 text-gray-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition"
-                title="Delete"
-              >
-                <Trash2 className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          {/* Server Info */}
-          <div className="space-y-3">
-            <div className="flex items-start gap-2">
-              <ExternalLink className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
-              <div className="flex-1 min-w-0">
-                <p className="text-xs text-gray-500 mb-0.5">API Server URL</p>
-                <p className="text-sm text-gray-300 font-mono truncate" title={cluster.host}>
-                  {cluster.host}
-                </p>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-3 gap-3">
-              <div className="flex items-start gap-2">
-                <Key className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs text-gray-500 mb-0.5">CA Certificate</p>
-                  <p className={`text-xs ${cluster.hasCaData ? "text-green-400" : "text-gray-500"}`}>
-                    {cluster.hasCaData ? "✓ Configured" : "✗ Not Configured"}
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start gap-2">
-                <Key className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs text-gray-500 mb-0.5">Client Cert</p>
-                  <p className={`text-xs ${cluster.hasCertData ? "text-yellow-400" : "text-gray-500"}`}>
-                    {cluster.hasCertData ? "✓ Configured" : "✗ Not Configured"}
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start gap-2">
-                <Key className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs text-gray-500 mb-0.5">Client Key</p>
-                  <p className={`text-xs ${cluster.hasKeyData ? "text-red-400" : "text-gray-500"}`}>
-                    {cluster.hasKeyData ? "✓ Configured" : "✗ Not Configured"}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Footer */}
-          {cluster.createdAt && (
-            <div className="mt-4 pt-4 border-t border-gray-700/50">
-              <p className="text-xs text-gray-500">
-                Created: {new Date(cluster.createdAt).toLocaleString("en-US")}
-              </p>
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-};
--- a/frontend/src/features/configuration/clusters/index.ts
+++ b/frontend/src/features/configuration/clusters/index.ts
@ -1,12 +0,0 @@
-/**
- * Cluster Management Feature
- * 集群配置管理功能
- */
-
-// Export pages
-export { default as ClusterConfigPage } from './pages/ClusterConfigPage';
-
-// Export components
-export { ClusterForm } from './components/ClusterForm';
-export { ClusterList } from './components/ClusterList';
-
--- a/frontend/src/features/configuration/clusters/pages/ClusterConfigPage.tsx
+++ b/frontend/src/features/configuration/clusters/pages/ClusterConfigPage.tsx
@ -1,247 +0,0 @@
-/**
- * Cluster Configuration Page
- * Manage Kubernetes cluster configurations
- */
-import React, { useState, useEffect } from "react";
-import { Plus, RefreshCw, Server } from "lucide-react";
-import { useToast, Modal, Button, PageHeader } from "@/shared";
-import { ClusterErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-import { ClusterForm } from "../components/ClusterForm";
-import { ClusterList } from "../components/ClusterList";
-import {
-  listClusters,
-  createCluster,
-  updateCluster,
-  deleteCluster,
-} from "@/api";
-import type { ClusterConfig, ClusterResponse } from "@/core/types";
-
-const ClusterConfigPage: React.FC = () => {
-  const { success, error: toastError, info: toastInfo } = useToast();
-
-  const [clusters, setClusters] = useState<ClusterConfig[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [showModal, setShowModal] = useState(false);
-  const [editingCluster, setEditingCluster] = useState<ClusterConfig | undefined>(undefined);
-
-  // Load clusters
-  const loadClusters = async (isMounted = { current: true }, isRefresh = false) => {
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
-    let succeeded = false;
-    try {
-      const data = await listClusters();
-      // Only update state if component is still mounted
-      if (isMounted.current) {
-        setClusters(data);
-        succeeded = true;
-      }
-    } catch (err) {
-      if (isMounted.current) {
-        toastError(formatApiError(err) || ClusterErrors.LOAD_FAILED);
-        console.error(err);
-      }
-    } finally {
-      if (isMounted.current) {
-        if (isRefresh) {
-          setRefreshing(false);
-        } else {
-          setLoading(false);
-        }
-      }
-    }
-    return succeeded;
-  };
-
-  useEffect(() => {
-    const isMounted = { current: true };
-    loadClusters(isMounted);
-    
-    // Cleanup: mark component as unmounted
-    return () => {
-      isMounted.current = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Refresh clusters
-  const handleRefresh = async () => {
-    toastInfo("Refreshing clusters...", {
-      title: "Cluster Refresh",
-      durationMs: 1800,
-      mergeKey: "clusters-refresh",
-    });
-    const refreshed = await loadClusters({ current: true }, true);
-    if (refreshed) {
-      success(SuccessMessages.DATA_REFRESHED);
-    }
-  };
-
-  // Add cluster
-  const handleAdd = () => {
-    setEditingCluster(undefined);
-    setShowModal(true);
-  };
-
-  // Edit cluster
-  const handleEdit = (cluster: ClusterResponse) => {
-    setEditingCluster(cluster);
-    setShowModal(true);
-  };
-
-  // Save cluster
-  const handleSave = async (
-    data: Omit<ClusterResponse, "id" | "createdAt" | "updatedAt">
-  ) => {
-    try {
-      const actionLabel = editingCluster ? "Updating cluster..." : "Creating cluster...";
-      toastInfo(actionLabel, {
-        title: editingCluster ? "Update Cluster" : "Create Cluster",
-        durationMs: 1800,
-        mergeKey: editingCluster ? `cluster-save-${editingCluster.id}` : "cluster-create",
-      });
-
-      if (editingCluster) {
-        if (!editingCluster.id) {
-          toastError("Cluster identifier is missing. Please refresh and try again.");
-          return;
-        }
-        await updateCluster({ clusterId: editingCluster.id }, data);
-        success(SuccessMessages.CLUSTER_UPDATED);
-      } else {
-        // Build create data with only non-empty auth fields
-        const createData: any = {
-          name: data.name,
-          host: data.host,
-          description: data.description,
-        };
-        
-        // Add certificate auth if all three fields are provided
-        if (data.caData && data.certData && data.keyData) {
-          createData.caData = data.caData;
-          createData.certData = data.certData;
-          createData.keyData = data.keyData;
-        }
-        
-        // Add token auth if provided
-        if (data.token) {
-          createData.token = data.token;
-        }
-        
-        await createCluster(createData);
-        success(SuccessMessages.CLUSTER_CREATED);
-      }
-      setShowModal(false);
-      setEditingCluster(undefined);
-      loadClusters({ current: true });
-    } catch (error) {
-      const errorMsg = editingCluster ? ClusterErrors.UPDATE_FAILED : ClusterErrors.CREATE_FAILED;
-      toastError(formatApiError(error) || errorMsg);
-      console.error(error);
-    }
-  };
-
-  // Delete cluster
-  const handleDelete = async (cluster: ClusterResponse) => {
-    if (!confirm(`Are you sure you want to delete cluster "${cluster.name}"? This action cannot be undone.`)) {
-      return;
-    }
-
-    try {
-      toastInfo(`Deleting cluster "${cluster.name}"...`, {
-        title: "Delete Cluster",
-        durationMs: 1800,
-        mergeKey: `cluster-delete-${cluster.id}`,
-      });
-      if (!cluster.id) {
-        toastError("Cluster identifier is missing. Please refresh and try again.");
-        return;
-      }
-      await deleteCluster({ clusterId: cluster.id });
-      success(SuccessMessages.CLUSTER_DELETED);
-      loadClusters({ current: true });
-    } catch (error) {
-      toastError(formatApiError(error) || ClusterErrors.DELETE_FAILED);
-      console.error(error);
-    }
-  };
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <PageHeader
-        title="Configuration - Clusters"
-        description="Manage Kubernetes cluster connections and authentication"
-        icon={Server}
-        iconColor="text-blue-400"
-        actions={
-          <>
-            <Button
-              variant="secondary"
-              icon={RefreshCw}
-              onClick={handleRefresh}
-              loading={refreshing}
-              spinIcon={true}
-            >
-              Refresh
-            </Button>
-            <Button
-              variant="primary"
-              icon={Plus}
-              onClick={handleAdd}
-              className="bg-blue-600 hover:bg-blue-700 border-blue-600"
-            >
-              Add Cluster
-            </Button>
-          </>
-        }
-      />
-
-      {/* Cluster List */}
-      <ClusterList
-        clusters={clusters}
-        loading={loading}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-
-      {/* Info Section */}
-      <div className="mt-8 p-4 bg-blue-900/20 border border-blue-700/50 rounded-lg">
-        <h3 className="text-sm font-semibold text-blue-300 mb-2">💡 Usage Tips</h3>
-        <ul className="text-sm text-gray-400 space-y-1">
-          <li>• Cluster configuration contains all information needed to connect to a Kubernetes cluster</li>
-          <li>• <strong>Cluster Address</strong>: URL of the Kubernetes API Server</li>
-          <li>• <strong>Certificate Format</strong>: All certificate fields use base64 encoded strings (same as kubeconfig)</li>
-          <li>• <strong>Backend Processing</strong>: The backend automatically handles certificate format conversion</li>
-          <li>• You can select clusters for application deployment on the instances page</li>
-          <li>• Recommended to configure separate clusters for different environments (development, testing, production)</li>
-        </ul>
-      </div>
-
-      {/* Add/Edit Modal */}
-      <Modal
-        open={showModal}
-        onClose={() => {
-          setShowModal(false);
-          setEditingCluster(undefined);
-        }}
-        title={editingCluster ? "Edit Cluster Configuration" : "Add Cluster Configuration"}
-      >
-        <ClusterForm
-          cluster={editingCluster}
-          onSave={handleSave}
-          onCancel={() => {
-            setShowModal(false);
-            setEditingCluster(undefined);
-          }}
-        />
-      </Modal>
-    </div>
-  );
-};
-
-export default ClusterConfigPage;
--- a/frontend/src/features/configuration/index.ts
+++ b/frontend/src/features/configuration/index.ts
@ -1,15 +0,0 @@
-/**
- * Configuration Module
- * 配置模块 - 集群和仓库配置
- */
-
-// Clusters
-export { default as ClusterConfigPage } from './clusters/pages/ClusterConfigPage';
-export * from './clusters/components/ClusterList';
-export * from './clusters/components/ClusterForm';
-
-// Registries
-export { default as RegistryConfigPage } from './registries/pages/RegistryConfigPage';
-export * from './registries/components/RegistryList';
-export * from './registries/components/RegistryForm';
-
--- a/frontend/src/features/configuration/registries/components/RegistryForm.tsx
+++ b/frontend/src/features/configuration/registries/components/RegistryForm.tsx
@ -1,260 +0,0 @@
-/**
- * Registry Configuration Form
- * For adding and editing registry configurations
- */
-import React, { useState } from "react";
-import { Save, X, TestTube } from "lucide-react";
-import type { RegistryResponse } from "@/core/types";
-import { checkRegistryHealth } from "@/api";
-import { useToast } from "@/shared";
-import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-import { ButtonText, LabelText } from "@/shared/constants";
-
-interface RegistryFormProps {
-  registry?: RegistryResponse;
-  onSave: (data: Omit<RegistryResponse, "id">) => void;
-  onCancel: () => void;
-}
-
-export const RegistryForm: React.FC<RegistryFormProps> = ({
-  registry,
-  onSave,
-  onCancel,
-}) => {
-  const { success, error: toastError, info: toastInfo } = useToast();
-  const [testing, setTesting] = useState(false);
-
-  const [formData, setFormData] = useState<
-    Omit<RegistryResponse, "id" | "createdAt" | "updatedAt">
-  >({
-    name: registry?.name || "",
-    url: registry?.url || "",
-    description: registry?.description || "",
-    username: registry?.username || "",
-    password: registry?.password || "",
-    hasPassword: registry?.hasPassword || false,
-    insecure: registry?.insecure || false,
-  });
-
-  // 新密码输入（编辑模式）
-  const [newPassword, setNewPassword] = useState<string>("");
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value, type } = e.target;
-    const checked = type === "checkbox" ? (e.target as HTMLInputElement).checked : undefined;
-
-    setFormData((prev) => ({
-      ...prev,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    // 准备提交数据
-    const submitData = { ...formData };
-    
-    // 编辑模式：如果用户输入了新密码，使用新密码；否则不发送密码字段
-    if (registry) {
-      if (newPassword) {
-        submitData.password = newPassword;
-      } else {
-        // 不发送密码字段，保持后端原有密码
-        delete (submitData as any).password;
-      }
-    }
-    
-    onSave(submitData);
-  };
-
-  const handleTest = async () => {
-    if (!registry?.id) {
-      toastError("Please save the registry configuration before testing the connection.");
-      return;
-    }
-
-    toastInfo("Testing registry connection...", {
-      title: "Connection Test",
-      durationMs: 1800,
-      mergeKey: `registry-test-${registry.id}`,
-    });
-
-    setTesting(true);
-    try {
-      const result = await checkRegistryHealth({ registryId: registry.id }) as any;
-      // ✅ FIX: Backend returns { healthy: boolean, message: string }
-      if (result.healthy === true) {
-        success(result.message || SuccessMessages.REGISTRY_CONNECTION_OK);
-      } else {
-        const errorMsg = result.message || RegistryErrors.CONNECTION_TEST_FAILED;
-        toastError(errorMsg);
-      }
-    } catch (error) {
-      toastError(formatApiError(error) || RegistryErrors.CONNECTION_TEST_FAILED);
-      console.error(error);
-    } finally {
-      setTesting(false);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      {/* Name */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1">
-          {LabelText.NAME} <span className="text-red-400">*</span>
-        </label>
-        <input
-          type="text"
-          name="name"
-          value={formData.name}
-          onChange={handleChange}
-          required
-          placeholder="e.g., Harbor Production"
-          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
-        />
-      </div>
-
-      {/* URL */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1">
-          Registry URL <span className="text-red-400">*</span>
-        </label>
-        <input
-          type="url"
-          name="url"
-          value={formData.url}
-          onChange={handleChange}
-          required
-          placeholder="https://registry.example.com"
-          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
-        />
-        <p className="mt-1 text-xs text-gray-500">
-          OCI registry access URL (e.g., https://registry.hub.docker.com)
-        </p>
-      </div>
-
-      {/* Username */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1">
-          {LabelText.USERNAME} <span className="text-red-400">*</span>
-        </label>
-        <input
-          type="text"
-          name="username"
-          value={formData.username}
-          onChange={handleChange}
-          required
-          placeholder="Registry username"
-          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
-        />
-      </div>
-
-      {/* Password */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1">
-          {LabelText.PASSWORD} {!registry && <span className="text-red-400">*</span>}
-        </label>
-        {registry ? (
-          // 编辑模式：显示状态和新密码输入
-          <>
-            <div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
-              <span className="text-gray-400 text-sm">当前密码:</span>
-              <span className="text-white font-mono">{formData.password}</span>
-              {formData.hasPassword && (
-                <span className="ml-auto text-xs text-green-400 flex items-center gap-1">
-                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
-                  已设置（加密存储）
-                </span>
-              )}
-            </div>
-            <input
-              type="password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              placeholder="输入新密码以覆盖（留空保持不变）"
-              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              💡 输入新密码以覆盖原密码，留空则保持原密码不变
-            </p>
-          </>
-        ) : (
-          // 创建模式：必填
-          <input
-            type="password"
-            name="password"
-            value={formData.password}
-            onChange={handleChange}
-            required
-            placeholder="Registry password or access token"
-            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
-          />
-        )}
-      </div>
-
-      {/* Description */}
-      <div>
-        <label className="block text-sm font-medium text-gray-300 mb-1">
-          {LabelText.DESCRIPTION}
-        </label>
-        <textarea
-          name="description"
-          value={formData.description}
-          onChange={handleChange}
-          rows={3}
-          placeholder="Registry purpose or description"
-          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none resize-none"
-        />
-      </div>
-
-      {/* Insecure */}
-      <div className="flex items-center">
-        <input
-          type="checkbox"
-          id="insecure"
-          name="insecure"
-          checked={formData.insecure}
-          onChange={handleChange}
-          className="w-4 h-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-2"
-        />
-        <label htmlFor="insecure" className="ml-2 text-sm text-gray-300">
-          Allow insecure connection (skip SSL certificate verification)
-        </label>
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex items-center gap-2 pt-4">
-        <button
-          type="submit"
-          className="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition flex items-center justify-center gap-2"
-        >
-          <Save className="w-4 h-4" />
-          {ButtonText.SAVE}
-        </button>
-        {registry?.id && (
-          <button
-            type="button"
-            onClick={handleTest}
-            disabled={testing}
-            className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition flex items-center gap-2 disabled:opacity-50"
-          >
-            <TestTube className={`w-4 h-4 ${testing ? "animate-pulse" : ""}`} />
-            {ButtonText.TEST_CONNECTION}
-          </button>
-        )}
-        <button
-          type="button"
-          onClick={onCancel}
-          className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition flex items-center gap-2"
-        >
-          <X className="w-4 h-4" />
-          {ButtonText.CANCEL}
-        </button>
-      </div>
-    </form>
-  );
-};
--- a/frontend/src/features/configuration/registries/components/RegistryList.tsx
+++ b/frontend/src/features/configuration/registries/components/RegistryList.tsx
@ -1,111 +0,0 @@
-/**
- * Registry Configuration List
- * Display all registry configurations
- */
-import React from "react";
-import { Edit2, Trash2, Database, ExternalLink } from "lucide-react";
-import type { AppRegistry } from "@/core/types";
-import { EmptyStateSimple } from "@/shared/components";
-import { LoadingText, EmptyText } from "@/shared/constants";
-
-interface RegistryListProps {
-  registries: AppRegistry[];
-  loading: boolean;
-  onEdit: (registry: AppRegistry) => void;
-  onDelete: (registry: AppRegistry) => void;
-}
-
-export const RegistryList: React.FC<RegistryListProps> = ({
-  registries,
-  loading,
-  onEdit,
-  onDelete,
-}) => {
-  if (loading) {
-    return (
-      <div className="text-center py-12 text-gray-400">
-        {LoadingText.LOADING_REGISTRIES}
-      </div>
-    );
-  }
-
-  if (registries.length === 0) {
-    return (
-      <EmptyStateSimple
-        title={EmptyText.NO_REGISTRIES}
-        description={EmptyText.NO_REGISTRIES_DESC}
-        Icon={Database}
-      />
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {registries.map((registry) => (
-        <div
-          key={registry.id}
-          className="p-4 bg-gray-800 border border-gray-700 rounded-lg hover:border-gray-600 transition"
-        >
-          <div className="flex items-start justify-between">
-            {/* Left: Basic Info */}
-            <div className="flex-1">
-              <div className="flex items-center gap-3 mb-2">
-                <Database className="w-5 h-5 text-purple-400 flex-shrink-0" />
-                <h3 className="text-lg font-semibold text-white">
-                  {registry.name}
-                </h3>
-                {registry.insecure && (
-                  <span className="px-2 py-0.5 bg-yellow-900/30 text-yellow-400 text-xs rounded">
-                    Insecure
-                  </span>
-                )}
-              </div>
-
-              <div className="ml-8 space-y-1">
-                <div className="flex items-center gap-2 text-sm text-gray-400">
-                  <ExternalLink className="w-4 h-4" />
-                  <a
-                    href={registry.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="hover:text-purple-400 transition"
-                  >
-                    {registry.url}
-                  </a>
-                </div>
-
-                {registry.description && (
-                  <p className="text-sm text-gray-500">{registry.description}</p>
-                )}
-
-                {registry.username && (
-                  <p className="text-sm text-gray-500">
-                    Username: <span className="text-gray-400">{registry.username}</span>
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* Right: Action Buttons */}
-            <div className="flex items-center gap-2 ml-4">
-              <button
-                onClick={() => onEdit(registry)}
-                className="p-2 text-gray-400 hover:text-blue-400 hover:bg-gray-700 rounded-lg transition"
-                title="Edit"
-              >
-                <Edit2 className="w-4 h-4" />
-              </button>
-              <button
-                onClick={() => onDelete(registry)}
-                className="p-2 text-gray-400 hover:text-red-400 hover:bg-gray-700 rounded-lg transition"
-                title="Delete"
-              >
-                <Trash2 className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
--- a/frontend/src/features/configuration/registries/index.ts
+++ b/frontend/src/features/configuration/registries/index.ts
@ -1,12 +0,0 @@
-/**
- * Registry Management Feature
- * OCI 仓库配置管理功能
- */
-
-// Export pages
-export { default as RegistryConfigPage } from './pages/RegistryConfigPage';
-
-// Export components
-export { RegistryForm } from './components/RegistryForm';
-export { RegistryList } from './components/RegistryList';
-
--- a/frontend/src/features/configuration/registries/pages/RegistryConfigPage.tsx
+++ b/frontend/src/features/configuration/registries/pages/RegistryConfigPage.tsx
@ -1,248 +0,0 @@
-/**
- * Registry Configuration Page
- * Manage OCI Registry configurations
- */
-import React, { useState, useEffect } from "react";
-import { Plus, RefreshCw, Database } from "lucide-react";
-import { useToast } from "@/shared";
-import { Modal, PageHeader, Button } from "@/shared/components";
-import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-import { RegistryForm } from "../components/RegistryForm";
-import { RegistryList } from "../components/RegistryList";
-import {
-  listRegistries,
-  createRegistry,
-  updateRegistry,
-  deleteRegistry,
-} from "@/api";
-import type { CreateRegistryRequest } from "@/api";
-import type { AppRegistry, RegistryResponse } from "@/core/types";
-
-const RegistryConfigPage: React.FC = () => {
-  const { success, error: toastError, info: toastInfo } = useToast();
-
-  const [registries, setRegistries] = useState<AppRegistry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [showModal, setShowModal] = useState(false);
-  const [editingRegistry, setEditingRegistry] = useState<AppRegistry | undefined>(undefined);
-
-  // Load registries
-  const loadRegistries = async (isMounted = { current: true }, isRefresh = false) => {
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
-    let succeeded = false;
-    try {
-      const data = await listRegistries();
-      // Only update state if component is still mounted
-      if (isMounted.current) {
-        setRegistries(data);
-        succeeded = true;
-      }
-    } catch (err) {
-      if (isMounted.current) {
-        toastError(formatApiError(err) || RegistryErrors.LOAD_FAILED);
-        console.error(err);
-      }
-    } finally {
-      if (isMounted.current) {
-        if (isRefresh) {
-          setRefreshing(false);
-        } else {
-          setLoading(false);
-        }
-      }
-    }
-    return succeeded;
-  };
-
-  useEffect(() => {
-    const isMounted = { current: true };
-    loadRegistries(isMounted);
-    
-    // Cleanup: mark component as unmounted
-    return () => {
-      isMounted.current = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Refresh registries
-  const handleRefresh = async () => {
-    toastInfo("Refreshing registries...", {
-      title: "Registry Refresh",
-      durationMs: 1800,
-      mergeKey: "registries-refresh",
-    });
-    const refreshed = await loadRegistries({ current: true }, true);
-    if (refreshed) {
-      success(SuccessMessages.DATA_REFRESHED);
-    }
-  };
-
-  // Add registry
-  const handleAdd = () => {
-    setEditingRegistry(undefined);
-    setShowModal(true);
-  };
-
-  // Edit registry
-  const handleEdit = (registry: RegistryResponse) => {
-    setEditingRegistry(registry);
-    setShowModal(true);
-  };
-
-  // Save registry
-  const handleSave = async (data: Omit<RegistryResponse, "id">) => {
-    try {
-      const actionLabel = editingRegistry ? "Updating registry..." : "Creating registry...";
-      toastInfo(actionLabel, {
-        title: editingRegistry ? "Update Registry" : "Create Registry",
-        durationMs: 1800,
-        mergeKey: editingRegistry ? `registry-save-${editingRegistry.id}` : "registry-create",
-      });
-
-      if (editingRegistry) {
-        if (!editingRegistry.id) {
-          toastError("Registry identifier is missing. Please refresh and try again.");
-          return;
-        }
-        await updateRegistry({ registryId: editingRegistry.id }, data);
-        success(SuccessMessages.REGISTRY_UPDATED);
-      } else {
-        if (!data.name || !data.url || !data.username || !data.password) {
-          toastError("Name, URL, username, and password are required to create a registry.");
-          return;
-        }
-        const createData: CreateRegistryRequest = {
-          name: data.name,
-          url: data.url,
-          username: data.username,
-          password: data.password,
-          description: data.description || "",
-          insecure: data.insecure ?? false,
-        };
-        const newRegistry = await createRegistry(createData);
-        success(SuccessMessages.REGISTRY_CREATED);
-        console.log("New registry added:", newRegistry);
-      }
-      setShowModal(false);
-      setEditingRegistry(undefined);
-      await loadRegistries({ current: true });
-      
-      // Notify other pages to refresh (if registry browser is open)
-      localStorage.setItem('registry_updated', Date.now().toString());
-      localStorage.removeItem('registry_updated');
-    } catch (error) {
-      const errorMsg = editingRegistry ? RegistryErrors.UPDATE_FAILED : RegistryErrors.CREATE_FAILED;
-      toastError(formatApiError(error) || errorMsg);
-      console.error("Registry save error:", error);
-      
-      // Don't close modal so user can retry
-      throw error;
-    }
-  };
-
-  // Delete registry
-  const handleDelete = async (registry: RegistryResponse) => {
-    if (!confirm(`Are you sure you want to delete registry "${registry.name}"? This action cannot be undone.`)) {
-      return;
-    }
-
-    try {
-      toastInfo(`Deleting registry "${registry.name}"...`, {
-        title: "Delete Registry",
-        durationMs: 1800,
-        mergeKey: `registry-delete-${registry.id}`,
-      });
-      if (!registry.id) {
-        toastError("Registry identifier is missing. Please refresh and try again.");
-        return;
-      }
-      await deleteRegistry({ registryId: registry.id });
-      success(SuccessMessages.REGISTRY_DELETED);
-      loadRegistries({ current: true });
-    } catch (error) {
-      toastError(formatApiError(error) || RegistryErrors.DELETE_FAILED);
-      console.error(error);
-    }
-  };
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <PageHeader
-        title="Configuration - Registries"
-        description="Manage OCI Registry connections and authentication"
-        icon={Database}
-        iconColor="text-purple-400"
-        actions={
-          <>
-            <Button
-              variant="secondary"
-              icon={RefreshCw}
-              onClick={handleRefresh}
-              loading={refreshing}
-              spinIcon={true}
-            >
-              Refresh
-            </Button>
-            <Button
-              variant="primary"
-              icon={Plus}
-              onClick={handleAdd}
-            >
-              Add Registry
-            </Button>
-          </>
-        }
-      />
-
-      {/* Registry List */}
-      <RegistryList
-        registries={registries}
-        loading={loading}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-
-      {/* Info Section */}
-      <div className="mt-8 p-4 bg-purple-900/20 border border-purple-700/50 rounded-lg">
-        <h3 className="text-sm font-semibold text-purple-300 mb-2">💡 Usage Tips</h3>
-        <ul className="text-sm text-gray-400 space-y-1">
-          <li>• Registry configuration is used to connect to OCI-compliant container registries (Docker Hub, Harbor, GitHub Container Registry, etc.)</li>
-          <li>• <strong>Registry URL</strong>: The access address of the container registry (e.g., https://registry.hub.docker.com)</li>
-          <li>• <strong>Authentication</strong>: Username and password for accessing private registries</li>
-          <li>• <strong>OCI Standard</strong>: Fully compatible with OCI Distribution Specification v2</li>
-          <li>• The system automatically accesses repositories and retrieves image lists via OCI v2 API</li>
-        </ul>
-      </div>
-
-      {/* Add/Edit Modal */}
-      <Modal
-        open={showModal}
-        onClose={() => {
-          setShowModal(false);
-          setEditingRegistry(undefined);
-        }}
-        title={editingRegistry ? "Edit Registry Configuration" : "Add Registry Configuration"}
-        icon={Database}
-        size="lg"
-      >
-        <RegistryForm
-          registry={editingRegistry}
-          onSave={handleSave}
-          onCancel={() => {
-            setShowModal(false);
-            setEditingRegistry(undefined);
-          }}
-        />
-      </Modal>
-    </div>
-  );
-};
-
-export default RegistryConfigPage;
--- a/frontend/src/features/home/index.ts
+++ b/frontend/src/features/home/index.ts
@ -1,8 +0,0 @@
-/**
- * Dashboard Feature
- * 首页仪表板
- */
-
-// Export pages
-export { default as HomePage } from './pages/HomePage';
-
--- a/frontend/src/features/home/pages/HomePage.tsx
+++ b/frontend/src/features/home/pages/HomePage.tsx
@ -1,247 +0,0 @@
-import React from "react";
-import { Boxes, Server, Database, Activity, Package, Rocket, Settings } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-
-const HomePage: React.FC = () => {
-  const navigate = useNavigate();
-
-  // Main categories
-  const categories = [
-    {
-      key: "config",
-      title: "Configuration",
-      icon: <Settings className="w-8 h-8 text-brand-accent" />,
-      color: "blue",
-      description: "System configuration management",
-      children: [
-        {
-          icon: <Server className="w-10 h-10 text-accent-teal" />,
-          title: "Clusters",
-          description: "Manage Kubernetes cluster kubeconfig and contexts",
-          path: "/configuration/clusters",
-        },
-        {
-          icon: <Database className="w-10 h-10 text-brand-light" />,
-          title: "Registries",
-          description: "Configure OCI registries and Helm chart repositories",
-          path: "/configuration/registries",
-        },
-      ],
-    },
-    {
-      key: "cluster",
-      title: "Cluster",
-      icon: <Activity className="w-8 h-8 text-accent-teal" />,
-      color: "emerald",
-      description: "Cluster management and monitoring",
-      children: [
-        {
-          icon: <Activity className="w-10 h-10 text-accent-teal" />,
-          title: "Monitoring",
-          description: "Real-time cluster status and resource monitoring",
-          path: "/cluster/monitor",
-        },
-      ],
-    },
-    {
-      key: "artifact",
-      title: "Artifact",
-      icon: <Package className="w-8 h-8 text-brand-light" />,
-      color: "purple",
-      description: "Artifact and application lifecycle management",
-      children: [
-        {
-          icon: <Database className="w-10 h-10 text-brand-light" />,
-          title: "Registries",
-          description: "Browse and manage OCI artifacts",
-          path: "/artifact/registries",
-        },
-        {
-          icon: <Rocket className="w-10 h-10 text-brand-accent" />,
-          title: "Instances",
-          description: "Deploy and manage applications",
-          path: "/artifact/instances",
-        },
-      ],
-    },
-  ];
-
-  return (
-    <div className="min-h-full px-4 py-6 sm:px-6 lg:px-10">
-      {/* Hero Section */}
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-12">
-          <div className="flex justify-center mb-6">
-            <div className="relative p-5 rounded-3xl bg-dark-lighter/80 border border-dark-border/60 shadow-glow">
-              <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-brand-accent/25 via-brand-accent/5 to-transparent blur-xl" />
-              <Boxes className="relative w-16 h-16 text-brand-accent" />
-            </div>
-          </div>
-          <h1 className="text-4xl sm:text-5xl font-semibold text-primary mb-4 tracking-wide">
-            Welcome to OCDP Management Platform
-          </h1>
-          <p className="text-lg sm:text-xl text-secondary max-w-2xl mx-auto">
-            One Click Deployment Platform
-          </p>
-          <p className="text-muted mt-2">
-            Simplified unified platform for Kubernetes application deployment and management
-          </p>
-        </div>
-
-        {/* Category Features */}
-        <div className="space-y-8 mb-12">
-          {categories.map((category) => (
-            <div key={category.key} className="space-y-4">
-              {/* Category Header */}
-              <div className="flex flex-col md:flex-row md:items-center md:gap-3 gap-2">
-                <div className="flex items-center gap-2">
-                  {category.icon}
-                  <h2 className="text-2xl font-semibold text-primary">{category.title}</h2>
-                </div>
-                <div className="hidden md:flex h-px flex-1 bg-gradient-to-r from-brand-accent/40 to-transparent" />
-                <span className="text-sm text-secondary md:text-muted">
-                  {category.description}
-                </span>
-              </div>
-
-              {/* Feature Cards */}
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 md:pl-6">
-                {category.children.map((item) => (
-                  <div
-                    key={item.path}
-                    onClick={() => navigate(item.path)}
-                    className="group relative overflow-hidden bg-dark-lighter/60 border border-dark-border/70 rounded-xl p-5 sm:p-6 transition-all cursor-pointer hover:border-brand-accent/30 hover:shadow-glow hover:-translate-y-0.5"
-                  >
-                    <div className="flex items-start gap-4">
-                      <div className="relative flex-shrink-0 p-2.5 rounded-xl bg-dark/60 border border-dark-border/60 group-hover:border-brand-accent/40 transition-colors">
-                        {item.icon}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <h3 className="text-lg font-semibold text-primary mb-1 group-hover:text-brand-accent transition-colors">
-                          {item.title}
-                        </h3>
-                        <p className="text-secondary text-sm leading-relaxed">{item.description}</p>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Info Cards */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="bg-dark-lighter/60 border border-dark-border/70 rounded-xl p-6 sm:p-7 shadow-soft">
-            <h3 className="text-lg font-semibold text-brand-accent mb-4 flex items-center gap-2">
-              <Rocket className="w-5 h-5" />
-              Quick Start Guide
-            </h3>
-            <div className="space-y-4 text-secondary text-sm">
-              <div className="flex items-start gap-3">
-                <span className="text-brand-accent font-semibold min-w-[20px]">1.</span>
-                <div>
-                  <div className="font-semibold text-primary mb-1">
-                    Configuration → Clusters
-                  </div>
-                  <div className="text-muted">Add kubeconfig and contexts</div>
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <span className="text-brand-accent font-semibold min-w-[20px]">2.</span>
-                <div>
-                  <div className="font-semibold text-primary mb-1">
-                    Configuration → Registries
-                  </div>
-                  <div className="text-muted">Add OCI or Helm registries</div>
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <span className="text-brand-accent font-semibold min-w-[20px]">3.</span>
-                <div>
-                  <div className="font-semibold text-primary mb-1">
-                    Artifact → Registries
-                  </div>
-                  <div className="text-muted">Browse available charts and images</div>
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <span className="text-brand-accent font-semibold min-w-[20px]">4.</span>
-                <div>
-                  <div className="font-semibold text-primary mb-1">
-                    Artifact → Instances
-                  </div>
-                  <div className="text-muted">Deploy applications to clusters</div>
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <span className="text-brand-accent font-semibold min-w-[20px]">5.</span>
-                <div>
-                  <div className="font-semibold text-primary mb-1">
-                    Cluster → Monitoring
-                  </div>
-                  <div className="text-muted">Monitor cluster status in real-time</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-dark-lighter/60 border border-dark-border/70 rounded-xl p-6 sm:p-7 shadow-soft">
-            <h3 className="text-lg font-semibold text-brand-accent mb-4 flex items-center gap-2">
-              <Boxes className="w-5 h-5" />
-              Core Features
-            </h3>
-            <ul className="space-y-3 text-secondary text-sm">
-              <li className="flex items-start gap-3">
-                <span className="text-brand-accent">📦</span>
-                <div>
-                  <strong className="text-primary">
-                    Complete Application Lifecycle
-                  </strong>
-                  <p className="text-muted mt-1">
-                    From artifacts to deployment, unified management
-                  </p>
-                </div>
-              </li>
-              <li className="flex items-start gap-3">
-                <span className="text-brand-accent">🔧</span>
-                <div>
-                  <strong className="text-primary">
-                    Multi-Cluster Configuration
-                  </strong>
-                  <p className="text-muted mt-1">
-                    Support for multiple environments and cluster switching
-                  </p>
-                </div>
-              </li>
-              <li className="flex items-start gap-3">
-                <span className="text-brand-accent">📊</span>
-                <div>
-                  <strong className="text-primary">
-                    Real-time Monitoring
-                  </strong>
-                  <p className="text-muted mt-1">
-                    Integrated Grafana for visualization
-                  </p>
-                </div>
-              </li>
-              <li className="flex items-start gap-3">
-                <span className="text-brand-accent">🚀</span>
-                <div>
-                  <strong className="text-primary">
-                    One-Click Deployment
-                  </strong>
-                  <p className="text-muted mt-1">
-                    Streamlined deployment process for efficiency
-                  </p>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default HomePage;
--- a/frontend/src/features/monitoring/clusters/components/ClusterMonitorCard.tsx
+++ b/frontend/src/features/monitoring/clusters/components/ClusterMonitorCard.tsx
@ -1,235 +0,0 @@
-/**
- * Cluster Monitor Card Component
- * 显示单个集群的监控信息
- */
-import React, { useState } from "react";
-import { Activity, CheckCircle, AlertTriangle, XCircle, HelpCircle, Clock, Cpu, Database, Server as ServerIcon, ChevronDown, ChevronUp, TrendingUp } from "lucide-react";
-import { Card, Badge } from "@/shared/components";
-import type { ClusterMetrics } from "@/core/types";
-import { NodeMetricCard } from "./NodeMetricCard";
-
-interface ClusterMonitorCardProps {
-  cluster: ClusterMetrics;
-}
-
-export const ClusterMonitorCard: React.FC<ClusterMonitorCardProps> = ({ cluster }) => {
-  const [showNodes, setShowNodes] = useState(false);
-  const status = cluster.status ?? "unknown";
-  const uptime = cluster.uptime ?? "N/A";
-  const nodeCount = cluster.nodeCount ?? 0;
-  const podCount = cluster.podCount ?? 0;
-  const totalGpu = cluster.totalGpu ?? 0;
-  const usedGpu = cluster.usedGpu ?? 0;
-  const cpuUsage = cluster.cpuUsage ?? 0;
-  const memoryUsage = cluster.memoryUsage ?? 0;
-  const gpuUsage = cluster.gpuUsage ?? 0;
-  const usedCpu = cluster.usedCpu ?? "N/A";
-  const totalCpu = cluster.totalCpu ?? "N/A";
-  const usedMemory = cluster.usedMemory ?? "N/A";
-  const totalMemory = cluster.totalMemory ?? "N/A";
-  const lastCheckedText = cluster.lastCheck ? new Date(cluster.lastCheck).toLocaleString() : "N/A";
-  
-  const getStatusBadge = () => {
-    switch (status) {
-      case "healthy":
-        return <Badge variant="success">Healthy</Badge>;
-      case "warning":
-      case "unknown":
-        return <Badge variant="warning">Warning</Badge>;
-      case "error":
-      case "unhealthy":
-        return <Badge variant="danger">Error</Badge>;
-      default:
-        return <Badge variant="gray">Unknown</Badge>;
-    }
-  };
-
-  const getStatusIcon = () => {
-    switch (status) {
-      case "healthy":
-        return <CheckCircle className="w-5 h-5 text-green-400" />;
-      case "warning":
-      case "unknown":
-        return <AlertTriangle className="w-5 h-5 text-yellow-400" />;
-      case "error":
-      case "unhealthy":
-        return <XCircle className="w-5 h-5 text-red-400" />;
-      default:
-        return <HelpCircle className="w-5 h-5 text-gray-400" />;
-    }
-  };
-
-  return (
-    <Card className="p-5">
-      <div className="flex items-start justify-between">
-        <div className="flex items-start gap-4 flex-1">
-          {/* Status Icon */}
-          <div className="p-3 bg-gray-800 rounded-lg">
-            {getStatusIcon()}
-          </div>
-
-          {/* Cluster Info */}
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-3 mb-2">
-              <h3 className="text-lg font-semibold text-white truncate">{cluster.clusterName || "Unnamed Cluster"}</h3>
-              {getStatusBadge()}
-            </div>
-
-            {/* Metrics Grid */}
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-3">
-              <div>
-                <p className="text-xs text-gray-500">Uptime</p>
-                <p className="text-sm text-gray-300 font-mono mt-1">{uptime}</p>
-              </div>
-              <div>
-                <p className="text-xs text-gray-500">Nodes</p>
-                <div className="flex items-center gap-1 mt-1">
-                  <ServerIcon className="w-3 h-3 text-blue-400" />
-                  <p className="text-sm text-gray-300 font-mono">{nodeCount}</p>
-                </div>
-              </div>
-              <div>
-                <p className="text-xs text-gray-500">Pods</p>
-                <p className="text-sm text-gray-300 font-mono mt-1">{podCount}</p>
-              </div>
-              <div>
-                <p className="text-xs text-gray-500">GPU</p>
-                <p className="text-sm text-gray-300 font-mono mt-1">
-                  {usedGpu}/{totalGpu || "N/A"}
-                </p>
-              </div>
-            </div>
-
-            {/* Resource Usage */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3 p-3 bg-gray-800/50 rounded-lg">
-              <div>
-                <div className="flex items-center gap-2 mb-1">
-                  <Cpu className="w-3 h-3 text-blue-400" />
-                  <p className="text-xs text-gray-500">CPU (Cluster Total)</p>
-                </div>
-                <p className="text-sm text-gray-300 font-mono">{usedCpu} / {totalCpu}</p>
-                <div className="mt-1 h-1.5 bg-gray-700 rounded-full overflow-hidden">
-                  <div 
-                    className="h-full bg-blue-500 rounded-full transition-all"
-                    style={{ width: `${Math.min(cpuUsage, 100)}%` }}
-                  />
-                </div>
-                <p className="text-xs text-gray-400 mt-1">{cpuUsage.toFixed(1)}%</p>
-                {cluster.maxNodeCpu && (
-                  <div className="mt-1.5 pt-1.5 border-t border-gray-700/50">
-                    <div className="flex items-center gap-1">
-                      <TrendingUp className="w-3 h-3 text-blue-400/60" />
-                      <p className="text-xs text-gray-500">Max per node</p>
-                    </div>
-                    <p className="text-xs text-gray-400 font-mono">{cluster.maxNodeCpu}</p>
-                    {cluster.maxNodeCpuUsage && cluster.maxNodeCpuUsage > 0 && (
-                      <p className="text-xs text-gray-500">Peak: {cluster.maxNodeCpuUsage.toFixed(1)}%</p>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              <div>
-                <div className="flex items-center gap-2 mb-1">
-                  <Database className="w-3 h-3 text-green-400" />
-                  <p className="text-xs text-gray-500">Memory (Cluster Total)</p>
-                </div>
-                <p className="text-sm text-gray-300 font-mono">{usedMemory} / {totalMemory}</p>
-                <div className="mt-1 h-1.5 bg-gray-700 rounded-full overflow-hidden">
-                  <div 
-                    className="h-full bg-green-500 rounded-full transition-all"
-                    style={{ width: `${Math.min(memoryUsage, 100)}%` }}
-                  />
-                </div>
-                <p className="text-xs text-gray-400 mt-1">{memoryUsage.toFixed(1)}%</p>
-                {cluster.maxNodeMemory && (
-                  <div className="mt-1.5 pt-1.5 border-t border-gray-700/50">
-                    <div className="flex items-center gap-1">
-                      <TrendingUp className="w-3 h-3 text-green-400/60" />
-                      <p className="text-xs text-gray-500">Max per node</p>
-                    </div>
-                    <p className="text-xs text-gray-400 font-mono">{cluster.maxNodeMemory}</p>
-                    {cluster.maxNodeMemUsage && cluster.maxNodeMemUsage > 0 && (
-                      <p className="text-xs text-gray-500">Peak: {cluster.maxNodeMemUsage.toFixed(1)}%</p>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              {totalGpu > 0 && (
-                <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <Activity className="w-3 h-3 text-purple-400" />
-                    <p className="text-xs text-gray-500">GPU (Cluster Total)</p>
-                  </div>
-                  <p className="text-sm text-gray-300 font-mono">{usedGpu} / {totalGpu}</p>
-                  <div className="mt-1 h-1.5 bg-gray-700 rounded-full overflow-hidden">
-                    <div 
-                      className="h-full bg-purple-500 rounded-full transition-all"
-                      style={{ width: `${Math.min(gpuUsage, 100)}%` }}
-                    />
-                  </div>
-                  <p className="text-xs text-gray-400 mt-1">{gpuUsage.toFixed(1)}%</p>
-                  {cluster.maxNodeGpu && cluster.maxNodeGpu > 0 && (
-                    <div className="mt-1.5 pt-1.5 border-t border-gray-700/50">
-                      <div className="flex items-center gap-1">
-                        <TrendingUp className="w-3 h-3 text-purple-400/60" />
-                        <p className="text-xs text-gray-500">Max per node</p>
-                      </div>
-                      <p className="text-xs text-gray-400 font-mono">{cluster.maxNodeGpu} GPUs</p>
-                      {cluster.maxNodeGpuUsage && cluster.maxNodeGpuUsage > 0 && (
-                        <p className="text-xs text-gray-500">Peak: {cluster.maxNodeGpuUsage.toFixed(1)}%</p>
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-
-            <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
-              <Clock className="w-3 h-3" />
-              <span>Last checked: {lastCheckedText}</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="flex gap-2">
-          {cluster.nodes && cluster.nodes.length > 0 && (
-            <button
-              onClick={() => setShowNodes(!showNodes)}
-              className="px-3 py-1.5 text-sm text-blue-400 hover:text-blue-300 hover:bg-blue-400/10 rounded-lg transition flex items-center gap-2"
-            >
-              {showNodes ? (
-                <>
-                  <ChevronUp className="w-4 h-4" />
-                  Hide Nodes
-                </>
-              ) : (
-                <>
-                  <ChevronDown className="w-4 h-4" />
-                  Show Nodes ({cluster.nodes.length})
-                </>
-              )}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Nodes List */}
-      {showNodes && cluster.nodes && cluster.nodes.length > 0 && (
-        <div className="mt-4 pt-4 border-t border-gray-700/50">
-          <h4 className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
-            <ServerIcon className="w-4 h-4 text-blue-400" />
-            Cluster Nodes ({cluster.nodes.length})
-          </h4>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-            {cluster.nodes.map((node) => (
-              <NodeMetricCard key={node.nodeName} node={node} />
-            ))}
-          </div>
-        </div>
-      )}
-    </Card>
-  );
-};
--- a/frontend/src/features/monitoring/clusters/components/NodeMetricCard.tsx
+++ b/frontend/src/features/monitoring/clusters/components/NodeMetricCard.tsx
@ -1,147 +0,0 @@
-/**
- * Node Metric Card Component
- * 显示单个节点的监控信息
- */
-import React from "react";
-import { Server, Cpu, Database, CheckCircle, XCircle, Activity } from "lucide-react";
-import { Badge } from "@/shared/components";
-import type { NodeMetrics } from "@/core/types";
-
-interface NodeMetricCardProps {
-  node: NodeMetrics;
-}
-
-export const NodeMetricCard: React.FC<NodeMetricCardProps> = ({ node }) => {
-  const getStatusBadge = () => {
-    if (node.status === "Ready") {
-      return <Badge variant="success">Ready</Badge>;
-    }
-    return <Badge variant="danger">NotReady</Badge>;
-  };
-
-  const getStatusIcon = () => {
-    if (node.status === "Ready") {
-      return <CheckCircle className="w-4 h-4 text-green-400" />;
-    }
-    return <XCircle className="w-4 h-4 text-red-400" />;
-  };
-
-  const getRoleBadge = () => {
-    if (node.role === "control-plane") {
-      return <Badge variant="blue">Control Plane</Badge>;
-    }
-    return <Badge variant="gray">Worker</Badge>;
-  };
-
-  const cpuPercent = node.cpuPercent ?? 0;
-  const memoryPercent = node.memoryPercent ?? 0;
-  const gpuPercent = node.gpuPercent ?? 0;
-  const gpuCapacity = node.gpuCapacity ?? 0;
-
-  return (
-    <div className="p-4 bg-gray-800/30 rounded-lg border border-gray-700/50 hover:border-gray-600/50 transition">
-      {/* Node Header */}
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-3">
-          <div className="p-2 bg-gray-700/50 rounded">
-            <Server className="w-4 h-4 text-blue-400" />
-          </div>
-          <div>
-            <div className="flex items-center gap-2 mb-1">
-              <h4 className="text-sm font-semibold text-white">{node.nodeName}</h4>
-              {getStatusIcon()}
-            </div>
-            <div className="flex items-center gap-2">
-              {getStatusBadge()}
-              {getRoleBadge()}
-            </div>
-          </div>
-        </div>
-        <div className="text-right">
-          <p className="text-xs text-gray-500">Age</p>
-          <p className="text-xs text-gray-300 font-mono">{node.age}</p>
-        </div>
-      </div>
-
-      {/* Node Metrics Grid */}
-      <div className="grid grid-cols-3 gap-3">
-        {/* CPU */}
-        <div>
-          <div className="flex items-center gap-1.5 mb-1">
-            <Cpu className="w-3 h-3 text-blue-400" />
-            <p className="text-xs text-gray-500">CPU</p>
-          </div>
-          <p className="text-xs text-gray-300 font-mono mb-1">
-            {node.cpuUsage ?? "N/A"} / {node.cpuAllocatable ?? "N/A"}
-          </p>
-          <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
-            <div
-              className="h-full bg-blue-500 rounded-full transition-all"
-              style={{ width: `${Math.min(cpuPercent, 100)}%` }}
-            />
-          </div>
-          <p className="text-xs text-gray-400 mt-0.5">{cpuPercent.toFixed(1)}%</p>
-        </div>
-
-        {/* Memory */}
-        <div>
-          <div className="flex items-center gap-1.5 mb-1">
-            <Database className="w-3 h-3 text-green-400" />
-            <p className="text-xs text-gray-500">Memory</p>
-          </div>
-          <p className="text-xs text-gray-300 font-mono mb-1">
-            {node.memoryUsage ?? "N/A"} / {node.memoryAllocatable ?? "N/A"}
-          </p>
-          <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
-            <div
-              className="h-full bg-green-500 rounded-full transition-all"
-              style={{ width: `${Math.min(memoryPercent, 100)}%` }}
-            />
-          </div>
-          <p className="text-xs text-gray-400 mt-0.5">{memoryPercent.toFixed(1)}%</p>
-        </div>
-
-        {/* GPU */}
-        <div>
-          <div className="flex items-center gap-1.5 mb-1">
-            <Activity className="w-3 h-3 text-purple-400" />
-            <p className="text-xs text-gray-500">GPU</p>
-          </div>
-          {gpuCapacity > 0 ? (
-            <>
-              <p className="text-xs text-gray-300 font-mono mb-1">
-                {node.gpuUsage ?? "N/A"} / {gpuCapacity}
-              </p>
-              <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
-                <div
-                  className="h-full bg-purple-500 rounded-full transition-all"
-                  style={{ width: `${Math.min(gpuPercent, 100)}%` }}
-                />
-              </div>
-              <p className="text-xs text-gray-400 mt-0.5">
-                {gpuPercent.toFixed(1)}%
-                {node.gpuType && <span className="ml-1 text-gray-500">({node.gpuType})</span>}
-              </p>
-            </>
-          ) : (
-            <p className="text-xs text-gray-500 mt-1">No GPU</p>
-          )}
-        </div>
-      </div>
-
-      {/* Additional Info */}
-      <div className="mt-3 pt-3 border-t border-gray-700/50 grid grid-cols-2 gap-2">
-        <div>
-          <p className="text-xs text-gray-500">Pods</p>
-          <p className="text-xs text-gray-300 font-mono">{node.podCount ?? 0}</p>
-        </div>
-        {node.kubeletVersion && (
-          <div>
-            <p className="text-xs text-gray-500">Kubelet</p>
-            <p className="text-xs text-gray-300 font-mono">{node.kubeletVersion}</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
--- a/frontend/src/features/monitoring/clusters/index.ts
+++ b/frontend/src/features/monitoring/clusters/index.ts
@ -1,8 +0,0 @@
-/**
- * Monitoring Feature Module
- * 监控功能模块
- */
-
-export { default as MonitoringClustersPage } from "./pages/MonitoringClustersPage";
-export { ClusterMonitorCard } from "./components/ClusterMonitorCard";
-
--- a/frontend/src/features/monitoring/clusters/pages/MonitoringClustersPage.tsx
+++ b/frontend/src/features/monitoring/clusters/pages/MonitoringClustersPage.tsx
@ -1,175 +0,0 @@
-/**
- * Monitoring - Clusters Page
- * 监控集群状态和健康信息
- */
-import React, { useState, useEffect } from "react";
-import { Activity, Server, RefreshCw } from "lucide-react";
-import { PageHeader, StatsCard, Button, LoadingState, ErrorState, EmptyState } from "@/shared";
-import { useToast } from "@/shared";
-import { ClusterErrors, SuccessMessages, formatApiError } from "@/shared/utils";
-import { listClusterMonitoring } from "@/api";
-import type { ClusterMetrics } from "@/core/types";
-import { ClusterMonitorCard } from "../components/ClusterMonitorCard";
-
-const MonitoringClustersPage: React.FC = () => {
-  const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
-
-  const [clusters, setClusters] = useState<ClusterMetrics[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [refreshing, setRefreshing] = useState(false);
-
-  // Load cluster monitoring data
-  const loadClusters = async (isMounted = { current: true }, isRefresh = false) => {
-    let succeeded = false;
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
-    setError(null);
-
-    try {
-      const data = await listClusterMonitoring();
-      if (isMounted.current) {
-        setClusters(data);
-        succeeded = true;
-      }
-    } catch (err) {
-      const errorMsg = formatApiError(err) || ClusterErrors.LOAD_FAILED;
-      if (isMounted.current) {
-        setError(errorMsg);
-        toastError(errorMsg);
-        console.error(err);
-      }
-    } finally {
-      if (isMounted.current) {
-        setLoading(false);
-        setRefreshing(false);
-      }
-    }
-    return succeeded;
-  };
-
-  useEffect(() => {
-    const isMounted = { current: true };
-    loadClusters(isMounted);
-
-    // Auto-refresh every 30 seconds
-    const interval = setInterval(() => {
-      loadClusters(isMounted, true);
-    }, 30000);
-
-    return () => {
-      isMounted.current = false;
-      clearInterval(interval);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Refresh clusters
-  const handleRefresh = async () => {
-    toastInfo("Refreshing cluster metrics...", {
-      title: "Monitoring Refresh",
-      durationMs: 1800,
-      mergeKey: "monitoring-refresh",
-    });
-    const refreshed = await loadClusters({ current: true }, true);
-    if (refreshed) {
-      toastSuccess(SuccessMessages.DATA_REFRESHED);
-    }
-  };
-
-  if (loading) {
-    return <LoadingState message="Loading cluster monitoring data..." />;
-  }
-
-  if (error) {
-    return (
-      <ErrorState
-        title="Failed to Load Clusters"
-        message={error}
-        onRetry={() => loadClusters({ current: true })}
-      />
-    );
-  }
-
-  if (clusters.length === 0) {
-    return (
-      <EmptyState
-        icon={Server}
-        title="No Clusters Available"
-        description="No clusters configured for monitoring. Please add clusters in the configuration section."
-      />
-    );
-  }
-
-  const healthyCount = clusters.filter(c => c.status === "healthy").length;
-  const warningCount = clusters.filter(c => c.status === "warning" || c.status === "unknown").length;
-  const errorCount = clusters.filter(c => c.status === "error" || c.status === "unhealthy").length;
-
-  return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <PageHeader
-        title="Cluster Monitoring"
-        description="Monitor cluster health and status"
-        icon={Activity}
-      >
-        <Button
-          variant="secondary"
-          icon={RefreshCw}
-          onClick={handleRefresh}
-          loading={refreshing}
-        >
-          {refreshing ? "Refreshing..." : "Refresh"}
-        </Button>
-      </PageHeader>
-
-      {/* Summary Stats */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <StatsCard
-          title="Total Clusters"
-          value={clusters.length}
-          icon={Server}
-          variant="blue"
-        />
-        <StatsCard
-          title="Healthy"
-          value={healthyCount}
-          icon={Activity}
-          variant="green"
-        />
-        <StatsCard
-          title="Warning"
-          value={warningCount}
-          icon={Activity}
-          variant="orange"
-        />
-        <StatsCard
-          title="Error"
-          value={errorCount}
-          icon={Activity}
-          variant="red"
-        />
-      </div>
-
-      {/* Auto-refresh Info */}
-      <div className="text-sm text-gray-400">
-        Auto-refresh every 30 seconds {refreshing && "• Refreshing..."}
-      </div>
-
-      {/* Cluster List */}
-      <div className="grid gap-4">
-        {clusters.map((cluster, index) => (
-          <ClusterMonitorCard
-            key={cluster.clusterId || cluster.id || `${cluster.clusterName || 'cluster'}-${index}`}
-            cluster={cluster}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default MonitoringClustersPage;
--- a/frontend/src/features/monitoring/index.ts
+++ b/frontend/src/features/monitoring/index.ts
@ -1,9 +0,0 @@
-/**
- * Monitoring Module
- * 监控模块 - 集群监控
- */
-
-// Clusters
-export { default as MonitoringClustersPage } from './clusters/pages/MonitoringClustersPage';
-export * from './clusters/components/ClusterMonitorCard';
-
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -1,9 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.animate-fadeIn { animation: fadeIn 0.25s ease-out; }
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@ -0,0 +1,323 @@
+import axios, { AxiosError, AxiosRequestConfig } from 'axios';
+import type {
+  LoginRequest,
+  LoginResponse,
+  RegisterRequest,
+  UserDTO,
+  UserListResponse,
+  WorkspaceDTO,
+  WorkspaceResponse,
+  WorkspaceListResponse,
+  CreateWorkspaceRequest,
+  UpdateWorkspaceRequest,
+  SetQuotasRequest,
+  QuotaDTO,
+  ClusterDTO,
+  CreateClusterRequest,
+  UpdateClusterRequest,
+  ClusterHealthResponse,
+  RegistryDTO,
+  CreateRegistryRequest,
+  UpdateRegistryRequest,
+  RegistryHealthResponse,
+  Repository,
+  Artifact,
+  ArtifactValues,
+  ArtifactValuesSchema,
+  InstanceDTO,
+  CreateInstanceRequest,
+  UpdateInstanceRequest,
+  ClusterMonitoring,
+  NodeMetric,
+  MonitoringSummary,
+  StorageDTO,
+  CreateStorageRequest,
+  UpdateStorageRequest,
+  ChartReferenceDTO,
+  CreateChartReferenceRequest,
+  UpdateChartReferenceRequest,
+  ValuesTemplateDTO,
+  CreateValuesTemplateRequest,
+  UpdateValuesTemplateRequest,
+} from './types';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '/api/v1';
+
+// Create axios instance
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+// Request interceptor to add auth token
+api.interceptors.request.use((config) => {
+  if (typeof window !== 'undefined') {
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+  }
+  return config;
+});
+
+// Response interceptor to handle 401
+api.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      if (typeof window !== 'undefined') {
+        localStorage.removeItem('access_token');
+        localStorage.removeItem('refresh_token');
+        localStorage.removeItem('user');
+        window.location.href = '/login';
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+// Auth API - 使用 any 类型因为后端响应被包装在 data 字段中
+export const authApi = {
+  login: (data: LoginRequest) =>
+    api.post<any>('/auth/login', data),
+
+  register: (data: RegisterRequest) =>
+    api.post<any>('/auth/register', data),
+
+  refreshToken: (refreshToken: string) =>
+    api.post<any>('/auth/refresh', { refreshToken }),
+
+  getCurrentUser: () =>
+    api.get<any>('/users/me'),
+
+  changePassword: (oldPassword: string, newPassword: string) =>
+    api.put('/users/me/password', { old_password: oldPassword, new_password: newPassword }),
+
+  getCurrentUserWorkspace: () =>
+    api.get<any>('/users/me/workspace'),
+};
+
+// Admin User API - 使用 any 类型避免类型不匹配问题，因为后端响应被包装在 data 字段中
+export const adminApi = {
+  listUsers: (workspaceId?: string) =>
+    api.get<any>('/admin/users', { params: { workspace_id: workspaceId } }),
+
+  createUser: (data: {
+    username: string;
+    password: string;
+    email?: string;
+    role: string;
+    workspace_id?: string;
+  }) =>
+    api.post<any>('/admin/users', data),
+
+  getUser: (userId: string) =>
+    api.get<any>(`/admin/users/${userId}`),
+
+  updateUser: (userId: string, data: { email?: string; is_active?: boolean }) =>
+    api.put<any>(`/admin/users/${userId}`, data),
+
+  setUserActive: (userId: string, isActive: boolean) =>
+    api.put<any>(`/admin/users/${userId}/active`, { is_active: isActive }),
+
+  changeUserWorkspace: (userId: string, workspaceId: string) =>
+    api.put(`/admin/users/${userId}/workspace`, { workspace_id: workspaceId }),
+
+  resetPassword: (userId: string, newPassword: string) =>
+    api.put(`/admin/users/${userId}/password`, { new_password: newPassword }),
+
+  deleteUser: (userId: string) =>
+    api.delete(`/admin/users/${userId}`),
+};
+
+// Workspace API
+export const workspaceApi = {
+  list: () =>
+    api.get<any>('/workspaces'),
+
+  create: (data: CreateWorkspaceRequest) =>
+    api.post<any>('/workspaces', data),
+
+  get: (workspaceId: string) =>
+    api.get<any>(`/workspaces/${workspaceId}`),
+
+  update: (workspaceId: string, data: UpdateWorkspaceRequest) =>
+    api.put<any>(`/workspaces/${workspaceId}`, data),
+
+  delete: (workspaceId: string) =>
+    api.delete(`/workspaces/${workspaceId}`),
+
+  getQuotas: (workspaceId: string) =>
+    api.get<any>(`/workspaces/${workspaceId}/quotas`),
+
+  setQuotas: (workspaceId: string, data: SetQuotasRequest) =>
+    api.put<any>(`/workspaces/${workspaceId}/quotas`, data),
+};
+
+// Cluster API
+export const clusterApi = {
+  list: () =>
+    api.get<any>('/clusters'),
+
+  create: (data: CreateClusterRequest) =>
+    api.post<any>('/clusters', data),
+
+  get: (clusterId: string) =>
+    api.get<any>(`/clusters/${clusterId}`),
+
+  update: (clusterId: string, data: UpdateClusterRequest) =>
+    api.put<any>(`/clusters/${clusterId}`, data),
+
+  delete: (clusterId: string) =>
+    api.delete(`/clusters/${clusterId}`),
+
+  getHealth: (clusterId: string) =>
+    api.get<any>(`/clusters/${clusterId}/health`),
+};
+
+// Registry API
+export const registryApi = {
+  list: () =>
+    api.get<any>('/registries'),
+
+  create: (data: CreateRegistryRequest) =>
+    api.post<any>('/registries', data),
+
+  get: (registryId: string) =>
+    api.get<any>(`/registries/${registryId}`),
+
+  update: (registryId: string, data: UpdateRegistryRequest) =>
+    api.put<any>(`/registries/${registryId}`, data),
+
+  delete: (registryId: string) =>
+    api.delete(`/registries/${registryId}`),
+
+  getHealth: (registryId: string) =>
+    api.get<any>(`/registries/${registryId}/health`),
+
+  listRepositories: (registryId: string) =>
+    api.get<any>(`/registries/${registryId}/repositories`),
+
+  listArtifacts: (registryId: string, repositoryName: string) =>
+    api.get<any>(`/registries/${registryId}/repositories/${encodeURIComponent(repositoryName)}/artifacts`),
+
+  getArtifact: (registryId: string, repositoryName: string, reference: string) =>
+    api.get<any>(`/registries/${registryId}/repositories/${encodeURIComponent(repositoryName)}/artifacts/${reference}`),
+
+  getArtifactValues: (registryId: string, repositoryName: string, reference: string) =>
+    api.get<any>(`/registries/${registryId}/repositories/${encodeURIComponent(repositoryName)}/artifacts/${reference}/values`),
+
+  getArtifactValuesSchema: (registryId: string, repositoryName: string, reference: string) =>
+    api.get<any>(`/registries/${registryId}/repositories/${encodeURIComponent(repositoryName)}/artifacts/${reference}/values-schema`),
+};
+
+// Instance API
+export const instanceApi = {
+  list: (clusterId: string) =>
+    api.get<any>(`/clusters/${clusterId}/instances`),
+
+  create: (clusterId: string, data: CreateInstanceRequest) =>
+    api.post<any>(`/clusters/${clusterId}/instances`, data),
+
+  get: (clusterId: string, instanceId: string) =>
+    api.get<any>(`/clusters/${clusterId}/instances/${instanceId}`),
+
+  update: (clusterId: string, instanceId: string, data: UpdateInstanceRequest) =>
+    api.put<any>(`/clusters/${clusterId}/instances/${instanceId}`, data),
+
+  delete: (clusterId: string, instanceId: string) =>
+    api.delete(`/clusters/${clusterId}/instances/${instanceId}`),
+
+  listEntries: (clusterId: string, instanceId: string) =>
+    api.get<any>(`/clusters/${clusterId}/instances/${instanceId}/entries`),
+};
+
+// Monitoring API
+export const monitoringApi = {
+  listClusterMonitoring: () =>
+    api.get<any>('/monitoring/clusters'),
+
+  getClusterMonitoring: (clusterId: string) =>
+    api.get<any>(`/monitoring/clusters/${clusterId}`),
+
+  getNodeMetrics: (clusterId: string) =>
+    api.get<any>(`/monitoring/clusters/${clusterId}/nodes`),
+
+  getSummary: () =>
+    api.get<any>('/monitoring/summary'),
+};
+
+// Storage Backend API
+export const storageApi = {
+  list: () =>
+    api.get<any>('/storage-backends'),
+
+  create: (data: CreateStorageRequest) =>
+    api.post<any>('/storage-backends', data),
+
+  get: (storageId: string) =>
+    api.get<any>(`/storage-backends/${storageId}`),
+
+  update: (storageId: string, data: UpdateStorageRequest) =>
+    api.put<any>(`/storage-backends/${storageId}`, data),
+
+  delete: (storageId: string) =>
+    api.delete(`/storage-backends/${storageId}`),
+};
+
+// Chart Reference API
+export const chartReferenceApi = {
+  list: () =>
+    api.get<any>('/chart-references'),
+
+  create: (data: CreateChartReferenceRequest) =>
+    api.post<any>('/chart-references', data),
+
+  get: (chartRefId: string) =>
+    api.get<any>(`/chart-references/${chartRefId}`),
+
+  update: (chartRefId: string, data: UpdateChartReferenceRequest) =>
+    api.put<any>(`/chart-references/${chartRefId}`, data),
+
+  delete: (chartRefId: string) =>
+    api.delete(`/chart-references/${chartRefId}`),
+};
+
+// Values Template API
+export const valuesTemplateApi = {
+  list: () =>
+    api.get<any>('/values-templates'),
+
+  create: (data: CreateValuesTemplateRequest) =>
+    api.post<any>('/values-templates', data),
+
+  get: (templateId: string) =>
+    api.get<any>(`/values-templates/${templateId}`),
+
+  update: (templateId: string, data: UpdateValuesTemplateRequest) =>
+    api.put<any>(`/values-templates/${templateId}`, data),
+
+  delete: (templateId: string) =>
+    api.delete(`/values-templates/${templateId}`),
+
+  getByChartReference: (chartRefId: string) =>
+    api.get<any>(`/chart-references/${chartRefId}/values-templates`),
+
+  getHistory: (chartRefId: string, name: string) =>
+    api.get<any>(`/chart-references/${chartRefId}/values-templates/history?name=${encodeURIComponent(name)}`),
+
+  rollback: (chartRefId: string, templateId: string) =>
+    api.post<any>(`/chart-references/${chartRefId}/values-templates/rollback`, { template_id: templateId }),
+};
+
+// Logout helper
+export const logout = () => {
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
+  localStorage.removeItem('user');
+};
+
+export default api;
--- a/frontend/src/lib/auth-context.tsx
+++ b/frontend/src/lib/auth-context.tsx
@ -0,0 +1,106 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { authApi } from './api';
+import type { UserDTO, LoginRequest } from './types';
+
+interface AuthContextType {
+  user: UserDTO | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (credentials: LoginRequest) => Promise<void>;
+  logout: () => void;
+  refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<UserDTO | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refreshUser = async () => {
+    try {
+      const token = localStorage.getItem('access_token');
+      if (!token) {
+        setUser(null);
+        return;
+      }
+      const response = await authApi.getCurrentUser();
+      const user = response.data.data.user;
+      setUser(user);
+      localStorage.setItem('user', JSON.stringify(user));
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+      localStorage.removeItem('access_token');
+      localStorage.removeItem('refresh_token');
+      localStorage.removeItem('user');
+      setUser(null);
+    }
+  };
+
+  const login = async (credentials: LoginRequest) => {
+    const response = await authApi.login(credentials);
+    // API returns camelCase: accessToken, refreshToken
+    const access_token = response.data.accessToken;
+    const refresh_token = response.data.refreshToken;
+
+    localStorage.setItem('access_token', access_token);
+    localStorage.setItem('refresh_token', refresh_token);
+
+    // Fetch user info - API returns { message: "", data: { user: {...} } }
+    const userResponse = await authApi.getCurrentUser();
+    const user = userResponse.data.data.user;
+    setUser(user);
+    localStorage.setItem('user', JSON.stringify(user));
+  };
+
+  const logout = () => {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+    localStorage.removeItem('user');
+    setUser(null);
+  };
+
+  useEffect(() => {
+    const initAuth = async () => {
+      const token = localStorage.getItem('access_token');
+      const storedUser = localStorage.getItem('user');
+
+      if (token && storedUser) {
+        try {
+          setUser(JSON.parse(storedUser));
+          await refreshUser();
+        } catch {
+          setUser(null);
+        }
+      }
+      setIsLoading(false);
+    };
+
+    initAuth();
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isLoading,
+        isAuthenticated: !!user,
+        login,
+        logout,
+        refreshUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@ -0,0 +1,403 @@
+// API Types matching backend DTOs
+
+// Auth Types
+export interface LoginRequest {
+  username: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  accessToken: string;
+  refreshToken: string;
+  expires_in?: number;
+  must_change_password?: boolean;
+}
+
+export interface RegisterRequest {
+  username: string;
+  password: string;
+}
+
+export interface RefreshTokenRequest {
+  refreshToken: string;
+}
+
+// User Types
+export interface UserDTO {
+  id: string;
+  username: string;
+  email?: string;
+  role: string;
+  workspace_id?: string;
+  workspace_name?: string;
+  is_active: boolean;
+  must_change_password: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+// API 响应包装类型 - 后端所有响应都使用 respondSuccess 包装
+export interface ApiResponse<T> {
+  message: string;
+  data: T;
+}
+
+export interface UserListResponse {
+  users: UserDTO[];
+  total: number;
+}
+
+// Workspace Types
+export interface WorkspaceDTO {
+  id: string;
+  name: string;
+  description?: string;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface QuotaDTO {
+  id: string;
+  workspace_id: string;
+  resource_type: string;
+  hard_limit: number;
+  soft_limit: number;
+  used: number;
+}
+
+export interface WorkspaceResponse {
+  workspace: WorkspaceDTO;
+  quotas?: QuotaDTO[];
+}
+
+export interface WorkspaceListResponse {
+  workspaces: WorkspaceDTO[];
+  total: number;
+}
+
+export interface CreateWorkspaceRequest {
+  name: string;
+  description?: string;
+}
+
+export interface UpdateWorkspaceRequest {
+  name?: string;
+  description?: string;
+}
+
+export interface SetQuotasRequest {
+  cpu?: { hard_limit: number; soft_limit: number };
+  gpu?: { hard_limit: number; soft_limit: number };
+  gpu_memory?: { hard_limit: number; soft_limit: number };
+}
+
+// Cluster Types
+export interface ClusterDTO {
+  id: string;
+  workspaceId?: string;
+  ownerId?: string;
+  name: string;
+  host: string;
+  description?: string;
+  isolationMode?: string;
+  defaultNamespace?: string;
+  isShared: boolean;
+  hasCaData: boolean;
+  hasCertData: boolean;
+  hasKeyData: boolean;
+  hasToken: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateClusterRequest {
+  name: string;
+  host: string;
+  caData?: string;
+  ca_data?: string;
+  certData?: string;
+  cert_data?: string;
+  keyData?: string;
+  key_data?: string;
+  token?: string;
+  description?: string;
+  isolationMode?: string;
+  defaultNamespace?: string;
+  isShared?: boolean;
+}
+
+export interface UpdateClusterRequest extends Partial<CreateClusterRequest> {}
+
+export interface ClusterHealthResponse {
+  healthy: boolean;
+  message?: string;
+  version?: string;
+}
+
+// Registry Types
+export interface RegistryDTO {
+  id: string;
+  workspaceId?: string;
+  ownerId?: string;
+  name: string;
+  url: string;
+  description?: string;
+  username?: string;
+  insecure: boolean;
+  isShared: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateRegistryRequest {
+  name: string;
+  url: string;
+  username?: string;
+  password?: string;
+  description?: string;
+  insecure?: boolean;
+  isShared?: boolean;
+}
+
+export interface UpdateRegistryRequest extends Partial<CreateRegistryRequest> {}
+
+export interface RegistryHealthResponse {
+  healthy: boolean;
+  message?: string;
+}
+
+// Artifact Types
+export interface Repository {
+  name: string;
+  artifact_count: number;
+}
+
+export interface Artifact {
+  reference: string;
+  media_type: string;
+  size: number;
+  created_at: string;
+}
+
+export interface ArtifactValues {
+  values_yaml: string;
+}
+
+export interface ArtifactValuesSchema {
+  schema: object;
+}
+
+// Instance Types
+export interface InstanceDTO {
+  id: string;
+  workspaceId?: string;
+  ownerId?: string;
+  clusterId: string;
+  clusterName?: string;
+  registryId?: string;
+  name: string;
+  namespace: string;
+  repository: string;
+  chart: string;
+  version: string;
+  description?: string;
+  status: string;
+  status_reason?: string;
+  last_operation?: string;
+  last_error?: string;
+  revision: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateInstanceRequest {
+  name: string;
+  namespace: string;
+  repository: string;
+  chart: string;
+  version: string;
+  description?: string;
+  values?: object;
+  values_yaml?: string;
+  user_override_yaml?: string;
+}
+
+export interface UpdateInstanceRequest extends Partial<CreateInstanceRequest> {}
+
+// Monitoring Types
+export interface ClusterMonitoring {
+  clusterId: string;
+  clusterName: string;
+  status: string;
+  cpuUsage: number;
+  memoryUsage: number;
+  nodeCount: number;
+  podCount: number;
+  uptime?: string;
+  totalCpu?: string;
+  totalMemory?: string;
+  totalGpu?: number;
+  usedCpu?: string;
+  usedMemory?: string;
+  usedGpu?: number;
+  gpuUsage?: number;
+  nodes?: NodeMetric[];
+}
+
+export interface NodeMetric {
+  nodeName: string;
+  status: string;
+  role: string;
+  age: string;
+  podCount: number;
+  cpuCapacity: string;
+  cpuAllocatable: string;
+  cpuUsage: string;
+  cpuPercent: number;
+  memoryCapacity: string;
+  memoryAllocatable: string;
+  memoryUsage: string;
+  memoryPercent: number;
+  gpuCapacity?: number;
+  gpuUsage?: number;
+  gpuPercent?: number;
+  gpuType?: string;
+  osImage?: string;
+  kernelVersion?: string;
+  containerRuntime?: string;
+  kubeletVersion?: string;
+}
+
+export interface MonitoringSummary {
+  totalClusters: number;
+  healthyClusters: number;
+  warningClusters?: number;
+  errorClusters?: number;
+  totalInstances?: number;
+  runningInstances?: number;
+  totalNodes: number;
+  totalPods?: number;
+  lastUpdate?: string;
+}
+
+// Storage Backend types
+export interface NFSConfig {
+  server: string;
+  path: string;
+}
+
+export interface PVConfig {
+  storageClassName: string;
+  capacity: string;
+  accessModes: string[];
+}
+
+export interface HostPathConfig {
+  path: string;
+}
+
+export interface StorageConfig {
+  nfs?: NFSConfig;
+  pv?: PVConfig;
+  hostPath?: HostPathConfig;
+}
+
+export interface StorageDTO {
+  id: string;
+  workspace_id?: string;
+  owner_id?: string;
+  name: string;
+  type: string; // 'nfs', 'pv', 'hostPath'
+  config: StorageConfig;
+  description?: string;
+  is_default: boolean;
+  is_shared: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateStorageRequest {
+  name: string;
+  type: string;
+  description?: string;
+  is_default?: boolean;
+  is_shared?: boolean;
+  nfs?: NFSConfig;
+  pv?: PVConfig;
+  hostPath?: HostPathConfig;
+}
+
+export interface UpdateStorageRequest {
+  name?: string;
+  type?: string;
+  description?: string;
+  is_default?: boolean;
+  is_shared?: boolean;
+  nfs?: NFSConfig;
+  pv?: PVConfig;
+  hostPath?: HostPathConfig;
+}
+
+// Chart Reference Types
+export interface ChartReferenceDTO {
+  id: string;
+  workspace_id?: string;
+  owner_id?: string;
+  registry_id: string;
+  registry_name?: string;
+  repository: string;
+  chart_name: string;
+  description?: string;
+  is_enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateChartReferenceRequest {
+  registry_id: string;
+  repository: string;
+  chart_name: string;
+  description?: string;
+  is_enabled?: boolean;
+}
+
+export interface UpdateChartReferenceRequest {
+  description?: string;
+  is_enabled?: boolean;
+}
+
+// Values Template Types
+export interface ValuesTemplateDTO {
+  id: string;
+  workspace_id?: string;
+  owner_id?: string;
+  chart_reference_id: string;
+  chart_name?: string;
+  name: string;
+  description?: string;
+  values_yaml: string;
+  version: number;
+  is_default: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateValuesTemplateRequest {
+  chart_reference_id: string;
+  name: string;
+  description?: string;
+  values_yaml: string;
+  is_default?: boolean;
+}
+
+export interface UpdateValuesTemplateRequest {
+  description?: string;
+  values_yaml?: string;
+  is_default?: boolean;
+}
+
+export interface RollbackValuesTemplateRequest {
+  template_id: string;
+}
+
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -1,24 +0,0 @@
-// Must import reflect-metadata first for class-transformer decorators to work
-import "reflect-metadata";
-
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import { App, AuthProvider } from "./app";
-import { ToastProvider } from "./shared/components/feedback/ToastProvider";
-import "./index.css";
-
-// Dev mode: auto login, skip authentication
-const DEV_MODE = import.meta.env.DEV && true; // Set to false to restore normal login
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <AuthProvider devMode={DEV_MODE}>
-        <ToastProvider>
-          <App />
-        </ToastProvider>
-      </AuthProvider>
-    </BrowserRouter>
-  </React.StrictMode>
-);
--- a/frontend/src/shared/components/data-display/StatsCard.tsx
+++ b/frontend/src/shared/components/data-display/StatsCard.tsx
@ -1,72 +0,0 @@
-/**
- * 统一的 StatsCard 组件
- * 用于显示统计数据卡片
- */
-import React from "react";
-import type { LucideIcon } from "lucide-react";
-
-export type StatsCardVariant = "blue" | "green" | "purple" | "orange" | "red";
-
-export interface StatsCardProps {
-  title: string;
-  value: string | number;
-  icon: LucideIcon;
-  variant?: StatsCardVariant;
-  subtitle?: string;
-  className?: string;
-}
-
-const variantStyles: Record<StatsCardVariant, { container: string; iconBg: string; iconColor: string }> = {
-  blue: {
-    container: "bg-gradient-to-br from-blue-600/20 to-blue-800/20 border-blue-500/30",
-    iconBg: "bg-blue-600/30",
-    iconColor: "text-blue-300",
-  },
-  green: {
-    container: "bg-gradient-to-br from-green-600/20 to-green-800/20 border-green-500/30",
-    iconBg: "bg-green-600/30",
-    iconColor: "text-green-300",
-  },
-  purple: {
-    container: "bg-gradient-to-br from-purple-600/20 to-purple-800/20 border-purple-500/30",
-    iconBg: "bg-purple-600/30",
-    iconColor: "text-purple-300",
-  },
-  orange: {
-    container: "bg-gradient-to-br from-orange-600/20 to-orange-800/20 border-orange-500/30",
-    iconBg: "bg-orange-600/30",
-    iconColor: "text-orange-300",
-  },
-  red: {
-    container: "bg-gradient-to-br from-red-600/20 to-red-800/20 border-red-500/30",
-    iconBg: "bg-red-600/30",
-    iconColor: "text-red-300",
-  },
-};
-
-export const StatsCard: React.FC<StatsCardProps> = ({
-  title,
-  value,
-  icon: Icon,
-  variant = "blue",
-  subtitle,
-  className = "",
-}) => {
-  const styles = variantStyles[variant];
-
-  return (
-    <div className={`border rounded-lg p-4 ${styles.container} ${className}`.trim()}>
-      <div className="flex items-center gap-3">
-        <div className={`p-2 rounded-lg ${styles.iconBg}`}>
-          <Icon className={`w-6 h-6 ${styles.iconColor}`} />
-        </div>
-        <div>
-          <p className="text-2xl font-bold text-white">{value}</p>
-          <p className="text-sm text-gray-400">{title}</p>
-          {subtitle && <p className="text-xs text-gray-500 mt-0.5">{subtitle}</p>}
-        </div>
-      </div>
-    </div>
-  );
-};
-
--- a/frontend/src/shared/components/data-display/index.ts
+++ b/frontend/src/shared/components/data-display/index.ts
@ -1,8 +0,0 @@
-/**
- * Data Display Components - Components for Displaying Data
- * 数据展示组件 - 用于展示数据的组件
- */
-
-export { StatsCard, type StatsCardProps, type StatsCardVariant } from "./StatsCard";
-
-
--- a/frontend/src/shared/components/feedback/EmptyState.tsx
+++ b/frontend/src/shared/components/feedback/EmptyState.tsx
@ -1,45 +0,0 @@
-/**
- * 统一的 EmptyState 组件
- * 用于显示空状态
- */
-import React from "react";
-import type { LucideIcon } from "lucide-react";
-import { Button } from "../ui/Button";
-
-export interface EmptyStateProps {
-  icon?: LucideIcon;
-  title: string;
-  description?: string;
-  action?: {
-    label: string;
-    onClick: () => void;
-    icon?: LucideIcon;
-  };
-}
-
-export const EmptyState: React.FC<EmptyStateProps> = ({
-  icon: Icon,
-  title,
-  description,
-  action,
-}) => {
-  return (
-    <div className="text-center py-16 bg-gray-800/30 border border-gray-700 border-dashed rounded-lg">
-      {Icon && <Icon className="w-16 h-16 mx-auto mb-4 text-gray-600" />}
-      <h3 className="text-lg font-semibold text-gray-400 mb-2">{title}</h3>
-      {description && (
-        <p className="text-sm text-gray-500 mb-6">{description}</p>
-      )}
-      {action && (
-        <Button
-          variant="primary"
-          icon={action.icon}
-          onClick={action.onClick}
-        >
-          {action.label}
-        </Button>
-      )}
-    </div>
-  );
-};
-
--- a/frontend/src/shared/components/feedback/EmptyStateSimple.tsx
+++ b/frontend/src/shared/components/feedback/EmptyStateSimple.tsx
@ -1,33 +0,0 @@
-/**
- * 配置性界面的空状态组件（无引导按钮）
- * 仅提示用户当前没有配置数据
- */
-import React from "react";
-import type { LucideIcon } from "lucide-react";
-
-interface EmptyStateSimpleProps {
-  /** 标题 */
-  title: string;
-  /** 描述文字 */
-  description: string;
-  /** 图标组件 */
-  Icon: LucideIcon;
-  /** 自定义样式（可选） */
-  className?: string;
-}
-
-export const EmptyStateSimple: React.FC<EmptyStateSimpleProps> = ({
-  title,
-  description,
-  Icon,
-  className = "",
-}) => {
-  return (
-    <div className={`bg-gray-800/30 border border-gray-700 rounded-lg p-8 text-center ${className}`}>
-      <Icon className="w-16 h-16 text-gray-600 mx-auto mb-4" />
-      <h3 className="text-lg font-semibold text-gray-300 mb-2">{title}</h3>
-      <p className="text-gray-400">{description}</p>
-    </div>
-  );
-};
-
--- a/frontend/src/shared/components/feedback/EmptyStateWithGuide.tsx
+++ b/frontend/src/shared/components/feedback/EmptyStateWithGuide.tsx
@ -1,54 +0,0 @@
-/**
- * 使用性界面的空状态组件（带引导按钮）
- * 当缺少配置时，引导用户前往对应的配置页面
- */
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import type { LucideIcon } from "lucide-react";
-
-interface EmptyStateWithGuideProps {
-  /** 标题 */
-  title: string;
-  /** 描述文字 */
-  description: string;
-  /** 引导按钮文字 */
-  buttonText: string;
-  /** 引导目标路径 */
-  targetPath: string;
-  /** 图标组件 */
-  Icon: LucideIcon;
-}
-
-export const EmptyStateWithGuide: React.FC<EmptyStateWithGuideProps> = ({
-  title,
-  description,
-  buttonText,
-  targetPath,
-  Icon,
-}) => {
-  const navigate = useNavigate();
-
-  return (
-    <div className="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-6">
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0">
-          <svg className="w-6 h-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-          </svg>
-        </div>
-        <div className="flex-1">
-          <h3 className="text-lg font-semibold text-yellow-300 mb-2">{title}</h3>
-          <p className="text-yellow-200 mb-4">{description}</p>
-          <button
-            onClick={() => navigate(targetPath)}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg transition"
-          >
-            <Icon className="w-4 h-4" />
-            {buttonText}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
--- a/frontend/src/shared/components/feedback/ErrorState.tsx
+++ b/frontend/src/shared/components/feedback/ErrorState.tsx
@ -1,38 +0,0 @@
-/**
- * 统一的 ErrorState 组件
- * 用于显示错误状态
- */
-import React from "react";
-import { AlertCircle } from "lucide-react";
-import { Button } from "../ui/Button";
-import { ButtonText, ErrorText } from "../../constants";
-
-export interface ErrorStateProps {
-  title?: string;
-  message: string;
-  onRetry?: () => void;
-  retryLabel?: string;
-}
-
-export const ErrorState: React.FC<ErrorStateProps> = ({
-  title = ErrorText.ERROR_OCCURRED,
-  message,
-  onRetry,
-  retryLabel = ButtonText.RETRY,
-}) => {
-  return (
-    <div className="flex items-center gap-3 p-4 bg-red-900/20 border border-red-500/50 rounded-lg text-red-400">
-      <AlertCircle className="w-5 h-5 flex-shrink-0" />
-      <div className="flex-1">
-        {title && <p className="font-medium">{title}</p>}
-        <p className={title ? "text-sm mt-1" : ""}>{message}</p>
-      </div>
-      {onRetry && (
-        <Button variant="danger" size="sm" onClick={onRetry}>
-          {retryLabel}
-        </Button>
-      )}
-    </div>
-  );
-};
-
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`