diff --git a/docs/assets/vis_hg.jpg b/docs/assets/vis_hg.jpg
index 6ebefed..6ddced3 100644
Binary files a/docs/assets/vis_hg.jpg and b/docs/assets/vis_hg.jpg differ
diff --git a/hyperdb/admin.py b/hyperdb/admin.py
index aa3b3d7..43d1fdf 100644
--- a/hyperdb/admin.py
+++ b/hyperdb/admin.py
@@ -46,13 +46,41 @@ def _preview(data: Any, limit: int = 120) -> str:
     return text if len(text) <= limit else text[:limit] + "..."
 
 
+def labels_file(storage_file: Any) -> Path:
+    """Default location of the display-label mapping: ``<name>.labels.json`` next to the ``.hgdb`` file."""
+    return Path(storage_file).with_suffix(".labels.json")
+
+
+def load_labels(storage_file: Any, labels: Any = None) -> Dict[str, Any]:
+    """Display labels for attribute values and keys, per language.
+
+    Shape: ``{"zh": {"entity_type": {...}, "edge_type": {...}, "key": {...}}, "en": {...}}``,
+    where ``edge_type`` maps the ``type`` attribute of hyperedges and ``key`` maps attribute names.
+    ``labels`` may be such a dict or a path to a JSON file; when omitted, ``<name>.labels.json``
+    next to the storage file is used if it exists. Labels only change what the console shows.
+    """
+    if isinstance(labels, dict):
+        return labels
+    path = Path(labels) if labels is not None else labels_file(storage_file)
+    if not path.exists():
+        return {}
+    try:
+        data = json.loads(path.read_text(encoding="utf-8"))
+    except (OSError, ValueError) as e:
+        print(f"⚠️  Ignoring label file {path}: {e}")
+        return {}
+    return data if isinstance(data, dict) else {}
+
+
 class AdminState:
     """Mutable state shared across requests (the handler is re-created for every request)."""
 
-    def __init__(self, hypergraph_db: BaseHypergraphDB):
+    def __init__(self, hypergraph_db: BaseHypergraphDB, labels: Any = None):
         self.hypergraph_db = hypergraph_db
         self.dirty = False
         self.last_saved: Optional[float] = None
+        # Explicit labels win; otherwise the label file is re-read on every /info so edits show on reload
+        self.labels = labels
 
 
 class HypergraphAdminHandler(HypergraphAPIHandler):
@@ -237,6 +265,7 @@ def _info(self) -> Dict[str, Any]:
             "num_e": hg.num_e,
             "dirty": self.state.dirty,
             "last_saved": self.state.last_saved,
+            "labels": load_labels(hg.storage_file, self.state.labels),
         }
 
     def _stats(self) -> Dict[str, Any]:
@@ -246,15 +275,18 @@ def _stats(self) -> Dict[str, Any]:
         v_keys: Counter = Counter()
         e_keys: Counter = Counter()
         types: Counter = Counter()
+        e_types: Counter = Counter()
         for v in hg.all_v:
             data = hg.v(v, {}) or {}
             v_keys.update(data.keys())
             if data.get("entity_type"):
                 types[str(data["entity_type"])] += 1
         for e in hg.all_e:
-            e_keys.update((hg.e(e, {}) or {}).keys())
+            data = hg.e(e, {}) or {}
+            e_keys.update(data.keys())
+            if data.get("type"):
+                e_types[str(data["type"])] += 1
 
-        top = sorted(hg.all_v, key=lambda v: hg.degree_v(v), reverse=True)[:10]
         return {
             "num_v": hg.num_v,
             "num_e": hg.num_e,
@@ -266,9 +298,9 @@ def _stats(self) -> Dict[str, Any]:
             "degree_hist": sorted(Counter(degrees).items()),
             "edge_size_hist": sorted(Counter(sizes).items()),
             "entity_types": types.most_common(12),
+            "edge_types": e_types.most_common(12),
             "vertex_keys": v_keys.most_common(20),
             "edge_keys": e_keys.most_common(20),
-            "top_vertices": [{"id": _json_safe(v), "degree": hg.degree_v(v)} for v in top],
         }
 
     def _list_vertices(self, params: Dict[str, str]) -> Dict[str, Any]:
@@ -307,6 +339,7 @@ def _list_edges(self, params: Dict[str, str]) -> Dict[str, Any]:
         hg = self.hypergraph_db
         search = params.get("search", "").strip().lower()
         vertex = params.get("vertex")
+        edge_type = params.get("edge_type", "")
         sort_by = params.get("sort_by", "size")
         desc = params.get("sort_order", "desc") == "desc"
 
@@ -315,6 +348,8 @@ def _list_edges(self, params: Dict[str, str]) -> Dict[str, Any]:
             edges = hg.nbr_e_of_v(self._resolve_v(json.loads(vertex)))
         rows = []
         for e in edges:
+            if edge_type and str((hg.e(e, {}) or {}).get("type", "")) != edge_type:
+                continue
             if search:
                 haystack = " ".join(str(v) for v in e) + " " + _preview(hg.e(e, {}), 10**9)
                 if search not in haystack.lower():
@@ -440,11 +475,11 @@ class _AdminTCPServer(socketserver.TCPServer):
 class HypergraphAdmin:
     """Management console server for a hypergraph database."""
 
-    def __init__(self, hypergraph_db: BaseHypergraphDB, host: str = "127.0.0.1", port: int = 8900):
+    def __init__(self, hypergraph_db: BaseHypergraphDB, host: str = "127.0.0.1", port: int = 8900, labels: Any = None):
         self.hypergraph_db = hypergraph_db
         self.host = host
         self.port = port
-        self.state = AdminState(hypergraph_db)
+        self.state = AdminState(hypergraph_db, labels)
         self.httpd: Optional[socketserver.TCPServer] = None
 
     @property
@@ -479,6 +514,7 @@ def run_admin(
     port: int = 8900,
     open_browser: bool = True,
     blocking: bool = True,
+    labels: Any = None,
 ) -> HypergraphAdmin:
     """Start the admin console for ``hypergraph_db``.
 
@@ -489,11 +525,13 @@ def run_admin(
         port: Server port (0 picks a free port)
         open_browser: Whether to open the console in a browser
         blocking: Whether to block until Ctrl+C. If False, returns immediately.
+        labels: Display labels (dict or JSON file path), see :func:`load_labels`.
+            Defaults to ``<name>.labels.json`` next to the storage file.
 
     Returns:
         HypergraphAdmin instance
     """
-    admin = HypergraphAdmin(hypergraph_db, host=host, port=port)
+    admin = HypergraphAdmin(hypergraph_db, host=host, port=port, labels=labels)
     thread = admin.start_server(open_browser=open_browser)
     if not blocking:
         return admin
