diff --git a/docs/src/debugging/gdb_plugin.rst b/docs/src/debugging/gdb_plugin.rst
index 060e734d65..2c092f123f 100644
--- a/docs/src/debugging/gdb_plugin.rst
+++ b/docs/src/debugging/gdb_plugin.rst
@@ -49,6 +49,7 @@ The plugin provides the following commands.
 - ``dump image_decoder``: List all registered image decoders.
 - ``dump fs_drv``: List all registered filesystem drivers.
 - ``dump draw_task <expr>``: List draw tasks from a layer.
+- ``dump dashboard``: Generate an HTML dashboard of all LVGL runtime state.
 - ``info style``: Inspect style properties of an ``lv_style_t`` or an ``lv_obj_t``.
 - ``info draw_unit``: Print raw struct details for each drawing unit.
 - ``info obj_class <expr>``: Show object class hierarchy.
@@ -192,6 +193,42 @@ Dump Draw Tasks
 and display each task's type, state, area, opacity, and preferred draw unit id.
 
 
+Dump Dashboard
+**************
+
+``dump dashboard``: Collect all LVGL runtime state (displays, object trees,
+animations, timers, caches, input devices, groups, draw units/tasks,
+subjects/observers, image decoders, filesystem drivers) and generate a
+self-contained HTML file for offline browsing.
+
+The dashboard supports three output modes:
+
+- ``dump dashboard``: Generate ``lvgl_dashboard.html`` with all data embedded.
+- ``dump dashboard --json``: Export raw JSON data to ``lvgl_dashboard.json``.
+- ``dump dashboard --viewer``: Generate an empty HTML viewer (``lvgl_viewer.html``)
+  that can load JSON files via drag-and-drop.
+
+Use ``-o <path>`` to specify a custom output path.
+
+Example:
+
+.. code:: bash
+
+    (gdb) dump dashboard
+    Dashboard written to lvgl_dashboard.html (1.23s)
+
+    (gdb) dump dashboard --json -o /tmp/state.json
+    Dashboard written to /tmp/state.json (0.98s)
+
+    (gdb) dump dashboard --viewer
+    Viewer written to lvgl_viewer.html
+
+The generated HTML is fully self-contained (no external dependencies) and
+includes a sidebar for navigation, a search box for filtering, collapsible
+object trees with style details, framebuffer image previews, and cross-reference
+links between related objects.
+
+
 Inspect Object Class
 ********************
 
@@ -289,14 +326,58 @@ bulk export (e.g. ``LVAnim.snapshots(anims)``). Additionally,
 Architecture
 ************
 
-The GDB plugin decouples data extraction from display through a snapshot
-abstraction. Each wrapper class (``LVAnim``, ``LVTimer``, ``LVObject``, etc.)
-declares a ``_DISPLAY_SPEC`` describing its fields and exports a ``snapshot()``
-method that returns a self-describing ``Snapshot`` object carrying both the
-data dict and the display spec. The ``cmds/`` layer simply passes snapshots to
-generic formatters (``print_info``, ``print_spec_table``) which read the
-embedded spec to render output — no command needs to know the internal
-structure of any wrapper.
+The GDB plugin is organized into four layers. The overview below shows how
+terminal commands and the HTML dashboard both flow through the same snapshot
+abstraction down to raw GDB memory access:
+
+.. mermaid::
+   :zoom:
+
+   graph TD
+        subgraph "Rendering Layer"
+            CLI["GDB Terminal<br/>dump obj, info style, ..."]
+            DASH["HTML Dashboard<br/>dump dashboard"]
+        end
+
+        subgraph "Formatter / Renderer"
+            FMT["formatter.py<br/>print_info · print_spec_table"]
+            HR["html_renderer.py<br/>template + CSS + JS"]
+        end
+
+        subgraph "Data Collection"
+            DC["data_collector.py<br/>collect_all() → JSON dict"]
+            SNAP["Snapshot<br/>_data + _display_spec"]
+        end
+
+        subgraph "Value Wrappers (lvgl/)"
+            W["LVObject · LVDisplay · LVAnim<br/>LVCache · LVTimer · LVDrawBuf<br/>LVIndev · LVGroup · ..."]
+            GDB["gdb.Value (C struct memory)"]
+        end
+
+        CLI --> FMT
+        FMT --> SNAP
+        DASH --> HR
+        HR --> DC
+        DC --> SNAP
+        SNAP --> W
+        W --> GDB
+
+        style CLI fill:#4CAF50,color:#fff
+        style DASH fill:#4CAF50,color:#fff
+        style FMT fill:#FF9800,color:#fff
+        style HR fill:#FF9800,color:#fff
+        style DC fill:#2196F3,color:#fff
+        style SNAP fill:#2196F3,color:#fff
+        style W fill:#9C27B0,color:#fff
+        style GDB fill:#616161,color:#fff
+
+Each wrapper class declares a ``_DISPLAY_SPEC`` describing its fields and
+exports a ``snapshot()`` method that returns a self-describing ``Snapshot``
+object carrying both the data dict and the display spec. The ``cmds/`` layer
+simply passes snapshots to generic formatters (``print_info``,
+``print_spec_table``) which read the embedded spec to render output — no
+command needs to know the internal structure of any wrapper. The detailed
+snapshot flow is shown below:
 
 .. mermaid::
    :zoom:
diff --git a/scripts/gdb/README.md b/scripts/gdb/README.md
index 77c3ed7f01..4fcb50922d 100644
--- a/scripts/gdb/README.md
+++ b/scripts/gdb/README.md
@@ -1,61 +1,72 @@
 # lvglgdb
 
-lvglgdb is a GDB script for LVGL.
+GDB Python extension for inspecting and debugging LVGL internals. 
+Works with live debugging sessions, core dumps, and other 
+GDB-compatible targets.
 
-# Installation
+## Installation
 
 ```bash
 pip install lvglgdb
 ```
 
-# Simple Usage
+## Usage
+
+In your GDB session:
 
-In your GDB session, run:
 ```bash
 py import lvglgdb
-
-dump obj
-dump display -f png
-dump cache image
-dump cache image_header
-check cache image
-dump anim
-dump timer
-dump indev
-dump group
-dump image_decoder
-dump fs_drv
-dump draw_task <layer_expr>
-
-# Inspect a single lv_style_t variable
-info style my_style
-
-# Inspect all styles of an lv_obj_t
-info style --obj my_obj
-
-# Show draw unit information
-info draw_unit
-
-# Show object class hierarchy
-info obj_class obj->class_p
-
-# Show subject and its observers
-info subject &my_subject
 ```
 
-# Structure
+### Dump Commands
+
+```bash
+dump obj                        # Dump widget tree
+dump display -f png             # Dump display framebuffer as PNG
+dump cache image                # Dump image cache entries
+dump cache image_header         # Dump image header cache entries
+check cache image               # Validate image cache integrity
+dump anim                       # Dump active animations
+dump timer                      # Dump registered timers
+dump indev                      # Dump input devices
+dump group                      # Dump focus groups
+dump image_decoder              # Dump registered image decoders
+dump fs_drv                     # Dump filesystem drivers
+dump draw_task <layer_expr>     # Dump draw tasks for a layer
+dump dashboard                  # Generate interactive HTML dashboard
+dump dashboard -o out.html      # Save dashboard to file
+```
+
+### Info Commands
+
+```bash
+info style my_style             # Inspect a single lv_style_t
+info style --obj my_obj         # Inspect all styles of an lv_obj_t
+info draw_unit                  # Show draw unit information
+info obj_class obj->class_p     # Show object class hierarchy
+info subject &my_subject        # Show subject and its observers
+```
+
+### Dashboard
+
+`dump dashboard` generates a self-contained HTML file with an interactive 3D
+layer view, widget tree, style inspector, cache stats, animation list, and
+draw buffer previews (RGB565 / RGB888 / ARGB8888 / XRGB8888).
+
+## Structure
 
 ```mermaid
 graph TD
-    lvgl["lvgl<br/>(mem→python object)"]
-    gdb_cmds["gdb_cmds<br/>(gdb commands)"]
-    lvglgdb["lvglgdb"]
+    lvgl["lvgl<br/>(mem → python objects)"]
+    cmds["cmds<br/>(GDB commands)"]
+    formatter["formatter<br/>(display logic)"]
+    dashboard["cmds/dashboard<br/>(HTML renderer)"]
 
-    lvglgdb --> lvgl
-    lvglgdb --> gdb_cmds
-    gdb_cmds --> lvgl
+    cmds --> formatter
+    cmds --> lvgl
+    dashboard --> lvgl
+    formatter --> lvgl
 
     classDef pkg fill:white,stroke:gray
-    classDef core fill:white,stroke:gray
-    class lvglgdb,lvgl,gdb_cmds pkg
+    class lvgl,cmds,formatter,dashboard pkg
 ```
diff --git a/scripts/gdb/lvglgdb/cmds/__init__.py b/scripts/gdb/lvglgdb/cmds/__init__.py
index 3ecf4f674a..db60636fba 100644
--- a/scripts/gdb/lvglgdb/cmds/__init__.py
+++ b/scripts/gdb/lvglgdb/cmds/__init__.py
@@ -13,6 +13,7 @@ from .misc import (
     DumpImageDecoder,
     DumpFsDrv,
 )
+from .dashboard import DumpDashboard
 from .debugger import Debugger
 from .drivers import Lvglobal
 
@@ -50,3 +51,6 @@ InfoSubject()
 
 # Drivers
 Lvglobal()
