@downdraft/engine 0.0.0 → 0.1.0

package/libraries/devtools/native/src/panels/gpu.rs

@@ -0,0 +1,107 @@
+// panels/gpu.rs — GPU panel: device info + resources + frame-time graph.
+
+use crate::state::PanelId;
+use crate::DevtoolsState;
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    ui.horizontal(|ui| {
+        if ui.button("Refresh").clicked() {
+            state.gpu_refresh_requested = true;
+        }
+        ui.label(
+            egui::RichText::new(format!("{} entries", state.gpu_info.entries.len()))
+                
+                .color(egui::Color32::from_gray(140)),
+        );
+    });
+    ui.separator();
+
+    // Everything inside one scroll area so the whole panel scrolls.
+    egui::ScrollArea::vertical()
+        .auto_shrink([false, false])
+        .show(ui, |ui| {
+            // ── Frame-time graph ──
+            let ft = &state.gpu_info.frame_times;
+            if ft.len() >= 2 {
+                ui.label(egui::RichText::new("Frame time (ms)").strong().color(egui::Color32::from_gray(200)));
+                let (resp, painter) =
+                    ui.allocate_painter(egui::vec2(ui.available_width(), 80.0), egui::Sense::hover());
+                let rect = resp.rect;
+                let painter = &painter;
+                painter.rect_filled(rect, 0.0, egui::Color32::from_rgb(14, 14, 28));
+
+                let max_ms = ft
+                    .iter()
+                    .map(|s| s[0].max(s[1]))
+                    .fold(1.0f32, f32::max)
+                    .max(1.0);
+                let n = ft.len() as f32;
+                let w = rect.width();
+                let h = rect.height();
+                let plot = |idx: usize, val: f32, color: egui::Color32| {
+                    let x = rect.left() + (idx as f32 / n.max(1.0)) * w;
+                    let y = rect.bottom() - (val / max_ms) * h;
+                    (egui::pos2(x, y), color)
+                };
+                // CPU line
+                let mut prev = None;
+                for (i, s) in ft.iter().enumerate() {
+                    let (p, _) = plot(i, s[0], egui::Color32::from_rgb(120, 200, 255));
+                    if let Some(prev) = prev {
+                        painter.line_segment([prev, p], egui::Stroke::new(1.5, egui::Color32::from_rgb(120, 200, 255)));
+                    }
+                    prev = Some(p);
+                }
+                // GPU line
+                let mut prev = None;
+                for (i, s) in ft.iter().enumerate() {
+                    let (p, _) = plot(i, s[1], egui::Color32::from_rgb(255, 180, 80));
+                    if let Some(prev) = prev {
+                        painter.line_segment([prev, p], egui::Stroke::new(1.5, egui::Color32::from_rgb(255, 180, 80)));
+                    }
+                    prev = Some(p);
+                }
+                ui.horizontal(|ui| {
+                    ui.label(egui::RichText::new(format!("max {:.1} ms", max_ms)).color(egui::Color32::from_gray(140)).monospace());
+                    ui.add_space(8.0);
+                    ui.label(egui::RichText::new("CPU").color(egui::Color32::from_rgb(120, 200, 255)).monospace());
+                    ui.add_space(8.0);
+                    ui.label(egui::RichText::new("GPU").color(egui::Color32::from_rgb(255, 180, 80)).monospace());
+                });
+                ui.separator();
+            }
+
+            // ── Key/value grid ──
+            let stripe = egui::Color32::from_rgb(0x22, 0x23, 0x26);
+            for (idx, e) in state.gpu_info.entries.iter().enumerate() {
+                if e.is_header {
+                    ui.add_space(2.0);
+                    ui.label(
+                        egui::RichText::new(&e.key)
+                            .strong()
+                            .color(egui::Color32::from_rgb(80, 230, 120)),
+                    );
+                    ui.add_space(1.0);
+                } else {
+                    // Paint stripe background before the horizontal layout,
+                    // using the full available row rect from the parent UI.
+                    if idx % 2 == 1 {
+                        let rect = ui.available_rect_before_wrap();
+                        ui.painter().rect_filled(
+                            egui::Rect::from_min_size(rect.min, egui::vec2(rect.width(), 18.0)),
+                            0.0,
+                            stripe,
+                        );
+                    }
+                    ui.horizontal(|ui| {
+                        ui.add_space(4.0);
+                        ui.label(egui::RichText::new(&e.key).color(egui::Color32::from_gray(160)).monospace());
+                        ui.add_space(16.0);
+                        ui.label(egui::RichText::new(&e.value).color(egui::Color32::from_gray(230)).monospace());
+                    });
+                }
+            }
+        });
+
+    let _ = PanelId::Gpu;
+}

