@downdraft/engine 0.0.0 → 0.1.0

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

@@ -0,0 +1,338 @@
+// panels/console.rs — Console panel: logs + REPL + thread selector + filters.
+
+use crate::state::{ConsoleSeverity, EvalRequest};
+use crate::DevtoolsState;
+
+// Built-in autocomplete suggestions (mirrors the PixiJS version).
+const BUILTIN_SUGGESTIONS: &[&str] = &[
+    "console.log", "console.error", "console.warn", "console.info",
+    "JSON.stringify", "JSON.parse", "typeof", "instanceof",
+    "Object.keys", "Object.values", "Object.entries",
+    "Array.from", "Array.isArray",
+    "Math.floor", "Math.ceil", "Math.round", "Math.random",
+    "performance.now", "Date.now",
+    "process.memoryUsage", "process.cpuUsage",
+    "require", "import",
+    "await", "async", "function", "return",
+    "const", "let", "var",
+    "if", "else", "for", "while", "switch", "case",
+    "true", "false", "null", "undefined",
+];
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    let console = &mut state.console;
+    let avail = ui.available_size();
+
+    // ── Filter bar ──
+    ui.horizontal(|ui| {
+        // Thread selector
+        let current_name = console
+            .threads
+            .iter()
+            .find(|t| t.id == console.selected_thread)
+            .map(|t| t.name.clone())
+            .unwrap_or_else(|| "main".to_string());
+        egui::ComboBox::from_id_salt("thread_selector")
+            .selected_text(format!("\u{25b8} {}", current_name))
+            .width(110.0)
+            .show_ui(ui, |ui| {
+                for t in &console.threads {
+                    let label = format!("{} ({})", t.name, if t.kind == 0 { "main" } else { "worker" });
+                    if ui
+                        .selectable_label(console.selected_thread == t.id, label)
+                        .clicked()
+                    {
+                        console.selected_thread = t.id.clone();
+                    }
+                }
+            });
+
+        ui.separator();
+
+        // Severity filters
+        let filters: [(u8, &str, egui::Color32); 4] = [
+            (0, "All", egui::Color32::from_rgb(200, 200, 200)),
+            (1, "Errors", egui::Color32::from_rgb(240, 80, 80)),
+            (2, "Warnings", egui::Color32::from_rgb(230, 200, 80)),
+            (3, "Info", egui::Color32::from_rgb(100, 160, 240)),
+        ];
+        for (id, label, color) in filters {
+            let active = console.filter == id;
+            let btn = egui::Button::new(egui::RichText::new(label).color(if active { egui::Color32::WHITE } else { color }))
+                .selected(active);
+            if ui.add(btn).clicked() {
+                console.filter = id;
+            }
+        }
+
+        ui.separator();
+
+        // Clear
+        if ui.button("Clear").clicked() {
+            console.entries.clear();
+        }
+    });
+
+    ui.separator();
+
+    // ── Log area ──
+    // Reserve space for the REPL bar at the bottom.
+    let repl_h = 28.0;
+    let log_h = (avail.y - repl_h - 8.0).max(64.0);
+
+    // Build the filtered, displayed list (newest last, cap 200 to keep
+    // tessellated paint jobs within the FFI scratch buffer).
+    let display: Vec<&crate::state::ConsoleEntry> = console
+        .entries
+        .iter()
+        .rev()
+        .filter(|e| pass_filter(e.severity, console.filter))
+        .take(200)
+        .collect::<Vec<_>>()
+        .into_iter()
+        .rev()
+        .collect();
+
+    egui::ScrollArea::vertical()
+        .max_height(log_h)
+        .auto_shrink([false, false])
+        .stick_to_bottom(true)
+        .show(ui, |ui| {
+                    // Header row
+                    ui.horizontal(|ui| {
+                        ui.add(egui::Label::new(
+                            egui::RichText::new("Time").color(egui::Color32::from_gray(140)).monospace(),
+                        ));
+                        ui.add_space(56.0);
+                        ui.add(egui::Label::new(
+                            egui::RichText::new("Thread").color(egui::Color32::from_gray(140)).monospace(),
+                        ));
+                        ui.add_space(64.0);
+                        ui.add(egui::Label::new(
+                            egui::RichText::new("Message").color(egui::Color32::from_gray(140)).monospace(),
+                        ));
+                    });
+                    ui.separator();
+
+                    if display.is_empty() {
+                        ui.add_space(12.0);
+                        ui.label(
+                            egui::RichText::new("No console entries. Type below to evaluate expressions.")
+                                .color(egui::Color32::from_gray(120))
+                                ,
+                        );
+                        ui.label(
+                            egui::RichText::new("CDP captures console.log/warn/error from the main isolate.")
+                                .color(egui::Color32::from_gray(100))
+                                ,
+                        );
+                        ui.label(
+                            egui::RichText::new("Worker threads are evaluated via __devtoolsEval RPC.")
+                                .color(egui::Color32::from_gray(100))
+                                ,
+                        );
+                    }
+
+                    // Render entries with timestamp, thread, and message in
+                    // aligned columns, with alternating row backgrounds for
+                    // readability (Chrome DevTools style).
+                    let row_h = 18.0;
+                    let stripe = egui::Color32::from_rgb(0x22, 0x23, 0x26);
+                    for (idx, e) in display.iter().enumerate() {
+                        let (h, m, s, ms) = if e.timestamp > 0.0 {
+                            let secs = (e.timestamp / 1000.0) as u64;
+                            let ms_part = (e.timestamp as u64) % 1000;
+                            let h = (secs / 3600) % 24;
+                            let m = (secs / 60) % 60;
+                            let s = secs % 60;
+                            (h, m, s, ms_part)
+                        } else {
+                            (0, 0, 0, 0)
+                        };
+                        let time_str = format!("{:02}:{:02}:{:02}.{:03}", h, m, s, ms);
+                        let color = severity_color(e.severity);
+
+                        // 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(), row_h)),
+                                0.0,
+                                stripe,
+                            );
+                        }
+                        let row_resp = ui.horizontal(|ui| {
+                            ui.add(egui::Label::new(
+                                egui::RichText::new(&time_str)
+                                    .color(egui::Color32::from_gray(130))
+                                    .monospace(),
+                            ));
+                            ui.add_space(8.0);
+                            ui.add(egui::Label::new(
+                                egui::RichText::new(&e.thread)
+                                    .color(egui::Color32::from_gray(160))
+                                    .monospace(),
+                            ));
+                            ui.add_space(8.0);
+                            ui.add(egui::Label::new(
+                                egui::RichText::new(&e.text).color(color),
+                            ));
+                        });
+                        // Ensure each row has a consistent height.
+                        let _ = row_resp;
+                    }
+        });
+
+    ui.add_space(4.0);
+
+    // ── REPL bar ──
+    ui.horizontal(|ui| {
+        let prompt_color = if console.selected_thread == "main" {
+            egui::Color32::from_rgb(80, 230, 120)
+        } else {
+            egui::Color32::from_rgb(230, 200, 80)
+        };
+        ui.label(egui::RichText::new(">").strong().color(prompt_color));
+
+        // Autocomplete suggestion (ghost text) — show after the input.
+        let response = ui.add(
+            egui::TextEdit::singleline(&mut console.repl_input)
+                .desired_width(avail.x - 40.0)
+                .hint_text("Click to evaluate expressions...")
+                .id_salt("console_repl"),
+        );
+
+        // Submit on Enter when focused.
+        if response.lost_focus() && ui.input(|i| i.key_pressed(egui::Key::Enter)) {
+            let expr = console.repl_input.trim().to_string();
+            if !expr.is_empty() {
+                console.repl_history.push(expr.clone());
+                if console.repl_history.len() > 100 {
+                    console.repl_history.remove(0);
+                }
+                console.repl_history_idx = -1;
+                // Show the input as a REPL entry immediately.
+                console.entries.push(crate::state::ConsoleEntry {
+                    text: format!("> {}", expr),
+                    severity: ConsoleSeverity::Repl,
+                    thread: console.selected_thread.clone(),
+                    timestamp: (state.frame_start_us / 1000.0) as f64,
+                    has_stack: false,
+                });
+                // Enqueue the eval request for TS to pick up.
+                state.next_eval_id = state.next_eval_id.wrapping_add(1);
+                state.eval_requests.push_back(EvalRequest {
+                    request_id: state.next_eval_id,
+                    thread_id: console.selected_thread.clone(),
+                    expr,
+                });
+                console.repl_input.clear();
+                response.request_focus();
+            }
+        }
+
+        // History navigation (Up/Down) while focused.
+        if response.has_focus() {
+            let hist = &console.repl_history;
+            let idx = &mut console.repl_history_idx;
+            if ui.input(|i| i.key_pressed(egui::Key::ArrowUp)) && !hist.is_empty() {
+                *idx = if *idx < 0 {
+                    hist.len() as i32 - 1
+                } else {
+                    (*idx - 1).max(0)
+                };
+                if let Some(h) = hist.get(*idx as usize) {
+                    console.repl_input = h.clone();
+                }
+            }
+            if ui.input(|i| i.key_pressed(egui::Key::ArrowDown)) {
+                if *idx >= 0 {
+                    *idx += 1;
+                    if *idx >= hist.len() as i32 {
+                        *idx = -1;
+                        console.repl_input.clear();
+                    } else if let Some(h) = hist.get(*idx as usize) {
+                        console.repl_input = h.clone();
+                    }
+                }
+            }
+            // Tab = autocomplete
+            if ui.input(|i| i.key_pressed(egui::Key::Tab)) {
+                if let Some(s) = autocomplete(&console.repl_input, hist) {
+                    console.repl_input = s;
+                }
+            }
+        }
+    });
+}
+
+fn pass_filter(sev: ConsoleSeverity, filter: u8) -> bool {
+    match filter {
+        1 => matches!(sev, ConsoleSeverity::Error | ConsoleSeverity::ReplError),
+        2 => matches!(sev, ConsoleSeverity::Warn),
+        3 => matches!(
+            sev,
+            ConsoleSeverity::Info | ConsoleSeverity::Log | ConsoleSeverity::Debug | ConsoleSeverity::Trace
+        ),
+        _ => true,
+    }
+}
+
+fn severity_color(sev: ConsoleSeverity) -> egui::Color32 {
+    match sev {
+        ConsoleSeverity::Error | ConsoleSeverity::ReplError => egui::Color32::from_rgb(240, 90, 90),
+        ConsoleSeverity::Warn => egui::Color32::from_rgb(230, 200, 80),
+        ConsoleSeverity::Info => egui::Color32::from_rgb(120, 180, 240),
+        ConsoleSeverity::Debug | ConsoleSeverity::Trace => egui::Color32::from_rgb(160, 160, 160),
+        ConsoleSeverity::Repl => egui::Color32::from_rgb(80, 230, 120),
+        ConsoleSeverity::Log => egui::Color32::from_rgb(220, 220, 220),
+    }
+}
+
+fn thread_color(thread: &str) -> egui::Color32 {
+    let palette = [
+        egui::Color32::from_rgb(120, 200, 255),
+        egui::Color32::from_rgb(255, 180, 120),
+        egui::Color32::from_rgb(200, 140, 255),
+        egui::Color32::from_rgb(140, 230, 180),
+        egui::Color32::from_rgb(255, 140, 160),
+        egui::Color32::from_rgb(240, 220, 120),
+    ];
+    let mut h: u32 = 0;
+    for b in thread.bytes() {
+        h = h.wrapping_mul(31).wrapping_add(b as u32);
+    }
+    palette[(h as usize) % palette.len()]
+}
+
+fn format_time(ts_ms: f64) -> String {
+    // ts_ms is performance.now() in ms. Show HH:MM:SS.mmm relative-ish.
+    let secs = (ts_ms / 1000.0) as u64;
+    let h = (secs / 3600) % 24;
+    let m = (secs / 60) % 60;
+    let s = secs % 60;
+    let ms = (ts_ms % 1000.0) as u64;
+    format!("{:02}:{:02}:{:02}.{:03}", h, m, s, ms)
+}
+
+fn autocomplete(input: &str, history: &[String]) -> Option<String> {
+    if input.is_empty() {
+        return None;
+    }
+    for h in history.iter().rev() {
+        if h.starts_with(input) && h != input {
+            return Some(h.clone());
+        }
+    }
+    for s in BUILTIN_SUGGESTIONS {
+        if s.starts_with(input) && *s != input {
+            return Some(s.to_string());
+        }
+    }
+    None
+}
+
+// Allow PanelId comparison in this module.
+#[allow(unused_imports)]
+use crate::state::PanelId as _PanelId;

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

