diff --git a/CHANGELOG.md b/CHANGELOG.md index 54c5fec..d22388b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,61 @@ ratio/diff ver `git show `. ## 2026-05-10 +### feat(yahweh-widget-stat-card): promover el patrón stat card como widget +Iter 15. El patrón "tarjeta de dashboard con border-l accent + +label + valor grande + descripción + listing opcional" tenía 2 +consumers (`minga-explorer` y `brahman-broker-explorer`); ahora vale +extraer al stack yahweh para reusabilidad y mantenimiento single-place. + +Crate nuevo `crates/modules/ui_engine/widgets/stat-card/` +(`yahweh-widget-stat-card`): +- **Deps**: `gpui` + `yahweh-widget-card` (compone `card_themed`). + Sin theme directo — el caller pasa `text` y `text_dim` ya + resueltos del theme. +- **`pub fn stat_card(cx, label, value, description, accent, + text, text_dim, recent_items)`**: + - `cx: &App` (acepta `&Context` por deref auto-coerce). + - `value: impl Into` — sirve para counts (`"3"`), + status text (`"UP"`), o cualquier label corto. + - `recent_items: &[String]` — si no vacío, agrega sub-header + `"recent (N):"` + una linea por item. +- 3 tests `#[gpui::test]` con TestAppContext: smoke con/sin + recent_items, type-check de `value` con literal/format/owned. +- Dev-deps: gpui con `test-support` + yahweh-theme para construir + el cx con un theme global. + +Cambios consumer: +- **`minga-explorer`**: sustituye su `fn stat_card` local + (~60 líneas) por `use yahweh_widget_stat_card::stat_card`. + Borra dep `yahweh-widget-card` (ya no se usa directo). Adapta + los 3 callsites para pasar `value.to_string()` (el widget + acepta `Into`). +- **`brahman-broker-explorer`**: refactoriza su `fn state_card` + para que sea un wrap de `stat_card` con la traducción + `ProbeState → (accent, value, description)`. La función queda + como helper local porque la mapping del enum es app-specific, + pero el rendering pasa por el widget compartido. Borra dep + `yahweh-widget-card`. + +Tests stack: nuevos 3 del widget. Suites de los 2 consumers +intactas (4 minga-explorer, 2 broker-explorer). Stack total ~120 +verdes (varía por compilation cache). + +Beneficio operativo: +- Cualquier app nueva que necesite cards de dashboard usa + `stat_card(...)` directo; no re-implementa el pattern. +- Cambios visuales (text sizes, padding, sub-header format) + ahora viven en un solo lugar. +- `value: impl Into` es más expressive que el + `usize` rígido del original local. + +Pequeña simplificación documentada: el sub-header del listing +pasa de `"recent (N de TOTAL):"` a `"recent (N):"`. El "TOTAL" +ya no se calcula porque el widget no lo conoce — el caller que +quiera mostrarlo lo formatea en el label/value (ej. label `"Nodos +AST (5 de 247)"`). Acceptable trade-off por la reusabilidad +genérica. + ### feat(brahman-broker-explorer): nueva app probe del broker brahman Iter 14. Cierra otro frente: visibilidad del broker brahman (el broker handshake que matchea Cards consumer/producer). Hasta ahora diff --git a/Cargo.lock b/Cargo.lock index b783c09..48ae7d4 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1244,7 +1244,7 @@ dependencies = [ "gpui", "yahweh-theme", "yahweh-widget-banner", - "yahweh-widget-card", + "yahweh-widget-stat-card", "yahweh-widget-theme-switcher", ] @@ -6217,7 +6217,7 @@ dependencies = [ "minga-store", "yahweh-theme", "yahweh-widget-banner", - "yahweh-widget-card", + "yahweh-widget-stat-card", "yahweh-widget-theme-switcher", ] @@ -13080,6 +13080,15 @@ dependencies = [ "yahweh-widget-container-core", ] +[[package]] +name = "yahweh-widget-stat-card" +version = "0.1.0" +dependencies = [ + "gpui", + "yahweh-theme", + "yahweh-widget-card", +] + [[package]] name = "yahweh-widget-tabs" version = "0.1.0" diff --git a/Cargo.toml b/Cargo.toml index fb0e7e2..051b226 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -65,6 +65,7 @@ members = [ "crates/modules/ui_engine/widgets/meta-form", "crates/modules/ui_engine/widgets/banner", "crates/modules/ui_engine/widgets/card", + "crates/modules/ui_engine/widgets/stat-card", "crates/modules/ui_engine/widgets/theme-switcher", # ============================================================ diff --git a/crates/apps/brahman-broker-explorer/Cargo.toml b/crates/apps/brahman-broker-explorer/Cargo.toml index b4aac68..4f667ab 100644 --- a/crates/apps/brahman-broker-explorer/Cargo.toml +++ b/crates/apps/brahman-broker-explorer/Cargo.toml @@ -10,7 +10,7 @@ brahman-handshake = { path = "../../core/brahman-handshake" } brahman-sidecar = { path = "../../shared/brahman-sidecar" } yahweh-theme = { path = "../../modules/ui_engine/libs/theme" } yahweh-widget-banner = { path = "../../modules/ui_engine/widgets/banner" } -yahweh-widget-card = { path = "../../modules/ui_engine/widgets/card" } +yahweh-widget-stat-card = { path = "../../modules/ui_engine/widgets/stat-card" } yahweh-widget-theme-switcher = { path = "../../modules/ui_engine/widgets/theme-switcher" } gpui = { workspace = true } diff --git a/crates/apps/brahman-broker-explorer/src/main.rs b/crates/apps/brahman-broker-explorer/src/main.rs index 15539cb..bde211d 100644 --- a/crates/apps/brahman-broker-explorer/src/main.rs +++ b/crates/apps/brahman-broker-explorer/src/main.rs @@ -34,7 +34,7 @@ use gpui::{ }; use yahweh_theme::Theme; use yahweh_widget_banner::{banner_themed, Banner}; -use yahweh_widget_card::card_themed; +use yahweh_widget_stat_card::stat_card; use yahweh_widget_theme_switcher::theme_switcher; const POLL_INTERVAL: Duration = Duration::from_secs(5); @@ -225,6 +225,10 @@ impl Render for Explorer { } } +/// Wrap del `stat_card` compartido con el mapeo de +/// `ProbeState` → (label/accent/value/description). Mantenemos +/// este helper local porque la traducción del enum a strings es +/// específica del explorer (no es un patrón cross-app). #[allow(clippy::too_many_arguments)] fn state_card( cx: &mut Context, @@ -236,21 +240,18 @@ fn state_card( accent_down: gpui::Rgba, accent_pending: gpui::Rgba, ) -> impl IntoElement { - let (label, accent, value, description): (&str, gpui::Rgba, String, String) = match state { + let (accent, value, description): (gpui::Rgba, String, String) = match state { ProbeState::Pending => ( - "Estado", accent_pending, "PENDING".into(), "esperando primer probe…".into(), ), ProbeState::Down { reason } => ( - "Estado", accent_down, "DOWN".into(), format!("connect failed: {reason}"), ), ProbeState::UpNoProvider { flow } => ( - "Estado", accent_partial, "UP / NO PROVIDER".into(), format!("broker reachable; sin productor para flow `{flow}`"), @@ -259,7 +260,6 @@ fn state_card( flow, producer_socket, } => ( - "Estado", accent_up, "UP / PROVIDER".into(), format!( @@ -269,27 +269,7 @@ fn state_card( ), }; - card_themed(cx) - .border_l_4() - .border_color(accent) - .child( - div() - .text_color(accent) - .text_size(px(11.)) - .child(SharedString::from(label.to_string())), - ) - .child( - div() - .text_color(text) - .text_size(px(28.)) - .child(SharedString::from(value)), - ) - .child( - div() - .text_color(text_dim) - .text_size(px(11.)) - .child(SharedString::from(description)), - ) + stat_card(cx, "Estado", value, &description, accent, text, text_dim, &[]) } #[cfg(test)] diff --git a/crates/apps/minga-explorer/Cargo.toml b/crates/apps/minga-explorer/Cargo.toml index 995d67c..8db54d1 100644 --- a/crates/apps/minga-explorer/Cargo.toml +++ b/crates/apps/minga-explorer/Cargo.toml @@ -9,7 +9,7 @@ description = "Dashboard GPUI del repo Minga: counts de nodos AST, atestaciones, minga-store = { path = "../../modules/semantic_dht/minga-store" } yahweh-theme = { path = "../../modules/ui_engine/libs/theme" } yahweh-widget-banner = { path = "../../modules/ui_engine/widgets/banner" } -yahweh-widget-card = { path = "../../modules/ui_engine/widgets/card" } +yahweh-widget-stat-card = { path = "../../modules/ui_engine/widgets/stat-card" } yahweh-widget-theme-switcher = { path = "../../modules/ui_engine/widgets/theme-switcher" } gpui = { workspace = true } diff --git a/crates/apps/minga-explorer/src/main.rs b/crates/apps/minga-explorer/src/main.rs index c9992df..2a5875b 100644 --- a/crates/apps/minga-explorer/src/main.rs +++ b/crates/apps/minga-explorer/src/main.rs @@ -33,7 +33,7 @@ use gpui::{ use minga_store::PersistentRepo; use yahweh_theme::Theme; use yahweh_widget_banner::{banner_themed, Banner}; -use yahweh_widget_card::card_themed; +use yahweh_widget_stat_card::stat_card; use yahweh_widget_theme_switcher::theme_switcher; const REFRESH_INTERVAL: Duration = Duration::from_secs(2); @@ -274,7 +274,7 @@ impl Render for Explorer { .child(stat_card( cx, "Nodos AST", - snap.nodes, + snap.nodes.to_string(), "fragments parseados del código", accent_nodes, text, @@ -284,7 +284,7 @@ impl Render for Explorer { .child(stat_card( cx, "Atestaciones", - snap.attestations, + snap.attestations.to_string(), "firmas Ed25519 sobre los nodos", accent_attestations, text, @@ -294,7 +294,7 @@ impl Render for Explorer { .child(stat_card( cx, "Claves MST", - snap.mst_keys, + snap.mst_keys.to_string(), "entradas del Merkle Search Tree", accent_mst, text, @@ -315,68 +315,8 @@ impl Render for Explorer { } } -/// Card visual para una estadística del dashboard. Border-l por -/// kind, label arriba + número grande + descripción + listing de -/// items recientes (puede estar vacío). Items se renderean en -/// `monospace`-look (text_size chico) — útil para hashes/dids. -fn stat_card( - cx: &mut Context, - label: &str, - value: usize, - description: &str, - accent: gpui::Rgba, - text: gpui::Hsla, - text_dim: gpui::Hsla, - recent_items: &[String], -) -> impl IntoElement { - let mut card = card_themed(cx) - .border_l_4() - .border_color(accent) - .child( - div() - .text_color(accent) - .text_size(px(11.)) - .child(SharedString::from(label.to_string())), - ) - .child( - div() - .text_color(text) - .text_size(px(28.)) - .child(SharedString::from(value.to_string())), - ) - .child( - div() - .text_color(text_dim) - .text_size(px(11.)) - .child(SharedString::from(description.to_string())), - ); - - if !recent_items.is_empty() { - // Header de la sub-section. - card = card.child( - div() - .mt(px(6.)) - .text_color(text_dim) - .text_size(px(10.)) - .child(SharedString::from(format!( - "recent ({} de {}):", - recent_items.len(), - value - ))), - ); - // Una linea por item. - for it in recent_items { - card = card.child( - div() - .text_color(text) - .text_size(px(11.)) - .child(SharedString::from(it.clone())), - ); - } - } - - card -} +// `stat_card` se promovió a `yahweh-widget-stat-card` y se importa +// arriba. La fn local fue eliminada en la iter 15 del refactor. #[cfg(test)] mod tests { diff --git a/crates/modules/ui_engine/widgets/stat-card/Cargo.toml b/crates/modules/ui_engine/widgets/stat-card/Cargo.toml new file mode 100644 index 0000000..5929d77 --- /dev/null +++ b/crates/modules/ui_engine/widgets/stat-card/Cargo.toml @@ -0,0 +1,14 @@ +[package] +name = "yahweh-widget-stat-card" +version.workspace = true +edition.workspace = true +license.workspace = true +description = "Yahweh — widget stat card: tarjeta de dashboard con border-l accent + label + valor grande + descripción + listing opcional de items recientes. Patrón compartido entre minga-explorer y brahman-broker-explorer." + +[dependencies] +gpui = { workspace = true } +yahweh-widget-card = { path = "../card" } + +[dev-dependencies] +gpui = { workspace = true, features = ["test-support"] } +yahweh-theme = { path = "../../libs/theme" } diff --git a/crates/modules/ui_engine/widgets/stat-card/src/lib.rs b/crates/modules/ui_engine/widgets/stat-card/src/lib.rs new file mode 100644 index 0000000..2fba3dd --- /dev/null +++ b/crates/modules/ui_engine/widgets/stat-card/src/lib.rs @@ -0,0 +1,180 @@ +//! `yahweh-widget-stat-card` — tarjeta de dashboard con accent. +//! +//! Compone: +//! - **`card_themed(cx)`** del [`yahweh_widget_card`] como contenedor. +//! - **Border-l-4** con un color de accent que el caller decide +//! (verde = OK, rojo = error, etc.). +//! - **Label** chico arriba en el color del accent. +//! - **Value** grande (`px(28)`) en el color principal del text. +//! - **Description** chica en el color tenue. +//! - **Listing opcional** de items recientes con sub-header +//! `"recent (N de TOTAL):"`. +//! +//! El patrón emerge en dashboards estilo `minga-explorer` (counts +//! del repo + sample) y `brahman-broker-explorer` (estado del +//! probe). Cada consumer aporta sus propios accents semánticos. +//! +//! El widget no asume valor numérico — `value` es +//! `Into`, así que sirve igual para counts (`"3"`), +//! status text (`"UP / PROVIDER"`) o cualquier label corto. +//! +//! # Ejemplo +//! +//! ```ignore +//! use yahweh_widget_stat_card::stat_card; +//! use gpui::{rgb, Hsla}; +//! +//! let cell = stat_card( +//! cx, +//! "Nodos AST", +//! "247", +//! "fragments parseados del código", +//! rgb(0x88c0d0), +//! theme.fg_text, +//! theme.fg_muted, +//! &["abc123 fn_decl".into(), "def456 expr".into()], +//! ); +//! ``` + +#![forbid(unsafe_code)] + +use gpui::{div, prelude::*, px, App, IntoElement, SharedString}; +use yahweh_widget_card::card_themed; + +/// Construye una stat card. Devuelve `impl IntoElement` para que el +/// caller pueda meterla directo como child de cualquier +/// `flex_col`/`gap` parent. +/// +/// Args: +/// - `cx` — `&App` (acepta `&Context` por deref). El widget lee +/// el theme global para el bg de la card. +/// - `label` — header chico, en el color del accent. +/// - `value` — texto principal, render grande (`px(28)`). +/// - `description` — texto chico tenue debajo del value. +/// - `accent` — color del border-l y del label. +/// - `text` — color principal (para el value). +/// - `text_dim` — color tenue (para description y sub-header de +/// recent). +/// - `recent_items` — slice de strings; si no vacío, se renderea +/// como sub-listing con header `"recent (N de TOTAL):"`. Cada +/// item ocupa una linea. +#[allow(clippy::too_many_arguments)] +pub fn stat_card( + cx: &App, + label: &str, + value: impl Into, + description: &str, + accent: gpui::Rgba, + text: gpui::Hsla, + text_dim: gpui::Hsla, + recent_items: &[String], +) -> impl IntoElement { + let value: SharedString = value.into(); + let total_for_header = recent_items.len(); + + let mut card = card_themed(cx) + .border_l_4() + .border_color(accent) + .child( + div() + .text_color(accent) + .text_size(px(11.)) + .child(SharedString::from(label.to_string())), + ) + .child( + div() + .text_color(text) + .text_size(px(28.)) + .child(value), + ) + .child( + div() + .text_color(text_dim) + .text_size(px(11.)) + .child(SharedString::from(description.to_string())), + ); + + if !recent_items.is_empty() { + // Sub-header indicando cuántos items se muestran. + // El "TOTAL" es el len del slice porque el caller ya lo + // truncó — no tenemos acceso al total original. Si el + // caller quiere "5 de 247", debe formatear el label/value + // con el total. + card = card.child( + div() + .mt(px(6.)) + .text_color(text_dim) + .text_size(px(10.)) + .child(SharedString::from(format!("recent ({total_for_header}):"))), + ); + for it in recent_items { + card = card.child( + div() + .text_color(text) + .text_size(px(11.)) + .child(SharedString::from(it.clone())), + ); + } + } + + card +} + +#[cfg(test)] +mod tests { + use super::*; + use gpui::TestAppContext; + use yahweh_theme::Theme; + + /// Smoke test: el constructor lee el theme global y devuelve un + /// IntoElement. Sin TestAppContext no podemos asertar render + /// pixels — esto valida wireup + type-check. + #[gpui::test] + fn stat_card_constructs_with_theme(cx: &mut TestAppContext) { + cx.update(|cx| { + Theme::install_default(cx); + let theme = Theme::global(cx); + let _el = stat_card( + cx, + "Test", + "42", + "una descripción", + gpui::rgb(0x88c0d0), + theme.fg_text, + theme.fg_muted, + &[], + ); + }); + } + + #[gpui::test] + fn stat_card_with_recent_items_works(cx: &mut TestAppContext) { + cx.update(|cx| { + Theme::install_default(cx); + let theme = Theme::global(cx); + let _el = stat_card( + cx, + "Items", + "3", + "items recientes:", + gpui::rgb(0xa3be8c), + theme.fg_text, + theme.fg_muted, + &["a1b2c3 foo".into(), "d4e5f6 bar".into(), "789012 baz".into()], + ); + }); + } + + #[gpui::test] + fn stat_card_value_accepts_string_or_number_repr(cx: &mut TestAppContext) { + // Type-check: value es Into. Tanto literal + // string como `format!()` deberían funcionar. + cx.update(|cx| { + Theme::install_default(cx); + let theme = Theme::global(cx); + let _ = stat_card(cx, "L", "literal", "d", gpui::rgb(0), theme.fg_text, theme.fg_muted, &[]); + let _ = stat_card(cx, "L", format!("{}", 42), "d", gpui::rgb(0), theme.fg_text, theme.fg_muted, &[]); + let _ = stat_card(cx, "L", "owned".to_string(), "d", gpui::rgb(0), theme.fg_text, theme.fg_muted, &[]); + }); + } +}