+
+# Dashboard
+DumpDashboard()
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/__init__.py b/scripts/gdb/lvglgdb/cmds/dashboard/__init__.py
new file mode 100644
index 0000000000..e8961e4b37
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/__init__.py
@@ -0,0 +1,3 @@
+from .lv_dashboard import DumpDashboard
+
+__all__ = ["DumpDashboard"]
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/data_collector.py b/scripts/gdb/lvglgdb/cmds/dashboard/data_collector.py
new file mode 100644
index 0000000000..f95569227f
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/data_collector.py
@@ -0,0 +1,232 @@
+import base64
+import functools
+from datetime import datetime
+
+import gdb
+
+
+def safe_collect(subsystem: str):
+    """Decorator that wraps a collector function with try/except/warning."""
+    def decorator(fn):
+        @functools.wraps(fn)
+        def wrapper(*args, **kwargs):
+            try:
+                return fn(*args, **kwargs)
+            except Exception as e:
+                gdb.write(f"Warning: failed to collect {subsystem}: {e}\n")
+                return []
+        return wrapper
+    return decorator
+
+
+# Registry of simple subsystems: (dict_key, lvgl_accessor_method, label)
+# accessor=None means the subsystem uses lvgl.<dict_key>().snapshots() pattern
+SIMPLE_REGISTRY: list[tuple[str, str | None, str]] = [
+    ("animations",          "anims",            "animations"),
+    ("timers",              "timers",            "timers"),
+    ("indevs",              "indevs",            "indevs"),
+    ("groups",              "groups",            "groups"),
+    ("draw_units",          "draw_units",        "draw units"),
+    ("image_decoders",      "image_decoders",    "image decoders"),
+    ("fs_drivers",          "fs_drivers",        "fs drivers"),
+    ("image_header_cache",  None,                "image header cache"),
+]
+
+
+def _collect_simple(lvgl, dict_key: str, accessor: str | None, label: str) -> list:
+    """Collect a simple subsystem using the registry entry.
+
+    For entries with accessor != None: [x.snapshot().as_dict() for x in lvgl.<accessor>()]
+    For entries with accessor == None: [s.as_dict() for s in lvgl.<dict_key>().snapshots()]
+    """
+    try:
+        if accessor is not None:
+            return [x.snapshot().as_dict() for x in getattr(lvgl, accessor)()]
+        else:
+            return [s.as_dict() for s in getattr(lvgl, dict_key)().snapshots()]
+    except Exception as e:
+        gdb.write(f"Warning: failed to collect {label}: {e}\n")
+        return []
+
+
+def collect_all() -> dict:
+    """Collect all LVGL runtime data into a JSON-compatible dict."""
+    from lvglgdb.lvgl import curr_inst
+
+    lvgl = curr_inst()
+
+    data = {
+        "meta": {
+            "timestamp": datetime.now().astimezone().isoformat(),
+            "lvgl_version": _get_lvgl_version(),
+        },
+        # Specialized collectors (complex logic, not registry-driven)
+        "displays": _collect_displays(lvgl),
+        "object_trees": _collect_object_trees(lvgl),
+        "image_cache": _collect_image_cache(lvgl),
+        "draw_tasks": _collect_draw_tasks(lvgl),
+        "subjects": _collect_subjects(lvgl),
+    }
+    # Registry-driven simple collectors
+    for dict_key, accessor, label in SIMPLE_REGISTRY:
+        data[dict_key] = _collect_simple(lvgl, dict_key, accessor, label)
+    return data
+
+
+def _get_lvgl_version() -> str | None:
+    """Try to read LVGL version from macros."""
+    try:
+        major = int(gdb.parse_and_eval("LVGL_VERSION_MAJOR"))
+        minor = int(gdb.parse_and_eval("LVGL_VERSION_MINOR"))
+        patch = int(gdb.parse_and_eval("LVGL_VERSION_PATCH"))
+        return f"{major}.{minor}.{patch}"
+    except gdb.error:
+        return None
+
+
+def _buf_to_dict(draw_buf) -> dict | None:
+    """Convert an LVDrawBuf to a dict with base64 PNG image."""
+    if draw_buf is None:
+        return None
+    try:
+        cf_info = draw_buf.color_format_info()
+        header = draw_buf.super_value("header")
+        stride = int(header["stride"])
+        height = int(header["h"])
+        bpp = cf_info["bpp"]
+        width = (stride * 8) // bpp if bpp else 0
+
+        png_bytes = draw_buf.to_png_bytes()
+        image_b64 = base64.b64encode(png_bytes).decode("ascii") if png_bytes else None
+
+        return {
+            "addr": hex(int(draw_buf)),
+            "width": width,
+            "height": height,
+            "color_format": cf_info["name"],
+            "data_size": int(draw_buf.super_value("data_size")),
+            "image_base64": image_b64,
+        }
+    except Exception:
+        return None
+
+
+@safe_collect("displays")
+def _collect_displays(lvgl) -> list:
+    """Collect display info with framebuffer data."""
+    result = []
+    for disp in lvgl.displays():
+        d = disp.snapshot().as_dict()
+        d["buf_1"] = _buf_to_dict(disp.buf_1)
+        d["buf_2"] = _buf_to_dict(disp.buf_2)
+        result.append(d)
+    return result
+
+
+@safe_collect("object trees")
+def _collect_object_trees(lvgl) -> list:
+    """Collect object trees for all displays with layer name annotations."""
+    result = []
+    for disp in lvgl.displays():
+        # Read special layer pointers for name annotation
+        layer_addrs = {}
+        for name in ("bottom_layer", "act_scr", "top_layer", "sys_layer"):
+            try:
+                ptr = disp.super_value(name)
+                if int(ptr):
+                    layer_addrs[int(ptr)] = name
+            except Exception:
+                pass
+
+        tree = {
+            "display_addr": hex(int(disp)),
+            "screens": [],
+        }
+        for screen in disp.screens:
+            snap = screen.snapshot(
+                include_children=True, include_styles=True
+            ).as_dict()
+            # Annotate with layer name if this screen is a known layer
+            screen_addr = int(screen)
+            snap["layer_name"] = layer_addrs.get(screen_addr)
+            tree["screens"].append(snap)
+        result.append(tree)
+    return result
+
+
+@safe_collect("image cache")
+def _collect_image_cache(lvgl) -> list:
+    """Collect image cache entries with optional decoded buffer previews."""
+    cache = lvgl.image_cache()
+    entries = cache.snapshots()
+    result = []
+    for snap in entries:
+        d = snap.as_dict()
+        # Try to get preview of decoded buffer
+        d["preview_base64"] = None
+        decoded_addr = d.get("decoded_addr")
+        if decoded_addr and decoded_addr != "0x0":
+            try:
+                from lvglgdb.lvgl.draw.lv_draw_buf import LVDrawBuf
+                buf = LVDrawBuf(gdb.Value(int(decoded_addr, 16)))
+                png_bytes = buf.to_png_bytes()
+                if png_bytes:
+                    d["preview_base64"] = base64.b64encode(
+                        png_bytes
+                    ).decode("ascii")
+            except Exception:
+                pass
+        result.append(d)
+    return result
+
+
+@safe_collect("draw tasks")
+def _collect_draw_tasks(lvgl) -> list:
+    """Collect draw tasks from each display's layer chain."""
+    from lvglgdb.lvgl.draw.lv_draw_task import LVDrawTask
+    result = []
+    for disp in lvgl.displays():
+        layer = disp.super_value("layer_head")
+        while layer and int(layer):
+            task_head = layer["draw_task_head"]
+            if int(task_head):
+                for t in LVDrawTask(task_head):
+                    result.append(t.snapshot().as_dict())
+            layer = layer["next"]
+    return result
+
+
+@safe_collect("subjects")
+def _collect_subjects(lvgl) -> list:
+    """Collect subjects from object event lists across all displays."""
+    seen = set()
+    result = []
+    from lvglgdb.lvgl.core.lv_observer import LVSubject
+    for disp in lvgl.displays():
+        for screen in disp.screens:
+            _collect_subjects_from_obj(screen, seen, result)
+    return result
+
+
+def _collect_subjects_from_obj(obj, seen, result):
+    """Recursively collect subjects from an object's event list."""
+    from lvglgdb.lvgl.core.lv_observer import LVSubject
+
+    event_list = obj.event_list
+    if event_list:
+        for dsc in event_list:
+            try:
+                user_data = dsc.user_data
+                if not int(user_data):
+                    continue
+                # Check if this looks like a subject (has subs_ll field)
+                subject = LVSubject(user_data)
+                addr = int(subject)
+                if addr not in seen:
+                    seen.add(addr)
+                    result.append(subject.snapshot().as_dict())
+            except Exception:
+                continue
+
+    for child in obj.children:
+        _collect_subjects_from_obj(child, seen, result)
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/html_renderer.py b/scripts/gdb/lvglgdb/cmds/dashboard/html_renderer.py
new file mode 100644
index 0000000000..cf40437cb8
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/html_renderer.py
@@ -0,0 +1,47 @@
+import json
+from pathlib import Path
+
+_STATIC_DIR = Path(__file__).parent / "static"
+
+
+def render(data: dict, output_path: str) -> None:
+    """Generate self-contained HTML with JSON data embedded."""
+    json_str = _safe_json_encode(data)
+    html = _build_html(json_str)
+    with open(output_path, "w", encoding="utf-8") as f:
+        f.write(html)
+
+
+def render_viewer(output_path: str) -> None:
+    """Generate empty shell HTML viewer (no embedded data)."""
+    html = _build_html("")
+    with open(output_path, "w", encoding="utf-8") as f:
+        f.write(html)
+
+
+def _safe_json_encode(data: dict) -> str:
+    """Serialize dict to JSON with HTML-safe escaping."""
+    raw = json.dumps(data, ensure_ascii=False, indent=None)
+    # Escape HTML-special chars to prevent injection in <script> block
+    return raw.replace("&", "\\u0026").replace("<", "\\u003c").replace(">", "\\u003e")
+
+
+def _read_static(filename: str) -> str:
+    """Read a static asset file from the static/ directory."""
+    return (_STATIC_DIR / filename).read_text(encoding="utf-8")
+
+
+def _build_html(json_content: str) -> str:
+    """Build the complete HTML page with embedded or empty JSON."""
+    template = _read_static("template.html")
+    css = _read_static("style.css")
+    js = _read_static("dashboard.js")
+    # Deterministic single-replacement order: CSS → JS → JSON_DATA.
+    # Each placeholder is replaced exactly once (count=1) so that content
+    # injected in an earlier step cannot be mis-interpreted as a later placeholder.
+    return (
+        template
+        .replace("{{CSS}}", css, 1)
+        .replace("{{JS}}", js, 1)
+        .replace("{{JSON_DATA}}", json_content, 1)
+    )
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/lv_dashboard.py b/scripts/gdb/lvglgdb/cmds/dashboard/lv_dashboard.py
new file mode 100644
index 0000000000..f128696b27
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/lv_dashboard.py
@@ -0,0 +1,58 @@
+import argparse
+import json
+import time
+
+import gdb
+
+from lvglgdb.lvgl import curr_inst
+from .data_collector import collect_all
+from .html_renderer import render, render_viewer
+
+
+class DumpDashboard(gdb.Command):
+    """Generate an HTML dashboard of all LVGL runtime state."""
+
+    def __init__(self):
+        super().__init__(
+            "dump dashboard", gdb.COMMAND_USER, gdb.COMPLETE_EXPRESSION
+        )
+
+    def invoke(self, args, from_tty):
+        parser = argparse.ArgumentParser(prog="dump dashboard")
+        parser.add_argument("-o", "--output", help="output file path")
+        group = parser.add_mutually_exclusive_group()
+        group.add_argument(
+            "--json", action="store_true", help="output JSON instead of HTML",
+        )
+        group.add_argument(
+            "--viewer", action="store_true",
+            help="output empty viewer HTML (no data collection)",
+        )
+
+        try:
+            opts = parser.parse_args(gdb.string_to_argv(args))
+        except SystemExit:
+            return
+
+        if opts.viewer:
+            out = opts.output or "lvgl_viewer.html"
+            render_viewer(out)
+            gdb.write(f"Viewer written to {out}\n")
+            return
+
+        if not curr_inst().ensure_init():
+            return
+
+        t0 = time.time()
+        data = collect_all()
+        elapsed = time.time() - t0
+
+        if opts.json:
+            out = opts.output or "lvgl_dashboard.json"
+            with open(out, "w", encoding="utf-8") as f:
+                json.dump(data, f, ensure_ascii=False, indent=2)
+        else:
+            out = opts.output or "lvgl_dashboard.html"
+            render(data, out)
+
+        gdb.write(f"Dashboard written to {out} ({elapsed:.2f}s)\n")
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/static/dashboard.js b/scripts/gdb/lvglgdb/cmds/dashboard/static/dashboard.js
new file mode 100644
index 0000000000..cd06dce38b
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/static/dashboard.js
@@ -0,0 +1,1525 @@
+(function() {
+"use strict";
+
+/* --- Cross-reference helpers --- */
+const XREF_TARGET = {
+  parent_addr: "obj", group_addr: "group", display_addr: "disp",
+  read_timer_addr: "timer", focused_addr: "obj", var_addr: "obj",
+  user_data_addr: "obj", subject_addr: "subject", target_addr: "obj",
+  decoded_addr: "imgcache"
+};
+
+/* Section registry: key, icon, title, panelClass, color accent */
+const SECTIONS = [
+  { key: "displays",           icon: "🖥", title: "Displays & Objects",  cls: "panel-disp-trees" },
+  { key: "animations",         icon: "🎬", title: "Animations",         cls: "panel-animations" },
+  { key: "timers",             icon: "⏱",  title: "Timers",             cls: "panel-timers" },
+  { key: "image_cache",        icon: "🖼", title: "Image Cache",        cls: "panel-img-cache" },
+  { key: "image_header_cache", icon: "📋", title: "Header Cache",       cls: "panel-hdr-cache" },
+  { key: "indevs",             icon: "🕹", title: "Input Devices",      cls: "panel-indevs" },
+  { key: "groups",             icon: "👥", title: "Groups",             cls: "panel-groups" },
+  { key: "draw_units",         icon: "🎨", title: "Draw Units",         cls: "panel-draw-units" },
+  { key: "draw_tasks",         icon: "📝", title: "Draw Tasks",         cls: "panel-draw-tasks" },
+  { key: "subjects",           icon: "📡", title: "Subjects",           cls: "panel-subjects" },
+  { key: "image_decoders",     icon: "🔓", title: "Decoders",           cls: "panel-decoders" },
+  { key: "fs_drivers",         icon: "💾", title: "FS Drivers",         cls: "panel-fs-drivers" },
+];
+
+/* Stat card definitions: label, dataKey, icon, colorClass, sectionId */
+const STAT_DEFS = [
+  { label: "Displays",   key: "displays",     icon: "🖥", color: "blue",  section: "disp-trees" },
+  { label: "Objects",    key: "_objects",      icon: "🌳", color: "green", section: "disp-trees" },
+  { label: "Animations", key: "animations",    icon: "🎬", color: "mauve", section: "animations" },
+  { label: "Timers",     key: "timers",        icon: "⏱",  color: "peach", section: "timers" },
+  { label: "Img Cache",  key: "image_cache",   icon: "🖼", color: "teal",  section: "img-cache" },
+  { label: "Input Devs", key: "indevs",        icon: "🕹", color: "pink",  section: "indevs" },
+];
+
+/* Named constants replacing magic numbers */
+const CONSTANTS = {
+  INFINITE_REPEAT: 0xFFFFFFFF,     /* animation infinite repeat sentinel */
+  VIEWPORT_SIZE: 520,               /* 3D scene viewport fitting size */
+  PERSPECTIVE_DISTANCE: 1200,       /* CSS perspective distance (px) */
+  DEFAULT_ROT_X: -30,               /* default X rotation (degrees) */
+  DEFAULT_ROT_Y: 30,                /* default Y rotation (degrees) */
+  MIN_ZOOM: 0.2,                    /* minimum zoom level */
+  MAX_ZOOM: 10,                     /* maximum zoom level */
+  ZOOM_SENSITIVITY: 0.01,           /* wheel zoom factor */
+  ROTATION_SENSITIVITY: 0.4,        /* mouse drag rotation factor */
+  SCREEN_GAP: 2,                    /* gap between screen layers in depth */
+  ANIM_DURATION: 500,               /* 3D toggle transition duration (ms) */
+};
+
+/* Unified dashboard state object */
+const DashState = {
+  hl: {
+    addr: null,          /* currently highlighted address */
+    registry: {},        /* addr -> [element, ...] */
+    overlays: {},        /* display_addr -> { canvas, w, h, objs } */
+  },
+  detail: {
+    objDataMap: {},      /* addr -> obj data dict */
+    selectedAddr: null,  /* currently selected object address */
+    panel: null,         /* detail panel DOM element */
+  },
+};
+
+function el(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text !== undefined) e.textContent = text;
+  return e;
+}
+
+function xref(addr, prefix) {
+  if (!addr || addr === "None" || addr === "0x0") return document.createTextNode(addr || "-");
+  const a = el("a", "xref", addr);
+  a.href = "#" + prefix + "-" + addr;
+  return a;
+}
+
+function xrefCell(td, key, val) {
+  const prefix = XREF_TARGET[key];
+  if (prefix && val && val !== "None" && val !== "0x0") {
+    td.appendChild(xref(val, prefix));
+  } else {
+    td.textContent = val != null ? String(val) : "-";
+  }
+}
+
+function countObjects(trees) {
+  let n = 0;
+  function walk(obj) { n++; if (obj.children) obj.children.forEach(walk); }
+  trees.forEach(t => (t.screens || []).forEach(walk));
+  return n;
+}
+
+/* --- Linked highlight system --- */
+function registerHL(addr, element) {
+  if (!addr) return;
+  if (!DashState.hl.registry[addr]) DashState.hl.registry[addr] = [];
+  DashState.hl.registry[addr].push(element);
+}
+
+function highlightObj(addr) {
+  if (DashState.hl.addr === addr) return;
+  clearHighlight();
+  DashState.hl.addr = addr;
+  if (!addr) return;
+  const els = DashState.hl.registry[addr];
+  if (els) els.forEach(e => e.classList.add("hl-active"));
+  /* Draw overlay rectangles on display buffers */
+  Object.values(DashState.hl.overlays).forEach(ov => {
+    const ctx = ov.canvas.getContext("2d");
+    ctx.clearRect(0, 0, ov.canvas.width, ov.canvas.height);
+    const obj = ov.objs.find(o => o.addr === addr);
+    if (obj) {
+      const sx = ov.canvas.width / ov.w;
+      const sy = ov.canvas.height / ov.h;
+      const x = obj.x1 * sx, y = obj.y1 * sy;
+      const w = (obj.x2 - obj.x1) * sx, h = (obj.y2 - obj.y1) * sy;
+      ctx.strokeStyle = "rgba(137, 180, 250, 0.9)";
+      ctx.lineWidth = 2;
+      ctx.setLineDash([4, 2]);
+      ctx.strokeRect(x, y, w, h);
+      ctx.fillStyle = "rgba(137, 180, 250, 0.15)";
+      ctx.fillRect(x, y, w, h);
+    }
+  });
+}
+
+function clearHighlight() {
+  if (!DashState.hl.addr) return;
+  const els = DashState.hl.registry[DashState.hl.addr];
+  if (els) els.forEach(e => e.classList.remove("hl-active"));
+  Object.values(DashState.hl.overlays).forEach(ov => {
+    const ctx = ov.canvas.getContext("2d");
+    ctx.clearRect(0, 0, ov.canvas.width, ov.canvas.height);
+  });
+  DashState.hl.addr = null;
+}
+
+/* --- Generic table builder --- */
+function makeTable(headers, rows, anchorPrefix) {
+  if (!rows || rows.length === 0) return el("p", "empty", "No entries.");
+  const wrap = el("div", "table-wrap");
+  const tbl = document.createElement("table");
+  const thead = tbl.createTHead();
+  const hr = thead.insertRow();
+  headers.forEach(h => {
+    const th = document.createElement("th");
+    th.textContent = h;
+    hr.appendChild(th);
+  });
+  const tbody = tbl.createTBody();
+  rows.forEach(row => {
+    const tr = tbody.insertRow();
+    if (anchorPrefix && row.addr) tr.id = anchorPrefix + "-" + row.addr;
+    headers.forEach(h => {
+      const key = h.toLowerCase().replace(/ /g, "_");
+      const td = tr.insertCell();
+      const val = row[key];
+      if (key === "area" && typeof val === "object") {
+        td.textContent = "(" + val.x1 + "," + val.y1 + "," + val.x2 + "," + val.y2 + ")";
+      } else if (key === "member_addrs" && Array.isArray(val)) {
+        val.forEach((a, i) => {
+          if (i > 0) td.appendChild(document.createTextNode(", "));
+          td.appendChild(xref(a, "obj"));
+        });
+      } else if (key === "observer_addrs" && Array.isArray(val)) {
+        val.forEach((a, i) => {
+          if (i > 0) td.appendChild(document.createTextNode(", "));
+          td.appendChild(xref(a, "observer"));
+        });
+      } else {
+        xrefCell(td, key, val != null ? String(val) : "-");
+      }
+    });
+  });
+  wrap.appendChild(tbl);
+  return wrap;
+}
+
+/* --- Object tree rendering (pure hierarchy, no styles) --- */
+function renderObjTree(obj, depth) {
+  if (depth === undefined) depth = 0;
+  const det = document.createElement("details");
+  det.className = "obj-node";
+  if (obj.addr) det.id = "obj-" + obj.addr;
+  const sum = document.createElement("summary");
+  sum.style.setProperty("--depth-color", DEPTH_COLORS[depth % DEPTH_COLORS.length]);
+  sum.textContent = obj.class_name || "obj";
+  det.appendChild(sum);
+
+  /* Store full data for detail panel */
+  if (obj.addr) DashState.detail.objDataMap[obj.addr] = obj;
+
+  /* Register for linked highlight */
+  if (obj.addr) {
+    registerHL(obj.addr, det);
+    sum.addEventListener("mouseenter", () => highlightObj(obj.addr));
+    sum.addEventListener("mouseleave", () => clearHighlight());
+    sum.addEventListener("click", e => {
+      e.stopPropagation();
+      selectObj(obj.addr);
+    });
+  }
+
+  if (obj.children) obj.children.forEach(ch => det.appendChild(renderObjTree(ch, depth + 1)));
+  return det;
+}
+
+/* --- Select object and show detail panel --- */
+function selectObj(addr) {
+  /* Deselect previous */
+  if (DashState.detail.selectedAddr) {
+    const prev = document.getElementById("obj-" + DashState.detail.selectedAddr);
+    if (prev) prev.classList.remove("obj-selected");
+  }
+  DashState.detail.selectedAddr = addr;
+  const node = document.getElementById("obj-" + addr);
+  if (node) node.classList.add("obj-selected");
+  if (DashState.detail.panel) renderObjDetail(addr);
+}
+
+function renderObjDetail(addr) {
+  DashState.detail.panel.innerHTML = "";
+  const obj = DashState.detail.objDataMap[addr];
+  if (!obj) {
+    DashState.detail.panel.appendChild(el("p", "empty", "Select an object to inspect."));
+    return;
+  }
+
+  /* Header */
+  const hdr = el("div", "detail-header");
+  hdr.appendChild(el("span", "detail-class", obj.class_name || "obj"));
+  hdr.appendChild(el("span", "mono-addr", obj.addr));
+  DashState.detail.panel.appendChild(hdr);
+
+  /* Coordinates */
+  const c = obj.coords || {};
+  const coordSec = el("div", "detail-section");
+  coordSec.appendChild(el("div", "detail-section-title", "Coordinates"));
+  const coordGrid = el("div", "detail-coord-grid");
+  ["x1","y1","x2","y2"].forEach(k => {
+    coordGrid.appendChild(el("span", "detail-coord-label", k));
+    coordGrid.appendChild(el("span", "detail-coord-val", String(c[k] || 0)));
+  });
+  const w = (c.x2||0) - (c.x1||0), h = (c.y2||0) - (c.y1||0);
+  coordGrid.appendChild(el("span", "detail-coord-label", "w"));
+  coordGrid.appendChild(el("span", "detail-coord-val", String(w)));
+  coordGrid.appendChild(el("span", "detail-coord-label", "h"));
+  coordGrid.appendChild(el("span", "detail-coord-val", String(h)));
+  coordSec.appendChild(coordGrid);
+  DashState.detail.panel.appendChild(coordSec);
+
+  /* References */
+  const refSec = el("div", "detail-section");
+  refSec.appendChild(el("div", "detail-section-title", "References"));
+  if (obj.parent_addr) {
+    const row = el("div", "kv-row");
+    row.appendChild(el("span", "kv-label", "parent"));
+    row.appendChild(xref(obj.parent_addr, "obj"));
+    refSec.appendChild(row);
+  }
+  if (obj.group_addr) {
+    const row = el("div", "kv-row");
+    row.appendChild(el("span", "kv-label", "group"));
+    row.appendChild(xref(obj.group_addr, "group"));
+    refSec.appendChild(row);
+  }
+  refSec.appendChild(kvPair("children", String(obj.child_count || 0)));
+  refSec.appendChild(kvPair("styles", String(obj.style_count || 0)));
+  DashState.detail.panel.appendChild(refSec);
+
+  /* Styles */
+  if (obj.styles && obj.styles.length > 0) {
+    const styleSec = el("div", "detail-section");
+    styleSec.appendChild(el("div", "detail-section-title", "Styles (" + obj.styles.length + ")"));
+    obj.styles.forEach(s => {
+      const card = el("div", "detail-style-card");
+      card.appendChild(el("div", "detail-style-hdr",
+        "[" + s.index + "] " + s.selector_str + "  " + s.flags_str));
+      if (s.properties && s.properties.length > 0) {
+        const tbl = document.createElement("table");
+        tbl.className = "detail-style-table";
+        const thead = tbl.createTHead().insertRow();
+        ["prop", "value"].forEach(h => {
+          const th = document.createElement("th"); th.textContent = h; thead.appendChild(th);
+        });
+        const tbody = tbl.createTBody();
+        s.properties.forEach(p => {
+          const r = tbody.insertRow();
+          r.insertCell().textContent = p.prop_name;
+          r.insertCell().textContent = p.value_str;
+        });
+        card.appendChild(tbl);
+      }
+      styleSec.appendChild(card);
+    });
+    DashState.detail.panel.appendChild(styleSec);
+  }
+}
+
+/* --- Depth color palette shared by 3D scene and tree view --- */
+const DEPTH_COLORS = [
+  "var(--blue)", "var(--green)", "var(--mauve)", "var(--peach)",
+  "var(--teal)", "var(--pink)", "var(--yellow)", "var(--red)",
+  "var(--sapphire)", "var(--lavender)", "var(--flamingo)",
+];
+
+/* --- Panel factory --- */function makePanel(cls, icon, title, count) {
+  const panel = el("div", "panel " + cls);
+  panel.id = "sec-" + cls.replace("panel-", "");
+  const hdr = el("div", "panel-header");
+  hdr.appendChild(el("span", "panel-icon", icon));
+  hdr.appendChild(el("span", "panel-title", title));
+  if (count !== undefined) {
+    hdr.appendChild(el("span", "panel-badge", String(count)));
+  }
+  panel.appendChild(hdr);
+  const body = el("div", "panel-body");
+  panel.appendChild(body);
+  return { panel, body };
+}
+
+function emptyMsg() { return el("p", "empty", "No entries."); }
+
+/* --- Stat card factory --- */
+function makeStatPanel(icon, label, value, colorClass, sectionId) {
+  const panel = el("div", "panel panel-stat");
+  if (sectionId) {
+    panel.style.cursor = "pointer";
+    panel.addEventListener("click", () => {
+      const target = document.getElementById("sec-" + sectionId);
+      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  }
+  const body = el("div", "stat-mini");
+  const iconWrap = el("div", "stat-icon-wrap " + colorClass, icon);
+  body.appendChild(iconWrap);
+  const info = el("div", "stat-info");
+  info.appendChild(el("div", "stat-value", String(value)));
+  info.appendChild(el("div", "stat-label", label));
+  body.appendChild(info);
+  panel.appendChild(body);
+  return panel;
+}
+
+/* --- Section builders --- */
+function buildDisplayAndTrees(data) {
+  const displays = data.displays || [];
+  const trees = data.object_trees || [];
+  const objCount = countObjects(trees);
+  const { panel, body } = makePanel("panel-disp-trees", "🖥", "Displays & Objects",
+    displays.length + " disp / " + objCount + " obj");
+
+  if (displays.length === 0 && trees.length === 0) {
+    body.appendChild(emptyMsg());
+    return panel;
+  }
+
+  /* Build per-display data */
+  const dispEntries = displays.map((d, i) => {
+    const tree = trees.find(t => t.display_addr === d.addr) || { display_addr: d.addr, screens: [] };
+    const objs = [];
+    function walk(obj) {
+      const c = obj.coords || {};
+      objs.push({ addr: obj.addr, x1: c.x1||0, y1: c.y1||0, x2: c.x2||0, y2: c.y2||0 });
+      if (obj.children) obj.children.forEach(walk);
+    }
+    (tree.screens || []).forEach(walk);
+    return { disp: d, tree, dispObjs: { [d.addr]: objs }, idx: i };
+  });
+
+  /* Display selector tab bar */
+  const tabBar = el("div", "disp-tab-bar");
+  const contentArea = el("div", "disp-content-area");
+  const tabBtns = [];
+
+  function showDisplay(idx) {
+    /* Update tab active state */
+    tabBtns.forEach((b, j) => b.classList.toggle("active", j === idx));
+    /* Clear highlight state from previous display */
+    clearHighlight();
+    DashState.hl.registry = {};
+    DashState.hl.overlays = {};
+    /* Rebuild content for selected display */
+    contentArea.innerHTML = "";
+    DashState.detail.objDataMap = {};
+    DashState.detail.panel = null;
+
+    const entry = dispEntries[idx];
+    const d = entry.disp;
+    const tree = entry.tree;
+
+    /* Display info chips */
+    const infoBar = el("div", "disp-info-bar");
+    const chip = el("div", "disp-chip");
+    chip.appendChild(el("span", "disp-addr", d.addr || ""));
+    chip.appendChild(el("span", "disp-res", d.hor_res + " × " + d.ver_res));
+    chip.appendChild(el("span", "disp-screens", d.screen_count + " screens"));
+    ["buf_1", "buf_2"].forEach(bk => {
+      const b = d[bk]; if (!b) return;
+      chip.appendChild(badge(bk.replace("_", " ") + " " + b.width + "×" + b.height + " " + b.color_format, "blue"));
+    });
+    infoBar.appendChild(chip);
+    contentArea.appendChild(infoBar);
+
+    /* Three-column split: tree | 3D | detail */
+    const split = el("div", "obj-split");
+
+    const treeView = el("div", "obj-tree-view");
+    const treeHeader = el("div", "obj-tree-header", "🌳 " + entry.dispObjs[d.addr].length + " objects");
+    treeView.appendChild(treeHeader);
+    tree.screens.forEach(s => treeView.appendChild(renderObjTree(s)));
+    split.appendChild(treeView);
+
+    const view3d = el("div", "obj-3d-view");
+    build3DScene(view3d, [tree], [d], entry.dispObjs);
+    split.appendChild(view3d);
+
+    const detailView = el("div", "obj-detail-view");
+    detailView.appendChild(el("p", "empty", "Select an object to inspect."));
+    DashState.detail.panel = detailView;
+    split.appendChild(detailView);
+
+    contentArea.appendChild(split);
+  }
+
+  dispEntries.forEach((entry, i) => {
+    const d = entry.disp;
+    const btn = el("button", "disp-tab-btn");
+    /* Buffer preview thumbnail */
+    const bufData = (d.buf_1 && d.buf_1.image_base64) || (d.buf_2 && d.buf_2.image_base64);
+    if (bufData) {
+      const thumb = document.createElement("img");
+      thumb.className = "disp-tab-thumb";
+      thumb.src = "data:image/png;base64," + bufData;
+      thumb.draggable = false;
+      btn.appendChild(thumb);
+    }
+    btn.appendChild(document.createTextNode(d.hor_res + "×" + d.ver_res));
+    btn.addEventListener("click", () => showDisplay(i));
+    tabBtns.push(btn);
+    tabBar.appendChild(btn);
+  });
+
+  body.appendChild(tabBar);
+  body.appendChild(contentArea);
+
+  /* Show first display by default */
+  if (dispEntries.length > 0) showDisplay(0);
+
+  return panel;
+}
+
+/* --- 3D scene sub-functions --- */
+
+/**
+ * Flatten object trees into a layer array with global depth tracking.
+ * @param {Array} trees - object_trees array (each with .screens)
+ * @returns {{ layers: Array, screenNames: string[], screenMaxLocal: Object }}
+ */
+function flattenObjectLayers(trees) {
+  const layers = [];
+  const screenNames = [];
+  let globalDepthOffset = 0;
+  let screenIdx = 0;
+  trees.forEach(t => (t.screens || []).forEach(s => {
+    const idx = screenIdx++;
+    const layerName = s.layer_name || s.class_name || "screen_" + idx;
+    screenNames.push(layerName);
+    function flatten(obj, localDepth) {
+      const c = obj.coords || {};
+      layers.push({
+        addr: obj.addr, class_name: obj.class_name || "obj",
+        x1: c.x1 || 0, y1: c.y1 || 0, x2: c.x2 || 0, y2: c.y2 || 0,
+        depth: globalDepthOffset + localDepth,
+        localDepth: localDepth,
+        child_count: obj.child_count || 0,
+        style_count: obj.style_count || 0,
+        screenIdx: idx,
+      });
+      if (obj.children) obj.children.forEach(ch => flatten(ch, localDepth + 1));
+    }
+    flatten(s, 0);
+    /* Find max local depth in this screen subtree */
+    let maxLocal = 0;
+    function findMax(obj, d) { maxLocal = Math.max(maxLocal, d); if (obj.children) obj.children.forEach(ch => findMax(ch, d + 1)); }
+    findMax(s, 0);
+    globalDepthOffset += maxLocal + CONSTANTS.SCREEN_GAP;
+  }));
+
+  /* Compute max local depth per screen for relayout */
+  const screenMaxLocal = {};
+  layers.forEach(l => {
+    if (!(l.screenIdx in screenMaxLocal) || l.localDepth > screenMaxLocal[l.screenIdx]) {
+      screenMaxLocal[l.screenIdx] = l.localDepth;
+    }
+  });
+
+  return { layers, screenNames, screenMaxLocal };
+}
+
+/**
+ * Build the scene control bar (toggle buttons, spread slider, reset button).
+ * @param {Object} options - { maxDepth, defaultSpread (optional), bufBase64 }
+ * @returns {{ controls: HTMLElement, toggle3d, toggleBorders, toggleBuf, toggleOrtho, spreadSlider, resetBtn, defaultSpread: number }}
+ */
+function buildSceneControls(options) {
+  const { maxDepth, bufBase64 } = options;
+  const controls = el("div", "scene-controls");
+
+  const make3dToggle = (label, defaultOn) => {
+    const btn = el("button", "scene-toggle-btn" + (defaultOn ? " active" : ""), label);
+    btn.dataset.on = defaultOn ? "1" : "0";
+    btn.addEventListener("click", () => {
+      const on = btn.dataset.on === "1";
+      btn.dataset.on = on ? "0" : "1";
+      btn.classList.toggle("active", !on);
+    });
+    return btn;
+  };
+
+  const toggle3d = make3dToggle("3D", true);
+  const toggleBorders = make3dToggle("Borders", true);
+  const toggleBuf = make3dToggle("Buffer", !!bufBase64);
+  const toggleOrtho = make3dToggle("Ortho", false);
+  controls.appendChild(toggle3d);
+  controls.appendChild(toggleBorders);
+  if (bufBase64) controls.appendChild(toggleBuf);
+  controls.appendChild(toggleOrtho);
+
+  /* Dynamic spread range based on total depth levels */
+  const defaultSpread = maxDepth > 0 ? Math.round(300 / maxDepth) : 30;
+  const maxSpread = Math.max(200, defaultSpread * 5);
+
+  const spreadLabel = el("label", "scene-label", "Z Spread");
+  const spreadSlider = document.createElement("input");
+  spreadSlider.type = "range"; spreadSlider.min = "0"; spreadSlider.max = String(maxSpread);
+  spreadSlider.value = String(defaultSpread); spreadSlider.className = "scene-slider";
+  spreadSlider.setAttribute("aria-label", "Z axis spread");
+  controls.appendChild(spreadLabel);
+  controls.appendChild(spreadSlider);
+  const resetBtn = el("button", "scene-reset-btn", "Reset");
+  controls.appendChild(resetBtn);
+
+  return { controls, toggle3d, toggleBorders, toggleBuf, toggleOrtho, spreadSlider, resetBtn, defaultSpread };
+}
+
+/**
+ * Build the buffer image layer with highlight overlay canvas.
+ * @param {Array} displays - display data array
+ * @param {number} scale - scene scale factor
+ * @param {number} sceneW - unscaled scene width
+ * @param {number} sceneH - unscaled scene height
+ * @param {Object} dispObjs - per-display object coordinate maps
+ * @returns {{ bufLayer: HTMLElement, bufCanvas: HTMLCanvasElement } | null}
+ */
+function buildBufferLayer(displays, scale, sceneW, sceneH, dispObjs) {
+  /* Find first display buffer image */
+  let bufBase64 = null;
+  (displays || []).forEach(d => {
+    if (bufBase64) return;
+    ["buf_1", "buf_2"].forEach(bk => {
+      if (bufBase64) return;
+      const b = d[bk];
+      if (b && b.image_base64) bufBase64 = b.image_base64;
+    });
+  });
+  if (!bufBase64) return null;
+
+  const sceneScaledW = sceneW * scale;
+  const sceneScaledH = sceneH * scale;
+
+  const bufLayer = el("div", "scene-buf-layer");
+  bufLayer.style.width = sceneScaledW + "px";
+  bufLayer.style.height = sceneScaledH + "px";
+  bufLayer.style.left = "0px";
+  bufLayer.style.top = "0px";
+  const img = document.createElement("img");
+  img.src = "data:image/png;base64," + bufBase64;
+  img.style.width = "100%"; img.style.height = "100%";
+  img.style.objectFit = "fill";
+  img.draggable = false;
+  bufLayer.appendChild(img);
+
+  /* Overlay canvas for highlight rectangles on buffer */
+  const bufCanvas = document.createElement("canvas");
+  bufCanvas.className = "scene-buf-overlay";
+  bufCanvas.width = sceneScaledW; bufCanvas.height = sceneScaledH;
+  bufLayer.appendChild(bufCanvas);
+
+  /* Register overlay for linked highlight system */
+  if (dispObjs) {
+    Object.keys(dispObjs).forEach(dAddr => {
+      DashState.hl.overlays[dAddr + "-3d"] = {
+        canvas: bufCanvas, w: sceneW / scale * scale, h: sceneH / scale * scale,
+        objs: dispObjs[dAddr],
+      };
+    });
+    /* Normalize: overlay uses scene pixel coords */
+    Object.keys(dispObjs).forEach(dAddr => {
+      const disp = (displays || []).find(dd => dd.addr === dAddr);
+      if (disp) {
+        DashState.hl.overlays[dAddr + "-3d"] = {
+          canvas: bufCanvas,
+          w: disp.hor_res, h: disp.ver_res,
+          objs: dispObjs[dAddr],
+        };
+        /* Scale canvas to match scene viewport */
+        bufCanvas.width = sceneScaledW;
+        bufCanvas.height = sceneScaledH;
+      }
+    });
+  }
+
+  return { bufLayer, bufCanvas, bufBase64 };
+}
+
+/**
+ * Register mouse/wheel event handlers for 3D scene interaction.
+ * @param {HTMLElement} viewport - the scene viewport element
+ * @param {HTMLElement} scene - the inner scene element
+ * @param {Object} callbacks - { getState, applyRotation }
+ */
+function setupSceneInteraction(viewport, scene, callbacks) {
+  const { getState, applyRotation } = callbacks;
+
+  viewport.addEventListener("mousedown", e => {
+    const st = getState();
+    if (e.button === 1 || (e.button === 0 && e.shiftKey)) {
+      /* Middle-click or shift+left-click: pan */
+      e.preventDefault();
+      st.dragging = "pan"; st.lastX = e.clientX; st.lastY = e.clientY;
+      viewport.style.cursor = "move";
+    } else if (e.button === 0 && st.is3d) {
+      /* Left-click: rotate (3D only) */
+      st.dragging = "rotate"; st.lastX = e.clientX; st.lastY = e.clientY;
+      viewport.style.cursor = "grabbing";
+    }
+  });
+
+  window.addEventListener("mousemove", e => {
+    const st = getState();
+    if (!st.dragging) return;
+    const dx = e.clientX - st.lastX, dy = e.clientY - st.lastY;
+    st.lastX = e.clientX; st.lastY = e.clientY;
+    if (st.dragging === "rotate") {
+      st.rotY += dx * CONSTANTS.ROTATION_SENSITIVITY;
+      st.rotX -= dy * CONSTANTS.ROTATION_SENSITIVITY;
+      st.rotX = Math.max(-90, Math.min(90, st.rotX));
+    } else if (st.dragging === "pan") {
+      st.panX += dx / st.zoom;
+      st.panY += dy / st.zoom;
+    }
+    applyRotation();
+  });
+
+  window.addEventListener("mouseup", () => {
+    const st = getState();
+    st.dragging = false; viewport.style.cursor = "grab";
+  });
+
+  /* Wheel: pinch-to-zoom (ctrl+wheel / trackpad pinch) and pan (two-finger scroll) */
+  viewport.addEventListener("wheel", e => {
+    e.preventDefault();
+    const st = getState();
+    if (e.ctrlKey) {
+      /* Pinch zoom (trackpad) or ctrl+scroll (mouse) */
+      const factor = 1 - e.deltaY * CONSTANTS.ZOOM_SENSITIVITY;
+      st.zoom = Math.max(CONSTANTS.MIN_ZOOM, Math.min(CONSTANTS.MAX_ZOOM, st.zoom * factor));
+    } else {
+      /* Two-finger pan (trackpad) or scroll wheel pan */
+      st.panX -= e.deltaX / st.zoom;
+      st.panY -= e.deltaY / st.zoom;
+    }
+    applyRotation();
+  }, { passive: false });
+}
+
+/* --- 3D Exploded Object Tree View (coordinator) --- */
+function build3DScene(container, trees, displays, dispObjs) {
+  /* 1. Flatten object trees into layers */
+  const { layers, screenNames, screenMaxLocal } = flattenObjectLayers(trees);
+
+  if (layers.length === 0) { container.appendChild(emptyMsg()); return; }
+
+  /* Scene bounds fixed to display resolution */
+  let minX = 0, minY = 0, maxX = 0, maxY = 0, maxDepth = 0;
+  (displays || []).forEach(d => {
+    maxX = Math.max(maxX, d.hor_res || 0);
+    maxY = Math.max(maxY, d.ver_res || 0);
+  });
+  layers.forEach(l => { maxDepth = Math.max(maxDepth, l.depth); });
+  const sceneW = maxX - minX || 1;
+  const sceneH = maxY - minY || 1;
+
+  /* Scale factor: fit scene into viewport */
+  const scale = CONSTANTS.VIEWPORT_SIZE / Math.max(sceneW, sceneH);
+  const sceneScaledW = sceneW * scale;
+  const sceneScaledH = sceneH * scale;
+
+  /* 2. Build buffer layer */
+  const bufResult = buildBufferLayer(displays, scale, sceneW, sceneH, dispObjs);
+  const bufBase64 = bufResult ? bufResult.bufBase64 : null;
+  const bufLayer = bufResult ? bufResult.bufLayer : null;
+
+  /* 3. Build controls */
+  const ctrl = buildSceneControls({ maxDepth, bufBase64 });
+  container.appendChild(ctrl.controls);
+  const { toggle3d, toggleBorders, toggleBuf, toggleOrtho, spreadSlider, resetBtn, defaultSpread } = ctrl;
+
+  /* Layer filter controls */
+  const layerBar = el("div", "scene-layer-bar");
+  const layerBtns = [];
+  const layerVisible = [];
+  screenNames.forEach((name, i) => {
+    /* Default: only act_scr visible */
+    const defaultOn = name === "act_scr" || screenNames.length === 1;
+    layerVisible.push(defaultOn);
+    const btn = el("button", "scene-layer-btn" + (defaultOn ? " active" : ""), name);
+    btn.style.borderBottomColor = DEPTH_COLORS[i % DEPTH_COLORS.length];
+    btn.dataset.idx = String(i);
+
+    /* Single click: toggle visibility */
+    btn.addEventListener("click", () => {
+      layerVisible[i] = !layerVisible[i];
+      btn.classList.toggle("active", layerVisible[i]);
+      applyLayerVisibility();
+    });
+
+    /* Double click: solo mode (show only this layer) */
+    btn.addEventListener("dblclick", e => {
+      e.preventDefault();
+      const allVisible = layerVisible.every((v, j) => j === i ? v : !v);
+      if (allVisible) {
+        /* Already solo — restore all */
+        layerVisible.fill(true);
+      } else {
+        layerVisible.fill(false);
+        layerVisible[i] = true;
+      }
+      layerBtns.forEach((b, j) => b.classList.toggle("active", layerVisible[j]));
+      applyLayerVisibility();
+    });
+
+    layerBtns.push(btn);
+    layerBar.appendChild(btn);
+  });
+  if (screenNames.length > 0) container.appendChild(layerBar);
+
+  /* Tooltip */
+  const tooltip = el("div", "scene-tooltip");
+  container.appendChild(tooltip);
+
+  /* Viewport and scene */
+  const viewport = el("div", "scene-viewport");
+  const scene = el("div", "scene-3d");
+  viewport.appendChild(scene);
+  container.appendChild(viewport);
+
+  scene.style.width = sceneScaledW + "px";
+  scene.style.height = sceneScaledH + "px";
+
+  /* Append buffer layer to scene */
+  if (bufLayer) scene.appendChild(bufLayer);
+
+  /* Build border layer divs */
+  const layerEls = [];
+  layers.forEach(l => {
+    const div = el("div", "scene-layer");
+    const w = (l.x2 - l.x1) * scale;
+    const h = (l.y2 - l.y1) * scale;
+    const x = (l.x1 - minX) * scale;
+    const y = (l.y1 - minY) * scale;
+    div.style.width = Math.max(2, w) + "px";
+    div.style.height = Math.max(2, h) + "px";
+    div.style.left = x + "px";
+    div.style.top = y + "px";
+    div.style.borderColor = DEPTH_COLORS[l.depth % DEPTH_COLORS.length];
+    div.dataset.depth = l.depth;
+    div.dataset.addr = l.addr || "";
+    div.dataset.screenIdx = l.screenIdx;
+    div.dataset.info = l.class_name + "@" + (l.addr || "?") +
+      " [" + l.x1 + "," + l.y1 + "," + l.x2 + "," + l.y2 + "]" +
+      " children=" + l.child_count + " styles=" + l.style_count;
+    if (l.addr) registerHL(l.addr, div);
+    layerEls.push({ el: div, depth: l.depth, localDepth: l.localDepth, screenIdx: l.screenIdx });
+    scene.appendChild(div);
+  });
+
+  /* Interaction state */
+  const interactionState = {
+    rotX: CONSTANTS.DEFAULT_ROT_X, rotY: CONSTANTS.DEFAULT_ROT_Y,
+    dragging: false, lastX: 0, lastY: 0,
+    is3d: true, zoom: 1, panX: 0, panY: 0,
+  };
+
+  /* Apply layer visibility filter and recompute Z positions.
+   * @param {number} [spreadOverride] - if provided, use this spread instead of slider value
+   */
+  function applyLayerVisibility(spreadOverride) {
+    const bordersOn = toggleBorders.dataset.on === "1";
+
+    /* Recompute global depth offsets for visible screens only */
+    const visibleScreens = [];
+    for (let i = 0; i < screenNames.length; i++) {
+      if (layerVisible[i]) visibleScreens.push(i);
+    }
+    const screenOffset = {};
+    let offset = 0;
+    visibleScreens.forEach(idx => {
+      screenOffset[idx] = offset;
+      offset += (screenMaxLocal[idx] || 0) + CONSTANTS.SCREEN_GAP;
+    });
+
+    const spread = spreadOverride !== undefined ? spreadOverride
+      : (interactionState.is3d ? Number(spreadSlider.value) : 0);
+    layerEls.forEach(le => {
+      if (!bordersOn || !layerVisible[le.screenIdx]) {
+        le.el.style.display = "none";
+        return;
+      }
+      le.el.style.display = "";
+      const newDepth = screenOffset[le.screenIdx] + le.localDepth;
+      le.el.style.transform = "translateZ(" + (newDepth * spread) + "px)";
+    });
+    if (bufLayer) bufLayer.style.transform = "translateZ(" + (-spread * 1.5) + "px)";
+  }
+
+  /**
+   * Apply scene rotation transform.
+   * @param {Object} [rotOverride] - { rotX, rotY } to override interactionState
+   */
+  function applyRotation(rotOverride) {
+    /* Toggle perspective vs orthographic projection */
+    const ortho = toggleOrtho.dataset.on === "1";
+    viewport.style.perspective = ortho ? "none" : CONSTANTS.PERSPECTIVE_DISTANCE + "px";
+    /* Zoom and pan applied on scene so viewport clips overflow */
+    const st = interactionState;
+    const rx = rotOverride ? rotOverride.rotX : st.rotX;
+    const ry = rotOverride ? rotOverride.rotY : st.rotY;
+    const base = "translate(-50%, -50%) scale(" + st.zoom + ") translate(" + (st.panX / st.zoom) + "px," + (st.panY / st.zoom) + "px)";
+    if (st.is3d || rotOverride) {
+      scene.style.transform = base + " rotateX(" + rx + "deg) rotateY(" + ry + "deg)";
+    } else {
+      scene.style.transform = base;
+    }
+  }
+
+  function applySpread() {
+    applyLayerVisibility();
+  }
+
+  /* Easing: cubic-bezier(0.4, 0, 0.2, 1) approximation */
+  function easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  }
+
+  let animFrameId = null;
+
+  /* Saved rotation for 3D toggle memory */
+  let savedRotX = CONSTANTS.DEFAULT_ROT_X;
+  let savedRotY = CONSTANTS.DEFAULT_ROT_Y;
+
+  /**
+   * Animate 3D toggle transition: rotation and z-spread.
+   * Entering 3D: animate from (0,0) to saved rotation.
+   * Leaving 3D: save current rotation, animate to (0,0).
+   * @param {boolean} entering3d - true = entering 3D, false = leaving 3D
+   */
+  function animateTransition(entering3d) {
+    if (animFrameId) { cancelAnimationFrame(animFrameId); animFrameId = null; }
+    const duration = CONSTANTS.ANIM_DURATION;
+    const targetSpread = Number(spreadSlider.value);
+
+    if (!entering3d) {
+      /* Save current rotation before leaving 3D */
+      savedRotX = interactionState.rotX;
+      savedRotY = interactionState.rotY;
+    }
+
+    const toRotX = entering3d ? savedRotX : 0;
+    const toRotY = entering3d ? savedRotY : 0;
+    const fromRotX = entering3d ? 0 : savedRotX;
+    const fromRotY = entering3d ? 0 : savedRotY;
+    const startTime = performance.now();
+
+    function tick(now) {
+      const elapsed = now - startTime;
+      const rawT = Math.min(elapsed / duration, 1);
+      const t = easeInOutCubic(rawT);
+
+      const curRotX = fromRotX + (toRotX - fromRotX) * t;
+      const curRotY = fromRotY + (toRotY - fromRotY) * t;
+      const curSpread = entering3d ? targetSpread * t : targetSpread * (1 - t);
+
+      applyRotation({ rotX: curRotX, rotY: curRotY });
+      applyLayerVisibility(curSpread);
+
+      if (rawT < 1) {
+        animFrameId = requestAnimationFrame(tick);
+      } else {
+        animFrameId = null;
+        interactionState.rotX = toRotX;
+        interactionState.rotY = toRotY;
+        applyRotation();
+        applyLayerVisibility();
+      }
+    }
+    animFrameId = requestAnimationFrame(tick);
+  }
+
+  applyLayerVisibility();
+  applyRotation();
+
+  spreadSlider.addEventListener("input", () => { applySpread(); });
+
+  /* Toggle handlers */
+  toggle3d.addEventListener("click", () => {
+    interactionState.is3d = toggle3d.dataset.on === "1";
+    spreadSlider.disabled = !interactionState.is3d;
+    animateTransition(interactionState.is3d);
+  });
+
+  toggleOrtho.addEventListener("click", () => { applyRotation(); });
+
+  toggleBorders.addEventListener("click", () => { applyLayerVisibility(); });
+
+  if (bufBase64) {
+    toggleBuf.addEventListener("click", () => {
+      const show = toggleBuf.dataset.on === "1";
+      if (bufLayer) bufLayer.style.display = show ? "" : "none";
+    });
+  }
+
+  /* 4. Setup mouse/wheel interaction */
+  setupSceneInteraction(viewport, scene, {
+    getState: () => interactionState,
+    applyRotation,
+  });
+
+  /* Hover: linked highlight + tooltip */
+  scene.addEventListener("mouseover", e => {
+    const t = e.target.closest(".scene-layer");
+    if (t) {
+      tooltip.textContent = t.dataset.info;
+      tooltip.style.display = "block";
+      if (t.dataset.addr) highlightObj(t.dataset.addr);
+    }
+  });
+  scene.addEventListener("mouseout", e => {
+    const t = e.target.closest(".scene-layer");
+    if (t) {
+      tooltip.style.display = "none";
+      clearHighlight();
+    }
+  });
+  scene.addEventListener("mousemove", e => {
+    if (tooltip.style.display === "block") {
+      const rect = container.getBoundingClientRect();
+      tooltip.style.left = (e.clientX - rect.left + 12) + "px";
+      tooltip.style.top = (e.clientY - rect.top - 8) + "px";
+    }
+  });
+
+  /* Click to highlight, select and scroll to tree node */
+  scene.addEventListener("click", e => {
+    const t = e.target.closest(".scene-layer");
+    if (t && t.dataset.addr) {
+      selectObj(t.dataset.addr);
+      const target = document.getElementById("obj-" + t.dataset.addr);
+      if (target) {
+        let p = target.parentElement;
+        while (p) {
+          if (p.tagName === "DETAILS") p.open = true;
+          p = p.parentElement;
+        }
+        target.open = true;
+        target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    }
+  });
+
+  /* Reset button */
+  resetBtn.addEventListener("click", () => {
+    interactionState.rotX = CONSTANTS.DEFAULT_ROT_X;
+    interactionState.rotY = CONSTANTS.DEFAULT_ROT_Y;
+    interactionState.zoom = 1; interactionState.panX = 0; interactionState.panY = 0;
+    interactionState.is3d = true;
+    spreadSlider.value = String(defaultSpread);
+    spreadSlider.disabled = false;
+    toggle3d.dataset.on = "1"; toggle3d.classList.add("active");
+    toggleBorders.dataset.on = "1"; toggleBorders.classList.add("active");
+    if (toggleBuf) { toggleBuf.dataset.on = bufBase64 ? "1" : "0"; toggleBuf.classList.toggle("active", !!bufBase64); }
+    toggleOrtho.dataset.on = "0"; toggleOrtho.classList.remove("active");
+    layerEls.forEach(le => { le.el.style.display = ""; });
+    screenNames.forEach((name, i) => {
+      layerVisible[i] = name === "act_scr" || screenNames.length === 1;
+    });
+    layerBtns.forEach((b, i) => b.classList.toggle("active", layerVisible[i]));
+    if (bufLayer) bufLayer.style.display = bufBase64 ? "" : "none";
+    applyRotation();
+    applySpread();
+  });
+}
+
+function buildSimpleTable(data, key, cls, icon, title, headers, anchorPrefix) {
+  const items = data[key] || [];
+  const { panel, body } = makePanel(cls, icon, title, items.length);
+  body.appendChild(makeTable(headers, items, anchorPrefix));
+  return panel;
+}
+
+/* --- Status badge helper --- */
+function badge(text, color) {
+  const b = el("span", "badge badge-" + color, text);
+  return b;
+}
+
+/* --- Key-value pair helper --- */
+function kvPair(label, value) {
+  const row = el("div", "kv-row");
+  row.appendChild(el("span", "kv-label", label));
+  row.appendChild(el("span", "kv-value", String(value)));
+  return row;
+}
+
+/* --- Progress bar helper --- */
+function progressBar(ratio, color) {
+  const wrap = el("div", "progress-bar");
+  const fill = el("div", "progress-fill " + color);
+  fill.style.width = Math.max(0, Math.min(100, ratio * 100)) + "%";
+  wrap.appendChild(fill);
+  return wrap;
+}
+
+/* --- Generic card builder --- */
+function buildCard(item, config) {
+  const card = el("div", config.cardClass);
+  if (config.anchorPrefix && item.addr)
+    card.id = config.anchorPrefix + "-" + item.addr;
+
+  const hdr = el("div", config.cardClass.replace("-card", "-header"));
+  hdr.appendChild(el("span", "mono-addr", item.addr));
+  (config.badges || []).forEach(b => hdr.appendChild(badge(b.text, b.color)));
+  card.appendChild(hdr);
+
+  const info = el("div", config.cardClass.replace("-card", "-info"));
+  if (config.content) config.content(info, item);
+  card.appendChild(info);
+  return card;
+}
+
+/* --- Animations: card-based with progress bar --- */
+function buildAnimations(data) {
+  const items = data.animations || [];
+  const { panel, body } = makePanel("panel-animations", "🎬", "Animations", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  items.forEach(a => {
+    const statusColor = a.status === "paused" ? "yellow" : a.status === "reverse" ? "mauve" : "green";
+    body.appendChild(buildCard(a, {
+      cardClass: "anim-card",
+      anchorPrefix: "anim",
+      badges: [{ text: a.status || "running", color: statusColor }],
+      content: (info, a) => {
+        info.appendChild(kvPair("callback", a.exec_cb || "-"));
+        info.appendChild(kvPair("duration", a.duration + "ms"));
+
+        const range = a.end_value - a.start_value;
+        const ratio = range !== 0 ? (a.current_value - a.start_value) / range : 0;
+        const valRow = el("div", "anim-value-row");
+        valRow.appendChild(el("span", "anim-val-label", String(a.start_value)));
+        valRow.appendChild(progressBar(ratio, "blue"));
+        valRow.appendChild(el("span", "anim-val-label", String(a.end_value)));
+        info.appendChild(valRow);
+        info.appendChild(el("div", "anim-cur-val", "current: " + a.current_value +
+          "  (" + Math.round(ratio * 100) + "%)"));
+
+        const repeat = a.repeat_cnt === CONSTANTS.INFINITE_REPEAT ? "∞" : String(a.repeat_cnt);
+        info.appendChild(kvPair("repeat", repeat));
+        info.appendChild(kvPair("act_time", a.act_time + "ms"));
+      }
+    }));
+  });
+  return panel;
+}
+
+/* --- Timers: card-based with frequency and status --- */
+function buildTimers(data) {
+  const items = data.timers || [];
+  const { panel, body } = makePanel("panel-timers", "⏱", "Timers", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  items.forEach(t => {
+    body.appendChild(buildCard(t, {
+      cardClass: "timer-card",
+      anchorPrefix: "timer",
+      badges: [{ text: t.paused ? "paused" : "active", color: t.paused ? "yellow" : "green" }],
+      content: (info, t) => {
+        info.classList.add("timer-info-row");
+        info.appendChild(kvPair("callback", t.timer_cb || "-"));
+        info.appendChild(kvPair("period", t.period + "ms"));
+        info.appendChild(kvPair("frequency", t.frequency || "-"));
+        const repeat = t.repeat_count === -1 ? "∞" : String(t.repeat_count);
+        info.appendChild(kvPair("repeat", repeat));
+        info.appendChild(kvPair("last_run", String(t.last_run)));
+      }
+    }));
+  });
+  return panel;
+}
+
+/* --- Input Devices: card with type icon and status --- */
+function buildIndevs(data) {
+  const items = data.indevs || [];
+  const { panel, body } = makePanel("panel-indevs", "🕹", "Input Devices", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  const INDEV_ICONS = {
+    pointer: "👆", keypad: "⌨️", button: "🔘", encoder: "🎛️", none: "❓"
+  };
+  items.forEach(d => {
+    const typeIcon = INDEV_ICONS[d.type_name] || "🕹";
+    const card = buildCard(d, {
+      cardClass: "indev-card",
+      anchorPrefix: "indev",
+      badges: [{ text: d.enabled ? "enabled" : "disabled", color: d.enabled ? "green" : "red" }],
+      content: (info, d) => {
+        info.appendChild(kvPair("read_cb", d.read_cb || "-"));
+        info.appendChild(kvPair("long_press", d.long_press_time + "ms"));
+        info.appendChild(kvPair("scroll_limit", String(d.scroll_limit)));
+        if (d.display_addr) {
+          const row = el("div", "kv-row");
+          row.appendChild(el("span", "kv-label", "display"));
+          row.appendChild(xref(d.display_addr, "disp"));
+          info.appendChild(row);
+        }
+        if (d.group_addr) {
+          const row = el("div", "kv-row");
+          row.appendChild(el("span", "kv-label", "group"));
+          row.appendChild(xref(d.group_addr, "group"));
+          info.appendChild(row);
+        }
+      }
+    });
+    /* Prepend type icon and name before mono-addr in header */
+    const hdr = card.querySelector(".indev-header");
+    const addrSpan = hdr.firstChild;
+    hdr.insertBefore(el("span", "indev-type-name", d.type_name || "unknown"), addrSpan);
+    hdr.insertBefore(el("span", "indev-type-icon", typeIcon), hdr.firstChild);
+    body.appendChild(card);
+  });
+  return panel;
+}
+
+function buildImageCache(data) {
+  const entries = data.image_cache || [];
+  const { panel, body } = makePanel("panel-img-cache", "🖼", "Image Cache", entries.length);
+  if (entries.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  const grid = el("div", "cache-grid");
+  entries.forEach(e => {
+    const card = el("div", "cache-entry");
+    if (e.entry_addr) card.id = "imgcache-" + e.entry_addr;
+    if (e.preview_base64) {
+      const img = document.createElement("img");
+      img.className = "cache-thumb";
+      img.src = "data:image/png;base64," + e.preview_base64;
+      img.alt = "decoded preview";
+      card.appendChild(img);
+    }
+    const info = el("div", "cache-info");
+    info.appendChild(el("div", "cache-src", e.src || "-"));
+    const meta = el("div", "cache-meta-row");
+    meta.appendChild(badge(e.cf || "?", "blue"));
+    meta.appendChild(el("span", "cache-size-label", e.size || ""));
+    meta.appendChild(badge("rc=" + e.ref_count, "teal"));
+    info.appendChild(meta);
+    if (e.decoder_name) info.appendChild(el("div", "cache-decoder-label", e.decoder_name));
+    card.appendChild(info);
+    grid.appendChild(card);
+  });
+  body.appendChild(grid);
+  return panel;
+}
+
+function buildSubjects(data) {
+  const subjects = data.subjects || [];
+  const { panel, body } = makePanel("panel-subjects", "📡", "Subjects", subjects.length);
+  if (subjects.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  subjects.forEach(s => {
+    const card = el("div", "subject-card");
+    if (s.addr) card.id = "subject-" + s.addr;
+    const hdr = el("div", "subject-header");
+    hdr.appendChild(el("span", "subject-addr", s.addr || ""));
+    hdr.appendChild(el("span", "subject-type", s.type_name));
+    hdr.appendChild(document.createTextNode("  " + (s.observers||[]).length + " observers"));
+    card.appendChild(hdr);
+    if (s.observers && s.observers.length > 0) {
+      const t = document.createElement("table");
+      const th = t.createTHead().insertRow();
+      ["addr","cb","target_addr","for_obj"].forEach(h => {
+        const c = document.createElement("th"); c.textContent = h; th.appendChild(c);
+      });
+      const tb = t.createTBody();
+      s.observers.forEach(o => {
+        const r = tb.insertRow();
+        if (o.addr) r.id = "observer-" + o.addr;
+        r.insertCell().textContent = o.addr || "-";
+        r.insertCell().textContent = o.cb || "-";
+        const tc = r.insertCell();
+        xrefCell(tc, "target_addr", o.target_addr);
+        r.insertCell().textContent = String(o.for_obj);
+      });
+      card.appendChild(t);
+    }
+    body.appendChild(card);
+  });
+  return panel;
+}
+
+/* --- Groups: card with member count bar and focused highlight --- */
+function buildGroups(data) {
+  const items = data.groups || [];
+  const { panel, body } = makePanel("panel-groups", "👥", "Groups", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  items.forEach(g => {
+    const badges = [{ text: g.obj_count + " objects", color: "blue" }];
+    if (g.frozen) badges.push({ text: "frozen", color: "yellow" });
+    if (g.editing) badges.push({ text: "editing", color: "peach" });
+    body.appendChild(buildCard(g, {
+      cardClass: "group-card",
+      anchorPrefix: "group",
+      badges: badges,
+      content: (info, g) => {
+        info.appendChild(kvPair("wrap", String(g.wrap)));
+        if (g.focused_addr) {
+          const row = el("div", "kv-row");
+          row.appendChild(el("span", "kv-label", "focused"));
+          row.appendChild(xref(g.focused_addr, "obj"));
+          info.appendChild(row);
+        }
+        if (g.member_addrs && g.member_addrs.length > 0) {
+          const mRow = el("div", "group-members");
+          mRow.appendChild(el("span", "kv-label", "members"));
+          const mList = el("div", "member-list");
+          g.member_addrs.forEach(a => {
+            mList.appendChild(xref(a, "obj"));
+          });
+          mRow.appendChild(mList);
+          info.appendChild(mRow);
+        }
+      }
+    }));
+  });
+  return panel;
+}
+
+/* --- Draw Tasks: card with area visualization --- */
+function buildDrawTasks(data) {
+  const items = data.draw_tasks || [];
+  const { panel, body } = makePanel("panel-draw-tasks", "📝", "Draw Tasks", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  items.forEach(t => {
+    const stateColor = t.state_name === "ready" ? "green" : t.state_name === "queued" ? "yellow" : "mauve";
+    body.appendChild(buildCard(t, {
+      cardClass: "dtask-card",
+      anchorPrefix: "drawtask",
+      badges: [
+        { text: t.type_name || "?", color: "blue" },
+        { text: t.state_name || "?", color: stateColor },
+      ],
+      content: (info, t) => {
+        if (t.area) {
+          const a = t.area;
+          const w = a.x2 - a.x1; const h = a.y2 - a.y1;
+          info.appendChild(kvPair("area", "(" + a.x1 + "," + a.y1 + ") → (" + a.x2 + "," + a.y2 + ")"));
+          info.appendChild(kvPair("size", w + " × " + h));
+        }
+        info.appendChild(kvPair("opacity", t.opa));
+        if (t.preferred_draw_unit_id !== undefined) {
+          info.appendChild(kvPair("unit_id", t.preferred_draw_unit_id));
+        }
+      }
+    }));
+  });
+  return panel;
+}
+
+/* --- Draw Units: simple card --- */
+function buildDrawUnits(data) {
+  const items = data.draw_units || [];
+  const { panel, body } = makePanel("panel-draw-units", "🎨", "Draw Units", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  const grid = el("div", "unit-grid");
+  items.forEach(u => {
+    const card = el("div", "unit-card");
+    if (u.addr) card.id = "drawunit-" + u.addr;
+    card.appendChild(el("div", "unit-name", u.name || "(unnamed)"));
+    card.appendChild(el("div", "unit-idx", "#" + u.idx));
+    card.appendChild(el("div", "mono-addr", u.addr));
+    grid.appendChild(card);
+  });
+  body.appendChild(grid);
+  return panel;
+}
+
+/* --- Image Decoders: card grid --- */
+function buildDecoders(data) {
+  const items = data.image_decoders || [];
+  const { panel, body } = makePanel("panel-decoders", "🔓", "Decoders", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  const grid = el("div", "decoder-grid");
+  items.forEach(d => {
+    const card = el("div", "decoder-card");
+    if (d.addr) card.id = "decoder-" + d.addr;
+    card.appendChild(el("div", "decoder-name", d.name || "(unnamed)"));
+    const cbs = el("div", "decoder-cbs");
+    if (d.info_cb && d.info_cb !== "-") cbs.appendChild(badge("info", "blue"));
+    if (d.open_cb && d.open_cb !== "-") cbs.appendChild(badge("open", "green"));
+    if (d.close_cb && d.close_cb !== "-") cbs.appendChild(badge("close", "peach"));
+    card.appendChild(cbs);
+    card.appendChild(el("div", "mono-addr", d.addr));
+    grid.appendChild(card);
+  });
+  body.appendChild(grid);
+  return panel;
+}
+
+/* --- FS Drivers: card with drive letter badge --- */
+function buildFsDrivers(data) {
+  const items = data.fs_drivers || [];
+  const { panel, body } = makePanel("panel-fs-drivers", "💾", "FS Drivers", items.length);
+  if (items.length === 0) { body.appendChild(emptyMsg()); return panel; }
+  const grid = el("div", "fs-grid");
+  items.forEach(d => {
+    const card = el("div", "fs-card");
+    if (d.addr) card.id = "fsdrv-" + d.addr;
+    card.appendChild(el("div", "fs-letter", d.letter + ":"));
+    card.appendChild(el("div", "fs-driver-name", d.driver_name || "(unnamed)"));
+    const info = el("div", "fs-info");
+    info.appendChild(kvPair("cache", d.cache_size));
+    const cbs = el("div", "fs-cbs");
+    if (d.open_cb && d.open_cb !== "-") cbs.appendChild(badge("open", "green"));
+    if (d.read_cb && d.read_cb !== "-") cbs.appendChild(badge("read", "blue"));
+    if (d.write_cb && d.write_cb !== "-") cbs.appendChild(badge("write", "peach"));
+    if (d.close_cb && d.close_cb !== "-") cbs.appendChild(badge("close", "mauve"));
+    info.appendChild(cbs);
+    card.appendChild(info);
+    grid.appendChild(card);
+  });
+  body.appendChild(grid);
+  return panel;
+}
+
+/* --- Top bar nav builder --- */
+function buildTopNav(data) {
+  const nav = document.getElementById("topbar-nav");
+  nav.innerHTML = "";
+  SECTIONS.forEach(s => {
+    const count = s.key === "displays"
+      ? (data.displays||[]).length
+      : s.key === "object_trees"
+        ? (data[s.key]||[]).reduce((n,t) => n + (t.screens?t.screens.length:0), 0)
+        : (data[s.key]||[]).length;
+    if (count === 0) return;
+    const a = el("a", "", s.icon + " " + count);
+    const targetId = "sec-" + s.cls.replace("panel-", "");
+    a.href = "#" + targetId;
+    a.title = s.title + " (" + count + ")";
+    a.addEventListener("click", e => {
+      e.preventDefault();
+      const target = document.getElementById(targetId);
+      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+    nav.appendChild(a);
+  });
+}
+
+/* --- Main render --- */
+function renderDashboard(data) {
+  const meta = document.getElementById("header-meta");
+  meta.innerHTML = "";
+  meta.appendChild(document.createTextNode(data.meta?.timestamp || ""));
+  if (data.meta?.lvgl_version) {
+    meta.appendChild(el("span", "version-tag", "LVGL " + data.meta.lvgl_version));
+  }
+
+  buildTopNav(data);
+
+  const grid = document.getElementById("bento-grid");
+  grid.innerHTML = "";
+
+  /* Stat cards row */
+  const objCount = countObjects(data.object_trees || []);
+  STAT_DEFS.forEach(s => {
+    const val = s.key === "_objects" ? objCount : (data[s.key]||[]).length;
+    grid.appendChild(makeStatPanel(s.icon, s.label, val, s.color, s.section));
+  });
+
+  /* Main panels in bento layout order */
+  grid.appendChild(buildDisplayAndTrees(data));
+
+  grid.appendChild(buildImageCache(data));
+  grid.appendChild(buildSimpleTable(data, "image_header_cache",
+    "panel-hdr-cache", "📋", "Header Cache",
+    ["entry_addr","src","size","cf","ref_count","src_type","decoder_name"], "imghdr"));
+  grid.appendChild(buildDecoders(data));
+
+  grid.appendChild(buildAnimations(data));
+  grid.appendChild(buildTimers(data));
+  grid.appendChild(buildIndevs(data));
+
+  grid.appendChild(buildGroups(data));
+  grid.appendChild(buildDrawUnits(data));
+  grid.appendChild(buildDrawTasks(data));
+  grid.appendChild(buildSubjects(data));
+  grid.appendChild(buildFsDrivers(data));
+}
+
+/* --- Boot logic --- */
+const jsonEl = document.getElementById("lvgl-data");
+const raw = jsonEl ? jsonEl.textContent.trim() : "";
+
+if (raw) {
+  try {
+    renderDashboard(JSON.parse(raw));
+  } catch(e) {
+    document.getElementById("bento-grid").textContent =
+      "Failed to parse embedded JSON: " + e.message;
+  }
+} else {
+  const dropZone = document.getElementById("drop-zone");
+  dropZone.style.display = "flex";
+  const fileInput = document.getElementById("file-input");
+
+  dropZone.addEventListener("dragover", e => {
+    e.preventDefault(); dropZone.classList.add("dragover");
+  });
+  dropZone.addEventListener("dragleave", () => dropZone.classList.remove("dragover"));
+  dropZone.addEventListener("drop", e => {
+    e.preventDefault(); dropZone.classList.remove("dragover");
+    if (e.dataTransfer.files[0]) loadFile(e.dataTransfer.files[0]);
+  });
+  dropZone.addEventListener("click", () => fileInput.click());
+  fileInput.addEventListener("change", () => {
+    if (fileInput.files[0]) loadFile(fileInput.files[0]);
+  });
+
+  function loadFile(file) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const data = JSON.parse(reader.result);
+        dropZone.style.display = "none";
+        renderDashboard(data);
+      } catch(e) { alert("Invalid JSON file: " + e.message); }
+    };
+    reader.readAsText(file);
+  }
+}
+
+/* --- Search / filter --- */
+document.getElementById("search").addEventListener("input", function() {
+  const q = this.value.toLowerCase();
+  document.querySelectorAll(".panel").forEach(p => {
+    if (p.classList.contains("panel-stat")) return;
+    if (!q) { p.classList.remove("hidden"); return; }
+    p.classList.toggle("hidden", !p.textContent.toLowerCase().includes(q));
+  });
+});
+
+/* --- Active nav tracking via IntersectionObserver --- */
+const observer = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    const id = entry.target.id;
+    if (!id) return;
+    const link = document.querySelector('.topbar-nav a[href="#' + id + '"]');
+    if (link) link.classList.toggle("active", entry.isIntersecting);
+  });
+}, { rootMargin: "-20% 0px -70% 0px" });
+
+new MutationObserver(() => {
+  document.querySelectorAll(".panel[id]").forEach(p => observer.observe(p));
+}).observe(document.getElementById("bento-grid"), { childList: true });
+
+/* --- Theme toggle (dark/light/cyber) --- */
+(function initTheme() {
+  const btn = document.getElementById("theme-toggle");
+  const root = document.documentElement;
+  const STORAGE_KEY = "lvgl-dash-theme";
+  const THEMES = ["dark", "light", "cyber"];
+  const ICONS = { dark: "🌙", light: "☀️", cyber: "⚡" };
+  const TITLES = { dark: "Switch to light theme", light: "Switch to cyber theme", cyber: "Switch to dark theme" };
+
+  function applyTheme(theme) {
+    root.setAttribute("data-theme", theme);
+    btn.textContent = ICONS[theme] || "🌙";
+    btn.title = TITLES[theme] || "";
+  }
+
+  /* Restore from localStorage, or follow system preference */
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved && THEMES.includes(saved)) {
+    applyTheme(saved);
+  } else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+    applyTheme("light");
+  }
+
+  btn.addEventListener("click", () => {
+    const cur = root.getAttribute("data-theme") || "dark";
+    const idx = THEMES.indexOf(cur);
+    const next = THEMES[(idx + 1) % THEMES.length];
+    applyTheme(next);
+    localStorage.setItem(STORAGE_KEY, next);
+  });
+
+  /* Follow system changes when no manual override */
+  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", e => {
+    if (!localStorage.getItem(STORAGE_KEY)) {
+      applyTheme(e.matches ? "light" : "dark");
+    }
+  });
+})();
+
+})();
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/static/style.css b/scripts/gdb/lvglgdb/cmds/dashboard/static/style.css
new file mode 100644
index 0000000000..4b5202f37c
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/static/style.css
@@ -0,0 +1,895 @@
+/* === LVGL Dashboard — Bento Grid + Catppuccin Dark/Light/Cyberpunk === */
+
+/* --- Dark theme (Catppuccin Mocha) — default --- */
+:root {
+  --crust:    #11111b;
+  --mantle:   #181825;
+  --base:     #1e1e2e;
+  --surface0: #313244;
+  --surface1: #45475a;
+  --surface2: #585b70;
+  --overlay0: #6c7086;
+  --overlay1: #7f849c;
+  --text:     #cdd6f4;
+  --subtext0: #a6adc8;
+  --subtext1: #bac2de;
+  --blue:     #89b4fa;
+  --sapphire: #74c7ec;
+  --lavender: #b4befe;
+  --green:    #a6e3a1;
+  --yellow:   #f9e2af;
+  --peach:    #fab387;
+  --red:      #f38ba8;
+  --mauve:    #cba6f7;
+  --pink:     #f5c2e7;
+  --teal:     #94e2d5;
+  --flamingo: #f2cdcd;
+
+  --radius:   12px;
+  --radius-sm: 8px;
+  --gap: 8px;
+  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  --panel-bg: rgba(30, 30, 46, 0.7);
+  --panel-border: rgba(49, 50, 68, 0.6);
+  --glow-blue: rgba(137, 180, 250, 0.08);
+  --topbar-bg: rgba(17, 17, 27, 0.85);
+  --panel-header-bg: rgba(24, 24, 37, 0.5);
+  --hover-row: rgba(137, 180, 250, 0.04);
+  --hover-summary: rgba(137, 180, 250, 0.06);
+  --td-border: rgba(49, 50, 68, 0.3);
+  --shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.2);
+  --icon-bg-blue:   rgba(137, 180, 250, 0.12);
+  --icon-bg-green:  rgba(166, 227, 161, 0.12);
+  --icon-bg-mauve:  rgba(203, 166, 247, 0.12);
+  --icon-bg-peach:  rgba(250, 179, 135, 0.12);
+  --icon-bg-teal:   rgba(148, 226, 213, 0.12);
+  --icon-bg-pink:   rgba(245, 194, 231, 0.12);
+  --version-bg: rgba(166, 227, 161, 0.12);
+  --nav-active-bg: rgba(137, 180, 250, 0.12);
+  --search-icon-fill: %236c7086;
+
+  /* Effect tokens (dark default = none/neutral) */
+  --panel-glow: none;
+  --panel-hover-glow: none;
+  --panel-header-gradient: none;
+  --title-text-shadow: none;
+  --title-letter-spacing: 0.5px;
+  --badge-border: none;
+  --badge-text-shadow: none;
+  --topbar-shadow: none;
+  --brand-text-shadow: none;
+  --brand-logo-shadow: none;
+  --stat-value-shadow: none;
+  --stat-label-color: var(--overlay1);
+  --stat-label-spacing: 0.3px;
+  --th-text-shadow: none;
+  --scene-layer-bg: rgba(137, 180, 250, 0.06);
+  --scene-layer-hover-bg: rgba(137, 180, 250, 0.2);
+  --scene-layer-hover-shadow: 0 0 8px rgba(137, 180, 250, 0.4);
+  --scrollbar-thumb: var(--surface1);
+  --scrollbar-track: transparent;
+  --body-after-content: none;
+  --body-after-bg: none;
+  --version-border: none;
+  --version-text-shadow: none;
+}
+
+/* --- Light theme (Catppuccin Latte) --- */
+[data-theme="light"] {
+  --crust:    #dce0e8;
+  --mantle:   #e6e9ef;
+  --base:     #eff1f5;
+  --surface0: #ccd0da;
+  --surface1: #bcc0cc;
+  --surface2: #acb0be;
+  --overlay0: #9ca0b0;
+  --overlay1: #8c8fa1;
+  --text:     #4c4f69;
+  --subtext0: #6c6f85;
+  --subtext1: #5c5f77;
+  --blue:     #1e66f5;
+  --sapphire: #209fb5;
+  --lavender: #7287fd;
+  --green:    #40a02b;
+  --yellow:   #df8e1d;
+  --peach:    #fe640b;
+  --red:      #d20f39;
+  --mauve:    #8839ef;
+  --pink:     #ea76cb;
+  --teal:     #179299;
+  --flamingo: #dd7878;
+
+  --panel-bg: rgba(239, 241, 245, 0.85);
+  --panel-border: rgba(204, 208, 218, 0.7);
+  --glow-blue: rgba(30, 102, 245, 0.06);
+  --topbar-bg: rgba(230, 233, 239, 0.9);
+  --panel-header-bg: rgba(220, 224, 232, 0.6);
+  --hover-row: rgba(30, 102, 245, 0.04);
+  --hover-summary: rgba(30, 102, 245, 0.06);
+  --td-border: rgba(204, 208, 218, 0.5);
+  --shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.06);
+  --icon-bg-blue:   rgba(30, 102, 245, 0.10);
+  --icon-bg-green:  rgba(64, 160, 43, 0.10);
+  --icon-bg-mauve:  rgba(136, 57, 239, 0.10);
+  --icon-bg-peach:  rgba(254, 100, 11, 0.10);
+  --icon-bg-teal:   rgba(23, 146, 153, 0.10);
+  --icon-bg-pink:   rgba(234, 118, 203, 0.10);
+  --version-bg: rgba(64, 160, 43, 0.10);
+  --nav-active-bg: rgba(30, 102, 245, 0.10);
+  --search-icon-fill: %239ca0b0;
+
+  /* Effect tokens (light = none/neutral) */
+  --panel-glow: none;
+  --panel-hover-glow: none;
+  --panel-header-gradient: none;
+  --title-text-shadow: none;
+  --title-letter-spacing: 0.5px;
+  --badge-border: none;
+  --badge-text-shadow: none;
+  --topbar-shadow: none;
+  --brand-text-shadow: none;
+  --brand-logo-shadow: none;
+  --stat-value-shadow: none;
+  --stat-label-color: var(--overlay1);
+  --stat-label-spacing: 0.3px;
+  --th-text-shadow: none;
+  --scene-layer-bg: rgba(30, 102, 245, 0.06);
+  --scene-layer-hover-bg: rgba(30, 102, 245, 0.2);
+  --scene-layer-hover-shadow: 0 0 8px rgba(30, 102, 245, 0.4);
+  --scrollbar-thumb: var(--surface1);
+  --scrollbar-track: transparent;
+  --body-after-content: none;
+  --body-after-bg: none;
+  --version-border: none;
+  --version-text-shadow: none;
+}
+
+/* --- Cyberpunk / Neon Sci-Fi theme --- */
+[data-theme="cyber"] {
+  --crust:    #05080a;
+  --mantle:   #0a0e14;
+  --base:     #0d1117;
+  --surface0: #1a1f2e;
+  --surface1: #252b3b;
+  --surface2: #2f3649;
+  --overlay0: #4a5568;
+  --overlay1: #718096;
+  --text:     #e0f0ff;
+  --subtext0: #8ba4c0;
+  --subtext1: #a0c4e8;
+  --blue:     #00e5ff;
+  --sapphire: #00bcd4;
+  --lavender: #b388ff;
+  --green:    #00ff9f;
+  --yellow:   #ffea00;
+  --peach:    #ff6e40;
+  --red:      #ff1744;
+  --mauve:    #e040fb;
+  --pink:     #ff4081;
+  --teal:     #1de9b6;
+  --flamingo: #ff80ab;
+
+  --radius:   4px;
+  --radius-sm: 2px;
+
+  --panel-bg: rgba(13, 17, 23, 0.85);
+  --panel-border: rgba(0, 229, 255, 0.15);
+  --glow-blue: rgba(0, 229, 255, 0.06);
+  --topbar-bg: rgba(5, 8, 10, 0.92);
+  --panel-header-bg: rgba(10, 14, 20, 0.7);
+  --hover-row: rgba(0, 229, 255, 0.06);
+  --hover-summary: rgba(0, 229, 255, 0.08);
+  --td-border: rgba(0, 229, 255, 0.08);
+  --shadow-hover: 0 0 20px rgba(0, 229, 255, 0.12), 0 0 40px rgba(0, 229, 255, 0.04);
+  --icon-bg-blue:   rgba(0, 229, 255, 0.10);
+  --icon-bg-green:  rgba(0, 255, 159, 0.10);
+  --icon-bg-mauve:  rgba(224, 64, 251, 0.10);
+  --icon-bg-peach:  rgba(255, 110, 64, 0.10);
+  --icon-bg-teal:   rgba(29, 233, 182, 0.10);
+  --icon-bg-pink:   rgba(255, 64, 129, 0.10);
+  --version-bg: rgba(0, 255, 159, 0.10);
+  --nav-active-bg: rgba(0, 229, 255, 0.12);
+  --search-icon-fill: %234a5568;
+
+  /* Cyber-specific glow tokens */
+  --neon-cyan: #00e5ff;
+  --neon-magenta: #e040fb;
+  --neon-yellow: #ffea00;
+  --glow-cyan: 0 0 8px rgba(0, 229, 255, 0.3);
+  --glow-magenta: 0 0 8px rgba(224, 64, 251, 0.3);
+  --scanline-bg: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 229, 255, 0.015) 2px,
+    rgba(0, 229, 255, 0.015) 4px
+  );
+
+  /* Effect tokens: cyber-specific values */
+  --panel-glow: inset 0 0 30px rgba(0, 229, 255, 0.02);
+  --panel-hover-glow: inset 0 0 30px rgba(0, 229, 255, 0.03);
+  --panel-header-gradient: linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0%, transparent 100%);
+  --title-text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
+  --title-letter-spacing: 1.5px;
+  --badge-border: 1px solid currentColor;
+  --badge-text-shadow: 0 0 4px currentColor;
+  --topbar-shadow: 0 1px 12px rgba(0, 229, 255, 0.08);
+  --brand-text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
+  --brand-logo-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+  --stat-value-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
+  --stat-label-color: rgba(0, 229, 255, 0.5);
+  --stat-label-spacing: 1px;
+  --th-text-shadow: 0 0 4px rgba(0, 229, 255, 0.2);
+  --scene-layer-bg: rgba(0, 229, 255, 0.04);
+  --scene-layer-hover-bg: rgba(0, 229, 255, 0.15);
+  --scene-layer-hover-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
+  --scrollbar-thumb: rgba(0, 229, 255, 0.2);
+  --scrollbar-track: rgba(0, 229, 255, 0.02);
+  --body-after-content: "";
+  --body-after-bg: var(--scanline-bg);
+  --version-border: 1px solid rgba(0, 255, 159, 0.3);
+  --version-text-shadow: 0 0 4px rgba(0, 255, 159, 0.3);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: var(--crust); color: var(--text);
+  line-height: 1.5; -webkit-font-smoothing: antialiased;
+  font-size: 13px; min-height: 100vh;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+body::after {
+  content: var(--body-after-content);
+  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+  pointer-events: none; z-index: 9999;
+  background: var(--body-after-bg);
+  opacity: 0.5;
+}
+
+/* === Top Bar === */
+.topbar {
+  position: sticky; top: 0; z-index: 100;
+  background: var(--topbar-bg);
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--panel-border);
+  box-shadow: var(--topbar-shadow);
+  padding: 0 20px; height: 44px;
+  display: flex; align-items: center; gap: 16px;
+}
+.topbar-brand {
+  display: flex; align-items: center; gap: 8px;
+  font-weight: 700; font-size: 13px; color: var(--blue);
+  white-space: nowrap; text-shadow: var(--brand-text-shadow);
+}
+.topbar-brand .logo {
+  width: 22px; height: 22px; background: var(--blue); border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; font-weight: 800; color: var(--crust);
+  box-shadow: var(--brand-logo-shadow);
+}
+.topbar-sep { width: 1px; height: 20px; background: var(--surface0); }
+.topbar-meta {
+  font-size: 11px; color: var(--overlay1);
+  display: flex; align-items: center; gap: 10px;
+}
+
+.version-tag {
+  background: var(--version-bg);
+  color: var(--green); padding: 2px 8px; border-radius: 5px;
+  font-size: 10px; font-weight: 600;
+  border: var(--version-border); text-shadow: var(--version-text-shadow);
+}
+.topbar-nav {
+  margin-left: auto; display: flex; gap: 2px;
+}
+.topbar-nav a {
+  padding: 4px 10px; border-radius: 6px;
+  color: var(--subtext0); text-decoration: none;
+  font-size: 11px; font-weight: 500;
+  transition: all var(--transition); white-space: nowrap;
+}
+.topbar-nav a:hover { background: var(--surface0); color: var(--text); }
+.topbar-nav a.active { background: var(--nav-active-bg); color: var(--blue); }
+
+/* === Theme Toggle Button === */
+.theme-toggle {
+  width: 32px; height: 32px; border-radius: 8px;
+  border: 1px solid var(--surface0); background: var(--base);
+  color: var(--overlay1); cursor: pointer; font-size: 15px;
+  display: flex; align-items: center; justify-content: center;
+  transition: all var(--transition); flex-shrink: 0;
+}
+.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
+
+.topbar-search {
+  margin-left: 8px; padding: 4px 10px 4px 28px;
+  border: 1px solid var(--surface0); border-radius: 6px;
+  background: var(--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='var(--search-icon-fill)' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 8px center;
+  color: var(--text); font-size: 11px; outline: none;
+  width: 160px; transition: all var(--transition);
+}
+.topbar-search:focus { border-color: var(--blue); width: 220px; }
+.topbar-search::placeholder { color: var(--overlay0); }
+
+/* === Main Container === */
+.main { padding: 12px 16px 24px; max-width: 1800px; margin: 0 auto; }
+
+/* === Bento Grid === */
+.bento {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-rows: minmax(40px, auto);
+  gap: var(--gap);
+}
+
+/* === Panel === */
+.panel {
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--panel-glow);
+  transition: border-color var(--transition), box-shadow var(--transition),
+              background var(--transition);
+  display: flex; flex-direction: column;
+}
+.panel:hover {
+  border-color: var(--surface1);
+  box-shadow: 0 0 0 1px var(--surface1), var(--shadow-hover), var(--panel-hover-glow);
+}
+.panel-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--panel-border);
+  background: var(--panel-header-bg), var(--panel-header-gradient);
+  flex-shrink: 0;
+}
+.panel-icon { font-size: 13px; flex-shrink: 0; }
+.panel-title {
+  font-size: 11px; font-weight: 600; color: var(--subtext1);
+  text-transform: uppercase; letter-spacing: var(--title-letter-spacing);
+  text-shadow: var(--title-text-shadow);
+}
+.panel-badge {
+  margin-left: auto; background: var(--surface0);
+  color: var(--subtext0); font-size: 10px; font-weight: 600;
+  padding: 1px 7px; border-radius: 8px; min-width: 20px; text-align: center;
+  border: var(--badge-border);
+}
+.panel-body { padding: 10px 12px; flex: 1; overflow: auto; }
+.panel-body::-webkit-scrollbar { width: 4px; height: 4px; }
+.panel-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
+.panel-body::-webkit-scrollbar-track { background: var(--scrollbar-track); }
+
+/* === Stat Mini Cards === */
+.stat-mini {
+  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
+}
+.stat-mini .stat-icon-wrap {
+  width: 36px; height: 36px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px; flex-shrink: 0;
+}
+.stat-mini .stat-icon-wrap.blue   { background: var(--icon-bg-blue); }
+.stat-mini .stat-icon-wrap.green  { background: var(--icon-bg-green); }
+.stat-mini .stat-icon-wrap.mauve  { background: var(--icon-bg-mauve); }
+.stat-mini .stat-icon-wrap.peach  { background: var(--icon-bg-peach); }
+.stat-mini .stat-icon-wrap.teal   { background: var(--icon-bg-teal); }
+.stat-mini .stat-icon-wrap.pink   { background: var(--icon-bg-pink); }
+.stat-info { display: flex; flex-direction: column; }
+.stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; text-shadow: var(--stat-value-shadow); }
+.stat-label {
+  font-size: 10px; font-weight: 500; color: var(--stat-label-color);
+  text-transform: uppercase; letter-spacing: var(--stat-label-spacing);
+}
+
+/* === Tables === */
+table {
+  width: 100%; border-collapse: collapse;
+  font-size: 12px; font-family: "JetBrains Mono", "Fira Code", monospace;
+}
+thead { position: sticky; top: 0; z-index: 1; }
+th {
+  text-align: left; padding: 6px 8px;
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.4px; color: var(--overlay1);
+  background: var(--base); border-bottom: 1px solid var(--surface0);
+  text-shadow: var(--th-text-shadow);
+}
+td {
+  padding: 5px 8px; border-bottom: 1px solid var(--td-border);
+  color: var(--subtext1); white-space: nowrap;
+  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
+}
+tr:hover td { background: var(--hover-row); }
+.table-wrap { overflow: auto; max-height: 400px; }
+
+/* === Cross-reference links === */
+a.xref {
+  color: var(--sapphire); text-decoration: none;
+  border-bottom: 1px dotted rgba(116,199,236,0.3);
+  transition: all var(--transition);
+}
+a.xref:hover { color: var(--blue); border-bottom-color: var(--blue); }
+
+/* === Display Card === */
+.disp-tab-bar {
+  display: flex; gap: 4px; padding: 0 0 8px;
+  border-bottom: 1px solid var(--surface0); margin-bottom: 8px;
+}
+.disp-tab-btn {
+  padding: 4px 12px; border: 1px solid var(--surface0); border-bottom: none;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  background: var(--mantle); color: var(--subtext0);
+  font-size: 11px; font-family: "JetBrains Mono", monospace;
+  cursor: pointer; transition: background var(--transition), color var(--transition);
+}
+.disp-tab-btn:hover { background: var(--surface0); }
+.disp-tab-btn.active {
+  background: var(--base); color: var(--blue); font-weight: 600;
+  border-color: var(--blue); border-bottom: 2px solid var(--base);
+}
+.disp-tab-btn {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+}
+.disp-tab-thumb {
+  width: 48px; height: 48px; object-fit: contain;
+  border-radius: 4px; border: 1px solid var(--surface0);
+  image-rendering: pixelated; background: var(--crust);
+}
+.disp-tab-objcount {
+  font-size: 0.7rem; color: var(--overlay1); opacity: 0.8;
+}
+.obj-tree-header {
+  font-size: 0.75rem; color: var(--overlay1); padding: 4px 8px;
+  border-bottom: 1px solid var(--surface0); margin-bottom: 4px;
+}
+.disp-info-bar {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  padding: 0 0 8px; margin-bottom: 4px;
+  border-bottom: 1px solid var(--surface0);
+}
+.disp-chip {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); padding: 5px 10px;
+  font-size: 11px; flex-wrap: wrap;
+}
+.disp-header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; font-size: 12px;
+}
+.disp-addr {
+  font-family: "JetBrains Mono", monospace; font-size: 11px;
+  color: var(--sapphire);
+}
+.disp-res { color: var(--text); font-weight: 600; }
+.disp-screens { color: var(--overlay1); font-size: 11px; }
+
+/* === Object Tree === */
+.obj-node { margin-left: 12px; }
+.obj-node > summary {
+  cursor: pointer; padding: 3px 6px 3px 4px; border-radius: 4px;
+  font-family: "JetBrains Mono", monospace; font-size: 11px;
+  color: var(--subtext1); list-style: none;
+  transition: background var(--transition);
+}
+.obj-node > summary::-webkit-details-marker { display: none; }
+.obj-node > summary::before {
+  content: ""; display: inline-block; width: 6px; height: 6px;
+  border-radius: 50%; background: var(--depth-color, var(--overlay0));
+  margin-right: 5px; vertical-align: middle; flex-shrink: 0;
+}
+.obj-node[open] > summary::before {
+  border-radius: 2px;
+}
+.obj-node > summary:hover { background: var(--hover-summary); }
+.obj-node.obj-selected > summary {
+  background: var(--nav-active-bg); outline: 1px solid var(--blue);
+}
+
+/* === Object Split Layout (tree | 3D | detail) === */
+.obj-split {
+  display: flex; gap: 8px; align-items: stretch; height: 700px;
+}
+.obj-split > .obj-tree-view {
+  flex: 0 0 220px; min-width: 0; overflow: auto; font-size: 11px;
+}
+.obj-split > .obj-3d-view {
+  flex: 1; min-width: 0; position: relative;
+  display: flex; flex-direction: column;
+}
+.obj-split > .obj-detail-view {
+  flex: 0 0 280px; min-width: 0; overflow: auto; font-size: 12px;
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); padding: 10px;
+}
+
+/* === Object Detail Panel === */
+.detail-header {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 10px; padding-bottom: 8px;
+  border-bottom: 1px solid var(--surface0);
+}
+.detail-class { font-size: 14px; font-weight: 700; color: var(--blue); }
+.detail-section { margin-bottom: 10px; }
+.detail-section-title {
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  color: var(--overlay0); letter-spacing: 0.5px; margin-bottom: 4px;
+}
+.detail-coord-grid {
+  display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr;
+  gap: 2px 8px; font-family: "JetBrains Mono", monospace; font-size: 11px;
+}
+.detail-coord-label { color: var(--overlay1); font-weight: 600; }
+.detail-coord-val { color: var(--text); }
+.detail-style-card {
+  background: var(--mantle); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); padding: 6px 8px; margin-bottom: 4px;
+}
+.detail-style-hdr {
+  font-size: 10px; font-weight: 600; color: var(--mauve); margin-bottom: 4px;
+}
+.detail-style-table { font-size: 11px; width: 100%; }
+.detail-style-table th { font-size: 9px; text-align: left; padding: 1px 4px; }
+.detail-style-table td { padding: 1px 4px; }
+
+/* === 3D Exploded Object View === */
+
+.scene-controls {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 0; margin-bottom: 4px;
+}
+.scene-label {
+  font-size: 10px; font-weight: 500; color: var(--overlay1);
+  text-transform: uppercase; letter-spacing: 0.3px;
+}
+.scene-slider {
+  width: 120px; height: 4px; accent-color: var(--blue);
+  cursor: pointer;
+}
+.scene-reset-btn {
+  padding: 2px 8px; border-radius: 4px;
+  border: 1px solid var(--surface0); background: var(--base);
+  color: var(--overlay1); cursor: pointer; font-size: 10px;
+  transition: all var(--transition);
+}
+.scene-reset-btn:hover { border-color: var(--blue); color: var(--blue); }
+.scene-toggle-btn {
+  padding: 2px 8px; border-radius: 4px;
+  border: 1px solid var(--surface0); background: var(--base);
+  color: var(--overlay1); cursor: pointer; font-size: 10px;
+  font-weight: 600; transition: all var(--transition);
+}
+.scene-toggle-btn:hover { border-color: var(--blue); color: var(--blue); }
+.scene-toggle-btn.active {
+  background: var(--icon-bg-blue); color: var(--blue); border-color: var(--blue);
+}
+
+.scene-layer-bar {
+  display: flex; flex-wrap: wrap; gap: 4px;
+  padding: 4px 0;
+}
+.scene-layer-btn {
+  padding: 2px 8px; border-radius: 4px;
+  border: 1px solid var(--surface0);
+  border-bottom: 2px solid var(--surface1);
+  background: var(--base); color: var(--overlay0);
+  cursor: pointer; font-size: 10px; font-weight: 500;
+  font-family: "JetBrains Mono", monospace;
+  transition: all var(--transition); user-select: none;
+}
+.scene-layer-btn:hover { border-color: var(--blue); color: var(--text); }
+.scene-layer-btn.active {
+  background: var(--icon-bg-blue); color: var(--text);
+  border-color: var(--blue);
+}
+
+.scene-viewport {
+  width: 100%; flex: 1; min-height: 400px; perspective: 1200px;
+  overflow: hidden; cursor: grab; border-radius: var(--radius-sm);
+  background: var(--crust); border: 1px solid var(--surface0);
+  position: relative; transform-origin: center center;
+}
+.scene-3d {
+  position: absolute; top: 50%; left: 50%;
+  transform-style: preserve-3d;
+}
+.scene-layer {
+  position: absolute; border: 1.5px solid;
+  background: var(--scene-layer-bg);
+  border-radius: 2px; cursor: pointer;
+  transition: background 0.15s ease, box-shadow 0.15s ease;
+}
+.scene-buf-layer {
+  position: absolute; border-radius: 2px;
+  overflow: hidden; pointer-events: none;
+  box-shadow: 0 0 0 1px var(--surface1);
+}
+.scene-buf-layer img {
+  display: block; image-rendering: pixelated;
+}
+.scene-buf-overlay {
+  position: absolute; top: 0; left: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+}
+.scene-layer-hover, .scene-layer.hl-active {
+  background: var(--scene-layer-hover-bg);
+  box-shadow: var(--scene-layer-hover-shadow);
+  z-index: 10;
+}
+
+/* === Linked highlight === */
+.obj-node.hl-active > summary {
+  background: var(--nav-active-bg); color: var(--blue);
+  border-radius: 4px;
+}
+
+.scene-tooltip {
+  display: none; position: absolute; z-index: 100;
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: 6px; padding: 4px 8px;
+  font-family: "JetBrains Mono", monospace; font-size: 10px;
+  color: var(--text); white-space: nowrap;
+  pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+/* === Subject Cards === */
+.subject-card {
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden;
+}
+.subject-card:last-child { margin-bottom: 0; }
+.subject-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px; font-size: 11px;
+  border-bottom: 1px solid var(--surface0);
+}
+
+.subject-addr { font-family: "JetBrains Mono", monospace; color: var(--sapphire); }
+.subject-type { color: var(--mauve); font-weight: 600; }
+.subject-card table { font-size: 11px; }
+
+/* === Drop Zone (fullscreen when no data loaded) === */
+#drop-zone {
+  grid-column: 1 / -1;
+  border: 2px dashed var(--surface1); border-radius: var(--radius);
+  padding: 48px 24px; text-align: center;
+  color: var(--overlay1); cursor: pointer;
+  transition: all var(--transition);
+  min-height: calc(100vh - 44px - 48px);
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+}
+#drop-zone:hover, #drop-zone.dragover {
+  border-color: var(--blue); background: var(--glow-blue);
+}
+.drop-icon { font-size: 36px; margin-bottom: 8px; }
+.drop-hint { font-size: 11px; color: var(--overlay0); margin-top: 6px; }
+.drop-hint code { background: var(--surface0); padding: 2px 6px; border-radius: 4px; }
+#file-input { display: none; }
+
+/* === Shared visualization components === */
+.badge {
+  display: inline-block; padding: 1px 7px; border-radius: 6px;
+  font-size: 10px; font-weight: 600; white-space: nowrap;
+  border: var(--badge-border); text-shadow: var(--badge-text-shadow);
+}
+.badge-green  { background: var(--icon-bg-green);  color: var(--green); }
+.badge-yellow { background: rgba(249,226,175,0.12); color: var(--yellow); }
+.badge-red    { background: rgba(243,139,168,0.12); color: var(--red); }
+.badge-blue   { background: var(--icon-bg-blue);   color: var(--blue); }
+.badge-mauve  { background: var(--icon-bg-mauve);  color: var(--mauve); }
+.badge-peach  { background: var(--icon-bg-peach);  color: var(--peach); }
+.badge-teal   { background: var(--icon-bg-teal);   color: var(--teal); }
+
+.mono-addr {
+  font-family: "JetBrains Mono", monospace; font-size: 11px;
+  color: var(--sapphire);
+}
+.kv-row {
+  display: flex; align-items: baseline; gap: 8px;
+  font-size: 11px; padding: 1px 0;
+}
+.kv-label {
+  color: var(--overlay1); font-size: 10px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.3px;
+  min-width: 70px; flex-shrink: 0;
+}
+.kv-value {
+  color: var(--subtext1);
+  font-family: "JetBrains Mono", monospace; font-size: 11px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* Progress bar */
+.progress-bar {
+  flex: 1; height: 6px; background: var(--surface0);
+  border-radius: 3px; overflow: hidden;
+}
+.progress-fill {
+  height: 100%; border-radius: 3px;
+  transition: width 0.3s ease;
+}
+.progress-fill.blue  { background: var(--blue); }
+.progress-fill.green { background: var(--green); }
+
+/* === Animation cards === */
+/* === Timer cards === */
+.timer-card {
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden;
+}
+.timer-card:last-child { margin-bottom: 0; }
+.timer-info-row {
+  display: flex; flex-wrap: wrap; gap: 4px 16px;
+}
+.anim-card, .indev-card, .group-card, .dtask-card {
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden;
+}
+.anim-card:last-child, .indev-card:last-child,
+.group-card:last-child, .dtask-card:last-child { margin-bottom: 0; }
+
+.anim-header, .timer-header, .indev-header, .group-header, .dtask-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px; border-bottom: 1px solid var(--surface0);
+}
+.anim-info, .timer-info, .indev-info, .group-info, .dtask-info {
+  padding: 6px 10px;
+}
+.anim-value-row {
+  display: flex; align-items: center; gap: 8px;
+  margin: 4px 0;
+}
+.anim-val-label {
+  font-family: "JetBrains Mono", monospace; font-size: 10px;
+  color: var(--overlay1); white-space: nowrap;
+}
+.anim-cur-val {
+  font-size: 10px; color: var(--overlay1); text-align: right;
+}
+
+/* === Input device cards === */
+.indev-type-icon { font-size: 18px; }
+.indev-type-name { font-weight: 600; font-size: 12px; color: var(--text); }
+
+/* === Group cards === */
+.group-members { margin-top: 4px; }
+.member-list {
+  display: flex; flex-wrap: wrap; gap: 4px;
+  font-family: "JetBrains Mono", monospace; font-size: 10px;
+}
+
+/* === Image cache grid === */
+.cache-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 6px;
+}
+.cache-entry {
+  display: flex; align-items: center;
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); overflow: hidden;
+}
+.cache-thumb {
+  width: 36px; height: 36px; flex-shrink: 0; margin: 6px;
+  border-radius: 4px; image-rendering: pixelated; object-fit: contain;
+  background: var(--surface0);
+}
+.cache-info { padding: 4px 8px; flex: 1; min-width: 0; }
+.cache-src {
+  font-size: 10px; color: var(--text); font-weight: 500;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  margin-bottom: 2px;
+}
+.cache-meta-row {
+  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
+}
+.cache-size-label { font-size: 10px; color: var(--overlay1); }
+.cache-decoder-label { font-size: 10px; color: var(--overlay0); margin-top: 2px; }
+
+/* === Unit / Decoder / FS grids === */
+.unit-grid, .decoder-grid, .fs-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 6px;
+}
+.unit-card, .decoder-card, .fs-card {
+  background: var(--base); border: 1px solid var(--surface0);
+  border-radius: var(--radius-sm); padding: 10px; text-align: center;
+}
+.unit-name, .decoder-name {
+  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px;
+}
+.unit-idx { font-size: 18px; font-weight: 700; color: var(--blue); }
+.decoder-cbs { display: flex; gap: 4px; justify-content: center; margin: 6px 0; }
+.fs-letter {
+  font-size: 24px; font-weight: 800; color: var(--blue);
+  font-family: "JetBrains Mono", monospace;
+}
+.fs-driver-name { font-size: 11px; color: var(--subtext0); margin-bottom: 4px; }
+.fs-info { font-size: 11px; }
+.fs-cbs { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }
+
+/* === Empty / Utility === */
+.empty {
+  color: var(--overlay0); font-size: 12px; font-style: italic;
+  padding: 12px 0; text-align: center;
+}
+.hidden { display: none; }
+
+/* === Bento Grid Placement === */
+.panel-stat        { grid-column: span 2; }
+.panel-disp-trees  { grid-column: span 12; }
+.panel-disp-trees > .panel-body { overflow: auto; }
+
+/* All standard panels: span 4 columns */
+.panel-img-cache,
+.panel-hdr-cache,
+.panel-decoders,
+.panel-animations,
+.panel-timers,
+.panel-indevs,
+.panel-groups,
+.panel-draw-units,
+.panel-draw-tasks,
+.panel-subjects,
+.panel-fs-drivers {
+  grid-column: span 4;
+}
+
+/* Panel-specific overrides */
+.panel-img-cache > .panel-body { max-height: 400px; overflow-y: auto; }
+.panel-hdr-cache > .panel-body { max-height: 400px; overflow-y: auto; }
+.panel-hdr-cache .table-wrap { overflow-x: auto; }
+.panel-hdr-cache table { font-size: 11px; }
+
+/* Fixed-height panels with internal scroll */
+.panel-animations,
+.panel-timers,
+.panel-indevs,
+.panel-groups,
+.panel-draw-units,
+.panel-draw-tasks,
+.panel-subjects,
+.panel-fs-drivers,
+.panel-decoders {
+  max-height: 360px;
+}
+.panel-animations > .panel-body,
+.panel-timers > .panel-body,
+.panel-indevs > .panel-body,
+.panel-groups > .panel-body,
+.panel-draw-units > .panel-body,
+.panel-draw-tasks > .panel-body,
+.panel-subjects > .panel-body,
+.panel-fs-drivers > .panel-body,
+.panel-decoders > .panel-body {
+  overflow-y: auto;
+}
+
+@media (max-width: 1200px) {
+  .bento { grid-template-columns: repeat(6, 1fr); }
+  .panel-stat { grid-column: span 2; }
+  .panel-disp-trees { grid-column: span 6; }
+  .panel-disp-trees .obj-split { flex-direction: column; height: auto; }
+  .panel-disp-trees .obj-split > .obj-tree-view,
+  .panel-disp-trees .obj-split > .obj-detail-view { flex: 0 0 auto; max-height: 300px; }
+
+  .panel-img-cache,
+  .panel-hdr-cache,
+  .panel-decoders { grid-column: span 6; }
+
+  .panel-animations, .panel-timers, .panel-indevs,
+  .panel-groups, .panel-draw-units,
+  .panel-draw-tasks, .panel-subjects,
+  .panel-fs-drivers { grid-column: span 3; }
+}
+@media (max-width: 768px) {
+  .bento { grid-template-columns: 1fr; }
+  .bento > * { grid-column: span 1; }
+  .topbar-nav { display: none; }
+}
diff --git a/scripts/gdb/lvglgdb/cmds/dashboard/static/template.html b/scripts/gdb/lvglgdb/cmds/dashboard/static/template.html
new file mode 100644
index 0000000000..93bd97487b
--- /dev/null
+++ b/scripts/gdb/lvglgdb/cmds/dashboard/static/template.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>LVGL Dashboard</title>
+<style>
+{{CSS}}
+</style>
+</head>
+<body>
+<header class="topbar">
+  <div class="topbar-brand">
+    <span class="logo">LV</span> LVGL Dashboard
+  </div>
+  <div class="topbar-sep"></div>
+  <div class="topbar-meta" id="header-meta"></div>
+  <nav class="topbar-nav" id="topbar-nav"></nav>
+  <button class="theme-toggle" id="theme-toggle" title="Toggle light/dark theme"
+          aria-label="Toggle theme">🌙</button>
+  <input type="text" class="topbar-search" id="search"
+         placeholder="Filter..." aria-label="Search">
+</header>
+<main class="main">
+  <div class="bento" id="bento-grid">
+    <div id="drop-zone" style="display:none">
+      <div class="drop-icon">📂</div>
+      <p>Drag &amp; drop a JSON file here, or click to select</p>
+      <div class="drop-hint">Exported via <code>dump dashboard --json</code></div>
+      <input type="file" id="file-input" accept=".json" aria-label="Load JSON file">
+    </div>
+  </div>
+</main>
+<script type="application/json" id="lvgl-data">{{JSON_DATA}}</script>
+<script>
+{{JS}}
+</script>
+</body>
+</html>
diff --git a/scripts/gdb/lvglgdb/lvgl/draw/lv_draw_buf.py b/scripts/gdb/lvglgdb/lvgl/draw/lv_draw_buf.py
index db3e0602b7..0001e7e345 100644
--- a/scripts/gdb/lvglgdb/lvgl/draw/lv_draw_buf.py
+++ b/scripts/gdb/lvglgdb/lvgl/draw/lv_draw_buf.py
@@ -75,9 +75,50 @@ class LVDrawBuf(Value):
         """Get the buffer data ptr"""
         return self.super_value("data")
 
