diff --git a/README.md b/README.md
index eb46e8e..bbaaefd 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,7 @@ Alice ←→ Bob, Bob ←→ Charlie, Alice ←→ Charlie (3 separate edges)
 | 🔗 **Native Hypergraph Support** | True multi-way relationships, not decomposed binary edges |
 | 💾 **Persistence** | Save/load with pickle, JSON, or custom formats |
 | 🎨 **Interactive Visualization** | Built-in web-based visualization with D3.js |
+| 🛠️ **Admin Console** | Web UI to browse, edit and manage your database |
 | 🔍 **Rich Queries** | Neighbor queries, degree calculations, community detection |
 | 📊 **Flexible Attributes** | Rich metadata for both vertices and hyperedges |
 | 🛠️ **Developer Friendly** | Modern Python with type hints, comprehensive docs |
@@ -138,6 +139,7 @@ This performance makes **Hypergraph-DB** a great choice for applications requiri
 | **🎯 Flexible Structure** | Support for complex hypergraphs with vertices and multi-way connections |
 | **⚡ High Performance** | Linear scaling with optimized operations for large datasets |
 | **🎨 Interactive Viz** | Beautiful web-based visualization with real-time interaction |
+| **🛠️ Admin Console** | Browse, search, edit and manage the database from your browser |
 | **💾 Persistent Storage** | Efficient save/load with data integrity guarantees |
 | **🔍 Smart Queries** | Fast neighbor discovery and relationship exploration |
 | **🛠️ Developer Friendly** | Modern Python with type hints and comprehensive documentation |
@@ -150,6 +152,7 @@ This performance makes **Hypergraph-DB** a great choice for applications requiri
 - **🔗 Relationship Queries**: Efficient neighbor and incident edge discovery  
 - **📊 Data Persistence**: Reliable serialization with pickle support
 - **🎨 Visual Exploration**: Interactive web interface for graph visualization
+- **🛠️ Web Administration**: Admin console with statistics, CRUD editing and HIF import/export
 - **⚙️ Extensible Design**: Built on dataclasses for easy customization
 
 ---
@@ -338,6 +341,30 @@ hg.draw()
 
 </div>
 
+#### **8. 🛠️ Admin Console**
+
+Manage your database from the browser with the built-in admin console:
+
+```python
+hg.admin()  # http://127.0.0.1:8900
+```
+
+**✨ Admin Console Features:**
+- 📊 **Dashboard**: Key statistics, degree and hyperedge size distributions, top vertices, entity types and attribute keys
+- 🔍 **Browse & Search**: Paginated vertex and hyperedge tables with search, filtering and sorting
+- ✏️ **Full CRUD**: Create, edit (JSON attribute editor), and delete vertices and hyperedges
+- 📦 **HIF Import / Export**: Exchange data with other hypergraph tools
+- 🎨 **Built-in Graph Viewer**: Jump from any vertex straight to its visualization
+- 💾 **Safe Editing**: Changes stay in memory until you click **Save** (or press Ctrl/⌘+S)
+
+<div align="center">
+
+![Hypergraph DB Admin Console](docs/assets/admin/overview.jpg)
+
+*Admin console overview of a 25K-vertex neurology knowledge hypergraph*
+
+</div>
+
 ---
 
 ## 📄 License