diff --git a/hyperdb/base.py b/hyperdb/base.py
index 1c6c656..2addc7b 100644
--- a/hyperdb/base.py
+++ b/hyperdb/base.py
@@ -301,7 +301,14 @@ def draw(self, port: int = 8080, open_browser: bool = True, blocking: bool = Tru
 
         return draw_hypergraph(hypergraph_db=self, port=port, open_browser=open_browser, blocking=blocking)
 
-    def admin(self, port: int = 8900, open_browser: bool = True, blocking: bool = True, host: str = "127.0.0.1"):
+    def admin(
+        self,
+        port: int = 8900,
+        open_browser: bool = True,
+        blocking: bool = True,
+        host: str = "127.0.0.1",
+        labels=None,
+    ):
         """
         Open the web admin console for the current HyperDB instance
 
@@ -310,10 +317,14 @@ def admin(self, port: int = 8900, open_browser: bool = True, blocking: bool = Tr
             ``open_browser``: Whether to automatically open the browser, defaults to True
             ``blocking``: Whether to block the main thread, defaults to True. Set to False for non-blocking mode.
             ``host``: Interface to bind, defaults to 127.0.0.1. The console has no authentication.
+            ``labels``: Display labels for entity types, hyperedge types and attribute names per language
+                (dict or JSON file path). Defaults to ``<name>.labels.json`` next to the storage file.
 
         Returns:
             HypergraphAdmin instance
         """
         from .admin import run_admin
 
-        return run_admin(hypergraph_db=self, host=host, port=port, open_browser=open_browser, blocking=blocking)
+        return run_admin(
+            hypergraph_db=self, host=host, port=port, open_browser=open_browser, blocking=blocking, labels=labels
+        )
diff --git a/hyperdb/draw.py b/hyperdb/draw.py
index 10e8b58..85f42cc 100644
--- a/hyperdb/draw.py
+++ b/hyperdb/draw.py
@@ -139,11 +139,11 @@ def _get_vertices(self, page: int, page_size: int, search: str, sort_by: str, so
             # Sort by search score if searching (no degree filtering)
             vertex_data.sort(key=lambda x: x["score"], reverse=True)
         elif sort_by == "degree":
-            # First, separate by degree threshold (degree > 50 goes to the end)
-            vertex_data.sort(key=lambda x: (x["degree"] > 50, -x["degree"] if sort_order == "desc" else x["degree"]))
+            # Same degree: by id, so pages stay stable
+            vertex_data.sort(key=lambda x: str(x["id"]))
+            vertex_data.sort(key=lambda x: x["degree"], reverse=(sort_order == "desc"))
         elif sort_by == "id":
-            # First, separate by degree threshold (degree > 50 goes to the end)
-            vertex_data.sort(key=lambda x: (x["degree"] > 50, str(x["id"])), reverse=(sort_order == "desc"))
+            vertex_data.sort(key=lambda x: str(x["id"]), reverse=(sort_order == "desc"))
 
         # Remove score from output
         for v in vertex_data:
diff --git a/hyperdb/templates/admin.html b/hyperdb/templates/admin.html
index 1321671..02c6b28 100644
--- a/hyperdb/templates/admin.html
+++ b/hyperdb/templates/admin.html
@@ -4,1101 +4,44 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hypergraph DB Admin</title>
+    <script src="https://unpkg.com/@antv/g6@5.0.49/dist/g6.min.js"></script>
     <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone@7.26.4/babel.min.js"></script>
-    <script src="https://unpkg.com/@tailwindcss/browser@4.1.11"></script>
-    <style type="text/tailwindcss">
-      @theme {
-        --color-primary-50: #faf5ff;
-        --color-primary-100: #f3e8ff;
-        --color-primary-500: #8b5cf6;
-        --color-primary-600: #7c3aed;
-        --color-primary-700: #6d28d9;
-      }
-    </style>
+    <!-- 管理后台（概览、实体与超边的增删改查、导入 / 导出），与 Hyper-RAG web-ui 共用 hypergraph-viz -->
+    <script src="https://unpkg.com/hypergraph-viz@0.2.0/dist/hypergraph-viz.explorer.global.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/hypergraph-viz@0.2.0/dist/style.css" />
     <style>
-      body { margin: 0; }
-      textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
+      html,
+      body,
+      #root {
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+      }
     </style>
   </head>
-  <body class="bg-gray-50">
+  <body>
     <div id="root"></div>
 
-    <script type="text/babel">
-      const { useState, useEffect, useCallback, useRef } = React;
-
-      // ------------------------------------------------------------------ API
-      async function api(path, body) {
-        const opts = body === undefined
-          ? {}
-          : { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) };
-        const res = await fetch(path, opts);
-        let data;
-        try {
-          data = await res.json();
-        } catch (e) {
-          throw new Error(`HTTP ${res.status}`);
-        }
-        if (!res.ok || (data && data.error)) throw new Error(data.error || `HTTP ${res.status}`);
-        return data;
-      }
-
-      const qs = (params) =>
-        new URLSearchParams(Object.entries(params).filter(([, v]) => v !== "" && v != null)).toString();
-
-
-      // ------------------------------------------------------------------ i18n
-      // Entries are strings with {placeholders}, or functions returning JSX for rich text.
-      const MESSAGES = {
-        en: {
-          appSubtitle: "Admin console",
-          navOverview: "Overview", navVertices: "Vertices", navEdges: "Hyperedges", navData: "Import / Export", navGraph: "Graph viewer",
-          vertices: "Vertices", hyperedges: "Hyperedges",
-          connecting: "Connecting...", loading: "Loading...", noData: "No data", none: "None",
-          unsaved: "Unsaved changes", saved: "Saved", save: "Save", savedToDisk: "Saved to disk",
-          cancel: "Cancel", create: "Create", close: "Close", delete: "Delete", open: "Open", saveChanges: "Save changes",
-          confirmTitle: "Please confirm",
-          jsonValid: "Valid JSON object", jsonInvalid: "Invalid: {error}", jsonMustBeObject: "Must be a JSON object",
-          records: "{n} records", prev: "Prev", next: "Next", pageOf: "Page {page} / {total}",
-          logScale: "Log scale",
-          statVertices: "Vertices", statEdges: "Hyperedges", statAvgDegree: "Avg. vertex degree", statMaxDegree: "Max vertex degree",
-          statAvgSize: "Avg. hyperedge size", statMaxSize: "Max hyperedge size", statIsolated: "Isolated vertices",
-          degreeDist: "Vertex degree distribution", sizeDist: "Hyperedge size distribution", histDegree: "degree", histSize: "size",
-          topVertices: "Top vertices by degree", entityTypes: "Entity types", attributeKeys: "Attribute keys",
-          newVertex: "+ New vertex", searchVertices: "Search id or attributes...", allEntityTypes: "All entity types",
-          sortDegreeDesc: "Degree ↓", sortDegreeAsc: "Degree ↑", sortIdAsc: "ID A→Z", sortIdDesc: "ID Z→A",
-          colId: "ID", colDegree: "Degree", colEntityType: "Entity type", colAttributes: "Attributes", colVertices: "Vertices", colSize: "Size",
-          noVertices: "No vertices", noEdges: "No hyperedges",
-          newVertexTitle: "New vertex", idLabel: "ID", idPlaceholder: "e.g. Alice", attributes: "Attributes", attributesJson: "Attributes (JSON)",
-          vertexCreated: "Vertex {id} created", vertexSaved: "Vertex saved", vertexDeleted: "Vertex deleted",
-          confirmDeleteVertex: ({ id, degree }) => <>Delete vertex <b>{id}</b>? It will be removed from its {degree} hyperedge(s); hyperedges left with fewer than 2 vertices are deleted.</>,
-          vertexTitle: ({ id }) => <>Vertex <span className="text-primary-600">{id}</span></>,
-          degree: "Degree", neighbors: "Neighbors", openViewer: "Open graph viewer ↗",
-          incidentEdges: "Incident hyperedges ({n})", first200: " — showing first 200", isolated: "This vertex is isolated.",
-          newEdge: "+ New hyperedge", searchEdges: "Search vertices or attributes...",
-          sortSizeDesc: "Size ↓", sortSizeAsc: "Size ↑", sortVerticesAsc: "Vertices A→Z", more: "+{n} more",
-          pickTwo: "Pick at least 2 vertices", searchToAdd: "Search vertices to add...", deg: "deg {n}", noMatch: "No matching vertices",
-          newEdgeTitle: "New hyperedge", edgeCreated: "Hyperedge created", edgeSaved: "Hyperedge saved", edgeDeleted: "Hyperedge deleted",
-          confirmDeleteEdge: "Delete this hyperedge connecting {n} vertices? The vertices themselves are kept.",
-          edgeTitle: "Hyperedge ({n} vertices)",
-          membershipHint: "Membership is the hyperedge's identity — to change it, create a new hyperedge and delete this one.",
-          invalidJsonFile: "Not valid JSON: {error}",
-          confirmImport: ({ file, v, e }) => <>Import <b>{file}</b>? This <b>replaces all {v} vertices and {e} hyperedges</b> in memory. The file on disk is untouched until you click Save.</>,
-          replaceData: "Replace data", imported: "Imported {v} vertices, {e} hyperedges",
-          storage: "Storage", file: "File", onDisk: "On disk", bytes: "{n} bytes", notSavedYet: "Not saved yet",
-          lastSaved: "Last saved", notThisSession: "Not in this session", status: "Status", inSync: "In sync", saveToDisk: "Save to disk",
-          hifTitle: "HIF import / export", hifDesc: "(Hypergraph Interchange Format) is a JSON format supported by many hypergraph libraries.",
-          exportHif: "Export HIF", importHif: "Import HIF…",
-        },
-        zh: {
-          appSubtitle: "管理后台",
-          navOverview: "概览", navVertices: "实体", navEdges: "超边", navData: "导入 / 导出", navGraph: "超图可视化",
-          vertices: "实体", hyperedges: "超边",
-          connecting: "连接中...", loading: "加载中...", noData: "暂无数据", none: "无",
-          unsaved: "有未保存的修改", saved: "已保存", save: "保存", savedToDisk: "已保存到磁盘",
-          cancel: "取消", create: "创建", close: "关闭", delete: "删除", open: "打开", saveChanges: "保存修改",
-          confirmTitle: "请确认",
-          jsonValid: "JSON 格式正确", jsonInvalid: "格式错误：{error}", jsonMustBeObject: "必须是 JSON 对象",
-          records: "共 {n} 条", prev: "上一页", next: "下一页", pageOf: "第 {page} / {total} 页",
-          logScale: "对数刻度",
-          statVertices: "实体数", statEdges: "超边数", statAvgDegree: "实体平均度", statMaxDegree: "实体最大度",
-          statAvgSize: "超边平均大小", statMaxSize: "超边最大大小", statIsolated: "孤立实体",
-          degreeDist: "实体度分布", sizeDist: "超边大小分布", histDegree: "度", histSize: "大小",
-          topVertices: "度数最高的实体", entityTypes: "实体类型", attributeKeys: "属性字段",
-          newVertex: "+ 新建实体", searchVertices: "搜索 ID 或属性...", allEntityTypes: "全部实体类型",
-          sortDegreeDesc: "度数 ↓", sortDegreeAsc: "度数 ↑", sortIdAsc: "ID A→Z", sortIdDesc: "ID Z→A",
-          colId: "ID", colDegree: "度数", colEntityType: "实体类型", colAttributes: "属性", colVertices: "实体", colSize: "大小",
-          noVertices: "没有实体", noEdges: "没有超边",
-          newVertexTitle: "新建实体", idLabel: "ID", idPlaceholder: "例如：关羽", attributes: "属性", attributesJson: "属性（JSON）",
-          vertexCreated: "已创建实体 {id}", vertexSaved: "实体已保存", vertexDeleted: "实体已删除",
-          confirmDeleteVertex: ({ id, degree }) => <>确定删除实体 <b>{id}</b> 吗？它会从所属的 {degree} 条超边中移除，移除后不足 2 个实体的超边会被一起删除。</>,
-          vertexTitle: ({ id }) => <>实体 <span className="text-primary-600">{id}</span></>,
-          degree: "度数", neighbors: "邻居数", openViewer: "在超图可视化中打开 ↗",
-          incidentEdges: "关联超边（{n}）", first200: " — 仅显示前 200 条", isolated: "这是一个孤立实体。",
-          newEdge: "+ 新建超边", searchEdges: "搜索实体或属性...",
-          sortSizeDesc: "大小 ↓", sortSizeAsc: "大小 ↑", sortVerticesAsc: "实体 A→Z", more: "+{n} 个",
-          pickTwo: "至少选择 2 个实体", searchToAdd: "搜索要添加的实体...", deg: "度 {n}", noMatch: "没有匹配的实体",
-          newEdgeTitle: "新建超边", edgeCreated: "超边已创建", edgeSaved: "超边已保存", edgeDeleted: "超边已删除",
-          confirmDeleteEdge: "确定删除这条连接 {n} 个实体的超边吗？实体本身会保留。",
-          edgeTitle: "超边（{n} 个实体）",
-          membershipHint: "超边由它的实体集合唯一确定，不能直接修改成员。要修改成员，请新建一条超边并删除这条。",
-          invalidJsonFile: "不是有效的 JSON：{error}",
-          confirmImport: ({ file, v, e }) => <>确定导入 <b>{file}</b> 吗？这会<b>替换内存中全部 {v} 个实体和 {e} 条超边</b>。点击保存之前，磁盘上的文件不会改变。</>,
-          replaceData: "替换数据", imported: "已导入 {v} 个实体、{e} 条超边",
-          storage: "存储", file: "文件", onDisk: "磁盘占用", bytes: "{n} 字节", notSavedYet: "尚未保存",
-          lastSaved: "上次保存", notThisSession: "本次会话未保存", status: "状态", inSync: "已同步", saveToDisk: "保存到磁盘",
-          hifTitle: "HIF 导入 / 导出", hifDesc: "（Hypergraph Interchange Format）是一种被许多超图工具支持的 JSON 交换格式。",
-          exportHif: "导出 HIF", importHif: "导入 HIF…",
+    <script>
+      const { mountAdmin, createHttpAdminApi, fromKeyedEdges } = window.HypergraphViz;
+
+      mountAdmin(document.getElementById("root"), {
+        api: {
+          ...createHttpAdminApi("/api/admin"),
+          // 实体详情中的关系图：查看器服务的 /api/graph（超边 key 为用 |#| 拼接的成员）
+          subgraph: async (id) => {
+            const res = await fetch(`/api/graph?${new URLSearchParams({ vertex_id: id })}`);
+            const data = await res.json();
+            if (data.error) throw new Error(data.error);
+            return fromKeyedEdges(data);
+          },
         },
-      };
-
-      const detectLang = () => {
-        try {
-          const saved = localStorage.getItem("hgdb-admin-lang");
-          if (saved in MESSAGES) return saved;
-        } catch (e) {}
-        return (navigator.language || "").toLowerCase().startsWith("zh") ? "zh" : "en";
-      };
-      // Set by <App> on every render, before its children render.
-      let currentLang = "en";
-      function t(key, vars = {}) {
-        const msg = MESSAGES[currentLang][key] ?? MESSAGES.en[key] ?? key;
-        if (typeof msg === "function") return msg(vars);
-        return msg.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? vars[k] : m));
-      }
-
-      const fmtId = (id) => (typeof id === "string" ? id : JSON.stringify(id));
-      const fmtNum = (n) => (typeof n === "number" ? n.toLocaleString() : n);
-
-      // ------------------------------------------------------------------ small UI pieces
-      function Button({ variant = "default", className = "", ...props }) {
-        const styles = {
-          default: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
-          primary: "bg-primary-600 text-white hover:bg-primary-700 border border-primary-600",
-          danger: "bg-white border border-red-300 text-red-600 hover:bg-red-50",
-          dangerSolid: "bg-red-600 text-white hover:bg-red-700 border border-red-600",
-          ghost: "text-gray-600 hover:bg-gray-100 border border-transparent",
-        };
-        return (
-          <button
-            className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${styles[variant]} ${className}`}
-            {...props}
-          />
-        );
-      }
-
-      function Input(props) {
-        return (
-          <input
-            {...props}
-            className={`px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${props.className || ""}`}
-          />
-        );
-      }
-
-      function Select({ children, ...props }) {
-        return (
-          <select
-            {...props}
-            className={`px-2 py-1.5 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 ${props.className || ""}`}
-          >
-            {children}
-          </select>
-        );
-      }
-
-      function Card({ title, actions, children, className = "" }) {
-        return (
-          <div className={`bg-white rounded-xl border border-gray-200 shadow-sm ${className}`}>
-            {title && (
-              <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
-                <h3 className="font-semibold text-gray-800">{title}</h3>
-                {actions}
-              </div>
-            )}
-            <div className="p-5">{children}</div>
-          </div>
-        );
-      }
-
-      function Modal({ title, onClose, children, footer, wide }) {
-        useEffect(() => {
-          const onKey = (e) => e.key === "Escape" && onClose();
-          window.addEventListener("keydown", onKey);
-          return () => window.removeEventListener("keydown", onKey);
-        }, [onClose]);
-        return (
-          <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/30 p-4" onMouseDown={onClose}>
-            <div
-              className={`bg-white rounded-xl shadow-2xl w-full ${wide ? "max-w-3xl" : "max-w-lg"} max-h-[90vh] flex flex-col`}
-              onMouseDown={(e) => e.stopPropagation()}
-            >
-              <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
-                <h3 className="font-semibold text-gray-800">{title}</h3>
-                <button className="text-gray-400 hover:text-gray-600 text-xl leading-none" onClick={onClose}>×</button>
-              </div>
-              <div className="p-5 overflow-y-auto">{children}</div>
-              {footer && <div className="px-5 py-3 border-t border-gray-100 flex justify-end gap-2">{footer}</div>}
-            </div>
-          </div>
-        );
-      }
-
-      function ConfirmModal({ message, confirmText, onConfirm, onClose }) {
-        const [busy, setBusy] = useState(false);
-        return (
-          <Modal
-            title={t("confirmTitle")}
-            onClose={onClose}
-            footer={
-              <>
-                <Button onClick={onClose}>{t("cancel")}</Button>
-                <Button
-                  variant="dangerSolid"
-                  disabled={busy}
-                  onClick={async () => {
-                    setBusy(true);
-                    try { await onConfirm(); onClose(); } finally { setBusy(false); }
-                  }}
-                >
-                  {confirmText || t("delete")}
-                </Button>
-              </>
-            }
-          >
-            <div className="text-sm text-gray-700">{message}</div>
-          </Modal>
-        );
-      }
-
-      function JsonEditor({ value, onChange, rows = 12 }) {
-        let error = null;
-        try {
-          const parsed = JSON.parse(value || "{}");
-          if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) error = t("jsonMustBeObject");
-        } catch (e) {
-          error = e.message;
-        }
-        return (
-          <div>
-            <textarea
-              className={`code w-full text-xs p-3 border rounded-lg focus:outline-none focus:ring-2 ${error ? "border-red-300 focus:ring-red-400" : "border-gray-300 focus:ring-primary-500"}`}
-              rows={rows}
-              spellCheck={false}
-              value={value}
-              onChange={(e) => onChange(e.target.value)}
-            />
-            <div className={`text-xs mt-1 ${error ? "text-red-600" : "text-gray-400"}`}>
-              {error ? t("jsonInvalid", { error }) : t("jsonValid")}
-            </div>
-          </div>
-        );
-      }
-      const jsonValid = (s) => {
-        try {
-          const p = JSON.parse(s || "{}");
-          return p !== null && typeof p === "object" && !Array.isArray(p);
-        } catch (e) {
-          return false;
-        }
-      };
-
-      function Pagination({ pagination, onPage }) {
-        if (!pagination) return null;
-        const { page, total_pages, total } = pagination;
-        return (
-          <div className="flex items-center justify-between text-sm text-gray-600 mt-3">
-            <span>{t("records", { n: fmtNum(total) })}</span>
-            <div className="flex items-center gap-2">
-              <Button disabled={page <= 1} onClick={() => onPage(page - 1)}>{t("prev")}</Button>
-              <span>{t("pageOf", { page, total: total_pages })}</span>
-              <Button disabled={page >= total_pages} onClick={() => onPage(page + 1)}>{t("next")}</Button>
-            </div>
-          </div>
-        );
-      }
-
-      function VertexChip({ id, onClick }) {
-        return (
-          <span
-            onClick={onClick}
-            className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs bg-primary-50 text-primary-700 border border-primary-100 max-w-[16rem] truncate ${onClick ? "cursor-pointer hover:bg-primary-100" : ""}`}
-            title={fmtId(id)}
-          >
-            {fmtId(id)}
-          </span>
-        );
-      }
-
-      // Bar chart for [value, count] pairs. Long tails (typical power-law degree
-      // distributions) get exact bars for small values, then geometrically widening ranges.
-      function Histogram({ data, label }) {
-        const [log, setLog] = useState(true);
-        if (!data || data.length === 0) return <div className="text-sm text-gray-400">{t("noData")}</div>;
-        let bars = data.map(([k, c]) => ({ label: String(k), count: c }));
-        if (data.length > 24) {
-          const hi = data[data.length - 1][0];
-          const ranges = [];
-          for (let start = data[0][0], width = 1; start <= hi; start += width) {
-            ranges.push([start, start + width - 1]);
-            if (ranges.length >= 8) width = Math.ceil(width * 1.6);
-          }
-          bars = ranges
-            .map(([a, b]) => ({
-              label: a === b ? String(a) : `${a}-${b}`,
-              count: data.reduce((s, [k, c]) => (k >= a && k <= b ? s + c : s), 0),
-            }))
-            .filter((b) => b.count > 0);
-        }
-        const scale = (n) => (log ? Math.log10(n + 1) : n);
-        const max = Math.max(...bars.map((b) => scale(b.count)));
-        const labelEvery = Math.ceil(bars.length / 14);
-        return (
-          <div>
-            <label className="flex items-center justify-end gap-1.5 text-xs text-gray-500 mb-2 select-none">
-              <input type="checkbox" checked={log} onChange={(e) => setLog(e.target.checked)} className="accent-primary-600" />
-              {t("logScale")}
-            </label>
-            <div className="flex items-end gap-1 h-40">
-              {bars.map((b) => (
-                <div key={b.label} className="flex-1 flex flex-col items-center justify-end h-full group relative">
-                  <div className="absolute -top-6 hidden group-hover:block text-xs bg-gray-800 text-white px-1.5 py-0.5 rounded whitespace-nowrap z-10">
-                    {label} {b.label}: {fmtNum(b.count)}
-                  </div>
-                  <div
-                    className="w-full bg-primary-500/80 hover:bg-primary-600 rounded-t"
-                    style={{ height: `${Math.max(2, (scale(b.count) / max) * 100)}%` }}
-                  />
-                </div>
-              ))}
-            </div>
-            <div className="flex gap-1 mt-1">
-              {bars.map((b, i) => (
-                <div key={b.label} className="flex-1 text-[10px] text-gray-500 text-center whitespace-nowrap overflow-visible">
-                  {i % labelEvery === 0 ? b.label : ""}
-                </div>
-              ))}
-            </div>
-          </div>
-        );
-      }
-
-      function RankList({ items, onClick }) {
-        if (!items || items.length === 0) return <div className="text-sm text-gray-400">{t("noData")}</div>;
-        const max = Math.max(...items.map(([, c]) => c));
-        return (
-          <div className="space-y-1.5">
-            {items.map(([k, c]) => (
-              <div key={k} className={`text-sm ${onClick ? "cursor-pointer" : ""}`} onClick={() => onClick && onClick(k)}>
-                <div className="flex justify-between mb-0.5">
-                  <span className="text-gray-700 truncate mr-2">{k}</span>
-                  <span className="text-gray-500 tabular-nums">{fmtNum(c)}</span>
-                </div>
-                <div className="h-1.5 bg-gray-100 rounded">
-                  <div className="h-1.5 bg-primary-500 rounded" style={{ width: `${(c / max) * 100}%` }} />
-                </div>
-              </div>
-            ))}
-          </div>
-        );
-      }
-
-      // ------------------------------------------------------------------ Overview page
-      function Overview({ version, openVertex, gotoVertices }) {
-        const [stats, setStats] = useState(null);
-        const [error, setError] = useState(null);
-        useEffect(() => {
-          api("/api/admin/stats").then(setStats).catch((e) => setError(e.message));
-        }, [version]);
-        if (error) return <div className="text-red-600">{error}</div>;
-        if (!stats) return <div className="text-gray-500">{t("loading")}</div>;
-        const cards = [
-          [t("statVertices"), stats.num_v],
-          [t("statEdges"), stats.num_e],
-          [t("statAvgDegree"), stats.avg_degree],
-          [t("statMaxDegree"), stats.max_degree],
-          [t("statAvgSize"), stats.avg_edge_size],
-          [t("statMaxSize"), stats.max_edge_size],
-          [t("statIsolated"), stats.isolated_v],
-        ];
-        return (
-          <div className="space-y-6">
-            <div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-4">
-              {cards.map(([label, value]) => (
-                <div key={label} className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
-                  <div className="text-xs text-gray-500">{label}</div>
-                  <div className="text-2xl font-bold text-gray-800 mt-1 tabular-nums">{fmtNum(value)}</div>
-                </div>
-              ))}
-            </div>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              <Card title={t("degreeDist")}>
-                <Histogram data={stats.degree_hist} label={t("histDegree")} />
-              </Card>
-              <Card title={t("sizeDist")}>
-                <Histogram data={stats.edge_size_hist} label={t("histSize")} />
-              </Card>
-            </div>
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <Card title={t("topVertices")}>
-                {stats.top_vertices.length === 0 ? (
-                  <div className="text-sm text-gray-400">{t("noData")}</div>
-                ) : (
-                  <RankList items={stats.top_vertices.map((v) => [fmtId(v.id), v.degree])}
-                    onClick={(k) => openVertex(stats.top_vertices.find((v) => fmtId(v.id) === k).id)} />
-                )}
-              </Card>
-              <Card title={t("entityTypes")}>
-                <RankList items={stats.entity_types} onClick={(t) => gotoVertices({ entity_type: t })} />
-              </Card>
-              <Card title={t("attributeKeys")}>
-                <div className="text-xs font-semibold text-gray-500 mb-2 uppercase">{t("vertices")}</div>
-                <div className="flex flex-wrap gap-1.5 mb-4">
-                  {stats.vertex_keys.map(([k, c]) => (
-                    <span key={k} className="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-700">{k} <span className="text-gray-400">{fmtNum(c)}</span></span>
-                  ))}
-                  {stats.vertex_keys.length === 0 && <span className="text-sm text-gray-400">{t("none")}</span>}
-                </div>
-                <div className="text-xs font-semibold text-gray-500 mb-2 uppercase">{t("hyperedges")}</div>
-                <div className="flex flex-wrap gap-1.5">
-                  {stats.edge_keys.map(([k, c]) => (
-                    <span key={k} className="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-700">{k} <span className="text-gray-400">{fmtNum(c)}</span></span>
-                  ))}
-                  {stats.edge_keys.length === 0 && <span className="text-sm text-gray-400">{t("none")}</span>}
-                </div>
-              </Card>
-            </div>
-          </div>
-        );
-      }
-
-      // ------------------------------------------------------------------ Vertex pages
-      function VerticesPage({ version, filters, setFilters, openVertex, onCreate }) {
-        const [result, setResult] = useState(null);
-        const [error, setError] = useState(null);
-        const [search, setSearch] = useState(filters.search || "");
-        const [types, setTypes] = useState([]);
-
-        useEffect(() => {
-          api("/api/admin/stats").then((s) => setTypes(s.entity_types.map(([t]) => t))).catch(() => {});
-        }, [version]);
-        useEffect(() => {
-          const t = setTimeout(() => search !== (filters.search || "") && setFilters({ ...filters, search, page: 1 }), 300);
-          return () => clearTimeout(t);
-        }, [search]);
-        useEffect(() => {
-          api(`/api/admin/vertices?${qs({ page_size: 25, ...filters })}`)
-            .then((r) => { setResult(r); setError(null); })
-            .catch((e) => setError(e.message));
-        }, [filters, version]);
-
-        return (
-          <Card
-            title={t("navVertices")}
-            actions={<Button variant="primary" onClick={onCreate}>{t("newVertex")}</Button>}
-          >
-            <div className="flex flex-wrap gap-2 mb-4">
-              <Input placeholder={t("searchVertices")} value={search} onChange={(e) => setSearch(e.target.value)} className="w-72" />
-              <Select value={filters.entity_type || ""} onChange={(e) => setFilters({ ...filters, entity_type: e.target.value, page: 1 })}>
-                <option value="">{t("allEntityTypes")}</option>
-                {types.map((t) => <option key={t} value={t}>{t}</option>)}
-              </Select>
-              <Select
-                value={`${filters.sort_by || "degree"}:${filters.sort_order || "desc"}`}
-                onChange={(e) => {
-                  const [sort_by, sort_order] = e.target.value.split(":");
-                  setFilters({ ...filters, sort_by, sort_order, page: 1 });
-                }}
-              >
-                <option value="degree:desc">{t("sortDegreeDesc")}</option>
-                <option value="degree:asc">{t("sortDegreeAsc")}</option>
-                <option value="id:asc">{t("sortIdAsc")}</option>
-                <option value="id:desc">{t("sortIdDesc")}</option>
-              </Select>
-            </div>
-            {error && <div className="text-red-600 text-sm mb-2">{error}</div>}
-            <div className="overflow-x-auto border border-gray-100 rounded-lg">
-              <table className="w-full text-sm">
-                <thead className="bg-gray-50 text-gray-500 text-left">
-                  <tr>
-                    <th className="px-3 py-2 font-medium">{t("colId")}</th>
-                    <th className="px-3 py-2 font-medium w-20">{t("colDegree")}</th>
-                    <th className="px-3 py-2 font-medium w-40">{t("colEntityType")}</th>
-                    <th className="px-3 py-2 font-medium">{t("colAttributes")}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {result && result.data.map((v) => (
-                    <tr key={fmtId(v.id)} className="border-t border-gray-100 hover:bg-primary-50/50 cursor-pointer" onClick={() => openVertex(v.id)}>
-                      <td className="px-3 py-2 font-medium text-gray-800 max-w-xs truncate">{fmtId(v.id)}</td>
-                      <td className="px-3 py-2 tabular-nums">{v.degree}</td>
-                      <td className="px-3 py-2 text-gray-600 truncate max-w-[10rem]">{v.entity_type}</td>
-                      <td className="px-3 py-2 text-gray-500 font-mono text-xs truncate max-w-md">{v.preview}</td>
-                    </tr>
-                  ))}
-                  {result && result.data.length === 0 && (
-                    <tr><td colSpan="4" className="px-3 py-8 text-center text-gray-400">{t("noVertices")}</td></tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
-            <Pagination pagination={result && result.pagination} onPage={(page) => setFilters({ ...filters, page })} />
-          </Card>
-        );
-      }
-
-      function NewVertexModal({ onClose, onDone, notify }) {
-        const [id, setId] = useState("");
-        const [idType, setIdType] = useState("string");
-        const [data, setData] = useState('{\n  "entity_type": "",\n  "description": ""\n}');
-        const [busy, setBusy] = useState(false);
-        const idValue = idType === "number" ? Number(id) : id;
-        const idOk = id.trim() !== "" && (idType === "string" || !Number.isNaN(idValue));
-        const submit = async () => {
-          setBusy(true);
-          try {
-            const res = await api("/api/admin/vertex/upsert", { create: true, id: idValue, data: JSON.parse(data || "{}") });
-            notify(t("vertexCreated", { id: fmtId(res.id) }));
-            onDone(res.id);
-          } catch (e) {
-            notify(e.message, "error");
-          } finally {
-            setBusy(false);
-          }
-        };
-        return (
-          <Modal
-            title={t("newVertexTitle")}
-            onClose={onClose}
-            footer={<><Button onClick={onClose}>{t("cancel")}</Button><Button variant="primary" disabled={!idOk || !jsonValid(data) || busy} onClick={submit}>{t("create")}</Button></>}
-          >
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("idLabel")}</label>
-            <div className="flex gap-2 mb-4">
-              <Input autoFocus value={id} onChange={(e) => setId(e.target.value)} className="flex-1" placeholder={t("idPlaceholder")} />
-              <Select value={idType} onChange={(e) => setIdType(e.target.value)}>
-                <option value="string">string</option>
-                <option value="number">number</option>
-              </Select>
-            </div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("attributes")}</label>
-            <JsonEditor value={data} onChange={setData} rows={8} />
-          </Modal>
-        );
-      }
-
-      function VertexDetail({ id, onClose, openVertex, openEdge, onChanged, notify, confirm }) {
-        const [detail, setDetail] = useState(null);
-        const [text, setText] = useState("");
-        const [busy, setBusy] = useState(false);
-        const load = useCallback(() => {
-          api("/api/admin/vertex/get", { id })
-            .then((d) => { setDetail(d); setText(JSON.stringify(d.data, null, 2)); })
-            .catch((e) => { notify(e.message, "error"); onClose(); });
-        }, [id]);
-        useEffect(load, [load]);
-
-        const save = async () => {
-          setBusy(true);
-          try {
-            await api("/api/admin/vertex/upsert", { id, data: JSON.parse(text || "{}"), replace: true });
-            notify(t("vertexSaved"));
-            onChanged();
-            load();
-          } catch (e) {
-            notify(e.message, "error");
-          } finally {
-            setBusy(false);
-          }
-        };
-        const remove = () =>
-          confirm({
-            message: t("confirmDeleteVertex", { id: fmtId(id), degree: detail.degree }),
-            onConfirm: async () => {
-              try {
-                await api("/api/admin/vertex/delete", { id });
-                notify(t("vertexDeleted"));
-                onChanged();
-                onClose();
-              } catch (e) {
-                notify(e.message, "error");
-              }
-            },
-          });
-
-        const dirty = detail && text !== JSON.stringify(detail.data, null, 2);
-        return (
-          <Modal
-            title={t("vertexTitle", { id: fmtId(id) })}
-            onClose={onClose}
-            wide
-            footer={
-              <>
-                <Button variant="danger" className="mr-auto" disabled={!detail} onClick={remove}>{t("delete")}</Button>
-                <Button onClick={onClose}>{t("close")}</Button>
-                <Button variant="primary" disabled={!dirty || !jsonValid(text) || busy} onClick={save}>{t("saveChanges")}</Button>
-              </>
-            }
-          >
-            {!detail ? (
-              <div className="text-gray-500">{t("loading")}</div>
-            ) : (
-              <div className="space-y-5">
-                <div className="flex gap-6 text-sm">
-                  <div><span className="text-gray-500">{t("degree")}</span> <b className="tabular-nums">{detail.degree}</b></div>
-                  <div><span className="text-gray-500">{t("neighbors")}</span> <b className="tabular-nums">{detail.neighbors}</b></div>
-                  <a className="text-primary-600 hover:underline ml-auto" href={`/viewer?vertex=${encodeURIComponent(fmtId(id))}`} target="_blank">{t("openViewer")}</a>
-                </div>
-                <div>
-                  <div className="text-sm font-medium text-gray-700 mb-1">{t("attributesJson")}</div>
-                  <JsonEditor value={text} onChange={setText} />
-                </div>
-                <div>
-                  <div className="text-sm font-medium text-gray-700 mb-2">
-                    {t("incidentEdges", { n: detail.degree })}{detail.edges_truncated && t("first200")}
-                  </div>
-                  <div className="space-y-1.5 max-h-64 overflow-y-auto">
-                    {detail.edges.map((e) => (
-                      <div key={JSON.stringify(e.vertices)} className="flex items-center gap-2 p-2 border border-gray-100 rounded-lg hover:bg-gray-50">
-                        <div className="flex flex-wrap gap-1 flex-1 min-w-0">
-                          {e.vertices.map((v) => (
-                            <VertexChip key={fmtId(v)} id={v} onClick={JSON.stringify(v) === JSON.stringify(id) ? null : () => openVertex(v)} />
-                          ))}
-                        </div>
-                        <Button variant="ghost" onClick={() => openEdge(e.vertices)}>{t("open")}</Button>
-                      </div>
-                    ))}
-                    {detail.edges.length === 0 && <div className="text-sm text-gray-400">{t("isolated")}</div>}
-                  </div>
-                </div>
-              </div>
-            )}
-          </Modal>
-        );
-      }
-
-      // ------------------------------------------------------------------ Hyperedge pages
-      function EdgesPage({ version, openEdge, onCreate, openVertex }) {
-        const [filters, setFilters] = useState({ page: 1, sort_by: "size", sort_order: "desc" });
-        const [search, setSearch] = useState("");
-        const [result, setResult] = useState(null);
-        const [error, setError] = useState(null);
-        useEffect(() => {
-          const t = setTimeout(() => search !== (filters.search || "") && setFilters({ ...filters, search, page: 1 }), 300);
-          return () => clearTimeout(t);
-        }, [search]);
-        useEffect(() => {
-          api(`/api/admin/edges?${qs({ page_size: 25, ...filters })}`)
-            .then((r) => { setResult(r); setError(null); })
-            .catch((e) => setError(e.message));
-        }, [filters, version]);
-
-        return (
-          <Card title={t("navEdges")} actions={<Button variant="primary" onClick={onCreate}>{t("newEdge")}</Button>}>
-            <div className="flex flex-wrap gap-2 mb-4">
-              <Input placeholder={t("searchEdges")} value={search} onChange={(e) => setSearch(e.target.value)} className="w-72" />
-              <Select
-                value={`${filters.sort_by}:${filters.sort_order}`}
-                onChange={(e) => {
-                  const [sort_by, sort_order] = e.target.value.split(":");
-                  setFilters({ ...filters, sort_by, sort_order, page: 1 });
-                }}
-              >
-                <option value="size:desc">{t("sortSizeDesc")}</option>
-                <option value="size:asc">{t("sortSizeAsc")}</option>
-                <option value="vertices:asc">{t("sortVerticesAsc")}</option>
-              </Select>
-            </div>
-            {error && <div className="text-red-600 text-sm mb-2">{error}</div>}
-            <div className="overflow-x-auto border border-gray-100 rounded-lg">
-              <table className="w-full text-sm">
-                <thead className="bg-gray-50 text-gray-500 text-left">
-                  <tr>
-                    <th className="px-3 py-2 font-medium">{t("colVertices")}</th>
-                    <th className="px-3 py-2 font-medium w-16">{t("colSize")}</th>
-                    <th className="px-3 py-2 font-medium">{t("colAttributes")}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {result && result.data.map((e) => (
-                    <tr key={JSON.stringify(e.vertices)} className="border-t border-gray-100 hover:bg-primary-50/50 cursor-pointer" onClick={() => openEdge(e.vertices)}>
-                      <td className="px-3 py-2 max-w-md">
-                        <div className="flex flex-wrap gap-1">
-                          {e.vertices.slice(0, 8).map((v) => (
-                            <VertexChip key={fmtId(v)} id={v} onClick={(ev) => { ev.stopPropagation(); openVertex(v); }} />
-                          ))}
-                          {e.vertices.length > 8 && <span className="text-xs text-gray-400">{t("more", { n: e.vertices.length - 8 })}</span>}
-                        </div>
-                      </td>
-                      <td className="px-3 py-2 tabular-nums">{e.size}</td>
-                      <td className="px-3 py-2 text-gray-500 font-mono text-xs truncate max-w-md">{e.preview}</td>
-                    </tr>
-                  ))}
-                  {result && result.data.length === 0 && (
-                    <tr><td colSpan="3" className="px-3 py-8 text-center text-gray-400">{t("noEdges")}</td></tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
-            <Pagination pagination={result && result.pagination} onPage={(page) => setFilters({ ...filters, page })} />
-          </Card>
-        );
-      }
-
-      function VertexPicker({ selected, setSelected }) {
-        const [q, setQ] = useState("");
-        const [options, setOptions] = useState([]);
-        useEffect(() => {
-          const t = setTimeout(() => {
-            api(`/api/admin/vertices?${qs({ search: q, page_size: 8 })}`).then((r) => setOptions(r.data)).catch(() => {});
-          }, 200);
-          return () => clearTimeout(t);
-        }, [q]);
-        const key = (v) => JSON.stringify(v);
-        const isSel = (v) => selected.some((s) => key(s) === key(v));
-        return (
-          <div>
-            <div className="flex flex-wrap gap-1 min-h-[2rem] p-2 border border-gray-200 rounded-lg mb-2">
-              {selected.length === 0 && <span className="text-xs text-gray-400">{t("pickTwo")}</span>}
-              {selected.map((v) => (
-                <span key={key(v)} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs bg-primary-600 text-white">
-                  {fmtId(v)}
-                  <button onClick={() => setSelected(selected.filter((s) => key(s) !== key(v)))}>×</button>
-                </span>
-              ))}
-            </div>
-            <Input placeholder={t("searchToAdd")} value={q} onChange={(e) => setQ(e.target.value)} className="w-full mb-1" />
-            <div className="border border-gray-100 rounded-lg divide-y divide-gray-100">
-              {options.map((v) => (
-                <div
-                  key={key(v.id)}
-                  className={`px-3 py-1.5 text-sm flex justify-between ${isSel(v.id) ? "text-gray-300" : "cursor-pointer hover:bg-primary-50"}`}
-                  onClick={() => !isSel(v.id) && setSelected([...selected, v.id])}
-                >
-                  <span className="truncate">{fmtId(v.id)}</span>
-                  <span className="text-xs text-gray-400">{v.entity_type} · {t("deg", { n: v.degree })}</span>
-                </div>
-              ))}
-              {options.length === 0 && <div className="px-3 py-2 text-sm text-gray-400">{t("noMatch")}</div>}
-            </div>
-          </div>
-        );
-      }
-
-      function NewEdgeModal({ onClose, onDone, notify }) {
-        const [selected, setSelected] = useState([]);
-        const [data, setData] = useState('{\n  "keywords": "",\n  "summary": ""\n}');
-        const [busy, setBusy] = useState(false);
-        const submit = async () => {
-          setBusy(true);
-          try {
-            const res = await api("/api/admin/edge/upsert", { create: true, vertices: selected, data: JSON.parse(data || "{}") });
-            notify(t("edgeCreated"));
-            onDone(res.vertices.map((v) => v.id));
-          } catch (e) {
-            notify(e.message, "error");
-          } finally {
-            setBusy(false);
-          }
-        };
-        return (
-          <Modal
-            title={t("newEdgeTitle")}
-            onClose={onClose}
-            wide
-            footer={<><Button onClick={onClose}>{t("cancel")}</Button><Button variant="primary" disabled={selected.length < 2 || !jsonValid(data) || busy} onClick={submit}>{t("create")}</Button></>}
-          >
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("vertices")}</label>
-            <VertexPicker selected={selected} setSelected={setSelected} />
-            <label className="block text-sm font-medium text-gray-700 mt-4 mb-1">{t("attributes")}</label>
-            <JsonEditor value={data} onChange={setData} rows={6} />
-          </Modal>
-        );
-      }
-
-      function EdgeDetail({ vertices, onClose, openVertex, onChanged, notify, confirm }) {
-        const [detail, setDetail] = useState(null);
-        const [text, setText] = useState("");
-        const [busy, setBusy] = useState(false);
-        const load = useCallback(() => {
-          api("/api/admin/edge/get", { vertices })
-            .then((d) => { setDetail(d); setText(JSON.stringify(d.data, null, 2)); })
-            .catch((e) => { notify(e.message, "error"); onClose(); });
-        }, [JSON.stringify(vertices)]);
-        useEffect(load, [load]);
-
-        const save = async () => {
-          setBusy(true);
-          try {
-            await api("/api/admin/edge/upsert", { vertices, data: JSON.parse(text || "{}"), replace: true });
-            notify(t("edgeSaved"));
-            onChanged();
-            load();
-          } catch (e) {
-            notify(e.message, "error");
-          } finally {
-            setBusy(false);
-          }
-        };
-        const remove = () =>
-          confirm({
-            message: t("confirmDeleteEdge", { n: vertices.length }),
-            onConfirm: async () => {
-              try {
-                await api("/api/admin/edge/delete", { vertices });
-                notify(t("edgeDeleted"));
-                onChanged();
-                onClose();
-              } catch (e) {
-                notify(e.message, "error");
-              }
-            },
-          });
-        const dirty = detail && text !== JSON.stringify(detail.data, null, 2);
-        return (
-          <Modal
-            title={t("edgeTitle", { n: vertices.length })}
-            onClose={onClose}
-            wide
-            footer={
-              <>
-                <Button variant="danger" className="mr-auto" disabled={!detail} onClick={remove}>{t("delete")}</Button>
-                <Button onClick={onClose}>{t("close")}</Button>
-                <Button variant="primary" disabled={!dirty || !jsonValid(text) || busy} onClick={save}>{t("saveChanges")}</Button>
-              </>
-            }
-          >
-            {!detail ? (
-              <div className="text-gray-500">{t("loading")}</div>
-            ) : (
-              <div className="space-y-5">
-                <div>
-                  <div className="text-sm font-medium text-gray-700 mb-2">{t("vertices")}</div>
-                  <div className="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto">
-                    {detail.vertices.map((v) => (
-                      <span key={fmtId(v.id)} className="inline-flex items-center gap-1">
-                        <VertexChip id={v.id} onClick={() => openVertex(v.id)} />
-                        <span className="text-[10px] text-gray-400">{v.degree}</span>
-                      </span>
-                    ))}
-                  </div>
-                  <div className="text-xs text-gray-400 mt-2">
-                    {t("membershipHint")}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-sm font-medium text-gray-700 mb-1">{t("attributesJson")}</div>
-                  <JsonEditor value={text} onChange={setText} />
-                </div>
-              </div>
-            )}
-          </Modal>
-        );
-      }
-
-      // ------------------------------------------------------------------ Data page
-      function DataPage({ info, onChanged, notify, confirm, save }) {
-        const fileRef = useRef(null);
-        const importFile = (file) => {
-          const reader = new FileReader();
-          reader.onload = () => {
-            let parsed;
-            try {
-              parsed = JSON.parse(reader.result);
-            } catch (e) {
-              notify(t("invalidJsonFile", { error: e.message }), "error");
-              return;
-            }
-            confirm({
-              message: t("confirmImport", { file: file.name, v: fmtNum(info.num_v), e: fmtNum(info.num_e) }),
-              confirmText: t("replaceData"),
-              onConfirm: async () => {
-                try {
-                  const res = await api("/api/admin/hif", parsed);
-                  notify(t("imported", { v: fmtNum(res.num_v), e: fmtNum(res.num_e) }));
-                  onChanged();
-                } catch (e) {
-                  notify(e.message, "error");
-                }
-              },
-            });
-          };
-          reader.readAsText(file);
-        };
-        return (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <Card title={t("storage")}>
-              <dl className="text-sm space-y-2">
-                <div className="flex gap-2"><dt className="text-gray-500 w-28 shrink-0">{t("file")}</dt><dd className="font-mono text-xs break-all">{info.storage_file}</dd></div>
-                <div className="flex gap-2"><dt className="text-gray-500 w-28 shrink-0">{t("onDisk")}</dt><dd>{info.file_exists ? t("bytes", { n: fmtNum(info.file_size) }) : t("notSavedYet")}</dd></div>
-                <div className="flex gap-2"><dt className="text-gray-500 w-28 shrink-0">{t("lastSaved")}</dt><dd>{info.last_saved ? new Date(info.last_saved * 1000).toLocaleString() : t("notThisSession")}</dd></div>
-                <div className="flex gap-2"><dt className="text-gray-500 w-28 shrink-0">{t("status")}</dt><dd>{info.dirty ? <span className="text-amber-600">{t("unsaved")}</span> : <span className="text-green-600">{t("inSync")}</span>}</dd></div>
-              </dl>
-              <Button variant="primary" className="mt-4" onClick={save} disabled={!info.dirty}>{t("saveToDisk")}</Button>
-            </Card>
-            <Card title={t("hifTitle")}>
-              <p className="text-sm text-gray-600 mb-4">
-                <a className="text-primary-600 hover:underline" href="https://github.com/pszufe/HIF-standard" target="_blank">HIF</a> {t("hifDesc")}
-              </p>
-              <div className="flex gap-2">
-                <a href="/api/admin/hif" download="hypergraph.hif.json"><Button>{t("exportHif")}</Button></a>
-                <Button variant="danger" onClick={() => fileRef.current.click()}>{t("importHif")}</Button>
-                <input ref={fileRef} type="file" accept=".json,application/json" className="hidden"
-                  onChange={(e) => { e.target.files[0] && importFile(e.target.files[0]); e.target.value = ""; }} />
-              </div>
-            </Card>
-          </div>
-        );
-      }
-
-      // ------------------------------------------------------------------ App shell
-      const NAV = [
-        ["overview", "navOverview", "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"],
-        ["vertices", "navVertices", "M12 21a9 9 0 100-18 9 9 0 000 18z"],
-        ["edges", "navEdges", "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"],
-        ["data", "navData", "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"],
-        ["graph", "navGraph", "M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"],
-      ];
-
-      function App() {
-        const [page, setPage] = useState(() => location.hash.slice(1) || "overview");
-        const [info, setInfo] = useState(null);
-        const [version, setVersion] = useState(0);
-        const [vertexFilters, setVertexFilters] = useState({ page: 1 });
-        const [stack, setStack] = useState([]); // open detail modals: {type, id|vertices}
-        const [modal, setModal] = useState(null); // "newVertex" | "newEdge"
-        const [confirmState, setConfirmState] = useState(null);
-        const [toasts, setToasts] = useState([]);
-        const [lang, setLang] = useState(detectLang);
-        currentLang = lang;
-        useEffect(() => {
-          document.documentElement.lang = lang === "zh" ? "zh-CN" : "en";
-          try { localStorage.setItem("hgdb-admin-lang", lang); } catch (e) {}
-        }, [lang]);
-
-        const notify = useCallback((message, kind = "ok") => {
-          const id = Math.random();
-          setToasts((t) => [...t, { id, message, kind }]);
-          setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), kind === "error" ? 6000 : 3000);
-        }, []);
-        const refreshInfo = useCallback(() => api("/api/admin/info").then(setInfo).catch((e) => notify(e.message, "error")), []);
-        const onChanged = useCallback(() => { setVersion((v) => v + 1); refreshInfo(); }, []);
-
-        useEffect(() => { refreshInfo(); }, []);
-        useEffect(() => { location.hash = page; }, [page]);
-        useEffect(() => {
-          const onHash = () => setPage(location.hash.slice(1) || "overview");
-          window.addEventListener("hashchange", onHash);
-          return () => window.removeEventListener("hashchange", onHash);
-        }, []);
-        useEffect(() => {
-          const warn = (e) => { if (info && info.dirty) { e.preventDefault(); e.returnValue = ""; } };
-          window.addEventListener("beforeunload", warn);
-          return () => window.removeEventListener("beforeunload", warn);
-        }, [info]);
-
-        const save = async () => {
-          try {
-            setInfo(await api("/api/admin/save", {}));
-            notify(t("savedToDisk"));
-          } catch (e) {
-            notify(e.message, "error");
-          }
-        };
-        useEffect(() => {
-          const onKey = (e) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === "s") { e.preventDefault(); save(); }
-          };
-          window.addEventListener("keydown", onKey);
-          return () => window.removeEventListener("keydown", onKey);
-        }, []);
-
-        const openVertex = (id) => setStack((s) => [...s, { type: "vertex", id }]);
-        const openEdge = (vertices) => setStack((s) => [...s, { type: "edge", vertices }]);
-        const closeTop = () => setStack((s) => s.slice(0, -1));
-        const confirm = (opts) => setConfirmState(opts);
-        const top = stack[stack.length - 1];
-
-        if (!info) return <div className="p-8 text-gray-500">{t("connecting")}</div>;
-        const navKey = NAV.find(([k]) => k === page)?.[1];
-        const title = navKey && t(navKey);
-
-        return (
-          <div className="flex h-screen">
-            <aside className="w-60 bg-white border-r border-gray-200 flex flex-col shrink-0">
-              <div className="px-5 py-5 border-b border-gray-100">
-                <div className="text-lg font-bold text-gray-800">Hypergraph DB</div>
-                <div className="text-xs text-gray-500">{t("appSubtitle")}</div>
-              </div>
-              <nav className="p-3 space-y-1 flex-1">
-                {NAV.map(([key, label, icon]) => (
-                  <button
-                    key={key}
-                    onClick={() => setPage(key)}
-                    className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${page === key ? "bg-primary-50 text-primary-700 font-semibold" : "text-gray-600 hover:bg-gray-50"}`}
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d={icon} /></svg>
-                    {t(label)}
-                  </button>
-                ))}
-              </nav>
-              <div className="p-4 border-t border-gray-100 text-xs text-gray-500 space-y-1">
-                <div className="flex justify-between"><span>{t("vertices")}</span><b className="text-primary-600">{fmtNum(info.num_v)}</b></div>
-                <div className="flex justify-between"><span>{t("hyperedges")}</span><b className="text-primary-600">{fmtNum(info.num_e)}</b></div>
-              </div>
-            </aside>
-
-            <main className="flex-1 flex flex-col min-w-0">
-              <header className="h-14 bg-white border-b border-gray-200 flex items-center px-6 gap-4 shrink-0">
-                <h1 className="font-semibold text-gray-800">{title}</h1>
-                <span className="font-mono text-xs text-gray-400 truncate" title={info.storage_file}>{info.storage_file}</span>
-                <div className="ml-auto flex items-center gap-3">
-                  <div className="flex rounded-lg border border-gray-200 overflow-hidden text-xs" role="group" aria-label="Language">
-                    {[["en", "EN"], ["zh", "中文"]].map(([code, name]) => (
-                      <button
-                        key={code}
-                        onClick={() => setLang(code)}
-                        className={`px-2.5 py-1 ${lang === code ? "bg-primary-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`}
-                      >
-                        {name}
-                      </button>
-                    ))}
-                  </div>
-                  {info.dirty ? (
-                    <span className="text-xs px-2 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200">{t("unsaved")}</span>
-                  ) : (
-                    <span className="text-xs px-2 py-1 rounded-full bg-green-50 text-green-700 border border-green-200">{t("saved")}</span>
-                  )}
-                  <Button variant="primary" onClick={save} disabled={!info.dirty} title="Ctrl/⌘ + S">{t("save")}</Button>
-                </div>
-              </header>
-              <div className={`flex-1 overflow-y-auto ${page === "graph" ? "" : "p-6"}`}>
-                {page === "overview" && (
-                  <Overview version={version} openVertex={openVertex}
-                    gotoVertices={(f) => { setVertexFilters({ page: 1, ...f }); setPage("vertices"); }} />
-                )}
-                {page === "vertices" && (
-                  <VerticesPage version={version} filters={vertexFilters} setFilters={setVertexFilters}
-                    openVertex={openVertex} onCreate={() => setModal("newVertex")} />
-                )}
-                {page === "edges" && (
-                  <EdgesPage version={version} openEdge={openEdge} openVertex={openVertex} onCreate={() => setModal("newEdge")} />
-                )}
-                {page === "data" && <DataPage info={info} onChanged={onChanged} notify={notify} confirm={confirm} save={save} />}
-                {page === "graph" && <iframe key={version} src="/viewer" className="w-full h-full border-0" />}
-              </div>
-            </main>
-
-            {top && top.type === "vertex" && (
-              <VertexDetail key={`v-${stack.length}-${fmtId(top.id)}`} id={top.id} onClose={closeTop}
-                openVertex={openVertex} openEdge={openEdge} onChanged={onChanged} notify={notify} confirm={confirm} />
-            )}
-            {top && top.type === "edge" && (
-              <EdgeDetail key={`e-${stack.length}-${JSON.stringify(top.vertices)}`} vertices={top.vertices} onClose={closeTop}
-                openVertex={openVertex} onChanged={onChanged} notify={notify} confirm={confirm} />
-            )}
-            {modal === "newVertex" && (
-              <NewVertexModal onClose={() => setModal(null)} notify={notify}
-                onDone={(id) => { setModal(null); onChanged(); openVertex(id); }} />
-            )}
-            {modal === "newEdge" && (
-              <NewEdgeModal onClose={() => setModal(null)} notify={notify}
-                onDone={(vs) => { setModal(null); onChanged(); openEdge(vs); }} />
-            )}
-            {confirmState && <ConfirmModal {...confirmState} onClose={() => setConfirmState(null)} />}
-
-            <div className="fixed bottom-4 right-4 z-50 space-y-2">
-              {toasts.map((t) => (
-                <div key={t.id} className={`px-4 py-2 rounded-lg shadow-lg text-sm text-white ${t.kind === "error" ? "bg-red-600" : "bg-gray-800"}`}>
-                  {t.message}
-                </div>
-              ))}
-            </div>
-          </div>
-        );
-      }
-
-      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+        viewerUrl: "/viewer",
+        hashRouting: true,
+        // 语言与查看器共用同一个 localStorage 键
+        localeStorageKey: "hgdb-admin-lang",
+      });
     </script>
   </body>
 </html>