package/libraries/devtools/native/src/panels/input.rs

@@ -0,0 +1,88 @@
+// panels/input.rs — live view of the input the egui overlay sees (mouse,
+// modifiers, last keys, text-input capture) plus a provider-fed generic
+// snapshot for game-level input state (pointer lock, event rates, etc.).
+
+use crate::state::PanelId;
+use crate::DevtoolsState;
+
+const C_DIM: egui::Color32 = egui::Color32::from_rgb(0x9a, 0xa0, 0xa6);
+const C_TEXT: egui::Color32 = egui::Color32::from_rgb(0xe8, 0xea, 0xed);
+const C_HEADER: egui::Color32 = egui::Color32::from_rgb(0x8a, 0xb4, 0xf8);
+const C_ON: egui::Color32 = egui::Color32::from_rgb(0x81, 0xc9, 0x95);
+const C_OFF: egui::Color32 = egui::Color32::from_rgb(0x5f, 0x63, 0x68);
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    egui::ScrollArea::vertical()
+        .auto_shrink([false, false])
+        .show(ui, |ui| {
+            ui.label(egui::RichText::new("Overlay input (what egui sees)").strong().color(C_HEADER));
+
+            let inp = &state.input;
+            ui.horizontal(|ui| {
+                ui.label(egui::RichText::new("mouse").color(C_DIM).monospace());
+                ui.label(
+                    egui::RichText::new(format!("({:.0}, {:.0})", inp.mouse_pos.0, inp.mouse_pos.1))
+                        .color(C_TEXT)
+                        .monospace(),
+                );
+                ui.label(
+                    egui::RichText::new(if inp.mouse_in_window { "in-window" } else { "outside" })
+                        .color(if inp.mouse_in_window { C_ON } else { C_OFF })
+                        .monospace(),
+                );
+            });
+            ui.horizontal(|ui| {
+                ui.label(egui::RichText::new("buttons").color(C_DIM).monospace());
+                for (i, name) in ["L", "R", "M"].iter().enumerate() {
+                    let down = inp.mouse_down[i];
+                    ui.label(
+                        egui::RichText::new(format!("{}:{}", name, if down { "down" } else { "up" }))
+                            .color(if down { C_ON } else { C_OFF })
+                            .monospace(),
+                    );
+                }
+            });
+            ui.horizontal(|ui| {
+                ui.label(egui::RichText::new("mods").color(C_DIM).monospace());
+                ui.label(
+                    egui::RichText::new(format!(
+                        "alt={} ctrl={} shift={}",
+                        inp.modifiers_alt, inp.modifiers_ctrl, inp.modifiers_shift
+                    ))
+                    .color(C_TEXT)
+                    .monospace(),
+                );
+            });
+            ui.horizontal(|ui| {
+                ui.label(egui::RichText::new("wheel").color(C_DIM).monospace());
+                ui.label(
+                    egui::RichText::new(format!("{:.1}", inp.wheel)).color(C_TEXT).monospace(),
+                );
+            });
+            ui.horizontal(|ui| {
+                ui.label(egui::RichText::new("text input").color(C_DIM).monospace());
+                let wants = state.ctx.wants_keyboard_input();
+                ui.label(
+                    egui::RichText::new(if wants { "capturing" } else { "idle" })
+                        .color(if wants { C_ON } else { C_OFF })
+                        .monospace(),
+                );
+            });
+            if !inp.keys_pressed.is_empty() {
+                ui.horizontal(|ui| {
+                    ui.label(egui::RichText::new("keys").color(C_DIM).monospace());
+                    ui.label(
+                        egui::RichText::new(format!("{:?}", inp.keys_pressed))
+                            .color(C_TEXT)
+                            .monospace(),
+                    );
+                });
+            }
+
+            ui.separator();
+
+            // Game-level input state arrives as a generic snapshot on this
+            // slot — reuse the generic renderer's section rendering.
+            super::generic::render_sections(state, ui, PanelId::Input);
+        });
+}