-    def data_dump(self, filename: str, format: str = None) -> bool:
+    def _read_image(self, strict: bool = False) -> Optional[Image.Image]:
+        """Read buffer data and convert to PIL Image.
+
+        Args:
+            strict: If True, raise on any size mismatch instead of ignoring.
+
+        Returns:
+            PIL.Image or None on failure.
         """
-        Dump the buffer data to an image file.
+        header = self.super_value("header")
+        stride = int(header["stride"])
+        height = int(header["h"])
+        cf_info = self.color_format_info()
+        data_ptr = self.super_value("data")
+        data_size = int(self.super_value("data_size"))
+        width = (stride * 8) // cf_info["bpp"] if cf_info["bpp"] else 0
+        expected_data_size = stride * height
+
+        if not data_ptr or width <= 0 or height <= 0:
+            if strict:
+                raise ValueError(f"Invalid buffer: ptr={data_ptr}, {width}x{height}")
+            return None
+        if data_size < expected_data_size:
+            if strict:
+                raise ValueError(
+                    f"Data too small: expected at least {expected_data_size},"
+                    f" got {data_size}"
+                )
+            return None
+        if data_size > expected_data_size and strict:
+            gdb.write(
+                f"Warning: data_size {data_size} exceeds expected"
+                f" {expected_data_size}, extra bytes will be ignored\n"
+            )
+
+        pixel_data = (
+            gdb.selected_inferior()
+            .read_memory(int(data_ptr), expected_data_size)
+            .tobytes()
+        )
+        return self._convert_to_image(pixel_data, width, height, cf_info["value"])
+
+    def data_dump(self, filename: str, format: str = None) -> bool:
+        """Dump the buffer data to an image file.
 
         Args:
             filename: Output file path
@@ -87,57 +128,19 @@ class LVDrawBuf(Value):
             bool: True if successful, False otherwise
         """
         try:
