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

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>

CHANGELOG.md

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)
+    stat_card(cx, "Estado", value, &description, accent, text, text_dim, &[])
-        .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)),
-        )
 }
 
 #[cfg(test)]

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 }
 

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
+// `stat_card` se promovió a `yahweh-widget-stat-card` y se importa
-/// kind, label arriba + número grande + descripción + listing de
+// arriba. La fn local fue eliminada en la iter 15 del refactor.
-/// 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
-}
 
 #[cfg(test)]
 mod tests {

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" }

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<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, &[]);
+        });
+    }
+}