diff --git a/docs/assets/admin/overview.jpg b/docs/assets/admin/overview.jpg
new file mode 100644
index 0000000..d80403d
Binary files /dev/null and b/docs/assets/admin/overview.jpg differ
diff --git a/hyperdb/admin.py b/hyperdb/admin.py
new file mode 100644
index 0000000..aa3b3d7
--- /dev/null
+++ b/hyperdb/admin.py
@@ -0,0 +1,511 @@
+"""
+Web-based management console for HypergraphDB.
+
+Provides a local HTTP server with a REST API for browsing, creating, editing and
+deleting vertices / hyperedges, viewing statistics, saving the database and
+importing / exporting HIF files. The existing hypergraph viewer is served at
+``/viewer`` from the same server.
+
+Usage::
+
+    db.admin()
+"""
+
+import json
+import socketserver
+import threading
+import time
+import webbrowser
+from collections import Counter
+from pathlib import Path
+from typing import Any, Dict, List, Optional, Tuple
+from urllib.parse import parse_qs, urlparse
+
+from .base import BaseHypergraphDB
+from .draw import HypergraphAPIHandler
+
+MAX_BODY_SIZE = 200 * 1024 * 1024  # 200 MB, enough for large HIF imports
+
+
+class AdminAPIError(Exception):
+    """Error that is reported to the client as a JSON error response."""
+
+    def __init__(self, message: str, status: int = 400):
+        super().__init__(message)
+        self.message = message
+        self.status = status
+
+
+def _json_safe(value: Any) -> Any:
+    """Convert a value into something json.dumps can serialize."""
+    return json.loads(json.dumps(value, ensure_ascii=False, default=str))
+
+
+def _preview(data: Any, limit: int = 120) -> str:
+    text = json.dumps(data, ensure_ascii=False, default=str)
+    return text if len(text) <= limit else text[:limit] + "..."
+
+
+class AdminState:
+    """Mutable state shared across requests (the handler is re-created for every request)."""
+
+    def __init__(self, hypergraph_db: BaseHypergraphDB):
+        self.hypergraph_db = hypergraph_db
+        self.dirty = False
+        self.last_saved: Optional[float] = None
+
+
+class HypergraphAdminHandler(HypergraphAPIHandler):
+    """HTTP request handler for the admin console.
+
+    Admin endpoints live under ``/api/admin``. Every other GET path falls back to
+    the viewer handler, so ``/api/vertices`` and ``/api/graph`` keep working for
+    the embedded visualization page at ``/viewer``.
+    """
+
+    def __init__(self, state: AdminState, *args, **kwargs):
+        self.state = state
+        super().__init__(state.hypergraph_db, *args, **kwargs)
+
+    # ------------------------------------------------------------------ routing
+
+    def do_GET(self):
+        parsed = urlparse(self.path)
+        path = parsed.path
+        params = {k: v[0] for k, v in parse_qs(parsed.query).items()}
+
+        if path in ("/", "/admin", "/index.html"):
+            self._send_html(self._read_template("admin.html"))
+        elif path == "/viewer":
+            self._send_html(self._get_html_template())
+        elif path == "/api/admin/hif":
+            self._handle(self._export_hif, download="hypergraph.hif.json")
+        elif path.startswith("/api/admin/"):
+            routes = {
+                "/api/admin/info": self._info,
+                "/api/admin/stats": self._stats,
+                "/api/admin/vertices": lambda: self._list_vertices(params),
+                "/api/admin/edges": lambda: self._list_edges(params),
+            }
+            if path in routes:
+                self._handle(routes[path])
+            else:
+                self._send_json({"error": f"Unknown endpoint: {path}"}, 404)
+        else:
+            super().do_GET()
+
+    def do_POST(self):
+        path = urlparse(self.path).path
+        routes = {
+            "/api/admin/vertex/get": self._get_vertex,
+            "/api/admin/vertex/upsert": self._upsert_vertex,
+            "/api/admin/vertex/delete": self._delete_vertex,
+            "/api/admin/edge/get": self._get_edge,
+            "/api/admin/edge/upsert": self._upsert_edge,
+            "/api/admin/edge/delete": self._delete_edge,
+            "/api/admin/save": self._save,
+            "/api/admin/hif": self._import_hif,
+        }
+        if path not in routes:
+            self._send_json({"error": f"Unknown endpoint: {path}"}, 404)
+            return
+        self._handle(lambda: routes[path](self._read_body()))
+
+    # ------------------------------------------------------------------ helpers
+
+    def _handle(self, fn, download: Optional[str] = None):
+        try:
+            result = fn()
+        except AdminAPIError as e:
+            self._send_json({"error": e.message}, e.status)
+            return
+        except AssertionError as e:
+            self._send_json({"error": str(e) or "Invalid request"}, 400)
+            return
+        except Exception as e:  # pragma: no cover - defensive
+            self._send_json({"error": f"{type(e).__name__}: {e}"}, 500)
+            return
+        self._send_json(result, 200, download=download)
+
+    def _send_json(self, payload: Any, status: int = 200, download: Optional[str] = None):
+        body = json.dumps(payload, ensure_ascii=False, default=str).encode("utf-8")
+        self.send_response(status)
+        self.send_header("Content-Type", "application/json; charset=utf-8")
+        self.send_header("Content-Length", str(len(body)))
+        if download:
+            self.send_header("Content-Disposition", f'attachment; filename="{download}"')
+        self.end_headers()
+        self.wfile.write(body)
+
+    def _send_html(self, html: str):
+        body = html.encode("utf-8")
+        self.send_response(200)
+        self.send_header("Content-Type", "text/html; charset=utf-8")
+        self.send_header("Content-Length", str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def _read_template(self, name: str) -> str:
+        return (Path(__file__).parent / "templates" / name).read_text(encoding="utf-8")
+
+    def _read_body(self) -> Dict[str, Any]:
+        length = int(self.headers.get("Content-Length") or 0)
+        if length > MAX_BODY_SIZE:
+            raise AdminAPIError("Request body too large", 413)
+        raw = self.rfile.read(length) if length else b"{}"
+        try:
+            body = json.loads(raw.decode("utf-8"))
+        except (UnicodeDecodeError, json.JSONDecodeError) as e:
+            raise AdminAPIError(f"Invalid JSON body: {e}")
+        if not isinstance(body, dict):
+            raise AdminAPIError("Request body must be a JSON object")
+        return body
+
+    def _resolve_v(self, raw: Any) -> Any:
+        """Map a vertex id received as JSON back to the actual id stored in the DB.
+
+        JSON-native ids (str / int / float) match directly; other hashable ids
+        (e.g. tuples) are sent to the client as strings and matched by ``str()``.
+        """
+        hg = self.hypergraph_db
+        if isinstance(raw, list):
+            raw = tuple(raw)
+        try:
+            if hg.has_v(raw):
+                return raw
+        except (AssertionError, TypeError):
+            pass
+        for v_id in hg.all_v:
+            if str(v_id) == str(raw):
+                return v_id
+        raise AdminAPIError(f"Vertex {raw!r} does not exist", 404)
+
+    def _resolve_e(self, raw: Any) -> Tuple:
+        if not isinstance(raw, list) or len(raw) < 2:
+            raise AdminAPIError("A hyperedge must be a list of at least 2 vertex ids")
+        return self.hypergraph_db.encode_e([self._resolve_v(v) for v in raw])
+
+    @staticmethod
+    def _require_dict(body: Dict[str, Any], key: str) -> Dict[str, Any]:
+        data = body.get(key, {})
+        if data is None:
+            data = {}
+        if not isinstance(data, dict):
+            raise AdminAPIError(f"'{key}' must be a JSON object")
+        return data
+
+    def _mark_dirty(self):
+        self.state.dirty = True
+
+    def _edge_row(self, e_tuple: Tuple) -> Dict[str, Any]:
+        data = self.hypergraph_db.e(e_tuple, {})
+        return {
+            "vertices": _json_safe(list(e_tuple)),
+            "size": len(e_tuple),
+            "preview": _preview(data),
+        }
+
+    @staticmethod
+    def _paginate(rows: List[Any], params: Dict[str, str]) -> Dict[str, Any]:
+        try:
+            page = max(1, int(params.get("page", 1)))
+            page_size = min(500, max(1, int(params.get("page_size", 20))))
+        except ValueError:
+            raise AdminAPIError("page and page_size must be integers")
+        total = len(rows)
+        start = (page - 1) * page_size
+        return {
+            "data": rows[start : start + page_size],
+            "pagination": {
+                "page": page,
+                "page_size": page_size,
+                "total": total,
+                "total_pages": max(1, (total + page_size - 1) // page_size),
+            },
+        }
+
+    # ------------------------------------------------------------------ read endpoints
+
+    def _info(self) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        storage = Path(hg.storage_file)
+        return {
+            "storage_file": str(storage.resolve()),
+            "file_exists": storage.exists(),
+            "file_size": storage.stat().st_size if storage.exists() else None,
+            "num_v": hg.num_v,
+            "num_e": hg.num_e,
+            "dirty": self.state.dirty,
+            "last_saved": self.state.last_saved,
+        }
+
+    def _stats(self) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        degrees = [hg.degree_v(v) for v in hg.all_v]
+        sizes = [len(e) for e in hg.all_e]
+        v_keys: Counter = Counter()
+        e_keys: Counter = Counter()
+        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())
+
+        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,
+            "isolated_v": sum(1 for d in degrees if d == 0),
+            "avg_degree": round(sum(degrees) / len(degrees), 3) if degrees else 0,
+            "max_degree": max(degrees, default=0),
+            "avg_edge_size": round(sum(sizes) / len(sizes), 3) if sizes else 0,
+            "max_edge_size": max(sizes, default=0),
+            "degree_hist": sorted(Counter(degrees).items()),
+            "edge_size_hist": sorted(Counter(sizes).items()),
+            "entity_types": 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]:
+        hg = self.hypergraph_db
+        search = params.get("search", "").strip().lower()
+        entity_type = params.get("entity_type", "")
+        sort_by = params.get("sort_by", "degree")
+        desc = params.get("sort_order", "desc") == "desc"
+
+        rows = []
+        for v_id in hg.all_v:
+            data = hg.v(v_id, {}) or {}
+            if entity_type and str(data.get("entity_type", "")) != entity_type:
+                continue
+            id_match = bool(search) and search in str(v_id).lower()
+            if search and not id_match and search not in _preview(data, 10**9).lower():
+                continue
+            rows.append(
+                {
+                    "id": _json_safe(v_id),
+                    "degree": hg.degree_v(v_id),
+                    "entity_type": str(data.get("entity_type", "")),
+                    "preview": _preview(data),
+                    "_id_match": id_match,
+                }
+            )
+        if sort_by == "id":
+            rows.sort(key=lambda r: str(r["id"]), reverse=desc)
+        else:
+            rows.sort(key=lambda r: (r["degree"], str(r["id"])), reverse=desc)
+        # Stable sort: when searching, vertices whose id matches come before attribute-only matches
+        rows.sort(key=lambda r: not r.pop("_id_match"))
+        return self._paginate(rows, params)
+
+    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")
+        sort_by = params.get("sort_by", "size")
+        desc = params.get("sort_order", "desc") == "desc"
+
+        edges = hg.all_e
+        if vertex:
+            edges = hg.nbr_e_of_v(self._resolve_v(json.loads(vertex)))
+        rows = []
+        for e in edges:
+            if search:
+                haystack = " ".join(str(v) for v in e) + " " + _preview(hg.e(e, {}), 10**9)
+                if search not in haystack.lower():
+                    continue
+            rows.append(self._edge_row(e))
+        if sort_by == "vertices":
+            rows.sort(key=lambda r: str(r["vertices"]), reverse=desc)
+        else:
+            rows.sort(key=lambda r: (r["size"], str(r["vertices"])), reverse=desc)
+        return self._paginate(rows, params)
+
+    def _get_vertex(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        v_id = self._resolve_v(body.get("id"))
+        edges = sorted(hg.nbr_e_of_v(v_id), key=lambda e: (-len(e), str(e)))
+        return {
+            "id": _json_safe(v_id),
+            "data": _json_safe(hg.v(v_id, {})),
+            "degree": hg.degree_v(v_id),
+            "neighbors": len(hg.nbr_v(v_id, exclude_self=False) - {v_id}),  # nbr_v() raises on isolated vertices
+            "edges": [self._edge_row(e) for e in edges[:200]],
+            "edges_truncated": len(edges) > 200,
+        }
+
+    def _get_edge(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        e_tuple = self._resolve_e(body.get("vertices"))
+        if not hg.has_e(e_tuple):
+            raise AdminAPIError("Hyperedge does not exist", 404)
+        return {
+            "vertices": [{"id": _json_safe(v), "degree": hg.degree_v(v)} for v in e_tuple],
+            "data": _json_safe(hg.e(e_tuple, {})),
+        }
+
+    # ------------------------------------------------------------------ write endpoints
+
+    def _upsert_vertex(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        """Create (``create: true``) or update a vertex.
+
+        ``replace: true`` overwrites the attribute dict instead of merging into it,
+        which is how the editor removes attributes.
+        """
+        hg = self.hypergraph_db
+        data = self._require_dict(body, "data")
+        if body.get("create"):
+            v_id = body.get("id")
+            if not isinstance(v_id, (str, int, float)) or isinstance(v_id, bool) or v_id == "":
+                raise AdminAPIError("Vertex id must be a non-empty string or a number")
+            if hg.has_v(v_id):
+                raise AdminAPIError(f"Vertex {v_id!r} already exists", 409)
+            hg.add_v(v_id, data)
+        else:
+            v_id = self._resolve_v(body.get("id"))
+            if body.get("replace"):
+                hg.v(v_id).clear()
+            hg.update_v(v_id, data)
+        self._mark_dirty()
+        return self._get_vertex({"id": _json_safe(v_id)})
+
+    def _delete_vertex(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        self.hypergraph_db.remove_v(self._resolve_v(body.get("id")))
+        self._mark_dirty()
+        return {"ok": True}
+
+    def _upsert_edge(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        data = self._require_dict(body, "data")
+        e_tuple = self._resolve_e(body.get("vertices"))
+        exists = hg.has_e(e_tuple)
+        if body.get("create"):
+            if exists:
+                raise AdminAPIError("Hyperedge already exists", 409)
+            hg.add_e(e_tuple, data)
+        else:
+            if not exists:
+                raise AdminAPIError("Hyperedge does not exist", 404)
+            if body.get("replace"):
+                hg.e(e_tuple).clear()
+            hg.update_e(e_tuple, data)
+        self._mark_dirty()
+        return self._get_edge({"vertices": _json_safe(list(e_tuple))})
+
+    def _delete_edge(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        e_tuple = self._resolve_e(body.get("vertices"))
+        if not hg.has_e(e_tuple):
+            raise AdminAPIError("Hyperedge does not exist", 404)
+        hg.remove_e(e_tuple)
+        self._mark_dirty()
+        return {"ok": True}
+
+    def _save(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        hg = self.hypergraph_db
+        if not hg.save(hg.storage_file):
+            raise AdminAPIError(f"Failed to save to {hg.storage_file}", 500)
+        self.state.dirty = False
+        self.state.last_saved = time.time()
+        return self._info()
+
+    def _hif_method(self, name: str):
+        # HIF support lives on HypergraphDB, not on BaseHypergraphDB
+        method = getattr(self.hypergraph_db, name, None)
+        if method is None:
+            raise AdminAPIError(f"{type(self.hypergraph_db).__name__} does not support HIF", 501)
+        return method
+
+    def _export_hif(self) -> Dict[str, Any]:
+        return self._hif_method("to_hif")()
+
+    def _import_hif(self, body: Dict[str, Any]) -> Dict[str, Any]:
+        if "incidences" not in body:
+            raise AdminAPIError("Invalid HIF data: missing 'incidences'")
+        if not self._hif_method("from_hif")(body):
+            raise AdminAPIError("Failed to import HIF data")
+        self._mark_dirty()
+        return self._info()
+
+
+class _AdminTCPServer(socketserver.TCPServer):
+    allow_reuse_address = True
+
+
+class HypergraphAdmin:
+    """Management console server for a hypergraph database."""
+
+    def __init__(self, hypergraph_db: BaseHypergraphDB, host: str = "127.0.0.1", port: int = 8900):
+        self.hypergraph_db = hypergraph_db
+        self.host = host
+        self.port = port
+        self.state = AdminState(hypergraph_db)
+        self.httpd: Optional[socketserver.TCPServer] = None
+
+    @property
+    def url(self) -> str:
+        return f"http://{self.host}:{self.port}"
+
+    def start_server(self, open_browser: bool = True) -> threading.Thread:
+        def handler(*args, **kwargs):
+            return HypergraphAdminHandler(self.state, *args, **kwargs)
+
+        # Requests are served one at a time on purpose: HypergraphDB is not thread-safe.
+        self.httpd = _AdminTCPServer((self.host, self.port), handler)
+        self.port = self.httpd.server_address[1]
+        thread = threading.Thread(target=self.httpd.serve_forever, daemon=True)
+        thread.start()
+
+        print(f"🛠  Hypergraph DB admin started: {self.url}")
+        if open_browser:
+            webbrowser.open(self.url)
+        return thread
+
+    def stop_server(self):
+        if self.httpd is not None:
+            self.httpd.shutdown()
+            self.httpd.server_close()
+            self.httpd = None
+
+
+def run_admin(
+    hypergraph_db: BaseHypergraphDB,
+    host: str = "127.0.0.1",
+    port: int = 8900,
+    open_browser: bool = True,
+    blocking: bool = True,
+) -> HypergraphAdmin:
+    """Start the admin console for ``hypergraph_db``.
+
+    Args:
+        hypergraph_db: HypergraphDB instance to manage
+        host: Interface to bind; keep the default unless you trust your network,
+            the console has no authentication
+        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.
+
+    Returns:
+        HypergraphAdmin instance
+    """
+    admin = HypergraphAdmin(hypergraph_db, host=host, port=port)
+    thread = admin.start_server(open_browser=open_browser)
+    if not blocking:
+        return admin
+
+    print("⌨️  Press Ctrl+C to stop server")
+    try:
+        while thread.is_alive():
+            time.sleep(0.2)
+    except KeyboardInterrupt:
+        pass
+    if admin.state.dirty:
+        print("⚠️  Unsaved changes were discarded (use the Save button to persist them)")
+    print("\n🛑 Server stopped")
+    admin.stop_server()
+    return admin
diff --git a/hyperdb/base.py b/hyperdb/base.py
index b7e75df..1c6c656 100644
--- a/hyperdb/base.py
+++ b/hyperdb/base.py
@@ -300,3 +300,20 @@ def draw(self, port: int = 8080, open_browser: bool = True, blocking: bool = Tru
         from .draw import draw_hypergraph
 
         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"):
+        """
+        Open the web admin console for the current HyperDB instance
+
+        Args:
+            ``port``: Server port number, defaults to 8900
+            ``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.
+
+        Returns:
+            HypergraphAdmin instance
+        """
+        from .admin import run_admin
+
+        return run_admin(hypergraph_db=self, host=host, port=port, open_browser=open_browser, blocking=blocking)
diff --git a/hyperdb/draw.py b/hyperdb/draw.py
index be53a4c..10e8b58 100644
--- a/hyperdb/draw.py
+++ b/hyperdb/draw.py
@@ -14,7 +14,7 @@
 class HypergraphAPIHandler(http.server.BaseHTTPRequestHandler):
     """HTTP request handler with API endpoints"""
 
-    def __init__(self, hypergraph_db: HypergraphDB, *args, **kwargs):
+    def __init__(self, hypergraph_db: BaseHypergraphDB, *args, **kwargs):
         self.hypergraph_db = hypergraph_db
         super().__init__(*args, **kwargs)
 
@@ -170,7 +170,11 @@ def _get_graph_data(self, vertex_id: str) -> Dict[str, Any]:
         hg = self.hypergraph_db
 
         if not hg.has_v(vertex_id):
-            return {"error": f"Vertex {vertex_id} not found"}
+            # Query params are always strings; match non-string ids (e.g. ints) by str()
+            match = next((v for v in hg.all_v if str(v) == vertex_id), None)
+            if match is None:
+                return {"error": f"Vertex {vertex_id} not found"}
+            vertex_id = match
 
         # Get all neighbor hyperedges of the vertex
         neighbor_edges = hg.nbr_e_of_v(vertex_id)
diff --git a/hyperdb/templates/admin.html b/hyperdb/templates/admin.html
new file mode 100644
index 0000000..1321671
--- /dev/null
+++ b/hyperdb/templates/admin.html
@@ -0,0 +1,1104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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/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>
+    <style>
+      body { margin: 0; }
+      textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
+    </style>
+  </head>
+  <body class="bg-gray-50">
+    <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…",
+        },
+      };
+
+      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 />);
+    </script>
+  </body>
+</html>
diff --git a/hyperdb/templates/hypergraph_viewer.html b/hyperdb/templates/hypergraph_viewer.html
index 2c0e200..5c269cd 100644
--- a/hyperdb/templates/hypergraph_viewer.html
+++ b/hyperdb/templates/hypergraph_viewer.html
@@ -205,6 +205,11 @@
           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);
@@ -240,8 +245,10 @@
             setVertices(result.data);
             setPagination(result.pagination);
 
-            // If no vertex selected and data exists, select the first one
-            if (result.data.length > 0) {
+            // 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) {
@@ -282,6 +289,7 @@
 
         // Load when page changes
         const handlePageChange = (newPage) => {
+          initialVertexRef.current = "";
           loadVertices(newPage, searchTerm, sortBy, sortOrder);
         };
 
@@ -316,6 +324,7 @@
           "data",
           "weight",
           "source_id",
+          "cluster",
         ]);
 
         // Convert data to G6 Graph format
@@ -638,7 +647,10 @@ <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                     type="text"
                     placeholder="Search vertex ID, type or description..."
                     value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
+                    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">
@@ -725,7 +737,10 @@ <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                             ? "bg-primary-50 border-l-4 border-l-primary-500 shadow-md"
                             : ""
                         }`}
-                        onClick={() => setSelectedVertex(vertex.id)}
+                        onClick={() => {
+                          initialVertexRef.current = "";
+                          setSelectedVertex(vertex.id);
+                        }}
                       >
                         <div className="font-bold text-gray-800 mb-2 flex items-center">
                           {vertex.id}
diff --git a/tests/test_admin.py b/tests/test_admin.py
new file mode 100644
index 0000000..a078cbb
--- /dev/null
+++ b/tests/test_admin.py
@@ -0,0 +1,149 @@
+import json
+import urllib.error
+import urllib.request
+
+import pytest
+
+from hyperdb import HypergraphDB
+from hyperdb.admin import HypergraphAdmin
+
+
+@pytest.fixture()
+def server(tmp_path):
+    db = HypergraphDB(storage_file=tmp_path / "admin.hgdb")
+    db.add_v(1, {"name": "Alice", "entity_type": "person"})
+    db.add_v(2, {"name": "Bob", "entity_type": "person"})
+    db.add_v(3, {"name": "Charlie", "entity_type": "person"})
+    db.add_v(4, {"name": "Paper", "entity_type": "doc"})
+    db.add_e((1, 2), {"relation": "knows"})
+    db.add_e((1, 2, 3, 4), {"relation": "wrote"})
+    admin = HypergraphAdmin(db, port=0)
+    admin.start_server(open_browser=False)
+    yield admin
+    admin.stop_server()
+
+
+def call(admin, path, body=None):
+    data = None if body is None else json.dumps(body).encode()
+    req = urllib.request.Request(admin.url + path, data=data, headers={"Content-Type": "application/json"})
+    try:
+        with urllib.request.urlopen(req) as res:
+            return res.status, json.loads(res.read())
+    except urllib.error.HTTPError as e:
+        return e.code, json.loads(e.read())
+
+
+def test_pages_served(server):
+    with urllib.request.urlopen(server.url + "/") as res:
+        assert b"Hypergraph DB Admin" in res.read()
+    with urllib.request.urlopen(server.url + "/viewer") as res:
+        assert b"Hypergraph Visualization" in res.read()
+
+
+def test_info_and_stats(server):
+    status, info = call(server, "/api/admin/info")
+    assert status == 200
+    assert info["num_v"] == 4 and info["num_e"] == 2 and info["dirty"] is False
+
+    _, stats = call(server, "/api/admin/stats")
+    assert stats["max_degree"] == 2
+    assert stats["edge_size_hist"] == [[2, 1], [4, 1]]
+    assert stats["entity_types"][0] == ["person", 3]
+
+
+def test_list_vertices_and_edges(server):
+    _, res = call(server, "/api/admin/vertices?search=bob")
+    assert [v["id"] for v in res["data"]] == [2]
+
+    _, res = call(server, "/api/admin/vertices?entity_type=doc")
+    assert [v["id"] for v in res["data"]] == [4]
+
+    _, res = call(server, "/api/admin/vertices?page_size=2&page=2")
+    assert len(res["data"]) == 2 and res["pagination"]["total_pages"] == 2
+
+    _, res = call(server, "/api/admin/edges?search=wrote")
+    assert res["data"][0]["size"] == 4
+
+    _, res = call(server, "/api/admin/edges?vertex=3")
+    assert res["pagination"]["total"] == 1
+
+
+def test_vertex_crud(server):
+    db = server.hypergraph_db
+    status, res = call(server, "/api/admin/vertex/upsert", {"create": True, "id": 5, "data": {"name": "Eve"}})
+    assert status == 200 and db.v(5) == {"name": "Eve"}
+
+    status, _ = call(server, "/api/admin/vertex/upsert", {"create": True, "id": 5})
+    assert status == 409
+
+    # Merge vs replace
+    call(server, "/api/admin/vertex/upsert", {"id": 5, "data": {"age": 30}})
+    assert db.v(5) == {"name": "Eve", "age": 30}
+    call(server, "/api/admin/vertex/upsert", {"id": 5, "data": {"age": 31}, "replace": True})
+    assert db.v(5) == {"age": 31}
+
+    _, detail = call(server, "/api/admin/vertex/get", {"id": 1})
+    assert detail["degree"] == 2 and detail["neighbors"] == 3
+
+    call(server, "/api/admin/vertex/delete", {"id": 2})
+    assert not db.has_v(2) and db.num_e == 1  # (1, 2) dropped below 2 vertices
+
+    status, _ = call(server, "/api/admin/vertex/get", {"id": 99})
+    assert status == 404
+    assert call(server, "/api/admin/info")[1]["dirty"] is True
+
+
+def test_edge_crud(server):
+    db = server.hypergraph_db
+    status, res = call(server, "/api/admin/edge/upsert", {"create": True, "vertices": [3, 4], "data": {"w": 1}})
+    assert status == 200 and db.e((3, 4)) == {"w": 1}
+
+    status, _ = call(server, "/api/admin/edge/upsert", {"create": True, "vertices": [4, 3]})
+    assert status == 409
+    status, _ = call(server, "/api/admin/edge/upsert", {"create": True, "vertices": [1, 42]})
+    assert status == 404
+    status, _ = call(server, "/api/admin/edge/upsert", {"create": True, "vertices": [1]})
+    assert status == 400
+
+    call(server, "/api/admin/edge/upsert", {"vertices": [3, 4], "data": {"x": 2}, "replace": True})
+    assert db.e((3, 4)) == {"x": 2}
+
+    call(server, "/api/admin/edge/delete", {"vertices": [3, 4]})
+    assert not db.has_e((3, 4))
+
+
+def test_save_and_hif_roundtrip(server):
+    db = server.hypergraph_db
+    call(server, "/api/admin/vertex/upsert", {"create": True, "id": "new"})
+    status, info = call(server, "/api/admin/save", {})
+    assert status == 200 and info["dirty"] is False and info["file_exists"]
+    assert HypergraphDB(storage_file=db.storage_file).has_v("new")
+
+    _, hif = call(server, "/api/admin/hif")
+    assert "incidences" in hif
+
+    status, _ = call(server, "/api/admin/hif", {"nope": []})
+    assert status == 400
+    status, info = call(
+        server, "/api/admin/hif", {"incidences": [{"edge": "e", "node": "a"}, {"edge": "e", "node": "b"}]}
+    )
+    assert status == 200 and info["num_v"] == 2 and info["num_e"] == 1 and info["dirty"] is True
+
+
+def test_bad_requests(server):
+    assert call(server, "/api/admin/nope")[0] == 404
+    assert call(server, "/api/admin/vertex/upsert", {"id": 1, "data": [1, 2]})[0] == 400
+    assert call(server, "/api/admin/vertex/upsert", {"create": True, "id": ""})[0] == 400
+
+
+def test_viewer_graph_accepts_non_string_ids(server):
+    with urllib.request.urlopen(server.url + "/api/graph?vertex_id=1") as res:
+        data = json.loads(res.read())
+    assert "error" not in data and len(data["edges"]) == 2
+
+
+def test_vertex_search_ranks_id_matches_first(server):
+    # "bobby" has degree 0 but matches by id, so it outranks attribute-only matches with higher degree
+    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]