package/libraries/devtools/native/src/panels/mod.rs

@@ -0,0 +1,154 @@
+// panels/mod.rs — dispatches to the active panel + shared tree renderer.
+
+pub mod console;
+pub mod dom_tree;
+pub mod generic;
+pub mod gpu;
+pub mod input;
+pub mod perf_metrics;
+pub mod perf_recorder;
+pub mod scene;
+
+use std::collections::HashMap;
+
+use crate::state::{PanelId, TreeNode};
+use crate::DevtoolsState;
+
+/// Render the active panel into the given Ui (inside the dock content area).
+pub fn render_panel(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    match state.active_panel {
+        PanelId::Console => console::render(state, ui),
+        PanelId::Scene => scene::render(state, ui),
+        PanelId::Gpu => gpu::render(state, ui),
+        PanelId::PerfRecorder => perf_recorder::render(state, ui),
+        PanelId::PerfMetrics => perf_metrics::render(state, ui),
+        PanelId::DomTree => dom_tree::render(state, ui),
+        PanelId::Input => input::render(state, ui),
+        // All provider-fed panels share the generic snapshot renderer.
+        PanelId::SimWorld
+        | PanelId::Memory
+        | PanelId::RenderGraph
+        | PanelId::Materials
+        | PanelId::Doctor
+        | PanelId::Workers
+        | PanelId::PostFx
+        | PanelId::Assets
+        | PanelId::Game => generic::render(state, ui, state.active_panel),
+    }
+}
+
+/// Render a flat node list (with parent_id) as a collapsible tree.
+/// Returns the id of the node the user clicked (if any) — caller updates
+/// selection state.
+pub fn render_tree_view(
+    ui: &mut egui::Ui,
+    nodes: &[TreeNode],
+    expanded: &mut std::collections::HashSet<u32>,
+    selected: &mut Option<u32>,
+) {
+    if nodes.is_empty() {
+        ui.label(
+            egui::RichText::new("(no nodes — open the panel or refresh)")
+                .color(egui::Color32::from_gray(120))
+                ,
+        );
+        return;
+    }
+
+    // Build children map: parent_id -> [child ids in order].
+    let mut children: HashMap<i32, Vec<u32>> = HashMap::new();
+    for n in nodes {
+        children.entry(n.parent_id).or_default().push(n.id);
+    }
+    let by_id: HashMap<u32, &TreeNode> = nodes.iter().map(|n| (n.id, n)).collect();
+
+    // Auto-expand root nodes on first render so the tree isn't empty.
+    // Only auto-expand for PIXI trees (kind=0); ECS trees (kind=1) have
+    // many flat root nodes and should not all be expanded.
+    let roots = children.get(&-1).cloned().unwrap_or_default();
+    let is_pixi = nodes.first().map(|n| n.kind == 0).unwrap_or(true);
+    if is_pixi {
+        if roots.len() == 1 {
+            // Single root: expand it and its first-level children for a useful default view.
+            expanded.insert(roots[0]);
+            if let Some(first_level) = children.get(&(roots[0] as i32)) {
+                for &child_id in first_level {
+                    expanded.insert(child_id);
+                }
+            }
+        }
+        for root_id in &roots {
+            expanded.insert(*root_id);
+        }
+    }
+
+    for root_id in roots {
+        render_tree_node(ui, root_id, &children, &by_id, expanded, selected);
+    }
+}
+
+fn render_tree_node(
+    ui: &mut egui::Ui,
+    id: u32,
+    children: &HashMap<i32, Vec<u32>>,
+    by_id: &HashMap<u32, &TreeNode>,
+    expanded: &mut std::collections::HashSet<u32>,
+    selected: &mut Option<u32>,
+) {
+    let node = match by_id.get(&id) {
+        Some(n) => *n,
+        None => return,
+    };
+    let has_children = node.child_count > 0;
+    let is_expanded = expanded.contains(&id);
+    let is_selected = *selected == Some(id);
+
+    ui.horizontal(|ui| {
+        // Expand/collapse triangle
+        if has_children {
+            let tri = if is_expanded { "\u{25be}" } else { "\u{25b8}" };
+            let resp = ui.add(
+                egui::Button::new(egui::RichText::new(tri).color(egui::Color32::from_gray(180)))
+                    .frame(false),
+            );
+            if resp.clicked() {
+                if is_expanded {
+                    expanded.remove(&id);
+                } else {
+                    expanded.insert(id);
+                }
+            }
+        } else {
+            ui.add_space(12.0);
+        }
+
+        // Label
+        let label_text = if node.detail.is_empty() {
+            node.label.clone()
+        } else {
+            format!("{}  {}", node.label, node.detail)
+        };
+        let color = if is_selected {
+            egui::Color32::WHITE
+        } else {
+            egui::Color32::from_gray(210)
+        };
+        let resp = ui.add(egui::Button::new(egui::RichText::new(label_text).color(color)).frame(false));
+        if is_selected {
+            ui.painter()
+                .rect_filled(resp.rect, 0.0, egui::Color32::from_rgba_premultiplied(80, 160, 255, 60));
+        }
+        if resp.clicked() {
+            *selected = Some(id);
+        }
+    });
+
+    if has_children && is_expanded {
+        let kids = children.get(&(id as i32)).cloned().unwrap_or_default();
+        for kid in kids {
+            ui.indent(format!("tree_{}", kid), |ui| {
+                render_tree_node(ui, kid, children, by_id, expanded, selected);
+            });
+        }
+    }
+}