@@ -0,0 +1,47 @@
+// panels/dom_tree.rs — DOM/ECS panel: PIXI scene graph OR ECS entity tree.
+
+use crate::state::PanelId;
+use crate::DevtoolsState;
+
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui) {
+    ui.horizontal(|ui| {
+        ui.label("Mode:");
+        if ui
+            .selectable_label(state.dom_tree.mode == 0, "PIXI")
+            .clicked()
+        {
+            state.dom_tree.mode = 0;
+            state.dom_refresh_requested = true;
+        }
+        if ui
+            .selectable_label(state.dom_tree.mode == 1, "ECS")
+            .clicked()
+        {
+            state.dom_tree.mode = 1;
+            state.dom_refresh_requested = true;
+        }
+        ui.separator();
+        if ui.button("Refresh").clicked() {
+            state.dom_refresh_requested = true;
+        }
+        ui.label(
+            egui::RichText::new(format!("{} nodes", state.dom_tree.nodes.len()))
+                
+                .color(egui::Color32::from_gray(140)),
+        );
+    });
+    ui.separator();
+
+    egui::ScrollArea::vertical()
+        .auto_shrink([false, false])
+        .show(ui, |ui| {
+            super::render_tree_view(
+                ui,
+                &state.dom_tree.nodes,
+                &mut state.dom_expanded,
+                &mut state.dom_selected,
+            );
+        });
+
+    let _ = PanelId::DomTree;
+}

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

