tawasuyu/brahman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(yahweh-widget-stat-card): promover patrón stat card como widget

Browse Source 
Iter 15. El patrón "tarjeta de dashboard con border-l accent +
label + value grande + descripción + listing opcional" tenía 2
consumers (minga-explorer + brahman-broker-explorer). Ahora vale
extraer al stack yahweh.

crates/modules/ui_engine/widgets/stat-card/:
- pub fn stat_card(cx, label, value: impl Into<SharedString>,
  description, accent, text, text_dim, recent_items: &[String])
  -> impl IntoElement.
- Compone yahweh-widget-card::card_themed; sin theme directo
  (caller pasa text/text_dim ya resueltos).
- 3 tests #[gpui::test] con TestAppContext + theme: smoke con/sin
  items, type-check value.

minga-explorer:
- Borra fn stat_card local (~60 líneas).
- Borra dep yahweh-widget-card.
- 3 callsites pasan value.to_string() (widget acepta
  Into<SharedString>).

brahman-broker-explorer:
- fn state_card refactorizada como wrap del stat_card compartido,
  preservando la traducción ProbeState→(accent,value,description)
  como helper local app-specific.
- Borra dep yahweh-widget-card.

Sub-header del listing: pasa de "recent (N de TOTAL):" a
"recent (N):" — el widget no conoce TOTAL; el caller lo pone en
label si quiere ("Nodos AST (5 de 247)"). Trade-off aceptable
por reusabilidad genérica.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sergio
2026-05-10 12:33:02 +00:00
parent 1493d616fd
commit af7417ce08
9 changed files with 276 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+55
View File
@@ -6,6 +6,61 @@ ratio/diff ver `git show <sha>`.
## 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<T>` por deref auto-coerce).
- `value: impl Into<SharedString>` — 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<SharedString>`).
- **`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<SharedString>` 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
Cargo.lock
Generated
+11 -2
View File
@@ -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"
Cargo.toml
+1
View File
@@ -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",
# ============================================================
crates/apps/brahman-broker-explorer/Cargo.toml
+1 -1
View File
@@ -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 }
crates/apps/brahman-broker-explorer/src/main.rs
+7 -27
View File
@@ -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<Explorer>,
@@ -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)]
crates/apps/minga-explorer/Cargo.toml
+1 -1
View File
@@ -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 }
crates/apps/minga-explorer/src/main.rs
+6 -66
View File
@@ -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<Explorer>,
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 {
crates/modules/ui_engine/widgets/stat-card/Cargo.toml
+14
View File
@@ -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" }
crates/modules/ui_engine/widgets/stat-card/src/lib.rs
+180
View File
@@ -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<SharedString>`, 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<T>` 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<SharedString>,
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<SharedString>. 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, &[]);
});
}
}