package/libraries/devtools/native/src/panels/perf_metrics.rs

@@ -0,0 +1,91 @@
+// panels/perf_metrics.rs — Performance metrics: per-thread CPU/mem/gc charts.
+
+use crate::state::PanelId;
+use crate::DevtoolsState;
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    ui.horizontal(|ui| {
+        if ui.button("Refresh").clicked() {
+            state.metrics_refresh_requested = true;
+        }
+        ui.label(
+            egui::RichText::new(format!("{} threads", state.metrics.slots.len()))
+                
+                .color(egui::Color32::from_gray(140)),
+        );
+    });
+    ui.separator();
+
+    if state.metrics.slots.is_empty() {
+        ui.label(
+            egui::RichText::new("No per-thread metrics. ProfilingSAB not attached?")
+                .color(egui::Color32::from_gray(130)),
+        );
+        let _ = PanelId::PerfMetrics;
+        return;
+    }
+
+    egui::ScrollArea::vertical()
+        .auto_shrink([false, false])
+        .show(ui, |ui| {
+            for slot in &state.metrics.slots {
+                egui::CollapsingHeader::new(format!("{} (slot {})", slot.name, slot.slot_index))
+                    .default_open(true)
+                    .show(ui, |ui| {
+                        ui.label(
+                            egui::RichText::new(format!("runtime: {}", if slot.runtime == 0 { "js" } else { "wasm" }))
+                                
+                                .color(egui::Color32::from_gray(140)),
+                        );
+                        draw_chart(ui, "CPU %", &slot.history, |s| s.cpu_percent as f64, egui::Color32::from_rgb(120, 200, 255));
+                        draw_chart(ui, "Heap used (MB)", &slot.history, |s| s.heap_used / 1e6, egui::Color32::from_rgb(255, 180, 80));
+                        draw_chart(ui, "Heap total (MB)", &slot.history, |s| s.heap_total / 1e6, egui::Color32::from_rgb(200, 140, 240));
+                        draw_chart(ui, "GC pause max (us)", &slot.history, |s| s.gc_pause_max_us, egui::Color32::from_rgb(240, 90, 90));
+                        draw_chart(ui, "Task latency p95 (us)", &slot.history, |s| s.task_latency_p95_us, egui::Color32::from_rgb(80, 230, 120));
+                    });
+            }
+        });
+
+    let _ = PanelId::PerfMetrics;
+}
+
+fn draw_chart(
+    ui: &mut egui::Ui,
+    title: &str,
+    history: &[crate::state::ThreadMetricsSample],
+    val: impl Fn(&crate::state::ThreadMetricsSample) -> f64,
+    color: egui::Color32,
+) {
+    ui.horizontal(|ui| {
+        ui.label(egui::RichText::new(title).color(egui::Color32::from_gray(160)));
+        if let Some(last) = history.last() {
+            ui.label(
+                egui::RichText::new(format!("{:.2}", val(last)))
+                    
+                    .color(color),
+            );
+        }
+    });
+    let (resp, painter) = ui.allocate_painter(
+        egui::vec2(ui.available_width(), 48.0),
+        egui::Sense::hover(),
+    );
+    let rect = resp.rect;
+    let painter = &painter;
+    painter.rect_filled(rect, 0.0, egui::Color32::from_rgb(10, 10, 20));
+    if history.len() < 2 {
+        return;
+    }
+    let max_v = history.iter().map(|s| val(s)).fold(1.0f64, f64::max).max(1.0);
+    let n = history.len() as f32;
+    let mut prev: Option<egui::Pos2> = None;
+    for (i, s) in history.iter().enumerate() {
+        let x = rect.left() + (i as f32 / n.max(1.0)) * rect.width();
+        let y = rect.bottom() - (val(s) / max_v) as f32 * rect.height();
+        let p = egui::pos2(x, y);
+        if let Some(prev) = prev {
+            painter.line_segment([prev, p], egui::Stroke::new(1.5, color));
+        }
+        prev = Some(p);
+    }
+}