diff --git a/hyperdb/templates/hypergraph_viewer.html b/hyperdb/templates/hypergraph_viewer.html
index 5c269cd..2c56785 100644
--- a/hyperdb/templates/hypergraph_viewer.html
+++ b/hyperdb/templates/hypergraph_viewer.html
@@ -4,1029 +4,56 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hypergraph Visualization</title>
-    <!-- <script src="https://unpkg.com/@antv/g6@5/dist/g6.min.js"></script> -->
-    <!-- Using modified g6 -->
-    <script src="http://hub.dappwind.com/static/g6.min.js"></script>
-    <!-- <script src="./g6.min.js"></script> -->
-    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
-    <!-- <script src="./data.js"></script> -->
-    <style type="text/tailwindcss">
-      @theme {
-        --color-primary-50: #faf5ff;
-        --color-primary-500: #8b5cf6;
-        --color-primary-600: #7c3aed;
-        --color-primary-700: #6d28d9;
+    <script src="https://unpkg.com/@antv/g6@5.0.49/dist/g6.min.js"></script>
+    <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+    <!-- 超图浏览器（左栏实体列表、画布、右栏子图统计与渲染设置），与 HypergraphViewer、Hyper-RAG web-ui 共用 hypergraph-viz -->
+    <script src="https://unpkg.com/hypergraph-viz@0.2.0/dist/hypergraph-viz.explorer.global.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/hypergraph-viz@0.2.0/dist/style.css" />
+    <style>
+      html,
+      body,
+      #root {
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
       }
     </style>
   </head>
   <body>
     <div id="root"></div>
 
