init

2026-01-15 11:59:34 +08:00
parent d1f88e3f91
commit 62b5c5841a
53 changed files with 15980 additions and 0 deletions
--- a/.cnb.yml
+++ b/.cnb.yml
@@ -0,0 +1,44 @@
+# .cnb.yml
+include:
+  - https://cnb.cool/kevisual/cnb/-/blob/main/.cnb/template.yml
+
+.common_env: &common_env
+  env:
+    TO_REPO: kevisual/router-studio
+    TO_URL: git.xiongxiao.me
+  imports:
+    - https://cnb.cool/kevisual/env/-/blob/main/.env.development
+
+$:
+  vscode:
+    - docker:
+        image: docker.cnb.cool/kevisual/dev-env:latest
+      services:
+        - vscode
+        - docker
+      imports: !reference  [.common_env, imports]
+      # 开发环境启动后会执行的任务
+      # stages:
+      #   - name: pnpm install
+      #     script: pnpm install
+      stages: !reference  [.dev_tempalte, stages]
+
+.common_sync_to_gitea: &common_sync_to_gitea
+  - <<: *common_env
+    services: !reference  [.common_sync_to_gitea_template, services]
+    stages: !reference [.common_sync_to_gitea_template, stages]
+
+.common_sync_from_gitea: &common_sync_from_gitea
+  - <<: *common_env
+    services: !reference  [.common_sync_from_gitea_template, services]
+    stages: !reference [.common_sync_from_gitea_template, stages]
+
+main:
+  web_trigger_sync_to_gitea: 
+    - <<: *common_sync_to_gitea
+  web_trigger_sync_from_gitea:
+    - <<: *common_sync_from_gitea
+  api_trigger_sync_to_gitea:
+    - <<: *common_sync_to_gitea
+  api_trigger_sync_from_gitea:
+    - <<: *common_sync_from_gitea
--- a/.cnb/webtrigger.yml
+++ b/.cnb/webtrigger.yml
@@ -0,0 +1,11 @@
+# .cnb/web_trigger.yml
+branch:
+  # 如下按钮在分支名以 release 开头的分支详情页面显示
+  - reg: "^main"
+    buttons:
+      - name: 同步代码到gitea
+        description: 同步代码到gitea
+        event: web_trigger_sync_to_gitea
+      - name: 同步gitea代码到当前仓库
+        description: 同步gitea代码到当前仓库
+        event: web_trigger_sync_from_gitea
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - web
+  - web-v2
--- a/web-v2/.cnb.yml
+++ b/web-v2/.cnb.yml
@@ -0,0 +1,44 @@
+# .cnb.yml
+include:
+  - https://cnb.cool/kevisual/cnb/-/blob/main/.cnb/template.yml
+
+.common_env: &common_env
+  env:
+    TO_REPO: template/next-simple-template
+    TO_URL: git.xiongxiao.me
+  imports:
+    - https://cnb.cool/kevisual/env/-/blob/main/.env.development
+
+$:
+  vscode:
+    - docker:
+        image: docker.cnb.cool/kevisual/dev-env:latest
+      services:
+        - vscode
+        - docker
+      imports: !reference  [.common_env, imports]
+      # 开发环境启动后会执行的任务
+      # stages:
+      #   - name: pnpm install
+      #     script: pnpm install
+      stages: !reference  [.dev_tempalte, stages]
+
+.common_sync_to_gitea: &common_sync_to_gitea
+  - <<: *common_env
+    services: !reference  [.common_sync_to_gitea_template, services]
+    stages: !reference [.common_sync_to_gitea_template, stages]
+
+.common_sync_from_gitea: &common_sync_from_gitea
+  - <<: *common_env
+    services: !reference  [.common_sync_from_gitea_template, services]
+    stages: !reference [.common_sync_from_gitea_template, stages]
+
+main:
+  web_trigger_sync_to_gitea: 
+    - <<: *common_sync_to_gitea
+  web_trigger_sync_from_gitea:
+    - <<: *common_sync_from_gitea
+  api_trigger_sync_to_gitea:
+    - <<: *common_sync_to_gitea
+  api_trigger_sync_from_gitea:
+    - <<: *common_sync_from_gitea
--- a/web-v2/.env.example
+++ b/web-v2/.env.example
@@ -0,0 +1 @@
+NODE_ENV=
--- a/web-v2/AGENTS.md
+++ b/web-v2/AGENTS.md
@@ -0,0 +1,63 @@
+# 项目概览
+
+## 项目名称
+next-simple-template
+
+## 包名/作用域
+@kevisual/next-simple-template
+
+## 项目描述
+Light Code - 一个直觉、高效的代码编辑器前端界面
+
+## 技术栈
+- **框架**: Next.js 16.1.1 (App Router)
+- **语言**: TypeScript 5
+- **UI库**: React 19.2.3
+- **样式**: Tailwind CSS 4
+- **组件库**: Radix UI (Dialog, Slot, etc.)
+- **状态管理**: Zustand valtio
+- **图标**: Lucide React
+- **工具库**:
+  - class-variance-authority (组件变体)
+  - clsx + tailwind-merge (样式处理)
+  - react-toastify (通知)
+- **请求库**（自定义框架）
+  - @kevisual/query
+
+
+## 项目结构
+```
+src/
+├── app/
+│   ├── layout.tsx       # 根布局,配置字体和元数据
+│   ├── page.tsx         # 首页组件
+│   └── globals.css      # 全局样式
+├── components/
+│   └── ui/
+│       ├── button.tsx   # 按钮组件 (支持多种变体)
+│       └── dialog.tsx   # 对话框组件
+├── lib/
+│   └── utils.ts         # 工具函数 (cn类名合并)
+└── proxy.ts             # 代理配置
+```
+
+## 核心配置
+- **路径别名**: `@/*` 映射到 `./src/*`
+- **构建输出**: 
+  - 开发环境: 标准Next.js
+  - 生产环境: 静态导出到 `dist` 目录
+- **Base Path**: 生产环境使用 `basename` 路径
+
+## 可用命令
+- `pnpm dev` - 启动开发服务器
+- `pnpm build` - 构建生产版本
+- `pnpm start` - 启动生产服务器
+- `pnpm pub` - 部署到远程
+- `pnpm ui` - 添加shadcn组件
+
+## 特性
+- 深色模式支持
+- 响应式设计
+- TypeScript严格模式
+- 可访问性组件 (Radix UI)
+- 静态导出支持
--- a/web-v2/README.md
+++ b/web-v2/README.md
@@ -0,0 +1,11 @@
+# next-simple-template
+
+主要是前端界面
+
+## 下载
+
+```bash
+ev clone -i  https://kevisual.cn/root/ai/kevisual/next/next-simple-template/kevisual.json
+ev upload
+ev sync 
+```
--- a/web-v2/components.json
+++ b/web-v2/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/web-v2/kevisual.json
+++ b/web-v2/kevisual.json
@@ -0,0 +1,25 @@
+{
+  "metadata": {
+    "name": "kevisual",
+    "share": "public"
+  },
+  "registry": "https://kevisual.cn/root/ai/kevisual/next/next-simple-template",
+  "clone": {
+    ".": {
+      "enabled": true
+    }
+  },
+  "syncd": [
+    {
+      "files": [
+        "**/*"
+      ],
+      "ignore": [
+        "dist",
+        ".next"
+      ],
+      "registry": ""
+    }
+  ],
+  "sync": {}
+}
--- a/web-v2/next-env.d.ts
+++ b/web-v2/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/web-v2/next.config.ts
+++ b/web-v2/next.config.ts
@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+import pkgs from "./package.json";
+
+const isDev = process.env.NODE_ENV !== "production";
+console.log(`NODE_ENV: ${process.env.NODE_ENV}`);
+const basePath = isDev ? "" : `${pkgs.basename}`;
+const nextConfig: NextConfig = {
+  /* config options here */
+  output: isDev ? undefined : 'export',
+  distDir: 'dist',
+  basePath: basePath,
+  trailingSlash: true,
+};
+
+export default nextConfig;
--- a/web-v2/package.json
+++ b/web-v2/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@kevisual/next-simple-template",
+  "version": "0.1.0",
+  "basename": "/root/next-simple-template",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "pub": "ev deploy ./dist -k next-simple-template -v 0.1.0 -u -y y",
+    "ui": "pnpm dlx shadcn@latest add "
+  },
+  "dependencies": {
+    "@kevisual/context": "^0.0.4",
+    "@kevisual/query": "^0.0.35",
+    "@kevisual/router": "^0.0.53",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "antd": "^6.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "dotenv": "^17.2.3",
+    "es-toolkit": "^1.43.0",
+    "idb-keyval": "^6.2.2",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "valtio": "^2.3.0",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@kevisual/types": "^0.0.10",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^25",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}
--- a/web-v2/pnpm-lock.yaml
+++ b/web-v2/pnpm-lock.yaml
--- a/web-v2/postcss.config.mjs
+++ b/web-v2/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/web-v2/src/agent/app.ts
+++ b/web-v2/src/agent/app.ts
@@ -0,0 +1,3 @@
+import { QueryRouterServer } from '@kevisual/router/browser'
+import { use } from '@kevisual/context'
+export const app = use('app', new QueryRouterServer())
--- a/web-v2/src/agent/index.ts
+++ b/web-v2/src/agent/index.ts
@@ -0,0 +1,5 @@
+import { app } from './app.ts';
+
+import './routes/left-panel.ts';
+
+export { app };
--- a/web-v2/src/agent/routes/left-panel.ts
+++ b/web-v2/src/agent/routes/left-panel.ts
@@ -0,0 +1,22 @@
+import { app } from '../app.ts';
+import { use } from '@kevisual/context'
+
+app.route({
+  path: 'web',
+  key: 'togglePanel',
+  description: '当前的网页页面功能，切换左侧面板显示与隐藏',
+  metadata: {
+    tags: ['web', 'studio', 'page'],
+  }
+}).define(async (ctx) => {
+  const store = use('studioStore');
+  try {
+
+    const state = store.getState();
+    state.setShowLeftPanel(!state.showLeftPanel);
+    ctx.body = { success: true };
+  } catch (error) {
+    ctx.body = { success: false, message: (error as Error).message };
+  }
+
+}).addTo(app)
--- a/web-v2/src/app/about/page.tsx
+++ b/web-v2/src/app/about/page.tsx
@@ -0,0 +1,9 @@
+export default function AboutPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        About Light Code
+      </main>
+    </div>
+  );
+}
--- a/web-v2/src/app/chat/index.tsx
+++ b/web-v2/src/app/chat/index.tsx
@@ -0,0 +1,127 @@
+import { app } from '@/agent/index.ts'
+import { useStudioStore } from '../studio/store';
+import { useShallow } from 'zustand/shallow';
+import { useState } from 'react';
+import { query } from '@/modules/query.ts'
+import { QueryViewMessages } from '../query-view';
+import { toast } from 'react-toastify';
+export const Chat = () => {
+  const studioStore = useStudioStore(useShallow((state) => ({
+    routes: state.routes,
+    showRightPanel: state.showRightPanel,
+    setShowRightPanel: state.setShowRightPanel,
+    addMessage: state.addMessage,
+  })));
+  const [text, setText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const onSend = async () => {
+    if (!text.trim() || isLoading) return;
+    setIsLoading(true);
+    const { routes } = studioStore;
+    let callPrompts = '';
+    const toolsList = routes.map((r, index) =>
+      `${index + 1}. 工具名称: ${r.id}\n   描述: ${r.description}`
+    ).join('\n\n');
+
+    callPrompts = `你是一个 AI 助手，你可以使用以下工具来帮助用户完成任务:
+
+${toolsList}
+
+## 回复规则
+1. 如果用户的请求可以使用上述工具完成，请返回 JSON 格式数据
+2. 如果没有合适的工具，请直接分析并回答用户问题
+
+## JSON 数据格式
+\`\`\`json
+{
+  "id": "工具的id",
+  "payload": {
+    // 工具所需的参数（如果需要）
+    // 例如: "id": "xxx", "name": "xxx"
+  }
+}
+\`\`\`
+
+注意：
+- payload 中包含工具执行所需的所有参数
+- 如果工具不需要参数，payload 可以为空对象 {}
+- 确保返回的 id 与上述工具列表中的工具名称完全匹配`
+
+    const res = await query.post({
+      path: 'ai',
+      payload: {
+        messages: [
+          {
+            role: 'system',
+            content: callPrompts
+          },
+          {
+            role: 'user',
+            content: text
+          }
+        ],
+        isJson: true
+      }
+    })
+    setText('');
+    console.log('发送消息', text, res);
+    if (res.code === 200) {
+      // 处理返回结果
+      const payload = res.data?.action;
+      if (payload) {
+        const route = routes.find(r => r.id === payload.id);
+        const { path, key } = route || {};
+        const { id, ...otherParams } = payload.payload || {};
+        const action = { path, key, ...otherParams }
+        let response;
+        if (route) {
+          response = await app.run(action);
+          // toast.success('工具调用成功');
+        } else {
+          console.error('未找到对应工具', payload.id);
+          toast.error('未找到对应工具');
+          return
+        }
+        if (route?.metadata?.viewItem) {
+          // 自动打开右侧面板
+          if (!studioStore.showRightPanel) {
+            studioStore.setShowRightPanel(true);
+          }
+          const viewItem = route.metadata.viewItem;
+          viewItem.response = response;
+          viewItem.action = action;
+          viewItem.description = route.description || viewItem.description;
+          // @ts-ignore
+          viewItem._id = Date.now();
+          studioStore.addMessage(viewItem);
+        }
+      }
+    }
+    setIsLoading(false);
+  }
+  return <div className="h-full flex flex-col border-l border-gray-300 bg-white">
+    <div style={{ height: '3rem' }} className="flex items-center justify-between px-4 border-b border-gray-300 bg-gray-50">
+      <div className="text-sm text-gray-600">智能体</div>
+    </div>
+    <div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto">
+      <QueryViewMessages type="component" />
+    </div>
+    <div className="flex items-center gap-2 px-4 py-3 border-t border-gray-300 bg-white">
+      <input
+        type="text"
+        placeholder="输入消息..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && onSend()}
+        className="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-white text-black placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-800 transition-all"
+      />
+      <button
+        onClick={onSend}
+        disabled={isLoading}
+        className="px-4 py-2 bg-black hover:bg-gray-900 disabled:bg-gray-400 text-white font-medium rounded-md transition-colors duration-200 flex-shrink-0"
+      >
+        {isLoading ? '发送中...' : '发送'}
+      </button>
+    </div>
+  </div>
+}
--- a/web-v2/src/app/chat/modules/messages.tsx
+++ b/web-v2/src/app/chat/modules/messages.tsx
@@ -0,0 +1,46 @@
+type MessageData = {
+  id: string;
+  type: 'md' | 'api';
+  api?: {
+    url?: string;
+    /**
+     * 默认不存在，动态生成
+     */
+    query?: any;
+  };
+  question?: string;
+  action?: any;
+  /**
+ * 默认不存在，动态生成
+ */
+  response?: any;
+}
+
+type MessageProps = {
+  data: MessageData;
+}
+export const Message = (props: MessageProps) => {
+  const { data } = props;
+  if (data.type === 'md') {
+    return <div className="prose prose-sm max-w-full">
+      {/* Markdown 渲染组件 */}
+      Markdown 内容
+    </div>
+  }
+  if (data.type === 'api') {
+    return <div>
+      {/* 查询结果渲染组件 */}
+      查询结果内容
+    </div>
+  }
+  return <div>未知消息类型</div>
+}
+
+export const Messages = (props: { items: MessageData[] }) => {
+  const items = props.items || [];
+  return <div className="p-4 space-y-4">
+    {items.map((item) => (
+      <Message key={item.id} data={item} />
+    ))}
+  </div>
+}
--- a/web-v2/src/app/chat/store.ts
+++ b/web-v2/src/app/chat/store.ts
--- a/web-v2/src/app/cv/index.css
+++ b/web-v2/src/app/cv/index.css
@@ -0,0 +1,257 @@
+.cv-app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+}
+
+.cv-header {
+  height: 68px;
+  background: #ffffff;
+  padding: 0 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.cv-header h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #0a0a0a;
+  font-weight: 600;
+}
+
+.cv-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.cv-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.cv-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+.cv-btn:active {
+  transform: translateY(0);
+}
+
+.cv-btn-primary {
+  background: #0a0a0a;
+  color: white;
+  border-color: #0a0a0a;
+}
+
+.cv-btn-primary:hover {
+  background: #1a1a1a;
+  border-color: #1a1a1a;
+}
+
+.cv-btn-secondary {
+  background: white;
+  color: #525252;
+  border-color: #e5e5e5;
+}
+
+.cv-btn-secondary:hover {
+  background: #fafafa;
+  border-color: #d4d4d4;
+}
+
+.cv-btn-danger {
+  background: white;
+  color: #dc2626;
+  border-color: #fecaca;
+}
+
+.cv-btn-danger:hover {
+  background: #fef2f2;
+  border-color: #fca5a5;
+}
+
+.cv-editor-container {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.cv-preview-container {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.cv-preview {
+  background: white;
+  padding: 3rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  min-height: 800px;
+}
+
+/* Markdown 样式优化 */
+.markdown-body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-size: 16px;
+  line-height: 1.6;
+  color: #0a0a0a;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #0a0a0a;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 16px;
+  padding-left: 2em;
+}
+
+.markdown-body li {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+.markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+  color: #0a0a0a;
+}
+
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  border: 1px solid #e5e5e5;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: #525252;
+  border-left: 0.25em solid #e5e5e5;
+  margin-bottom: 16px;
+}
+
+.markdown-body strong {
+  font-weight: 600;
+  color: #0a0a0a;
+}
+
+.markdown-body em {
+  font-style: italic;
+}
+
+.markdown-body hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #e5e5e5;
+  border: 0;
+}
+
+/* 打印样式 */
+@media print {
+  .cv-header {
+    display: none;
+  }
+
+  .cv-app {
+    background: white;
+  }
+
+  .cv-preview {
+    box-shadow: none;
+    padding: 0;
+  }
+
+  .cv-preview-container {
+    padding: 0;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .cv-header {
+    height: auto;
+    min-height: 68px;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1rem;
+  }
+
+  .cv-actions {
+    justify-content: stretch;
+  }
+
+  .cv-btn {
+    flex: 1;
+    justify-content: center;
+    padding: 0.5rem;
+  }
+
+  .cv-btn span:not([class]) {
+    display: none;
+  }
+
+  .cv-preview {
+    padding: 1.5rem;
+  }
+
+  .cv-editor-container {
+    padding: 1rem;
+  }
+}
--- a/web-v2/src/app/cv/index.tsx
+++ b/web-v2/src/app/cv/index.tsx
@@ -0,0 +1,174 @@
+import { useState, useEffect } from 'react'
+import MDEditor from '@uiw/react-md-editor'
+import { ToastContainer, Slide } from 'react-toastify'
+import { Save, Download, Printer, Eye, Edit, RotateCcw } from 'lucide-react'
+import 'github-markdown-css/github-markdown-light.css'
+import './index.css'
+
+const defaultResume = `# 张三
+
+**前端开发工程师** | 北京 | zhangsan@example.com | 138-0000-0000
+
+## 个人简介
+
+热爱前端开发，拥有5年React和Vue开发经验。专注于构建高性能、可维护的Web应用。
+
+## 工作经历
+
+### 高级前端工程师 | ABC科技有限公司
+*2021年6月 - 至今*
+
+- 负责公司核心产品的前端架构设计和开发
+- 使用React和TypeScript构建企业级管理系统
+- 优化前端性能，页面加载速度提升40%
+- 带领5人前端团队，制定代码规范和最佳实践
+
+### 前端开发工程师 | XYZ互联网公司
+*2019年3月 - 2021年5月*
+
+- 参与电商平台的前端开发
+- 使用Vue.js开发响应式Web应用
+- 与后端团队协作，实现RESTful API对接
+
+## 技能
+
+- **前端框架**: React, Vue.js, Next.js, Astro
+- **编程语言**: TypeScript, JavaScript, HTML5, CSS3
+- **工具**: Git, Webpack, Vite, Docker
+- **其他**: Node.js, GraphQL, Tailwind CSS
+
+## 教育背景
+
+### 计算机科学与技术 | 本科
+*北京某大学 | 2015年9月 - 2019年6月*
+
+- 主修课程：数据结构、算法、计算机网络、数据库原理
+- 优秀毕业生，GPA 3.8/4.0
+
+## 项目经验
+
+### 企业级管理系统
+*技术栈: React, TypeScript, Ant Design*
+
+- 设计并实现模块化权限管理系统
+- 开发数据可视化大屏，支持实时数据展示
+- 编写单元测试，代码覆盖率达到85%
+
+### 电商平台前端
+*技术栈: Vue.js, Vuex, Element UI*
+
+- 实现购物车、订单管理等核心功能
+- 优化首屏加载时间，LCP从2.5s降至1.2s
+- 响应式设计，完美支持移动端访问
+
+## 语言能力
+
+- 英语：CET-6，能够阅读英文技术文档
+- 普通话：母语
+`
+
+export const AppProvider = () => {
+  return (
+    <div>
+      <App />
+      <ToastContainer transition={Slide} />
+    </div>
+  )
+}
+
+export const App = () => {
+  const [markdown, setMarkdown] = useState<string | undefined>(defaultResume)
+  const [isPreviewMode, setIsPreviewMode] = useState(false)
+
+  // 从 localStorage 加载保存的简历
+  useEffect(() => {
+    const saved = localStorage.getItem('cv-content')
+    if (saved) {
+      setMarkdown(saved)
+    }
+  }, [])
+
+  // 保存到 localStorage
+  const handleSave = () => {
+    if (markdown) {
+      localStorage.setItem('cv-content', markdown)
+      alert('简历已保存！')
+    }
+  }
+
+  // 导出为 Markdown 文件
+  const handleExport = () => {
+    if (markdown) {
+      const blob = new Blob([markdown], { type: 'text/markdown' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'resume.md'
+      a.click()
+      URL.revokeObjectURL(url)
+    }
+  }
+
+  // 打印简历
+  const handlePrint = () => {
+    window.print()
+  }
+
+  // 重置为默认模板
+  const handleReset = () => {
+    if (confirm('确定要重置为默认模板吗？当前内容将丢失。')) {
+      setMarkdown(defaultResume)
+      localStorage.removeItem('cv-content')
+    }
+  }
+
+  return (
+    <div className="cv-app">
+      <header className="cv-header">
+        <h1>📄 简历编辑器</h1>
+        <div className="cv-actions">
+          <button onClick={handleSave} className="cv-btn cv-btn-primary">
+            <Save size={16} />
+            <span>保存</span>
+          </button>
+          <button onClick={handleExport} className="cv-btn cv-btn-secondary">
+            <Download size={16} />
+            <span>导出 MD</span>
+          </button>
+          <button onClick={handlePrint} className="cv-btn cv-btn-secondary">
+            <Printer size={16} />
+            <span>打印</span>
+          </button>
+          <button onClick={() => setIsPreviewMode(!isPreviewMode)} className="cv-btn cv-btn-secondary">
+            {isPreviewMode ? <Edit size={16} /> : <Eye size={16} />}
+            <span>{isPreviewMode ? '编辑' : '预览'}</span>
+          </button>
+          <button onClick={handleReset} className="cv-btn cv-btn-danger">
+            <RotateCcw size={16} />
+            <span>重置</span>
+          </button>
+        </div>
+      </header>
+
+      {isPreviewMode ? (
+        <div className="cv-preview-container">
+          <div className="cv-preview markdown-body">
+            <MDEditor.Markdown source={markdown} />
+          </div>
+        </div>
+      ) : (
+        <div className="cv-editor-container" data-color-mode="light">
+          <MDEditor
+            value={markdown}
+            onChange={setMarkdown}
+            height={800}
+            preview="edit"
+            textareaProps={{
+              placeholder: '在这里输入你的简历内容（支持 Markdown 格式）...'
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
--- a/web-v2/src/app/globals.css
+++ b/web-v2/src/app/globals.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/web-v2/src/app/layout.tsx
+++ b/web-v2/src/app/layout.tsx
@@ -0,0 +1,44 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from 'sonner'
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Light Code",
+  description: "直觉、高效的代码编辑",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN" className="">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100`}
+      >
+        {children}
+        <Toaster></Toaster>
+      </body>
+    </html>
+  );
+}
--- a/web-v2/src/app/page.tsx
+++ b/web-v2/src/app/page.tsx
@@ -0,0 +1,10 @@
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        Light Code
+      </main>
+    </div>
+  );
+}
--- a/web-v2/src/app/query-view/index.tsx
+++ b/web-v2/src/app/query-view/index.tsx
@@ -0,0 +1,311 @@
+import { QueryProxy, RouterViewItem } from '@kevisual/api/proxy'
+import { app } from '@/agent/index.ts'
+import { use, useEffect, useState } from 'react'
+import { flexRender, useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
+import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code } from 'lucide-react'
+import { toast, ToastContainer, Slide } from 'react-toastify'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+import { useStudioStore } from '../studio/store'
+import { useShallow } from 'zustand/shallow'
+import { cloneDeep } from 'es-toolkit'
+
+type Props = {
+  type: 'component' | 'page',
+  viewData?: any
+}
+
+const queryProxy = new QueryProxy({
+  router: app as any
+});
+export const QueryView = (props: Props) => {
+  const [data, setData] = useState<any[]>([])
+  const [columns, setColumns] = useState<ColumnDef<any>[]>([])
+  const [type] = useState<'component' | 'page'>(props.type || 'page')
+  const [viewData, setViewData] = useState<RouterViewItem | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [showMoreMenu, setShowMoreMenu] = useState(false)
+  const [selectedRow, setSelectedRow] = useState<any | null>(null)
+  const [isList, setIsList] = useState(true)
+  const [obj, setObj] = useState<any>(null)
+  const table = useReactTable({
+    data,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+  const studioStore = useStudioStore(useShallow((state) => ({
+    deleteMessage: state.deleteMessage
+  })))
+  const main = async () => {
+    try {
+      setIsLoading(true)
+      const res = await queryProxy.runByRouteView(viewData!)
+      const response = res.response;
+      console.log('response', response, viewData);
+      const list = response.data?.list
+      if (!list) {
+        setIsList(false);
+        setObj(response.data);
+        return;
+      }
+      if (isList === false) {
+        setIsList(true);
+      }
+      setData(response.data.list)
+      console.log('res', res);
+      const [_, firstItem] = response.data.list || []
+      if (firstItem) {
+        const cols: ColumnDef<any>[] = Object.keys(firstItem).map(key => ({
+          accessorKey: key,
+          header: key.toUpperCase(),
+          cell: info => info.getValue() + '',
+        }))
+        setColumns(cols)
+      }
+      toast.success('数据获取成功')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleRefresh = () => {
+    if (viewData) {
+      setViewData({ ...viewData, response: undefined }) // 触发刷新
+    }
+  }
+
+  const handleShowDetails = () => {
+    console.log('Show details for row:', props.viewData)
+    const data = cloneDeep(props.viewData)
+    delete data.api?.proxy;
+    delete data.context?.router;
+    delete data.worker?.worker;
+    const str = JSON.stringify(data, null, 2)
+    toast.info(<pre className='max-h-96 overflow-auto'>{str}</pre>, {
+      autoClose: 5000,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      icon: false
+    });
+  }
+
+  const handleEdit = () => {
+    if (selectedRow) {
+      console.log('Edit row:', selectedRow)
+      // 在这里添加编辑逻辑
+    }
+  }
+
+  const handleDelete = () => {
+    if (selectedRow) {
+      console.log('Delete row:', selectedRow)
+      // 在这里添加删除逻辑
+    }
+    studioStore.deleteMessage(props.viewData!)
+  }
+
+  const handleExport = () => {
+    if (!viewData) return
+    console.log('Export viewData:', viewData)
+  }
+  const handleExportCode = () => {
+    if (!viewData) return
+    console.log('Export code for viewData:', viewData)
+  }
+  const handleSave = () => {
+    if (selectedRow) {
+      console.log('Save row:', selectedRow)
+      toast.success('保存成功')
+      // 在这里添加保存逻辑
+    }
+  }
+
+  const handleSaveAndOpen = () => {
+    if (selectedRow) {
+      console.log('Save and open row:', selectedRow)
+      toast.success('保存并打开成功')
+      // 在这里添加保存并打开逻辑
+    }
+  }
+  useEffect(() => {
+    if (viewData) {
+      main()
+    }
+  }, [viewData])
+
+  useEffect(() => {
+    props.viewData && setViewData(props.viewData as RouterViewItem)
+  }, [])
+  const RenderTable = () => {
+    if (!isList) {
+      return <pre className='bg-gray-100 p-4 rounded-lg overflow-auto'>
+        {JSON.stringify(obj, null, 2)}
+      </pre>
+    }
+    return <table className='w-full border-collapse min-w-max md:w-full'>
+      <thead className='bg-gray-100 border-b-2 border-gray-300 sticky top-0'>
+        {table.getHeaderGroups().map(headerGroup => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map(header => (
+              <th
+                key={header.id}
+                className='px-4 py-3 text-left text-sm font-semibold text-gray-700 whitespace-nowrap'
+              >
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map((row, idx) => (
+          <tr
+            key={row.id}
+            className={`border-b border-gray-200 transition-colors duration-200 ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+              } hover:bg-blue-50`}
+          >
+            {row.getVisibleCells().map(cell => (
+              <td
+                key={cell.id}
+                className='px-4 py-3 text-sm text-gray-600'
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  }
+  const isPage = type === 'page'
+  return <div id='route-view' className={`w-full ${type === 'component' ? 'max-h-[600px] overflow-y-auto' : 'h-full overflow-auto'} p-4`}>
+    <div className='mb-4'>
+      <div className='flex items-center justify-between'>
+        <h2 className={`font-bold ${type === 'component' ? 'text-lg' : 'text-2xl'} truncate`} title={`路由视图 - ${viewData?.title || '未命名'}`}>路由视图 - {viewData?.title || '未命名'}</h2>
+        <div className='flex items-center gap-2 relative'>
+          <button
+            onClick={handleRefresh}
+            disabled={isLoading}
+            className='p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50'
+            title='刷新'
+          >
+            <RefreshCw size={20} className={isLoading ? 'animate-spin' : ''} />
+          </button>
+
+          <DropdownMenu open={showMoreMenu} onOpenChange={setShowMoreMenu}>
+            <DropdownMenuTrigger asChild>
+              <button
+                className='p-2 hover:bg-gray-200 rounded-lg transition-colors'
+                title='更多选项'
+              >
+                <MoreVertical size={20} />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end' className='w-48 border-gray-300'>
+              {!isPage && (
+                <>
+                  <DropdownMenuItem onClick={handleSave}>
+                    <Save size={16} className='mr-2' />
+                    <span>保存</span>
+                  </DropdownMenuItem>
+                </>
+              )}
+              {!isPage && (
+                <>
+                  <DropdownMenuItem onClick={handleSaveAndOpen}>
+                    <ExternalLink size={16} className='mr-2' />
+                    <span>保存并打开</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              <DropdownMenuItem onClick={() => handleShowDetails()}>
+                <Info size={16} className='mr-2' />
+                <span>详情</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleEdit}>
+                <Edit size={16} className='mr-2' />
+                <span>编辑</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleDelete} variant='destructive'>
+                <Trash2 size={16} className='mr-2' />
+                <span>{!isPage ? '移除' : '删除'}</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleExport}>
+                <Download size={16} className='mr-2' />
+                <span>导出</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleExportCode}>
+                <Code size={16} className='mr-2' />
+                <span>导出代码</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+    <div className='w-full overflow-x-auto rounded-lg shadow-md border border-gray-300'>
+      <RenderTable />
+    </div>
+  </div>
+}
+export const QueryViewMessages = (props: Props) => {
+  const studioStore = useStudioStore(useShallow((state) => ({
+    messages: state.messages,
+    setMessages: state.setMessages
+  })))
+  const initPage = async () => {
+    const url = new URL(window.location.href)
+    const id = url.searchParams.get('id') || ''
+    if (!id) {
+      toast.error('缺少查询视图ID参数')
+      // return
+    }
+    // 查询query-view的保存的id，赋值后然后执行查询
+    // @ts-ignore
+    const DemoRouterView: RouterViewItem = {
+      id: 'getData',
+      description: '获取数据',
+      title: '获取数据',
+      type: 'api',
+      api: {
+        // url: "/api/router",
+        url: "http://localhost:52000/api/router",
+      },
+      action: {
+        path: 'router',
+        key: 'list'
+      }
+    }
+    studioStore.setMessages([DemoRouterView])
+  }
+  useEffect(() => {
+    const type = props.type || 'page'
+    if (type === 'page') {
+      initPage()
+    }
+  }, [props.type])
+  return <div>
+    {studioStore.messages.map((msg, index) => (
+      <div key={msg._id || msg.id} className="p-4 border-b border-gray-200">
+        <QueryView viewData={msg} type={props.type} />
+      </div>
+    ))}
+  </div>
+}
+export const AppProvider = () => {
+  return <main className='w-full h-screen flex flex-col overflow-auto'>
+    <QueryViewMessages type="page" />
+    <ToastContainer position="top-center" autoClose={1000} hideProgressBar={false} newestOnTop={false} closeOnClick rtl={false} pauseOnFocusLoss draggable pauseOnHover transition={Slide} />
+  </main>
+}
--- a/web-v2/src/app/setting/index.tsx
+++ b/web-v2/src/app/setting/index.tsx
@@ -0,0 +1,25 @@
+import { toast, ToastContainer, Slide } from 'react-toastify';
+
+export const AppProvider = () => {
+  return <main className='w-full'>
+    <App />
+    <ToastContainer
+      position="top-right"
+      autoClose={3000}
+      hideProgressBar
+      newestOnTop
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme="light"
+      transition={Slide} />
+  </main>
+}
+
+export const App = () => {
+  return (
+    <div>Studio App</div>
+  )
+}
--- a/web-v2/src/app/studio/index.tsx
+++ b/web-v2/src/app/studio/index.tsx
@@ -0,0 +1,296 @@
+import { toast, ToastContainer, Slide } from 'react-toastify';
+import { useStudioStore } from './store.ts';
+import { use, useEffect, useState } from 'react';
+import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, Filter, FilterX, Search, X } from 'lucide-react';
+import { Panel, Group } from 'react-resizable-panels'
+import { ViewList } from '../view/list.tsx';
+import { useShallow } from 'zustand/shallow';
+import { Chat } from '../chat/index.tsx';
+import { Input } from '@/components/ui/input.tsx';
+export const AppProvider = () => {
+  const { showLeftPanel, showRightPanel } = useStudioStore(useShallow((state) => ({
+    showLeftPanel: state.showLeftPanel,
+    showRightPanel: state.showRightPanel,
+  })));
+  return <main className='w-full h-screen flex flex-col overflow-hidden'>
+    <Group className="h-full flex-1 overflow-hidden">
+      {showLeftPanel && <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r border-gray-300 overflow-auto">
+        <ViewList />
+      </Panel>}
+      <Panel>
+        <WrapperHeader>
+          <Group className="h-full overflow-hidden">
+            <Panel >
+              <App />
+            </Panel>
+            {showRightPanel && <Panel defaultSize={500} minSize={300} maxSize={600} className="border-l border-gray-300 overflow-auto">
+              <Chat />
+            </Panel>}
+          </Group>
+        </WrapperHeader>
+      </Panel>
+
+    </Group>
+    <ToastContainer
+      position="top-right"
+      autoClose={3000}
+      hideProgressBar
+      newestOnTop
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme="light"
+      transition={Slide} />
+  </main>
+}
+export const WrapperHeader = (props: { children: React.ReactNode }) => {
+  const showLeftPanel = useStudioStore(state => state.showLeftPanel);
+  const store = useStudioStore(useShallow((state) => ({
+    showLeftPanel: state.showLeftPanel,
+    setShowLeftPanel: state.setShowLeftPanel,
+    showFilter: state.showFilter,
+    setShowFilter: state.setShowFilter,
+    showRightPanel: state.showRightPanel,
+    setShowRightPanel: state.setShowRightPanel,
+  })));
+  return <div className='h-full'>
+    <div className="w-full h-12 flex items-center justify-between px-4 border-b border-gray-200 bg-white">
+      <div className="cursor-pointer text-gray-600 hover:text-gray-900 transition-colors" title="Kevisual Router Studio" onClick={() => {
+        store.setShowLeftPanel(!store.showLeftPanel);
+      }}>
+        {showLeftPanel ? <PanelLeftClose size={16} /> : <PanelLeft size={16} />}
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
+          title={store.showFilter ? "隐藏过滤器" : "显示过滤器"}
+          onClick={() => store.setShowFilter(!store.showFilter)}
+        >
+          {store.showFilter ? <FilterX size={16} /> : <Filter size={16} />}
+        </button>
+        <button
+          className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
+          title={store.showRightPanel ? "隐藏右侧面板" : "显示右侧面板"}
+          onClick={() => store.setShowRightPanel(!store.showRightPanel)}
+        >
+          {store.showRightPanel ? <PanelRightClose size={16} /> : <PanelRight size={16} />}
+        </button>
+      </div>
+    </div>
+    <div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto">
+      {props.children}
+    </div>
+  </div >
+}
+interface RouteItem {
+  id: string;
+  path?: string;
+  key?: string;
+  description?: string;
+  metadata?: Record<string, any>;
+}
+
+export const App = () => {
+  const { routes, queryRouteList, run, loading, searchRoutes, ...store } = useStudioStore(useShallow((state) => ({
+    routes: state.routes,
+    searchRoutes: state.searchRoutes,
+    queryRouteList: state.queryRouteList,
+    run: state.run,
+    loading: state.loading,
+    showFilter: state.showFilter,
+    currentView: state.currentView,
+    setShowFilter: state.setShowFilter,
+  })));
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());
+  const [searchKeyword, setSearchKeyword] = useState<string>('');
+
+  useEffect(() => {
+    queryRouteList();
+  }, []);
+  useEffect(() => {
+    if (store.showFilter) {
+      // 当显示过滤器时，自动聚焦输入框
+      const timer = setTimeout(() => {
+        const input = document.querySelector('input[placeholder="过滤路由..."]') as HTMLInputElement;
+        if (input) {
+          input.focus();
+        }
+      }, 100);
+      if (!store.currentView) {
+        return
+      }
+      const viewId = store.currentView.viewId;
+      const viewItem = store.currentView.views.find(v => v.id === viewId);
+      if (viewItem && viewItem.query) {
+        setSearchKeyword(viewItem.query);
+      }
+      return () => clearTimeout(timer);
+    }
+  }, [store.showFilter, store.currentView?.viewId]);
+  const handleSearch = async (keyword: string) => {
+    if (keyword.trim()) {
+      await searchRoutes(keyword);
+    } else {
+      await queryRouteList();
+    }
+  };
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      await handleSearch(searchKeyword);
+    }
+  };
+
+  const handleClear = async () => {
+    setSearchKeyword('');
+    await queryRouteList();
+  };
+
+  const toggleDescription = (id: string) => {
+    const newExpanded = new Set(expandedIds);
+    if (newExpanded.has(id)) {
+      newExpanded.delete(id);
+    } else {
+      newExpanded.add(id);
+    }
+    setExpandedIds(newExpanded);
+  };
+
+  const toggleIdVisibility = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    const newVisible = new Set(visibleIds);
+    if (newVisible.has(id)) {
+      newVisible.delete(id);
+    } else {
+      newVisible.add(id);
+    }
+    setVisibleIds(newVisible);
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto p-6 h-full overflow-auto">
+      {loading && <div className="text-center text-gray-500 mb-4">加载中...</div>}
+      {store.showFilter && (
+        <div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-300 bg-white focus-within:ring-2 focus-within:ring-gray-400 focus-within:ring-offset-1 focus-within:border-gray-400">
+            <Search size={16} className="text-gray-700 flex-shrink-0" strokeWidth={2} />
+            <Input
+              placeholder="输入路由关键词进行搜索..."
+              className="w-full !border-0 !shadow-none !outline-none bg-transparent focus-visible:!outline-none focus-visible:!ring-0 focus-visible:!ring-offset-0 text-sm text-gray-900 placeholder:text-gray-500"
+              value={searchKeyword}
+              onChange={(e) => setSearchKeyword(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+            {searchKeyword && (
+              <button
+                onClick={handleClear}
+                className="p-1 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-200 active:bg-gray-300 transition-all duration-150 cursor-pointer flex-shrink-0"
+                title="清空搜索"
+              >
+                <X size={16} />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+      <div className={`space-y-1 ${loading ? "opacity-50 pointer-events-none" : ""}`}>
+        {routes.map((route: RouteItem) => {
+          const isExpanded = expandedIds.has(route.id);
+          const isIdVisible = visibleIds.has(route.id);
+          const len = route.description?.length || 0;
+          const isLongDescription = len > 20;
+          return (
+            <div
+              key={route.id}
+              className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50/50 transition-all duration-200 animate-in fade-in slide-in-from-top-1 duration-400"
+            >
+              <div className="flex flex-col gap-2.5">
+                {/* ID and Path/Key in one line */}
+                <div className="flex gap-2.5 flex-wrap items-center justify-between">
+                  <div className="flex gap-2.5 flex-wrap items-center">
+                    <span
+                      onClick={(e) => toggleIdVisibility(e, route.id)}
+                      className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-gray-900 text-white cursor-pointer hover:bg-gray-700 transition-all duration-200 shadow-sm"
+                    >
+                      {isIdVisible ? route.id : 'id'}
+                    </span>
+
+                    {(route.path || route.key) && (
+                      <div className="bg-gray-100 px-3 py-1.5 rounded-md font-mono text-sm text-gray-900 border border-gray-200">
+                        {route.path}{route.key && ` / ${route.key}`}
+                      </div>
+                    )}
+                  </div>
+                  <div className='inline-flex items-center justify-center gap-1'>
+
+                    <button
+                      className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
+                      title="直接运行"
+                      onClick={() => run(route)}
+                    >
+                      <Play size={14} strokeWidth={2.5} />
+                    </button>
+
+                    <button className="p-1.5 rounded-md text-gray-20 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
+                      title="高级运行"
+                      onClick={() => run(route)}>
+                      <MonitorPlay size={14} strokeWidth={2.5} />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Description with expand/collapse */}
+                {route.description && (
+                  <div
+                    className="cursor-pointer group"
+                  >
+                    <div
+                      className={`text-gray-700 transition-colors duration-200 cursor-pointer overflow-hidden`}
+                    >
+                      {isExpanded ? (
+                        <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                          {route.description}
+                        </p>
+                      ) : (
+                        <p className="text-sm leading-relaxed overflow-hidden text-ellipsis whitespace-nowrap">
+                          {route.description}
+                        </p>
+                      )}
+                    </div>
+                    {isLongDescription && (
+                      <p className="text-xs text-gray-400 mt-1 group-hover:text-gray-500 transition-colors duration-200"
+                        onClick={() => toggleDescription(route.id)}
+                      >
+                        {isExpanded ? '点击收起' : '点击展开'}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {/* Metadata */}
+                {route.metadata && Object.keys(route.metadata).length > 0 && (
+                  <div className="mt-0.5">
+                    <span className="text-xs text-gray-500 mr-2 font-medium">Metadata:</span>
+                    <div className="flex gap-1.5 flex-wrap">
+                      {Object.entries(route.metadata).map(([k, v]) => (
+                        <span
+                          key={k}
+                          className="inline-flex items-center px-2 py-1 rounded text-xs bg-white text-gray-700 border border-gray-200 shadow-sm"
+                        >
+                          <span className="font-semibold text-gray-900">{k}:</span> {String(v)}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
--- a/web-v2/src/app/studio/store.ts
+++ b/web-v2/src/app/studio/store.ts
@@ -0,0 +1,264 @@
+import { create } from 'zustand';
+import { QueryProxy, RouterViewData, RouterViewItem, pickRouterViewData } from '@kevisual/api'
+import { query } from '@/modules/query.ts'
+import { toast } from 'react-toastify';
+import { use } from '@kevisual/context'
+import { MyCache } from '@kevisual/cache'
+import { persist } from 'zustand/middleware';
+import { app } from '@/agent/index.ts'
+import { cloneDeep, random } from 'es-toolkit'
+import { nanoid } from 'nanoid';
+const historyReplace = (url: string) => {
+  if (window.history.replaceState) {
+    window.history.replaceState(null, '', url);
+  }
+}
+type RouteItem = {
+  id: string;
+  path?: string;
+  key?: string;
+  description?: string;
+  metadata?: Record<string, any>;
+}
+
+type RouteViewList = Array<RouterViewData>;
+
+
+interface StudioState {
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  routes: Array<RouteItem>;
+  searchRoutes: (keyword: string) => Promise<void>;
+  run: (route: RouteItem) => Promise<void>;
+  queryProxy?: QueryProxy;
+  init: (force?: boolean) => Promise<{ queryProxy: QueryProxy }>;
+  routeViewList: RouteViewList;
+  getViewList: () => Promise<void>;
+  queryRouteList: () => Promise<void>;
+  getCurrentView: () => Promise<void>;
+  updateRouteView: (view: RouterViewData) => Promise<void>;
+  deleteRouteView: (id: string) => Promise<void>;
+  deleteRouteViewItem: (id: string, viewId: string) => void;
+  currentView?: RouterViewData;
+  setCurrentView: (view?: RouterViewData) => Promise<void>;
+  showLeftPanel: boolean;
+  setShowLeftPanel: (show: boolean) => void;
+  showFilter: boolean;
+  setShowFilter: (show: boolean) => void;
+  showRightPanel: boolean;
+  setShowRightPanel: (show: boolean) => void;
+  messages: any[];
+  setMessages: (messages: any[]) => void;
+  addMessage: (message: any) => void;
+  deleteMessage: (message: any) => void;
+}
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export const useStudioStore = create<StudioState>()(
+  persist(
+    (set, get) => ({
+      loading: false,
+      setLoading: (loading: boolean) => set({ loading }),
+      routes: [],
+      searchRoutes: async (keyword: string) => {
+        const state = await get().init();
+        let queryProxy = state.queryProxy;
+        const routes: any[] = await queryProxy.listRoutes(() => true, { query: keyword });
+        set({ routes });
+      },
+      currentView: undefined,
+      queryRouteList: async () => {
+        await get().getCurrentView();
+        const state = await get().init();
+        let currentView: RouterViewData | undefined = get().currentView;
+        let queryProxy = state.queryProxy;
+        const viewId = currentView?.viewId ?? ''
+        const routes: any[] = await queryProxy.listRoutes(() => true, { viewId });
+        set({ routes });
+      },
+      setCurrentView: async (view?: RouterViewData) => {
+        const beforeView = get().currentView;
+        set({ currentView: view, routes: [] });
+        const viewId = view?.viewId || '';
+        const url = new URL(window.location.href);
+        if (viewId) {
+          url.searchParams.set('viewId', viewId);
+        } else {
+          url.searchParams.delete('viewId');
+        }
+        historyReplace(url.toString());
+        console.log('视图切换', beforeView, view);
+        await get().init(beforeView?.id !== view?.id);
+        await get().queryRouteList();
+      },
+      getViewList: async () => {
+        const res = await query.post({ path: 'views', key: 'list' });
+        if (res.code === 200) {
+          const list = res.data.list as RouteViewList || [];
+          set({ routeViewList: list });
+        }
+      },
+      getCurrentView: async () => {
+        const url = new URL(window.location.href);
+        const viewId = url.searchParams.get('viewId');
+        if (!viewId) {
+          return;
+        }
+        const res = await query.post({ path: 'views', key: 'current', data: { viewId: viewId } });
+        if (res.code === 200) {
+          const view = res.data as RouterViewData;
+          view.viewId = viewId;
+          set({ currentView: view });
+        } else {
+          set({ currentView: undefined });
+        }
+      },
+      routeViewList: [],
+      updateRouteView: async (view: RouterViewData) => {
+        const res = await query.post({ path: 'views', key: 'update', data: view });
+        if (res.code !== 200) {
+          toast.error(`视图更新失败：${res.message || '未知错误'}`);
+          return;
+        } else {
+          get().getViewList();
+          toast.success('视图更新成功');
+        }
+      },
+      deleteRouteView: async (id: string) => {
+        const res = await query.post({ path: 'views', key: 'delete', data: { id } });
+        if (res.code !== 200) {
+          toast.error(`视图删除失败：${res.message || '未知错误'}`);
+          return;
+        }
+        get().getViewList();
+        toast.success('视图删除成功');
+      },
+      deleteRouteViewItem: (id: string, viewId: string) => {
+        const routeViewList = get().routeViewList;
+        const viewItem = routeViewList.find(view => view.id === id);
+        if (!viewItem) {
+          toast.error('视图项不存在');
+          return;
+        }
+        viewItem.views = viewItem.views?.filter(v => v.id !== viewId);
+        get().updateRouteView(viewItem);
+        const newList = routeViewList.map(view => {
+          if (view.id === viewItem.id) {
+            return viewItem;
+          }
+          return view;
+        });
+        set({ routeViewList: [...newList] });
+        console.log('删除视图项', id, newList);
+      },
+      run: async (route: RouteItem) => {
+        const state = await get().init();
+        let queryProxy = state.queryProxy;
+        const showRightPanel = get().showRightPanel;
+        const action = {
+          path: route.path,
+          key: route.key
+        }
+        const res = await queryProxy.run(action);
+        if (res.code !== 200) {
+          toast.error(`运行失败：${res.message || '未知错误'}`);
+        } else if (res.code === 200) {
+          //
+        }
+        if (showRightPanel) {
+          if (route.metadata && route.metadata?.viewItem) {
+            const messages = get().messages
+            const viewItem = cloneDeep(route.metadata.viewItem) as RouterViewItem;
+            viewItem.response = res;
+            viewItem.action = action
+            viewItem.description = route.description || viewItem.description;
+            // @ts-ignore
+            viewItem._id = nanoid(16);
+            set({ messages: [...messages, viewItem] });
+          }
+        }
+      },
+      queryProxy: undefined,
+      router: undefined,
+      init: async (force?: boolean) => {
+        // let _url = 'http://localhost:52002/api/router';  // Github starred
+        // let _url = 'http://localhost:52000/api/router'; // 浏览器
+        // let _url = '/api/router';
+        let queryProxy = get().queryProxy;
+        if (queryProxy && !force) {
+          return { queryProxy };
+        }
+        let currentView: RouterViewData | undefined = get().currentView;
+        // @ts-ignore
+        const routerViewData: RouterViewData = currentView || {
+          _id: nanoid(16),
+          views: [{
+            id: '',
+            title: '默认视图',
+            query: ``
+          }],
+          data: {
+            items: [
+              {
+                title: '默认路由',
+                id: '',
+                description: '',
+                type: 'api',
+                api: {
+                  url: '/api/router'
+                }
+              }
+            ]
+          },
+          viewId: '',
+        }
+        console.log('初始化 QueryProxy', routerViewData);
+        queryProxy = new QueryProxy({
+          routerViewData,
+          router: app as any,
+        });
+        console.log('初始化 QueryProxy 完成', queryProxy.token);
+        set({ loading: true });
+        await sleep(1000); // 保证 loading 状态更新
+        await queryProxy.init();
+        set({ loading: false });
+        set({ queryProxy });
+        return { queryProxy }
+      },
+      showLeftPanel: false,
+      setShowLeftPanel: (show: boolean) => set({ showLeftPanel: show }),
+      showRightPanel: true,
+      setShowRightPanel: (show: boolean) => set({ showRightPanel: show }),
+      showFilter: false,
+      setShowFilter: (show: boolean) => set({ showFilter: show }),
+      messages: [],
+      setMessages: (messages: any[]) => set({ messages }),
+      deleteMessage: (message: any) => {
+        const messages = get().messages;
+        const index = messages.findIndex(m => {
+          return m._id === message._id || m.id === message.id;
+        });
+        if (index !== -1) {
+          messages.splice(index, 1);
+          set({ messages: [...messages] });
+        }
+      },
+      addMessage: (message: any) => {
+        const messages = get().messages;
+        set({ messages: [...messages, message] });
+      }
+    }),
+    {
+      name: 'studio-storage',
+      partialize: (state) => ({
+        showLeftPanel: state.showLeftPanel,
+        showRightPanel: state.showRightPanel,
+        showFilter: state.showFilter,
+      }),
+    }
+  )
+);
+
+use('studioStore', () => {
+  return useStudioStore;
+});
--- a/web-v2/src/app/view/components/DataItemForm.tsx
+++ b/web-v2/src/app/view/components/DataItemForm.tsx
@@ -0,0 +1,200 @@
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Query } from "@kevisual/query"
+import { QueryRouterServer } from "@kevisual/router"
+import { nanoid } from "nanoid"
+
+export type RouterViewItem = RouterViewApi | RouterViewContext | RouterViewWorker;
+type RouteViewBase = {
+  id: string;
+  title: string;
+  description: string;
+  enabled?: boolean;
+}
+export type RouterViewApi = {
+  type: 'api',
+  api: {
+    url: string,
+    // 已初始化的query实例，不需要编辑配置
+    query?: Query
+  }
+} & RouteViewBase;
+
+export type RouterViewContext = {
+  type: 'context',
+  context: {
+    key: string,
+    // 从context中获取router，不需要编辑配置
+    router?: QueryRouterServer
+  }
+} & RouteViewBase;
+export type RouterViewWorker = {
+  type: 'worker',
+  worker: {
+    type: 'Worker' | 'SharedWorker' | 'serviceWorker',
+    url: string,
+    // 已初始化的worker实例，不需要编辑配置
+    worker?: Worker | SharedWorker | ServiceWorker,
+    /**
+     * worker选项
+     * default: { type: 'module' }
+     */
+    workerOptions?: {
+      type: 'module' | 'classic'
+    }
+  }
+} & RouteViewBase;
+interface DataItemFormProps {
+  item: RouterViewItem
+  onChange: (item: any) => void
+  onRemove: () => void
+}
+
+export const DataItemForm = ({ item, onChange, onRemove }: DataItemFormProps) => {
+  const handleChange = (field: string, value: any) => {
+    if (field === 'type') {
+      const newItem: RouterViewItem = { ...item, type: value }
+      if (value === 'api' && !('api' in item)) {
+        (newItem as RouterViewApi).api = { url: '' }
+      } else if (value === 'context' && !('context' in item)) {
+        (newItem as RouterViewContext).context = { key: '' }
+      } else if (value === 'worker' && !('worker' in item)) {
+        (newItem as RouterViewWorker).worker = { type: 'Worker', url: '', workerOptions: { type: 'module' } }
+      }
+      if (!newItem.id) {
+        newItem.id = nanoid(16)
+      }
+      onChange(newItem)
+    } else {
+      onChange({ ...item, [field]: value })
+    }
+  }
+
+  const handleNestedChange = (parent: string, field: string, value: any) => {
+    const parentValue = item[parent as keyof RouterViewItem] as Record<string, any> | undefined
+    const newParentValue: Record<string, any> = {
+      ...(parentValue || {}),
+      [field]: value
+    }
+    onChange({ ...item, [parent]: newParentValue })
+  }
+
+  const handleNestedDeepChange = (parent: string, nestedParent: string, field: string, value: any) => {
+    const parentValue = item[parent as keyof RouterViewItem] as Record<string, any> | undefined
+    const nestedValue = parentValue?.[nestedParent] as Record<string, any> | undefined
+    const newNestedValue: Record<string, any> = {
+      ...(nestedValue || {}),
+      [field]: value
+    }
+    const newParentValue: Record<string, any> = {
+      ...(parentValue || {}),
+      [nestedParent]: newNestedValue
+    }
+    onChange({ ...item, [parent]: newParentValue })
+  }
+
+  return (
+    <div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="font-medium">数据项配置</h3>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="text-sm text-red-500 hover:text-red-700"
+        >
+          删除
+        </button>
+      </div>
+
+      <div className="space-y-2">
+        <Label>标题</Label>
+        <Input
+          value={item.title || ''}
+          onChange={(e) => handleChange('title', e.target.value)}
+          placeholder="输入标题"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label>类型</Label>
+        <select
+          value={item.type}
+          onChange={(e) => handleChange('type', e.target.value)}
+          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <option value="api">API</option>
+          <option value="context">Context</option>
+          <option value="worker">Worker</option>
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="enabled"
+          checked={item.enabled !== false}
+          onCheckedChange={(checked) => handleChange('enabled', checked)}
+        />
+        <Label htmlFor="enabled" className="cursor-pointer">启用</Label>
+      </div>
+
+      {(item.type === 'api') && (
+        <div className="space-y-2">
+          <Label>API URL</Label>
+          <Input
+            value={item.api?.url || ''}
+            onChange={(e) => handleNestedChange('api', 'url', e.target.value)}
+            placeholder="输入 API 地址"
+          />
+        </div>
+      )}
+
+      {item.type === 'context' && (
+        <div className="space-y-2">
+          <Label>Context Key</Label>
+          <Input
+            value={item.context?.key || ''}
+            onChange={(e) => handleNestedChange('context', 'key', e.target.value)}
+            placeholder="输入 Context Key"
+          />
+        </div>
+      )}
+
+      {item.type === 'worker' && (
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>Worker Type</Label>
+            <select
+              value={item.worker?.type || 'Worker'}
+              onChange={(e) => handleNestedChange('worker', 'type', e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="Worker">Worker</option>
+              <option value="SharedWorker">SharedWorker</option>
+              <option value="serviceWorker">ServiceWorker</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label>Worker URL</Label>
+            <Input
+              value={item.worker?.url || ''}
+              onChange={(e) => handleNestedChange('worker', 'url', e.target.value)}
+              placeholder="输入 Worker URL"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Worker Options Type</Label>
+            <select
+              value={item.worker?.workerOptions?.type || 'module'}
+              onChange={(e) => handleNestedDeepChange('worker', 'workerOptions', 'type', e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="module">Module</option>
+              <option value="classic">Classic</option>
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/web-v2/src/app/view/components/ViewEditor.tsx
+++ b/web-v2/src/app/view/components/ViewEditor.tsx
@@ -0,0 +1,209 @@
+import { useState, useEffect, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { DataItemForm } from "@/apps/view/components/DataItemForm"
+import { ViewFormItem } from "@/apps/view/components/ViewFormItem"
+import { nanoid } from "nanoid"
+
+interface ViewEditorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  data?: {
+    id?: string
+    title?: string
+    data?: { items: any[] }
+    views?: any[]
+  }
+  onSave: (data: any) => void
+}
+
+export const ViewEditor = ({ open, onOpenChange, data, onSave }: ViewEditorProps) => {
+  const [title, setTitle] = useState('')
+  const [dataItems, setDataItems] = useState<any[]>([])
+  const [views, setViews] = useState<any[]>([])
+  const dataItemsScrollRef = useRef<HTMLDivElement>(null)
+  const viewsScrollRef = useRef<HTMLDivElement>(null)
+
+  const isUpdate = !!data?.id
+
+  useEffect(() => {
+    if (open) {
+      setTitle(data?.title || '')
+      setDataItems(data?.data?.items || [])
+      setViews(data?.views || [])
+    }
+  }, [open, data])
+
+  const handleAddDataItem = () => {
+    setDataItems([...dataItems, { type: 'api', api: { url: '' } }])
+    // 异步滚动到底部，使用 smooth 平滑滚动
+    setTimeout(() => {
+      if (dataItemsScrollRef.current) {
+        dataItemsScrollRef.current.scrollTo({
+          top: dataItemsScrollRef.current.scrollHeight,
+          behavior: 'smooth'
+        })
+      }
+    }, 0)
+  }
+
+  const handleUpdateDataItem = (index: number, item: any) => {
+    const newItems = [...dataItems]
+    newItems[index] = item
+    setDataItems(newItems)
+  }
+
+  const handleRemoveDataItem = (index: number) => {
+    setDataItems(dataItems.filter((_, i) => i !== index))
+  }
+
+  const handleAddView = () => {
+    setViews([...views, { id: nanoid(16), title: '', query: '' }])
+    // 异步滚动到底部，使用 smooth 平滑滚动
+    setTimeout(() => {
+      if (viewsScrollRef.current) {
+        viewsScrollRef.current.scrollTo({
+          top: viewsScrollRef.current.scrollHeight,
+          behavior: 'smooth'
+        })
+      }
+    }, 0)
+  }
+
+  const handleUpdateView = (index: number, view: any) => {
+    const newViews = [...views]
+    newViews[index] = view
+    setViews(newViews)
+  }
+
+  const handleRemoveView = (index: number) => {
+    setViews(views.filter((_, i) => i !== index))
+  }
+
+  const handleSave = () => {
+    const pickData = dataItems.map(item => {
+      if (item.type === 'api') {
+        delete item.api.query
+      }
+      if (item.type === 'worker') {
+        delete item.worker.worker
+      }
+      if (item.type === 'context') {
+        delete item.context.router
+      }
+      if (item.type === 'page') {
+
+      }
+      return item
+    })
+    const viewData = {
+      id: data?.id,
+      title,
+      data: {
+        items: pickData
+      },
+      views
+    }
+    onSave(viewData)
+    onOpenChange(false)
+  }
+
+  const handleClose = () => {
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{isUpdate ? '编辑视图' : '新增视图'}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 固定的视图标题 */}
+          <div className="space-y-2">
+            <Label htmlFor="title">视图标题</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="输入视图标题"
+            />
+          </div>
+
+          {/* Tabs 容器 */}
+          <Tabs defaultValue="data" className="w-full flex flex-col">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="data">数据项配置</TabsTrigger>
+              <TabsTrigger value="views">视图配置</TabsTrigger>
+            </TabsList>
+
+            {/* 数据项配置 Tab */}
+            <TabsContent value="data" className="flex flex-col mt-4">
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="font-medium">数据项配置 (data.items)</h3>
+                <Button type="button" variant="outline" size="sm" onClick={handleAddDataItem} className="cursor-pointer">
+                  添加数据项
+                </Button>
+              </div>
+              <div ref={dataItemsScrollRef} className="space-y-4 max-h-[50vh] overflow-y-auto pr-4">
+                {dataItems.length === 0 ? (
+                  <div className="text-center text-sm text-gray-500 py-8">
+                    暂无数据项，点击"添加数据项"开始配置
+                  </div>
+                ) : (
+                  dataItems.map((item, index) => (
+                    <DataItemForm
+                      key={index}
+                      item={item}
+                      onChange={(newItem) => handleUpdateDataItem(index, newItem)}
+                      onRemove={() => handleRemoveDataItem(index)}
+                    />
+                  ))
+                )}
+              </div>
+            </TabsContent>
+
+            {/* 视图配置 Tab */}
+            <TabsContent value="views" className="flex flex-col mt-4">
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="font-medium">视图配置 (views)</h3>
+                <Button type="button" variant="outline" size="sm" onClick={handleAddView} className="cursor-pointer">
+                  添加视图
+                </Button>
+              </div>
+              <div ref={viewsScrollRef} className="space-y-4 max-h-[50vh] overflow-y-auto pr-4">
+                {views.length === 0 ? (
+                  <div className="text-center text-sm text-gray-500 py-8">
+                    暂无视图，点击"添加视图"开始配置
+                  </div>
+                ) : (
+                  views.map((view, index) => (
+                    <ViewFormItem
+                      key={view.id || index}
+                      view={view}
+                      onChange={(newView) => handleUpdateView(index, newView)}
+                      onRemove={() => handleRemoveView(index)}
+                    />
+                  ))
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={handleClose} className="cursor-pointer">
+            取消
+          </Button>
+          <Button type="button" onClick={handleSave} className="cursor-pointer">
+            保存
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/web-v2/src/app/view/components/ViewFormItem.tsx
+++ b/web-v2/src/app/view/components/ViewFormItem.tsx
@@ -0,0 +1,66 @@
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { toast } from "react-toastify"
+
+interface ViewFormProps {
+  view: any
+  onChange: (view: any) => void
+  onRemove: () => void
+}
+
+export const ViewFormItem = ({ view, onChange, onRemove }: ViewFormProps) => {
+  const handleChange = (field: string, value: any) => {
+    onChange({ ...view, [field]: value })
+  }
+  const handleCopyId = async (id: string) => {
+    try {
+      await navigator.clipboard.writeText(id);
+      toast.success('已复制到剪贴板', { autoClose: 1000 });
+    } catch (err) {
+      console.error('复制失败', err);
+    }
+  }
+  return (
+    <div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="font-medium">视图配置</h3>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="text-sm text-red-500 hover:text-red-700"
+        >
+          删除
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2" onClick={() => handleCopyId(view.id)}>
+          <Label>ID</Label>
+          <Input
+            value={view.id || ''}
+            onChange={(e) => handleChange('id', e.target.value)}
+            placeholder="自动生成"
+            disabled
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>标题</Label>
+          <Input
+            value={view.title || ''}
+            onChange={(e) => handleChange('title', e.target.value)}
+            placeholder="输入视图标题"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label>查询语句</Label>
+        <Input
+          value={view.query || ''}
+          onChange={(e) => handleChange('query', e.target.value)}
+          placeholder="输入查询语句"
+        />
+      </div>
+    </div>
+  )
+}
--- a/web-v2/src/app/view/list.tsx
+++ b/web-v2/src/app/view/list.tsx
@@ -0,0 +1,232 @@
+import { useEffect, useState } from "react";
+import { useStudioStore } from '../studio/store.ts';
+import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ViewEditor } from "@/apps/view/components/ViewEditor.tsx";
+import { toast } from "react-toastify";
+
+const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
+  const [expanded, setExpanded] = useState(false);
+  const studioStore = useStudioStore();
+  useEffect(() => {
+    const currentViewId = studioStore.currentView?.viewId;
+    if (view.views.some((v: any) => v.id === currentViewId)) {
+      setExpanded(true);
+    }
+  }, [studioStore.currentView?.viewId]);
+  const ShowViews = (props: { views: { id: string, title: string, query?: any }[] }) => {
+    const studioStore = useStudioStore();
+    const currentViewId = studioStore.currentView?.viewId;
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+    const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+    const isActiveView = (viewId: string) => {
+      return viewId === currentViewId;
+    }
+    return <div className="mt-2 ml-4 w-full border-l-2 border-l-gray-300 border-gray-300 pl-3 space-y-1">
+      {props.views.map(v => (
+        <div
+          key={v.id}
+          className={`text-sm px-2 py-1 rounded cursor-pointer transition-colors flex items-center justify-between group ${isActiveView(v.id) ? 'text-black bg-gray-100' : 'text-gray-600 hover:text-black hover:bg-gray-100'}`}
+          onClick={(e) => {
+            studioStore.setCurrentView({ ...view, viewId: v.id })
+          }}
+        >
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span>{v.title || '未命名视图'}</span>
+              </TooltipTrigger>
+              <TooltipContent side="right" className="max-w-xs">
+                <div className="text-xs">
+                  {v.query ? v.query : '无查询字段'}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <Popover open={deleteConfirmOpen && deleteTargetId === v.id} onOpenChange={(open) => {
+            if (!open) {
+              setDeleteConfirmOpen(false);
+              setDeleteTargetId(null);
+            }
+          }}>
+            <PopoverTrigger asChild>
+              <Trash2
+                className="h-4 w-4 text-gray-400 hover:text-gray-600 transition-colors cursor-pointer opacity-0 group-hover:opacity-100"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setDeleteTargetId(v.id);
+                  setDeleteConfirmOpen(true);
+                }}
+              />
+            </PopoverTrigger>
+            <PopoverContent side="bottom" align="end" sideOffset={8} className="w-80 border-gray-300">
+              <div className="space-y-4">
+                <div>
+                  <h4 className="font-semibold text-sm">删除视图</h4>
+                  <p className="text-xs text-gray-600 mt-1">确定要删除这个视图吗？此操作无法撤销。</p>
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button className="border-gray-300" variant="outline" size="sm" onClick={() => setDeleteConfirmOpen(false)}>
+                    取消
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => {
+                      if (deleteTargetId) {
+                        onDeleteViewItem(view.id, deleteTargetId);
+                        setDeleteConfirmOpen(false);
+                        setDeleteTargetId(null);
+                      }
+                    }}
+                  >
+                    删除
+                  </Button>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      ))}
+    </div>
+  }
+  return <div
+    key={view.id}
+    className="flex flex-col items-center py-3 px-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"
+  >
+    <div className="w-full flex justify-between" onClick={() => setExpanded(!expanded)}>
+      <div className="flex items-center cursor-pointer"  >
+        <Layout className="h-4 w-4 mr-2 text-gray-500" />
+        {view.title || '未命名视图'}
+      </div>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => {
+            e.stopPropagation()
+          }}>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="border-gray-300">
+          <DropdownMenuItem className="cursor-pointer" onClick={(e) => {
+            e.stopPropagation();
+            onEdit(view);
+          }}>
+            <Edit2 className="h-4 w-4 mr-2" />
+            编辑
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(view.id);
+            }}
+            className="cursor-pointer text-red-600 focus:text-red-600"
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            删除
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    {expanded &&
+      <ShowViews views={view.views} />
+    }
+  </div>
+}
+export const ViewList = () => {
+  const { routeViewList, updateRouteView, deleteRouteView, deleteRouteViewItem, getViewList } = useStudioStore();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingView, setEditingView] = useState<any>(null);
+
+  const filteredViews = routeViewList.filter(view =>
+    (view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  useEffect(() => {
+    getViewList();
+  }, [])
+
+  const handleRefresh = async () => {
+    const toastId = toast.loading('正在刷新视图列表...');
+    await getViewList();
+    toast.update(toastId, { render: '视图列表已刷新', type: 'success', isLoading: false, autoClose: 1000 });
+  };
+
+  const handleAdd = () => {
+    handleEdit({});
+  };
+
+  const handleEdit = (view: any) => {
+    setEditingView(view);
+    setEditorOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    if (confirm('确定要删除这个视图吗？')) {
+      deleteRouteView(id);
+    }
+  };
+
+  const handleSaveView = (viewData: any) => {
+    updateRouteView(viewData);
+  };
+
+  return (
+    <div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
+      <div className="flex items-center space-x-2 mb-4">
+        <div className="relative flex-1">
+          <Input
+            placeholder="搜索视图..."
+            className="pl-3 pr-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+        </div>
+        <Button variant="outline" size="icon" className="h-10 w-10 cursor-pointer border-gray-300" onClick={handleRefresh}>
+          <RotateCw className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon" className="h-10 w-10 cursor-pointer border-gray-300" onClick={handleAdd}>
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col">
+        {filteredViews.length === 0 ? (
+          <div className="text-center py-4 text-gray-500">
+            {searchTerm ? '未找到匹配的视图' : '暂无视图'}
+          </div>
+        ) : (
+          filteredViews.map((view) => (
+            <ViewItem
+              key={view.id}
+              view={view}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              onDeleteViewItem={deleteRouteViewItem}
+            />
+          ))
+        )}
+      </div>
+
+      <ViewEditor
+        open={editorOpen}
+        onOpenChange={setEditorOpen}
+        data={editingView}
+        onSave={handleSaveView}
+      />
+    </div>
+  );
+}
--- a/web-v2/src/components/ui/button.tsx
+++ b/web-v2/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/web-v2/src/components/ui/card.tsx
+++ b/web-v2/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/web-v2/src/components/ui/checkbox.tsx
+++ b/web-v2/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/web-v2/src/components/ui/command.tsx
+++ b/web-v2/src/components/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/web-v2/src/components/ui/dialog.tsx
+++ b/web-v2/src/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/web-v2/src/components/ui/dropdown-menu.tsx
+++ b/web-v2/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/web-v2/src/components/ui/input.tsx
+++ b/web-v2/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/web-v2/src/components/ui/kbd.tsx
+++ b/web-v2/src/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
--- a/web-v2/src/components/ui/label.tsx
+++ b/web-v2/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/web-v2/src/components/ui/menubar.tsx
+++ b/web-v2/src/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
--- a/web-v2/src/components/ui/popover.tsx
+++ b/web-v2/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/web-v2/src/components/ui/select.tsx
+++ b/web-v2/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/web-v2/src/components/ui/tabs.tsx
+++ b/web-v2/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/web-v2/src/components/ui/tooltip.tsx
+++ b/web-v2/src/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/web-v2/src/lib/utils.ts
+++ b/web-v2/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/web-v2/src/modules/basename.ts
+++ b/web-v2/src/modules/basename.ts
@@ -0,0 +1,18 @@
+const isDev = process.env.NODE_ENV === "development";
+const BASE_NAME = isDev ? '' : '/root/perler-beads';
+
+export const basename = BASE_NAME;
+
+export const wrapBasename = (path: string) => {
+  const hasEnd = path.endsWith('/')
+  let _basename = basename;
+  if (basename) {
+    _basename = `${basename}${path}`;
+  } else {
+    _basename = path;
+  }
+  if (isDev) {
+    return _basename
+  }
+  return _basename + '.html';
+}
--- a/web-v2/src/proxy.ts
+++ b/web-v2/src/proxy.ts
@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_URL = process.env.API_URL || 'http://localhost:51515';
+/**
+ * 通用代理函数
+ * @param request 原始请求
+ * @param targetHost 目标服务器地址（如 http://localhost:51515）
+ * @returns NextResponse 代理响应
+ */
+async function proxyRequest(request: NextRequest, targetHost: string): Promise<NextResponse> {
+  const { pathname } = request.nextUrl;
+  const targetUrl = new URL(pathname + request.nextUrl.search, targetHost);
+
+  try {
+    console.log(`Proxying request to: ${targetUrl.toString()}`);
+    const response = await fetch(targetUrl.toString(), {
+      method: request.method,
+      headers: {
+        // 复制原始请求的所有头部
+        ...Object.fromEntries(request.headers.entries()),
+        // 确保转发 cookie
+        cookie: request.headers.get('cookie') || '',
+      },
+      body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.text() : undefined,
+      // 包含 cookie 的请求
+      credentials: 'include',
+    });
+
+    // 创建响应，保留原始响应的所有头部（包括 Set-Cookie）
+    const responseHeaders = new Headers(response.headers);
+
+    return new NextResponse(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: responseHeaders,
+    });
+  } catch (error) {
+    console.error('Proxy error:', error);
+    return NextResponse.json(
+      { error: 'Proxy request failed' },
+      { status: 502 }
+    );
+  }
+}
+
+export async function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  // 代理 /api 请求
+  if (pathname.startsWith('/api')) {
+    return proxyRequest(request, API_URL);
+  }
+  // 代理 /root/home 或 /root/home/ 请求 (第二个路径段后可以为空或以 / 结尾)
+  if (pathname.startsWith('/root')) {
+    return proxyRequest(request, API_URL);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/api/:path*', '/root/:segment/:path*'],
+};
+
+export default proxy;
--- a/web-v2/tsconfig.json
+++ b/web-v2/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "extends": "@kevisual/types/json/frontend.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "incremental": true,
+    "allowImportingTsExtensions": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
+    "dist/types/**/*.ts",
+    "dist/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}