sysgraph 0.0.16__tar.gz → 0.0.18__tar.gz

sysgraph-0.0.18/PKG-INFO

@@ -0,0 +1,159 @@
+Metadata-Version: 2.4
+Name: sysgraph
+Version: 0.0.18
+Summary: Visualizer for processes and their interconnections
+Author-email: Eugene Gubenkov <gubenkoved@gmail.com>
+License: MIT
+Project-URL: Source, https://github.com/gubenkoved/sysgraph
+Project-URL: Issues, https://github.com/gubenkoved/sysgraph/issues
+Keywords: process,visualization,graph,ipc,system,monitoring,cross-platform,macos,linux
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: POSIX :: Linux
+Classifier: Operating System :: MacOS
+Classifier: Operating System :: Microsoft :: Windows
+Classifier: Topic :: System :: Monitoring
+Classifier: Topic :: System :: Systems Administration
+Classifier: Environment :: Web Environment
+Classifier: Framework :: FastAPI
+Classifier: Intended Audience :: Developers
+Classifier: Intended Audience :: System Administrators
+Requires-Python: >=3.12
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: psutil
+Requires-Dist: coloredlogs
+Requires-Dist: fastapi>=0.95
+Requires-Dist: uvicorn[standard]>=0.20
+Dynamic: license-file
+
+# sysgraph
+
+An interactive force-directed **network graph visualizer** for the browser — with two modes:
+
+- **Import any graph** — load any JSON graph (nodes + edges) to explore and visualize it interactively
+- **Live process graph** — discover running OS processes and their inter-process communication channels in real time (cross-platform; richest on Linux)
+
+[![PyPI](https://img.shields.io/pypi/v/sysgraph)](https://pypi.org/project/sysgraph/)
+![Python](https://img.shields.io/badge/python-%3E%3D3.12-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+
+## Features
+
+- **Import any graph** — load a JSON file with nodes and edges to visualize any network, social graph, dependency tree, or dataset
+- **Export/Import** — save and reload graph snapshots as JSON; use the sample at [`data/simplest-graph.json`](data/simplest-graph.json) as a format reference
+- **Interactive graph** — force-directed graph rendered in the browser with zoom, pan, drag, and search
+- **Fuzzy search** — find nodes by any property
+- **Adjacency filtering** — right-click a node to show only its neighbors
+- **Configurable** — tune d3 force parameters, colors, and type filters via the settings panel
+- **Process discovery** — enumerates running OS processes and their parent-child relationships (cross-platform via psutil)
+- **IPC visualization** — discovers TCP/UDP connections (all platforms), Unix domain sockets and pipes (Linux only)
+- **Real-time** — fetch the latest process graph on demand via the web UI
+
+## Demo
+
+[Demo](https://github.com/user-attachments/assets/7d19daca-042c-43f1-bedd-4d74344e1e89)
+
+## Requirements
+
+- **Python ≥ 3.12**
+- **Linux, macOS, or Windows** — process and network discovery works on all platforms via psutil; Unix domain sockets and pipe discovery require Linux
+- Root/sudo recommended for full process visibility on Linux/macOS
+
+## Installation
+
+```bash
+pip install sysgraph
+```
+
+## Usage
+
+```bash
+# Start the web server (default: http://localhost:8000)
+sysgraph
+
+# Specify a custom port
+sysgraph --port 9000
+
+# Or run as a module
+python -m sysgraph
+```
+
+Open your browser to the displayed URL.
+
+### Visualize your own graph
+
+Use the **Import** button in the UI to load any JSON file in the following format:
+
+```json
+{
+  "nodes": [
+    {"id": "1", "type": "person", "properties": {"name": "Alice"}},
+    {"id": "2", "type": "person", "properties": {"name": "Bob"}}
+  ],
+  "edges": [
+    {"source_id": "1", "target_id": "2", "type": "knows", "properties": {}}
+  ]
+}
+```
+
+See [`data/simplest-graph.json`](data/simplest-graph.json) for a minimal example.
+
+### Live process graph
+
+For full visibility into all processes and their connections, run with elevated privileges (Linux/macOS):
+
+```bash
+sudo sysgraph
+```
+
+## Docker
+
+```bash
+docker run --rm -it --pid=host --net=host gubenkoved/sysgraph
+```
+
+The `--pid=host` and `--net=host` flags allow the container to see host processes and network connections.
+
+## How It Works
+
+1. The **browser frontend** renders interactive force-directed graphs using [force-graph](https://github.com/vasturiano/force-graph) with d3 physics simulation.
+2. Graphs can be **imported from JSON** directly in the browser, or fetched live from the backend.
+3. The **FastAPI backend** uses `psutil` to discover processes and network connections (cross-platform), plus Linux-specific APIs (`/proc`, `ss`) for pipe and Unix domain socket discovery, building a graph served via `GET /api/graph`.
+
+## Development
+
+### Prerequisites
+- Python ≥ 3.12, Docker (for frontend builds)
+- Node.js 22 runs inside Docker; no host installation required
+
+### Backend
+```bash
+python3 -m venv .venv && source .venv/bin/activate
+pip install -e . && pip install -r requirements-dev.in
+python src/sysgraph/app.py   # → http://localhost:8000
+```
+
+### Frontend (TypeScript + Vite)
+```bash
+./scripts/build-ui.sh         # production build → src/sysgraph/dist/
+./scripts/dev-ui.sh           # Vite dev server with HMR on :5173
+./scripts/typecheck-ui.sh     # TypeScript type checking
+./scripts/lint-ui.sh          # Biome linter (pass --fix to auto-fix)
+```
+
+### Tests
+```bash
+pytest src/sysgraph/tests/
+```
+
+### Python linting
+```bash
+./scripts/lint.sh             # ruff check + ruff format + isort
+```
+
+## License
+
+[MIT](LICENSE)

sysgraph-0.0.18/README.md

@@ -0,0 +1,128 @@
+# sysgraph
+
+An interactive force-directed **network graph visualizer** for the browser — with two modes:
+
+- **Import any graph** — load any JSON graph (nodes + edges) to explore and visualize it interactively
+- **Live process graph** — discover running OS processes and their inter-process communication channels in real time (cross-platform; richest on Linux)
+
+[![PyPI](https://img.shields.io/pypi/v/sysgraph)](https://pypi.org/project/sysgraph/)
+![Python](https://img.shields.io/badge/python-%3E%3D3.12-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+
+## Features
+
+- **Import any graph** — load a JSON file with nodes and edges to visualize any network, social graph, dependency tree, or dataset
+- **Export/Import** — save and reload graph snapshots as JSON; use the sample at [`data/simplest-graph.json`](data/simplest-graph.json) as a format reference
+- **Interactive graph** — force-directed graph rendered in the browser with zoom, pan, drag, and search
+- **Fuzzy search** — find nodes by any property
+- **Adjacency filtering** — right-click a node to show only its neighbors
+- **Configurable** — tune d3 force parameters, colors, and type filters via the settings panel
+- **Process discovery** — enumerates running OS processes and their parent-child relationships (cross-platform via psutil)
+- **IPC visualization** — discovers TCP/UDP connections (all platforms), Unix domain sockets and pipes (Linux only)
+- **Real-time** — fetch the latest process graph on demand via the web UI
+
+## Demo
+
+[Demo](https://github.com/user-attachments/assets/7d19daca-042c-43f1-bedd-4d74344e1e89)
+
+## Requirements
+
+- **Python ≥ 3.12**
+- **Linux, macOS, or Windows** — process and network discovery works on all platforms via psutil; Unix domain sockets and pipe discovery require Linux
+- Root/sudo recommended for full process visibility on Linux/macOS
+
+## Installation
+
+```bash
+pip install sysgraph
+```
+
+## Usage
+
+```bash
+# Start the web server (default: http://localhost:8000)
+sysgraph
+
+# Specify a custom port
+sysgraph --port 9000
+
+# Or run as a module
+python -m sysgraph
+```
+
+Open your browser to the displayed URL.
+
+### Visualize your own graph
+
+Use the **Import** button in the UI to load any JSON file in the following format:
+
+```json
+{
+  "nodes": [
+    {"id": "1", "type": "person", "properties": {"name": "Alice"}},
+    {"id": "2", "type": "person", "properties": {"name": "Bob"}}
+  ],
+  "edges": [
+    {"source_id": "1", "target_id": "2", "type": "knows", "properties": {}}
+  ]
+}
+```
+
+See [`data/simplest-graph.json`](data/simplest-graph.json) for a minimal example.
+
+### Live process graph
+
+For full visibility into all processes and their connections, run with elevated privileges (Linux/macOS):
+
+```bash
+sudo sysgraph
+```
+
+## Docker
+
+```bash
+docker run --rm -it --pid=host --net=host gubenkoved/sysgraph
+```
+
+The `--pid=host` and `--net=host` flags allow the container to see host processes and network connections.
+
+## How It Works
+
+1. The **browser frontend** renders interactive force-directed graphs using [force-graph](https://github.com/vasturiano/force-graph) with d3 physics simulation.
+2. Graphs can be **imported from JSON** directly in the browser, or fetched live from the backend.
+3. The **FastAPI backend** uses `psutil` to discover processes and network connections (cross-platform), plus Linux-specific APIs (`/proc`, `ss`) for pipe and Unix domain socket discovery, building a graph served via `GET /api/graph`.
+
+## Development
+
+### Prerequisites
+- Python ≥ 3.12, Docker (for frontend builds)
+- Node.js 22 runs inside Docker; no host installation required
+
+### Backend
+```bash
+python3 -m venv .venv && source .venv/bin/activate
+pip install -e . && pip install -r requirements-dev.in
+python src/sysgraph/app.py   # → http://localhost:8000
+```
+
+### Frontend (TypeScript + Vite)
+```bash
+./scripts/build-ui.sh         # production build → src/sysgraph/dist/
+./scripts/dev-ui.sh           # Vite dev server with HMR on :5173
+./scripts/typecheck-ui.sh     # TypeScript type checking
+./scripts/lint-ui.sh          # Biome linter (pass --fix to auto-fix)
+```
+
+### Tests
+```bash
+pytest src/sysgraph/tests/
+```
+
+### Python linting
+```bash
+./scripts/lint.sh             # ruff check + ruff format + isort
+```
+
+## License
+
+[MIT](LICENSE)

sysgraph-0.0.18/pyproject.toml

@@ -0,0 +1,66 @@
+[build-system]
+requires = ["setuptools>=68.0", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "sysgraph"
+dynamic = ["version"]
+description = "Visualizer for processes and their interconnections"
+readme = "README.md"
+license = { text = "MIT" }
+authors = [{ name = "Eugene Gubenkov", email = "gubenkoved@gmail.com" }]
+requires-python = ">=3.12"
+keywords = ["process", "visualization", "graph", "ipc", "system", "monitoring", "cross-platform", "macos", "linux"]
+classifiers = [
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.12",
+    "Programming Language :: Python :: 3.13",
+    "License :: OSI Approved :: MIT License",
+    "Operating System :: POSIX :: Linux",
+    "Operating System :: MacOS",
+    "Operating System :: Microsoft :: Windows",
+    "Topic :: System :: Monitoring",
+    "Topic :: System :: Systems Administration",
+    "Environment :: Web Environment",
+    "Framework :: FastAPI",
+    "Intended Audience :: Developers",
+    "Intended Audience :: System Administrators",
+]
+dependencies = [
+    "psutil",
+    "coloredlogs",
+    "fastapi>=0.95",
+    "uvicorn[standard]>=0.20",
+]
+
+[project.urls]
+Source = "https://github.com/gubenkoved/sysgraph"
+Issues = "https://github.com/gubenkoved/sysgraph/issues"
+
+[project.scripts]
+sysgraph = "sysgraph.app:main"
+
+[tool.setuptools.dynamic]
+version = { attr = "sysgraph.__version__" }
+
+[tool.setuptools.packages.find]
+where = ["src"]
+
+[tool.setuptools.package-data]
+sysgraph = ["dist/*", "dist/**/*"]
+
+[tool.ruff]
+line-length = 79
+target-version = "py312"
+# Tune ruff rules as needed. Ruff supports many checks and can also format (`ruff format`).
+# See https://beta.ruff.rs/docs/configuration/ for config options.
+exclude = [".venv", "build", "dist", "__pycache__"]
+
+[tool.isort]
+profile = "black"
+multi_line_output = 3
+include_trailing_comma = true
+force_grid_wrap = 0
+use_parentheses = true
+ensure_newline_before_comments = true
+line_length = 88

sysgraph-0.0.18/src/sysgraph/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.0.18"

{sysgraph-0.0.16 → sysgraph-0.0.18}/src/sysgraph/app.py

@@ -18,9 +18,14 @@ from sysgraph.discovery import build_graph
 LOGGER = logging.getLogger(__name__)
 
 
+LOG_FORMAT = (
+    "%(asctime)s.%(msecs)03d %(name)s[%(process)d] %(levelname)s %(message)s"
+)
+
+
 @asynccontextmanager
 async def lifespan(app):
-    coloredlogs.install()
+    coloredlogs.install(fmt=LOG_FORMAT)
     logging.info(f"init for process with PID {os.getpid()}")
     yield
     logging.info(f"shutdown for process with PID {os.getpid()}")

{sysgraph-0.0.16 → sysgraph-0.0.18}/src/sysgraph/constants.py

@@ -20,8 +20,8 @@ def process_node_id(pid: int) -> str:
     return f"{NODE_PROCESS}::{pid}"
 
 
-def uds_node_id(inode: int) -> str:
-    return f"{NODE_UDS}::{inode}"
+def uds_node_id(key: str) -> str:
+    return f"{NODE_UDS}::{key}"
 
 
 def pipe_node_id(inode: str) -> str:

{sysgraph-0.0.16 → sysgraph-0.0.18}/src/sysgraph/discovery.py

@@ -2,6 +2,8 @@ import logging
 import os
 import re
 import subprocess
+import sys
+import time
 from collections import defaultdict
 from concurrent.futures import ThreadPoolExecutor
 from pathlib import Path
@@ -71,7 +73,7 @@ def discover_processes() -> list[Process]:
         if mem_info:
             p.memory_rss = mem_info.rss
             p.memory_vms = mem_info.vms
-            p.memory_shared = mem_info.shared
+            p.memory_shared = getattr(mem_info, "shared", None)
 
         p.environment = info.get("environ")
 
@@ -81,15 +83,18 @@ def discover_processes() -> list[Process]:
 
 
 def discover_unix_sockets() -> list[UnixDomainSocket]:
-    """Discover Unix Domain Sockets as reported by kernel.
+    """Discover Unix Domain Sockets by parsing ``ss -xp`` output.
 
-    Note however that connection with UDS will have at least 2 records reported
-    with opposite local/peer inodes. They can be further groupped to
-    find connected pairs of processes.
+    This is a Linux-only feature.  On other platforms an empty list is
+    returned without raising an error.
 
     Returns:
-        list[UnixDomainSocket]: _description_
+        list[UnixDomainSocket]: Discovered UDS sockets.
     """
+    if sys.platform != "linux":
+        LOGGER.debug("UDS discovery skipped (only supported on Linux)")
+        return []
+
     result = subprocess.run(
         ["ss", "-xp"], capture_output=True, text=True, check=False
     )
@@ -98,11 +103,15 @@ def discover_unix_sockets() -> list[UnixDomainSocket]:
 
     # example line:
     # users:(("dbus-daemon",pid=1950,fd=12))
-    def parse_proccess(s: str) -> list[UnixDomainSocketProcRef]:
+    def parse_proccess(
+        s: str,
+    ) -> list[UnixDomainSocketProcRef]:
         processes = []
 
         for match in re.finditer(
-            r'\("(?P<name>[^"]+)",pid=(?P<pid>[0-9]+),fd=(?P<fd>[0-9]+)\)', s
+            r'\("(?P<name>[^"]+)",pid=(?P<pid>[0-9]+),'
+            r"fd=(?P<fd>[0-9]+)\)",
+            s,
         ):
             ref = UnixDomainSocketProcRef(pid=int(match.group("pid")))
             ref.name = match.group("name")
@@ -140,7 +149,8 @@ def discover_connected_uds(
 ) -> list[UnixDomainSocketConnection]:
     """Discover connected UDS pairs from the list of discovered UDS sockets.
 
-    Each connection will have two UDS sockets with opposite local/peer inodes.
+    Each connection will have two UDS sockets with opposite local/peer
+    inodes.
 
     Args:
         sockets (list[UnixDomainSocket]): List of discovered UDS sockets.
@@ -158,7 +168,10 @@ def discover_connected_uds(
     for uds in sockets:
         if (uds.peer_inode, uds.local_inode) in inode_map:
             peer_uds = inode_map[(uds.peer_inode, uds.local_inode)]
-            if (uds.local_inode, uds.peer_inode) not in visited and (
+            if (
+                uds.local_inode,
+                uds.peer_inode,
+            ) not in visited and (
                 uds.peer_inode,
                 uds.local_inode,
             ) not in visited:
@@ -174,8 +187,18 @@ def discover_connected_uds(
 
 
 def get_processes_open_files() -> dict[int, list[ProcessOpenFile]]:
-    """Read open file descriptors directly from /proc instead of spawning lsof."""
+    """Read open file descriptors from /proc to discover pipes.
+
+    This is a Linux-only feature that reads ``/proc/[pid]/fd`` and
+    ``/proc/[pid]/fdinfo``.  On other platforms an empty mapping is
+    returned without raising an error.
+    """
     result_map: dict[int, list[ProcessOpenFile]] = defaultdict(list)
+
+    if sys.platform != "linux":
+        LOGGER.debug("pipe discovery skipped (only supported on Linux)")
+        return result_map
+
     proc_path = Path("/proc")
 
     for pid_dir in proc_path.iterdir():
@@ -305,7 +328,7 @@ def _add_uds_nodes(
             label = f"uds:[{inode}]"
 
         node = graph.add_node(
-            uds_node_id(inode),
+            uds_node_id(str(inode)),
             NODE_UDS,
             properties={
                 "label": label,
@@ -513,6 +536,8 @@ def _add_network_nodes(
 
 
 def build_graph(discover_uds_connectivity: bool = True) -> Graph:
+    started_at = time.monotonic()
+
     graph = Graph()
 
     # run independent discovery steps in parallel (all I/O-bound)
@@ -532,4 +557,8 @@ def build_graph(discover_uds_connectivity: bool = True) -> Graph:
     _add_pipe_nodes(graph, open_files_map, pid_to_node)
     _add_network_nodes(graph, processes, all_net_connections, pid_to_node)
 
+    LOGGER.info(
+        f"discovery completed in {time.monotonic() - started_at:.2f} seconds"
+    )
+
     return graph

sysgraph-0.0.18/src/sysgraph/dist/assets/index-BLbtXZbQ.css

@@ -0,0 +1 @@
+:root{--z-toolbar: 100;--z-search-help: 150;--z-context-menu: 200;--z-loading-overlay: 300;--z-details-panel: 50;--z-selection-overlay: 10;--z-version-badge: 10;--z-zoom-indicator: 10;--bg-toolbar: rgba(255, 255, 255, .95);--bg-panel: rgba(255, 255, 255, .97);--border-subtle: rgba(0, 0, 0, .08);--border-light: rgba(0, 0, 0, .1);--border-medium: rgba(0, 0, 0, .12);--shadow-xs: rgba(0, 0, 0, .08);--shadow-sm: rgba(0, 0, 0, .14);--shadow-md: rgba(0, 0, 0, .15);--accent-primary: #1a56db;--accent-info: #1a73e8;--accent-danger: #dc2626;--toolbar-height: 48px;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 16px;--font-family: "Ubuntu", "Segoe UI", "Arial", sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-md: 13px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--button-height: 28px;--icon-button-size: 24px;--tp-base-background-color: hsla(230, 5%, 90%, 1);--tp-base-shadow-color: hsla(0, 0%, 0%, .1);--tp-button-background-color: hsla(230, 7%, 75%, 1);--tp-button-background-color-active: hsla(230, 7%, 60%, 1);--tp-button-background-color-focus: hsla(230, 7%, 65%, 1);--tp-button-background-color-hover: hsla(230, 7%, 70%, 1);--tp-button-foreground-color: hsla(230, 10%, 30%, 1);--tp-container-background-color: hsla(230, 15%, 30%, .2);--tp-container-background-color-active: hsla(230, 15%, 30%, .32);--tp-container-background-color-focus: hsla(230, 15%, 30%, .28);--tp-container-background-color-hover: hsla(230, 15%, 30%, .24);--tp-container-foreground-color: hsla(230, 10%, 30%, 1);--tp-groove-foreground-color: hsla(230, 15%, 30%, .1);--tp-input-background-color: hsla(230, 15%, 30%, .1);--tp-input-background-color-active: hsla(230, 15%, 30%, .22);--tp-input-background-color-focus: hsla(230, 15%, 30%, .18);--tp-input-background-color-hover: hsla(230, 15%, 30%, .14);--tp-input-foreground-color: hsla(230, 10%, 30%, 1);--tp-label-foreground-color: hsla(230, 10%, 30%, .7);--tp-monitor-background-color: hsla(230, 15%, 30%, .1);--tp-monitor-foreground-color: hsla(230, 10%, 30%, .5)}html,body{height:100%;margin:0;overflow:hidden;font-family:var(--font-family)}#toolbar{position:fixed;top:0;left:0;right:0;height:var(--toolbar-height);z-index:var(--z-toolbar);background:var(--bg-toolbar);border-bottom:1px solid var(--border-light);display:flex;align-items:center;padding:0 var(--spacing-lg);gap:var(--spacing-sm);box-shadow:0 1px 3px var(--shadow-xs)}#toolbar md-outlined-button{--md-outlined-button-container-height: var(--button-height);--md-outlined-button-label-text-size: var(--font-size-sm);--md-outlined-button-label-text-weight: 500;--md-outlined-button-icon-size: 16px;--md-outlined-button-leading-space: 10px;--md-outlined-button-trailing-space: 12px;--md-outlined-button-icon-offset: -2px;--md-outlined-button-container-shape: var(--radius-sm)}md-outlined-button.active{--md-outlined-button-container-color: #d0e1ff;--md-outlined-button-label-text-color: var(--accent-primary);--md-outlined-button-outline-color: var(--accent-primary);--md-outlined-button-icon-color: var(--accent-primary)}md-outlined-button.danger{--md-outlined-button-label-text-color: var(--accent-danger);--md-outlined-button-outline-color: var(--accent-danger);--md-outlined-button-icon-color: var(--accent-danger)}.toolbar-separator{width:1px;height:var(--icon-button-size);background:var(--border-light)}#searchInput{width:240px;height:var(--button-height);--md-outlined-text-field-container-shape: var(--radius-sm);--md-outlined-text-field-top-space: var(--spacing-xs);--md-outlined-text-field-bottom-space: var(--spacing-xs);--md-outlined-text-field-input-text-size: var(--font-size-sm);--md-outlined-text-field-label-text-size: var(--font-size-sm)}#searchHelpTrigger{--md-icon-button-icon-size: 18px;--md-icon-button-state-layer-height: var(--button-height);--md-icon-button-state-layer-width: var(--button-height);height:var(--button-height);width:var(--button-height)}.search-help-anchor{position:relative;display:inline-flex}#searchHelp{display:none;position:absolute;top:100%;left:0;margin-top:var(--spacing-xs);z-index:var(--z-search-help);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:10px 14px;box-shadow:0 4px 12px var(--shadow-md);font-size:var(--font-size-sm);line-height:1.5;background:#1e293b;color:#fff}#searchHelp.open{display:block}#searchHelp code{background:#ffffff1f;padding:1px var(--spacing-xs);border-radius:3px}#content{position:fixed;top:var(--toolbar-height);left:0;right:0;bottom:0}#graph{width:100%;height:100%;position:relative}.details-panel{position:absolute;top:var(--spacing-md);left:var(--spacing-md);width:fit-content;max-width:420px;height:auto;min-width:200px;min-height:120px;max-height:min(350px,calc(100% - var(--spacing-lg)));z-index:var(--z-details-panel);background:var(--bg-panel);box-shadow:0 2px 12px var(--shadow-sm);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:none;flex-direction:column;overflow:hidden;resize:both}.details-panel.open{display:flex}.details-panel .panel-header{display:flex;align-items:center;height:var(--button-height);padding:0 2px 0 10px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;cursor:grab;-webkit-user-select:none;user-select:none}.details-panel .panel-header:active{cursor:grabbing}.details-panel .panel-title{font-size:var(--font-size-sm);font-weight:500;color:#333;flex:1}.details-panel md-icon-button{--md-icon-button-icon-size: 16px;--md-icon-button-state-layer-height: var(--icon-button-size);--md-icon-button-state-layer-width: var(--icon-button-size);height:var(--icon-button-size);width:var(--icon-button-size)}.details-panel .panel-body{flex:1;overflow-y:auto;min-height:0;padding:var(--spacing-md);font-family:var(--font-family)}#detailsPanel{border-left:3px solid var(--accent-info)}#detailsPanel .panel-header{background:#1a73e80f}#contextMenu{display:none;position:fixed;z-index:var(--z-context-menu);background:var(--bg-panel);border:1px solid var(--border-medium);border-radius:var(--spacing-sm);padding:var(--spacing-xs) 0;box-shadow:0 4px 12px var(--shadow-md);min-width:160px;font-size:var(--font-size-md)}.context-menu-item{padding:var(--spacing-sm) 14px;cursor:pointer;-webkit-user-select:none;user-select:none}.context-menu-item:hover{background:#0000000f}.context-menu-divider{height:1px;margin:var(--spacing-xs) 0;background:var(--border-medium)}#loading-overlay{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--z-loading-overlay);background:#0000008c;color:#fff;font-family:var(--font-family);font-size:14px;padding:8px 18px;border-radius:var(--radius-md);pointer-events:none}#loading-overlay.visible{display:block}.tp-rotv{font-family:var(--font-family)!important;opacity:.9}#settingsPane{max-height:calc(100% - 30px);position:absolute;overflow-y:auto;right:10px;top:10px}#version-badge{position:fixed;bottom:var(--spacing-sm);right:var(--spacing-md);font-size:var(--font-size-xs);color:#0000004d;pointer-events:none;z-index:var(--z-version-badge);font-family:var(--font-family)}#zoom-indicator{position:fixed;bottom:var(--spacing-md);left:var(--spacing-md);z-index:var(--z-zoom-indicator);display:flex;align-items:center;gap:0;background:var(--bg-toolbar);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:0 1px 4px var(--shadow-xs);padding:0 var(--spacing-xs)}#zoom-indicator md-icon-button{--md-icon-button-icon-size: 16px;--md-icon-button-state-layer-height: var(--button-height);--md-icon-button-state-layer-width: var(--button-height);height:var(--button-height);width:var(--button-height)}#zoomLevel{font-size:var(--font-size-xs);font-family:var(--font-family);color:#555;min-width:34px;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:var(--radius-sm);padding:2px var(--spacing-xs);transition:background .1s}#zoomLevel:hover{background:#0000000f}.muted{color:#666}hr{border:none;border-top:1px solid var(--border-subtle);margin:var(--spacing-sm) 0}