-            # Validate input parameters
             if not filename:
                 raise ValueError("Output filename cannot be empty")
 
-            # Get buffer metadata
-            header = self.super_value("header")
-            stride = int(header["stride"])
-            height = int(header["h"])
-            cf_info = self.color_format_info()
-            data_ptr = self.super_value("data")
-            data_size = int(self.super_value("data_size"))
-            width = (stride * 8) // cf_info["bpp"] if cf_info["bpp"] else 0
-            expected_data_size = stride * height
-
-            # Validate buffer data
-            if not data_ptr:
-                raise ValueError("Data pointer is NULL")
-            if width <= 0 or height <= 0:
-                raise ValueError(f"Invalid dimensions: {width}x{height}")
-            if data_size <= 0:
-                raise ValueError(f"Invalid data size: {data_size}")
-            if data_size < expected_data_size:
-                raise ValueError(
-                    f"Data size mismatch: expected {expected_data_size}, got {data_size}"
-                )
-            elif data_size > expected_data_size:
-                gdb.write(
-                    f"\033[93mData size mismatch: expected {expected_data_size}, got {data_size}\033[0m\n"
-                )
-
-            # Read pixel data
-            pixel_data = (
-                gdb.selected_inferior()
-                .read_memory(int(data_ptr), expected_data_size)
-                .tobytes()
-            )
-            if not pixel_data:
-                raise ValueError("Failed to read pixel data")
-
-            # Process based on color format
-            img = self._convert_to_image(pixel_data, width, height, cf_info["value"])
+            img = self._read_image(strict=True)
             if img is None:
                 return False
 