-    <script type="text/babel">
-      const { useState, useEffect, useMemo, useRef } = React;
-      const { Graph } = window.G6;
+    <script>
+      const { mountExplorer, fromKeyedEdges } = window.HypergraphViz;
 
-      // API base path
-      const API_BASE = window.location.origin;
-      // dev mode
-      // const API_BASE = "http://localhost:8080";
-
-      // Configuration constants
-      const COLORS = [
-        "#F6BD16",
-        "#00C9C9",
-        "#F08F56",
-        "#D580FF",
-        "#FF3D00",
-        "#16f69c",
-        "#004ac9",
-        "#f056d1",
-        "#a680ff",
-        "#c8ff00",
-      ];
-
-      // 6 predefined colors, cycled for different entity types
-      const ENTITY_TYPE_COLORS_PALETTE = [
-        "#00C9C9",
-        "#a68fff",
-        "#F08F56",
-        "#0d7c4f",
-        "#004ac9",
-        "#f056d1",
-      ];
-
-      const DEFAULT_NODE_COLOR = "#8b5cf6";
-
-      // Dynamically generate entity type color mapping
-      const generateEntityTypeColors = (vertices) => {
-        const entityTypes = [
-          ...new Set(vertices.map((v) => v.entity_type).filter(Boolean)),
-        ];
-        const colorMap = {};
-
-        entityTypes.forEach((entityType, index) => {
-          colorMap[entityType] =
-            ENTITY_TYPE_COLORS_PALETTE[
-              index % ENTITY_TYPE_COLORS_PALETTE.length
-            ];
-        });
-
-        return colorMap;
+      const getJSON = async (path, params) => {
+        const res = await fetch(`${path}?${new URLSearchParams(params)}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        return data;
       };
-      const LAYOUT_THRESHOLD = 100;
-      const EDGE_SEPARATOR = "|#|";
 
-      // Utility functions
-      const createBubbleStyle = (baseColor) => ({
-        fill: baseColor,
-        stroke: baseColor,
-        maxRoutingIterations: 100,
-        maxMarchingIterations: 20,
-        pixelGroup: 4,
-        edgeR0: 10,
-        edgeR1: 60,
-        nodeR0: 1,
-        nodeR1: 5,
-        morphBuffer: 10,
-        threshold: 4,
-        memberInfluenceFactor: 1,
-        edgeInfluenceFactor: 4,
-        nonMemberInfluenceFactor: -0.8,
-        virtualEdges: true,
+      mountExplorer(document.getElementById("root"), {
+        // 数据源：接查看器服务的 /api/database/info、/api/vertices、/api/graph。
+        // 全库可能很大，左栏只显示数据库计数与实体列表（不统计全库、没有超边列表），任何实体都可作为中心
+        source: {
+          overview: async () => ({ database: await getJSON("/api/database/info") }),
+          listVertices: ({ page, pageSize, search, sortBy, sortOrder }) =>
+            getJSON("/api/vertices", { page, page_size: pageSize, search, sort_by: sortBy, sort_order: sortOrder }),
+          // 超边 key 为用 |#| 拼接的成员，转为 hypergraph-viz 的输入格式
+          subgraph: async (vertexId) => fromKeyedEdges(await getJSON("/api/graph", { vertex_id: vertexId })),
+        },
+        // ?vertex=<id>（如从管理后台跳转）指定默认中心，否则为实体列表中的第一个
+        defaultCenter: new URLSearchParams(window.location.search).get("vertex") || undefined,
+        title: "Hypergraph-DB",
+        // 实体列表中的数字是实体所在的超边数
+        messages: { en: { neighborhoodCol: "Degree" }, zh: { neighborhoodCol: "度数" } },
+        storageKey: "hgdb-viewer",
+        // 语言与管理后台（admin.html）共用同一个 localStorage 键
+        localeStorageKey: "hgdb-admin-lang",
       });
-
-      const getNodeColor = (node, selectedVertex, entityTypeColors) => {
-        if (node.id === selectedVertex) return "#6d28d9";
-        return entityTypeColors[node.entity_type] || DEFAULT_NODE_COLOR;
-      };
-
-      const formatDescription = (description) => {
-        if (!description) return "";
-        return description.split("<SEP>").join(" ");
-      };
-
-      // API call functions
-      const fetchDatabaseInfo = async () => {
-        if (typeof datas !== "undefined") {
-          return Promise.resolve(datas.database);
-        }
-        const response = await fetch(`${API_BASE}/api/database/info`);
-        return await response.json();
-      };
-
-      const fetchVertices = async (
-        page,
-        pageSize,
-        search,
-        sortBy,
-        sortOrder
-      ) => {
-        if (typeof datas !== "undefined") {
-          const toLower = (v) => (v ?? "").toString().toLowerCase();
-          let list = Array.isArray(datas.vertices) ? datas.vertices : [];
-
-          if (search) {
-            const q = toLower(search);
-            list = list.filter(
-              (v) =>
-                toLower(v.id).includes(q) ||
-                toLower(v.entity_type).includes(q) ||
-                toLower(v.description).includes(q)
-            );
-          }
-
-          if (sortBy === "degree") {
-            list.sort((a, b) =>
-              sortOrder === "asc"
-                ? (a.degree || 0) - (b.degree || 0)
-                : (b.degree || 0) - (a.degree || 0)
-            );
-          } else if (sortBy === "id") {
-            list.sort((a, b) => {
-              const cmp = String(a.id).localeCompare(String(b.id));
-              return sortOrder === "asc" ? cmp : -cmp;
-            });
-          }
-
-          const total = list.length;
-          const total_pages = Math.max(1, Math.ceil(total / pageSize));
-          const cur = Math.min(Math.max(1, page), total_pages);
-          const start = (cur - 1) * pageSize;
-          const data = list.slice(start, start + pageSize);
-          return Promise.resolve({
-            data,
-            pagination: { page: cur, page_size: pageSize, total, total_pages },
-          });
-        }
-        const params = new URLSearchParams({
-          page: page.toString(),
-          page_size: pageSize.toString(),
-          search: search || "",
-          sort_by: sortBy,
-          sort_order: sortOrder,
-        });
-        const response = await fetch(`${API_BASE}/api/vertices?${params}`);
-        return await response.json();
-      };
-
-      const fetchGraphData = async (vertexId) => {
-        if (typeof datas !== "undefined") {
-          const entry = datas.graphs[vertexId];
-          if (entry && entry.vertices && entry.edges) {
-            return Promise.resolve({
-              vertices: entry.vertices,
-              edges: entry.edges,
-            });
-          }
-          return Promise.resolve({ vertices: {}, edges: {} });
-        }
-        const params = new URLSearchParams({ vertex_id: vertexId });
-        const response = await fetch(`${API_BASE}/api/graph?${params}`);
-        return await response.json();
-      };
-
-      function HypergraphViewer() {
-        const containerRef = useRef(null);
-        const graphRef = useRef(null);
-        const searchTimeoutRef = useRef(null);
-
-        const [databaseInfo, setDatabaseInfo] = useState({
-          vertices: 0,
-          edges: 0,
-        });
-        const [vertices, setVertices] = useState([]);
-        const [pagination, setPagination] = useState({
-          page: 1,
-          page_size: 50,
-          total: 0,
-          total_pages: 0,
-        });
-        const [selectedVertex, setSelectedVertex] = useState("");
-        // Vertex requested via ?vertex=<id> (e.g. from the admin console); wins over the
-        // default "select first vertex" until the user picks something else.
-        const initialVertexRef = useRef(
-          new URLSearchParams(window.location.search).get("vertex") || ""
-        );
-        const [graphData, setGraphData] = useState(null);
-        const [loading, setLoading] = useState(false);
-        const [loadingVertices, setLoadingVertices] = useState(false);
-        const [error, setError] = useState("");
-        const [searchTerm, setSearchTerm] = useState("");
-        const [sortBy, setSortBy] = useState("degree");
-        const [sortOrder, setSortOrder] = useState("desc");
-        const [visualizationMode, setVisualizationMode] = useState("hyper");
-        const [hoverHyperedge, setHoverHyperedge] = useState(null);
-        const [hoverNode, setHoverNode] = useState(null);
-
-        // Generate entity type color mapping
-        const entityTypeColors = useMemo(() => {
-          return generateEntityTypeColors(vertices);
-        }, [vertices]);
-
-        // Load database info
-        useEffect(() => {
-          fetchDatabaseInfo().then(setDatabaseInfo).catch(console.error);
-        }, []);
-
-        // Load vertices list
-        const loadVertices = async (page, search, sortBy, sortOrder) => {
-          setLoadingVertices(true);
-          try {
-            const result = await fetchVertices(
-              page,
-              pagination.page_size,
-              search,
-              sortBy,
-              sortOrder
-            );
-            setVertices(result.data);
-            setPagination(result.pagination);
-
-            // Select the requested vertex, otherwise the first one
-            if (initialVertexRef.current) {
-              setSelectedVertex(initialVertexRef.current);
-            } else if (result.data.length > 0) {
-              setSelectedVertex(result.data[0].id);
-            }
-          } catch (err) {
-            console.error("Failed to load vertices:", err);
-          } finally {
-            setLoadingVertices(false);
-          }
-        };
-
-        // Initial load of vertices
-        useEffect(() => {
-          loadVertices(1, "", sortBy, sortOrder);
-        }, []);
-
-        // Search debounce
-        useEffect(() => {
-          if (searchTimeoutRef.current) {
-            clearTimeout(searchTimeoutRef.current);
-          }
-
-          searchTimeoutRef.current = setTimeout(() => {
-            loadVertices(1, searchTerm, sortBy, sortOrder);
-          }, 300);
-
-          return () => {
-            if (searchTimeoutRef.current) {
-              clearTimeout(searchTimeoutRef.current);
-            }
-          };
-        }, [searchTerm]);
-
-        // Reload when sort changes
-        useEffect(() => {
-          if (vertices.length > 0) {
-            loadVertices(pagination.page, searchTerm, sortBy, sortOrder);
-          }
-        }, [sortBy, sortOrder]);
-
-        // Load when page changes
-        const handlePageChange = (newPage) => {
-          initialVertexRef.current = "";
-          loadVertices(newPage, searchTerm, sortBy, sortOrder);
-        };
-
-        // Load graph data
-        useEffect(() => {
-          if (selectedVertex) {
-            setLoading(true);
-            setError("");
-
-            fetchGraphData(selectedVertex)
-              .then((data) => {
-                if (data.error) {
-                  setError(data.error);
-                } else {
-                  setGraphData(data);
-                }
-              })
-              .catch((err) => {
-                setError("Failed to load graph data");
-                console.error(err);
-              })
-              .finally(() => {
-                setLoading(false);
-              });
-          }
-        }, [selectedVertex]);
-
-        const excludedKeys = new Set([
-          "id",
-          "label",
-          "style",
-          "data",
-          "weight",
-          "source_id",
-          "cluster",
-        ]);
-
-        // Convert data to G6 Graph format
-        const graphDataFormatted = useMemo(() => {
-          if (!graphData) return null;
-
-          const hyperData = {
-            nodes: Object.entries(graphData.vertices).map(([key, value]) => ({
-              id: key,
-              label: key,
-              ...value,
-            })),
-            edges: [],
-            hyperEdges: [],
-          };
-          const plugins = [];
-          const edgeEntries = Object.entries(graphData.edges);
-
-          if (visualizationMode === "graph") {
-            // Graph mode: only show dimension 2 ball-and-stick diagram
-            const edgeSet = new Set();
-
-            edgeEntries.forEach(([key, edge]) => {
-              const nodes = key.split(EDGE_SEPARATOR);
-              if (nodes.length !== 2) return;
-
-              const [a, b] = nodes;
-              const edgeId = a < b ? `${a}-${b}` : `${b}-${a}`;
-
-              if (!edgeSet.has(edgeId)) {
-                edgeSet.add(edgeId);
-                hyperData.edges.push({
-                  id: edgeId,
-                  source: a,
-                  target: b,
-                  ...edge,
-                });
-              }
-            });
-
-            // Filter unconnected nodes
-            const connectedNodes = new Set();
-            hyperData.edges.forEach((edge) => {
-              connectedNodes.add(edge.source);
-              connectedNodes.add(edge.target);
-            });
-            hyperData.nodes = hyperData.nodes.filter((node) =>
-              connectedNodes.has(node.id)
-            );
-          } else {
-            // Hyper mode: render 2-node entries as normal edges, others as bubble-sets
-            const edgeSet = new Set();
-            edgeEntries.forEach(([key, edge], i) => {
-              const nodes = key.split(EDGE_SEPARATOR);
-
-              if (nodes.length === 2) {
-                const [a, b] = nodes;
-                const edgeId = a < b ? `${a}-${b}` : `${b}-${a}`;
-                if (!edgeSet.has(edgeId)) {
-                  edgeSet.add(edgeId);
-                  hyperData.edges.push({
-                    id: edgeId,
-                    source: a,
-                    target: b,
-                    ...edge,
-                  });
-                }
-                return;
-              }
-
-              plugins.push({
-                key: `bubble-sets-${key}`,
-                type: "bubble-sets",
-                members: nodes,
-                weight: edge.weight || nodes.length,
-                description: edge.description || edge.summary || "",
-                edge: edge,
-                ...createBubbleStyle(COLORS[i % COLORS.length]),
-              });
-
-              hyperData.hyperEdges.push({
-                id: key,
-                ...edge,
-                members: nodes,
-              });
-            });
-
-            // Assign cluster by hyperEdges for layout grouping
-            // Pick the heaviest hyperedge containing the node as its primary cluster
-            const nodeIdToCandidateClusters = new Map();
-            hyperData.hyperEdges.forEach((he) => {
-              const weight =
-                he.weight ||
-                (Array.isArray(he.members) ? he.members.length : 1);
-              (he.members || []).forEach((m) => {
-                const list = nodeIdToCandidateClusters.get(m) || [];
-                list.push({ id: he.id, weight });
-                nodeIdToCandidateClusters.set(m, list);
-              });
-            });
-            hyperData.nodes = hyperData.nodes.map((n) => {
-              const candidates = nodeIdToCandidateClusters.get(n.id) || [];
-              if (candidates.length === 0) return n;
-              const primary = candidates.reduce((best, cur) =>
-                cur.weight > best.weight ? cur : best
-              );
-              return { ...n, cluster: primary.id };
-            });
-          }
-
-          // Add tooltip plugin
-
-          plugins.push({
-            type: "tooltip",
-            getContent: (e, items) => {
-              return items
-                .map((item) => {
-                  let result = `<h3><strong>${
-                    item.entity_name || item.id
-                  }</strong></h3>`;
-                  // Display all remaining properties
-                  Object.entries(item).forEach(([key, value]) => {
-                    if (!excludedKeys.has(key)) {
-                      result += `<p><strong>${key}:</strong> ${value}</p>`;
-                    }
-                  });
-                  return result;
-                })
-                .join("");
-            },
-          });
-
-          const isGraph = visualizationMode === "graph";
-
-          return {
-            data: hyperData,
-            plugins: isGraph ? [plugins[plugins.length - 1]] : plugins,
-            node: {
-              palette: { field: "cluster" },
-              style: {
-                size: hyperData.nodes.length > LAYOUT_THRESHOLD ? 15 : 20,
-                labelText: (d) => d.id,
-                fill: (d) => getNodeColor(d, selectedVertex, entityTypeColors),
-              },
-            },
-            edge: {
-              style: {
-                size: isGraph ? 3 : 2,
-                stroke: "#a68fff",
-                lineWidth: 1,
-              },
-            },
-            layout: {
-              type:
-                hyperData.nodes.length > LAYOUT_THRESHOLD ? "force" : "force",
-              clustering: !isGraph,
-              preventOverlap: true,
-              nodeClusterBy: isGraph ? undefined : "cluster",
-              gravity: 50,
-              linkDistance: 50,
-            },
-            autoFit: "center",
-          };
-        }, [graphData, selectedVertex, visualizationMode, entityTypeColors]);
-
-        // Initialize graph
-        useEffect(() => {
-          if (!graphDataFormatted || !containerRef.current) return;
-
-          // Destroy previous graph instance and clear canvas
-          if (graphRef.current && !graphRef.current.destroyed) {
-            graphRef.current.clear();
-            if (containerRef.current) {
-              containerRef.current.innerHTML = "";
-            }
-          }
-
-          const graph = new Graph({
-            container: containerRef.current,
-            width: containerRef.current.offsetWidth,
-            height: containerRef.current.offsetHeight || 800,
-            data: graphDataFormatted.data,
-            behaviors: ["zoom-canvas", "drag-canvas", "drag-element"],
-            autoFit: "center",
-            animate: false,
-            node: graphDataFormatted.node,
-            edge: graphDataFormatted.edge,
-            layout: graphDataFormatted.layout,
-            plugins: graphDataFormatted.plugins,
-          });
-
-          graphRef.current = graph;
-          graphRef.current.render();
-
-          graph.on("pointermove", (e) => {
-            if (e.targetType === "bubble-sets") {
-              const target = e.target.options;
-              const newHyperedge = {
-                ...target.edge,
-                members: Array.isArray(target.members) ? target.members : [],
-              };
-              setHoverHyperedge((prev) => {
-                if (
-                  !prev ||
-                  prev.keywords !== newHyperedge.keywords ||
-                  prev.summary !== newHyperedge.summary ||
-                  prev.weight !== newHyperedge.weight ||
-                  JSON.stringify(prev.members) !==
-                    JSON.stringify(newHyperedge.members)
-                ) {
-                  return newHyperedge;
-                }
-                return prev;
-              });
-            }
-            if (e.targetType === "node") {
-              const target = graphDataFormatted.data.nodes.find(
-                (node) => node.id === e.target.id
-              );
-              setHoverNode((prev) => {
-                if (!prev || prev.id !== target?.id) {
-                  return target;
-                }
-                return prev;
-              });
-            }
-          });
-
-          // Add window resize listener
-          const handleResize = () => {
-            if (graphRef.current && containerRef.current) {
-              graphRef.current.setSize(
-                containerRef.current.offsetWidth,
-                containerRef.current.offsetHeight
-              );
-            }
-          };
-
-          window.addEventListener("resize", handleResize);
-
-          return () => {
-            window.removeEventListener("resize", handleResize);
-            if (graphRef.current && !graphRef.current.destroyed) {
-              graphRef.current.clear();
-            }
-            if (containerRef.current) {
-              containerRef.current.innerHTML = "";
-            }
-            setHoverHyperedge(null);
-          };
-        }, [graphDataFormatted, visualizationMode]);
-
-        // Select the "largest" node and hyperedges by default
-        useEffect(() => {
-          if (!graphDataFormatted) return;
-
-          const nodes = graphDataFormatted.data.nodes;
-          if (!hoverNode && nodes.length > 0) {
-            const nodeWithMax = nodes.reduce((best, cur) =>
-              (cur.degree || 0) > (best.degree || 0) ? cur : best
-            );
-            setHoverNode(nodeWithMax);
-          }
-
-          if (visualizationMode === "hyper") {
-            const hyperEdges = graphDataFormatted.data.hyperEdges;
-            if (!hoverHyperedge && hyperEdges.length > 0) {
-              const getWeight = (edge) =>
-                edge.weight || edge.members?.length || 0;
-              const hyperWithMax = hyperEdges.reduce((best, cur) =>
-                getWeight(cur) > getWeight(best) ? cur : best
-              );
-
-              setHoverHyperedge({
-                keywords: hyperWithMax.keywords || "",
-                description:
-                  hyperWithMax.description || hyperWithMax.summary || "",
-                members: hyperWithMax.members || [],
-                weight: getWeight(hyperWithMax),
-              });
-            }
-          }
-        }, [graphDataFormatted, visualizationMode, hoverNode, hoverHyperedge]);
-
-        return (
-          <div className="flex h-screen bg-gradient-to-br from-gray-50 to-gray-100">
-            <div className="w-80 h-screen overflow-hidden bg-white/95 backdrop-blur-sm border-r border-gray-200/50 p-6 shadow-xl shrink-0 flex flex-col">
-              <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
-                Hypergraph-DB
-              </h2>
-
-              <div className="text-lg font-bold text-gray-800 mb-3 pb-2 border-b-2 border-primary-500">
-                Database Information
-              </div>
-              <div className="p-2 rounded-xl mb-6 text-sm border">
-                <div className="flex justify-between items-center mb-2">
-                  <span className="font-semibold text-gray-700">Vertices:</span>
-                  <span className="font-bold text-primary-600">
-                    {databaseInfo.vertices}
-                  </span>
-                </div>
-                <div className="flex justify-between items-center">
-                  <span className="font-semibold text-gray-700">
-                    Hyperedges:
-                  </span>
-                  <span className="font-bold text-primary-600">
-                    {databaseInfo.edges}
-                  </span>
-                </div>
-              </div>
-
-              <div className="text-lg font-bold text-gray-800 mb-3 pb-2 border-b-2 border-primary-500">
-                Search & Vertex List
-              </div>
-
-              {/* Search and Sort */}
-              <div className="mb-4">
-                <div className="relative mb-2">
-                  <input
-                    type="text"
-                    placeholder="Search vertex ID, type or description..."
-                    value={searchTerm}
-                    onChange={(e) => {
-                      initialVertexRef.current = "";
-                      setSearchTerm(e.target.value);
-                    }}
-                    className="w-full px-4 py-2 pl-10 pr-4 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
-                  />
-                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <svg
-                      className="h-4 w-4 text-gray-400"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                      />
-                    </svg>
-                  </div>
-                  {searchTerm && (
-                    <button
-                      onClick={() => setSearchTerm("")}
-                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
-                    >
-                      <svg
-                        className="h-4 w-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                </div>
-
-                {/* Sort Selection */}
-                {/*<div className="flex gap-2 text-xs text-gray-600">
-                  <select
-                    value={sortBy}
-                    onChange={(e) => setSortBy(e.target.value)}
-                    className="flex-1 px-2 py-1 border border-gray-300 rounded"
-                  >
-                    <option value="degree">By Degree</option>
-                    <option value="id">By ID</option>
-                  </select>
-                  <select
-                    value={sortOrder}
-                    onChange={(e) => setSortOrder(e.target.value)}
-                    className="flex-1 px-2 py-1 border border-gray-300 rounded"
-                  >
-                    <option value="desc">Descending</option>
-                    <option value="asc">Ascending</option>
-                  </select>
-                </div>*/}
-
-                <div className="mt-2 text-sm text-gray-600">
-                  Found {pagination.total} results
-                </div>
-              </div>
-
-              {/* Vertices List */}
-              <div className="flex-1 overflow-y-scroll hide-scrollbar border border-gray-200 rounded-xl bg-white shadow-inner">
-                {loadingVertices ? (
-                  <div className="p-4 text-center text-gray-500">
-                    Loading vertices...
-                  </div>
-                ) : vertices.length === 0 ? (
-                  <div className="p-4 text-center text-gray-500">
-                    No matching vertices found
-                  </div>
-                ) : (
-                  vertices.map((vertex) => {
-                    const isSelected = selectedVertex === vertex.id;
-
-                    return (
-                      <div
-                        key={vertex.id}
-                        className={`p-2 border-b border-gray-100 cursor-pointer transition-all duration-200 hover:bg-gray-50 hover:shadow-sm ${
-                          isSelected
-                            ? "bg-primary-50 border-l-4 border-l-primary-500 shadow-md"
-                            : ""
-                        }`}
-                        onClick={() => {
-                          initialVertexRef.current = "";
-                          setSelectedVertex(vertex.id);
-                        }}
-                      >
-                        <div className="font-bold text-gray-800 mb-2 flex items-center">
-                          {vertex.id}
-                        </div>
-                        <div className="text-sm text-gray-600 flex gap-2 items-center">
-                          <div className="flex items-center">
-                            <span className="font-medium">
-                              {vertex.entity_type ? "Type" : "ID"}:
-                            </span>
-                            <span className="ml-2 px-2 py-1 bg-gray-100 rounded text-xs">
-                              {vertex.entity_type || vertex.id}
-                            </span>
-                          </div>
-                          <div className="flex items-center">
-                            <span className="font-medium">Degree:</span>
-                            <span className="ml-2 px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-semibold">
-                              {vertex.degree}
-                            </span>
-                          </div>
-                        </div>
-                        {vertex.description && (
-                          <div className="mt-2 text-xs text-gray-500 bg-gray-50 p-2 rounded">
-                            {formatDescription(vertex.description)}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })
-                )}
-              </div>
-
-              {/* Pagination Controls */}
-              {pagination.total_pages > 1 && (
-                <div className="mt-4 flex items-center justify-between text-sm">
-                  <button
-                    onClick={() => handlePageChange(pagination.page - 1)}
-                    disabled={pagination.page === 1}
-                    className="px-3 py-1 bg-primary-500 text-white rounded disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-primary-600"
-                  >
-                    Previous
-                  </button>
-                  <span className="text-gray-600">
-                    {pagination.page} / {pagination.total_pages}
-                  </span>
-                  <button
-                    onClick={() => handlePageChange(pagination.page + 1)}
-                    disabled={pagination.page === pagination.total_pages}
-                    className="px-3 py-1 bg-primary-500 text-white rounded disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-primary-600"
-                  >
-                    Next
-                  </button>
-                </div>
-              )}
-            </div>
-
-            <div className="flex-1 flex flex-col bg-white/10 backdrop-blur-sm">
-              <div className="bg-white/95 p-4 border-b border-gray-200/50 flex justify-between items-center shadow-sm">
-                <div className="flex items-center gap-4">
-                  <h3 className="text-xl font-semibold text-gray-800 m-0">
-                    {visualizationMode === "hyper" ? "Hypergraph" : "Graph"}{" "}
-                    Visualization {selectedVertex && `- ${selectedVertex}`}
-                  </h3>
-
-                  {/* Visualization Mode Selector */}
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm text-gray-600">Mode:</span>
-                    <div className="flex space-x-1">
-                      {["hyper", "graph"].map((mode) => (
-                        <button
-                          key={mode}
-                          onClick={() => setVisualizationMode(mode)}
-                          className={`px-3 py-1 text-xs rounded-full transition-all duration-200 ${
-                            visualizationMode === mode
-                              ? "bg-primary-500 text-white shadow-md"
-                              : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-                          }`}
-                        >
-                          {mode === "hyper" ? "Hypergraph" : "Graph"}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-
-                {graphData && (
-                  <div className="bg-white px-4 py-2 text-sm text-gray-600 rounded-lg shadow-sm border border-gray-200">
-                    <span className="font-semibold">Vertices:</span>{" "}
-                    {Object.keys(graphData.vertices).length} |
-                    <span className="font-semibold ml-1">
-                      {visualizationMode === "hyper" ? "Hyperedges:" : "Edges:"}
-                    </span>{" "}
-                    {visualizationMode === "hyper"
-                      ? Object.keys(graphData.edges).length
-                      : graphDataFormatted?.data?.edges?.length || 0}
-                  </div>
-                )}
-              </div>
-
-              <div className="flex-1 relative bg-white">
-                {error && (
-                  <div className="bg-red-50 text-red-700 p-4 m-4 rounded-lg border-l-4 border-red-500 shadow-sm">
-                    <div className="flex items-center">
-                      <span className="text-xl mr-2">⚠️</span>
-                      <span className="font-medium">{error}</span>
-                    </div>
-                  </div>
-                )}
-
-                {loading && (
-                  <div className="absolute inset-0 flex justify-center items-center bg-white/80 backdrop-blur-sm z-50 text-lg text-gray-600">
-                    <div className="text-center">
-                      <div className="text-2xl mb-4">🔄</div>
-                      <div className="font-semibold">
-                        Loading hypergraph data...
-                      </div>
-                      <div className="text-sm mt-2 text-gray-500">
-                        This may take a few seconds
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                <div className="flex h-[calc(100vh-71px)]">
-                  <div
-                    ref={containerRef}
-                    className="w-full rounded-xl h-full"
-                  />
-                  {visualizationMode === "hyper" && (
-                    <div className="shrink-0 w-72 h-full overflow-y-auto bg-white/95 backdrop-blur-sm border-l border-gray-200/50 p-3 shadow-xl overflow-y-auto">
-                      <div className="text-lg font-bold text-gray-800 mb-3 pb-2 border-b-2 border-primary-500">
-                        Hypergraph Detail
-                      </div>
-                      {hoverHyperedge && (
-                        <div className="text-sm text-gray-700 space-y-3 border-b-2 border-primary-500 pb-6">
-                          <div className="text-base font-semibold text-gray-900">
-                            Hyperedge
-                          </div>
-                          {Object.entries(hoverHyperedge).map(
-                            ([key, value]) => {
-                              // Skip empty values
-                              if (
-                                !value ||
-                                (Array.isArray(value) && value.length === 0) ||
-                                excludedKeys.has(key)
-                              ) {
-                                return null;
-                              }
-
-                              // Special handling for keywords
-                              if (
-                                key === "keywords" &&
-                                typeof value === "string"
-                              ) {
-                                return (
-                                  <div key={key}>
-                                    <span className="font-medium">
-                                      keywords:
-                                    </span>
-                                    <div className="flex flex-wrap gap-2 mt-2">
-                                      {value
-                                        .split(/,|，|、|。|<SEP>/)
-                                        .filter((k) => k.trim())
-                                        .map((keyword, i) => (
-                                          <span
-                                            key={i}
-                                            className="inline-block p-1 bg-primary-50 rounded text-xs"
-                                          >
-                                            {keyword.trim()}
-                                          </span>
-                                        ))}
-                                    </div>
-                                  </div>
-                                );
-                              }
-
-                              // Special handling for members
-                              if (Array.isArray(value)) {
-                                return (
-                                  <div key={key}>
-                                    <div className="font-medium">
-                                      {key} ({value.length}):
-                                    </div>
-                                    <div className="flex flex-wrap gap-2 mt-2">
-                                      {value.map((member, i) => (
-                                        <span
-                                          key={i}
-                                          className="p-1 bg-primary-50 rounded text-xs"
-                                        >
-                                          {member}
-                                        </span>
-                                      ))}
-                                    </div>
-                                  </div>
-                                );
-                              }
-
-                              // Convert value to string for length check
-                              const stringValue =
-                                typeof value === "object"
-                                  ? JSON.stringify(value, null, 2)
-                                  : String(value).replace(/<SEP>/g, " | ");
-
-                              // If value is less than 10 characters, display as tag
-                              if (stringValue.length < 20) {
-                                return (
-                                  <div key={key}>
-                                    <span className="font-medium">{key}:</span>
-                                    <div className="mt-1">
-                                      <span className="inline-block px-2 py-1 bg-gray-100 rounded text-xs">
-                                        {stringValue}
-                                      </span>
-                                    </div>
-                                  </div>
-                                );
-                              }
-
-                              // Default handling for longer values
-                              return (
-                                <div key={key}>
-                                  <span className="font-medium">{key}:</span>
-                                  <div className="mt-1 text-gray-600 bg-gray-100 p-2 rounded text-xs">
-                                    {stringValue}
-                                  </div>
-                                </div>
-                              );
-                            }
-                          )}
-                        </div>
-                      )}
-                      {hoverNode && (
-                        <div className="text-sm text-gray-700 space-y-3 mt-4">
-                          <div className="text-base font-semibold text-gray-900">
-                            Node
-                          </div>
-                          {Object.entries(hoverNode).map(([key, value]) => {
-                            // Skip empty values
-                            if (
-                              !value ||
-                              (Array.isArray(value) && value.length === 0) ||
-                              excludedKeys.has(key)
-                            ) {
-                              return null;
-                            }
-
-                            // Convert value to string for length check
-                            const stringValue =
-                              typeof value === "object"
-                                ? JSON.stringify(value, null, 2)
-                                : String(value).replace(/<SEP>/g, " | ");
-
-                            // If value is less than 10 characters, display as tag
-                            if (stringValue.length < 20) {
-                              return (
-                                <div key={key}>
-                                  <span className="font-medium">{key}:</span>
-                                  <div className="mt-1">
-                                    <span className="inline-block px-2 py-1 bg-gray-100 rounded text-xs">
-                                      {stringValue}
-                                    </span>
-                                  </div>
-                                </div>
-                              );
-                            }
-
-                            // Default handling for longer values
-                            return (
-                              <div key={key}>
-                                <span className="font-medium">{key}:</span>
-                                <div className="mt-1 text-gray-600 bg-gray-100 p-2 rounded text-xs">
-                                  {stringValue}
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        );
-      }
-
-      ReactDOM.render(<HypergraphViewer />, document.getElementById("root"));
     </script>
   </body>
 </html>
diff --git a/tests/test_admin.py b/tests/test_admin.py
index a078cbb..c6902a3 100644
--- a/tests/test_admin.py
+++ b/tests/test_admin.py
@@ -1,4 +1,5 @@
 import json
+import re
 import urllib.error
 import urllib.request
 
@@ -40,6 +41,15 @@ def test_pages_served(server):
         assert b"Hypergraph Visualization" in res.read()
 
 
+@pytest.mark.parametrize("path", ["/", "/viewer"])
+def test_pages_load_hypergraph_viz(server, path):
+    # 管理后台与查看器页面从 unpkg 加载固定版本的 hypergraph-viz（带面板的全局版与样式）
+    with urllib.request.urlopen(server.url + path) as res:
+        html = res.read().decode("utf-8")
+    assert re.search(r"unpkg\.com/hypergraph-viz@\d+\.\d+\.\d+/dist/hypergraph-viz\.explorer\.global\.js", html)
+    assert re.search(r"unpkg\.com/hypergraph-viz@\d+\.\d+\.\d+/dist/style\.css", html)
+
+
 def test_info_and_stats(server):
     status, info = call(server, "/api/admin/info")
     assert status == 200
@@ -49,6 +59,11 @@ def test_info_and_stats(server):
     assert stats["max_degree"] == 2
     assert stats["edge_size_hist"] == [[2, 1], [4, 1]]
     assert stats["entity_types"][0] == ["person", 3]
+    assert stats["edge_types"] == []
+
+    server.hypergraph_db.update_e((1, 2), {"type": "social"})
+    _, stats = call(server, "/api/admin/stats")
+    assert stats["edge_types"] == [["social", 1]]
 
 
 def test_list_vertices_and_edges(server):
@@ -67,6 +82,10 @@ def test_list_vertices_and_edges(server):
     _, res = call(server, "/api/admin/edges?vertex=3")
     assert res["pagination"]["total"] == 1
 
+    server.hypergraph_db.update_e((1, 2), {"type": "social"})
+    _, res = call(server, "/api/admin/edges?edge_type=social")
+    assert [e["size"] for e in res["data"]] == [2]
+
 
 def test_vertex_crud(server):
     db = server.hypergraph_db
@@ -147,3 +166,55 @@ def test_vertex_search_ranks_id_matches_first(server):
     call(server, "/api/admin/vertex/upsert", {"create": True, "id": "bobby"})
     _, res = call(server, "/api/admin/vertices?search=bob")
     assert [v["id"] for v in res["data"]] == ["bobby", 2]
+
+
+def test_labels(tmp_path):
+    db = HypergraphDB(storage_file=tmp_path / "labeled.hgdb")
+    db.add_v(1, {"entity_type": "person"})
+    labels = {"zh": {"entity_type": {"person": "人物"}}}
+
+    # Default: <name>.labels.json next to the storage file, re-read on every /info
+    admin = HypergraphAdmin(db, port=0)
+    admin.start_server(open_browser=False)
+    try:
+        assert call(admin, "/api/admin/info")[1]["labels"] == {}
+        (tmp_path / "labeled.labels.json").write_text(json.dumps(labels), encoding="utf-8")
+        assert call(admin, "/api/admin/info")[1]["labels"] == labels
+        (tmp_path / "labeled.labels.json").write_text("not json", encoding="utf-8")
+        assert call(admin, "/api/admin/info")[1]["labels"] == {}
+    finally:
+        admin.stop_server()
+
+    # Explicit labels win over the file
+    explicit = {"en": {"key": {"entity_type": "Kind"}}}
+    admin = HypergraphAdmin(db, port=0, labels=explicit)
+    admin.start_server(open_browser=False)
+    try:
+        assert call(admin, "/api/admin/info")[1]["labels"] == explicit
+    finally:
+        admin.stop_server()
+
+
+def test_viewer_vertices_sorted_by_degree_and_id(tmp_path):
+    # 查看器左栏的实体列表：按度数、ID 排序，度数高的实体不再被排到最后
+    db = HypergraphDB(storage_file=tmp_path / "hub.hgdb")
+    db.add_v("hub", {})
+    for i in range(60):
+        db.add_v(f"v{i:02d}", {})
+        db.add_e(("hub", f"v{i:02d}"), {})
+    db.add_e(("v00", "v01"), {})
+    admin = HypergraphAdmin(db, port=0)
+    admin.start_server(open_browser=False)
+    try:
+
+        def ids(sort_by, sort_order):
+            url = f"{admin.url}/api/vertices?page_size=100&sort_by={sort_by}&sort_order={sort_order}"
+            with urllib.request.urlopen(url) as res:
+                return [v["id"] for v in json.loads(res.read())["data"]]
+
+        assert ids("degree", "desc")[:3] == ["hub", "v00", "v01"]
+        assert ids("degree", "asc")[-1] == "hub"
+        assert ids("id", "asc")[0] == "hub"
+        assert ids("id", "desc")[0] == "v59"
+    finally:
+        admin.stop_server()