package/libraries/devtools/native/src/panels/perf_recorder.rs

@@ -0,0 +1,158 @@
+// panels/perf_recorder.rs — Performance recorder: CDP Profiler → flame chart.
+
+use crate::state::PanelId;
+use crate::DevtoolsState;
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    ui.horizontal(|ui| {
+        let profiling = state.perf_recording;
+        if ui.add_enabled(!profiling, egui::Button::new("Record")).clicked() {
+            state.perf_recording = true;
+            state.perf_record_requested = true;
+        }
+        if ui.add_enabled(profiling, egui::Button::new("Stop")).clicked() {
+            state.perf_recording = false;
+            state.perf_stop_requested = true;
+        }
+        if profiling {
+            ui.label(
+                egui::RichText::new("\u{25cf} recording")
+                    .color(egui::Color32::from_rgb(240, 90, 90)),
+            );
+        }
+    });
+    ui.separator();
+
+    let prof = match &state.profile {
+        Some(p) if !p.nodes.is_empty() => p,
+        _ => {
+            ui.label(
+                egui::RichText::new("No profile recorded. Click Record, wait, then Stop.")
+                    .color(egui::Color32::from_gray(130)),
+            );
+            let _ = PanelId::PerfRecorder;
+            return;
+        }
+    };
+
+    // Build a flat flame chart from the profile nodes.
+    // Each node: [start_us, end_us, depth, label]. We compute per-node time
+    // ranges from samples + time_deltas, falling back to even distribution.
+    let total_us = (prof.end_us - prof.start_us).max(1.0);
+    ui.label(
+        egui::RichText::new(format!(
+            "Profile: {} nodes, {} samples, {:.2} ms",
+            prof.nodes.len(),
+            prof.samples.len(),
+            total_us / 1000.0
+        ))
+        
+        .color(egui::Color32::from_gray(140)),
+    );
+
+    // Compute per-node self time from samples.
+    let mut self_time: std::collections::HashMap<u32, f64> = std::collections::HashMap::new();
+    for &s in &prof.samples {
+        *self_time.entry(s).or_default() += 0.0;
+    }
+    let mut t = prof.start_us;
+    for (i, &s) in prof.samples.iter().enumerate() {
+        let dt = prof.time_deltas_us.get(i).copied().unwrap_or(0.0);
+        *self_time.entry(s).or_default() += dt;
+        t += dt;
+    }
+    let _ = t;
+
+    // Compute depth via BFS from roots (nodes not referenced as children).
+    let mut depth: std::collections::HashMap<u32, u32> = std::collections::HashMap::new();
+    let roots: Vec<u32> = prof
+        .nodes
+        .iter()
+        .filter(|n| !prof.nodes.iter().any(|o| o.children.contains(&n.id)))
+        .map(|n| n.id)
+        .collect();
+    let by_id: std::collections::HashMap<u32, &crate::state::ProfileNode> =
+        prof.nodes.iter().map(|n| (n.id, n)).collect();
+    let mut queue: std::collections::VecDeque<(u32, u32)> =
+        roots.iter().map(|r| (*r, 0)).collect();
+    while let Some((id, d)) = queue.pop_front() {
+        depth.insert(id, d);
+        if let Some(n) = by_id.get(&id) {
+            for c in &n.children {
+                queue.push_back((*c, d + 1));
+            }
+        }
+    }
+
+    // Compute per-node start time by accumulating self-time along the
+    // sample timeline. Each sample's node "owns" the time delta that
+    // follows it, so we can build a timeline of when each node was active.
+    let mut node_start: std::collections::HashMap<u32, f64> = std::collections::HashMap::new();
+    let mut node_end: std::collections::HashMap<u32, f64> = std::collections::HashMap::new();
+    let mut t = prof.start_us;
+    for (i, &s) in prof.samples.iter().enumerate() {
+        let dt = prof.time_deltas_us.get(i).copied().unwrap_or(0.0);
+        let start = node_start.entry(s).or_insert(t);
+        if *start > t { *start = t; }
+        let end = node_end.entry(s).or_insert(t + dt);
+        *end = t + dt;
+        t += dt;
+    }
+
+    // Render the flame chart as stacked horizontal bars.
+    let (resp, painter) = ui.allocate_painter(ui.available_size_before_wrap(), egui::Sense::hover());
+    let rect = resp.rect;
+    let painter = &painter;
+    painter.rect_filled(rect, 0.0, egui::Color32::from_rgb(12, 12, 20));
+
+    let row_h = 16.0;
+    let max_depth = depth.values().copied().max().unwrap_or(0).min(40) + 1;
+    let chart_h = (max_depth as f32 * row_h).min(rect.height());
+    let x_for = |us: f64| rect.left() + ((us - prof.start_us) / total_us) as f32 * rect.width();
+
+    // Color palette by depth.
+    let palette = [
+        egui::Color32::from_rgb(230, 120, 80),
+        egui::Color32::from_rgb(230, 200, 80),
+        egui::Color32::from_rgb(120, 220, 120),
+        egui::Color32::from_rgb(120, 200, 240),
+        egui::Color32::from_rgb(200, 140, 240),
+        egui::Color32::from_rgb(240, 140, 160),
+    ];
+
+    for n in &prof.nodes {
+        let d = *depth.get(&n.id).unwrap_or(&0);
+        if d >= 40 {
+            continue;
+        }
+        let self_t = *self_time.get(&n.id).unwrap_or(&0.0);
+        if self_t <= 0.0 && n.hit_count == 0 {
+            continue;
+        }
+        // Use computed start/end from the sample timeline.
+        let start = *node_start.get(&n.id).unwrap_or(&prof.start_us);
+        let end = *node_end.get(&n.id).unwrap_or(&(prof.start_us + self_t));
+        let bar_w = ((end - start) / total_us * rect.width() as f64) as f32;
+        if bar_w < 1.0 {
+            continue;
+        }
+        let y = rect.top() + d as f32 * row_h;
+        let x = x_for(start);
+        let bar_rect = egui::Rect::from_min_size(egui::pos2(x, y), egui::vec2(bar_w, row_h - 1.0));
+        let color = palette[(d as usize) % palette.len()];
+        painter.rect_filled(bar_rect, 2.0, color);
+        if bar_w > 30.0 {
+            let label: String = n.call_frame.chars().take((bar_w / 6.0) as usize).collect();
+            painter.text(
+                bar_rect.center(),
+                egui::Align2::CENTER_CENTER,
+                label,
+                egui::FontId::proportional(9.0),
+                egui::Color32::BLACK,
+            );
+        }
+    }
+
+    let _ = chart_h;
+    let _ = PanelId::PerfRecorder;
+}