-            # Determine output format
             output_format = (
                 format.upper() if format else Path(filename).suffix[1:].upper() or "BMP"
             )
-
-            # Save image
             img.save(filename, format=output_format)
+
+            cf_info = self.color_format_info()
             print(
                 f"Successfully saved {cf_info['name']} buffer as {output_format} to {filename}"
             )
@@ -153,6 +156,20 @@ class LVDrawBuf(Value):
             print(f"Unexpected error: {str(e)}")
             return False
 
+    def to_png_bytes(self) -> Optional[bytes]:
+        """Convert buffer to PNG bytes in memory. Returns None on failure."""
+        import io
+
+        try:
+            img = self._read_image(strict=False)
+            if img is None:
+                return None
+            buf = io.BytesIO()
+            img.save(buf, format="PNG")
+            return buf.getvalue()
+        except (gdb.MemoryError, Exception):
+            return None
+
     def _convert_to_image(
         self, pixel_data: bytes, width: int, height: int, color_format: int
     ) -> Optional[Image.Image]:
diff --git a/scripts/gdb/pyproject.toml b/scripts/gdb/pyproject.toml
index 02c89180b5..23ba2a0c64 100644
--- a/scripts/gdb/pyproject.toml
+++ b/scripts/gdb/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "lvglgdb"
-version = "0.3.0"
+version = "0.4.0"
 description = "LVGL GDB scripts"
 readme = "README.md"
 requires-python = ">=3.10"
@@ -11,6 +11,9 @@ dependencies = [
     "prettytable~=3.16.0",
 ]
 
+[tool.setuptools.package-data]
+lvglgdb = ["cmds/dashboard/static/*"]
+
 [project.urls]
 Homepage = "https://lvgl.io"
 Documentation = "https://docs.lvgl.io/master/debugging/gdb_plugin.html"