@@ -0,0 +1,317 @@
+// panels/generic.rs — renders a GenericSnapshot (KV / table / series /
+// lines / controls). Most data-driven panels share this renderer; controls
+// queue commands back to TS via state.command_queue.
+
+use crate::state::{
+    Control, DevtoolsCommand, KvRow, LineEntry, PanelId, SnapshotSection,
+    FLAG_ERROR, FLAG_HEADER, FLAG_WARN, STATUS_ERROR, STATUS_LOADING, STATUS_OK,
+    STATUS_UNSUPPORTED,
+};
+use crate::DevtoolsState;
+
+const C_TEXT: egui::Color32 = egui::Color32::from_rgb(0xe8, 0xea, 0xed);
+const C_DIM: egui::Color32 = egui::Color32::from_rgb(0x9a, 0xa0, 0xa6);
+const C_FAINT: egui::Color32 = egui::Color32::from_rgb(0x5f, 0x63, 0x68);
+const C_HEADER: egui::Color32 = egui::Color32::from_rgb(0x8a, 0xb4, 0xf8);
+const C_WARN: egui::Color32 = egui::Color32::from_rgb(0xfd, 0xd6, 0x63);
+const C_ERR: egui::Color32 = egui::Color32::from_rgb(0xf2, 0x8b, 0x82);
+const C_STRIPE: egui::Color32 = egui::Color32::from_rgb(0x22, 0x23, 0x26);
+const C_CHART_BG: egui::Color32 = egui::Color32::from_rgb(0x0a, 0x0a, 0x14);
+const SERIES_COLORS: [egui::Color32; 6] = [
+    egui::Color32::from_rgb(0x8a, 0xb4, 0xf8),
+    egui::Color32::from_rgb(0xfd, 0xd6, 0x63),
+    egui::Color32::from_rgb(0x81, 0xc9, 0x95),
+    egui::Color32::from_rgb(0xf2, 0x8b, 0x82),
+    egui::Color32::from_rgb(0xc5, 0x8a, 0xf9),
+    egui::Color32::from_rgb(0x78, 0xd9, 0xec),
+];
+
+/// Render the generic snapshot for `panel`. Called by all provider-fed panels.
+pub fn render(state: &mut DevtoolsState, ui: &mut egui::Ui, panel: PanelId) {
+    let slot = panel.as_u8();
+
+    // Toolbar: Refresh always queues a "refresh" command for this panel.
+    ui.horizontal(|ui| {
+        if ui.button("Refresh").clicked() {
+            state.command_queue.push_back(DevtoolsCommand {
+                panel: slot,
+                action: "refresh".to_string(),
+                payload: String::new(),
+            });
+        }
+        if let Some(snap) = state.snapshots.get(&slot) {
+            let status_txt = match snap.status {
+                STATUS_OK => format!("{} sections", snap.sections.len()),
+                STATUS_LOADING => "loading…".to_string(),
+                STATUS_UNSUPPORTED => "unsupported".to_string(),
+                STATUS_ERROR => "error".to_string(),
+                _ => "?".to_string(),
+            };
+            ui.label(egui::RichText::new(status_txt).color(C_FAINT));
+        } else {
+            ui.label(egui::RichText::new("no data").color(C_FAINT));
+        }
+    });
+    ui.separator();
+
+    egui::ScrollArea::vertical()
+        .auto_shrink([false, false])
+        .show(ui, |ui| {
+            render_sections(state, ui, panel);
+        });
+}
+
+/// Render the snapshot's sections for `panel` into `ui` (no toolbar/scroll —
+/// callers that need a bespoke header above the sections use this).
+pub fn render_sections(state: &mut DevtoolsState, ui: &mut egui::Ui, panel: PanelId) {
+    let slot = panel.as_u8();
+    // Take the snapshot out of the map so control widgets can mutate the
+    // stored values (checkbox/slider state) while we render.
+    let mut snap = match state.snapshots.remove(&slot) {
+        Some(s) => s,
+        None => {
+            ui.label(
+                egui::RichText::new("(no snapshot — press Refresh)")
+                    .color(egui::Color32::from_gray(120)),
+            );
+            return;
+        }
+    };
+
+    // Status banner for non-OK snapshots.
+    match snap.status {
+        STATUS_LOADING => {
+            ui.label(egui::RichText::new("Loading…").color(C_DIM));
+        }
+        STATUS_UNSUPPORTED => {
+            ui.label(
+                egui::RichText::new(format!(
+                    "Unsupported: {}",
+                    if snap.status_msg.is_empty() { "data source unavailable" } else { &snap.status_msg }
+                ))
+                .color(C_WARN),
+            );
+        }
+        STATUS_ERROR => {
+            ui.label(
+                egui::RichText::new(format!("Error: {}", snap.status_msg)).color(C_ERR),
+            );
+        }
+        _ => {}
+    }
+
+    for section in &mut snap.sections {
+        render_section(state, ui, panel, section);
+    }
+    if snap.sections.is_empty() && snap.status == STATUS_OK {
+        ui.label(egui::RichText::new("(empty snapshot)").color(C_FAINT));
+    }
+    state.snapshots.insert(slot, snap);
+}
+
+fn render_section(
+    state: &mut DevtoolsState,
+    ui: &mut egui::Ui,
+    panel: PanelId,
+    section: &mut SnapshotSection,
+) {
+    let name = section.name();
+    if !name.is_empty() {
+        ui.add_space(4.0);
+        ui.label(egui::RichText::new(name).strong().color(C_HEADER));
+        ui.add_space(1.0);
+    }
+    match section {
+        SnapshotSection::Kv { rows, .. } => render_kv(ui, rows),
+        SnapshotSection::Table { cols, rows, .. } => render_table(ui, cols, rows),
+        SnapshotSection::Series { series, .. } => render_series(ui, series),
+        SnapshotSection::Lines { lines, .. } => render_lines(ui, lines),
+        SnapshotSection::Controls { controls, .. } => {
+            render_controls(state, ui, panel, controls)
+        }
+    }
+}
+
+fn flag_color(flags: u8) -> Option<egui::Color32> {
+    if flags & FLAG_ERROR != 0 {
+        Some(C_ERR)
+    } else if flags & FLAG_WARN != 0 {
+        Some(C_WARN)
+    } else {
+        None
+    }
+}
+
+fn render_kv(ui: &mut egui::Ui, rows: &[KvRow]) {
+    for (idx, row) in rows.iter().enumerate() {
+        if row.flags & FLAG_HEADER != 0 {
+            ui.add_space(2.0);
+            ui.label(
+                egui::RichText::new(&row.key)
+                    .strong()
+                    .color(egui::Color32::from_rgb(80, 230, 120)),
+            );
+            continue;
+        }
+        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,
+                C_STRIPE,
+            );
+        }
+        ui.horizontal(|ui| {
+            ui.add_space(4.0);
+            let key_w = (ui.available_width() * 0.42).min(220.0);
+            ui.allocate_ui(egui::vec2(key_w, 18.0), |ui| {
+                ui.label(
+                    egui::RichText::new(&row.key).color(C_DIM).monospace(),
+                );
+            });
+            let color = flag_color(row.flags).unwrap_or(C_TEXT);
+            ui.label(egui::RichText::new(&row.value).color(color).monospace());
+        });
+    }
+}
+
+fn render_table(ui: &mut egui::Ui, cols: &[String], rows: &[Vec<String>]) {
+    if cols.is_empty() {
+        return;
+    }
+    let avail_w = ui.available_width();
+    let col_w = (avail_w / cols.len() as f32).max(48.0);
+
+    // Header row
+    ui.horizontal(|ui| {
+        for col in cols {
+            ui.allocate_ui(egui::vec2(col_w, 18.0), |ui| {
+                ui.label(
+                    egui::RichText::new(col).strong().color(C_HEADER).monospace(),
+                );
+            });
+        }
+    });
+    ui.painter().line_segment(
+        [
+            egui::pos2(ui.min_rect().left(), ui.min_rect().bottom()),
+            egui::pos2(ui.max_rect().right(), ui.min_rect().bottom()),
+        ],
+        egui::Stroke::new(1.0, egui::Color32::from_rgb(0x3c, 0x40, 0x43)),
+    );
+
+    for (idx, row) in rows.iter().enumerate() {
+        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,
+                C_STRIPE,
+            );
+        }
+        ui.horizontal(|ui| {
+            for (ci, cell) in row.iter().enumerate() {
+                ui.allocate_ui(egui::vec2(col_w, 18.0), |ui| {
+                    ui.label(
+                        egui::RichText::new(cell)
+                            .color(if ci == 0 { C_DIM } else { C_TEXT })
+                            .monospace(),
+                    );
+                });
+            }
+        });
+    }
+    if rows.is_empty() {
+        ui.label(egui::RichText::new("(no rows)").color(C_FAINT));
+    }
+}
+
+fn render_series(ui: &mut egui::Ui, series: &[crate::state::SeriesDef]) {
+    if series.is_empty() {
+        return;
+    }
+    // Legend row
+    ui.horizontal(|ui| {
+        for (i, s) in series.iter().enumerate() {
+            let color = SERIES_COLORS[i % SERIES_COLORS.len()];
+            let last = s.values.last().copied().unwrap_or(0.0);
+            ui.label(
+                egui::RichText::new(format!("{} {:.2}", s.name, last))
+                    .color(color)
+                    .monospace(),
+            );
+            ui.add_space(6.0);
+        }
+    });
+    let (resp, painter) =
+        ui.allocate_painter(egui::vec2(ui.available_width(), 56.0), egui::Sense::hover());
+    let rect = resp.rect;
+    painter.rect_filled(rect, 0.0, C_CHART_BG);
+
+    let max_v = series
+        .iter()
+        .flat_map(|s| s.values.iter().copied())
+        .fold(1.0f32, f32::max)
+        .max(1e-6);
+    for (i, s) in series.iter().enumerate() {
+        let color = SERIES_COLORS[i % SERIES_COLORS.len()];
+        let n = s.values.len() as f32;
+        let mut prev: Option<egui::Pos2> = None;
+        for (j, v) in s.values.iter().enumerate() {
+            let x = rect.left() + (j as f32 / n.max(1.0)) * rect.width();
+            let y = rect.bottom() - (v / max_v) * 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);
+        }
+    }
+    ui.label(
+        egui::RichText::new(format!("max {:.2}", max_v))
+            .color(C_FAINT)
+            .monospace(),
+    );
+}
+
+fn render_lines(ui: &mut egui::Ui, lines: &[LineEntry]) {
+    for line in lines {
+        let color = flag_color(line.flags).unwrap_or(C_TEXT);
+        ui.label(egui::RichText::new(&line.text).color(color).monospace());
+    }
+    if lines.is_empty() {
+        ui.label(egui::RichText::new("(none)").color(C_FAINT));
+    }
+}
+
+fn render_controls(
+    state: &mut DevtoolsState,
+    ui: &mut egui::Ui,
+    panel: PanelId,
+    controls: &mut [Control],
+) {
+    for ctl in controls.iter_mut() {
+        match ctl {
+            Control::Button { id, label, payload } => {
+                if ui.button(label.clone()).clicked() {
+                    state.queue_command(panel, id, payload.clone());
+                }
+            }
+            Control::Checkbox { id, label, checked } => {
+                let resp = ui.checkbox(checked, label.clone());
+                if resp.changed() {
+                    let v = *checked;
+                    state.queue_command(panel, id, if v { "1" } else { "0" }.to_string());
+                }
+            }
+            Control::Slider { id, label, value, min, max } => {
+                let resp = ui.add(
+                    egui::Slider::new(value, *min..=*max).text(label.clone()),
+                );
+                if resp.changed() {
+                    state.queue_command(panel, id, format!("{}", *value));
+                }
+            }
+        }
+    }
+}