package/libraries/devtools/native/src/panels/scene.rs

@@ -0,0 +1,72 @@
+// panels/scene.rs — Scene panel: PIXI scene-graph tree (from gamePixiUi).
+
+use crate::state::PanelId;
+use crate::DevtoolsState;
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    ui.horizontal(|ui| {
+        if ui.button("Refresh").clicked() {
+            state.scene_refresh_requested = true;
+        }
+        ui.label(
+            egui::RichText::new(format!("{} nodes", state.scene_tree.nodes.len()))
+                
+                .color(egui::Color32::from_gray(140)),
+        );
+    });
+    ui.separator();
+
+    // Split: tree on top, details for selected node at the bottom.
+    let avail = ui.available_size();
+    let details_h = 100.0;
+    let tree_h = (avail.y - details_h - 8.0).max(64.0);
+
+    egui::ScrollArea::vertical()
+        .max_height(tree_h)
+        .auto_shrink([false, false])
+        .show(ui, |ui| {
+            super::render_tree_view(
+                ui,
+                &state.scene_tree.nodes,
+                &mut state.scene_expanded,
+                &mut state.scene_selected,
+            );
+        });
+
+    ui.separator();
+    ui.label(egui::RichText::new("Inspector").strong().color(egui::Color32::from_rgb(80, 230, 120)));
+    if let Some(sel_id) = state.scene_selected {
+        let by_id: std::collections::HashMap<u32, &crate::state::TreeNode> =
+            state.scene_tree.nodes.iter().map(|n| (n.id, n)).collect();
+        if let Some(node) = by_id.get(&sel_id) {
+            let node = *node;
+            egui::Grid::new("scene_inspector").num_columns(2).spacing([12.0, 4.0]).show(ui, |ui| {
+                ui.label(egui::RichText::new("Label").color(egui::Color32::from_gray(140)));
+                ui.label(egui::RichText::new(&node.label).color(egui::Color32::from_gray(220)));
+                ui.end_row();
+                ui.label(egui::RichText::new("Type").color(egui::Color32::from_gray(140)));
+                ui.label(egui::RichText::new(&node.detail).color(egui::Color32::from_gray(220)));
+                ui.end_row();
+                ui.label(egui::RichText::new("ID").color(egui::Color32::from_gray(140)));
+                ui.label(egui::RichText::new(format!("{}", node.id)).color(egui::Color32::from_gray(220)).monospace());
+                ui.end_row();
+                ui.label(egui::RichText::new("Depth").color(egui::Color32::from_gray(140)));
+                ui.label(egui::RichText::new(format!("{}", node.depth)).color(egui::Color32::from_gray(220)).monospace());
+                ui.end_row();
+                ui.label(egui::RichText::new("Children").color(egui::Color32::from_gray(140)));
+                ui.label(egui::RichText::new(format!("{}", node.child_count)).color(egui::Color32::from_gray(220)).monospace());
+                ui.end_row();
+                ui.label(egui::RichText::new("Kind").color(egui::Color32::from_gray(140)));
+                let kind_str = match node.kind { 0 => "PIXI", 1 => "ECS", _ => "?" };
+                ui.label(egui::RichText::new(kind_str).color(egui::Color32::from_gray(220)));
+                ui.end_row();
+            });
+        } else {
+            ui.label(egui::RichText::new("(selected node not found)").color(egui::Color32::from_gray(120)));
+        }
+    } else {
+        ui.label(egui::RichText::new("Click a node to inspect it.").color(egui::Color32::from_gray(130)));
+    }
+
+    let _ = PanelId::Scene;
+}